/*
 * THE LEISURE HUB - MODERN EXPERIENCE (v1.2.0)
 * Progressive visual enhancements for the public website/PWA.
 */

/* Cross-document transitions: progressive enhancement for same-origin PHP pages. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: tlh-page-out var(--motion-fast) ease both; }
::view-transition-new(root) { animation: tlh-page-in var(--motion-standard) var(--ease-standard) both; }
@keyframes tlh-page-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes tlh-page-in { from { opacity: 0; transform: translateY(5px); } }

html { background: var(--surface-base); }
body { color: var(--text-body); }
body, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(142, 224, 0, .38); outline-offset: 3px; }

/* Stronger hierarchy, less visual boxing. */
.section { padding-block: var(--space-22); }
.surface { background: var(--surface-subtle); }
.card,
.form-card,
.gallery-card,
.reservation-review-card {
  border-color: rgba(203, 214, 225, .72);
  box-shadow: var(--shadow-sm);
}
.card,
.form-card { border-radius: var(--radius-xl); }
.card:hover { box-shadow: var(--shadow-card); }
.page-hero { padding-block: var(--space-20); }
.page-hero p { color: #dce7f1; }

.site-header {
  min-height: var(--header-height);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(7, 26, 51, .07), 0 8px 24px rgba(7, 26, 51, .035);
}
.nav-wrap { height: var(--header-height); }
.site-nav { gap: var(--space-5); }
.site-nav > a:not(.btn) { padding-block: 25px; }

/* Standard controls driven by tokens. */
.btn {
  min-height: var(--control-height);
  border-radius: var(--radius-md);
  padding: 10px var(--space-5);
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.btn-sm { min-height: var(--control-height-sm); padding: 7px var(--space-3); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn-primary { box-shadow: 0 8px 20px rgba(102, 170, 0, .18); }
.btn-outline { border-color: var(--border-strong); }

input,
select,
textarea {
  min-height: var(--control-height);
  border-color: var(--border-strong);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease;
}
textarea { min-height: 118px; }
input:hover,
select:hover,
textarea:hover { border-color: #aebdca; }
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--brand-green-strong);
  box-shadow: 0 0 0 4px rgba(142, 224, 0, .14);
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--state-danger);
  box-shadow: 0 0 0 3px rgba(201, 54, 72, .1);
}
.field-error {
  display: block;
  margin-top: -2px;
  color: var(--state-danger);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.4;
}

/* Reservation workflow: sticky progress, stronger selected states, mobile actions. */
.reservation-form-container { max-width: 1180px; }
.reservation-step-card { border-color: transparent; box-shadow: var(--shadow-card); }
.reservation-step-form { gap: var(--space-7); }
.reservation-steps {
  position: sticky;
  top: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-2));
  z-index: 16;
  border-color: rgba(203, 214, 225, .76);
  border-radius: var(--radius-lg);
  background: rgba(245, 247, 250, .92);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}
.reservation-step-indicator {
  min-height: var(--touch-target);
  border-radius: var(--radius-md);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.reservation-step-indicator.is-active { box-shadow: var(--shadow-xs); }
.reservation-step-indicator.is-active span { box-shadow: 0 0 0 4px rgba(142, 224, 0, .15); }
.reservation-step-title { border-bottom-color: var(--border-subtle); }
.schedule-picker,
.payment-fields,
.terms-check label { border-color: transparent; background: var(--surface-subtle); }
.checkbox-option,
.payment-choice span { border-color: var(--border-subtle); }
.checkbox-option:has(input:checked),
.payment-choice input:checked + span {
  border-color: rgba(102, 170, 0, .72);
  background: var(--brand-green-soft);
}
.reservation-step-actions {
  position: sticky;
  bottom: var(--space-2);
  z-index: 12;
  margin-inline: calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 -8px 28px rgba(7, 26, 51, .08);
  backdrop-filter: blur(14px);
}

/* Deliberate loading / empty / success states. */
.schedule-availability { transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.schedule-availability[data-state="checking"] .schedule-availability-icon,
.is-loading .modern-loading-mark {
  animation: tlh-spin .8s linear infinite;
}
.schedule-availability[data-state="checking"] { background: var(--surface-subtle); }
@keyframes tlh-spin { to { transform: rotate(360deg); } }

.empty-state,
.leasing-empty-state,
.admin-notification-empty {
  border-radius: var(--radius-lg);
}
.empty-state {
  min-height: 120px;
  display: grid;
  place-items: center;
  padding: var(--space-8);
  color: var(--text-muted);
  background: var(--surface-subtle);
}
.skeleton {
  display: block;
  min-height: 16px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #edf1f5 20%, #f8fafc 42%, #edf1f5 64%);
  background-size: 300% 100%;
  animation: tlh-skeleton 1.3s ease-in-out infinite;
}
@keyframes tlh-skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.alert-success { position: relative; padding-left: 48px; }
.alert-success::before {
  content: "✓";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--state-success);
  color: #fff;
  transform: translateY(-50%) scale(.6);
  animation: tlh-check-in var(--motion-slow) var(--ease-standard) forwards;
}
@keyframes tlh-check-in { to { transform: translateY(-50%) scale(1); } }


/* v1.2.1: Public access point for the administration portal. */
.site-nav .nav-admin-access {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 750;
  white-space: nowrap;
}
.site-nav .nav-admin-access::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 2px;
  box-shadow: inset 0 4px 0 transparent;
  opacity: .75;
}
.footer-admin-link { font-weight: 800; }
.mobile-admin-access { display: none; }

@media (max-width: 1180px) and (min-width: 951px) {
  .site-nav { gap: var(--space-3); font-size: .8rem; }
  .site-nav .nav-admin-access { font-size: .78rem; }
}

/* Public app-style bottom navigation. */
.mobile-app-nav,
.mobile-more-sheet { display: none; }
.mobile-app-nav a,
.mobile-app-nav button { font: inherit; }

/* Performance-oriented rendering without hiding accessible content. */
.gallery-card img,
.tenant-directory-image img,
.tenant-card img { background: var(--surface-muted); }
.gallery-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tenant-directory-image { overflow: hidden; background: var(--surface-muted); }
.tenant-directory-image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 950px) {
  .site-nav { box-shadow: var(--shadow-card); }
}

