/* ===========================================================
   Happy Doodles Nursery — portable static site
   Draft v0.2 — PLAYFUL DOODLE redesign
   Inspired by the concept/style of Under5 & Sparks preschools:
   bright multicolor branding, hand-drawn doodle motifs,
   brush-script accents, photo-forward, colorful rounded cards.
   =========================================================== */

:root{
  --navy:#1c5f86;
  --navy-dark:#154a69;
  --sky:#56b4e0;
  --sky-soft:#dff1fa;
  --sun:#ffc02e;
  --leaf:#83c14a;
  --coral:#ff7a59;
  --pink:#f56aa6;
  --purple:#9b6cc6;
  --orange:#ff9d3d;
  --cream:#fffdf8;
  --ink:#34434c;
  --muted:#6a7a83;
  --white:#fff;
  --radius:22px;
  --radius-lg:34px;
  --shadow:0 16px 42px rgba(28,95,134,.14);
  --shadow-sm:0 8px 22px rgba(28,95,134,.10);
  --maxw:1180px;
  --font-head:'Baloo 2','Comic Sans MS',system-ui,sans-serif;
  --font-script:'Caveat','Baloo 2',cursive;
  --font-body:'Nunito','Segoe UI',system-ui,sans-serif;
  /* hand-drawn squiggle/star doodle background (pale blue), subtle & tiled */
  --doodles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%23bfe3f2' stroke-width='3' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M30 60q12-16 24 0t24 0'/%3E%3Cpath d='M300 40q10-14 20 0t20 0'/%3E%3Cpath d='M60 300q14-18 28 0t28 0'/%3E%3C/g%3E%3Cg fill='%23ffe19c' opacity='.6'%3E%3Cpath d='M180 30l4 10 10 4-10 4-4 10-4-10-10-4 10-4z'/%3E%3Cpath d='M330 230l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3Cpath d='M40 180l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffd0c2' stroke-width='3' stroke-linecap='round' opacity='.6'%3E%3Cpath d='M210 300c0-12 18-12 18 0s18 12 18 0'/%3E%3Ccircle cx='150' cy='150' r='6'/%3E%3Ccircle cx='280' cy='120' r='5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23c8ecbf' stroke-width='3' stroke-linecap='round' opacity='.6'%3E%3Cpath d='M110 100c6-8 14-8 20 0'/%3E%3Cpath d='M250 320c6-8 14-8 20 0'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background-color:var(--cream);background-image:var(--doodles);
  line-height:1.7;font-size:17px;
}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.4vw,3.8rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800}
h3{font-size:1.3rem;font-weight:700}
p{margin:0 0 1rem}
a{color:var(--navy);text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:72px 0;position:relative}
.section--tint{background:rgba(255,255,255,.82)}
.section--sky{background:linear-gradient(180deg,var(--sky-soft),rgba(255,255,255,.4))}
.center{text-align:center}
.eyebrow{font-family:var(--font-script);font-weight:700;color:var(--coral);
  font-size:1.5rem;margin-bottom:.1rem;display:block;transform:rotate(-2deg)}
.lead{font-size:1.2rem;color:var(--muted);max-width:680px}
.center .lead{margin-left:auto;margin-right:auto}
/* brush-script accent word inside headings */
.script{font-family:var(--font-script);font-weight:700;color:var(--coral);
  font-size:1.35em;display:inline-block;transform:rotate(-2deg)}
.script--sky{color:var(--sky)} .script--pink{color:var(--pink)} .script--leaf{color:var(--leaf)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--font-head);font-weight:700;
  padding:15px 30px;border-radius:999px;transition:.18s;cursor:pointer;border:none;font-size:1.02rem;
  box-shadow:0 6px 0 rgba(0,0,0,.10)}
