/* Phone header: keep the fixed nav inside the viewport.
   The nav is a flex row whose min-content was wider than a 360–430px
   screen, so the page grew to 451px and clipped "Book Now" and the hero. */
@media (max-width: 980px) {
  html { overflow-x: clip; }
  nav {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
    gap: 0.45rem;
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
    overflow: hidden;
  }
  .nav-logo {
    min-width: 0 !important;
    flex: 1 1 auto;
    max-width: 46%;
    overflow: hidden;
  }
  .nav-logo img {
    height: 40px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .hamburger { margin-left: auto; }
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; flex: 0 0 auto; }
  .nav-cta,
  .nav-book {
    flex: 0 0 auto;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
    padding: 0.5rem 0.7rem !important;
    white-space: nowrap;
  }
  .mobile-menu a {
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    text-align: center;
    overflow-wrap: anywhere;
  }
}