/* =========================================================================
   Little Journeys Childcare — Design System
   Themeable via CSS custom properties (color + font customizer in theme.js)
   ========================================================================= */

:root {
  /* ---- Brand palette (live-customizable) ---- */
  --bg:        #FBF7F0;   /* warm ivory          */
  --surface:   #FFFFFF;   /* cards               */
  --surface-2: #F4ECE1;   /* subtle warm panel   */
  --text:      #2E2A26;   /* warm charcoal       */
  --muted:     #6F6962;
  --brand:     #E8927C;   /* terracotta coral    */
  --brand-ink: #C56A54;   /* darker brand for text-on-light */
  --brand-2:   #7BA890;   /* sage green          */
  --accent:    #D4A24E;   /* soft gold (luxury)  */
  --ring:      rgba(232,146,124,.35);

  /* ---- Typography (live-customizable) ---- */
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fs-scale: 1;          /* font-size multiplier from customizer */

  /* ---- Derived tokens ---- */
  --radius:   22px;
  --radius-sm:14px;
  --radius-lg:34px;
  --shadow-sm: 0 2px 10px rgba(46,42,38,.06);
  --shadow:    0 14px 40px -16px rgba(46,42,38,.22);
  --shadow-lg: 0 30px 70px -24px rgba(46,42,38,.30);
  --maxw: 1180px;
  --gap: clamp(1rem, 3vw, 2rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Dark-ish "evening" preset hook (applied via [data-mode]) */
[data-mode="cozy"] {
  --bg:#1f1b1a; --surface:#2a2422; --surface-2:#332b28;
  --text:#f6efe6; --muted:#c9bdb0; --shadow:0 14px 40px -16px rgba(0,0,0,.6);
}

/* ----------------------------- Reset ----------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: calc(1.02rem * var(--fs-scale));
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100%; }
img { height:auto; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 1.1rem; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 6px; }

h1,h2,h3,h4 { font-family: var(--font-head); line-height: 1.1; font-weight: 600; letter-spacing:-.01em; color: var(--text); }
h1 { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
p  { color: var(--muted); }
.lead { font-size: calc(1.18rem * var(--fs-scale)); color: var(--text); }

/* ----------------------------- Layout ---------------------------------- */
.container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 7vw, 7rem) 0; position: relative; }
.section--tint { background: var(--surface-2); }
.center { text-align: center; }
.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr;} }
.split { display:grid; gap: clamp(2rem,5vw,4.5rem); grid-template-columns: 1.05fr 1fr; align-items:center; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split.reverse > :first-child{ order:0; } }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-body); font-weight: 800; letter-spacing:.16em;
  text-transform: uppercase; font-size:.74rem; color: var(--brand-ink);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  padding:.4rem .8rem; border-radius: 999px;
}
.section-head { max-width: 56ch; margin: 0 auto clamp(2rem,4vw,3.2rem); }
.section-head.center { text-align:center; }
.section-head p { margin-top:.8rem; }

/* ----------------------------- Buttons --------------------------------- */
.btn {
  --b: var(--brand);
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.95rem 1.6rem; border-radius: 999px;
  font-weight: 800; font-family: var(--font-body);
  border: 2px solid transparent; text-decoration:none !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--b); color:#fff; box-shadow: 0 12px 26px -10px var(--b); }
