/* ============================================================================
   corendon-beach-plaza.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. Structure and
   components are the house model shared with Corendon South Beach Miami
   (operator 03-10: same method, Sonesta = reference); only tokens differ.

   Palette: sampled from the supplied lockups dated 2026-09-22
   (beach-plaza-miami/inbox/raw/1. Logo's/PNG): dark green #1a383e,
   beige #d9cdb6, copper #ce7b41 (full-colour lockup). Same values as the
   earlier website-m2 build recorded in its evidence map. Derived tints are
   marked as derived; nothing else is guessed.

   Typography: Open Sans, SIL OFL 1.1, self-hosted (operator 03-10: same as
   South Beach). The brand package contains no fonts; the wordmark is used as
   supplied artwork only and is never re-set in a font.
   ========================================================================= */

/* ---------------------------------------------------------------- 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 */
    --cbp-navy:        #1A383E;
    --cbp-navy-rgb:    26, 56, 62;
    --cbp-tan:         #CE7B41;
    --cbp-tan-rgb:     206, 123, 65;
    --cbp-cream:       #F7F3EC;
    --cbp-cream-rgb:   247, 243, 236;
    --cbp-teal:        #D9CDB6;
    --cbp-teal-rgb:    217, 205, 182;

    /* role aliases — the stay planner and the components below use these */
    --cbp-ink:          var(--cbp-navy);
    --cbp-ink-rgb:      var(--cbp-navy-rgb);
    --cbp-ink-soft:     #2A4E56;
    --cbp-ink-deep:     #10262B;
    --cbp-ink-deep-rgb: 16, 38, 43;
    --cbp-paper:        var(--cbp-cream);
    --cbp-paper-rgb:    var(--cbp-cream-rgb);
    --cbp-accent:       var(--cbp-tan);
    --cbp-accent-rgb:   var(--cbp-tan-rgb);
    /* The brand copper measures 2.91:1 on the 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 75% of the value: 4.78:1
       on the paper, measured, not estimated. A brand colour that fails is still a failure. */
    --cbp-accent-text:  #9B5C31;
    --cbp-muted:        #5F6470;
    --cbp-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:            #1A383E;
    --dark-gray:             #1A383E;
    --medium-gray:           #5F6470;
    --extra-medium-gray:     #E4DED5;
    --light-medium-gray:     #EFE9E0;
    --very-light-gray:       #F7F3EC;
    --spring-wood:           #F7F3EC;
}

/* --- 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/cbp.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(--cbp-paper);
    color: var(--cbp-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. */
.cbp-kicker {
    display: inline-block;
    color: var(--cbp-accent-text);
    font-size: 13px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    margin-bottom: 14px;
}
.cbp-kicker--on-dark { color: var(--cbp-teal); }

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

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

/* Skip link — visible the moment it takes focus. */
.cbp-skip {
    position: absolute; left: -9999px; top: 0; z-index: 10000;
    background: var(--cbp-ink); color: #fff; padding: 12px 20px; font-weight: 600;
}
.cbp-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(--cbp-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. */
.cbp-header { position: relative; z-index: 30; }
.cbp-header--over-hero { position: absolute; inset: 0 0 auto 0; }
.cbp-header--over-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(var(--cbp-ink-deep-rgb), .82) 0%,
                                           rgba(var(--cbp-ink-deep-rgb), .55) 55%,
                                           rgba(var(--cbp-ink-deep-rgb), 0) 100%);
    height: 210px;
}
.cbp-header .navbar { padding: 10px 0; }
.cbp-header .container-fluid { padding-left: 40px; padding-right: 40px; }
.cbp-lang { text-decoration: none; white-space: nowrap; }
.cbp-logo { height: 40px; width: auto; display: block; }
.cbp-logo--dark { display: none; }
.cbp-header .navbar-nav .nav-link { padding: 10px 16px; font-size: 15px; white-space: nowrap; }
/* The header CTA never breaks over two lines (Sonesta §0u). */
.cbp-header .cbp-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. */
.cbp-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) { .cbp-header .header-top-bar + .navbar { top: 32px; } }
@media (max-width: 991px) { .cbp-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. */
.cbp-hero-accent { border-top: 5px solid var(--cbp-ink); }  /* navy, operator 06-10 (was copper) */
.cbp-header--over-hero::before { top: 5px; }
.cbp-header--solid .header-top-bar { border-bottom-color: var(--cbp-line); }
.cbp-header .header-top-bar > .container-fluid { padding-left: 40px; padding-right: 40px; }
.cbp-header.sticky .header-top-bar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.cbp-lang-menu { position: relative; }
.cbp-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; }
.cbp-lang-menu summary::-webkit-details-marker { display: none; }
.cbp-lang-menu summary .bi { font-size: 10px; transition: transform .2s ease; }
.cbp-lang-menu[open] summary .bi { transform: rotate(180deg); }
.cbp-lang-menu summary:focus-visible { outline: 2px solid var(--cbp-tan); outline-offset: 2px; }
.cbp-lang-menu img, .cbp-lang-mobile img { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.cbp-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(--cbp-ink-rgb), .18); z-index: 50; }
.cbp-lang-menu li a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px;
    color: var(--cbp-ink); text-decoration: none; font-weight: 600; }
