/* =========================================================
   KIDS KINGDOM PLAYSCHOOL — Premium Dark Green & Gold Theme
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --green-950:#061a13;
  --green-900:#0a2b1f;
  --green-800:#0e3a29;
  --green-700:#134a34;
  --green-600:#1a6b4d;
  --green-500:#238a63;
  --gold-700:#a97800;
  --gold-600:#c98f00;
  --gold-500:#e0a800;
  --gold-400:#f2b705;
  --gold-300:#ffd54f;
  --cream:#f8f1e0;
  --cream-dim:#cfc6ac;
  --white:#ffffff;
  --ink:#04120c;

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-xl:40px;

  --shadow-soft:0 20px 60px -20px rgba(0,0,0,.55);
  --shadow-gold:0 10px 30px -8px rgba(242,183,5,.45);

  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:'Fredoka', ui-rounded, 'Poppins', sans-serif;
  --font-body:'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(242,183,5,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(35,138,99,.18), transparent 55%),
    linear-gradient(180deg, var(--green-950), var(--green-900) 40%, var(--green-800) 100%);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block; height:auto;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .4em; font-weight:600; color:var(--white); line-height:1.15;}
p{margin:0 0 1em;}
ul{list-style:none; margin:0; padding:0;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold-400); color:var(--ink);
  padding:.75rem 1.25rem; z-index:999; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus{left:0;}

.container{max-width:1240px; margin:0 auto; padding:0 24px;}
.section{padding:96px 0; position:relative;}
@media (max-width:768px){ .section{padding:64px 0;} }

.section-head{max-width:680px; margin:0 auto 48px; text-align:center;}
.eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; font-size:.78rem; color:var(--gold-300);
  background:rgba(242,183,5,.1); border:1px solid rgba(242,183,5,.35);
  padding:.35em 1em; border-radius:999px; margin-bottom:14px;
}
.section-title{font-size:clamp(1.7rem, 3.4vw, 2.6rem);}
.section-text{color:var(--cream-dim); font-size:1.05rem; max-width:56ch;}
.section-head .section-text{margin:0 auto;}

/* ---------- Buttons & Badges ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  padding:.85em 1.7em; border-radius:999px; border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  white-space:nowrap; will-change:transform;
}
.btn:hover{transform:translateY(-3px);}
.btn:active{transform:translateY(-1px);}
.btn-lg{padding:1em 2.1em; font-size:1.05rem;}
.btn-sm{padding:.6em 1.25em; font-size:.88rem;}

.btn-gold{
  background:linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color:var(--ink); box-shadow:var(--shadow-gold);
}
.btn-gold:hover{box-shadow:0 16px 40px -10px rgba(242,183,5,.6);}

.btn-outline{
  background:rgba(248,241,224,.05); color:var(--cream);
  border-color:rgba(248,241,224,.35); backdrop-filter:blur(6px);
}
.btn-outline:hover{background:rgba(248,241,224,.12); border-color:var(--gold-300);}

.btn-whatsapp{
  background:linear-gradient(135deg,#37c26d,#1ea457); color:#fff;
  box-shadow:0 10px 30px -10px rgba(30,164,87,.55);
}
.btn-whatsapp:hover{box-shadow:0 16px 36px -8px rgba(30,164,87,.7);}
.wa-icon{color:#bff7d5; font-size:.6em;}

.badge{font-size:.85rem; padding:.5em 1.2em; border-radius:999px; display:inline-block;}
.glass-badge{
  background:rgba(248,241,224,.08); border:1px solid rgba(242,183,5,.4);
  color:var(--gold-300); backdrop-filter:blur(10px); font-family:var(--font-display); font-weight:500;
  letter-spacing:.03em;
}

.glass-card{
  background:linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}

/* ---------- Reveal animations ---------- */
.reveal-up,.reveal-left,.reveal-right{opacity:0; transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-up{transform:translateY(36px);}
.reveal-left{transform:translateX(-42px);}
.reveal-right{transform:translateX(42px);}
.reveal-up.in-view,.reveal-left.in-view,.reveal-right.in-view{opacity:1; transform:none;}

/* ---------- Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--green-950);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.preloader-inner{text-align:center;}
.preloader-crown{font-size:3rem; animation:bounce 1.1s ease-in-out infinite;}
.preloader-bar{width:180px; height:6px; border-radius:99px; background:rgba(255,255,255,.1); margin-top:18px; overflow:hidden;}
.preloader-bar span{display:block; height:100%; width:40%; border-radius:99px;
  background:linear-gradient(90deg, var(--gold-400), var(--gold-300));
  animation:loadbar 1.1s ease-in-out infinite;}
@keyframes loadbar{0%{transform:translateX(-120%);} 100%{transform:translateX(340%);}}
@keyframes bounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}

/* ---------- Navigation ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:18px 0; transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-nav.scrolled{
  padding:8px 0; background:rgba(6,26,19,.78); backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.6); border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav-logo img{height:52px; width:auto; transition:height .4s var(--ease);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));}
.site-nav.scrolled .nav-logo img{height:42px;}

.nav-links{display:flex; align-items:center; gap:6px;}
.nav-link{
  font-family:var(--font-display); font-weight:500; font-size:.94rem; color:var(--cream-dim);
  padding:.55em 1em; border-radius:999px; position:relative; transition:color .3s, background .3s;
}
.nav-link:hover, .nav-link.active-link{color:var(--gold-300); background:rgba(242,183,5,.08);}

.nav-actions{display:flex; align-items:center; gap:14px;}
.nav-enquire{padding:.65em 1.4em; font-size:.92rem;}

.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
}
.hamburger span{width:24px; height:2.5px; background:var(--cream); border-radius:2px; transition:transform .35s var(--ease), opacity .35s var(--ease);}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

.mobile-menu{
  max-height:0; overflow:hidden; transition:max-height .5s var(--ease);
  background:rgba(7,26,19,.98); backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.06);
}
.mobile-menu.open{max-height:640px;}
.mobile-link{display:block; padding:14px 28px; font-family:var(--font-display); font-weight:500; color:var(--cream);
  border-bottom:1px solid rgba(255,255,255,.05);}
.mobile-enquire{margin:16px 28px; width:calc(100% - 56px);}
.mobile-menu-social{display:flex; gap:10px; padding:6px 28px 22px; flex-wrap:wrap;}
.mobile-menu-social a{font-size:.85rem; background:rgba(255,255,255,.06); padding:.5em 1em; border-radius:999px;}

@media (max-width:960px){
  .nav-links{display:none;}
  .nav-enquire{display:none;}
  .hamburger{display:flex;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:140px 20px 80px;
}
.hero-bg-gradient{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(650px 420px at 50% 8%, rgba(242,183,5,.16), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(35,138,99,.28), transparent 60%),
    radial-gradient(600px 500px at 5% 85%, rgba(35,138,99,.22), transparent 60%);
}
.hero-canvas{position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:.9;}

.hero-floaters{position:absolute; inset:0; z-index:1; pointer-events:none;}
.floater{position:absolute; font-size:2.4rem; filter:drop-shadow(0 10px 18px rgba(0,0,0,.4)); animation:float 7s ease-in-out infinite;}
.cloud-1{top:14%; left:8%; font-size:3rem; animation-duration:9s;}
.cloud-2{top:20%; right:10%; font-size:2.4rem; animation-duration:10s; animation-delay:.6s;}
.block-1{bottom:20%; left:10%; animation-duration:6.5s;}
.block-2{top:60%; right:8%; animation-duration:7.5s; animation-delay:.3s;}
.star-1{top:12%; right:22%; font-size:1.6rem; animation-duration:5.5s;}
.star-2{bottom:30%; left:22%; font-size:1.4rem; animation-duration:6.2s; animation-delay:.8s;}
.book-1{bottom:14%; right:20%; animation-duration:8s;}
.tree-1{bottom:8%; left:4%; font-size:3.2rem; animation-duration:9.5s;}
.balloon-1{top:8%; left:38%; font-size:2rem; animation-duration:7.2s;}
.rocket-1{top:65%; left:2%; font-size:2.2rem; animation-duration:8.4s; transform:rotate(20deg);}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-24px) rotate(6deg);}
}
@media (max-width:768px){
  .floater{font-size:1.7rem;}
  .cloud-1,.cloud-2{font-size:2rem;}
  .tree-1{font-size:2.2rem;}
}

.hero-content{position:relative; z-index:2; max-width:820px; margin:0 auto;}
.hero-content .badge{margin-bottom:22px;}
.hero-title{
  font-size:clamp(2.1rem, 6vw, 4.4rem); margin-bottom:.35em; letter-spacing:-.01em;
}
.gold-3d{
  display:inline-block; color:var(--gold-300);
  background:linear-gradient(180deg, #fff3c4 0%, var(--gold-400) 45%, var(--gold-700) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.15);
  filter:drop-shadow(0 10px 22px rgba(242,183,5,.35));
  position:relative;
}
.hero-sub{font-size:clamp(1.02rem, 2vw, 1.3rem); color:var(--cream-dim); max-width:60ch; margin:0 auto 2.2em;}
.hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  width:28px; height:44px; border:2px solid rgba(248,241,224,.4); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:5px; height:9px; border-radius:3px; background:var(--gold-300);
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{0%{opacity:1; top:8px;} 70%{opacity:0; top:24px;} 100%{opacity:0; top:8px;}}
@media (max-width:640px){ .scroll-cue{display:none;} }

/* ---------- Tilt cards (3D) ---------- */
.tilt-card{ transform-style:preserve-3d; transition:transform .25s var(--ease), box-shadow .25s var(--ease); will-change:transform;}

/* ---------- About ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.about-visual{position:relative;}
.about-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-soft);
}
.about-frame img{width:100%; aspect-ratio:4/3.2; object-fit:cover;}
.floating-tag{
  position:absolute; bottom:18px; left:18px; background:rgba(6,26,19,.75);
  backdrop-filter:blur(10px); border:1px solid rgba(242,183,5,.4); color:var(--gold-300);
  padding:.6em 1.1em; border-radius:999px; font-family:var(--font-display); font-size:.85rem;
  animation:float 6s ease-in-out infinite;
}
.about-blob{
  position:absolute; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,183,5,.35), transparent 70%);
  top:-40px; right:-60px; z-index:-1; filter:blur(10px);
}
.about-highlights{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0 8px;}
.about-highlights li{
  display:flex; align-items:center; gap:.6em; font-weight:500; color:var(--cream);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  padding:.7em 1em; border-radius:14px; font-size:.94rem;
}
.hl-icon{font-size:1.1em;}

@media (max-width:860px){
  .about-grid{grid-template-columns:1fr; gap:40px;}
  .about-highlights{grid-template-columns:1fr 1fr;}
}

/* ---------- Founder ---------- */
.founder-card{
  display:flex; align-items:center; gap:44px; padding:48px; max-width:920px; margin:0 auto;
}
.founder-photo-wrap{
  position:relative; flex-shrink:0; width:230px; border-radius:var(--radius-lg);
  overflow:hidden; border:3px solid var(--gold-400);
  box-shadow:0 0 0 8px rgba(242,183,5,.08), var(--shadow-soft);
}
.founder-photo{width:100%; height:288px; object-fit:cover; object-position:center 15%; display:block;}
.avatar-crown{
  position:absolute; top:-12px; right:-10px; font-size:2rem; transform:rotate(14deg);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.founder-name{margin-bottom:.15em;}
.founder-title{color:var(--gold-300); font-weight:500; margin-bottom:.9em;}
.founder-message{color:var(--cream-dim); font-style:italic; font-size:1.08rem; max-width:56ch;}
@media (max-width:700px){
  .founder-card{flex-direction:column; text-align:center; padding:36px 24px; gap:22px;}
  .founder-photo-wrap{width:190px; margin:0 auto;}
  .founder-photo{height:238px;}
}

/* ---------- Programs ---------- */
.program-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:22px;}
.program-card{
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-md);
  padding:32px 22px; text-align:center;
}
.program-card:hover{box-shadow:0 22px 44px -18px rgba(0,0,0,.6);}
.program-icon{
  --c1:#f2b705; --c2:#c98f00;
  width:74px; height:74px; margin:0 auto 18px; border-radius:22px; font-size:2rem;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--c1), var(--c2));
  box-shadow:0 14px 28px -10px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.35);
}
.program-card h3{font-size:1.15rem; margin-bottom:.4em;}
.program-card p{color:var(--cream-dim); font-size:.92rem; margin:0;}
.program-whatsapp-cta{text-align:center; margin-top:44px;}

