/* Waterdown Kids Dentistry.
   Part 1 is the client-supplied home page stylesheet, verbatim.
   Part 2 extends it for inner pages. Edit theme-src/pages.css. */

:root{
  --blue:#1150A3; --blue-deep:#0C3F80; --blue-ink:#123A66;
  --teal:#61CEDE; --teal-deep:#2CAEC4; --teal-soft:#E7F7FB; --teal-mid:#CDEFF6; --sky:#6CCDDD;
  --coral:#FC7660; --coral-deep:#F0512F; --coral-soft:#FFEAE3;
  --ink:#163A5E; --muted:#5C6E85; --paper:#FBFDFF; --cloud:#F1F8FC; --line:#E5EEF6;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --shadow:0 18px 48px -20px rgba(17,80,163,.30);
  --shadow-sm:0 8px 24px -12px rgba(17,80,163,.20);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3,h4{font-family:'Fredoka',sans-serif;font-weight:600;line-height:1.06;letter-spacing:-.01em;color:var(--blue)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:'Fredoka';font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--teal-deep);margin-bottom:14px}
.section{padding:92px 0;position:relative;overflow:hidden}
.lead{font-size:1.12rem;color:var(--muted);max-width:62ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Fredoka';font-weight:600;font-size:1rem;padding:15px 28px;border-radius:999px;cursor:pointer;border:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .18s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-book{background:var(--coral);color:#fff;box-shadow:0 12px 26px -10px rgba(252,118,96,.85)}
.btn-book:hover{transform:translateY(-2px);box-shadow:0 16px 30px -8px rgba(252,118,96,.95)}
.btn-call{background:var(--blue);color:#fff;box-shadow:0 12px 26px -10px rgba(17,80,163,.7)}
.btn-call:hover{transform:translateY(-2px)}
.btn-teal{background:var(--teal);color:var(--blue-deep);box-shadow:0 12px 26px -10px rgba(97,206,222,.8)}
.btn-teal:hover{transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{transform:translateY(-2px)}

/* icon chips */
.ic{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.ic svg{width:30px;height:30px}
.ic-teal{background:var(--teal-soft)} .ic-coral{background:var(--coral-soft)} .ic-blue{background:#E7EFFB}

/* nav (over LIGHT hero: dark text) */
header.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s,padding .3s;padding:16px 0}
header.nav.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 6px 24px -16px rgba(17,80,163,.4);padding:9px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-logo{height:38px;transition:height .3s;display:block}
header.nav.scrolled .nav-logo{height:36px}
.nav-logo-scrolled{display:none}
header.nav.scrolled .nav-logo-hero{display:none}
header.nav.scrolled .nav-logo-scrolled{display:block}
.nav-links{display:flex;align-items:center;gap:22px;font-family:'Fredoka';font-weight:500;flex-shrink:0}
.nav-links a{color:var(--blue-ink);transition:color .2s;font-size:.98rem;white-space:nowrap}
.nav-links a:hover{color:var(--coral)}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-cta .btn{padding:11px 22px;font-size:.95rem}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.hamburger span{width:26px;height:3px;border-radius:3px;background:var(--blue);transition:.3s}
.mobile-menu{display:none}

/* hero (LIGHT turquoise -> white) */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;background:linear-gradient(165deg,#6CCDDD 0%,#A9E3EC 38%,#F3FCFD 100%);padding-top:92px}
.hero-balls{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-ball{position:absolute;border-radius:50%;box-shadow:0 10px 20px -8px rgba(17,80,163,.3),inset -3px -5px 9px rgba(0,0,0,.10),inset 3px 4px 8px rgba(255,255,255,.5);animation:ballfloat 8s ease-in-out infinite;will-change:transform}
@keyframes ballfloat{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--dx,6px),var(--dy,-18px))}}
.reduce .hero-ball{animation:none}
.hero-glow{position:absolute;inset:0;z-index:0;background:radial-gradient(40% 50% at 85% 30%,rgba(255,255,255,.6),transparent 70%),radial-gradient(38% 46% at 12% 80%,rgba(252,118,96,.16),transparent 70%)}
.hero-clouds{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-cloud{position:absolute;background:rgba(255,255,255,.55);border-radius:100px;filter:blur(2px)}
.hero-inner{position:relative;z-index:4;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:20px;pointer-events:none}
.hero-inner .btn,.hero-inner a{pointer-events:auto}
.hero-copy{color:var(--blue-ink)}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--teal-mid);padding:8px 16px;border-radius:999px;font-family:'Fredoka';font-weight:500;font-size:.85rem;margin-bottom:22px;color:var(--blue);box-shadow:var(--shadow-sm)}
.hero-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--coral)}
.hero h1{color:var(--blue);font-size:clamp(2.5rem,5.2vw,4.4rem);font-weight:700;margin-bottom:20px;text-shadow:0 2px 20px rgba(255,255,255,.5)}
.hero h1 .g{color:var(--coral);-webkit-text-fill-color:var(--coral)}
.hero p.sub{font-size:1.2rem;color:#2f5170;max-width:34ch;margin-bottom:30px;font-weight:600}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-trust{margin-top:28px;display:flex;gap:14px 26px;flex-wrap:wrap;color:var(--blue);font-size:.9rem;font-weight:700}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}
.hero-3d-mount{position:relative;min-height:540px;z-index:4}
.hero-tooth-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:82%;max-width:400px;z-index:2;will-change:transform}
.hero-tooth{width:100%;display:block;animation:toothFloat 5.5s ease-in-out infinite;filter:drop-shadow(0 26px 30px rgba(17,80,163,.22))}
@keyframes toothFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
.reduce .hero-tooth{animation:none}
.hero-animal{position:absolute;z-index:3;animation:floaty 6s ease-in-out infinite;filter:drop-shadow(0 12px 18px rgba(17,80,163,.18))}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(var(--r,0deg))}}
.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;color:var(--blue);font-family:'Fredoka';font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.8}
.scroll-cue .m{width:24px;height:38px;border:2px solid var(--blue);border-radius:14px;position:relative;opacity:.6}
.scroll-cue .m::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:4px;height:8px;border-radius:3px;background:var(--coral);animation:mwheel 1.6s infinite}
@keyframes mwheel{0%{opacity:0;top:7px}40%{opacity:1}80%{opacity:0;top:18px}100%{opacity:0}}
.wave{display:block;width:100%;height:auto;margin-top:-1px}

