@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&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 */
/* composed: design-graph tokens (base + palette + type) */
/* The William — monochrome recomposition (operator, 2026-10-20).
 * The generator imported the Maison Felix anchor tokens (linen paper,
 * noir-brun ink, brass accent). The William is black and white: the
 * brand record's primary #000000 / secondary #ffffff / accent #000000
 * with slate #202020 and chalk #f5f5f5. Faces come from the brand
 * record (CommutersSans 400/600 woffs / Inter — the live site's faces,
 * brand v30) through --site-font-display and --site-font-body; nothing
 * here pins a family.
 * tokens/palette.css and tokens/type.css carry the same values for the
 * composer. */
:root {
  /* Palette anchors the legacy base used to carry */
  --site-color-muted: #555555;
  --site-color-border: #d9d9d9;

  /* Derived surfaces */
  --site-color-surface: #f5f5f5;
  --site-color-fg-deep: #000000;        /* darkened ink for dark bands / footer */
  --site-color-accent-soft: #bfbfbf;
  --site-color-on-dark: #ffffff;        /* text on black surfaces */

  /* Type — families come from the brand record */
  --site-font-heading: var(--site-font-display);

  --site-type-body-size: 17px;
  --site-type-body-leading: 1.6;
  --site-type-label-size: 12px;
  --site-type-label-tracking: 0.18em;
  --site-type-display-weight: 500;
  --site-type-scale-ratio: 1.333;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 144px;

  /* Layout & shape */
  --site-max-width: 1100px;
  --site-radius: 0px;
  --site-rule: 1px solid var(--site-color-border);

  /* Motion */
  --motion-reveal-duration: 600ms;
  --motion-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-reveal-rise: 20px;
}

/* baseline motion tokens */
: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;
}

/* ============================================================
   The William — Palette · "Bold monochrome"
   White paper, black ink, slate and chalk between them. Every
   drop of colour on the site comes from the photography.
   ============================================================ */
:root {
  /* ---------- Ground ---------- */
  --site-color-bg-warm:         #f5f5f5;
  --site-color-bg-deep:         #ebebeb;
  --site-color-surface:         #f5f5f5;
  --site-color-surface-raised:  #ffffff;
  --site-color-surface-sunken:  #ebebeb;

  /* ---------- Ink ---------- */
  --site-color-ink:             #000000;
  --site-color-ink-strong:      #000000;
  --site-color-ink-deep:        #000000;
  --site-color-ink-soft:        #3d3d3d;
  --site-color-primary:         #000000;
  --site-color-primary-hover:   #202020;
  --site-color-primary-tint:    #e6e6e6;

  /* ---------- On-dark ---------- */
  --site-color-on-dark:         #ffffff;
  --site-color-on-primary:      #ffffff;
  --site-color-on-primary-soft: #d9d9d9;
  --site-color-on-primary-faint:#a6a6a6;

  /* ---------- Accent · black; the accent is weight, not hue ---------- */
  --site-color-accent-strong:   #202020;
  --site-color-accent-deep:     #000000;
  --site-color-accent-soft:     #bfbfbf;
  --site-color-accent-tint:     #ebebeb;
  --site-color-accent-faint:    #f5f5f5;
  --site-color-on-accent:       #ffffff;
  --site-color-accent-fg:       #ffffff;
  --site-color-highlight:       #ffffff;

  /* ---------- Muted & structure ---------- */
  --site-color-muted:           #555555;
  --site-color-muted-strong:    #404040;
  --site-color-fg-muted:        #555555;
  --site-color-border:          #d9d9d9;
  --site-color-border-strong:   #bdbdbd;
  --site-color-border-faint:    #ebebeb;
  --site-color-border-dark:     #4d4d4d;
  --site-color-rule-accent:     #000000;

  /* ---------- Interaction states ---------- */
  --site-color-link:            #000000;
  --site-color-link-hover:      #404040;
  --site-color-focus-ring:      #000000;
  --site-color-selection-bg:    #000000;
  --site-color-selection-fg:    #ffffff;
  --site-color-hover-wash:      #f0f0f0;
  --site-color-active-wash:     #e6e6e6;

  /* ---------- Overlays & scrims ---------- */
  --site-color-scrim:           rgba(0, 0, 0, 0.55);
  --site-color-scrim-soft:      rgba(0, 0, 0, 0.35);
  --site-color-scrim-linen:     rgba(255, 255, 255, 0.86);
  --site-color-shadow:          rgba(0, 0, 0, 0.14);
  --site-color-shadow-deep:     rgba(0, 0, 0, 0.28);

  /* ---------- Semantic roles ---------- */
  --site-color-success:         #2e6b3f;
  --site-color-success-tint:    #e4efe6;
  --site-color-warning:         #8a6100;
  --site-color-warning-tint:    #f3ead3;
  --site-color-danger:          #a3261e;
  --site-color-danger-tint:     #f6e0de;
  --site-color-info:            #2b5f6e;
  --site-color-info-tint:       #dfeaee;

  /* ---------- Footer · black, like the live William site ---------- */
  --site-color-footer-bg:       #000000;
  --site-color-footer-fg:       #d9d9d9;
  --site-color-footer-accent:   #ffffff;
  --site-color-footer-border:   #2a2a2a;
}

/* ============================================================
   Grounds · one white page; the saturated blocks are black
   ============================================================ */
:root {
  --site-ground-page:            var(--site-color-bg);
  --site-ground-page-ink:        var(--site-color-fg);

  --site-ground-band:            transparent;
  --site-ground-band-ink:        var(--site-color-fg);
  --site-ground-band-heading:    var(--site-color-ink-strong);

  --site-ground-band-warm:       var(--site-color-bg-warm);
  --site-ground-band-warm-ink:   var(--site-color-fg);

  --site-ground-band-feature:        var(--site-color-ink-deep);
  --site-ground-band-feature-ink:    var(--site-color-on-primary);
  --site-ground-band-feature-soft:   var(--site-color-on-primary-soft);
  --site-ground-band-feature-accent: var(--site-color-accent-soft);

  --site-ground-band-accent:     var(--site-color-accent-tint);
  --site-ground-band-accent-ink: var(--site-color-ink-deep);

  --site-ground-header:            transparent;
  --site-ground-header-ink:        var(--site-color-on-primary);
  --site-ground-header-solid:      #000000;
  --site-ground-header-solid-ink:  #ffffff;

  --site-ground-footer:          var(--site-color-footer-bg);
  --site-ground-footer-ink:      var(--site-color-footer-fg);
  --site-ground-colophon:        var(--site-color-footer-bg);
  --site-ground-colophon-ink:    var(--site-color-footer-fg);
}

/* ============================================================
   Typography · the live site's faces (CommutersSans display, 400 +
   600 uploaded woffs; Inter body) on a perfect-fifth scale. No italic
   voice: CommutersSans ships no italic, so the accent is weight 400.
   ============================================================ */
