/* Final full-width treatment. The approved type, palette and tooth art remain. */
:root { --content-gutter: max(5.5vw, calc((100vw - 1440px) / 2)); }
body { background: #fff; }
.page-shell { max-width: none; margin: 0; background: #fff; }
.hero { min-height: 790px; margin: 0; border-radius: 0; }
.site-header { z-index: 30; max-width: 1440px; margin-inline: auto; padding: 28px var(--content-gutter) 0; }
.hero-content { max-width: 1440px; margin-inline: auto; min-height: 655px; padding-left: var(--content-gutter); padding-bottom: 40px; }
.hero-copy { padding-top: 0; }
.hero-tooth { bottom: -7px; }
.hero-bottom { left: 0; right: 0; bottom: 25px; max-width: 1440px; margin-inline: auto; padding-inline: var(--content-gutter); }
.section { padding-left: var(--content-gutter); padding-right: var(--content-gutter); }
.services { padding-top: 105px; }
.service-card.accent { background: #4bb2be; color: #fff; }
.service-card.accent p { color: #e9fbfa; }
.service-card.accent .service-icon { background: #e1f4f2; color: #217e8f; }
.service-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.featured .service-icon { background: #def05b; }
.service-card .card-arrow { opacity: .8; }
.doctor-visual img { object-position: center 28%; }
.site-footer { background: #103f4b; color: #f2fbfa; padding-left: var(--content-gutter); padding-right: var(--content-gutter); }
.site-footer > p { color: #c0dbdb; }
.site-footer > p a { display: inline-block; margin-top: 7px; color: #e0ef64; }
.footer-links { color: #e2f1ef; }
.footer-bottom { border-color: #4f8790; color: #b1d1d1; }
.mobile-menu { display: none; }

@media (max-width: 720px) {
  :root { --content-gutter: 24px; }
  .hero { min-height: 850px; margin: 0; border-radius: 0; }
  .site-header { padding: 20px 22px 0; gap: 12px; }
  .brand img { width: 112px; }
  .mobile-menu { display: block; position: relative; z-index: 20; margin-left: auto; }
  .mobile-menu summary { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #ffffffa8; border-radius: 50%; cursor: pointer; list-style: none; }
  .mobile-menu summary:focus-visible { outline: 3px solid #d7ed49; outline-offset: 4px; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary > span:first-child { width: 18px; height: 12px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mobile-menu nav { position: absolute; top: 58px; right: -59px; display: grid; gap: 0; width: min(265px, calc(100vw - 40px)); padding: 13px; border-radius: 13px; background: #104652; box-shadow: 0 18px 34px #15506c38; }
  .mobile-menu nav a { display: block; padding: 13px 14px; border-radius: 7px; color: #fff; font-size: 15px; font-weight: 600; }
  .mobile-menu nav a:hover, .mobile-menu nav a:focus-visible { background: #246d7a; }
  .header-cta { min-width: 48px; min-height: 48px; }
  .hero-content { min-height: 795px; padding: 0 22px 60px; }
  .hero-copy { padding-top: 58px; }
  .hero-art { top: 315px; }
  .hero-tooth { bottom: -48px; }
  .hero-bottom { padding-inline: 22px; }
  .services { padding-top: 80px; }
  .service-icon svg { width: 25px; height: 25px; }
  .site-footer { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 420px) {
  .hero { min-height: 845px; }
  .hero-content { min-height: 795px; }
  .hero-copy { padding-top: 58px; }
  .hero-art { top: 315px; }
  .hero-tooth { bottom: -45px; }
  .brand img { width: 105px; }
}
@media (max-width: 340px) {
  .site-header { gap: 7px; padding-left: 17px; padding-right: 17px; }
  .brand img { width: 98px; }
  .hero-content { padding-left: 20px; padding-right: 20px; }
}
