/* ==========================================================
   Magical Star Montessori – theme layer (loads after style.css)
   Twilight palette: indigo, lavender, magic pink, gold, teal
   ========================================================== */
:root{
  --cream:#F7F3FF;
  --ink:#2E2A5A;
  --ink-soft:#514C7E;
  --muted:#7C77A3;
  --sun:#FFD166;
  --sun-soft:#FFF4D1;
  --peach:#FF9FB8;
  --peach-soft:#FFE5EE;
  --coral:#E8579B;
  --sage:#3CC4A9;
  --sage-soft:#D9F6EF;
  --sky:#7D8CFF;
  --sky-soft:#E6E9FF;
  --lilac:#A985F2;
  --lilac-soft:#EFE7FF;
  --line:#E7E0F7;
  --font-head:"Baloo 2","Fredoka","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Quicksand","Nunito","Segoe UI",system-ui,sans-serif;
}
body{font-weight:600}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em}

/* Top bar + header */
.topbar{background:linear-gradient(90deg,#2E2A5A,#4B2F86)}
.site-header{background:rgba(255,255,255,.96)}
.nav-link:hover,.nav-link[aria-current="page"],.nav-item-active>.nav-link{background:var(--lilac-soft)}
.call-pill{background:var(--lilac-soft)}
.call-pill .call-icon{background:var(--lilac)}
.call-pill:hover{background:var(--lilac)}
.call-pill:hover .call-icon{color:var(--lilac)}
.btn-primary{background:linear-gradient(135deg,var(--coral),#B44CE0)}
.btn-primary:hover{background:linear-gradient(135deg,#d94a8d,#a13fcf)}
.kicker{color:var(--lilac)}
.kicker::before,.kicker::after{content:"☾";color:var(--sun)}

/* ---------- Hero: twilight, text left, arched window right ---------- */
.ms-hero{background:linear-gradient(180deg,#241C5C 0%,#4A2F8F 45%,#B7609E 82%,#F7B9C9 100%);color:#fff}
.ms-hero .wave path{fill:var(--cream)}
.ms-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:70px 0 130px}
.ms-hero h1{color:#fff}
.ms-hero h1 .accent{color:var(--sun)}
.ms-hero h1 .accent::after{background:var(--coral);opacity:.6}
.ms-hero .hero-lead{color:#EDE6FF}
.ms-hero .eyebrow{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.3)}
.ms-hero .btn-ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.ms-hero .hero-phone,.ms-hero .hero-phone strong{color:#fff}
.ms-hero .hero-phone span{color:#E3DAFF}
.ms-arch-wrap{position:relative;max-width:460px;margin-left:auto;width:100%}
.ms-arch{
  position:relative;border-radius:240px 240px 32px 32px;padding:14px;
  background:linear-gradient(160deg,var(--sun),var(--peach) 55%,var(--lilac));
  box-shadow:0 30px 60px rgba(20,10,60,.45);
}
.ms-arch img{width:100%;aspect-ratio:5/6;object-fit:cover;border-radius:226px 226px 22px 22px;background:#fff}
.ms-arch::after{content:"★";position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-size:42px;color:var(--sun);text-shadow:0 0 18px rgba(255,209,102,.9)}
.ms-arch-sm{max-width:440px;margin:0 auto}
.ms-badge-a{top:18%;left:-12%}
.ms-badge-a .dot{background:var(--peach-soft);color:var(--coral)}
.ms-badge-b{bottom:16%;left:-14%;animation-delay:-1.8s}
.ms-badge-b .dot{background:var(--sky-soft);color:var(--sky)}
.ms-badge-c{top:52%;right:-10%;animation-delay:-3.4s}
.ms-badge-c .dot{background:var(--sun-soft);color:#c8920b}
.badge-float{color:var(--ink)}
@media (max-width:900px){
  .ms-hero-inner{grid-template-columns:1fr;text-align:center;padding:44px 0 110px}
  .ms-hero .hero-actions{justify-content:center}
  .ms-arch-wrap{margin:20px auto 0;max-width:340px}
  .ms-badge-a{left:-4%}.ms-badge-b{left:-4%}.ms-badge-c{right:-4%}
}

/* ---------- Promo: golden ticket ---------- */
.ms-ticket{
  background:
    radial-gradient(circle at 0 50%,var(--cream) 0 22px,transparent 23px),
    radial-gradient(circle at 100% 50%,var(--cream) 0 22px,transparent 23px),
    linear-gradient(135deg,#FFF4D1 0%,#FFE5EE 55%,#EFE7FF 100%);
  border:3px dashed var(--lilac);
}
.ms-ticket::before{content:"✦";color:rgba(169,133,242,.25)}
.ms-ticket .promo-ribbon{background:var(--lilac)}
.ms-ticket .promo-phone{background:linear-gradient(135deg,var(--coral),#B44CE0);box-shadow:0 8px 0 #8d3a8f}
.ms-ticket .promo-phone:hover{box-shadow:0 10px 0 #8d3a8f}
.ms-ticket .promo-phone-icon{color:var(--coral)}
.ms-ticket .promo-kicker{color:var(--lilac)}

/* ---------- Programs: growth journey ---------- */
.ms-journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.ms-journey::before{
  content:"";position:absolute;left:10%;right:10%;top:100px;height:4px;border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--lilac) 0 12px,transparent 12px 24px);
}
.ms-step-link{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--ink);
  background:#fff;border-radius:28px;padding:22px 20px 26px;box-shadow:var(--shadow);height:100%;position:relative;transition:transform .25s,box-shadow .25s}
.ms-step-link:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);color:var(--ink)}
.ms-bubble{width:160px;height:160px;border-radius:50%;overflow:hidden;border:6px solid #fff;box-shadow:0 0 0 4px var(--lilac-soft),var(--shadow);margin-bottom:14px;background:var(--lilac-soft)}
.ms-bubble img{width:100%;height:100%;object-fit:cover}
.ms-step:nth-child(2) .ms-bubble{box-shadow:0 0 0 4px var(--sun-soft),var(--shadow)}
.ms-step:nth-child(3) .ms-bubble{box-shadow:0 0 0 4px var(--sky-soft),var(--shadow)}
.ms-step:nth-child(4) .ms-bubble{box-shadow:0 0 0 4px var(--sage-soft),var(--shadow)}
.ms-age{font-weight:700;font-size:.82rem;padding:4px 12px;border-radius:999px;background:var(--lilac-soft);color:#5b3db8;margin-bottom:8px}
.ms-step:nth-child(2) .ms-age{background:var(--sun-soft);color:#8a6200}
.ms-step:nth-child(3) .ms-age{background:var(--sky-soft);color:#3346b8}
.ms-step:nth-child(4) .ms-age{background:var(--sage-soft);color:#1c7a66}
.ms-step-link h3{font-size:1.2rem;margin-bottom:.3em}
.ms-step-link p{font-size:.95rem;color:var(--ink-soft);margin-bottom:12px}
.ms-step-link .more{margin-top:auto;font-family:var(--font-head);font-weight:700;color:var(--coral)}
@media (max-width:980px){.ms-journey{grid-template-columns:repeat(2,1fr)}.ms-journey::before{display:none}}
@media (max-width:560px){.ms-journey{grid-template-columns:1fr}}

/* ---------- Stats band ---------- */
.ms-stats{background:linear-gradient(120deg,#2E2A5A,#5B3BA6);color:#fff;padding:46px 0}
.ms-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:0;text-align:center}
.ms-stats dt{font-family:var(--font-head);font-weight:800;font-size:2rem;color:var(--sun)}
.ms-stats dd{margin:0;color:#E3DAFF;font-size:.95rem}
@media (max-width:760px){.ms-stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Pillars ---------- */
.ms-pillar-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ms-pillar{text-align:center;padding:10px 14px}
.ms-pillar-icon{display:grid;place-items:center;width:120px;height:120px;margin:0 auto 18px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,var(--lilac-soft));box-shadow:0 0 0 10px rgba(169,133,242,.12)}
.ms-pillar:nth-child(2) .ms-pillar-icon{background:radial-gradient(circle at 30% 30%,#fff,var(--sun-soft));box-shadow:0 0 0 10px rgba(255,209,102,.18)}
.ms-pillar:nth-child(3) .ms-pillar-icon{background:radial-gradient(circle at 30% 30%,#fff,var(--sage-soft));box-shadow:0 0 0 10px rgba(60,196,169,.14)}
.ms-pillar-icon img{width:64px;height:64px;object-fit:contain}
.ms-pillar p{color:var(--ink-soft)}
@media (max-width:820px){.ms-pillar-row{grid-template-columns:1fr}}

/* ---------- Why us: cards around a photo ---------- */
.ms-why{display:grid;grid-template-columns:1fr 1.1fr 1fr;grid-template-rows:auto auto;gap:22px;align-items:stretch}
.ms-why-photo{grid-column:2;grid-row:1/3;border-radius:200px 200px 28px 28px;overflow:hidden;box-shadow:var(--shadow-lg);border:10px solid #fff;background:var(--lilac-soft)}
.ms-why-photo img{width:100%;height:100%;object-fit:cover}
.ms-why-card{background:#fff;border-radius:24px;padding:24px;box-shadow:var(--shadow);border-top:6px solid var(--lilac)}
.ms-why-card:nth-of-type(2){border-top-color:var(--sun)}
.ms-why-card:nth-of-type(3){border-top-color:var(--sky)}
.ms-why-card:nth-of-type(4){border-top-color:var(--sage)}
.ms-why-card img{width:60px;height:60px;margin-bottom:10px}
.ms-why-card h3{font-size:1.15rem;margin-bottom:.3em}
.ms-why-card p{margin:0;color:var(--ink-soft);font-size:.97rem}
@media (max-width:900px){
  .ms-why{grid-template-columns:1fr 1fr}
  .ms-why-photo{grid-column:1/-1;grid-row:auto;max-width:360px;margin:0 auto;order:-1}
}
@media (max-width:560px){.ms-why{grid-template-columns:1fr}}

/* ---------- FAQ split ---------- */
.ms-faq-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.ms-faq-side{position:sticky;top:110px}
.ms-faq-split .faq{margin:0;max-width:none}
@media (max-width:900px){.ms-faq-split{grid-template-columns:1fr}.ms-faq-side{position:static;text-align:center}}

/* Misc tints */
.faq details[open]{border-color:var(--lilac)}
.faq details[open] summary::after{background:var(--lilac);color:#fff}
.faq summary::after{background:var(--lilac-soft)}
.cta-band{background:linear-gradient(120deg,#4A2F8F,var(--coral))}
.page-hero{background:linear-gradient(180deg,#EDE6FF 0%,#FFF0F5 100%)}
.fact,.domain::before{border-top-color:var(--lilac)}
.pc-lilac .age{background:var(--lilac-soft);color:#5b3db8}
.check-list li::before{background-color:var(--lilac)}
.photo-frame::before{background:rgba(169,133,242,.65)}
.site-footer{background:#2A2452}
.fab-call{background:linear-gradient(135deg,var(--coral),#B44CE0)}
.topbar-promo{background:var(--coral)}
.section-sky{background:var(--lilac-soft)}
.wave-sky path{fill:var(--lilac-soft)}
.steps::before{background:repeating-linear-gradient(90deg,var(--lilac) 0 14px,transparent 14px 26px)}
@media (max-width:900px){.steps::before{background:repeating-linear-gradient(180deg,var(--lilac) 0 14px,transparent 14px 26px)}}

/* Stock photo framing */
.ms-arch img[src*="hero-kids-playing"]{object-position:50% 40%}
.ms-step:nth-child(2) .ms-bubble img{object-position:35% 50%}
.ms-step:nth-child(3) .ms-bubble img{object-position:20% 50%}

/* Square photo frames everywhere (the school's banner images are very wide) */
.photo-frame img{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;object-position:50% 50%}
.page-hero .photo-frame{max-width:420px;width:100%}
.photo-frame img[src*="dr-montessori"]{object-position:50% 15%}
.funding img{aspect-ratio:1/1;object-fit:cover;width:100%}
@media (max-width:900px){.page-hero .photo-frame{max-width:340px}}
/* Funding logos must never be cropped */
.funding img{aspect-ratio:auto;object-fit:contain;background:#fff}
.photo-frame img[src*="/stock/"]{object-position:50% 45%}
.hero-blob img[src*="/stock/"]{object-position:50% 50%}