@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400;600;700&family=Fraunces:wght@400;500&display=swap");


/* base tokens */
/* =====================================================================
 * tokens.css — global CSS custom properties (design tokens).
 * =====================================================================
 *
 * These are the variables every styled component reads via `var(...)`.
 * Defaults here are NEUTRAL — every hotel's specific palette comes
 * from its brand record, applied at runtime when the brand store
 * resolves.
 *
 * Future agents:
 *   · Add a new token here only if it's used across multiple
 *     components. Single-component values stay scoped to that
 *     component's <style scoped>.
 *   · Token names follow `--site-<group>-<role>` (e.g.
 *     `--site-color-fg`, `--site-radius-md`). Stable so brand-
 *     application logic can map onto them deterministically.
 *   · The brand store doesn't yet write into these — that wiring
 *     gets added when the first styled section lands.
 */
:root {
  /* The token NAMES match what services/theme.js writes. Defaults
     here are neutral — every hotel's actual palette comes from its
     brand record at runtime. */
  --site-color-bg:        #fbf9f5;
  --site-color-bg-rgb:    251, 249, 245;  /* used for translucent overlays */
  --site-color-fg:        #1a1815;
  --site-color-fg-muted:  #6b665e;
  --site-color-accent:    #1a1815;
  --site-color-accent-fg: #fbf9f5;
  --site-color-border:    #e3ddd2;

  --site-font-display: system-ui, -apple-system, sans-serif;
  --site-font-body:    system-ui, -apple-system, sans-serif;

  --site-radius-sm:    2px;
  --site-radius-md:    6px;
  --site-radius-lg:    14px;

  /* COOKIE NOTICE tokens — what a GROUP's shared notice is drawn with. Follows
     the fallback chain of the SDK's own notice (components/consent/consent.css),
     so a shared notice and the settings panel it opens match on every hotel. */
  --site-notice-bg:           var(--consent-bg, var(--site-color-surface, var(--site-color-bg)));
  --site-notice-fg:           var(--consent-fg, var(--site-color-fg));
  --site-notice-muted:        color-mix(in srgb, var(--site-notice-fg) 68%, transparent);
  --site-notice-accent:       var(--consent-accent, var(--site-color-accent, var(--site-notice-fg)));
  --site-notice-on-accent:    var(--consent-on-accent, var(--site-color-on-accent, var(--site-notice-bg)));
  --site-notice-rule:         color-mix(in srgb, var(--site-notice-fg) 14%, transparent);
  --site-notice-radius:       var(--consent-radius, var(--site-radius, 14px));
  --site-notice-font-display: var(--site-font-display);
  --site-notice-font-body:    var(--site-font-body);

  /* FOOTER tokens — the surface a GROUP's shared footer is drawn with
     (settings `shared_components`). One footer is written once and linked to
     every site of a group, so it may read nothing a theme invents for itself
     (`--hdt-*`, `--bab-*`, literal hex) — only these. Each falls back to the
     site's general palette and type, so a theme that sets none of them still
     gets a footer in its own colours; a theme that wants its footer ground or
     link colour exact sets the token in its own `tokens.css`. */
  --site-footer-bg:           var(--site-color-fg);
  --site-footer-fg:           var(--site-color-bg);
  --site-footer-muted:        color-mix(in srgb, var(--site-footer-fg) 68%, transparent);
  --site-footer-link:         var(--site-footer-fg);
  --site-footer-accent:       var(--site-color-accent);
  --site-footer-rule:         color-mix(in srgb, var(--site-footer-fg) 18%, transparent);
  --site-footer-font-display: var(--site-font-display);
  --site-footer-font-body:    var(--site-font-body);
  --site-footer-logo-h:       44px;
  /* A texture laid behind the footer (a shared footer's `ground` media): how
     strongly it shows, and the size one tile is drawn at. */
  --site-footer-texture-opacity: 0.18;
  --site-footer-texture-size:    480px;

  /* ⚠️ A SEED, NOT A MEASUREMENT. `App.vue` measures the real bar after mount
     and overwrites this on :root, along with `--site-header-reserve` — what
     the shell actually pads by, which is 0 for a bar in flow. Kept only so
     rules that read it before first measurement have a sane number. */
  --site-header-h:     76px;
  --site-header-reserve: 0px;

  /* ===================================================================
   * STRUCTURAL tokens — the theme's visual RHYTHM, not just its palette.
   * ===================================================================
   *
   * These extend the stable `--site-*` surface beyond colour/font/radius
   * so the LOCKED booking pages (BookView / CheckoutView / Confirmation)
   * can inherit a theme's FULL visual language — type scale, spacing,
   * elevation, and motion — instead of looking like a generic recolour.
   *
   * Defaults here are deliberately NEUTRAL (a clean, calm shell). Each
   * generated theme's `theme/tokens.css` MAPS its bespoke scale onto
   * these names (see the design-tokens skill) so the booking surface
   * picks up the same rhythm as the rest of the site. Setting these is
   * additive + backward-compatible: a theme that sets none of them still
   * renders correctly on the neutral defaults below.
   *
   * As with colours, the names are STABLE so theme-application logic can
   * map onto them deterministically.
   */

  /* --- Type scale ---------------------------------------------------
   * Display sizes for hero/section headings, body sizes for prose +
   * controls. Fluid `clamp()` so the neutral shell reads well at any
   * width; a theme overrides with its own step ladder. */
  --site-font-size-display-xl: clamp(2.25rem, 5vw, 3.5rem);
  --site-font-size-display-lg: clamp(1.75rem, 3.5vw, 2.5rem);
  --site-font-size-display-md: clamp(1.25rem, 2vw, 1.5rem);
  --site-font-size-body-lg:    1.0625rem;
  --site-font-size-body:       0.9375rem;
  --site-font-size-body-sm:    0.8125rem;

  --site-line-height-display:  1.1;
  --site-line-height-body:     1.55;

  --site-letter-spacing-tight:  -0.01em;
  --site-letter-spacing-normal: 0;

  /* --- Spacing ladder ----------------------------------------------
   * A geometric-ish step used for gaps, padding, and rhythm. Themes
   * remap to their own gutter/section scale. */
  --site-space-xs: 0.5rem;
  --site-space-sm: 0.75rem;
  --site-space-md: 1.25rem;
  --site-space-lg: 2rem;
  --site-space-xl: 3rem;

  /* --- Elevation ----------------------------------------------------
   * Soft, neutral shadows. Themes supply brand-tinted equivalents. */
  --site-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --site-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* --- Motion -------------------------------------------------------
   * One easing + one base duration the locked pages reach for on
   * transitions. Themes set their committed curve/timing here so the
   * booking surface moves with the same feel as the rest of the site. */
  --site-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --site-duration: 240ms;

  /* --- Legacy / alternate token vocabulary (backward-compat) --------
   * Some generated themes' components were authored against an older
   * --site-* naming scheme — a NUMERIC spacing scale (--site-space-1..6)
   * and --site-text-*/--site-track-*/--site-leading-*/--site-dur-* names —
   * rather than the named scale above. When a component reaches for a name
   * not defined anywhere, that custom property resolves to NOTHING and the
   * declaration is dropped (e.g. `gap: clamp(var(--site-space-3),…)` becomes
   * `normal` → a nav with no spacing; `font-size: var(--site-text-h1)` falls
   * back to 16px → collapsed type). Aliasing the legacy names onto the canonical
   * tokens here — the always-loaded base — keeps EVERY component resolving
   * regardless of which vocabulary it was generated against. Purely additive;
   * themes built on the named scale are unaffected. */
  --site-space-1: var(--site-space-xs);
  --site-space-2: var(--site-space-sm);
  --site-space-3: var(--site-space-md);
  --site-space-4: var(--site-space-lg);
  --site-space-5: var(--site-space-xl);
  --site-space-6: var(--site-space-xl);

  --site-text-hero:    var(--site-font-size-display-xl);
  --site-text-display: var(--site-font-size-display-xl);
  --site-text-h1:      var(--site-font-size-display-lg);
  --site-text-h2:      var(--site-font-size-display-md);
  --site-text-h3:      var(--site-font-size-display-md);
  --site-text-lead:    var(--site-font-size-body-lg);
  --site-text-body:    var(--site-font-size-body);
  --site-text-strong:  var(--site-font-size-body);
  --site-text-muted:   var(--site-font-size-body);
  --site-text-sm:      var(--site-font-size-body-sm);
  --site-text-label:   var(--site-font-size-body-sm);
  --site-text-caption: var(--site-font-size-body-sm);
  --site-text-micro:   var(--site-font-size-body-sm);

  --site-leading-tight: var(--site-line-height-display);
  --site-leading-snug:  1.25;
  --site-leading-body:  var(--site-line-height-body);

  --site-track-tight: var(--site-letter-spacing-tight);
  --site-track-caps:  0.08em;
  --site-track-label: 0.12em;
  --site-track-cta:   0.04em;
  --site-track-wide:  0.16em;

  --site-dur-fast: 160ms;
  --site-dur-base: var(--site-duration);
  --site-dur-slow: 420ms;

  --site-radius-none: 0;
  --site-radius-xs:   3px;
  --site-bar-h:       var(--site-header-h);
  --site-max:         1200px;
  --site-hairline-w:  1px;
}

