/* Microsite extras — allowed additions only (contract §9 / 02 §9 / 02 §12). */
html { overflow-x: clip; }
/* Hero height tracks the main-site banner crop ratios so the whole
   crop is visible. Section grows only when overlaid content is taller. */
[data-coast="hero"] { min-height: calc(109px + 100vw * 0.403125); } /* banner 1920x774 */
@media (max-width: 1023.98px) {
  [data-coast="hero"] { min-height: calc(109px + 100vw * 0.576923); } /* bannerMd 1300x750 */
}
@media (max-width: 767.98px) {
  [data-coast="hero"] { min-height: calc(109px + 100vw * 0.779948); } /* bannerSm 768x599 */
}
@media (max-width: 599.98px) {
  [data-coast="hero"] { min-height: calc(109px + 100vw * 1.6667); } /* micrositeMobile 900x1500 */
}
@media (max-width: 960px) {
  [data-coast="hero"] {
    align-items: center !important;
    padding-top: 109px; /* flex-center in the image, not the chrome */
  }
  .hero-pad {
    padding: 32px 20px !important; /* override tokens 96/120 */
  }
}
/* tokens.css sets overflow-x:hidden on body, which computes overflow-y to auto
   and kills position:sticky on the reviews stats / FAQ title columns. */
body { overflow-x: clip; }
:focus-visible {
  outline: 2px solid var(--amber-400);
  outline-offset: 2px;
}
@media (max-width: 960px) {
  /* 02 §9: Safari zooms any focused control whose computed font-size is
     < 16px. Canonical overlays set 14px (chat) and 15px (quote/callback/
     review) inline; without !important this rule loses and punch-in zoom
     returns. Desktop (>=961px) keeps the design sizes. */
  input, select, textarea { font-size: 16px !important; }
}
[data-coast] button,
[data-coast] a,
.subnav-scroll button {
  position: relative;
}
[data-coast] button::after,
[data-coast] a::after,
.subnav-scroll button::after {
  content: '';
  position: absolute;
  inset: -6px;
}

[data-coast="reviews"] [data-coast$=".p-1"],
[data-coast="page-reviews"] [data-coast$=".p-1"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}

.ms-review-more {
  display: inline-flex;
  align-items: center;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--magenta-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 0 14px;
}
[data-coast] button.ms-review-more::after {
  inset: -15px 0;
}
.ms-review-more:active {
  opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {
  .ms-review-more:hover {
    text-decoration: underline;
  }
}
[data-ms-review-read-close] {
  position: relative;
}
[data-ms-review-read-close]::after {
  content: '';
  position: absolute;
  inset: -5px;
}

[data-coast="faq"] [data-coast$=".text-1"] p { margin: 0; }
[data-coast="faq"] [data-coast$=".text-1"] p + p { margin-top: 0.6em; }

[data-coast="listen.wrap.card-1"] iframe,
[data-coast="page-tracks.wrap-2.card-1"] iframe {
  width: 100%;
  border: 0;
  display: block;
}

.cf-turnstile {
  margin: 12px 0 4px;
}
[data-coast="enquiry.wrap.card-1"] .cf-turnstile {
  margin: 0 0 16px;
}
#enquiry {
  scroll-margin-top: 109px;
}

/* --------------------------------------------------------------------------
   Overlay primitive (iOS). Scoped to html.ms-ov-open / [data-ms-layer].
   Canonical inline styles and tokens.css stay verbatim; !important is used
   only where those would otherwise win. Each exception is commented.
   -------------------------------------------------------------------------- */

[data-ms-layer].ms-ov {
  position: fixed;
  top: var(--ms-ov-top, 0px);
  left: var(--ms-ov-left, 0px);
  width: var(--ms-ov-width, 100%);
  /* Height is CSS-only. Do not drive this from visualViewport: iOS
     shrinks vv.height with the keyboard and would collapse the shell. */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  max-width: 100%;
  touch-action: none;
  overscroll-behavior: none;
}
[data-ms-layer="quote"].ms-ov,
[data-ms-layer="lightbox"].ms-ov { z-index: 100; }
[data-ms-layer="callback"].ms-ov,
[data-ms-layer="enquiry"].ms-ov,
[data-ms-layer="review"].ms-ov,
[data-ms-layer="review-read"].ms-ov { z-index: 101; }
[data-ms-layer="chat"].ms-ov { z-index: 102; }

