/* ==========================================================================
   Toothy Kids — Pediatric Dentistry, Austin TX
   Static site. No frameworks, no build step, no dependencies but Google Fonts.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand */
  --sky:#4FB6E8;
  --sky-deep:#1E6FA8;
  --sky-night:#265C87;
  --sun:#FFD23F;
  --sun-deep:#F0B90B;
  --bubble:#FF8FB1;
  --bubble-deep:#E8628E;   /* fills + button shadows + large numerals */
  --bubble-ink:#AE2C5E;    /* same family, dark enough for small text (4.5:1+) */
  --mint:#7FD8C4;
  --cream:#FFFDF6;
  --ink:#1B3A4B;
  --ink-soft:#456A7C;

  /* the hero canvas gradient is sampled from the source footage so the
     CSS backdrop and the rendered frame never disagree at the edges */
  --scene-top:#3577AF;
  --scene-mid:#3E80B7;
  --scene-bot:#62A9D2;

  --white:#fff;
  --line:rgba(27,58,75,.12);
  --shadow-s:0 2px 6px rgba(27,58,75,.06), 0 8px 20px rgba(27,58,75,.06);
  --shadow-m:0 4px 12px rgba(27,58,75,.08), 0 18px 40px rgba(27,58,75,.10);
  --shadow-l:0 10px 30px rgba(27,58,75,.10), 0 30px 70px rgba(27,58,75,.14);

  /* radii — soft, children's-book, never sharp */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* spacing (density 4/10 — standard, marketing-page airy) */
  --s-1:6px; --s-2:12px; --s-3:18px; --s-4:24px; --s-5:36px;
  --s-6:48px; --s-7:64px; --s-8:88px; --s-9:120px;

  /* motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:160ms; --t-mid:260ms; --t-slow:520ms;

  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
/* class-level display rules would otherwise out-rank the UA [hidden] rule */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:400 clamp(16px,.55vw + 14.2px,17.5px)/1.65 Nunito,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,h4{font-family:"Baloo 2",Nunito,system-ui,sans-serif;font-weight:800;line-height:1.12;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--sky-deep);text-decoration-thickness:.08em;text-underline-offset:.18em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
/* Double ring so focus stays visible on every section, light or dark:
   the thin ink rim reads on cream/white, the sun ring reads on the hero,
   footer and sky-gradient sections — a single-color ring failed one or
   the other everywhere on the page. */
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;box-shadow:0 0 0 5px var(--ink);border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:fixed;top:10px;left:10px;z-index:200;
  transform:translateY(-160%);
  background:var(--sun);color:var(--ink);font-weight:800;
  padding:10px 18px;border-radius:var(--r-pill);text-decoration:none;
  transition:transform var(--t-mid) var(--e-out);
}
.skip-link:focus{transform:translateY(0)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.wrap--narrow{max-width:820px}

/* ---------- 2. Preloader ---------- */
.loader{
  position:fixed;inset:0;z-index:150;
  display:grid;place-items:center;
  background:linear-gradient(180deg,var(--scene-top),var(--scene-bot));
  transition:opacity 620ms var(--e-out),visibility 620ms;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{text-align:center;color:var(--cream);width:min(320px,72vw)}
.loader__tooth{width:64px;height:64px;margin:0 auto var(--s-3);animation:bob 1.5s var(--e-out) infinite}
.loader__pct{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(48px,10vw,72px);line-height:1;margin:0}
.loader__label{margin:.35em 0 var(--s-3);font-weight:700;opacity:.85}
.loader__bar{height:8px;border-radius:var(--r-pill);background:rgba(255,253,246,.28);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--sun);border-radius:inherit}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}

/* ---------- 3. Custom cursor ---------- */
.cursor{position:fixed;inset:0;z-index:140;pointer-events:none;opacity:0;transition:opacity var(--t-mid)}
.cursor.is-on{opacity:1}
.cursor__ring,.cursor__dot{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cursor__ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--bubble)}
.cursor__dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--sun)}
@media (pointer:coarse){.cursor{display:none}}
/* hide the system arrow only once JS confirms the trailing cursor is
   actually running (fine pointer, motion allowed) — never guess in CSS
   alone, or a no-JS/failed-load visitor loses their cursor entirely.
   button/.btn set their own cursor:pointer, so inheritance alone won't
   reach them — override those two explicitly rather than a blanket
   `.has-custom-cursor *`, which would just re-fight the same specificity
   battle against every future `cursor:` rule instead of settling it. */
