@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=EB+Garamond:wght@400;500&display=swap");


@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;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 */
/* XELA Tulum — tokens aggregate.
 *
 * THE PARTS UNDER tokens/ ARE THE SOURCE. This file is recomposed from
 * them on every build, in name order after tokens/palette.css and
 * tokens/type.css. The composition is mirrored here verbatim so the
 * dev preview, which serves this file as written, renders the same
 * layer the built site does. Edit a part, then mirror it here.
 *
 * Order: palette, type, grounds, motion, rhythm.
 */

/* ---- tokens/palette.css ---- */
:root {
  --xela-ground: #f3ede8;
  --xela-ground-alt: #ffffff;
  --xela-ink: #2b2b2b;
  --xela-ink-soft: #6e6e6e;
  --xela-chukum: #cda187;
  --xela-clay: #af856d;
  --xela-seafoam: #8ecbbd;
  --xela-coral: #f08486;
  --xela-clay-deep: color-mix(in oklab, var(--xela-clay) 60%, var(--xela-ink));
  --xela-hairline: color-mix(in oklab, var(--xela-ink) 14%, transparent);
  --xela-hairline-warm: color-mix(in oklab, var(--xela-chukum) 60%, transparent);
  --xela-hairline-light: color-mix(in oklab, var(--xela-ground) 38%, transparent);
  --xela-veil: color-mix(in oklab, var(--xela-ink) 34%, transparent);
  --xela-veil-deep: color-mix(in oklab, var(--xela-ink) 62%, transparent);
}

/* ---- tokens/type.css ---- */
:root {
  --xela-face-display: var(--site-font-display, Georgia, "Times New Roman", serif);
  --xela-face-body: var(--site-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);

  --xela-t-hero: clamp(30px, 3.6vw, 48px);
  --xela-lh-hero: 1.08;
  --xela-ls-hero: 0.05em;

  --xela-t-title: clamp(30px, 3.1vw, 45px);
  --xela-lh-title: 1.07;
  --xela-ls-title: 0.032em;

  --xela-t-section: clamp(26px, 2.4vw, 34px);
  --xela-lh-section: 1.12;
  --xela-ls-section: 0.028em;

  --xela-t-intro: clamp(20px, 1.8vw, 26px);
  --xela-lh-intro: 1.46;

  --xela-t-body: 16px;
  --xela-lh-body: 1.7;
  --xela-ls-body: 0.012em;
  --xela-measure: 62ch;

  --xela-t-label: 11px;
  --xela-lh-label: 1.18;
  --xela-ls-label: 0.1em;

  --xela-t-link: 15px;
  --xela-ls-link: 0.1em;
  --xela-weight-link: 600;
}

/* ---- tokens/grounds.css ---- */
:root {
  --site-color-bg: var(--xela-ground);
  --site-color-fg: var(--xela-ink);
  --site-color-muted: var(--xela-ink-soft);
  --site-color-border: var(--xela-hairline);
  --site-color-accent: var(--xela-clay-deep);
  --site-color-accent-fg: #ffffff;
  --site-color-on-accent: #ffffff;
  --site-radius: var(--xela-radius);
}

html {
  background: var(--xela-ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--xela-ground);
  color: var(--xela-ink);
  font-family: var(--xela-face-body);
  font-size: var(--xela-t-body);
  line-height: var(--xela-lh-body);
  letter-spacing: var(--xela-ls-body);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--xela-face-display);
  font-weight: 400;
  color: var(--xela-ink);
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; }

:where(button, input, select, textarea) {
  font-family: inherit;
  font-size: inherit;
}

.xela-wrap {
  width: 100%;
  max-width: calc(var(--xela-max) + var(--xela-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--xela-gutter);
  box-sizing: border-box;
}

.xela-measure {
  max-width: var(--xela-measure-max);
  margin-inline: auto;
}

.xela-section {
  padding-block: var(--xela-section);
}

.xela-label {
  font-family: var(--xela-face-body);
  font-size: var(--xela-t-label);
  line-height: var(--xela-lh-label);
  letter-spacing: var(--xela-ls-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--xela-ink-soft);
}

.xela-display {
  font-family: var(--xela-face-display);
  text-transform: uppercase;
  letter-spacing: var(--xela-ls-hero);
}

.xela-intro {
  font-size: var(--xela-t-intro);
  line-height: var(--xela-lh-intro);
  color: var(--xela-ink);
}

.xela-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--xela-face-body);
  font-size: var(--xela-t-link);
  font-weight: var(--xela-weight-link);
  letter-spacing: var(--xela-ls-link);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--xela-ink);
  padding-bottom: 2px;
  border-bottom: var(--xela-hairline-w) solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.xela-link::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: var(--xela-clay);
  transform: translateY(-3px);
}
.xela-link:hover,
.xela-link:focus-visible {
  border-bottom-color: var(--xela-ink);
}
.xela-link--light { color: var(--xela-ground); }
.xela-link--light::before { background: var(--xela-seafoam); }
.xela-link--light:hover,
.xela-link--light:focus-visible { border-bottom-color: var(--xela-hairline-light); }

.xela-splitter {
  display: flex;
  align-items: center;
  gap: var(--xela-space-md);
  margin-block: var(--xela-section);
}
.xela-splitter::before,
.xela-splitter::after {
  content: "";
  flex: 1 1 auto;
  height: var(--xela-hairline-w);
  background: var(--xela-hairline-warm);
}
.xela-splitter__mark {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--xela-clay);
}

/* Home hero: structure only, so the media cannot spill over the band under
   it. Full bleed means the whole screen (Q1) and a photograph is covered,
   never stretched. The homepage step dresses the rest. */
.default-hero {
  min-height: 100svh;
  background: var(--xela-ink);
  color: var(--xela-ground);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--xela-space-lg);
  padding: var(--xela-section) var(--xela-gutter);
  box-sizing: border-box;
  text-align: center;
}
.default-hero__media { overflow: hidden; }
.default-hero__media-el { width: 100%; height: 100%; object-fit: cover; }
.default-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--xela-ink) 36%, transparent),
    color-mix(in oklab, var(--xela-ink) 30%, transparent) 46%,
    color-mix(in oklab, var(--xela-ink) 56%, transparent)
  );
}
.default-hero__mark-img {
  height: clamp(58px, 7vw, 92px);
  width: auto;
  margin-inline: auto;
}
.default-hero__title { margin-top: var(--xela-space-lg); }
.default-hero__headline {
  color: var(--xela-ground);
  font-size: var(--xela-t-hero);
  line-height: var(--xela-lh-hero);
  letter-spacing: var(--xela-ls-hero);
  text-transform: uppercase;
}
.default-hero__tagline { color: var(--xela-ground); }
.default-hero__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 30px;
  border: var(--xela-hairline-w) solid var(--xela-hairline-light);
  color: var(--xela-ground);
  font-family: var(--xela-face-body);
  font-size: var(--xela-t-link);
  font-weight: var(--xela-weight-link);
  letter-spacing: var(--xela-ls-link);
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.default-hero__cta:hover,
.default-hero__cta:focus-visible {
  background: var(--xela-ground);
  color: var(--xela-ink);
}

/* Rooms preview: four rooms in two rows of two (K1), never three across with
   one card orphaned underneath. Amenities keep the SDK's three across. The
   extra class outranks the SDK's own scoped grid rule. */
.hp-block.hp-block--rooms_teaser .hp-rooms-teaser__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .hp-block.hp-block--rooms_teaser .hp-rooms-teaser__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Teaser cards frame their photograph in the 4:3 box the SDK declares
   instead of letting a portrait master stretch the card (J3). Without this
   a 1440x2160 amenity photo runs 522px tall on a phone and the section
   doubles in height. */
.hp-rooms-teaser .hp-rooms-teaser__media,
.hp-amenities-teaser .hp-amenities-teaser__media {
  position: relative;
  overflow: hidden;
}
.hp-rooms-teaser .hp-rooms-teaser__media > img,
.hp-amenities-teaser .hp-amenities-teaser__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The one CTA band (U2), identical on every page: full bleed, the whole
   screen high (Q1), the headline and the button on the photograph. The SDK
   ships it 280px tall from a scoped rule, so these carry the extra class
   needed to outrank it. Its ground is the photograph, so the band itself is
   ink and the scrim is what keeps the headline legible over any frame. */
.default-section--cta_band > .default-section__body { padding: 0; }

.hp-block.hp-block--cta_band .hp-block__band--has-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--xela-section) var(--xela-gutter);
  box-sizing: border-box;
  background: var(--xela-ink);
  text-align: center;
}
.hp-block.hp-block--cta_band .hp-block__band-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hp-block.hp-block--cta_band .hp-block__band-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-block.hp-block--cta_band .hp-block__band-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--xela-ink) 34%, transparent),
    color-mix(in oklab, var(--xela-ink) 32%, transparent) 46%,
    color-mix(in oklab, var(--xela-ink) 58%, transparent)
  );
}
.hp-block.hp-block--cta_band .hp-block__band-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--xela-space-lg);
}
.hp-block.hp-block--cta_band .hp-block__band-copy .hp-block__title--on-dark {
  margin: 0;
  color: var(--xela-ground);
  font-size: var(--xela-t-hero);
  line-height: var(--xela-lh-hero);
  letter-spacing: var(--xela-ls-hero);
  text-transform: uppercase;
}
.hp-block.hp-block--cta_band .hp-block__band-copy .hp-block__cta--on-dark-surface {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 30px;
  border: var(--xela-hairline-w) solid var(--xela-hairline-light);
  border-radius: 0;
  background: transparent;
  color: var(--xela-ground);
  font-family: var(--xela-face-body);
  font-size: var(--xela-t-link);
  font-weight: var(--xela-weight-link);
  letter-spacing: var(--xela-ls-link);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.hp-block.hp-block--cta_band .hp-block__band-copy .hp-block__cta--on-dark-surface:hover,
.hp-block.hp-block--cta_band .hp-block__band-copy .hp-block__cta--on-dark-surface:focus-visible {
  background: var(--xela-ground);
  color: var(--xela-ink);
}

/* ---- tokens/motion.css ---- */
:root {
  --xela-reveal-dur: 0.7s;
  --xela-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --xela-reveal-rise: 8px;
  --xela-reveal-stagger: 80ms;
}

[data-reveal] {
  transition: opacity var(--xela-reveal-dur) var(--xela-reveal-ease),
    transform var(--xela-reveal-dur) var(--xela-reveal-ease);
}

[data-reveal].xela-pre {
  opacity: 0;
  transform: translateY(var(--xela-reveal-rise));
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].xela-pre {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- tokens/rhythm.css ---- */
:root {
  --xela-unit: 22px;
  --xela-gutter: 22px;
  --xela-col: 92px;
  --xela-cols: 12;
  --xela-max: 1396px;
  --xela-measure-max: 893px;
  --xela-portrait: 435px;

  --xela-space-xs: 8px;
  --xela-space-sm: 16px;
  --xela-space-md: 22px;
  --xela-space-lg: 34px;
  --xela-section: 56px;
  --xela-section-sm: 32px;

  --xela-header-h: 96px;
  --xela-header-h-sm: 72px;

  --xela-radius: 0;
  --xela-hairline-w: 1px;
}

@media (max-width: 860px) {
  :root {
    --xela-gutter: 20px;
    --xela-section: var(--xela-section-sm);
  }
}


/* 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;
}


/* primitives */
/* XELA Tulum — button primitive.
 * `.site-btn` is the locked role for a real action: Book, Check
 * availability, Send, Join. The design source uses no filled buttons, so
 * here the filled form is reserved for the primary action of a band and
 * everything secondary is a dot-link (`.xela-link`). Radius 0 everywhere.
 */

.site-btn {
  --btn-bg: var(--xela-ink);
  --btn-fg: var(--xela-ground);
  --btn-bd: var(--xela-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 30px;
  box-sizing: border-box;
  border: var(--xela-hairline-w) solid var(--btn-bd);
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--xela-face-body);
  font-size: var(--xela-t-link);
  font-weight: var(--xela-weight-link);
  letter-spacing: var(--xela-ls-link);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.28s ease, color 0.28s ease,
    border-color 0.28s ease;
}

.site-btn:hover,
.site-btn:focus-visible {
  --btn-bg: var(--xela-clay-deep);
  --btn-bd: var(--xela-clay-deep);
  --btn-fg: #ffffff;
}

.site-btn:focus-visible {
  outline: 2px solid var(--xela-seafoam);
  outline-offset: 3px;
}

.site-btn[disabled],
.site-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Quiet: a hairline box, for a second action next to a filled one. */
.site-btn--secondary,
.site-btn--outline,
.site-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--xela-ink);
  --btn-bd: var(--xela-ink);
}
.site-btn--secondary:hover,
.site-btn--outline:hover,
.site-btn--ghost:hover,
.site-btn--secondary:focus-visible,
.site-btn--outline:focus-visible,
.site-btn--ghost:focus-visible {
  --btn-bg: var(--xela-ink);
  --btn-fg: var(--xela-ground);
  --btn-bd: var(--xela-ink);
}

