/* The mobile welcome occupies one small viewport, including contact labels. */
.hero h1 { font-size: clamp(58px, 5.3vw, 86px); }
@media (max-width: 760px) {
  .hero .hero-opening { padding-bottom: 0; min-height: 100svh; }
  .hero .hero-content {
    min-height: 100svh; padding: 96px 7% max(22px, env(safe-area-inset-bottom));
    justify-content: center;
  }
  .hero-content > .eyebrow { margin-bottom: 28px; }
  .hero h1, html[lang=en] .hero h1 { font-size: clamp(38px, 10.5vw, 56px); line-height: 1.12; }
  .hero-content .hero-description { margin: 28px 0 24px; font-size: 16px; line-height: 1.55; }
  .hero-content .hero-rating { margin-bottom: 28px; }
  .hero-content .button.cream { min-height: 54px; }
  .hero-content .hero-contact { margin-top: 28px; }
  .hero-contact-links { margin-top: 14px; }
  .contact-social { gap: 8px; }
  .contact-social-icon { width: 44px; height: 44px; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .hero .hero-content { padding-top: 88px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .hero-content > .eyebrow { margin-bottom: 20px; }
  .hero h1, html[lang=en] .hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero-content .hero-description { margin: 20px 0 18px; font-size: 15px; }
  .hero-content .hero-rating { margin-bottom: 22px; }
  .hero-content .hero-contact { margin-top: 22px; }
}