@media (max-width: 760px) {
  :root { --header-height: var(--mobile-header-height); }
  body:not(.install-page) { padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)); }
  .section { padding-block: var(--space-16); }
  .site-header { min-height: var(--mobile-header-height); }
  .nav-wrap { height: var(--mobile-header-height); }
  .nav-toggle { width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-md); }
  /* Installed phone app uses the persistent bottom navigation instead of the public hamburger.
     Tablet (761px+) and all browser/desktop layouts keep the existing hamburger/navigation. */
  .tlh-standalone-app .nav-toggle { display: none !important; }
  .site-nav { top: var(--mobile-header-height); max-height: calc(100dvh - var(--mobile-header-height) - var(--mobile-bottom-nav-height)); overflow-y: auto; }

  .reservation-step-card { padding: var(--space-5); border-radius: var(--radius-lg); }
  .reservation-steps {
    top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + var(--space-2));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
    padding: var(--space-1);
  }
  .reservation-step-indicator { gap: 6px; padding: 7px 6px; }
  .reservation-step-indicator span { width: 27px; height: 27px; }
  .reservation-step-indicator strong { display: block; font-size: .69rem; text-align: center; }
  .reservation-step-actions {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + var(--space-2));
    margin-inline: calc(var(--space-2) * -1);
    padding: var(--space-3) var(--space-2);
  }

  .mobile-app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(203, 214, 225, .8);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -10px 32px rgba(7, 26, 51, .1);
    backdrop-filter: blur(18px);
  }
  .mobile-app-nav a,
  .mobile-app-nav button {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    padding: 3px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
  }
  .mobile-app-nav svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2; }
  .mobile-app-nav span { font-size: .64rem; font-weight: 800; line-height: 1; white-space: nowrap; }
  .mobile-app-nav a.active,
  .mobile-app-nav button.active { color: var(--brand-navy); background: var(--surface-subtle); }
  .mobile-app-nav .mobile-app-nav-reserve {
    margin-top: -19px;
    min-height: 64px;
    border-radius: 20px;
    background: var(--brand-green);
    color: var(--brand-navy);
    box-shadow: 0 10px 24px rgba(102, 170, 0, .27);
  }
  .mobile-app-nav .mobile-app-nav-reserve.active { background: var(--brand-green); }
  .mobile-app-nav .mobile-app-nav-reserve svg { width: 24px; height: 24px; }

  .mobile-more-sheet {
    position: fixed;
    inset: 0;
    z-index: 920;
    display: grid;
    align-items: end;
  }
  .mobile-more-sheet[hidden] { display: none; }
  .mobile-more-backdrop { position: absolute; inset: 0; border: 0; background: rgba(3, 15, 31, .52); }
  .mobile-more-panel {
    position: relative;
    max-height: min(72dvh, 620px);
    overflow-y: auto;
    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--surface-raised);
    box-shadow: var(--shadow-floating);
    animation: tlh-sheet-in var(--motion-standard) var(--ease-standard) both;
  }
  .mobile-more-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
  .mobile-more-head h2 { margin: 0; font-size: var(--font-size-xl); }
  .mobile-more-close { width: var(--touch-target); height: var(--touch-target); border: 0; border-radius: 50%; background: var(--surface-subtle); color: var(--brand-navy); font: inherit; font-size: 1.5rem; }
  .mobile-more-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .mobile-more-links a { min-height: 54px; display: flex; align-items: center; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-subtle); color: var(--brand-navy); font-weight: 800; }
  .mobile-admin-access { display: block; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
  .mobile-admin-signin { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 68px; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--brand-navy); color: #fff; box-shadow: var(--shadow-card); }
  .mobile-admin-signin-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(255,255,255,.1); color: var(--brand-green); }
  .mobile-admin-signin-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
  .mobile-admin-signin strong, .mobile-admin-signin small { display: block; }
  .mobile-admin-signin strong { font-size: .93rem; }
  .mobile-admin-signin small { margin-top: 2px; color: rgba(255,255,255,.7); font-size: .73rem; font-weight: 650; }
  .mobile-admin-signin-arrow { color: var(--brand-green); font-size: 1.25rem; font-weight: 900; }
  @keyframes tlh-sheet-in { from { transform: translateY(18px); opacity: .5; } }
}

@media (max-width: 480px) {
  .reservation-step-indicator { display: grid; justify-items: center; }
  .reservation-step-indicator strong { font-size: .62rem; }
  .mobile-more-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .reservation-step-panel,
  .skeleton,
  .alert-success::before,
  .schedule-availability[data-state="checking"] .schedule-availability-icon { animation: none !important; }
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Fast route-change feedback for PHP navigations. */
body.is-navigating::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 42%;
  height: 3px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--brand-green);
  box-shadow: 0 0 14px rgba(142, 224, 0, .45);
  animation: tlh-route-progress .8s var(--ease-standard) infinite alternate;
  pointer-events: none;
}
@keyframes tlh-route-progress { from { transform: translateX(-35%); } to { transform: translateX(175%); } }
@media (max-width: 760px) { body.mobile-more-open { overflow: hidden; } }
@media (prefers-reduced-motion: reduce) { body.is-navigating::before { animation: none; width: 100%; } }
@media (max-width: 760px) {
  .mobile-app-nav svg circle { fill: currentColor; stroke: none; }
}

/* Preserve the v1.1.2 safe-area header fix while using tokenized header heights. */
@media (max-width: 950px) {
  .site-nav,
  .home-page .site-nav { top: calc(var(--header-height) + env(safe-area-inset-top)); }
}
@media (max-width: 760px) {
  .pwa-connection-notice,
  .pwa-update-notice { bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 10px); }
}

/* v1.2.6 - Cleaner mobile homepage reservation entry points */
.home-client-first .home-hero-copy{
  max-width:820px;
}

.home-client-first .home-quick-strip-inner{
  background:#fff;
}

@media (max-width:720px){
  .home-client-first .home-hero-layout{
    padding-bottom:44px;
  }

  .home-client-first .home-hero-lead{
    margin-top:18px;
  }

  .home-client-first .home-approval-note{
    margin-top:18px;
  }

  .home-client-first .home-quick-strip{
    margin-top:18px;
    padding:0 0 4px;
  }

  .home-client-first .home-quick-strip-inner{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 14px 34px rgba(7,26,51,.10);
  }

  .home-client-first .home-quick-strip a{
    min-height:76px;
    justify-content:center;
    padding:16px 20px;
    background:#fff;
  }

  .home-client-first .home-quick-strip a:active{
    background:#f6faf2;
  }

  .home-client-first .home-quick-strip strong{
    font-size:.92rem;
  }

  .home-client-first .home-quick-strip span{
    font-size:.74rem;
  }
}

/* v1.2.8 - Standalone phone hero/header clearance
 * The homepage header is intentionally fixed over the hero. In iPhone PWA mode
 * the header also includes the OS safe area, so the hero copy must reserve that
 * full dynamic height instead of relying on a fixed phone padding value. */
@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero-layout {
    padding-top: calc(env(safe-area-inset-top) + var(--mobile-header-height) + var(--space-8));
  }
}

/* v1.2.13 - Subtle mobile bottom-navigation motion. */
@keyframes tlh-bottom-nav-active-settle {
  0% { transform: translateY(0) scale(.96); }
  58% { transform: translateY(-2.5px) scale(1.075); }
  100% { transform: translateY(-2px) scale(1.06); }
}

@media (max-width: 760px) {
  .mobile-app-nav > a,
  .mobile-app-nav > button {
    -webkit-tap-highlight-color: transparent;
    transition:
      color 180ms var(--ease-standard),
      background-color 180ms var(--ease-standard),
      transform 130ms var(--ease-standard);
  }

  .mobile-app-nav svg {
    transform-origin: 50% 50%;
    transition: transform 180ms var(--ease-standard);
  }

  .mobile-app-nav span {
    transition: transform 180ms var(--ease-standard), opacity 180ms var(--ease-standard);
  }

  .mobile-app-nav > a:not(.mobile-app-nav-reserve)::after,
  .mobile-app-nav > button::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand-green);
    opacity: 0;
    transform: translateX(-50%) scaleX(.35);
    transform-origin: center;
    transition: transform 190ms var(--ease-standard), opacity 160ms ease;
  }

  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active::after,
  .mobile-app-nav > button.active::after {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }

  .mobile-app-nav > a.active svg,
  .mobile-app-nav > button.active svg {
    animation: tlh-bottom-nav-active-settle 260ms var(--ease-standard) both;
  }

  .mobile-app-nav > a:not(.mobile-app-nav-reserve):active,
  .mobile-app-nav > button:active {
    transform: scale(.97);
  }

  .mobile-app-nav .mobile-app-nav-reserve {
    transition:
      transform 150ms var(--ease-standard),
      box-shadow 190ms var(--ease-standard),
      background-color 180ms var(--ease-standard);
  }

  .mobile-app-nav .mobile-app-nav-reserve:active {
    transform: translateY(1px) scale(.97);
    box-shadow: 0 7px 17px rgba(102, 170, 0, .22);
  }

  .mobile-app-nav .mobile-app-nav-reserve.active svg {
    animation: tlh-bottom-nav-active-settle 280ms var(--ease-standard) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-app-nav > a,
  .mobile-app-nav > button,
  .mobile-app-nav svg,
  .mobile-app-nav span,
  .mobile-app-nav > a::after,
  .mobile-app-nav > button::after {
    animation: none !important;
    transition: none !important;
  }
  .mobile-app-nav > a.active svg,
  .mobile-app-nav > button.active svg { transform: translateY(-2px) scale(1.06); }
  .mobile-app-nav > a:active,
  .mobile-app-nav > button:active { transform: none; }
}