/* On a photograph or a dark band. */
.site-btn--light,
.site-btn--on-media {
  --btn-bg: transparent;
  --btn-fg: #ffffff;
  --btn-bd: rgba(255, 255, 255, 0.7);
}
.site-btn--light:hover,
.site-btn--on-media:hover,
.site-btn--light:focus-visible,
.site-btn--on-media:focus-visible {
  --btn-bg: #ffffff;
  --btn-fg: var(--xela-ink);
  --btn-bd: #ffffff;
}

.site-btn--sm {
  min-height: 40px;
  padding: 11px 20px;
  font-size: 13px;
}

.site-btn--lg {
  min-height: 56px;
  padding: 18px 40px;
}

.site-btn--block {
  display: flex;
  width: 100%;
}

@media (max-width: 560px) {
  .site-btn {
    padding-inline: 22px;
  }
}

/* ---------------------------------------------------------------------
 * Booking funnel (the SDK j17 pages: /book, /checkout).
 * Those pages are the platform's, so what the theme owes them lives here,
 * in a sheet every route loads. Palette comes from the booking_page
 * record (token_overrides); these rules cover what tokens cannot.
 * Layout and behaviour follow the La Valise Tulum funnel; the faces and
 * the colours are XELA's own.
 * ------------------------------------------------------------------- */

/* The shell pads the page by the bar's height, and the bar is already in
 * flow: a blank strip between the bar and the funnel. Closed here. */
main.app-shell__main:has(> main.j17-book),
main.app-shell__main:has(> [class*="j17-checkout"]) {
  padding-top: 0 !important;
  background: #f3ede8;
}

/* The checkout and the confirmation stand on white, the site's ink on
 * it. The platform paints these two pages from the brand's secondary
 * colour (the clay), which is a ground for a photograph, not for a form.
 * Both pages read their palette from --site-color-*, so it is re-set on
 * each page's root and on the shell behind it. */
main.app-shell__main:has(> main.j17-checkout),
main.app-shell__main:has(> main.j17-confirm) {
  background: #ffffff;
}
main.j17-checkout,
main.j17-confirm {
  --site-color-bg: #ffffff;
  --site-color-bg-rgb: 255, 255, 255;
  --site-color-surface: #ffffff;
  --site-color-fg: #2b2b2b;
  --site-color-fg-muted: #6e6e6e;
  --site-book-ink: #2b2b2b;
  --site-book-surface: #ffffff;
  --site-book-muted: #6e6e6e;
  --site-book-divider: #d6cfc8;
  background: #ffffff;
  color: #2b2b2b;
}

/* The optional-extras sheet (the Namron Rewards offer) opens over the
 * cart on the way to the checkout. It is teleported to <body> and reads
 * the booking palette from its own root, so it is given white and ink
 * here; its filled accent (the FREE tag, the applied button) wears the
 * ink as well. */
.esx.esx {
  --site-book-ink: #2b2b2b;
  --site-book-surface: #ffffff;
  --site-book-muted: #6e6e6e;
  --site-color-fg: #2b2b2b;
  --site-color-bg: #ffffff;
  --site-color-fg-muted: #6e6e6e;
  --site-color-accent: #2b2b2b;
  --site-color-accent-fg: #ffffff;
  color: #2b2b2b;
}

/* A filter heading with nothing under it (rate-driven groups, before any
 * rate is quoted) is not a filter. It returns with its first option. */
.j17-book__filter-group:not(:has(.j17-book__filter-row, input, select, button)) {
  display: none;
}

/* Record values such as "garden" / "sea" read as labels, not as data,
 * in the filter column and in the chip's own list alike. */
.j17-book__filter-row > span {
  display: inline-block;
}
.j17-book__filter-row > span::first-letter {
  text-transform: uppercase;
}
.j17-fc__row {
  text-transform: capitalize;
}

/* The funnel's calendar is teleported to <body>, outside the page that
 * carries the booking palette, so it is given the same ink and ground
 * here. It is position:fixed, which means whatever does not fit the
 * window cannot be scrolled to: a phone gets one month at a time (the
 * arrows page it) and the panel is capped to the window as a backstop. */
.j17-dp__menu.j17-dp__menu {
  --site-color-fg: #2b2b2b;
  --site-color-bg: #f3ede8;
  --site-color-fg-muted: #6e6e6e;
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
}
@media (max-width: 720px) {
  .j17-dp__menu .j17-dp__months > .j17-dp__divider,
  .j17-dp__menu .j17-dp__months > .j17-dp__month ~ .j17-dp__month {
    display: none;
  }
}

/* The night's rate under each day. The platform prints it in the
 * visitor's own locale ("US$375", "375 $US"), and at 10px that spills a
 * 44px cell. A size down here; SiteHeader.vue keeps the cell to the bare
 * figure and the currency is said once, in words, at the calendar's foot,
 * set in the hint's own voice. */
.j17-dp__menu .j17-dp__cell-price {
  font-size: 8.5px !important;
  letter-spacing: 0 !important;
}
.j17-dp__menu[data-xela-currency-note]::after {
  content: attr(data-xela-currency-note);
  display: block;
  padding-top: 14px;
  font-family: var(--xb-sans, system-ui, sans-serif);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: #6e6e6e;
}

/* The concierge box docked under the stay summary, beside the cart, is
 * 320 wide: at the funnel's 18px its own prompt ran out of room and was
 * cut mid-word. The whole box steps down a size. */
.j17-book .cdock.cdock {
  padding: 6px 12px !important;
  gap: 6px !important;
}
.j17-book .cdock .cdock__row {
  gap: 8px !important;
}
.j17-book .cdock .cdock__spark,
.j17-book .cdock .cdock__spark svg {
  width: 11px !important;
  height: 11px !important;
}
.j17-book .cdock .cdock__in {
  min-width: 0;
  padding: 4px 2px !important;
  font-size: 13px !important;
  line-height: 18px !important;
}
.j17-book .cdock .cdock__in::placeholder {
  font-size: 13px;
}
.j17-book .cdock .cdock__go {
  padding: 4px 0 4px 8px !important;
  gap: 6px !important;
  font-size: 9px !important;
  letter-spacing: 0.26em !important;
}
.j17-book .cdock .cdock__rule {
  width: 14px !important;
}

/* The same prompt in the search bar's concierge row on a phone. Only the
 * prompt shrinks; what a guest types stays at 16px so the phone does not
 * zoom the page on focus. */
@media (max-width: 720px) {
  .j17-book .cask .cask__in::placeholder {
    font-size: 12.5px;
    letter-spacing: -0.2px;
  }
}

/* ---------------------------------------------------------------------
 * Card vocabulary. `--xbu` is the funnel's fluid unit (16px at 1440 and
 * on a phone, scaling between).
 * ------------------------------------------------------------------- */
main.j17-book {
  --xbu: 16px;
  --xb-sans: var(--xela-face-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
  --xb-serif: var(--xela-face-display, 'Cormorant Garamond', Georgia, serif);
  --xb-ink: #2b2b2b;
  --xb-ground: #f3ede8;
  /* The funnel's own body measure: the bar, the cards and the rail take
   * their heights from it. */
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0;
}
@media (min-width: 900px) {
  main.j17-book {
    font-size: 18px;
    line-height: 30px;
  }
}
/* The phone's stay sheet and cart bar are teleported out of the page and
 * re-declare the palette on themselves, so they are given it here. */
[class*="j17-book__mstay"],
[class*="j17-book__mcart"] {
  --site-book-ink: #2b2b2b;
  --site-book-surface: #f3ede8;
  --site-book-muted: #6e6e6e;
  --site-book-divider: #d6cfc8;
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0;
}
@media screen and (max-width: 1440px) {
  main.j17-book { --xbu: calc(-0.035635px + 1.113586vw); }
}
@media screen and (max-width: 991px) {
  main.j17-book { --xbu: calc(7.151786px + 0.892857vw); }
}
@media screen and (max-width: 767px) {
  main.j17-book { --xbu: 16px; }
}

/* Room name. */
main.j17-book .j17-book-card__title,
main.j17-book .j17-book-card__title-btn {
  font-family: var(--xb-sans) !important;
  font-size: calc(1.25 * var(--xbu)) !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--xb-ink) !important;
}

/* Facts line: "Up to 2 guests | 1 bedroom | Garden". */
main.j17-book .j17-book-card__facts {
  font-family: var(--xb-sans) !important;
  font-size: calc(1 * var(--xbu)) !important;
  line-height: 1.5 !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--xb-ink) !important;
}
main.j17-book .j17-book-card__fact {
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}
main.j17-book .j17-book-card__fact::first-letter {
  text-transform: uppercase;
}
/* On a phone the facts keep to one line and the name steps down a size. */
@media (max-width: 767px) {
  main.j17-book .j17-book-card__facts {
    font-size: 14.5px !important;
    letter-spacing: -0.01em !important;
  }
  main.j17-book .j17-book-card__title,
  main.j17-book .j17-book-card__title-btn {
    font-size: calc(1.125 * var(--xbu)) !important;
  }
}

/* Copy under the facts, in the site's body voice. */
main.j17-book .j17-book-card__summary {
  font-family: var(--xb-sans) !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
}

/* The card's action: a text button underlined by a hairline that drops
 * away on hover, no box. The funnel's own rule glyph and its hover wash
 * are put away. */
main.j17-book .j17-book-card__cta {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: calc(0.625 * var(--xbu)) 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--xb-ink) !important;
  font-family: var(--xb-sans) !important;
  font-size: calc(0.875 * var(--xbu)) !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
main.j17-book .j17-book-card__cta::before {
  content: '' !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform 0.33s cubic-bezier(0.445, 0.05, 0.55, 0.95),
    opacity 0.33s cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
}
main.j17-book .j17-book-card__cta:hover::before,
main.j17-book .j17-book-card__cta:focus-visible::before {
  transform: translateY(4px) !important;
  opacity: 0 !important;
}
main.j17-book .j17-book-card__cta::after {
  display: none !important;
}
main.j17-book .j17-book-card__cta-rule {
  display: none !important;
}
main.j17-book .j17-book-card__cta:disabled,
main.j17-book .j17-book-card__cta[aria-disabled="true"] {
  opacity: 0.42 !important;
}

/* ---------------------------------------------------------------------
 * Masthead: the window-high plate under a veil and the dark fade that
 * keeps the bar legible; the hotel's name, the ornament and the h1
 * centred in serif caps; the stay bar rides the foot of the band. The
 * header reads this band as a hero page (floating, transparent at the
 * top) — see SiteHeader.readBookHero.
 * ------------------------------------------------------------------- */