/* =====================================================================
 *  Base typography wiring.
 *
 *  Every visible character on the site reads its font through these
 *  cascaded rules — so flipping `--site-font-*` (which the brand
 *  store does at runtime) instantly changes the font everywhere
 *  without component-by-component overrides.
 *
 *    body, p, button, input, select, textarea  →  --site-font-body
 *    h1..h4                                    →  --site-font-display
 *
 *  Components that want to OPT INTO display type for non-heading
 *  text should add `font-family: var(--site-font-display)` on the
 *  relevant selector (e.g. drawer links). Components that want a
 *  different family for ONE element can override locally. The rule
 *  below establishes the right defaults so ad-hoc overrides are
 *  rare.
 * ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, #app { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  font-family: var(--site-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings always pull from the display family (Bebas Neue / Fraunces /
   etc., depending on the hotel). If a hotelier picks the same family
   for both display + body, the variable resolves the same way and
   nothing visually changes. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--site-font-display);
  margin: 0;
}

/* Form controls don't inherit font-family by default — wire them
   explicitly so brand fonts apply to inputs, buttons, etc. */
button, input, select, textarea { font: inherit; }

img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }

/* Preserve author line breaks in CMS prose.
 *
 * Room / amenity / event descriptions, summaries, "the space", etc. are
 * entered in dashboard textareas where newlines are meaningful. HTML's
 * default `white-space: normal` collapses those newlines into spaces, so
 * paragraph breaks the hotelier typed vanished on the live site.
 *
 * `pre-line` behaves EXACTLY like `normal` (collapses runs of spaces,
 * wraps long lines) except it keeps newlines — so this is a no-op for
 * any text without literal line breaks (price rows, labels, button text)
 * and only restores breaks in author-entered prose. Vue's template
 * compiler condenses static whitespace, so the only newlines reaching a
 * text node come from interpolated data — exactly what we want to keep.
 *
 * Scoped to prose-bearing elements (paragraphs + the SDK/theme prose
 * class roles). Components that pin their own white-space (nowrap on
 * price chips, pre-wrap elsewhere) load after this and win. */
p,
[class*="__prose"],
[class*="__description"],
[class*="__lede"],
[class*="__summary"],
[class*="__highlight-body"] {
  white-space: pre-line;
}

a { color: inherit; text-decoration: none; }

/* Minimal global reset so the empty homepage doesn't show a blank
   white page with default browser margins. Section components are
   responsible for their own spacing and type — keep this lean. */
*,
*::before,
*::after { box-sizing: border-box; }
html, body, #app { margin: 0; padding: 0; min-height: 100%; }
html.seo-hub body { background: var(--site-color-bg); }
body {
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: var(--site-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* theme tokens */
/* themes/default/tokens.css — baseline theme token layer.
 *
 * The DEFAULT (un-themed) theme styles entirely through the SDK base
 * tokens (`--site-color-*`, `--site-font-*`) defined in
 * src/styles/tokens.css, so it needs no overrides of its own. This file
 * exists so that `import '@theme/tokens.css'` in src/main.js always
 * resolves — the v2 builder OVERWRITES it per-hotel with a palette +
 * --<prefix>-* token set synthesized from the personality manifest, and
 * that themed copy must load AFTER the SDK base tokens to win the
 * cascade. A no-op here keeps default/v1 builds correct; v2 fills it in.
 */
:root {
  /* intentionally empty — default theme inherits the SDK base tokens */
}

/* ── v4 app-shell header clearance — 17john ──────────────────────────────────
   The SDK app-shell clears a FIXED top bar via `.app-shell__main { padding-top:
   var(--site-header-h) }` (=76px). 17john's SiteHeader is `position: fixed` and
   OVERLAYS the hero (transparent on the homepage), so that clearance is a harmful
   GAP: it pushed the full-bleed hero video DOWN below a blank ivory band. Zero it
   so the hero fills the viewport from top:0 and the header sits edge-to-edge over
   it — transparent on home, solid on inner pages — with no gap on any page. */
.app-shell__main { padding-top: 0 !important; }

/* [preview] baseline motion tokens (brand book omitted these — keeps reveal animations from hiding content) */
:root {
  --site-duration-reveal: 700ms;
  --site-duration-slow: 600ms;
  --site-duration: 320ms;
  --site-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --site-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --site-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --site-stagger: 80ms;
  --site-reveal-distance: 24px;
}


/* brand */
/* themes/default/brand.css — baseline global finish layer.
 *
 * A few universal refinements that read as "finished" on any theme.
 * The v2 builder OVERWRITES this per-hotel with a richer, manifest-
 * derived layer (texture + editorial-fixture utilities). Exists so
 * `import '@theme/brand.css'` always resolves.
 */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
::selection {
  background: var(--site-color-accent);
  color: var(--site-color-accent-fg);
}
:focus-visible {
  outline: 2px solid var(--site-color-accent);
  outline-offset: 3px;
}


/* theme skin */
/* =====================================================================
 * Concierge skin — DEFAULT.
 *
 * The bottom-floating assistant already inherits the site palette + fonts
 * (its components read --site-* tokens). This file is the bespoke "skin"
 * layer. Everything is scoped to `.cl` — the launcher + chat-panel root —
 * so anything set here re-skins ONLY the concierge, never the rest of the
 * site.
 *
 * v4: the brand book GENERATES a per-hotel copy of this file into the
 * hotel's workspace (`@theme/concierge/skin.css`), which OVERRIDES this
 * default. This default intentionally changes nothing — a hotel with no
 * generated skin looks exactly as it does today.
 *
 * Knobs a generated skin may set (ALL scoped under `.cl`):
 *   Re-tint — no component change needed, the concierge reads these:
 *     --site-color-accent / --site-color-on-accent
 *     --site-color-bg / --site-color-fg / --site-color-border
 *     --site-font-display / --site-font-body
 *   Concierge-specific shape:
 *     --concierge-fab-bg / --concierge-fab-fg / --concierge-fab-radius
 *     --concierge-panel-radius
 * ===================================================================== */
.cl {
  /* Shape defaults mirror the components' own fallbacks, so this file is a
     ready template for the generator. Re-tint vars are left UNSET so the
     concierge inherits the site palette until a generated skin sets them. */
  --concierge-fab-radius: 50%;
  --concierge-panel-radius: 18px;
}


/* chrome components */

.sdk-cta[data-v-9df4945d] {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 1px;   /* a hairline seam between the two halves of the split button */
}
.sdk-cta__primary[data-v-9df4945d] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-9df4945d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  cursor: pointer;
  /* Inherits the theme's button class, so it matches the primary half. */
}
.sdk-cta__caret[data-v-9df4945d] {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.18s ease;
  flex: none;
}
.sdk-cta--open .sdk-cta__caret[data-v-9df4945d] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-9df4945d] {
  position: absolute;
  top: 100%;
  right: 0;                  /* the CTA lives at the right edge of the bar */
  z-index: 1000;             /* above the concierge bubble (998–999) */
  min-width: max(200px, 100%);
  margin: 0.5rem 0 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--site-color-bg, #fff);
  color: var(--site-color-text, #111);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--site-radius, 4px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  font-family: var(--site-font-body, inherit);
}
.sdk-cta__panel[hidden][data-v-9df4945d] { display: none;
}
.sdk-cta__item[data-v-9df4945d] { margin: 0;
}
.sdk-cta__link[data-v-9df4945d] {
  display: block;
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--site-radius, 4px) * 0.75);
}
.sdk-cta__link[data-v-9df4945d]:hover,
.sdk-cta__link[data-v-9df4945d]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta__caret[data-v-9df4945d] { transition: none;
}
}


/* ⚠️⚠️ TEXT COLOUR COMES FROM `inherit` + `opacity`, NEVER A COLOUR TOKEN.
   This is the SDK chrome convention (see RegionSwitcher / LanguageSwitcher)
   and it exists because a theme's colour ROLES are not what their names
   suggest. Townhouse defines:

       --site-color-muted: #F3E6D0   (sun-bleached SAND — a FILL)

   so `color: var(--site-color-muted)` rendered this control's text in
   near-white cream on a #FFFFFF page: invisible. The muted TEXT role there
   is `--site-color-fg-muted` (#7A6350), and other themes spell it
   differently again. Inheriting the page's own ink and dialling it back
   with opacity is the only thing that is true on every theme.

   SURFACES are different — a floating panel must be opaque or the list
   renders over the page behind it — so those do read tokens, in the order
   surface → bg → white, all of which are genuinely background roles.
   Borders read `--site-color-border` (Townhouse: #DCC5A2 tan), radius
   `--radius-sm` (8px there), and the control's type reads
   `--site-font-ui` (Karla) because this is chrome, not body copy. */
.currency-panel[data-v-ddad464d] {
  max-height: min(24rem, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
  font-family: var(--site-font-ui, inherit);
  color: inherit;
}
.currency-panel__search[data-v-ddad464d] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.35rem;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  background: transparent;
  border: 1px solid;
  border-color: var(--site-color-border, currentColor);
  border-radius: var(--radius-sm, var(--site-radius-sm, 3px));
}
.currency-panel__search[data-v-ddad464d]::placeholder { color: inherit; opacity: 0.5;
}
.currency-panel__search[data-v-ddad464d]:focus-visible {
  outline: 2px solid var(--site-color-focus-ring, currentColor);
  outline-offset: 1px;
}
.currency-panel__group + .currency-panel__group[data-v-ddad464d] { margin-top: 0.5rem;
}
.currency-panel__group-label[data-v-ddad464d] {
  margin: 0.4rem 0 0.2rem;
  padding: 0 0.45rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--site-tracking-caps, 0.12em);
  text-transform: uppercase;
  opacity: 0.5;
}
.currency-panel__options[data-v-ddad464d] { list-style: none; margin: 0; padding: 0;
}
.currency-panel__option-btn[data-v-ddad464d] {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.45rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm, var(--site-radius-sm, 3px));
}
/* A wash of the page's OWN ink — works on a cream panel and a dark one
   alike, where a fixed grey would muddy one of them. */