/* v1.2.15 - Stable directional reveal for public bottom-navigation routes.
 *
 * The v1.2.14 implementation translated the entire root snapshot. That can
 * make dense calendar grids and native form controls visibly re-rasterize on
 * mobile GPUs. Keep the directional cue, but reveal the incoming page with a
 * shallow clip/fade so component geometry never moves during the transition.
 */
.mobile-app-nav { view-transition-name: tlh-bottom-navigation; }

:root[data-tlh-nav-swipe] { overflow-x: clip; }
:root[data-tlh-nav-swipe]::view-transition-old(root),
:root[data-tlh-nav-swipe]::view-transition-new(root) {
  transform: none !important;
  backface-visibility: hidden;
}
:root[data-tlh-nav-swipe="forward"]::view-transition-old(root),
:root[data-tlh-nav-swipe="backward"]::view-transition-old(root) {
  animation: tlh-route-reveal-out 190ms ease both;
}
:root[data-tlh-nav-swipe="forward"]::view-transition-new(root) {
  animation: tlh-route-reveal-in-from-right 250ms cubic-bezier(.2,.8,.2,1) both;
}
:root[data-tlh-nav-swipe="backward"]::view-transition-new(root) {
  animation: tlh-route-reveal-in-from-left 250ms cubic-bezier(.2,.8,.2,1) both;
}
::view-transition-old(tlh-bottom-navigation),
::view-transition-new(tlh-bottom-navigation) {
  animation-duration: 160ms;
  animation-timing-function: ease;
}
@keyframes tlh-route-reveal-out {
  to { opacity: .72; }
}
@keyframes tlh-route-reveal-in-from-right {
  from { opacity: .76; clip-path: inset(0 0 0 7%); }
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes tlh-route-reveal-in-from-left {
  from { opacity: .76; clip-path: inset(0 7% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-tlh-nav-swipe]::view-transition-old(root),
  :root[data-tlh-nav-swipe]::view-transition-new(root),
  ::view-transition-old(tlh-bottom-navigation),
  ::view-transition-new(tlh-bottom-navigation) { animation: none !important; }
}

/* v1.2.19 - Calmer hero typography for the installed phone PWA only.
 * Keep tablet, desktop, and ordinary mobile-browser hero styling unchanged. */
@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero-layout {
    padding-bottom: 36px;
  }

  html.tlh-standalone-app body.home-page .home-hero-kicker {
    display: none;
  }

  html.tlh-standalone-app body.home-page .home-hero-eyebrow {
    margin-bottom: 9px;
    font-size: .86rem;
    line-height: 1.3;
    letter-spacing: .035em;
  }

  html.tlh-standalone-app body.home-page .home-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.1rem, 9.4vw, 2.85rem);
    line-height: 1.01;
    letter-spacing: -.035em;
  }

  html.tlh-standalone-app body.home-page .home-brand-tagline {
    gap: 8px;
    margin-top: 15px;
    font-size: .70rem;
    line-height: 1.4;
    letter-spacing: .055em;
  }

  html.tlh-standalone-app body.home-page .home-brand-tagline::before {
    width: 18px;
  }

  html.tlh-standalone-app body.home-page .home-hero-lead {
    max-width: 36rem;
    margin-top: 15px;
    font-size: .90rem;
    line-height: 1.55;
  }

  html.tlh-standalone-app body.home-page .home-approval-note {
    max-width: 36rem;
    margin-top: 15px;
    padding: 10px 12px;
    font-size: .76rem;
    line-height: 1.45;
  }
}


/* v1.2.20 - Premium calm mobile-app hero refresh.
 * Use the new aerial venue image only in the installed phone PWA and restyle
 * the hero with a calmer, more minimal composition. Desktop, tablet, and
 * ordinary mobile-browser views keep the existing hero treatment.
 */
@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero {
    min-height: min(82svh, 760px);
    align-items: flex-end;
    background: #071a33;
  }

  html.tlh-standalone-app body.home-page .home-hero .home-hero-media {
    background-image: url('../img/leisure-hub-hero-aerial.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 62% center;
  }

  html.tlh-standalone-app body.home-page .home-hero .home-hero-media img {
    opacity: 0;
    visibility: hidden;
  }

  html.tlh-standalone-app body.home-page .home-hero[data-home-parallax] .home-hero-media img {
    top: 0;
    height: 100%;
    transform: none !important;
    will-change: auto;
  }

  html.tlh-standalone-app body.home-page .home-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(4, 18, 35, .20) 0%,
        rgba(4, 18, 35, .12) 24%,
        rgba(4, 18, 35, .24) 46%,
        rgba(4, 18, 35, .58) 72%,
        rgba(4, 18, 35, .88) 100%),
      linear-gradient(90deg,
        rgba(4, 18, 35, .18) 0%,
        rgba(4, 18, 35, .08) 44%,
        rgba(4, 18, 35, .38) 100%);
  }

  html.tlh-standalone-app body.home-page .home-hero-layout {
    min-height: calc(82svh - env(safe-area-inset-top));
    align-items: end;
    padding-top: calc(env(safe-area-inset-top) + var(--mobile-header-height) + 18px);
    padding-bottom: 42px;
  }

  html.tlh-standalone-app body.home-page .home-hero-copy {
    max-width: 20rem;
    padding-inline: 2px;
  }

  html.tlh-standalone-app body.home-page .home-hero-eyebrow {
    margin-bottom: 10px;
    color: rgba(190, 239, 118, .98);
    font-size: .79rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  html.tlh-standalone-app body.home-page .home-hero h1 {
    max-width: 11ch;
    font-size: clamp(2rem, 8.8vw, 2.65rem);
    line-height: 1.04;
    letter-spacing: -.032em;
    text-wrap: balance;
    text-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  }

  html.tlh-standalone-app body.home-page .home-brand-tagline {
    gap: 8px;
    margin-top: 14px;
    color: rgba(233, 239, 244, .96);
    font-size: .67rem;
    line-height: 1.35;
    letter-spacing: .09em;
  }

  html.tlh-standalone-app body.home-page .home-brand-tagline::before {
    width: 16px;
    opacity: .92;
  }

  html.tlh-standalone-app body.home-page .home-hero-lead {
    max-width: 19rem;
    margin-top: 14px;
    color: rgba(255, 255, 255, .84);
    font-size: .86rem;
    line-height: 1.58;
  }

  html.tlh-standalone-app body.home-page .home-approval-note {
    max-width: 19rem;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 0;
    border-radius: 16px;
    background: rgba(7, 24, 44, .42);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .78);
    font-size: .73rem;
    line-height: 1.48;
  }
}

