/* ============================================================================
   corendon-south-beach.css — L3, the only property stylesheet.

   L1 (Crafto engine) and L2 (stock hotel vertical) are untouched third-party
   layers; everything this property decides lives here.

   Palette: Danny's brand package, measured from the supplied swatch export.
   CMYK is the source of truth; the sRGB values below are INTERIM and carry the
   same reservation as the clean-room build's design-tokens.css — see
   CONFIG_REQUIRED.md item 7. Do not re-convert without the SWOP profile.

   Typography: Open Sans, SIL OFL 1.1, self-hosted. Interim until the designer
   names a body face. The wordmark is used as supplied artwork only and is
   never re-set in a font (brand brief, §Typography).

   The stay-planner block at the bottom of this file comes from the operator's
   own Sonesta Livingstone implementation (itself a port of the Beach Plaza
   journey bar). Its colours have been re-pointed at the tokens below; its
   booking hand-off is rewritten for Mews in assets/js/csbm.js.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. fonts */
/* Open Sans, 10 woff2 subsets, local. No external font request is made. */
@import url("../../assets/fonts/open-sans.css");

/* --------------------------------------------------------------- 2. tokens */
:root {
    /* brand */
    --csbm-navy:        #2E395A;
    --csbm-navy-rgb:    46, 57, 90;
    --csbm-tan:         #C7A283;
    --csbm-tan-rgb:     199, 162, 131;
    --csbm-cream:       #F8F4ED;
    --csbm-cream-rgb:   248, 244, 237;
    --csbm-teal:        #92A8B6;
    --csbm-teal-rgb:    146, 168, 182;

    /* role aliases — the stay planner and the components below use these */
    --csbm-ink:          var(--csbm-navy);
    --csbm-ink-rgb:      var(--csbm-navy-rgb);
    --csbm-ink-soft:     #3B4970;
    --csbm-ink-deep:     #1E2640;
    --csbm-ink-deep-rgb: 30, 38, 64;
    --csbm-paper:        var(--csbm-cream);
    --csbm-paper-rgb:    var(--csbm-cream-rgb);
    --csbm-accent:       var(--csbm-tan);
    --csbm-accent-rgb:   var(--csbm-tan-rgb);
    /* The brand tan measures 2.15:1 on the cream paper — it cannot carry small
       text, so it carries rules and marks instead. Where an accent has to be
       read, this is the same hue and saturation at 66% of the value: 4.56:1,
       measured, not estimated. A brand colour that fails is still a failure. */
    --csbm-accent-text:  #836B56;
    --csbm-muted:        #5F6470;
    --csbm-line:         #E4DED5;

    /* --- Crafto engine variables, re-pointed ---------------------------------
       L1 still names Plus Jakarta Sans and Inter here, but delta A removed the
       @import that fetched them. Without these two overrides every heading and
       every paragraph on the site would silently fall back to a generic sans.  */
    --alt-font:     "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --primary-font: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

    /* base-color drives Crafto's buttons, links and accents. It is the navy,
       not the tan: white on tan measures far below AA, so the tan carries rules,
       kickers and small marks instead of anything a visitor has to read. */
    --base-color:            #2E395A;
    --dark-gray:             #2E395A;
    --medium-gray:           #5F6470;
    --extra-medium-gray:     #E4DED5;
    --light-medium-gray:     #EFE9E0;
    --very-light-gray:       #F8F4ED;
    --spring-wood:           #F8F4ED;
}

/* --- the template's scroll animations must not be able to hide content ------
   Crafto ships `[data-anime]{opacity:0}` as a plain CSS rule and only reveals a
   block when its JavaScript adds `.appear`. With JavaScript blocked, or with one
   script error, every animated band on the page is invisible — not degraded,
   gone. The rule is therefore scoped to pages that have JavaScript: the <head>
   adds `js` to <html> before the first paint, and without it nothing hides.
   assets/js/csbm.js carries the second half of this: anything on screen that is
   still waiting for its turn is revealed. */
html:not(.js) [data-anime] { opacity: 1 !important; }

/* ------------------------------------------------------------ 3. base skin */
body {
    background-color: var(--csbm-paper);
    color: var(--csbm-ink);
    font-family: var(--primary-font);
}
h1, h2, h3, h4, h5, h6, .alt-font { font-family: var(--alt-font); }
h1, h2, h3 { letter-spacing: -.01em; }

/* Section kickers: small caps in tan. The tan never carries body copy. */
.csbm-kicker {
    display: inline-block;
    color: var(--csbm-accent-text);
    font-size: 13px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    margin-bottom: 14px;
}
.csbm-kicker--on-dark { color: var(--csbm-tan); }

.csbm-rule { display: block; width: 56px; height: 2px; background: var(--csbm-accent); margin: 18px 0; }
.text-center .csbm-rule, .csbm-rule--center { margin-left: auto; margin-right: auto; }

.csbm-band-ink { background-color: var(--csbm-ink); color: #fff; }
.csbm-band-ink h1, .csbm-band-ink h2, .csbm-band-ink h3, .csbm-band-ink h4 { color: #fff; }
.csbm-band-paper { background-color: var(--csbm-paper); }

/* Skip link — visible the moment it takes focus. */
.csbm-skip {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    background: var(--csbm-ink); color: #fff; padding: 12px 20px; font-weight: 600;
}
.csbm-skip:focus { left: 12px; top: 12px; }

/* Focus is never removed, only restyled, and it is visible on both surfaces. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--csbm-accent);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------- 4. header */
/* Over the hero the header floats on the video; from the first scroll it docks
   as a solid bar. Two logo files rather than a filter, because the brief says
   the artwork is used as delivered. */
.csbm-header { position: relative; z-index: 30; }
.csbm-header--over-hero { position: absolute; inset: 0 0 auto 0; }
.csbm-header--over-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(var(--csbm-ink-deep-rgb), .82) 0%,
                                           rgba(var(--csbm-ink-deep-rgb), .55) 55%,
                                           rgba(var(--csbm-ink-deep-rgb), 0) 100%);
    height: 210px;
}
.csbm-header .navbar { padding: 10px 0; }
.csbm-header .container-fluid { padding-left: 40px; padding-right: 40px; }
.csbm-lang { text-decoration: none; white-space: nowrap; }
.csbm-logo { height: 40px; width: auto; display: block; }
.csbm-logo--dark { display: none; }
.csbm-header .navbar-nav .nav-link { padding: 10px 16px; font-size: 15px; white-space: nowrap; }
/* The header CTA never breaks over two lines (Sonesta §0u). */
.csbm-header .csbm-nav-actions .btn { white-space: nowrap; }
/* Note: Crafto's style.min.css redefines .mt-3 as `margin-top: 3%` (beats .mt-lg-0) —
   measured 02-10; the header therefore uses no spacing utilities of that family. */

/* Top bar: language only, right-aligned (Sonesta keeps Sign in / Manage booking / language there). */
/* Crafto's own .header-top-bar (fixed). Sonesta's measurements: 32px high, transparent,
   a 1px white line at 25% underneath. The engine pushes the navbar to top:40px; we set 32. */
.csbm-header .header-top-bar { height: 32px; display: flex; align-items: center; font-size: 13px; background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .25); }
@media (min-width: 992px) { .csbm-header .header-top-bar + .navbar { top: 32px; } }
@media (max-width: 991px) { .csbm-header .header-top-bar + .navbar { top: 0 !important; } } /* bar hidden there; beats Crafto's inline top */
/* Accent strip across the top of the hero, as Sonesta's 5px in its yellow; here the brand
   tan. A line, not type, so tan's 2.15:1 on cream does not apply. As on Sonesta the
   transparent top bar lies over it (Crafto's JS sets the bar's `top` inline); only the
   header scrim is kept off it, or the strip turns muddy. */
.csbm-hero-accent { border-top: 5px solid var(--csbm-tan); }
.csbm-header--over-hero::before { top: 5px; }
.csbm-header--solid .header-top-bar { border-bottom-color: var(--csbm-line); }
.csbm-header .header-top-bar > .container-fluid { padding-left: 40px; padding-right: 40px; }
.csbm-header.sticky .header-top-bar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.csbm-lang-menu { position: relative; }
.csbm-lang-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 4px; font-weight: 600; letter-spacing: .04em; }
.csbm-lang-menu summary::-webkit-details-marker { display: none; }
.csbm-lang-menu summary .bi { font-size: 10px; transition: transform .2s ease; }
.csbm-lang-menu[open] summary .bi { transform: rotate(180deg); }
.csbm-lang-menu summary:focus-visible { outline: 2px solid var(--csbm-tan); outline-offset: 2px; }
.csbm-lang-menu img, .csbm-lang-mobile img { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.csbm-lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 150px; margin: 0; padding: 6px;
    background: #fff; border-radius: 6px; box-shadow: 0 10px 30px rgba(var(--csbm-ink-rgb), .18); z-index: 50; }
.csbm-lang-menu li a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px;
    color: var(--csbm-ink); text-decoration: none; font-weight: 600; }
.csbm-lang-menu li a:hover, .csbm-lang-menu li a:focus-visible { background: rgba(var(--csbm-tan-rgb), .22); }
.csbm-lang-menu li a[aria-current] { box-shadow: inset 2px 0 0 var(--csbm-tan); }
.csbm-lang-name { font-weight: 400; margin-left: auto; color: var(--csbm-muted); }
.csbm-header--over-hero .csbm-lang-menu summary { color: #fff; }
.csbm-header--solid .csbm-lang-menu summary { color: var(--csbm-ink); }

/* Centre logo (Crafto .center-logo, as Sonesta). The engine pads links 38px/20px for a
   tall bar; ours sits on a video under a top bar, so keep the compact rhythm. */
.csbm-header .navbar.center-logo .navbar-nav .nav-link { padding: 10px 10px; }
.csbm-header .navbar.center-logo .navbar-nav .nav-link::after { left: 10px; right: 10px; }
@media (min-width: 992px) {
    /* The logo sits absolutely in the middle (engine). Each nav runs up to it with 20px
       air: half the column minus half the 196px logo minus 20px. The side columns are
       equal width, so the middle column is centred and so is the logo. */
    .csbm-header .navbar.center-logo .navbar-left,
    .csbm-header .navbar.center-logo .navbar-right { width: calc(50% - 118px); }
    .csbm-header .navbar.center-logo .csbm-logo { height: 40px; }
}
.csbm-header .csbm-nav-actions .btn { margin: 0; }

/* Header CTA "Check availability" in Sonesta's measured size and type treatment
   (207x48 there: 13px / 700 / uppercase / 0.1em, padding 0 26px, radius 12px), in our
   colours. Hover: a tan fill wiping in from the left (Sonesta §0y), text to deep ink —
   measured 6.35:1 on tan. Same three traps as there: the engine's 2px transparent border
   (fill on the border-box), shorthand `background:` resets (longhands + !important), and a
   transparent hover (background-color held). */
:is(.csbm-header, .csbm-roomcard) .btn.csbm-cta-header {
    height: 48px; padding: 0 26px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1; white-space: nowrap;
    background-color: var(--csbm-ink) !important; color: #fff !important; border-color: transparent !important;
    background-image: linear-gradient(90deg, var(--csbm-tan) 0 74%, rgba(var(--csbm-tan-rgb), 0) 100%) !important;
    background-repeat: no-repeat !important; background-origin: border-box !important; background-clip: border-box !important;
    background-position: left center !important; background-size: 0% 100% !important;
    transition: background-size 420ms cubic-bezier(.33, 0, .15, 1), color 180ms linear, transform 180ms ease;
}
:is(.csbm-header, .csbm-roomcard) .btn.csbm-cta-header:hover,
:is(.csbm-header, .csbm-roomcard) .btn.csbm-cta-header:focus-visible {
    background-size: 142% 100% !important; color: var(--csbm-ink-deep) !important; transform: translateY(-2px);
}
:is(.csbm-header, .csbm-roomcard) .btn.csbm-cta-header:focus-visible { outline: 2px solid var(--csbm-tan); outline-offset: 3px; }
:is(.csbm-header, .csbm-roomcard) .btn.csbm-cta-header:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    :is(.csbm-header, .csbm-roomcard) .btn.csbm-cta-header { transition-duration: 1ms; }
    :is(.csbm-header, .csbm-roomcard) .btn.csbm-cta-header:hover { transform: none; }
}

/* Collapsed menu: the left and right lists read as one list (no gap between them). */
@media (max-width: 991px) {
    .csbm-header .navbar.center-logo .navbar-nav { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; }
}
/* Collapsed menu: language as two plain flag links + a full-width booking button. */
.csbm-nav-mobile { padding: 14px 0 6px; border-top: 1px solid var(--csbm-line); margin-top: 8px; }
.csbm-lang-row { display: flex; gap: 10px; margin-bottom: 12px; }
.csbm-lang-mobile { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 4px;
    color: var(--csbm-ink); text-decoration: none; font-weight: 600; border: 1px solid var(--csbm-line); }
