@import url("https://fonts.googleapis.com/css2?family=Spinnaker&family=Inter:wght@300;400;500;600&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;

  --site-header-h:     76px;

  /* ===================================================================
   * 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%; }
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 */
/* ==========================================================================
   FONT BRIDGE — must stay the FIRST rule in this file (@import is only
   valid before any other rule).

   The SDK injects the BRAND record's Google Fonts href, not this theme's
   fonts.js, so Spinnaker and Inter were never fetched at all and the
   families below silently fell back to system-ui. Importing them here is
   what actually gets the faces onto the page.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Spinnaker&family=Inter:wght@300;400;500;600&display=swap');

/* ==========================================================================
   BLUE APPLE BEACH · Tierra Bomba, Cartagena
   Design tokens — single source of truth for colour + type.

   Calibrated 2026-08-08 against a live DOM measurement of the operator's
   own site, blueapplebeach.com (Playwright, 1440x960). Every value below
   that carries a "src:" note was read off that page, not eyeballed.

   The LOCKED palette the hotelier supplied already matched the live site
   almost exactly, so it is carried verbatim. Two tokens are NEW because
   the live site paints two things the locked set has no name for (the dark
   booking strip and the body-copy ink); both are noted as such.
   ========================================================================== */

:root{

  /* ---------- palette · "ten shades, one island" (LOCKED core) ---------- */
  /* Nº 01 — Midnight Crossing · headlines, nav ink, quote band, inverted CTA
     src: rgb(49,65,110) — nav links, every section heading, the Condé Nast band */
  --site-color-accent: #31416e;

  /* Nº 02 — Salt-Washed Sky · the site's signature full-bleed band, and soft
     tints: underlines, frames, ghost rules. A WASH, never body text on white.
     src: rgb(195,207,223) — 2.7M px² of painted area, second only to white */
  --site-color-fg: #c3cfdf;

  /* Nº 03 — Bleached Linen · the page itself
     src: rgb(255,255,255) — 25.2M px², the dominant ground */
  --site-color-bg: #ffffff;

  /* Nº 09 — Driftwood · captions, eyebrows-at-rest, tertiary prose */
  --site-color-muted: #76839c;

  /* Nº 10 — Shell Line · every hairline and field border */
  --site-color-border: #dde4ee;

  /* ---------- extended island shades (from the chosen palette) ---------- */
  /* Nº 04 — Tierra Bomba Clay · the accolade band
     src: rgb(228,191,174) */
  --site-color-secondary-bg: #e4c0af;

  /* Nº 05 — Frangipani · small flourishes ONLY, never a large field
     src: rgb(218,110,142) — the "Things to do here" link */
  --site-color-secondary-button-colour: #da6e8e;

  /* Nº 06 — Chef's Garden · THE ask: book the boat, stay the night
     src: rgb(72,94,54) — the SPOTIFY US / BOOK A ROOM buttons */
  --site-color-button-colour: #495f37;

  /* Nº 07 — Sea Grape · tertiary background wash
     src: rgb(192,204,154) — the Biodiversity band */
  --site-color-x-bg-3: #c0cc9a;

  /* Nº 08 — Palm Shade · deep-green panels, primary-button hover anchor
     src: rgba(101,119,53,.9) — the Sustainability panel laid over photography */
  --site-color-box-colour: #647834;

  /* ---------- NEW · roles the live site paints that the locked set
       has no name for. Added rather than re-purposing a locked role. ------ */

  /* Booking strip · the persistent dark bar above the logo bar
     src: the #SITE_HEADER html-component strip */
  --site-color-bar: #3d3d3d;

  /* Body ink · what nearly every paragraph on the live site is actually set in.
     src: rgb(84,92,116). Sits between --site-color-accent and --site-color-muted;
     using --site-color-muted for body would be a shade too pale to read at size. */
  --site-color-body-ink: #545c74;

  /* Body ink on the pale-blue band, where the live site lightens it
     src: rgb(143,163,191) */
  --site-color-body-ink-on-wash: #8fa3bf;

  /* ---------- type scale ----------
     The live site sets headings at 20/26–28 and body at 14/19.6 — genuinely
     small for a 1440 viewport. Lifted one notch here (headings ~26, body ~16,
     leading 1.65) as the agreed modernisation; the RATIOS and the tracking
     discipline are unchanged, so the page still reads as the same site. */
  --site-h1:      clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);  /* 22 → 26 */
  --site-h1-lh:   1.3;
  --site-h2:      clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem);   /* 20 → 23 */
  --site-h2-lh:   1.32;
  --site-body:    clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);      /* 15 → 16 */
  --site-body-lh: 1.65;
  --site-small:   clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem); /* 12 → 13 */
  --site-micro:   0.6875rem;                                    /* 11 — footer */

  /* Buttons carry the live site's tracked small-caps voice.
     src: 10px/1px and 14px/3.5px → ~0.1em–0.25em; settled at 0.16em. */
  --site-track-btn: 0.16em;
  --site-track-eyebrow: 0.2em;

  /* ---------- measure ----------
     src: the live content column is 980px, centred, with full-bleed photo
     bands breaking out to the viewport. Widened a touch to 1040. */
  --site-col: 1040px;
  --site-col-wide: 1240px;
  --site-gutter: clamp(1.25rem, 4vw, 3rem);
  --site-band-y: clamp(3rem, 6vw, 5.5rem);

  /* ---------- app-shell reserve ----------
     This theme's header is IN-FLOW — it occupies its own space and
     scrolls away, exactly like the operator's own site — so the shell
     reserves nothing above or beside the page. */
  --site-header-h: 0px;
  --site-header-w: 0px;
}

/* ==========================================================================
   TYPE FAMILIES — declared LAST and with !important, deliberately.

   The brand store writes the hotelier's locked brand fonts as an INLINE
   style attribute on <html> at boot. An inline declaration beats any
   ordinary stylesheet rule, so a plain `:root { --site-font-display: … }`
   here is silently discarded and every surface renders in the brand
   record's Open Sans / Cormorant Garamond instead.

   The families below are the ones the operator's own site actually uses,
   measured off blueapplebeach.com: Spinnaker for every heading, nav item
   and button (57 text nodes), Helvetica Neue Light for body copy (38).
   Helvetica Neue is not a webfont — Apple devices get the real face,
   everyone else falls to Inter, the nearest widely-available grotesque.
   ========================================================================== */