@media (max-width:1024px){ .program-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .program-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- Daycare ---------- */
.daycare-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.daycare-features{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0 30px;}
.dc-feature{
  display:flex; align-items:center; gap:.6em; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); padding:.7em 1em; border-radius:14px; font-size:.92rem;
}
.daycare-visual{display:flex; align-items:center; justify-content:center; position:relative; min-height:340px;}
.daycare-frame{width:100%;}
.daycare-frame img{aspect-ratio:16/11;}
.home-3d{position:relative; width:260px; height:260px; perspective:900px;}
.home-roof{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:140px solid transparent; border-right:140px solid transparent;
  border-bottom:90px solid var(--gold-400); filter:drop-shadow(0 12px 18px rgba(0,0,0,.4));
  animation:sway 5s ease-in-out infinite;
}
.home-body{
  position:absolute; top:78px; left:50%; transform:translateX(-50%);
  width:220px; height:180px; border-radius:14px;
  background:linear-gradient(160deg, var(--green-600), var(--green-800));
  border:1px solid rgba(255,255,255,.15); box-shadow:var(--shadow-soft);
  animation:sway 5s ease-in-out infinite; animation-delay:.1s;
}
.home-heart{position:absolute; top:16px; left:50%; transform:translateX(-50%); font-size:1.6rem;}
.home-door{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:56px; height:90px; border-radius:10px 10px 0 0;
  background:linear-gradient(160deg, var(--gold-400), var(--gold-600));
}
.home-window{
  position:absolute; top:56px; left:28px; width:38px; height:38px; border-radius:8px;
  background:rgba(255,213,79,.85); box-shadow:0 0 20px rgba(255,213,79,.55);
}
.home-window.w2{left:auto; right:28px;}
.home-glow{
  position:absolute; inset:-40px; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(242,183,5,.28), transparent 65%); filter:blur(6px);
}
@keyframes sway{0%,100%{transform:translateX(-50%) rotate(0deg);} 50%{transform:translateX(-50%) rotate(1.4deg);}}

