/* ============================================================
   MILLENNIUM WORLD SCHOOL, CHEEKA — Main Stylesheet
   style.css
   ============================================================ */

/* ── Google Fonts imported via HTML <link> ── */

/* ══════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
══════════════════════════════════════════ */
:root {
  /* Brand colours extracted from logo */
  --blue:        #1a3a8f;   /* deep royal blue  */
  --blue-dk:     #122878;
  --blue-lt:     #2a52c9;
  --green:       #1a7a2e;   /* deep forest green */
  --green-dk:    #145a22;
  --green-lt:    #27a83f;

  /* UI colours */
  --crimson:     #8B1A4A;
  --gold:        #c9a84c;
  --gold-lt:     #e8d08a;
  --dark:        #080c14;
  --dark2:       #0f1520;
  --dark3:       #1a2235;
  --white:       #ffffff;
  --off-white:   #f7f9fc;
  --light-bg:    #eef2f8;
  --text-dark:   #12192e;
  --text-mid:    #4a5568;
  --text-light:  rgba(255,255,255,0.72);
  --border-lt:   rgba(255,255,255,0.12);
  --border-dk:   rgba(0,0,0,0.1);

  /* Card overlay colours (each card unique) */
  --c1:  rgba(26, 58, 143, 0.90);   /* royal blue      – Vision   */
  --c2:  rgba(26, 122, 46, 0.90);   /* forest green    – Curriculum */
  --c3:  rgba(80,  30,  10, 0.90);  /* warm brown      – Boarding  */
  --c4:  rgba(26, 58, 143, 0.88);   /* blue            – Admissions */
  --c5:  rgba(26, 122, 46, 0.88);   /* green           – Director  */
  --c6:  rgba(40,  20,  80, 0.90);  /* deep violet     – Faculty   */
  --c7:  rgba(18,  60,  60, 0.90);  /* dark cyan       – Tour      */
  --c8:  rgba(70,  20,  20, 0.90);  /* deep crimson    – Infra     */
  --c9:  rgba(35,  65,  20, 0.90);  /* olive green     – Sports    */
  --c10: rgba(25,  25,  70, 0.90);  /* midnight blue   – Results   */
  --c11: rgba(55,  30,  60, 0.90);  /* plum            – Career    */
  --c12: rgba(15,  65,  75, 0.90);  /* petrol blue     – Alumni    */

  /* Layout */
  --nav-top-h:  0px;
  --nav-main-h: 70px;
  --nav-total:  70px;
  --radius:     6px;
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ══════════════════════════════════════════
   2. RESET
══════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Jost', sans-serif;
  background:var(--white);
  color:var(--text-dark);
  overflow-x:hidden;
  line-height:1.6;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; }
ul { list-style:none; }

/* ══════════════════════════════════════════
   3. UTILITY CLASSES
══════════════════════════════════════════ */
.container { max-width:1240px; margin:0 auto; padding:0 24px; }
.section-pad { padding:80px 0; }
.section-pad-sm { padding:52px 0; }

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.24em; text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow::before, .eyebrow::after { content:''; width:24px; height:2px; flex-shrink:0; }
.eyebrow-blue  { color:var(--blue);  }
.eyebrow-blue::before, .eyebrow-blue::after   { background:var(--blue);  }
.eyebrow-green { color:var(--green); }
.eyebrow-green::before, .eyebrow-green::after { background:var(--green); }
.eyebrow-gold  { color:var(--gold);  }
.eyebrow-gold::before, .eyebrow-gold::after   { background:var(--gold);  }
.eyebrow-white { color:rgba(255,255,255,0.8); }
.eyebrow-white::before, .eyebrow-white::after { background:rgba(255,255,255,0.6); }

.section-title {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.9rem, 3.8vw, 3.2rem);
  font-weight:300; line-height:1.1; margin-bottom:14px;
}
.section-title em { font-style:italic; }
.section-title-blue em { color:var(--blue-lt); }
.section-title-green em { color:var(--green-lt); }
.section-title-white { color:var(--white); }
.section-title-white em { color:var(--gold-lt); }

.section-sub {
  font-size:clamp(0.85rem,1.4vw,0.98rem);
  color:var(--text-mid); max-width:620px; line-height:1.85;
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px; border:none; border-radius:3px;
  font-family:'Jost',sans-serif; font-size:0.78rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  transition:background 0.25s, transform 0.2s, box-shadow 0.25s;
  cursor:pointer;
}
.btn:hover { transform:translateY(-2px); }
.btn-blue  { background:var(--blue);  color:var(--white); box-shadow:0 4px 20px rgba(26,58,143,0.3); }
.btn-blue:hover  { background:var(--blue-lt); box-shadow:0 8px 28px rgba(26,58,143,0.45); }
.btn-green { background:var(--green); color:var(--white); box-shadow:0 4px 20px rgba(26,122,46,0.3); }
.btn-green:hover { background:var(--green-lt); box-shadow:0 8px 28px rgba(26,122,46,0.45); }
.btn-outline-white {
  background:transparent; color:var(--white);
  border:2px solid rgba(255,255,255,0.6);
  box-shadow:none;
}
.btn-outline-white:hover { background:rgba(255,255,255,0.1); border-color:var(--white); }
.btn-outline-blue {
  background:transparent; color:var(--blue);
  border:2px solid var(--blue);
}
.btn-outline-blue:hover { background:var(--blue); color:var(--white); }

/* Divider line */
.divider-line {
  width:52px; height:3px; border-radius:2px; margin:16px 0 24px;
}
.divider-blue  { background:var(--blue);  }
.divider-green { background:var(--green); }
.divider-gold  { background:var(--gold);  }