/* v1.2.21 - Centered minimal mobile-app hero copy.
 * Remove the stronger online-request warning sentence from the installed phone
 * PWA only and center the remaining hero information. Desktop, tablet, and
 * ordinary mobile-browser hero layouts remain unchanged.
 */
@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero-layout {
    justify-items: center;
  }

  html.tlh-standalone-app body.home-page .home-hero-copy {
    width: min(100%, 22rem);
    max-width: 22rem;
    margin-inline: auto;
    text-align: center;
  }

  html.tlh-standalone-app body.home-page .home-hero-eyebrow,
  html.tlh-standalone-app body.home-page .home-hero h1,
  html.tlh-standalone-app body.home-page .home-hero-lead,
  html.tlh-standalone-app body.home-page .home-approval-note {
    margin-left: auto;
    margin-right: auto;
  }

  html.tlh-standalone-app body.home-page .home-brand-tagline {
    justify-content: center;
  }

  html.tlh-standalone-app body.home-page .home-approval-note {
    max-width: 18rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    color: rgba(255, 255, 255, .72);
    font-size: .72rem;
    line-height: 1.5;
    text-align: center;
  }

  html.tlh-standalone-app body.home-page .home-approval-note strong {
    display: none;
  }
}


/* v1.2.22 - Centered premium hero across mobile app, tablet, and desktop.
 * Use the aerial venue image everywhere on the homepage hero, remove the
 * approval reminder line, and place the hero details in a calm centered
 * composition. Mobile app content is centered both horizontally and vertically.
 */
body.home-page .home-hero-overlay {
  background:
    linear-gradient(180deg,
      rgba(4, 18, 35, .22) 0%,
      rgba(4, 18, 35, .14) 24%,
      rgba(4, 18, 35, .34) 58%,
      rgba(4, 18, 35, .82) 100%),
    linear-gradient(90deg,
      rgba(4, 18, 35, .18) 0%,
      rgba(4, 18, 35, .10) 50%,
      rgba(4, 18, 35, .18) 100%);
}

body.home-page .home-hero-layout {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 0;
  min-height: clamp(620px, 78svh, 860px);
}

body.home-page .home-hero-copy {
  width: min(100%, 44rem);
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

body.home-page .home-hero-eyebrow,
body.home-page .home-hero h1,
body.home-page .home-hero-lead {
  margin-left: auto;
  margin-right: auto;
}

body.home-page .home-hero h1 {
  max-width: 12ch;
}

body.home-page .home-brand-tagline {
  justify-content: center;
}

body.home-page .home-approval-note {
  display: none !important;
}

@media (min-width: 721px) {
  body.home-page .home-hero-layout {
    padding-top: clamp(136px, 12vw, 170px);
    padding-bottom: clamp(82px, 8vw, 110px);
  }

  body.home-page .home-hero-lead {
    max-width: 38rem;
  }
}

@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero-layout {
    min-height: calc(82svh - env(safe-area-inset-top));
    align-items: center;
    justify-items: center;
    padding-top: calc(env(safe-area-inset-top) + var(--mobile-header-height) + 12px);
    padding-bottom: 34px;
  }

  html.tlh-standalone-app body.home-page .home-hero-copy {
    width: min(100%, 21rem);
    max-width: 21rem;
    display: grid;
    justify-items: center;
    align-content: center;
  }

  html.tlh-standalone-app body.home-page .home-hero h1 {
    max-width: 10.6ch;
  }

  html.tlh-standalone-app body.home-page .home-hero-lead {
    max-width: 18.5rem;
  }
}


/* v1.2.23 - Headerless installed-phone hero.
 * The installed phone PWA uses the persistent bottom navigation, so remove the
 * public top bar there and bring the TLH logo into the centered hero itself.
 * Tablet, desktop, and ordinary browser layouts keep the existing header.
 */
.home-hero-app-logo,
.home-hero-app-eyebrow,
.home-hero-app-title { display: none; }

@media (max-width: 760px) {
  html.tlh-standalone-app body .site-header {
    display: none !important;
  }

  html.tlh-standalone-app body.home-page .home-hero {
    min-height: 84svh;
  }

  html.tlh-standalone-app body.home-page .home-hero-layout {
    min-height: 84svh;
    align-items: center;
    justify-items: center;
    padding-top: calc(env(safe-area-inset-top) + 18px);
    padding-bottom: calc(var(--mobile-bottom-nav-height) * .18 + 28px);
  }

  html.tlh-standalone-app body.home-page .home-hero-copy {
    width: min(100%, 23rem);
    max-width: 23rem;
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
  }

  html.tlh-standalone-app body.home-page .home-hero-eyebrow-default,
  html.tlh-standalone-app body.home-page .home-hero-title-default {
    display: none;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-logo,
  html.tlh-standalone-app body.home-page .home-hero-app-eyebrow,
  html.tlh-standalone-app body.home-page .home-hero-app-title {
    display: block;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-logo {
    width: clamp(88px, 25vw, 112px);
    height: auto;
    margin: 0 auto 13px;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .20));
  }

  html.tlh-standalone-app body.home-page .home-hero-eyebrow {
    margin: 0 auto 10px;
    font-size: clamp(.70rem, 3vw, .82rem);
    line-height: 1.25;
    letter-spacing: .09em;
  }

  html.tlh-standalone-app body.home-page .home-hero h1 {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    font-size: clamp(1.42rem, 6.9vw, 2rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    white-space: nowrap;
    text-wrap: nowrap;
  }

  html.tlh-standalone-app body.home-page .home-brand-tagline {
    margin-top: 14px;
  }

  html.tlh-standalone-app body.home-page .home-hero-lead {
    max-width: 19rem;
    margin-top: 13px;
  }
}

@media (max-width: 360px) {
  html.tlh-standalone-app body.home-page .home-hero h1 {
    font-size: 1.34rem;
    letter-spacing: -.045em;
  }
}


/* v1.2.24 - Hero branding and reservation shortcuts refinement.
 * Installed phone PWA: enlarge/lift the TLH logo and bring Calendar / Reserve /
 * Track inside the hero. Tablet/desktop: replace the text kicker with the TLH
 * logo while retaining the existing desktop/tablet hero composition.
 */
.home-hero-app-actions { display: none; }

@media (min-width: 761px) {
  body.home-page .home-hero-kicker { display: none; }

  body.home-page .home-hero-app-logo {
    display: block;
    width: clamp(112px, 10vw, 150px);
    height: auto;
    margin: 0 auto 18px;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .20));
  }
}