.has-custom-cursor{cursor:none}
.has-custom-cursor button,
.has-custom-cursor .btn{cursor:none}

/* ---------- 4. Header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(13,45,74,.68);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:background var(--t-mid),box-shadow var(--t-mid);
}
.hdr.is-stuck{background:rgba(255,253,246,.86);box-shadow:var(--shadow-s);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:var(--s-3);max-width:var(--wrap);margin-inline:auto;padding:10px clamp(18px,4vw,40px)}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);flex:0 0 auto}
.hdr.is-stuck .brand{color:var(--ink)}
.brand__mark{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  background:var(--cream);border-radius:12px;box-shadow:var(--shadow-s);
  transition:transform var(--t-mid) var(--e-spring),rotate var(--t-mid) var(--e-spring);
}
.brand__mark svg{width:24px;height:24px;fill:var(--sky-deep)}
.brand:hover .brand__mark{transform:scale(1.08);rotate:-8deg}
.brand__txt{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.28rem;letter-spacing:-.01em;white-space:nowrap}
.brand__txt em{font-style:normal;color:var(--sun)}
.hdr.is-stuck .brand__txt em{color:var(--bubble-deep)}

.nav{margin-inline:auto}
.nav__book{display:none}
.nav__list{display:flex;gap:2px;background:rgba(255,253,246,.2);border:1px solid rgba(255,255,255,.28);padding:4px;border-radius:var(--r-pill)}
.hdr.is-stuck .nav__list{background:rgba(79,182,232,.10);border-color:transparent}
.nav__a{
  display:block;padding:8px 15px;border-radius:var(--r-pill);
  color:var(--cream);font-weight:700;font-size:.94rem;text-decoration:none;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--e-spring);
}
.hdr.is-stuck .nav__a{color:var(--ink)}
.nav__a:hover{background:var(--cream);color:var(--sky-deep);transform:translateY(-2px)}
.nav__a.is-current{background:var(--cream);color:var(--sky-deep)}

.hdr__right{display:flex;align-items:center;gap:var(--s-2);flex:0 0 auto}
.tel{display:inline-flex;align-items:center;gap:7px;color:var(--cream);font-weight:800;font-size:.94rem;text-decoration:none;white-space:nowrap}
.hdr.is-stuck .tel{color:var(--ink)}
.tel svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tel:hover{text-decoration:underline}

.burger{display:none;width:44px;height:44px;border:0;background:var(--cream);border-radius:12px;padding:0;place-items:center;box-shadow:var(--shadow-s)}
.burger i{display:block;width:20px;height:2.4px;border-radius:2px;background:var(--ink);margin:2.6px auto;transition:transform var(--t-mid) var(--e-out),opacity var(--t-fast)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.2px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border:0;border-radius:var(--r-pill);
  font-family:"Baloo 2",sans-serif;font-weight:700;font-size:1.02rem;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--t-mid) var(--e-spring),box-shadow var(--t-mid),background var(--t-fast);
}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-mid) var(--e-out)}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn--sun{background:var(--sun);color:var(--ink);box-shadow:0 4px 0 var(--sun-deep),var(--shadow-m)}
.btn--sun:hover{background:#FFDA5F;box-shadow:0 6px 0 var(--sun-deep),var(--shadow-l)}
.btn--bubble{background:var(--bubble);color:var(--ink);box-shadow:0 4px 0 var(--bubble-deep),var(--shadow-m)}
.btn--bubble:hover{background:#FF9FBD;box-shadow:0 6px 0 var(--bubble-deep),var(--shadow-l)}
.btn--ghost{background:rgba(255,253,246,.14);color:var(--cream);box-shadow:inset 0 0 0 2px rgba(255,253,246,.75)}
.btn--ghost:hover{background:var(--cream);color:var(--sky-deep)}
.btn--lg{padding:16px 30px;font-size:1.1rem}
.btn--sm{padding:11px 20px;font-size:.96rem}
.btn--block{width:100%}

.lnk{display:inline-flex;align-items:center;gap:6px;color:var(--sky-deep);font-weight:800;font-size:.95rem;text-decoration:none}
.lnk svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-fast) var(--e-out)}
.lnk:hover{text-decoration:underline}
.lnk:hover svg{transform:translateX(4px)}
.lnk--dark{color:var(--ink);font-size:1.05rem}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:min(100svh,940px);
  display:grid;align-items:center;
  padding:var(--s-8) 0 var(--s-9);
  background:linear-gradient(180deg,var(--scene-top),var(--scene-mid) 45%,var(--scene-bot));
  overflow:hidden;
}
.hero__stage{position:absolute;inset:0;z-index:-2}
.hero__stage canvas{width:100%;height:100%;display:block}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Keeps the copy above 4.5:1 on the left without dulling Toothy on the
     right — the gradient is fully clear before it reaches his face. */
  background:linear-gradient(94deg,
    rgba(11,48,80,.90) 0%,
    rgba(11,48,80,.82) 26%,
    rgba(11,48,80,.52) 38%,
    rgba(11,48,80,.16) 47%,
    transparent 56%);
}
.hero__copy{position:relative;z-index:2;max-width:min(560px,45%);padding-inline:clamp(18px,4vw,40px);margin-left:max(0px,calc((100vw - var(--wrap))/2))}
.hero__h1{font-size:clamp(34px,4.3vw,60px);color:var(--cream);text-wrap:balance;margin:0 0 var(--s-4)}
.hero__h1 em{font-style:normal;color:var(--sun);position:relative;white-space:nowrap}
.hero__h1 em::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.02em;height:.14em;
  background:var(--bubble);border-radius:var(--r-pill);z-index:-1;
  transform:scaleX(0);transform-origin:left;
  animation:swipe 700ms var(--e-out) 900ms forwards;
}
@keyframes swipe{to{transform:scaleX(1)}}
.hero__sub{font-size:clamp(17px,1.35vw,21px);color:var(--cream);text-shadow:0 1px 4px rgba(14,52,82,.55);max-width:34em;font-weight:600;margin:0 0 var(--s-4)}
.hero__sub--mobile{display:none}
/* solid cream + a shadow instead of a translucent white: the hero's own
   background gradient runs light enough at its lower/righter edge — past
   where .hero__scrim has already faded out — that semi-transparent text
   dropped under 4.5:1 there. A shadow holds up regardless of what's
   behind it, which a flat contrast ratio against one sampled color can't. */