/* ══════════════════════════════════════════
   4. TOP UTILITY BAR
══════════════════════════════════════════ */
.topbar {
  display:none !important; /* Topbar removed per requirements */
  position:fixed; top:0; left:0; width:100%; z-index:600;
  height:var(--nav-top-h);
  background:var(--dark);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.topbar-left { display:flex; align-items:center; gap:20px; }
.topbar-info {
  display:flex; align-items:center; gap:6px;
  font-size:0.7rem; color:rgba(255,255,255,0.6);
  letter-spacing:0.05em;
}
.topbar-info a { color:rgba(255,255,255,0.6); transition:color 0.2s; }
.topbar-info a:hover { color:var(--gold); }
.topbar-divider { color:rgba(255,255,255,0.2); }

.topbar-right { display:flex; align-items:center; gap:0; }
.topbar-link {
  height:var(--nav-top-h); display:flex; align-items:center; padding:0 14px;
  color:rgba(255,255,255,0.7); font-size:0.68rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  border-left:1px solid rgba(255,255,255,0.1);
  transition:color 0.2s, background 0.2s;
}
.topbar-link:hover { color:var(--white); background:rgba(255,255,255,0.05); }
.topbar-apply {
  background:var(--blue); color:var(--white) !important;
  font-weight:700; border-left:none;
}
.topbar-apply:hover { background:var(--blue-lt) !important; }

/* ══════════════════════════════════════════
   5. MAIN NAVBAR
══════════════════════════════════════════ */
.navbar {
  position:fixed;
  top:0; left:0; width:100%; z-index:590;
  height:var(--nav-main-h);
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
  border-bottom:3px solid var(--blue);
  box-shadow:0 2px 20px rgba(0,0,0,0.1);
  transition:box-shadow 0.3s;
}
.navbar.scrolled { box-shadow:0 4px 28px rgba(0,0,0,0.15); }

/* Logo */
.nav-logo { flex-shrink:0; display:flex; align-items:center; }
.nav-logo img { height:58px; width:auto; object-fit:contain; }

/* Nav list */
.nav-list {
  display:flex; align-items:stretch;
  height:var(--nav-main-h); flex:1;
  justify-content:center; gap:0;
}
.nav-item { position:relative; height:100%; display:flex; align-items:center; }

.nav-link {
  display:flex; align-items:center; gap:4px;
  height:100%; padding:0 13px;
  color:var(--text-dark); font-size:0.72rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap;
  background:none; border:none; border-bottom:3px solid transparent;
  font-family:'Jost',sans-serif; transition:color 0.2s, border-color 0.2s;
  position:relative;
}
.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-item.open > .nav-link { color:var(--blue); border-bottom-color:var(--green); }

.nav-arrow { font-size:0.52rem; transition:transform 0.25s; margin-top:1px; }
.nav-item:hover > .nav-link .nav-arrow,
.nav-item.open > .nav-link .nav-arrow { transform:rotate(180deg); }

.nav-apply-btn {
  background:var(--blue); color:var(--white) !important;
  padding:0 18px; border-bottom-color:transparent !important;
  font-weight:700; margin-left:6px; flex-shrink:0;
}
.nav-apply-btn:hover { background:var(--blue-lt) !important; }

.nav-search-btn {
  background:none; border:none; padding:0 10px;
  color:var(--text-mid); font-size:1rem;
  display:flex; align-items:center; transition:color 0.2s;
}
.nav-search-btn:hover { color:var(--blue); }

/* ── DROPDOWN ── */
.dropdown {
  position:absolute; top:100%; left:0;
  min-width:250px; background:var(--blue);
  opacity:0; transform:translateY(-10px);
  pointer-events:none;
  transition:opacity 0.28s var(--ease), transform 0.28s var(--ease);
  z-index:700; border-top:3px solid var(--green);
  box-shadow:0 12px 40px rgba(0,0,0,0.25);
}
.dropdown::before {
  content:''; position:absolute; bottom:100%; left:26px;
  border:7px solid transparent; border-bottom-color:var(--green);
}
.nav-item:hover > .dropdown,
.nav-item.open > .dropdown { opacity:1; transform:translateY(0); pointer-events:auto; }

.dropdown a {
  display:block; padding:13px 20px;
  color:rgba(255,255,255,0.88); font-size:0.84rem; font-weight:400;
  border-bottom:1px solid rgba(255,255,255,0.12);
  transition:background 0.2s, color 0.2s, padding-left 0.2s;
}
.dropdown a:last-child { border-bottom:none; }
.dropdown a:hover { background:rgba(255,255,255,0.14); color:var(--white); padding-left:26px; }

.dropdown-head {
  display:block; padding:8px 20px 5px;
  color:var(--gold-lt); font-size:0.6rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,0.1);
}

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:4px;
}
.hamburger span { width:24px; height:2px; background:var(--blue); display:block; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile Drawer */
.mobile-drawer {
  position:fixed; top:var(--nav-main-h); left:0; width:100%;
  background:var(--dark2); z-index:580;
  height:0; overflow:hidden; overflow-y:auto;
  transition:height 0.4s var(--ease);
}
.mobile-drawer.open { height:calc(100vh - var(--nav-main-h)); }
.mobile-nav-list { padding:8px 0 40px; }
.mobile-nav-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:14px 22px;
  color:rgba(255,255,255,0.85); font-size:0.85rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  background:none; border:none; border-bottom:1px solid rgba(255,255,255,0.06);
  font-family:'Jost',sans-serif; text-align:left; transition:background 0.2s;
}
.mobile-nav-btn:hover { background:rgba(255,255,255,0.04); }
.mobile-sub { display:none; background:rgba(26,58,143,0.18); }
.mobile-sub.open { display:block; }
.mobile-sub a {
  display:block; padding:11px 22px 11px 36px;
  color:rgba(255,255,255,0.65); font-size:0.82rem;
  border-bottom:1px solid rgba(255,255,255,0.04); transition:color 0.2s;
}
.mobile-sub a:hover { color:var(--white); }
.mobile-apply-link {
  display:block; margin:16px 22px;
  background:var(--blue); color:var(--white);
  text-align:center; padding:14px; font-size:0.82rem;
  font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  transition:background 0.2s;
}
.mobile-apply-link:hover { background:var(--blue-lt); }

/* ══════════════════════════════════════════
   6. HERO SLIDER
══════════════════════════════════════════ */
.hero {
  position:relative; width:100%; height:100vh;
  min-height:560px; overflow:hidden;
  margin-top:var(--nav-main-h);
}
.slide {
  position:absolute; inset:0; opacity:0;
  transition:opacity 0.9s ease-in-out;
}
.slide.active { opacity:1; z-index:2; }
.slide.prev   { opacity:0; z-index:1; }

.slide-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1); will-change:transform;
}
.slide.active .slide-bg { animation:kenBurns 7s ease-in-out forwards; }
@keyframes kenBurns { from{transform:scale(1)} to{transform:scale(1.10)} }

.slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(8,12,20,0.72) 0%, rgba(8,12,20,0.25) 55%, rgba(8,12,20,0.55) 100%);
}