.currency-panel__option-btn[data-v-ddad464d]:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.currency-panel__option-btn[data-v-ddad464d]:focus-visible {
  outline: 2px solid var(--site-color-focus-ring, currentColor);
  outline-offset: -2px;
}
.currency-panel__option-flag[data-v-ddad464d] { font-size: 1em; line-height: 1; flex: 0 0 auto;
}

/* ⚠️ The ellipsis has to live on the NAME, the flex CHILD. `text-overflow`
   on a flex CONTAINER reaches nothing — the text is cut with no "…", so the
   panel shows a currency name that does not exist. `min-width: 0` because a
   flex item will not shrink below its content width without it. */
.currency-panel__option-name[data-v-ddad464d] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.currency-panel__option-code[data-v-ddad464d] {
  flex: 0 0 auto;
  font-size: 0.74em;
  letter-spacing: 0.06em;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.currency-panel__option-mark[data-v-ddad464d] { flex: 0 0 auto; opacity: 0.75;
}
.currency-panel__option--active .currency-panel__option-btn[data-v-ddad464d] { font-weight: 600;
}
.currency-panel__empty[data-v-ddad464d] {
  margin: 0;
  padding: 0.6rem 0.45rem;
  font-size: 0.82rem;
  opacity: 0.65;
}


/* UNSCOPED, like HeaderCta's `.sdk-cta-btn`: the trigger sits in a THEME's
   header, beside elements wearing the theme's scope id, and the panel is
   teleported to <body>. Every selector is under an `sdk-hdr-cur` class, so
   nothing here can reach anything else. */

/* ⚠️ THE TRIGGER IS TEXT, LIKE THE HEADER'S OWN LINKS. Colour is the header's
   ink (`inherit`) — the only value right on a dark bar and a cream one alike;
   the type comes from a nav link via `--hc-*` (see `adoptHeaderType`). */
.sdk-hdr-cur {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex-shrink: 0;
  min-height: 40px;
  margin: 0;
  padding: 0 0.5em;
  border: 0;
  background: none;
  color: var(--hc-color, inherit);
  font-family: var(--hc-font, inherit);
  font-size: var(--hc-size, inherit);
  font-weight: var(--hc-weight, inherit);
  letter-spacing: var(--hc-track, inherit);
  text-transform: var(--hc-case, none);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sdk-hdr-cur__code {
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 140ms ease;
}
.sdk-hdr-cur:hover .sdk-hdr-cur__code,
.sdk-hdr-cur--open .sdk-hdr-cur__code {
  text-decoration-color: currentColor;
}
.sdk-hdr-cur:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}
/* The same chevron HeaderCta draws on its own caret button. */
.sdk-hdr-cur__caret {
  width: 0.38em;
  height: 0.38em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform 160ms ease;
  flex: none;
  opacity: 0.8;
}
.sdk-hdr-cur--open .sdk-hdr-cur__caret {
  transform: translateY(0.1em) rotate(-135deg);
}

/* The twin, at <body>: fixed in the header's bar, centred on its anchor. A
   transform on our OWN leaf anchors nothing else (H5). */
.sdk-hdr-cur--docked {
  position: fixed;
  transform: translateY(-50%);
}
/* On a see-through bar (a photograph behind it): a plate of the page's own
   ground under the words, so they read on sky and on shadow alike. */
.sdk-hdr-cur--plate {
  min-height: 36px;
  padding: 0 0.8em;
  background: color-mix(in srgb, var(--site-color-bg, #fff) 86%, transparent);
  border-radius: var(--site-radius-sm, 3px);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
}

/* ⚠️ A HEADER THAT CARRIES IT HOLDS STILL. Blue Apple Beach and Bleecker
   slide their header away on scroll-down (`translateY(-100%)` on the header
   itself). The hotelier turned this on so the guest can change currency
   whenever they look up; a control that scrolls off with the bar is not that.
   Only a header holding the control is touched, which only happens on /book
   with the switch on — every other page keeps the theme's behaviour. */
header:has(.sdk-hdr-cur),
[data-site-header]:has(.sdk-hdr-cur) {
  transform: none !important;
}

/* ── The panel, at <body> ───────────────────────────────────────────────
   Above the stay rail (900), the stay sheet (1000) and the concierge (999);
   under the room quick-view (12000), which is a modal over everything. */
.sdk-hdr-cur-pop {
  position: fixed;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--site-font-ui, var(--site-font-body, inherit));
  background: var(--site-color-surface, var(--site-color-bg, #fff));
  color: var(--site-color-fg, #111);
  border: 1px solid;
  border-color: var(--site-color-border, color-mix(in srgb, currentColor 18%, transparent));
  border-radius: var(--site-radius-sm, 3px);
  box-shadow: 0 18px 44px var(--site-color-shadow-strong, var(--site-color-shadow, rgba(0, 0, 0, 0.18)));
  animation: sdk-hdr-cur-in 160ms ease both;
}
/* The list scrolls; the charge line and the heading stay put above it. */
.sdk-hdr-cur-pop > :last-child { min-height: 0; overflow-y: auto;
}
.sdk-hdr-cur-pop__charge {
  margin: 0;
  padding: 0.75rem 0.85rem 0.65rem;
  border-bottom: 1px solid;
  border-bottom-color: var(--site-color-border, color-mix(in srgb, currentColor 14%, transparent));
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}
.sdk-hdr-cur-pop__charge-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.65;
}
.sdk-hdr-cur-pop__head {
  margin: 0;
  padding: 0.6rem 0.85rem 0.15rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: var(--site-tracking-caps, 0.12em);
  text-transform: uppercase;
  opacity: 0.5;
}
@keyframes sdk-hdr-cur-in {
from { opacity: 0; transform: translateY(-4px);
}
to   { opacity: 1; transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.sdk-hdr-cur-pop { animation: none;
}
.sdk-hdr-cur__caret, .sdk-hdr-cur__code { transition: none;
}
}


.sdk-cta[data-v-5e6a62a1] {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 1px;   /* a hairline seam between the two halves of the split button */
}
.sdk-cta__primary[data-v-5e6a62a1] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-5e6a62a1] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  cursor: pointer;
  /* Inherits the theme's button class, so it matches the primary half. */
}
.sdk-cta__caret[data-v-5e6a62a1] {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-0.1em, -0.1em);
  transition: transform 0.18s ease;
  flex: none;
}
.sdk-cta--open .sdk-cta__caret[data-v-5e6a62a1] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-5e6a62a1] {
  position: absolute;
  top: 100%;
  right: 0;                  /* the CTA lives at the right edge of the bar */
  z-index: 1000;             /* above the concierge bubble (998–999) */
  min-width: max(200px, 100%);
  margin: 0.5rem 0 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--site-color-bg, #fff);
  color: var(--site-color-text, #111);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--site-radius, 4px);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  font-family: var(--site-font-body, inherit);
}
.sdk-cta__panel[hidden][data-v-5e6a62a1] { display: none;
}
.sdk-cta__item[data-v-5e6a62a1] { margin: 0;
}
.sdk-cta__link[data-v-5e6a62a1] {
  display: block;
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--site-radius, 4px) * 0.75);
}
.sdk-cta__link[data-v-5e6a62a1]:hover,
.sdk-cta__link[data-v-5e6a62a1]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* The multi-button row. Only ever wraps 2+ buttons — one button keeps its
   own element as the root so the theme's scoped CSS lands unaided. */
.sdk-cta-group[data-v-5e6a62a1] {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-sm, 0.6rem);
  flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta__caret[data-v-5e6a62a1] { transition: none;
}
}


/* ⚠️ THE BUTTON NEVER WRAPS, AND THE THEME CANNOT REACH IT TO SAY SO.
   `link-class` lands ON the anchor itself, so a theme's `:deep(.my-cta)`
   descendant selector matches nothing — which is how "BOOK NOW" ended up on
   two lines in a one-line bar on hotel after hotel. One unscoped rule here,
   on a class the SDK stamps on every top-bar branch, is the only place that
   can hold it. */