/* Chat is a corner panel on desktop: the wrap must not block the page. */
[data-ms-layer="chat"].ms-ov { pointer-events: none; }
[data-ms-layer="chat"].ms-ov .chat-panel { pointer-events: auto; }

.ms-ov-scroll {
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Re-parent fixed overlay roots onto the visual-viewport wrap. */
html.ms-ov-open [data-ms-layer] > [data-coast="quote"],
html.ms-ov-open [data-ms-layer] > [data-coast="callback"],
html.ms-ov-open [data-ms-layer] > [data-coast="enquiry-modal"],
html.ms-ov-open [data-ms-layer] > [data-coast="review"],
html.ms-ov-open [data-ms-layer] > [data-coast="lightbox"],
html.ms-ov-open [data-ms-layer] > [data-ms-review-read] {
  position: absolute !important;
  inset: 0 !important;
  overflow-x: hidden;
  max-width: 100%;
  touch-action: none;
}

html.ms-ov-open [data-coast="callback"],
html.ms-ov-open [data-coast="enquiry-modal"],
html.ms-ov-open [data-coast="review"],
html.ms-ov-open [data-ms-review-read] {
  padding-top: max(20px, env(safe-area-inset-top, 0px)) !important;
  padding-right: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: 20px;
  overflow: hidden;
}

html.ms-ov-open [data-coast="callback.panel"],
html.ms-ov-open [data-coast="enquiry-modal.panel"],
html.ms-ov-open [data-coast="review.panel"],
html.ms-ov-open [data-ms-review-read-panel] {
  max-height: 100% !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-width: 100%;
}

html.ms-ov-open [data-coast="callback.panel.box-1.row-1"],
html.ms-ov-open [data-coast="enquiry-modal.panel.box-1.row-1"],
html.ms-ov-open [data-coast="review.panel.box-1.row-1"],
html.ms-ov-open [data-ms-review-read-panel] > div:first-child {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper-0);
}

html.ms-ov-open [data-coast="callback.panel.box-1.btn-request-my-callback"],
html.ms-ov-open [data-coast="enquiry-modal.panel.box-1.btn-send-my-enquiry"],
html.ms-ov-open [data-coast="review.panel.box-1.btn-submit-my-review"] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--paper-0);
  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
}

/* Quote chrome already sits outside quote.scroll; pad for the notch / home bar. */
html.ms-ov-open [data-coast="quote.bar"] {
  padding-top: calc(13px + env(safe-area-inset-top, 0px)) !important;
}
html.ms-ov-open [data-coast="quote.foot"] {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.ms-ov-open [data-coast="quote.step"] {
  max-width: 100%;
  min-width: 0;
}
html.ms-ov-open [data-coast="quote.step"] .split,
html.ms-ov-open [data-coast="quote.scroll"],
html.ms-ov-open [data-coast="quote.foot"] .quote-foot {
  min-width: 0;
  max-width: 100%;
}
/* 1fr is minmax(auto, 1fr): nowrap Pay CTAs, FULL RESERVATION + radio,
   and UA input min-width hold the checkout grids past ~450px. Inline
   grid-template-columns wins without !important. Keep two columns. */
html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-2.grid-1"],
html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-3.grid-2"],
html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-1.grid-1"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
@media (max-width: 449.98px) {
  html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-2.grid-1"],
  html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-3.grid-2"] {
    grid-template-columns: 1fr !important;
  }
}
html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-3.grid-1"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
}
html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-2.grid-1"] > *,
html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-3.grid-1"] > *,
html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-3.grid-2"] > *,
html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-1.grid-1"] > * {
  min-width: 0;
}
html.ms-ov-open [data-coast="quote.step"] input,
html.ms-ov-open [data-coast="quote.step"] select {
  min-width: 0;
  max-width: 100%;
}
html.ms-ov-open [data-coast="quote.step.grid-1.row-1.card-2.grid-1"] [data-coast$=".text-1"] {
  min-width: 0;
  overflow-wrap: anywhere;
}
html.ms-ov-open [data-ms-pay-go] {
  /* Inline white-space:nowrap on the added Pay CTAs holds the 2-col grid. */
  white-space: normal !important;
  min-width: 0;
  max-width: 100%;
}
html.ms-ov-open #ms-payment-element,
html.ms-ov-open #ms-link-authentication-element {
  min-width: 0;
  max-width: 100%;
}
/* Shot 1388 leftover: title + month/year row can overflow a 390 card. */
html.ms-ov-open [data-coast="quote.step.grid-1.card-2.row-1"] {
  flex-wrap: wrap;
  min-width: 0;
  gap: 10px;
}