/* Slide images */
.slide:nth-child(1) .slide-bg { background-image:url('../images/slide1.jpg'); background-color:#1a3a8f; }
.slide:nth-child(2) .slide-bg { background-image:url('../images/slide2.jpg'); background-color:#1a7a2e; }
.slide:nth-child(3) .slide-bg { background-image:url('../images/slide3.jpg'); background-color:#122878; }

/* Hero Content */
.slide-content {
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 8%; max-width:820px;
}
.slide-tag {
  display:inline-flex; align-items:center; gap:10px;
  color:var(--gold-lt); font-size:0.7rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; margin-bottom:20px;
  opacity:0; transform:translateY(18px);
  transition:opacity 0.7s 0.3s ease, transform 0.7s 0.3s ease;
}
.slide-tag::before { content:''; width:28px; height:1px; background:var(--gold); }
.slide.active .slide-tag { opacity:1; transform:translateY(0); }

.slide-title {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2.4rem, 6vw, 5rem); font-weight:300; line-height:1.08;
  color:var(--white); margin-bottom:18px;
  opacity:0; transform:translateY(22px);
  transition:opacity 0.8s 0.55s ease, transform 0.8s 0.55s ease;
}
.slide-title em { font-style:italic; color:var(--gold-lt); }
.slide.active .slide-title { opacity:1; transform:translateY(0); }

.slide-body {
  font-size:clamp(0.88rem, 1.5vw, 1.05rem); color:rgba(255,255,255,0.8);
  line-height:1.75; max-width:520px; margin-bottom:32px;
  opacity:0; transform:translateY(16px);
  transition:opacity 0.7s 0.8s ease, transform 0.7s 0.8s ease;
}
.slide.active .slide-body { opacity:1; transform:translateY(0); }

.slide-btns {
  display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; transform:translateY(14px);
  transition:opacity 0.7s 1.05s ease, transform 0.7s 1.05s ease;
}
.slide.active .slide-btns { opacity:1; transform:translateY(0); }

/* Hero Controls */
.hero-controls {
  position:absolute; bottom:40px; left:50%;
  transform:translateX(-50%); z-index:20;
  display:flex; align-items:center; gap:20px;
}
.hero-dots { display:flex; gap:8px; }
.hero-dot {
  width:18px; height:3px; border-radius:2px;
  background:rgba(255,255,255,0.35); border:none;
  transition:background 0.3s, width 0.4s;
  padding:0;
}
.hero-dot.active { background:var(--gold); width:34px; }
.hero-arr {
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.3);
  color:var(--white); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.25s, transform 0.2s; backdrop-filter:blur(6px);
}
.hero-arr:hover { background:var(--blue); border-color:var(--blue); transform:scale(1.08); }

/* Hero counter */
.hero-counter {
  position:absolute; top:24px; right:32px; z-index:20;
  font-size:0.7rem; color:rgba(255,255,255,0.5); letter-spacing:0.15em;
}
.hero-counter strong { color:var(--gold); }

/* Progress bar */
.hero-progress {
  position:absolute; bottom:0; left:0; height:3px; width:0;
  background:var(--blue); z-index:20; transition:width linear;
}

/* ══════════════════════════════════════════
   7. STATS STRIP (below hero)
══════════════════════════════════════════ */
.stats-strip {
  background:var(--blue);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat-box {
  padding:28px 20px; text-align:center;
  border-right:1px solid rgba(255,255,255,0.15);
  transition:background 0.25s;
}
.stat-box:last-child { border-right:none; }
.stat-box:hover { background:rgba(255,255,255,0.08); }
.stat-num {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.9rem,3.5vw,2.8rem); font-weight:300;
  color:var(--gold-lt); display:block; line-height:1; margin-bottom:5px;
}
.stat-label { font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════
   8. WELCOME / ABOUT STRIP
══════════════════════════════════════════ */
.welcome-section {
  background:var(--off-white);
  padding:72px 0;
}
.welcome-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.welcome-img-wrap { position:relative; }
.welcome-img {
  width:100%; height:420px; object-fit:cover; border-radius:var(--radius);
  display:block;
  background:#1a3a8f url('../images/school-building.jpg') center/cover no-repeat;
}
.welcome-img-badge {
  position:absolute; bottom:-20px; right:-20px;
  background:var(--green); color:var(--white);
  padding:18px 22px; text-align:center;
  border-radius:var(--radius);
  box-shadow:0 8px 28px rgba(26,122,46,0.35);
}
.badge-num {
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem; font-weight:300; display:block; line-height:1; color:var(--gold-lt);
}
.badge-txt { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; }

.welcome-text {}
.welcome-text p { font-size:0.94rem; line-height:1.85; color:var(--text-mid); margin-bottom:16px; }
.welcome-cbse {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--blue); color:var(--white);
  padding:10px 18px; border-radius:3px; font-size:0.78rem;
  font-weight:600; letter-spacing:0.06em; margin-top:8px;
}
.welcome-cbse-green {
  background:var(--green);
  display:inline-flex; align-items:center; gap:10px;
  color:var(--white); padding:10px 18px; border-radius:3px;
  font-size:0.78rem; font-weight:600; letter-spacing:0.06em;
  margin-top:8px; margin-left:8px;
}
.streams-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.stream-tag {
  background:var(--light-bg); border:2px solid var(--blue);
  color:var(--blue); padding:6px 14px; border-radius:30px;
  font-size:0.74rem; font-weight:600; letter-spacing:0.08em;
  transition:background 0.2s, color 0.2s;
}
.stream-tag:hover { background:var(--blue); color:var(--white); }

/* ══════════════════════════════════════════
   9. HOVER CARDS GRID (PWS-style)
══════════════════════════════════════════ */
.cards-section { background:var(--white); padding:72px 0; }
.cards-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.card {
  position:relative; overflow:hidden; display:block;
  height:320px; text-decoration:none;
  opacity:0; transform:translateY(28px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.card.visible { opacity:1; transform:translateY(0); }
.card:nth-child(1) { transition-delay:0.00s; }
.card:nth-child(2) { transition-delay:0.07s; }
.card:nth-child(3) { transition-delay:0.14s; }
.card:nth-child(4) { transition-delay:0.21s; }
.card:nth-child(5) { transition-delay:0.00s; }
.card:nth-child(6) { transition-delay:0.07s; }
.card:nth-child(7) { transition-delay:0.14s; }
.card:nth-child(8) { transition-delay:0.21s; }
.card:nth-child(9)  { transition-delay:0.00s; }
.card:nth-child(10) { transition-delay:0.07s; }
.card:nth-child(11) { transition-delay:0.14s; }
.card:nth-child(12) { transition-delay:0.21s; }

.card-img {
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:transform 0.65s var(--ease);
}
.card:hover .card-img { transform:scale(1.07); }

.card-base-overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
}
.card-title-static {
  position:absolute; bottom:0; left:0; right:0; z-index:4;
  padding:20px 18px 18px;
  transition:opacity 0.3s, transform 0.4s var(--ease);
}
.card:hover .card-title-static { opacity:0; transform:translateY(-8px); }
.card-title-static h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem; font-weight:400; color:var(--white); line-height:1.25;
}
.card-title-static h3 small {
  display:block; font-family:'Jost',sans-serif;
  font-size:0.58rem; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:rgba(255,255,255,0.65); margin-bottom:4px;
}

/* THE SLIDE-UP OVERLAY */
.card-overlay {
  position:absolute; inset:0; z-index:3;
  background:var(--card-color, rgba(26,58,143,0.90));
  transform:translateY(100%);
  transition:transform 0.52s var(--ease);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px 20px 22px;
}
.card:hover .card-overlay { transform:translateY(0); }

.card-overlay-line {
  width:28px; height:2px; background:rgba(255,255,255,0.6); margin-bottom:10px;
  opacity:0; transform:scaleX(0); transform-origin:left;
  transition:opacity 0.3s 0.28s, transform 0.35s 0.28s var(--ease);
}
.card:hover .card-overlay-line { opacity:1; transform:scaleX(1); }

.card-overlay-title {
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem; font-weight:400; color:var(--white); margin-bottom:8px;
  opacity:0; transform:translateY(14px);
  transition:opacity 0.4s 0.18s, transform 0.4s 0.18s var(--ease);
}
.card:hover .card-overlay-title { opacity:1; transform:translateY(0); }

.card-overlay-desc {
  font-size:0.76rem; font-weight:300; line-height:1.65;
  color:rgba(255,255,255,0.88);
  opacity:0; transform:translateY(12px);
  transition:opacity 0.4s 0.26s, transform 0.4s 0.26s var(--ease);
}
.card:hover .card-overlay-desc { opacity:1; transform:translateY(0); }

.card-overlay-link {
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:0.66rem; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(255,255,255,0.9);
  opacity:0; transform:translateY(10px);
  transition:opacity 0.4s 0.34s, transform 0.4s 0.34s var(--ease);
}
.card:hover .card-overlay-link { opacity:1; transform:translateY(0); }
.card-overlay-link .arr { transition:transform 0.25s; }
.card:hover .card-overlay-link:hover .arr { transform:translateX(4px); }

/* Card colours */
.card-1  { --card-color:var(--c1);  }
.card-2  { --card-color:var(--c2);  }
.card-3  { --card-color:var(--c3);  }
.card-4  { --card-color:var(--c4);  }
.card-5  { --card-color:var(--c5);  }
.card-6  { --card-color:var(--c6);  }
.card-7  { --card-color:var(--c7);  }
.card-8  { --card-color:var(--c8);  }
.card-9  { --card-color:var(--c9);  }
.card-10 { --card-color:var(--c10); }
.card-11 { --card-color:var(--c11); }
.card-12 { --card-color:var(--c12); }

/* Card images */
.card-1  .card-img { background-image:url('../images/card-vision.jpg');    background-color:var(--blue);   }
.card-2  .card-img { background-image:url('../images/card-academic.jpg');  background-color:var(--green);  }
.card-3  .card-img { background-image:url('../images/card-boarding.jpg');  background-color:#502010;       }
.card-4  .card-img { background-image:url('../images/card-admission.jpg'); background-color:var(--blue-dk);}
.card-5  .card-img { background-image:url('../images/card-director.jpg');  background-color:var(--green-dk);}
.card-6  .card-img { background-image:url('../images/card-faculty.jpg');   background-color:#281450;       }
.card-7  .card-img { background-image:url('../images/card-tour.jpg');      background-color:#12363c;       }
.card-8  .card-img { background-image:url('../images/card-infra.jpg');     background-color:#461414;       }
.card-9  .card-img { background-image:url('../images/card-sports.jpg');    background-color:#234114;       }
.card-10 .card-img { background-image:url('../images/card-results.jpg');   background-color:#191946;       }
.card-11 .card-img { background-image:url('../images/card-career.jpg');    background-color:#371e3c;       }
.card-12 .card-img { background-image:url('../images/card-alumni.jpg');    background-color:#0f414b;       }

/* Touch open state */
.card.touch-open .card-overlay { transform:translateY(0); }
.card.touch-open .card-title-static { opacity:0; }
.card.touch-open .card-overlay-line,
.card.touch-open .card-overlay-title,
.card.touch-open .card-overlay-desc,
.card.touch-open .card-overlay-link { opacity:1; transform:none; }

/* ══════════════════════════════════════════
   10. CIRCULAR CAROUSEL
══════════════════════════════════════════ */
.carousel-section {
  background:var(--dark2); padding:80px 0;
  position:relative; overflow:hidden;
}
.carousel-section::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:700px; height:600px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(26,58,143,0.15) 0%, transparent 70%);
  pointer-events:none;
}
.carousel-track-wrap {
  position:relative; width:100%; height:520px;
  display:flex; align-items:center; justify-content:center;
  perspective:1400px; perspective-origin:50% 50%;
}
.carousel-track {
  position:relative; width:300px; height:420px;
  transform-style:preserve-3d;
  transition:transform 0.72s var(--ease);
}
.c-item {
  position:absolute; top:0; left:0;
  width:300px; height:420px;
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  transform-style:preserve-3d;
  transition:transform 0.72s var(--ease), box-shadow 0.72s, filter 0.72s, opacity 0.72s;
  filter:brightness(0.52) saturate(0.7);
}
.c-item.active {
  filter:brightness(1) saturate(1.05); cursor:default;
  box-shadow:0 0 0 3px var(--blue), 0 24px 80px rgba(0,0,0,0.7);
  z-index:10;
}
.c-item.active::before {
  content:''; position:absolute; inset:-3px; border-radius:8px;
  border:2px solid rgba(26,58,143,0.7); pointer-events:none; z-index:20;
  animation:ringPulse 2.5s ease-in-out infinite;
}
@keyframes ringPulse {
  0%,100% { border-color:rgba(26,58,143,0.6); }
  50%     { border-color:rgba(26,122,46,0.9); box-shadow:0 0 20px 4px rgba(26,58,143,0.2); }
}
.c-img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; user-select:none; }
.c-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,12,20,0.92) 0%, rgba(8,12,20,0.25) 55%, transparent 100%);
}
.c-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:22px 20px 18px;
  opacity:0; transform:translateY(6px);
  transition:opacity 0.5s 0.1s var(--ease), transform 0.5s 0.1s var(--ease);
}
.c-item.active .c-info { opacity:1; transform:translateY(0); }
.c-name {
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem; font-weight:400; color:var(--white); margin-bottom:4px;
}
.c-role { font-size:0.66rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:8px; }
.c-quote { font-size:0.78rem; font-weight:300; line-height:1.6; color:rgba(255,255,255,0.78); font-style:italic; }

/* Carousel controls */
.carousel-controls { display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:24px; }
.carousel-arrows { display:flex; align-items:center; gap:16px; }
.arr-btn {
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.2);
  color:var(--white); font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.25s, border-color 0.25s, transform 0.2s;
}
.arr-btn:hover { background:var(--blue); border-color:var(--blue); transform:scale(1.08); }
.carousel-counter { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:rgba(255,255,255,0.45); min-width:60px; text-align:center; }
.carousel-counter strong { color:var(--gold-lt); }
.carousel-dots { display:flex; gap:8px; }
.c-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.2); border:none;
  transition:background 0.3s, width 0.35s;
}
.c-dot.active { background:var(--blue); width:24px; border-radius:4px; }
.detail-panel { max-width:660px; margin:36px auto 0; padding:0 24px; text-align:center; min-height:120px; }
.detail-quote-mark {
  font-family:'Cormorant Garamond',serif;
  font-size:4.5rem; line-height:0.6; color:var(--blue); opacity:0.5; margin-bottom:6px;
}
.detail-quote {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1rem,2vw,1.35rem); font-weight:300; font-style:italic;
  color:rgba(255,255,255,0.82); line-height:1.7;
  transition:opacity 0.45s, transform 0.45s;
}
.detail-quote.animating { opacity:0; transform:translateY(10px); }
.detail-author {
  margin-top:14px; font-size:0.7rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold-lt);
  transition:opacity 0.45s 0.08s;
}
.detail-author.animating { opacity:0; }