:root {
  --site-font-display: Spinnaker, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  --site-font-body: 'Helvetica Neue', HelveticaNeue, Inter, Helvetica, Arial, sans-serif !important;
}

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


/* brand */
/* bab/brand.css — synthesized GLOBAL finish layer.
 *
 * Global refinements (selection, focus, scrollbar, smoothing) + an
 * OPT-IN texture & editorial-fixture toolkit. Components add the
 * `bab-*` utility classes where the manifest's material direction
 * calls for them. Loaded globally by src/main.js after tokens.css.
 */

/* ── Universal polish — pure upside, applies everywhere ─────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
@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;
  border-radius: 2px;
}
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--site-color-fg) 24%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--site-color-fg) 22%, transparent);
  border-radius: 999px;
  border: 3px solid var(--site-color-bg);
}
img { -webkit-user-drag: none; user-select: none; }

:root {
  /* Elevation — soft, brand-tinted shadows (depth without harsh black) */
  --bab-shadow-sm: 0 1px 2px color-mix(in srgb, var(--site-color-fg) 8%, transparent);
  --bab-shadow-md: 0 8px 24px -8px color-mix(in srgb, var(--site-color-fg) 22%, transparent);
  --bab-shadow-lg: 0 30px 60px -24px color-mix(in srgb, var(--site-color-fg) 32%, transparent);
  --bab-grain-opacity: 0.045;
}

/* ── OPT-IN texture: film grain ──────────────────────────────────────
 * TWO forms. `bab-grain` puts grain on a section band via ::after
 * (the host must be a normal box — NEVER an <img>/<video>: replaced
 * elements have no ::after, so grain on them renders NOTHING).
 * `bab-grain-overlay` is an explicit absolute layer you place as
 * the LAST child inside a position:relative media host (e.g. over a
 * hero photo) — use this for imagery, never the ::after form. */
.bab-grain { position: relative; }
.bab-grain::after,
.bab-grain-overlay {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: var(--bab-grain-opacity, 0.045);
  mix-blend-mode: overlay;
}

/* ── OPT-IN imagery treatment: per-brand grade + hover lift + frame ──
 * The grade is synthesized from the manifest (imagery_treatment +
 * color_philosophy) so it's bespoke, not a global preset. A faint inset
 * hairline frames photos so they read placed, not pasted. */
.bab-img-grade {
  filter: sepia(0.08) saturate(1.02) contrast(0.99) brightness(1.01);
  transition: filter var(--bab-dur-slow, 600ms) var(--bab-ease, ease),
              transform var(--bab-dur-slow, 900ms) var(--bab-ease, ease);
}
.bab-img-grade:hover { filter: saturate(1.02) contrast(1.0); }
.bab-img-frame { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site-color-fg) 9%, transparent); }
.bab-img-zoom { overflow: hidden; }
.bab-img-zoom > img { transition: transform 1200ms var(--bab-ease, cubic-bezier(0.22,1,0.36,1)); will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .bab-img-zoom:hover > img { transform: scale(1.04); }
}
/* Real duotone — desaturate the image, then wash ink->accent over it via
 * a blended overlay on a relative wrapper (NOT a filter, so it tints). */
.bab-img-duotone { position: relative; overflow: hidden; }
.bab-img-duotone > img { filter: grayscale(1) contrast(1.05); display: block; width: 100%; height: 100%; object-fit: cover; }
.bab-img-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--site-color-accent) 38%, transparent),
    color-mix(in srgb, var(--site-color-fg) 46%, transparent));
  mix-blend-mode: multiply;
}

/* ── Editorial fixtures — the small marks that read "designed" ──── */
.bab-dropcap::first-letter {
  float: left;
  font-family: var(--site-font-display);
  font-size: 3.4em;
  line-height: 0.72;
  padding: 0.06em 0.12em 0 0;
  color: var(--site-color-accent);
}
.bab-pullquote {
  font-family: var(--site-font-display);
  font-size: clamp(1.4rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  font-style: italic;
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 2px solid var(--site-color-accent);
  color: var(--site-color-fg);
}
.bab-figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  font-family: var(--bab-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-color-fg-muted);
}
.bab-figcaption::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.bab-eyebrow {
  font-family: var(--bab-mono, var(--site-font-body));
  font-size: 0.72rem;
  letter-spacing: var(--bab-track-eyebrow, 0.14em);
  text-transform: uppercase;
  color: var(--site-color-fg-muted);
}
/* Tabular figures — self-contained: serif display faces (Fraunces,
 * Newsreader…) often lack tnum, so force the mono stack which always has
 * it. Use on prices, dates, counts, room numbers. */
.bab-tnum {
  font-family: var(--bab-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Considered link underline — grows from the baseline on hover, not the
 * browser default. Reach for this on body/inline links. */
.bab-underline-link {
  color: var(--site-color-accent-strong, var(--site-color-accent));
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--bab-dur, 320ms) var(--bab-ease, ease);
  padding-bottom: 1px;
}
.bab-underline-link:hover { background-size: 100% 1px; }
/* Minimum touch target — wrap small tap affordances (icon buttons, nav
 * links) so mobile hit areas clear 44px. */
.bab-tap { min-height: var(--bab-tap, 44px); min-width: var(--bab-tap, 44px); display: inline-flex; align-items: center; justify-content: center; }
/* Staggered children — set style="--i:0|1|2…" per child. */
@media (prefers-reduced-motion: no-preference) {
  .bab-stagger > * { animation: bab-rise var(--bab-dur-slow, 640ms) var(--bab-ease, ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
}
/* Animated disclosure (accordion) — grid-rows trick, no JS height math,
 * no hard snap. Toggle the `is-open` class. Calm boutique sites never
 * hard-cut a FAQ open/closed. */
.bab-disclosure { display: grid; grid-template-rows: minmax(0, 0fr); transition: grid-template-rows var(--bab-dur, 320ms) var(--bab-ease, ease); }
.bab-disclosure.is-open { grid-template-rows: minmax(0, 1fr); }
.bab-disclosure > * { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .bab-disclosure { transition: none; } }

/* ── Readability helpers ────────────────────────────────────────── */
/* Cap line length for body copy — long measures kill readability. */
.bab-measure { max-width: 68ch; }
/* A guaranteed-legible scrim for text laid over imagery. Put on the
 * media wrapper, behind the text, so headlines never sit on raw photo. */
.bab-text-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--site-color-fg) 62%, transparent) 0%,
    color-mix(in srgb, var(--site-color-fg) 30%, transparent) 38%,
    transparent 70%
  );
}