html.ms-ov-open [data-coast="lightbox.btn-close"] {
  top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}

/* Chat: sit inside the wrap so 100vw / 100vh inline sizes cannot overflow. */
html.ms-ov-open .chat-panel {
  position: absolute !important;
}
@media (min-width: 961px) {
  html.ms-ov-open .chat-panel {
    width: min(400px, calc(100% - 24px)) !important;
    height: min(620px, calc(100% - 44px)) !important;
  }
}
@media (max-width: 960px) {
  /* tokens.css uses 94dvh from the bottom, which parks the close under the
     compact Safari pill. Fill the visual-viewport wrap instead. */
  html.ms-ov-open .chat-panel {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

html.ms-ov-open [data-coast="chat.header"],
html.ms-ov-open [data-coast="chat.composer"] {
  flex-shrink: 0;
}
html.ms-ov-open [data-coast="chat.header"] {
  min-width: 0;
}
html.ms-ov-open [data-coast="chat.header.btn-close"] {
  flex-shrink: 0;
}
html.ms-ov-open [data-coast="chat.header.btn-email-chat"] {
  flex-shrink: 1;
  min-width: 0;
}
/* Flex items default to min-height:auto, so the message list will not
   shrink under the keyboard and the composer gets clipped (shot 1384). */
html.ms-ov-open [data-coast="chat.body"],
html.ms-ov-open [data-coast="chat.gate"] {
  min-height: 0;
}
html.ms-ov-open [data-coast="chat.chips"] {
  flex-shrink: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Composer is a single-line input. Lock height so iOS focus cannot grow it. */
html.ms-ov-open [data-coast="chat.composer.field-ask-the-assistant"],
html.ms-ov-open [data-coast="chat.composer.field-ask-the-assistant"]:focus {
  font-size: 16px !important;
  line-height: 1.25;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  resize: none;
}

html.ms-ov-open [data-coast="chat.gate.btn-start-chatting"] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: rgba(16, 16, 23, 0.92);
}

/* Quote extras: video play overlay + inline preview (mirrors /book extras). */
.extra-card > [data-coast$=".box-1"] {
  position: relative;
}
.extra-card button.ms-extra-play {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0.68px solid #f0f0f0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(158.63deg, rgba(36, 36, 36, 0.5) 4.79%, rgba(0, 0, 0, 0.5) 90.53%);
  -webkit-backdrop-filter: blur(3.4px);
  backdrop-filter: blur(3.4px);
}
.extra-card button.ms-extra-play img {
  width: 12px;
  height: 14px;
  display: block;
}
.extra-card button.ms-extra-play:active {
  opacity: 0.85;
}
@media (hover: hover) and (pointer: fine) {
  .extra-card button.ms-extra-play:hover {
    background: linear-gradient(158.63deg, rgba(36, 36, 36, 0.65) 4.79%, rgba(0, 0, 0, 0.65) 90.53%);
  }
}