/* ══════════════════════════════════════════
   11. VIRTUAL CAMPUS TOUR
══════════════════════════════════════════ */
.tour-section { background:var(--off-white); padding:80px 0; }
.tour-body {
  display:grid; grid-template-columns:260px 1fr; gap:0;
  border:1px solid var(--border-dk); border-radius:var(--radius);
  overflow:hidden; margin-top:40px;
  box-shadow:0 4px 40px rgba(0,0,0,0.08);
}
.tour-sidebar {
  background:var(--dark2); overflow-y:auto; max-height:560px;
  scrollbar-width:thin; scrollbar-color:var(--blue) transparent;
}
.tour-sidebar::-webkit-scrollbar { width:3px; }
.tour-sidebar::-webkit-scrollbar-thumb { background:var(--blue); }
.sidebar-group { padding:18px 18px 0; }
.sidebar-group-title {
  font-size:0.6rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid rgba(201,168,76,0.2);
}
.spot-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; cursor:pointer; border-radius:3px;
  border:1px solid transparent; margin-bottom:4px;
  transition:background 0.2s, border-color 0.2s;
}
.spot-item:hover { background:rgba(255,255,255,0.06); }
.spot-item.active { background:rgba(26,58,143,0.2); border-color:rgba(26,58,143,0.4); }
.spot-thumb {
  width:48px; height:36px; border-radius:2px;
  background-size:cover; background-position:center; flex-shrink:0;
  border:2px solid transparent; transition:border-color 0.25s;
}
.spot-item.active .spot-thumb { border-color:var(--blue); }
.spot-name { font-size:0.8rem; font-weight:500; color:rgba(255,255,255,0.85); margin-bottom:2px; }
.spot-item.active .spot-name { color:var(--gold-lt); }
.spot-cat { font-size:0.62rem; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.08em; }