.cbp-lang-menu li a:hover, .cbp-lang-menu li a:focus-visible { background: rgba(var(--cbp-tan-rgb), .22); }
.cbp-lang-menu li a[aria-current] { box-shadow: inset 2px 0 0 var(--cbp-tan); }
.cbp-lang-name { font-weight: 400; margin-left: auto; color: var(--cbp-muted); }
.cbp-header--over-hero .cbp-lang-menu summary { color: #fff; }
.cbp-header--solid .cbp-lang-menu summary { color: var(--cbp-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. */
.cbp-header .navbar.center-logo .navbar-nav .nav-link { padding: 10px 10px; }
.cbp-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. */
    .cbp-header .navbar.center-logo .navbar-left,
    .cbp-header .navbar.center-logo .navbar-right { width: calc(50% - 118px); }
    .cbp-header .navbar.center-logo .cbp-logo { height: 40px; }
}
.cbp-header .cbp-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(.cbp-header, .cbp-roomcard) .btn.cbp-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(--cbp-ink) !important; color: #fff !important; border-color: transparent !important;
    background-image: linear-gradient(90deg, var(--cbp-tan) 0 74%, rgba(var(--cbp-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(.cbp-header, .cbp-roomcard) .btn.cbp-cta-header:hover,
:is(.cbp-header, .cbp-roomcard) .btn.cbp-cta-header:focus-visible {
    background-size: 142% 100% !important; color: var(--cbp-ink-deep) !important; transform: translateY(-2px);
}
:is(.cbp-header, .cbp-roomcard) .btn.cbp-cta-header:focus-visible { outline: 2px solid var(--cbp-tan); outline-offset: 3px; }
:is(.cbp-header, .cbp-roomcard) .btn.cbp-cta-header:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    :is(.cbp-header, .cbp-roomcard) .btn.cbp-cta-header { transition-duration: 1ms; }
    :is(.cbp-header, .cbp-roomcard) .btn.cbp-cta-header:hover { transform: none; }
}

/* Collapsed menu: the left and right lists read as one list (no gap between them). */
@media (max-width: 991px) {
    .cbp-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. */
.cbp-nav-mobile { padding: 14px 0 6px; border-top: 1px solid var(--cbp-line); margin-top: 8px; }
.cbp-lang-row { display: flex; gap: 10px; margin-bottom: 12px; }
.cbp-lang-mobile { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 4px;
    color: var(--cbp-ink); text-decoration: none; font-weight: 600; border: 1px solid var(--cbp-line); }
.cbp-lang-mobile[aria-current] { border-color: var(--cbp-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. */
.cbp-header .navbar-nav .nav-link { position: relative; }
.cbp-header .navbar-nav .nav-link::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px;
    background: var(--cbp-tan); transform: scaleX(0); transform-origin: left center;
    transition: transform .25s ease;
}
.cbp-header .navbar-nav .nav-link:hover::after,
.cbp-header .navbar-nav .nav-link:focus-visible::after,
.cbp-header .navbar-nav .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.cbp-lang:hover, .cbp-lang:focus-visible { text-decoration: underline; text-decoration-color: var(--cbp-tan);
    text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Location + phone as icons after Contact (Sonesta §0x): 44x44 target, details in
   aria-label/title. Shown from 1440px: 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: 1439px) { .cbp-hdr-contact { display: none !important; } }  /* 1439 (03-10): with both icons the gap at 1366 was 1px */
.cbp-hdr-contact { gap: 2px; margin-left: 6px; }
.cbp-hdr-icon { display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; font-size: 16px; text-decoration: none;  /* 44px target (Codex M03 03-10) */
    color: inherit; transition: background-color .2s ease; }
.cbp-hdr-icon:hover { background-color: rgba(var(--cbp-tan-rgb), .28); }
.cbp-hdr-icon:focus-visible { outline: 2px solid var(--cbp-tan); outline-offset: 2px; }
.cbp-header--over-hero .cbp-hdr-icon { color: #fff; }
.cbp-header--over-hero.sticky .cbp-hdr-icon,
.cbp-header--solid .cbp-hdr-icon { color: var(--cbp-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) {
    .cbp-header .navbar.center-logo .navbar-nav .nav-link { padding-left: 8px; padding-right: 8px; }
    .cbp-header .navbar.center-logo .navbar-nav .nav-link::after { left: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .cbp-header .navbar-nav .nav-link::after, .cbp-hdr-icon { transition: none; }
}

/* over the hero: light type on the video */
.cbp-header--over-hero .nav-link,
.cbp-header--over-hero .cbp-lang { color: #fff; }
.cbp-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. */
.cbp-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(--cbp-paper);
    border-bottom: 1px solid var(--cbp-line);
    box-shadow: 0 6px 24px rgba(var(--cbp-ink-rgb), .07);
}
.cbp-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/cbp.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(--cbp-ink); text-shadow: none; }
#sjb .sjb-kicker.is-on-dark { color: #fff; text-shadow: none; }
.cbp-header--over-hero.sticky .nav-link,
.cbp-header--over-hero.sticky .cbp-lang { color: var(--cbp-ink); }
.cbp-header--over-hero.sticky .navbar-toggler-line { background-color: var(--cbp-ink); }
.cbp-header--over-hero.sticky .cbp-logo--light { display: none; }
.cbp-header--over-hero.sticky .cbp-logo--dark { display: block; }

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

@media (max-width: 991px) {
    .cbp-header--over-hero .navbar-collapse { background: var(--cbp-paper); padding: 16px 20px; margin-top: 10px; }
    .cbp-header--over-hero .navbar-collapse .nav-link,
    .cbp-header--over-hero .navbar-collapse .cbp-lang { color: var(--cbp-ink); }
    .cbp-logo { height: 32px; }
    .cbp-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(--cbp-ink-deep); }
#banner .cbp-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 .cbp-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background-color: rgba(0, 0, 0, var(--cbp-hero-veil, .45));  /* .45 for this property (03-10): its hero video has brighter frames; at .38 the kicker measured 4.08:1 */
}
#banner > .container { position: relative; z-index: 2; }
#banner .cbp-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). */
.cbp-hero-kicker, .cbp-hero-title { text-shadow: 0 0 100px rgba(0, 0, 0, .9); color: #fff; }
.cbp-hero-kicker { font-size: 20px; line-height: 1.2; font-weight: 400; letter-spacing: -.01em; margin: 0 0 5px; }
.cbp-hero-title { font-size: 140px; line-height: 1; font-weight: 600; letter-spacing: -6px; margin: 0 0 25px; }
.cbp-hero-payoff { font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: .01em; margin: 0 0 40px; }
@media (max-width: 1199px) { .cbp-hero-title { font-size: 120px; } }
@media (max-width: 991px)  { .cbp-hero-title { font-size: 110px; letter-spacing: -4px; } }
@media (max-width: 767px)  { .cbp-hero-title { font-size: min(90px, 15vw); margin-bottom: 15px; } .cbp-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 .cbp-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)  { .cbp-hero-title { font-size: min(70px, 14.5vw); letter-spacing: -2px; } }
.cbp-hero-payoff u,
.cbp-hero-underline {
    text-decoration: none;
    box-shadow: inset 0 -.38em 0 rgba(var(--cbp-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 .cbp-hero-video { display: none; }
    #banner { background-image: var(--cbp-hero-poster);
              background-size: cover; background-position: center; background-repeat: no-repeat; }
}
.cbp-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(--cbp-ink-deep-rgb), .45); color: #fff; line-height: 1;
}

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

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

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

.cbp-tile figure { aspect-ratio: 4 / 3; position: relative; }
.cbp-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. */
.cbp-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(--cbp-ink-deep-rgb), .92) 0%,
                                        rgba(var(--cbp-ink-deep-rgb), .74) 55%,
                                        rgba(var(--cbp-ink-deep-rgb), .68) 100%);
    transition: background .3s ease;
}
.cbp-tile:hover figcaption, .cbp-tile:focus-within figcaption {
    background: linear-gradient(to top, rgba(var(--cbp-ink-deep-rgb), .94) 0%,
                                        rgba(var(--cbp-ink-deep-rgb), .70) 60%,
                                        rgba(var(--cbp-ink-deep-rgb), .64) 100%);
}
.cbp-tile figure > img { transition: transform .6s ease; }
.cbp-tile:hover figure > img { transform: scale(1.04); }
.cbp-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(--cbp-ink-deep-rgb), .8);
}
.cbp-tile-eyebrow::after {
    content: ""; display: block; width: 28px; height: 2px; margin: 8px auto 0;
    background: var(--cbp-tan);
}
.cbp-tile h3, .cbp-tile-note { text-shadow: 0 1px 12px rgba(var(--cbp-ink-deep-rgb), .75); }
.cbp-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. */
.cbp-tile-link i { transition: transform .3s ease; }
.cbp-tile:hover .cbp-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. */
.cbp-tile-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.cbp-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(--cbp-ink); border-color: var(--cbp-ink); color: #fff; }
.btn.btn-base-color:hover { background-color: var(--cbp-ink-soft); border-color: var(--cbp-ink-soft); color: #fff; }
.btn.btn-outline-ink { border: 1px solid var(--cbp-ink); color: var(--cbp-ink); background: transparent; }
.btn.btn-outline-ink:hover { background: var(--cbp-ink); color: #fff; }

/* ---------------------------------------------------------------- 7. footer */
.cbp-footer { background: var(--cbp-ink); color: rgba(255,255,255,.86); }
.cbp-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.cbp-footer a:hover { color: #fff; text-decoration: underline; }
.cbp-footer h2 { color: #fff; }
.cbp-footer-lockup img { height: 44px; width: auto; }
.cbp-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(--cbp-ink), geel var(--cbp-accent), licht var(--cbp-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(--cbp-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(--cbp-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(--cbp-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(--cbp-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(--cbp-muted));
  }
  .sjb-label::after {
    content: ""; position: absolute; left: 0; bottom: -3px; width: 22px; height: 2px;
    background: var(--cbp-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(--cbp-ink-deep); line-height: 1.3; }
  .sjb-value.is-empty { color: var(--medium-gray, var(--cbp-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(--cbp-paper));
    box-shadow: inset 0 0 0 1.5px var(--base-color, var(--cbp-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(--cbp-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(--cbp-ink)); color: #fff; border: 1px solid var(--base-color, var(--cbp-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(--cbp-ink)); border-color: transparent; }
  .sjb-cta.is-ghost:hover { border-color: var(--cbp-ink-soft); }
  .sjb-cta.is-ghost { background: transparent; color: var(--base-color, var(--cbp-ink)); }
  .sjb-cta.is-ghost:hover { background: var(--very-light-gray, var(--cbp-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(--cbp-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(--cbp-ink-rgb), 0.14);
  }
  .sjb-cal-title { font-family: var(--alt-font, serif); font-weight: 700; font-size: 18px; color: var(--cbp-ink-deep); }
  .sjb-hint { font-size: 13px; color: var(--medium-gray, var(--cbp-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(--cbp-ink-deep); }
  .sjb-round {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(var(--cbp-ink-rgb), 0.2); border-radius: 999px; background: #fff;
    font-size: 16px; line-height: 1; cursor: pointer; color: var(--cbp-ink-deep); font-family: inherit;
  }
  .sjb-round:hover { background: var(--very-light-gray, var(--cbp-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(--cbp-muted)); text-align: center;
  }
  .sjb-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
  .sjb-day {
    height: 44px; border: 0; background: none; border-radius: 999px;  /* 44 (Codex N01 03-10) */
    font-family: inherit; font-weight: 500; font-size: 14px; color: var(--cbp-ink-deep); cursor: pointer;
  }
  .sjb-day:hover { background: var(--very-light-gray, var(--cbp-paper)); }
  .sjb-day.is-past { color: var(--cbp-line); cursor: default; }
  .sjb-day.is-past:hover { background: none; }
  .sjb-day.is-dim { color: var(--medium-gray, var(--cbp-muted)); }
  .sjb-day.is-today { box-shadow: inset 0 0 0 1px rgba(var(--cbp-ink-rgb), 0.35); }
  .sjb-day.in-range { background: var(--very-light-gray, var(--cbp-paper)); border-radius: 0; }
  .sjb-day.is-edge { background: var(--base-color, var(--cbp-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(--cbp-ink-rgb), 0.14);
  }
  .sjb-clear {
    border: 0; background: none; font-family: inherit; font-weight: 600; font-size: 14px;
    color: var(--cbp-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(--cbp-ink-rgb), 0.14); }
  .sjb-guest-title { font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: var(--cbp-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(--cbp-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(--cbp-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(--cbp-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(--cbp-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(--cbp-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(--cbp-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(--cbp-muted));
}

.sjb-overlay .sjb-label::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 22px; height: 2px;
    background: var(--cbp-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(--cbp-ink-deep); line-height: 1.3;
}

.sjb-overlay .sjb-value.is-empty {
  color: var(--medium-gray, var(--cbp-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(--cbp-paper));
    box-shadow: inset 0 0 0 1.5px var(--base-color, var(--cbp-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(--cbp-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(--cbp-ink)); color: #fff; border: 1px solid var(--base-color, var(--cbp-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(--cbp-ink)); border-color: transparent;
}

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

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

.sjb-overlay .sjb-cta.is-ghost:hover {
  background: var(--very-light-gray, var(--cbp-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(--cbp-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(--cbp-ink-rgb), 0.14);
}

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

.sjb-overlay .sjb-hint {
  font-size: 13px; color: var(--medium-gray, var(--cbp-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(--cbp-ink-deep);
}

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

.sjb-overlay .sjb-round:hover {
  background: var(--very-light-gray, var(--cbp-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(--cbp-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(--cbp-ink-deep); cursor: pointer;
}

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

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

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

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

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

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

.sjb-overlay .sjb-day.is-edge {
  background: var(--base-color, var(--cbp-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(--cbp-ink-rgb), 0.14);
}

.sjb-overlay .sjb-clear {
  border: 0; background: none; font-family: inherit; font-weight: 600; font-size: 14px;
    color: var(--cbp-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(--cbp-ink-rgb), 0.14);
}

.sjb-overlay .sjb-guest-title {
  font-family: var(--alt-font, serif); font-weight: 700; font-size: 16px; color: var(--cbp-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(--cbp-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(--cbp-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(--cbp-ink-rgb), .12); flex: 0 0 auto;
}

.sjb-overlay__title {
  color: var(--cbp-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(--cbp-ink); cursor: pointer;
}

.sjb-overlay__close:focus-visible { outline: 2px solid var(--cbp-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(--cbp-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(--cbp-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(--cbp-ink-rgb), .22); border-radius: 10px;
  background: #fff; color: var(--cbp-ink); font-family: inherit; font-size: 14px; cursor: pointer;
}

.sjb-age-select:focus-visible { outline: 2px solid var(--cbp-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(--cbp-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(--cbp-accent-text) 0 74%, rgba(155, 92, 49, 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: #fff !important;  /* white on the readable copper #9B5C31 = 5.29:1; ink on #CE7B41 was 3.89:1 (Codex N04 03-10) */
  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(--cbp-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(--cbp-paper); border-color: rgba(var(--cbp-ink-rgb), .12); color: var(--cbp-ink);
}
#sjb .sjb-cta--step.is-ghost:hover { border-color: var(--cbp-ink-soft); }
#sjb .sjb-cta--step:not(.is-ghost) { background: var(--cbp-ink); border-color: var(--cbp-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(--cbp-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(--cbp-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(--cbp-muted); }
#sjb .sjb-step-text { font-size: 14px; font-weight: 600; color: var(--cbp-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. */
.cbp-usps .cbp-usp-icon { font-size: 53px; color: var(--cbp-ink); }
.cbp-usps .cbp-usp-title { font-size: 22px; line-height: 30px; font-weight: 400; letter-spacing: 0;
    color: var(--cbp-ink); margin: 0 0 6px; font-family: var(--alt-font); }
.cbp-usps .feature-box-content p { font-size: 18px; line-height: 30px; color: var(--cbp-muted); }
.cbp-usps .cbp-usp-divider { border-color: rgba(var(--cbp-ink-rgb), .2) !important; }
@media (max-width: 991px) { .cbp-usps .cbp-usp-divider:nth-child(2n) { border-right: 0 !important; } }
@media (max-width: 767px) { .cbp-usps .cbp-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). */
.cbp-highlights .cbp-hl-heading { color: var(--cbp-ink); letter-spacing: -2px; }
.cbp-highlights .cbp-hl-sub { color: var(--cbp-muted); }
.cbp-highlights .back { background-color: var(--cbp-ink); }
.cbp-highlights .cbp-hl-overlay { background: transparent; }
.cbp-highlights .cbp-hl-text { color: #E6E8EE; }
.cbp-highlights .cbp-hl-label { color: var(--cbp-ink); text-decoration: none; }
.cbp-highlights .cbp-hl-label:hover, .cbp-highlights .cbp-hl-label:focus-visible {
    text-decoration: underline; text-decoration-color: var(--cbp-tan); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cbp-highlights .cbp-hl-label:focus-visible { outline: 2px solid var(--cbp-tan); outline-offset: 4px; border-radius: 2px; }
.cbp-highlights .rotate-box-style-01 .flipper:focus-within .front { transform: rotateY(-180deg); }
.cbp-highlights .rotate-box-style-01 .flipper:focus-within .back { transform: rotateY(0); }
@media (prefers-reduced-motion: reduce) {
    .cbp-highlights .rotate-box-style-01 .back, .cbp-highlights .rotate-box-style-01 .front { transition: none; }
    .cbp-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. */
.cbp-about, .cbp-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; }
.cbp-about .cbp-about-kicker { color: var(--cbp-accent-text); }
.cbp-about .cbp-about-heading { color: var(--cbp-ink); }
.cbp-about .btn.btn-dark-gray { background-color: var(--cbp-ink); border-color: var(--cbp-ink); color: #fff; }
.cbp-about .btn.btn-dark-gray:hover { background-color: var(--cbp-ink-soft); border-color: var(--cbp-ink-soft); color: #fff; }
.cbp-about .cbp-about-phone a { color: var(--cbp-ink); text-decoration: none; }
.cbp-about .cbp-about-phone i { color: var(--cbp-muted); }
.cbp-about .cbp-about-video { aspect-ratio: 10 / 7; background: var(--cbp-ink-deep) var(--cbp-about-poster) center / cover no-repeat; }
.cbp-about .cbp-about-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cbp-about .cbp-about-photo { aspect-ratio: 10 / 7; }
.cbp-about .cbp-about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cbp-about .cbp-marquee-item { color: var(--cbp-ink); white-space: nowrap; }
.cbp-about .cbp-marquee-dot { border-color: var(--cbp-tan) !important; }
@media (prefers-reduced-motion: reduce) {
    .cbp-about .cbp-about-video video { display: none; }   /* poster stays as background */
    .cbp-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. */
.cbp-rooms .cbp-rooms-row, .cbp-rooms .cbp-room-copy { background-color: var(--cbp-paper); }
.cbp-rooms .cbp-room-dot { background-color: var(--cbp-ink); color: #fff; }
.cbp-rooms .cbp-room-hover { background-color: var(--cbp-ink); }
.cbp-rooms .tab-style-07 .nav-link { color: var(--cbp-ink); }
.cbp-rooms .tab-style-07 .nav-link:hover, .cbp-rooms .tab-style-07 .nav-link.active { color: #fff; }
.cbp-rooms .tab-style-07 .nav-link:focus-visible { outline: 2px solid var(--cbp-tan); outline-offset: -4px; }
.cbp-rooms .cbp-room-book { background-color: var(--cbp-ink-deep); }
.cbp-rooms .cbp-room-book a { text-decoration: none; }
.cbp-rooms .cbp-room-book a:focus-visible { outline: 2px solid var(--cbp-tan); outline-offset: 6px; }
.cbp-rooms .cbp-room-nav { background-color: rgba(var(--cbp-ink-deep-rgb), .55); border: 0; }
.cbp-rooms .cbp-room-kicker { color: var(--cbp-accent-text); }
.cbp-rooms .cbp-room-name { color: var(--cbp-ink); }
.cbp-rooms .cbp-room-icon { color: var(--cbp-ink); }
.cbp-rooms .cbp-room-feat { color: var(--cbp-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). */
.cbp-collage .cbp-collage-media { padding: 90px 0 70px 70px; }
/* The block peeks out above and beside the main photo (outer side), so the motif shows. */
.cbp-collage .cbp-collage-accent {
    position: absolute; top: 0; left: 0; width: 44%; height: 64%; background: var(--cbp-teal); z-index: 0;
    display: flex; align-items: flex-start; justify-content: flex-start; padding: 22px 26px; }
.cbp-collage .cbp-collage-motif { color: var(--cbp-cream); width: 130px; display: block; }
.cbp-collage .cbp-collage-motif svg { width: 100%; height: auto; display: block; }
.cbp-collage .cbp-collage-main { position: relative; z-index: 1; width: 92%; }
.cbp-collage .cbp-collage-main img, .cbp-collage .cbp-collage-second img { width: 100%; height: auto; display: block; }
.cbp-collage .cbp-collage-second { position: absolute; z-index: 2; left: 6%; bottom: 0; width: 30%;
    border: 8px solid var(--cbp-paper); box-shadow: 0 18px 40px rgba(var(--cbp-ink-rgb), .14); }
.cbp-collage .cbp-collage-card { position: relative; z-index: 3; background: var(--cbp-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. */
    .cbp-collage .cbp-collage-card { margin-left: -190px; margin-top: 200px; }
    .cbp-collage.is-reverse .cbp-collage-card { margin-left: 0; margin-right: -190px; }
}
/* mirrored: accent and second photo on the other side */
.cbp-collage.is-reverse .cbp-collage-media { padding: 90px 70px 70px 0; }
.cbp-collage.is-reverse .cbp-collage-accent { left: auto; right: 0; justify-content: flex-end; }
.cbp-collage.is-reverse .cbp-collage-main { margin-left: auto; }
.cbp-collage.is-reverse .cbp-collage-second { left: auto; right: 6%; }
.cbp-collage.is-reverse .cbp-collage-motif svg { transform: scaleX(-1); }
@media (max-width: 991px) {
    .cbp-collage .cbp-collage-main { width: 86%; }
    .cbp-collage .cbp-collage-media { padding: 56px 0 50px 36px; }
    .cbp-collage.is-reverse .cbp-collage-media { padding: 56px 36px 50px 0; }
    .cbp-collage .cbp-collage-card { padding: 32px 0 0; background: transparent; }
    .cbp-collage .cbp-collage-motif { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .cbp-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. */
.cbp-footer { background-color: var(--cbp-paper);
    background-image: linear-gradient(to right, transparent 162px, rgba(var(--cbp-ink-rgb), .07) 162px, rgba(var(--cbp-ink-rgb), .07) 163px, transparent 163px);
    background-size: 325px 10px; background-position: center top;
    color: var(--cbp-muted); padding: 90px 0 50px; border-top: 1px solid rgba(var(--cbp-ink-rgb), .08); }
.cbp-footer a { color: var(--cbp-ink); text-decoration: none; }
.cbp-footer a:hover, .cbp-footer a:focus-visible { color: var(--cbp-ink); text-decoration: underline; text-underline-offset: 4px; }
.cbp-footer-lockup img { height: 52px; width: auto; }
.cbp-footer-address { margin-top: 18px; color: var(--cbp-muted); }
.cbp-footer-sep { margin: 0 10px; }
.cbp-footer-bottom { margin-top: 56px; }
.cbp-footer-home { text-decoration: underline !important; text-underline-offset: 4px; font-weight: 600; }
.cbp-footer-legal { display: flex; justify-content: center; gap: 28px; padding: 0; list-style: none; }
.cbp-footer-legal .nav-link { padding: 0; color: var(--cbp-ink); }
.cbp-footer-social { display: inline-flex; gap: 18px; padding: 0; list-style: none; }
@media (max-width: 991px) {
    .cbp-footer { padding: 60px 0 36px; }
}
@media (max-width: 767px) {
    .cbp-footer { background-image: none; }   /* as the model: no line pattern on phones */
    .cbp-footer-bottom { margin-top: 36px; row-gap: 14px; }
}

/* "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/cbp.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(--cbp-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. */
.cbp-pagetitle { min-height: 485px; display: flex; align-items: flex-end; padding: 150px 0 70px;
    background-color: var(--cbp-ink-deep); background-size: cover; background-position: center; isolation: isolate; }
.cbp-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(--cbp-ink-deep-rgb), .50) 0%, rgba(var(--cbp-ink-deep-rgb), .68) 40%, rgba(var(--cbp-ink-deep-rgb), .70) 100%); }
.cbp-pagetitle > .container { z-index: 1; }
.cbp-pagetitle-kicker { display: block; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; margin-bottom: 10px; }
.cbp-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; }
.cbp-pagetitle-text { color: #fff; font-size: 18px; line-height: 1.6; }
@media (max-width: 991px) { .cbp-pagetitle { min-height: 420px; padding: 130px 0 50px; } }

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

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

.cbp-roomlist { padding-bottom: 60px; }
.cbp-roomcard { margin-bottom: 40px; background: var(--cbp-paper); scroll-margin-top: 90px; }
.cbp-roomcard-media { min-height: 560px; }
.cbp-roomcard-media .swiper { position: absolute; inset: 0; }
.cbp-roomcard > .cbp-roomcard-copy { padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; }
.cbp-roomcard-name { font-size: 40px; line-height: 1.1; margin-bottom: 16px; }
.cbp-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(--cbp-ink); }
.cbp-roomcard-feats i { font-size: 22px; margin-right: 8px; vertical-align: -4px; }
.cbp-roomcard-close { font-size: 14px; color: var(--cbp-muted); line-height: 1.6; }
.cbp-roomcard-cta { margin-top: 8px; }
.cbp-roomcard .cbp-roomcard-nav { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--cbp-ink); }
.cbp-roomcard .cbp-roomcard-nav::after { display: none; }
@media (max-width: 991px) {
    .cbp-roomcard-media { min-height: 300px; }
    .cbp-roomcard > .cbp-roomcard-copy { padding: 32px 24px 36px; }
    .cbp-roomcard-name { font-size: 32px; }
}

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

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

/* Rooms page (02-10): "Find your fit"-style statement and the collage checklist. */
.cbp-statement { padding: 110px 0; }
.cbp-statement-heading { font-size: clamp(34px, 4vw, 52px); line-height: 1.15; margin: 6px 0 20px; }
.cbp-statement-text { font-size: 19px; line-height: 1.65; color: var(--cbp-ink); }
.cbp-collage-list { padding: 0; margin: 6px 0 4px; list-style: none; }
.cbp-collage-list li { display: flex; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(var(--cbp-ink-rgb), .10); color: var(--cbp-ink); }
.cbp-collage-list li:last-child { border-bottom: 0; }
.cbp-collage-list i { color: var(--cbp-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. */
    .cbp-collage .row.align-items-center { align-items: flex-start !important; }
    .cbp-collage .cbp-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) { .cbp-about, .cbp-band-lined { background-image: none; } }

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

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

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

/* === CSBM 2026-10-03: explore (places near the hotel) === */
.cbp-places { padding: 70px 0 90px; }
.cbp-place { background: var(--cbp-paper); padding: 34px 32px 30px; height: 100%; border-top: 3px solid var(--cbp-tan); }
.cbp-place-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cbp-place-icon { font-size: 30px; color: var(--cbp-ink); }
.cbp-place-name { font-size: 26px; line-height: 1.2; margin-bottom: 8px; }
.cbp-place-dist { font-size: 14px; color: var(--cbp-muted); margin-bottom: 12px; }
.cbp-place-dist strong { color: var(--cbp-ink); font-weight: 700; }
.cbp-place-text { font-size: 16px; line-height: 1.6; margin-bottom: 10px; }
.cbp-place-addr { font-size: 14px; color: var(--cbp-muted); margin-bottom: 16px; }
.cbp-place-link { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cbp-ink);
    text-decoration: none; border-bottom: 2px solid var(--cbp-tan); padding-bottom: 3px; }
.cbp-place-link:hover, .cbp-place-link:focus-visible { color: var(--cbp-accent-text); }
@media (max-width: 991px) { .cbp-statement { padding: 70px 0 40px; } .cbp-places { padding-top: 30px; } }
/* explore: photo on top of each place card, with its licence credit */
.cbp-place { padding-top: 0; }
.cbp-place-photo { margin: 0 -32px 22px; }
.cbp-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. */
.cbp-place-photo { position: relative; }
.cbp-credit { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-end; }
/* 44x44 hit area around a 26px disc (Codex E01 03-10): the padding is clickable, the
   background is clipped to the content box so the mark looks the same. */
.cbp-credit-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 9px; margin: -9px; cursor: pointer;
    background: rgba(255,255,255,.92); background-clip: content-box; color: var(--cbp-ink);
    font: italic 700 14px/26px Georgia, serif; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.cbp-credit-btn:focus-visible { outline: 2px solid var(--cbp-tan); outline-offset: 2px; }
.cbp-credit-tip { position: absolute; right: 0; bottom: 34px; width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 6px;
    background: var(--cbp-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; }
.cbp-credit-tip a { color: #fff; text-decoration: underline; }
.cbp-credit:hover .cbp-credit-tip, .cbp-credit:focus-within .cbp-credit-tip { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .cbp-credit-tip { transition: none; } }
.cbp-place { border-top: 0; border-bottom: 3px solid var(--cbp-tan); }
/* explore (03-10): category as a tag on the photo; no icon row (it sat flush against the photo) */
.cbp-place-photo { margin: 0 -32px 24px; }
.cbp-place-tag { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px;
    background: #fff; color: var(--cbp-ink); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cbp-place-dist { line-height: 1.5; } .cbp-place-text { margin-top: 4px; }

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

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

/* === CSBM 2026-10-03: legal pages (privacy, cookies) — plain title, reading column === */
.cbp-plaintitle { padding: 170px 0 50px; }
.cbp-plaintitle-heading { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; margin: 6px 0 12px; }
.cbp-plaintitle-text { color: var(--cbp-muted); font-size: 15px; }
.cbp-legal { padding-bottom: 100px; }
.cbp-legal-block { padding: 32px 0; border-top: 1px solid rgba(var(--cbp-ink-rgb), .12); }
.cbp-legal-block h2 { font-size: 26px; margin-bottom: 14px; }
.cbp-legal-block p { font-size: 17px; line-height: 1.75; color: var(--cbp-ink); margin-bottom: 10px; }
.cbp-legal-link { font-weight: 600; color: var(--cbp-ink); text-decoration: underline; text-underline-offset: 4px; margin-right: 18px; }
.cbp-legal-link:hover { color: var(--cbp-accent-text); }
@media (max-width: 991px) { .cbp-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.cbp-header--solid .navbar .navbar-nav .nav-link, header.cbp-header--solid .cbp-lang { color: var(--cbp-ink) !important; }
header.cbp-header--solid .navbar-toggler-line { background-color: var(--cbp-ink) !important; }
header.cbp-header--solid .navbar { top: 0; }


/* ------------------------------------------------- without JavaScript (Codex M02/H01 03-10)
   Bootstrap's collapse and tabs need JavaScript. Without it the mobile menu could not open
   and five of six room panels on the home page stayed hidden. In that state the menu is
   simply shown open (the toggler, which would do nothing, is hidden), every room panel is
   shown in sequence (the tab list still works as anchors), and the gallery filter, whose
   buttons would do nothing, is hidden while all photos stay visible. */
@media (max-width: 991px) {
    html:not(.js) .cbp-header .navbar-collapse.collapse { display: block !important; height: auto !important; visibility: visible !important; }
    html:not(.js) .cbp-header .navbar-toggler { display: none !important; }
    html:not(.js) .cbp-header--over-hero .navbar { background-color: var(--cbp-ink-deep); }
}
html:not(.js) #rooms .tab-content > .tab-pane { display: block !important; opacity: 1 !important; height: auto; }
html:not(.js) #rooms .tab-content > .tab-pane + .tab-pane { border-top: 1px solid var(--cbp-line); }
html:not(.js) .portfolio-filter { display: none !important; }


/* ------------------------------------------------- Codex round 2 (03-10): targets + focus
   N01: every shared control gets a 44px box (the glyph stays the same size).
   N03: the menu button gets its own visible focus ring; the engine's toggler rule wins the
        cascade over the generic a/button:focus-visible rule above.
   M02: without JavaScript the open menu sits in the flow and pushes the page down instead
        of lying over the first heading. */
.cbp-header .navbar-toggler { min-width: 44px; min-height: 44px; padding: 15px 11px; box-sizing: border-box; }
.cbp-header .navbar-toggler:focus-visible { outline: 3px solid var(--cbp-accent) !important; outline-offset: 2px; box-shadow: none !important; border-radius: 4px; }
.cbp-footer a, .cbp-footer-legal .nav-link, .cbp-footer-social a { display: inline-flex; align-items: center; min-height: 44px; }
.cbp-footer-social a { min-width: 44px; justify-content: center; }
.cbp-hl-label { display: inline-flex; align-items: center; min-height: 44px; }
[data-sjb-months] .sjb-day { width: 100%; min-width: 44px; min-height: 44px; }
@media (max-width: 991px) {
    html:not(.js) .cbp-header { position: relative !important; }
    html:not(.js) .cbp-header .navbar { position: relative !important; }
    html:not(.js) .cbp-header .navbar-collapse { position: static !important; max-height: none !important; box-shadow: none; }
    html:not(.js) .cbp-plaintitle { padding-top: 40px; }   /* the 130px only made room for a fixed bar */
}

/* Codex round 3 (03-10), N01 remainder: the planner's month arrows, guest steppers, footer
   actions and the lightbox close button get a 44px box too. Placed last and scoped to beat
   both the base and the .sjb-overlay variants. */
.sjb-round, .sjb-overlay .sjb-round { width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; }
.sjb-cta--sm, .sjb-overlay .sjb-cta--sm { min-height: 44px !important; }
.sjb-clear, .sjb-overlay .sjb-clear { min-height: 44px !important; display: inline-flex; align-items: center; }
.mfp-close, button.mfp-close { width: 44px !important; height: 44px !important; line-height: 44px !important; }

/* Codex round 3b (03-10). N02: the CTA column is wider than its button and, on ES at 1440,
   its empty part lay over the phone icon; only the button itself takes clicks now.
   N01: every standalone link or control gets a 44px box. Inline links inside running text
   are not touched by this block. */
.cbp-nav-actions { pointer-events: none; }
.cbp-nav-actions a, .cbp-nav-actions button { pointer-events: auto; }
.scroll-progress .scroll-top { min-width: 44px; min-height: 44px; display: inline-flex; flex-direction: column; align-items: center; }
.cbp-about-phone a,
.cbp-contact-list a, .cbp-contact-list .cbp-contact-book,
.cbp-contact-card-link, .cbp-contact-card-big,
.cbp-place-link, .cbp-legal-link, .cbp-map-link .cbp-map-cta,
.cbp-roomcard-cta a, .cbp-tile-link { display: inline-flex; align-items: center; min-height: 44px; }
.cbp-credit-tip a { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }  /* own 44px box, no negative margin: wrapped links must not overlap (Codex 3c) */

/* === CBP 2026-10-06: "Plan your stay" in navy, like the top border (operator 06-10: top
   border and planner from copper to navy; copper stays as a small accent). The bar, the
   docked strip by the footer and the mobile overlay are navy #1A383E with white type
   (white 12:1; the labels at 78% white still clear 8:1). The calendar and guest panels
   stay white. Hover and the moving ring were a cream chip — white type on cream is
   unreadable — so on navy they are a light white tint. The label underline and the
   kicker stroke stay copper (accent). The step button's ready state ("Check availability")
   was solid navy and would vanish on a navy bar: it is copper with ink-deep type
   (4.90:1, measured), so the action keeps the accent. === */
#sjb .sjb-bar { background: var(--cbp-ink); border-color: transparent; }
#sjb.sjb-docked { background: var(--cbp-ink); border-top-color: transparent; }
#sjb.sjb-docked .sjb-kicker { color: #fff; text-shadow: none; }
#sjb .sjb-label,
#sjb .sjb-value.is-empty,
#sjb .sjb-nightsnote { color: rgba(255, 255, 255, .78); }
#sjb .sjb-value { color: #fff; }
#sjb .sjb-divider { background: rgba(255, 255, 255, .2); }
#sjb .sjb-field:hover { background: rgba(255, 255, 255, .08); }
#sjb .sjb-ring { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.sjb-overlay .sjb-field + .sjb-field { border-top-color: rgba(255, 255, 255, .15); }
#sjb .sjb-cta--step:not(.is-ghost) { background: var(--cbp-accent); border-color: var(--cbp-accent); color: var(--cbp-ink-deep); }
#sjb .sjb-cta--step:not(.is-ghost):hover { background-color: var(--cbp-accent); border-color: var(--cbp-ink-deep); }

/* === CBP 2026-10-06: why-stay band as photo cards (carried over from South Beach Miami,
   operator 06-10), after the Crafto corporate demo's "Corporate services" block
   (interactive-banner-style-09). White band, ink-deep kicker pill, white card pills with
   ink-deep type, 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. === */
.cbp-why { background-color: #fff; padding: 110px 0 50px; }
.cbp-why-kicker { display: inline-block; margin-bottom: 18px; padding: 0 22px; border-radius: 100px;
    background: var(--cbp-ink-deep); color: #fff; font-size: 13px; line-height: 38px;
    font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cbp-why-heading { color: var(--cbp-ink); font-family: var(--alt-font); letter-spacing: -1px; }
.cbp-why-intro { color: var(--cbp-muted); font-size: 18px; line-height: 30px; margin: 0; }
.cbp-why-navs { gap: 10px; }
.cbp-why-nav { width: 52px; height: 52px; margin: 0; color: var(--cbp-ink); background: transparent;
    border: 1px solid rgba(var(--cbp-ink-rgb), .3); font-size: 22px; display: inline-flex;
    align-items: center; justify-content: center; }
.cbp-why-nav:hover, .cbp-why-nav:focus-visible { background: var(--cbp-ink); color: #fff; border-color: var(--cbp-ink); }
.cbp-why-nav:focus-visible { outline: 2px solid var(--cbp-accent); outline-offset: 3px; }
.cbp-why-nav::after { display: none; }
.cbp-why-nav.swiper-button-disabled { opacity: .35; }
.cbp-why-nav.swiper-button-lock { display: none; }
.cbp-why-slider { overflow: visible; }
.cbp-why-card { aspect-ratio: 600 / 710; border-radius: 6px; background: var(--cbp-ink); }
.cbp-why-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cbp-why-shade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(var(--cbp-ink-deep-rgb), .94) 0%, rgba(var(--cbp-ink-deep-rgb), .78) 40%, rgba(var(--cbp-ink-deep-rgb), .3) 62%, rgba(var(--cbp-ink-deep-rgb), 0) 78%); }
/* Deeper shade (15-10): scrim measured the Spanish card 2 title at 2.46:1 and text at 3.77:1 on
   Beach Plaza; the longer Spanish copy lifts the title into the lighter part of the old gradient. */
.cbp-why-card .image-content { padding: 30px 26px; }
.cbp-why-label { background: #fff; color: var(--cbp-ink-deep); border-radius: 30px;
    padding: 0 18px; font-size: 12px; line-height: 30px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cbp-why-foot { padding-right: 0; }
.cbp-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; }
.cbp-why-card .image-content .cbp-why-text { color: #fff; opacity: 1; font-size: 15px; line-height: 23px; margin: 0; }
.cbp-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; }
.cbp-why-card .content-arrow { width: 50px; height: 50px; line-height: 50px; color: var(--cbp-ink-deep); font-size: 15px; }
.cbp-why-overlay { background: linear-gradient(to top, rgba(var(--cbp-ink-rgb), .96) 0%, rgba(var(--cbp-ink-rgb), .55) 100%); }
.cbp-why-card .image-content:focus-within .content-arrow { opacity: 1; transform: translateY(-42%); }
.cbp-why-card .image-content:focus-within .content-title { opacity: 0; visibility: hidden; transform: translateY(-20px); }
.cbp-why-card .image-content:focus-within .content-title-hover { visibility: visible; transform: translateY(-3px); }
.cbp-why-card .image-content:focus-within .box-overlay { opacity: 1; visibility: visible; }
.cbp-why-card .image-content:focus-within .hover-label-icon .label { opacity: 0; margin-top: -20px; }
.cbp-why-card .image-content:focus-within .hover-label-icon i { opacity: 1; top: 0; }
.cbp-why-card a:focus-visible { outline: 3px solid var(--cbp-accent); outline-offset: -3px; border-radius: 6px; }
@media (max-width: 991px) { .cbp-why { padding: 80px 0 60px; } }
@media (max-width: 767px) { .cbp-why { padding: 64px 0 64px; } .cbp-why-card .image-content { padding: 26px 24px; } }
/* (0,3,0) so it beats the engine's `.interactive-banner-style-09 .image-content .content-title` (opacity .6),
   loaded later; the engine's :hover rule (0,4,0) still hides the text on hover (Codex 15-10). */
/* Without JavaScript Swiper never runs: all four cards as a grid instead of a clipped row,
   and no arrows that do nothing (Codex 15-10). */
html:not(.js) .cbp-why-slider .swiper-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; transform: none !important; }
html:not(.js) .cbp-why-slider .swiper-slide { width: auto !important; margin: 0 !important; }
html:not(.js) .cbp-why-navs { display: none !important; }
@media (prefers-reduced-motion: reduce) { .cbp-why-card > img, .cbp-why-card .image-content * { transition: none !important; } }

/* === CBP 2026-10-06: a moving wave carries the white why-stay band into the cream band of
   "Where the day takes you" (from South Beach Miami, 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. === */
.cbp-wave { height: 100px; background-color: #fff; }
.cbp-wave .shape-image-animation { top: 0; right: 0; }
.cbp-wave svg { display: block; }
.cbp-wave-back { fill: var(--cbp-line); }
.cbp-wave-front { fill: var(--cbp-paper); }

/* === CBP 2026-10-06: home collage "Your Gateway to South Beach" (from South Beach Miami,
   operator 06-10): white band, a big decorative word sunk into the bottom of the band
   (after the Crafto yoga demo's "Premium facility") and a wave into the cream footer.
   The word is decoration only: aria-hidden, a tint barely off the white, behind the
   content. The wave runs over the foot of the word, as in the model: it overlaps the
   band's last 100px with a transparent top. === */
.cbp-band-white { background-color: #fff; }
.cbp-collage.has-bigword { position: relative; overflow: hidden; z-index: 0; }
@media (min-width: 768px) { .cbp-collage.has-bigword { padding-bottom: calc(var(--cbp-collage-pb, 90px) + 100px); } }
.cbp-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; }
@media (max-width: 1199px) { .cbp-bigword { font-size: 190px; bottom: 10px; } }
@media (max-width: 991px)  { .cbp-bigword { font-size: 150px; bottom: 14px; letter-spacing: -5px; } }
.cbp-wave--to-paper { background-color: transparent; margin-top: -100px; z-index: 1; }

/* === CBP 2026-10-06: logo at the same size as South Beach Miami (operator 06-10). Both
   lockups are 1740px wide with the CORENDON wordmark across the full width, but this one
   is 480px high (three lines) against 355px there; at the same height it came out 145px
   wide against 196px. Sized here so the width — and so the wordmark — matches:
   header 40 -> 54px, mobile 32 -> 43px, footer 52 -> 72px (= 196 / 157 / 255px wide). === */
.cbp-logo { height: 54px; }
@media (min-width: 992px) { .cbp-header .navbar.center-logo .cbp-logo { height: 54px; } }
@media (max-width: 991px) { .cbp-logo { height: 43px; } }
.cbp-footer-lockup img { height: 72px; }

/* === CBP 2026-10-06: mobile menu button beside the logo, mirrored to it (operator 06-10,
   iPhone screenshot). The 44px toggler (Codex r2 N01) kept the engine's
   `.center-logo .navbar-toggler{margin:31px 0}`, so the bar grew to 126px and below ~340px
   the button dropped to a second row under the logo. As South Beach Miami (a537b9b): a
   fixed 44x44 box, the lines pushed down inside it and the right edge pulled out 11px so
   the icon sits 35px from the right edge, mirroring the logo's 35px on the left. The top
   and bottom margin centre the icon on the logo (43px high here, 32px there). === */
@media (max-width: 991px) {
    .cbp-header .navbar-toggler { width: 44px; height: 44px; }
    /* 06-10, second pass (operator, iPhone): centred on the CORENDON wordmark (top 20.4px of
       the lockup, centre 35.5px from the top), not on the whole three-line lockup. */
    .cbp-header .center-logo .navbar-toggler { margin: 3.5px -11px 28.5px 0; }
    .cbp-header .navbar-toggler-line { margin-top: 15px; }
}

/* Navigation in capitals (operator GO 2026-10-09, carried over from Corendon Grand Park Lara),
   in the header CTA's type treatment (13px / 700 / .1em). */
.cbp-header .navbar-nav .nav-link { text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
/* Compact step 992–1439px (09-10): in capitals the right-hand nav overran the CTA at 1200
   (EN -5px, ES -15px, measured). Full 13px/.1em from 1440px. */
@media (min-width: 992px) and (max-width: 1439.98px) {
    .cbp-header .navbar-nav .nav-link { font-size: 12px; letter-spacing: .05em; }
}

/* Border glow on hover (operator GO 09-10, as on Corendon South Beach Miami; technique from
   Banden Service Veenendaal / AYCE), in Beach Plaza copper (--cbp-tan #CE7B41). assets/js/cbp.js adds one .cbp-glow-layer
   per target and feeds the cursor into --glow-x/--glow-y: a soft wash, a 2px masked ring that
   lights up around the cursor and an outer glow. Mouse only. The layer is a child element, so
   the engine's own ::before/::after stay untouched. Not on the docked planner strip (bar on a
   strip of the same colour = a box inside a box, operator 09-10 on South Beach). */
.cbp-glow { position: relative; --glow-x: 50%; --glow-y: 50%; transition: box-shadow .3s ease; }
.cbp-glow-layer { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(260px circle at var(--glow-x) var(--glow-y), rgba(var(--cbp-tan-rgb), .20) 0%, rgba(var(--cbp-tan-rgb), .07) 40%, transparent 70%); }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .cbp-glow-layer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
        background:
            radial-gradient(300px circle at var(--glow-x) var(--glow-y), rgba(var(--cbp-tan-rgb), 1) 0%, rgba(var(--cbp-tan-rgb), .9) 18%, rgba(var(--cbp-tan-rgb), .55) 36%, rgba(var(--cbp-tan-rgb), .15) 56%, transparent 76%),
            linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(var(--cbp-tan-rgb), .18), rgba(255, 255, 255, .04));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
}
@media (hover: hover) and (pointer: fine) {
    .cbp-glow:hover > .cbp-glow-layer { opacity: 1; }
    .cbp-glow:hover { box-shadow: 0 0 0 1px rgba(var(--cbp-tan-rgb), .5), 0 0 48px rgba(var(--cbp-tan-rgb), .45), 0 18px 50px rgba(var(--cbp-ink-deep-rgb), .22); }
}
#sjb .sjb-bar.cbp-glow:hover { box-shadow: 0 0 0 1px rgba(var(--cbp-tan-rgb), .55), 0 0 50px rgba(var(--cbp-tan-rgb), .48), 0 18px 50px rgba(0, 0, 0, .28); }
#sjb.sjb-docked .sjb-bar > .cbp-glow-layer { display: none; }
#sjb.sjb-docked .sjb-bar.cbp-glow:hover { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .cbp-glow, .cbp-glow-layer { transition: none; } }