.hero__facts{display:flex;flex-wrap:wrap;gap:.55em;align-items:baseline;color:var(--cream);text-shadow:0 1px 4px rgba(14,52,82,.55);font-size:.98rem;font-weight:600;margin:0 0 var(--s-4)}
.hero__facts b{font-family:"Baloo 2",sans-serif;font-size:1.35em;color:var(--sun);text-shadow:0 1px 4px rgba(14,52,82,.55);font-weight:800}
.hero__facts i{opacity:.55;font-style:normal}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);margin-bottom:var(--s-4)}
.hero__note{margin:0;color:var(--cream);text-shadow:0 1px 4px rgba(14,52,82,.55);font-size:.9rem;font-weight:600}
.hero__note i{opacity:.6;font-style:normal;margin-inline:.35em}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,253,246,.94);color:var(--ink);
  padding:7px 16px 7px 8px;border-radius:var(--r-pill);
  font-weight:800;font-size:.9rem;box-shadow:var(--shadow-m);margin:0 0 var(--s-3);
}
.badge__tick{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sun);flex:0 0 auto}
.badge__tick svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

.hero__scroll{
  position:absolute;left:50%;bottom:76px;z-index:3;translate:-50% 0;
  display:grid;place-items:center;width:46px;height:46px;
  background:rgba(255,253,246,.9);border-radius:50%;box-shadow:var(--shadow-m);
  animation:nudge 2s var(--e-out) infinite;
}
.hero__scroll svg{width:20px;height:20px;fill:none;stroke:var(--sky-deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes nudge{0%,100%{translate:-50% 0}50%{translate:-50% 9px}}

/* floating bubbles */
.bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bub{
  position:absolute;bottom:-14vh;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,.14) 58%,rgba(255,255,255,.05));
  box-shadow:inset 0 0 12px rgba(255,255,255,.35);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(.7);opacity:0}
  12%{opacity:.75}
  85%{opacity:.5}
  100%{transform:translateY(-125vh) translateX(var(--drift,20px)) scale(1.1);opacity:0}
}

/* wave dividers */
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(52px,7vw,110px);z-index:4}
.wave path{fill:var(--cream)}
.wave--up{bottom:auto;top:-1px;transform:rotate(180deg)}