.csbm-lang-mobile[aria-current] { border-color: var(--csbm-tan); }

/* Hover and current page: a tan underline, never tan type. Tan measures 2.15:1 on
   cream (decision 01-10), so it may only mark, not carry text. Over the hero the
   link stays white; docked it stays ink. Same two-state logic as Sonesta §0u. */
.csbm-header .navbar-nav .nav-link { position: relative; }
.csbm-header .navbar-nav .nav-link::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
    background: var(--csbm-tan); transform: scaleX(0); transform-origin: left center;
    transition: transform .25s ease;
}
.csbm-header .navbar-nav .nav-link:hover::after,
.csbm-header .navbar-nav .nav-link:focus-visible::after,
.csbm-header .navbar-nav .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.csbm-lang:hover, .csbm-lang:focus-visible { text-decoration: underline; text-decoration-color: var(--csbm-tan);
    text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Location + phone as icons after Contact (Sonesta §0x): 30x30 target, details in
   aria-label/title. Shown from 1366px: below that the 208px "Check availability" button
   overlaps them (measured 02-10: -55px at 1200, -15px at 1280). Sonesta hides them on
   narrow desktops for the same reason (§1 v4 there). Address + phone stay in the footer. */
@media (min-width: 1200px) and (max-width: 1365px) { .csbm-hdr-contact { display: none !important; } }
/* Spanish: longer menu and "Ver disponibilidad" button, so the icons sat under the button
   up to 1686px and could not be clicked (measured 05-10 in 8px steps; clear from 1694px). */
@media (min-width: 1366px) and (max-width: 1699px) { html[lang="es"] .csbm-hdr-contact { display: none !important; } }
/* Spanish menu between 1200 and 1359px: even with the short label "Preguntas" the right half
   ran 73px under "Ver disponibilidad" at 1200 (measured 05-10). Tighter links and button there. */
@media (min-width: 1200px) and (max-width: 1359px) {
    html[lang="es"] header .navbar .navbar-nav .nav-link { padding-left: 6px !important; padding-right: 6px !important; font-size: 14px; }
    html[lang="es"] .csbm-header .btn.csbm-cta-header { padding: 0 14px; letter-spacing: .05em; }
}
.csbm-hdr-contact { gap: 14px; margin-left: 7px; }   /* 05-10: room for the 44px tap areas (7px each side) without overlap */
.csbm-hdr-icon { display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; font-size: 16px; text-decoration: none;
    color: inherit; transition: background-color .2s ease; }
.csbm-hdr-icon:hover { background-color: rgba(var(--csbm-tan-rgb), .28); }
.csbm-hdr-icon:focus-visible { outline: 2px solid var(--csbm-tan); outline-offset: 2px; }
.csbm-header--over-hero .csbm-hdr-icon { color: #fff; }
.csbm-header--over-hero.sticky .csbm-hdr-icon,
.csbm-header--solid .csbm-hdr-icon { color: var(--csbm-ink); }
/* 992-1199: seven links + switch + CTA touched the logo (0px, measured 02-10). Tighter
   link padding, as on Sonesta (§0n there: text-nowrap + 8px padding in this band). */
@media (min-width: 992px) and (max-width: 1199px) {
    .csbm-header .navbar.center-logo .navbar-nav .nav-link { padding-left: 8px; padding-right: 8px; }
    .csbm-header .navbar.center-logo .navbar-nav .nav-link::after { left: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .csbm-header .navbar-nav .nav-link::after, .csbm-hdr-icon { transition: none; }
}

/* over the hero: light type on the video */
.csbm-header--over-hero .nav-link,
.csbm-header--over-hero .csbm-lang { color: #fff; }
.csbm-header--over-hero .navbar-toggler-line { background-color: #fff; }

/* docked: solid paper bar, dark type, dark logo */
/* Docked state. The class is Crafto's own (`sticky` on <header>, added by
   js/main.js once the page is past the header height) rather than one of ours:
   two mechanisms for one state is one too many, and Crafto already moves the
   navbar to position:fixed there. All that is left is to make it legible. */
.csbm-header--over-hero.sticky .navbar {
    /* Crafto parks a sticky navbar at translateY(-100%) and only slides it back
       for a navbar that carries one of its own opt-in classes; ours carries
       `sticky-header`. It also only sets `top` for its own .header-top-bar
       layout, so without this the docked bar sat 108px above the fold —
       measured in a real browser on 2026-09-30. */
    top: 0;
    background: var(--csbm-paper);
    border-bottom: 1px solid var(--csbm-line);
    box-shadow: 0 6px 24px rgba(var(--csbm-ink-rgb), .07);
}
.csbm-header--over-hero.sticky::before { display: none; }
/* Past the hero the planner sits on cream, where white type disappears. */
/* "Plan your stay" kicker follows what is actually behind it (assets/js/csbm.js measures
   the backdrop under the text on scroll): ink on a light flat band, white on a dark
   band or on photography. Replaces the old past-hero rule, which turned it ink on the
   navy Groups band as well (02-10). */
#sjb .sjb-kicker { transition: color .2s ease; }
#sjb .sjb-kicker.is-on-light { color: var(--csbm-ink); text-shadow: none; }
#sjb .sjb-kicker.is-on-dark { color: #fff; text-shadow: none; }
.csbm-header--over-hero.sticky .nav-link,
.csbm-header--over-hero.sticky .csbm-lang { color: var(--csbm-ink); }
.csbm-header--over-hero.sticky .navbar-toggler-line { background-color: var(--csbm-ink); }
.csbm-header--over-hero.sticky .csbm-logo--light { display: none; }
.csbm-header--over-hero.sticky .csbm-logo--dark { display: block; }

.csbm-header--solid .navbar { background: var(--csbm-paper); border-bottom: 1px solid var(--csbm-line); }
.csbm-header--solid .nav-link, .csbm-header--solid .csbm-lang { color: var(--csbm-ink); }
.csbm-header--solid .csbm-logo--light { display: none; }
.csbm-header--solid .csbm-logo--dark { display: block; }

@media (max-width: 991px) {
    .csbm-header--over-hero .navbar-collapse { background: var(--csbm-paper); padding: 16px 20px; margin-top: 10px; }
    .csbm-header--over-hero .navbar-collapse .nav-link,
    .csbm-header--over-hero .navbar-collapse .csbm-lang { color: var(--csbm-ink); }
    .csbm-logo { height: 32px; }
    .csbm-header .container-fluid { padding-left: 20px; padding-right: 20px; }
}

/* ------------------------------------------------------------------ 5. hero */
/* The hero paints in one stacking context of its own, with nothing on a negative
   layer. It used to put the video and the scrim at z-index -2 and -1 while the
   section carried the poster as a background image: a negative layer paints
   BEHIND its own parent's background, so the poster covered both. The page
   looked almost right — a still instead of the video, and no scrim at all under
   the type. Found by photographing the backdrop, 2026-09-30. */
#banner { position: relative; isolation: isolate; background-color: var(--csbm-ink-deep); }
#banner .csbm-hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
/* The scrim is not a mood setting, it is what makes the type legible. Measured
   against the brightest pixel behind each line (tools/scrim.py): the first pass
   sat at 3.8-4.0:1 where the video shows a white building wall, so the middle of
   the gradient was deepened and the copy got a band of its own. */
/* Sonesta model (measured on its candidate 02-10): a flat dark veil over the video plus a
   wide soft text shadow, no coloured gradient. Sonesta uses 20% black; here the level is
   whatever tools/scrim.py needs — the video has a white building wall (see above), and
   the shadow does not count in that measurement, so legibility rests on the veil alone. */
#banner .csbm-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background-color: rgba(0, 0, 0, var(--csbm-hero-veil, .38));  /* .32 -> .38 (03-10): payoff hit 4.87:1 on bright video frames */
}
#banner > .container { position: relative; z-index: 2; }
#banner .csbm-hero-copy { position: relative; z-index: 1; }
/* Sonesta's type ladder: kicker 20px / title 140px (120/110/90/70 down the breakpoints,
   tracking -6px → -2px) / payoff 22px 500. Title at 600, the heaviest weight the
   self-hosted Open Sans declares (400 + 600; a 700 request would render as 600 anyway). */
.csbm-hero-kicker, .csbm-hero-title { text-shadow: 0 0 100px rgba(0, 0, 0, .9); color: #fff; }
.csbm-hero-kicker { font-size: 20px; line-height: 1.2; font-weight: 400; letter-spacing: -.01em; margin: 0 0 5px; }
.csbm-hero-title { font-size: 140px; line-height: 1; font-weight: 600; letter-spacing: -6px; margin: 0 0 25px; }
.csbm-hero-payoff { font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: .01em; margin: 0 0 40px; }
@media (max-width: 1199px) { .csbm-hero-title { font-size: 120px; } }
@media (max-width: 991px)  { .csbm-hero-title { font-size: 110px; letter-spacing: -4px; } }
@media (max-width: 767px)  { .csbm-hero-title { font-size: min(90px, 15vw); margin-bottom: 15px; } .csbm-hero-kicker { margin-bottom: 15px; } }
/* The header floats over the hero (Sonesta's is solid and the hero starts below it), so
   below lg the centred copy must clear the ~96px bar: measured 02-10, the kicker sat
   under the logo at 390px. */
@media (max-width: 991px) { #banner .csbm-hero-copy { padding-top: 96px; } }
/* "South Beach" is 11 characters to Livingstone's 11 but wider glyphs: at 70px it needs
   402px, 390px phones offer 356 (measured). Scale with the viewport so it stays one line. */
@media (max-width: 575px)  { .csbm-hero-title { font-size: min(70px, 14.5vw); letter-spacing: -2px; } }
.csbm-hero-payoff u,
.csbm-hero-underline {
    text-decoration: none;
    box-shadow: inset 0 -.38em 0 rgba(var(--csbm-accent-rgb), .55);
}
/* The video is decoration. Anyone who asked the system to stop moving things
   gets the poster frame instead. */
@media (prefers-reduced-motion: reduce) {
    #banner .csbm-hero-video { display: none; }
    #banner { background-image: var(--csbm-hero-poster);
              background-size: cover; background-position: center; background-repeat: no-repeat; }
}
.csbm-video-toggle {
    position: absolute; right: 18px; bottom: 18px; z-index: 5;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55);
    background: rgba(var(--csbm-ink-deep-rgb), .45); color: #fff; line-height: 1;
}
/* From 1400px the engine's fixed "Scroll" indicator sits mid-screen 20px from the right edge;
   scrolling past the hero slid the pause button under it (hit-test 05-10). Out of its column. */
@media (min-width: 1400px) { .csbm-video-toggle { right: 80px; } }

/* --------------------------------------------------------- 6. content bits */
.csbm-figure { overflow: hidden; }
.csbm-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.csbm-quote-note { font-size: 13px; color: var(--csbm-muted); }

.csbm-feature { padding: 34px 30px; background: #fff; border: 1px solid var(--csbm-line); height: 100%; }
.csbm-feature i { color: var(--csbm-accent); }
.csbm-feature h3 { font-size: 20px; margin-bottom: 10px; }
.csbm-feature p { margin-bottom: 0; color: var(--csbm-muted); }

.csbm-overlap-card {
    background: #fff; border: 1px solid var(--csbm-line);
    box-shadow: 0 24px 60px rgba(var(--csbm-ink-rgb), .10);
}
.csbm-vertical-tab {
    background: var(--csbm-ink); color: #fff;
    writing-mode: vertical-rl; transform: rotate(180deg);
    letter-spacing: .18em; text-transform: uppercase; font-size: 13px; font-weight: 600;
}

.csbm-tile figure { aspect-ratio: 4 / 3; position: relative; }
.csbm-tile figure > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Crafto's own banner component swaps two blocks of text on hover. On a touch
   screen there is no hover, and at rest the two stacked on top of each other —
   seen in a screenshot on 2026-09-30. So the caption states everything at once
   and hover only lifts it. */
.csbm-tile figcaption {
    position: absolute; inset: 0;
    /* A flat layer under the gradient: the gradient alone left the eyebrow and
       the title over the bright part of a photograph at 1.3:1. */
    background: linear-gradient(to top, rgba(var(--csbm-ink-deep-rgb), .92) 0%,
                                        rgba(var(--csbm-ink-deep-rgb), .74) 55%,
                                        rgba(var(--csbm-ink-deep-rgb), .68) 100%);
    transition: background .3s ease;
}
.csbm-tile:hover figcaption, .csbm-tile:focus-within figcaption {
    background: linear-gradient(to top, rgba(var(--csbm-ink-deep-rgb), .94) 0%,
                                        rgba(var(--csbm-ink-deep-rgb), .70) 60%,
                                        rgba(var(--csbm-ink-deep-rgb), .64) 100%);
}
.csbm-tile figure > img { transition: transform .6s ease; }
.csbm-tile:hover figure > img { transform: scale(1.04); }
.csbm-tile-eyebrow {
    /* On a photograph the tan is decoration, not text: it is set in white and
       the tan is kept for the rule underneath, where a low ratio costs nothing. */
    color: #fff; font-size: 12px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; margin-bottom: 10px;
    text-shadow: 0 1px 10px rgba(var(--csbm-ink-deep-rgb), .8);
}
.csbm-tile-eyebrow::after {
    content: ""; display: block; width: 28px; height: 2px; margin: 8px auto 0;
    background: var(--csbm-tan);
}
.csbm-tile h3, .csbm-tile-note { text-shadow: 0 1px 12px rgba(var(--csbm-ink-deep-rgb), .75); }
.csbm-tile-note { color: #fff; font-size: 14px; }
/* No position and no transform on the link itself: either one would make it the
   containing block for the stretch below, and the target would shrink back to
   the circle. The lift lives on the icon instead. */
.csbm-tile-link i { transition: transform .3s ease; }
.csbm-tile:hover .csbm-tile-link i { transform: translateX(2px); }
/* The arrow is the affordance; the whole card is the target, because a 50px
   circle is not one on a phone. */
.csbm-tile-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.csbm-tile:hover .hover-hide-content { opacity: 0; }

/* Buttons: Crafto's own components, with the brand's square edge. */
.btn.btn-base-color { background-color: var(--csbm-ink); border-color: var(--csbm-ink); color: #fff; }
.btn.btn-base-color:hover { background-color: var(--csbm-ink-soft); border-color: var(--csbm-ink-soft); color: #fff; }
.btn.btn-outline-ink { border: 1px solid var(--csbm-ink); color: var(--csbm-ink); background: transparent; }
.btn.btn-outline-ink:hover { background: var(--csbm-ink); color: #fff; }

/* ---------------------------------------------------------------- 7. footer */
.csbm-footer { background: var(--csbm-ink); color: rgba(255,255,255,.86); }
.csbm-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.csbm-footer a:hover { color: #fff; text-decoration: underline; }
.csbm-footer h2 { color: #fff; }
.csbm-footer-lockup img { height: 44px; width: auto; }
.csbm-footer-note { color: rgba(255,255,255,.66); }

/* ============================================================================
   8. Stay planner ("plan your stay" bar)
   Lifted from the operator's own Sonesta Livingstone implementation and
   re-pointed at the tokens above. Desktop only by design: below 992px the hero
   and header buttons carry the booking route instead.
   ========================================================================= */


/* ============================================================
   Plan your stay — journey bar (familie-patroon, 10-09).
   Zelfde interactie-DNA als Beach Plaza, volledig CSBM-huid:
   Urbanist/Rufina, groen var(--csbm-ink), geel var(--csbm-accent), licht var(--csbm-paper).
   Desktop-only; motion alleen transform/opacity, in 240ms/uit 160ms.
   ============================================================ */
#sjb { display: none; }
@media (min-width: 992px) {

  #sjb {
    display: block; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    width: min(980px, calc(100vw - 280px)); z-index: 9000;
    font-family: var(--primary-font, sans-serif);
  }
  /* hero full-screen zoals Beach Plaza (Crafto trekt anders de headerhoogte eraf) */
  #banner { height: 100svh !important; }
  /* tagline vrij van de gedockte bar */
  .sjb-tagline { margin-bottom: 130px; }
  .sjb-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 8px 6px; color: #fff; font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
  }
  .sjb-kicker::before { content: ""; width: 22px; height: 3px; background: var(--csbm-accent); }
  html.sjb-stage .sjb-kicker { text-shadow: none; }
  .sjb-bar {
    position: relative;
    display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr auto; align-items: center;
    background: #fff; border: 1px solid rgba(var(--csbm-ink-rgb), 0.14); border-radius: 18px;
    padding: 6px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  }
  .sjb-divider { width: 1px; height: 34px; background: rgba(var(--csbm-ink-rgb), 0.14); }
  .sjb-field {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 5px; padding: 12px 22px;
    border: 0; background: none; border-radius: 12px; text-align: left; cursor: pointer;
    font-family: inherit;
    transition: background-color 180ms ease;
  }
  .sjb-field:hover { background: var(--very-light-gray, var(--csbm-paper)); }
  .sjb-field:active { transform: scale(0.99); }
  .sjb-label {
    position: relative; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--medium-gray, var(--csbm-muted));
  }
  .sjb-label::after {
    content: ""; position: absolute; left: 0; bottom: -3px; width: 22px; height: 2px;
    background: var(--csbm-accent); transform: scaleX(0); transform-origin: left;
    transition: transform 180ms ease;
  }
  .sjb-field:hover .sjb-label::after,
  .sjb-field:focus-visible .sjb-label::after,
  .sjb-field.is-next .sjb-label::after { transform: scaleX(1); }
  .sjb-value { font-size: 16px; font-weight: 600; color: var(--csbm-ink-deep); line-height: 1.3; }
  .sjb-value.is-empty { color: var(--medium-gray, var(--csbm-muted)); font-weight: 500; }
  .sjb-ring {
    position: absolute; top: 6px; bottom: 6px; left: 0; width: 0;
    border-radius: 12px; background: var(--very-light-gray, var(--csbm-paper));
    box-shadow: inset 0 0 0 1.5px var(--base-color, var(--csbm-ink));
    opacity: 0; pointer-events: none; z-index: 0;
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 180ms ease;
  }
  .sjb-ring.is-on { opacity: 1; }
  .sjb-ring.no-anim { transition: none; }
  .sjb-nightsnote { color: var(--medium-gray, var(--csbm-muted)); font-weight: 500; margin-left: 6px; white-space: nowrap; }
  /* CTA verankert als volwaardige cel: volledige balkhoogte, geen zwevende knop */
  .sjb-action { padding-left: 6px; align-self: stretch; display: flex; }
  .sjb-action .sjb-cta { height: 100%; }
  .sjb-cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 26px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
    background: var(--base-color, var(--csbm-ink)); color: #fff; border: 1px solid var(--base-color, var(--csbm-ink));
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  /* 28-09: korte notatie vervangen door `background-color`. De korte notatie
     zet ook `background-image` en `background-size` terug op hun beginwaarde en
     wiste daarmee de gele veeg verderop in dit bestand. */
  .sjb-cta:not(.is-ghost):hover { background-color: var(--base-color, var(--csbm-ink)); border-color: transparent; }
  .sjb-cta.is-ghost:hover { border-color: var(--csbm-ink-soft); }
  .sjb-cta.is-ghost { background: transparent; color: var(--base-color, var(--csbm-ink)); }
  .sjb-cta.is-ghost:hover { background: var(--very-light-gray, var(--csbm-paper)); }
  .sjb-cta.is-ready-pulse { animation: sjb-ready 200ms cubic-bezier(0.2, 0.7, 0.3, 1); }

  .sjb-panel {
    position: absolute; bottom: calc(100% - 1px); left: 0; right: 0; z-index: 20;
    background: #fff; border: 1px solid rgba(var(--csbm-ink-rgb), 0.14); border-radius: 18px;
    padding: 22px 24px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 14px 40px rgba(0, 0, 0, 0.16);
    transform-origin: 50% 100%;
    transform: translateY(6px) scale(0.97); opacity: 0;
    transition: transform 160ms ease, opacity 160ms ease;
    pointer-events: none;
  }
  .sjb-panel.is-open {
    transform: none; opacity: 1; pointer-events: auto;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 240ms ease;
  }
  .sjb-panel--guests { left: auto; width: 340px; padding: 8px 22px 18px; }
  .sjb-cal-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; border-bottom: 1px solid rgba(var(--csbm-ink-rgb), 0.14);
  }
  .sjb-cal-title { font-family: var(--alt-font, serif); font-weight: 700; font-size: 18px; color: var(--csbm-ink-deep); }
  .sjb-hint { font-size: 13px; color: var(--medium-gray, var(--csbm-muted)); }
  .sjb-cal-nav { display: flex; align-items: center; gap: 16px; padding: 14px 0 10px; }
  .sjb-month-labels { flex: 1; display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
  .sjb-month-labels span { font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: var(--csbm-ink-deep); }
  .sjb-round {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(var(--csbm-ink-rgb), 0.2); border-radius: 999px; background: #fff;
    font-size: 16px; line-height: 1; cursor: pointer; color: var(--csbm-ink-deep); font-family: inherit;
  }
  .sjb-round:hover { background: var(--very-light-gray, var(--csbm-paper)); }
  .sjb-round[disabled] { opacity: .4; cursor: default; }
  .sjb-months { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
  .sjb-months.is-swap { animation: sjb-mswap 150ms ease-out; }
  .sjb-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
  .sjb-weekdays span {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--medium-gray, var(--csbm-muted)); text-align: center;
  }
  .sjb-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
  .sjb-day {
    height: 42px; border: 0; background: none; border-radius: 999px;
    font-family: inherit; font-weight: 500; font-size: 14px; color: var(--csbm-ink-deep); cursor: pointer;
  }
  .sjb-day:hover { background: var(--very-light-gray, var(--csbm-paper)); }
  .sjb-day.is-past { color: var(--csbm-line); cursor: default; }
  .sjb-day.is-past:hover { background: none; }
  .sjb-day.is-dim { color: var(--medium-gray, var(--csbm-muted)); }
  .sjb-day.is-today { box-shadow: inset 0 0 0 1px rgba(var(--csbm-ink-rgb), 0.35); }
  .sjb-day.in-range { background: var(--very-light-gray, var(--csbm-paper)); border-radius: 0; }
  .sjb-day.is-edge { background: var(--base-color, var(--csbm-ink)); color: #fff; font-weight: 600; border-radius: 999px; }
  .sjb-day.just-picked { animation: sjb-pop 150ms cubic-bezier(0.2, 0.7, 0.3, 1); }
  .sjb-day-blank { height: 42px; }
  .sjb-cal-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(var(--csbm-ink-rgb), 0.14);
  }
  .sjb-clear {
    border: 0; background: none; font-family: inherit; font-weight: 600; font-size: 14px;
    color: var(--csbm-ink-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  .sjb-foot-actions { display: flex; gap: 10px; }
  .sjb-cta--sm { min-height: 40px; padding: 0 18px; }
  .sjb-guest-row {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 0;
  }
  .sjb-guest-row + .sjb-guest-row { border-top: 1px solid rgba(var(--csbm-ink-rgb), 0.14); }
  .sjb-guest-title { font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: var(--csbm-ink-deep); }
  .sjb-stepper { display: flex; align-items: center; gap: 12px; }
  .sjb-count { font-weight: 600; font-size: 16px; min-width: 18px; text-align: center; }
  .sjb-guest-foot { display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid rgba(var(--csbm-ink-rgb), 0.14); }

  /* Stage Light: hero dimt, header wijkt; alles omkeerbaar via één klasse */
  #banner::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: rgba(var(--csbm-ink-deep-rgb), 0.32); opacity: 0; transition: opacity 250ms ease;
  }
  html.sjb-stage #banner::before { opacity: 1; }
  html.sjb-stage header { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {

  #sjb *, #sjb *::before, #sjb *::after, #banner::before { transition: none !important; animation: none !important; }
}


/* Op pagina's buiten home/rooms/facilities start de journey-bar verborgen en
   verschijnt hij pas wanneer "Check availability" / "Book online" wordt geklikt. */
#sjb.sjb-summon-hidden { display: none !important; }



/* === CSBM 2026-09-24: desktopopmaak van de journey bar herbruikt in de mobiele overlay ===
   De volledige visuele opmaak van #sjb stond in @media (min-width: 992px). Hieronder staan
   dezelfde regels, machinaal afgeleid uit dat blok en gescoped op .sjb-overlay, zodat de
   overlay er onder 992px net zo uitziet. Alleen selectors zijn geprefixt; geen waarde gewijzigd.
   De overlay-specifieke afwijkingen (1 kolom, panelen in de flow) staan hierna en winnen. */
.sjb-overlay #sjb {
  display: block; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    width: min(980px, calc(100vw - 280px)); z-index: 9000;
    font-family: var(--primary-font, sans-serif);
}

.sjb-overlay .sjb-tagline {
  margin-bottom: 130px;
}

.sjb-overlay .sjb-kicker {
  display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 8px 6px; color: #fff; font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

.sjb-overlay .sjb-kicker::before {
  content: ""; width: 22px; height: 3px; background: var(--csbm-accent);
}

.sjb-overlay .sjb-bar {
  position: relative;
    display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr auto; align-items: center;
    background: #fff; border: 1px solid rgba(var(--csbm-ink-rgb), 0.14); border-radius: 18px;
    padding: 6px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.sjb-overlay .sjb-divider {
  width: 1px; height: 34px; background: rgba(var(--csbm-ink-rgb), 0.14);
}

.sjb-overlay .sjb-field {
  position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 5px; padding: 12px 22px;
    border: 0; background: none; border-radius: 12px; text-align: left; cursor: pointer;
    font-family: inherit;
    transition: background-color 180ms ease;
}

.sjb-overlay .sjb-field:hover {
  background: var(--very-light-gray, var(--csbm-paper));
}

.sjb-overlay .sjb-field:active {
  transform: scale(0.99);
}

.sjb-overlay .sjb-label {
  position: relative; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--medium-gray, var(--csbm-muted));
}

.sjb-overlay .sjb-label::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 22px; height: 2px;
    background: var(--csbm-accent); transform: scaleX(0); transform-origin: left;
    transition: transform 180ms ease;
}

.sjb-overlay .sjb-field:hover .sjb-label::after, .sjb-overlay .sjb-field:focus-visible .sjb-label::after, .sjb-overlay .sjb-field.is-next .sjb-label::after {
  transform: scaleX(1);
}

.sjb-overlay .sjb-value {
  font-size: 16px; font-weight: 600; color: var(--csbm-ink-deep); line-height: 1.3;
}

.sjb-overlay .sjb-value.is-empty {
  color: var(--medium-gray, var(--csbm-muted)); font-weight: 500;
}

.sjb-overlay .sjb-ring {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0;
    border-radius: 12px; background: var(--very-light-gray, var(--csbm-paper));
    box-shadow: inset 0 0 0 1.5px var(--base-color, var(--csbm-ink));
    opacity: 0; pointer-events: none; z-index: 0;
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 180ms ease;
}

.sjb-overlay .sjb-ring.is-on {
  opacity: 1;
}

.sjb-overlay .sjb-ring.no-anim {
  transition: none;
}

.sjb-overlay .sjb-nightsnote {
  color: var(--medium-gray, var(--csbm-muted)); font-weight: 500; margin-left: 6px; white-space: nowrap;
}

.sjb-overlay .sjb-action {
  padding-left: 6px; align-self: stretch; display: flex;
}

.sjb-overlay .sjb-action .sjb-cta {
  height: 100%;
}

.sjb-overlay .sjb-cta {
  display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 26px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
    background: var(--base-color, var(--csbm-ink)); color: #fff; border: 1px solid var(--base-color, var(--csbm-ink));
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* 28-09: zie de toelichting bij `.sjb-cta:hover` hierboven. */
.sjb-overlay .sjb-cta:not(.is-ghost):hover {
  background-color: var(--base-color, var(--csbm-ink)); border-color: transparent;
}

.sjb-overlay .sjb-cta.is-ghost:hover { border-color: var(--csbm-ink-soft); }

.sjb-overlay .sjb-cta.is-ghost {
  background: transparent; color: var(--base-color, var(--csbm-ink));
}

.sjb-overlay .sjb-cta.is-ghost:hover {
  background: var(--very-light-gray, var(--csbm-paper));
}

.sjb-overlay .sjb-cta.is-ready-pulse {
  animation: sjb-ready 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjb-overlay .sjb-panel {
  position: absolute; bottom: calc(100% - 1px); left: 0; right: 0; z-index: 20;
    background: #fff; border: 1px solid rgba(var(--csbm-ink-rgb), 0.14); border-radius: 18px;
    padding: 22px 24px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 14px 40px rgba(0, 0, 0, 0.16);
    transform-origin: 50% 100%;
    transform: translateY(6px) scale(0.97); opacity: 0;
    transition: transform 160ms ease, opacity 160ms ease;
    pointer-events: none;
}

.sjb-overlay .sjb-panel.is-open {
  transform: none; opacity: 1; pointer-events: auto;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 240ms ease;
}

.sjb-overlay .sjb-panel--guests {
  left: auto; width: 340px; padding: 8px 22px 18px;
}

.sjb-overlay .sjb-cal-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; border-bottom: 1px solid rgba(var(--csbm-ink-rgb), 0.14);
}

.sjb-overlay .sjb-cal-title {
  font-family: var(--alt-font, serif); font-weight: 700; font-size: 18px; color: var(--csbm-ink-deep);
}

.sjb-overlay .sjb-hint {
  font-size: 13px; color: var(--medium-gray, var(--csbm-muted));
}

.sjb-overlay .sjb-cal-nav {
  display: flex; align-items: center; gap: 16px; padding: 14px 0 10px;
}

.sjb-overlay .sjb-month-labels {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; text-align: center;
}

.sjb-overlay .sjb-month-labels span {
  font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: var(--csbm-ink-deep);
}

.sjb-overlay .sjb-round {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(var(--csbm-ink-rgb), 0.2); border-radius: 999px; background: #fff;
    font-size: 16px; line-height: 1; cursor: pointer; color: var(--csbm-ink-deep); font-family: inherit;
}

.sjb-overlay .sjb-round:hover {
  background: var(--very-light-gray, var(--csbm-paper));
}

.sjb-overlay .sjb-round[disabled] {
  opacity: .4; cursor: default;
}

.sjb-overlay .sjb-months {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px;
}

.sjb-overlay .sjb-months.is-swap {
  animation: sjb-mswap 150ms ease-out;
}

.sjb-overlay .sjb-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px;
}

.sjb-overlay .sjb-weekdays span {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--medium-gray, var(--csbm-muted)); text-align: center;
}

.sjb-overlay .sjb-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0;
}

.sjb-overlay .sjb-day {
  height: 42px; border: 0; background: none; border-radius: 999px;
    font-family: inherit; font-weight: 500; font-size: 14px; color: var(--csbm-ink-deep); cursor: pointer;
}

.sjb-overlay .sjb-day:hover {
  background: var(--very-light-gray, var(--csbm-paper));
}

.sjb-overlay .sjb-day.is-past {
  color: var(--csbm-line); cursor: default;
}

.sjb-overlay .sjb-day.is-past:hover {
  background: none;
}

.sjb-overlay .sjb-day.is-dim {
  color: var(--medium-gray, var(--csbm-muted));
}

.sjb-overlay .sjb-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(var(--csbm-ink-rgb), 0.35);
}

.sjb-overlay .sjb-day.in-range {
  background: var(--very-light-gray, var(--csbm-paper)); border-radius: 0;
}

.sjb-overlay .sjb-day.is-edge {
  background: var(--base-color, var(--csbm-ink)); color: #fff; font-weight: 600; border-radius: 999px;
}

.sjb-overlay .sjb-day.just-picked {
  animation: sjb-pop 150ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.sjb-overlay .sjb-day-blank {
  height: 42px;
}

.sjb-overlay .sjb-cal-foot {
  display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(var(--csbm-ink-rgb), 0.14);
}

.sjb-overlay .sjb-clear {
  border: 0; background: none; font-family: inherit; font-weight: 600; font-size: 14px;
    color: var(--csbm-ink-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.sjb-overlay .sjb-foot-actions {
  display: flex; gap: 10px;
}

.sjb-overlay .sjb-cta--sm {
  min-height: 40px; padding: 0 18px;
}

.sjb-overlay .sjb-guest-row {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 0;
}

.sjb-overlay .sjb-guest-row + .sjb-guest-row {
  border-top: 1px solid rgba(var(--csbm-ink-rgb), 0.14);
}

.sjb-overlay .sjb-guest-title {
  font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: var(--csbm-ink-deep);
}

.sjb-overlay .sjb-stepper {
  display: flex; align-items: center; gap: 12px;
}

.sjb-overlay .sjb-count {
  font-weight: 600; font-size: 16px; min-width: 18px; text-align: center;
}

.sjb-overlay .sjb-guest-foot {
  display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid rgba(var(--csbm-ink-rgb), 0.14);
}


/* === CSBM 2026-09-24: mobiele overlay voor "Plan your stay" ===
   De journey bar staat onder 992px op display:none en helemaal onderaan de pagina.
   De mobiele knop "Book your stay" opent hem nu als overlay bovenop de pagina.
   Het bestaande #sjb-element wordt VERPLAATST (niet gekloond), dus dezelfde
   velden, kalender, gastenteller en SynXis-handoff; geen dubbele ID's. */
.sjb-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; }

.sjb-overlay[hidden] { display: none; }

.sjb-overlay__backdrop { position: absolute; inset: 0; background: rgba(var(--csbm-ink-deep-rgb), .55); }

.sjb-overlay__dialog {
  position: relative; z-index: 1; width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .28);
}

.sjb-overlay__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .12); flex: 0 0 auto;
}

.sjb-overlay__title {
  color: var(--csbm-ink); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}

.sjb-overlay__close {
  width: 44px; height: 44px; border: 0; background: none; border-radius: 50%;
  font-size: 26px; line-height: 1; color: var(--csbm-ink); cursor: pointer;
}

.sjb-overlay__close:focus-visible { outline: 2px solid var(--csbm-ink); outline-offset: 2px; }

.sjb-overlay__body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
}

.sjb-overlay #sjb,
.sjb-overlay .sjb-bar,
.sjb-overlay .sjb-panel {
  width: 100%; max-width: 100%; min-width: 0;
  margin-left: 0; margin-right: 0; left: auto; right: auto; transform: none;
}

.sjb-overlay #sjb { display: block; }

.sjb-overlay .sjb-kicker { display: none; }

.sjb-overlay .sjb-bar { grid-template-columns: 1fr; padding: 6px; border-radius: 16px; }

.sjb-overlay .sjb-divider,
.sjb-overlay .sjb-ring { display: none; }

.sjb-overlay .sjb-field { padding: 14px 18px; min-height: 58px; border-radius: 12px; }

.sjb-overlay .sjb-field + .sjb-field { border-top: 1px solid rgba(var(--csbm-ink-rgb), .12); }

.sjb-overlay .sjb-action { padding: 8px 8px 6px; }

.sjb-overlay .sjb-action .sjb-cta { width: 100%; min-height: 52px; }

.sjb-overlay .sjb-panel {
  position: static; margin-top: 10px; padding: 16px 14px 14px; border-radius: 16px;
}

.sjb-overlay .sjb-months { grid-template-columns: 1fr; gap: 18px 0; }

.sjb-overlay .sjb-month-labels { grid-template-columns: 1fr; }

.sjb-overlay .sjb-guest-foot { justify-content: stretch; }

.sjb-overlay .sjb-guest-foot .sjb-cta { width: 100%; }

body.sjb-overlay-open { overflow: hidden; }

/* De zwevende DayPass-launcher ligt anders over de CTA van de overlay heen. */



/* === CSBM 2026-09-25: leeftijd per kind in het gastenpaneel ===
   SynXis eist de leeftijden (parameter `childages`, pipe-gescheiden). Zonder
   leeftijd toont de engine "Please add the ages of your children" en geen prijs. */
.sjb-ages { display: grid; gap: 10px; margin-top: 4px; }

.sjb-ages[hidden] { display: none; }

.sjb-age-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.sjb-age-label { color: var(--csbm-ink); font-size: 14px; }

.sjb-age-select {
  flex: 0 0 140px; max-width: 55%; box-sizing: border-box;
  min-width: 118px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(var(--csbm-ink-rgb), .22); border-radius: 10px;
  background: #fff; color: var(--csbm-ink); font-family: inherit; font-size: 14px; cursor: pointer;
}

.sjb-age-select:focus-visible { outline: 2px solid var(--csbm-ink); outline-offset: 2px; }

.sjb-overlay .sjb-age-row { gap: 10px; }


/* === CSBM 2026-09-25: tabstrip Facilities ===
   Acht tabs werden in gelijke kolommen van 115–148px geperst; labels braken
   daardoor midden in het woord ("Swi mmi ng pool"), op álle breedtes tot en met
   1440px. Labels blijven nu op één regel en de strip scrollt horizontaal zodra
   ze niet passen. Iconen staan náást de tekst, niet in plaats daarvan: twee van
   de acht tabs zijn zwembaden, die zijn zonder woorden niet te onderscheiden. */
.sjb-tabstrip {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.sjb-tabstrip::-webkit-scrollbar { height: 4px; }

.sjb-tabstrip::-webkit-scrollbar-thumb { background: rgba(var(--csbm-ink-rgb), .22); border-radius: 4px; }

.sjb-tabstrip .nav-item { flex: 0 0 auto; scroll-snap-align: start; }

.sjb-tabstrip .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  padding-left: 18px;
  padding-right: 18px;
}

.sjb-tab-icon { font-size: 18px; line-height: 1; opacity: .75; }

.nav-link.active .sjb-tab-icon { opacity: 1; }

.sjb-tab-label { white-space: nowrap; }


/* === CSBM 2026-09-28: gele vulling bij hover op de knoppen ===
   De knop schildert zijn eigen vulling; er komt géén pseudo-element aan te pas
   en er wordt niet geclipt. Dat is bewust, en gemeten.

   Eerst geprobeerd: een `::before` met de gele vulling, `overflow: hidden` op de
   knop en een overstek van 1 tot 2px. Daar bleef een zichtbare rand omheen staan.
   Oorzaak: het thema geeft elke `.btn` een `border: 2px solid transparent`, en de
   achtergrondkleur van de knop loopt onder die rand door. `overflow` knipt af op
   de *padding*-rand, dus die strook van 2px bleef altijd zichtbaar, hoeveel
   overstek de vullaag ook kreeg. Meting op de echte knop (headless Chrome, 2x,
   telling van donkere pixels rond het gele vlak): `inset: -1px` → 3608 randpixels,
   `inset: -2px` → 3608, eigen achtergrond over de randbox → 0.

   Daarom `background-origin`/`background-clip: border-box`: de vulling loopt tot
   en met de buitenrand. De veeg gebeurt met een groeiende `background-size` en
   niet met `background-position`, omdat een procentuele positie rekent ten
   opzichte van *container min afbeelding*; bij een afbeelding die breder is dan
   de knop schuift een negatieve waarde dan juist de verkeerde kant op.

   De slagschaduw van `btn-box-shadow` blijft behouden (clippen zou die weghalen)
   en de tekstwissel van `btn-switch-text` blijft werken.
   De zwevende day-pass-knop blijft ongemoeid: die is zelf al
   geel en heeft al een eigen hover. */
.btn.btn-dark-gray,
.btn.btn-base-color,
.btn.btn-white,
.sjb-cta:not(.is-ghost),
.sjb-overlay .sjb-cta:not(.is-ghost) {
  /* `!important` is hier nodig, niet cosmetisch: het thema zet op knoppen met
     `btn-box-shadow` de korte notatie `background:` in hover- en active-regels
     (o.a. `.btn.btn-box-shadow.btn-dark-gray:hover`, specificiteit 0-4-0). Een
     korte notatie zet `background-image` en `background-size` terug op hun
     beginwaarde, waardoor de vulling verdween terwijl de tekstkleur wél omsloeg:
     donkere tekst op een donkere knop. Gemeten op index.html: `background-size`
     werd `auto` in plaats van `142% 100%`. */
  background-image: linear-gradient(90deg, var(--csbm-accent) 0 74%, rgba(var(--csbm-accent-rgb), 0) 100%) !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-position: left center !important;
  background-size: 0% 100% !important;
  transition: background-size 420ms cubic-bezier(.33, 0, .15, 1),
              color 180ms linear,
              transform 180ms ease,
              box-shadow 180ms ease;
}

.btn.btn-dark-gray:hover,
.btn.btn-dark-gray:focus-visible,
.btn.btn-base-color:hover,
.btn.btn-base-color:focus-visible,
.btn.btn-white:hover,
.btn.btn-white:focus-visible,
.sjb-cta:not(.is-ghost):hover,
.sjb-cta:not(.is-ghost):focus-visible,
.sjb-overlay .sjb-cta:not(.is-ghost):hover,
.sjb-overlay .sjb-cta:not(.is-ghost):focus-visible {
  background-size: 142% 100% !important;
  color: var(--csbm-ink) !important;
  border-color: transparent !important;
  transform: translateY(-2px);
}

.sjb-cta:not(.is-ghost):hover,
.sjb-overlay .sjb-cta:not(.is-ghost):hover { background-color: var(--base-color, var(--csbm-ink)); }


.btn.btn-dark-gray:active,
.btn.btn-base-color:active,
.btn.btn-white:active,
.sjb-cta:not(.is-ghost):active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {

  .btn.btn-dark-gray,
  .btn.btn-base-color,
  .btn.btn-white,
  .sjb-cta:not(.is-ghost) { transition-duration: 1ms; }
  .btn.btn-dark-gray:hover,
  .btn.btn-base-color:hover,
  .btn.btn-white:hover,
  .sjb-cta:not(.is-ghost):hover { transform: none; }
}

/* === CSBM 2026-10-02: "Plan your stay" as on the house model (Curaçao site, 01-10) ===
   Bar on the bottom edge (top corners round, bottom square) and the step button:
   two dashes + "Step 1 of 2 / Choose arrival" on paper until both dates are set,
   then solid ink "Check availability ->". Measured there: button min 228x60. */
@media (min-width: 992px) {
  #sjb { bottom: 0; }
  #sjb .sjb-bar { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
}
#sjb .sjb-action { align-items: center; padding-right: 4px; }
#sjb .sjb-action .sjb-cta--step { height: auto; min-height: 60px; }
#sjb .sjb-cta--step {
  position: relative; overflow: hidden; display: grid; align-items: center; justify-items: start;
  min-width: 228px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
#sjb .sjb-cta--step.is-ghost {
  background: var(--csbm-paper); border-color: rgba(var(--csbm-ink-rgb), .12); color: var(--csbm-ink);
}
#sjb .sjb-cta--step.is-ghost:hover { border-color: var(--csbm-ink-soft); }
#sjb .sjb-cta--step:not(.is-ghost) { background: var(--csbm-ink); border-color: var(--csbm-ink); color: #fff; }
#sjb .sjb-step-hint, #sjb .sjb-step-ready {
  grid-area: 1 / 1; display: flex; align-items: center; gap: 12px;
  transition: opacity 400ms cubic-bezier(.2,.7,.2,1), transform 400ms cubic-bezier(.2,.7,.2,1);
}
#sjb .sjb-step-ready { justify-self: center; gap: 10px; opacity: 0; transform: translateY(10px); }
#sjb .sjb-cta--step:not(.is-ghost) .sjb-step-hint { opacity: 0; transform: translateY(-10px); }
#sjb .sjb-cta--step:not(.is-ghost) .sjb-step-ready { opacity: 1; transform: none; }
#sjb .sjb-step-arrow { display: inline-block; transform: translateX(-8px); transition: transform 500ms cubic-bezier(.2,.7,.2,1) 150ms; }
#sjb .sjb-cta--step:not(.is-ghost) .sjb-step-arrow { transform: none; }
#sjb .sjb-step-dashes { display: flex; gap: 4px; }
#sjb .sjb-step-dashes i { display: block; width: 18px; height: 3px; border-radius: 999px;
  background: rgba(var(--csbm-ink-rgb), .18); transition: background-color 300ms ease; }
#sjb .sjb-cta--step[data-step="arrival"] .sjb-step-dashes i:first-child,
#sjb .sjb-cta--step[data-step="departure"] .sjb-step-dashes i { background: var(--csbm-ink); }
#sjb .sjb-step-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; line-height: 1.2; }
#sjb .sjb-step-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--csbm-muted); }
#sjb .sjb-step-text { font-size: 14px; font-weight: 600; color: var(--csbm-ink); }
@media (prefers-reduced-motion: reduce) {
  #sjb .sjb-step-hint, #sjb .sjb-step-ready, #sjb .sjb-step-arrow, #sjb .sjb-step-dashes i { transition: none; }
}

/* Scroll indicator visible in the hero too, as on the house model (Crafto shows it
   only after 200px of scroll). */
.scroll-progress { opacity: 1 !important; visibility: visible !important; }

/* Mobile overlay: an earlier block (summon variant) still gives `.sjb-overlay #sjb`
   position:fixed; bottom:24px, which lifted the bar out of the dialog (measured 02-10:
   dialog 99px high, bar above the viewport). In the overlay it flows. */
.sjb-overlay #sjb { position: static; bottom: auto; left: auto; transform: none; width: 100%; }

/* === CSBM 2026-10-02: USP row under the hero, as on the house model ===
   Measured there: band 70px top/bottom, 120px round icon box with a 53px line icon in
   the base colour, title 22px/400 (their serif; ours the brand sans — no font is
   guessed), sentence 18px/30px muted, 1px dividers at 20% of the base colour. */
.csbm-usps .csbm-usp-icon { font-size: 53px; color: var(--csbm-ink); }
.csbm-usps .csbm-usp-title { font-size: 22px; line-height: 30px; font-weight: 400; letter-spacing: 0;
    color: var(--csbm-ink); margin: 0 0 6px; font-family: var(--alt-font); }
.csbm-usps .feature-box-content p { font-size: 18px; line-height: 30px; color: var(--csbm-muted); }
.csbm-usps .csbm-usp-divider { border-color: rgba(var(--csbm-ink-rgb), .2) !important; }
@media (max-width: 991px) { .csbm-usps .csbm-usp-divider:nth-child(2n) { border-right: 0 !important; } }
@media (max-width: 767px) { .csbm-usps .csbm-usp-divider { border-right: 0 !important; } }

/* === CSBM 2026-10-02: highlights as flip cards, as on the house model ===
   Crafto's rotate-box-style-01 (engine). Back in ink, set on .back itself so the type sits
   on a measurable colour (tools/contrast.py), text #E6E8EE (≈ the model's white at 70%).
   Flips on hover (engine) and on keyboard focus of the label link (:focus-within, added). */
.csbm-highlights .csbm-hl-heading { color: var(--csbm-ink); letter-spacing: -2px; }
.csbm-highlights .csbm-hl-sub { color: var(--csbm-muted); }
.csbm-highlights .back { background-color: var(--csbm-ink); }
.csbm-highlights .csbm-hl-overlay { background: transparent; }
.csbm-highlights .csbm-hl-text { color: #E6E8EE; }
.csbm-highlights .csbm-hl-label { color: var(--csbm-ink); text-decoration: none; }
.csbm-highlights .csbm-hl-label:hover, .csbm-highlights .csbm-hl-label:focus-visible {
    text-decoration: underline; text-decoration-color: var(--csbm-tan); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.csbm-highlights .csbm-hl-label:focus-visible { outline: 2px solid var(--csbm-tan); outline-offset: 4px; border-radius: 2px; }
.csbm-highlights .rotate-box-style-01 .flipper:focus-within .front { transform: rotateY(-180deg); }
.csbm-highlights .rotate-box-style-01 .flipper:focus-within .back { transform: rotateY(0); }
@media (prefers-reduced-motion: reduce) {
    .csbm-highlights .rotate-box-style-01 .back, .csbm-highlights .rotate-box-style-01 .front { transition: none; }
    .csbm-highlights [data-bottom-top] { transform: none !important; }
}

/* === CSBM 2026-10-02: About block as on the house model ===
   Video 75% at 10:7 (as measured there), overlapping photo 55%, marquee of facts. Kicker
   in the readable accent (#836B56, tan itself carries no type), buttons in ink. */
/* Lighter band as on the model (measured: white, with its 325px tile carrying one 1px
   #ececec line in the middle). Redrawn as a CSS gradient — no file of theirs copied. */
.csbm-about, .csbm-band-lined { background-color: #fff;
    background-image: linear-gradient(to right, transparent 162px, #ececec 162px, #ececec 163px, transparent 163px);
    background-size: 325px 10px; background-position: center top; background-repeat: repeat; }
.csbm-about .csbm-about-kicker { color: var(--csbm-accent-text); }
.csbm-about .csbm-about-heading { color: var(--csbm-ink); }
.csbm-about .btn.btn-dark-gray { background-color: var(--csbm-ink); border-color: var(--csbm-ink); color: #fff; }
.csbm-about .btn.btn-dark-gray:hover { background-color: var(--csbm-ink-soft); border-color: var(--csbm-ink-soft); color: #fff; }
.csbm-about .csbm-about-phone a { color: var(--csbm-ink); text-decoration: none; }
.csbm-about .csbm-about-phone i { color: var(--csbm-muted); }
.csbm-about .csbm-about-video { aspect-ratio: 10 / 7; background: var(--csbm-ink-deep) var(--csbm-about-poster) center / cover no-repeat; }
.csbm-about .csbm-about-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.csbm-about .csbm-marquee-item { color: var(--csbm-ink); white-space: nowrap; }
.csbm-about .csbm-marquee-dot { border-color: var(--csbm-tan) !important; }
@media (prefers-reduced-motion: reduce) {
    .csbm-about .csbm-about-video video { display: none; }   /* poster stays as background */
    .csbm-about .marquee-slide { transform: none !important; transition: none !important; flex-wrap: wrap; justify-content: center; }
}

/* === CSBM 2026-10-02: room tabs as on the house model (Crafto tab-style-07) ===
   Their very-light-gray → our cream, base green → our ink, dark booking block → ink-deep. */
.csbm-rooms .csbm-rooms-row, .csbm-rooms .csbm-room-copy { background-color: var(--csbm-paper); }
.csbm-rooms .csbm-room-dot { background-color: var(--csbm-ink); color: #fff; }
.csbm-rooms .csbm-room-hover { background-color: var(--csbm-ink); }
.csbm-rooms .tab-style-07 .nav-link { color: var(--csbm-ink); }
.csbm-rooms .tab-style-07 .nav-link:hover, .csbm-rooms .tab-style-07 .nav-link.active { color: #fff; }
.csbm-rooms .tab-style-07 .nav-link:focus-visible { outline: 2px solid var(--csbm-tan); outline-offset: -4px; }
.csbm-rooms .csbm-room-book { background-color: var(--csbm-ink-deep); }
.csbm-rooms .csbm-room-book a { text-decoration: none; }
.csbm-rooms .csbm-room-book a:focus-visible { outline: 2px solid var(--csbm-tan); outline-offset: 6px; }
.csbm-rooms .csbm-room-nav { background-color: rgba(var(--csbm-ink-deep-rgb), .55); border: 0; }
.csbm-rooms .csbm-room-kicker { color: var(--csbm-accent-text); }
.csbm-rooms .csbm-room-name { color: var(--csbm-ink); }
.csbm-rooms .csbm-room-icon { color: var(--csbm-ink); }
.csbm-rooms .csbm-room-feat { color: var(--csbm-ink); }

/* === CSBM 2026-10-02: playful collage blocks (from the interim plan-B site) ===
   Teal block with the property motif (CONCEPT) behind the photos, a second photo that
   overlaps the main one, and a cream text card that cuts into the main photo — the
   "notch". Mirrored with .is-reverse. No type on the photos, so the card is measured on
   its own cream (tools/contrast.py). */
.csbm-collage .csbm-collage-media { padding: 90px 0 70px 70px; }
/* The block peeks out above and beside the main photo (outer side), so the motif shows. */
.csbm-collage .csbm-collage-accent {
    position: absolute; top: 0; left: 0; width: 44%; height: 64%; background: var(--csbm-teal); z-index: 0;
    display: flex; align-items: flex-start; justify-content: flex-start; padding: 22px 26px; }
.csbm-collage .csbm-collage-motif { color: var(--csbm-cream); width: 130px; display: block; }
.csbm-collage .csbm-collage-motif svg { width: 100%; height: auto; display: block; }
.csbm-collage .csbm-collage-main { position: relative; z-index: 1; width: 92%; }
.csbm-collage .csbm-collage-main img, .csbm-collage .csbm-collage-second img { width: 100%; height: auto; display: block; }
.csbm-collage .csbm-collage-second { position: absolute; z-index: 2; left: 6%; bottom: 0; width: 30%;
    border: 8px solid var(--csbm-paper); box-shadow: 0 18px 40px rgba(var(--csbm-ink-rgb), .14); }
.csbm-collage .csbm-collage-card { position: relative; z-index: 3; background: var(--csbm-paper); padding: 48px 44px; }
@media (min-width: 992px) {
    /* Starts lower than the photo, so only the photo's lower inner corner is cut away:
       an L-shaped notch, the photo's upper part keeps its full width. */
    .csbm-collage .csbm-collage-card { margin-left: -190px; margin-top: 200px; }
    .csbm-collage.is-reverse .csbm-collage-card { margin-left: 0; margin-right: -190px; }
}
/* mirrored: accent and second photo on the other side */
.csbm-collage.is-reverse .csbm-collage-media { padding: 90px 70px 70px 0; }
.csbm-collage.is-reverse .csbm-collage-accent { left: auto; right: 0; justify-content: flex-end; }
.csbm-collage.is-reverse .csbm-collage-main { margin-left: auto; }
.csbm-collage.is-reverse .csbm-collage-second { left: auto; right: 6%; }
.csbm-collage.is-reverse .csbm-collage-motif svg { transform: scaleX(-1); }
@media (max-width: 991px) {
    .csbm-collage .csbm-collage-main { width: 86%; }
    .csbm-collage .csbm-collage-media { padding: 56px 0 50px 36px; }
    .csbm-collage.is-reverse .csbm-collage-media { padding: 56px 36px 50px 0; }
    .csbm-collage .csbm-collage-card { padding: 32px 0 0; background: transparent; }
    .csbm-collage .csbm-collage-motif { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .csbm-collage [data-bottom-top] { transform: none !important; } }

/* === CSBM 2026-10-02: footer after the house model (Curaçao site) ===
   Light band with the same line pattern as About/Overview, logo centred, one address
   line, then © | legal | socials. Measured there: padding 90/50, legal 17px/600. */
.csbm-footer { background-color: var(--csbm-paper);
    background-image: linear-gradient(to right, transparent 162px, rgba(var(--csbm-ink-rgb), .07) 162px, rgba(var(--csbm-ink-rgb), .07) 163px, transparent 163px);
    background-size: 325px 10px; background-position: center top;
    color: var(--csbm-muted); padding: 90px 0 50px; border-top: 1px solid rgba(var(--csbm-ink-rgb), .08); }
.csbm-footer a { color: var(--csbm-ink); text-decoration: none; }
.csbm-footer a:hover, .csbm-footer a:focus-visible { color: var(--csbm-ink); text-decoration: underline; text-underline-offset: 4px; }
.csbm-footer-lockup img { height: 52px; width: auto; }
.csbm-footer-address { margin-top: 18px; color: var(--csbm-muted); }
.csbm-footer-sep { margin: 0 10px; }
.csbm-footer-bottom { margin-top: 56px; }
.csbm-footer-home { text-decoration: underline !important; text-underline-offset: 4px; font-weight: 600; }
.csbm-footer-legal { display: flex; justify-content: center; gap: 28px; padding: 0; list-style: none; }
.csbm-footer-legal .nav-link { padding: 0; color: var(--csbm-ink); }
.csbm-footer-social { display: inline-flex; gap: 26px; padding: 0; list-style: none; }   /* 05-10: 2 x 13px tap padding */
@media (max-width: 991px) {
    .csbm-footer { padding: 60px 0 36px; }
    .csbm-footer-bottom { row-gap: 26px; }   /* 05-10: stacked rows, 12px tap padding on both sides of each gap */
}
@media (max-width: 767px) {
    .csbm-footer { background-image: none; }   /* as the model: no line pattern on phones */
    .csbm-footer-bottom { margin-top: 36px; row-gap: 26px; }
}

/* "Plan your stay" docks as a full-width white strip once the footer is in view, as on
   the house model: the bar itself keeps its size, only its background grows to the
   edges (class set by assets/js/csbm.js). */
@media (min-width: 992px) {
    #sjb { transition: width .35s ease, background-color .35s ease, padding .35s ease; }
    #sjb.sjb-docked { width: 100vw; background: #fff; padding: 12px 0 14px;
        border-top: 1px solid rgba(var(--csbm-ink-rgb), .10); box-shadow: 0 -12px 32px rgba(0, 0, 0, .12); }
    #sjb.sjb-docked .sjb-kicker { margin-left: calc((100vw - min(980px, 100vw - 280px)) / 2 + 6px); }
    #sjb.sjb-docked .sjb-bar { width: min(980px, calc(100vw - 280px)); margin: 0 auto;
        border-color: transparent; box-shadow: none; }
    #sjb.sjb-docked .sjb-panel { left: 50%; right: auto; width: min(980px, calc(100vw - 280px));
        transform: translateX(-50%) translateY(6px) scale(.97); }
    #sjb.sjb-docked .sjb-panel.is-open { transform: translateX(-50%); }
    /* just enough room under the footer so the docked strip never covers it */
    body:has(#sjb:not([hidden])) { padding-bottom: 130px; }
}
@media (prefers-reduced-motion: reduce) { #sjb { transition: none; } }

/* === CSBM 2026-10-02: rooms page, after the house model's rooms page ===
   Measured there: title band 485px (h1 left, intro right), a cream strip with the room
   names, four amenity icons on the line pattern, then per room a cream text card (5/12)
   beside a photo slider (7/12), alternating, ~560px high. */
.csbm-pagetitle { min-height: 485px; display: flex; align-items: flex-end; padding: 150px 0 70px;
    background-color: var(--csbm-ink-deep); background-size: cover; background-position: center; isolation: isolate; }
.csbm-pagetitle-veil { position: absolute; inset: 0; z-index: 0;
    /* Measured against the brightest pixel (tools/scrim.py): room photos are white beds and
       walls, so the veil is heavier than the hero's and tinted ink-deep. */
    background: linear-gradient(180deg, rgba(var(--csbm-ink-deep-rgb), .50) 0%, rgba(var(--csbm-ink-deep-rgb), .68) 40%, rgba(var(--csbm-ink-deep-rgb), .70) 100%); }
.csbm-pagetitle > .container { z-index: 1; }
.csbm-pagetitle-kicker { display: block; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; margin-bottom: 10px; }
.csbm-pagetitle-heading { color: #fff; font-family: var(--alt-font); font-weight: 600; font-size: clamp(44px, 6vw, 80px);
    line-height: 1.02; letter-spacing: -.02em; }
.csbm-pagetitle-text { color: #fff; font-size: 18px; line-height: 1.6; }
@media (max-width: 991px) { .csbm-pagetitle { min-height: 420px; padding: 130px 0 50px; } }

.csbm-room-nav { background: var(--csbm-paper); border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .10); }
.csbm-room-nav-list { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.csbm-room-nav-list li { flex: 1 1 0; min-width: 150px; text-align: center; }
.csbm-room-nav-list li + li { border-left: 1px solid rgba(var(--csbm-ink-rgb), .14); }
.csbm-room-nav-list a { display: block; padding: 30px 12px; font-family: var(--alt-font); font-size: 19px; line-height: 1.3;
    color: var(--csbm-ink); text-decoration: none; }
.csbm-room-nav-list a:hover, .csbm-room-nav-list a:focus-visible { color: var(--csbm-accent-text); text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 991px) {
    .csbm-room-nav-list li { flex: 0 0 50%; min-width: 0; border-left: 0 !important; border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .08); }
    .csbm-room-nav-list a { padding: 16px 8px; font-size: 16px; }
}

.csbm-amenities { padding: 90px 0 70px; }
.csbm-amenity-icon { display: inline-block; font-size: 46px; color: var(--csbm-ink); margin-bottom: 18px; }
.csbm-amenity-title { font-family: var(--alt-font); font-size: 22px; font-weight: 600; color: var(--csbm-ink); margin-bottom: 6px; }
.csbm-amenity p { color: var(--csbm-muted); font-size: 15px; line-height: 1.6; max-width: 220px; margin-left: auto; margin-right: auto; }

.csbm-roomlist { padding-bottom: 60px; }
.csbm-roomcard { margin-bottom: 40px; background: var(--csbm-paper); scroll-margin-top: 90px; }
.csbm-roomcard-media { min-height: 560px; }
.csbm-roomcard-media .swiper { position: absolute; inset: 0; }
.csbm-roomcard > .csbm-roomcard-copy { padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; }
.csbm-roomcard-name { font-size: 40px; line-height: 1.1; margin-bottom: 16px; }
.csbm-roomcard-feats { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 4px 0 16px; list-style: none;
    font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--csbm-ink); }
.csbm-roomcard-feats i { font-size: 22px; margin-right: 8px; vertical-align: -4px; }
.csbm-roomcard-close { font-size: 14px; color: var(--csbm-muted); line-height: 1.6; }
.csbm-roomcard-cta { margin-top: 8px; }
.csbm-roomcard .csbm-roomcard-nav { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--csbm-ink); }
.csbm-roomcard .csbm-roomcard-nav::after { display: none; }
@media (max-width: 991px) {
    .csbm-roomcard-media { min-height: 300px; }
    .csbm-roomcard > .csbm-roomcard-copy { padding: 32px 24px 36px; }
    .csbm-roomcard-name { font-size: 32px; }
}

/* grid, not columns: the rows (and their hairlines) line up across both columns */
.csbm-inside-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 0; margin: 10px 0 0; list-style: none; }
.csbm-inside-list li { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .10); color: var(--csbm-ink); }
.csbm-inside-list i { color: var(--csbm-accent-text); margin-right: 10px; }
.csbm-inside-pet { background: #fff; padding: 44px 40px; border-top: 5px solid var(--csbm-tan); }
.csbm-inside-pet h3 { font-size: 28px; }
@media (max-width: 575px) { .csbm-inside-list { grid-template-columns: 1fr; } .csbm-inside-pet { padding: 32px 24px; } }

.csbm-contact-list { padding: 0; margin: 0; list-style: none; }
.csbm-contact-list li { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .12); font-size: 17px; }
.csbm-contact-label { flex: 0 0 140px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--csbm-accent-text); padding-top: 4px; }
.csbm-contact-list a { color: var(--csbm-ink); }
@media (max-width: 575px) { .csbm-contact-list li { flex-direction: column; gap: 4px; } }
.csbm-roomcard .csbm-roomcard-nav { position: absolute; top: 50%; margin-top: -25px; z-index: 2; display: flex; align-items: center; justify-content: center; }
.csbm-roomcard .csbm-roomcard-nav.swiper-button-prev { left: 20px; right: auto; }
.csbm-roomcard .csbm-roomcard-nav.swiper-button-next { right: 20px; left: auto; }

/* Rooms page (02-10): "Find your fit"-style statement and the collage checklist. */
.csbm-statement { padding: 110px 0; }
.csbm-statement-heading { font-size: clamp(34px, 4vw, 52px); line-height: 1.15; margin: 6px 0 20px; }
.csbm-statement-text { font-size: 19px; line-height: 1.65; color: var(--csbm-ink); }
.csbm-collage-list { padding: 0; margin: 6px 0 4px; list-style: none; }
.csbm-collage-list li { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .10); color: var(--csbm-ink); }
.csbm-collage-list li:last-child { border-bottom: 0; }
.csbm-collage-list i { color: var(--csbm-accent-text); margin-right: 12px; }
@media (min-width: 992px) {
    /* The card hangs from a fixed offset instead of being centred: a longer card (the
       rooms checklist) otherwise rises to the photo's top edge and the notch disappears. */
    .csbm-collage .row.align-items-center { align-items: flex-start !important; }
    .csbm-collage .csbm-collage-card { margin-top: 210px; }
}
/* As the model (sm-background-image-none): no line pattern on phones, where one line
   runs straight through centred copy. */
@media (max-width: 767px) { .csbm-about, .csbm-band-lined { background-image: none; } }

/* === CSBM 2026-10-02: about page, after the house model's facilities page === */
.csbm-intro-photos { padding: 100px 0 90px; }
.csbm-intro-text { line-height: 1.7; color: var(--csbm-ink); }
.csbm-introphoto img, .csbm-fac-photo img { width: 100%; height: auto; display: block; aspect-ratio: 833 / 450; object-fit: cover; }
.csbm-intro-photos .row-cols-md-3 > .col:nth-child(2) { margin-top: 40px; }   /* stepped row, as the model */
.csbm-facilities { padding: 100px 0; }
.csbm-fac-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 30px 0 50px; padding: 0;
    border-top: 1px solid rgba(var(--csbm-ink-rgb), .12); border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .12); }
.csbm-fac-tabs .nav-link { background: none; border: 0; border-top: 3px solid transparent; margin-top: -1px; padding: 20px 28px;
    font-size: 16px; font-weight: 600; color: var(--csbm-ink); display: inline-flex; align-items: center; gap: 10px; }
.csbm-fac-tabs .nav-link i { font-size: 22px; }
.csbm-fac-tabs .nav-link.active { border-top-color: var(--csbm-ink); }
.csbm-fac-tabs .nav-link:hover, .csbm-fac-tabs .nav-link:focus-visible { color: var(--csbm-accent-text); }
.csbm-fac-title { font-size: 40px; line-height: 1.1; margin: 4px 0 16px; }
.csbm-glance { padding: 110px 0; }
.csbm-glance-heading { font-size: clamp(28px, 3vw, 38px); line-height: 1.3; margin-bottom: 30px; }
.csbm-glance-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 0; margin: 0; list-style: none; }
.csbm-glance-list li { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .10); color: var(--csbm-ink); }
.csbm-glance-list i { color: var(--csbm-accent-text); margin-right: 12px; }
.csbm-glance-media { min-height: 460px; }
.csbm-glance-media img { width: 100%; height: auto; display: block; }
.csbm-glance-a { width: 85%; margin-left: auto; }
.csbm-glance-b { position: absolute; left: 0; bottom: 0; width: 55%; border: 8px solid #fff; box-shadow: 0 18px 40px rgba(var(--csbm-ink-rgb), .14); }
@media (max-width: 991px) {
    .csbm-intro-photos .row-cols-md-3 > .col:nth-child(2) { margin-top: 0; }
    .csbm-fac-tabs .nav-link { padding: 14px 16px; font-size: 15px; }
    .csbm-fac-title { font-size: 32px; }
    .csbm-glance-media { min-height: 380px; }
}
@media (max-width: 575px) { .csbm-glance-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .csbm-introphoto[data-bottom-top] { transform: none !important; } }
/* About intro: portrait pool video beside the photo row (house model facilities.html:176). */
.csbm-intro-video { border-radius: 6px; overflow: hidden; box-shadow: 0 24px 50px rgba(var(--csbm-ink-rgb), .16); }
.csbm-intro-video video { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; display: block; }
.csbm-intro-photos .col-lg-8 .row-cols-md-3 > .col:nth-child(2) { margin-top: 40px; }
@media (max-width: 991px) {
    .csbm-intro-video-col { max-width: 420px; margin: 0 auto; }
    .csbm-intro-photos .col-lg-8 .row-cols-md-3 > .col:nth-child(2) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .csbm-intro-video[data-bottom-top] { transform: none !important; } }

/* === CSBM 2026-10-02: offers page, after the house model's diving page === */
.csbm-statsband { padding: 130px 0 120px; background-color: var(--csbm-ink-deep); background-size: cover; background-position: center; isolation: isolate; }
.csbm-statsband > .container { z-index: 1; }
.csbm-statsband-heading { color: #fff; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.25; margin-bottom: 50px; }
.csbm-stat-value { display: block; color: #fff; font-family: var(--alt-font); font-weight: 600; font-size: clamp(48px, 6vw, 76px); line-height: 1; }
.csbm-stat-label { display: block; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-top: 10px; }
.csbm-offercard-media { min-height: 460px; background-size: cover; background-position: center; }
@media (max-width: 991px) { .csbm-offercard-media { min-height: 280px; } .csbm-statsband { padding: 90px 0 80px; } .csbm-stat-label { font-size: 12px; letter-spacing: .06em; } }

/* === CSBM 2026-10-03: gallery (engine portfolio filter + lightbox), house colours === */
.csbm-gallery { padding: 70px 0 90px; }
.csbm-gallery-filter { gap: 6px 4px; margin-bottom: 40px; padding: 0; }
.csbm-gallery-filter .nav > a, .csbm-gallery-filter li > a { display: inline-block; padding: 10px 20px; border-radius: 999px;
    font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--csbm-ink); border: 1px solid rgba(var(--csbm-ink-rgb), .18); text-decoration: none; }
.csbm-gallery-filter li.active > a { background: var(--csbm-ink); color: #fff; border-color: var(--csbm-ink); }
.csbm-gallery-filter li > a:hover, .csbm-gallery-filter li > a:focus-visible { border-color: var(--csbm-ink); }
.csbm-gallery-box { overflow: hidden; border-radius: 6px; }
.csbm-gallery-box a { display: block; }
.csbm-gallery-box img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.csbm-gallery-box a:hover img, .csbm-gallery-box a:focus-visible img { transform: scale(1.04); }
.csbm-gallery-box a:focus-visible { outline: 3px solid var(--csbm-tan); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .csbm-gallery-box img { transition: none; } }
/* the engine stacks .nav-tabs vertically on small screens; the filter chips wrap instead */
.csbm-gallery-filter { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; }
.csbm-gallery-filter > li { width: auto !important; margin: 0 !important; }
@media (max-width: 575px) { .csbm-gallery-filter li > a { padding: 8px 14px; font-size: 13px; } .csbm-gallery { padding: 40px 0 60px; } }

/* === CSBM 2026-10-03: explore (places near the hotel) === */
.csbm-places { padding: 70px 0 90px; }
.csbm-place { background: var(--csbm-paper); padding: 34px 32px 30px; height: 100%; border-top: 3px solid var(--csbm-tan); }
.csbm-place-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.csbm-place-icon { font-size: 30px; color: var(--csbm-ink); }
.csbm-place-name { font-size: 26px; line-height: 1.2; margin-bottom: 8px; }
.csbm-place-dist { font-size: 14px; color: var(--csbm-muted); margin-bottom: 12px; }
.csbm-place-dist strong { color: var(--csbm-ink); font-weight: 700; }
.csbm-place-text { font-size: 16px; line-height: 1.6; margin-bottom: 10px; }
.csbm-place-addr { font-size: 14px; color: var(--csbm-muted); margin-bottom: 16px; }
.csbm-place-link { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--csbm-ink);
    text-decoration: none; border-bottom: 2px solid var(--csbm-tan); padding-bottom: 3px; }
.csbm-place-link:hover, .csbm-place-link:focus-visible { color: var(--csbm-accent-text); }
@media (max-width: 991px) { .csbm-statement { padding: 70px 0 40px; } .csbm-places { padding-top: 30px; } }
/* explore: photo on top of each place card, with its licence credit */
.csbm-place { padding-top: 0; }
.csbm-place-photo { margin: 0 -32px 22px; }
.csbm-place-photo img { width: 100%; height: auto; aspect-ratio: 800 / 560; object-fit: cover; display: block; }
/* Licence credit behind an "i" (operator 03-10: the visible credit line was busy). It opens
   on hover, on focus (keyboard) and on tap (the button takes focus), so the attribution
   the licence requires stays one step away from the photo. */
.csbm-place-photo { position: relative; }
.csbm-credit { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-end; }
.csbm-credit-btn { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.92); color: var(--csbm-ink); font: italic 700 14px/26px Georgia, serif; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.csbm-credit-btn:focus-visible { outline: 2px solid var(--csbm-tan); outline-offset: 2px; }
.csbm-credit-tip { position: absolute; right: 0; bottom: 34px; width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 6px;
    background: var(--csbm-ink-deep); color: #fff; font-size: 12px; line-height: 1.45; text-align: left;
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.csbm-credit-tip a { color: #fff; text-decoration: underline; }
.csbm-credit:hover .csbm-credit-tip, .csbm-credit:focus-within .csbm-credit-tip { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .csbm-credit-tip { transition: none; } }
.csbm-place { border-top: 0; border-bottom: 3px solid var(--csbm-tan); }
/* explore (03-10): category as a tag on the photo; no icon row (it sat flush against the photo) */
.csbm-place-photo { margin: 0 -32px 24px; }
.csbm-place-tag { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px;
    background: #fff; color: var(--csbm-ink); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.csbm-place-dist { line-height: 1.5; } .csbm-place-text { margin-top: 4px; }

/* === CSBM 2026-10-03: FAQ (topic chips + native details accordion) === */
.csbm-faq { padding: 70px 0 100px; }
.csbm-faq-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0 0 60px; list-style: none; }
.csbm-faq-chips a { display: inline-block; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(var(--csbm-ink-rgb), .18);
    font-size: 14px; font-weight: 600; color: var(--csbm-ink); text-decoration: none; }
.csbm-faq-chips a:hover, .csbm-faq-chips a:focus-visible { background: var(--csbm-ink); color: #fff; border-color: var(--csbm-ink); }
.csbm-faq-group { padding: 40px 0; border-top: 1px solid rgba(var(--csbm-ink-rgb), .12); scroll-margin-top: 100px; }
.csbm-faq-topic { font-size: 30px; line-height: 1.2; position: sticky; top: 110px; }
.csbm-faq-item { border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .12); }
.csbm-faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 20px 0; cursor: pointer; font-size: 18px; font-weight: 600; color: var(--csbm-ink); }
.csbm-faq-item summary::-webkit-details-marker { display: none; }
.csbm-faq-item summary i { flex: 0 0 auto; font-size: 18px; color: var(--csbm-accent-text); transition: transform .2s ease; }
.csbm-faq-item[open] summary i { transform: rotate(45deg); }
.csbm-faq-item summary:focus-visible { outline: 2px solid var(--csbm-tan); outline-offset: 4px; }
.csbm-faq-item p { margin: 0 0 22px; padding-right: 40px; font-size: 16px; line-height: 1.7; }
@media (max-width: 991px) { .csbm-faq-topic { position: static; font-size: 26px; } .csbm-faq-item summary { font-size: 16px; } .csbm-faq-item p { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .csbm-faq-item summary i { transition: none; } }

/* === CSBM 2026-10-03: contact page (house model: three columns, then map) === */
.csbm-contact-cards { padding: 90px 0 80px; }
.csbm-contact-card { padding: 0 24px; }
.csbm-contact-card-title { font-family: var(--alt-font); font-size: 24px; font-weight: 600; padding-bottom: 14px; margin-bottom: 18px;
    border-bottom: 1px solid rgba(var(--csbm-ink-rgb), .2); }
.csbm-contact-card p { color: var(--csbm-ink); font-size: 16px; line-height: 1.7; }
.csbm-contact-card-big { display: inline-block; font-family: var(--alt-font); font-size: 26px; font-weight: 600; color: var(--csbm-ink); text-decoration: none; margin-bottom: 6px; }
.csbm-contact-card-link { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--csbm-ink);
    text-decoration: none; border-bottom: 2px solid var(--csbm-tan); padding-bottom: 3px; }
.csbm-contact-card-link:hover, .csbm-contact-card-big:hover { color: var(--csbm-accent-text); }
.csbm-map-link { display: block; position: relative; }
.csbm-map-link img { width: 100%; height: 460px; object-fit: cover; display: block; }
.csbm-map-cta { position: absolute; right: 20px; bottom: 20px; background: var(--csbm-ink); color: #fff; padding: 12px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.csbm-map-link:hover .csbm-map-cta, .csbm-map-link:focus-visible .csbm-map-cta { background: var(--csbm-ink-deep); }
.csbm-map-caption { font-size: 14px; color: var(--csbm-muted); margin: 12px 0 0; }
.csbm-map-attr { margin-left: 8px; }
.csbm-quick { padding: 100px 0; }
@media (max-width: 767px) { .csbm-map-link img { height: 320px; } .csbm-contact-cards { padding: 60px 0; } }

/* === CSBM 2026-10-03: legal pages (privacy, cookies) — plain title, reading column === */
.csbm-plaintitle { padding: 170px 0 50px; }
.csbm-plaintitle-heading { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; margin: 6px 0 12px; }
.csbm-plaintitle-text { color: var(--csbm-muted); font-size: 15px; }
.csbm-legal { padding-bottom: 100px; }
.csbm-legal-block { padding: 32px 0; border-top: 1px solid rgba(var(--csbm-ink-rgb), .12); }
.csbm-legal-block h2 { font-size: 26px; margin-bottom: 14px; }
.csbm-legal-block p { font-size: 17px; line-height: 1.75; color: var(--csbm-ink); margin-bottom: 10px; }
.csbm-legal-link { font-weight: 600; color: var(--csbm-ink); text-decoration: underline; text-underline-offset: 4px; margin-right: 18px; }
.csbm-legal-link:hover { color: var(--csbm-accent-text); }
@media (max-width: 991px) { .csbm-plaintitle { padding: 130px 0 40px; } }
/* Solid header (legal pages, no photo under it, 03-10): the engine's header-transparent
   rule inside a media query kept the links white on cream. */
header.csbm-header--solid .navbar .navbar-nav .nav-link, header.csbm-header--solid .csbm-lang { color: var(--csbm-ink) !important; }
header.csbm-header--solid .navbar-toggler-line { background-color: var(--csbm-ink) !important; }
header.csbm-header--solid .navbar { top: 0; }

/* Touch targets and no-JS tabs (Codex runtime review 05-10, contract criteria 8 and 12).
   The engine's toggler is a 22x14 box with its lines absolutely placed at top 0/6/12px;
   growing the box to 44px, pushing the lines down 15px and pulling the right edge out
   11px (the button is floated right) keeps the icon exactly where it was.
   The engine's `.center-logo .navbar-toggler{margin:31px 0}` shrinks by the same 15px
   so the docked bar keeps its height (footer links: see the second pass below).
   Without JavaScript Bootstrap never switches tabs, so every
   panel but the first was unreachable: there all panels simply stack. */
@media (max-width: 991px) {
    .csbm-header .navbar-toggler { width: 44px; height: 44px; }
    .csbm-header .center-logo .navbar-toggler { margin: 16px -11px 16px 0; }
    .csbm-header .navbar-toggler-line { margin-top: 15px; }
}
html:not(.js) .tab-content > .tab-pane { display: block; opacity: 1; }
/* The remaining small targets (05-10, second pass, all widths). The tap area reaches
   44px without moving anything. Inline links only get vertical padding: on an inline
   box that grows the hit area but not the line box. The two underlined uppercase links
   draw their underline as a border 3px below the text, so they only grow upwards.
   Boxes that were block or inline-block get padding and the same negative margin. The
   header icons and the photo-credit button keep their visible circle: the box grows,
   the background is clipped to the content and the credit button's shadow becomes a
   drop-shadow so it follows the circle. */
.csbm-hdr-icon { box-sizing: content-box; padding: 7px; margin: -7px; background-clip: content-box; }
.csbm-highlights .csbm-hl-label { padding: 7px 0; margin-top: 23px !important; margin-bottom: -7px; }  /* mt-30px minus the padding */
.csbm-legal-link { padding: 11px 0; }
.csbm-about .csbm-about-phone a { padding: 3px 0 19px; }   /* grows down: the button sits 3px above it */
.csbm-footer p a { padding: 12px 0; }
.csbm-footer-legal .nav-link { padding: 12px 0; margin: -12px 0; }
.csbm-footer-social a { padding: 12px 13px; margin: 0 -13px; }
.csbm-place-link, .csbm-contact-card-link { padding-top: 21px; }
.scroll-top { min-width: 44px; padding-left: 7px; padding-right: 7px; margin-right: -7px; }
.csbm-contact li a { padding: 7px 0; margin: -7px 0; }
.csbm-contact-card-big { padding: 7px 0; margin-top: -7px; margin-bottom: -1px; }  /* was margin-bottom 6px */
.csbm-credit-btn { box-sizing: content-box; padding: 9px; margin: -9px; background-clip: content-box;
    box-shadow: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }

/* "Plan your stay" in the colour of the top border (operator 05-10). The bar, the docked
   strip by the footer and the mobile overlay are tan; the calendar and guest panels stay
   white. Type on the tan is navy, not white: white measures 2.35:1 on #C7A283, navy
   4.83:1 and ink-deep higher still. The tan underline under a label would vanish on tan,
   so it turns navy as well. Hover and the moving ring keep their cream chip. */
#sjb .sjb-bar { background: var(--csbm-accent); border-color: transparent; }
#sjb.sjb-docked { background: var(--csbm-accent); border-top-color: transparent; }
#sjb.sjb-docked .sjb-kicker::before { background: var(--csbm-ink); }
#sjb .sjb-label,
#sjb .sjb-value.is-empty,
#sjb .sjb-nightsnote { color: var(--csbm-ink); }
#sjb .sjb-value { color: var(--csbm-ink-deep); }
#sjb .sjb-divider { background: rgba(var(--csbm-ink-rgb), .3); }
#sjb .sjb-label::after { background: var(--csbm-ink); }
.sjb-overlay .sjb-field + .sjb-field { border-top-color: rgba(var(--csbm-ink-rgb), .25); }

/* Home: the why-stay band is white and a moving wave carries it into the cream band of
   "Where the day takes you" (operator 05-10, after the Crafto yoga demo). Front layer is
   the paper of the band below, so the seam is invisible; the back layer is the line tone. */
.csbm-wave { height: 100px; background-color: #fff; }
.csbm-wave .shape-image-animation { top: 0; right: 0; }
.csbm-wave svg { display: block; }
.csbm-wave-back { fill: var(--csbm-line); }
.csbm-wave-front { fill: var(--csbm-paper); }

/* Home: why-stay band as photo cards (operator 05-10), after the Crafto corporate demo's
   "Corporate services" block (interactive-banner-style-09). White band (operator 05-10: flipped from navy),
   navy kicker pill, white card pills with ink-deep type (white instead of tan, fresher), cards at the model's 600x710 ratio.
   The engine dims .content-title to .6; on photography that loses contrast, so the card
   sentence stays at full white over a measured shade. Keyboard focus shows the hover state. */
.csbm-why { background-color: #fff; padding: 110px 0 50px; }
.csbm-why-kicker { display: inline-block; margin-bottom: 18px; padding: 0 22px; border-radius: 100px;
    background: var(--csbm-ink-deep); color: #fff; font-size: 13px; line-height: 38px;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.csbm-why-heading { color: var(--csbm-ink); font-family: var(--alt-font); letter-spacing: -1px; }
.csbm-why-intro { color: var(--csbm-muted); font-size: 18px; line-height: 30px; margin: 0; }
.csbm-why-navs { gap: 10px; }
.csbm-why-nav { width: 52px; height: 52px; margin: 0; color: var(--csbm-ink); background: transparent;
    border: 1px solid rgba(var(--csbm-ink-rgb), .3); font-size: 22px; display: inline-flex;
    align-items: center; justify-content: center; }
.csbm-why-nav:hover, .csbm-why-nav:focus-visible { background: var(--csbm-ink); color: #fff; border-color: var(--csbm-ink); }
.csbm-why-nav:focus-visible { outline: 2px solid var(--csbm-accent); outline-offset: 3px; }
.csbm-why-nav::after { display: none; }
.csbm-why-nav.swiper-button-disabled { opacity: .35; }
.csbm-why-nav.swiper-button-lock { display: none; }
.csbm-why-slider { overflow: visible; }
.csbm-why-card { aspect-ratio: 600 / 710; border-radius: 6px; background: var(--csbm-ink); }
.csbm-why-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csbm-why-shade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(var(--csbm-ink-deep-rgb), .92) 0%, rgba(var(--csbm-ink-deep-rgb), .55) 38%, rgba(var(--csbm-ink-deep-rgb), 0) 65%); }
.csbm-why-card .image-content { padding: 30px 26px; }
.csbm-why-label { background: #fff; color: var(--csbm-ink-deep); border-radius: 30px;
    padding: 0 18px; font-size: 12px; line-height: 30px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.csbm-why-foot { padding-right: 0; }
.csbm-why-title { color: #fff; font-family: var(--alt-font); font-size: 21px; line-height: 28px; font-weight: 600;
    letter-spacing: 0; margin: 0 0 6px; }
.csbm-why-card .csbm-why-text { color: #fff; opacity: 1; font-size: 15px; line-height: 23px; margin: 0; }
.csbm-why-more { color: #fff; font-size: 13px; line-height: 24px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.csbm-why-card .content-arrow { width: 50px; height: 50px; line-height: 50px; color: var(--csbm-ink-deep); font-size: 15px; }
.csbm-why-overlay { background: linear-gradient(to top, rgba(var(--csbm-ink-rgb), .96) 0%, rgba(var(--csbm-ink-rgb), .55) 100%); }
.csbm-why-card .image-content:focus-within .content-arrow { opacity: 1; transform: translateY(-42%); }
.csbm-why-card .image-content:focus-within .content-title { opacity: 0; visibility: hidden; transform: translateY(-20px); }
.csbm-why-card .image-content:focus-within .content-title-hover { visibility: visible; transform: translateY(-3px); }
.csbm-why-card .image-content:focus-within .box-overlay { opacity: 1; visibility: visible; }
.csbm-why-card .image-content:focus-within .hover-label-icon .label { opacity: 0; margin-top: -20px; }
.csbm-why-card .image-content:focus-within .hover-label-icon i { opacity: 1; top: 0; }
.csbm-why-card a:focus-visible { outline: 3px solid var(--csbm-accent); outline-offset: -3px; border-radius: 6px; }
@media (max-width: 991px) { .csbm-why { padding: 80px 0 60px; } }
@media (max-width: 767px) { .csbm-why { padding: 64px 0 64px; } .csbm-why-card .image-content { padding: 26px 24px; } }
@media (prefers-reduced-motion: reduce) { .csbm-why-card > img, .csbm-why-card .image-content * { transition: none !important; } }

/* Home, Honey's (operator 05-10): white band to separate it from the rooms above, a big
   decorative word sunk into the bottom of the band (after the Crafto yoga demo's "Premium
   facility") and a wave into the navy groups band below. The word is decoration only:
   aria-hidden, a tint barely off the white, behind the content. */
.csbm-band-white { background-color: #fff; }
.csbm-collage.has-bigword { position: relative; overflow: hidden; z-index: 0; }
@media (min-width: 768px) { .csbm-collage.has-bigword { padding-bottom: calc(var(--csbm-collage-pb, 90px) + 100px); } }
.csbm-bigword { position: absolute; left: 0; right: 0; bottom: 8px; z-index: -1; pointer-events: none;
    text-align: center; white-space: nowrap; font-family: var(--alt-font); font-size: 225px; line-height: 1;
    letter-spacing: -8px; color: #F2EDE5; }
/* the wave runs over the foot of the word, as in the model: it overlaps the band's last
   100px with a transparent top */
@media (max-width: 1199px) { .csbm-bigword { font-size: 190px; bottom: 10px; } }
@media (max-width: 991px)  { .csbm-bigword { font-size: 150px; bottom: 14px; letter-spacing: -5px; } }
.csbm-wave--to-ink { background-color: transparent; margin-top: -100px; z-index: 1; }
.csbm-wave--to-ink .csbm-wave-back { fill: var(--csbm-teal); }
.csbm-wave--to-ink .csbm-wave-front { fill: var(--csbm-ink); }

/* 404 (06-10): the navy title band without a photo (.csbm-pagetitle already falls back to
   ink-deep), then three ways back. */
.csbm-notfound { padding: 90px 0 110px; }
.csbm-notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.csbm-notfound-links .btn { margin: 0; min-width: 150px; }
.csbm-notfound-es { color: var(--csbm-ink); text-decoration: underline; text-underline-offset: 4px; padding: 12px 0; }