main.j17-book > .j17-about__masthead,
main.j17-book > .j17-about__masthead .j17-about__hero {
  /* half a window (operator, 2026-10-19: "reduce the size of the hero on
     /book by half"); was 100svh */
  height: 50svh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #2b2b2b !important;
}
main.j17-book > .j17-about__masthead .j17-about__hero-asset {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}
main.j17-book > .j17-about__masthead .j17-about__hero-vignette {
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  background-color: transparent !important;
  background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(43, 43, 43, 0)),
    linear-gradient(rgba(43, 43, 43, 0.35), rgba(43, 43, 43, 0.35)) !important;
  background-size: 100% calc(8 * var(--xbu)), 100% 100% !important;
  background-repeat: no-repeat !important;
}
main.j17-book > .j17-about__masthead .j17-about__masthead-copy {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-flow: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: calc(3.25 * var(--xbu)) calc(1.25 * var(--xbu)) calc(6 * var(--xbu)) !important;
  color: #f3ede8 !important;
  text-align: center !important;
}
/* The label above the title is the hotel's name. */
main.j17-book > .j17-about__masthead .j17-about__masthead-copy::before {
  content: 'XELA Tulum';
  display: block;
  font-family: var(--xb-sans);
  font-size: calc(1 * var(--xbu));
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3ede8;
}
main.j17-book > .j17-about__masthead .j17-about__title {
  display: block !important;
  width: auto !important;
  max-width: calc(50 * var(--xbu)) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--xb-serif) !important;
  font-size: calc(3.125 * var(--xbu)) !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: #f3ede8 !important;
}
/* The small square ornament between label and title. */
main.j17-book > .j17-about__masthead .j17-about__title::before {
  content: '';
  display: block;
  width: calc(0.625 * var(--xbu));
  height: calc(0.625 * var(--xbu));
  margin: calc(2 * var(--xbu)) auto;
  background: #f3ede8;
}
/* The stay bar keeps the SDK's own full-width measure, as on Umi's /book
 * (operator, 2026-10-19: no image, bar like Umi's in XELA's faces). The
 * masthead rules above only apply if a hero photo is set again. */
main.j17-book > .j17-about__head .j17-about__title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Umi's bar measure (17px body, 95px tall at 1440) rather than the
 * cards' 18px. */
@media (min-width: 900px) {
  main.j17-book .j17-book__search {
    font-size: 17px;
    line-height: 28px;
  }
}

/* ---- Room cards: Maison Felix's compact card, in Xela's type. Every
 * line used to inherit the page's 30px rhythm, so a 10px rate line stood
 * in a 30px box. The card now sets its own leading, and the rate ladder
 * reads at body size. */
main.j17-book .j17-book-card { line-height: 1.45; }
main.j17-book .j17-book-card__summary-toggle { line-height: 1.4 !important; }
main.j17-book .j17-book-card__price-total { font-size: 28px !important; line-height: 1.1 !important; }
main.j17-book .j17-book-card__price-caption-unit,
main.j17-book .j17-book-card__price-caption-basis { line-height: 1.5 !important; }
main.j17-book .j17-book-card__price-caption-unit { font-size: 11px !important; }
main.j17-book .j17-book-card__price-caption-basis { font-size: 12.5px !important; }
main.j17-book .j17-book-card th,
main.j17-book .j17-book-card td { font-size: 14px !important; line-height: 1.55 !important; padding-block: 2px !important; }

main.j17-book .j17-book-card__member-badge { font-size: 11px !important; line-height: 1.3 !important; }
main.j17-book .j17-book-card__member-amount { font-size: 16px !important; line-height: 1.3 !important; }
main.j17-book .j17-book-card__member-saving { font-size: 12.5px !important; line-height: 1.3 !important; letter-spacing: 0.06em !important; }
main.j17-book .j17-book-card__member-join { font-size: 11px !important; line-height: 1.3 !important; }

main.j17-book .j17-book-card__rates-legend { font-size: 11px !important; line-height: 1.4 !important; letter-spacing: 0.14em !important; }
main.j17-book .j17-book-card__rate-label { font-size: 17px !important; line-height: 1.3 !important; font-weight: 500 !important; }
main.j17-book .j17-book-card__rate-tagline { font-size: 14.5px !important; line-height: 1.4 !important; font-weight: 400 !important; }
main.j17-book .j17-book-card__rate-terms,
main.j17-book .j17-book-card__terms-label { font-size: 13.5px !important; line-height: 1.45 !important; }
main.j17-book .j17-book-card__rate-price,
main.j17-book .j17-book-card__rate-delta { font-size: 16px !important; line-height: 1.35 !important; }
main.j17-book .j17-book-card__rate-price { font-weight: 500 !important; }
main.j17-book .j17-book-card__rates-more { line-height: 1.4 !important; }
/* The header's MENU label reads at the Reserve link's size on every page,
 * the booking funnel included (Reserve is set to 20px in the Studio). */
.default-hdr .default-hamburger__word { font-size: 20px !important; letter-spacing: 0.16em !important; }
/* On a phone the bar has about seventy pixels either side of the centred
 * wordmark, so Reserve steps down from the Studio's 20px (13px over the
 * home hero, 12px on the solid bar) and the large opening mark gives way
 * on the narrowest screens, so the two never touch. */
@media (max-width: 860px) {
  .default-hdr .default-hdr__row .default-hdr__book { font-size: 12px !important; letter-spacing: 0.16em !important; }
  .default-hdr.default-hdr--transparent .default-hdr__row .default-hdr__book { font-size: 13px !important; }
  .default-hdr.default-hdr--transparent .default-hdr__row .default-hdr__mark { height: min(74px, calc((100vw - 216px) * 0.432)) !important; }
}

/* Beds and amenities row: body serif, no tracking, sentence case. */
main.j17-book .j17-book-card .rdr { font-size: 14px !important; letter-spacing: 0.01em !important; line-height: 1.5 !important; }
main.j17-book .j17-book-card .rdr__label,
main.j17-book .j17-book-card .rdr__more { letter-spacing: inherit !important; }
main.j17-book .j17-book-card .rdr__label { display: inline-block; }
main.j17-book .j17-book-card .rdr__label::first-letter { text-transform: uppercase; }
/* On a phone the stay bar follows the band in flow, so the band stops at
 * the height that keeps the bar on the first screen. */
@media (max-width: 767px) {
  main.j17-book > .j17-about__masthead,
  main.j17-book > .j17-about__masthead .j17-about__hero {
    height: 31svh !important; /* half of the earlier 62svh, 2026-10-19 */
    max-height: none !important;
  }
  main.j17-book > .j17-about__masthead .j17-about__masthead-copy {
    padding-top: calc(4 * var(--xbu)) !important;
    padding-bottom: calc(2 * var(--xbu)) !important;
  }
  /* One line on a 390 phone: the display face sets wide in capitals. */
  main.j17-book > .j17-about__masthead .j17-about__title {
    font-size: calc(2.125 * var(--xbu)) !important;
    letter-spacing: 0.04em !important;
  }
  main.j17-book > .j17-about__masthead .j17-about__title::before {
    width: calc(0.5 * var(--xbu));
    height: calc(0.5 * var(--xbu));
    margin: calc(1.25 * var(--xbu)) auto;
  }
}

/* The room quick view (.j17-rqv) is teleported to <body>, outside the
 * page that carries the booking palette. It takes the site's ink and
 * cream here, and its filled action wears the stay bar's ink. */
.j17-rqv.j17-rqv {
  --site-color-primary: #2b2b2b;
  --site-color-accent: #2b2b2b;
  --site-color-fg: #2b2b2b;
  --site-color-fg-muted: #6e6e6e;
  --site-color-bg: #f3ede8;
  --site-color-surface: #f3ede8;
  --site-book-ink: #2b2b2b;
  --site-book-surface: #f3ede8;
  --site-book-muted: #6e6e6e;
  --site-book-divider: #d6cfc8;
  --j17-ink: #2b2b2b;
  --j17-ivory: #f3ede8;
  color: #2b2b2b;
}
.j17-rqv .j17-rqv__reserve {
  background: #2b2b2b !important;
  color: #f3ede8 !important;
  border-color: #2b2b2b !important;
}
.j17-rqv .j17-rqv__reserve::before {
  background: transparent !important;
}
.j17-rqv .j17-rqv__full,
.j17-rqv .j17-rqv__grid-viewall {
  color: #2b2b2b !important;
}
.j17-rqv .j17-rqv__grid-viewall {
  background: #f3ede8 !important;
}

/* Band and rail headings in the page's serif caps. */
main.j17-book .j17-book__band-title,
main.j17-book .j17-book__group-title,
main.j17-book .j17-book__cart-title,
main.j17-book .j17-book__cart h2,
main.j17-book .j17-book__cart h3 {
  font-family: var(--xb-serif) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ---------------------------------------------------------------------
 * Tap targets on a phone.
 *
 * The text links and the small controls keep their drawn size; each is
 * given an unseen pad 44px tall so a thumb lands on it. The pad is an
 * ::after on a control that draws nothing there.
 * ------------------------------------------------------------------- */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .xela-link,
  .hp-block__link,
  .hp-block__map-open,
  .about-doc__link,
  .site-footer__legal-trigger,
  .default-hdr__book,
  .default-hamburger,
  .cl .cc__mic,
  .j17-dp__menu .j17-dp__nav,
  .j17-book-card__summary-more {
    position: relative;
  }
  .xela-link::after,
  .hp-block__link::after,
  .hp-block__map-open::after,
  .about-doc__link::after,
  .site-footer__legal-trigger::after,
  .default-hdr__book::after,
  .default-hamburger::after,
  .cl .cc__mic::after,
  .j17-dp__menu .j17-dp__nav::after,
  main.j17-book .j17-book-card__cta::after,
  .j17-book-card__summary-more::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

}


/* XELA Tulum — form primitive.
 * `.site-field*` is the locked role for every input the site collects:
 * the contact form, the newsletter, the booking funnel. Hairline under
 * the field, no box, no radius, so a form reads as writing on paper.
 */

.site-field {
  display: block;
  width: 100%;
  margin-bottom: var(--xela-space-md);
}

.site-field__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--xela-face-body);
  font-size: var(--xela-t-label);
  line-height: var(--xela-lh-label);
  letter-spacing: var(--xela-ls-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--xela-ink-soft);
}

.site-field__required {
  color: var(--xela-clay);
  margin-left: 4px;
}

.site-field__input,
.site-field__select,
.site-field__textarea,
.site-field input[type="text"],
.site-field input[type="email"],
.site-field input[type="tel"],
.site-field input[type="date"],
.site-field input[type="number"],
.site-field select,
.site-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px 0;
  border: 0;
  border-bottom: var(--xela-hairline-w) solid var(--xela-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--xela-ink);
  font-family: var(--xela-face-body);
  font-size: var(--xela-t-body);
  line-height: 1.5;
  letter-spacing: var(--xela-ls-body);
  appearance: none;
  transition: border-color 0.25s ease;
}

.site-field__textarea,
.site-field textarea {
  min-height: 132px;
  resize: vertical;
}

.site-field__select,
.site-field select {
  padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--xela-ink) 50%),
    linear-gradient(135deg, var(--xela-ink) 50%, transparent 50%);
  background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.site-field__input::placeholder,
.site-field__textarea::placeholder,
.site-field input::placeholder,
.site-field textarea::placeholder {
  color: var(--xela-ink-soft);
  opacity: 0.7;
}

.site-field__input:focus,
.site-field__select:focus,
.site-field__textarea:focus,
.site-field input:focus,
.site-field select:focus,
.site-field textarea:focus {
  outline: none;
  border-bottom-color: var(--xela-ink);
}

.site-field__input:focus-visible,
.site-field__select:focus-visible,
.site-field__textarea:focus-visible,
.site-field input:focus-visible,
.site-field select:focus-visible,
.site-field textarea:focus-visible {
  border-bottom-color: var(--xela-seafoam);
  border-bottom-width: 2px;
}

.site-field__hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--xela-ink-soft);
}

.site-field__error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--xela-clay-deep);
}

.site-field--error .site-field__input,
.site-field--error .site-field__select,
.site-field--error .site-field__textarea,
.site-field--error input,
.site-field--error select,
.site-field--error textarea {
  border-bottom-color: var(--xela-clay-deep);
}