/* ---------- 7. Sections ---------- */
.sect{position:relative;padding:var(--s-8) 0;isolation:isolate}
.sect--cream{background:var(--cream)}
.sect--sky{background:linear-gradient(170deg,var(--sky-night),var(--sky-deep));color:var(--cream);padding-block:calc(var(--s-8) + 40px)}
.sect__head{max-width:760px;margin:0 auto var(--s-7);text-align:center}
.sect__head--light{color:var(--cream)}
.eyebrow{
  display:inline-block;font-family:"Baloo 2",sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bubble-ink);background:rgba(255,143,177,.16);
  padding:5px 14px;border-radius:var(--r-pill);margin:0 0 var(--s-3);
}
.sect__head--light .eyebrow{color:var(--ink);background:var(--sun)}
.h2{font-size:clamp(28px,3.4vw,46px);text-wrap:balance}
.sect__sub{margin-top:.8em;color:var(--ink-soft);font-size:1.06rem}
.sect__head--light .sect__sub{color:rgba(255,253,246,.92)}
.lead{font-size:1.14rem;font-weight:600}

/* ---------- 8. Trust marquee ---------- */
.trust{background:var(--cream);padding:var(--s-4) 0;border-bottom:1px solid var(--line);overflow:hidden}
.marquee{display:flex;width:max-content;gap:0;animation:slide 34s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee__row{display:flex;align-items:center;gap:clamp(24px,4vw,54px);padding-right:clamp(24px,4vw,54px)}
.marquee__row li{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:.98rem;color:var(--ink);white-space:nowrap}
.marquee__row svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--sky-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.marquee__row li:nth-child(even) svg{stroke:var(--bubble-deep)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 9. Meet Toothy ---------- */
.toothy{background:var(--cream)}
.toothy__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.toothy__txt .h2{margin-bottom:.6em;color:var(--sky-deep)}
.ticks{display:grid;gap:var(--s-2);margin:var(--s-4) 0 var(--s-5)}
.ticks li{position:relative;padding-left:34px;font-weight:600}
.ticks li::before{
  content:"";position:absolute;left:0;top:.16em;width:22px;height:22px;border-radius:50%;
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A4B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.ticks--lg li{padding-left:38px;margin-bottom:.2em}
.ticks--lg li b{font-family:"Baloo 2",sans-serif;font-weight:700}

.toothy__looks{position:relative;aspect-ratio:1/1;min-height:320px}
.look{margin:0;position:absolute;border-radius:50%;overflow:hidden;background:var(--cream);
  border:7px solid var(--cream);box-shadow:var(--shadow-l);
  animation:float 6s var(--e-out) infinite;
}
.look img{width:100%;height:100%;object-fit:cover}
.look--1{width:47%;top:2%;left:6%;animation-delay:0s}
.look--2{width:38%;top:14%;right:2%;animation-delay:-1.5s;border-color:var(--sun)}
.look--3{width:42%;bottom:6%;left:24%;animation-delay:-3s;border-color:var(--bubble)}
.look--4{width:30%;bottom:20%;right:5%;animation-delay:-4.5s;border-color:var(--mint)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-16px) rotate(1.5deg)}}
.look__spark{position:absolute;width:20px;height:20px;background:var(--sun);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:twinkle 2.4s ease-in-out infinite}
.look__spark--a{top:6%;right:24%}
.look__spark--b{bottom:14%;left:8%;width:14px;height:14px;background:var(--bubble);animation-delay:-1.2s}
@keyframes twinkle{0%,100%{transform:scale(.5) rotate(0);opacity:.35}50%{transform:scale(1.15) rotate(90deg);opacity:1}}

/* ---------- 10. Service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.card{
  background:var(--white);border-radius:var(--r-xl);padding:var(--s-5) var(--s-4) var(--s-4);
  box-shadow:var(--shadow-s);border:1px solid var(--line);
  transition:transform var(--t-mid) var(--e-spring),box-shadow var(--t-mid);
}
.card:hover{transform:translateY(-8px) scale(1.03);box-shadow:var(--shadow-l)}
.card__ico{display:grid;place-items:center;width:58px;height:58px;border-radius:var(--r-md);margin-bottom:var(--s-3);
  transition:rotate var(--t-mid) var(--e-spring),scale var(--t-mid) var(--e-spring)}
.card:hover .card__ico{rotate:-9deg;scale:1.1}
.card__ico svg{width:29px;height:29px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card__ico--sky{background:#CDEBFA}
.card__ico--sun{background:#FFECAF}
.card__ico--bubble{background:#FFD9E4}
.card__h{font-size:1.3rem;margin-bottom:.4em}
.card p{color:var(--ink-soft);font-size:.99rem;margin-bottom:1em}

/* ---------- 11. Why parents ---------- */
.why{background:linear-gradient(180deg,var(--cream),#F2FAFE);padding-bottom:calc(var(--s-9) + 20px)}
.why__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start;margin-bottom:var(--s-7)}
.why__txt .h2{margin-bottom:.7em}
.rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 20px 9px 14px;box-shadow:var(--shadow-s);margin-bottom:var(--s-4);width:fit-content}
.rating__stars{display:inline-flex;gap:2px}
.rating__stars svg{width:19px;height:19px;fill:var(--sun);stroke:none}
.rating b{font-family:"Baloo 2",sans-serif;font-size:1.3rem;font-weight:800}
.rating span{color:var(--ink-soft);font-size:.92rem;font-weight:600}

.why__stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);
  box-shadow:var(--shadow-s);transition:transform var(--t-mid) var(--e-spring)}