.tour-viewer { display:flex; flex-direction:column; }
.viewer-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#0a0e18; cursor:crosshair; }
.viewer-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.8s var(--ease); }
.viewer-img.active { opacity:1; }
.viewer-frame::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 55%, rgba(8,12,20,0.85) 100%); z-index:2;
}
.viewer-info {
  position:absolute; bottom:0; left:0; right:0; z-index:10;
  padding:20px 24px; display:flex; align-items:flex-end; justify-content:space-between;
}
.viewer-cat { font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:4px; }
.viewer-title-txt { font-family:'Cormorant Garamond',serif; font-size:clamp(1.3rem,2.5vw,2rem); font-weight:300; color:var(--white); }
.viewer-count-txt { font-family:'Cormorant Garamond',serif; font-size:2.4rem; font-weight:300; color:rgba(255,255,255,0.15); }
.viewer-count-txt strong { color:rgba(255,255,255,0.4); }

.viewer-controls {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:var(--dark); flex-wrap:wrap; gap:10px;
}
.viewer-desc { font-size:0.82rem; color:rgba(255,255,255,0.6); line-height:1.65; max-width:540px; }
.viewer-btns { display:flex; gap:8px; }
.v-btn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  color:var(--white); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.25s;
}
.v-btn:hover { background:var(--blue); border-color:var(--blue); }