/* Checkbox and consent rows read as a line of text, not a control. */
.site-field--checkbox,
.site-field--consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.site-field--checkbox input[type="checkbox"],
.site-field--consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  accent-color: var(--xela-clay-deep);
}
.site-field--checkbox .site-field__label,
.site-field--consent .site-field__label {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: var(--xela-ls-body);
  text-transform: none;
  font-weight: 400;
  color: var(--xela-ink);
}

/* On a dark ground: the footer newsletter, a form over a photograph. */
.site-field--light .site-field__label,
.site-field--light .site-field__hint {
  color: var(--xela-hairline-light);
  color: color-mix(in oklab, var(--xela-ground) 76%, transparent);
}
.site-field--light .site-field__input,
.site-field--light input,
.site-field--light textarea {
  color: var(--xela-ground);
  border-bottom-color: color-mix(in oklab, var(--xela-ground) 42%, transparent);
}
.site-field--light .site-field__input::placeholder,
.site-field--light input::placeholder {
  color: color-mix(in oklab, var(--xela-ground) 66%, transparent);
}
.site-field--light .site-field__input:focus,
.site-field--light input:focus {
  border-bottom-color: var(--xela-seafoam);
}


/* theme skin */
/* =====================================================================
 * Concierge skin — XELA Tulum.
 *
 * COLOURS AND TYPE ONLY. The pill stays where the platform puts it:
 * nothing here moves, resizes or hides it.
 *
 * The pill is light: a white ground with ink type on the cream page,
 * and the chukum tan kept for the marks (the microphone, send, the
 * launcher button) with ink on it (about 6:1). Nothing in it is dark.
 * `--concierge-bg` is restated here because the platform writes the
 * brand's secondary colour onto <html>, which would otherwise win.
 * Everything is scoped to `.cl`.
 * ===================================================================== */