.sdk-cta-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.sdk-cta-group .sdk-cta__btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.2em;
  border: 1px solid currentColor;
  border-radius: var(--site-radius, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.sdk-cta-group .sdk-cta__btn--secondary:hover,
.sdk-cta-group .sdk-cta__btn--secondary:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.sdk-cta-group .sdk-cta__btn--link {
  display: inline-flex;
  align-items: center;
  padding: 0.7em 0.2em;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.sdk-cta-group .sdk-cta__btn--link:hover,
.sdk-cta-group .sdk-cta__btn--link:focus-visible {
  text-decoration-thickness: 2px;
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta-group .sdk-cta__btn--secondary { transition: none;
}
}


/* =====================================================================
 *  THE STAY, IN THE SITE HEADER  (`booking_page.cart_placement: header`)
 *
 *  ⚠️ THIS LIVED IN `styles/mobile-funnel.css` FIRST AND DID NOT BELONG THERE.
 *  That file's whole safety argument is that every rule in it sits inside
 *  `@media (max-width: 720px)`, so a hotel's laptop page cannot move — and
 *  `viewport.css.test.mjs` enforces it. These rules are not phone rules: the
 *  control is rendered at every width, and a hotelier who moves the stay into
 *  the header means it there on a laptop too. Its VISIBILITY is decided in the
 *  script (the setting, a mounted sheet, a non-empty stay), never by a
 *  breakpoint — so there was nothing for a media query to gate, and putting it
 *  in the phone layer was a category error the test correctly refused.
 *
 *  ⚠️ UNSCOPED, like the `sdk-cta__btn--*` fallbacks this file already ships.
 *  The button wears the THEME's own `linkClass`, so the hotel's styling
 *  reaches it; these rules only supply what a button does not have — a glyph
 *  beside a count, and a thumb-sized box.
 * ===================================================================== */
.sdk-stay {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  cursor: pointer;
}
.sdk-stay__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sdk-stay__count {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


/* ---------------------------------------------------------------------
   Tokens — local to chrome. Editorial palette, hairlines, slow ease.
   ------------------------------------------------------------------ */
.j17-chrome[data-v-0472216d] {
  --j17-bar-h: 4.25rem;
  --j17-font-stack: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --j17-display: var(--site-font-display, 'Fraunces', Georgia, serif);
  --j17-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --j17-track: 0.34em;
  --j17-track-tight: 0.18em;
  --j17-hairline-on-ink: color-mix(in srgb, var(--site-color-bg) 32%, transparent);
  --j17-hairline-on-ivory: color-mix(in srgb, var(--site-color-fg) 14%, transparent);
}

/* De-slant the theme — emphasis renders upright, no replacement slant. */
.j17-chrome em[data-v-0472216d],
.j17-chrome i[data-v-0472216d] {
  font-style: normal;
}

/* ---------------------------------------------------------------------
   Drawer (≤1180px hamburger; full-bleed editorial menu)
   ------------------------------------------------------------------ */
.j17-drawer[data-v-0472216d] {
  position: fixed;
  inset: 0;
  z-index: 10040;
  pointer-events: none;
  opacity: 0;
  background: var(--site-color-fg);
  color: var(--site-color-bg);
  transition: opacity 0.5s var(--j17-ease);
}
.j17-drawer--open[data-v-0472216d] {
  pointer-events: auto;
  opacity: 1;
}

/* Desktop never shows the drawer — the inline nav replaces it. Guards
   against a stale open state surviving a resize past the breakpoint. */
@media (min-width: 1181px) {
.j17-drawer[data-v-0472216d],
  .j17-drawer--open[data-v-0472216d] {
    display: none;
}
}
.j17-drawer__inner[data-v-0472216d] {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(4.75rem, 10vh, 7.5rem) clamp(1.5rem, 7vw, 6rem) clamp(1.75rem, 5vh, 3.5rem);
  box-sizing: border-box;
  /* Whole drawer can scroll if a tiny phone runs out of vertical room. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.j17-drawer__masthead[data-v-0472216d] {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: clamp(1.5rem, 5vh, 3rem);
}
.j17-drawer__eyebrow[data-v-0472216d] {
  font-family: var(--j17-display);
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--site-color-bg) 64%, transparent);
}
.j17-drawer__rule[data-v-0472216d] {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--site-color-bg) 22%, transparent);
}
.j17-drawer__nav[data-v-0472216d] {
  align-self: center;
  width: 100%;
  min-height: 0;
}
.j17-drawer__list[data-v-0472216d] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
@media (max-height: 720px) {
  /* Tight viewports — pull the menu up against the masthead. */
.j17-drawer__nav[data-v-0472216d] { align-self: start;
}
}
.j17-drawer__item[data-v-0472216d] {
  border-top: 1px solid color-mix(in srgb, var(--site-color-bg) 16%, transparent);
}
.j17-drawer__item[data-v-0472216d]:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--site-color-bg) 16%, transparent);
}
.j17-drawer__link[data-v-0472216d] {
  display: grid;
  grid-template-columns: clamp(2.25rem, 6vw, 3.75rem) 1fr;
  align-items: baseline;
  gap: clamp(0.85rem, 3vw, 2rem);
  padding: clamp(0.78rem, 2.2vh, 1.5rem) 0;
  color: inherit;
  text-decoration: none;
  font-family: var(--j17-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.55rem, 5.5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.005em;
  transition: color 0.45s var(--j17-ease), padding 0.45s var(--j17-ease);
}
@media (max-height: 720px) {
.j17-drawer__link[data-v-0472216d] {
    font-size: clamp(1.35rem, 4vw, 2rem);
    padding: clamp(0.55rem, 1.6vh, 0.85rem) 0;
}
}
.j17-drawer__chapter[data-v-0472216d] {
  font-family: var(--j17-font-stack);
  font-style: normal;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: var(--j17-track);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--site-color-bg) 50%, transparent);
  align-self: center;
}
.j17-drawer__label[data-v-0472216d] {
  text-transform: lowercase;
  font-variant: normal;
}
.j17-drawer__item.is-current .j17-drawer__label[data-v-0472216d] {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--site-color-bg) 60%, transparent);
}
.j17-drawer__link[data-v-0472216d]:hover {
  padding-left: clamp(0.4rem, 1.25vw, 0.85rem);
  color: var(--site-color-bg);
}
.j17-drawer__foot[data-v-0472216d] {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vh, 2rem);
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* A single hairline separates the index list from the foot row — gives
 * the CTA visual ground instead of letting it float at the bottom edge. */
.j17-drawer__foot-rule[data-v-0472216d] {
  display: block;
  height: 1px;
  width: 100%;
  background: color-mix(in srgb, var(--site-color-bg) 22%, transparent);
}
.j17-drawer__foot-row[data-v-0472216d] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
@media (min-width: 560px) {
.j17-drawer__foot-row[data-v-0472216d] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
}
.j17-drawer__cta[data-v-0472216d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem clamp(2.25rem, 5vw, 3.25rem);
  border: 1px solid color-mix(in srgb, var(--site-color-bg) 80%, transparent);
  background: transparent;
  color: var(--site-color-bg);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--j17-font-stack);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--j17-track);
  line-height: 1;
  white-space: nowrap;
  transition:
    background 0.5s var(--j17-ease),
    color 0.5s var(--j17-ease),
    border-color 0.5s var(--j17-ease),
    letter-spacing 0.5s var(--j17-ease);
}
.j17-drawer__cta[data-v-0472216d]:hover {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  border-color: var(--site-color-bg);
  letter-spacing: calc(var(--j17-track) + 0.02em);
}
.j17-drawer__sig[data-v-0472216d] {
  font-family: var(--j17-font-stack);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: var(--j17-track);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--site-color-bg) 42%, transparent);
  /* Sig leans right next to the CTA on the wider layout. */
  text-align: right;
}
@media (max-width: 559px) {
.j17-drawer__sig[data-v-0472216d] { text-align: left;
}
}
@media (prefers-reduced-motion: no-preference) {
.j17-drawer:not(.j17-drawer--open) .j17-drawer__item[data-v-0472216d],
  .j17-drawer:not(.j17-drawer--open) .j17-drawer__cta[data-v-0472216d],
  .j17-drawer:not(.j17-drawer--open) .j17-drawer__masthead[data-v-0472216d] {
    opacity: 0;
    transform: translateY(0.85rem);
}
.j17-drawer--open .j17-drawer__masthead[data-v-0472216d] {
    animation: j17-drawer-rise-0472216d 0.7s var(--j17-ease) 0.05s both;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d] {
    animation: j17-drawer-rise-0472216d 0.7s var(--j17-ease) both;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d]:nth-child(1) { animation-delay: 0.12s;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d]:nth-child(2) { animation-delay: 0.18s;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d]:nth-child(3) { animation-delay: 0.24s;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d]:nth-child(4) { animation-delay: 0.30s;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d]:nth-child(5) { animation-delay: 0.36s;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d]:nth-child(6) { animation-delay: 0.42s;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d]:nth-child(7) { animation-delay: 0.48s;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d]:nth-child(8) { animation-delay: 0.54s;
}
.j17-drawer--open .j17-drawer__cta[data-v-0472216d] {
    animation: j17-drawer-rise-0472216d 0.7s var(--j17-ease) 0.62s both;
}
}
@keyframes j17-drawer-rise-0472216d {
from { opacity: 0; transform: translateY(0.85rem);
}
to   { opacity: 1; transform: translateY(0);
}
}

/* ---------------------------------------------------------------------
   Header bar — three-zone row: left controls, centered wordmark, right
   nav + RESERVE. Subtle ivory with hairline at scroll; transparent over
   hero media.
   ------------------------------------------------------------------ */
.j17-hdr[data-v-0472216d] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  height: var(--j17-bar-h);
  color: var(--site-color-fg);
  /* Solid ivory bar with a hairline at the bottom — no glass blur.
   * The editorial language is hairlines + ivory, not glassmorphism. */
  background-color: var(--site-color-bg);
  font-family: var(--j17-font-stack);
  transition:
    background-color 0.55s var(--j17-ease),
    color 0.45s var(--j17-ease);
}

/* Home + scroll-0: the bar floats over the hero video with no ivory
 * ground behind it. Render the chrome in the brown PRIMARY (fg), not
 * the ivory secondary (bg) — the secondary washes out against the
 * bright hero footage, leaving the nav invisible. Brown reads cleanly
 * over the video; once the bar gains its ivory ground on scroll it
 * already uses fg, so this just carries that legibility up to the top. */