.thumb-strip { display:flex; gap:8px; padding:12px 22px; background:var(--dark2); overflow-x:auto; scrollbar-width:none; }
.thumb-strip::-webkit-scrollbar { display:none; }
.s-thumb {
  flex-shrink:0; width:90px; height:60px; border-radius:2px;
  background-size:cover; background-position:center;
  cursor:pointer; border:2px solid transparent; opacity:0.45;
  transition:opacity 0.3s, border-color 0.3s, transform 0.25s;
  position:relative;
}
.s-thumb::after {
  content:attr(data-label); position:absolute; bottom:0; left:0; right:0;
  padding:3px 5px; background:rgba(0,0,0,0.7); font-size:0.55rem;
  color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:0.06em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.s-thumb:hover { opacity:0.85; transform:translateY(-3px); }
.s-thumb.active { opacity:1; border-color:var(--blue); transform:translateY(-3px); }

/* Hotspot pins */
.hotspot { position:absolute; z-index:5; cursor:pointer; animation:pinPulse 2.5s ease-in-out infinite; }
@keyframes pinPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.hotspot-pin {
  width:16px; height:16px; border-radius:50%;
  background:var(--gold); border:3px solid rgba(255,255,255,0.85);
  box-shadow:0 0 0 6px rgba(201,168,76,0.3), 0 0 18px rgba(201,168,76,0.5);
}
.hotspot-tip {
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
  background:rgba(8,12,20,0.96); border:1px solid rgba(201,168,76,0.4);
  padding:6px 12px; white-space:nowrap; font-size:0.7rem; color:var(--white);
  border-radius:2px; opacity:0; pointer-events:none; transition:opacity 0.25s, transform 0.25s;
}
.hotspot-tip::after {
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:rgba(201,168,76,0.4);
}
.hotspot:hover .hotspot-tip { opacity:1; transform:translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════
   12. ENQUIRY FORM SECTION
══════════════════════════════════════════ */
.enquiry-section { background:var(--white); padding:80px 0; }
.enquiry-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.enq-eyebrow { color:var(--blue); }
.enq-eyebrow::before, .enq-eyebrow::after { background:var(--blue); }
.enquiry-left p { font-size:0.92rem; line-height:1.85; color:var(--text-mid); margin-bottom:14px; }
.contact-blocks { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.contact-block {
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px; background:var(--off-white);
  border-left:3px solid var(--blue); border-radius:0 3px 3px 0;
}
.c-icon { font-size:1.2rem; color:var(--blue); flex-shrink:0; margin-top:2px; }
.c-label { font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--blue); margin-bottom:3px; }
.c-val { font-size:0.88rem; font-weight:500; color:var(--text-dark); line-height:1.5; }

.form-card {
  background:var(--white); border:1px solid rgba(26,58,143,0.15);
  border-radius:var(--radius); padding:36px 30px;
  box-shadow:0 8px 48px rgba(26,58,143,0.09);
}
.form-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:400; color:var(--text-dark); margin-bottom:5px; }
.form-sub { font-size:0.8rem; color:var(--text-mid); margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid rgba(26,58,143,0.1); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-grid .full { grid-column:1/-1; }
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-label { font-size:0.67rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-mid); }
.req { color:var(--blue); margin-left:2px; }
.form-input, .form-select, .form-textarea {
  width:100%; padding:10px 13px;
  border:1.5px solid rgba(0,0,0,0.15); border-radius:3px;
  font-family:'Jost',sans-serif; font-size:0.87rem; color:var(--text-dark);
  background:var(--white); outline:none; appearance:none; -webkit-appearance:none;
  transition:border-color 0.25s, box-shadow 0.25s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,58,143,0.1);
}
.form-input::placeholder { color:rgba(0,0,0,0.3); }
.select-wrap { position:relative; }
.select-wrap::after { content:'▾'; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--blue); pointer-events:none; }
.form-select { cursor:pointer; padding-right:30px; }
.form-textarea { resize:vertical; min-height:88px; line-height:1.6; }
.radio-group { display:flex; gap:14px; flex-wrap:wrap; padding-top:4px; }
.radio-lbl { display:flex; align-items:center; gap:6px; font-size:0.83rem; cursor:pointer; }
.radio-lbl input { accent-color:var(--blue); width:15px; height:15px; }
.check-lbl { display:flex; align-items:flex-start; gap:8px; font-size:0.78rem; color:var(--text-mid); line-height:1.5; cursor:pointer; }
.check-lbl input { accent-color:var(--blue); width:14px; height:14px; flex-shrink:0; margin-top:2px; }
.form-submit {
  width:100%; padding:14px 24px; background:var(--blue); color:var(--white);
  border:none; border-radius:3px; font-family:'Jost',sans-serif; font-size:0.8rem;
  font-weight:700; letter-spacing:0.16em; text-transform:uppercase; margin-top:18px;
  box-shadow:0 4px 20px rgba(26,58,143,0.3); position:relative; overflow:hidden;
  transition:background 0.25s, transform 0.2s, box-shadow 0.25s;
}
.form-submit::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform:translateX(-100%); transition:transform 0.5s;
}
.form-submit:hover::before { transform:translateX(100%); }
.form-submit:hover { background:var(--blue-lt); transform:translateY(-2px); box-shadow:0 8px 28px rgba(26,58,143,0.4); }
.form-note { font-size:0.7rem; color:var(--text-mid); margin-top:10px; text-align:center; }
.form-note span { color:var(--blue); }
.form-success {
  display:none; padding:18px; background:rgba(26,122,46,0.08);
  border:1.5px solid rgba(26,122,46,0.3); border-radius:3px;
  text-align:center; color:var(--green); font-weight:500; font-size:0.9rem; margin-top:14px;
}
.form-success.show { display:block; }

/* ══════════════════════════════════════════
   13. TOP SEARCHES + FOOTER
══════════════════════════════════════════ */
.top-searches {
  background:var(--dark2); padding:24px 0;
  border-top:1px solid rgba(255,255,255,0.05);
}
.ts-inner { display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.ts-label { font-size:0.63rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); white-space:nowrap; padding-top:3px; flex-shrink:0; }
.ts-links { display:flex; flex-wrap:wrap; gap:2px 0; font-size:0.77rem; line-height:1.9; }
.ts-links a { color:rgba(255,255,255,0.55); padding:0 3px; transition:color 0.2s; }
.ts-links a:hover { color:var(--gold); text-decoration:underline; }
.ts-sep { color:rgba(255,255,255,0.22); padding:0 2px; }