/* ── Safe entrance — CSS-only, auto-plays on load, ALWAYS ends visible.
 * Use this INSTEAD of `opacity:0` + IntersectionObserver: a JS observer
 * that doesn't fire leaves content invisible forever (reads as broken).
 * Under reduced-motion the rule is dropped and content is simply
 * visible. Keep it to a FEW elements per page — not every node. ── */
@media (prefers-reduced-motion: no-preference) {
  .bab-rise { animation: bab-rise 640ms var(--bab-ease, cubic-bezier(0.22,1,0.36,1)) both; }
  .bab-rise-2 { animation-delay: 90ms; }
  .bab-rise-3 { animation-delay: 180ms; }
  @keyframes bab-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Rhythm & flow — one continuous scroll, not stacked blocks ───── */
/* Every section breathes on the SAME vertical rhythm so the page reads
 * as a single composition. Use these instead of ad-hoc margins. */
.bab-section { padding-block: var(--bab-section-y, clamp(4rem, 10vw, 8rem)); }
.bab-section--tight { padding-block: calc(var(--bab-section-y, 6rem) * 0.55); }
.bab-section--flush-next { padding-bottom: 0; }
/* A breathing hairline divider — soft section break without a hard cut. */
.bab-divider {
  height: 1px;
  border: 0;
  margin: 0 var(--bab-gutter, 2rem);
  background: var(--bab-hairline, color-mix(in srgb, var(--site-color-fg) 12%, transparent));
}
/* Color-block transition that BLEEDS into the next section (overlap),
 * so adjacent bands flow rather than butt up against each other. */
.bab-bleed-top { margin-top: calc(var(--bab-section-y, 6rem) * -0.4); padding-top: calc(var(--bab-section-y, 6rem) * 0.9); }


/* 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-6602a8cc] {
  --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-6602a8cc] {
  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-6602a8cc]: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-6602a8cc]    { top: calc(var(--site-header-h, 64px) + 14px); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-6602a8cc]     { top: calc(var(--site-header-h, 64px) + 14px); left:  max(14px, env(safe-area-inset-left));
}
.site-sound--at-bottom-right[data-v-6602a8cc] { bottom: calc(14px + var(--snd-dock-lift)); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-bottom-left[data-v-6602a8cc]  { 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-6602a8cc],
.site-sound--at-bottom-left  .site-sound__panel[data-v-6602a8cc],
.site-sound--at-bottom-right .site-sound__spotify[data-v-6602a8cc],
.site-sound--at-bottom-left  .site-sound__spotify[data-v-6602a8cc] { top: auto; bottom: calc(100% + 0.45rem);
}
.site-sound--at-top-left  .site-sound__panel[data-v-6602a8cc],
.site-sound--at-bottom-left .site-sound__panel[data-v-6602a8cc],
.site-sound--at-top-left  .site-sound__spotify[data-v-6602a8cc],
.site-sound--at-bottom-left .site-sound__spotify[data-v-6602a8cc] { right: auto; left: 0;
}

/* ── The button ──────────────────────────────────────────────────── */
.site-sound__btn[data-v-6602a8cc] {
  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-6602a8cc]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px;
}
.site-sound__glyph[data-v-6602a8cc] {
  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-6602a8cc] {
  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-6602a8cc] {
  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-6602a8cc] {
  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-6602a8cc] {
  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-6602a8cc] { --snd-radius: 12px; padding: 4px;
}
.site-sound--widget .site-sound__btn[data-v-6602a8cc] { gap: 0.6rem; padding: 0.25rem 0.65rem 0.25rem 0.25rem; border-radius: 9px;
}
.site-sound__art[data-v-6602a8cc] {
  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-6602a8cc] {
  display: inline-flex; line-height: 0; opacity: 0.45;
  margin-left: 0.1rem;
}
.site-sound__btn:hover .site-sound__cue[data-v-6602a8cc] { opacity: 0.85;
}

/* Icon only. */
.site-sound--mini .site-sound__btn[data-v-6602a8cc] { 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-6602a8cc] { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0;
}
.site-sound--header .site-sound__btn[data-v-6602a8cc] { padding: 0 0.4rem;
}
.site-sound--header .site-sound__label-main[data-v-6602a8cc] { 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-6602a8cc] { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px;
}
.site-sound__eq i[data-v-6602a8cc] { width: 2px; height: 35%; background: currentColor; border-radius: 1px;
}
.site-sound__eq.is-animated i[data-v-6602a8cc] { animation: site-sound-eq-6602a8cc 1s ease-in-out infinite;
}
.site-sound__eq.is-animated i[data-v-6602a8cc]:nth-child(2) { animation-delay: 140ms;
}
.site-sound__eq.is-animated i[data-v-6602a8cc]:nth-child(3) { animation-delay: 300ms;
}
.site-sound__eq.is-animated i[data-v-6602a8cc]:nth-child(4) { animation-delay: 460ms;
}
@keyframes site-sound-eq-6602a8cc {
0%,100% { height: 28%;
}
50% { height: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.site-sound__eq.is-animated i[data-v-6602a8cc] { animation: none; height: 60%;
}
.site-sound--float[data-v-6602a8cc] { transition: none;
}
.site-sound--float[data-v-6602a8cc]:hover { transform: none;
}
}

/* ── Secondary controls + panels ─────────────────────────────────── */
.site-sound__more[data-v-6602a8cc] {
  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-6602a8cc]:hover { opacity: 0.9;
}
.site-sound__more[data-v-6602a8cc]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.site-sound__panel[data-v-6602a8cc] {
  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-6602a8cc] { margin: 0; font-size: 0.84rem; line-height: 1.3;
}
.site-sound__artist[data-v-6602a8cc] { margin: 0.12rem 0 0; font-size: 0.73rem; opacity: 0.6;
}
.site-sound__row[data-v-6602a8cc] { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.6rem;
}
.site-sound__vol[data-v-6602a8cc] { flex: 1; min-width: 0; accent-color: currentColor;
}
.site-sound__next[data-v-6602a8cc] {
  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-6602a8cc]:hover { opacity: 1;
}

/* Spotify's player: collapsed, NOT unmounted — the Iframe API controller IS
   this element, so removing it stops the music. */
.site-sound__spotify[data-v-6602a8cc] {
  position: absolute; top: calc(100% + 0.45rem); right: 0;
  width: min(380px, calc(100vw - 28px));
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--snd-hairline);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.45);
  background: var(--snd-paper);
  z-index: 1;
  height: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease;
}
.site-sound__spotify.is-open[data-v-6602a8cc] { height: auto; opacity: 1; visibility: visible; pointer-events: auto;
}
.site-sound__frame[data-v-6602a8cc] { display: block; width: 100%; border: 0;
}