/* decorative sprinkled animals */
.sprinkle{position:absolute;z-index:0;pointer-events:none;opacity:.92;animation:floaty 7s ease-in-out infinite}

/* founding */
.founding{background:linear-gradient(180deg,#fff,var(--coral-soft))}
.founding-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.founding h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:14px}
.founding .badge{display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;font-family:'Fredoka';font-weight:600;padding:8px 18px;border-radius:999px;margin-bottom:18px;font-size:.9rem}
.founding .badge svg{width:16px;height:16px}
.founding-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/2}
.founding-photo img{width:100%;height:100%;object-fit:cover}

/* sleep */
.sleep{background:radial-gradient(120% 120% at 15% 10%,#1A63B2,var(--blue) 55%,var(--blue-deep));color:#fff}
.sleep-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.sleep .eyebrow{color:var(--teal)}
.sleep h2{color:#fff;font-size:clamp(2rem,3.7vw,2.9rem);margin-bottom:16px}
.sleep p{color:#dbe9fb;font-size:1.06rem;margin-bottom:14px}
.sleep .pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.sleep .pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 16px;font-family:'Fredoka';font-weight:500;font-size:.92rem;color:#eafcff}
.sleep .pill svg{width:18px;height:18px}
.sleep-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;position:relative}
.sleep-photo img{width:100%;height:100%;object-fit:cover}
.sleep-photo .tagcard{position:absolute;bottom:16px;left:16px;right:16px;background:rgba(255,255,255,.95);border-radius:16px;padding:14px 18px;color:var(--blue-ink)}
.sleep-photo .tagcard b{font-family:'Fredoka';display:block;color:var(--blue)}
.sleep-photo .tagcard span{font-size:.9rem;color:var(--muted)}

/* welcome */
.welcome{background:#fff}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.welcome h2{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:16px}
.welcome .doc-tag{display:inline-flex;align-items:center;gap:10px;background:var(--teal-soft);color:var(--teal-deep);font-family:'Fredoka';font-weight:600;padding:8px 16px;border-radius:999px;margin-bottom:16px;font-size:.9rem}
.welcome .doc-tag svg{width:18px;height:18px}
.welcome-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.welcome-photo img{width:100%;height:100%;object-fit:cover}
.welcome-photo .badge{position:absolute;bottom:18px;left:18px;background:rgba(255,255,255,.95);padding:10px 16px;border-radius:16px;font-family:'Fredoka';font-weight:600;color:var(--blue);box-shadow:var(--shadow-sm);font-size:.92rem;display:inline-flex;align-items:center;gap:8px}
.welcome-photo .badge svg{width:16px;height:16px}

/* why */
.why{background:var(--cloud)}
.why h2{font-size:clamp(2rem,3.6vw,2.8rem);text-align:center;margin-bottom:12px}
.why .lead{margin:0 auto 50px;text-align:center}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:30px 26px;transition:transform .25s,box-shadow .25s}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.feat .ic{margin-bottom:18px}
.feat h3{font-size:1.24rem;margin-bottom:8px}
.feat p{color:var(--muted);font-size:.98rem}

/* services */
.services{background:#fff}
.svc-head{text-align:center;margin-bottom:50px}
.services h2{font-size:clamp(2rem,3.7vw,2.9rem);margin-bottom:12px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--teal);background:#fff}
.svc .ic{width:48px;height:48px;border-radius:14px;margin-bottom:16px}
.svc .ic svg{width:26px;height:26px}
.svc h3{font-size:1.14rem;margin-bottom:7px}
.svc p{color:var(--muted);font-size:.93rem}

/* ages */
.ages{background:var(--teal-soft)}
.ages-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.ages h2{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:12px}
.ages .lead{margin-bottom:22px}
.ages-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/4;max-height:520px}
.ages-photo img{width:100%;height:100%;object-fit:cover}
.age-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.age{border-radius:var(--r-md);padding:22px 22px 22px;position:relative;overflow:hidden;transition:transform .25s;background:#fff;border:1px solid var(--line);min-height:196px;display:flex;flex-direction:column;justify-content:flex-end}
.age:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.age-animal{position:absolute;top:14px;right:14px;width:66px;height:66px;object-fit:contain}
.age .yrs{font-family:'Fredoka';font-weight:600;font-size:.8rem;color:var(--teal-deep);margin-bottom:4px}
.age h3{font-size:1.2rem;margin-bottom:6px}
.age p{font-size:.9rem;color:var(--muted)}
.age .bar{position:absolute;top:0;left:0;right:0;height:6px}

/* steps / first visit */
.steps{background:#fff}
.fv-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.fv-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.fv-photo img{width:100%;height:100%;object-fit:cover}
.steps h2{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:12px}
.steps .lead{margin-bottom:28px}
.step-list{display:grid;gap:16px}
.step{display:flex;gap:18px;align-items:flex-start}
.step .num{flex:none;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:700;font-size:1.4rem;color:#fff;box-shadow:var(--shadow-sm)}
.step h3{font-size:1.14rem;margin-bottom:2px}
.step p{color:var(--muted);font-size:.95rem}

/* comfort */
.comfort{background:var(--cloud)}
.comfort-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.comfort h2{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:16px}
.comfort ul{list-style:none;margin-top:20px;display:grid;gap:13px}
.comfort li{display:flex;gap:14px;align-items:flex-start;font-size:1.01rem}
.comfort li .ck{flex:none;width:28px;height:28px;border-radius:50%;background:var(--teal);color:var(--blue-deep);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;margin-top:2px}
.comfort-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/2}
.comfort-photo img{width:100%;height:100%;object-fit:cover}

/* team / doctor */
.team{background:#fff}
.team h2{font-size:clamp(2rem,3.6vw,2.8rem);text-align:center;margin-bottom:12px}
.team .lead{text-align:center;margin:0 auto 44px}
.team-photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);margin-bottom:40px}
.team-photo img{width:100%}
.doc-card{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:center;background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px}
.doc-portrait{width:250px;aspect-ratio:3/4;border-radius:24px;overflow:hidden;position:relative;background:#fff;border:6px solid var(--coral);box-shadow:0 14px 30px -14px rgba(252,118,96,.5)}
.doc-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 8%}
.doc-card h3{font-size:1.7rem;margin-bottom:4px}
.doc-card .role{font-family:'Fredoka';color:var(--teal-deep);font-weight:600;margin-bottom:14px}
.doc-card p{color:var(--muted);margin-bottom:10px}
.doc-note{font-size:.85rem;color:var(--muted);font-style:italic;background:#FFF7E6;border-left:3px solid #F5A623;padding:8px 12px;border-radius:8px;margin-top:8px}

/* faq */
.faq{background:var(--cloud)}
.faq h2{font-size:clamp(2rem,3.6vw,2.8rem);text-align:center;margin-bottom:12px}
.faq .lead{text-align:center;margin:0 auto 44px}
.faq-wrap{max-width:800px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:4px 22px;margin-bottom:14px;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;font-family:'Fredoka';font-weight:500;font-size:1.1rem;color:var(--blue);padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;color:var(--teal-deep);transition:transform .25s;font-weight:400}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 18px;font-size:1rem}

/* contact */
.contact{background:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact h2{font-size:clamp(2rem,3.7vw,2.9rem);margin-bottom:14px}
.info-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.info-row .ic{flex:none;width:48px;height:48px;border-radius:14px;background:var(--teal-soft)}
.info-row .ic svg{width:22px;height:22px;color:var(--blue)}
.info-row h4{font-size:1.05rem;margin-bottom:2px}
.info-row p,.info-row a{color:var(--muted);font-size:1rem}
.info-row a:hover{color:var(--coral)}
.areas{background:var(--teal-soft);border-radius:16px;padding:18px 20px;margin-top:6px}
.areas b{font-family:'Fredoka';color:var(--blue);display:block;margin-bottom:6px}
.areas span{color:var(--muted)}
.map{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);margin-top:22px;height:220px;border:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0}
.form-card{background:var(--cloud);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px}
.form-card h3{font-size:1.5rem;margin-bottom:6px}
.form-card .fsub{color:var(--muted);margin-bottom:22px;font-size:.96rem}
.field{margin-bottom:16px}
.field label{display:block;font-family:'Fredoka';font-weight:500;font-size:.9rem;margin-bottom:6px;color:var(--blue)}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-family:'Nunito';font-size:1rem;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(97,206,222,.25)}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-card .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:12px}

/* footer */
footer{background:var(--blue-deep);color:#c4d6ee;padding:60px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:36px}
.foot-logo{height:60px;margin-bottom:16px}
footer h4{color:#fff;font-family:'Fredoka';font-size:1.05rem;margin-bottom:16px}
footer a{color:#a9bfe0;display:block;margin-bottom:9px;transition:color .2s}
footer a:hover{color:var(--teal)}
footer p{color:#93aace;font-size:.95rem;max-width:36ch}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem;color:#8298bd}

.js .reveal{opacity:0;transform:translateY(30px)}
.reduce .reveal{opacity:1!important;transform:none!important}
.reduce .hero-animal,.reduce .sprinkle{animation:none!important}

@media(max-width:920px){
  .nav-links,.nav-cta .btn-book{display:none}
  .hamburger{display:flex}
  .hero-inner,.sleep-grid,.welcome-grid,.comfort-grid,.contact-grid,.founding-grid,.ages-grid,.fv-grid{grid-template-columns:1fr;gap:34px}
  .hero-inner{text-align:center;gap:0}
  .hero-3d-mount{min-height:340px;order:-1}
  .hero p.sub,.hero-pill{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-trust{justify-content:center}
  .why-grid,.svc-grid{grid-template-columns:1fr 1fr}
  .doc-card{grid-template-columns:1fr;text-align:center;justify-items:center}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .sprinkle{display:none}
  .mobile-menu.open{display:block;position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:#fff;z-index:60;box-shadow:-10px 0 40px -20px rgba(0,0,0,.4);padding:80px 30px 30px}
  .mobile-menu a{display:block;font-family:'Fredoka';font-weight:500;font-size:1.15rem;padding:14px 0;border-bottom:1px solid var(--line);color:var(--blue)}
  .mobile-menu .btn{width:100%;justify-content:center;margin-top:18px}
  .mm-close{position:absolute;top:24px;right:26px;font-size:2rem;background:none;border:0;color:var(--blue);cursor:pointer;line-height:1}
  .mm-backdrop.open{display:block;position:fixed;inset:0;background:rgba(17,80,163,.5);z-index:55}
}
@media(max-width:560px){
  .section{padding:66px 0}
  .why-grid,.svc-grid,.age-cards{grid-template-columns:1fr}
  .field.two{grid-template-columns:1fr}
}


/* ==========================================================================
   Waterdown Kids Dentistry - inner page components
   Extends the home page design system. Uses the same tokens, radii, shadows
   and type scale, so inner pages read as the same site rather than a bolt-on.
   ========================================================================== */

/* ---------- compact page hero ---------- */
.page-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#6CCDDD 0%,#A9E3EC 45%,#F3FCFD 100%);
  padding:150px 0 76px;
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{
  font-size:clamp(2.1rem,4.4vw,3.5rem);color:var(--blue-deep);
  max-width:19ch;margin-bottom:16px;
}
.page-hero .lead{font-size:1.14rem;color:#2A5680;max-width:60ch}
.page-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

.breadcrumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:'Fredoka';font-weight:500;font-size:.82rem;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--teal-deep);margin-bottom:16px;
}
.breadcrumb a{color:var(--blue);opacity:.75}
.breadcrumb a:hover{opacity:1}
.breadcrumb span{opacity:.5}

/* ---------- inner page sections ---------- */
.pg-sec{position:relative;overflow:hidden;padding:78px 0}
.pg-sec > .wrap{position:relative;z-index:2;max-width:1080px}
.pg-sec.wide > .wrap{max-width:var(--maxw)}
.pg-sec.bg-cloud{background:var(--cloud)}
.pg-sec.bg-teal{background:var(--teal-soft)}
.pg-sec + .pg-sec{padding-top:74px}
.sec-head{max-width:74ch;margin-bottom:30px}
.pg-sec h2{
  font-size:clamp(1.55rem,2.7vw,2.2rem);color:var(--blue);
  line-height:1.15;margin-bottom:16px;
}
.pg-sec p{color:var(--muted);font-size:1.045rem;line-height:1.72;margin-bottom:16px;max-width:74ch}
.pg-sec p:last-child{margin-bottom:0}
.pg-sec strong{color:var(--ink);font-weight:700}
.pg-sec a:not(.btn):not(.rel-card){
  color:var(--teal-deep);font-weight:600;
  border-bottom:2px solid var(--teal-mid);
  transition:border-color .18s,color .18s;
}
.pg-sec a:not(.btn):not(.rel-card):hover{color:var(--blue);border-bottom-color:var(--blue)}

/* photo + text split, mirrors the home page welcome/sleep sections */
.split-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.split-grid.flip .split-photo{order:-1}
.split-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.split-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* checklist, for symptom and procedural lists */
.checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 30px}
.checklist li{display:flex;gap:13px;align-items:flex-start;color:var(--muted);line-height:1.62;font-size:1.02rem}
.checklist svg{width:21px;height:21px;flex:none;margin-top:2px}

/* numbered steps */
.step-list{display:grid;gap:18px;max-width:860px}
.step-list .step{
  display:flex;gap:20px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);padding:24px 26px;
}
.step-n{
  flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--teal);color:var(--blue-deep);
  font-family:'Fredoka';font-weight:600;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
}
.step-list h3{font-family:'Fredoka';font-weight:600;color:var(--blue);font-size:1.1rem;margin-bottom:6px}
.step-list p{margin:0}

/* navy emphasis band */
.pg-sec.band-navy{
  background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);
  padding:74px 0;
}
.pg-sec.band-navy h2{color:#fff}
.pg-sec.band-navy p{color:rgba(255,255,255,.88)}
.pg-sec.band-navy a:not(.btn){color:var(--teal);border-bottom-color:rgba(97,206,222,.5)}
.pg-sec.band-navy a:not(.btn):hover{color:#fff;border-bottom-color:#fff}
.band-inner{max-width:78ch}

/* contact detail rows */
.kv-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:620px}
.kv-list li{
  display:flex;gap:16px;align-items:center;
  padding:18px 22px;background:#fff;
  border-radius:var(--r-sm);border:1px solid var(--line);
}
.kv-list .ic{width:44px;height:44px;border-radius:13px;flex:none}
.kv-list .ic svg{width:20px;height:20px}
.kv-list .k{display:block;font-family:'Fredoka';font-weight:600;color:var(--teal-deep);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.kv-list .v{display:block;color:var(--ink);font-weight:700;font-size:1.02rem}

/* ---------- FAQ on inner pages ---------- */
/* the home page scopes these to .faq, so mirror the selectors here */
.page-faq{background:var(--cloud)}
.page-faq .faq-wrap{max-width:820px;margin:0 auto}
.page-faq details,
.pg-sec details{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:4px 22px;margin-bottom:14px;transition:box-shadow .2s;
}
.page-faq details[open],
.pg-sec details[open]{box-shadow:var(--shadow-sm)}
.page-faq summary,
.pg-sec summary{
  list-style:none;cursor:pointer;font-family:'Fredoka';font-weight:500;
  font-size:1.1rem;color:var(--blue);padding:16px 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.page-faq summary::-webkit-details-marker,
.pg-sec summary::-webkit-details-marker{display:none}
.page-faq summary::after,
.pg-sec summary::after{
  content:"+";font-size:1.6rem;color:var(--teal-deep);
  transition:transform .25s;font-weight:400;flex:none;
}
.page-faq details[open] summary::after,
.pg-sec details[open] summary::after{transform:rotate(45deg)}
.page-faq details p,
.pg-sec details p{
  margin:0 0 18px;color:var(--muted);line-height:1.72;font-size:1.02rem;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(150deg,var(--blue) 0%,var(--blue-deep) 100%);
  color:#fff;text-align:center;padding:78px 0;position:relative;overflow:hidden;
}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:14px;max-width:22ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.86);max-width:52ch;margin:0 auto 30px;font-size:1.06rem}
.cta-band .hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- related pages ---------- */
.related{background:#fff;padding:80px 0}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rel-card{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:26px 24px;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .2s;
}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--teal-mid)}
.rel-card h3{
  font-family:'Fredoka';font-weight:600;color:var(--blue);
  font-size:1.1rem;margin-bottom:8px;line-height:1.25;
}
.rel-card p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0}
.rel-card .go{
  display:inline-block;margin-top:14px;color:var(--teal-deep);
  font-family:'Fredoka';font-weight:600;font-size:.92rem;
}

/* ---------- services index ---------- */
.svc-index{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}

/* ---------- footer sitemap ---------- */
.foot-grid.sitemap{grid-template-columns:1.6fr 1fr 1fr 1fr}
footer .foot-col h4{
  font-family:'Fredoka';font-weight:600;color:#fff;
  font-size:.95rem;margin-bottom:14px;letter-spacing:.02em;
}
footer .foot-col ul{list-style:none;padding:0;margin:0}
footer .foot-col li{margin-bottom:9px}
footer .foot-col a{color:rgba(255,255,255,.76);font-size:.93rem;transition:color .18s}
footer .foot-col a:hover{color:#fff}

/* ---------- nav dropdown ---------- */
.has-sub{position:relative}
.nav-sub{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border-radius:var(--r-sm);box-shadow:0 20px 48px -18px rgba(17,80,163,.42);
  padding:12px;min-width:290px;opacity:0;visibility:hidden;
  transition:opacity .2s,visibility .2s,transform .2s;z-index:70;
  border:1px solid var(--line);
}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav-sub a{
  display:block;padding:10px 14px;border-radius:10px;
  color:var(--blue)!important;font-size:.94rem;font-weight:500;
  transition:background .15s;
}
.nav-sub a:hover{background:var(--teal-soft)}

/* ---------- current page marker ---------- */
.nav-links a.current{color:var(--teal-deep)!important}
.mobile-menu a.current{color:var(--teal-deep)}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .page-hero{padding:126px 0 58px}
  .related-grid,.svc-index{grid-template-columns:repeat(2,1fr)}
  .foot-grid.sitemap{grid-template-columns:1fr 1fr;gap:34px}
  .page-body{padding:64px 0}
  .page-body h2{margin-top:44px}
}
@media(max-width:560px){
  .page-hero{padding:112px 0 48px}
  .related-grid,.svc-index{grid-template-columns:1fr}
  .foot-grid.sitemap{grid-template-columns:1fr}
  .kv-list .k{min-width:100%}
  .page-body{padding:52px 0}
}

/* ==========================================================================
   Mobile menu corrections
   The client stylesheet styles every anchor in the drawer with
   `.mobile-menu a { display:block; border-bottom; color:var(--blue) }`.
   That selector (0,1,1) outranks `.btn-book` / `.btn-call` (0,1,0), so the
   two action buttons lost their white label, their pill padding and their
   flex centring, and picked up a stray divider line. These rules restore
   them without touching the client CSS, which is passed through verbatim.
   The drawer also now carries the full navigation including nine service
   links, so it has to scroll.
   ========================================================================== */
@media(max-width:920px){
  .mobile-menu.open{
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:flex;flex-direction:column;
    padding:76px 26px 34px;
  }
  .mobile-menu .mm-links{display:block}
  .mobile-menu a:not(.btn){
    display:block;padding:12px 0;font-size:1.06rem;
    border-bottom:1px solid var(--line);color:var(--blue);
  }
  .mobile-menu a.btn{
    display:inline-flex;align-items:center;justify-content:center;
    border-bottom:0;padding:15px 28px;width:100%;margin-top:14px;
    font-size:1rem;
  }
  .mobile-menu a.btn-book,
  .mobile-menu a.btn-call{color:#fff}
  .mobile-menu a.btn-white{color:var(--blue)}
  .mobile-menu a.btn-teal{color:var(--blue-deep)}
  .mobile-menu a.btn:last-child{margin-bottom:8px}

  /* the drawer holds a lot more now, so tighten the sub-items */
  .mobile-menu .mm-links a[style]{
    font-size:.97rem!important;color:var(--muted);
    padding-top:9px!important;padding-bottom:9px!important;
  }

}

/* backdrop base state, outside the query: the client CSS only defines .open */
.mm-backdrop{display:none}

/* in-body Q&A accordions, matching the site-wide FAQ component */
.page-body details{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:4px 22px;margin-bottom:14px;transition:box-shadow .2s;
}
.page-body details[open]{box-shadow:var(--shadow-sm)}
.page-body summary{
  list-style:none;cursor:pointer;font-family:'Fredoka';font-weight:500;
  font-size:1.06rem;color:var(--blue);padding:16px 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.page-body summary::-webkit-details-marker{display:none}
.page-body summary::after{
  content:"+";font-size:1.6rem;color:var(--teal-deep);
  transition:transform .25s;font-weight:400;flex:none;
}
.page-body details[open] summary::after{transform:rotate(45deg)}
.page-body details p{margin:0 0 18px}

/* footer credit */
footer .credit{font-size:.86rem;color:rgba(255,255,255,.62)}
footer .credit a{color:rgba(255,255,255,.9);font-weight:600;border-bottom:1px solid rgba(255,255,255,.35)}
footer .credit a:hover{color:#fff;border-bottom-color:#fff}

@media(max-width:920px){
  .split-grid{grid-template-columns:1fr;gap:32px}
  .split-grid.flip .split-photo{order:0}
  .checklist{grid-template-columns:1fr}
  .pg-sec{padding:56px 0}
  .pg-sec + .pg-sec{padding-top:54px}
}
@media(max-width:560px){
  .pg-sec{padding:46px 0}
  .step-list .step{padding:20px;gap:15px}
  .step-n{width:36px;height:36px;font-size:1rem}
  .kv-list li{padding:15px 17px;gap:13px}
}

/* The client scopes its photo badge as `.welcome-photo .badge`, so the inner
   page split needs its own rule or the badge renders as a full-width block
   with an unsized icon. */
.split-photo .badge{
  position:absolute;bottom:18px;left:18px;
  background:rgba(255,255,255,.95);padding:10px 16px;border-radius:16px;
  font-family:'Fredoka';font-weight:600;color:var(--blue);
  box-shadow:var(--shadow-sm);font-size:.92rem;
  display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 36px);
}
.split-photo .badge svg{width:16px;height:16px;flex:none}

/* body-level accordions sit inside a section, so give the stack a max width */
.pg-sec .faq-wrap{max-width:860px}