@media (max-width:860px){
  .daycare-grid{grid-template-columns:1fr; gap:40px;}
  .daycare-grid .daycare-visual{order:-1;}
}

/* ---------- Why Us ---------- */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.why-card{
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-md); padding:32px;
}
.why-card:hover{box-shadow:0 22px 44px -18px rgba(0,0,0,.6); border-color:rgba(242,183,5,.35);}
.why-icon{font-size:2rem; margin-bottom:14px;
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  border-radius:18px; background:rgba(242,183,5,.1); border:1px solid rgba(242,183,5,.25);}
.why-card h3{font-size:1.12rem;}
.why-card p{color:var(--cream-dim); font-size:.92rem; margin:0;}
@media (max-width:860px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }

/* ---------- Activities ---------- */
.activity-scroll{overflow-x:auto; margin:0 -24px; padding:8px 24px 24px; scrollbar-width:thin;}
.activity-track{display:flex; gap:20px; width:max-content;}
.activity-card{
  width:170px; flex-shrink:0; text-align:center; padding:30px 18px; border-radius:var(--radius-md);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1); transition:transform .35s var(--ease), border-color .35s;
}
.activity-card:hover{transform:translateY(-8px); border-color:rgba(242,183,5,.4);}
.ac-ico{font-size:2.2rem; margin-bottom:10px;}
.activity-card h3{font-size:.98rem; margin:0;}