:root {
  --site-font-heading: var(--site-font-display);
  --site-font-accent: var(--site-font-display);
  --site-font-accent-style: normal;

  --site-type-scale-ratio: 1.5;
  --site-type-size-xs: 0.75rem;
  --site-type-size-sm: 0.875rem;
  --site-type-size-base: 1.0625rem;
  --site-type-size-md: 1.375rem;
  --site-type-size-lg: 2rem;
  --site-type-size-xl: 3rem;
  --site-type-size-2xl: 4.5rem;
  --site-type-size-hero: clamp(3.25rem, 9.5vw, 7rem);

  --site-type-display-weight: 600;   /* the live site's h1: CommutersSans 600 */
  --site-type-heading-weight: 600;
  --site-type-accent-weight: 400;
  --site-type-body-weight: 400;
  --site-type-strong-weight: 600;
  --site-type-label-weight: 500;

  --site-type-display-tracking: -0.01em;
  --site-type-heading-tracking: -0.005em;
  --site-type-accent-tracking: 0.01em;
  --site-type-body-tracking: 0.005em;
  --site-type-label-tracking: 0.18em;
  --site-type-label-transform: uppercase;

  --site-type-display-leading: 1.02;
  --site-type-heading-leading: 1.1;
  --site-type-accent-leading: 1.35;
  --site-type-body-size: 17px;
  --site-type-body-leading: 1.6;
  --site-type-label-size: 12px;
  --site-type-label-leading: 1.3;
  --site-type-measure: 58ch;
  --site-type-measure-narrow: 34ch;

  --site-type-on-band: var(--site-color-on-dark, #ffffff);
  --site-type-body-muted: var(--site-color-muted, #555555);
  --site-type-body-soft: var(--site-color-ink-soft, #3d3d3d);

  --site-space-1: 4px;
  --site-space-2: 8px;
  --site-space-3: 16px;
  --site-space-4: 24px;
  --site-space-5: 40px;
  --site-space-6: 64px;
  --site-space-7: 96px;
  --site-space-8: 144px;
  --site-space-section: var(--site-space-8);
  --site-space-stack: var(--site-space-4);
  --site-space-heading-gap: var(--site-space-3);

  --site-motion-duration-fast: 220ms;
  --site-motion-duration: 420ms;
  --site-motion-duration-slow: 780ms;
  --site-motion-duration-reveal: 950ms;
  --site-motion-ease: cubic-bezier(0.33, 0, 0.18, 1);
  --site-motion-ease-out: cubic-bezier(0.19, 1, 0.28, 1);
  --site-motion-ease-drift: cubic-bezier(0.45, 0.05, 0.15, 0.95);
  --site-motion-reveal-distance: 32px;
  --site-motion-stagger: 110ms;

  --site-duration: var(--site-motion-duration);
  --site-duration-slow: var(--site-motion-duration-slow);
  --site-duration-reveal: var(--site-motion-duration-reveal);
  --site-ease: var(--site-motion-ease);
  --site-ease-out: var(--site-motion-ease-out);
  --site-ease-expo: var(--site-motion-ease-out);
  --site-stagger: var(--site-motion-stagger);
  --site-reveal-distance: var(--site-motion-reveal-distance);
}

/* ============================================================
   SITE-WIDE RULES THAT MUST SHIP (operator, 2026-10-20)
   This is the one workspace stylesheet the bundle imports, so the
   global rulings live here (brand.css is the SDK's default copy in
   the dev preview, and tokens/* parts only reach a composed build).
   ============================================================ */
/* No Maison Felix furniture: the ornate key and the two palm-shadow
   loops are gone everywhere, by asset id. The divider is now the live
   site's Midtown skyline line-art (white lines on black) — inverted on
   paper, as drawn on black grounds. */
img[src*="01M5CM3XQ0E7CARHZMSVF3TSJZ"] { display: none !important; }
video[src*="01M5CM3XE7NNY8H3B89YE25MPX"],
video[src*="01M5CM3X042ZM4R8P05B8ZE3AG"],
video:has(> source[src*="01M5CM3XE7NNY8H3B89YE25MPX"]),
video:has(> source[src*="01M5CM3X042ZM4R8P05B8ZE3AG"]) { display: none !important; }
img[src*="01M11C60N2SWBN7WWZ0YK11JTV"] { filter: invert(1); }
.mfx-court img[src*="01M11C60N2SWBN7WWZ0YK11JTV"],
.abv-press img[src*="01M11C60N2SWBN7WWZ0YK11JTV"],
[data-ground="dark"] img[src*="01M11C60N2SWBN7WWZ0YK11JTV"] { filter: none; }

/* The shell's region/language strip under the footer: a stray white
   band under the black ground; the header carries the language. */
.app-shell .app-shell__region { display: none !important; }

/* Concierge pill: the mic / send key is a black square, so its glyph is
   WHITE (operator, 2026-10-20: "dark on dark, make the mic white"). */
aside.cl .cc__mic, aside.cl .cc__send,
aside.cl .cc__mic svg, aside.cl .cc__send svg,
aside.cl .cc__mic svg *, aside.cl .cc__send svg * {
  color: #fff !important;
  fill: currentColor;
  stroke: currentColor;
}
aside.cl .cc__mic svg [fill="none"], aside.cl .cc__send svg [fill="none"] { fill: none; }

/* The live William sets no italics: CommutersSans ships no italic face,
   so never let the browser slant it (an `em` or an accent line renders
   upright in the real face instead of a synthesized oblique). */
html { font-synthesis: none; }

/* ── The booking funnel, as the live site runs it ─────────────────── */
html:has(main.j17-book), html:has(main.j17-checkout), html:has(main.j17-confirm) { --site-header-h: 83px; }
@media (max-width: 767px) {
  html:has(main.j17-book), html:has(main.j17-checkout), html:has(main.j17-confirm) { --site-header-h: 69px; }
}
:root:has(.app-shell--funnel) aside.cl.cl.cl.cl { display: none !important; }
/* /book itself is the STANDARD booking engine page (owner, 2026-10-27:
   "reset it to the regular booking engine page"). Every override of its
   hero, search bar, filters, room cards and date picker was removed;
   only the bar-height reserve above and the concierge switch stay. */
html body main.j17-confirm .j17-confirm__pillar { max-width: 800px !important; }
html body main.j17-confirm .j17-confirm__title { text-transform: uppercase !important; }
html body main.j17-confirm .j17-confirm__lede { max-width: none !important; text-align: left !important; text-justify: auto !important; hyphens: manual !important; -webkit-hyphens: manual !important; text-wrap: pretty; }
@media (min-width: 900px) { html body main.j17-confirm .j17-confirm__pillar--succeeded .j17-confirm__lede { white-space: nowrap !important; } }


/* 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.
 */
/* ── THE WILLIAM IS BLACK AND WHITE (operator, 2026-10-20) ─────────
   This file is one of the few the bundle imports directly (with
   tokens.css and the primitives), so it is the safety net under the
   palette: whatever an older composed tokens.css or an inline pin
   still says, the roles below render monochrome. The brand record's
   own anchors are #ffffff / #000000 / #000000 already. */
html:root {
  --site-color-bg-warm: #f5f5f5 !important;
  --site-color-bg-deep: #ebebeb !important;
  --site-color-surface: #f5f5f5 !important;
  --site-color-surface-raised: #ffffff !important;
  --site-color-surface-sunken: #ebebeb !important;
  --site-color-ink: #000000 !important;
  --site-color-ink-strong: #000000 !important;
  --site-color-ink-deep: #000000 !important;
  --site-color-ink-soft: #3d3d3d !important;
  --site-color-fg-deep: #000000 !important;
  --site-color-fg-muted: #555555 !important;
  --site-color-muted: #555555 !important;
  --site-color-muted-strong: #404040 !important;
  --site-color-on-dark: #ffffff !important;
  --site-color-on-primary: #ffffff !important;
  --site-color-on-primary-soft: #d9d9d9 !important;
  --site-color-on-primary-faint: #a6a6a6 !important;
  --site-color-accent-strong: #202020 !important;
  --site-color-accent-deep: #000000 !important;
  --site-color-accent-soft: #bfbfbf !important;
  --site-color-accent-tint: #ebebeb !important;
  --site-color-accent-faint: #f5f5f5 !important;
  --site-color-border: #d9d9d9 !important;
  --site-color-border-strong: #bdbdbd !important;
  --site-color-border-faint: #ebebeb !important;
  --site-color-border-dark: #4d4d4d !important;
  --site-color-rule-accent: #000000 !important;
  --site-color-link: #000000 !important;
  --site-color-link-hover: #404040 !important;
  --site-color-focus-ring: #000000 !important;
  --site-color-selection-bg: #000000 !important;
  --site-color-selection-fg: #ffffff !important;
  --site-color-hover-wash: #f0f0f0 !important;
  --site-color-active-wash: #e6e6e6 !important;
  --site-color-scrim: rgba(0, 0, 0, 0.55) !important;
  --site-color-scrim-soft: rgba(0, 0, 0, 0.35) !important;
  --site-color-scrim-linen: rgba(255, 255, 255, 0.86) !important;
  --site-color-shadow: rgba(0, 0, 0, 0.14) !important;
  --site-color-shadow-deep: rgba(0, 0, 0, 0.28) !important;
  --site-color-footer-bg: #000000 !important;
  --site-color-footer-fg: #d9d9d9 !important;
  --site-color-footer-accent: #ffffff !important;
  --site-color-footer-border: #2a2a2a !important;
  --site-ground-header-solid: #000000 !important;
  --site-ground-header-solid-ink: #ffffff !important;
  --a11y-focus: #000000 !important;
}

/* ── NO MAISON FELIX FURNITURE (operator, 2026-10-20) ──────────────────
   The generator dressed the site with Maison Felix's ornate key and its
   two palm-shadow loops. Both are gone everywhere, by their asset ids, so
   nothing can bring them back from a component this sweep missed. The
   divider the key used to be is now the live site's Midtown skyline
   line-art (white lines on transparent) — inverted on paper, as drawn
   on black. */
img[src*="01M5CM3XQ0E7CARHZMSVF3TSJZ"] {
  display: none !important;
}
video[src*="01M5CM3XE7NNY8H3B89YE25MPX"],
video[src*="01M5CM3X042ZM4R8P05B8ZE3AG"],
video:has(> source[src*="01M5CM3XE7NNY8H3B89YE25MPX"]),
video:has(> source[src*="01M5CM3X042ZM4R8P05B8ZE3AG"]) {
  display: none !important;
}
img[src*="01M11C60N2SWBN7WWZ0YK11JTV"] {
  filter: invert(1);
}
.mfx-court img[src*="01M11C60N2SWBN7WWZ0YK11JTV"],
.abv-press img[src*="01M11C60N2SWBN7WWZ0YK11JTV"],
[data-ground="dark"] img[src*="01M11C60N2SWBN7WWZ0YK11JTV"] {
  filter: none;
}

/* The shell parks its region/language switcher in a slot BELOW the
   footer, a stray white band under the black ground; the header carries
   the language control. */
.app-shell .app-shell__region {
  display: none !important;
}

/* ── THE BOOKING FUNNEL ─────────────────────────────────────────────
   /book is the STANDARD booking engine page (owner, 2026-10-27: "reset
   it to the regular booking engine page"); its old restyling (black
   band, dark veil, black frames, hidden filters, picker tweaks) was
   removed. Only the bar-height reserve and the concierge switch stay. */
html:has(main.j17-book),
html:has(main.j17-checkout),
html:has(main.j17-confirm) {
  --site-header-h: 83px;
}
@media (max-width: 767px) {
  html:has(main.j17-book),
  html:has(main.j17-checkout),
  html:has(main.j17-confirm) {
    --site-header-h: 69px;
  }
}
/* no concierge anywhere on the funnel */
:root:has(.app-shell--funnel) aside.cl.cl.cl.cl {
  display: none !important;
}
/* /checkout/confirmation: the lede on one line */
html body main.j17-confirm .j17-confirm__pillar {
  max-width: 800px !important;
}
html body main.j17-confirm .j17-confirm__lede {
  max-width: none !important;
  text-align: left !important;
  text-justify: auto !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  text-wrap: pretty;
}
@media (min-width: 900px) {
  html body main.j17-confirm .j17-confirm__pillar--succeeded .j17-confirm__lede {
    white-space: nowrap !important;
  }
}

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 */
/* ============================================================
   Maison Felix — button primitive
   "HAIRLINE RECTANGLE" · Quiet Largo, Miami Warm
   The button as an engraved plate: a radius-0 rectangle drawn
   in a single 1px ink hairline, serif caps at 13px / 0.05em,
   label centred. No lift, no shadow — on approach the plate
   simply FILLS and the label inverts. Primary is the deep
   sepia plate; secondary a paper plate in hairline; ghost
   drops the plate entirely and becomes the page CTA — a serif
   sentence-case text link over a 1px accent underscore.

   Public API (LAW — identical to installed):
   .site-btn  .site-btn--primary  .site-btn--secondary
   .site-btn--ghost  .site-btn--sm
   States: :hover  :focus-visible  :active  [disabled]  .is-loading
   Brand colour/type ONLY via var(--site-*) — never redefined.
   Scoped knobs are --site-btn-* (nevercarried truth §9).

   ON DARK GROUNDS (photo bands, ink bands): the base hairline is
   sepia ink and WILL vanish. The consumer's scope must re-ink it —
   set on the button (or its wrapper):
     --site-btn-ink: var(--site-color-on-dark);
     --site-btn-ring: var(--site-color-on-dark);
     --site-btn-ground-hover: var(--site-color-on-dark);
     --site-btn-ink-hover: var(--site-color-ink-deep);
     --site-btn-ring-hover: var(--site-color-on-dark);
   (cream hairline plate that fills to cream with ink label).
   ============================================================ */

.site-btn {
  --site-btn-ground: transparent;
  --site-btn-ground-hover: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink-hover: var(--site-color-on-dark, #f3efeb);
  --site-btn-ring: var(--site-color-ink-strong, #4a423d);
  --site-btn-ring-hover: var(--site-color-ink-strong, #4a423d);
  --site-min-h: 48px;
  --site-pad-x: 30px;
  --site-label-size: var(--site-type-label-size, 13px);

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;                                /* label centred on the plate */
  gap: 10px;
  box-sizing: border-box;
  min-height: var(--site-min-h);
  padding: 0 var(--site-pad-x);

  border: 1px solid var(--site-btn-ring);
  border-radius: 0;                                       /* the whole grammar: radius 0 */
  background-color: var(--site-btn-ground);
  color: var(--site-btn-ink);

  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(var(--site-label-size) * var(--site-ts, 1));
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--site-type-label-tracking, 0.05em);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;

  cursor: pointer;
  user-select: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 160ms var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.site-btn > svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: -1px;
}

/* ------------------------------------------------------------
   Shared state ritual — no lift, no shadow: the plate fills
   ------------------------------------------------------------ */
.site-btn:hover:not([disabled]):not(.is-loading) {
  background-color: var(--site-btn-ground-hover);
  border-color: var(--site-btn-ring-hover);
  color: var(--site-btn-ink-hover);
}
.site-btn:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.site-btn:active:not([disabled]):not(.is-loading) {
  transition-duration: 90ms;
}

/* disabled: the ink dries */
.site-btn[disabled],
.site-btn[disabled]:hover,
.site-btn[disabled]:active {
  background-color: var(--site-color-bg, #f3efeb);
  border-color: var(--site-color-border, #e1d7cc);
  color: var(--site-color-muted, #726459);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* loading: label withdraws, an accent ring turns at centre */
.site-btn.is-loading {
  color: transparent;
  pointer-events: none;
  cursor: progress;
}
.site-btn.is-loading > svg {
  opacity: 0;
}
.site-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid var(--site-color-accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: mf-btn-turn 800ms linear infinite;
}
@keyframes mf-btn-turn {
  to { transform: rotate(360deg); }
}

/* ============================================================
   PRIMARY — the ink plate: solid deep sepia, cream label.
   ============================================================ */
.site-btn--primary {
  --site-btn-ground: var(--site-color-ink-deep, #38312d);
  --site-btn-ground-hover: var(--site-color-primary-hover, #554c46);
  --site-btn-ink: var(--site-color-on-dark, #f3efeb);
  --site-btn-ink-hover: var(--site-color-on-dark, #f3efeb);
  --site-btn-ring: var(--site-color-ink-deep, #38312d);
  --site-btn-ring-hover: var(--site-color-primary-hover, #554c46);
}
.site-btn--primary[disabled] {
  background-color: var(--site-color-bg-deep, var(--site-color-border));
  border-color: var(--site-color-bg-deep, var(--site-color-border));
  color: var(--site-color-muted);
}

/* ============================================================
   SECONDARY — paper plate in soft hairline; fills to ink.
   ============================================================ */
.site-btn--secondary {
  --site-btn-ground: transparent;
  --site-btn-ground-hover: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink-hover: var(--site-color-on-dark, #f3efeb);
  --site-btn-ring: var(--site-color-border-strong, #cfc1b3);
  --site-btn-ring-hover: var(--site-color-ink-strong, #4a423d);
}

/* ============================================================
   GHOST — the page CTA: no plate at all. A serif sentence-case
   text link at body size over a 1px accent underscore that
   thickens on approach (Largo's own link grammar).
   ============================================================ */
.site-btn--ghost {
  --site-btn-ground: transparent;
  --site-btn-ground-hover: transparent;
  --site-btn-ink: var(--site-color-ink-strong, #4a423d);
  --site-btn-ink-hover: var(--site-color-ink-deep, #38312d);
  --site-min-h: 40px;
  --site-pad-x: 4px;
  --site-label-size: var(--site-type-size-base, 1rem);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 0 var(--site-color-accent);
  padding-bottom: 6px;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.site-btn--ghost:hover:not([disabled]):not(.is-loading),
.site-btn--ghost:focus-visible {
  box-shadow: inset 0 -2px 0 0 var(--site-color-accent-strong, #c17245);
}
.site-btn--ghost[disabled] {
  background-color: transparent;
  box-shadow: inset 0 -1px 0 0 var(--site-color-border);
}
.site-btn--ghost.is-loading::after {
  width: 13px;
  height: 13px;
  margin: -7px 0 0 -7px;
}

/* ============================================================
   SMALL — the plate tightened for utilities and pickers.
   ============================================================ */
.site-btn--sm {
  --site-min-h: 38px;
  --site-pad-x: 18px;
  --site-label-size: 12px;
  gap: 8px;
  min-width: 38px;
  letter-spacing: 0.05em;
}
.site-btn--sm > svg {
  width: 13px;
  height: 13px;
}
.site-btn--sm.is-loading::after {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
}
.site-btn--ghost.site-btn--sm {
  --site-pad-x: 2px;
  min-width: 0;
}

/* ============================================================
   CONTEXT RE-INK — the photographic cta band (.site-cta-band)
   always lays a dark scrim, and existing pages mount a BARE
   .site-btn there expecting the retired inherit behavior. The
   sepia hairline vanishes on that ground, so the primitive
   re-inks its own bare plate for that context: cream hairline
   that fills to cream with an ink label. Variant classes
   (--primary etc.) are left to their own declarations.
   ============================================================ */
.site-cta-band .site-btn:not([class*='site-btn--']) {
  --site-btn-ink: var(--site-color-on-dark, #f3efeb);
  --site-btn-ring: var(--site-color-on-dark, #f3efeb);
  --site-btn-ground-hover: var(--site-color-on-dark, #f3efeb);
  --site-btn-ink-hover: var(--site-color-ink-deep, #38312d);
  --site-btn-ring-hover: var(--site-color-on-dark, #f3efeb);
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .site-btn {
    transition: none;
  }
  .site-btn.is-loading::after {
    animation-duration: 2400ms;
  }
}

/* ── DERIVED INK ON THE BRAND ANCHORS ───────────────────────────────
   The brand record now carries the palette (2026-10-04: primary var(--site-color-fg),
   secondary var(--site-color-bg), accent var(--site-color-accent), highlight var(--site-color-highlight, var(--site-color-accent))), so bg / fg /
   accent are no longer forced here. The runtime still DERIVES on-accent,
   fg-muted and the focus ring inline from those anchors; these keep the
   house values (noir brun on the orange, RAL 8022). Lives here because the
   builder re-emits tokens.css/palette.css, while primitives ship verbatim. */
:root {
  --site-color-fg-muted: #64533f !important;
  --a11y-focus: var(--site-color-accent) !important;
}

/* ── Booking funnel (SDK /book) ──────────────────────────────────────
   /book is the STANDARD booking engine page (owner, 2026-10-27). The
   currency-line, filters-sheet and calendar-price restyling that used to
   live here (Maison Felix's, copied in) was removed; only the phone
   sort-menu fix below stays. */

/* ── Page bottom ──
   The SDK shell pads its bottom by --concierge-dock-h (96px) to keep the
   fixed concierge dock off the footer. html/body carry no ground, so that
   reserve renders as a WHITE band under the footer. The footer script
   already hides the dock at the page end, so the reserve is not needed;
   the grounds below are a belt-and-braces so no gap can ever read white. */
.app-shell {
  padding-bottom: 0 !important;
}
html,
body {
  background: var(--site-color-bg, #e5e0d4);
}

/* On the booking funnel the shell appends its own "USD" region switcher
   AFTER the footer (.app-shell__region): a stray strip under the page end.
   The funnel already carries the "Prices in …" currency picker above the
   results, so this duplicate is hidden. */
.app-shell--funnel .app-shell__region {
  display: none !important;
}

/* SITEWIDE TEXT SCALE (2026-10-07, hotelier: "reduce text size on the whole
   site by 15%, except in the booking flow"). Every theme font-size is written
   as calc(<size> * var(--site-ts, 1)); spacing is untouched. The funnel
   (/book, /checkout, confirmation) keeps full size: the shell marks it
   .app-shell--funnel, and SiteHeader also sets html.mf-funnel by route. */
:root { --site-ts: 0.85; }
html.mf-funnel,
html:has(.app-shell--funnel) { --site-ts: 1; }
/* inherited text (no explicit size) follows the same scale */
body { font-size: calc(1rem * var(--site-ts, 1)); }
/* SDK-rendered content blocks (freeform pages, teasers) + accessibility
   statement: the SDK's own sizes, multiplied. The a11y widget is left
   at full size on purpose. */
html body .hp-block__title { font-size: calc(clamp(1.75rem, 4vw, 2.25rem) * var(--site-ts, 1)) !important; }
html body .hp-block__body { font-size: calc(1.05rem * var(--site-ts, 1)) !important; }
html body .hp-block__caption { font-size: calc(0.9rem * var(--site-ts, 1)) !important; }
html body .hp-block__inner.hp-block--media-text .hp-block__title { font-size: calc(clamp(1.1rem, 2.1vw, 1.45rem) * var(--site-ts, 1)) !important; }
html body .hp-block__inner.hp-block--media-text .hp-block__body { font-size: calc(0.9375rem * var(--site-ts, 1)) !important; }
html body .hp-block__inner.hp-block--media-text .hp-block__cta { font-size: calc(0.76rem * var(--site-ts, 1)) !important; }
html body .hp-block__band-button,
html body .hp-block__cta { font-size: calc(0.8125rem * var(--site-ts, 1)) !important; }
html body .hp-block__map-open { font-size: calc(0.78rem * var(--site-ts, 1)) !important; }
html body .hp-block__map-address { font-size: calc(0.92rem * var(--site-ts, 1)) !important; }
html body .hp-block__featured-title { font-size: calc(0.9rem * var(--site-ts, 1)) !important; }
html body .hp-block__featured--quotes .hp-block__featured-quote { font-size: calc(clamp(1.05rem, 2.2vw, 1.3rem) * var(--site-ts, 1)) !important; }
html body .hp-block__featured--quotes .hp-block__featured-title { font-size: calc(0.85rem * var(--site-ts, 1)) !important; }
html body .a11y-statement__title { font-size: calc(clamp(1.8rem, 3.5vw, 2.6rem) * var(--site-ts, 1)) !important; text-transform: uppercase !important; }
/* /accessibility — clear the fixed header with room to spare (hotelier, 2026-10-27) */
html body main.app-shell__main > .a11y-statement { padding-top: calc(var(--site-header-h, 97px) + clamp(48px, 6vw, 88px)) !important; }
@media (max-width: 380px) {
  html body .hp-block__inner.hp-block--media-text .hp-block__cta { font-size: calc(0.68rem * var(--site-ts, 1)) !important; }
}

/* /book sort menu, phones: the SDK hangs its 13rem panel off the
   trigger's RIGHT edge, and on a phone the trigger sits at the left of
   the sortbar, so the panel ran off the left of the screen (owner,
   2026-10-09). Hang it off the trigger's left edge there instead; the
   SDK's own phone breakpoint. */
@media (max-width: 720px) {
  main.j17-book .j17-sortmenu__panel {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 2rem) !important;
  }
}

/* /checkout, compact (owner, 2026-10-08: "reduce the size of the text a
   bit … compact the page as much as possible"). The SDK page sizes its
   type and much of its spacing in rem, so the root is set ~10% smaller
   there; the rules below tighten what its clamp()/vw values keep large.
   /book keeps its full size. html.mf-checkout is set by SiteHeader on
   /checkout routes only. */
html.mf-checkout { font-size: 90%; }
html.mf-checkout main.j17-checkout { padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__masthead { padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem) clamp(0.85rem, 1.6vw, 1.25rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__masthead--with-media { padding-top: 0 !important; }
html.mf-checkout main.j17-checkout .j17-checkout__masthead-media { aspect-ratio: 16 / 3 !important; margin-bottom: clamp(0.9rem, 1.8vw, 1.25rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__title { margin-top: 0.4rem !important; font-size: clamp(1.7rem, 2.8vw, 2.3rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__greet { margin-top: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__rule { margin: 0.7rem 0 0.6rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__lede { font-size: 0.95rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__body { gap: clamp(1.25rem, 2.5vw, 2.25rem) !important; padding-top: clamp(0.9rem, 1.8vw, 1.5rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__form,
html.mf-checkout main.j17-checkout .j17-checkout__pay { gap: clamp(1.1rem, 1.8vw, 1.5rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__pay { margin-top: clamp(0.5rem, 1vw, 0.85rem) !important; padding-top: clamp(0.9rem, 1.5vw, 1.25rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__pay-head h2 { font-size: clamp(1.3rem, 2vw, 1.6rem) !important; margin-top: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__fieldset { gap: 0.7rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__legend { padding-bottom: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__fieldset > legend { margin-bottom: 0.55rem !important; }
/* The smallest tracked caps hold their size: they are already at the
   floor of legible. */
html.mf-checkout main.j17-checkout .j17-checkout__field-label { font-size: max(10.5px, calc(var(--site-checkout-text-scale, 1) * 0.66rem)) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__legend,
html.mf-checkout main.j17-checkout .j17-checkout__cta,
html.mf-checkout main.j17-checkout .j17-checkout__eyebrow,
html.mf-checkout main.j17-checkout .j17-checkout__back,
html.mf-checkout main.j17-checkout .j17-checkout__seg-btn,
html.mf-checkout main.j17-checkout .j17-checkout__summary-total-label { font-size: max(10.5px, 0.7rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__chapter { font-size: 1.25rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__field { gap: 0.3rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__row { gap: 0.7rem clamp(0.9rem, 1.5vw, 1.25rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__field input,
html.mf-checkout main.j17-checkout .j17-checkout__field select,
html.mf-checkout main.j17-checkout .j17-checkout__field .country-select__input { font-size: 0.95rem !important; padding-block: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__field textarea { min-height: 64px !important; font-size: 0.95rem !important; padding-top: 0.45rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__bookingfor { margin-bottom: 0.6rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__actions { gap: 0.85rem !important; margin-top: 0.25rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__cta { padding: 0.8rem clamp(1.3rem, 2.4vw, 1.8rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__widget { padding: clamp(0.85rem, 1.5vw, 1.2rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__col-summary { gap: 0.75rem; }
html.mf-checkout main.j17-checkout .j17-checkout__summary-head,
html.mf-checkout main.j17-checkout .j17-checkout__leg-head,
html.mf-checkout main.j17-checkout .j17-checkout__summary-bundle { padding-top: clamp(0.8rem, 1.4vw, 1.1rem) !important; }
html.mf-checkout main.j17-checkout .j17-checkout__summary-head h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem) !important; margin-top: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__summary-meta { gap: 0.4rem !important; padding-bottom: 0.7rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__breakdown { padding-top: 0.7rem !important; gap: 0.35rem 0.85rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__summary-total { margin-top: 0.7rem !important; padding-block: 0.8rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__addons { margin-top: 0.7rem !important; padding-top: 0.7rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__addon { padding-block: 0.4rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__assurance { padding-block: 0.6rem !important; }
html.mf-checkout main.j17-checkout .j17-checkout__secure-line,
html.mf-checkout main.j17-checkout .j17-checkout__reassure { margin-top: 0.6rem !important; }
/* Phones: inputs stay at 16px or iPhone Safari zooms into the field. */
@media (max-width: 760px) {
  html.mf-checkout main.j17-checkout .j17-checkout__field input,
  html.mf-checkout main.j17-checkout .j17-checkout__field select,
  html.mf-checkout main.j17-checkout .j17-checkout__field textarea,
  html.mf-checkout main.j17-checkout .j17-checkout__field .country-select__input { font-size: 16px !important; }
}




/* ============================================================
   Maison Felix — form_controls · "Paper Vessel"
   Fields as quiet paper plates: raised-cream fill, one 1px ink
   hairline, radius 0. Labels above in serif tracked caps
   (13px/0.05em). Focus warms the hairline to burnt orange.
   Public API (LAW): .site-field  .site-field__label
   .site-field__input  .site-field__help  .site-field__error
   .site-field--error  .site-choice
   ============================================================ */

.site-field {
  --site-field-pad-y: 13px;
  --site-field-pad-x: 16px;
  --site-field-ground: var(--site-color-surface-raised, #fcfaf7);
  --site-field-ink: var(--site-color-ink-strong, #4a423d);
  --site-field-ring: var(--site-color-border-strong, #cfc1b3);
  --site-field-ring-focus: var(--site-color-accent, #d58a5d);
  --site-field-error-ink: var(--site-color-danger, #a2503f);
  --site-field-speed: var(--site-duration, 320ms);
  --site-field-ease: var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1));

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--site-space-2, 8px);
  margin: 0 0 var(--site-space-4, 24px);
  font-family: var(--site-font-body);
}

.site-field:last-child {
  margin-bottom: 0;
}

/* Label — serif tracked caps above the vessel */
.site-field__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--site-font-body);
  font-size: calc(var(--site-type-label-size, 13px) * var(--site-ts, 1));
  font-weight: var(--site-type-label-weight, 500);
  letter-spacing: var(--site-type-label-tracking, 0.05em);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--site-color-muted, #726459);
  user-select: none;
  transition: color var(--site-field-speed) var(--site-field-ease);
}
.site-field:focus-within > .site-field__label {
  color: var(--site-color-ink-strong, #4a423d);
}

/* Input · Select · Textarea — the paper vessel */
.site-field__input {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;

  font-family: var(--site-font-body);
  font-size: calc(var(--site-type-body-size, 16px) * var(--site-ts, 1));
  line-height: 1.4;
  color: var(--site-field-ink);
  caret-color: var(--site-color-accent, #d58a5d);

  background-color: var(--site-field-ground);
  border: 1px solid var(--site-field-ring);
  border-radius: 0;
  padding: var(--site-field-pad-y) var(--site-field-pad-x);
  outline: none;

  transition:
    border-color var(--site-field-speed) var(--site-field-ease),
    background-color var(--site-field-speed) var(--site-field-ease),
    box-shadow var(--site-field-speed) var(--site-field-ease);
}

.site-field__input::placeholder {
  color: var(--site-color-muted, #726459);
  font-style: italic;
  opacity: 1;
}

.site-field__input:hover:not(:disabled):not(:focus) {
  border-color: var(--site-color-ink-soft, #7d726a);
}

/* Focus — the hairline takes the heat */
.site-field__input:focus,
.site-field__input:focus-visible {
  border-color: var(--site-field-ring-focus);
  box-shadow: inset 0 0 0 1px var(--site-field-ring-focus);
}

.site-field__input:disabled {
  background-color: var(--site-color-bg-deep, #eae2d8);
  color: var(--site-color-muted, #726459);
  border-color: var(--site-color-border, #e1d7cc);
  cursor: not-allowed;
}
.site-field__input:disabled::placeholder {
  color: var(--site-color-muted, #726459);
}
.site-field:has(.site-field__input:disabled) > .site-field__label {
  color: var(--site-color-muted, #726459);
  opacity: 0.7;
}

.site-field__input:-webkit-autofill,
.site-field__input:-webkit-autofill:hover,
.site-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--site-field-ink);
  -webkit-box-shadow: inset 0 0 0 1000px var(--site-field-ground);
  caret-color: var(--site-color-accent, #d58a5d);
  transition: background-color 999999s ease 0s;
}

/* Select — an ink chevron engraved at right */
select.site-field__input {
  padding-right: calc(var(--site-field-pad-x) + 28px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a423d' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--site-field-pad-x) center;
  background-size: 12px 8px;
  cursor: pointer;
  text-overflow: ellipsis;
}
select.site-field__input:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23726459' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E");
  cursor: not-allowed;
}
select.site-field__input option {
  background-color: var(--site-color-surface-raised, #fcfaf7);
  color: var(--site-color-ink-strong, #4a423d);
  font-family: var(--site-font-body);
}
select.site-field__input::-ms-expand {
  display: none;
}

/* Textarea */
textarea.site-field__input {
  min-height: 132px;
  resize: vertical;
  line-height: var(--site-type-body-leading, 1.45);
}

/* Date fields — indicator toned to the warm ink */
.site-field__input::-webkit-calendar-picker-indicator {
  filter: sepia(0.3) saturate(1.1) opacity(0.75);
  cursor: pointer;
}

.site-field__input::-moz-focus-inner {
  border: 0;
}

/* Help & error — footnotes beneath the field */
.site-field__help,
.site-field__error {
  margin: 0;
  font-family: var(--site-font-body);
  font-size: calc(var(--site-type-size-sm, 14px) * var(--site-ts, 1));
  line-height: 1.5;
  font-style: italic;
}
.site-field__help {
  color: var(--site-color-muted, #726459);
}
.site-field__error {
  display: flex;
  align-items: baseline;
  gap: var(--site-space-2, 8px);
  color: var(--site-field-error-ink);
}
.site-field__error::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 14px;
  height: 1px;
  background: var(--site-field-error-ink);
}

/* Error row state — terracotta hairline, no red alarm */
.site-field--error > .site-field__label {
  color: var(--site-field-error-ink);
}
.site-field--error .site-field__input:not(:disabled) {
  border-color: var(--site-field-error-ink);
  box-shadow: inset 0 0 0 1px var(--site-field-error-ink);
}

/* Choice rows — checkbox & radio as small paper plates */
.site-choice {
  --site-choice-size: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--site-space-2, 8px) 0;
  font-family: var(--site-font-body);
  font-size: calc(var(--site-type-body-size, 16px) * var(--site-ts, 1));
  line-height: 1.5;
  color: var(--site-color-fg, #645a54);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.site-choice input[type="checkbox"],
.site-choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: var(--site-choice-size);
  height: var(--site-choice-size);
  margin: 0;
  margin-top: calc((1.5em - var(--site-choice-size)) / 2);
  background-color: var(--site-color-surface-raised, #fcfaf7);
  border: 1px solid var(--site-color-ink-strong, #4a423d);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--site-duration, 320ms) var(--site-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.site-choice input[type="radio"] {
  border-radius: 50%;
}
.site-choice:hover input[type="checkbox"]:not(:disabled),
.site-choice:hover input[type="radio"]:not(:disabled) {
  border-color: var(--site-color-accent-deep, #a35c36);
}

.site-choice input[type="checkbox"]:checked {
  background-color: var(--site-color-ink-deep, #38312d);
  border-color: var(--site-color-ink-deep, #38312d);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6l3 3L10 1' fill='none' stroke='%23f3efeb' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 9px;
}
.site-choice input[type="radio"]:checked {
  background-color: var(--site-color-ink-deep, #38312d);
  border-color: var(--site-color-ink-deep, #38312d);
  box-shadow: inset 0 0 0 4px var(--site-color-surface-raised, #fcfaf7);
}
.site-choice input[type="checkbox"]:checked ~ *,
.site-choice input[type="radio"]:checked ~ * {
  color: var(--site-color-ink-strong, #4a423d);
}

.site-choice input[type="checkbox"]:focus-visible,
.site-choice input[type="radio"]:focus-visible {
  outline: 1px solid var(--site-color-accent, #d58a5d);
  outline-offset: 3px;
}

.site-choice input[type="checkbox"]:disabled,
.site-choice input[type="radio"]:disabled {
  background-color: var(--site-color-bg-deep, #eae2d8);
  border-color: var(--site-color-border, #e1d7cc);
  background-image: none;
  box-shadow: none;
  cursor: not-allowed;
}
.site-choice:has(input:disabled) {
  color: var(--site-color-muted, #726459);
  cursor: not-allowed;
}

.site-field--error .site-choice input[type="checkbox"],
.site-field--error .site-choice input[type="radio"] {
  border-color: var(--site-field-error-ink, #a2503f);
}

@media (prefers-reduced-motion: reduce) {
  .site-field__label,
  .site-field__input,
  .site-choice,
  .site-choice input[type="checkbox"],
  .site-choice input[type="radio"] {
    transition: none;
  }
}


/* theme skin */
/* =====================================================================
 * Maison Felix — Concierge Skin · Variant 2 of 3
 * "BRASS & LINEN — THE LEDGER"
 *
 * Direction: Invert the ground. Dark ink (#645a54) becomes the
 * widget's leather cover; ivory (var(--site-color-bg)) breathes inside the chat;
 * the accent (var(--site-color-accent)) runs as a single structural brass rule left of
 * the message thread. Opening the panel is opening a ledger:
 * dark cover → cream pages → a ribbon of burnt orange marking your
 * place. Bold envelope, refined interior. The Icon asserting presence.
 *
 * Scope: everything scoped to `.cl` only — never touches the site.
 * Contract: only the allowed custom properties, nothing else.
 * ===================================================================== */

.cl {

  /* ------------------------------------------------------------------
     RE-TINT — site palette overrides inside the concierge scope
     ------------------------------------------------------------------
     The panel interior reads as the cream field (linen pages).
     The fg token becomes the deep ink that the components use for
     text — kept near the brand fg for warmth, but deepened slightly
     so it reads crisply on the ivory interior.
     The border takes on the accent tone — faint warm brass hairline.
     ------------------------------------------------------------------ */
/* ivory linen — panel interior ground  */
  /* !important: the SDK dock writes --site-color-fg and color INLINE on
     the aside (white — it assumes a dark ground). Author !important
     beats inline styles, so the ledger keeps its dark ink everywhere
     on this site: greeting, hint, starter chips, typed text. */
/* deepened sepia ink — sharp on cream  */
  color:                     #3d3026 !important;
/* brass — structural rule + highlights  */
/* ivory on the brass bubble            */
  --site-color-border:       #d2c8b2;   /* warm parchment hairline              */

  /* Type families — brand locked */

  /* ------------------------------------------------------------------
     CONCIERGE SHAPE — the widget's physical geometry
     ------------------------------------------------------------------
     FAB (launch bubble):
       · Background: the dark ink surface — the leather cover —
         so the bubble reads as a closed ledger before the panel opens.
       · Foreground: ivory, so the icon / initial reads on the dark.
       · Radius: 3px — sharply architectural, a pressed-brass stud,
         not a pill. Distinct from the softer site radius. Emphatic.

     Panel:
       · Radius: 0px top-left (the ledger spine corner, hard),
         with a 4px on the remaining corners — feels bound, structural.
         The shared widget uses a single --concierge-panel-radius value;
         we set it small so the panel reads as a rigid document object.
     ------------------------------------------------------------------ */
  /* 2026-09-04: hotelier wants the concierge bright at rest as well as
     open — the FAB and closed dock are now the same ivory linen as the
     open ledger, with sepia ink on top. */
  --concierge-fab-bg:        var(--site-color-bg);   /* ivory linen — same as the open panel  */
  --concierge-fab-fg:        #3d3026;   /* sepia ink — icon reads on cream        */
  --concierge-fab-radius:    0px;       /* the site's radius-0 grammar           */

  --concierge-panel-radius:  0px;       /* engraved plate; square                */
}

/* ---------------------------------------------------------------------
   INPUT INK — the ask bar rides a LIGHT pill on this site, but the
   widget ships its input ink for a dark dock (ivory). Re-ink the
   typed text dark so it reads on the cream ground.
   --------------------------------------------------------------------- */
.cl .cc__input {
  /* !important: the widget pins its own input ink at higher specificity */
  color: #000000 !important;
  caret-color: #000000;
}
.cl .cc__input::placeholder {
  color: #6b5a49 !important;
}


/* chrome components */

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


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


/* ==================================================================
   THE BAR — marks on an open sheet · fixed, fully transparent at rest
   One knob: --site-hdr-ink (this header's rest ink). Default is ink —
   safe on paper page tops. A page opening on a dark full-bleed hero
   marks that band data-hero-ground="dark" and the global block at the
   foot of this file swaps the marks to cream. On scroll: solid paper,
   one hairline, ink marks — every route.
   ================================================================== */
.mf-hdr[data-v-6998eaca] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001; /* above SDK panels (1000), below the drawer (1200) */
  /* The page runs edge to edge (viewport-fit=cover): on a notched phone in
     landscape or saved to the home screen, keep the bar's ground under the
     status bar and its controls below it. 0 everywhere else. */
  padding-top: env(safe-area-inset-top, 0px);
  --site-hdr-ink: var(--site-color-ink-strong, #4a423d);
  --site-hdr-contrast: var(--site-color-bg, #f3efeb);
  background: var(--site-ground-header, transparent);
  border-bottom: 1px solid transparent;
  color: var(--site-hdr-ink);
  transition:
    background-color var(--site-duration, 320ms) var(--site-ease, ease),
    border-color var(--site-duration, 320ms) var(--site-ease, ease),
    transform var(--site-duration, 320ms) var(--site-ease, ease);
}
/* ⚠️ THE BAR'S GROUND RUNS UP PAST THE TOP EDGE. iPhone Safari (iOS 26)
   lays a fixed `top: 0` bar BELOW its status-bar strip and scrolls the page
   through that strip, so content showed in a gap above the header (owner,
   iPhone 13, 2026-10-03). This skirt carries the bar's own background up
   behind the status bar; it is off-screen everywhere else. `inherit` keeps
   it transparent in the homepage's logo-only state, where there is no bar. */
.mf-hdr[data-v-6998eaca]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 160px;
  background: inherit;
  pointer-events: none;
}
/* Homepage hero state: a logo-only TRANSPARENT strip stuck to the top
   of the PAGE (absolute, not fixed) — the mark alone names the house
   and scrolls away with the hero film. No bar, no controls, until the
   guest is past the hero. */
.mf-hdr--minimal[data-v-6998eaca] {
  position: absolute;
  background: transparent;
  border-bottom-color: transparent;
}
/* The working bar drops in once the guest clears the hero band. */
.mf-hdr--rise[data-v-6998eaca] {
  animation: mf-hdr-drop-6998eaca 420ms var(--site-ease-out, ease) both;
}
@keyframes mf-hdr-drop-6998eaca {
from { transform: translateY(-100%);
}
to { transform: none;
}
}
.mf-hdr__burger[data-v-6998eaca],
.mf-hdr__slh[data-v-6998eaca],
.mf-hdr__lang[data-v-6998eaca],
.mf-hdr__end[data-v-6998eaca] {
  transition:
    opacity var(--site-duration, 320ms) var(--site-ease, ease),
    visibility 0s linear 0s;
}
/* Homepage hero state: the large mark rests on the photo, and the burger
   and doorway stay on the top band from the first frame (U1). */
.mf-hdr--minimal .mf-hdr__burger[data-v-6998eaca],
.mf-hdr--minimal .mf-hdr__lang[data-v-6998eaca],
.mf-hdr--minimal .mf-hdr__end[data-v-6998eaca] {
  align-self: flex-start;
  margin-top: calc((clamp(72px, 7vw, 96px) - 44px) / 2);
}
.mf-hdr--minimal .mf-hdr__end[data-v-6998eaca] {
  margin-top: calc((clamp(72px, 7vw, 96px) - 54px) / 2);
}
.mf-hdr--minimal .mf-hdr__slh[data-v-6998eaca] {
  opacity: 0;
  visibility: hidden;
}
/* The settled bar is BLACK (the live site's), so the pale cut of the
   wordmark rides it — never ink on ink (operator, 2026-10-20: "the logo
   needs to be on the navbar the whole time"). */
.mf-hdr--scrolled .mf-hdr__mark--ink[data-v-6998eaca],
.mf-hdr--scrolled .mf-hdr__member-img--ink[data-v-6998eaca] { display: none;
}
.mf-hdr--scrolled .mf-hdr__mark--light[data-v-6998eaca],
.mf-hdr--scrolled .mf-hdr__member-img--light[data-v-6998eaca] { display: block;
}
/* Only the HOMEPAGE opens on a transparent bar; every other route wears
   the solid black bar from the first pixel (operator, 2026-10-20:
   "transparent navbar should only be before scroll on homepage"). The
   extra class steps outrank the dark-hero veil rules at the foot. */
body .mf-hdr.mf-hdr--solid.mf-hdr--solid[data-v-6998eaca] {
  --site-hdr-ink: #ffffff;
  --site-hdr-contrast: #000000;
  background: #000000;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
body .mf-hdr.mf-hdr--solid.mf-hdr--solid .mf-hdr__mark--ink[data-v-6998eaca],
body .mf-hdr.mf-hdr--solid.mf-hdr--solid .mf-hdr__member-img--ink[data-v-6998eaca] { display: none;
}
body .mf-hdr.mf-hdr--solid.mf-hdr--solid .mf-hdr__mark--light[data-v-6998eaca],
body .mf-hdr.mf-hdr--solid.mf-hdr--solid .mf-hdr__member-img--light[data-v-6998eaca] { display: block;
}
.mf-hdr--scrolled[data-v-6998eaca] {
  --site-hdr-ink: var(--site-ground-header-solid-ink, var(--site-color-ink-strong, #4a423d));
  /* the hover fill is the ink, so the hover TEXT is the bar's own ground
     (black) — never white on white (operator, 2026-10-20) */
  --site-hdr-contrast: var(--site-ground-header-solid, #000000);
  background: var(--site-ground-header-solid, var(--site-color-bg, #f3efeb));
  border-bottom-color: var(--site-color-border, #e1d7cc);
}

/* Row — full-bleed: burger hugs the left edge, sound toggle the right */
.mf-hdr__row[data-v-6998eaca] {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: clamp(10px, 1.1vw, 18px);
  min-height: clamp(72px, 7vw, 96px);
  transition: min-height var(--site-duration, 320ms) var(--site-ease, ease);
}

/* Brand mark — dead centre of the bar, independent of the side clusters.
   The centre holds the house mark alone, or the house mark | member pair. */
.mf-hdr__center[data-v-6998eaca] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}
.mf-hdr__brand[data-v-6998eaca] {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--site-hdr-ink);
}
.mf-hdr__brand[data-v-6998eaca]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 4px;
}
.mf-hdr__mark[data-v-6998eaca] {
  display: block;
  height: clamp(58px, 5.6vw, 78px);
  width: auto;
  max-width: min(44vw, 300px);
  object-fit: contain;
  transition: height var(--site-duration, 320ms) var(--site-ease, ease);
}
/* Homepage logo-only state (at the very top only): the mark rests on
   the hero MUCH larger, then shrinks to the working size the moment
   the bar settles in on scroll. The bar is transparent there, so the
   row simply grows to hold it. */
.mf-hdr--minimal .mf-hdr__mark[data-v-6998eaca] {
  height: clamp(144px, 16.5vw, 225px);
  max-width: min(80vw, 400px);
}
.mf-hdr--minimal .mf-hdr__row[data-v-6998eaca] {
  min-height: clamp(240px, 34vh, 380px);
}
/* ...and sits a touch lower on the film than dead-centre of that row */
.mf-hdr--minimal .mf-hdr__center[data-v-6998eaca] {
  transform: translate(-50%, calc(-50% + clamp(14px, 2.4vh, 30px)));
}
/* The member pair: a hairline, then the member mark a touch shorter
   than the house mark. Fades in with the working bar. */
.mf-hdr__pair-rule[data-v-6998eaca] {
  flex: none;
  width: 1px;
  height: clamp(42px, 4vw, 56px);
  margin-inline: clamp(12px, 1.4vw, 20px);
  background: currentColor;
  color: var(--site-hdr-ink);
  opacity: 0.45;
  animation: mf-pair-in-6998eaca 420ms var(--site-ease-out, ease) both;
}
.mf-hdr__pair[data-v-6998eaca] {
  display: block;
  flex: none;
  height: clamp(46px, 4.4vw, 62px);
  width: auto;
  aspect-ratio: 318.37 / 245.92; /* the SVG carries a viewBox only */
  animation: mf-pair-in-6998eaca 420ms var(--site-ease-out, ease) both;
}
@keyframes mf-pair-in-6998eaca {
from { opacity: 0;
}
to { opacity: 1;
}
}
.mf-hdr__mark--light[data-v-6998eaca] {
  display: none;
}
/* The member mark on the booking flow's right edge, where the sound + language
   widgets sit elsewhere — ink on paper, the white cut over a dark hero
   (swap at the foot of this file). */
.mf-hdr__funnel-mark[data-v-6998eaca] {
  animation: mf-pair-in-6998eaca 420ms var(--site-ease-out, ease) both;
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 0;
}
.mf-hdr__funnel-img[data-v-6998eaca] {
  display: block;
  height: clamp(58px, 5.6vw, 80px); /* larger, owner 2026-10-09 */
  width: auto;
  aspect-ratio: 318.37 / 245.92; /* the SVG carries a viewBox only */
}
.mf-hdr__funnel-img.mf-hdr__member-img--light[data-v-6998eaca] {
  display: none;
}
.mf-hdr__slh[data-v-6998eaca] {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: clamp(8px, 1vw, 14px);
  line-height: 0;
}
.mf-hdr__slh-img[data-v-6998eaca] {
  display: block;
  height: clamp(46px, 4.4vw, 62px);
  width: auto;
  aspect-ratio: 318.37 / 245.92;
}
.mf-hdr__slh-img.mf-hdr__member-img--light[data-v-6998eaca] {
  display: none;
}
.mf-hdr__wordmark[data-v-6998eaca] {
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 500);
  font-size: calc(clamp(1.55rem, 2.4vw, 1.9rem) * var(--site-ts, 1));
  letter-spacing: 0.02em;
  color: var(--site-hdr-ink);
  white-space: nowrap;
  transition: font-size var(--site-duration, 320ms) var(--site-ease, ease);
}
.mf-hdr--minimal .mf-hdr__wordmark[data-v-6998eaca] {
  font-size: calc(clamp(2.4rem, 4.5vw, 3.4rem) * var(--site-ts, 1));
}

/* Right cluster — CTA sits inboard; the sound toggle rides the edge */
.mf-hdr__end[data-v-6998eaca] {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: auto;
}
.mf-hdr__utils[data-v-6998eaca] {
  display: flex;
  align-items: center;
  color: var(--site-hdr-ink);
  font-size: calc(13px * var(--site-ts, 1));
}
.mf-hdr__utils[data-v-6998eaca] a,
.mf-hdr__utils[data-v-6998eaca] button {
  color: inherit;
}
/* The SDK sound widget carries its own ink (--snd-ink, default fg): on the
   ink bar that is fg-on-fg — an invisible control, icon and label alike.
   Hand it the linen ink. (The drawer's utilities sit on the linen foot,
   where the widget's fg default is already right.) */
.mf-hdr__utils[data-v-6998eaca] .site-sound {
  --snd-ink: var(--site-hdr-ink);
}
/* The SDK sound toggle's screen-reader label ships un-clipped: its 1×1
   box still paints a glyph sliver that audits as invisible text. Complete
   the clip so the label reaches screen readers and never the canvas. */
.mf-hdr__utils[data-v-6998eaca] .site-sound__sr,
.mf-drawer__utils[data-v-6998eaca] .site-sound__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Language switcher (SDK, between the doorway and the sound toggle).
   The list ships as a white rounded card under a soft drop shadow; this
   house has no rounded chrome. Square it, set it on paper behind one
   hairline, and cut the codes in the heading face. */
.mf-hdr__utils[data-v-6998eaca] .pop-hdr-utils__lang-toggle,
.mf-drawer__utils[data-v-6998eaca] .pop-hdr-utils__lang-toggle,
.mf-hdr__utils[data-v-6998eaca] .pop-hdr-utils__lang-item,
.mf-drawer__utils[data-v-6998eaca] .pop-hdr-utils__lang-item {
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(0.8125rem * var(--site-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mf-hdr__utils[data-v-6998eaca] .pop-hdr-utils__lang-menu,
.mf-drawer__utils[data-v-6998eaca] .pop-hdr-utils__lang-menu {
  border-radius: 0;
  padding: 4px;
  background: var(--site-color-bg, #e5e0d4);
  border: 1px solid var(--site-color-border-strong, #cfc1b3);
  box-shadow: 0 22px 48px -28px var(--site-color-shadow-deep, rgba(42, 28, 19, 0.5));
}
.mf-hdr__utils[data-v-6998eaca] .pop-hdr-utils__lang-item,
.mf-drawer__utils[data-v-6998eaca] .pop-hdr-utils__lang-item {
  border-radius: 0;
  color: var(--site-color-ink-strong, #4a423d);
}
.mf-hdr__utils[data-v-6998eaca] .pop-hdr-utils__lang-item.is-current,
.mf-drawer__utils[data-v-6998eaca] .pop-hdr-utils__lang-item.is-current {
  color: var(--site-color-accent-deep, #8c543c);
}

/* Drawer-foot popovers. The SDK anchors the Spotify card and the language
   list BELOW and LEFT of their trigger — right for a bar at the top of the
   page, wrong at the foot of a drawer, where both opened off the bottom of
   the screen and past the sheet's left edge. Anchor them to the foot and
   open UPWARD, inside the sheet's own width. */
.mf-drawer__foot[data-v-6998eaca] {
  position: relative;
}
.mf-drawer__utils[data-v-6998eaca] .site-sound,
.mf-drawer__utils[data-v-6998eaca] .pop-hdr-utils__lang {
  position: static;
}
.mf-drawer__utils[data-v-6998eaca] .site-sound__spotify {
  top: auto;
  bottom: calc(100% - 4px);
  left: var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem));
  right: var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem));
  width: auto;
  max-width: none;
  z-index: 3;
}
.mf-drawer__utils[data-v-6998eaca] .pop-hdr-utils__lang-menu {
  top: auto;
  bottom: calc(100% - 4px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: 160px;
}
.mf-hdr__cta[data-v-6998eaca] {
  display: flex;
  align-items: center;
  /* Reserve owns the right edge; language and sound sit to its left */
  order: 2;
  margin-left: clamp(16px, 2vw, 32px);
}
.mf-hdr__utils[data-v-6998eaca] {
  order: 1;
}
/* "Reserve" — a big plate, on every page but the funnel (operator,
   2026-10-20: "there always needs to be the cta Reserve on the navbar
   … make sure it is big") */
.mf-hdr__cta[data-v-6998eaca] .mf-hdr__book {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 44px;
  /* hairline outline (operator, 2026-10-20: "outline edge less thick") */
  border: 1px solid var(--site-hdr-ink);
  background: transparent;
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(1.1875rem * var(--site-ts, 1));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--site-hdr-ink);
  transition:
    color var(--site-duration, 320ms) var(--site-ease-out, ease),
    background-color var(--site-duration, 320ms) var(--site-ease-out, ease),
    border-color var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.mf-hdr__cta[data-v-6998eaca] .mf-hdr__book:hover,
.mf-hdr__cta[data-v-6998eaca] .mf-hdr__book:focus-visible {
  background: var(--site-hdr-ink);
  color: var(--site-hdr-contrast, var(--site-color-bg, #f3efeb));
}
.mf-hdr__cta[data-v-6998eaca] .mf-hdr__book:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}

/* The membership mark on the booking flow, where the Reserve plate
   would stand. Ink cut on paper, white cut over a dark hero (the swap
   lives with the other marks at the foot of this file). */
.mf-hdr__member[data-v-6998eaca] {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.mf-hdr__member-img[data-v-6998eaca] {
  display: block;
  height: 32px;
  width: auto;
}
.mf-hdr__member-img--light[data-v-6998eaca] {
  display: none;
}

/* Phone language switcher, beside the burger. Off from 768px up, where
   the SDK one in the right-hand utilities does the job. */
.mf-hdr__lang[data-v-6998eaca] {
  display: none;
  position: relative;
}
.mf-hdr__lang-toggle[data-v-6998eaca] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--site-hdr-ink);
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(0.8125rem * var(--site-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.mf-hdr__lang-toggle[data-v-6998eaca]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 2px;
}
.mf-hdr__lang-toggle[aria-expanded='true'] svg[data-v-6998eaca] {
  transform: rotate(180deg);
}
.mf-hdr__lang-menu[data-v-6998eaca] {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 3;
  min-width: 76px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--site-color-bg, #e5e0d4);
  border: 1px solid var(--site-color-border-strong, #cfc1b3);
  box-shadow: 0 22px 48px -28px var(--site-color-shadow-deep, rgba(42, 28, 19, 0.5));
}
.mf-hdr__lang-item[data-v-6998eaca] {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--site-color-ink-strong, #4a423d);
  font-family: var(--site-font-heading, var(--site-font-body));
  font-size: calc(0.8125rem * var(--site-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mf-hdr__lang-item.is-current[data-v-6998eaca] {
  color: var(--site-color-accent-deep, #8c543c);
}
.mf-hdr__lang-item[data-v-6998eaca]:hover,
.mf-hdr__lang-item[data-v-6998eaca]:focus-visible {
  background: color-mix(in srgb, var(--site-color-ink-strong, #4a423d) 7%, transparent);
  outline: none;
}

/* Hamburger — permanent, far left, ≥44px target */
.mf-hdr__burger[data-v-6998eaca] {
  display: inline-flex;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  /* bigger (operator, 2026-10-20) */
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--site-hdr-ink);
  -webkit-tap-highlight-color: transparent;
}
.mf-hdr__burger[data-v-6998eaca]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.mf-hdr__burger-lines[data-v-6998eaca] {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 40px;
}
.mf-hdr__burger-lines i[data-v-6998eaca] {
  display: block;
  height: 2px;
  background: currentColor;
  transition:
    transform var(--site-duration, 320ms) var(--site-ease-out, ease),
    background-color var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.mf-hdr__burger-lines i[data-v-6998eaca]:last-child {
  width: 70%;
  align-self: flex-end;
}
.mf-hdr__burger:hover .mf-hdr__burger-lines i[data-v-6998eaca] {
  background: currentColor;
  opacity: 0.75;
}
.mf-hdr__burger:hover .mf-hdr__burger-lines i[data-v-6998eaca]:last-child {
  transform: scaleX(1.42);
  transform-origin: right center;
}

/* ==================================================================
   THE DRAWER — a paper sheet · teleported, z 1200 (> concierge)
   Palm loop breathes faintly under a heavy paper veil; the sheet
   stays legible even where the mp4 cannot decode (veil ≈ ground).
   ================================================================== */
.mf-drawer-root[data-v-6998eaca] {
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.mf-drawer__backdrop[data-v-6998eaca] {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--site-color-ink-deep, #38312d) 45%, transparent);
}
.mf-drawer[data-v-6998eaca] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(430px, 100%);
  isolation: isolate;
  overflow: hidden;
  background: var(--site-color-bg, #f3efeb);
  border-right: 1px solid var(--site-color-border, #e1d7cc);
  box-shadow: 32px 0 64px -32px rgba(0, 0, 0, 0.4);
}
.mf-drawer__palms[data-v-6998eaca] {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}
.mf-drawer__veil[data-v-6998eaca] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    200deg,
    color-mix(in srgb, var(--site-color-bg, #f3efeb) 72%, transparent),
    color-mix(in srgb, var(--site-color-bg, #f3efeb) 88%, transparent)
  );
}
.mf-drawer__scroll[data-v-6998eaca] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Drawer top: mark + close */
.mf-drawer__top[data-v-6998eaca] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem));
  border-bottom: 1px solid var(--site-color-border, #e1d7cc);
}
.mf-drawer__brand[data-v-6998eaca] {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--site-color-ink-strong, #4a423d);
}
.mf-drawer__brand[data-v-6998eaca]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 4px;
}
.mf-drawer__mark[data-v-6998eaca] {
  display: block;
  height: 48px;
  width: auto;
  max-width: 60vw;
  object-fit: contain;
}
.mf-drawer__wordmark[data-v-6998eaca] {
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 400);
  font-size: calc(1.35rem * var(--site-ts, 1));
  letter-spacing: 0.06em;
}
.mf-drawer__close[data-v-6998eaca] {
  appearance: none;
  background: none;
  border: 1px solid var(--site-color-border-strong, #cfc1b3);
  border-radius: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--site-color-ink-strong, #4a423d);
  transition:
    border-color var(--site-duration, 320ms) var(--site-ease-out, ease),
    color var(--site-duration, 320ms) var(--site-ease-out, ease);
  -webkit-tap-highlight-color: transparent;
}
.mf-drawer__close[data-v-6998eaca]:hover {
  /* the house blue on hover (operator, 2026-10-27) */
  border-color: var(--twm-thread, #4e627a);
  color: var(--twm-thread, #4e627a);
}
.mf-drawer__close[data-v-6998eaca]:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}

/* Drawer nav — large serif ink links on hairline seams */
.mf-drawer__nav[data-v-6998eaca] {
  padding: clamp(12px, 3vh, 28px) var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem)) 8px;
}
.mf-drawer__list[data-v-6998eaca] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mf-drawer__item[data-v-6998eaca] {
  border-bottom: 1px solid var(--site-color-border, #e1d7cc);
  opacity: 0;
  transform: translateY(8px);
  animation: mf-drawer-rise-6998eaca var(--site-duration-slow, 700ms) var(--site-ease-out, ease) forwards;
  animation-delay: calc(120ms + var(--i, 0) * var(--site-stagger, 90ms));
}
@keyframes mf-drawer-rise-6998eaca {
to {
    opacity: 1;
    transform: none;
}
}
.mf-drawer__nav[data-v-6998eaca] a,
.mf-drawer__nav[data-v-6998eaca] button {
  color: var(--site-color-ink-strong, #4a423d);
  text-decoration: none;
}
.mf-drawer__nav[data-v-6998eaca] .mf-drawer__link {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(12px, 2.2vh, 18px) 0;
  font-family: var(--site-font-display, var(--site-font-heading));
  font-weight: var(--site-type-display-weight, 400);
  font-size: calc(clamp(1.7rem, 7vw, 2.2rem) * var(--site-ts, 1));
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-align: left;
  text-decoration: none;
  color: var(--site-color-ink-deep, #38312d);
  transition:
    color var(--site-duration, 320ms) var(--site-ease-out, ease),
    padding-left var(--site-duration, 320ms) var(--site-ease-out, ease);
}
.mf-drawer__nav[data-v-6998eaca] .mf-drawer__link:hover,
.mf-drawer__nav[data-v-6998eaca] .mf-drawer__link:focus-visible {
  color: var(--twm-thread, #4e627a);
  padding-left: 10px;
}
.mf-drawer__nav[data-v-6998eaca] .mf-drawer__link:focus-visible {
  outline: 1px solid var(--site-color-accent);
  outline-offset: 3px;
}
.mf-drawer__nav[data-v-6998eaca] .mf-drawer__link.router-link-active {
  color: var(--site-color-accent-deep, #a35c36);
}

/* Drawer CTA — the one ink plate in the sheet */
.mf-drawer__book[data-v-6998eaca] {
  padding: clamp(20px, 4vh, 32px) var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* The doorway — generous, scaled to the enlarged brand mark */
.mf-drawer__book[data-v-6998eaca] .mf-drawer__cta {
  /* hover fills the house blue instead of black (operator, 2026-10-27) */
  --site-btn-ground-hover: var(--twm-thread, #4e627a);
  --site-btn-ring-hover: var(--twm-thread, #4e627a);
  --site-btn-ink-hover: #ffffff;
  width: 100%;
  min-height: 64px;
  padding: 18px 28px;
  font-size: calc(clamp(1.15rem, 4vw, 1.35rem) * var(--site-ts, 1));
  letter-spacing: 0.02em;
}

/* Foot — utilities only; the key seam is gone with the key (operator,
   2026-10-20: two bare hairlines read as "white on white") */
.mf-drawer__seam[data-v-6998eaca] { display: none !important;
}
.mf-drawer__foot[data-v-6998eaca] {
  margin-top: auto;
  padding: clamp(18px, 3vh, 28px) var(--site-gutter, clamp(1.25rem, 6vw, 2.5rem)) clamp(22px, 4vh, 34px);
  color: var(--site-color-fg);
}
.mf-drawer__seam[data-v-6998eaca] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.mf-drawer__seam-rule[data-v-6998eaca] {
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--site-color-accent) 60%, transparent);
}
/* the house key reads as an engraving only at size — ≥180px or not at all */
.mf-drawer__key[data-v-6998eaca] {
  flex: none;
  width: min(180px, 52vw);
  height: auto;
  opacity: 0.9;
}
.mf-drawer__utils[data-v-6998eaca] {
  display: flex;
  justify-content: center;
  color: var(--site-color-ink-soft, #7d726a);
  font-size: calc(14px * var(--site-ts, 1));
}
.mf-drawer__utils[data-v-6998eaca] a,
.mf-drawer__utils[data-v-6998eaca] button {
  color: inherit;
}

/* ==================================================================
   DRAWER TRANSITION — the wall swings shut/open
   ================================================================== */
.mfdrw-enter-active[data-v-6998eaca] {
  transition: opacity 320ms var(--site-ease, ease);
}
.mfdrw-leave-active[data-v-6998eaca] {
  transition: opacity 260ms var(--site-ease, ease);
}
.mfdrw-enter-from[data-v-6998eaca],
.mfdrw-leave-to[data-v-6998eaca] {
  opacity: 0;
}
.mfdrw-enter-active .mf-drawer[data-v-6998eaca] {
  transition: transform 560ms var(--site-ease-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.mfdrw-leave-active .mf-drawer[data-v-6998eaca] {
  transition: transform 300ms var(--site-ease, ease);
}
.mfdrw-enter-from .mf-drawer[data-v-6998eaca],
.mfdrw-leave-to .mf-drawer[data-v-6998eaca] {
  transform: translateX(-100%);
}

/* ==================================================================
   RESPONSIVE — one grammar at every width; the bar just compacts
   ================================================================== */
@media (max-width: 1099.98px) {
.mf-hdr__row[data-v-6998eaca] {
    min-height: 72px;
}
.mf-hdr__cta[data-v-6998eaca] .mf-hdr__book {
    padding: 12px 22px;
    font-size: calc(1rem * var(--site-ts, 1));
}
.mf-hdr__cta[data-v-6998eaca] {
    margin-left: 12px;
}
.mf-hdr__member-img[data-v-6998eaca] {
    height: 28px;
}
}

/* Phones: the language moves beside the burger */
@media (max-width: 767.98px) {
.mf-hdr__lang[data-v-6998eaca] {
    display: block;
}
.mf-hdr__utils[data-v-6998eaca] .pop-hdr-utils__lang {
    display: none;
}
.mf-hdr__row[data-v-6998eaca] {
    gap: 4px;
}
  /* booking flow, phones: the mark smaller again */
.mf-hdr__member-img[data-v-6998eaca] {
    height: 24px;
}
.mf-hdr__pair-rule[data-v-6998eaca] {
    height: 34px;
    margin-inline: 10px;
}
.mf-hdr__pair[data-v-6998eaca] {
    height: 40px;
}
.mf-hdr__slh[data-v-6998eaca] {
    margin-left: 2px;
}
.mf-hdr__slh-img[data-v-6998eaca] {
    height: 34px;
}
.mf-hdr__funnel-img[data-v-6998eaca] {
    height: 52px;
}
  /* booking flow: the centre carries the pair, so the language moves to
     the right edge (that side has no doorway there) */
.mf-hdr--funnel .mf-hdr__lang[data-v-6998eaca] {
    order: 5;
    margin-left: auto;
}
.mf-hdr--funnel .mf-hdr__end[data-v-6998eaca] {
    order: 6;
    margin-left: 0;
}
.mf-hdr--funnel .mf-hdr__lang-menu[data-v-6998eaca] {
    left: auto;
    right: 0;
}
}
@media (max-width: 519.98px) {
  /* narrow phones: the doorway STAYS on the bar — it takes the sound
     toggle's edge spot (the toggle still lives in the drawer foot) */
.mf-hdr__utils[data-v-6998eaca] {
    display: none;
}
.mf-hdr__cta[data-v-6998eaca] {
    margin-left: 0;
}
.mf-hdr__cta[data-v-6998eaca] .mf-hdr__book {
    padding: 8px 12px;
    min-height: 44px;
    font-size: 13px;
    letter-spacing: 0;
}
  /* keep the centred mark clear of the compact doorway, whatever the
     logo's proportions */
.mf-hdr__mark[data-v-6998eaca] {
    max-width: 30vw;
    max-height: 48px;
}
  /* a wide logo sits in the gap between the burger and the doorway */
.mf-hdr:not(.mf-hdr--minimal):not(.mf-hdr--funnel) .mf-hdr__center[data-v-6998eaca] {
    left: 36%;
}
.mf-hdr__member-img[data-v-6998eaca] {
    height: 20px;
}
}

/* ==================================================================
   REDUCED MOTION — the wall stands still; palms rest
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
.mf-drawer__palms[data-v-6998eaca] {
    display: none;
}
.mf-hdr--rise[data-v-6998eaca] {
    animation: none;
}
.mf-hdr[data-v-6998eaca],
  .mf-hdr__cta[data-v-6998eaca] .mf-hdr__book,
  .mf-hdr__burger-lines i[data-v-6998eaca],
  .mf-drawer__close[data-v-6998eaca],
  .mf-drawer__nav[data-v-6998eaca] .mf-drawer__link {
    transition: none;
}
.mf-drawer__item[data-v-6998eaca] {
    animation: none;
    opacity: 1;
    transform: none;
}
.mfdrw-enter-active[data-v-6998eaca],
  .mfdrw-leave-active[data-v-6998eaca],
  .mfdrw-enter-active .mf-drawer[data-v-6998eaca],
  .mfdrw-leave-active .mf-drawer[data-v-6998eaca] {
    transition: none;
}
}


body:has(.mf-hdr) .app-shell__main { padding-top: 0;
}
/* SECTION TITLES IN CAPITALS (operator, 2026-10-27): every h2 on the
   site's own pages; the booking pages keep the standard engine look. */
.app-shell:not(.app-shell--funnel) h2 { text-transform: uppercase !important;
}

/* /book: the cart rail docks with the SDK's 16px sticky top, which slid
   it under this fixed bar (97px at 1440, 73px below 1100). Dock it the
   bar's height + the same 16px of air below. */
body:has(.mf-hdr) main.j17-book .j17-book__rail {
  top: calc(clamp(72px, 7vw, 96px) + 17px + env(safe-area-inset-top, 0px)) !important;
}
@media (max-width: 1099.98px) {
body:has(.mf-hdr) main.j17-book .j17-book__rail {
    top: calc(89px + env(safe-area-inset-top, 0px)) !important;
}
}

/* /book (SDK funnel masthead, restyle-only region): its own vignette
   fades to transparent from 24%–40%, exactly where the cream eyebrow,
   title and "Reserve" marker sit over a bright photograph. Deepen the veil with
   the house ink so the type keeps a painted ground top to bottom. */
/* /book masthead: the SDK's own "Reserve" marker rides the hero's top-right
   chrome and collides with this fixed header's Reserve plate — hide it;
   the header button is the one doorway. */
body:has(.mf-hdr) .j17-about__hero-marker { display: none;
}

/* Reveal safety: any scroll reveal still waiting after 2.5s settles in
   place, so a page is never left with hidden text. A reveal that fires
   earlier plays as designed (.rv-in drops this rule). */
body:has(.mf-hdr) [data-rv]:not(.rv-in) {
  animation: mf-rv-safety 0.6s ease 2.5s forwards;
}
@keyframes mf-rv-safety {
to { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0);
}
}
@media (prefers-reduced-motion: reduce) {
body:has(.mf-hdr) [data-rv]:not(.rv-in) { animation: none;
}
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) {
  --site-hdr-ink: var(--site-color-on-dark, #f3efeb);
  --site-hdr-contrast: var(--site-color-ink-deep, #38312d);
  /* The painted ground travels WITH the ink swap: the cream marks'
     nearest painted ancestor must hold ≥3:1 (audit measures ancestors,
     and a guest keeps a legible header if the hero photo fails to
     load). One rule here replaced eight page-carried copies at the
     site-wide pass; the veil dissolves into each hero's darkened top. */
  background: rgba(0, 0, 0, 0.62);
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) .mf-hdr__mark--ink {
  display: none;
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) .mf-hdr__mark--light {
  display: block;
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) .mf-hdr__member-img--ink {
  display: none;
}
body:has([data-hero-ground='dark']) .mf-hdr:not(.mf-hdr--scrolled) .mf-hdr__member-img--light {
  display: block;
}

/* Homepage logo-only state: no veil at all — the strip is transparent
   and only the cream mark rides the hero (its scrim already darkens
   the photograph's top edge enough to carry one mark). */
/* the doorway over the hero photo is fully transparent before the first
   scroll — no ink plate, just the hairline and the cream label on the
   film (operator, 2026-10-20: "full transparent before scroll on the
   homepage only"); the hero's own top scrim carries the contrast */
body:has([data-hero-ground='dark']) .mf-hdr--minimal .mf-hdr__book:not(:hover):not(:focus-visible) {
  background: transparent;
}
body:has([data-hero-ground='dark']) .mf-hdr--minimal:not(.mf-hdr--scrolled) {
  background: transparent;
}


.twf[data-v-fcb30483] {
  --twf-sp-2xs: 16px;
  --twf-sp-xs: clamp(16px, calc(16px + 8 * ((100vw - 1180px) / 740)), 24px);
  --twf-sp-s: clamp(24px, calc(24px + 8 * ((100vw - 1180px) / 740)), 32px);
  --twf-sp-l: clamp(32px, calc(32px + 16 * ((100vw - 1180px) / 740)), 48px);
  --twf-sp-2xl: clamp(48px, calc(48px + 16 * ((100vw - 1180px) / 740)), 64px);
  --twf-sp-4xl: clamp(48px, calc(48px + 48 * ((100vw - 1180px) / 740)), 96px);
  --twf-hover: #4f627a;
  background: #000;
  color: #fff;
  padding: 0 var(--twf-sp-s);
  font-family: var(--site-font-body);
  font-size: calc(17px * var(--site-ts, 1));
  line-height: 1.5;
}
.twf__in[data-v-fcb30483] {
  max-width: 1800px;
  margin-inline: auto;
}

/* ── Row 1 — logo 335 wide, round social chips, contact column 288 ── */
.twf__cols[data-v-fcb30483] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--twf-sp-l);
  padding: var(--twf-sp-4xl) 0 72px;
}
.twf__col[data-v-fcb30483] { min-width: 0;
}
.twf__logo[data-v-fcb30483] { display: block; width: 335px; height: auto;
}
.twf__social[data-v-fcb30483] {
  list-style: none;
  display: flex;
  gap: 5px;
  margin: 35px 0 0;
  padding: 0;
}
.twf__chip[data-v-fcb30483] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.twf__chip svg[data-v-fcb30483] { width: 20px; height: 20px;
}
.twf__chip[data-v-fcb30483]:hover { background: var(--twf-hover); color: #fff;
}
.twf__chip[data-v-fcb30483]:focus-visible { outline: 2px solid #fff; outline-offset: 2px;
}

/* the site's pages: two rows of four across the middle of the first row */
.twf__nav[data-v-fcb30483] {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.twf__nav-list[data-v-fcb30483] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 22px clamp(28px, 4vw, 64px);
}
.twf__nav-link[data-v-fcb30483] {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--site-font-display);
  font-size: calc(17px * var(--site-ts, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.twf__nav-link[data-v-fcb30483]:hover { color: var(--twf-hover); border-bottom-color: var(--twf-hover);
}
.twf__nav-link[data-v-fcb30483]:focus-visible { outline: 1px solid #fff; outline-offset: 2px;
}
.twf__contact[data-v-fcb30483] { width: 288px; flex: 0 0 auto; line-height: 1.4;
}
.twf__head[data-v-fcb30483] {
  margin: 0 0 12px;
  font-family: var(--site-font-display);
  font-size: calc(17px * var(--site-ts, 1));
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}
.twf__head-rule[data-v-fcb30483] { display: block; width: 100%; height: 1px; background: #ffffff33; margin-bottom: 13px;
}
.twf__ledger[data-v-fcb30483] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.twf__row[data-v-fcb30483] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}
.twf__row--indent[data-v-fcb30483] { padding-left: 32px; margin-bottom: 5px;
}
.twf__row-ico[data-v-fcb30483] { width: 20px; height: 20px; flex: 0 0 auto;
}
.twf__ledger a[data-v-fcb30483] {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.4s;
}
.twf__ledger a[data-v-fcb30483]:hover { color: var(--twf-hover);
}
.twf__ledger a[data-v-fcb30483]:focus-visible { outline: 1px solid #fff; outline-offset: 2px;
}

/* ── Row 2 — newsletter: display head left, CTA right ── */
.twf__news[data-v-fcb30483] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--twf-sp-l);
  padding: 79px 0 35px;
}
.twf__news-head[data-v-fcb30483] {
  margin: 0;
  font-family: var(--site-font-display);
  font-size: clamp(24px, calc(24px + 40 * ((100vw - 1180px) / 740)), 64px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.twf__blurb[data-v-fcb30483] { margin: 0; max-width: 530px; font-size: calc(15px * var(--site-ts, 1));
}
.twf__cta[data-v-fcb30483] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--twf-sp-2xs) var(--twf-sp-xs);
  border: 2px solid;
  color: #fff;
  text-decoration: none;
  font-family: var(--site-font-display);
  font-size: clamp(16px, calc(16px + 2 * ((100vw - 1180px) / 740)), 18px);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.twf__cta-t[data-v-fcb30483] { translate: 8px 0; transition: translate 0.3s ease;
}
.twf__cta-chev[data-v-fcb30483] { width: 12px; height: 12px; margin-left: 10px; opacity: 0; transition: opacity 0.3s ease;
}
.twf__cta[data-v-fcb30483]:hover { background: var(--twf-hover); border-color: var(--twf-hover);
}
.twf__cta:hover .twf__cta-t[data-v-fcb30483] { translate: 0 0;
}
.twf__cta:hover .twf__cta-chev[data-v-fcb30483] { opacity: 1;
}
.twf__cta[data-v-fcb30483]:focus-visible { outline: 2px solid #fff; outline-offset: 3px;
}

/* ── Rules + the NAMRON collection ── */
.twf__rule[data-v-fcb30483] { height: 1px; background: #ffffff33;
}
.twf__coll[data-v-fcb30483] {
  display: grid;
  grid-template-columns: 335px minmax(0, 1fr);
  align-items: start;
  gap: var(--twf-sp-l);
  padding: 64px 0 60px;
}
.twf__coll--bare[data-v-fcb30483] {
  display: flex;
  justify-content: center;
  padding: 70px 0 69px;
}
.twf__namron[data-v-fcb30483] { padding-top: 6px;
}
.twf__coll--bare .twf__namron[data-v-fcb30483] { padding-top: 0;
}
.twf__namron-img[data-v-fcb30483] { display: block; width: 300px; height: auto;
}

/* Drawers: hairlined bars, display-face caps, a plus that turns into a
   minus, one open at a time. The body unfolds on grid-rows 0fr→1fr and
   is `inert` while closed so its links leave the tab order. */
.twf__drawers[data-v-fcb30483] { border-top: 1px solid #ffffff33;
}
.twf__drawer[data-v-fcb30483] { border-bottom: 1px solid #ffffff33;
}
.twf__drawer-h[data-v-fcb30483] { margin: 0;
}
.twf__drawer-btn[data-v-fcb30483] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 68px;
  padding: 16px 2px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
  font-family: var(--site-font-display);
  font-size: clamp(18px, calc(18px + 10 * ((100vw - 1180px) / 740)), 28px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.twf__drawer-btn[data-v-fcb30483]:hover { color: var(--twf-hover);
}
.twf__drawer-btn[data-v-fcb30483]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.twf__drawer-ico[data-v-fcb30483] {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.twf__drawer-ico[data-v-fcb30483]::before,
.twf__drawer-ico[data-v-fcb30483]::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.twf__drawer-ico[data-v-fcb30483]::after { transform: translateY(-50%) rotate(90deg);
}
.twf__drawer--open .twf__drawer-ico[data-v-fcb30483]::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}
.twf__drawer-body[data-v-fcb30483] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.twf__drawer--open .twf__drawer-body[data-v-fcb30483] { grid-template-rows: 1fr;
}
.twf__drawer-in[data-v-fcb30483] {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}
.twf__drawer--open .twf__drawer-in[data-v-fcb30483] {
  visibility: visible;
  transition-delay: 0s;
}

/* Inside a drawer: a region head (México / United States), then the
   houses in three columns, each house a caps name over its places. */
.twf__region[data-v-fcb30483] { padding: 10px 0 30px;
}
.twf__region + .twf__region[data-v-fcb30483] { padding-top: 0;
}
.twf__region-h[data-v-fcb30483] {
  margin: 0 0 18px;
  font-size: calc(13px * var(--site-ts, 1));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff99;
}
.twf__houses[data-v-fcb30483] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 40px;
}
.twf__house[data-v-fcb30483] { min-width: 0;
}
.twf__house-n[data-v-fcb30483] {
  display: block;
  margin: 0 0 8px;
  font-size: calc(13px * var(--site-ts, 1));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.twf__places[data-v-fcb30483] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.twf__place[data-v-fcb30483] { margin: 0 0 6px; font-size: calc(16px * var(--site-ts, 1)); line-height: 1.4;
}
.twf__place-link[data-v-fcb30483] {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #ffffff73;
  text-underline-offset: 5px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.twf__place-link[data-v-fcb30483]:hover {
  color: var(--twf-hover);
  text-decoration-color: var(--twf-hover);
}
.twf__place-link[data-v-fcb30483]:focus-visible { outline: 1px solid #fff; outline-offset: 2px;
}
.twf__here[data-v-fcb30483] {
  margin-left: 6px;
  font-size: calc(12px * var(--site-ts, 1));
  letter-spacing: 0.04em;
  color: #ffffff99;
}

/* ── Legal strip — copyright left, legal nav right ── */
.twf__legal[data-v-fcb30483] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--twf-sp-s);
  flex-wrap: wrap;
  padding: 77px 0 140px;
}
.twf__copy[data-v-fcb30483] {
  margin: 0 auto 0 0;
  font-size: clamp(14px, calc(14px + 2 * ((100vw - 1180px) / 740)), 16px);
  color: #ffffffb3;
}
.twf__legal-nav[data-v-fcb30483] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--twf-sp-s);
  margin-left: auto;
}
.twf__legal-nav a[data-v-fcb30483] {
  color: #fff;
  text-decoration: none;
  font-size: clamp(14px, calc(14px + 2 * ((100vw - 1180px) / 740)), 16px);
  transition: color 0.4s;
}
.twf__legal-nav a[data-v-fcb30483]:hover { color: var(--twf-hover);
}
.twf__legal-nav a[data-v-fcb30483]:focus-visible { outline: 1px solid #fff; outline-offset: 2px;
}
@media (max-width: 1024px) {
.twf__cols[data-v-fcb30483], .twf__news[data-v-fcb30483] { flex-wrap: wrap;
}
.twf__contact[data-v-fcb30483] { width: 100%;
}
.twf__logo[data-v-fcb30483] { width: 260px;
}
.twf__nav[data-v-fcb30483] { flex-basis: 100%; justify-content: flex-start; padding-top: 0;
}
.twf__nav-list[data-v-fcb30483] { grid-template-columns: repeat(2, max-content); gap: 12px 40px;
}
.twf__coll[data-v-fcb30483] {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 56px 0 48px;
}
.twf__namron-img[data-v-fcb30483] { width: 260px;
}
.twf__houses[data-v-fcb30483] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
  /* the address runs long for a 320px column */
.twf__ledger a[data-v-fcb30483] { white-space: normal;
}
  /* touch: every link down here is a text row; pad them into real targets */
.twf__ledger a[data-v-fcb30483],
  .twf__legal-nav a[data-v-fcb30483] {
    display: inline-block;
    padding-block: 11px;
}
.twf__row[data-v-fcb30483] { align-items: center; margin-bottom: 0;
}
.twf__row--indent[data-v-fcb30483] { margin-bottom: 0;
}
.twf__drawer-btn[data-v-fcb30483] { min-height: 60px; padding: 14px 0; font-size: 18px;
}
.twf__houses[data-v-fcb30483] { grid-template-columns: minmax(0, 1fr); gap: 18px;
}
.twf__place-link[data-v-fcb30483] { display: inline-block; padding-block: 8px;
}
.twf__place[data-v-fcb30483] { margin-bottom: 0;
}
.twf__copy[data-v-fcb30483] { width: 100%; margin: 0 0 8px;
}
.twf__legal-nav[data-v-fcb30483] { gap: 0 var(--twf-sp-s);
}
.twf__legal[data-v-fcb30483] { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}
}
@media (prefers-reduced-motion: reduce) {
.twf__drawer-body[data-v-fcb30483],
  .twf__drawer-ico[data-v-fcb30483]::before,
  .twf__drawer-ico[data-v-fcb30483]::after,
  .twf__cta-t[data-v-fcb30483],
  .twf__cta-chev[data-v-fcb30483] {
    transition: none;
}
}

/* ── The accessibility widget: the SDK mounts its pill as the last child
      of this <footer>. It floats instead: a fixed 48px black disc, icon
      only, bottom-right on every route; the sheet opens upward. z 998:
      under the concierge (999) and the menu, over page content. ── */
.twf[data-v-fcb30483] .a11y-panel {
  position: fixed !important;
  left: auto !important;
  right: 16px !important;
  top: auto !important;
  bottom: calc(16px + var(--concierge-footer-offset, 0px)) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 998;
}
.twf[data-v-fcb30483] .a11y-panel__trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 50% !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 10px 28px -6px rgba(0, 0, 0, 0.28) !important;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.twf[data-v-fcb30483] .a11y-panel__trigger:hover,
.twf[data-v-fcb30483] .a11y-panel__trigger[aria-expanded='true'] {
  background: var(--twf-hover) !important;
}
.twf[data-v-fcb30483] .a11y-panel__trigger:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
}
.twf[data-v-fcb30483] .a11y-panel__icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 auto;
}
.twf[data-v-fcb30483] .a11y-panel__trigger-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.twf[data-v-fcb30483] .a11y-panel__sheet {
  left: auto !important;
  right: 0 !important;
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  width: min(320px, calc(100vw - 32px)) !important;
  max-height: min(560px, calc(100vh - 120px - var(--concierge-footer-offset, 0px))) !important;
  overflow: auto;
  border: 1px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.35) !important;
}
@media (max-width: 900px) {
.twf[data-v-fcb30483] .a11y-panel {
    /* phones: down in the corner, below the hero's guest selector
       (operator, 2026-10-26: it sat on top of Guests) */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--concierge-footer-offset, 0px)) !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-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: "CommutersSans"; src: url("/cdn/01KV192J18GPMX7485RN7V8MPH/01M11C60QKF9077NR2F7E2DRVB.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CommutersSans"; src: url("/cdn/01KV192J18GPMX7485RN7V8MPH/01M11C60QK0YBPFMC3EVCT7T08.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/cdn/01KV192J18GPMX7485RN7V8MPH/01M0Z22XRTXN2TZT4PKP05570P.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/cdn/01KV192J18GPMX7485RN7V8MPH/01M0Z22XRTXN2TZT4PKP05570P.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
:root {
  --site-color-fg: #000000;
  --site-color-accent: #000000;
  --site-color-bg: #ffffff;
  --site-color-on-accent: #ffffff;
  --concierge-bg: rgb(255 255 255);
  --site-color-fg-muted: #666666;
  --a11y-focus: #000000;
  --site-color-slate: #202020;
  --site-color-chalk: #f5f5f5;
  --site-font-display: "CommutersSans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-micro: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}