:root{
  --yellow:#ffc93c;
  --sky:#6ec6ca;
  --cream:#fffbf2;
  --ink:#2e2a24;
  --text-dim:#7a7263;
  --navy:#2b4a52;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Almarai',Tahoma,sans-serif;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none}
h1,h2,.topbar__brand{font-family:'Baloo Bhaijaan 2',sans-serif}
.section-title{font-size:clamp(24px,4vw,36px);text-align:center;margin:6px 0 36px}
.eyebrow{color:var(--navy);font-weight:700;font-size:13px;letter-spacing:.5px;background:var(--sky);display:inline-block;padding:5px 14px;border-radius:999px}
.eyebrow--center{display:block;text-align:center;width:fit-content;margin:0 auto 10px}

.back-pill{position:fixed;inset-block-start:16px;inset-inline-start:16px;z-index:300;background:rgba(255,255,255,.92);color:var(--navy);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;border:2px solid var(--yellow);box-shadow:0 2px 8px rgba(0,0,0,.1)}

/* ---- Topbar ---- */
.topbar{position:sticky;inset-block-start:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:16px 28px;background:var(--cream);border-block-end:3px solid var(--yellow)}
.topbar__brand{font-size:20px;font-weight:700;color:var(--navy)}
.btn{display:inline-block;padding:13px 28px;border-radius:999px;font-weight:700;font-size:14px}
.btn--filled{background:var(--yellow);color:var(--navy)}
.btn--block{width:100%;text-align:center}

/* ---- Hero ---- */
.hero{padding:60px 28px 40px;max-width:760px;margin:0 auto;text-align:center}
.hero h1{font-size:clamp(30px,5.5vw,50px);line-height:1.25;margin:16px 0 18px}
.hero h1 span{color:var(--navy)}
.hero__lead{color:var(--text-dim);font-size:16px;line-height:1.8;max-width:560px;margin:0 auto}

/* ---- Chaptered storytelling (archetype F) ---- */
.story{max-width:1100px;margin:0 auto;padding:20px 24px 20px}
.chapter{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;margin-block-end:60px}
.chapter--reverse{direction:ltr}
.chapter--reverse .chapter__panel{direction:rtl}
.chapter__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.chapter__panel{direction:rtl}
.chapter__num{color:var(--navy);font-weight:700;font-size:13px;background:var(--yellow);padding:5px 14px;border-radius:999px}
.chapter h2{font-size:clamp(22px,3vw,30px);margin:14px 0 12px}
.chapter p{color:var(--text-dim);font-size:15px;line-height:1.85;margin:0}

/* ---- Programs ---- */
.programs{padding:20px 24px 20px;max-width:1080px;margin:0 auto;text-align:center}
.programs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prog-card{background:#fff;border-radius:18px;padding:26px;border:2px solid rgba(110,198,202,.3);text-align:start}
.prog-card__name{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:19px;margin:0 0 6px;color:var(--navy)}
.prog-card__age{color:var(--text-dim);font-size:13px;margin:0 0 14px}
.prog-card__price{font-size:24px;font-weight:800;color:var(--navy);margin:0 0 4px}
.prog-card__per{color:var(--text-dim);font-size:12.5px;margin:0 0 14px}
.prog-card ul{list-style:none;padding:0;margin:0;font-size:13px;color:var(--text-dim);line-height:2}
.prog-card li::before{content:'🌼 '}
.programs-note{color:var(--text-dim);font-size:13px;margin-top:24px}

/* ---- Safety ---- */
.safety{padding:30px 24px 20px;max-width:1080px;margin:0 auto;text-align:center}
.safety-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.safety-card{background:var(--sky);border-radius:16px;padding:22px 16px;color:var(--navy)}
.safety-card__icon{font-size:28px;margin-bottom:10px}
.safety-card p{font-size:13px;line-height:1.6;margin:0;font-weight:600}

/* ---- Chapter progress indicator ---- */
.story-progress{position:fixed;inset-block-start:50%;inset-inline-end:18px;transform:translateY(-50%);z-index:150;display:flex;flex-direction:column;gap:10px}
.story-progress__dot{width:10px;height:10px;border-radius:50%;background:rgba(43,74,82,.2);transition:background .25s,transform .25s}
.story-progress__dot.is-active{background:var(--yellow);transform:scale(1.4)}
@media (max-width:900px){.story-progress{display:none}}

/* ---- Teachers ---- */
.teachers{padding:30px 24px 20px;max-width:1080px;margin:0 auto;text-align:center}
.teachers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.teacher-card{background:#fff;border-radius:18px;overflow:hidden;border:2px solid rgba(255,201,60,.35);text-align:start}
.teacher-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.teacher-card h3{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:17px;margin:16px 18px 2px;color:var(--navy)}
.teacher-card__role{color:var(--text-dim);font-size:12.5px;margin:0 18px 10px;font-weight:700}
.teacher-card__bio{color:var(--text-dim);font-size:13px;line-height:1.7;margin:0 18px 18px}

/* ---- Admission timeline ---- */
.admission{padding:30px 24px 20px;max-width:820px;margin:0 auto;text-align:center}
.admission-timeline{list-style:none;padding:0;margin:0;text-align:start;display:flex;flex-direction:column;gap:22px}
.admission-timeline li{display:flex;gap:18px;align-items:flex-start}
.admission-timeline__num{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Baloo Bhaijaan 2',sans-serif}
.admission-timeline h4{margin:2px 0 4px;font-size:16px;color:var(--navy)}
.admission-timeline p{margin:0;color:var(--text-dim);font-size:14px;line-height:1.7}

/* ---- Enroll ---- */
.enroll{padding:30px 24px 90px}
.enroll-wrap{max-width:520px;margin:0 auto;background:#fff;border-radius:22px;padding:34px;border:2px solid rgba(255,201,60,.4)}
#enroll-form{display:flex;flex-direction:column;gap:12px}
#enroll-form input,#enroll-form select{padding:14px 16px;border-radius:10px;border:1.5px solid #e4dcc9;font-family:inherit;font-size:14px}
.enroll-success{display:none;text-align:center}
.enroll-success.is-visible{display:block}
.enroll-success__icon{width:54px;height:54px;border-radius:50%;background:var(--yellow);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.enroll-success p{color:var(--text-dim);font-size:14px;line-height:1.7}
.enroll-success strong{color:var(--navy);font-size:18px}

/* ---- WhatsApp FAB ---- */
.wa-fab{position:fixed;inset-block-end:24px;inset-inline-end:24px;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:200}

/* ---- Footer ---- */
.site-footer{background:var(--navy);padding:44px 24px 24px;color:#cfe8ea}
.footer-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.footer-grid h4{color:var(--yellow);font-size:14px;margin:0 0 10px}
.footer-grid p{color:#a9cbce;font-size:13px;line-height:1.8;margin:0 0 6px}
.tax-line{opacity:.75;font-size:11.5px}
.footer-bottom{text-align:center;color:#8bb0b3;font-size:12px;margin-block-start:26px;padding-block-start:20px;border-block-start:1px solid rgba(255,255,255,.12)}

/* ---- Responsive ---- */
@media (max-width:900px){
  .chapter,.chapter--reverse{grid-template-columns:1fr;direction:rtl}
  .chapter__img{aspect-ratio:16/10}
  .safety-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .programs-grid{grid-template-columns:1fr}
  .teachers-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .safety-grid{grid-template-columns:1fr}
  .topbar__brand{font-size:16px}
}