/* Final focused polish: viewport hero, alignment, shared accents, smaller logo. */
:root { --content-gutter: max(4.8vw, calc((100vw - 1440px) / 2)); }
.hero { min-height: 100svh; }
.site-header { padding-top: 18px; align-items: center; }
.brand img { width: 132px; }
.desktop-nav { gap: 34px; font-size: 14.5px; }
.hero-content { min-height: max(640px, calc(100svh - 98px)); grid-template-columns: 53% 47%; padding-bottom: 0; }
.hero-tooth { width: min(620px, 90%); right: 4%; bottom: 20px; }
.service-card.featured { background: #219eb5; color: #fff; }
.service-card.featured p { color: #e1f7f9; }
.service-card.featured .service-icon { background: #def05b; color: #23758b; }
.footer-brand img { width: 180px; }

@media (max-width: 900px) and (min-width: 721px) {
  .brand img { width: 120px; }
  .desktop-nav { gap: 16px; font-size: 13.5px; }
}

/* Readability refinements verified during final cross-device QA. */
.service-card:not(.featured) p { color: #44676c; }
.footer-bottom { color: #b8d2d2; }
@media (max-width: 720px) {
  :root { --content-gutter: 24px; }
  .hero { min-height: max(100svh, 850px); }
  .site-header { padding-top: 20px; }
  .brand img { width: 112px; }
  .hero-content { min-height: 795px; display: flex; padding-bottom: 60px; }
  .hero-tooth { width: 110vw; right: -10%; bottom: -48px; }
  .footer-brand img { width: 150px; }
}
@media (max-width: 420px) {
  .hero { min-height: max(100svh, 845px); }
  .brand img { width: 105px; }
  .hero-tooth { bottom: -45px; }
}
@media (max-width: 340px) {
  .brand img { width: 98px; }
}