/* Site layer for every page with the public header: mobile header and menu, glass
   buttons, small-copy type, iOS form fixes and the Account app entry. Scoped to
   html.bw-site (set by site-head.js); legacy Guest pages are excluded. */

/* Jost (SIL Open Font License, /motion/fonts/OFL.txt) for small labels and spaced capitals. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/motion/fonts/jost-latin.woff2') format('woff2'); }
html.bw-site .eyebrow, html.bw-site .hero-kicker, html.bw-site .hero-bottom span, html.bw-site .bw-privileges thead th { font-family: 'Jost', 'DM Sans', sans-serif !important; font-weight: 500 !important; }

/* ---------- Header and menu (phones and small tablets) ---------- */
html.bw-site .bw-wordmark-rest { font: inherit; letter-spacing: inherit; color: inherit; }
@media (max-width: 900px) {
  /* language.css pins this with !important per width; the compact header is 64px. */
  html.bw-site.bw-site:not(.guest-booking) { --public-header-height: 64px !important; }
  html.bw-site header.membership-nav { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; height: 64px !important; min-height: 64px !important; padding: 0 16px !important; }
  html.bw-site header.membership-nav .brand-lockup { position: relative; z-index: 2; display: flex !important; align-items: center; gap: 10px; margin: 0 auto !important; }
  html.bw-site header.membership-nav .brand-mark, html.bw-site header.membership-nav .logo { width: 28px !important; height: 28px !important; }
  html.bw-site header.membership-nav .wordmark { font-size: 15px !important; letter-spacing: 3px !important; white-space: nowrap; }
  html.bw-site .bw-wordmark-rest { display: none; }

  /* Icon only (the word stays for screen readers and translation), legible over photos. */
  .bw-menu-button { position: absolute; z-index: 3; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bw-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bw-menu-icon { position: relative; width: 22px; height: 10px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
  .bw-menu-icon i { position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .45s cubic-bezier(.16, 1, .3, 1), top .45s cubic-bezier(.16, 1, .3, 1); }
  .bw-menu-icon i:first-child { top: 0; }
  .bw-menu-icon i:last-child { top: 8.5px; }
  .bw-menu-open .bw-menu-icon i:first-child { top: 4.25px; transform: rotate(45deg); }
  .bw-menu-open .bw-menu-icon i:last-child { top: 4.25px; transform: rotate(-45deg); }

  /* The header's blur would trap the fixed panel inside the header: off while it shows. */
  html.bw-menu-active header.membership-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html.bw-menu-open { overflow: hidden; }

  html.bw-site header.membership-nav nav { position: fixed !important; inset: 0 !important; z-index: 1; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; margin: 0 !important; padding: 104px 28px max(28px, env(safe-area-inset-bottom)) !important; background: #080808 !important; opacity: 0 !important; visibility: hidden !important; transition: opacity .35s ease, visibility 0s linear .35s; overflow-y: auto; }
  html.bw-menu-open header.membership-nav nav { opacity: 1 !important; visibility: visible !important; transition: opacity .35s ease; }

  /* Links drop in one by one; on closing they leave together, quickly. */
  /* On Account the link sits in .nav-account-menu with the sign-out button: same rows. */
  html.bw-site header.membership-nav nav > .nav-account-menu { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0; transform: translateY(-14px); transition: opacity .2s ease, transform .2s ease; }
  html.bw-site header.membership-nav nav > a:not(.bw-menu-cta), html.bw-site header.membership-nav nav > .nav-account-menu > a, html.bw-site header.membership-nav nav > .nav-account-menu > .nav-signout:not([hidden]) { display: block !important; width: 100% !important; min-height: 0 !important; box-sizing: border-box !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 13px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .09) !important; color: #fff !important; font: 500 22px/1.2 'Manrope', sans-serif !important; letter-spacing: -.01em !important; text-align: left !important; opacity: 0; transform: translateY(-14px); transition: opacity .2s ease, transform .2s ease; }
  /* The current page: a small dot after the word (replaces the site's full-width underline). */
  html.bw-site header.membership-nav nav a[aria-current="page"]::after { content: '' !important; position: static !important; display: inline-block !important; width: 5px !important; height: 5px !important; margin: 0 0 0 10px !important; border-radius: 50% !important; background: currentColor !important; transform: none !important; opacity: 1 !important; vertical-align: middle !important; }
  /* Inside the Account wrapper the wrapper itself animates; its contents just show. */
  html.bw-site header.membership-nav nav > .nav-account-menu > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.bw-menu-open header.membership-nav nav > * { opacity: 1 !important; transform: none !important; transition: opacity .5s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 60ms + 90ms), transform .65s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 60ms + 90ms) !important; }

  /* The site's language switcher is replaced in the panel by a row of choices. */
  html.bw-site header.membership-nav nav .language-control { display: none !important; }
  .bw-menu-lang { display: flex; gap: 8px; margin: auto 0 16px; padding-top: 28px; opacity: 0; transform: translateY(-14px); transition: opacity .2s ease, transform .2s ease; }
  html.bw-site.bw-site:not(#a):not(#b) .bw-menu-lang button { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0 !important; padding: 10px 0 !important; border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 999px !important; background: none !important; background-image: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: rgba(255, 255, 255, .7) !important; font: 500 13px/1 'DM Sans', sans-serif !important; cursor: pointer; }
  html.bw-site.bw-site:not(#a):not(#b) .bw-menu-lang button[aria-pressed="true"] { border-color: #fff !important; color: #fff !important; }

  .bw-menu-cta { display: block; text-align: center; opacity: 0; transform: translateY(-14px); }
}
@media (min-width: 901px) {
  .bw-menu-button, .bw-menu-cta, .bw-menu-lang { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.bw-site header.membership-nav nav, html.bw-site header.membership-nav nav > * { transition: none !important; }
}

/* The scrollbar's space is always reserved (classic scrollbars), so the header and its nav sit
   in the same place on short pages (no scrollbar) and long ones: no 15 px jump between pages. */
html.bw-site { scrollbar-gutter: stable; }

/* ---------- Glass buttons (phones), after Apple's Liquid Glass ----------
   Tagged by site-head.js. Light buttons stay the clear call to action (bright crystal,
   dark text); dark/outline ones become clear glass. Reservation steps and the terms
   panel keep their plain style (owner decision in Codex's glass release). The repeated
   class and :not(#id) outrank the site's own glass rule (ID-level, !important). */
@media (max-width: 900px) {
  html.bw-site.bw-site.bw-site:not(#a):not(#b) .bw-glass { position: relative; overflow: hidden; isolation: isolate; border-radius: 999px !important; -webkit-backdrop-filter: blur(12px) saturate(160%) !important; backdrop-filter: blur(12px) saturate(160%) !important; transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease !important; }
  html.bw-site.bw-site.bw-site:not(#a):not(#b) .bw-glass::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); }
  /* The light glass is 88% white: its backdrop blur was invisible but recomputed on every
     frame while the hero moves under it (iPhone). */
  html.bw-site.bw-site.bw-site:not(#a):not(#b) .bw-glass-light { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255, 255, 255, .88) !important; background-image: none !important; color: #0e0e0e !important; border: 1px solid rgba(255, 255, 255, .9) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(0, 0, 0, .12), 0 10px 28px -8px rgba(0, 0, 0, .55) !important; }
  html.bw-site.bw-site.bw-site:not(#a):not(#b) .bw-glass-dark { background: rgba(255, 255, 255, .09) !important; background-image: none !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 1px rgba(255, 255, 255, .06), 0 10px 28px -10px rgba(0, 0, 0, .6) !important; }
  html.bw-site.bw-site.bw-site:not(#a):not(#b) .bw-glass-dark::before { background: radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%); }
  html.bw-site.bw-site.bw-site:not(#a):not(#b) .bw-glass:active { transform: scale(.97); }
  /* The menu button is a bare icon: none of the site's glass button styling. */
  html.bw-site.bw-site.bw-site:not(#a):not(#b) .bw-menu-button { background: none !important; background-image: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; }
  /* The menu's reservation button arrives last, with the links. */
  html.bw-site.bw-site.bw-site:not(#a):not(#b) .bw-menu-cta.bw-glass { transition: opacity .2s ease, transform .2s ease !important; }
  html.bw-site.bw-site.bw-site.bw-menu-open:not(#a):not(#b) .bw-menu-cta.bw-glass { transition: opacity .5s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 60ms + 90ms), transform .65s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 60ms + 90ms) !important; }
}

/* ---------- Homepage first screen on phones ----------
   The photograph fills the screen as it opens (iPhone, iPhone Pro and Pro Max sizes);
   the copy sits in the lower part and the promise strip starts below the fold. */
@media (max-width: 900px) {
  /* Safari on iPhone draws the page under its floating toolbar, about 60px past the
     large viewport: the photograph covers that too, so the next section never peeks
     through. The copy and the bottom row stay within the visible (small) viewport. */
  html.bw-site main > .hero { --bw-hero-h: calc(100lvh + 64px); --bw-hidden: calc(var(--bw-hero-h) - 100svh); min-height: calc(100vh + 64px) !important; min-height: var(--bw-hero-h) !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; padding-bottom: calc(78px + var(--bw-hidden)) !important; }
  html.bw-site main > .hero .hero-bottom { bottom: calc(25px + var(--bw-hidden)) !important; }
  html.bw-site main > .hero .hero-content { margin-top: auto !important; }
  /* Owner request: "Airport · Executive · Private" above "Greater Boston, Massachusetts". */
  html.bw-site .hero-bottom { flex-direction: column-reverse !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 8px !important; }
  html.bw-site .hero-bottom span { white-space: nowrap; font-size: 9.5px !important; letter-spacing: .12em !important; text-align: left !important; }
  html.bw-site .hero-bottom span:last-child { max-width: none !important; }
}

/* ---------- Small copy: spaced capitals (owner choice "C") ---------- */
html.bw-site:not(.guest-booking) main > .hero .hero-copy,
html.bw-site:not(.guest-booking) #coverage > h2 + p { font-family: 'Jost', 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase; line-height: 1.95 !important; font-style: normal !important; color: rgba(255, 255, 255, .74) !important; }
@media (min-width: 901px) {
  html.bw-site:not(.guest-booking) main > .hero .hero-copy, html.bw-site:not(.guest-booking) #coverage > h2 + p { font-size: 13.5px !important; }
}

/* ---------- iOS date and time fields ----------
   Safari on iPhone gives native date/time inputs an intrinsic width (they overflowed the
   reservation card) and shows them empty: keep them inside their box and add the icon. */
@supports (-webkit-touch-callout: none) {
  html.bw-site input[type="date"], html.bw-site input[type="time"] { -webkit-appearance: none !important; appearance: none !important; display: block !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 18px 18px !important; padding-right: 46px !important; }
  html.bw-site input[type="date"] { background-image: url('/motion/icons/calendar.svg') !important; }
  html.bw-site input[type="time"] { background-image: url('/motion/icons/clock.svg') !important; }
  html.bw-site input[type="date"]::-webkit-date-and-time-value, html.bw-site input[type="time"]::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; }
}

/* ---------- Account: the app entry ----------
   Desktop: under "Continue as a guest", inside the sign-in card. Phones: centred below
   the page content. The original entry stays for signed-in visitors. */
html.bw-site .bw-app-in-panel { display: none; }
@media (min-width: 901px) {
  html.bw-site .signin-panel .bw-app-in-panel { display: flex !important; flex-direction: column; align-items: center; gap: 12px; margin: 22px 0 0 !important; padding: 22px 0 0 !important; border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: rgba(255, 255, 255, .78) !important; font: 500 12px/1 'DM Sans', sans-serif !important; letter-spacing: .14em !important; text-transform: uppercase; text-decoration: none !important; }
  html.bw-site .noir-account:has(#signin:not([hidden])) .account-support .client-app-entry:not(.bw-app-in-panel) { display: none !important; }
}
@media (max-width: 900px) {
  html.bw-site .account-support { display: flex !important; flex-direction: column; align-items: center; text-align: center; }
  html.bw-site .account-support .client-app-entry { justify-content: center !important; margin-inline: auto !important; }
}
/* Use the approved font bytes for header text from its first visible frame. A
   swap-font fallback changes each label's advance width and moves the whole nav.
   Separate face names restrict native font-loading block to the affected header
   and first-screen headlines instead of changing every text face on the site. */
@font-face{font-family:'Blackwater Header Sans';src:url('/motion/fonts/DMSans-variable.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:block}
@font-face{font-family:'Blackwater Header Wordmark';src:url('/motion/fonts/Manrope-variable.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:block}
html.bw-site header.membership-nav nav,html.bw-site header.membership-nav nav a,html.bw-site header.membership-nav .language-control summary{font-family:'Blackwater Header Sans',sans-serif!important}
html.bw-site header.membership-nav .wordmark{font-family:'Blackwater Header Wordmark',sans-serif!important}
/* The same metric swap also moved the first-paint hero and app-dialog headlines.
   Keep their approved Manrope glyphs/metrics; their Georgia italics remain intact. */
html.bw-site .hero-line,html.bw-site #app-promotion-title{font-family:'Blackwater Header Wordmark',sans-serif!important}
html.bw-site .signin-intro h1,html.bw-site #signin-title,html.bw-site footer .wordmark{font-family:'Blackwater Header Wordmark',sans-serif!important}
@media(max-width:900px){html.bw-site header.membership-nav nav>a:not(.bw-menu-cta),html.bw-site header.membership-nav nav>.nav-account-menu>a{font-family:'Blackwater Header Wordmark',sans-serif!important}}