.footer { background:var(--dark); padding:56px 0 28px; border-top:3px solid var(--blue); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-logo-img { height:64px; width:auto; margin-bottom:14px; filter:brightness(1.1); }
.footer-tagline { font-size:0.8rem; color:rgba(255,255,255,0.5); line-height:1.75; max-width:300px; margin-bottom:18px; }
.footer-cbse {
  display:inline-block; background:var(--blue); color:var(--white);
  padding:6px 14px; font-size:0.7rem; font-weight:600; border-radius:2px;
  margin-bottom:8px; display:block; width:fit-content;
}
.footer-socials { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.social-btn {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.6); font-size:0.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  transition:background 0.2s, color 0.2s, border-color 0.2s;
}
.social-btn:hover { background:var(--blue); color:var(--white); border-color:var(--blue); }
.footer-col h4 {
  font-size:0.66rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px; padding-bottom:8px;
  border-bottom:1px solid rgba(201,168,76,0.2);
}
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a { color:rgba(255,255,255,0.55); font-size:0.81rem; transition:color 0.2s; }
.footer-col ul li a:hover { color:var(--gold); }
.footer-bottom {
  padding-top:22px; border-top:1px solid rgba(255,255,255,0.07);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-copy { font-size:0.7rem; color:rgba(255,255,255,0.32); }
.footer-legal { display:flex; gap:18px; }
.footer-legal a { font-size:0.7rem; color:rgba(255,255,255,0.38); transition:color 0.2s; }
.footer-legal a:hover { color:var(--gold); }

/* ══════════════════════════════════════════
   14. SCROLL-TO-TOP BUTTON
══════════════════════════════════════════ */
.scroll-top {
  position:fixed; bottom:28px; right:28px; z-index:800;
  width:46px; height:46px; border-radius:50%;
  background:var(--blue); color:var(--white); border:none;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(26,58,143,0.4);
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity 0.3s, transform 0.3s;
}
.scroll-top.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.scroll-top:hover { background:var(--blue-lt); transform:translateY(-3px); }

/* ══════════════════════════════════════════
   15. LIGHTBOX
══════════════════════════════════════════ */
.lightbox {
  position:fixed; inset:0; z-index:999;
  background:rgba(5,8,14,0.97); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.4s; backdrop-filter:blur(10px);
}
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox-img {
  max-width: 94vw;
  max-height: 90vh;
  object-fit: contain;   /* ← show ENTIRE image, never crop */
  border: 1px solid rgba(26,58,143,0.25);
  border-radius: 4px;
  display: block;
}
.lightbox-close {
  position:absolute; top:20px; right:24px;
  background:none; border:none; color:var(--white); font-size:1.8rem;
  opacity:0.7; line-height:1; transition:opacity 0.2s, transform 0.2s;
}
.lightbox-close:hover { opacity:1; transform:rotate(90deg); }
.lightbox-caption {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-family:'Cormorant Garamond',serif; font-size:1.05rem;
  color:rgba(255,255,255,0.65); white-space:nowrap;
}

/* ══════════════════════════════════════════
   16. SECTION: CBSE STREAMS BANNER
══════════════════════════════════════════ */
.streams-section {
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dk) 50%, var(--green-dk) 100%);
  padding:52px 0;
}
.streams-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.15); }
.stream-card {
  background:rgba(0,0,0,0.25); padding:32px 24px; text-align:center;
  transition:background 0.3s;
}
.stream-card:hover { background:rgba(255,255,255,0.1); }
.stream-icon { font-size:2.2rem; margin-bottom:12px; }
.stream-name {
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem; font-weight:300; color:var(--white); margin-bottom:6px;
}
.stream-sub { font-size:0.72rem; color:rgba(255,255,255,0.6); line-height:1.5; }