@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero {
    min-height: 92svh;
  }

  html.tlh-standalone-app body.home-page .home-hero-layout {
    min-height: 92svh;
    padding-top: calc(env(safe-area-inset-top) + 12px);
    padding-bottom: calc(var(--mobile-bottom-nav-height) * .16 + 24px);
  }

  html.tlh-standalone-app body.home-page .home-hero-copy {
    width: min(100%, 24rem);
    max-width: 24rem;
    transform: translateY(-2.2vh);
  }

  html.tlh-standalone-app body.home-page .home-hero-app-logo {
    width: clamp(128px, 35vw, 158px);
    margin-top: -18px;
    margin-bottom: 9px;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .22));
  }

  html.tlh-standalone-app body.home-page .home-hero-app-eyebrow {
    margin-bottom: 8px;
  }

  html.tlh-standalone-app body.home-page .home-brand-tagline {
    margin-top: 12px;
  }

  html.tlh-standalone-app body.home-page .home-hero-lead {
    margin-top: 11px;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions {
    width: min(100%, 22rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 18px auto 0;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background: rgba(7, 24, 44, .52);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions a {
    min-width: 0;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 5px;
    border-radius: 12px;
    color: #fff;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform 150ms var(--ease-standard), background-color 180ms ease;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions a:active {
    transform: scale(.97);
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions a.is-primary {
    color: var(--navy);
    background: var(--brand-green);
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions strong,
  html.tlh-standalone-app body.home-page .home-hero-app-actions span {
    display: block;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions strong {
    font-family: Montserrat, Inter, sans-serif;
    font-size: clamp(.64rem, 2.65vw, .72rem);
    line-height: 1.15;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions span {
    color: rgba(255, 255, 255, .70);
    font-size: clamp(.54rem, 2.35vw, .62rem);
    line-height: 1.2;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions a.is-primary span {
    color: rgba(7, 26, 51, .72);
  }

  html.tlh-standalone-app body.home-page + .home-quick-strip,
  html.tlh-standalone-app body.home-page .home-quick-strip {
    display: none;
  }
}

@media (max-width: 360px) {
  html.tlh-standalone-app body.home-page .home-hero-app-logo {
    width: 122px;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions {
    gap: 5px;
    padding: 6px;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions a {
    min-height: 58px;
  }
}


/* v1.2.25 - Cleaner installed-phone hero.
 * Increase the in-hero TLH mark and remove the temporary three-button hero
 * shortcut panel. The persistent bottom navigation remains the mobile app's
 * only reservation navigation, while tablet/desktop branding is unchanged.
 */
@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero-app-logo {
    width: 250px;
    max-width: calc(100vw - 48px);
    margin-top: -22px;
    margin-bottom: 10px;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-actions {
    display: none !important;
  }
}



/* v1.2.26 - Larger installed-mobile hero logo.
 * Use a 250px TLH mark in the phone PWA while retaining a viewport safety cap
 * for exceptionally narrow screens. All other hero/navigation behavior stays
 * unchanged from v1.2.25.
 */

/* v1.2.27 - Contained tablet hamburger menu.
 * On 761-950px layouts, keep the public navigation as a compact dropdown
 * beneath the header instead of a full-width/full-page vertical takeover.
 * Phone PWA and desktop navigation behavior remain unchanged.
 */
@media (min-width: 761px) and (max-width: 950px) {
  .site-nav,
  .home-page .site-nav {
    top: calc(100% + 10px) !important;
    left: auto;
    right: 0;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - env(safe-area-inset-top) - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 3px;
    padding: 12px;
    border: 1px solid rgba(213, 224, 234, .96);
    border-radius: 18px;
    background: rgba(255, 255, 255, .985);
    box-shadow: 0 22px 54px rgba(7, 26, 51, .18);
    backdrop-filter: blur(18px);
    scrollbar-width: thin;
  }

  .site-nav > a:not(.btn),
  .site-nav .nav-admin-access,
  .home-page .site-header .site-nav > a:not(.btn) {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--navy);
  }

  .site-nav > a:not(.btn):hover,
  .site-nav > a:not(.btn):focus-visible,
  .site-nav .nav-admin-access:hover,
  .site-nav .nav-admin-access:focus-visible {
    background: #f3f7ef;
  }

  .site-nav > a.active:not(.btn) {
    color: var(--navy);
    background: #eef7e7;
  }

  .site-nav .nav-cta {
    width: 100%;
    min-height: 46px;
    margin-top: 5px;
  }
}


/* v1.2.29 - True edge-to-edge installed-phone homepage hero.
 * v1.2.28 removed the black pixels baked into the source image. The remaining
 * dark bands came from viewport/safe-area geometry: the headerless iOS PWA
 * started the hero below the status safe area and the 92svh hero ended before
 * the fixed bottom navigation. Pull the hero behind the top safe area and let
 * it fill the full dynamic viewport. Keep the copy safely inset above the
 * bottom navigation so only the background extends edge-to-edge.
 */
@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page {
    background: #fff;
  }

  html.tlh-standalone-app body.home-page .home-hero {
    min-height: calc(100dvh + env(safe-area-inset-top));
    margin-top: calc(-1 * env(safe-area-inset-top));
    background: #16395c;
  }

  html.tlh-standalone-app body.home-page .home-hero-media,
  html.tlh-standalone-app body.home-page .home-hero-overlay {
    inset: 0;
  }

  html.tlh-standalone-app body.home-page .home-hero .home-hero-media {
    background-size: cover;
    background-position: 62% center;
    background-repeat: no-repeat;
  }

  html.tlh-standalone-app body.home-page .home-hero-layout {
    min-height: calc(100dvh + env(safe-area-inset-top));
    align-items: center;
    padding-top: calc(env(safe-area-inset-top) + 22px);
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 24px);
  }

  html.tlh-standalone-app body.home-page .home-hero-copy {
    transform: translateY(-1.2vh);
  }
}


/* v1.2.30 - Restore the light content surface below the edge-to-edge hero.
 * The v1.2.29 viewport fix temporarily colored the whole standalone homepage
 * navy. Keep the hero itself edge-to-edge, but return the page and booking
 * content beneath it to white so transparent sections do not inherit navy.
 */
@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page,
  html.tlh-standalone-app body.home-page .home-booking-section {
    background: #fff;
  }
}


/* v1.2.31 - Single mobile-app hero exploration action.
 * Keep the installed phone hero minimal while giving visitors one calm way to
 * continue into the homepage content. Bottom navigation remains the primary
 * reservation navigation; tablet, desktop, and browser layouts are unchanged.
 */
.home-hero-explore-btn { display: none; }

@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero-explore-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 999px;
    color: #fff;
    background: rgba(7, 24, 44, .28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    backdrop-filter: blur(7px);
    font-family: Montserrat, Inter, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform 150ms var(--ease-standard),
      background-color 180ms ease,
      border-color 180ms ease;
  }

  html.tlh-standalone-app body.home-page .home-hero-explore-btn:active {
    transform: scale(.97);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .82);
  }

  html.tlh-standalone-app body.home-page #booking-options {
    scroll-margin-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-explore-btn { transition: none !important; }
}


/* v1.2.34 - Final homepage polish for the installed phone PWA.
 * Reduce the visual density in the middle of the hero by tightening the
 * logo-to-eyebrow relationship, softening the body copy slightly, and giving
 * the Explore action more breathing room beneath the details.
 */
@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero-copy {
    width: min(100%, 22.5rem);
    max-width: 22.5rem;
    transform: translateY(-2.4vh);
  }

  html.tlh-standalone-app body.home-page .home-hero-app-logo {
    margin-top: -28px;
    margin-bottom: 4px;
  }

  html.tlh-standalone-app body.home-page .home-hero-app-eyebrow {
    margin-bottom: 6px;
    font-size: clamp(.72rem, 3vw, .83rem);
    letter-spacing: .095em;
  }

  html.tlh-standalone-app body.home-page .home-hero h1 {
    line-height: 1.04;
  }

  html.tlh-standalone-app body.home-page .home-brand-tagline {
    margin-top: 12px;
  }

  html.tlh-standalone-app body.home-page .home-hero-lead {
    max-width: 17.75rem;
    margin-top: 12px;
    color: rgba(255, 255, 255, .86);
    font-size: .92rem;
    line-height: 1.52;
  }

  html.tlh-standalone-app body.home-page .home-hero-explore-btn {
    margin-top: 28px;
    min-width: min(100%, 230px);
    padding-inline: 28px;
  }
}


/* v1.2.35 - Lifestyle-inclusive homepage venue label.
 * Keep the expanded SPORTS, LIFESTYLE & EVENTS VENUE eyebrow readable on
 * installed phones while using the same wording across all display modes.
 */
@media (max-width: 760px) {
  html.tlh-standalone-app body.home-page .home-hero-app-eyebrow {
    max-width: calc(100vw - 34px);
    font-size: clamp(.66rem, 2.75vw, .80rem);
    letter-spacing: .072em;
    white-space: nowrap;
  }
}

/* v1.2.36 - Glassmorphism public bottom navigation.
 * Turn the mobile public navigation into a floating translucent glass surface
 * while preserving the raised green Reserve action and existing motion.
 */
@media (max-width: 760px) {
  .mobile-app-nav {
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    min-height: var(--mobile-bottom-nav-height);
    padding: 7px 6px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 24px;
    background: rgba(247, 250, 252, .72);
    box-shadow:
      0 16px 42px rgba(7, 26, 51, .16),
      inset 0 1px 0 rgba(255, 255, 255, .72);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
  }

  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active,
  .mobile-app-nav > button.active {
    background: rgba(255, 255, 255, .48);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
  }

  .mobile-app-nav .mobile-app-nav-reserve,
  .mobile-app-nav .mobile-app-nav-reserve.active {
    margin-top: -19px;
    min-height: 64px;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 20px;
    background: var(--brand-green);
    color: var(--brand-navy);
    box-shadow:
      0 12px 28px rgba(102, 170, 0, .30),
      inset 0 1px 0 rgba(255, 255, 255, .30);
  }

  body:not(.install-page) {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 18px);
  }

  .reservation-step-actions {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 18px);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 760px) {
    .mobile-app-nav { background: rgba(247, 250, 252, .96); }
  }
}

