@media (max-width: 1199px) {
  :root {
    --container: min(1080px, calc(100% - 36px));
  }

  .hero {
    min-height: 680px;
  }

  .nav-shell {
    min-height: 78px;
  }

  .nav-list {
    gap: 0.15rem;
  }

  .nav-link,
  .nav-trigger {
    font-size: 0.73rem;
    letter-spacing: 0.06em;
  }

  .three-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .four-col,
  .info-grid,
  .luxury-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .desktop-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 991px) {
  .three-col,
  .four-col,
  .info-grid,
  .luxury-stats,
  .gallery-preview,
  .gallery-grid,
  .stat-grid,
  .footer-grid,
  .signature-panel {
    grid-template-columns: 1fr 1fr;
  }

  .dining-showcase,
  .location-layout,
  .editorial-grid,
  .two-col,
  .signature-panel {
    grid-template-columns: 1fr;
  }

  .hero-subtitle {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .page-hero {
    min-height: 360px;
  }

  .social-follow-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
  }
}

@media (max-width: 767px) {
  :root {
    --container: min(100%, calc(100% - 24px));
  }

  .section-head {
    margin-bottom: 1.4rem;
  }

  .hero-kicker,
  .eyebrow {
    letter-spacing: 0.12em;
  }

  .brand-wordmark {
    font-size: 0.95rem;
  }

  .hero-inner {
    padding-top: 3rem;
  }

  h1 {
    max-width: 8ch;
  }

  h2,
  h3 {
    max-width: none;
  }

  .experience-card figure,
  .dining-card img,
  .room-card img {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .nav-shell {
    gap: 0.4rem;
  }

  .brand {
    min-width: auto;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .mobile-nav-panel {
    padding-inline: 0.85rem;
  }

  .hero {
    min-height: 560px;
  }

  .hero-subtitle {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }

  .gallery-preview,
  .luxury-stats {
    grid-template-columns: 1fr;
  }

  .contact-panel,
  .form-shell,
  .content-block {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