.stat:hover{transform:translateY(-5px) rotate(-1deg)}
.stat__n{display:block;font-family:"Baloo 2",sans-serif;font-size:clamp(34px,4vw,48px);font-weight:800;line-height:1;color:var(--sky-deep)}
.stat:nth-child(2n) .stat__n{color:var(--bubble-deep)}
.stat span{display:block;margin-top:.4em;font-size:.92rem;font-weight:600;color:var(--ink-soft)}

.peek{margin:0}
.peek figcaption{margin-top:var(--s-3);text-align:center;color:var(--ink-soft);font-weight:600}
.peek__play{
  position:absolute;inset:0;z-index:3;margin:auto;width:78px;height:78px;border:0;border-radius:50%;
  display:grid;place-items:center;background:var(--sun);box-shadow:var(--shadow-l);
  transition:transform var(--t-mid) var(--e-spring)
}
.peek__play svg{width:28px;height:28px;fill:var(--ink);stroke:none;margin-left:4px}
.peek__play:hover{transform:scale(1.12)}
.peek__play.is-hidden{display:none}

/* ---------- 12. Steps ---------- */
.steps__list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);counter-reset:s}
.step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s-6) var(--s-4) var(--s-4);box-shadow:var(--shadow-s);
  transition:transform var(--t-mid) var(--e-spring),box-shadow var(--t-mid)}
.step:hover{transform:translateY(-7px);box-shadow:var(--shadow-m)}
.step__n{
  position:absolute;top:-22px;left:var(--s-4);
  display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);
  background:var(--sky);color:var(--cream);
  font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.5rem;
  box-shadow:var(--shadow-m);rotate:-6deg;
  transition:rotate var(--t-mid) var(--e-spring)
}
.step:nth-child(2) .step__n{background:var(--sun);color:var(--ink)}
.step:nth-child(3) .step__n{background:var(--bubble);color:var(--ink)}
.step:nth-child(4) .step__n{background:var(--mint);color:var(--ink)}
.step:hover .step__n{rotate:6deg}
.step__h{font-size:1.18rem;margin-bottom:.35em}
.step p{color:var(--ink-soft);font-size:.97rem}

.steps__media{margin-top:var(--s-7);max-width:900px;margin-inline:auto}
.steps__cap{margin-top:var(--s-3);text-align:center;color:var(--ink-soft);font-weight:600}

/* ---------- 13. Team ---------- */
.team{background:var(--cream)}
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.person{text-align:left}
.person .ph{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-m);margin-bottom:var(--s-3);
  transition:transform var(--t-mid) var(--e-spring)}
.person:hover .ph{transform:translateY(-6px) rotate(-1.5deg)}
.person__n{font-size:1.12rem;margin-bottom:.2em}
.person__r{color:var(--bubble-ink);font-weight:800;font-size:.9rem;margin-bottom:.6em}
.person p{color:var(--ink-soft);font-size:.95rem}

/* ---------- 14. Reviews carousel ---------- */
.carousel{position:relative;max-width:940px;margin-inline:auto}
.carousel__view{
  overflow:hidden;border-radius:var(--r-xl);
  background:rgba(255,253,246,.07);border:1px solid rgba(255,253,246,.16);
}
.carousel__track{display:flex;transition:transform 560ms var(--e-out)}
.quote{position:relative;flex:0 0 100%;padding:var(--s-6) clamp(20px,4vw,56px);min-width:0}
.quote::before{
  content:"\201C";position:absolute;top:-.16em;right:.3em;
  font-family:"Baloo 2",serif;font-size:clamp(120px,16vw,210px);line-height:1;
  color:rgba(255,210,63,.16);pointer-events:none;
}
.quote__stars{display:inline-flex;gap:3px;margin-bottom:var(--s-3)}
.quote__stars svg{width:22px;height:22px;fill:var(--sun);stroke:none}
.quote blockquote{margin:0}
.quote blockquote p{font-family:"Baloo 2",sans-serif;font-weight:600;font-size:clamp(19px,2.1vw,27px);line-height:1.42;text-wrap:pretty}
.quote footer{display:flex;align-items:center;gap:12px;margin-top:var(--s-4);flex-wrap:wrap}
.ava{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sun);color:var(--ink);
  font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1rem;flex:0 0 auto}