/* v1.2.37 - Deeper Explore-style glassmorphism for public bottom navigation.
 * Use the same dark translucent visual language as the homepage Explore the
 * Hub action: lower opacity, visible page bleed-through, brighter glass edge,
 * and luminous white secondary navigation. Reserve remains solid green.
 */
@media (max-width: 760px) {
  .mobile-app-nav {
    border-color: rgba(255, 255, 255, .42);
    background:
      linear-gradient(135deg, rgba(15, 39, 63, .44), rgba(7, 24, 44, .27));
    box-shadow:
      0 18px 46px rgba(3, 15, 31, .25),
      inset 0 1px 0 rgba(255, 255, 255, .36),
      inset 0 -1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
  }

  .mobile-app-nav > a:not(.mobile-app-nav-reserve),
  .mobile-app-nav > button {
    color: rgba(255, 255, 255, .74);
  }

  .mobile-app-nav > a:not(.mobile-app-nav-reserve):hover,
  .mobile-app-nav > a:not(.mobile-app-nav-reserve):focus-visible,
  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active,
  .mobile-app-nav > button:hover,
  .mobile-app-nav > button:focus-visible,
  .mobile-app-nav > button.active {
    color: #fff;
    background: rgba(255, 255, 255, .115);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .12),
      inset 0 1px 0 rgba(255, 255, 255, .09);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 760px) {
    .mobile-app-nav { background: rgba(7, 24, 44, .94); }
  }
}


/* v1.2.38/v1.2.39 - Premium hero-logo reveal animation.
 * Give the TLH mark a restrained one-time entrance rather than a looping
 * effect. Any mode showing the TLH splash waits until it has cleared; ordinary
 * phone-browser visits retain the immediate on-load reveal.
 */