/* ---------- Learning World ---------- */
.kingdom-map{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:900px; margin:0 auto;
}
.kingdom-zone{
  position:relative; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md);
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  padding:34px 16px; text-align:center; color:var(--cream);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.kingdom-zone:hover, .kingdom-zone:focus-visible, .kingdom-zone.active-zone{
  transform:translateY(-6px) scale(1.03); border-color:var(--gold-400);
  box-shadow:0 20px 40px -16px rgba(242,183,5,.35);
}
.zone-ico{display:block; font-size:2.3rem; margin-bottom:10px;}
.zone-label{font-family:var(--font-display); font-weight:500; font-size:.96rem;}
.kingdom-infobox{
  max-width:700px; margin:34px auto 0; display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md); padding:20px 26px; min-height:34px;
  transition:opacity .3s;
}
.kingdom-infobox-icon{font-size:1.6rem; flex-shrink:0;}
.kingdom-infobox p{margin:0; color:var(--cream-dim);}
@media (max-width:700px){ .kingdom-map{grid-template-columns:1fr 1fr;} }

/* ---------- Gallery ---------- */
.gallery-filters{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:36px;}
.filter-btn{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--cream-dim);
  padding:.55em 1.3em; border-radius:999px; font-family:var(--font-display); font-size:.88rem;
  font-weight:500; transition:all .3s;
}
.filter-btn:hover{color:var(--cream);}
.filter-btn.active{background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:var(--ink); border-color:transparent;}

