/* BELLAMY DENTAL: ADULTS
   The grown-up side. Navy drench: navy ground, cream type, mint as the one accent, butter sparkles as the
   brand motif. Same fonts as the children's side. The fun lives in the hero tooth, which watches the
   cursor (or your finger on a phone). Most of the layout is the design's own fluid flex/grid; the
   additions below fold the nav into a menu under 1100px and turn the three steps into a timeline. */

*,*::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:#172A4F;font-family:'Nunito','Trebuchet MS',sans-serif;color:#FFF7EE;-webkit-font-smoothing:antialiased}
a{color:#FFF7EE}a:hover{color:#FFF7EE}
::selection{background:#BDEBDC;color:#172A4F}
.fred{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif}
.ad-link{text-decoration:none;transition:opacity .25s ease}
.ad-link:hover{opacity:.62}
.ad-btn{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,background-color .25s ease}
.ad-btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(189,235,220,.55)}
.ad-btn:active{transform:translateY(0) scale(.98)}
a:focus-visible,button:focus-visible{outline:3px solid #BDEBDC;outline-offset:4px;border-radius:12px}
.ad-row{transition:background-color .3s ease,padding .45s cubic-bezier(.2,.8,.2,1)}
.ad-row:hover{background-color:rgba(189,235,220,.08)}
.ad-row:hover .ad-arrow{transform:translateX(6px) rotate(-45deg);background:#BDEBDC;color:#172A4F}
.ad-arrow{transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .3s ease,color .3s ease}
.ad-twinkle{animation:ad-twinkle 3.4s ease-in-out infinite}
.ad-float{animation:ad-float 10s ease-in-out infinite}
.ad-word{display:inline-block;animation:ad-bob 6s ease-in-out infinite}
@keyframes ad-twinkle{0%,100%{transform:scale(.7) rotate(0deg);opacity:.6}50%{transform:scale(1.06) rotate(22deg);opacity:1}}
@keyframes ad-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ad-bob{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-4px) rotate(-1deg)}70%{transform:translateY(3px) rotate(.8deg)}}
[data-reveal]{will-change:translate,opacity}

#ad-root{position:relative;width:100%;min-height:100vh;background:#172A4F;color:#FFF7EE;overflow-x:clip}
@supports not (overflow-x:clip){#ad-root{overflow-x:visible}body{overflow-x:hidden}}
.ad-wrap{max-width:1320px;margin:0 auto;padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}

/* ===== 1. NAV ===== */
.ad-nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
.ad-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#FFF7EE}
.ad-logo svg{width:40px;height:40px;flex:none}
.ad-logo-words{display:flex;flex-direction:column;line-height:1}
.ad-logo-name{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:24px}
.ad-logo-sub{font-weight:800;font-size:9px;letter-spacing:.34em;margin-top:4px;color:#BDEBDC}
.ad-nav-links{display:flex;align-items:center;gap:30px;font-weight:700;font-size:15px}
.ad-kids{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1.5px solid rgba(255,247,238,.35)}
.ad-kids svg{width:12px;height:12px}
.ad-cta{display:flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:#BDEBDC;color:#172A4F !important;font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap}
.ad-menu-btn,.ad-nav-links .ad-menu-book{display:none}

/* ===== 2. HERO ===== */
#ad-hero{position:relative;padding-top:clamp(32px,6vw,88px);padding-bottom:clamp(56px,8vw,120px);display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,64px)}
.ad-hero-copy{position:relative;flex:1 1 460px;min-width:0}
.ad-h1{margin:0;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:clamp(44px,6.4vw,92px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.ad-lede{margin:26px 0 0;max-width:34ch;font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:rgba(255,247,238,.82)}
.ad-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ad-bigbtn{display:flex;align-items:center;min-height:54px;padding:0 28px;border-radius:999px;font-weight:800;font-size:17px;text-decoration:none}
.ad-bigbtn.is-solid{background:#BDEBDC;color:#172A4F !important}
.ad-bigbtn.is-line{border:2px solid rgba(255,247,238,.4);color:#FFF7EE}
#ad-stage{position:relative;flex:1 1 380px;min-width:0;aspect-ratio:1/1;max-width:560px;margin:0 auto}
.ad-spk{position:absolute;left:0;top:0;will-change:transform}
.ad-spk path{transform-origin:center}

/* ===== 3. TREATMENTS ===== */
.ad-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:26px 12px;border-bottom:1px solid rgba(255,247,238,.18);text-decoration:none;color:#FFF7EE}
.ad-row-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 40px}
.ad-row-name{flex:0 0 min(100%,340px);font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.01em}
.ad-row-copy{flex:1 1 280px;font-size:16px;line-height:1.55;color:rgba(255,247,238,.76)}
.ad-arrow{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,247,238,.35);font-size:20px;font-weight:800}

/* ===== 5. FIRST APPOINTMENT ===== */
.ad-steps{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:40px}
.ad-steps-line{position:absolute;left:0;right:0;top:23px;height:2px;background:repeating-linear-gradient(90deg,rgba(189,235,220,.5) 0 10px,transparent 10px 20px)}
.ad-step{position:relative}
.ad-step-num{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#BDEBDC;color:#172A4F;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:600;font-size:22px}
.ad-step h3{margin:26px 0 10px;font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:500;font-size:26px}
.ad-step p{margin:0;max-width:34ch;font-size:16px;line-height:1.6;color:rgba(255,247,238,.78)}

/* ===== 6. FEES ===== */
.ad-fees{flex:2 1 460px;border-radius:28px;background:#1F3660;padding:8px 28px}
.ad-fee{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid rgba(255,247,238,.14);font-size:17px}
.ad-fee:last-child{border-bottom:none}
.ad-fee-name{font-weight:700}
.ad-fee-price{font-family:'Fredoka','Arial Rounded MT Bold',sans-serif;font-weight:500;font-size:20px;color:#BDEBDC;white-space:nowrap}

/* ===== 8. BOOK + 9. FOOTER ===== */
.ad-foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:32px;align-items:start}
.ad-foot-col{font-size:16px;line-height:1.6}
.ad-foot-label{margin:0 0 6px;font-weight:800;letter-spacing:.2em;font-size:11px;color:#BDEBDC}

/* ===== NAV FOLDS INTO A MENU (the full row needs ~1100px) ===== */
@media (max-width:1100px){
  .ad-nav{gap:12px}
  .ad-logo,.ad-foot-logo{min-height:46px}
  .ad-foot-col a{display:inline-block;padding:11px 0;margin:-11px 0}
  .ad-cta{margin-left:auto}
  .ad-menu-btn{display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;padding:0;border:1.5px solid rgba(255,247,238,.45);border-radius:50%;background:transparent;color:#FFF7EE;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .ad-menu-btn svg{width:18px;height:18px}
  .ad-menu-btn .m-x{display:none}
  .ad-nav.is-open .ad-menu-btn{background:#FFF7EE;color:#172A4F;border-color:#FFF7EE}
  .ad-nav.is-open .ad-menu-btn .m-bars{display:none}
  .ad-nav.is-open .ad-menu-btn .m-x{display:block}
  .ad-nav-links{position:absolute;top:calc(100% - 8px);right:clamp(20px,4vw,56px);left:auto;width:min(360px,calc(100vw - 32px));flex-direction:column;align-items:stretch;gap:0;padding:8px;background:#1F3660;border-radius:24px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,247,238,.12);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}
  .ad-nav.is-open .ad-nav-links{opacity:1;visibility:visible;translate:0 0;transition:opacity .22s ease,translate .3s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .ad-nav-links a{display:flex;align-items:center;min-height:52px;padding:0 16px;border-radius:16px;text-decoration:none}
  .ad-nav-links a:active{background:rgba(189,235,220,.12)}
  .ad-nav-links .ad-kids{margin-top:6px;border-radius:999px;justify-content:center}
}
@media (max-width:520px){
  .ad-nav{padding-top:16px;padding-bottom:16px}
  .ad-cta{display:none}
  .ad-menu-btn{margin-left:auto}
  .ad-nav-links{left:16px;right:16px;width:auto}
  .ad-nav-links .ad-menu-book{display:flex;justify-content:center;margin-top:8px;background:#BDEBDC;color:#172A4F;font-weight:800;border-radius:999px}
}

/* footer: two even columns where auto-fit would strand the hours in a narrow third column */
@media (min-width:521px) and (max-width:964px){.ad-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== FIRST APPOINTMENT AS A TIMELINE once the three no longer sit in a row ===== */
@media (max-width:899px){
  .ad-steps{grid-template-columns:1fr;gap:34px;margin-top:40px}
  .ad-steps-line{display:none}
  .ad-step{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;align-items:start}
  .ad-step-num{grid-column:1;grid-row:1 / span 2}
  .ad-step h3,.ad-step p{grid-column:2}
  .ad-step h3{margin:9px 0 8px;font-size:24px}
  .ad-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:56px;bottom:-30px;width:2px;background:repeating-linear-gradient(180deg,rgba(189,235,220,.5) 0 10px,transparent 10px 20px)}
}

/* ===== PHONE ===== */
@media (max-width:760px){
  .ad-fees{padding:4px 20px}
  .ad-fee{padding:18px 0}
  .ad-bridge-btn{width:100%;justify-content:center}
  .ad-book-btns .ad-bigbtn{width:100%;max-width:360px;justify-content:center}
  .ad-btns .ad-bigbtn{flex:1 1 auto;justify-content:center}
  .ad-foot-col a{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0}
  .ad-foot-logo{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .ad-twinkle,.ad-float,.ad-word{animation:none !important}
  .ad-nav-links{transition:none !important}
}