/* One mobile menu launcher, a labelled bottom sheet, and the shared glass header.
   The matte glass shell and inset button follow the supplied yacht reference.
   The full 64px shell is clickable (51.2px even at the compact 80% scale). */
body .mobile-header-wordmark,
body .mobile-menu-fallback-backdrop { display: none; }
/* One supplied brand image on desktop and mobile; no duplicate old wordmark. */
body .header-shell .header .brand > img.brand-logo-mobile,
body header.sub-header .sub-brand > img.brand-logo-mobile {
  display: block !important;
  width: 174px !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 2186 / 330;
  object-fit: contain !important;
  object-position: left center;
}
body .header-shell .header .brand img:not(.brand-logo-mobile),
body .header-shell .header .brand > span,
body header.sub-header .sub-brand img:not(.brand-logo-mobile),
body header.sub-header .sub-brand > span { display: none !important; }
body dialog.mobile-menu-sheet:not([open]),
body dialog.mobile-menu-sheet[hidden],
body .mobile-menu-fallback-backdrop[hidden] { display: none !important; }

/* Keep the availability label compact on both header variants. */
body .header-shell .header .header-availability,
body .header-shell .header .header-availability-copy > strong,
body header.sub-header .sub-actions > .sub-pill.primary { letter-spacing: 0 !important; }

