/* BELLAMY DENTAL: THE CHILDREN'S SIDE
   Desktop values are the design's own (sized in vw, so the page scales with the window).
   Below 1024px a tablet pass gives the small type a floor; below 760px the phone pass stacks the grids,
   folds the nav into a menu and resizes the display type. Accent: #2F5BEA. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
body{margin:0;background:#FFF7EE;font-family:'Nunito','Trebuchet MS',sans-serif;color:#172A4F;-webkit-font-smoothing:antialiased}
a{color:#172A4F}a:hover{color:#172A4F}
::selection{background:#BDEBDC}
.fred{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600}
.bl-link{text-decoration:none;transition:opacity .3s ease}
.bl-link:hover{opacity:.55}
.bl-btn{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.bl-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 30px -12px rgba(23,42,79,.45)}
.bl-card{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.bl-card:hover{transform:translateY(-.6vw) rotate(-.6deg)}
.bl-twinkle{animation:bl-twinkle 3.2s ease-in-out infinite}
.bl-float{animation:bl-float 9s ease-in-out infinite}
.bl-marquee{animation:bl-marquee 26s linear infinite}
.bl-letter{display:inline-block;animation:bl-bob 4.9s ease-in-out infinite;will-change:transform}
.bl-drift{animation:bl-drift 7s ease-in-out infinite}
.bl-word{display:inline-block;animation:bl-bobs 5.6s ease-in-out infinite}
.w{display:inline-block}
[data-reveal]{will-change:translate,opacity}
.bl-crumb{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:35%;opacity:0;pointer-events:none;z-index:3;will-change:transform;background:#2F5BEA}
@keyframes bl-bob{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-0.7vw) rotate(-1.6deg)}75%{transform:translateY(0.45vw) rotate(1.2deg)}}
@keyframes bl-bobs{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-0.35vw) rotate(-0.9deg)}70%{transform:translateY(0.22vw) rotate(0.7deg)}}
@keyframes bl-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.8vw)}}
@keyframes bl-twinkle{0%,100%{transform:scale(.65) rotate(0deg);opacity:.55}50%{transform:scale(1.08) rotate(25deg);opacity:1}}
@keyframes bl-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-1.4vw) rotate(4deg)}}
@keyframes bl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

#bl-root{position:relative;width:100%;min-height:100vh;background:#FFF7EE;color:#172A4F;overflow-x:clip}
@supports not (overflow-x:clip){#bl-root{overflow-x:visible}body{overflow-x:hidden}}

/* ===== 1. OPENER ===== */
#bl-hero{position:relative;height:230vh}
#bl-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column}
.bl-nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:2vw 4vw}
.bl-logo{display:flex;align-items:center;gap:.8vw;text-decoration:none;color:#172A4F}
.bl-logo svg{width:3vw;height:3vw;min-width:36px;min-height:36px}
.bl-logo-words{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.bl-logo-name{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:clamp(20px,1.8vw,72px);letter-spacing:-.01em}
.bl-logo-sub{font-weight:800;font-size:clamp(9px,.62vw,24px);letter-spacing:.34em;margin-top:.3vw;color:#2F5BEA}
.bl-nav-links{display:flex;gap:2.8vw;font-weight:700;font-size:clamp(14px,1.02vw,40px)}
.bl-nav-cta{display:flex;align-items:center;min-height:44px;padding:.95vw 1.9vw;border-radius:999px;background:#2F5BEA;color:#FFF7EE !important;font-weight:800;font-size:clamp(14px,1vw,40px);text-decoration:none;white-space:nowrap}
.bl-menu-btn,.bl-nav-links .bl-menu-book{display:none}

.bl-hero-mid{position:relative;flex-grow:1;display:flex;align-items:center;justify-content:center}
.bl-reveal-wrap{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}
#bl-reveal{display:inline-block;text-align:center;clip-path:inset(0 100% 0 0)}
.bl-reveal-label{margin:0 0 1.6vw;font-weight:800;letter-spacing:.34em;font-size:clamp(11px,.95vw,36px);color:#2F5BEA}
.bl-reveal-head{margin:0;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:7.6vw;line-height:.98;letter-spacing:-.025em;color:#172A4F}
#bl-name{position:relative;z-index:2;display:inline-block;margin:0;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:20vw;line-height:1;letter-spacing:-.03em;white-space:nowrap;color:#2F5BEA}
.bl-hero-foot{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;padding:0 4vw 2.4vw}
.bl-hero-desc{margin:0;max-width:22vw;font-weight:700;font-size:clamp(13px,1.02vw,40px);line-height:1.45;color:#4A5873}
#bl-toy{position:absolute;left:0;top:0;width:37vw;height:33.3vw;z-index:4;pointer-events:none;transform-origin:50% 97%;will-change:transform;transform:translate(-80vw,20vh)}

/* hero decorations */
.bl-h-mint{position:absolute;width:36vw;height:36vw;right:-9vw;top:-17vw;border-radius:50%;background:#BDEBDC}
.bl-h-pink{position:absolute;width:21vw;height:19vw;left:-5vw;bottom:-5vw;border-radius:46% 54% 60% 40% / 50% 45% 55% 50%;background:#FFD3DD}
.bl-h-butter{position:absolute;width:7vw;height:7vw;left:22vw;top:2vw;border-radius:50%;background:#FFE7A3;animation-delay:-3s}
.bl-h-ring{position:absolute;width:4vw;height:4vw;right:18vw;bottom:4vw;border-radius:50%;border:.35vw solid #2F5BEA}
.bl-h-s1{position:absolute;width:3.2vw;height:3.2vw;left:9vw;top:5vw}
.bl-h-s2{position:absolute;width:2.2vw;height:2.2vw;right:12vw;top:7vw;animation-delay:-1.2s}
.bl-h-s3{position:absolute;width:2.6vw;height:2.6vw;left:30vw;bottom:5vw;animation-delay:-2.1s}

/* ===== 2. ABOUT ===== */
#about{position:relative;padding:11vw 12vw 8vw}
.bl-pill{position:relative;display:inline-flex;align-items:center;gap:.6vw;padding:.6vw 1.3vw;border-radius:999px;background:#FFE7A3;font-weight:800;letter-spacing:.2em;font-size:clamp(11px,.82vw,32px)}
.bl-about-h{position:relative;margin:2vw 0 0;max-width:66vw;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:5.8vw;line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
.bl-about-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6vw;margin-top:5vw;align-items:start}
.bl-about-p{margin:0;font-size:clamp(16px,1.4vw,56px);line-height:1.6;color:#4A5873;text-wrap:pretty}
.bl-tags{display:flex;flex-wrap:wrap;gap:.9vw}
.bl-tag{padding:.8vw 1.5vw;border:2px solid #172A4F;border-radius:999px;font-weight:800;font-size:clamp(13px,1.05vw,42px)}

/* ===== 3. SERVICES ===== */
#services{position:relative;padding:5vw 12vw 10vw}
.bl-svc-head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:4vw}
.bl-eyebrow{margin:0;font-weight:800;letter-spacing:.3em;font-size:clamp(11px,.85vw,34px);color:#2F5BEA}
.bl-svc-h{margin:1.2vw 0 0;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:5vw;line-height:1.04;letter-spacing:-.025em}
.bl-svc-intro{margin:0;max-width:24vw;font-size:clamp(15px,1.2vw,48px);line-height:1.55;color:#4A5873}
.bl-cards{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6vw;margin-top:4vw}
.bl-card{display:flex;flex-direction:column;justify-content:space-between;gap:4vw;min-height:18vw;padding:2.4vw;border-radius:2.2vw}
.bl-card-icon{display:flex;align-items:center;justify-content:center;width:4.6vw;height:4.6vw;border-radius:50%;background:#FFF7EE}
.bl-card-icon svg{width:50%;height:50%}
.bl-card h3{margin:0 0 .8vw;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:2.1vw;letter-spacing:-.01em}
.bl-card p{margin:0;font-size:clamp(14px,1.12vw,44px);line-height:1.55;color:#34425E}

/* ===== 4. FIRST VISIT ===== */
#visit{position:relative;padding:9vw 12vw 12vw;border-radius:4vw 4vw 0 0;background:#172A4F;color:#FFF7EE}
#visit .bl-eyebrow{position:relative;color:#BDEBDC}
.bl-visit-h{position:relative;margin:1.2vw 0 0;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:5.8vw;line-height:1.04;letter-spacing:-.028em}
.bl-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4vw;margin-top:5vw}
.bl-step{padding-top:2vw;border-top:2px solid rgba(255,247,238,.25)}
.bl-step .bl-step-num{margin:0;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:8vw;line-height:.9}
.bl-step h3{margin:2vw 0 .8vw;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:2.2vw}
.bl-step p{margin:0;font-size:clamp(14px,1.15vw,46px);line-height:1.6;color:rgba(255,247,238,.78)}

/* ===== 5. TIPS MARQUEE ===== */
.bl-tips{position:relative;z-index:3;margin:-3.5vw -3vw 0;padding:2.2vw 0;overflow:hidden;background:#FFE7A3;transform:rotate(-2deg)}
.bl-tips-track{display:flex;width:max-content}
.bl-tips-set{display:flex;align-items:center;gap:3vw;padding-right:3vw;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:4.2vw;line-height:1;white-space:nowrap;color:#2F5BEA}
.bl-tips-set svg{width:2.4vw;height:2.4vw}

/* ===== 6. BOOK ===== */
#book{position:relative;padding:13vw 12vw 10vw;text-align:center}
#book .bl-eyebrow{position:relative}
.bl-book-h{position:relative;margin:1.6vw 0 0;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:8.4vw;line-height:1;letter-spacing:-.035em}
.bl-book-p{position:relative;margin:2.4vw auto 0;max-width:40vw;font-size:clamp(16px,1.35vw,54px);line-height:1.6;color:#4A5873}
.bl-book-btns{position:relative;display:flex;justify-content:center;gap:1vw;margin-top:3vw}
.bl-book-btn{display:flex;align-items:center;min-height:44px;padding:1.3vw 2.6vw;border-radius:999px;font-weight:800;font-size:clamp(15px,1.2vw,48px);text-decoration:none}
.bl-book-btn.is-solid{background:#2F5BEA;color:#FFF7EE}
.bl-book-btn.is-line{border:2px solid #172A4F;color:#172A4F}

/* ===== 7. FOOTER ===== */
.bl-footer{padding:4.5vw 12vw 3vw;background:#172A4F;color:#FFF7EE}
.bl-foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3vw;align-items:start}
.bl-foot-logo{display:flex;align-items:center;gap:.8vw}
.bl-foot-logo svg{width:3vw;height:3vw;min-width:36px;min-height:36px}
.bl-foot-logo .bl-logo-sub{color:#BDEBDC}
.bl-foot-col{font-size:clamp(14px,1.05vw,42px);line-height:1.6}
.bl-foot-col a{color:#FFF7EE}
.bl-foot-label{margin:0 0 .4vw;font-weight:800;letter-spacing:.2em;font-size:clamp(10px,.72vw,28px);color:#BDEBDC}
.bl-foot-bar{display:flex;justify-content:space-between;margin-top:4vw;padding-top:1.6vw;border-top:1px solid rgba(255,247,238,.2);font-size:clamp(12px,.85vw,34px);color:rgba(255,247,238,.72)}

/* ===== TABLET: give the vw-sized small type a floor, two-up cards ===== */
@media (max-width:1024px){
  .bl-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .bl-card{gap:max(4vw,28px);padding:max(2.4vw,24px);border-radius:max(2.2vw,24px)}
  .bl-card-icon{width:max(4.6vw,52px);height:max(4.6vw,52px)}
  .bl-card h3{font-size:max(2.1vw,22px);margin-bottom:8px}
  .bl-card p,.bl-step p,.bl-foot-col{font-size:16px}
  .bl-step h3{font-size:max(2.2vw,22px)}
  .bl-svc-intro{max-width:34vw;font-size:16px}
  .bl-hero-desc{max-width:30vw;font-size:15px}
  .bl-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .bl-foot-bar{font-size:14px}
  /* bigger hit areas for touch, same look */
  .bl-nav-links a{padding:13px 0;margin:-13px 0}
  .bl-logo{min-height:44px}
  .bl-foot-col a{display:inline-block;padding:11px 0;margin:-11px 0}
}

/* ===== PHONE ===== */
@media (max-width:760px){
  /* nav: logo, book button and a menu toggle; the links fold into a panel */
  .bl-nav{padding:14px 16px;gap:10px}
  .bl-logo{gap:8px;min-height:44px}
  .bl-logo-sub{margin-top:3px}
  .bl-nav-cta{margin-left:auto;padding:0 18px;font-size:16px}
  .bl-menu-btn{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:2px solid #172A4F;border-radius:50%;background:transparent;color:#172A4F;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .bl-menu-btn svg{width:18px;height:18px}
  .bl-menu-btn .m-x{display:none}
  .bl-nav.is-open .bl-menu-btn{background:#172A4F;color:#FFF7EE}
  .bl-nav.is-open .bl-menu-btn .m-bars{display:none}
  .bl-nav.is-open .bl-menu-btn .m-x{display:block}
  .bl-nav-links{position:absolute;top:calc(100% - 2px);left:16px;right:16px;flex-direction:column;gap:0;padding:8px;background:#FFF7EE;border-radius:24px;box-shadow:0 24px 50px -20px rgba(23,42,79,.5),0 0 0 2px rgba(23,42,79,.08);font-size:18px;opacity:0;visibility:hidden;translate:0 -8px;transition:opacity .22s ease,translate .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}
  .bl-nav.is-open .bl-nav-links{opacity:1;visibility:visible;translate:0 0;transition:opacity .22s ease,translate .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .bl-nav-links a{display:flex;align-items:center;min-height:52px;margin:0;padding:0 16px;border-radius:16px;text-decoration:none}
  .bl-nav-links a:not(.bl-menu-book)+a{border-top:1px solid rgba(23,42,79,.08)}
  .bl-nav-links a:active{background:rgba(189,235,220,.5)}

  /* opener: bigger hidden line, readable description, decorations scaled for a tall screen */
  #bl-stage{height:100vh;height:100svh}
  .bl-reveal-label{font-size:13px;margin-bottom:14px}
  .bl-reveal-head{font-size:10.6vw}
  #bl-name{font-size:26vw}
  .bl-hero-foot{padding:0 22px 30px}
  .bl-hero-desc{max-width:none;font-size:17px}
  .bl-h-mint{width:62vw;height:62vw;right:-20vw;top:-22vw}
  .bl-h-pink{width:44vw;height:40vw;left:-12vw;bottom:-6vw}
  .bl-h-butter{width:15vw;height:15vw;left:10vw;top:16%}
  .bl-h-ring{width:10vw;height:10vw;right:13vw;bottom:24%;border-width:3px}
  .bl-h-s1{width:8vw;height:8vw;left:12vw;top:30%}
  .bl-h-s2{width:6vw;height:6vw;right:10vw;top:34%}
  .bl-h-s3{width:6.5vw;height:6.5vw;left:auto;right:36vw;bottom:20%}

  #about{padding:72px 22px 56px}
  .bl-pill{gap:8px;padding:8px 14px;font-size:12px}
  .bl-about-h{margin-top:18px;max-width:none;font-size:clamp(34px,9.6vw,46px);line-height:1.1}
  .bl-about-grid{grid-template-columns:1fr;gap:28px;margin-top:28px}
  .bl-about-p{font-size:17px}
  .bl-tags{gap:10px}
  .bl-tag{padding:9px 16px;font-size:16px}

  #services{padding:40px 22px 80px}
  .bl-svc-head{flex-direction:column;align-items:flex-start;gap:16px}
  .bl-eyebrow{font-size:12px}
  .bl-svc-h{margin-top:10px;font-size:clamp(36px,10vw,48px)}
  .bl-svc-intro{max-width:none;font-size:17px}
  .bl-cards{grid-template-columns:1fr;gap:14px;margin-top:32px}
  .bl-card{gap:28px;min-height:0;padding:24px;border-radius:26px}
  .bl-card-icon{width:56px;height:56px}
  .bl-card h3{font-size:25px;margin-bottom:6px}
  .bl-card p{font-size:16px}

  #visit{padding:72px 22px 104px;border-radius:30px 30px 0 0}
  .bl-visit-h{margin-top:10px;font-size:clamp(38px,10.4vw,50px)}
  .bl-steps{grid-template-columns:1fr;gap:36px;margin-top:40px}
  .bl-step{padding-top:20px}
  .bl-step .bl-step-num{font-size:72px}
  .bl-step h3{margin:14px 0 6px;font-size:25px}
  .bl-step p{font-size:16px}

  .bl-tips{margin:-26px -20px 0;padding:16px 0}
  .bl-tips-set{gap:20px;padding-right:20px;font-size:30px}
  .bl-tips-set svg{width:18px;height:18px}

  #book{padding:100px 22px 84px}
  .bl-book-h{margin-top:12px;font-size:clamp(44px,12.4vw,60px);line-height:1.02}
  .bl-book-p{margin-top:18px;max-width:none;font-size:17px}
  .bl-book-btns{flex-direction:column;align-items:center;gap:12px;margin-top:30px}
  .bl-book-btn{justify-content:center;width:100%;max-width:340px;min-height:54px;padding:0 24px;font-size:17px}

  .bl-footer{padding:52px 22px 30px}
  .bl-foot-grid{grid-template-columns:1fr;gap:26px}
  .bl-foot-logo{gap:8px}
  .bl-foot-col{font-size:16px}
  .bl-foot-label{margin-bottom:4px;font-size:12px}
  .bl-foot-col a{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0}
  .bl-foot-bar{flex-wrap:wrap;gap:6px 18px;margin-top:30px;padding-top:16px;font-size:14px}
}
@media (max-width:359px){
  .bl-nav-cta{display:none}
  .bl-menu-btn{margin-left:auto}
  .bl-nav-links .bl-menu-book{display:flex;justify-content:center;margin-top:6px;background:#2F5BEA;color:#FFF7EE;font-weight:800;border-radius:999px}
}

/* Reduced motion: no smooth scroll, nothing loops or spins on its own, no scroll-linked drift (see script). */
@media (prefers-reduced-motion:reduce){
  .bl-twinkle,.bl-float,.bl-letter,.bl-word,.bl-drift,.bl-marquee{animation:none !important}
  .bl-nav-links{transition:none !important}
}