.masonry{column-count:3; column-gap:20px;}
.masonry-item{
  break-inside:avoid; margin-bottom:20px; position:relative; border-radius:var(--radius-md);
  overflow:hidden; border:1px solid rgba(255,255,255,.1); cursor:pointer;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.masonry-item.filtered-out{display:none;}
.masonry-item img{width:100%; transition:transform .6s var(--ease);}
.masonry-item:hover img{transform:scale(1.08);}
.masonry-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px 12px;
  background:linear-gradient(0deg, rgba(4,18,12,.88), transparent);
  font-family:var(--font-display); font-size:.85rem; color:var(--cream);
  opacity:0; transform:translateY(10px); transition:all .4s var(--ease);
}
.masonry-item:hover figcaption{opacity:1; transform:translateY(0);}
.placeholder-item{cursor:default;}
.placeholder-visual{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  aspect-ratio:4/3.4; background:repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, rgba(255,255,255,.02) 10px 20px);
  color:var(--cream-dim); font-size:.85rem;
}
.placeholder-visual span{font-size:2rem;}

@media (max-width:900px){ .masonry{column-count:2;} }
@media (max-width:560px){ .masonry{column-count:1;} }

.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(4,10,7,.94);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease); backdrop-filter:blur(6px);
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox img{max-width:88vw; max-height:82vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lightbox-close{position:absolute; top:22px; right:26px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; width:42px; height:42px; border-radius:50%; font-size:1.1rem;}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); color:#fff; width:48px; height:48px; border-radius:50%; font-size:1.6rem;
}
.lightbox-nav.prev{left:20px;} .lightbox-nav.next{right:20px;}
@media (max-width:640px){ .lightbox-nav{width:38px; height:38px; font-size:1.3rem;} }