@media (max-width: 650px) {
  body nav:is(.mobile-dock,.sub-dock) {
    --glass-dock-height: 64px;
    display: grid !important;
    position: fixed;
    z-index: 88;
    left: 50% !important;
    right: auto !important;
    top: auto;
    bottom: max(20px,calc(env(safe-area-inset-bottom,0px) - 12px)) !important;
    box-sizing: border-box;
    width: 126px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--glass-dock-height) !important;
    min-height: var(--glass-dock-height) !important;
    max-height: var(--glass-dock-height) !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: minmax(44px,1fr) !important;
    align-items: stretch;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,rgba(38,39,43,.74),rgba(17,18,21,.78)) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.2);
    backdrop-filter: blur(26px) saturate(1.2);
    box-shadow: 0 12px 36px rgba(0,0,0,.38);
    color: #fff;
    transform: translateX(-50%) scale(1) !important;
    transform-origin: center bottom;
    transition: transform 520ms cubic-bezier(.4,0,.2,1);
  }
  body nav:is(.mobile-dock,.sub-dock).is-compact {
    transform: translateX(-50%) scale(.8) !important;
  }
  body nav:is(.mobile-dock,.sub-dock) > button.mobile-menu-launcher {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 44px !important;
    height: 100% !important;
    min-height: 44px !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: Arial, sans-serif;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  /* Draw the 10px inset without reducing the button's actual touch area. */
  body nav:is(.mobile-dock,.sub-dock) > button.mobile-menu-launcher::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 100px;
    background: rgba(0,0,0,.2);
    pointer-events: none;
  }
  body nav:is(.mobile-dock,.sub-dock) > button.mobile-menu-launcher:active::before { background: rgba(0,0,0,.32); }
  body nav:is(.mobile-dock,.sub-dock) > button.mobile-menu-launcher:focus-visible { outline: 2px solid #e6efff; outline-offset: -2px; }
  body nav:is(.mobile-dock,.sub-dock) > button.mobile-menu-launcher > svg {
    display: block !important;
    position: relative;
    width: 11px !important;
    height: 10px !important;
    min-width: 11px !important;
    max-width: 11px !important;
    min-height: 10px !important;
    max-height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none;
    color: #fff !important;
    flex: none;
    transform: none !important;
    pointer-events: none;
  }
  body nav:is(.mobile-dock,.sub-dock) > button.mobile-menu-launcher > span {
    display: block !important;
    position: relative;
    font-size: 12px !important;
    font-weight: inherit;
    line-height: 1.2;
    letter-spacing: 2.8px;
    white-space: nowrap;
  }

  body.mobile-sheet-open { overflow: hidden; }
  body:is(.keyboard-open,.eventbot-open,.lock,.mobile-sheet-open) nav:is(.mobile-dock,.sub-dock),
  body nav:is(.mobile-dock,.sub-dock)[hidden] { display: none !important; }
  body:has(dialog[open]) nav:is(.mobile-dock,.sub-dock) { display: none !important; }

  /* The dialog lives outside page containers, including on article pages. */
  body dialog.mobile-menu-sheet[open] {
    display: block;
    position: fixed;
    z-index: 1001;
    inset: auto 0 calc(12px + env(safe-area-inset-bottom,0px));
    box-sizing: border-box;
    width: calc(100% - 24px);
    min-width: 0;
    max-width: 480px;
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    margin: 0 auto;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 28px;
    background: linear-gradient(160deg,rgba(34,35,40,.97),rgba(14,15,19,.98));
    color: #f6f5f1;
    box-shadow: 0 22px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.075);
    font-family: inherit;
    text-align: left;
    animation: mobile-menu-sheet-enter 220ms cubic-bezier(.22,.68,0,1) both;
  }
  body dialog.mobile-menu-sheet::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin: -10px auto 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
  }
  body dialog.mobile-menu-sheet::backdrop {
    background: rgba(0,0,0,.56);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  body .mobile-menu-fallback-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(0,0,0,.56);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  body dialog.mobile-menu-sheet .mobile-menu-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0;
  }
  body dialog.mobile-menu-sheet .mobile-menu-sheet-head h2 {
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    color: #f6f5f1;
    font-family: inherit;
    font-size: 20px !important;
    font-weight: 650;
    line-height: 1.2 !important;
    letter-spacing: -.025em;
    text-align: left;
  }
  body dialog.mobile-menu-sheet button[data-sheet-close] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(255,255,255,.045);
    color: #fff;
    font: inherit;
    cursor: pointer;
  }
  body dialog.mobile-menu-sheet nav.mobile-sheet-links {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  body dialog.mobile-menu-sheet nav.mobile-sheet-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-width: 0;
    min-height: 48px;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    color: #f6f5f1;
    font-family: inherit;
    font-size: 15px;
    font-weight: 550;
    line-height: 1.4;
    letter-spacing: 0;
    text-decoration: none;
  }
  body dialog.mobile-menu-sheet .mobile-sheet-contact {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  body dialog.mobile-menu-sheet .mobile-sheet-contact > :is(a,button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    min-height: 48px;
    gap: 6px;
    margin: 0;
    padding: 12px 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.065);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  body dialog.mobile-menu-sheet :is(a,button) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  body dialog.mobile-menu-sheet :is(a,button):focus-visible { outline: 2px solid #e6efff; outline-offset: 2px; }
  body dialog.mobile-menu-sheet :is(a,button):active { background: rgba(255,255,255,.13); }
  body dialog.mobile-menu-sheet :is(a,button) > :is(svg,img) {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  /* Same glass family above and below; the header only gains a surface on scroll. */
  body .header-shell > .header,
  body header.sub-header {
    position: fixed;
    z-index: 80;
    left: 50%;
    right: auto;
    top: calc(8px + env(safe-area-inset-top,0px));
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: calc(100% - 32px) !important;
    min-width: 0;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    gap: 8px;
    margin: 0 !important;
    padding: 6px 6px 6px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: translateX(-50%);
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease;
  }
  body .header-shell > .header.is-glass-scrolled,
  body header.sub-header.is-glass-scrolled {
    border-color: rgba(255,255,255,.16) !important;
    background: linear-gradient(180deg,rgba(38,39,43,.74),rgba(17,18,21,.78)) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.2) !important;
    backdrop-filter: blur(26px) saturate(1.2) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.09) !important;
  }
  body .header-shell .header .brand,
  body header.sub-header .sub-brand {
    display: flex;
    align-items: center;
    flex: 1 1 150px;
    min-width: 0;
    max-width: 150px;
    gap: 0;
    color: #fff;
    text-decoration: none;
  }
  body .header-shell .header .brand img:not(.brand-logo-mobile),
  body .header-shell .header .brand > span,
  body header.sub-header .sub-brand img:not(.brand-logo-mobile),
  body header.sub-header .sub-brand > span { display: none !important; }
  body .header-shell .header .brand > img.brand-logo-mobile,
  body header.sub-header .sub-brand > img.brand-logo-mobile {
    display: block !important;
    flex: 0 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 150px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2186 / 330;
    margin: 0;
    padding: 0;
    object-fit: contain !important;
    object-position: left center;
  }
  body .header-shell .header .nav-right,
  body header.sub-header .sub-actions { flex: 0 0 auto; gap: 0; }
  body .header-shell .header .nav-right > .header-availability,
  body header.sub-header .sub-actions > .sub-pill.primary {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 999px !important;
    background: #f4f3ef !important;
    border-color: #f4f3ef !important;
    color: #111 !important;
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  body .header-shell > .header,
  body header.sub-header { gap: 6px; }
}

@keyframes mobile-menu-sheet-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 650px) and (prefers-reduced-motion: reduce) {
  body nav:is(.mobile-dock,.sub-dock),
  body nav:is(.mobile-dock,.sub-dock) *,
  body nav:is(.mobile-dock,.sub-dock) *::before,
  body dialog.mobile-menu-sheet,
  body dialog.mobile-menu-sheet *,
  body dialog.mobile-menu-sheet::backdrop,
  body .header-shell > .header,
  body header.sub-header { animation: none !important; transition: none !important; }
}