.quote footer b{font-weight:800}
.quote footer em{font-style:normal;color:rgba(255,253,246,.9);font-size:.94rem}
.carousel__ui{display:flex;align-items:center;justify-content:center;gap:var(--s-2);margin-top:var(--s-4)}
.cbtn{display:grid;place-items:center;width:46px;height:46px;border:2px solid rgba(255,253,246,.7);border-radius:50%;
  background:transparent;transition:background var(--t-fast),transform var(--t-fast) var(--e-spring)}
.cbtn svg{width:20px;height:20px;fill:none;stroke:var(--cream);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cbtn:hover{background:rgba(255,253,246,.16);transform:scale(1.08)}
.cbtn .ic-play{display:none}
.cbtn .ic-play path{fill:var(--cream);stroke:none}
.cbtn[aria-pressed="true"] .ic-pause{display:none}
.cbtn[aria-pressed="true"] .ic-play{display:block}
.dots{display:flex;gap:2px;margin-inline:var(--s-2)}
.dot{position:relative;width:24px;height:24px;padding:0;border:0;background:transparent;display:grid;place-items:center}
.dot::after{
  content:"";width:11px;height:11px;border-radius:50%;background:rgba(255,253,246,.5);
  transition:background var(--t-fast),transform var(--t-fast) var(--e-spring);
}
.dot[aria-selected="true"]::after{background:var(--sun);transform:scale(1.35)}

/* ---------- 15. FAQ accordion ---------- */
.faq{background:var(--cream)}
.acc{display:grid;gap:var(--s-2)}
.acc__item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:box-shadow var(--t-mid),border-color var(--t-mid)}
.acc__item.is-open{box-shadow:var(--shadow-m);border-color:rgba(79,182,232,.5)}
.acc__item h3{margin:0}
.acc__btn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  width:100%;padding:var(--s-3) var(--s-4);border:0;background:transparent;text-align:left;
  font-family:"Baloo 2",sans-serif;font-weight:700;font-size:1.1rem;color:var(--ink);
  min-height:56px;transition:background var(--t-fast)
}
.acc__btn:hover{background:rgba(79,182,232,.08)}
.acc__ico{position:relative;width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--sky);
  transition:rotate var(--t-mid) var(--e-spring),background var(--t-fast)}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;inset:0;margin:auto;background:var(--cream);border-radius:2px}
.acc__ico::before{width:13px;height:2.6px}
.acc__ico::after{width:2.6px;height:13px;transition:opacity var(--t-fast),transform var(--t-mid) var(--e-out)}
.acc__btn[aria-expanded="true"] .acc__ico{rotate:180deg;background:var(--bubble)}
.acc__btn[aria-expanded="true"] .acc__ico::after{opacity:0;transform:scaleY(0)}
.acc__panel{padding:var(--s-3) var(--s-4) var(--s-4);color:var(--ink-soft)}
.acc__panel[hidden]{display:none}
.acc__panel.is-anim{overflow:hidden}