.j17-hdr--transparent[data-v-0472216d] {
  background: transparent;
  color: var(--site-color-fg);
}
.j17-hdr__row[data-v-0472216d] {
  height: 100%;
  display: grid;
  /* min-content lets all three cells shrink to their natural size before
     overflowing. The centered wordmark stays aligned to the page center
     because both side cells are equal-flexed. */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(0.5rem, 1.5vw, 1.25rem);
  padding: 0 clamp(0.85rem, 3.5vw, 2.5rem);
  box-sizing: border-box;
}
.j17-hdr__left[data-v-0472216d] {
  display: flex;
  align-items: center;
  gap: clamp(0.65rem, 2.5vw, 1.85rem);
  min-width: 0;
}
.j17-hdr__right[data-v-0472216d] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  min-width: 0;
}
.j17-hdr__hairline[data-v-0472216d] {
  position: absolute;
  left: clamp(1.25rem, 4vw, 2.75rem);
  right: clamp(1.25rem, 4vw, 2.75rem);
  bottom: 0;
  height: 1px;
  background: var(--j17-hairline-on-ivory);
  opacity: 1;
  transition: opacity 0.5s var(--j17-ease);
}
.j17-hdr--transparent .j17-hdr__hairline[data-v-0472216d] {
  opacity: 0;
}

/* --- Dateline --------------------------------------------------- */
.j17-hdr__dateline[data-v-0472216d] {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: var(--j17-track);
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.78;
  white-space: nowrap;
}
@media (max-width: 720px) {
.j17-hdr__dateline[data-v-0472216d] { display: none;
}
}

/* --- Hamburger -------------------------------------------------- */
.j17-hamburger[data-v-0472216d] {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0.25em;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: var(--j17-track-tight);
  transition: color 0.4s var(--j17-ease);
}
.j17-hamburger__icon[data-v-0472216d] {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.35em;
  height: 0.65em;
  position: relative;
}
.j17-hamburger__icon span[data-v-0472216d] {
  display: block;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.42s var(--j17-ease), width 0.42s var(--j17-ease), opacity 0.32s var(--j17-ease);
}
.j17-hamburger__icon span[data-v-0472216d]:first-child {
  width: 100%;
}
.j17-hamburger__icon span[data-v-0472216d]:last-child {
  width: 65%;
  align-self: flex-end;
  margin-left: auto;
}
.j17-hamburger:hover .j17-hamburger__icon span[data-v-0472216d]:last-child {
  width: 100%;
}
.j17-hamburger[aria-expanded='true'] .j17-hamburger__icon span[data-v-0472216d]:first-child {
  transform: translateY(0.28em) rotate(45deg);
  width: 100%;
}
.j17-hamburger[aria-expanded='true'] .j17-hamburger__icon span[data-v-0472216d]:last-child {
  transform: translateY(-0.31em) rotate(-45deg);
  width: 100%;
  margin-left: 0;
  align-self: flex-start;
}
.j17-hamburger__label[data-v-0472216d] {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--j17-track);
}
@media (max-width: 540px) {
.j17-hamburger__label[data-v-0472216d] { display: none;
}
}

/* Hamburger + drawer are a mobile/tablet affordance only — above the
   desktop breakpoint the primary links live inline in the bar. */
@media (min-width: 1181px) {
.j17-hamburger[data-v-0472216d] { display: none;
}
}

/* Space-driven collapse — even above the desktop breakpoint, when JS
   measures the inline nav crowding the centered wordmark it flags the
   chrome compact and we fall back to the hamburger + drawer, so the
   logo image never overlaps a nav link. */
@media (min-width: 1181px) {
.j17-chrome--compact .j17-hdr__nav[data-v-0472216d] { display: none;
}
.j17-chrome--compact .j17-hamburger[data-v-0472216d] { display: inline-flex;
}
.j17-chrome--compact .j17-drawer[data-v-0472216d],
  .j17-chrome--compact .j17-drawer--open[data-v-0472216d] { display: block;
}
}

/* --- Inline primary nav (desktop) ------------------------------
 * Hidden below the desktop breakpoint, where the drawer takes over.
 * Tracked uppercase links with a hairline underline that draws in on
 * hover / for the current page — the editorial language of the bar. */
.j17-hdr__nav[data-v-0472216d] {
  display: none;
}
@media (min-width: 1181px) {
.j17-hdr__nav[data-v-0472216d] {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.25vw, 2.25rem);
}
}
.j17-hdr__nav-link[data-v-0472216d] {
  position: relative;
  text-decoration: none;
  color: currentColor;
  text-transform: uppercase;
  font-size: 0.685rem;
  font-weight: 500;
  letter-spacing: var(--j17-track-tight);
  line-height: 1;
  white-space: nowrap;
  padding-bottom: 0.3em;
  opacity: 0.82;
  transition: opacity 0.4s var(--j17-ease);
}
.j17-hdr__nav-link[data-v-0472216d]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--j17-ease);
}
.j17-hdr__nav-link[data-v-0472216d]:hover {
  opacity: 1;
}
.j17-hdr__nav-link[data-v-0472216d]:hover::after,
.j17-hdr__nav-link.is-current[data-v-0472216d]::after {
  transform: scaleX(1);
}
.j17-hdr__nav-link.is-current[data-v-0472216d] {
  opacity: 1;
}

/* --- Centered wordmark ------------------------------------------ */
.j17-hdr__brand[data-v-0472216d] {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: opacity 0.55s var(--j17-ease), transform 0.55s var(--j17-ease);
}
.j17-hdr__brand--concealed[data-v-0472216d] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
}
.j17-hdr__mark[data-v-0472216d] {
  display: block;
  height: 1.8em;
  width: auto;
  max-height: 2.4em;
  /* Cap mark width so it never crowds the side controls — we reserve
     ~38% of the viewport for the left+right clusters together. */
  max-width: min(200px, 28vw);
  object-fit: contain;
}
.j17-hdr__brand-fallback[data-v-0472216d] {
  width: 120px;
  height: 1.5rem;
  display: inline-block;
}
@media (max-width: 720px) {
.j17-hdr__mark[data-v-0472216d] { max-width: min(140px, 32vw); height: 1.6em;
}
}
@media (max-width: 420px) {
.j17-hdr__mark[data-v-0472216d] { max-width: min(108px, 30vw); height: 1.4em;
}
}

/* --- Reserve ----------------------------------------------------
 * Filled CTA at rest — primary-color background with inverse label.
 * Hover never goes transparent; we keep the filled state and use a
 * subtle 88%-tint shift + letter-spacing growth as the editorial
 * affordance. The fill colour follows the chrome:
 *   · transparent chrome over hero  → ivory fill, ink label
 *   · scrolled / inner pages        → ink fill,   ivory label
 */
.j17-hdr__book[data-v-0472216d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem clamp(1.45rem, 3vw, 2rem);
  border: 1px solid transparent;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.685rem;
  font-weight: 500;
  letter-spacing: var(--j17-track);
  line-height: 1;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  transition:
    background-color 0.45s var(--j17-ease),
    border-color 0.45s var(--j17-ease),
    color 0.45s var(--j17-ease),
    letter-spacing 0.45s var(--j17-ease);
}
.j17-hdr--transparent .j17-hdr__book[data-v-0472216d] {
  /* Brown primary fill over the hero — an ivory pill washes out on the
   * bright video the same way the nav text did. */
  background: var(--site-color-fg);
  border-color: var(--site-color-fg);
  color: var(--site-color-bg);
}
.j17-hdr:not(.j17-hdr--transparent) .j17-hdr__book[data-v-0472216d] {
  background: var(--site-color-fg);
  border-color: var(--site-color-fg);
  color: var(--site-color-bg);
}
.j17-hdr__book[data-v-0472216d]:hover {
  letter-spacing: calc(var(--j17-track) + 0.02em);
}
.j17-hdr--transparent .j17-hdr__book[data-v-0472216d]:hover {
  background: color-mix(in srgb, var(--site-color-fg) 88%, var(--site-color-bg));
  border-color: color-mix(in srgb, var(--site-color-fg) 88%, var(--site-color-bg));
  color: var(--site-color-bg);
}
.j17-hdr:not(.j17-hdr--transparent) .j17-hdr__book[data-v-0472216d]:hover {
  background: color-mix(in srgb, var(--site-color-fg) 88%, var(--site-color-bg));
  border-color: color-mix(in srgb, var(--site-color-fg) 88%, var(--site-color-bg));
  color: var(--site-color-bg);
}
@media (max-width: 540px) {
.j17-hdr__book[data-v-0472216d] {
    padding: 0.58rem 1rem;
    font-size: 0.625rem;
}
}

/* --- Spacer ----------------------------------------------------- */
.j17-hdr__spacer[data-v-0472216d] {
  height: var(--j17-bar-h);
  flex-shrink: 0;
}

/* --- Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.j17-hdr[data-v-0472216d],
  .j17-hdr__brand[data-v-0472216d],
  .j17-hdr__book[data-v-0472216d],
  .j17-drawer[data-v-0472216d],
  .j17-drawer__link[data-v-0472216d],
  .j17-drawer__cta[data-v-0472216d] {
    transition-duration: 0.18s !important;
}
.j17-drawer--open .j17-drawer__item[data-v-0472216d],
  .j17-drawer--open .j17-drawer__cta[data-v-0472216d],
  .j17-drawer--open .j17-drawer__masthead[data-v-0472216d] { animation: none !important; opacity: 1 !important; transform: none !important;
}
}


@font-face {
  font-family: 'proxima-nova';
  src: url('https://use.typekit.net/af/d7ff92/00000000000000007735e609/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
    format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'proxima-nova';
  src: url('https://use.typekit.net/af/3888dc/00000000000000007735e606/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3')
    format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


.footer-social-icon[data-v-81c2cfd0] {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}


/* Behavioural primitives — themes restyle freely. */
.lang-switcher[data-v-03bbd189] {
  position: relative;
  display: inline-flex;
}
.lang-switcher__trigger[data-v-03bbd189] {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.lang-switcher__trigger-glyph[data-v-03bbd189] {
  line-height: 0;
  display: inline-flex;
}
.lang-switcher__caret[data-v-03bbd189] {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.1rem) rotate(45deg);
  transition: transform 0.25s ease;
}
.lang-switcher--open .lang-switcher__caret[data-v-03bbd189] {
  transform: translateY(0.05rem) rotate(-135deg);
}
.lang-switcher__panel[data-v-03bbd189] {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  min-width: 12rem;
  font: inherit;
}
.lang-switcher__option[data-v-03bbd189] {
  cursor: pointer;
}
/* The row's layout lives on the <a> — it's the element that now wraps the
   label/code/mark, and it must fill the row so the whole option is
   clickable rather than just the text. */
