/*
 * Mobile V16
 * Final, isolated mobile rules. This file intentionally loads last so the
 * responsive layout is not affected by older design iterations.
 */

.service-row > b,
.concierge-links b {
  display: none !important;
}

@media (max-width: 760px) {
  body {
    min-width: 320px;
  }

  section[id] {
    scroll-margin-top: 72px !important;
  }

  body.menu-open,
  body.modal-open {
    overflow: hidden;
    touch-action: none;
  }

  /* Header and full-screen navigation */
  .site-header {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 76px !important;
    padding: 0 22px !important;
    background: rgba(5, 23, 40, .96) !important;
    border-bottom: 1px solid rgba(224, 183, 96, .34) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
  }

  .page-scrolled .site-header {
    height: 70px !important;
  }

  .site-header .brand-name {
    font-size: 1.58rem !important;
    line-height: 1 !important;
    letter-spacing: .19em !important;
  }

  .site-header .brand-sub {
    margin-top: 7px;
    font-size: .63rem !important;
    line-height: 1 !important;
  }

  .menu-toggle {
    right: 22px !important;
    z-index: 3;
    width: 38px !important;
    height: 34px !important;
  }

  .menu-toggle span {
    height: 1px !important;
    background: #d6a955 !important;
  }

  .site-nav.open {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    z-index: -1 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    padding: 150px 9vw 70px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 36px !important;
    background:
      radial-gradient(circle at 80% 12%, rgba(190, 143, 61, .13), transparent 28rem),
      #06182b !important;
  }

  .site-nav.open::before {
    content: "";
    position: absolute;
    top: 112px;
    right: 9vw;
    left: 9vw;
    height: 1px;
    background: linear-gradient(90deg, rgba(214, 169, 85, .5), transparent);
  }

  .site-nav.open a {
    position: relative;
    width: 100%;
    padding: 4px 0 12px !important;
    color: #fff7e8 !important;
    font: 500 clamp(2.75rem, 12vw, 4rem)/.95 var(--serif) !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
  }

  .site-nav.open a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(214, 169, 85, .32), transparent 72%);
  }

  /* Hero typography */
  .hero-v2 {
    min-height: max(720px, 100svh) !important;
    padding: 104px 6vw 72px !important;
  }

  .hero-v2 .hero-copy {
    width: min(100%, 520px) !important;
    padding: 18px 0 24px !important;
  }

  .hero-v2 .eyebrow {
    gap: 9px;
    font-size: .57rem !important;
    line-height: 1.45;
    letter-spacing: .2em;
  }

  .hero-v2 .eyebrow > span {
    width: 24px;
  }

  .hero-v2 .hero-kicker {
    max-width: 340px;
    margin-top: 15px !important;
    font-size: .66rem !important;
    line-height: 1.55 !important;
    letter-spacing: .13em !important;
  }

  .hero-v2 h1 {
    margin: 22px 0 20px !important;
    font-size: clamp(3.25rem, 13.5vw, 4.35rem) !important;
    line-height: .88 !important;
    letter-spacing: -.035em !important;
  }

  .hero-v2 h1 em {
    margin-top: 22px !important;
    font-size: .5em !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
  }

  .hero-v2 .hero-copy > p:not(.hero-kicker) {
    max-width: 350px !important;
    font-size: .9rem !important;
    line-height: 1.65 !important;
  }

  .hero-v2 .hero-actions {
    margin-top: 26px !important;
  }

  .hero-v2 .hero-actions .button {
    width: min(100%, 290px);
    min-height: 56px;
    padding: 0 22px;
    font-size: .67rem;
  }

  /* Keep all large section typography readable and separated. */
  .catalog-head h2,
  .services-head h2,
  .contact .contact-title h2 {
    line-height: .98 !important;
    letter-spacing: -.03em !important;
  }

  .catalog-head h2 em,
  .services-head h2 em,
  .contact .contact-title h2 em {
    display: block;
    margin-top: 8px;
    line-height: 1.02;
  }

  .services-head h2 {
    font-size: clamp(2.75rem, 12vw, 3.8rem) !important;
  }

  .service-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .service-row .service-no,
  .service-row h3,
  .service-row p {
    grid-column: 1 !important;
  }

  .service-row h3 {
    margin: 34px 0 12px !important;
    line-height: 1.02 !important;
  }

  .service-row p {
    font-size: .76rem !important;
    line-height: 1.65 !important;
  }

  .contact .contact-title h2 {
    font-size: clamp(2.85rem, 12vw, 3.7rem) !important;
  }

  .contact .contact-title > p {
    color: rgba(255, 248, 232, .76) !important;
    font-size: .83rem !important;
    line-height: 1.75 !important;
  }

  .concierge-links a {
    min-height: 104px !important;
    padding: 22px 0 !important;
  }

  .concierge-links strong {
    font-size: clamp(1.15rem, 5.4vw, 1.45rem) !important;
    line-height: 1.18 !important;
  }

  /* iOS-safe, full viewport product detail. */
  .product-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: #fff8e8 !important;
    background: #06182b !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .product-modal[open] {
    display: block !important;
  }

  .product-modal::backdrop {
    background: #06121f;
    backdrop-filter: none;
  }

  .modal-close {
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    right: 16px !important;
    z-index: 20 !important;
    width: 48px !important;
    height: 48px !important;
    display: grid;
    place-items: center;
    border: 1px solid rgba(226, 184, 96, .65) !important;
    border-radius: 50%;
    color: #fff8e8;
    background: rgba(6, 24, 43, .92) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
    font: 300 1.9rem/1 var(--serif) !important;
  }

  .modal-image {
    width: 100% !important;
    height: clamp(300px, 46svh, 430px) !important;
    min-height: 0 !important;
    background: #0a1d31;
  }

  .modal-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .modal-content {
    min-height: 58svh;
    padding: 38px 24px calc(42px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    color: #fff8e8 !important;
    background:
      radial-gradient(circle at 85% 0, rgba(206, 158, 72, .13), transparent 22rem),
      #06182b !important;
  }

  .modal-content > span {
    color: #d5a957 !important;
    font-size: .63rem !important;
    line-height: 1.5;
  }

  .modal-content h2 {
    margin: 18px 0 4px !important;
    color: #fff8e8 !important;
    font-size: clamp(2.9rem, 13vw, 4.2rem) !important;
    line-height: .94 !important;
    letter-spacing: -.035em;
  }

  .modal-content > em {
    color: #e1bd72 !important;
    font-size: 1.15rem !important;
  }

  .modal-content > p {
    margin: 27px 0 !important;
    color: rgba(255, 248, 232, .72) !important;
    font-size: .84rem !important;
    line-height: 1.75 !important;
  }

  .modal-content dl {
    margin-bottom: 28px !important;
  }

  .modal-content dl div {
    padding: 17px 0 !important;
  }

  .modal-content dd {
    color: rgba(255, 248, 232, .7) !important;
    font-size: .78rem !important;
    line-height: 1.65 !important;
  }

  .modal-content .button {
    position: static !important;
    width: 100% !important;
    min-height: 56px;
    margin: 0 !important;
  }
}

@media (max-width: 380px) {
  .hero-v2 h1 {
    font-size: 3.05rem !important;
  }

  .site-nav.open a {
    font-size: 2.6rem !important;
  }

  .service-list {
    grid-template-columns: 1fr !important;
  }
}