/* ==========================================================================
   Drizzling Preschool — Premium 3D Glassmorphism Stylesheet
   ========================================================================== */

:root{
  --pink: #ad1457;
  --pink-dark: #6a0836;
  --pink-light: #ffe0ee;
  --pink-bright: #ff6fa5;
  --blue: #16337a;
  --blue-dark: #0a1333;
  --blue-light: #e0e8ff;
  --blue-bright: #7fa8ff;
  --ink: #1c1730;
  --ink-soft: #5c5578;
  --ink-onlight: #1c1730;
  --ink-ondark: #ece8fa;
  --ink-soft-ondark: #bcb4dd;
  --white: #ffffff;
  --bg: #150f30;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --shadow-soft: 0 20px 50px -20px rgba(0, 0, 0, 0.55), 0 0 45px -18px rgba(173, 20, 87, 0.3);
  --shadow-hover: 0 30px 65px -18px rgba(0, 0, 0, 0.6), 0 0 55px -15px rgba(127, 168, 255, 0.35);
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(255, 255, 255, 0.75);
  --grad-pink-blue: linear-gradient(135deg, var(--pink) 0%, #5b1467 45%, var(--blue) 100%);
  --grad-bg: linear-gradient(180deg, #150f30 0%, #0d1330 50%, #150f30 100%);
  --font-head: "Baloo 2", cursive;
  --font-body: "Poppins", sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x:hidden; width:100%; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink-ondark);
  background: linear-gradient(180deg, #17102f 0%, #0e1330 50%, #1a0f2b 100%);
  overflow-x: hidden;
  width:100%;
  line-height: 1.65;
  opacity:0;
  transition: opacity .6s ease;
}
body.is-ready{ opacity:1; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4,h5{ font-family: var(--font-head); font-weight:700; line-height:1.2; margin:0 0 .5em; color: var(--ink-ondark); }
.glass{ color: var(--ink-onlight); }
.glass h1, .glass h2, .glass h3, .glass h4, .glass h5{ color: var(--ink-onlight); }
p{ margin:0 0 1em; }
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:2; }
section[id]{ scroll-margin-top: 100px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--pink); color:#fff; padding:12px 20px;
  z-index:9999; border-radius: 0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* ===== Glass utility ===== */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* ===== Glass shine sweep (premium hover reflection) ===== */
.shine-hover{ position:relative; overflow:hidden; }
.shine-hover::after{
  content:""; position:absolute; top:-60%; left:-70%; width:45%; height:240%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
  transform: rotate(20deg); transition: left .75s ease; pointer-events:none; z-index:2;
}
.shine-hover:hover::after{ left:130%; }

/* ===== Sections ===== */
.section{
  padding: 90px 0; position:relative;
  background: linear-gradient(180deg, #1b1338 0%, #10152f 100%);
}
.section-tint{ background: linear-gradient(180deg, #2a0f2c 0%, #0c1636 100%); }
.section-head{ text-align:center; max-width:680px; margin:0 auto 50px; }
.section-head.center, .eyebrow.center{ text-align:center; }
.section-sub{ color: var(--ink-soft-ondark); font-size:1.05rem; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600;
  color: var(--pink-dark); background: var(--pink-light); padding:6px 16px; border-radius:999px;
  margin-bottom:14px; letter-spacing:.03em; text-transform:uppercase;
}
.section-head h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.text-gradient{
  background: var(--grad-pink-blue);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:999px;
  font-weight:600; font-size:.98rem; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn-lg{ padding:16px 32px; font-size:1.05rem; }
.btn-sm{ padding:9px 18px; font-size:.85rem; }
.btn-primary{
  background: var(--grad-pink-blue); color:#fff;
  box-shadow: 0 12px 30px -8px rgba(106,8,54,.55);
}
.btn-primary:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 40px -10px rgba(106,8,54,.65); }
.btn-glass{
  background: rgba(255,255,255,.88); color: var(--pink-dark); border:1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
}
.btn-glass:hover{ transform: translateY(-3px); background: rgba(255,255,255,1); }
.btn-white{ background:#fff; color: var(--pink-dark); }
.btn-white:hover{ transform: translateY(-3px); box-shadow:0 15px 30px -10px rgba(0,0,0,.25); }
.btn-outline-white{ border:2px solid rgba(255,255,255,.8); color:#fff; }
.btn-outline-white:hover{ background: rgba(255,255,255,.15); transform: translateY(-3px); }
.btn-text{ color: var(--ink-soft); padding:14px 18px; }
.btn-text:hover{ color: var(--pink-dark); }

/* ===== Background decor (subtle global blobs) ===== */
.bg-decor{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }

/* ===== Header / Nav ===== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:1000; padding:16px 0;
  transition: all .35s ease;
}
.navbar{
  max-width:1200px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; justify-content:space-between;
  background: rgba(255,255,255,.94); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.75); border-radius: 999px; box-shadow: 0 10px 30px -15px rgba(10,8,40,.35);
  transition: all .35s ease;
}
.site-header.scrolled .navbar{
  background: rgba(255,255,255,.98); box-shadow: 0 15px 35px -15px rgba(10,8,40,.3);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:0 4px 14px rgba(0,0,0,.15); }
.brand-text{ display:none; flex-direction:column; line-height:1.1; font-family: var(--font-head); }
.brand-text strong{ color: var(--pink-dark); font-size:1.05rem; }
.brand-text em{ color: var(--blue-dark); font-style:normal; font-size:.85rem; }
.nav-menu{ display:flex; align-items:center; gap:28px; }
.nav-link{ font-weight:600; font-size:.95rem; color: var(--ink); position:relative; padding:6px 2px; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:3px; border-radius:3px;
  background: var(--grad-pink-blue); transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link:hover, .nav-link.active{ color: var(--pink-dark); }
.nav-cta{ margin-left:6px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:24px; height:3px; background: var(--ink); border-radius:3px; transition: all .3s ease; }

/* ===== Floating decor items (shared) ===== */
.float-item{
  position:absolute; display:flex; align-items:center; justify-content:center;
  animation: floaty 6s ease-in-out infinite;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,.08));
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-22px) rotate(6deg); }
}
@keyframes floatySlow{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(-4deg); }
}
.f-star{ color:#ffd166; font-size:2rem; }
.f-cloud1, .f-cloud2{ color:#ffffff; font-size:3.4rem; text-shadow:0 10px 25px rgba(10,20,60,.25); }
.f-balloon1{ color: var(--pink); font-size:2.4rem; border-radius:50%; }
.f-balloon2{ color: var(--blue); font-size:1.8rem; border-radius:50%; }
.f-pencil{ color:#ffb703; font-size:2rem; transform: rotate(35deg); }
.f-book{ color: var(--blue-dark); font-size:2.2rem; }
.f-heart{ color: var(--pink-dark); font-size:1.6rem; }
.f-sun{ color:#ffb703; font-size:2.6rem; }
.f-rainbow{ color:#a78bfa; font-size:2.6rem; }
.f-abc, .f-123, .f-block1, .f-block2{
  font-family: var(--font-head); font-weight:800; font-size:1.4rem; color:#fff;
  background: var(--grad-pink-blue); width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px -8px rgba(106,8,54,.5);
}
.f-block1{ background: linear-gradient(135deg,#ffd166,#ff6fa5); }
.f-block2{ background: linear-gradient(135deg,#5b9dff,#a78bfa); }

/* ===== Hero ===== */
.hero{
  position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:140px 20px 100px; overflow:hidden; width:100%;
  background: #1a1440;
}
.hero-bg-photo{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 30%;
  transform: scale(1.06); filter: saturate(1.1) contrast(1.02);
}
.hero-overlay{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 15% 15%, rgba(194,24,91,.55) 0%, transparent 42%),
    radial-gradient(circle at 88% 20%, rgba(16,31,77,.6) 0%, transparent 45%),
    linear-gradient(150deg, rgba(96,10,55,.88) 0%, rgba(20,14,64,.82) 48%, rgba(16,31,77,.9) 100%);
}
.hero-overlay-light{
  background: linear-gradient(180deg, rgba(21,15,48,.18) 0%, rgba(21,15,48,.05) 32%, rgba(21,15,48,.4) 68%, rgba(21,15,48,.9) 100%);
}
.hero-glow{ position:absolute; z-index:1; border-radius:50%; filter: blur(90px); pointer-events:none; }

/* ===== Full-screen cartoon hero ===== */
.hero-fullscreen{ padding:0; }
.hero-fullscreen .hero-bg-photo{ object-position: center 62%; }

/* ===== Intro section (moved hero text) ===== */
.intro-section{ padding-top:70px; }
.intro-card{ max-width:760px; margin:0 auto; }
.mascot-intro{ top:-26px; right:6%; animation-delay:.6s; }
.glow-pink{ width:380px; height:380px; background: rgba(255,90,160,.45); top:8%; left:6%; animation: floatySlow 9s ease-in-out infinite; }
.glow-blue{ width:420px; height:420px; background: rgba(70,110,255,.4); bottom:0%; right:6%; animation: floatySlow 11s ease-in-out infinite 1.5s; }
.hero-floaters{ position:absolute; inset:0; z-index:1; }
.hero-floaters .f-star{ top:12%; left:8%; animation-delay:0s; }
.hero-floaters .f-cloud1{ top:8%; left:70%; animation:floatySlow 8s ease-in-out infinite; }
.hero-floaters .f-cloud2{ top:60%; left:4%; animation:floatySlow 9s ease-in-out infinite 1s; }
.hero-floaters .f-balloon1{ top:20%; left:88%; }
.hero-floaters .f-balloon2{ top:78%; left:85%; animation-delay:1.2s; }
.hero-floaters .f-pencil{ top:70%; left:14%; animation-delay:.6s; }
.hero-floaters .f-book{ top:85%; left:60%; animation-delay:.3s; }
.hero-floaters .f-abc{ top:15%; left:45%; animation-delay:.8s; }
.hero-floaters .f-123{ top:35%; left:92%; animation-delay:1.6s; }
.hero-floaters .f-block1{ top:78%; left:40%; animation-delay:.4s; }
.hero-floaters .f-block2{ top:6%; left:30%; animation-delay:1s; }
.hero-floaters .f-heart{ top:45%; left:6%; animation-delay:.7s; }
.hero-floaters .f-sun{ top:5%; left:88%; animation-delay:0s; }
.hero-floaters .f-rainbow{ top:50%; left:90%; animation-delay:.5s; }

.hero-inner{ position:relative; z-index:2; width:100%; display:flex; justify-content:center; perspective:1400px; }
.hero-inner-split{
  display:grid; grid-template-columns: 1.08fr .92fr; gap:36px; align-items:center;
  max-width:1180px; margin:0 auto; padding:0 20px;
}
.hero-card{
  max-width:640px; padding:56px 48px; text-align:center; position:relative;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 40px 80px -20px rgba(10,5,35,.55),
    0 0 0 1px rgba(255,255,255,.4) inset,
    0 25px 60px -15px rgba(194,24,91,.35);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
  overflow:hidden;
  will-change: transform;
}
.hero-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.65) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.35) 100%);
  mix-blend-mode: overlay;
}
.hero-card > *{ position:relative; z-index:1; }
.pill-badge{
  display:inline-flex; align-items:center; gap:8px; background: var(--grad-pink-blue); color:#fff;
  padding:8px 18px; border-radius:999px; font-size:.82rem; font-weight:600; margin-bottom:20px;
  box-shadow:0 10px 25px -8px rgba(106,8,54,.6);
}
.pill-badge.small{ font-size:.72rem; padding:6px 14px; }
.hero-card h1{ font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom:.5em; }
.hero-sub{ color: var(--ink-soft); font-size:1.08rem; max-width:620px; margin:0 auto 30px; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-tagline{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0;
  margin:0 0 16px; font-family: var(--font-head); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--blue-dark); font-size:.92rem;
}
.hero-tagline span{ color: var(--pink); margin:0 10px; font-weight:800; }
.hero-wave{ position:absolute; bottom:-2px; left:0; width:100%; line-height:0; z-index:2; }
.hero-wave svg{ width:100%; height:80px; }
.hero-wave path{ fill: var(--bg); }

/* ===== Hero cartoon visual ===== */
.hero-cartoon-wrap{
  position:relative; display:flex; align-items:center; justify-content:center;
  animation: floatySlow 7s ease-in-out infinite; padding:20px;
}
.hero-cartoon-glow{
  position:absolute; inset:2%; border-radius:50%; z-index:0; filter: blur(50px);
  background: radial-gradient(circle, rgba(255,111,165,.4) 0%, rgba(127,168,255,.3) 55%, transparent 78%);
}
.hero-cartoon-ring{ position:absolute; border-radius:50%; z-index:0; border:2px dashed rgba(255,255,255,.3); }
.hero-cartoon-ring.r1{ inset:9%; animation: heroSpin 44s linear infinite; }
.hero-cartoon-ring.r2{ inset:1%; border-color: rgba(255,111,165,.25); animation: heroSpin 60s linear infinite reverse; }
@keyframes heroSpin{ to{ transform: rotate(360deg); } }
.hero-cartoon-img{
  position:relative; z-index:1; width:100%; max-width:480px; border-radius:26px;
  -webkit-mask-image: radial-gradient(ellipse 74% 80% at 50% 46%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 80% at 50% 46%, #000 58%, transparent 100%);
  filter: drop-shadow(0 30px 55px rgba(0,0,0,.55));
  transition: transform .4s ease;
}
.hero-cartoon-wrap:hover .hero-cartoon-img{ transform: scale(1.03) rotate(-1deg); }
.hero-cartoon-chip{
  position:absolute; z-index:2; background:#fff; color: var(--pink-dark); font-weight:700; font-size:.78rem;
  padding:9px 16px; border-radius:999px; display:flex; align-items:center; gap:6px;
  box-shadow:0 14px 28px -8px rgba(0,0,0,.4); animation: floatySlow 5s ease-in-out infinite;
}
.hero-cartoon-chip i{ color: var(--pink); }
.chip-1{ top:6%; left:-2%; }
.chip-2{ bottom:12%; right:-2%; animation-delay:1.2s; }

/* ===== Scroll cue ===== */
.scroll-cue{
  position:absolute; bottom:92px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff; opacity:.9;
  animation: scrollBounce 2.2s ease-in-out infinite;
}
.scroll-cue span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
.scroll-cue i{ font-size:1.05rem; }
.scroll-cue:hover{ opacity:1; }
@keyframes scrollBounce{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(10px); }
}

/* ===== Scroll progress bar ===== */
.scroll-progress{
  position:fixed; top:0; left:0; height:4px; width:0%; z-index:2000;
  background: var(--grad-pink-blue); box-shadow:0 0 14px rgba(255,111,165,.65);
}

/* ===== Cursor sparkle trail (hero only) ===== */
.cursor-spark{
  position:absolute; z-index:5; pointer-events:none; color:#ffd166; font-size:1rem;
  transform:translate(-50%,-50%); animation: sparkFade .9s ease-out forwards; text-shadow:0 0 8px rgba(255,209,102,.8);
}
@keyframes sparkFade{
  0%{ opacity:1; transform:translate(-50%,-50%) scale(.6) translateY(0); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.5) translateY(-46px); }
}

/* ===== About ===== */
.about-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center; }
.about-media{ position:relative; }
.about-photo-card{ padding:14px; }
.about-photo-card img{ border-radius: 20px; width:100%; aspect-ratio: 4/5; object-fit:cover; }
.about-badge{
  position:absolute; bottom:-24px; right:-16px; padding:16px 20px; display:flex; align-items:center; gap:12px;
}
.about-badge i{ font-size:1.8rem; color: var(--pink-dark); }
.about-badge strong{ display:block; font-size:.85rem; }
.about-badge span{ font-size:.8rem; color: var(--ink-soft); }
.about-content .eyebrow{ text-align:left; }
.about-content h2{ font-size: clamp(1.8rem,3vw,2.4rem); }
.check-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:20px 0; }
.check-list li{ display:flex; align-items:center; gap:8px; font-weight:600; }
.check-list i{ color: var(--pink-bright); }

/* ===== Vision ===== */
.vision-card{
  max-width:820px; margin:0 auto; padding:56px; text-align:center; position:relative;
}
.vision-icon{
  width:74px; height:74px; margin:0 auto 18px; border-radius:50%; background: var(--grad-pink-blue);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.8rem;
  box-shadow: 0 15px 30px -10px rgba(106,8,54,.5);
}
.vision-card p{ font-size:1.1rem; color: var(--ink-soft); max-width:640px; margin:0 auto; }

/* ===== Mission ===== */
.mission-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.mission-card{
  padding:32px 26px; text-align:center; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mission-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-hover); border-color: rgba(173,20,87,.45); }
.mission-icon{
  width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin:0 auto 16px; color:#fff;
}
.icon-pink{ background: linear-gradient(135deg, var(--pink), var(--pink-dark)); }
.icon-blue{ background: linear-gradient(135deg, var(--blue), var(--blue-dark)); }
.mission-card p{ margin:0; font-weight:500; color: var(--ink); }

/* ===== Programs ===== */
.programs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.program-card{
  padding:34px 28px; text-align:center; position:relative; overflow:hidden;
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.program-card:hover{ transform: translateY(-12px) scale(1.02); box-shadow: var(--shadow-hover); border-color: rgba(22,51,122,.4); }
.program-card::before{
  content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.5), transparent 60%);
  opacity:0; transition: opacity .4s ease; pointer-events:none;
}
.program-card:hover::before{ opacity:1; }
.program-illustration{
  width:84px; height:84px; margin:0 auto 18px; border-radius:26px; display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:#fff; box-shadow: 0 15px 30px -10px rgba(0,0,0,.2);
  animation: floatySlow 5s ease-in-out infinite;
}
.pi-1{ background: linear-gradient(135deg,#c2185b,#6a0836); }
.pi-2{ background: linear-gradient(135deg,#2d4ba0,#0a1333); }
.pi-3{ background: linear-gradient(135deg,#e8912a,#b45309); }
.pi-4{ background: linear-gradient(135deg,#7c3aed,#3b0764); }
.pi-5{ background: linear-gradient(135deg,#0d9488,#083c37); }
.program-card h3{ font-size:1.3rem; margin-bottom:6px; }
.age-tag{
  display:inline-block; font-size:.78rem; font-weight:600; color: var(--blue-dark); background: var(--blue-light);
  padding:4px 12px; border-radius:999px; margin-bottom:12px;
}
.card-link{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color: var(--pink-dark); margin-top:8px; }
.card-link i{ transition: transform .3s ease; }
.card-link:hover i{ transform: translateX(4px); }

/* ===== Approach Tabs ===== */
.approach-tabs{ max-width:1000px; margin:0 auto; }
.tab-buttons{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
.tab-btn{
  padding:12px 24px; border-radius:999px; font-weight:600; background: rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95); color: var(--ink-soft); transition: all .3s ease;
}
.tab-btn.active, .tab-btn:hover{ background: var(--grad-pink-blue); color:#fff; box-shadow:0 12px 25px -10px rgba(106,8,54,.5); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation: fadeIn .5s ease; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.curriculum-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.curr-card{ padding:26px 18px; text-align:center; transition: transform .3s ease; }
.curr-card:hover{ transform: translateY(-8px); }
.curr-icon{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; margin:0 auto 12px; }
.curr-card h4{ font-size:1rem; margin-bottom:6px; }
.curr-card p{ font-size:.85rem; color: var(--ink-soft); margin:0; }

.brain-layout{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; }
.brain-col{ padding:28px; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.brain-blue{ background: var(--blue-light); }
.brain-pink{ background: var(--pink-light); }
.brain-col h4{ display:flex; align-items:center; gap:10px; font-size:1.15rem; margin-bottom:14px; }
.brain-blue h4{ color: var(--blue-dark); }
.brain-pink h4{ color: var(--pink-dark); }
.brain-col ul{ display:flex; flex-direction:column; gap:12px; }
.brain-col li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.98rem; color: var(--ink-onlight); }
.brain-blue li i{ color: var(--blue-dark); width:18px; font-size:1.05rem; }
.brain-pink li i{ color: var(--pink-dark); width:18px; font-size:1.05rem; }
.brain-center{
  width:90px; height:90px; border-radius:50%; background: var(--grad-pink-blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:2.4rem; box-shadow: 0 20px 40px -12px rgba(106,8,54,.5);
  animation: floatySlow 6s ease-in-out infinite;
}
.brain-note{ text-align:center; color: var(--ink-soft-ondark); margin-top:26px; max-width:640px; margin-left:auto; margin-right:auto; }

.ready-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ready-card{ padding:26px; text-align:center; transition: transform .3s ease; }
.ready-card:hover{ transform: translateY(-8px); }
.ready-card i{ font-size:1.8rem; margin-bottom:12px; display:block; }
.ready-card h4{ font-size:1rem; margin-bottom:6px; }
.ready-card p{ font-size:.85rem; color: var(--ink-soft); margin:0; }

/* ===== Values ===== */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.value-card{ padding:34px 26px; text-align:center; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.value-card:hover{ transform: translateY(-10px) rotate(-1deg); box-shadow: var(--shadow-hover); border-color: rgba(173,20,87,.45); }
.value-icon{
  width:64px; height:64px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.6rem; margin:0 auto 16px;
}
.value-card h3{ font-size:1.1rem; margin-bottom:8px; }
.value-card p{ font-size:.9rem; color: var(--ink-soft); margin:0; }

/* ===== Gallery ===== */
.masonry-gallery{
  columns: 3 320px; column-gap:22px;
}
.gallery-item{
  display:block; width:100%; margin:0 0 18px; border-radius: var(--radius-md); overflow:hidden;
  position:relative; break-inside:avoid; box-shadow: var(--shadow-soft); border:1px solid rgba(255,255,255,.6);
}
.gallery-item img{ width:100%; display:block; transition: transform .5s ease, filter .5s ease; }
.gallery-item::after{
  content:"\f00e"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem;
  background: rgba(106,8,54,.35); opacity:0; transition: opacity .35s ease;
}
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item:hover::after{ opacity:1; }

.lightbox{
  position:fixed; inset:0; background: rgba(20,10,30,.85); z-index:3000; display:none;
  align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{ display:flex; animation: fadeIn .3s ease; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:24px; right:28px; color:#fff; font-size:1.8rem; background: rgba(255,255,255,.15);
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* ===== Celebrations ===== */
.celeb-photos-row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-bottom:26px;
}
.celeb-more{ grid-template-columns:repeat(3,1fr); margin-bottom:0; margin-top:26px; }
.celeb-item{ margin:0; height:100%; }
.celeb-item img{ height:100%; width:100%; object-fit:cover; object-position:center; aspect-ratio:16/9; }

.celeb-video-feature{
  position:relative; max-width:880px; margin:0 auto; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: 0 30px 60px -18px rgba(10,5,35,.55), 0 0 0 1px rgba(255,255,255,.08);
  aspect-ratio:16/9; background:#0c0a1e;
}
.celeb-video{ width:100%; height:100%; display:block; object-fit:cover; }
.celeb-video-caption{
  position:absolute; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:8px;
  background: rgba(20,10,30,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color:#fff; padding:8px 16px; border-radius:999px; font-size:.82rem; font-weight:600; letter-spacing:.02em;
}
.celeb-video-caption i{ color: var(--pink-bright); }

.celeb-video-card{
  position:relative; display:block; width:100%; height:100%; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-soft); border:1px solid rgba(255,255,255,.6); aspect-ratio:16/9;
}
.celeb-video-card img, .celeb-video-card video{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease, filter .5s ease; pointer-events:none; }
.celeb-video-card:hover img, .celeb-video-card:hover video{ transform: scale(1.08); filter:brightness(.85); }
.video-lightbox{
  position:fixed; inset:0; background: rgba(10,6,20,.92); z-index:3000; display:none;
  align-items:center; justify-content:center; padding:40px;
}
.video-lightbox.open{ display:flex; animation: fadeIn .3s ease; }
.video-lightbox video{ max-width:92vw; max-height:85vh; border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.5); background:#000; }

/* ===== Testimonials ===== */
.testimonial-swiper{ padding-bottom:50px; }
.testimonial-card{ padding:36px 30px; text-align:center; height:100%; transition: transform .3s ease; }
.t-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 14px; background: var(--grad-pink-blue);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem;
}
.stars{ color:#ffb703; margin-bottom:14px; font-size:.9rem; }
.testimonial-card p{ font-style:italic; color: var(--ink-soft); margin-bottom:18px; }
.testimonial-card strong{ display:block; }
.testimonial-card span{ font-size:.82rem; color: var(--ink-soft); }
.swiper-pagination-bullet-active{ background: var(--pink-dark); }

/* ===== Admission Timeline ===== */
.timeline{ display:flex; align-items:flex-start; justify-content:center; flex-wrap:wrap; gap:10px 6px; }
.timeline-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:150px; }
.step-circle{
  width:56px; height:56px; border-radius:50%; background: var(--grad-pink-blue); color:#fff; font-family:var(--font-head);
  font-size:1.3rem; display:flex; align-items:center; justify-content:center; box-shadow:0 15px 30px -10px rgba(106,8,54,.5);
  margin-bottom:10px;
}
.step-icon{ font-size:1.4rem; color: var(--blue-bright); margin-bottom:8px; }
.timeline-step h4{ font-size:.95rem; margin:0; }
.timeline-arrow{ color: var(--pink-bright); font-size:1.3rem; align-self:center; margin-top:26px; }

/* ===== Contact ===== */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:30px; align-items:stretch; }
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-content:start; }
.contact-card{
  display:flex; align-items:center; gap:14px; padding:20px; transition: transform .3s ease, box-shadow .3s ease;
}
.contact-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.c-icon{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; flex-shrink:0; }
.contact-card strong{ display:block; font-size:.92rem; }
.contact-card span{ font-size:.82rem; color: var(--ink-soft); }
.contact-map{ overflow:hidden; padding:10px; min-height:320px; }
.contact-map iframe{ width:100%; height:100%; min-height:300px; border:0; border-radius:18px; }

/* ===== CTA ===== */
.cta-section{
  position:relative; overflow:hidden; padding:100px 20px; text-align:center;
  background: var(--grad-pink-blue);
}
.cta-inner h2{ color:#fff; font-size: clamp(1.8rem,3.6vw,2.6rem); max-width:700px; margin:0 auto 30px; }
.cta-floaters{ position:absolute; inset:0; }
.cta-floaters .f-cloud1{ top:10%; left:8%; color:rgba(255,255,255,.5); }
.cta-floaters .f-star{ top:20%; left:85%; color:#fff; }
.cta-floaters .f-balloon1{ top:60%; left:5%; color:rgba(255,255,255,.4); }
.cta-floaters .f-balloon2{ top:70%; left:90%; color:rgba(255,255,255,.5); }
.cta-floaters .f-rainbow{ top:8%; left:50%; color:rgba(255,255,255,.5); }

/* ===== Footer ===== */
.site-footer{ background:#150f36; color:#c7c2e0; padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:50px; }
.footer-logo{ width:56px; height:56px; border-radius:50%; margin-bottom:14px; }
.footer-brand h3{ color:#fff; font-size:1.4rem; margin-bottom:4px; }
.footer-tagline{ color: var(--pink); font-weight:600; }
.footer-tagline span{ color: var(--blue); }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center;
  justify-content:center; transition: all .3s ease;
}
.footer-social a:hover{ background: var(--grad-pink-blue); transform: translateY(-4px); }
.footer-links, .footer-contact{ display:flex; flex-direction:column; gap:12px; }
.footer-links h4, .footer-contact h4{ color:#fff; margin-bottom:6px; font-size:1.05rem; }
.footer-links a, .footer-contact a{ color:#cfc9e0; font-size:.92rem; transition: color .3s ease; display:flex; align-items:center; gap:8px; }
.footer-links a:hover, .footer-contact a:hover{ color: var(--pink); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; text-align:center; font-size:.85rem; }
.footer-credit{ margin-top:6px; font-size:.78rem; color: var(--ink-soft-ondark); }
.footer-credit span{ color: var(--pink-bright); font-weight:700; }

/* ===== Back to Top ===== */
.back-to-top{
  position:fixed; right:24px; bottom:100px; z-index:4800; width:48px; height:48px; border-radius:50%;
  background: var(--grad-pink-blue); color:#fff; font-size:1.15rem; display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.85); box-shadow:0 16px 32px -10px rgba(106,8,54,.55);
  opacity:0; visibility:hidden; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
  cursor:pointer;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ transform: translateY(-6px) scale(1.08); }

/* ===== Enquiry Modal ===== */
.modal-overlay{
  position:fixed; inset:0; background: rgba(30,15,45,.55); z-index:4000; display:none;
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; animation: fadeIn .3s ease; }
.modal-box{
  max-width:520px; width:100%; padding:36px 32px; position:relative; max-height:90vh; overflow-y:auto;
  animation: modalPop .4s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes modalPop{ from{ opacity:0; transform: scale(.85);} to{ opacity:1; transform:scale(1);} }
.modal-close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; background: rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center; color: var(--ink-soft);
}
.modal-close:hover{ background: var(--pink-light); color: var(--pink-dark); }
.modal-head{ text-align:center; margin-bottom:22px; }
.modal-head h3{ font-size:1.6rem; margin-bottom:4px; }
.modal-head p{ color: var(--ink-soft); margin:0; }
.enquiry-form{ display:flex; flex-direction:column; gap:14px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea{
  width:100%; padding:12px 16px; border-radius:12px; border:1.5px solid #eee0ea; font-family:inherit; font-size:.92rem;
  background: #fff; transition: border-color .3s ease;
}
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus{ outline:none; border-color: var(--pink); }
.form-actions{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; }
.form-success{ display:none; text-align:center; padding:30px 10px; }
.form-success.show{ display:block; }
.form-success i{ font-size:3rem; color: var(--pink-dark); margin-bottom:14px; }
.form-success p{ font-weight:600; font-size:1.1rem; }

/* ===== Mascot Character Badges (floating, kid-appeal) ===== */
@keyframes mascotWiggle{
  0%,100%{ transform: translateY(0) rotate(-4deg); }
  50%{ transform: translateY(-16px) rotate(5deg); }
}
.mascot-badge{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  animation: mascotWiggle 4.5s ease-in-out infinite;
}
.mascot-badge img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  border:4px solid #fff; transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 14px 30px -8px rgba(20,12,55,.4), 0 0 0 3px rgba(173,20,87,.25);
}
.mascot-badge{ pointer-events:auto; cursor:default; }
.mascot-badge:hover img{ transform: scale(1.12) rotate(-6deg); box-shadow: 0 18px 36px -8px rgba(20,12,55,.5), 0 0 0 4px rgba(255,111,165,.5); }
.mascot-sm{ width:78px; height:78px; }
.mascot-md{ width:104px; height:104px; }
.mascot-lg{ width:132px; height:132px; }
/* Per-section placement */
.mascot-hero{ bottom:6%; left:3%; animation-delay:.2s; }
.mascot-about{ top:-24px; right:6%; animation-delay:.6s; }
.mascot-vision{ bottom:-22px; left:4%; animation-delay:1s; }
.mascot-mission{ top:-20px; left:2%; animation-delay:.4s; }
.mascot-programs{ top:-24px; right:3%; animation-delay:.8s; }
.mascot-approach{ bottom:-20px; right:4%; animation-delay:.3s; }
.mascot-values{ top:-22px; left:3%; animation-delay:1.1s; }
.mascot-gallery{ top:-20px; right:5%; animation-delay:.5s; }
.mascot-celebrations{ top:-22px; left:4%; animation-delay:1.05s; }
.mascot-testimonials{ bottom:-20px; left:3%; animation-delay:.9s; }
.mascot-admission{ top:-22px; right:2%; animation-delay:.2s; }
.mascot-contact{ bottom:-20px; left:5%; animation-delay:.7s; }
.mascot-cta{ top:8%; left:4%; animation-delay:.4s; }

/* "Meet our friends" strip */
.friends-strip{ padding:36px 0; position:relative; z-index:1; }
.friends-strip .container{ display:flex; justify-content:center; }
.friends-card{
  padding:16px; max-width:1180px; width:100%; text-align:center;
}
.friends-card img{ width:100%; border-radius:20px; display:block; }
.friends-card h3{
  font-size:1.1rem; margin:14px 0 0; color: var(--pink-dark);
  display:flex; align-items:center; justify-content:center; gap:8px;
}

@media (max-width: 860px){
  .mascot-lg{ width:96px; height:96px; }
  .mascot-md{ width:78px; height:78px; }
  .mascot-sm{ width:62px; height:62px; }
}
@media (max-width: 480px){
  .mascot-lg{ width:60px; height:60px; }
  .mascot-md{ width:52px; height:52px; }
  .mascot-sm{ width:44px; height:44px; }
  .mascot-badge img{ border-width:3px; }
  .mascot-badge{ opacity:.92; }
  .mascot-intro{ top:-14px; right:3%; }
  .mascot-about{ top:-14px; right:3%; }
  .mascot-vision{ bottom:-12px; left:2%; }
  .mascot-mission{ top:-12px; left:2%; }
  .mascot-programs{ top:-14px; right:2%; }
  .mascot-approach{ bottom:-12px; right:2%; }
  .mascot-values{ top:-12px; left:2%; }
  .mascot-gallery{ top:-12px; right:2%; }
  .mascot-celebrations{ top:-12px; left:2%; }
  .mascot-testimonials{ bottom:-12px; left:2%; }
  .mascot-admission{ top:-12px; right:2%; }
  .mascot-contact{ bottom:-12px; left:2%; }
  .mascot-cta{ top:4%; left:3%; }
}

/* ===== Floating Social Quick-Contact Stack ===== */
.social-float{
  position:fixed; left:22px; bottom:26px; z-index:4500; display:flex; flex-direction:column; gap:14px;
}
.social-float-btn{
  position:relative; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.35rem; box-shadow: 0 14px 28px -8px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.7);
  animation: floatySlow 5s ease-in-out infinite; transition: transform .3s ease, box-shadow .3s ease;
}
.social-float-btn:hover{ transform: translateY(-6px) scale(1.1); box-shadow: 0 20px 36px -8px rgba(0,0,0,.45), 0 0 0 3px rgba(255,255,255,.9); }
.social-float-btn.wa{ background: linear-gradient(135deg,#25d366,#128c4a); animation-delay:0s; }
.social-float-btn.fb{ background: linear-gradient(135deg,#1877f2,#0a4fb3); animation-delay:.5s; }
.social-float-btn.yt{ background: linear-gradient(135deg,#ff4b4b,#c4302b); animation-delay:1s; }
.sf-tooltip{
  position:absolute; left:64px; top:50%; transform: translateY(-50%) translateX(-8px);
  background:#150f36; color:#fff; padding:7px 14px; border-radius:8px; font-size:.76rem; font-weight:600;
  white-space:nowrap; opacity:0; pointer-events:none; transition: all .25s ease; box-shadow:0 10px 20px rgba(0,0,0,.25);
}
.social-float-btn:hover .sf-tooltip{ opacity:1; transform: translateY(-50%) translateX(0); }

/* ===== AI Chat Widget ===== */
.chat-widget{ position:fixed; bottom:24px; right:24px; z-index:5000; }
.chat-toggle{
  width:64px; height:64px; border-radius:50%; background: var(--grad-pink-blue); color:#fff; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center; box-shadow:0 18px 36px -10px rgba(106,8,54,.6);
  position:relative; transition: transform .3s ease;
}
.chat-toggle:hover{ transform: scale(1.08); }
.chat-toggle-icon{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.chat-mascot-img{
  width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.85);
}
.chat-ping{
  position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%; background:#4ade80;
  border:3px solid #fff;
}
.chat-panel{
  position:absolute; bottom:80px; right:0; width:360px; max-width:90vw; height:520px; max-height:75vh;
  display:none; flex-direction:column; overflow:hidden; padding:0;
}
.chat-panel.open{ display:flex; animation: modalPop .3s ease; }
.chat-header{
  display:flex; align-items:center; gap:12px; padding:18px 20px; background: var(--grad-pink-blue); color:#fff;
}
.chat-avatar{
  width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,.25); display:flex; align-items:center;
  justify-content:center; font-size:1.3rem; overflow:hidden;
}
.chat-avatar img{ width:100%; height:100%; object-fit:cover; }
.chat-header strong{ display:block; font-size:1rem; }
.chat-header span{ font-size:.75rem; opacity:.9; }
.chat-close{ margin-left:auto; color:#fff; font-size:1.1rem; }
.chat-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; background: #fdf6fa; }
.chat-msg{ max-width:85%; padding:12px 16px; border-radius:16px; font-size:.88rem; line-height:1.5; }
.chat-msg.bot{ background:#fff; border:1px solid #f1e3ec; align-self:flex-start; border-bottom-left-radius:4px; }
.chat-msg.user{ background: var(--grad-pink-blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-quick-actions{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px; background:#fdf6fa; }
.chat-quick-actions button{
  font-size:.76rem; padding:7px 12px; border-radius:999px; background:#fff; border:1px solid var(--pink-light);
  color: var(--pink-dark); font-weight:600; transition: all .25s ease;
}
.chat-quick-actions button:hover{ background: var(--grad-pink-blue); color:#fff; }
.chat-input-row{ display:flex; border-top:1px solid #f1e3ec; padding:10px; gap:8px; background:#fff; }
.chat-input-row input{
  flex:1; border:1.5px solid #f1e3ec; border-radius:999px; padding:10px 16px; font-size:.85rem; font-family:inherit;
}
.chat-input-row input:focus{ outline:none; border-color: var(--pink); }
.chat-input-row button{
  width:40px; height:40px; border-radius:50%; background: var(--grad-pink-blue); color:#fff; display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
}
.chat-lead-form{ display:flex; flex-direction:column; gap:8px; background:#fff; padding:14px; border-radius:14px; border:1px solid #f1e3ec; max-width:100%; }
.chat-lead-form input, .chat-lead-form select, .chat-lead-form textarea{
  width:100%; padding:9px 12px; border-radius:10px; border:1.5px solid #eee0ea; font-size:.82rem; font-family:inherit;
}
.chat-lead-form input:focus, .chat-lead-form select:focus, .chat-lead-form textarea:focus{ outline:none; border-color: var(--pink); }

/* ===== Toast ===== */
.toast{
  position:fixed; bottom:30px; left:50%; transform: translateX(-50%) translateY(20px); background: var(--ink);
  color:#fff; padding:14px 26px; border-radius:999px; font-size:.9rem; z-index:6000; opacity:0; pointer-events:none;
  transition: all .35s ease; box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .about-grid{ grid-template-columns:1fr; gap:70px 0; }
  .mission-grid{ grid-template-columns:repeat(2,1fr); }
  .programs-grid{ grid-template-columns:repeat(2,1fr); }
  .curriculum-grid{ grid-template-columns:repeat(3,1fr); }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .masonry-gallery{ columns:2 280px; }
  .celeb-more{ grid-template-columns:repeat(2,1fr); }
  .celeb-more .celeb-item{ grid-column: span 2; }
}

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .brand-text{ display:flex; }
  .nav-menu{
    position:fixed; top:78px; right:20px; left:20px; flex-direction:column; align-items:stretch; gap:0;
    background: rgba(255,255,255,.97); border-radius:22px; box-shadow:0 25px 50px -15px rgba(10,8,40,.35);
    padding:10px; transform-origin:top right; transform: scale(.95); opacity:0; pointer-events:none;
    transition: all .3s ease;
  }
  .nav-menu.open{ opacity:1; transform:scale(1); pointer-events:auto; }
  .nav-menu li{ width:100%; }
  .nav-link{ display:block; padding:14px 10px; border-bottom:1px solid #f4eef4; }
  .nav-link::after{ display:none; }
  .nav-cta{ margin:10px 0 4px; }
  .nav-cta .btn{ width:100%; justify-content:center; }

  .brain-layout{ grid-template-columns:1fr; }
  .brain-center{ margin:0 auto; }
  .curriculum-grid{ grid-template-columns:repeat(2,1fr); }
  .ready-grid{ grid-template-columns:repeat(2,1fr); }
  .timeline{ flex-direction:column; align-items:center; }
  .timeline-arrow{ transform: rotate(90deg); margin:0; align-self:center; }
  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .footer-social{ justify-content:center; }

  .hero-inner-split{ grid-template-columns:1fr; gap:44px; text-align:center; }
  .hero-cartoon-wrap{ order:2; }
  .hero-cartoon-img{ max-width:340px; margin:0 auto; }
  .hero-card{ order:1; max-width:600px; margin:0 auto; }
  .hero-cartoon-chip{ font-size:.7rem; padding:7px 12px; }
}

@media (max-width: 640px){
  .section{ padding:64px 0; }
  .hero{ padding:120px 16px 80px; min-height:100vh; min-height:100dvh; }
  .hero-fullscreen{ padding:0; }
  .intro-section{ padding-top:56px; }
  .hero-card{ padding:32px 20px; max-width:100%; }
  .hero-card h1{ font-size:1.7rem; }
  .hero-sub{ font-size:.98rem; }
  .hero-tagline{ font-size:.82rem; letter-spacing:.1em; }
  .hero-tagline span{ margin:0 7px; }
  .hero-actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .glow-pink, .glow-blue{ width:220px; height:220px; filter:blur(60px); }
  .hero-cartoon-img{ max-width:250px; }
  .chip-1{ left:0; top:2%; }
  .chip-2{ right:0; bottom:6%; }
  .scroll-cue{ bottom:70px; }
  .hero-cartoon-ring{ display:none; }
  .mission-grid, .programs-grid, .values-grid, .curriculum-grid, .ready-grid{ grid-template-columns:1fr; }
  .check-list{ grid-template-columns:1fr; }
  .contact-cards{ grid-template-columns:1fr; }
  .masonry-gallery{ columns:2 165px; column-gap:12px; }
  .celeb-photos-row, .celeb-more{ grid-template-columns:1fr; gap:16px; }
  .celeb-more .celeb-item{ grid-column:auto; }
  .celeb-video-caption{ font-size:.74rem; padding:7px 13px; left:12px; bottom:12px; }
  .form-row{ grid-template-columns:1fr; }
  .chat-panel{ width:92vw; right:-8px; height:70vh; }
  .float-item{ transform: scale(.7); }
  .about-badge{ position:static; margin-top:16px; }
  .social-float{ left:14px; bottom:20px; gap:10px; }
  .social-float-btn{ width:44px; height:44px; font-size:1.15rem; }
  .sf-tooltip{ display:none; }
  .back-to-top{ right:16px; bottom:88px; width:42px; height:42px; font-size:1rem; }
  .cta-inner h2{ font-size:1.6rem; }
  .cta-inner .hero-actions{ max-width:320px; margin:0 auto; }
  .timeline-step{ width:auto; max-width:200px; }
}

@media (max-width: 400px){
  .container{ padding:0 14px; }
  .hero{ padding:110px 12px 70px; }
  .hero-fullscreen{ padding:0; }
  .hero-card{ padding:26px 16px; }
  .hero-card h1{ font-size:1.45rem; }
  .pill-badge{ font-size:.72rem; padding:6px 12px; }
  .hero-tagline{ font-size:.74rem; letter-spacing:.08em; }
  .hero-tagline span{ margin:0 5px; }
  .brand-logo{ width:42px; height:42px; }
  .brand-text strong{ font-size:.92rem; }
  .brand-text em{ font-size:.74rem; }
  .masonry-gallery{ columns:1 100%; }
  .value-card, .program-card, .mission-card{ padding:26px 18px; }
}

/* ===== Hero image: fully visible, uncropped, no-overflow on mobile & tablet =====
   Overrides all earlier hero rules (kept last on purpose so it always wins). */
@media (max-width: 1024px){
  .hero-fullscreen{
    display:block; min-height:auto; height:auto; overflow:visible;
    padding:110px 0 0;
  }
  .hero-fullscreen .hero-bg-photo{
    position:static; width:100%; max-width:100%; height:auto;
    display:block; object-fit:contain; object-position:center top;
    transform:none; filter:none;
  }
  .hero-fullscreen .hero-overlay{ display:none; }
  .hero-fullscreen .hero-glow{ display:none; }
  .hero-fullscreen .scroll-cue{ display:none; }
  .hero-fullscreen .hero-wave{ position:relative; bottom:auto; margin-top:-4px; }
}

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

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}