/* ---------- Video Moments ---------- */
.video-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:20px;
}
.video-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:9/16;
  border:1px solid rgba(255,255,255,.12); background:#04120c; box-shadow:var(--shadow-soft);
}
.reel-video{
  width:100%; height:100%; object-fit:cover; display:block; background:#04120c;
  transition:opacity .3s;
}
.video-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;
  background:linear-gradient(0deg, rgba(4,18,12,.85), transparent);
}
.video-caption{
  position:absolute; left:14px; right:52px; bottom:14px; z-index:2;
  font-family:var(--font-display); font-weight:500; font-size:.92rem; color:var(--cream);
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.video-mute-btn, .video-expand-btn{
  position:absolute; z-index:3; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(4,18,12,.55); backdrop-filter:blur(6px); color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center; transition:background .25s, transform .25s;
}
.video-mute-btn:hover, .video-expand-btn:hover{background:rgba(4,18,12,.8); transform:scale(1.08);}
.video-mute-btn{top:12px; right:12px;}
.video-expand-btn{bottom:12px; right:12px; font-size:1.15rem;}
.video-mute-btn .icon-unmuted{display:none;}
.video-mute-btn.is-unmuted .icon-muted{display:none;}
.video-mute-btn.is-unmuted .icon-unmuted{display:inline;}
.video-mute-btn.is-unmuted{background:rgba(242,183,5,.85); border-color:transparent; color:var(--ink);}
.video-card.is-playing .video-mute-btn{opacity:1;}

.video-more-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(160deg,var(--gold-400),var(--gold-600)); color:var(--ink);
  font-family:var(--font-display); font-weight:600; text-align:center; font-size:.92rem; padding:16px;
}
.video-more-ico{font-size:2rem;}

@media (max-width:640px){
  .video-grid{grid-template-columns:repeat(2, 1fr); gap:14px;}
  .video-mute-btn, .video-expand-btn{width:32px; height:32px; font-size:.88rem;}
  .video-caption{font-size:.82rem; right:44px;}
}

/* ---------- Testimonials ---------- */
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testimonial-card{
  border-radius:var(--radius-md); padding:32px; border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
}
.featured-review{display:flex; flex-direction:column; align-items:flex-start; gap:8px; transition:transform .3s var(--ease), border-color .3s;}
.featured-review:hover{transform:translateY(-6px); border-color:var(--gold-400);}
.review-google-icon{
  width:44px; height:44px; border-radius:50%; background:#fff; color:#4285F4; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:6px;
}
.featured-review h3{font-size:1.08rem; margin-bottom:.2em;}
.featured-review p{color:var(--cream-dim); font-size:.92rem;}

.placeholder-review{opacity:.75;}
.ph-avatar{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); margin-bottom:16px;}
.ph-line{height:10px; border-radius:6px; background:rgba(255,255,255,.08); margin-bottom:10px;}
.ph-line.w60{width:60%;} .ph-line.w80{width:85%;} .ph-line.w40{width:40%;}
.ph-tag{display:inline-block; margin-top:8px; font-size:.78rem; color:var(--cream-dim); font-style:italic;}
@media (max-width:860px){ .testimonial-grid{grid-template-columns:1fr;} }

/* ---------- Instagram ---------- */
.insta-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.insta-item{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; display:block; border:1px solid rgba(255,255,255,.1);}
.insta-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.insta-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  background:rgba(6,26,19,.0); color:#fff; opacity:0; transition:all .35s;
}
.insta-item:hover img{transform:scale(1.1);}
.insta-item:hover .insta-overlay{opacity:1; background:rgba(6,26,19,.45);}
.insta-cta{
  background:linear-gradient(160deg,var(--gold-400),var(--gold-600)); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; text-align:center; font-size:.86rem; padding:10px;
}
.insta-cta-ico{font-size:1.6rem;}
@media (max-width:860px){ .insta-grid{grid-template-columns:repeat(3,1fr);} }

/* ---------- Location ---------- */
.location-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.location-btns{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px;}
.map-frame{border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow-soft); aspect-ratio:4/3.2;}
.map-frame iframe{width:100%; height:100%; border:0; filter:grayscale(.15) saturate(1.1);}
@media (max-width:860px){ .location-grid{grid-template-columns:1fr; gap:34px;} }