@keyframes tlhHeroLogoReveal {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.90);
  }
  58% {
    opacity: 1;
    transform: translateY(-2px) scale(1.025);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body.home-page .home-hero-app-logo {
  transform-origin: center center;
  animation: tlhHeroLogoReveal 880ms cubic-bezier(.16, 1, .3, 1) 100ms backwards;
}

/* Any TLH splash would otherwise hide the logo reveal. launch.js switches
 * these readiness classes when the 4-second launch screen exits. */
html.tlh-hero-logo-wait body.home-page .home-hero-app-logo {
  opacity: 0;
  transform: translateY(14px) scale(.90);
  animation: none;
}

html.tlh-hero-logo-ready body.home-page .home-hero-app-logo {
  animation: tlhHeroLogoReveal 880ms cubic-bezier(.16, 1, .3, 1) 90ms backwards;
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .home-hero-app-logo,
  html.tlh-hero-logo-ready body.home-page .home-hero-app-logo {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}


/* v1.2.41 - Staggered hero-detail reveal, built from v1.2.39.
 * Continue the premium one-time logo entrance through the supporting hero
 * hierarchy: eyebrow, headline, tagline, description, then the Explore action.
 * The same splash-readiness classes used by the logo keep all hero motion
 * hidden until the branded launch screen has fully cleared.
 */
@keyframes tlhHeroDetailReveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

body.home-page .home-hero-eyebrow-default,
body.home-page .home-hero-app-eyebrow {
  animation: tlhHeroDetailReveal 560ms cubic-bezier(.16, 1, .3, 1) 560ms backwards;
}

body.home-page .home-hero-title-default,
body.home-page .home-hero-app-title {
  animation: tlhHeroDetailReveal 620ms cubic-bezier(.16, 1, .3, 1) 690ms backwards;
}

body.home-page .home-brand-tagline {
  animation: tlhHeroDetailReveal 520ms cubic-bezier(.16, 1, .3, 1) 830ms backwards;
}

body.home-page .home-hero-lead {
  animation: tlhHeroDetailReveal 560ms cubic-bezier(.16, 1, .3, 1) 960ms backwards;
}

body.home-page .home-hero-explore-btn {
  animation: tlhHeroDetailReveal 500ms cubic-bezier(.16, 1, .3, 1) 1110ms backwards;
}

html.tlh-hero-logo-wait body.home-page .home-hero-eyebrow-default,
html.tlh-hero-logo-wait body.home-page .home-hero-app-eyebrow,
html.tlh-hero-logo-wait body.home-page .home-hero-title-default,
html.tlh-hero-logo-wait body.home-page .home-hero-app-title,
html.tlh-hero-logo-wait body.home-page .home-brand-tagline,
html.tlh-hero-logo-wait body.home-page .home-hero-lead,
html.tlh-hero-logo-wait body.home-page .home-hero-explore-btn {
  opacity: 0;
  transform: translateY(12px);
  animation: none;
}

html.tlh-hero-logo-ready body.home-page .home-hero-eyebrow-default,
html.tlh-hero-logo-ready body.home-page .home-hero-app-eyebrow {
  animation: tlhHeroDetailReveal 560ms cubic-bezier(.16, 1, .3, 1) 540ms backwards;
}

html.tlh-hero-logo-ready body.home-page .home-hero-title-default,
html.tlh-hero-logo-ready body.home-page .home-hero-app-title {
  animation: tlhHeroDetailReveal 620ms cubic-bezier(.16, 1, .3, 1) 670ms backwards;
}

html.tlh-hero-logo-ready body.home-page .home-brand-tagline {
  animation: tlhHeroDetailReveal 520ms cubic-bezier(.16, 1, .3, 1) 810ms backwards;
}

html.tlh-hero-logo-ready body.home-page .home-hero-lead {
  animation: tlhHeroDetailReveal 560ms cubic-bezier(.16, 1, .3, 1) 940ms backwards;
}

html.tlh-hero-logo-ready body.home-page .home-hero-explore-btn {
  animation: tlhHeroDetailReveal 500ms cubic-bezier(.16, 1, .3, 1) 1090ms backwards;
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .home-hero-eyebrow-default,
  body.home-page .home-hero-app-eyebrow,
  body.home-page .home-hero-title-default,
  body.home-page .home-hero-app-title,
  body.home-page .home-brand-tagline,
  body.home-page .home-hero-lead,
  body.home-page .home-hero-explore-btn,
  html.tlh-hero-logo-ready body.home-page .home-hero-eyebrow-default,
  html.tlh-hero-logo-ready body.home-page .home-hero-app-eyebrow,
  html.tlh-hero-logo-ready body.home-page .home-hero-title-default,
  html.tlh-hero-logo-ready body.home-page .home-hero-app-title,
  html.tlh-hero-logo-ready body.home-page .home-brand-tagline,
  html.tlh-hero-logo-ready body.home-page .home-hero-lead,
  html.tlh-hero-logo-ready body.home-page .home-hero-explore-btn {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* ========================================================================== 
   v1.2.87 — Mobile details/review QA fixes
   - Do not float form actions over editable/review content.
   - Keep payment/review cards inside the phone viewport.
   ========================================================================== */
@media (max-width: 760px) {
  body.public-booking-modal-open {
    padding-bottom: 0;
  }

  .public-booking-dialog-reference,
  .public-booking-dialog-scroll-reference,
  .reservation-step-card-reference,
  .reservation-step-card-reference .reservation-step-form,
  .reservation-step-card-reference [data-form-step="3"],
  .reservation-step-card-reference [data-form-step="4"],
  .reservation-step-card-reference [data-form-step="3"] .form-grid,
  .reservation-step-card-reference [data-form-step="4"] .form-grid,
  .reservation-step-card-reference [data-form-step="4"] .payment-choice-grid,
  .reservation-review-card,
  .reservation-charge-breakdown,
  .reservation-review-grid,
  .review-inclusions,
  .terms-check {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Detail and review steps are long forms. Keep their action bar at the end
     of the content instead of pulling it into the viewport and covering fields. */
  .reservation-step-card-reference [data-form-step="3"] .reservation-step-actions,
  .reservation-step-card-reference [data-form-step="4"] .reservation-step-actions {
    position: static !important;
    inset: auto !important;
    z-index: auto;
    margin: 24px 0 0;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 8px);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .reservation-step-card-reference [data-form-step="3"],
  .reservation-step-card-reference [data-form-step="4"] {
    overflow-x: hidden;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
  }

  .reservation-step-card-reference [data-form-step="3"] input,
  .reservation-step-card-reference [data-form-step="3"] select,
  .reservation-step-card-reference [data-form-step="3"] textarea,
  .reservation-step-card-reference [data-form-step="4"] input,
  .reservation-step-card-reference [data-form-step="4"] select,
  .reservation-step-card-reference [data-form-step="4"] textarea {
    min-width: 0;
    max-width: 100%;
  }

  .payment-choice,
  .payment-choice span {
    min-width: 0;
    max-width: 100%;
  }

  .reservation-review-heading {
    width: 100%;
    min-width: 0;
    gap: 12px;
  }
  .reservation-review-heading > div {
    min-width: 0;
  }
  .reservation-review-heading > strong {
    max-width: 48%;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: right;
  }

  .reservation-charge-breakdown {
    overflow: hidden;
  }
  .reservation-charge-row {
    grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
    gap: 12px;
    min-width: 0;
  }
  .reservation-charge-row > div,
  .reservation-charge-row > div > strong,
  .reservation-charge-row > div > small {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .reservation-charge-row > strong {
    max-width: 116px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .reservation-review-grid > div,
  .reservation-review-grid strong,
  .review-inclusions li,
  .terms-check span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .reservation-step-card-reference [data-form-step="3"],
  .reservation-step-card-reference [data-form-step="4"] {
    padding-left: 16px;
    padding-right: 16px;
  }

  .reservation-step-card-reference [data-form-step="3"] .reservation-step-actions,
  .reservation-step-card-reference [data-form-step="4"] .reservation-step-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .reservation-step-card-reference [data-form-step="3"] .reservation-step-actions .btn,
  .reservation-step-card-reference [data-form-step="4"] .reservation-step-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .reservation-review-heading {
    display: flex;
    align-items: center;
    padding: 18px 16px;
  }
  .reservation-review-heading > strong {
    display: block;
    margin-top: 0;
    font-size: 1.12rem;
  }

  .reservation-charge-breakdown {
    margin: 14px 10px 6px;
  }
  .reservation-charge-row {
    grid-template-columns: minmax(0, 1fr) minmax(66px, auto);
    gap: 8px;
    padding: 12px 10px;
  }
  .reservation-charge-row > strong {
    max-width: 98px;
    font-size: .88rem;
  }

  .reservation-review-grid {
    padding-left: 14px;
    padding-right: 14px;
  }
  .review-inclusions {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* v1.2.98 - Flush fixed mobile navigation.
 * Full-width, non-floating navigation that deliberately overlays scrolling
 * content while retaining safe-area support and a reachable page footer. */
@media (max-width: 760px) {
  body:not(.install-page) {
    --mobile-bottom-nav-height: 62px;
    padding-bottom: 0 !important;
  }

  .mobile-app-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)) !important;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 0 !important;
    background: rgba(5, 18, 31, .985) !important;
    box-shadow: 0 -8px 26px rgba(0,0,0,.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-app-nav > a,
  .mobile-app-nav > button {
    min-height: 50px !important;
    border-radius: 12px !important;
    color: rgba(255,255,255,.68) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active,
  .mobile-app-nav > button.active {
    color: #fff !important;
    background: rgba(255,255,255,.075) !important;
    box-shadow: none !important;
  }

  .mobile-app-nav svg {
    width: 20px !important;
    height: 20px !important;
  }
  .mobile-app-nav span {
    font-size: .61rem !important;
  }

  .mobile-app-nav .mobile-app-nav-reserve,
  .mobile-app-nav .mobile-app-nav-reserve.active {
    margin-top: 0 !important;
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: var(--brand-green) !important;
    color: var(--brand-navy) !important;
    box-shadow: none !important;
  }
  .mobile-app-nav .mobile-app-nav-reserve svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Content scrolls underneath the opaque nav; the footer alone reserves
     enough final space so its last links are still reachable. */
  .site-footer {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 18px) !important;
  }

  .reservation-step-actions {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom) + 8px) !important;
  }
}

/* v1.2.102 - Premium bottom navigation refinement.
   Keep the nav flush and overlaying content, but make it feel more integrated,
   slightly lighter, and less like a detached bright block. */
@media (max-width: 760px) {
  body:not(.install-page) {
    --mobile-bottom-nav-height: 60px;
  }

  .mobile-app-nav {
    position: fixed;
    isolation: isolate;
    padding: 4px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(7, 24, 44, .94), rgba(5, 18, 31, .985)) !important;
    box-shadow: 0 -10px 28px rgba(0,0,0,.24) !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }
  .mobile-app-nav::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(44,255,5,.42), transparent);
    opacity: .9;
    pointer-events: none;
  }
  .mobile-app-nav > a,
  .mobile-app-nav > button {
    position: relative;
    min-height: 48px !important;
    border-radius: 14px !important;
    gap: 4px;
    color: rgba(255,255,255,.72) !important;
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active,
  .mobile-app-nav > button.active {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
  }
  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active::after,
  .mobile-app-nav > button.active::after {
    width: 22px;
    height: 4px;
    border-radius: 999px;
    top: 4px;
    background: var(--brand-green) !important;
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  .mobile-app-nav svg {
    width: 19px !important;
    height: 19px !important;
  }
  .mobile-app-nav span {
    font-size: .60rem !important;
    letter-spacing: .01em;
  }
  .mobile-app-nav .mobile-app-nav-reserve,
  .mobile-app-nav .mobile-app-nav-reserve.active {
    min-height: 48px !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, #43ff16 0%, #2cff05 100%) !important;
    color: var(--brand-navy) !important;
    box-shadow: 0 10px 24px rgba(44,255,5,.22) !important;
  }
  .mobile-app-nav .mobile-app-nav-reserve span {
    font-weight: 900;
  }
  .mobile-app-nav .mobile-app-nav-reserve svg {
    width: 21px !important;
    height: 21px !important;
  }
}

/* v1.2.103 - Calm the fixed-nav accent while keeping it flush and opaque. */
@media (max-width: 760px) {
  .mobile-app-nav {
    box-shadow: 0 -7px 20px rgba(0,0,0,.21) !important;
  }
  .mobile-app-nav::before {
    left: 22%;
    right: 22%;
    background: linear-gradient(90deg, transparent, rgba(44,255,5,.24), transparent) !important;
    opacity: .65 !important;
  }
  .mobile-app-nav .mobile-app-nav-reserve,
  .mobile-app-nav .mobile-app-nav-reserve.active {
    box-shadow: 0 6px 14px rgba(44,255,5,.13) !important;
  }
}

/* v1.2.111 - Arena Campaign mobile navigation.
   Reserve remains the key action without becoming a large solid green block. */
@media (max-width: 760px) {
  .mobile-app-nav .mobile-app-nav-reserve,
  .mobile-app-nav .mobile-app-nav-reserve.active {
    min-height:48px!important;
    border-radius:14px!important;
    background:transparent!important;
    color:#2CFF05!important;
    box-shadow:none!important;
  }
  .mobile-app-nav .mobile-app-nav-reserve svg {
    width:31px!important;
    height:31px!important;
    padding:6px!important;
    border-radius:999px!important;
    background:#2CFF05!important;
    color:#061522!important;
    box-shadow:0 5px 14px rgba(44,255,5,.13)!important;
  }
  .mobile-app-nav .mobile-app-nav-reserve span {
    color:#2CFF05!important;
    font-weight:900!important;
  }
  .mobile-app-nav .mobile-app-nav-reserve::after {
    display:none!important;
  }
  .mobile-app-nav .mobile-app-nav-reserve:active svg {
    transform:scale(.94)!important;
  }
}

/* v1.2.113 - Luxury editorial bottom navigation.
   Preserve the fixed overlay, but remove pill-like active blocks and use
   precise hairline/monogram accents instead. */
@media (max-width:760px){
  .mobile-app-nav{
    padding:4px 8px calc(6px + env(safe-area-inset-bottom))!important;
    border-top:1px solid rgba(255,255,255,.075)!important;
    background:rgba(4,17,30,.955)!important;
    box-shadow:0 -10px 30px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
  .mobile-app-nav::before{
    left:34%!important;
    right:34%!important;
    opacity:.34!important;
    background:linear-gradient(90deg,transparent,rgba(44,255,5,.34),transparent)!important;
  }
  .mobile-app-nav > a,
  .mobile-app-nav > button{
    min-height:48px!important;
    border-radius:0!important;
    color:rgba(232,238,243,.60)!important;
    background:transparent!important;
  }
  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active,
  .mobile-app-nav > button.active{
    color:#fff!important;
    background:transparent!important;
  }
  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active::after,
  .mobile-app-nav > button.active::after{
    top:3px!important;
    width:20px!important;
    height:2px!important;
    border-radius:999px!important;
    background:#2CFF05!important;
    opacity:.86!important;
  }
  .mobile-app-nav svg{
    width:19px!important;
    height:19px!important;
  }
  .mobile-app-nav span{
    font-size:.59rem!important;
    font-weight:760!important;
  }
  .mobile-app-nav .mobile-app-nav-reserve,
  .mobile-app-nav .mobile-app-nav-reserve.active{
    color:#2CFF05!important;
    background:transparent!important;
  }
  .mobile-app-nav .mobile-app-nav-reserve svg{
    width:30px!important;
    height:30px!important;
    padding:6px!important;
    border:1px solid rgba(44,255,5,.62)!important;
    background:rgba(44,255,5,.96)!important;
    box-shadow:0 6px 15px rgba(44,255,5,.10)!important;
  }
}

/* v1.2.114 - Native mobile tab bar.
   Equal-weight tabs, active tint, safe-area spacing, and a restrained Reserve
   affordance instead of a floating action button. */
@media(max-width:760px){
  body:not(.install-page){--mobile-bottom-nav-height:66px}
  .mobile-app-nav{
    left:0!important;
    right:0!important;
    bottom:0!important;
    min-height:calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom))!important;
    padding:5px 7px calc(7px + env(safe-area-inset-bottom))!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    border-radius:0!important;
    background:rgba(6,18,29,.92)!important;
    box-shadow:0 -12px 30px rgba(0,0,0,.20)!important;
    backdrop-filter:blur(22px) saturate(1.1)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.1)!important;
  }
  .mobile-app-nav::before{display:none!important}
  .mobile-app-nav > a,
  .mobile-app-nav > button{
    min-height:52px!important;
    gap:4px!important;
    border-radius:13px!important;
    color:rgba(229,236,242,.53)!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-tap-highlight-color:transparent!important;
    transition:color .18s ease,transform .18s ease!important;
  }
  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active,
  .mobile-app-nav > button.active{
    color:#2CFF05!important;
    background:transparent!important;
  }
  .mobile-app-nav > a:not(.mobile-app-nav-reserve).active::after,
  .mobile-app-nav > button.active::after{display:none!important}
  .mobile-app-nav svg{
    width:21px!important;
    height:21px!important;
    transition:transform .18s ease!important;
  }
  .mobile-app-nav span{
    font-size:.58rem!important;
    font-weight:700!important;
    line-height:1!important;
  }
  .mobile-app-nav > a.active svg,
  .mobile-app-nav > button.active svg{transform:none!important}
  .mobile-app-nav .mobile-app-nav-reserve,
  .mobile-app-nav .mobile-app-nav-reserve.active{
    color:#2CFF05!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .mobile-app-nav .mobile-app-nav-reserve svg{
    width:29px!important;
    height:29px!important;
    padding:5px!important;
    border:0!important;
    border-radius:10px!important;
    color:#2CFF05!important;
    background:rgba(44,255,5,.11)!important;
    box-shadow:none!important;
  }
  .mobile-app-nav > a:active,
  .mobile-app-nav > button:active{transform:scale(.96)!important}
}