/* ── 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-6602a8cc], .site-sound--at-top-left[data-v-6602a8cc] { top: calc(var(--site-header-h, 56px) + 10px);
}
.site-sound--at-top-right[data-v-6602a8cc], .site-sound--at-bottom-right[data-v-6602a8cc] { right: max(10px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-6602a8cc],  .site-sound--at-bottom-left[data-v-6602a8cc]  { left:  max(10px, env(safe-area-inset-left));
}
.site-sound--widget .site-sound__art[data-v-6602a8cc],
  .site-sound__label-sub[data-v-6602a8cc] { display: none;
}
.site-sound--widget[data-v-6602a8cc] { --snd-radius: 999px; padding: 3px;
}
.site-sound--widget .site-sound__btn[data-v-6602a8cc] { padding: 0 0.7rem 0 0.6rem; gap: 0.5rem;
}
.site-sound__btn[data-v-6602a8cc] { min-height: 44px;
}
.site-sound__spotify[data-v-6602a8cc] { width: min(340px, calc(100vw - 20px));
}
}


.pop-hdr-utils[data-v-2737b9f6] {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  color: inherit;
}
.pop-hdr-utils__btn[data-v-2737b9f6] {
  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-2737b9f6]:hover { opacity: 0.7;
}
.pop-hdr-utils__btn-label[data-v-2737b9f6] {
  /* 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-2737b9f6] { position: relative;
}
.pop-hdr-utils__lang-toggle[data-v-2737b9f6] {
  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-2737b9f6]:hover { opacity: 0.7;
}
.pop-hdr-utils__lang-menu[data-v-2737b9f6] {
  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-2737b9f6] {
  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-2737b9f6]:hover { background: color-mix(in srgb, currentColor 8%, transparent);
}
.pop-hdr-utils__lang-item.is-current[data-v-2737b9f6] { font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.pop-hdr-utils__btn[data-v-2737b9f6], .pop-hdr-utils__lang-toggle[data-v-2737b9f6] { transition: none;
}
}


/* The panel deliberately styles itself from `--site-*` tokens ONLY, so it
 * picks up each theme's palette + type without the theme writing any CSS.
 * Themes that want more control restyle via the class hooks above. */
.sdk-navgrp[data-v-3cbae843] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.sdk-navgrp__trigger[data-v-3cbae843] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
/* A caret drawn in CSS — no icon font, no SVG asset to ship. */
.sdk-navgrp__caret[data-v-3cbae843] {
  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-navgrp--open .sdk-navgrp__caret[data-v-3cbae843] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
/* The link-trigger already carries a caret; this separate hit target exists
 * for touch + keyboard. On hover-capable pointers the panel opens on hover,
 * so it's redundant there — but it stays focusable for keyboard users. */
.sdk-navgrp__caret-btn[data-v-3cbae843] {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}
@media (hover: none), (pointer: coarse) {
  /* Touch: the trigger's own caret is decorative — this button is the opener. */
.sdk-navgrp__caret-btn[data-v-3cbae843] { display: inline-flex;
}
.sdk-navgrp__trigger > .sdk-navgrp__caret[data-v-3cbae843] { display: none;
}
}
.sdk-navgrp__caret-btn[data-v-3cbae843]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.sdk-navgrp__panel[data-v-3cbae843] {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;              /* above the concierge bubble (998–999) */
  min-width: max(180px, 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-navgrp__panel[hidden][data-v-3cbae843] { display: none;
}
.sdk-navgrp__item[data-v-3cbae843] { margin: 0;
}
.sdk-navgrp__link[data-v-3cbae843] {
  display: block;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--site-radius, 4px) * 0.75);
}
.sdk-navgrp__link[data-v-3cbae843]:hover,
.sdk-navgrp__link[data-v-3cbae843]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-navgrp__caret[data-v-3cbae843] { transition: none;
}
}


.sdk-navacc__row[data-v-50dcd8b2] {
  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-50dcd8b2] {
  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-50dcd8b2] { transform: rotate(-135deg);
}
.sdk-navacc__list[data-v-50dcd8b2] {
  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-50dcd8b2] { display: none;
}
.sdk-navacc__link[data-v-50dcd8b2] {
  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-50dcd8b2]:hover,
.sdk-navacc__link[data-v-50dcd8b2]:focus-visible { opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.sdk-navacc__caret[data-v-50dcd8b2] { transition: none;
}
}


.sdk-cta[data-v-6d008a43] {
  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-6d008a43] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-6d008a43] {
  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-6d008a43] {
  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-6d008a43] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-6d008a43] {
  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-6d008a43] { display: none;
}
.sdk-cta__item[data-v-6d008a43] { margin: 0;
}
.sdk-cta__link[data-v-6d008a43] {
  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-6d008a43]:hover,
.sdk-cta__link[data-v-6d008a43]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-cta__caret[data-v-6d008a43] { transition: none;
}
}


.sdk-cta[data-v-de91feec] {
  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-de91feec] { display: inline-flex; align-items: center;
}
.sdk-cta__caret-btn[data-v-de91feec] {
  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-de91feec] {
  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-de91feec] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
.sdk-cta__panel[data-v-de91feec] {
  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-de91feec] { display: none;
}
.sdk-cta__item[data-v-de91feec] { margin: 0;
}
.sdk-cta__link[data-v-de91feec] {
  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-de91feec]:hover,
.sdk-cta__link[data-v-de91feec]: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-de91feec] {
  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-de91feec] { transition: none;
}
}


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


/* ── local structural vars (colour + type stay on --site-* tokens) ── */
.bab-header[data-v-a39e01ca],
.bab-drawer-root[data-v-a39e01ca] {
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px; --s5: 40px;
  /* Wide enough that the nav never has to fight for room, but the row
     inside it is CENTRED and only as wide as its content — see .bab-bar. */
  --bar-max: 1440px;
  --gutter: var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
  --bar-gutter: clamp(1rem, 2.4vw, 2.75rem);
  --ease: cubic-bezier(.22,.8,.3,1);
}

