:root{
    --cream:#B8E6BE;
    --sky:#63B7D6;
    --sky-deep:#2E7E9E;
    --sun:#F3B940;
    --grass:#6FA76B;
    --berry:#DE5C4E;
    --plum:#332845;
    --plum-soft:#5A4C6E;
    --paper:#FFFFFF;
    --radius-lg: 26px;
    --radius-sm: 14px;
    --shadow-paper: 0 10px 24px -12px rgba(51,40,69,0.28);
    font-size: 16px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--plum);
    font-family:'Nunito', sans-serif;
    line-height:1.55;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Baloo 2', sans-serif;
    color:var(--plum);
    margin:0 0 .4em 0;
    line-height:1.1;
  }
  a{color:inherit;}
  img,svg{display:block;max-width:100%;}
  .container{
    max-width:1120px;
    margin:0 auto;
    padding:0 28px;
  }
  .eyebrow{
    font-family:'Nunito', sans-serif;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:.78rem;
    color:var(--sky-deep);
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size:1.05rem;
    padding:.85em 1.6em;
    border-radius:999px;
    border:none;
    cursor:pointer;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover{transform:translateY(-2px) rotate(-0.5deg);}
  .btn:focus-visible{outline:3px solid var(--plum); outline-offset:3px;}
  .btn-primary{background:var(--berry); color:#fff; box-shadow:0 10px 20px -8px rgba(222,92,78,.6);}
  .btn-secondary{background:var(--paper); color:var(--plum); box-shadow:var(--shadow-paper);}

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(184,230,190,.92);
    backdrop-filter:blur(6px);
    border-bottom:2px solid rgba(51,40,69,.08);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px;
    max-width:1120px; margin:0 auto;
  }
  .logo{
    display:flex; align-items:center; gap:.6em;
    font-family:'Baloo 2', sans-serif;
    font-weight:800; font-size:1.3rem;
    color:var(--plum);
    text-decoration:none;
  }
  .logo .mark{width:38px;height:38px;flex:none;}
  nav.links{display:flex; gap:2em; list-style:none; margin:0; padding:0;}
  nav.links a{
    font-weight:700; text-decoration:none; font-size:.98rem;
    padding:.3em 0; border-bottom:2px solid transparent;
    transition:border-color .15s ease, color .15s ease;
  }
  nav.links a:hover{border-color:var(--berry); color:var(--berry);}
  .nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .nav-toggle svg{width:28px;height:28px;}

  @media (max-width:820px){
    nav.links{
      position:fixed; inset:70px 16px auto 16px;
      background:var(--paper); border-radius:var(--radius-sm);
      flex-direction:column; gap:0; box-shadow:var(--shadow-paper);
      padding:8px; transform:translateY(-12px); opacity:0; pointer-events:none;
      transition:all .2s ease;
    }
    nav.links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
    nav.links a{padding:.75em 1em; border-bottom:1px solid rgba(51,40,69,.08);}
    .nav-toggle{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:64px 0 40px;
    overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
  }
  .hero h1{font-size:clamp(2.2rem, 4vw, 3.4rem);}
  .hero p.lead{font-size:1.15rem; max-width:46ch; color:var(--plum-soft);}
  .hero-ctas{display:flex; gap:16px; margin-top:1.6em; flex-wrap:wrap;}
  .hero-badges{display:flex; gap:14px; margin-top:2.2em; flex-wrap:wrap;}
  .badge{
    display:flex; align-items:center; gap:.5em;
    background:var(--paper); border-radius:999px;
    padding:.5em 1em; box-shadow:var(--shadow-paper);
    font-weight:700; font-size:.85rem;
  }
  .badge svg{width:18px;height:18px;flex:none;}

  .hero-art{position:relative; aspect-ratio:1/1;}
  .sun-rays{
    transform-box: fill-box;
    transform-origin: center;
    animation:spin 60s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* ---------- TORN PAPER DIVIDER ---------- */
  .torn{display:block; width:100%; height:60px; margin-top:-2px;}

  /* ---------- SECTION BASICS ---------- */
  section{padding:70px 0;}
  .section-head{max-width:640px; margin:0 auto 2.4em; text-align:center;}
  .section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);}
  .section-head p{color:var(--plum-soft);}

  /* ---------- ABOUT ---------- */
  /* ---------- MEET THE OWNER ---------- */
  .owner-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center;}
  .owner-frame{
    position:relative; background:var(--paper); border-radius:var(--radius-lg);
    padding:14px; box-shadow:var(--shadow-paper); transform:rotate(-2deg);
  }
  .owner-frame .photo-slot{transform:rotate(0deg);}
  .owner-grid ul.facts{list-style:none; margin:1.4em 0 0; padding:0; display:grid; gap:.9em;}
  .owner-grid ul.facts li{display:flex; gap:.7em; align-items:flex-start; font-weight:700;}
  .owner-grid ul.facts li span{font-weight:400;}
  .owner-grid ul.facts svg{width:22px;height:22px;flex:none; margin-top:2px; color:#DE5C4E;}
  .owner-philosophy{
    margin-top:1.6em; background:var(--cream); border-radius:var(--radius-sm);
    padding:20px 24px; border:2px solid rgba(51,40,69,.08);
  }

  /* ---------- PHOTO PLACEHOLDER ---------- */
  .photo-slot{
    background:repeating-linear-gradient(135deg, #F1E7D3, #F1E7D3 10px, #ECE0C7 10px, #ECE0C7 20px);
    border:2px dashed rgba(51,40,69,.35);
    border-radius:var(--radius-sm);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.5em; color:var(--plum-soft); font-weight:700; font-size:.85rem;
    text-align:center; padding:1em;
    aspect-ratio:4/3;
  }
  .photo-slot svg{width:34px;height:34px; opacity:.65;}

  /* ---------- PROGRAM CARDS ---------- */
  .programs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .program-card{
    background:var(--paper); border-radius:var(--radius-lg);
    padding:28px 24px; box-shadow:var(--shadow-paper);
    transition:transform .2s ease;
  }
  .program-card:hover{transform:translateY(-6px);}
  .program-card .icon-wrap{
    width:58px;height:58px;border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:1em;
  }
  .program-card .icon-wrap svg{width:32px;height:32px;}
  .program-card h3{font-size:1.2rem;}
  .program-card .age{
    display:inline-block; margin-top:.6em; font-weight:800;
    font-size:.8rem; color:var(--sky-deep); letter-spacing:.02em;
  }

  /* ---------- DAILY SCHEDULE (timeline: legit sequence) ---------- */
  .timeline{
    display:grid; grid-template-columns:repeat(6,1fr); gap:0; position:relative;
  }
  .timeline::before{
    content:""; position:absolute; top:29px; left:0; right:0; height:3px;
    background:repeating-linear-gradient(90deg, var(--plum) 0 10px, transparent 10px 18px);
    opacity:.25;
  }
  .tl-item{display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 10px;}
  .tl-dot{
    width:60px;height:60px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-paper); margin-bottom:14px; position:relative; z-index:1;
  }
  .tl-dot svg{width:28px;height:28px;color:#fff;}
  .tl-time{font-weight:800; font-size:.82rem; color:var(--sky-deep);}
  .tl-label{font-weight:700; font-size:.92rem; margin-top:.2em;}

  @media (max-width:900px){
    .timeline{grid-template-columns:repeat(3,1fr); row-gap:36px;}
    .timeline::before{display:none;}
  }

  /* ---------- GALLERY ---------- */
  .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

  /* ---------- TESTIMONIAL ---------- */
  .testimonial{
    background:var(--sky); border-radius:var(--radius-lg);
    padding:52px; text-align:center; position:relative; overflow:hidden;
    color:#fff;
  }
  .testimonial blockquote{
    font-family:'Baloo 2', sans-serif; font-size:clamp(1.2rem,2.4vw,1.7rem);
    max-width:56ch; margin:0 auto .6em; font-weight:600;
  }
  .testimonial cite{font-style:normal; font-weight:800; opacity:.9;}

  /* ---------- CONTACT ---------- */
  .contact-grid{display:flex; justify-content:center;}
  .contact-grid .contact-card{max-width:560px; width:100%;}
  .contact-card{background:var(--paper); border-radius:var(--radius-lg); padding:34px; box-shadow:var(--shadow-paper);}
  .contact-list{list-style:none; margin:1.2em 0 0; padding:0; display:grid; gap:1em;}
  .contact-list li{display:flex; gap:.8em; align-items:flex-start; font-weight:700;}
  .contact-list svg{width:22px;height:22px;flex:none; color:var(--berry);}
  form.enroll{display:grid; gap:14px;}
  form.enroll label{font-weight:800; font-size:.85rem; display:block; margin-bottom:.3em;}
  form.enroll input, form.enroll select, form.enroll textarea{
    width:100%; font-family:'Nunito',sans-serif; font-size:1rem;
    padding:.7em .9em; border-radius:12px; border:2px solid rgba(51,40,69,.15);
    background:#F4F8F2; color:var(--plum);
  }
  form.enroll input:focus, form.enroll select:focus, form.enroll textarea:focus{
    outline:none; border-color:var(--sky-deep);
  }
  .map-slot{
    margin-top:20px; border-radius:var(--radius-sm); overflow:hidden;
    border:2px dashed rgba(51,40,69,.35);
  }
  .map-slot .photo-slot{aspect-ratio:16/9; border:none; border-radius:0;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--plum); color:#EDE7F5; padding:40px 0 26px;}
  .footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
  footer a{text-decoration:none; color:#EDE7F5; opacity:.85;}
  footer a:hover{opacity:1; text-decoration:underline;}
  .footer-note{font-size:.85rem; opacity:.65; margin-top:18px; text-align:center;}

  @media (max-width:900px){
    .hero-grid, .owner-grid{grid-template-columns:1fr;}
    .programs-grid{grid-template-columns:1fr;}
  }

  /* reveal-on-scroll */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    .sun-rays{animation:none;}
    html{scroll-behavior:auto;}
  }