/* ---------- 16. Booking ---------- */
.book__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
.book__form .h2{margin-bottom:.5em}
form{margin-top:var(--s-5)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.field{margin-bottom:var(--s-3);min-width:0}
.field label{display:block;font-weight:800;font-size:.95rem;margin-bottom:6px}
.field label span{color:var(--bubble-deep)}
input,select,textarea{
  width:100%;padding:13px 16px;min-height:48px;
  font:inherit;color:var(--ink);background:var(--white);
  border:2px solid var(--line);border-radius:var(--r-md);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
textarea{min-height:110px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A4B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
input:focus,select:focus,textarea:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(79,182,232,.22);outline:none}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--bubble-deep);background:#FFF6F9}
.hint{margin:6px 0 0;font-size:.85rem;color:var(--ink-soft)}
.err{margin:6px 0 0;font-size:.88rem;font-weight:700;color:#C2185B}
.err[hidden]{display:none}
.formnote{margin-top:var(--s-3);font-size:.86rem;color:var(--ink-soft);text-align:center}
.alert{background:#FFF1F5;border:2px solid var(--bubble);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4)}
.alert[hidden]{display:none}
.alert h3{font-size:1.08rem;color:#C2185B;margin-bottom:.4em}
.alert ul{display:grid;gap:4px;list-style:disc;padding-left:1.2em}
.alert a{color:#C2185B;font-weight:700}

.thanks{text-align:center;padding:var(--s-6) var(--s-4);background:#F0FBF7;border:2px dashed var(--mint);border-radius:var(--r-lg)}
.thanks[hidden]{display:none}
.thanks__ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto var(--s-3);border-radius:50%;background:var(--mint);
  animation:pop 520ms var(--e-spring)}
.thanks__ico svg{width:32px;height:32px;fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.thanks h3{font-size:1.5rem;margin-bottom:.4em}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}

.infocard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-5);box-shadow:var(--shadow-m);margin-bottom:var(--s-3)}
.infocard h3{font-size:1.28rem;margin-bottom:.4em}
.infocard h4{font-family:"Baloo 2",sans-serif;font-size:1.02rem;margin:var(--s-4) 0 var(--s-2)}
.infocard__addr{color:var(--ink-soft);font-weight:600}
.infocard__note{margin-top:var(--s-3);font-size:.88rem;color:var(--ink-soft)}
.hours{width:100%;border-collapse:collapse;font-size:.96rem}
.hours th,.hours td{text-align:left;padding:7px 0;border-bottom:1px solid var(--line);font-weight:600}
.hours th{color:var(--ink-soft);font-weight:700}
.hours td{text-align:right}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}

/* ---------- 17. Media placeholders ---------- */
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#DCEEF8,#F4E7EE);border-radius:var(--r-lg)}
.ph img,.ph video{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;display:block}
.ph--portrait{aspect-ratio:4/5}
.ph--16x9,.ph--video{aspect-ratio:16/9}
.ph--map{aspect-ratio:4/3;border-radius:var(--r-xl);box-shadow:var(--shadow-m)}
.ph__fallback{
  position:absolute;inset:0;z-index:1;display:grid;place-content:center;gap:6px;
  padding:var(--s-4);text-align:center;
  background-image:repeating-linear-gradient(45deg,rgba(79,182,232,.12) 0 12px,transparent 12px 24px);
}
.ph__fallback b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;color:var(--sky-deep);word-break:break-all}
.ph__fallback em{font-style:normal;font-size:.8rem;color:var(--ink-soft);max-width:34ch;margin-inline:auto}
.ph.is-loaded .ph__fallback{display:none}
.peek .ph{border-radius:var(--r-xl);box-shadow:var(--shadow-l)}

/* ---------- 18. Footer ---------- */
.ftr{background:var(--ink);color:rgba(255,253,246,.8);padding:var(--s-8) 0 var(--s-4);font-size:.96rem}
.ftr__grid{display:grid;grid-template-columns:1.2fr 2fr;gap:clamp(32px,5vw,72px);padding-bottom:var(--s-6)}
.brand--ftr{color:var(--cream);margin-bottom:var(--s-3)}
.brand--ftr .brand__mark{background:rgba(255,253,246,.1)}
.brand--ftr .brand__mark svg{fill:var(--sun)}
.ftr__brand p{max-width:34ch}
.social{display:flex;gap:10px;margin-top:var(--s-3)}
.social a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,253,246,.09);
  color:var(--cream);transition:background var(--t-fast),transform var(--t-fast) var(--e-spring)}
.social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.social a:hover{background:var(--sun);color:var(--ink);transform:translateY(-3px)}
.ftr__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.ftr h4{font-family:"Baloo 2",sans-serif;font-size:1.02rem;color:var(--cream);margin-bottom:var(--s-2)}
.ftr__nav ul{display:grid;gap:9px}
.ftr__nav a{color:rgba(255,253,246,.78);text-decoration:none}
.ftr__nav a:hover{color:var(--sun);text-decoration:underline}

.disclaimer{border:1px dashed rgba(255,253,246,.28);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);background:rgba(255,253,246,.04)}
.disclaimer h4{margin-bottom:.5em}
.disclaimer p{font-size:.9rem;line-height:1.7;color:rgba(255,253,246,.72)}
.disclaimer b{color:var(--sun)}
.ftr__bar{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:space-between;align-items:center;
  margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid rgba(255,253,246,.14);font-size:.86rem}
