/* RITZ - Responsive Design System
   Strategy: fluid sizing + content-driven breakpoints + safe-area-aware fixed controls
   Audit & Repair: 2026-10-14 - Full cross-device fix
   ======================================================================== */

/* ============================================================
   SECTION 1 - GLOBAL CONTAINMENT AND BOX MODEL
   ============================================================ */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   SECTION 2 - DESKTOP NAVIGATION BREAKPOINTS
   ============================================================ */
@media(max-width:1160px){
  .nav-d{gap:1.1rem}
  .nav-d>a,.dd-btn{font-size:0.8rem;letter-spacing:0.04em}
}
@media(max-width:1024px){
  .nav-d{gap:0.85rem}
  .nav-d>a,.dd-btn{font-size:0.76rem;letter-spacing:0.03em}
  .ft-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .svc-grid,.loc-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .journal-featured-split{grid-template-columns:1fr;gap:1.8rem}
  .journal-dispatch-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .blog-cover-story{grid-template-columns:1fr;gap:0}
  .loc-hub-grid{grid-template-columns:1fr;gap:1.6rem}
  .reviews-grid{grid-template-columns:1fr}
  .tri{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .trust-item:nth-child(2){border-right:none}
}

/* ============================================================
   SECTION 3 - MOBILE CORE (max-width: 860px)
   ============================================================ */
@media(max-width:860px){
  .nav-d{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  .sh .btn-book{display:none}
  body.menu-open .sound-toggle-btn{display:none}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
  .split{grid-template-columns:1fr;gap:2.8rem}
  .split-img img{aspect-ratio:4/3}
  .hero{align-items:center}
  .hero-tick{display:none}
  .pricetable td:nth-child(2){display:none}
  .pricetable th:nth-child(2){display:none}
}

/* ============================================================
   SECTION 4 - HERO SCRUB (HOME PAGE) MOBILE
   ============================================================ */
@media(max-width:860px){
  .hero-scrub{height:220svh}
  .hx-frame,.hero-video-container{
    inset:0;
    transform:scale(.3);
    transform-origin:50% 52%;
  }
  .hero-home .hero-word{display:none}
  .hero-strip{flex-wrap:wrap;gap:.7rem 1.6rem;padding:1rem 6vw}
  .ch-grid{
    grid-template-columns:1fr !important;
    gap:clamp(1.8rem, 5vw, 2.5rem) !important;
  }
  .ch-left{
    margin-bottom:0.5rem !important;
  }
  .ch-sticky{
    position:static !important;
    margin-bottom:0 !important;
  }
  .ch-left h2{
    font-size:clamp(1.85rem, 6.2vw, 2.5rem) !important;
    line-height:1.15 !important;
    margin-bottom:1rem !important;
  }
  .ch{
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    gap:clamp(1rem, 3.5vw, 1.5rem) !important;
    padding:clamp(1.4rem, 4vw, 2.2rem) 0 !important;
    border-top:1px solid var(--line-l) !important;
    align-items:flex-start !important;
  }
  .ch:last-child{
    border-bottom:1px solid var(--line-l) !important;
  }
  .ch-num{
    font-family:var(--serif) !important;
    font-size:clamp(2.1rem, 6.5vw, 2.85rem) !important;
    line-height:0.95 !important;
    min-width:clamp(36px, 9vw, 48px) !important;
    letter-spacing:-0.02em !important;
    color:var(--text-dark-p) !important;
  }
  .ch h3{
    font-family:var(--serif) !important;
    font-weight:300 !important;
    font-size:clamp(1.15rem, 4vw, 1.5rem) !important;
    line-height:1.22 !important;
    color:var(--text-dark-p) !important;
    text-transform:uppercase !important;
    letter-spacing:0.04em !important;
    margin:0 0 0.45rem 0 !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
  .ch p{
    font-size:clamp(0.88rem, 2.7vw, 1rem) !important;
    line-height:1.55 !important;
    color:var(--text-dark-s) !important;
    max-width:100% !important;
    margin:0 !important;
  }
  /* KEY FIX: hero text wrapping and vertical balance */
  .hx-words{top:40%;width:92vw}
  .hw{white-space:normal;overflow-wrap:break-word;word-break:break-word}
  .hw-line-1{font-size:clamp(2.1rem, 9.5vw, 3.8rem)}
  .hw-line-2{margin-top:0.15rem;gap:0.5rem;flex-wrap:wrap;justify-content:center}
  .hw-line-2 .hw-of-the{font-size:clamp(0.9rem, 4vw, 1.35rem);letter-spacing:0.18em}
  .hw-line-2 .hw-cut{font-size:clamp(2.4rem, 10.5vw, 4.2rem)}
  /* Hero CTAs clearance above the unified action dock */
  .hx-ctas{
    bottom:clamp(84px, calc(76px + env(safe-area-inset-bottom, 0px)), 110px) !important;
    width:90vw;
  }
  .hx-ctas .hero-sub{
    font-size:clamp(0.82rem, 3.2vw, 0.94rem);
    line-height:1.45;
    margin-bottom:0.85rem;
  }
}

/* ============================================================
   SECTION 5 - UNIFIED MOBILE ACTION DOCK ARCHITECTURE
   Strategy: A single, coordinated floating dock for mobile (<= 860px).
   Eliminates all collisions by combining Call, Book Chair, and Chat
   as sibling elements inside a single fixed container.
   Desktop (> 860px) maintains the original corner FABs and centered dock.
   ============================================================ */

/* 5a. Mobile (<= 860px): Hide standalone floating circles */
@media(max-width:860px){
  .quick-call-fab{
    display:none !important;
  }
  .chat > .chat-fab{
    display:none !important;
  }

  /* Unified Action Dock Container */
  .smart-book-pill{
    position:fixed !important;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:min(420px, calc(100vw - 24px)) !important;
    min-width:0 !important;
    max-width:calc(100vw - 24px) !important;
    height:52px !important;
    padding:4px 6px !important;
    background:rgba(12, 13, 17, 0.96) !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
    border:1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius:var(--radius-pill) !important;
    box-shadow:0 12px 36px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.15) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important;
    z-index:1500 !important;
    box-sizing:border-box !important;
    margin:0 !important;
  }

  /* Hide static status text on mobile so all 3 actions fit cleanly across all viewports */
  .smart-book-status{
    display:none !important;
  }

  /* Action buttons flex container */
  .smart-book-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* 1. Call Button in Dock */
  .smart-call-btn{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    min-width:44px !important;
    height:44px !important;
    padding:0 12px !important;
    background:rgba(255, 255, 255, 0.1) !important;
    border:1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius:var(--radius-pill) !important;
    color:#ffffff !important;
    font-family:var(--sans) !important;
    font-size:0.72rem !important;
    font-weight:700 !important;
    letter-spacing:0.1em !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
    cursor:pointer !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .smart-call-btn svg{
    width:14px !important;
    height:14px !important;
    stroke:#ffffff !important;
    flex-shrink:0 !important;
  }

  /* 2. Primary Book Chair Button in Center */
  .smart-book-btn{
    flex:1 1 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:120px !important;
    height:44px !important;
    padding:0 14px !important;
    background:#ffffff !important;
    color:#090a0f !important;
    font-family:var(--sans) !important;
    font-size:0.76rem !important;
    font-weight:800 !important;
    letter-spacing:0.12em !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
    border-radius:var(--radius-pill) !important;
    box-shadow:0 4px 16px rgba(0, 0, 0, 0.4) !important;
    white-space:nowrap !important;
    text-align:center !important;
    box-sizing:border-box !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  /* 3. Chat Button in Dock */
  .smart-chat-btn{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    min-width:44px !important;
    height:44px !important;
    padding:0 12px !important;
    background:rgba(255, 255, 255, 0.1) !important;
    border:1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius:var(--radius-pill) !important;
    color:#ffffff !important;
    font-family:var(--sans) !important;
    font-size:0.72rem !important;
    font-weight:700 !important;
    letter-spacing:0.1em !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
    cursor:pointer !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .smart-chat-btn svg{
    width:14px !important;
    height:14px !important;
    stroke:#ffffff !important;
    flex-shrink:0 !important;
  }

  /* Mobile Chat Panel positioning */
  .chat{
    position:static !important;
  }
  .chat-panel{
    position:fixed !important;
    right:12px !important;
    left:12px !important;
    width:auto !important;
    max-width:420px !important;
    margin:0 auto !important;
    bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    height:min(480px, 70svh) !important;
    z-index:1600 !important;
    box-shadow:0 16px 48px rgba(0, 0, 0, 0.8) !important;
  }

  /* Page bottom clearance so last card is never obscured */
  body{
    padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 5b. Ultra-compact screens (<= 340px) like iPhone 5 (320px) */
@media(max-width:340px){
  .smart-call-btn span,
  .smart-chat-btn span{
    display:none !important;
  }
  .smart-call-btn,
  .smart-chat-btn{
    min-width:44px !important;
    width:44px !important;
    padding:0 !important;
  }
  .smart-book-btn{
    font-size:0.7rem !important;
    letter-spacing:0.08em !important;
    padding:0 10px !important;
    min-width:100px !important;
  }
}

/* 5c. Desktop (> 860px): Chat button inside dock is hidden */
@media(min-width:861px){
  .smart-chat-btn{
    display:none !important;
  }
}

/* 5d. Pill animation transitions & hidden state */
.smart-book-pill{
  transition:transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),opacity 0.35s ease !important;
}
.smart-book-pill.pill-hidden{
  opacity:0 !important;
  pointer-events:none !important;
  transform:translate(-50%, 30px) !important;
}

/* 5e. Suppress dock when menu or drawer is open */
body.menu-open .smart-book-pill,
body.drawer-open .smart-book-pill{
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
  transform:translate(-50%, 20px) !important;
}

/* ============================================================
   SECTION 7 - LOCATION HERO MOBILE
   ============================================================ */
@media(max-width:860px){
  .hero-loc{
    min-height:100svh !important;
    height:100svh !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 !important;
    position:relative !important;
    overflow:hidden !important;
  }
  .hero-loc .hero-cover picture,
  .hero-loc .hero-cover img,
  .hero-loc .hero-under video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:50% 28% !important;
    box-sizing:border-box !important;
    padding:0 16px !important;
  }
  .hero-loc .hero-word{display:none !important}
  .hero-loc .hero-live-badge{display:none !important}
  .hero-loc.interactive-hero .hero-scrim{
    background:linear-gradient(180deg,
      rgba(9,9,11,0.42) 0%,
      rgba(9,9,11,0.0) 14%,
      rgba(9,9,11,0.0) 56%,
      rgba(9,9,11,0.72) 74%,
      rgba(9,9,11,0.96) 90%,
      rgba(9,9,11,1.0) 100%
    ) !important;
  }
  /* Hero-in bottom clearance above the unified action dock */
  .hero-loc .hero-in{
    padding-top:0 !important;
    padding-bottom:clamp(84px, calc(76px + env(safe-area-inset-bottom, 0px)), 110px) !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
    width:100% !important;
    max-width:360px !important;
    margin:0 auto !important;
    text-align:center !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    z-index:4 !important;
  }
  .hero-loc .eyebrow{
    font-size:0.62rem !important;
    font-weight:600 !important;
    letter-spacing:0.18em !important;
    text-transform:uppercase !important;
    color:rgba(255,255,255,0.7) !important;
    margin-bottom:0.25rem !important;
    display:inline-block !important;
    line-height:1.2 !important;
  }
  .hero-loc h1{
    font-family:var(--serif) !important;
    font-size:clamp(1.5rem, 5vw, 1.95rem) !important;
    font-weight:400 !important;
    line-height:1.15 !important;
    letter-spacing:-0.01em !important;
    color:#ffffff !important;
    margin:0 0 0.35rem 0 !important;
    text-shadow:0 2px 12px rgba(0,0,0,0.85) !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    justify-content:center !important;
    gap:0.3em !important;
  }
  .hero-loc h1 .rl,
  .hero-loc h1 .rl-in{display:inline-block !important}
  .hero-loc .hero-review-badge{
    margin-top:0 !important;
    margin-bottom:0.75rem !important;
    padding:0.22rem 0.65rem !important;
    font-size:0.62rem !important;
    letter-spacing:0.1em !important;
    background:rgba(18,18,22,0.72) !important;
    border:1px solid rgba(255,255,255,0.14) !important;
    box-shadow:0 2px 10px rgba(0,0,0,0.4) !important;
    gap:0.4rem !important;
  }
  .hero-loc .hero-ctas{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    width:100% !important;
    max-width:320px !important;
    margin:0 auto !important;
  }
  .hero-loc .hero-ctas .btn{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 6px !important;
    font-size:0.70rem !important;
    font-weight:700 !important;
    letter-spacing:0.08em !important;
    text-transform:uppercase !important;
    border-radius:6px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
    text-align:center !important;
  }
  .hero-loc .hero-ctas .btn-light{
    background:#ffffff !important;
    color:#09090b !important;
    box-shadow:0 4px 16px rgba(0,0,0,0.5) !important;
    border:none !important;
  }
  .hero-loc .hero-ctas .btn-ghost{
    background:rgba(255,255,255,0.08) !important;
    border:1px solid rgba(255,255,255,0.24) !important;
    color:#ffffff !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }
  .hero-loc .hero-archive-row{display:none !important}
}

/* Location hero landscape */
@media(max-width:860px) and (max-height:500px){
  .hero-loc{
    min-height:100dvh !important;
    height:100dvh !important;
  }
  .hero-loc .hero-in{
    padding-bottom:clamp(72px, 15vh, 96px) !important;
  }
}

/* ============================================================
   SECTION 8 - NARROW PHONE CONTAINMENT (max-width: 480px)
   ============================================================ */
@media(max-width:480px){
  .wrap{padding:0 5vw}
  .sh-in{padding:1rem 4vw}
  .ft-bar{padding:1.4rem 5vw;flex-direction:column;text-align:center}
  .loyalty-banner-grid,.loyalty-calc-grid,.loyalty-steps-grid{overflow:hidden}
}

/* ============================================================
   SECTION 9 - VERY NARROW PHONES (max-width: 360px)
   ============================================================ */
@media(max-width:360px){
  .brand span{font-size:1.2rem;letter-spacing:0.22em}
  .hw-line-1{font-size:clamp(1.9rem, 9vw, 2.6rem)}
  .hw-line-2 .hw-cut{font-size:clamp(2rem, 10vw, 2.8rem)}
  .smart-book-actions{gap:0.35rem}
  .smart-call-btn{padding:0.42rem 0.65rem;font-size:0.68rem}
  .smart-book-btn{padding:0.65rem 1.1rem;font-size:0.7rem}
  .quick-call-fab{width:44px;height:44px}
  .chat-fab{width:52px;height:52px}
}

/* ============================================================
   SECTION 10 - GRID BREAKPOINT 640px
   ============================================================ */
@media(max-width:640px){
  .trust-grid{grid-template-columns:1fr;gap:1.2rem}
  .trust-item{border-right:none;border-bottom:1px solid var(--line-d);padding-bottom:1rem}
  .trust-item:last-child{border-bottom:none;padding-bottom:0}
  .blog-grid{grid-template-columns:1fr}
  .journal-dispatch-grid{grid-template-columns:1fr;gap:1.2rem}
  .journal-actions{flex-direction:column;width:100%}
  .journal-actions .btn{width:100%;text-align:center;justify-content:center}
  .gallery{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr;gap:2.4rem}
  .hero-ctas .btn{flex:1;justify-content:center}
  .nap-row{grid-template-columns:1fr;gap:.4rem}
  .loccard-body{padding:1.6rem 1.4rem 1.8rem}
}

/* ============================================================
   SECTION 11 - TABLET PORTRAIT (600-1023px)
   ============================================================ */
@media(min-width:600px) and (max-width:1023px){
  .loc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .smart-book-pill{min-width:340px}
}

/* ============================================================
   SECTION 12 - LARGE SCREENS (min-width: 1600px)
   ============================================================ */
@media(min-width:1600px){
  .wrap{max-width:1440px}
}

/* ============================================================
   SECTION 13 - PRINT
   ============================================================ */
@media print{
  .smart-book-pill,.quick-call-fab,.chat,.bookbar,.burger,.mnav{display:none !important}
  body{padding-bottom:0 !important}
}

/* ============================================================
   SECTION 14 - SERVICE MENU & LOCATION PAGES RESPONSIVE OPTIMIZATION
   Eliminates mobile menu congestion, tight wrapping, and squeezed cards
   ============================================================ */
.loc-loyalty-ctas {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
}

@media (max-width: 680px) {
  .menuwrap {
    padding: 0 !important;
    width: 100% !important;
  }
  .menu {
    padding: 0 !important;
    margin: 0 !important;
  }
  .mi {
    display: grid !important;
    grid-template-columns: 28px 1fr auto !important;
    grid-template-areas: 
      "idx name price"
      "idx dur  dur" !important;
    column-gap: 0.85rem !important;
    row-gap: 0.2rem !important;
    align-items: baseline !important;
    padding: 1.15rem 0.25rem !important;
  }
  .mi:hover {
    padding-left: 0.25rem !important;
  }
  .mi-idx {
    grid-area: idx !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    color: var(--text-light-muted) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }
  .mi-name {
    grid-area: name !important;
    font-size: clamp(1.02rem, 3.6vw, 1.22rem) !important;
    line-height: 1.35 !important;
    padding-right: 0.6rem !important;
    white-space: normal !important;
    word-break: normal !important;
    color: var(--text-light-p) !important;
  }
  .mi-dur {
    grid-area: dur !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--text-light-muted) !important;
    margin-top: 0.15rem !important;
  }
  .mi-price {
    grid-area: price !important;
    font-size: 1.25rem !important;
    min-width: auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-style: italic !important;
    color: var(--text-light-p) !important;
    line-height: 1.35 !important;
  }

  /* Location loyalty buttons and card on mobile */
  .loc-loyalty-container .hero-ctas,
  .loc-loyalty-ctas {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.85rem !important;
    margin-top: 1.5rem !important;
  }
  .loc-loyalty-container .hero-ctas .btn,
  .loc-loyalty-ctas .btn {
    width: 100% !important;
    flex: none !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.85rem 1.4rem !important;
    box-sizing: border-box !important;
  }
  .loc-loyalty-card {
    padding: 1.8rem 1.4rem !important;
  }
}