.lang-switcher__option-link[data-v-03bbd189] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.lang-switcher-fade-enter-active[data-v-03bbd189],
.lang-switcher-fade-leave-active[data-v-03bbd189] {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-switcher-fade-enter-from[data-v-03bbd189],
.lang-switcher-fade-leave-to[data-v-03bbd189] {
  opacity: 0;
  transform: translateY(0.25rem);
}


/* =====================================================================
 *  Base layout — ported from src/components/chrome/SiteFooter.vue.
 *
 *  We copy these styles into the themed footer (rather than wrapping or
 *  extending) because Vue scoped styles attach a per-component hash —
 *  the SDK's scoped rules do NOT match elements rendered by THIS
 *  component. Without these defaults, the footer would render naked.
 *
 *  Editorial presentational layer (palette, typography, hairlines,
 *  ink-fill hover states) is appended at the bottom of this block.
 * ===================================================================== */
.site-footer[data-v-c47e82a1] {
  margin-top: auto;
  border-top: 1px solid var(--site-color-border, rgba(0, 0, 0, 0.08));
  background: color-mix(
    in srgb,
    var(--site-color-fg, #1a1815) 4%,
    var(--site-color-bg, #fbf9f5)
  );
  color: var(--site-color-fg, #1a1815);
  font-family: var(--site-font-body, system-ui, sans-serif);
}
.site-footer__inner[data-v-c47e82a1] {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 4rem)
    clamp(1.5rem, 3vw, 2rem);
  box-sizing: border-box;
}
.site-footer__body[data-v-c47e82a1] {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}
.site-footer__grid[data-v-c47e82a1] {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 720px) {
.site-footer__grid[data-v-c47e82a1] {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 3rem);
}
}
.site-footer__brand-block[data-v-c47e82a1] {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.site-footer__visit .site-footer__section-title[data-v-c47e82a1] {
  margin-bottom: 0.5rem;
}
.site-footer__logo-link[data-v-c47e82a1] {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.site-footer__logo[data-v-c47e82a1] {
  display: block;
  max-width: 160px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.site-footer__hotel-name[data-v-c47e82a1] {
  font-family: var(--site-font-display, serif);
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.site-footer__brand .site-footer__hotel-name[data-v-c47e82a1] {
  margin-top: 0.15rem;
}
.site-footer__tagline[data-v-c47e82a1] {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--site-color-fg-muted, #6b665e);
  max-width: 30rem;
}
.site-footer__section-title[data-v-c47e82a1] {
  margin: 0 0 0.65rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--site-color-fg-muted, #6b665e);
}
.site-footer__social-row[data-v-c47e82a1] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__social-btn[data-v-c47e82a1] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  color: var(--site-color-fg, #1a1815);
  background: color-mix(
    in srgb,
    var(--site-color-fg, #1a1815) 7%,
    var(--site-color-bg, #fbf9f5)
  );
  border: 1px solid
    color-mix(
      in srgb,
      var(--site-color-fg, #1a1815) 11%,
      var(--site-color-border, #e3ddd2)
    );
  text-decoration: none;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.site-footer__social-btn[data-v-c47e82a1] .footer-social-icon {
  width: 1.15rem;
  height: 1.15rem;
}
.site-footer__link-list[data-v-c47e82a1],
.site-footer__legal[data-v-c47e82a1] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__link-list[data-v-c47e82a1] {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}
.site-footer__link-list--contact[data-v-c47e82a1] {
  gap: 0.5rem;
}
.site-footer__text-link[data-v-c47e82a1] {
  text-decoration: none;
  color: var(--site-color-fg, #1a1815);
  font-size: 0.92rem;
  line-height: 1.45;
  transition: opacity 0.15s ease;
}
.site-footer__legal-trigger[data-v-c47e82a1] {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--site-color-fg, #1a1815);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
  padding: 0;
}
.site-footer__address[data-v-c47e82a1] {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--site-color-fg-muted, #6b665e);
  white-space: pre-line;
}
.site-footer__newsletter-band[data-v-c47e82a1] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: clamp(1.15rem, 3vw, 1.5rem) clamp(1.15rem, 3vw, 1.65rem);
  border-radius: var(--site-radius-md, 10px);
  border: 1px solid
    color-mix(
      in srgb,
      var(--site-color-fg, #1a1815) 9%,
      var(--site-color-border, #e3ddd2)
    );
  background: var(--site-color-bg, #fbf9f5);
}
@media (min-width: 640px) {
.site-footer__newsletter-band[data-v-c47e82a1] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.site-footer__nl-btn[data-v-c47e82a1] {
    flex-shrink: 0;
}
}
.site-footer__newsletter-copy[data-v-c47e82a1] {
  min-width: 0;
}
.site-footer__nl-headline[data-v-c47e82a1] {
  font-family: var(--site-font-display, serif);
  font-size: 1.08rem;
  margin: 0 0 0.35rem;
  line-height: 1.25;
}
.site-footer__nl-body[data-v-c47e82a1] {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--site-color-fg-muted, #6b665e);
  max-width: 36rem;
}
.site-footer__nl-btn[data-v-c47e82a1] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 1.35rem;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--site-color-bg, #fbf9f5);
  background: var(--site-color-fg, #1a1815);
  border-radius: var(--site-radius-md, 6px);
  border: 1px solid
    color-mix(
      in srgb,
      var(--site-color-bg, #fbf9f5) 18%,
      var(--site-color-fg, #1a1815)
    );
  transition: opacity 0.15s ease;
}
.site-footer__bottom[data-v-c47e82a1] {
  margin-top: clamp(1.85rem, 4vw, 2.75rem);
  padding-top: 1.35rem;
  border-top: 1px solid
    color-mix(
      in srgb,
      var(--site-color-fg, #1a1815) 8%,
      var(--site-color-border, #e3ddd2)
    );
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
@media (min-width: 640px) {
.site-footer__bottom[data-v-c47e82a1] {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
}
.site-footer__legal[data-v-c47e82a1] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.2rem;
}
.site-footer__copyright[data-v-c47e82a1] {
  margin: 0;
  font-size: 0.8rem;
  color: var(--site-color-fg-muted, #6b665e);
}

/* =====================================================================
 *  Editorial layer — 17 John presentational refinements.
 *  Palette, typography, hairlines, ink-fill hover states. Layered on
 *  top of the base layout above; rules are scoped to this component.
 * ===================================================================== */
.site-footer[data-v-c47e82a1] {
  /* Footer logo height — adjustable from one place. Override
   * `--site-footer-logo-h` (on :root or the footer) to resize the mark. */
  --site-footer-logo-h: 52px;
  --j17-footer-ink: var(--site-color-fg);
  --j17-footer-ivory: var(--site-color-bg);
  --j17-footer-stone: color-mix(in srgb, var(--site-color-bg) 56%, transparent);
  --j17-footer-hairline: color-mix(in srgb, var(--site-color-bg) 14%, transparent);
  --j17-footer-hairline-strong: color-mix(in srgb, var(--site-color-bg) 26%, transparent);
  --j17-footer-track: 0.34em;
  --j17-footer-track-tight: 0.18em;
  --j17-footer-display: var(--site-font-display, 'Fraunces', Georgia, serif);
  --j17-footer-sans: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* De-slant emphasis — upright, no replacement slant. */
.site-footer em[data-v-c47e82a1],
.site-footer i[data-v-c47e82a1],
.site-policy-modal em[data-v-c47e82a1],
.site-policy-modal i[data-v-c47e82a1] {
  font-style: normal;
}

/* --- Ground: deep ink with subtle gradient toward the top hairline.
 * Flush against the page above (no gap), and it swallows the shell's
 * bottom reserve so nothing pale shows under it either. */
.site-footer[data-v-c47e82a1] {
  margin-top: 0;
  margin-bottom: calc(-1 * (var(--concierge-dock-h, 0px) + env(safe-area-inset-bottom, 0px)));
  border-top: 1px solid color-mix(in srgb, var(--j17-footer-ink) 14%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--j17-footer-ink) 96%, transparent) 0%,
      var(--j17-footer-ink) 64%
    );
  color: var(--j17-footer-ivory);
  font-family: var(--j17-footer-sans);
}
.site-footer__inner[data-v-c47e82a1] {
  max-width: 84rem;
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3rem) clamp(1.85rem, 4vw, 2.75rem);
}

/* --- Section eyebrows ------------------------------------------- */
.site-footer__section-title[data-v-c47e82a1] {
  font-family: var(--j17-footer-sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: var(--j17-footer-track);
  text-transform: uppercase;
  color: var(--j17-footer-stone);
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--j17-footer-hairline);
}

/* --- Body grid: lift the asymmetry --------------------------------- */
@media (min-width: 720px) {
.site-footer__grid[data-v-c47e82a1] {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
}
}

/* --- Brand block ------------------------------------------------ */
.site-footer__brand-block[data-v-c47e82a1] {
  gap: clamp(1.85rem, 3.5vw, 2.5rem);
}

/* Logo sizing — modest by design. We give it 0.55rem of breathing
 * room below so the hotel name + tagline below feel anchored.
 *
 * `max-width` / `max-height` use !important to win the specificity tie
 * against the base styles above. Without this the 160px / 52px
 * sometimes wins depending on stylesheet load order, leaving the logo
 * crushed at non-portrait aspect ratios.
 */
.site-footer__logo-link[data-v-c47e82a1] {
  display: inline-flex;
  margin-bottom: 0.55rem;
}
.site-footer__logo[data-v-c47e82a1] {
  display: block;
  max-width: 160px !important;
  /* Height is driven by --site-footer-logo-h (default 52px) so the mark
   * can be resized from one custom property. */
  height: var(--site-footer-logo-h) !important;
  max-height: var(--site-footer-logo-h) !important;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}

/* When the brand only shipped the dark variant, fake a light mark by
   inverting it. The themed footer adds .site-footer--has-light-logo
   when the actual light asset is present — in that case we skip the
   filter so true-color marks (e.g. a brass wordmark) render correctly. */
.site-footer:not(.site-footer--has-light-logo) .site-footer__logo[data-v-c47e82a1] {
  filter: brightness(0) invert(1);
}

/* Tasteful fallback when the brand has a hotel name but no logo asset
 * uploaded — surface the name as an italic-display wordmark so the
 * brand block still has a masthead. The .site-footer__hotel-name
 * paragraph below is conditionally hidden in the template when the
 * wordmark is shown to avoid duplicating the name. */
.site-footer__wordmark-link[data-v-c47e82a1] {
  display: inline-block;
  margin-bottom: 0.85rem;
  text-decoration: none;
  color: var(--j17-footer-ivory);
  transition: letter-spacing 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__wordmark-link[data-v-c47e82a1]:hover {
  letter-spacing: 0.005em;
}
.site-footer__wordmark[data-v-c47e82a1] {
  font-family: var(--j17-footer-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--j17-footer-ivory);
  display: inline-block;
}
.site-footer__hotel-name[data-v-c47e82a1] {
  font-family: var(--j17-footer-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  letter-spacing: -0.005em;
  line-height: 1.04;
  margin: 0.35rem 0 0.65rem;
  color: var(--j17-footer-ivory);
}
.site-footer__tagline[data-v-c47e82a1] {
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--j17-footer-ivory) 78%, transparent);
  max-width: 32rem;
  margin-top: 0.25rem;
  /* Running body copy — justified per the editorial type rules. */
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* --- Visit + contact -------------------------------------------- */
.site-footer__visit[data-v-c47e82a1] {
  padding-top: 0.25rem;
}

/* The second eyebrow ("Contact") follows the address list — give it air
 * so the two labelled groups read as distinct. */
.site-footer__section-title--contact[data-v-c47e82a1] {
  margin-top: 1.5rem;
}

/* Inline contact icon — thin hairline mark inheriting currentColor,
 * sat on the text baseline immediately before the phone / email. */
.site-footer__text-link--icon[data-v-c47e82a1] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.site-footer__contact-icon[data-v-c47e82a1] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  /* Hairline marks; the link's underline reveal stays on the text only. */
  opacity: 0.75;
}

/* Keep the link's hairline-underline reveal under the text, not the icon. */
.site-footer__text-link--icon[data-v-c47e82a1]::after {
  left: calc(16px + 0.5rem);
}
.site-footer__address[data-v-c47e82a1] {
  font-family: var(--j17-footer-display);
  font-style: normal;
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--j17-footer-ivory) 90%, transparent);
}
.site-footer__text-link[data-v-c47e82a1] {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--j17-footer-ivory) 88%, transparent);
  letter-spacing: 0.01em;
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__text-link[data-v-c47e82a1]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--j17-footer-hairline-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__text-link[data-v-c47e82a1]:hover {
  opacity: 1;
  color: var(--j17-footer-ivory);
}
.site-footer__text-link[data-v-c47e82a1]:hover::after {
  transform: scaleX(1);
}

/* --- Social pills: hairline circles, no fill -------------------- */
.site-footer__social-row[data-v-c47e82a1] {
  margin-top: 0.5rem;
  gap: 0.55rem;
}
.site-footer__social-btn[data-v-c47e82a1] {
  width: 2.45rem;
  height: 2.45rem;
  background: transparent;
  border: 1px solid var(--j17-footer-hairline-strong);
  color: color-mix(in srgb, var(--j17-footer-ivory) 78%, transparent);
  transition:
    color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__social-btn[data-v-c47e82a1]:hover {
  background: var(--j17-footer-ivory);
  border-color: var(--j17-footer-ivory);
  color: var(--j17-footer-ink);
  transform: none;
  box-shadow: none;
}

/* --- Explore (nav) ----------------------------------------------- */
.site-footer__explore .site-footer__link-list[data-v-c47e82a1] {
  gap: 0.55rem;
}

/* --- Newsletter band: editorial callout, not card --------------- */
.site-footer__newsletter-band[data-v-c47e82a1] {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--j17-footer-hairline-strong);
  border-bottom: 1px solid var(--j17-footer-hairline);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.85rem, 4vw, 2.5rem) 0;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  align-items: flex-start;
}
@media (min-width: 640px) {
.site-footer__newsletter-band[data-v-c47e82a1] {
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
}
}
.site-footer__nl-headline[data-v-c47e82a1] {
  font-family: var(--j17-footer-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin-bottom: 0.55rem;
  color: var(--j17-footer-ivory);
}
.site-footer__nl-body[data-v-c47e82a1] {
  color: color-mix(in srgb, var(--j17-footer-ivory) 70%, transparent);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 36rem;
  /* Running body copy — justified per the editorial type rules. */
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.site-footer__nl-btn[data-v-c47e82a1] {
  background: transparent;
  color: var(--j17-footer-ivory);
  border: 1px solid color-mix(in srgb, var(--j17-footer-ivory) 80%, transparent);
  border-radius: 0;
  padding: 0.85rem clamp(1.85rem, 3.5vw, 2.5rem);
  font-family: var(--j17-footer-sans);
  font-size: 0.685rem;
  font-weight: 500;
  letter-spacing: var(--j17-footer-track);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__nl-btn[data-v-c47e82a1]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--j17-footer-ivory);
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__nl-btn[data-v-c47e82a1]:hover {
  color: var(--j17-footer-ink);
  border-color: var(--j17-footer-ivory);
  opacity: 1;
}
.site-footer__nl-btn[data-v-c47e82a1]:hover::before {
  transform: translateY(0);
}

/* --- Bottom legal row ------------------------------------------- */
.site-footer__bottom[data-v-c47e82a1] {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--j17-footer-hairline);
}
.site-footer__legal[data-v-c47e82a1] {
  gap: 0.5rem 1.85rem;
}
.site-footer__legal-trigger[data-v-c47e82a1] {
  font-family: var(--j17-footer-sans);
  font-size: 0.685rem;
  font-weight: 400;
  letter-spacing: var(--j17-footer-track-tight);
  text-transform: uppercase;
  color: var(--j17-footer-stone);
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__legal-trigger[data-v-c47e82a1]:hover {
  opacity: 1;
  color: var(--j17-footer-ivory);
}

/* The Accessibility entry is a route link, styled as its siblings. */
.site-footer__legal-trigger--link[data-v-c47e82a1] {
  display: inline-block;
  text-decoration: none;
}
.site-footer__copyright[data-v-c47e82a1] {
  font-size: 0.685rem;
  letter-spacing: var(--j17-footer-track-tight);
  text-transform: uppercase;
  color: var(--j17-footer-stone);
}

/* --- Language switcher (footer bottom band) --------------------- */
.site-footer__language[data-v-c47e82a1] {
  margin-left: auto;
  font-family: var(--j17-footer-sans);
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__trigger {
  padding: 0.45rem 0;
  font-size: 0.685rem;
  font-weight: 400;
  letter-spacing: var(--j17-footer-track-tight);
  text-transform: uppercase;
  color: var(--j17-footer-stone);
  border-bottom: 1px solid var(--j17-footer-hairline);
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__trigger:hover,
.site-footer__language[data-v-c47e82a1] .lang-switcher--open .lang-switcher__trigger {
  color: var(--j17-footer-ivory);
  border-bottom-color: var(--j17-footer-ivory);
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__trigger-glyph {
  color: currentColor;
  opacity: 0.85;
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__panel {
  min-width: 14rem;
  padding: 0;
  background: var(--j17-footer-ivory, #fbf9f5);
  color: var(--j17-footer-ink, #1a1815);
  border: 1px solid color-mix(in srgb, var(--j17-footer-ink, #1a1815) 22%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--j17-footer-ink, #1a1815) 6%, transparent),
    0 24px 60px color-mix(in srgb, var(--j17-footer-ink, #1a1815) 18%, transparent);
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__option {
  position: relative;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--j17-footer-ink, #1a1815) 10%, transparent);
  justify-content: space-between;
  transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__option:last-child {
  border-bottom: 0;
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__option:hover {
  background: color-mix(in srgb, var(--j17-footer-ink, #1a1815) 6%, transparent);
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__option-label {
  font-family: var(--j17-footer-display, 'Fraunces', Georgia, serif);
  font-style: normal;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--j17-footer-ink, #1a1815);
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__option-code {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--j17-footer-ink, #1a1815) 50%, transparent);
  font-family: var(--j17-footer-sans);
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__option--active {
  background: color-mix(in srgb, var(--j17-footer-ink, #1a1815) 4%, transparent);
}
.site-footer__language[data-v-c47e82a1] .lang-switcher__option-mark {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--j17-footer-ink, #1a1815);
}

/* --- Policy modal: deep-ink overlay, italic-display title, hairline
 * rules between header / tabs / body. The body preserves the
 * hotelier's plain-text newlines via `white-space: pre-wrap`. */
.site-policy-modal[data-v-c47e82a1] {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--j17-footer-ink) 88%, transparent);
  padding: clamp(1rem, 4vw, 3rem);
  overflow-y: auto;
}
.site-policy-modal__panel[data-v-c47e82a1] {
  width: min(64rem, 100%);
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--j17-footer-ink);
  color: var(--j17-footer-ivory);
  border: 1px solid var(--j17-footer-hairline-strong);
  font-family: var(--j17-footer-sans);
}
.site-policy-modal__head[data-v-c47e82a1] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 1.85rem) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--j17-footer-hairline);
  flex-shrink: 0;
}
.site-policy-modal__title[data-v-c47e82a1] {
  margin: 0;
  font-family: var(--j17-footer-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--j17-footer-ivory);
}

/* Button reset: without it the browser paints its default grey box
 * (2px outset border, #efefef fill) under the pale label. */
.site-policy-modal__close[data-v-c47e82a1],
.site-policy-modal__tab[data-v-c47e82a1] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  font-family: var(--j17-footer-sans);
  line-height: 1.2;
  cursor: pointer;
}
.site-policy-modal__close[data-v-c47e82a1] {
  padding: 0.5rem 0;
  font-size: 0.685rem;
  font-weight: 500;
  letter-spacing: var(--j17-footer-track);
  text-transform: uppercase;
  color: var(--j17-footer-stone);
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-policy-modal__close[data-v-c47e82a1]:hover {
  color: var(--j17-footer-ivory);
}
.site-policy-modal__tabs[data-v-c47e82a1] {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(0.85rem, 2vw, 1.25rem) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--j17-footer-hairline);
  flex-shrink: 0;
  overflow-x: auto;
}
.site-policy-modal__tab[data-v-c47e82a1] {
  font-size: 0.685rem;
  font-weight: 500;
  letter-spacing: var(--j17-footer-track);
  text-transform: uppercase;
  color: var(--j17-footer-stone);
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  transition:
    color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-policy-modal__tab[data-v-c47e82a1]:hover {
  color: var(--j17-footer-ivory);
}
.site-policy-modal__tab--active[data-v-c47e82a1] {
  color: var(--j17-footer-ivory);
  border-bottom-color: var(--j17-footer-ivory);
}
.site-policy-modal__close[data-v-c47e82a1]:focus-visible,
.site-policy-modal__tab[data-v-c47e82a1]:focus-visible {
  outline: 1px solid var(--j17-footer-ivory);
  outline-offset: 4px;
}
.site-policy-modal__body[data-v-c47e82a1] {
  overflow-y: auto;
  min-height: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  /* Preserve the hotelier's paragraph breaks; the body is plain text. */
  white-space: pre-wrap;
  /* Long-form legal prose is set in the reading face, never the
   * capitals-only display face (Bebas Neue), and ragged-right. */
  font-family: var(--j17-footer-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.7;
  text-transform: none;
  color: color-mix(in srgb, var(--j17-footer-ivory) 90%, transparent);
  letter-spacing: 0.01em;
  text-align: left;
  hyphens: manual;
}
.site-policy-modal__prose[data-v-c47e82a1] {
  max-width: 46rem;
}
@media (prefers-reduced-motion: reduce) {
.site-footer__text-link[data-v-c47e82a1],
  .site-footer__text-link[data-v-c47e82a1]::after,
  .site-footer__social-btn[data-v-c47e82a1],
  .site-footer__nl-btn[data-v-c47e82a1],
  .site-footer__nl-btn[data-v-c47e82a1]::before,
  .site-footer__legal-trigger[data-v-c47e82a1],
  .site-policy-modal__close[data-v-c47e82a1],
  .site-policy-modal__tab[data-v-c47e82a1] {
    transition-duration: 0.18s;
}
}

/* --- Cookie choice, inside the policy modal ---------------------- *
 * The permanent home for the decision. `white-space: pre-wrap` and the
 * justified setting are inherited from the modal body, so both are reset
 * here — this block is UI, not the hotelier's prose.                 */
.site-policy-modal__prose[data-v-c47e82a1] { margin: 0;
}
.site-consent[data-v-c47e82a1] {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid color-mix(in srgb, var(--j17-footer-ivory) 20%, transparent);
  white-space: normal;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.site-consent__state[data-v-c47e82a1] {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--j17-footer-ivory) 68%, transparent);
}
.site-consent__acts[data-v-c47e82a1] { display: flex; flex-wrap: wrap; gap: 0.75rem;
}

/* Equal weight, deliberately: neither choice is nudged. The pressed
   state is what marks the visitor's current setting. */
.site-consent__btn[data-v-c47e82a1] {
  appearance: none;
  flex: 1 1 12rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--j17-footer-ivory) 32%, transparent);
  background: transparent;
  color: var(--j17-footer-ivory);
  font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.685rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-consent__btn[data-v-c47e82a1]:hover {
  border-color: var(--j17-footer-ivory);
}
.site-consent__btn[aria-pressed="true"][data-v-c47e82a1] {
  background: var(--j17-footer-ivory);
  border-color: var(--j17-footer-ivory);
  color: var(--j17-footer-ink, #1a1815);
}
.site-consent__btn[data-v-c47e82a1]:focus-visible {
  outline: 2px solid var(--j17-footer-ivory);
  outline-offset: 2px;
}


/* Deliberately quiet and token-driven: this band sits directly under a
   bespoke, agent-designed footer on ~every site, so it has to read as
   part of it rather than as a second footer. Inherits the page's font
   and picks up the theme's own surface/ink tokens where they exist.

   A theme that CLAIMS the extras (see composables/useFooterExtras.js)
   embeds this inside its own footer, where standalone-band chrome would
   be wrong. Rather than have the component guess its context, the band
   values are knobs — set them on the element you put the class on:

     .site-footer__extras { --fx-pad: 0; --fx-max-w: none; }

   Custom properties inherit, and Vue applies a parent's class to a child
   component's root, so a theme's scoped rule reaches these. */
.fx[data-v-607a7acc] {
  padding: var(--fx-pad, 1.5rem 1.25rem);
  background: var(--fx-bg, var(--site-footer-bg, var(--color-surface-alt, transparent)));
  color: var(--fx-ink, var(--site-footer-ink, var(--color-ink, inherit)));
  font-size: var(--fx-size, 0.85rem);
}
.fx__inner[data-v-607a7acc] {
  max-width: var(--fx-max-w, var(--site-max-w, 1200px));
  margin: var(--fx-inner-margin, 0 auto);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  align-items: flex-start;
}
.fx__group[data-v-607a7acc] { min-width: 0;
}
.fx__group--text[data-v-607a7acc] { flex: 1 1 100%;
}
.fx__heading[data-v-607a7acc] {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 0 0 0.6rem;
}
.fx__links[data-v-607a7acc] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem;
}
.fx__link[data-v-607a7acc] {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 140ms ease;
}
.fx__link[data-v-607a7acc]:hover, .fx__link[data-v-607a7acc]:focus-visible { opacity: 1; text-decoration: underline;
}
.fx__logos[data-v-607a7acc] {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}
.fx__logo[data-v-607a7acc] {
  display: block;
  max-height: 38px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fx__texts[data-v-607a7acc] { display: grid; gap: 0.35rem;
}
.fx__text[data-v-607a7acc] { margin: 0; opacity: 0.8;
}
@media (max-width: 640px) {
.fx__inner[data-v-607a7acc] { gap: 1.5rem;
}
.fx__group[data-v-607a7acc] { flex: 1 1 100%;
}
}


/* Deliberately quiet and token-driven: this band sits directly under a
   bespoke, agent-designed footer on ~every site, so it has to read as part of
   it rather than as a second footer. Inherits the page's font and picks up
   the theme's own surface/ink tokens where they exist.

   A theme that CLAIMS the affiliations (composables/useAffiliations.js)
   embeds this inside its own footer, where standalone-band chrome would be
   wrong. Rather than have the component guess its context, the band values
   are knobs — set them on the element you put the class on:

     .site-footer__affiliations { --sa-pad: 0; --sa-max-w: none; }

   Custom properties inherit, and Vue applies a parent's class to a child
   component's root, so a theme's scoped rule reaches these. */
.sa[data-v-566a4cc8] {
  padding: var(--sa-pad, var(--site-space-4, 1.25rem));
  /* ⚠️ `--site-footer-bg` / `--site-footer-ink` DO NOT EXIST in the token
     set — the first version invented them, so every hotel silently got the
     raw fallback. Inherit the footer's own ground instead. */
  background: var(--sa-bg, transparent);
  color: var(--sa-ink, inherit);
}
.sa__inner[data-v-566a4cc8] {
  max-width: var(--sa-max-w, var(--site-max, 1200px));
  margin: var(--sa-inner-margin, 0 auto);
}


/* brand record */
:root {
  --site-color-fg: #675041;
  --site-color-accent: #ffb494;
  --site-color-bg: #f4eae0;
  --site-color-on-accent: #1a1a1a;
  --concierge-bg: rgb(244 234 224);
  --site-color-fg-muted: #7b6657;
  --a11y-focus: #ad7a65;
  --site-font-display: "Bebas Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-body: "Fraunces", system-ui, -apple-system, "Segoe UI", sans-serif;
}