.btn--primary{background:var(--coral);color:#fff;box-shadow:0 6px 0 #d85535}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 #d85535}
.btn--sun{background:var(--sun);color:#5a4500;box-shadow:0 6px 0 #d99f17}
.btn--sun:hover{transform:translateY(-2px)}
.btn--ghost{background:#fff;color:var(--navy);box-shadow:0 6px 0 #cfe3ee;border:2px solid var(--sky)}
.btn--ghost:hover{transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--navy);box-shadow:0 6px 0 rgba(0,0,0,.12)}
.btn--light:hover{transform:translateY(-2px)}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}
.center .btn-row{justify-content:center}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.95);
  backdrop-filter:blur(8px);border-bottom:3px dotted #cdeaf6}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 22px;
  max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{height:56px;width:auto}
.brand img.logo{height:70px;width:auto}
.nav-links{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{font-family:var(--font-head);font-weight:700;color:var(--navy);
  padding:9px 14px;border-radius:999px;font-size:.95rem;transition:.15s;position:relative}
.nav-links a:hover{background:var(--sky-soft);color:var(--sky)}
/* current-page indicator */
.nav-links a.active{background:var(--navy);color:#fff}
.nav-links a.active:hover{background:var(--navy-dark);color:#fff}
.nav-cta{margin-left:6px}
.lang-toggle{font-family:var(--font-head);font-weight:700;border:2px solid var(--purple);
  background:#fff;color:var(--purple);border-radius:999px;padding:6px 14px;cursor:pointer;font-size:.85rem}
.menu-btn{display:none;background:none;border:none;font-size:1.8rem;color:var(--coral);cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
  padding:60px 0 72px}
.trust-bar{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.trust-bar span{display:flex;align-items:center;gap:7px;background:#fff;border:2px solid #eef3f6;
  padding:8px 14px;border-radius:999px;font-weight:700;color:var(--navy);font-size:.86rem;box-shadow:var(--shadow-sm)}
/* playful framed photo (à la Sparks "TV" frame) */
.hero-frame{background:var(--sun);border-radius:36px;padding:16px;box-shadow:var(--shadow);
  transform:rotate(1.5deg);position:relative}
.hero-frame::before{content:"";position:absolute;top:-14px;right:30px;width:26px;height:26px;
  background:var(--pink);border-radius:50%}
.hero-frame::after{content:"";position:absolute;bottom:-12px;left:24px;width:20px;height:20px;
  background:var(--leaf);border-radius:50%}
.hero-frame .ph{border-radius:24px;aspect-ratio:4/3}

/* ---------- placeholder image blocks ---------- */
.ph{background:
   repeating-linear-gradient(45deg,rgba(86,180,224,.16) 0 16px,rgba(86,180,224,.28) 16px 32px);
  display:flex;align-items:center;justify-content:center;color:var(--navy);
  font-family:var(--font-head);font-weight:700;text-align:center;padding:18px;min-height:160px}
.ph--leaf{background:repeating-linear-gradient(45deg,rgba(131,193,74,.16) 0 16px,rgba(131,193,74,.30) 16px 32px)}
.ph--sun{background:repeating-linear-gradient(45deg,rgba(255,192,46,.18) 0 16px,rgba(255,192,46,.34) 16px 32px)}
.ph--pink{background:repeating-linear-gradient(45deg,rgba(245,106,166,.16) 0 16px,rgba(245,106,166,.30) 16px 32px)}

/* ---------- real photos ---------- */
.media{display:block;width:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.hero-frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:24px}
.gallery img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.avatar{display:block;width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-sm)}
.card.center .avatar{margin:0 auto 14px}

/* dashed doodle divider (like Sparks) */
.dash{height:14px;background-image:radial-gradient(var(--sun) 40%,transparent 42%);
  background-size:22px 14px;background-repeat:repeat-x;background-position:center;opacity:.8;margin:6px 0}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
/* 4-up stage cards: rainbow icons + top tab (mirrors .grid-3) */
.grid-4 .card:nth-child(4n+1) .ic{background:#ffe4d8;color:var(--coral)}
.grid-4 .card:nth-child(4n+2) .ic{background:#dff1fa;color:var(--sky)}
.grid-4 .card:nth-child(4n+3) .ic{background:#e6f5d8;color:var(--leaf)}
.grid-4 .card:nth-child(4n+4) .ic{background:#fff1c9;color:#c79100}
.grid-4 .card::after{content:"";position:absolute;top:-3px;left:26px;right:26px;height:6px;border-radius:0 0 8px 8px}
.grid-4 .card:nth-child(4n+1)::after{background:var(--coral)}
.grid-4 .card:nth-child(4n+2)::after{background:var(--sky)}
.grid-4 .card:nth-child(4n+3)::after{background:var(--leaf)}
.grid-4 .card:nth-child(4n+4)::after{background:var(--sun)}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}
.card{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);
  border:3px solid #f0f5f8;transition:.18s;position:relative}
.card:hover{transform:translateY(-4px);border-color:var(--sky-soft)}
.card .ic{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;
  justify-content:center;font-size:1.9rem;margin-bottom:16px;background:var(--sky-soft);
  transform:rotate(-4deg)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);margin:0}
/* auto-colour the icon blobs across any 3-up grid for a rainbow feel */
.grid-3 .card:nth-child(6n+1) .ic{background:#ffe4d8;color:var(--coral)}
.grid-3 .card:nth-child(6n+2) .ic{background:#dff1fa;color:var(--sky)}
.grid-3 .card:nth-child(6n+3) .ic{background:#e6f5d8;color:var(--leaf)}
.grid-3 .card:nth-child(6n+4) .ic{background:#fde8f1;color:var(--pink)}
.grid-3 .card:nth-child(6n+5) .ic{background:#fff1c9;color:#c79100}
.grid-3 .card:nth-child(6n+6) .ic{background:#eee3f7;color:var(--purple)}
/* coloured top tab on cards */
.grid-3 .card::after{content:"";position:absolute;top:-3px;left:26px;right:26px;height:6px;border-radius:0 0 8px 8px}
.grid-3 .card:nth-child(6n+1)::after{background:var(--coral)}
.grid-3 .card:nth-child(6n+2)::after{background:var(--sky)}
.grid-3 .card:nth-child(6n+3)::after{background:var(--leaf)}
.grid-3 .card:nth-child(6n+4)::after{background:var(--pink)}
.grid-3 .card:nth-child(6n+5)::after{background:var(--sun)}
.grid-3 .card:nth-child(6n+6)::after{background:var(--purple)}

/* age band / program list */
.band{display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow-sm);border:3px solid #f0f5f8}
.band .age{font-family:var(--font-script);font-weight:700;color:var(--coral);
  font-size:1.9rem;min-width:120px;line-height:1}

/* steps */
.steps{counter-reset:s;display:grid;gap:20px}
.step{display:flex;gap:18px;align-items:flex-start}
.step .num{counter-increment:s;flex:none;width:48px;height:48px;border-radius:50%;
  background:var(--coral);color:#fff;font-family:var(--font-head);font-weight:800;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 #d85535}
.step:nth-child(2) .num{background:var(--sky);box-shadow:0 4px 0 #3892bf}
.step:nth-child(3) .num{background:var(--leaf);box-shadow:0 4px 0 #5f9a31}
.step:nth-child(4) .num{background:var(--pink);box-shadow:0 4px 0 #cf4d86}
.step:nth-child(5) .num{background:var(--purple);box-shadow:0 4px 0 #7a4ea6}
.step:nth-child(6) .num{background:var(--sun);color:#5a4500;box-shadow:0 4px 0 #d99f17}
.step .num::before{content:counter(s)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery .ph{aspect-ratio:1;border-radius:18px;min-height:0}
.gallery .ph:nth-child(odd){transform:rotate(-1.5deg)}
.gallery .ph:nth-child(even){transform:rotate(1.5deg)}

/* comparison table */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid rgba(28,95,134,.08)}
.tbl th{background:var(--navy);color:#fff;font-family:var(--font-head)}
.tbl tr:last-child td{border-bottom:none}

/* testimonial */
.quote{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);
  border:3px solid #f0f5f8;position:relative}
.quote::before{content:"\201C";position:absolute;top:6px;left:18px;font-family:var(--font-head);
  font-size:3.2rem;color:var(--sun);line-height:1}
.quote p{font-style:normal;color:var(--ink);padding-top:14px}
.quote .who{font-family:var(--font-script);font-weight:700;color:var(--coral);font-size:1.25rem}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--sky),var(--navy));color:#fff;
  border-radius:var(--radius-lg);padding:52px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:-30px;left:-20px;width:120px;height:120px;
  background:rgba(255,255,255,.10);border-radius:50%}
.cta-band::after{content:"";position:absolute;bottom:-40px;right:-10px;width:160px;height:160px;
  background:rgba(255,255,255,.08);border-radius:50%}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:rgba(255,255,255,.92);max-width:620px;margin:0 auto 22px;position:relative}
.cta-band .btn{position:relative}

/* corporate highlight */
.corp{background:linear-gradient(120deg,var(--leaf),#5f9a31);color:#fff;border-radius:var(--radius-lg);
  padding:46px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;box-shadow:var(--shadow)}
.corp h2{color:#fff}
.corp p{color:rgba(255,255,255,.94)}

/* forms */
.form{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm);border:3px solid #f0f5f8}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;color:var(--navy);margin-bottom:6px;font-size:.92rem}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border-radius:14px;
  border:2px solid #e3eef4;font-family:inherit;font-size:1rem;background:var(--cream)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sky)}
.note{font-size:.85rem;color:var(--muted)}

/* footer */
.site-footer{background:var(--navy-dark);color:#cfe3ee;padding:56px 0 26px;margin-top:10px;
  border-top:6px dotted var(--sun)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.site-footer h4{color:#fff;font-size:1.1rem}
.site-footer a{color:#cfe3ee;display:block;padding:4px 0}
.site-footer a:hover{color:var(--sun)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:18px;
  font-size:.85rem;color:#9fc1d3;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.wa{position:fixed;right:22px;bottom:22px;background:#25d366;color:#fff;width:66px;height:66px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45);z-index:60;transition:transform .18s;
  animation:wa-pulse 2.4s ease-out infinite}
.wa:hover{transform:scale(1.08)}
.wa svg{width:38px;height:38px}
@keyframes wa-pulse{0%{box-shadow:0 10px 26px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 10px 26px rgba(37,211,102,.45),0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 10px 26px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,0)}}

.draft-flag{background:var(--sun);color:#5a4500;text-align:center;font-weight:700;
  font-family:var(--font-head);font-size:.85rem;padding:6px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-grid,.grid-3,.grid-2,.footer-grid,.corp,.form .row{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .nav-links{position:fixed;inset:90px 0 auto 0;background:var(--cream);flex-direction:column;
    align-items:stretch;padding:14px 22px;box-shadow:var(--shadow);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px}
  .menu-btn{display:block}
  .cta-band,.corp{padding:32px 22px}
}


/* Social icons (footer + contact) */
.social-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.social-row a{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;transition:transform .2s,background .2s}
.social-row svg{width:20px;height:20px;fill:currentColor}
.site-footer .social-row{justify-content:center;padding:10px 0 2px}
.site-footer .social-row a{background:rgba(255,255,255,.10);color:#fff}
.site-footer .social-row a:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.social-row.social-brand a{background:rgba(28,95,134,.10);color:#1C5F86}
.social-row.social-brand a:hover{background:rgba(28,95,134,.20);transform:translateY(-2px)}