/* ══════════════════════════════════════════
   17. RESPONSIVE BREAKPOINTS
══════════════════════════════════════════ */
@media(max-width:1100px) {
  .nav-link { padding:0 9px; font-size:0.66rem; }
  .cards-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media(max-width:900px) {
  :root { --nav-main-h:62px; }
  .nav-list, .nav-search-btn { display:none; }
  .hamburger { display:flex; }
  .welcome-inner { grid-template-columns:1fr; }
  .welcome-img { height:300px; }
  .welcome-img-badge { right:10px; }
  .enquiry-grid { grid-template-columns:1fr; }
  .tour-body { grid-template-columns:1fr; }
  .tour-sidebar { max-height:220px; }
  .streams-grid { grid-template-columns:repeat(2,1fr); }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .carousel-track-wrap { height:420px; }
}
@media(max-width:768px) {
  .cards-grid { grid-template-columns:repeat(2,1fr); }
  .card { height:260px; }
  .footer-grid { grid-template-columns:1fr; }
  .topbar { padding:0 14px; }
  .topbar-left { display:none; }
  .hero-counter { right:16px; font-size:0.62rem; }
}
@media(max-width:480px) {
  .cards-grid { grid-template-columns:1fr 1fr; }
  .card { height:210px; }
  .card-overlay-desc { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:1; }
  .streams-grid { grid-template-columns:1fr 1fr; }
  .hero-controls { gap:12px; }
  .hero-arr { width:36px; height:36px; font-size:0.9rem; }
  .stats-strip { grid-template-columns:1fr 1fr; }
}

/* ══ ENHANCED CARD HOVER EFFECTS (global) ══ */
.card { transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s, opacity 0.6s; }
.card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 60px rgba(0,0,0,0.22); z-index:5; }
.card-img { transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.card:hover .card-img { transform: scale(1.1); }

/* Card glow effect on hover */
.card-1:hover  { box-shadow: 0 20px 60px rgba(26,58,143,0.35); }
.card-2:hover  { box-shadow: 0 20px 60px rgba(26,122,46,0.35); }
.card-3:hover  { box-shadow: 0 20px 60px rgba(80,30,10,0.35); }
.card-4:hover  { box-shadow: 0 20px 60px rgba(26,58,143,0.35); }
.card-5:hover  { box-shadow: 0 20px 60px rgba(26,122,46,0.35); }
.card-6:hover  { box-shadow: 0 20px 60px rgba(40,20,80,0.35); }
.card-7:hover  { box-shadow: 0 20px 60px rgba(18,60,60,0.35); }
.card-8:hover  { box-shadow: 0 20px 60px rgba(70,20,20,0.35); }
.card-9:hover  { box-shadow: 0 20px 60px rgba(35,65,20,0.35); }
.card-10:hover { box-shadow: 0 20px 60px rgba(25,25,70,0.35); }
.card-11:hover { box-shadow: 0 20px 60px rgba(55,30,60,0.35); }
.card-12:hover { box-shadow: 0 20px 60px rgba(15,65,75,0.35); }

/* ══ FAQ SECTION ON HOMEPAGE ══ */
.faq-home-section { background:#f5f7fa; padding:72px 0; }
.faq-home-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; }
@media(max-width:768px) { .faq-home-grid { grid-template-columns:1fr; } }

/* ══ NEWS SECTION (Google Sheets backend) ══ */
.news-page-section { background:var(--white); padding:72px 0; }
.news-page-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.news-article-card {
  background:var(--white); border-radius:8px; overflow:hidden;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
  transition:transform 0.3s, box-shadow 0.3s; cursor:pointer; text-decoration:none; display:block;
}
.news-article-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(26,58,143,0.13); }
.news-article-img { width:100%; height:200px; object-fit:cover; background:var(--light-bg) center/cover; display:block; }
.news-article-body { padding:20px; }
.news-article-tag { display:inline-block; background:var(--blue); color:#fff; padding:3px 10px; font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border-radius:2px; margin-bottom:8px; }
.news-article-title { font-family:"Cormorant Garamond",serif; font-size:1.15rem; font-weight:400; color:var(--text-dark); margin-bottom:8px; line-height:1.3; }
.news-article-date { font-size:0.72rem; color:var(--text-mid); }
.news-article-excerpt { font-size:0.84rem; color:var(--text-mid); margin-top:8px; line-height:1.65; }
.news-article-read { display:inline-flex; align-items:center; gap:5px; margin-top:12px; color:var(--blue); font-size:0.78rem; font-weight:600; }

/* ══ GALLERY PAGE (Google Drive linked) ══ */
.gallery-sections { display:flex; flex-direction:column; gap:52px; }
.gallery-section-block {}
.gallery-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.gallery-section-title { font-family:"Cormorant Garamond",serif; font-size:1.6rem; font-weight:300; color:var(--text-dark); }
.gallery-view-more { display:inline-flex; align-items:center; gap:6px; background:var(--blue); color:#fff; padding:8px 18px; border-radius:3px; font-size:0.74rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; transition:background 0.2s; }
.gallery-view-more:hover { background:var(--blue-lt); }
.gallery-thumb-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gallery-thumb {
  aspect-ratio: 1/1;                /* ← Perfect square blocks */
  background-color: var(--light-bg);
  background-size: cover;           /* ← Fill the square fully */
  background-position: center center; /* ← Always centre of image */
  background-repeat: no-repeat;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}
.gallery-thumb:hover { transform:scale(1.04); box-shadow:0 8px 28px rgba(0,0,0,0.2); }
.gallery-thumb::after { content:"⤢"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; background:rgba(26,58,143,0.5); opacity:0; transition:opacity 0.3s; }
.gallery-thumb:hover::after { opacity:1; }
@media(max-width:768px) { .gallery-thumb-row { grid-template-columns:repeat(2,1fr); } .news-page-grid { grid-template-columns:1fr; } }
@media(max-width:480px) { .gallery-thumb-row { grid-template-columns:1fr 1fr; } }

/* ══ NEWS ARTICLE DETAIL PAGE ══ */
.news-detail-hero { background:var(--blue); padding:60px 8% 40px; margin-top:var(--nav-main-h); }
.news-detail-body { max-width:820px; margin:0 auto; padding:48px 24px 80px; }
.news-detail-body h2 { font-family:"Cormorant Garamond",serif; font-size:clamp(1.5rem,3vw,2.4rem); font-weight:300; color:var(--text-dark); margin:24px 0 14px; }
.news-detail-body p { font-size:0.95rem; line-height:1.9; color:var(--text-mid); margin-bottom:16px; }

/* ══ PAGE IMAGES GRID ══ */
.page-img-banner { width:100%; height:280px; object-fit:cover; border-radius:8px; margin-bottom:24px; background:var(--light-bg) center/cover; }
.page-img-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.page-img-grid img, .page-img-grid .pg-img { width:100%; height:180px; object-fit:cover; border-radius:6px; background:var(--light-bg) center/cover; cursor:pointer; transition:transform 0.3s; }
.page-img-grid img:hover, .page-img-grid .pg-img:hover { transform:scale(1.03); }
@media(max-width:600px){ .page-img-grid { grid-template-columns:1fr; } }

/* ══ TOPBAR COMPLETELY REMOVED — kills any residual spacing ══ */
.topbar,
[class*="topbar"],
.nav-topbar {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Ensure body starts at 0 — no inherited padding */
html, body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Navbar sits at very top of viewport */
.navbar {
  top: 0 !important;
}

/* Hero section clears only navbar height */
.hero {
  margin-top: var(--nav-main-h) !important;
}

/* ══ HERO TRANSITION CANVAS OVERLAY ══ */
#heroCanvas {
  position: absolute;
  inset: 0;
  z-index: 50;          /* above slides, below content */
  pointer-events: none;
  display: block;
  width: 100%;
  height: 100%;
}

/* Ken Burns stays but slightly more dynamic */
.slide.active .slide-bg {
  animation: kenBurns 8s ease-in-out forwards;
}
@keyframes kenBurns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}

/* ══ MOBILE NAVBAR — Logo centred and bigger ══ */
@media(max-width:900px) {

  
@media(max-width:480px) {
  .navbar { padding: 0 6px; }
  .hamburger     { flex: 0 0 36px; }
  .nav-search-btn{ flex: 0 0 36px; }
  .nav-logo img  { max-height: 48px; }
}

/* ══════════════════════════════════════════
   MOBILE NAVBAR — Logo fills full width
   between hamburger and search icons
══════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Override desktop flex — make navbar a simple row */
  .navbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 10px !important;
    height: var(--nav-main-h) !important;
  }

  /* Hide desktop nav items */
  .nav-list,
  .nav-apply-btn { display: none !important; }

  /* Hamburger — left, fixed size */
  .hamburger {
    display: flex !important;
    flex-shrink: 0 !important;
    order: 1 !important;
    width: 36px !important;
  }

  /* Logo — stretches to fill ALL remaining space */
  .nav-logo {
    display: flex !important;
    flex: 1 1 auto !important;
    order: 2 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Image fills the container completely */
  .nav-logo img {
    width: 100% !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  /* Search — right, fixed size */
  .nav-search-btn {
    display: flex !important;
    flex-shrink: 0 !important;
    order: 3 !important;
    width: 36px !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .navbar { padding: 0 8px !important; }
  .nav-logo { padding: 4px 8px !important; }
  .nav-logo img { max-height: 52px !important; }
}