/* ---------- Admission CTA ---------- */
.admission-box{
  position:relative; text-align:center; max-width:820px; margin:0 auto; padding:70px 40px;
  border-radius:var(--radius-xl); border:1px solid rgba(242,183,5,.3);
  background:linear-gradient(155deg, rgba(242,183,5,.09), rgba(255,255,255,.02));
  overflow:hidden;
}
.admission-glow{position:absolute; inset:-30%; z-index:0;
  background:radial-gradient(circle at 30% 20%, rgba(242,183,5,.25), transparent 55%),
             radial-gradient(circle at 80% 80%, rgba(35,138,99,.3), transparent 55%);
  filter:blur(10px);}
.admission-box>*{position:relative; z-index:1;}
.admission-title{font-size:clamp(1.6rem,3.4vw,2.3rem); margin:18px 0 12px;}
.admission-text{color:var(--cream-dim); max-width:56ch; margin:0 auto 30px;}
.admission-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px;}
.contact-details{margin:20px 0 26px; display:flex; flex-direction:column; gap:10px; color:var(--cream-dim);}
.contact-details strong{color:var(--cream); font-weight:600;}
.contact-btns{display:flex; gap:10px; flex-wrap:wrap;}

.enquiry-form{padding:36px;}
.enquiry-form h3{margin-bottom:20px;}
.form-row{margin-bottom:16px;}
.form-row.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-row label{display:block; font-size:.85rem; color:var(--cream-dim); margin-bottom:6px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:.75em .9em; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05); color:var(--cream); font-size:.95rem; transition:border-color .3s, background .3s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none; border-color:var(--gold-400); background:rgba(255,255,255,.08);
}
.form-row select{ background-color:rgba(255,255,255,.05); }
.form-row select option{color:#111;}
.form-consent{font-size:.78rem; color:var(--cream-dim); margin:6px 0 18px;}
.form-submit{width:100%;}
.form-success{
  display:none; margin-top:16px; text-align:center; color:var(--gold-300);
  background:rgba(242,183,5,.1); border:1px solid rgba(242,183,5,.3); border-radius:12px; padding:12px;
}
.form-success.show{display:block;}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr; gap:36px;}
  .form-row.two-col{grid-template-columns:1fr;}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-950); border-top:1px solid rgba(255,255,255,.06); padding:64px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:46px;}
.footer-brand img{height:56px; margin-bottom:12px;}
.footer-tagline{color:var(--gold-300); font-family:var(--font-display); font-size:1.05rem;}
.footer-col h4{color:var(--cream); font-size:1rem; margin-bottom:14px; font-family:var(--font-display);}
.footer-col a{display:block; color:var(--cream-dim); margin-bottom:10px; font-size:.92rem; transition:color .3s;}
.footer-col a:hover{color:var(--gold-300);}
.footer-col p{color:var(--cream-dim); font-size:.88rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07); text-align:center; padding:22px 0; color:var(--cream-dim); font-size:.85rem;}
.footer-bottom p{margin:0;}
.footer-credit{margin-top:6px !important; font-size:.8rem; opacity:.85;}
.footer-credit a{color:var(--gold-300); transition:opacity .3s;}
.footer-credit a:hover{opacity:.8; text-decoration:underline;}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr; gap:32px;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

/* ---------- Floating WhatsApp ---------- */
.fab{
  position:fixed; z-index:400; display:flex; align-items:center; justify-content:center;
  border-radius:50%; box-shadow:0 14px 34px -10px rgba(0,0,0,.5); transition:transform .3s var(--ease);
}
.fab:hover{transform:scale(1.08);}
.fab-whatsapp{
  right:24px; bottom:96px; width:60px; height:60px;
  background:linear-gradient(135deg,#37c26d,#1ea457); color:#fff;
}
@media (max-width:768px){ .fab-whatsapp{bottom:170px; right:18px; width:54px; height:54px;} }

/* ---------- Chatbot ---------- */
.chatbot-wrap{position:fixed; right:24px; bottom:24px; z-index:410;}
.fab-chat{
  width:60px; height:60px; background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); position:relative;
  border:none;
}
.chat-fab-icon{font-size:1.7rem;}
.chat-fab-ping{
  position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%;
  background:#ff5c5c; border:2px solid var(--green-950); animation:pulse 2s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,92,92,.6);} 70%{box-shadow:0 0 0 10px rgba(255,92,92,0);} 100%{box-shadow:0 0 0 0 rgba(255,92,92,0);}}

.chat-panel{
  position:absolute; bottom:76px; right:0; width:360px; max-width:88vw; height:520px; max-height:72vh;
  background:linear-gradient(170deg, rgba(10,43,31,.98), rgba(6,26,19,.98));
  border:1px solid rgba(255,255,255,.12); border-radius:22px; box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(20px) scale(.97); pointer-events:none;
  transition:all .35s var(--ease);
}
.chat-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}