.btn-primary:hover { box-shadow: 0 18px 34px -10px var(--b); }
.btn-gold { background: var(--accent); color:#3a2c12; box-shadow:0 12px 26px -10px var(--accent); }
.btn-outline { background: transparent; color: var(--text); border-color: color-mix(in srgb,var(--text) 22%, transparent); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-ghost { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-lg { padding:1.1rem 2rem; font-size:1.05rem; }
.btn-block { width:100%; justify-content:center; }

/* ----------------------------- Header / Nav ---------------------------- */
.site-header {
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  transition: box-shadow .3s, background .3s;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.nav { display:flex; align-items:center; gap:1rem; padding:.7rem 0; }
.brand { display:flex; align-items:center; flex:0 0 auto; }
.brand img { height: 44px; width:auto; }
.nav-links { display:flex; align-items:center; gap:.3rem; margin-left:auto; list-style:none; padding:0; }
.nav-links a {
  color: var(--text); text-decoration:none !important; font-weight:700;
  padding:.55rem .85rem; border-radius:999px; position:relative; font-size:.98rem;
  transition: background .2s, color .2s;
}
.nav-links a:hover { background: color-mix(in srgb,var(--brand) 12%, transparent); color: var(--brand-ink); }
.nav-links a.active { color: var(--brand-ink); }
.nav-links a.active::after {
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:3px;
  background: var(--brand); border-radius:3px;
}
.nav-cta { display:flex; align-items:center; gap:.5rem; margin-left:.4rem; }
.nav-toggle { display:none; background:var(--surface); border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  width:46px; height:46px; border-radius:14px; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; display:block; width:20px; height:2.4px; background:var(--text); border-radius:3px; position:relative; transition:.3s;}
.nav-toggle span::before{ position:absolute; top:-6px;} .nav-toggle span::after{ position:absolute; top:6px;}
.nav.open .nav-toggle span{ background:transparent;}
.nav.open .nav-toggle span::before{ top:0; transform:rotate(45deg);}
.nav.open .nav-toggle span::after{ top:0; transform:rotate(-45deg);}

@media (max-width: 1024px){
  .nav-toggle{ display:flex; order:3; margin-left:auto; }
  .nav-links{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--surface); padding:1rem 1.2rem 1.6rem; margin:0;
    box-shadow:var(--shadow); transform:translateY(-130%); transition:transform .35s var(--ease);
    border-bottom-left-radius:24px; border-bottom-right-radius:24px;
  }
  .nav.open .nav-links{ transform:translateY(0); }
  .nav-links a{ padding:.85rem 1rem; font-size:1.1rem; }
  .nav-links a.active::after{ display:none; }
  .nav-cta{ margin-left:0; }
  .nav-cta .btn{ display:none; }
}

/* ----------------------------- Hero ------------------------------------ */
.hero { position:relative; padding: clamp(2.5rem,6vw,5.5rem) 0 clamp(3rem,7vw,6rem); overflow:hidden; }
.hero .split { align-items:center; }
.hero h1 span.brush { color: var(--brand-ink); position:relative; white-space:nowrap; }
.hero h1 span.brush::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.04em; height:.34em; z-index:-1;
  background: color-mix(in srgb,var(--accent) 55%, transparent); border-radius:1em; transform: rotate(-1.2deg);
}
.hero p.lead { margin-top:1.2rem; max-width: 46ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.hero-trust { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:1.8rem; color:var(--muted); font-weight:700; font-size:.9rem;}
.hero-trust .dot{ width:6px;height:6px;border-radius:50%;background:var(--brand-2);}

.hero-media { position:relative; }
.hero-media .frame {
  border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/4.4; transform: rotate(1.5deg);
}
.hero-media .frame img{ width:100%; height:100%; object-fit:cover; }
.hero-media .frame.small {
  position:absolute; width:46%; aspect-ratio:1/1; bottom:-7%; left:-7%; transform: rotate(-4deg);
  border:6px solid var(--surface);
}
.hero-badge {
  position:absolute; top:6%; right:-3%; background:var(--surface); border-radius:18px;
  box-shadow: var(--shadow); padding:.7rem 1rem; display:flex; gap:.6rem; align-items:center;
  font-weight:800; font-size:.86rem; animation: floaty 5s ease-in-out infinite;
}
.hero-badge .ico{ font-size:1.4rem; }

/* blobs / decorative */
.blob { position:absolute; border-radius:46% 54% 60% 40%/55% 48% 52% 45%; filter: blur(6px); opacity:.5; z-index:0; pointer-events:none; }
.blob.b1{ width:340px;height:340px; background:radial-gradient(circle at 30% 30%,var(--brand),transparent 70%); top:-80px; left:-90px; animation: morph 14s ease-in-out infinite;}
.blob.b2{ width:300px;height:300px; background:radial-gradient(circle at 60% 40%,var(--brand-2),transparent 70%); bottom:-90px; right:-70px; animation: morph 18s ease-in-out infinite reverse;}
.section > .container { position:relative; z-index:1; }

/* ----------------------------- Cards ----------------------------------- */
.card {
  background: var(--surface); border-radius: var(--radius); padding: 1.6rem;
  box-shadow: var(--shadow-sm); border:1px solid color-mix(in srgb,var(--text) 5%,transparent);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  height:100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card .ico-badge{
  width:58px;height:58px;border-radius:18px; display:grid;place-items:center; font-size:1.7rem;
  background: color-mix(in srgb,var(--brand) 16%, transparent); margin-bottom:1rem;
}
.card h3{ margin-bottom:.4rem; }
.card.feature .ico-badge{ background: color-mix(in srgb,var(--brand-2) 18%,transparent);}
.card.gold .ico-badge{ background: color-mix(in srgb,var(--accent) 20%,transparent);}

/* program cards with image */
.pcard{ background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); height:100%;}
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.pcard .ph{ aspect-ratio:16/11; overflow:hidden; }
.pcard .ph img{ width:100%;height:100%;object-fit:cover; transition: transform .6s var(--ease);}
.pcard:hover .ph img{ transform: scale(1.07); }
.pcard .body{ padding:1.4rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.tag{ display:inline-block; align-self:flex-start; font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-2); background:color-mix(in srgb,var(--brand-2) 14%,transparent); padding:.3rem .7rem; border-radius:999px;}
.pcard ul{ margin:.3rem 0 0; color:var(--muted);}
.pcard ul li{ margin:.2rem 0; }

/* ----------------------------- Stats ----------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:640px){ .stats{ grid-template-columns:repeat(2,1fr);} }
.stat{ text-align:center; padding:1.4rem 1rem; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.stat .num{ font-family:var(--font-head); font-size:clamp(2rem,1.4rem+2vw,2.9rem); font-weight:600; color:var(--brand-ink); }
.stat .lbl{ font-weight:700; color:var(--muted); font-size:.92rem; }

/* ----------------------------- Steps / rhythm -------------------------- */
.steps{ display:grid; gap:1.1rem; }
.step{ display:flex; gap:1rem; background:var(--surface); border-radius:var(--radius); padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm);}
.step .n{ flex:0 0 auto; width:44px;height:44px;border-radius:50%; display:grid;place-items:center; font-weight:800; color:#fff; background:var(--brand);}
.step.alt .n{ background:var(--brand-2);} .step.gold .n{ background:var(--accent); color:#3a2c12;}

/* timeline (daily rhythm) */
.timeline{ position:relative; margin-top:1rem; }
.timeline::before{ content:""; position:absolute; left:18px; top:6px; bottom:6px; width:3px; background:color-mix(in srgb,var(--brand) 30%,transparent); border-radius:3px;}
.t-item{ position:relative; padding:0 0 1.4rem 3.4rem; }
.t-item .time{ position:absolute; left:0; top:0; width:38px;height:38px;border-radius:50%; background:var(--surface); border:3px solid var(--brand); display:grid;place-items:center; font-size:1.1rem;}
.t-item h4{ font-family:var(--font-body); font-weight:800; }
.t-item p{ margin-top:.15rem; }

/* ----------------------------- Testimonials ---------------------------- */
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:900px){ .quote-grid{ grid-template-columns:1fr; } }
.quote{ background:var(--surface); border-radius:var(--radius); padding:1.7rem 1.6rem; box-shadow:var(--shadow-sm); position:relative;}
.quote::before{ content:"\201C"; font-family:var(--font-head); font-size:4rem; color:color-mix(in srgb,var(--brand) 35%,transparent); position:absolute; top:-.4rem; right:1rem; line-height:1;}
.quote p{ color:var(--text); }
.quote .who{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
.quote .av{ width:44px;height:44px;border-radius:50%; background:var(--brand-2); color:#fff; display:grid;place-items:center; font-weight:800;}
.quote .who b{ display:block; } .quote .who span{ color:var(--muted); font-size:.85rem;}
.stars{ color:var(--accent); letter-spacing:2px; }

/* ----------------------------- CTA band -------------------------------- */
.cta-band{ background: linear-gradient(135deg, var(--brand), var(--accent)); color:#fff; border-radius:var(--radius-lg); padding: clamp(2rem,5vw,3.6rem); text-align:center; box-shadow:var(--shadow); position:relative; overflow:hidden;}
.cta-band h2,.cta-band p{ color:#fff; }
.cta-band p{ opacity:.95; max-width:50ch; margin:.8rem auto 1.6rem;}
.cta-band .btn-ghost{ color:var(--brand-ink); }
.cta-band::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% -10%, rgba(255,255,255,.35), transparent 45%); pointer-events:none;}

/* ----------------------------- Gallery --------------------------------- */
.gallery{ columns: 3 240px; column-gap: 1rem; }
.gallery figure{ break-inside:avoid; margin:0 0 1rem; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; position:relative; background:var(--surface-2);}
.gallery img{ width:100%; display:block; transition: transform .6s var(--ease), filter .4s; }
.gallery figure:hover img{ transform:scale(1.06); }
.gallery figcaption{ position:absolute; inset:auto 0 0 0; padding:.8rem; color:#fff; font-weight:700; font-size:.9rem;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); opacity:0; transition:opacity .3s;}
.gallery figure:hover figcaption{ opacity:1; }

.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(20,16,14,.86); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:4vw; }
.lightbox.open{ display:flex; animation: fadein .25s ease; }
.lightbox img{ max-width:92vw; max-height:84vh; border-radius:16px; box-shadow:var(--shadow-lg); }
.lightbox button{ position:absolute; background:rgba(255,255,255,.16); color:#fff; border:none; width:54px;height:54px;border-radius:50%; font-size:1.4rem;}
.lb-close{ top:3vw; right:3vw; } .lb-prev{ left:3vw; } .lb-next{ right:3vw; }
.lb-prev,.lb-next{ top:50%; transform:translateY(-50%); }
@media (max-width:640px){ .lb-prev,.lb-next{ top:auto; bottom:3vw; transform:none; } }

/* ----------------------------- Forms ----------------------------------- */
.form-card{ background:var(--surface); border-radius:var(--radius); padding: clamp(1.4rem,3vw,2.4rem); box-shadow:var(--shadow); }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-weight:800; margin-bottom:.35rem; font-size:.92rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border-radius:14px; font:inherit; color:var(--text);
  background:var(--bg); border:2px solid color-mix(in srgb,var(--text) 12%,transparent); transition:border .2s, box-shadow .2s;}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring);}
.field textarea{ min-height:130px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.84rem; color:var(--muted); }
.form-success{ display:none; background:color-mix(in srgb,var(--brand-2) 16%,transparent); border-radius:16px; padding:1rem 1.2rem; font-weight:700; color:var(--text); margin-bottom:1rem;}
.form-success.show{ display:block; animation: pop .4s var(--ease); }

/* contact info list */
.info-list{ list-style:none; padding:0; display:grid; gap:1rem; }
.info-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.info-list .ico{ width:48px;height:48px;border-radius:14px; flex:0 0 auto; display:grid;place-items:center; font-size:1.3rem; background:color-mix(in srgb,var(--brand) 15%,transparent);}
.info-list b{ display:block; }
.map-embed{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid color-mix(in srgb,var(--text) 8%,transparent); }
.map-embed iframe{ width:100%; height:340px; border:0; display:block; }

/* ----------------------------- Marquee --------------------------------- */
.marquee{ overflow:hidden; padding:1rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{ display:flex; gap:2.5rem; width:max-content; animation: scrollx 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--font-head); font-size:1.3rem; color:var(--muted); display:inline-flex; align-items:center; gap:1rem; white-space:nowrap;}
.marquee-track span::after{ content:"✦"; color:var(--accent); }

/* wavy divider */
.wave{ display:block; width:100%; height:auto; color:var(--surface-2); }
.wave--surface{ color:var(--surface); }

/* ----------------------------- Footer ---------------------------------- */
.site-footer{ background:#241f1c; color:#e9e0d6; padding: clamp(3rem,6vw,5rem) 0 2rem; }
[data-mode="cozy"] .site-footer{ background:#15110f; }
.site-footer a{ color:#f0c9bd; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2rem; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:#fff; font-family:var(--font-body); font-weight:800; margin-bottom:.9rem; letter-spacing:.02em;}
.site-footer ul{ list-style:none; padding:0; display:grid; gap:.55rem; }
.site-footer p{ color:#c7bbac; }
.foot-brand img{ height:48px; background:#fff; padding:.4rem .6rem; border-radius:12px; }
.socials{ display:flex; gap:.6rem; margin-top:1rem; }
.socials a{ width:42px;height:42px;border-radius:12px; background:rgba(255,255,255,.08); display:grid;place-items:center; font-size:1.1rem; text-decoration:none;}
.socials a:hover{ background:var(--brand); }
.foot-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; font-size:.85rem; color:#a99e90;}

/* ----------------------------- Theme Customizer ------------------------ */
.fab{ position:fixed; right:18px; bottom:18px; z-index:80; width:58px;height:58px;border-radius:50%;
  background:var(--brand); color:#fff; border:none; box-shadow:var(--shadow); font-size:1.5rem; display:grid;place-items:center;
  animation: floaty 4s ease-in-out infinite;}
.fab:hover{ transform:scale(1.06); }
.customizer{ position:fixed; top:0; right:0; height:100dvh; width:min(340px,90vw); z-index:100;
  background:var(--surface); box-shadow:var(--shadow-lg); transform:translateX(105%); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; }
.customizer.open{ transform:translateX(0); }
.customizer header{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent);}
.customizer header h3{ font-family:var(--font-body); font-weight:800; font-size:1.05rem; }
.customizer .body{ padding:1.2rem 1.3rem; overflow:auto; }
.customizer .x{ background:none; border:none; font-size:1.4rem; color:var(--muted); }
.cz-group{ margin-bottom:1.5rem; }
.cz-group > label{ font-weight:800; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.7rem;}
.swatches{ display:flex; flex-wrap:wrap; gap:.55rem; }
.swatch{ width:40px;height:40px;border-radius:12px; border:3px solid transparent; cursor:pointer; box-shadow:var(--shadow-sm); position:relative; transition:transform .2s;}
.swatch:hover{ transform:scale(1.08); }
.swatch.active{ border-color:var(--text); }
.swatch.active::after{ content:"✓"; position:absolute; inset:0; display:grid;place-items:center; color:#fff; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.4);}
.font-list{ display:grid; gap:.5rem; }
.font-opt{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.7rem .9rem; border-radius:14px;
  border:2px solid color-mix(in srgb,var(--text) 10%,transparent); background:var(--bg); cursor:pointer; text-align:left; width:100%;}
.font-opt.active{ border-color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,transparent);}
.font-opt .name{ font-weight:800; } .font-opt .prev{ color:var(--muted); font-size:.9rem; }
.cz-row{ display:flex; align-items:center; gap:.7rem; }
.cz-row input[type=color]{ width:46px;height:38px;border:none;border-radius:10px;background:none;cursor:pointer; }
.cz-row input[type=range]{ flex:1; accent-color:var(--brand); }
.cz-actions{ display:flex; gap:.6rem; }
.seg{ display:flex; background:var(--bg); border-radius:12px; padding:.25rem; gap:.25rem; }
.seg button{ flex:1; border:none; background:none; padding:.5rem; border-radius:9px; font-weight:800; color:var(--muted);}
.seg button.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:90; opacity:0; visibility:hidden; transition:.3s; }
.scrim.open{ opacity:1; visibility:visible; }

/* ----------------------------- Reveal animations ----------------------- */
[data-reveal]{ opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform: translateX(-32px); } [data-reveal="left"].in{ transform:none; }
[data-reveal="right"]{ transform: translateX(32px); } [data-reveal="right"].in{ transform:none; }
[data-reveal="zoom"]{ transform: scale(.94); } [data-reveal="zoom"].in{ transform:none; }
[data-stagger] > *{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-stagger].in > *{ opacity:1; transform:none; }

/* keyframes */
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
@keyframes morph{ 0%,100%{ border-radius:46% 54% 60% 40%/55% 48% 52% 45%;} 50%{ border-radius:58% 42% 40% 60%/48% 60% 40% 52%;} }
@keyframes scrollx{ to{ transform:translateX(-50%);} }
@keyframes fadein{ from{opacity:0} to{opacity:1} }
@keyframes pop{ 0%{ transform:scale(.96); opacity:0;} 100%{ transform:scale(1); opacity:1;} }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-6px) rotate(3deg);} }

/* page hero (interior) */
.page-hero{ padding: clamp(2.4rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem); position:relative; }
.page-hero .eyebrow{ margin-bottom:1rem; }
.page-hero h1{ max-width:18ch; }
.page-hero p{ max-width:60ch; margin-top:1rem; }
.breadcrumbs{ font-size:.85rem; color:var(--muted); margin-bottom:1rem; }
.breadcrumbs a{ color:var(--muted); } .breadcrumbs span{ color:var(--brand-ink); font-weight:700; }

/* helpers */
.mt-1{ margin-top:1rem;} .mt-2{ margin-top:2rem;} .mb-0{margin-bottom:0;}
.pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.pill{ background:var(--surface); box-shadow:var(--shadow-sm); border-radius:999px; padding:.5rem .9rem; font-weight:700; font-size:.88rem; display:inline-flex; gap:.45rem; align-items:center;}
.rounded-img{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.rounded-img img{ width:100%; height:100%; object-fit:cover; }
.float-soft{ animation: floaty 6s ease-in-out infinite; }
.accordion{ display:grid; gap:.7rem; }
.acc-item{ background:var(--surface); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); overflow:hidden; }
.acc-q{ width:100%; text-align:left; background:none; border:none; padding:1.1rem 1.3rem; font-weight:800; display:flex; justify-content:space-between; gap:1rem; align-items:center; color:var(--text);}
.acc-q .chev{ transition:transform .3s; color:var(--brand); font-size:1.2rem; }
.acc-item.open .chev{ transform:rotate(45deg); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.acc-a p{ padding:0 1.3rem 1.2rem; }

/* ===================== Sound toggle button ===================== */
.sound-fab{
  position:fixed; right:18px; bottom:86px; z-index:80; width:52px; height:52px; border-radius:50%;
  background:var(--brand-2); color:#fff; border:none; box-shadow:var(--shadow); font-size:1.3rem;
  display:grid; place-items:center; transition:transform .2s var(--ease);
}
.sound-fab:hover{ transform:scale(1.08); }
.sound-fab:not(.is-on){ animation: themePulse 2.6s ease-in-out infinite; }
.sound-fab::after{ content:"Sound"; position:absolute; right:62px; white-space:nowrap;
  background:var(--surface); color:var(--text); font-size:.78rem; font-weight:800; padding:.4rem .7rem;
  border-radius:999px; box-shadow:var(--shadow-sm); opacity:0; transform:translateX(8px); transition:.3s; pointer-events:none; }
.sound-fab:hover::after{ opacity:1; transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ .sound-fab:not(.is-on){ animation:none; } }

/* ===================== Test/demo banner ===================== */
.site-banner{
  position:relative; z-index:60; text-align:center; font-weight:800; letter-spacing:.02em;
  color:#3a2c12; background:repeating-linear-gradient(45deg,#F4D06F 0 22px,#E8B84B 22px 44px);
  padding:.5rem 1rem; font-size:.86rem; box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);
}
.site-banner span{ display:inline-flex; align-items:center; gap:.5rem; }
.site-banner .blink{ animation: bannerBlink 1.4s ease-in-out infinite; }
@keyframes bannerBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@media (prefers-reduced-motion: reduce){ .site-banner .blink{ animation:none; } }

/* ===================== FUN: doodles, motion & extras ===================== */
/* Floating kid doodles injected into heroes */
.doodle-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.doodle{ position:absolute; opacity:.55; filter:saturate(1.1); animation: doodleFloat 7s ease-in-out infinite; will-change:transform; }
@keyframes doodleFloat{
  0%,100%{ transform: translateY(0) rotate(var(--spin,0deg)); }
  50%{ transform: translateY(-22px) rotate(calc(var(--spin,0deg) * -1)); }
}

/* Navbar "Theme" link — make it pop so people click it */
.nav-theme{ background:linear-gradient(90deg,var(--brand),var(--accent)); color:#fff !important;
  font-weight:800 !important; box-shadow:0 8px 18px -8px var(--brand); animation: themePulse 2.6s ease-in-out infinite; }
.nav-theme:hover{ color:#fff !important; filter:brightness(1.05); }
.nav-theme.active::after{ display:none; }
@keyframes themePulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }
.nav-admin{ opacity:.85; }

/* Fab gets a friendly attention nudge + label bubble */
.fab::after{ content:"Try colors!"; position:absolute; right:70px; white-space:nowrap;
  background:var(--surface); color:var(--text); font-size:.78rem; font-weight:800; padding:.4rem .7rem;
  border-radius:999px; box-shadow:var(--shadow-sm); opacity:0; transform:translateX(8px); transition:.3s; pointer-events:none; }
.fab:hover::after{ opacity:1; transform:translateX(0); }

/* Playful hovers */
.ico-badge{ transition: transform .3s var(--ease); }
.card:hover .ico-badge{ animation: wiggle .6s var(--ease); }
@keyframes wiggle{ 0%,100%{ transform:rotate(0);} 25%{ transform:rotate(-9deg) scale(1.08);} 75%{ transform:rotate(9deg) scale(1.08);} }
.pill{ transition: transform .25s var(--ease), box-shadow .25s; }
.pill:hover{ transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow); }
.tag{ transition: transform .25s var(--ease); }
.pcard:hover .tag{ transform: scale(1.08) rotate(-2deg); }
.hero-badge{ cursor:default; }
.stat:hover .num{ animation: jelly .6s; }
@keyframes jelly{ 0%,100%{ transform:scale(1);} 30%{ transform:scale(1.15,.85);} 60%{ transform:scale(.92,1.08);} }

/* Animated, ever-shifting CTA gradient */
.cta-band{ background-size:180% 180%; animation: ctaShift 9s ease infinite; }
@keyframes ctaShift{ 0%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} 100%{ background-position:0% 50%;} }

/* Bouncing scroll cue */
.scroll-cue{ display:inline-flex; flex-direction:column; align-items:center; gap:.3rem; margin-top:1.6rem;
  color:var(--muted); font-weight:700; font-size:.82rem; }
.scroll-cue .arrow{ font-size:1.3rem; animation: bobArrow 1.6s ease-in-out infinite; }
@keyframes bobArrow{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }

/* Footer "more templates" promo strip */
.foot-promo{ text-align:center; margin-top:2rem; padding:1rem 1.2rem; border-radius:16px;
  background:rgba(255,255,255,.06); font-weight:800; }
.foot-promo a{ color:#ffd9cd; text-decoration:underline; }
.foot-promo a:hover{ color:#fff; }

@media (prefers-reduced-motion: reduce){
  .doodle,.nav-theme,.cta-band,.scroll-cue .arrow{ animation:none !important; }
}

/* ============================================================
   Mobile polish — phones & small tablets
   ============================================================ */
html{ overflow-x:hidden; }
a, button, .btn, .swatch, .fab, .sound-fab{ -webkit-tap-highlight-color: rgba(0,0,0,.06); }
img, iframe, video, svg{ max-width:100%; }

/* Tablet & below */
@media (max-width: 768px){
  .section{ padding: clamp(2.6rem,8vw,4rem) 0; }
  .split{ gap: clamp(1.6rem,6vw,2.4rem); }
  .hero-badge{ font-size:.78rem; padding:.55rem .8rem; }
  .hero-badge .ico{ font-size:1.2rem; }
}

/* Phones */
@media (max-width: 560px){
  :root{ --radius:18px; --radius-lg:26px; }
  .container{ width: min(100% - 1.6rem, var(--maxw)); }

  /* full-width, easy-to-tap CTAs */
  .hero-cta{ gap:.6rem; }
  .hero-cta .btn,
  .cta-band .hero-cta .btn{ width:100%; justify-content:center; }
  .btn-lg{ padding:1rem 1.4rem; }

  h1{ line-height:1.08; }
  .lead{ font-size:1.05rem; }

  /* keep decorative bits from crowding small screens */
  .hero-media .frame.small{ width:42%; bottom:-5%; left:-3%; }
  .hero-badge{ right:0; top:3%; }
  .blob.b1{ width:220px; height:220px; }
  .blob.b2{ width:200px; height:200px; }

  /* smaller floating controls, comfortably stacked & thumb-reachable */
  .fab{ width:50px; height:50px; right:14px; bottom:14px; font-size:1.3rem; }
  .sound-fab{ width:46px; height:46px; right:14px; bottom:74px; font-size:1.2rem; }
  .sound-fab::after{ display:none; }

  /* tables of cards already collapse; tighten cards */
  .card{ padding:1.3rem; }
  .quote{ padding:1.4rem 1.3rem; }

  /* map a touch shorter */
  .map-embed iframe{ height:280px; }

  /* test banner wraps gracefully */
  .site-banner{ font-size:.76rem; padding:.45rem .7rem; line-height:1.3; }

  /* gallery single-comfortable columns */
  .gallery{ columns: 2 150px; column-gap:.7rem; }
}

/* Very small phones */
@media (max-width: 380px){
  .gallery{ columns: 1; }
  .nav .brand img{ height:38px; }
}

/* Avoid iOS auto-zoom: keep form fields >= 16px */
@media (max-width: 560px){
  .field input, .field select, .field textarea{ font-size:16px; }
}