.cl {
  --site-color-accent: var(--xela-chukum, #cda187);
  --site-color-on-accent: var(--xela-ink, #2b2b2b);
  --site-color-accent-fg: var(--xela-ink, #2b2b2b);

  --site-color-bg: var(--xela-ground-alt, #ffffff);
  --concierge-bg: var(--xela-ground-alt, #ffffff);
  --site-color-fg: var(--xela-ink, #2b2b2b);
  --site-color-border: var(--xela-hairline, rgba(43, 43, 43, 0.14));

  --site-font-display: var(--xela-face-display, Georgia, "Times New Roman", serif);
  --site-font-body: var(--xela-face-body, system-ui, -apple-system, sans-serif);

  --concierge-fab-bg: var(--xela-chukum, #cda187);
  --concierge-fab-fg: var(--xela-ink, #2b2b2b);
  --concierge-fab-radius: 50%;
  --concierge-panel-radius: 2px;
}

/* The voice and send buttons are circles. */
.cl.cl .cc__mic,
.cl.cl .cc__send {
  border-radius: 50%;
}

/* On a phone the field is set at 16px: below that, iOS zooms the whole
   page when the guest taps into it. */
@media (max-width: 1000px) {
  .cl.cl .cc__input {
    font-size: 16px;
  }
}


/* chrome components */

/* =====================================================================
   Tuning surface (law H6). A consumer may set any of these on the element
   it gives the class to; none of them re-hue a locked brand role.
   ===================================================================== */
.site-sound[data-v-c47d7e18] {
  --snd-ink:     var(--site-color-fg, #1a1815);
  --snd-paper:   var(--site-color-bg, #fbf9f5);
  --snd-hairline: color-mix(in srgb, var(--snd-ink) 14%, transparent);
  --snd-h:       38px;
  --snd-radius:  999px;
  --snd-dock-lift: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--snd-ink);
  font-family: var(--site-font-body, inherit);
}

/* ── Floating shell ──────────────────────────────────────────────────
   A hairline plate on frosted paper, not a drop-shadowed bubble. The
   shadow is a single soft lift so it reads as a physical chip over a
   photograph without shouting. */
.site-sound--float[data-v-c47d7e18] {
  position: fixed;
  z-index: 900;
  padding: 3px;
  border-radius: var(--snd-radius);
  background: color-mix(in srgb, var(--snd-paper) 82%, transparent);
  border: 1px solid var(--snd-hairline);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease;
}
.site-sound--float[data-v-c47d7e18]:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -14px rgba(0,0,0,0.5);
}

/* Corners. Bottom placements add the measured dock lift, so the control
   sits ABOVE the concierge instead of under it (law E4). */
.site-sound--at-top-right[data-v-c47d7e18]    { top: calc(var(--site-header-h, 64px) + 14px); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-c47d7e18]     { top: calc(var(--site-header-h, 64px) + 14px); left:  max(14px, env(safe-area-inset-left));
}
.site-sound--at-bottom-right[data-v-c47d7e18] { bottom: calc(14px + var(--snd-dock-lift)); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-bottom-left[data-v-c47d7e18]  { bottom: calc(14px + var(--snd-dock-lift)); left:  max(14px, env(safe-area-inset-left));
}

/* Panels open UPWARD from a bottom-anchored control. */
.site-sound--at-bottom-right .site-sound__panel[data-v-c47d7e18],
.site-sound--at-bottom-left  .site-sound__panel[data-v-c47d7e18] { top: auto; bottom: calc(100% + 0.45rem);
}
.site-sound--at-top-left  .site-sound__panel[data-v-c47d7e18],
.site-sound--at-bottom-left .site-sound__panel[data-v-c47d7e18] { right: auto; left: 0;
}

/* ── The button ──────────────────────────────────────────────────── */
.site-sound__btn[data-v-c47d7e18] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--snd-h);
  padding: 0 0.7rem 0 0.6rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: inherit;
}
.site-sound__btn[data-v-c47d7e18]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px;
}
.site-sound__glyph[data-v-c47d7e18] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; line-height: 0; flex: none;
  opacity: 0.9;
}

/* ── The word ────────────────────────────────────────────────────────
   Small caps with wide tracking — the idiom hotel chrome already uses for
   nav and eyebrows, so the control reads as part of the design rather than
   a bolted-on widget. */
.site-sound__label[data-v-c47d7e18] {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; line-height: 1.2; text-align: left;
}
.site-sound__label-main[data-v-c47d7e18] {
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--site-tracking-ui, 0.14em);
  white-space: nowrap;
}
.site-sound__label-sub[data-v-c47d7e18] {
  margin-top: 1px;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: var(--site-tracking-body, normal);
  opacity: 0.6;
  max-width: 17ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-sound__sr[data-v-c47d7e18] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Player card ─────────────────────────────────────────────────── */
.site-sound--widget[data-v-c47d7e18] { --snd-radius: 12px; padding: 4px;
}
.site-sound--widget .site-sound__btn[data-v-c47d7e18] { gap: 0.6rem; padding: 0.25rem 0.65rem 0.25rem 0.25rem; border-radius: 9px;
}
.site-sound__art[data-v-c47d7e18] {
  flex: none; width: 38px; height: 38px; border-radius: 7px;
  object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px var(--snd-hairline);
}
.site-sound__cue[data-v-c47d7e18] {
  display: inline-flex; line-height: 0; opacity: 0.45;
  margin-left: 0.1rem;
}
.site-sound__btn:hover .site-sound__cue[data-v-c47d7e18] { opacity: 0.85;
}

/* Icon only. */
.site-sound--mini .site-sound__btn[data-v-c47d7e18] { min-width: var(--snd-h); padding: 0; justify-content: center; gap: 0;
}

/* In the header: no chrome of its own — inherit the bar. */
.site-sound--header[data-v-c47d7e18] { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0;
}
.site-sound--header .site-sound__btn[data-v-c47d7e18] { padding: 0 0.4rem;
}
.site-sound--header .site-sound__label-main[data-v-c47d7e18] { font-size: 0.62rem;
}

/* ── Level meter ─────────────────────────────────────────────────────
   Four bars, visible at rest (law H4) — the animation is enhancement, never
   the only way to read the state. */
.site-sound__eq[data-v-c47d7e18] { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px;
}
.site-sound__eq i[data-v-c47d7e18] { width: 2px; height: 35%; background: currentColor; border-radius: 1px;
}
.site-sound__eq.is-animated i[data-v-c47d7e18] { animation: site-sound-eq-c47d7e18 1s ease-in-out infinite;
}
.site-sound__eq.is-animated i[data-v-c47d7e18]:nth-child(2) { animation-delay: 140ms;
}
.site-sound__eq.is-animated i[data-v-c47d7e18]:nth-child(3) { animation-delay: 300ms;
}
.site-sound__eq.is-animated i[data-v-c47d7e18]:nth-child(4) { animation-delay: 460ms;
}
@keyframes site-sound-eq-c47d7e18 {
0%,100% { height: 28%;
}
50% { height: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.site-sound__eq.is-animated i[data-v-c47d7e18] { animation: none; height: 60%;
}
.site-sound--float[data-v-c47d7e18] { transition: none;
}
.site-sound--float[data-v-c47d7e18]:hover { transform: none;
}
}

/* ── Secondary controls + panels ─────────────────────────────────── */
.site-sound__more[data-v-c47d7e18] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 4px; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  opacity: 0.4;
}
.site-sound__more[data-v-c47d7e18]:hover { opacity: 0.9;
}
.site-sound__more[data-v-c47d7e18]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.site-sound__panel[data-v-c47d7e18] {
  position: absolute; top: calc(100% + 0.45rem); right: 0;
  min-width: 215px; padding: 0.7rem 0.8rem;
  background: var(--snd-paper);
  color: var(--snd-ink);
  border: 1px solid var(--snd-hairline);
  border-radius: 12px;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.45);
  z-index: 1;
}
.site-sound__track[data-v-c47d7e18] { margin: 0; font-size: 0.84rem; line-height: 1.3;
}
.site-sound__artist[data-v-c47d7e18] { margin: 0.12rem 0 0; font-size: 0.73rem; opacity: 0.6;
}
.site-sound__row[data-v-c47d7e18] { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.6rem;
}
.site-sound__vol[data-v-c47d7e18] { flex: 1; min-width: 0; accent-color: currentColor;
}
.site-sound__next[data-v-c47d7e18] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer; opacity: 0.65;
}
.site-sound__next[data-v-c47d7e18]:hover { opacity: 1;
}


/* ── Mobile ─────────────────────────────────────────────────────────
   A 38px cover plus two lines is most of a phone's width, so the card
   sheds its artwork and subtitle and becomes a labelled pill. Tap targets
   clear 44px whatever the layout. */
@media (max-width: 640px) {
.site-sound--at-top-right[data-v-c47d7e18], .site-sound--at-top-left[data-v-c47d7e18] { top: calc(var(--site-header-h, 56px) + 10px);
}
.site-sound--at-top-right[data-v-c47d7e18], .site-sound--at-bottom-right[data-v-c47d7e18] { right: max(10px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-c47d7e18],  .site-sound--at-bottom-left[data-v-c47d7e18]  { left:  max(10px, env(safe-area-inset-left));
}
.site-sound--widget .site-sound__art[data-v-c47d7e18],
  .site-sound__label-sub[data-v-c47d7e18] { display: none;
}
.site-sound--widget[data-v-c47d7e18] { --snd-radius: 999px; padding: 3px;
}
.site-sound--widget .site-sound__btn[data-v-c47d7e18] { padding: 0 0.7rem 0 0.6rem; gap: 0.5rem;
}
.site-sound__btn[data-v-c47d7e18] { min-height: 44px;
}
}


.pop-hdr-utils[data-v-d000ae81] {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  color: inherit;
}
.pop-hdr-utils__btn[data-v-d000ae81] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
  padding: 0 0.5rem;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
.pop-hdr-utils__btn[data-v-d000ae81]:hover { opacity: 0.7;
}
.pop-hdr-utils__btn-label[data-v-d000ae81] {
  /* Icon-only by default; themes can reveal labels via a wrapping class. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.pop-hdr-utils__lang[data-v-d000ae81] { position: relative;
}
.pop-hdr-utils__lang-toggle[data-v-d000ae81] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 40px;
  padding: 0 0.55rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.pop-hdr-utils__lang-toggle[data-v-d000ae81]:hover { opacity: 0.7;
}
.pop-hdr-utils__lang-menu[data-v-d000ae81] {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  min-width: 8rem;
  background: var(--site-surface, #fff);
  color: var(--site-ink, #111);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 0.6rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  z-index: 1200;
}
.pop-hdr-utils__lang-item[data-v-d000ae81] {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 0.4rem;
}
.pop-hdr-utils__lang-item[data-v-d000ae81]:hover { background: color-mix(in srgb, currentColor 8%, transparent);
}
.pop-hdr-utils__lang-item.is-current[data-v-d000ae81] { font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.pop-hdr-utils__btn[data-v-d000ae81], .pop-hdr-utils__lang-toggle[data-v-d000ae81] { transition: none;
}
}


.sdk-navacc__row[data-v-448a3764] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.sdk-navacc__caret[data-v-448a3764] {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex: none;
}
.sdk-navacc--open .sdk-navacc__caret[data-v-448a3764] { transform: rotate(-135deg);
}
.sdk-navacc__list[data-v-448a3764] {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0 0 0 1rem;
  border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.sdk-navacc__list[hidden][data-v-448a3764] { display: none;
}
.sdk-navacc__link[data-v-448a3764] {
  display: block;
  padding: 0.4rem 0;
  color: inherit;
  text-decoration: none;
  /* A child sits UNDER its parent in the hierarchy — say so typographically
   * rather than making it look like another top-level destination. */
  font-size: 0.9em;
  opacity: 0.85;
}
.sdk-navacc__link[data-v-448a3764]:hover,
.sdk-navacc__link[data-v-448a3764]:focus-visible { opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.sdk-navacc__caret[data-v-448a3764] { transition: none;
}
}


.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;
}


/* The radius of the opening, animated as a length. Where the browser
   cannot animate it, the cream fades instead (see .intro--open). */
@property --intro-r {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
.intro[data-v-ac15e8b7] {
  --intro-ground: var(--xela-ground, #f3ede8);
  --intro-ink: var(--xela-clay, #af856d);
  --intro-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --intro-h: min(38vh, 320px);
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
}

/* The cream, with a round opening cut in it from the centre. */
.intro__veil[data-v-ac15e8b7] {
  --intro-r: 0px;
  position: absolute;
  inset: 0;
  background: var(--intro-ground);
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent var(--intro-r),
    #000 calc(var(--intro-r) + 2px)
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent var(--intro-r),
    #000 calc(var(--intro-r) + 2px)
  );
  transition:
    --intro-r 850ms var(--intro-ease),
    opacity 450ms ease 400ms;
}

/* Sized on both sides: a browser that will not work the width out from
   the drawing's own proportions still gets the mark at its shape. */
.intro__mark[data-v-ac15e8b7] {
  position: relative;
  display: block;
  flex: none;
  height: var(--intro-h);
  width: calc(var(--intro-h) * 0.679);
  overflow: visible;
  fill: var(--intro-ink);
  transition:
    transform 850ms var(--intro-ease),
    opacity 400ms ease 100ms;
}

/* The shell never stands still while it is on the page. */
.intro__turn[data-v-ac15e8b7] { animation: intro-turn-ac15e8b7 9s linear infinite;
}
@keyframes intro-turn-ac15e8b7 {
to { transform: rotate(360deg);
}
}

/* The twist it grows out of. */
.intro__spin[data-v-ac15e8b7] {
  transform: rotate(-80deg);
  transition: transform 950ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* A petal: small and unseen at the heart, then in its place. */
.intro__petal[data-v-ac15e8b7] {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.35);
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 300ms ease;
  transition-delay: calc(var(--i) * 10ms);
}
.intro--bloom .intro__spin[data-v-ac15e8b7],
.intro--open .intro__spin[data-v-ac15e8b7] { transform: rotate(0deg);
}
.intro--bloom .intro__petal[data-v-ac15e8b7],
.intro--open .intro__petal[data-v-ac15e8b7] {
  transform: scale(1);
  opacity: 1;
}

/* The opening: the shell swells and goes, the cream draws back. */
.intro--open[data-v-ac15e8b7] { pointer-events: none;
}
.intro--open .intro__veil[data-v-ac15e8b7] {
  --intro-r: 90vmax;
  opacity: 0;
}
.intro--open .intro__mark[data-v-ac15e8b7] {
  transform: rotate(70deg) scale(2.6);
  opacity: 0;
}
.intro--open .intro__petal[data-v-ac15e8b7] { transition-delay: 0ms;
}

/* Reduced motion: the whole shell, standing still, then a plain fade. */
.intro--still[data-v-ac15e8b7],
.intro--fade[data-v-ac15e8b7] { transition: opacity 500ms ease;
}
.intro--still .intro__turn[data-v-ac15e8b7],
.intro--fade .intro__turn[data-v-ac15e8b7] { animation: none;
}
.intro--still .intro__spin[data-v-ac15e8b7],
.intro--fade .intro__spin[data-v-ac15e8b7],
.intro--still .intro__petal[data-v-ac15e8b7],
.intro--fade .intro__petal[data-v-ac15e8b7] {
  transform: none;
  opacity: 1;
  transition: none;
}
.intro--fade[data-v-ac15e8b7] {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 860px) {
.intro[data-v-ac15e8b7] { --intro-h: min(32vh, 240px);
}
}


/* Maison Felix's reveal grammar on XELA's own pages (see XelaMotion.vue).
   `translate`, not `transform`, so an element's own transform survives. */
html.xm-on [data-xm].xm-pre { transition: none;
}
html.xm-on [data-xm="up"].xm-pre { opacity: 0; translate: 0 38px;
}
html.xm-on [data-xm="blur"].xm-pre { opacity: 0; translate: 0 30px; filter: blur(16px);
}
html.xm-on [data-xm="mask"].xm-pre { clip-path: inset(14% 9% 14% 9%);
}
html.xm-on [data-xm].xm-run {
  transition:
    opacity 1s ease,
    translate 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.15s ease,
    clip-path 1.35s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--xm-d, 0ms);
}
/* the older 8px reveal steps aside where this grammar runs */
html.xm-on [data-reveal].xela-pre { opacity: 1; transform: none;
}

/* parallax: the media slides inside its own clipped box, scaled just
   enough that the slide never shows an edge */
html.xm-on .xm-plx {
  scale: 1.1;
  translate: 0 var(--xm-plx, 0px);
}

/* the splitter: hairlines draw out from the clay mark, which turns square */
html.xm-on .xela-splitter::before { transform-origin: 100% 50%; transform: scaleX(var(--xm-xp, 1));
}
html.xm-on .xela-splitter::after { transform-origin: 0 50%; transform: scaleX(var(--xm-xp, 1));
}
html.xm-on .xela-splitter__mark { transform: rotate(calc((1 - var(--xm-xp, 1)) * 135deg));
}
@media print {
html.xm-on [data-xm].xm-pre { opacity: 1; translate: none; filter: none; clip-path: none;
}
}
@media (prefers-reduced-motion: reduce) {
html.xm-on [data-xm].xm-pre { opacity: 1; translate: none; filter: none; clip-path: none;
}
html.xm-on .xm-plx { scale: none; translate: none;
}
}


/* Tuning surface for this component. */
.default-chrome[data-v-135aed91] {
  --hdr-h: var(--xela-header-h, 96px);
  --hdr-ink: var(--xela-ink, #2b2b2b);
  --hdr-ground: var(--xela-ground, #f3ede8);
  --hdr-on-media: #ffffff;
}
.default-hdr[data-v-135aed91] {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hdr-ground);
  border-bottom: 0;
  transition: background-color 0.4s ease;
}

/* The home hero owns the top of the viewport; the bar floats on it. */
.default-hdr--home[data-v-135aed91] {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.default-hdr--home + .default-hdr__spacer[data-v-135aed91] { display: none;
}

/* The booking funnel keeps its bar pinned the whole way down. Sticky
   cannot do it: .default-chrome is only as tall as the bar. */
.default-hdr--pinned[data-v-135aed91] {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.default-hdr--pinned + .default-hdr__spacer[data-v-135aed91] { height: var(--hdr-h);
}

/* Always-on scrim so the mark, the burger and Book read over the hero
   at first paint, with zero scroll. */
.default-hdr--transparent[data-v-135aed91] {
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--hdr-ink) 46%, transparent),
    color-mix(in oklab, var(--hdr-ink) 16%, transparent) 62%,
    transparent
  );
}
.default-hdr__row[data-v-135aed91] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--hdr-h);
  padding-inline: var(--xela-gutter, 22px);
}
.default-hdr__left[data-v-135aed91],
.default-hdr__right[data-v-135aed91] {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  min-width: 0;
}
.default-hdr__right[data-v-135aed91] { justify-content: flex-end;
}

/* The membership mark on the booking page, where "Book now" would stand.
   Sized inside the wordmark's line so the bar keeps its height. */
.default-hdr__member[data-v-135aed91] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 0;
  text-decoration: none;
}
.default-hdr__member + .default-hdr__member[data-v-135aed91] { margin-left: 22px;
}
.default-hdr__member-img[data-v-135aed91] {
  display: block;
  height: 30px;
  width: auto;
  max-width: 100%;
}
/* The level's symbol is carried but not shown: the lockup stands on
   every width (operator instruction, 2026-10-17). */
.default-hdr__member-symbol[data-v-135aed91] {
  display: none;
  height: 32px;
  width: auto;
}
.default-hdr--transparent .default-hdr__member-symbol[data-v-135aed91] { filter: brightness(0) invert(1);
}
.default-hdr__brand[data-v-135aed91] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.default-hdr__mark[data-v-135aed91] {
  height: 64px;
  width: auto;
  display: block;
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.default-hdr__brand-fallback[data-v-135aed91] {
  display: block;
  width: 1px;
  height: 64px;
}

/* Burger: three rules and the word, at the left edge. */
.default-hamburger[data-v-135aed91] {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 10px 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--hdr-ink);
  font-family: var(--xela-face-body, system-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}
.default-hamburger__bars[data-v-135aed91] {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 11px;
}
.default-hamburger__bars span[data-v-135aed91] {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
}
.default-hdr__book[data-v-135aed91],
.default-hdr[data-v-135aed91] .default-hdr__book {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--hdr-ink);
  font-family: var(--xela-face-body, system-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  /* Padded to a real tap target; the rule is drawn under the word. */
  padding: 15px 0 13px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 calc(100% - 9px);
  transition: color 0.25s ease;
}
.default-hdr__book[data-v-135aed91]:hover,
.default-hdr[data-v-135aed91] .default-hdr__book:hover {
  color: var(--xela-clay-deep, #7a6152);
}
.default-hdr--transparent .default-hamburger[data-v-135aed91],
.default-hdr--transparent[data-v-135aed91] .default-hdr__book {
  color: var(--hdr-on-media);
}
.default-hdr--transparent[data-v-135aed91] .default-hdr__book:hover {
  color: var(--xela-seafoam, #8ecbbd);
}

/* ---- Over the home hero, before any scroll: Maison Felix's opening
   (operator, 2026-10-19). The wordmark stands large, the burger and
   Reserve grow with it and sit on its middle line; the first scroll
   returns the bar to its everyday size (64px mark, 11px labels). ---- */
.default-hamburger[data-v-135aed91],
.default-hamburger__bars[data-v-135aed91],
.default-hdr[data-v-135aed91] .default-hdr__book,
.default-hdr__row[data-v-135aed91] {
  transition:
    font-size 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    gap 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s ease;
}
.default-hdr--transparent .default-hdr__row[data-v-135aed91] { padding-top: 22px;
}
.default-hdr--transparent .default-hdr__mark[data-v-135aed91] { height: 150px;
}
.default-hdr--transparent .default-hamburger[data-v-135aed91] {
  gap: 14px;
  font-size: 15px;
  letter-spacing: 0.18em;
}
.default-hdr--transparent .default-hamburger__bars[data-v-135aed91] { width: 30px; height: 15px;
}
.default-hdr--transparent .default-hamburger__bars span[data-v-135aed91] { height: 1.5px;
}
.default-hdr--transparent[data-v-135aed91] .default-hdr__book {
  font-size: 15px;
  letter-spacing: 0.18em;
  padding: 18px 0 15px;
  background-position: 0 calc(100% - 10px);
}

/* ---- The menu: a panel from the left edge, routes and a photograph. ---- */
.default-scrim[data-v-135aed91] {
  position: fixed;
  inset: 0;
  /* Above the concierge pill (999) and the cookie banner (900). */
  z-index: 1100;
  visibility: hidden;
  background-color: color-mix(in oklab, var(--hdr-ink) 0%, transparent);
  transition: background-color 0.5s ease, visibility 0s linear 0.5s;
}
.default-scrim--open[data-v-135aed91] {
  visibility: visible;
  background-color: color-mix(in oklab, var(--hdr-ink) 56%, transparent);
  transition: background-color 0.5s ease, visibility 0s linear 0s;
}
.default-drawer[data-v-135aed91] {
  --menu-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --menu-slide: cubic-bezier(0.76, 0, 0.24, 1);
  --menu-edge: var(--xela-gutter, 22px);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  width: min(1080px, 88vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  background: var(--hdr-ground);
  color: var(--hdr-ink);
  transform: translateX(-101%);
  visibility: hidden;
  transition: transform 0.65s var(--menu-slide), visibility 0s linear 0.65s;
}
.default-drawer--open[data-v-135aed91] {
  transform: translateX(0);
  visibility: visible;
  box-shadow: 30px 0 80px color-mix(in oklab, var(--hdr-ink) 26%, transparent);
  transition: transform 0.65s var(--menu-slide), visibility 0s linear 0s;
}
.default-drawer__inner[data-v-135aed91] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0 clamp(24px, 4vw, 72px) clamp(24px, 4vh, 48px) var(--menu-edge);
  overflow-y: auto;
}

/* The close control stands exactly where the burger stood. */
.default-drawer__head[data-v-135aed91] {
  flex: none;
  display: flex;
  align-items: center;
  height: var(--hdr-h);
}
.default-drawer__close[data-v-135aed91] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 10px 8px 10px 0;
  border: 0;
  background: transparent;
  color: var(--hdr-ink);
  font-family: var(--xela-face-body, system-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s var(--menu-ease);
}
.default-drawer__x[data-v-135aed91] {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}
.default-drawer__x[data-v-135aed91]::before,
.default-drawer__x[data-v-135aed91]::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.default-drawer__x[data-v-135aed91]::before { transform: rotate(45deg);
}
.default-drawer__x[data-v-135aed91]::after { transform: rotate(-45deg);
}
.default-drawer__close[data-v-135aed91]:hover { color: var(--xela-clay-deep, #7a6152);
}
.default-drawer__close[data-v-135aed91]:focus-visible {
  outline: 2px solid var(--xela-seafoam, #8ecbbd);
  outline-offset: 2px;
}
.default-drawer__nav[data-v-135aed91] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 16px;
  padding-left: clamp(0px, 3vw, 48px);
}
.default-drawer__list[data-v-135aed91] { list-style: none; margin: 0; padding: 0;
}
.default-drawer__item + .default-drawer__item[data-v-135aed91] { margin-top: clamp(6px, 1.3vh, 16px);
}

/* Each line rises into place a beat after the one above it. The panel
   itself is off screen when shut, so nothing is hidden at rest. */
.default-drawer__item[data-v-135aed91] {
  transform: translateY(18px);
  transition: transform 0.3s var(--menu-ease);
}
.default-drawer--open .default-drawer__item[data-v-135aed91] {
  transform: none;
  transition: transform 0.7s var(--menu-ease) calc(0.24s + var(--i, 0) * 55ms);
}
.default-drawer__link[data-v-135aed91],
.default-drawer[data-v-135aed91] .default-drawer__link {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  color: var(--hdr-ink);
  font-family: var(--xela-face-display, Georgia, serif);
  font-size: clamp(30px, 5.4vh, 54px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.4s var(--menu-ease), transform 0.4s var(--menu-ease);
}
@media (hover: hover) {
.default-drawer[data-v-135aed91] .default-drawer__link:hover {
    color: var(--xela-clay, #af856d);
    transform: translateX(10px);
}
}
.default-drawer[data-v-135aed91] .default-drawer__link:focus-visible {
  outline: 2px solid var(--xela-seafoam, #8ecbbd);
  outline-offset: 4px;
}
.default-drawer__item.is-current[data-v-135aed91] .default-drawer__link {
  color: var(--xela-clay, #af856d);
}
.default-drawer__foot[data-v-135aed91] {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-left: clamp(0px, 3vw, 48px);
  padding-top: 16px;
}
.default-drawer__cta[data-v-135aed91],
.default-drawer[data-v-135aed91] .default-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 220px;
  padding: 14px 36px;
  box-sizing: border-box;
  border: 1px solid var(--hdr-ink);
  background: var(--hdr-ink);
  color: var(--hdr-ground);
  text-decoration: none;
  font-family: var(--xela-face-body, system-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.default-drawer[data-v-135aed91] .default-drawer__cta:hover {
  background: var(--xela-clay-deep, #7a6152);
  border-color: var(--xela-clay-deep, #7a6152);
  color: #ffffff;
}
.default-drawer[data-v-135aed91] .default-drawer__cta--quiet {
  background: transparent;
  color: var(--hdr-ink);
}
.default-drawer[data-v-135aed91] .default-drawer__plain {
  display: inline-block;
  text-decoration: none;
  color: var(--hdr-ink);
  font-family: var(--xela-face-body, system-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

/* The photograph: the panel's full height, hard against its right edge,
   settling from a slight push-in as the panel arrives. */
.default-drawer__plate[data-v-135aed91] {
  position: relative;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in oklab, var(--xela-chukum, #cda187) 30%, var(--hdr-ground));
}
.default-drawer__plate img[data-v-135aed91] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transform: scale(1.08);
  transition: transform 1.6s var(--menu-slide);
}
.default-drawer--open .default-drawer__plate img[data-v-135aed91] { transform: scale(1);
}
@media (max-width: 860px) {
  /* Beside a centred wordmark a phone has about a hundred and thirty
     pixels left. The full lockup takes them, drawn to fit (operator
     instruction, 2026-10-17: the whole Design Hotels logo, not the symbol). */
.default-hdr__member[data-v-135aed91] { max-width: calc(100% - 14px);
}
.default-hdr__member-img[data-v-135aed91] {
    height: 19px;
    max-width: 100%;
    object-fit: contain;
    object-position: right center;
}
.default-chrome[data-v-135aed91] { --hdr-h: var(--xela-header-h-sm, 72px);
}
.default-hdr__mark[data-v-135aed91] { height: 46px;
}
.default-hdr__brand-fallback[data-v-135aed91] { height: 46px;
}
.default-hdr--transparent .default-hdr__row[data-v-135aed91] { padding-top: 14px;
}
.default-hdr--transparent .default-hdr__mark[data-v-135aed91] { height: 74px;
}
.default-hdr--transparent .default-hamburger__bars[data-v-135aed91] { width: 28px; height: 14px;
}
.default-hdr--transparent[data-v-135aed91] .default-hdr__book { font-size: 13px; letter-spacing: 0.16em;
}
.default-hamburger__word[data-v-135aed91] { display: none;
}
.default-hamburger[data-v-135aed91] { padding-block: 12px;
}
  /* A phone: the whole screen, the photograph a band at the foot. */
.default-drawer[data-v-135aed91] {
    --menu-edge: var(--xela-gutter, 20px);
    width: 100vw;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) clamp(110px, 18svh, 180px);
}
.default-drawer__nav[data-v-135aed91] { justify-content: flex-start; padding-top: 12px;
}
.default-drawer__item + .default-drawer__item[data-v-135aed91] { margin-top: clamp(4px, 1.1svh, 12px);
}
.default-drawer[data-v-135aed91] .default-drawer__link { font-size: clamp(24px, 4.1svh, 36px);
}
.default-drawer__foot[data-v-135aed91] { padding-bottom: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
.default-hdr[data-v-135aed91],
  .default-scrim[data-v-135aed91],
  .default-drawer[data-v-135aed91],
  .default-drawer__item[data-v-135aed91],
  .default-drawer--open .default-drawer__item[data-v-135aed91],
  .default-drawer__plate img[data-v-135aed91],
  .default-drawer[data-v-135aed91] .default-drawer__link,
  .default-drawer[data-v-135aed91] .default-drawer__cta {
    transition: none;
}
.default-drawer__item[data-v-135aed91],
  .default-drawer__plate img[data-v-135aed91] { transform: none;
}
}


.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);
}


/* =====================================================================
 *  THIS COMPONENT IS DELIBERATELY UNSTYLED.
 *
 *  The footer markup uses the public `site-footer__*` BEM class
 *  contract — themes can target any of the classes below to apply
 *  layout, typography, color, dividers, borders, hover states, etc.
 *  Legal policy chrome uses the `site-policy-modal__*` contract.
 *
 *  Class hooks available:
 *   .site-footer                 — <footer> root
 *   .site-footer--has-light-logo — modifier: brand ships a light mark
 *   .site-footer__inner          — content container
 *   .site-footer__body           — main body wrapper
 *   .site-footer__grid           — multi-column grid wrapper
 *   .site-footer__brand-block    — left/brand column container
 *   .site-footer__brand          — brand identity sub-block
 *   .site-footer__logo-link      — anchor wrapping the logo
 *   .site-footer__logo           — brand <img>
 *   .site-footer__wordmark-link  — anchor wrapping the wordmark fallback
 *   .site-footer__wordmark       — text wordmark fallback <span>
 *   .site-footer__hotel-name     — hotel-name paragraph
 *   .site-footer__tagline        — tagline paragraph
 *   .site-footer__visit          — contact sub-block container
 *   .site-footer__section-title  — small "section heading" paragraph
 *   .site-footer__link-list      — generic <ul> of links
 *   .site-footer__link-list--contact — modifier: contact list spacing
 *   .site-footer__text-link      — plain text link <a>/router-link
 *   .site-footer__address        — address span
 *   .site-footer__social-row     — <ul> of social links
 *   .site-footer__social-btn     — social link <a> (icon child)
 *   .site-footer__explore        — <nav> with site links
 *   .site-footer__newsletter-band — newsletter callout container
 *   .site-footer__newsletter-copy — text wrapper inside newsletter band
 *   .site-footer__nl-headline    — newsletter headline
 *   .site-footer__nl-body        — newsletter body paragraph
 *   .site-footer__nl-btn         — newsletter CTA anchor
 *   .site-footer__bottom         — legal + copyright bottom row
 *   .site-footer__legal          — <ul> of legal policy triggers
 *   .site-footer__legal-trigger  — <button> that opens the policy modal
 *   .site-footer__copyright      — copyright paragraph
 *
 *   .site-policy-modal           — fullscreen overlay <div role="dialog">
 *   .site-policy-modal__panel    — content panel inside the overlay
 *   .site-policy-modal__head     — header row with title + close
 *   .site-policy-modal__title    — modal heading <h2>
 *   .site-policy-modal__close    — close <button>
 *   .site-policy-modal__tabs     — tab strip <div role="tablist">
 *   .site-policy-modal__tab      — tab <button role="tab">
 *   .site-policy-modal__tab--active — modifier: currently selected tab
 *   .site-policy-modal__body     — tab panel showing one policy body
 *
 *  Decisions for the theme:
 *   · Footer ground: solid color, gradient, image, hairline rule.
 *   · Column layout: stacked, grid, asymmetric — and how it folds.
 *   · Typography for each role.
 *   · Social-icon shape, link affordances, newsletter band shape.
 *   · Bottom row layout (inline, stacked).
 *   · Policy trigger affordance: plain text link, button, pill.
 *   · Modal presentation: full-bleed overlay, centered card, drawer
 *     from the side. Tab strip orientation (horizontal, vertical).
 *   · Tab visual language (underline, fill, pill, none).
 *   · Policy body typography and how preserved newlines render
 *     (the body element uses `white-space: pre-wrap` so paragraph
 *     breaks the hotelier wrote are kept).
 *   · Enter / exit transition for the modal.
 * ===================================================================== */

/* Minimum structural primitives — no decoration. */
.site-footer__link-list[data-v-f96b901d],
.site-footer__legal[data-v-f96b901d],
.site-footer__social-row[data-v-f96b901d] { list-style: none; margin: 0; padding: 0;
}
.site-footer__logo[data-v-f96b901d] { display: block; max-width: 100%;
}
.site-footer__text-link[data-v-f96b901d],
.site-footer__nl-btn[data-v-f96b901d],
.site-footer__logo-link[data-v-f96b901d],
.site-footer__wordmark-link[data-v-f96b901d] { text-decoration: none; color: inherit;
}
.site-footer__legal-trigger[data-v-f96b901d],
.site-policy-modal__close[data-v-f96b901d],
.site-policy-modal__tab[data-v-f96b901d] {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* The modal is fixed to the viewport and traps interaction while
 * open. Themes layer the surface look on top. */
.site-policy-modal[data-v-f96b901d] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.site-policy-modal__panel[data-v-f96b901d] {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}
.site-policy-modal__body[data-v-f96b901d] {
  /* Preserve the hotelier's newlines so multi-paragraph policies read
   * correctly without any HTML in the source. */
  white-space: pre-wrap;
  overflow-y: auto;
  min-height: 0;
}

/* ---- XELA dressing. Tuning surface: the vars below. ---- */
.site-footer[data-v-f96b901d] {
  --ftr-ground: var(--xela-clay-deep, #7a6152);
  --ftr-ink: var(--xela-ground, #f3ede8);
  --ftr-ink-soft: color-mix(in oklab, var(--xela-ground, #f3ede8) 86%, transparent);
  --ftr-mark: var(--xela-chukum, #cda187);
  --ftr-rule: color-mix(in oklab, var(--xela-ground, #f3ede8) 26%, transparent);
  --ftr-underline: color-mix(in oklab, var(--xela-ground, #f3ede8) 58%, transparent);
  --ftr-gap: var(--xela-space-lg, 34px);
  --ftr-ease: var(--xela-reveal-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  /* The shell keeps this much floor clear for the concierge pill. The
     footer takes that strip as its own ground, so the page closes on
     clay and the pill floats over it, clear of every line of type. */
  --ftr-dock: calc(var(--concierge-dock-h, 0px) + env(safe-area-inset-bottom, 0px));
  background: var(--ftr-ground);
  color: var(--ftr-ink);
  font-family: var(--xela-face-body, system-ui);
  margin-bottom: calc(-1 * var(--ftr-dock));
  padding-bottom: var(--ftr-dock);
}
.site-footer__inner[data-v-f96b901d] {
  width: 100%;
  max-width: calc(var(--xela-max, 1396px) + var(--xela-gutter, 22px) * 2);
  margin-inline: auto;
  padding: 76px var(--xela-gutter, 22px) 22px;
  box-sizing: border-box;
}
.site-footer__grid[data-v-f96b901d] {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 40px var(--ftr-gap);
  align-items: start;
}
.site-footer__brand-block[data-v-f96b901d] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 22px var(--ftr-gap);
  align-items: start;
}
/* The mark, and the house's channels right under it; contact beside. */
.site-footer__brand[data-v-f96b901d] { grid-column: 1; grid-row: 1;
}
.site-footer__visit[data-v-f96b901d] { grid-column: 2; grid-row: 1 / span 3;
}

/* The memberships, third in the mark's own column: the house, its
   channels, then what it belongs to. Each mark is drawn in its own white
   cut and never recoloured; 40px is the floor and a level's own minimum
   only ever raises it. The whole link is the target. */
.site-footer__marks[data-v-f96b901d] {
  grid-column: 1;
  grid-row: 3;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
}
.site-footer__mark-link[data-v-f96b901d] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}
a.site-footer__mark-link[data-v-f96b901d]:hover,
a.site-footer__mark-link[data-v-f96b901d]:focus-visible { opacity: 1;
}
.site-footer__mark[data-v-f96b901d] {
  display: block;
  height: max(40px, var(--ftr-mark-min, 0px));
  width: auto;
  max-width: 100%;
}
.site-footer__logo-link[data-v-f96b901d] { display: inline-block;
}
/* The light cut carries 7.9% of clear space either side of the drawn
   mark. Shift by that much, so the mark itself stands on the column edge
   with the wordmark, the glyphs and the fine print below it. */
.site-footer__logo[data-v-f96b901d] { height: 74px; width: auto; transform: translateX(-7.9%);
}
/* The mark already says the name; the SDK's name paragraph beneath it is a
   second copy of the logo's own alt text (copy law C5). Hide it when a mark
   renders, keep it when the theme falls back to the wordmark. */
.site-footer__brand:has(.site-footer__logo-link) .site-footer__hotel-name[data-v-f96b901d] {
  display: none;
}
.site-footer__wordmark[data-v-f96b901d] {
  font-family: var(--xela-face-display, Georgia, serif);
  font-size: 30px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-footer__hotel-name[data-v-f96b901d],
.site-footer__tagline[data-v-f96b901d] {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--ftr-ink) 82%, transparent);
  max-width: 34ch;
}
.site-footer__section-title[data-v-f96b901d] {
  margin: 0 0 14px;
  font-size: var(--xela-t-label, 11px);
  letter-spacing: var(--xela-ls-label, 0.1em);
  text-transform: uppercase;
  font-weight: 500;
  color: color-mix(in oklab, var(--ftr-ink) 70%, transparent);
}
.site-footer__link-list li + li[data-v-f96b901d] { margin-top: 9px;
}
.site-footer__link-list[data-v-f96b901d] { font-size: 14px; line-height: 1.6;
}
/* Explore reads down two columns. */
.site-footer__explore .site-footer__link-list[data-v-f96b901d] {
  columns: 2;
  column-gap: var(--ftr-gap);
  max-width: 440px;
}
.site-footer__explore .site-footer__link-list li[data-v-f96b901d] {
  break-inside: avoid;
  margin-top: 0;
  padding-bottom: 9px;
}
.site-footer__address[data-v-f96b901d] {
  display: block;
  max-width: 28ch;
  color: color-mix(in oklab, var(--ftr-ink) 86%, transparent);
}
.site-footer__text-link[data-v-f96b901d] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--ftr-underline);
  transition: text-decoration-color 0.25s ease;
}
.site-footer__text-link[data-v-f96b901d]:hover,
.site-footer__text-link[data-v-f96b901d]:focus-visible {
  text-decoration-color: var(--ftr-ink);
}

/* Bare marks, no box. Each keeps a thumb-sized hit area; the row is
   pulled left by the slack so the first glyph stands on the column edge. */
.site-footer__social-row[data-v-f96b901d] {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  margin-left: -12px;
}
.site-footer__social-btn[data-v-f96b901d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ftr-ink);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-footer__social-btn[data-v-f96b901d]:hover,
.site-footer__social-btn[data-v-f96b901d]:focus-visible {
  opacity: 0.78;
  transform: translateY(-2px);
}
.site-footer__social-btn[data-v-f96b901d] svg { display: block; width: 20px; height: 20px;
}
.site-footer__newsletter-band[data-v-f96b901d] {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--ftr-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.site-footer__nl-headline[data-v-f96b901d] {
  margin: 0;
  font-family: var(--xela-face-display, Georgia, serif);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-footer__nl-body[data-v-f96b901d] {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  max-width: 46ch;
  color: color-mix(in oklab, var(--ftr-ink) 82%, transparent);
}
.site-footer__nl-btn[data-v-f96b901d] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 13px 28px;
  border: 1px solid var(--ftr-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 0.28s ease, color 0.28s ease;
}
.site-footer__nl-btn[data-v-f96b901d]:hover {
  background: var(--ftr-ink);
  color: var(--ftr-ground);
}

/* === The NAMRON collection ==========================================
 * A ledger on hairlines. Left, the operator's wordmark, standing on the
 * logo's column. Right, the drawers, starting on the contact column and
 * running to the edge. A drawer opens by growing its grid row (0fr to
 * 1fr): the height is the content's own, nothing is measured in script. */
.xf-col[data-v-f96b901d] {
  display: grid;
  /* The first track is the logo's column in the row above: half of the
     1.45fr brand block, less half a gap. */
  grid-template-columns:
    calc((100% - var(--ftr-gap)) * 0.29592 - var(--ftr-gap) / 2)
    minmax(0, 1fr);
  gap: 0 var(--ftr-gap);
  align-items: start;
  margin-top: 56px;
  border-top: 1px solid var(--ftr-rule);
}
.xf-col__sign[data-v-f96b901d] { padding-top: 25px;
}
.xf-col__mark-link[data-v-f96b901d] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  opacity: 0.94;
  transition: opacity 0.3s ease;
}
.xf-col__mark-link[data-v-f96b901d]:hover,
.xf-col__mark-link[data-v-f96b901d]:focus-visible { opacity: 1;
}
.xf-col__mark[data-v-f96b901d] {
  display: block;
  width: clamp(168px, 13.4vw, 196px);
  height: auto;
}
.xf-drawer + .xf-drawer[data-v-f96b901d] { border-top: 1px solid var(--ftr-rule);
}
.xf-drawer__h[data-v-f96b901d] { margin: 0; font: inherit;
}
.xf-drawer__btn[data-v-f96b901d] {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ftr-ink);
  font: inherit;
  cursor: pointer;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 27px 0 25px;
  text-align: left;
}
.xf-drawer__title[data-v-f96b901d] {
  font-family: var(--xela-face-display, Georgia, serif);
  font-size: clamp(26px, 2vw, 30px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform 0.45s var(--ftr-ease);
}
/* A cross that lays its upright down when the drawer is open. */
.xf-drawer__cross[data-v-f96b901d] {
  position: relative;
  width: 15px;
  height: 15px;
  margin-right: 2px;
  color: var(--ftr-mark);
}
.xf-drawer__cross[data-v-f96b901d]::before,
.xf-drawer__cross[data-v-f96b901d]::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ftr-ease);
}
.xf-drawer__cross[data-v-f96b901d]::after { transform: rotate(90deg);
}
.xf-drawer--open .xf-drawer__cross[data-v-f96b901d]::after { transform: rotate(0deg);
}
.xf-drawer--open .xf-drawer__cross[data-v-f96b901d]::before { transform: rotate(180deg);
}
@media (hover: hover) {
.xf-drawer__btn:hover .xf-drawer__title[data-v-f96b901d] { transform: translateX(8px);
}
}
.xf-drawer__btn[data-v-f96b901d]:focus-visible {
  outline: 1px solid var(--ftr-ink);
  outline-offset: 4px;
}
.xf-drawer__panel[data-v-f96b901d] {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 0.6s var(--ftr-ease),
    visibility 0s linear 0.6s;
}
.xf-drawer--open .xf-drawer__panel[data-v-f96b901d] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 0.6s var(--ftr-ease),
    visibility 0s linear 0s;
}
.xf-drawer__clip[data-v-f96b901d] { overflow: hidden; min-height: 0;
}
.xf-drawer__inner[data-v-f96b901d] {
  padding: 3px 0 36px;
  transform: translateY(-8px);
  transition: transform 0.7s var(--ftr-ease);
}
.xf-drawer--open .xf-drawer__inner[data-v-f96b901d] { transform: none;
}
.xf-drawer__group + .xf-drawer__group[data-v-f96b901d] { margin-top: 30px;
}
.xf-drawer__sub[data-v-f96b901d] {
  margin: 0 0 16px;
  font-size: var(--xela-t-label, 11px);
  line-height: var(--xela-lh-label, 1.18);
  letter-spacing: var(--xela-ls-label, 0.1em);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ftr-ink-soft);
}
/* The sub-head carries the site's splitter mark: a short chukum rule. */
.xf-drawer__sub[data-v-f96b901d]::after {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  margin-top: 10px;
  background: var(--ftr-mark);
}
.xf-drawer__list[data-v-f96b901d] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px var(--ftr-gap);
}
.xf-drawer__row[data-v-f96b901d] { min-width: 0;
}
.xf-drawer__name[data-v-f96b901d] {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ftr-ink);
}
.xf-drawer__places[data-v-f96b901d] {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.xf-drawer__place-row[data-v-f96b901d] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}
/* The place is the link, and it is underlined at rest so it reads as one. */
.xf-drawer__row[data-v-f96b901d] .xf-drawer__link,
.xf-drawer__link[data-v-f96b901d] {
  display: inline-block;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ftr-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--ftr-underline);
  transition: text-decoration-color 0.3s ease;
}
.xf-drawer__row[data-v-f96b901d] .xf-drawer__link:hover,
.xf-drawer__row[data-v-f96b901d] .xf-drawer__link:focus-visible,
.xf-drawer__link[data-v-f96b901d]:hover,
.xf-drawer__link[data-v-f96b901d]:focus-visible {
  text-decoration-color: var(--ftr-ink);
}
/* This house, in its own list: marked, not shouted. */
.xf-drawer__row[data-v-f96b901d] .xf-drawer__link--here,
.xf-drawer__link--here[data-v-f96b901d] {
  text-decoration-color: var(--ftr-mark);
}
.xf-drawer__here[data-v-f96b901d] {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ftr-ink-soft);
}
.site-footer__bottom[data-v-f96b901d] {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--ftr-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
/* Under the collection the rule closes the ledger: no air above it. */
.site-footer__bottom--ledger[data-v-f96b901d] { margin-top: 0;
}
.xf-fine[data-v-f96b901d] .xf-fine__link,
.xf-fine__link[data-v-f96b901d] {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--ftr-underline);
  transition: text-decoration-color 0.25s ease;
}
.site-footer__legal[data-v-f96b901d] {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.site-footer__legal-trigger[data-v-f96b901d] {
  font-size: var(--xela-t-label, 11px);
  letter-spacing: var(--xela-ls-label, 0.1em);
  text-transform: uppercase;
  /* A button brings its own side padding: the row would start 6px in. */
  padding: 0 0 3px;
  /* A button drops the underline its class asks for: say it again. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--ftr-underline);
  transition: text-decoration-color 0.25s ease;
}
.site-footer__legal-trigger[data-v-f96b901d]:hover,
.site-footer__legal-trigger[data-v-f96b901d]:focus-visible,
.xf-fine[data-v-f96b901d] .xf-fine__link:hover,
.xf-fine[data-v-f96b901d] .xf-fine__link:focus-visible { text-decoration-color: var(--ftr-ink);
}
.site-footer__copyright[data-v-f96b901d] {
  margin: 0;
  margin-left: auto;
  font-size: var(--xela-t-label, 11px);
  letter-spacing: var(--xela-ls-label, 0.1em);
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ftr-ink) 68%, transparent);
}
.site-footer__language[data-v-f96b901d] { font-size: 12px;
}

/* ---- Policy modal: a centred card on the hotel's own cream. ---- */
.site-policy-modal[data-v-f96b901d] {
  background: color-mix(in oklab, var(--xela-ink, #2b2b2b) 58%, transparent);
  padding: var(--xela-gutter, 22px);
}
.site-policy-modal__panel[data-v-f96b901d] {
  width: min(760px, 100%);
  max-height: min(84svh, 100%);
  background: var(--xela-ground-alt, #ffffff);
  color: var(--xela-ink, #2b2b2b);
  padding: 30px 34px 26px;
  box-sizing: border-box;
}
.site-policy-modal__head[data-v-f96b901d] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.site-policy-modal__title[data-v-f96b901d] {
  margin: 0;
  font-family: var(--xela-face-display, Georgia, serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.site-policy-modal__close[data-v-f96b901d],
.site-policy-modal__tab[data-v-f96b901d] {
  font-size: var(--xela-t-label, 11px);
  letter-spacing: var(--xela-ls-label, 0.1em);
  text-transform: uppercase;
}
.site-policy-modal__tabs[data-v-f96b901d] {
  display: flex;
  gap: 24px;
  margin: 22px 0 18px;
  border-bottom: 1px solid var(--xela-hairline, rgba(43, 43, 43, 0.14));
}
.site-policy-modal__tab[data-v-f96b901d] {
  padding: 0 0 10px;
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  color: var(--xela-ink-soft, #6e6e6e);
}
.site-policy-modal__tab--active[data-v-f96b901d] {
  color: var(--xela-ink, #2b2b2b);
  border-bottom-color: var(--xela-clay, #af856d);
}
.site-policy-modal__body[data-v-f96b901d] {
  font-size: 15px;
  line-height: 1.7;
  padding-bottom: 6px;
  letter-spacing: 0.012em;
  text-transform: none;
}
.site-policy-modal__heading[data-v-f96b901d] {
  margin: 26px 0 10px;
  font-family: var(--xela-face-body, system-ui);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--xela-ink, #2b2b2b);
}
.site-policy-modal__heading[data-v-f96b901d]:first-child { margin-top: 0;
}
.site-policy-modal__para[data-v-f96b901d] {
  margin: 0 0 14px;
  white-space: pre-line;
}
.site-policy-modal__list[data-v-f96b901d] {
  margin: 0 0 14px;
  padding: 0 0 0 20px;
  list-style: disc;
}
.site-policy-modal__list li[data-v-f96b901d] { margin: 0 0 6px;
}
@media (max-width: 1180px) {
.xf-drawer__list[data-v-f96b901d] { grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.xf-col[data-v-f96b901d] {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 34px;
}
.xf-col__sign[data-v-f96b901d] { padding: 24px 0 18px;
}
.xf-col__drawers[data-v-f96b901d] { border-top: 1px solid var(--ftr-rule);
}
.xf-col__mark[data-v-f96b901d] { width: 176px;
}
.xf-drawer__btn[data-v-f96b901d] { padding: 22px 0 20px;
}
.xf-drawer__title[data-v-f96b901d] { font-size: 26px;
}
.xf-drawer__inner[data-v-f96b901d] { padding-bottom: 28px;
}
.xf-drawer__list[data-v-f96b901d] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
}
  /* Thumb-sized rows: each place keeps a tall target under its house. */
.xf-drawer__places[data-v-f96b901d] { margin-top: 2px; gap: 0;
}
.xf-drawer__row[data-v-f96b901d] .xf-drawer__link,
  .xf-drawer__link[data-v-f96b901d] {
    padding-block: 10px;
}
.site-footer__legal.xf-fine[data-v-f96b901d] { gap: 0 22px;
}
.site-footer__inner[data-v-f96b901d] { padding-top: 46px;
}
.site-footer__grid[data-v-f96b901d],
  .site-footer__brand-block[data-v-f96b901d] { grid-template-columns: 1fr; grid-template-rows: none; gap: 28px;
}
.site-footer__brand[data-v-f96b901d],
  .site-footer__visit[data-v-f96b901d],
  .site-footer__social-row[data-v-f96b901d],
  .site-footer__marks[data-v-f96b901d] { grid-column: 1; grid-row: auto;
}
.site-footer__marks[data-v-f96b901d] { margin-top: 0;
}
.site-footer__social-row[data-v-f96b901d] { margin-top: -10px;
}
.site-footer__explore .site-footer__link-list[data-v-f96b901d] { column-gap: 20px; max-width: none;
}
.site-footer__explore .site-footer__link-list li[data-v-f96b901d] { padding-bottom: 0;
}
.site-footer__logo[data-v-f96b901d] { height: 50px;
}
.site-footer__link-list li + li[data-v-f96b901d] { margin-top: 0;
}
.site-footer__link-list a[data-v-f96b901d] { display: inline-block; padding-block: 13px;
}
.site-footer__address[data-v-f96b901d] { padding-block: 8px 0;
}
.site-footer__legal-trigger[data-v-f96b901d] { padding-block: 13px 3px;
}
.site-footer__bottom[data-v-f96b901d] { margin-top: 30px;
}
.site-footer__bottom--ledger[data-v-f96b901d] { margin-top: 0;
}
.site-footer__copyright[data-v-f96b901d] { margin-left: 0;
}
.site-policy-modal__panel[data-v-f96b901d] { padding: 24px 20px 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.site-footer__text-link[data-v-f96b901d],
  .site-footer__social-btn[data-v-f96b901d],
  .site-footer__nl-btn[data-v-f96b901d],
  .site-footer__legal-trigger[data-v-f96b901d],
  .xf-col__mark-link[data-v-f96b901d],
  .xf-drawer__title[data-v-f96b901d],
  .xf-drawer__cross[data-v-f96b901d]::before,
  .xf-drawer__cross[data-v-f96b901d]::after,
  .xf-drawer__panel[data-v-f96b901d],
  .xf-drawer--open .xf-drawer__panel[data-v-f96b901d],
  .xf-drawer__inner[data-v-f96b901d],
  .xf-drawer__name[data-v-f96b901d] { transition: none;
}
.xf-drawer__inner[data-v-f96b901d] { transform: none;
}
}


/* 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 */
@font-face { font-family: "Albert Sans"; src: url("/cdn/01M2R30HKTSSMQ327H4DGZB1MZ/01M64XY9PWE9VAV7VN4D2EDS07.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/cdn/01M2R30HKTSSMQ327H4DGZB1MZ/01M64XYPKZXHZJEFMS5XF268XD.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/cdn/01M2R30HKTSSMQ327H4DGZB1MZ/01M64XZ30MG70MTPY2NR7P9ZYX.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Awesome Ways"; src: url("/cdn/01M2R30HKTSSMQ327H4DGZB1MZ/01M64XZGQF93FMGQXB91GHXHYM.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nourd-Medium"; src: url("/cdn/01M2R30HKTSSMQ327H4DGZB1MZ/01M64XZXEVVMX56BJ34RDVGPTB.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Nourd-Regular"; src: url("/cdn/01M2R30HKTSSMQ327H4DGZB1MZ/01M64Y0JFA17KW1APRNEPTBGW8.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ortica Linear"; src: url("/cdn/01M2R30HKTSSMQ327H4DGZB1MZ/01M64Y0RW4MFN0S63YJF64M33Q.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Ortica Linear"; src: url("/cdn/01M2R30HKTSSMQ327H4DGZB1MZ/01M64Y13M5HF0KD3922AHWC5DR.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --site-color-fg: #2b2b2b;
  --site-color-accent: #af856d;
  --site-color-bg: #cda187;
  --site-color-on-accent: #ffffff;
  --concierge-bg: rgb(205 161 135);
  --site-color-fg-muted: #453e3a;
  --a11y-focus: #ffffff;
  --site-color-site-1: #f3ede8;
  --site-color-site-2: #ffffff;
  --site-color-site-3: #3b3b3a;
  --site-color-site-4: #8ecbbd;
  --site-color-site-5: #af856d;
  --site-color-site-6: #484848;
  --site-color-site-7: #6e6e6e;
  --site-color-site-8: #2b2b2b;
  --site-font-display: "Cormorant Garamond", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-body: "EB Garamond", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-albertsans-light: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-albertsans-medium: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-albertsans-regular: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-awesome-ways: "Awesome Ways", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-nourd-medium: "Nourd-Medium", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-nourd-regular: "Nourd-Regular", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-orticalinear-light: "Ortica Linear", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-orticalinear-regular: "Ortica Linear", system-ui, -apple-system, "Segoe UI", sans-serif;
}