.chat-header{
  display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
  background:rgba(242,183,5,.08); border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-header-info{display:flex; align-items:center; gap:12px;}
.chat-avatar{width:40px; height:40px; border-radius:50%; background:rgba(242,183,5,.15);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; border:1px solid rgba(242,183,5,.35);}
.chat-header-info strong{display:block; font-family:var(--font-display); font-size:.95rem;}
.chat-status{font-size:.72rem; color:#5ee89b;}
.chat-close{background:none; border:none; color:var(--cream-dim); font-size:1rem;}

.chat-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
.chat-bubble{max-width:82%; padding:.7em 1em; border-radius:16px; font-size:.9rem; line-height:1.45; animation:bubbleIn .3s var(--ease);}
@keyframes bubbleIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.chat-bubble.bot{align-self:flex-start; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); border-bottom-left-radius:4px;}
.chat-bubble.user{align-self:flex-end; background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:var(--ink); border-bottom-right-radius:4px; font-weight:500;}
.chat-bubble a{color:var(--gold-300); text-decoration:underline;}
.chat-bubble.bot a{color:var(--gold-300);}

.chat-quick{display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 12px;}
.chat-quick button{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--cream);
  font-size:.78rem; padding:.5em .9em; border-radius:999px; transition:all .25s;
}
.chat-quick button:hover{border-color:var(--gold-400); color:var(--gold-300);}

.chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid rgba(255,255,255,.08);}
.chat-input-row input{
  flex:1; padding:.7em 1em; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05); color:var(--cream); font-size:.88rem;
}
.chat-input-row input:focus{outline:none; border-color:var(--gold-400);}
.chat-input-row button{
  width:40px; height:40px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  color:var(--ink); font-size:1rem; flex-shrink:0;
}
.chat-lead-form{display:flex; flex-direction:column; gap:8px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:12px; margin-top:4px;}
.chat-lead-form input, .chat-lead-form select{
  padding:.6em .8em; border-radius:8px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:var(--cream); font-size:.85rem;
}
.chat-lead-form button{
  margin-top:2px; padding:.6em; border-radius:10px; border:none; font-family:var(--font-display); font-weight:600;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:var(--ink);
}
.chat-consent{font-size:.72rem; color:var(--cream-dim);}

@media (max-width:768px){
  .chatbot-wrap{bottom:94px;}
}
@media (max-width:480px){
  .chatbot-wrap{right:16px;}
  .chat-panel{width:92vw; right:-8px; height:65vh;}
}

/* ---------- Mobile sticky bar ---------- */
.mobile-sticky-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:390;
  background:rgba(6,26,19,.96); backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.08);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-between; gap:8px;
}
.msb-item{
  flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:.72rem; color:var(--cream-dim); font-family:var(--font-display); padding:6px 0; border-radius:12px;
}
.msb-item span{font-size:1.2rem;}
.msb-primary{background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:var(--ink); font-weight:600;}
@media (max-width:768px){ .mobile-sticky-bar{display:flex;} body{padding-bottom:78px;} }

/* ---------- Misc responsive ---------- */
@media (max-width:640px){
  .founder-card{padding:30px 20px;}
  .admission-box{padding:48px 22px;}
  .enquiry-form{padding:26px 20px;}
}