/* ══ shell — in-flow at the top of the page; scrolls away with the
      content, exactly like the operator's own site ══ */
.bab-header[data-v-a39e01ca] {
  position: relative;
  z-index: 1000; /* keeps the SDK dropdown panels (z:1000) above the concierge */
  background: var(--site-color-bg, #fff);
  transition: box-shadow .3s var(--ease);
}
.bab-header.is-scrolled[data-v-a39e01ca] {
  box-shadow: 0 10px 30px -26px color-mix(in srgb, var(--site-color-accent, #31416e) 70%, transparent);
}

/* ══ tier 1 · direct-booking strip ══ */
.bab-strip[data-v-a39e01ca] {
  background: var(--site-color-bar, #3d3d3d);
  color: var(--site-color-bg, #fff);
}
.bab-strip__inner[data-v-a39e01ca] {
  max-width: var(--bar-max);
  margin-inline: auto;
  min-height: 52px;
  padding: 6px var(--bar-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.bab-strip__pitch[data-v-a39e01ca] {
  margin: 0;
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: var(--site-small, .8125rem);
  letter-spacing: .04em;
  line-height: 1.3;
}
.bab-search[data-v-a39e01ca] {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  flex-wrap: wrap;
}
.bab-field[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.bab-field__label[data-v-a39e01ca] {
  font-family: var(--site-font-body, system-ui, sans-serif);
  font-size: var(--site-small, .8125rem);
  font-weight: 400;
  white-space: nowrap;
  opacity: .92;
}
/* The date control is a form primitive, so it wears the brand's own field
   look rather than a bespoke one: pale ground, hairline, dark ink. */
.bab-field__input[data-v-a39e01ca] {
  font-family: var(--site-font-body, system-ui, sans-serif);
  font-size: var(--site-small, .8125rem);
  color: var(--site-color-accent, #31416e);
  background: var(--site-color-bg, #fff);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 7px 10px;
  min-width: 8.5rem;
  line-height: 1.2;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.bab-field__input[data-v-a39e01ca]:hover { border-color: var(--site-color-fg, #c3cfdf);
}
.bab-field__input[data-v-a39e01ca]:focus-visible {
  outline: none;
  border-color: var(--site-color-fg, #c3cfdf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-color-fg, #c3cfdf) 45%, transparent);
}
.bab-search__go[data-v-a39e01ca] {
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: var(--site-small, .8125rem);
  letter-spacing: var(--site-track-btn, .16em);
  text-transform: uppercase;
  color: var(--site-color-bar, #3d3d3d);
  background: var(--site-color-bg, #fff);
  border: 1px solid var(--site-color-bg, #fff);
  border-radius: 4px;
  padding: 8px 22px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.bab-search__go[data-v-a39e01ca]:hover {
  background: var(--site-color-fg, #c3cfdf);
  border-color: var(--site-color-fg, #c3cfdf);
}
.bab-search__go[data-v-a39e01ca]:focus-visible {
  outline: 2px solid var(--site-color-fg, #c3cfdf);
  outline-offset: 2px;
}

/* ══ tier 2 · the white bar ══════════════════════════════════════════
   src (1440): the row is a CLUSTER ~1176px wide — socials x110, logo
   x230, nav x357–1037, instant book x1071–1188, language to x1286 —
   with 25–35px between each group. It is not spread to the edges.

   So: the groups do NOT flex. Nothing stretches to fill, nothing is
   pushed out with `margin-left:auto`; the row is simply centred and is
   exactly as wide as its contents. `--bar-max` is the ceiling it may
   grow to on a very wide window, not a width it tries to occupy. */
.bab-bar[data-v-a39e01ca] {
  max-width: var(--bar-max);
  margin-inline: auto;
  min-height: 96px;
  padding: var(--s3) var(--bar-gutter);
  display: flex;
  align-items: center;
  /* phone: burger left, mini-CTA right. The centred cluster starts at the
     breakpoint where the full nav appears. */
  justify-content: space-between;
  gap: clamp(14px, 1.9vw, 32px);
}
/* the source's hairline under the bar runs the FULL width of the window,
   while the row inside it stays centred */
.bab-header[data-v-a39e01ca]::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--site-color-border, #dde4ee);
}

/* left cluster — social marks, then the lockup */
.bab-bar__lead[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  gap: clamp(var(--s2), 1.4vw, var(--s4));
  flex: none;
}
.bab-socials[data-v-a39e01ca] {
  /* visible on phones too (Tiger, 2026-08-16) — hidden only in the
     1060–1239 window where the centred desktop cluster is tightest */
  display: flex;
  align-items: center;
  gap: var(--s4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bab-social[data-v-a39e01ca] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  /* the source's marks are a neutral grey, not the palette's blue-grey */
  color: #8f8f8f;
  text-decoration: none;
  transition: color .25s ease, transform .3s var(--ease);
}
.bab-social svg[data-v-a39e01ca] { width: 20px; height: 20px; fill: currentColor; display: block;
}
.bab-social[data-v-a39e01ca]:hover { color: var(--site-color-accent, #31416e); transform: translateY(-1px);
}
.bab-social[data-v-a39e01ca]:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: 2px;
  border-radius: 999px;
}
.bab-brand[data-v-a39e01ca] {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.bab-brand img[data-v-a39e01ca] {
  display: block;
  height: clamp(40px, 3.8vw, 56px);
  width: auto;
}
.bab-wordmark[data-v-a39e01ca] {
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: clamp(1rem, .85rem + .7vw, 1.3rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--site-color-accent, #31416e);
  white-space: nowrap;
}

/* nav — src: 12px, unspaced, caps, x357→x1037 for eight entries.
   `flex: 0 1 auto` — it takes the room its labels need and NO more, so it
   never stretches a gap between itself and the booking circles. It may
   still wrap to a second row rather than collide (Spanish runs a third
   longer than English). */
.bab-nav[data-v-a39e01ca] {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 2px;
  column-gap: clamp(10px, 1.15vw, 22px);
  flex: 0 1 auto;
  min-width: 0;
}
.bab-nav[data-v-a39e01ca] .bab-navlink {
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--site-color-accent, #31416e);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--s2) 0;
  line-height: 1;
  white-space: nowrap;
}
.bab-nav[data-v-a39e01ca] .bab-navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 2px;
  height: 1px;
  background: currentColor;
  transition: right .3s var(--ease);
}
.bab-nav[data-v-a39e01ca] .bab-navlink:hover::after,
.bab-nav[data-v-a39e01ca] .bab-navlink:focus-visible::after { right: 0;
}
.bab-nav[data-v-a39e01ca] .bab-navlink:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: 3px;
}
/* src: the operator's header shows plain labels — no caret glyph. The
   groups still open on hover (and stay keyboard-reachable: the trigger
   itself is focusable and opens the panel). */
.bab-nav[data-v-a39e01ca] .sdk-navgrp__caret { display: none;
}

/* dropdown panel */
.bab-nav[data-v-a39e01ca] .sdk-navgrp__panel {
  background: var(--site-color-bg, #fff);
  border: 1px solid var(--site-color-border, #dde4ee);
  border-radius: 10px;
  box-shadow: 0 24px 48px -30px color-mix(in srgb, var(--site-color-accent, #31416e) 55%, transparent);
  padding: var(--s3);
}
.bab-nav[data-v-a39e01ca] .sdk-navgrp__panel a {
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: var(--site-small, .8125rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--site-color-accent, #31416e);
  text-decoration: none;
  white-space: nowrap;
}
.bab-nav[data-v-a39e01ca] .sdk-navgrp__panel a:hover { color: var(--site-color-button-colour, #495f37);
}

/* ── the instant-book circles ─────────────────────────────────────── */
.bab-instant[data-v-a39e01ca] {
  /* both circles show at every width (Tiger, 2026-08-16) — the phone
     bar compacts them below instead of collapsing to a dropdown */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
}
.bab-instant__eyebrow[data-v-a39e01ca] {
  margin: 0;
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--site-color-body-ink, #545c74);
  line-height: 1;
  white-space: nowrap;
}
.bab-instant__ctas[data-v-a39e01ca] { display: flex;
}
.bab-orbrow[data-v-a39e01ca] { display: inline-flex; gap: 8px;
}

/* one circle per CTA the hotelier configured. The source paints the first
   pale and the second slate; that maps onto the 'secondary' and 'primary'
   button styles the CTA editor already offers. */
[data-v-a39e01ca] .bab-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 57px;
  height: 57px;
  border-radius: 999px;
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 4px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s ease;
}
[data-v-a39e01ca] .bab-orb--primary {
  background: var(--site-color-accent, #31416e);
  border-color: var(--site-color-accent, #31416e);
  color: var(--site-color-bg, #fff);
}
[data-v-a39e01ca] .bab-orb--secondary {
  background: var(--site-color-fg, #c3cfdf);
  border-color: var(--site-color-fg, #c3cfdf);
  color: var(--site-color-accent, #31416e);
}
[data-v-a39e01ca] .bab-orb--plain {
  background: transparent;
  border-color: var(--site-color-border, #dde4ee);
  color: var(--site-color-accent, #31416e);
}
[data-v-a39e01ca] .bab-orb:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--site-color-accent, #31416e) 75%, transparent);
}
[data-v-a39e01ca] .bab-orb:active { transform: translateY(0) scale(.98); transition-duration: .12s;
}
[data-v-a39e01ca] .bab-orb:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: 3px;
}
.bab-bar__utils[data-v-a39e01ca] {
  display: none;
  flex: none;
  color: var(--site-color-muted, #76839c);
}
/* The language control is OPTIONAL, and when it is switched off the SDK
   still renders its slot — as an empty comment node. A zero-width flex
   child costs nothing itself, but it STILL earns a `gap`, and that phantom
   gap pushed the whole centred cluster half a gap (~14px) to the left.
   Take it out of the flow when it holds no element.
   Specificity 0,2,0 so it beats the `display:block` in the 1060px query
   regardless of source order. */
.bab-bar .bab-bar__utils[data-v-a39e01ca]:not(:has(*)) { display: none;
}

/* ── the flag language toggle (EN / ES) ─────────────────────────────
   src: Wix linguist round flags — 20x20 PNGs, 23px apart, no ring, no
   shadow, exactly as the operator's live header renders them. */
.bab-langs[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  gap: 23px;
}
.bab-lang[data-v-a39e01ca] {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: none;
  width: 20px;
  height: 20px;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 999px;
  display: inline-flex;
}
.bab-lang img[data-v-a39e01ca] { width: 20px; height: 20px; display: block;
}
.bab-lang[data-v-a39e01ca]:focus-visible { outline: 2px solid var(--site-color-accent, #31416e); outline-offset: 2px;
}

/* ── phone controls ───────────────────────────────────────────────── */
.bab-burger[data-v-a39e01ca] {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  padding: 11px;
  flex: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bab-burger span[data-v-a39e01ca] {
  display: block;
  height: 1.6px;
  width: 100%;
  background: var(--site-color-accent, #31416e);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.bab-burger[data-v-a39e01ca]:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: 2px;
}
.bab-burger.is-open span[data-v-a39e01ca]:nth-child(1) { transform: translateY(7.5px) rotate(45deg);
}
.bab-burger.is-open span[data-v-a39e01ca]:nth-child(2) { opacity: 0;
}
.bab-burger.is-open span[data-v-a39e01ca]:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg);
}

/* the collapsed mini-CTA dropdown is retired — the two orbs render at
   every width instead (it showed "DAYS" plus an empty caret circle) */
.bab-bar__mcta[data-v-a39e01ca] { display: none;
}
[data-v-a39e01ca] .bab-mini-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: .6875rem;
  letter-spacing: var(--site-track-btn, .16em);
  text-transform: uppercase;
  color: var(--site-color-bg, #fff);
  background: var(--site-color-accent, #31416e);
  text-decoration: none;
  padding: .8em 1.35em;
  border-radius: 999px;
  white-space: nowrap;
}
[data-v-a39e01ca] .bab-mini-cta:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: 2px;
}
@media (min-width: 1060px) and (max-width: 1239px) {
.bab-socials[data-v-a39e01ca] { display: none;
}
}
@media (min-width: 1060px) {
  /* the full row appears — and now it is a centred cluster rather than a
     space-between spread */
.bab-bar[data-v-a39e01ca] { justify-content: center;
}
.bab-nav[data-v-a39e01ca] { display: flex;
}
.bab-bar__utils[data-v-a39e01ca] { display: block;
}
.bab-burger[data-v-a39e01ca] { display: none;
}
}
@media (max-width: 1059px) {
  /* phone bar: burger · socials · logo · both orbs, compacted */
.bab-bar[data-v-a39e01ca] { gap: 10px;
}
.bab-instant__eyebrow[data-v-a39e01ca] { display: none;
}
.bab-orbrow[data-v-a39e01ca] { gap: 6px;
}
[data-v-a39e01ca] .bab-orb { width: 46px; height: 46px; font-size: 0.58rem; padding: 2px;
}
.bab-socials[data-v-a39e01ca] { gap: 8px;
}
.bab-social[data-v-a39e01ca] { width: 26px; height: 26px;
}
.bab-social svg[data-v-a39e01ca] { width: 17px; height: 17px;
}
.bab-brand img[data-v-a39e01ca] { height: 38px;
}
}
@media (max-width: 720px) {
.bab-strip__inner[data-v-a39e01ca] { justify-content: center;
}
.bab-strip__pitch[data-v-a39e01ca] { flex: 1 0 100%; text-align: center;
}
.bab-search[data-v-a39e01ca] { width: 100%; justify-content: center;
}
.bab-field__input[data-v-a39e01ca] { min-width: 0; width: 100%;
}
.bab-field[data-v-a39e01ca] { flex: 1 1 9rem;
}
}

/* ══ mobile drawer (teleported to body) ══ */
.bab-drawer-root[data-v-a39e01ca] {
  position: fixed;
  inset: 0;
  z-index: 1000; /* above the concierge (998–999) */
}
.bab-drawer__backdrop[data-v-a39e01ca] {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--site-color-accent, #31416e) 52%, transparent);
}
.bab-drawer[data-v-a39e01ca] {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(88vw, 400px);
  background: var(--site-color-bg, #fff);
  border-left: 1px solid var(--site-color-border, #dde4ee);
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 5vw, 2rem);
  overflow-y: auto;
}
.bab-drawer__head[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.bab-brand--drawer img[data-v-a39e01ca] { height: clamp(40px, 9vw, 50px);
}
.bab-drawer__close[data-v-a39e01ca] {
  flex: none;
  width: 44px; height: 44px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--site-color-border, #dde4ee);
  border-radius: 999px;
  cursor: pointer;
  color: var(--site-color-accent, #31416e);
  transition: background-color .25s ease;
}
.bab-drawer__close svg[data-v-a39e01ca] {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.bab-drawer__close[data-v-a39e01ca]:hover { background: color-mix(in srgb, var(--site-color-fg, #c3cfdf) 40%, transparent);
}
.bab-drawer__close[data-v-a39e01ca]:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: 2px;
}
.bab-drawer__nav[data-v-a39e01ca] {
  display: flex;
  flex-direction: column;
  margin-top: var(--s4);
}
.bab-drawer-root[data-v-a39e01ca] .bab-mlink {
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: .9375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--site-color-accent, #31416e);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--site-color-border, #dde4ee);
}
.bab-drawer-root[data-v-a39e01ca] .bab-mlink:hover { color: var(--site-color-button-colour, #495f37);
}
/* the pills are now the theme's own children of this wrapper, so its
   gap does the spacing (Tiger asked for clear air between them) */
.bab-drawer__ctawrap[data-v-a39e01ca] {
  margin-top: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-v-a39e01ca] .bab-dcta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: .75rem;
  letter-spacing: var(--site-track-btn, .16em);
  text-transform: uppercase;
  color: var(--site-color-bg, #fff);
  background: var(--site-color-accent, #31416e);
  text-decoration: none;
  padding: 1em 1.5em;
  border-radius: 999px;
}
[data-v-a39e01ca] .bab-dcta:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: 2px;
}
/* the DAYS pill wears the pale variant, like its header orb */
[data-v-a39e01ca] .bab-dcta--secondary {
  background: var(--site-color-fg, #c3cfdf);
  color: var(--site-color-accent, #31416e);
}
.bab-drawer__foot[data-v-a39e01ca] {
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--site-color-border, #dde4ee);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  color: var(--site-color-muted, #76839c);
}
.bab-socials--drawer[data-v-a39e01ca] { display: flex; gap: var(--s3);
}

/* drawer motion */
.bab-drawer-enter-active[data-v-a39e01ca],
.bab-drawer-leave-active[data-v-a39e01ca] { transition: opacity .3s ease;
}
.bab-drawer-enter-active .bab-drawer[data-v-a39e01ca],
.bab-drawer-leave-active .bab-drawer[data-v-a39e01ca] { transition: transform .35s var(--ease);
}
.bab-drawer-enter-from[data-v-a39e01ca],
.bab-drawer-leave-to[data-v-a39e01ca] { opacity: 0;
}
.bab-drawer-enter-from .bab-drawer[data-v-a39e01ca],
.bab-drawer-leave-to .bab-drawer[data-v-a39e01ca] { transform: translateX(100%);
}
@media (prefers-reduced-motion: reduce) {
.bab-header[data-v-a39e01ca],
  .bab-social[data-v-a39e01ca],
  .bab-burger span[data-v-a39e01ca],
  .bab-drawer__close[data-v-a39e01ca],
  .bab-nav[data-v-a39e01ca] .bab-navlink::after,[data-v-a39e01ca] .bab-orb,
  .bab-drawer-enter-active[data-v-a39e01ca],
  .bab-drawer-leave-active[data-v-a39e01ca],
  .bab-drawer-enter-active .bab-drawer[data-v-a39e01ca],
  .bab-drawer-leave-active .bab-drawer[data-v-a39e01ca] { transition: none;
}
.bab-social[data-v-a39e01ca]:hover,[data-v-a39e01ca] .bab-orb:hover { transform: none;
}
.bab-drawer-enter-from .bab-drawer[data-v-a39e01ca],
  .bab-drawer-leave-to .bab-drawer[data-v-a39e01ca] { transform: none;
}
}


/* ════ the white footer block — measured from the source at 1440 ════ */
.bab-footer[data-v-e029deb4] {
  background: #ffffff;
  /* helvetica-w01-light is Wix's Helvetica Light webfont; the closest
     system chain, held with !important against the hidden dashboard
     style-overrides sheet. */
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
    sans-serif !important;
}

/* 2026-08-16: everything in the footer runs 10% larger than the
   source's measurements, on Tiger's instruction. */
.bab-footer__inner[data-v-e029deb4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 22px 28px;
}
.bab-footer__mark[data-v-e029deb4] {
  display: inline-flex;
  text-decoration: none;
}
.bab-footer__mark img[data-v-e029deb4] {
  display: block;
  width: 176px;
  height: 78px;
  object-fit: cover;
}

/* the rich-text column: 8px/11.2px, #545C74, links undecorated */
.bab-footer__text[data-v-e029deb4] {
  margin-top: 17px;
  max-width: 748px;
}
.bab-footer__text p[data-v-e029deb4] {
  margin: 0;
  font-size: 8.8px !important;
  line-height: 12.3px;
  font-weight: 400;
  letter-spacing: normal;
  color: #545c74;
}
.bab-footer__text a[data-v-e029deb4] {
  color: #545c74;
  text-decoration: none;
}
.bab-footer__text a[data-v-e029deb4]:hover {
  text-decoration: underline;
}
.bab-footer__legal[data-v-e029deb4] {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: 8.8px;
  line-height: 12.3px;
  color: #545c74;
  /* a global tap-target rule pins buttons to min-height 24px, which
     stretches the source's legal lines — undo it here */
  min-height: 0 !important;
  height: 12.3px;
  display: inline;
}
.bab-footer__legal[data-v-e029deb4]:hover {
  text-decoration: underline;
}

/* social bar: 27px Instagram, 7px gap, 21px WhatsApp (sits 2px lower) */
.bab-footer__social[data-v-e029deb4] {
  margin-top: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.bab-footer__social a[data-v-e029deb4] {
  display: inline-flex;
}
.bab-footer__social img[data-v-e029deb4] {
  display: block;
}
.bab-footer__social a:last-child img[data-v-e029deb4] {
  margin-top: 2px;
}
.bab-footer__social a[data-v-e029deb4]:focus-visible {
  outline: 2px solid #545c74;
  outline-offset: 2px;
}

/* ════ legal modal (unchanged) ══════════════════════════════════════ */
.bab-policy[data-v-e029deb4] {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, #31416e 55%, transparent);
}
.bab-policy__panel[data-v-e029deb4] {
  width: min(760px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.55);
}
.bab-policy__head[data-v-e029deb4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--site-color-border, #dde4ee);
}
.bab-policy__title[data-v-e029deb4] {
  margin: 0;
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: var(--site-h2, 1.4375rem);
  line-height: 1.2;
  color: var(--site-color-accent, #31416e);
}
.bab-policy__close[data-v-e029deb4] {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--site-color-border, #dde4ee);
  border-radius: 999px;
  cursor: pointer;
  color: var(--site-color-accent, #31416e);
}
.bab-policy__close svg[data-v-e029deb4] {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.bab-policy__close[data-v-e029deb4]:hover {
  background: color-mix(in srgb, var(--site-color-fg, #c3cfdf) 40%, transparent);
}
.bab-policy__close[data-v-e029deb4]:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: 2px;
}
.bab-policy__tabs[data-v-e029deb4] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 24px 0;
}
.bab-policy__tab[data-v-e029deb4] {
  background: transparent;
  border: 1px solid var(--site-color-border, #dde4ee);
  border-radius: 999px;
  cursor: pointer;
  padding: 7px 16px;
  font-family: var(--site-font-display, Spinnaker, sans-serif);
  font-size: var(--site-micro, 0.6875rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-color-accent, #31416e);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.bab-policy__tab.is-active[data-v-e029deb4] {
  background: var(--site-color-accent, #31416e);
  border-color: var(--site-color-accent, #31416e);
  color: #fff;
}
.bab-policy__tab[data-v-e029deb4]:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: 2px;
}
.bab-policy__body[data-v-e029deb4] {
  padding: 24px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: var(--site-body, 1rem);
  line-height: var(--site-body-lh, 1.65);
  color: var(--site-color-body-ink, #545c74);
  text-align: left;
}
.bab-policy__body[data-v-e029deb4]:focus-visible {
  outline: 2px solid var(--site-color-accent, #31416e);
  outline-offset: -2px;
}


/* ── concierge parking (global — the SDK dock lives outside this
      component's scope) ─────────────────────────────────────────────
   `html.bab-page-end` is toggled by this footer's scroll listener the
   instant the page is FULLY scrolled, and removed the instant it is
   not. The SDK's `aside.cl` is a fixed, centred pill (left:50% +
   translateX(-50%)); parked, it hugs the right-hand corner instead. */
html.bab-page-end aside.cl {
  left: auto !important;
  right: 24px !important;
  transform: none !important;
}
@media (max-width: 720px) {
html.bab-page-end aside.cl {
    right: 12px !important;
}
}

/* ── booking funnel: no filter bar ──────────────────────────────────
   The SDK's /book page opens with a "FILTERS … n options" strip; this
   hotel has 6 rooms and nothing to filter, so it's hidden site-wide
   (Tiger, 2026-08-23). Global on purpose — the funnel is SDK-rendered
   and no theme component scopes it. */
.j17-book .j17-book__mobile-bar,
.j17-book .j17-book__sortbar {
  display: none !important;
}


/* 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-4cc3b550] {
  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-4cc3b550] {
  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-4cc3b550] { min-width: 0;
}
.fx__group--text[data-v-4cc3b550] { flex: 1 1 100%;
}
.fx__heading[data-v-4cc3b550] {
  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-4cc3b550] { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem;
}
.fx__link[data-v-4cc3b550] {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 140ms ease;
}
.fx__link[data-v-4cc3b550]:hover, .fx__link[data-v-4cc3b550]:focus-visible { opacity: 1; text-decoration: underline;
}
.fx__logos[data-v-4cc3b550] {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}
.fx__logo[data-v-4cc3b550] {
  display: block;
  max-height: 38px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.fx__texts[data-v-4cc3b550] { display: grid; gap: 0.35rem;
}
.fx__text[data-v-4cc3b550] { margin: 0; opacity: 0.8;
}
@media (max-width: 640px) {
.fx__inner[data-v-4cc3b550] { gap: 1.5rem;
}
.fx__group[data-v-4cc3b550] { 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-aaf444a2] {
  padding: var(--sa-pad, 1.25rem);
  background: var(--sa-bg, var(--site-footer-bg, transparent));
  color: var(--sa-ink, var(--site-footer-ink, inherit));
}
.sa__inner[data-v-aaf444a2] {
  max-width: var(--sa-max-w, var(--site-max-w, 1200px));
  margin: var(--sa-inner-margin, 0 auto);
}