.ftr__bar p{margin:0}
.ftr__bar a{color:var(--sun)}

/* ---------- 19. Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity 520ms var(--e-out),transform 520ms var(--e-out)}

/* ---------- 20. Responsive ---------- */
@media (max-width:1180px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps__list{grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-4)}
  .people{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){
  .nav{
    position:fixed;inset:64px 12px auto 12px;margin:0;
    background:var(--cream);border-radius:var(--r-xl);box-shadow:var(--shadow-l);
    padding:var(--s-3);opacity:0;visibility:hidden;transform:translateY(-14px) scale(.98);
    transition:opacity var(--t-mid) var(--e-out),transform var(--t-mid) var(--e-out),visibility var(--t-mid);
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav__list{flex-direction:column;gap:2px;background:transparent;border:0;padding:0}
  .nav__a,.hdr .nav__a{color:var(--ink);font-size:1.06rem;padding:13px 16px;border-radius:var(--r-md);min-height:48px;display:flex;align-items:center}
  .nav__a:hover{transform:none;background:rgba(79,182,232,.14)}
  .burger{display:grid}
  .hdr__right{margin-left:auto}
  .nav__book{display:block;margin-top:8px}
  .hero__copy{max-width:min(600px,60%)}
}
@media (max-width:900px){
  .hero{
    min-height:0;display:flex;flex-direction:column;padding:var(--s-5) 0 var(--s-7);
    background:linear-gradient(180deg,var(--sky-night),var(--sky-deep))
  }
  /* the h1 is the whole point of the hero on a phone — give it more air
     above and below than the rest of the stack gets */
  .badge{margin-bottom:var(--s-4)}
  .hero__h1{margin-bottom:var(--s-5)}
  .hero__sub{font-size:1.02rem}
  .hero__sub--desktop{display:none}
  .hero__sub--mobile{display:inline}
  .hero__facts{gap:.4em;font-size:.92rem}
  .hero__note{font-size:.82rem}
  /* Toothy's mouse-tracking canvas doesn't translate to a touchscreen — a
     phone gets the calmer text-only hero, with Toothy proper further down
     in "Meet Toothy" */
  .hero__stage{display:none}
  .hero__copy{max-width:none;margin-left:0;margin-inline:auto;text-align:center;max-width:640px}
  .hero__facts,.hero__cta{justify-content:center}
  .hero__sub{margin-inline:auto}
  .hero__scroll{display:none}
  .toothy__grid,.why__grid,.book__grid{grid-template-columns:1fr}
  .toothy__looks{max-width:440px;margin-inline:auto;order:-1}
  .why__stats{grid-template-columns:1fr 1fr}
  .ftr__grid{grid-template-columns:1fr}
  .tel span{display:none}
  .tel{width:44px;height:44px;display:grid;place-items:center;background:var(--cream);border-radius:12px;color:var(--ink)}
  .tel svg{width:20px;height:20px}
}
@media (max-width:640px){
  .cards,.steps__list,.people{grid-template-columns:1fr}
  .step{padding-top:var(--s-6)}
  .sect{padding:var(--s-7) 0}
  .sect__head{margin-bottom:var(--s-5);text-align:left}
  .ftr__nav{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* three CTAs plus a phone plus a burger will not fit: the yellow button
     moves into the drop-down (.nav__book), tap-to-call stays in the bar */
  .hdr__right > .btn--sun{display:none}
  .hdr__in{gap:var(--s-2);padding-inline:14px}
  .hero__h1{font-size:clamp(28px,7.8vw,38px)}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .row{grid-template-columns:1fr}
  .why__stats{grid-template-columns:1fr}
  .quote{padding:var(--s-5) var(--s-3)}
  .brand__txt{font-size:1.12rem}
  .ftr__bar{flex-direction:column;align-items:flex-start}
}

/* ---------- 21. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
  .reveal{opacity:1!important;transform:none!important}
  .hero__h1 em::after{transform:scaleX(1)}
  .bubbles,.look__spark{display:none}
  .look{animation:none}
  .marquee{animation:none;width:100%;flex-wrap:wrap}
  .marquee__row{flex-wrap:wrap;row-gap:12px;padding-right:0}
  .marquee__row[aria-hidden="true"]{display:none}
  .cursor{display:none}
  .carousel__track{transition:none}
}

/* ---------- 22. Canvas wake-up ---------- */
@keyframes wakeup{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}