/* ==========================================================================
   RED SEA SUN & SKY — front-end styles
   Coastal luxury: deep sea navy · warm sand · sun gold
   ========================================================================== */

:root {
	/* Sampled from the logo artwork, k-means over the opaque pixels. The share of
	   the mark each colour occupies is noted — gold is the largest by some way,
	   which is why it now carries as much of the page as the blues do. */
	--c-navy: #02133F;        /* deep wave · "Sea"        ·  8% */
	--c-navy-deep: #090E27;   /* darkest wave · footer    ·  4% */
	--c-navy-2: #0B2352;
	--c-ocean: #0D3B59;       /* middle wave              ·  5% */
	--c-sea: #0F5676;         /* upper wave · "Sky"       ·  7% */
	--c-sky: #4E93B4;         /* a tint of the upper wave, for dark grounds */
	--c-teal: #4E93B4;        /* retained alias */
	--c-shell: #F7F7F5;       /* page paper — neutral, barely warm */
	--c-sand: #E7EDF0;        /* section ground — a pale tint of the upper wave */
	--c-sand-2: #CBD8DF;      /* cool stone, for rules and edges */
	--c-stone: #C0BFAF;       /* the logo's own ground    ·  4% */
	--c-gold: #C87E05;        /* the sun's body — the largest colour in the mark · 32% */
	--c-amber: #E3A626;       /* gold lifted for dark grounds */
	--c-sun: #C87E05;
	--c-sun-2: #E3A626;
	--c-ember: #BB2E02;       /* the sun's lower band     · 18% */
	--c-sun-red: #BB2E02;     /* the conversion colour */
	--c-coral: #BB2E02;
	--c-maroon: #360502;      /* "Red"                    ·  8% */
	--c-sienna: #73381C;      /* burnt edge · warm rules  ·  4% */
	--c-brown: #73381C;

	/* The four logo colours, as flat fills — never blended. Used for icon
	   chips, numerals and small accents so each one reads as a distinct,
	   named colour rather than a gradient. */
	--c-brand-yellow: #E3A626;
	--c-brand-blue: #5EC2E8;
	--c-brand-orange: #E8672A;
	--c-brand-navy: #02133F;
	--c-accent-ink: #73381C;
	--c-ink: #02133F;
	--c-text: #37415C;
	--c-muted: #5C6479;       /* darkened: the old grey failed AA on the cooler grounds */
	--c-line: rgba(18, 28, 51, .16);
	--c-rule: rgba(18, 28, 51, .82);
	--c-line-light: rgba(255, 255, 255, .22);
	--c-white: #fff;

	/* The sun gradient, straight off the mark. Reserved for brand signatures —
	   the loader, the reading progress, section rules — never for buttons or text. */
	--g-sun: linear-gradient(90deg, #E3A626 0%, #C87E05 48%, #BB2E02 100%);

	--f-display: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
	--f-serif: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif; /* alias kept so every existing rule follows */
	--f-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--container: 1280px;
	--gutter: clamp(20px, 4vw, 48px);
	--space: clamp(84px, 10vw, 156px);
	--radius: 10px;          /* cards, media */
	--radius-sm: 7px;        /* inputs, chips, small surfaces */
	--radius-lg: 18px;       /* large panels */
	--radius-btn: 999px;     /* buttons — full pills */
	--shadow-sm: 0 2px 10px -4px rgba(4, 21, 62, .16);
	--shadow: 0 18px 40px -22px rgba(4, 21, 62, .34);
	--shadow-lg: 0 36px 80px -40px rgba(4, 21, 62, .46);
	--ease: cubic-bezier(.2, .7, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--header-h: 90px;
}

/* ---------- Branded scrollbar ---------- */
html {
	scrollbar-color: var(--c-sea) var(--c-sand);
	scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--c-sand); }
::-webkit-scrollbar-thumb {
	background: var(--c-sea); border-radius: 999px;
	border: 3px solid var(--c-sand); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-navy); }
::-webkit-scrollbar-corner { background: var(--c-sand); }
/* dark surfaces get the inverse so the bar never disappears */
.mobile-nav, .lightbox { scrollbar-color: var(--c-sun) rgba(255, 255, 255, .08); }

/* ---------- Reading progress ---------- */
.scroll-progress {
	position: fixed; inset: 0 0 auto; height: 3px; z-index: 300;
	background: var(--g-sun); transform: scaleX(0); transform-origin: left;
	will-change: transform; pointer-events: none;
}

/* ---------- Site loader ---------- */
.site-loader { display: none; }
.rsss-preload .site-loader {
	position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center;
	gap: 26px; background: var(--c-shell);
	transition: opacity .7s var(--ease-out), visibility .7s;
}
.rsss-preload { overflow: hidden; }
.site-loader.is-done { opacity: 0; visibility: hidden; }
.site-loader .site-loader__mark { width: clamp(112px, 16vw, 168px); height: auto; animation: loader-mark 1.1s var(--ease-out) both; }
@keyframes loader-mark { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.site-loader__bar { width: clamp(140px, 20vw, 200px); height: 2px; background: rgba(4, 21, 62, .14); overflow: hidden; border-radius: 999px; }
.site-loader__bar i { display: block; height: 100%; width: 100%; background: var(--g-sun); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.site-loader__word { font-size: .58rem; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; color: var(--c-muted); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
	margin: 0;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--c-text);
	background: var(--c-shell);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--c-ink); font-weight: 600; line-height: 1.15; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; }
em { font-style: normal; }
::selection { background: var(--c-navy); color: var(--c-shell); }
:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 3px; }

.screen-reader-text, .hp-field {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px;
	background: var(--c-navy); color: var(--c-shell); font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 16px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(820px + var(--gutter) * 2); }
.center { text-align: center; }
.muted { color: var(--c-muted); font-size: .92rem; }
.muted a { color: var(--c-sea); text-decoration: underline; text-underline-offset: 3px; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Typography helpers ---------- */
.eyebrow {
	display: block; margin: 0 0 22px;
	font-size: .68rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--c-brown);
}
.eyebrow--light { color: var(--c-sun-2); }
.eyebrow--light { color: rgba(255, 255, 255, .62); }

.section-title, .hero__title, .cta-band__title, .unit-top__title, .h-sub, .prose h2, .unit-card__title, .exp-row h2 {
	font-family: var(--f-serif); font-weight: 400; letter-spacing: -.016em;
}
.section-title { font-size: clamp(2.1rem, 3.4vw, 3.15rem); line-height: 1.08; }
.section-title em, .prose h2 em, .hero__title em, .cta-band__title em { font-style: normal; font-weight: 600; color: inherit; }
.section-title--light { color: var(--c-white); }
.section-lead { margin-top: 20px; max-width: 54ch; font-size: 1.02rem; color: var(--c-muted); }
.section-lead--light { color: rgba(255, 255, 255, .72); }
.h-sub { font-size: clamp(1.7rem, 2.4vw, 2.2rem); margin-bottom: 22px; }

.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head-row .section-head { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 15px 30px; border-radius: var(--radius-btn); border: 1px solid transparent;
	font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.1; white-space: nowrap;
	transition: background-color .3s, color .3s, border-color .3s, box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .icon { width: 15px; height: 15px; }
/* Two brand colours, one rule:
   SUN RED  (--c-sun-red) — booking and conversion only. Rare, so it always means "this one".
   NAVY     (--c-navy)    — every other action: navigate, explore, secondary.            */
.btn--primary { background: var(--c-navy); color: var(--c-shell); }
.btn--primary:hover { background: var(--c-sea); }
.btn--sun { background: var(--c-sun-red); color: #FFF6EC; }
.btn--sun:hover { background: var(--c-maroon); }
.btn--ghost { border-color: var(--c-rule); color: var(--c-navy); background: transparent; }
.btn--ghost:hover { background: var(--c-navy); color: var(--c-shell); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .5); color: var(--c-white); background: transparent; }
.btn--ghost-light:hover { background: var(--c-white); color: var(--c-navy); }
.btn--light { background: var(--c-shell); color: var(--c-navy); }
.btn--light:hover { background: var(--c-white); }
.btn--sm { min-height: 44px; padding: 12px 24px; font-size: .68rem; border-radius: var(--radius-btn); }
.btn--block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; color: var(--c-navy); }
.link-arrow .icon { width: 16px; transition: transform .35s var(--ease); color: currentColor; }
.link-arrow:hover .icon { transform: translateX(5px); }

.icon-btn {
	display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: currentColor; transition: background .25s, border-color .25s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); }
.icon-btn .icon { width: 20px; height: 20px; }
.icon-btn--solid { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-white); }

.icon-circle {
	display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 0;
	background: none; color: var(--c-navy);
}
.icon-circle .icon { width: 22px; height: 22px; stroke-width: 1.2; }
.icon-circle--light { background: none; color: rgba(255, 255, 255, .7); border: 0; }

.badge {
	position: absolute; top: 0; left: 0; padding: 8px 14px; border-radius: 0;
	background: rgba(247, 243, 236, .94); backdrop-filter: blur(6px); color: var(--c-navy);
	border-radius: 0 0 var(--radius-sm) 0;
	font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.badge--sun { background: var(--c-shell); color: var(--c-navy); border: 1px solid var(--c-line); }

/* ---------- Header ---------- */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 100; height: auto; color: var(--c-white);
	transition: background-color .4s, height .4s var(--ease), box-shadow .4s, transform .4s var(--ease);
}
.site-header::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(12, 22, 49, .45), rgba(12, 22, 49, 0)); transition: opacity .4s;
}
.site-header.is-scrolled { --header-h: 72px; color: var(--c-navy); background: rgba(247, 243, 236, .985); backdrop-filter: saturate(120%) blur(16px); border-bottom: 1px solid var(--c-line); }
.site-header.is-scrolled .primary-nav a { color: var(--c-text); }
.site-header.is-scrolled .primary-nav a:hover, .site-header.is-scrolled .primary-nav .current-menu-item > a { color: var(--c-navy); }
.site-header.is-scrolled .icon-btn { border-color: var(--c-line); }
.site-header.is-scrolled .icon-btn:hover { background: var(--c-sand); }
.site-header.is-scrolled::before { opacity: 0; }
.admin-bar .site-header { top: 32px; }
.header-inner { position: relative; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { position: relative; display: inline-flex; align-items: center; flex: none; color: inherit; }

/* The client's supplied artwork. Scale it; never recolour or rebuild it. */
.brand-logo { display: block; width: auto; }
.brand-logo--horizontal { height: 54px; transition: height .4s var(--ease); }
.brand-logo--primary { height: 68px; }
.brand-logo--logo { height: 132px; }
.brand-logo--mark { height: 40px; }
.brand-logo--on-light { display: none; }
.site-header.is-scrolled .brand-logo--horizontal { height: 44px; }
.site-header.is-scrolled .brand-logo--on-dark { display: none; }
.site-header.is-scrolled .brand-logo--on-light { display: block; }
.brand-logo--custom { max-height: 64px; width: auto; }
.brand-mark { display: block; width: auto; height: 40px; }
@media (max-width: 600px) { .brand-logo--horizontal, .site-header.is-scrolled .brand-logo--horizontal { height: 42px; } }

.primary-nav .menu { display: flex; list-style: none; gap: clamp(18px, 2vw, 32px); }
.primary-nav a { position: relative; display: block; padding: 8px 0; font-size: .88rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .88); transition: color .25s; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--c-white); }
.primary-nav a:hover::after, .primary-nav .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }
.audio-toggle .when-on { display: none; }
.audio-toggle[aria-pressed="true"] .when-on { display: block; }
.audio-toggle[aria-pressed="true"] .when-off { display: none; }
.audio-toggle[aria-pressed="true"] { border-color: currentColor; color: var(--c-white); }

/* The header CTA is solid in both header states — it sat on a white outline before,
   which vanished the moment the header turned cream. Never red: the loud red CTA
   belongs to the availability bar, and two of them read as a duplicate. */
.header-cta { letter-spacing: .14em; background: var(--c-white); color: var(--c-navy); border-color: var(--c-white); box-shadow: 0 10px 26px -14px rgba(4, 21, 62, .7); }
.header-cta:hover { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-shell); }
.site-header.is-scrolled .header-cta { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-shell); box-shadow: none; }
.site-header.is-scrolled .header-cta:hover { background: var(--c-sea); border-color: var(--c-sea); color: var(--c-white); }

@media (max-width: 1180px) {
	.primary-nav { display: none; }
	.nav-toggle { display: inline-grid; }
}
@media (max-width: 600px) {
	:root { --header-h: 70px; }
	.header-cta { display: none; }
	.brand-logo--horizontal, .site-header.is-scrolled .brand-logo--horizontal { height: 42px; }
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) { .admin-bar .site-header.is-scrolled { top: 0; } }

/* Mobile navigation */
.mobile-nav { position: fixed; inset: 0; z-index: 200; background: var(--c-navy-deep); color: var(--c-white); overflow-y: auto; opacity: 0; transition: opacity .35s; }
.mobile-nav.is-open { opacity: 1; }
.mobile-nav__inner { min-height: 100%; display: flex; flex-direction: column; padding: 18px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.mobile-nav__top .brand-logo--horizontal { height: 46px; }
.mobile-menu { list-style: none; margin: 44px 0 36px; }
.mobile-menu li { border-bottom: 1px solid rgba(255, 255, 255, .1); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mobile-nav.is-open .mobile-menu li { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-menu li:nth-child(2) { transition-delay: .04s; }
.mobile-nav.is-open .mobile-menu li:nth-child(3) { transition-delay: .08s; }
.mobile-nav.is-open .mobile-menu li:nth-child(4) { transition-delay: .12s; }
.mobile-nav.is-open .mobile-menu li:nth-child(5) { transition-delay: .16s; }
.mobile-nav.is-open .mobile-menu li:nth-child(6) { transition-delay: .2s; }
.mobile-nav.is-open .mobile-menu li:nth-child(n+7) { transition-delay: .24s; }
.mobile-menu a { display: block; padding: 14px 0; font-family: var(--f-serif); font-size: 2rem; line-height: 1.1; }
.mobile-menu .current-menu-item a { color: var(--c-white); text-decoration: underline; text-underline-offset: 6px; }
.mobile-nav__foot { margin-top: auto; display: grid; gap: 12px; }
.mobile-nav__contact { text-align: center; color: rgba(255, 255, 255, .6); font-size: .9rem; margin-top: 6px; }
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; color: var(--c-white); background: var(--c-navy); }
/* clip box stays put; the track inside it carries the parallax offset */
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media-track { position: absolute; inset: -9% 0; will-change: transform; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.6s var(--ease); }
.hero__slide.is-active { opacity: 1; animation: hero-drift 11s linear forwards; }
@keyframes hero-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
/* single-image heroes keep one slow settle */
.hero:not(.hero--slides) .hero__slide { opacity: 1; animation: hero-zoom 26s linear forwards; }
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 21, 62, .5) 0%, rgba(4, 21, 62, .12) 34%, rgba(4, 21, 62, .42) 58%, rgba(4, 21, 62, .82) 100%); }
.hero__inner { padding-top: calc(var(--header-h) + 60px); padding-bottom: clamp(56px, 8vw, 96px); }
.hero__content { max-width: 860px; }
.hero__title { color: var(--c-white); font-size: clamp(2.8rem, 6.2vw, 5.8rem); line-height: .98; letter-spacing: -.02em; }

/* Headline arrives word by word. */
.hero__word { display: inline-block; }
.js .hero__word { opacity: 0; transform: translateY(.34em); animation: word-in .9s var(--ease) both; animation-delay: calc(.22s + var(--i) * .075s); }
@keyframes word-in { to { opacity: 1; transform: none; } }

.hero__subtitle { margin-top: 22px; max-width: 56ch; font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: rgba(255, 255, 255, .84); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .eyebrow { animation: rise .9s var(--ease) both .1s; }
.hero__subtitle, .hero__actions { animation: rise 1s var(--ease) both .55s; }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }

/* Slide controls: numbered, with a rule that fills as the slide runs. */
.hero__slidenav { position: absolute; right: var(--gutter); bottom: clamp(104px, 11vw, 128px); z-index: 6; display: flex; gap: 20px; }
.hero__dot { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .55); transition: color .35s; }
.hero__dot:hover, .hero__dot.is-active { color: var(--c-white); }
.hero__dot-num { font-size: .62rem; font-weight: 500; letter-spacing: .22em; }
.hero__dot-rule { display: block; width: 46px; height: 1px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.hero__dot-rule i { display: block; width: 100%; height: 100%; background: var(--c-white); transform: scaleX(0); transform-origin: left; }
.hero__dot.is-active .hero__dot-rule i { animation: dot-fill var(--hero-dur, 7s) linear forwards; }
@keyframes dot-fill { to { transform: scaleX(1); } }
.hero--slides.is-paused .hero__dot.is-active .hero__dot-rule i { animation-play-state: paused; }

/* Scroll cue. */
.hero__cue { position: absolute; left: var(--gutter); bottom: clamp(104px, 11vw, 128px); z-index: 6; display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, .62); font-size: .62rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; transition: color .3s; }
.hero__cue:hover { color: var(--c-white); }
.hero__cue i { display: block; width: 52px; height: 1px; background: rgba(255, 255, 255, .32); position: relative; overflow: hidden; }
.hero__cue i::after { content: ""; position: absolute; inset: 0; background: var(--c-white); transform: translateX(-100%); animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

.hero--full { min-height: max(640px, 100svh); }
.hero--full .hero__inner { padding-bottom: clamp(120px, 14vw, 170px); }
.hero--page { min-height: clamp(460px, 70vh, 680px); }
.hero--compact { min-height: 0; background: var(--c-navy); }
.hero--compact .hero__inner { padding-top: calc(var(--header-h) + 70px); padding-bottom: 64px; }
.hero--compact .hero__title { font-size: clamp(2.4rem, 4.6vw, 4rem); }
.hero--compact .hero__shade { display: none; }

.hero__booking { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(50%); z-index: 5; opacity: 0; animation: fade-in 1s var(--ease) both .7s; }
@keyframes fade-in { to { opacity: 1; } }
.hero:has(.hero__booking) + * { padding-top: calc(var(--space) + 60px); }

@media (max-width: 900px) {
	.hero__booking { position: relative; transform: none; padding-bottom: 28px; margin-top: -40px; }
	.hero--full .hero__inner { padding-bottom: 72px; }
	.hero:has(.hero__booking) + * { padding-top: var(--space); }
	.hero__slidenav { bottom: auto; top: calc(var(--header-h) + 24px); right: var(--gutter); gap: 14px; }
	.hero__dot-rule { width: 30px; }
	.hero__cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__slide, .js .hero__word, .hero__dot.is-active .hero__dot-rule i, .hero__cue i::after { animation: none !important; }
	.hero__video { display: none; }
	.js .hero__word { opacity: 1; transform: none; }
	.hero__media-track { transform: none !important; }
}

/* ---------- Booking bar ---------- */
.booking-bar { display: grid; gap: 0; background: var(--c-white); color: var(--c-ink); border-radius: 0; }

/* Hero bar: four flush cells, one baseline, hairline dividers, full-height action. */
.booking-bar--hero { grid-template-columns: 1fr 1fr .78fr auto; align-items: stretch; padding: 0; border: 1px solid rgba(4, 21, 62, .08); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.booking-bar__field { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 20px 28px; min-width: 0; min-height: 92px; transition: background-color .25s; }
.booking-bar--hero .booking-bar__field:hover, .booking-bar--hero .booking-bar__field:focus-within { background: var(--c-shell); }
.booking-bar--hero .booking-bar__field + .booking-bar__field::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--c-line); }
.booking-bar label { display: block; margin: 0; font-size: .62rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--c-muted); pointer-events: none; }

/* The native control stays (picker + a11y); we draw the value ourselves so it reads
   as a real date in every locale instead of the browser's mm/dd/yyyy stub. */
.booking-bar__field--date input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; opacity: 0; cursor: pointer; }
.booking-bar__value { display: block; font-family: var(--f-serif); font-size: 1.32rem; line-height: 1.15; color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.booking-bar__value.is-empty { color: var(--c-muted); font-style: italic; }
.booking-bar__nights { position: absolute; right: 28px; bottom: 20px; font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--c-sun-red); pointer-events: none; }

.booking-bar select {
	width: 100%; padding: 0 22px 0 0; border: 0; background: transparent; cursor: pointer;
	font-family: var(--f-serif); font-size: 1.32rem; line-height: 1.15; color: var(--c-ink);
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6479' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right center; background-size: 15px;
}
.booking-bar select:focus { outline: none; }
.booking-bar__field:focus-within { outline: 2px solid var(--c-sun-red); outline-offset: -2px; }

.booking-bar__submit { border-radius: 0; min-height: 100%; transform: none !important; box-shadow: none !important; padding-inline: 38px; font-size: .72rem; align-self: stretch; }
.booking-bar__submit .icon { transition: transform .3s var(--ease); }
.booking-bar__submit:hover .icon { transform: translateX(4px); }

/* Sidebar / card variant: stacked, underline fields. */
.booking-bar--card { grid-template-columns: 1fr 1fr; gap: 0; background: transparent; border: 0; }
.booking-bar--card .booking-bar__field { padding: 12px 0; min-height: 0; border-bottom: 1px solid var(--c-line); background: none; }
.booking-bar--card .booking-bar__field + .booking-bar__field::before { content: none; }
.booking-bar--card .booking-bar__field:nth-child(odd) { padding-right: 16px; }
.booking-bar--card .booking-bar__value, .booking-bar--card select { font-size: 1.06rem; }
.booking-bar--card .booking-bar__nights { right: 0; bottom: 12px; }
.booking-bar--card .booking-bar__field--guests, .booking-bar--card .booking-bar__submit { grid-column: 1 / -1; }
.booking-bar--card .booking-bar__submit { margin-top: 18px; min-height: 56px; }

@media (max-width: 900px) {
	.booking-bar--hero { grid-template-columns: 1fr 1fr; }
	.booking-bar--hero .booking-bar__field { padding: 16px 18px; min-height: 78px; }
	.booking-bar--hero .booking-bar__field--guests { grid-column: 1 / -1; border-top: 1px solid var(--c-line); }
	.booking-bar--hero .booking-bar__field--guests::before { display: none; }
	.booking-bar--hero .booking-bar__nights { right: 18px; bottom: 16px; }
	.booking-bar--hero .booking-bar__submit { grid-column: 1 / -1; min-height: 58px; }
	.booking-bar__value, .booking-bar select { font-size: 1.12rem; }
}

/* ---------- Brand colour, applied as a system ----------
   Rules and numerals carry the warm end of the palette; sea blue carries
   interaction. Fills stay neutral so the photography keeps the stage.       */
.section-title { position: relative; }
.section-head .section-title::after {
	content: ""; display: block; width: 54px; height: 3px; margin: 20px 0 0;
	background: var(--g-sun); border-radius: 2px;
	transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out) .15s;
}
.section-head.is-in .section-title::after, [data-reveal].is-in .section-title::after,
.no-js .section-head .section-title::after { transform: scaleX(1); }
.section-head--center .section-title::after, .center .section-title::after { margin-inline: auto; }
.section-title--light::after { opacity: .9; }

.stats dt { color: var(--c-sea); }
.direct-item::before { color: var(--c-sun-2); }
.direct-item { transition: border-color .4s var(--ease-out); }
.direct-item:hover { border-top-color: var(--c-sun); }
.unit-card:hover { border-top-color: var(--c-sun); }
.amenity-list .icon-circle, .trust-list .icon { color: var(--c-teal); }
.accordion__item summary:hover { color: var(--c-sea); }
.accordion__item[open] summary { color: var(--c-sea); }
.link-arrow:hover { color: var(--c-sea); }
.chip.is-active { border-color: var(--c-sea); color: var(--c-sea); }
.fact-strip .icon, .facts .icon { color: var(--c-teal); }
.site-footer { border-top: 3px solid transparent; border-image: var(--g-sun) 1; }

/* ---------- Motion ---------- */
/* Photography wipes in rather than fading — it reads as intent, not as a loading state. */
.js [data-reveal] .intro__img, .js [data-reveal] .frame,
.js .unit-card__media, .js .offer-card__media, .js .exp-card {
	clip-path: inset(0 0 0 0);
}
.js [data-stagger] > * .unit-card__media img { transform-origin: center; }

/* A slow sheen across a button on hover — one pass, no loop. */
.btn { position: relative; overflow: hidden; }
.btn::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .18) 50%, transparent 80%);
	transform: translateX(-110%); transition: transform .75s var(--ease-out);
}
.btn:hover::after { transform: translateX(110%); }
.btn--ghost::after, .btn--ghost-light::after { background: linear-gradient(100deg, transparent 20%, rgba(4, 21, 62, .06) 50%, transparent 80%); }

/* Nav items lift a hair on hover. */
.primary-nav a { transition: color .25s, transform .25s var(--ease-out); }
.primary-nav a:hover { transform: translateY(-1px); }

/* Accordion opens rather than snapping. */
.accordion__panel { overflow: hidden; }
.js .accordion__item[open] .accordion__panel { animation: panel-open .45s var(--ease-out); }
@keyframes panel-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Gallery tiles warm slightly under the cursor. */
.masonry__item::after {
	content: ""; position: absolute; inset: 0; background: var(--c-navy);
	opacity: 0; transition: opacity .45s var(--ease-out); pointer-events: none;
}
.masonry__item:hover::after { opacity: .12; }

/* The page itself settles in once the loader has gone. */
.js .site-main { animation: page-in .7s var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--space); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }
.section--sand { background: var(--c-sand); }
.section--navy { background: var(--c-navy); color: rgba(255, 255, 255, .78); }
.section--navy h2, .section--navy h3 { color: var(--c-white); }

/* Intro */
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 110px); align-items: center; }
.intro__media { position: relative; padding: 0 12% 14% 0; }
.intro__img { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.intro__img img { transition: transform 1.4s var(--ease-out); }
.intro__img:hover img { transform: scale(1.04); }
.intro__img img { width: 100%; height: 100%; object-fit: cover; }
.intro__img--main { aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.intro__img--accent { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; border: 8px solid var(--c-shell); box-shadow: var(--shadow); }
.intro__stamp { position: static; display: flex; align-items: center; gap: 12px; width: auto; height: auto; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-line); border-radius: 0; background: none; color: var(--c-muted); text-align: left; font-size: .64rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; line-height: 1.3; box-shadow: none; }
.intro__stamp svg, .intro__stamp .brand-mark { width: 26px; height: auto; flex: none; }
.intro__stamp .brand-mark { width: 66px; }
.intro__content .link-arrow { margin-top: 30px; }

.prose { color: var(--c-text); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.08; margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose p { margin: 0; }
.prose a { color: var(--c-accent-ink); text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 4px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--c-muted); }
.prose img { border-radius: var(--radius-sm); }
.prose--lead p { font-size: 1.08rem; line-height: 1.8; }
.prose--page { max-width: 760px; }
.prose--page h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.prose .is-style-note { padding: 18px 22px; border-left: 1px solid var(--c-rule); background: var(--c-sand); border-radius: 0; font-size: .95rem; }
.prose .updated { margin-top: 3em; font-size: .85rem; color: var(--c-muted); }

.stats { display: flex; flex-wrap: wrap; gap: 20px 44px; margin: 36px 0 0; padding-top: 30px; border-top: 1px solid var(--c-line); }
.stats div { min-width: 90px; }
.stats dt { font-family: var(--f-serif); font-size: 3rem; line-height: 1; color: var(--c-navy); }
.stats dt .icon { width: 34px; height: 42px; color: var(--c-navy); stroke-width: 1.1; }
.stats dd { margin: 8px 0 0; font-size: .82rem; font-weight: 600; color: var(--c-muted); max-width: 16ch; }
.stats--band { justify-content: space-between; border: 0; margin: 0; padding: 0; text-align: center; }
.stats--band div { flex: 1 1 180px; }
.stats--band dt { color: var(--c-white); font-size: clamp(3rem, 5vw, 4.2rem); }
.stats--band dt .icon { margin-inline: auto; color: currentColor; height: clamp(42px, 4.4vw, 58px); width: 42px; stroke-width: 1.1; }
.stats--band dd { color: rgba(255, 255, 255, .66); margin-inline: auto; }

/* Unit cards */
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.unit-card { position: relative; display: flex; flex-direction: column; background: none; border-top: 1px solid var(--c-rule); padding-top: 20px; }
.unit-card__media, .offer-card__media { overflow: hidden; border-radius: var(--radius); }
.unit-card__media img, .offer-card__media img { transition: transform 1.1s var(--ease-out); will-change: transform; }
.unit-card:hover .unit-card__media img, .offer-card:hover .offer-card__media img { transform: scale(1.045); }
.unit-card:hover { border-top-color: var(--c-accent-ink); }
.unit-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-sand-2); }
.unit-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.unit-card:hover .unit-card__media img { transform: scale(1.05); }
.unit-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 22px; }
.unit-card__meta { margin: 0 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-teal); }
.unit-card__title { font-size: 1.85rem; line-height: 1.08; }
.unit-card__title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.unit-card__title a:hover { background-size: 100% 1px; }
.unit-card__title a::after { content: ""; position: absolute; inset: 0; }
.unit-card__excerpt { margin: 10px 0 0; font-size: .95rem; color: var(--c-muted); }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.facts li { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 600; color: var(--c-ink); }
.facts .icon { width: 18px; height: 18px; color: var(--c-sea); }
.unit-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--c-line); }
.unit-card .facts { margin-bottom: 20px; }
.unit-card__foot .link-arrow { position: relative; z-index: 1; margin-left: auto; }
.price-note { font-size: .84rem; font-weight: 700; color: var(--c-navy); }

/* Why direct */
.direct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(28px, 4vw, 56px); counter-reset: direct; }
.direct-item { position: relative; padding: 22px 0 0; border-radius: 0; background: none; border: 0; border-top: 1px solid var(--c-rule); counter-increment: direct; }
.direct-item .icon-circle { display: none; }
.direct-item::before { content: counter(direct, decimal-leading-zero); display: block; margin-bottom: 26px; font-family: var(--f-serif); font-size: 1.5rem; line-height: 1; color: var(--c-muted); }
.direct-item h3 { margin: 0 0 10px; font-family: var(--f-serif); font-weight: 500; font-size: 1.28rem; }
.direct-item p { font-size: .92rem; color: var(--c-muted); }
@media (max-width: 1024px) { .direct-grid { gap: 36px clamp(28px, 4vw, 56px); } }
@media (max-width: 1024px) { .direct-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .direct-grid { grid-template-columns: 1fr; } }

/* Amenities (navy) */
.amenities { overflow: hidden; }
.amenities::before { content: none; }
.amenities__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.amenity-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 40px; }
.amenity-list li { display: flex; gap: 18px; align-items: flex-start; }
.amenity-list h3 { font-size: 1.02rem; margin: 4px 0 6px; }
.amenity-list p { font-size: .9rem; color: rgba(255, 255, 255, .62); }

/* Experiences teaser */
.exp-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.exp-card { position: relative; overflow: hidden; border-radius: var(--radius); color: var(--c-white); min-height: 260px; isolation: isolate; }
.exp-card--large { grid-row: span 2; }
.exp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.exp-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 22, 49, 0) 20%, rgba(12, 22, 49, .55) 55%, rgba(12, 22, 49, .9) 100%); }
.exp-card:hover img { transform: scale(1.05); }
.exp-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(22px, 3vw, 34px); }
.exp-card h3 { color: var(--c-white); font-family: var(--f-serif); font-weight: 500; font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.exp-card--large h3 { font-size: clamp(2rem, 3vw, 2.9rem); }
.exp-card p { margin-top: 8px; max-width: 44ch; font-size: .93rem; color: rgba(255, 255, 255, .8); }
.exp-card__detail { margin: 0 0 10px !important; font-size: .62rem !important; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .66) !important; }

/* Availability */
.availability__card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 64px); color: rgba(255, 255, 255, .78); background: var(--c-navy); position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.availability__card::after { content: none; }
.availability .section-title { color: var(--c-white); }
.availability .eyebrow { color: rgba(255, 255, 255, .5); }
.availability .section-lead { color: rgba(255, 255, 255, .7); }
.trust-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; }
.trust-list li { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--c-white); }
.trust-list .icon { width: 16px; color: rgba(255, 255, 255, .45); }
.availability__tool { position: relative; z-index: 1; padding: 28px; border-radius: var(--radius); background: none; border: 1px solid var(--c-line-light); }
.availability__note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: .84rem; color: rgba(255, 255, 255, .66); }
.availability__note .icon { width: 15px; color: rgba(255, 255, 255, .5); }
.lodgify-widget { background: var(--c-white); border-radius: var(--radius-sm); padding: 12px; color: var(--c-ink); min-height: 120px; }

/* Offers */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 2.4vw, 30px); }
.offer-card { display: flex; flex-direction: column; background: none; border-top: 1px solid var(--c-rule); padding-top: 20px; }
.offer-card:hover { box-shadow: var(--shadow); }
.offer-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.offer-card__media img { width: 100%; height: 100%; object-fit: cover; }
.offer-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 26px; }
.offer-card__body h3 { font-family: var(--f-serif); font-weight: 500; font-size: 1.8rem; line-height: 1.1; }
.offer-card__body p { color: var(--c-muted); font-size: .95rem; }
.offer-card__body .link-arrow { margin-top: auto; padding-top: 8px; }
.offer-card__valid { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: .74rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-teal) !important; }
.offer-card__valid .icon { width: 15px; }
.offer-list { display: grid; gap: 28px; }
.offer-card--wide { display: grid; grid-template-columns: 1fr 1.15fr; }
.offer-card--wide .offer-card__media { aspect-ratio: auto; min-height: 320px; }
.offer-card--wide .offer-card__body { padding: clamp(28px, 4vw, 52px); justify-content: center; }
.offer-card--wide h3 { font-size: clamp(2rem, 3vw, 2.6rem); }
@media (max-width: 800px) { .offer-card--wide { grid-template-columns: 1fr; } .offer-card--wide .offer-card__media { min-height: 0; aspect-ratio: 16 / 10; } }

/* Gallery strip */
.strip { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(var(--gutter), calc((100vw - var(--container)) / 2)) 18px; scrollbar-width: thin; scrollbar-color: var(--c-sand-2) transparent; }
.strip__item { flex: 0 0 clamp(260px, 30vw, 420px); aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; scroll-snap-align: start; }
.strip__item:nth-child(even) { aspect-ratio: 3 / 4; flex-basis: clamp(200px, 22vw, 310px); }
.strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.strip__item:hover img { transform: scale(1.05); }

/* Location & map */
.location-teaser__grid, .split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
.split__content .btn { margin-top: 28px; }
.split__media .frame { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.contact-list { list-style: none; display: grid; gap: 14px; margin: 26px 0; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.contact-list .icon { width: 18px; margin-top: 3px; color: var(--c-muted); }
.contact-list a:hover { color: var(--c-white); }
.contact-list--dark { color: var(--c-ink); }
.contact-list--dark a:hover { color: var(--c-sea); }
.map-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 5 / 4; background: var(--c-sand-2); }
.map-frame--tall { aspect-ratio: 4 / 5; }
.map { position: relative; width: 100%; height: 100%; }
.map > img, .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.map > img { filter: saturate(.85); }
.map__overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88%, 380px); padding: 26px; text-align: center; border-radius: var(--radius); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); box-shadow: var(--shadow); color: var(--c-ink); }
.map__overlay .icon-circle { margin: 0 auto 12px; }
.map__overlay p { font-weight: 600; margin-bottom: 14px; }
.map__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.map__overlay .map__note { margin: 12px 0 0; font-size: .74rem; font-weight: 500; color: var(--c-muted); }
.map.is-loaded .map__overlay, .map.is-loaded > img { display: none; }

/* FAQ */
.faq-teaser__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; font-weight: 700; font-size: 1.04rem; color: var(--c-ink); transition: color .2s; }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary:hover { color: var(--c-sea); }
.accordion__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--c-line); transition: transform .4s var(--ease), background .3s, border-color .3s; }
.accordion__icon .icon { width: 16px; }
.accordion__item[open] .accordion__icon { transform: rotate(45deg); background: var(--c-navy); border-color: var(--c-navy); color: var(--c-shell); }
.accordion__body { padding: 0 56px 24px 0; color: var(--c-muted); }

/* CTA band */
.cta-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(110px, 14vw, 190px); text-align: center; color: var(--c-white); background: var(--c-navy); }
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 22, 49, .55), rgba(12, 22, 49, .78)); }
.cta-band__title { color: var(--c-white); font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1; }
.cta-band__text { max-width: 54ch; margin: 22px auto 0; color: rgba(255, 255, 255, .8); font-size: 1.06rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.cta-band .eyebrow { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-navy-deep); color: rgba(255, 255, 255, .66); padding-top: clamp(64px, 8vw, 100px); font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .8fr 1.15fr 1fr; gap: 44px; padding-bottom: 60px; }
.footer-logo { display: inline-block; }
.footer-logo .brand-logo--logo { height: 150px; }
.footer-brand p { margin-top: 22px; max-width: 34ch; }
.footer-title { margin-bottom: 22px; font-family: var(--f-sans); font-size: .64rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.footer-menu { list-style: none; display: grid; gap: 10px; }
.footer-menu a:hover, .legal-menu a:hover, .credit a:hover { color: var(--c-white); }
.site-footer .contact-list { margin: 0; }
.site-footer .contact-list .icon { color: rgba(255, 255, 255, .45); }
.footer-book .btn { margin: 6px 0 16px; }
.footer-secure { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
.footer-secure .icon { width: 14px; color: rgba(255, 255, 255, .4); }
.social-links { list-style: none; display: flex; gap: 10px; margin-top: 24px; }
.social-links a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); transition: background .25s, border-color .25s, color .25s; }
.social-links a:hover { background: var(--c-shell); border-color: var(--c-shell); color: var(--c-navy); }
.social-links .icon { width: 18px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-block: 26px calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; }
.footer-bottom p { margin: 0; }
.legal-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }

/* Mobile sticky booking bar */
.mobile-bookbar { display: none; }
@media (max-width: 900px) {
	.mobile-bookbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: flex; gap: 10px; padding: 8px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); border-top: 1px solid var(--c-line); transform: translateY(140%); transition: transform .5s var(--ease); }
	.mobile-bookbar.is-visible { transform: none; }
	.mobile-bookbar .btn { flex: 1; min-height: 48px; }
	.mobile-bookbar .icon-btn { width: 48px; height: 48px; }
	.site-footer { padding-bottom: 80px; }
}

/* Cookie notice */
.cookie-notice { position: fixed; left: 20px; bottom: 20px; z-index: 150; width: min(420px, calc(100vw - 40px)); padding: 24px; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--c-white); color: var(--c-text); font-size: .86rem; animation: rise .6s var(--ease-out) both; }
.cookie-notice a { color: var(--c-sea); text-decoration: underline; }
.cookie-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (max-width: 900px) { .cookie-notice { left: 12px; right: 12px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- Accommodation detail ---------- */
.unit-top { background: var(--c-navy); color: var(--c-white); padding: calc(var(--header-h) + 40px) 0 150px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; color: rgba(255, 255, 255, .6); margin-bottom: 26px; }
.breadcrumbs a:hover { color: var(--c-white); }
.unit-top__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.unit-top__title { color: var(--c-white); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; }
.unit-top__lead { margin-top: 16px; max-width: 60ch; color: rgba(255, 255, 255, .76); font-size: 1.06rem; }

.unit-gallery { margin-top: -120px; }
.unit-gallery__grid { position: relative; display: grid; gap: 12px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(170px, 19vw, 270px)); }
.unit-gallery__item { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--c-sand-2); }
.unit-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.unit-gallery__item:hover img { transform: scale(1.04); }
.unit-gallery__item:first-child { grid-row: span 2; border-radius: var(--radius) var(--radius-sm) var(--radius-sm) var(--radius); }
.unit-gallery__item.is-hidden { display: none; }
.count-1 { grid-template-columns: 1fr; grid-template-rows: clamp(300px, 42vw, 560px); }
.count-1 .unit-gallery__item:first-child { grid-row: auto; border-radius: var(--radius); }
.count-2 { grid-template-columns: 1.4fr 1fr; grid-template-rows: clamp(300px, 36vw, 520px); }
.count-2 .unit-gallery__item:first-child { grid-row: auto; }
.count-3 { grid-template-columns: 2fr 1fr; }
.count-4 .unit-gallery__item:nth-child(4) { grid-column: 2 / span 2; }
.unit-gallery__all { position: absolute; right: 16px; bottom: 16px; }

.unit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px, 5vw, 80px); align-items: start; }
.fact-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.fact-strip li { display: inline-flex; align-items: center; gap: 9px; padding: 0 22px 0 0; margin-right: 22px; border-right: 1px solid var(--c-line); background: none; font-size: .84rem; font-weight: 400; letter-spacing: .02em; color: var(--c-ink); }
.fact-strip li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fact-strip .icon { width: 19px; color: var(--c-sea); }
.prose--unit p { font-size: 1.06rem; line-height: 1.85; }
.unit-block { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--c-line); }
.amenity-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px; }
.amenity-grid li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .94rem; color: var(--c-ink); }
.amenity-grid .icon { width: 22px; color: var(--c-sea); }
.amenity-grid--center { max-width: 900px; margin-inline: auto; }
.policy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.policy { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: var(--radius-sm); border: 1px solid var(--c-line); background: var(--c-white); }
.policy .icon { width: 20px; color: var(--c-muted); }
.policy strong { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.policy span { font-weight: 700; color: var(--c-ink); }
.check-list { list-style: none; display: grid; gap: 10px; margin: 24px 0; }
.check-list li { display: flex; gap: 10px; align-items: center; }
.check-list .icon { width: 18px; color: var(--c-teal); }

.unit-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.book-card { padding: 30px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.book-card__price { font-family: var(--f-serif); font-size: 1.9rem; line-height: 1.1; color: var(--c-ink); margin: 0; }
.book-card__sub { margin: 8px 0 20px; font-size: .86rem; color: var(--c-muted); }
.book-card__alt { display: flex; gap: 10px; margin-top: 14px; }
.book-card__alt a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: var(--radius-sm); border: 1px solid var(--c-line); font-size: .84rem; font-weight: 700; color: var(--c-navy); transition: border-color .2s, background .2s; }
.book-card__alt a:hover { border-color: var(--c-navy); background: var(--c-sand); }
.book-card__alt .icon { width: 17px; }
.book-card__secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: .78rem; color: var(--c-muted); }
.book-card__secure .icon { width: 14px; color: var(--c-teal); }

@media (max-width: 1024px) {
	.unit-layout { grid-template-columns: 1fr; }
	.unit-aside { position: static; }
	.amenity-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.unit-top { padding-bottom: 110px; }
	.unit-gallery { margin-top: -80px; }
	.unit-gallery__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
	.unit-gallery__grid::-webkit-scrollbar { display: none; }
	.unit-gallery__item, .unit-gallery__item.is-hidden { display: block; flex: 0 0 86%; aspect-ratio: 4 / 3; scroll-snap-align: center; border-radius: var(--radius-sm) !important; }
	.unit-gallery__all { display: none; }
	.amenity-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ---------- Listing ---------- */
.section--after-booking { padding-top: calc(var(--space) + 40px); }
.listing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 44px; }
.listing-head .prose { max-width: 60ch; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0 4px; }
.chip { padding: 9px 0; margin-right: 26px; border: 0; border-bottom: 1px solid transparent; background: none; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); transition: color .25s, border-color .25s; }
.chip:hover { border-color: var(--c-navy); }
.chip.is-active { border-color: var(--c-navy); color: var(--c-navy); }
.unit-card.is-filtered { display: none; }
.empty-note { padding: 28px; text-align: center; color: var(--c-muted); }

/* ---------- About ---------- */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.value { padding: 34px 30px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); }
.value__num { font-family: var(--f-serif); font-size: 2.6rem; line-height: 1; color: var(--c-accent-ink); }
.value h3 { margin: 18px 0 10px; font-size: 1.1rem; }
.value p { font-size: .93rem; color: var(--c-muted); }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 14px; }
.mosaic a { overflow: hidden; border-radius: var(--radius-sm); }
.mosaic a:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mosaic a:hover img { transform: scale(1.05); }
@media (max-width: 700px) { .mosaic { grid-template-columns: 1fr 1fr; } }

/* ---------- Experiences page ---------- */
.exp-list { display: grid; gap: clamp(56px, 8vw, 110px); margin-top: clamp(56px, 7vw, 96px); }
.exp-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.exp-row--flip .exp-row__media { order: 2; }
.exp-row__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.exp-row__media img { width: 100%; height: 100%; object-fit: cover; }
.exp-row h2 { font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1.05; margin-bottom: 16px; }
.exp-row .exp-card__detail { color: var(--c-teal) !important; margin-top: 22px !important; }
.exp-row .link-arrow { margin-top: 22px; }
.disclaimer { margin-top: clamp(56px, 7vw, 90px); padding-top: 24px; border-top: 1px solid var(--c-line); font-size: .84rem; color: var(--c-muted); text-align: center; }

/* ---------- Gallery ---------- */
.masonry { columns: 3 320px; column-gap: 16px; margin-top: 12px; }
.prose + .masonry, .container--narrow + .masonry { margin-top: 56px; }
.masonry__item { position: relative; display: block; margin-bottom: 16px; break-inside: avoid; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--c-sand-2); }
.masonry__item img { width: 100%; transition: transform 1.2s var(--ease); }
.masonry__item:hover img { transform: scale(1.04); }
.masonry__zoom { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--c-navy); opacity: 0; transform: translateY(8px); transition: all .4s var(--ease); }
.masonry__zoom .icon { width: 18px; }
.masonry__item:hover .masonry__zoom, .masonry__item:focus-visible .masonry__zoom { opacity: 1; transform: none; }

/* ---------- Location page ---------- */
.place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.place { display: flex; gap: 18px; padding: 26px; border-radius: var(--radius); background: var(--c-white); border: 1px solid var(--c-line); }
.place h3 { font-size: 1.08rem; }
.place__distance { margin: 4px 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-teal); }
.place p:last-child { font-size: .92rem; color: var(--c-muted); }

/* ---------- FAQ page ---------- */
.faq-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-nav { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-nav nav ul { list-style: none; display: grid; gap: 4px; margin: 28px 0; padding-left: 16px; border-left: 1px solid var(--c-line); }
.faq-nav nav a { display: block; padding: 6px 0; font-weight: 600; color: var(--c-muted); }
.faq-nav nav a:hover { color: var(--c-navy); }
.faq-help { padding: 26px; border-radius: var(--radius); background: var(--c-sand); }
.faq-help h2 { font-family: var(--f-serif); font-weight: 500; font-size: 1.6rem; margin-bottom: 14px; }
.faq-group + .faq-group { margin-top: 56px; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.form-card { margin-top: 32px; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-lg); background: var(--c-white); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: .8rem; font-weight: 700; color: var(--c-ink); }
.field label span { color: var(--c-coral); }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--c-rule); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: none; font-size: 1rem; color: var(--c-ink); transition: border-color .2s; appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a83' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-accent-ink); border-bottom-width: 2px; }
.field textarea { resize: vertical; min-height: 130px; }
.field--check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: .88rem; color: var(--c-text); }
.field--check input { width: 20px; height: 20px; flex: none; margin-top: 1px; padding: 0; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--c-navy); }
.field--check a { color: var(--c-sea); text-decoration: underline; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.form-note { margin: 0; font-size: .84rem; color: var(--c-muted); }
.form-note a { color: var(--c-sea); text-decoration: underline; }
.form-notice { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px; padding: 16px 18px; border-radius: var(--radius-sm); font-size: .94rem; }
.form-notice .icon { width: 22px; }
.form-notice--ok { background: #e8f4ef; color: #1c5a44; }
.form-notice--error { background: #fbeae5; color: #8a3520; }
.enquiry-form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }
.contact-aside { display: grid; gap: 20px; }
.info-card { padding: 30px; border-radius: var(--radius); background: var(--c-sand); }
.info-card .contact-list { margin: 0; }
.info-card--navy { background: var(--c-navy); color: rgba(255, 255, 255, .74); }
.info-card--navy .h-sub { color: var(--c-white); margin-bottom: 8px; }
.info-card--navy p { margin-bottom: 18px; }
@media (max-width: 1024px) { .contact-layout, .faq-layout { grid-template-columns: 1fr; } .faq-nav { position: static; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.empty-state { max-width: 560px; margin: 0 auto; padding: 48px; text-align: center; border-radius: var(--radius); background: var(--c-sand); }
.empty-state .icon-circle { margin: 0 auto 18px; background: var(--c-white); }
.empty-state h2 { font-family: var(--f-serif); font-weight: 500; font-size: 2rem; margin-bottom: 10px; }

.post-list { display: grid; gap: 28px; }
.post-item h2 { font-family: var(--f-serif); font-size: 1.8rem; font-weight: 500; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 64px 72px; background: rgba(8, 14, 32, .95); color: var(--c-white); opacity: 0; transition: opacity .3s; }
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.lightbox__img { max-width: min(1400px, 100%); max-height: calc(100vh - 150px); width: auto; border-radius: var(--radius); }
.lightbox__caption { font-size: .88rem; color: rgba(255, 255, 255, .7); text-align: center; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 0; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: var(--c-white); transition: background .2s; }
.lightbox__btn:hover { background: rgba(255, 255, 255, .18); }
.lightbox__btn .icon { width: 22px; }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); font-size: .8rem; letter-spacing: .14em; color: rgba(255, 255, 255, .6); }
@media (max-width: 700px) { .lightbox { padding: 64px 12px; } .lightbox__prev, .lightbox__next { top: auto; bottom: 18px; transform: none; } .lightbox__prev { left: calc(50% - 62px); } .lightbox__next { right: calc(50% - 62px); } }

/* ---------- Core blocks inside content ---------- */
.wp-block-image { margin: 2em 0; }
.wp-block-image img { border-radius: var(--radius-sm); }
.wp-block-gallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.wp-block-gallery figure { margin: 0; }
.wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.wp-block-quote { margin: 2em 0; padding-left: 24px; border-left: 1px solid var(--c-rule); font-family: var(--f-serif); font-style: italic; font-size: 1.45rem; color: var(--c-ink); }
.wp-block-button__link { display: inline-flex; padding: 15px 30px; border-radius: var(--radius-btn); background: var(--c-navy); color: var(--c-shell) !important; text-decoration: none !important; font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.alignwide { width: 100%; }

/* ---------- Responsive layout collapses ---------- */
@media (max-width: 1024px) {
	.amenities__grid, .faq-teaser__grid { grid-template-columns: 1fr; }
	.availability__card { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.intro__grid, .location-teaser__grid, .split, .exp-row { grid-template-columns: 1fr; }
	.exp-row--flip .exp-row__media { order: 0; }
	.intro__media { max-width: 560px; }
	.exp-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
	.exp-card, .exp-card--large { grid-row: auto; min-height: 340px; }
	.map-frame--tall { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
	.amenity-list { grid-template-columns: 1fr; }
	.intro__stamp { width: 104px; height: 104px; left: -6px; top: 18px; font-size: .48rem; }
	.intro__stamp .brand-mark { width: 52px; }
	.accordion__body { padding-right: 0; }
	.availability__tool { padding: 16px; }
	.stats { gap: 18px 28px; }
	.stats dt { font-size: 2.5rem; }
	.section-head-row .btn { order: 2; }
}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* children of a revealed grid arrive in sequence */
.js [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .masonry[data-stagger] > * { transform: none; transition: opacity .7s var(--ease-out); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay: .00s; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: .09s; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: .18s; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: .27s; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: .36s; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: .45s; }
.js [data-stagger].is-in > *:nth-child(n+7) { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.js [data-reveal], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
	.section-head .section-title::after { transform: scaleX(1) !important; transition: none !important; }
	.btn::after, .js .site-main, .js .accordion__item[open] .accordion__panel { animation: none !important; transition: none !important; }
	.site-loader, .scroll-progress { display: none !important; }
	.btn:hover { transform: none; }
}
.unit-aside .booking-bar--card, .book-card .booking-bar--card { grid-template-columns: 1fr; }
@media (max-width: 480px) { .booking-bar--card { grid-template-columns: 1fr; } }
.hero--page .hero__shade, .hero--full .hero__shade {
	background:
		linear-gradient(90deg, rgba(8, 18, 44, .74) 0%, rgba(8, 18, 44, .34) 46%, rgba(8, 18, 44, 0) 82%),
		linear-gradient(180deg, rgba(8, 18, 44, .42) 0%, rgba(8, 18, 44, 0) 30%, rgba(8, 18, 44, .14) 58%, rgba(8, 18, 44, .66) 100%);
}
@media (max-width: 700px) {
	.hero--page .hero__shade, .hero--full .hero__shade { background: linear-gradient(180deg, rgba(12, 22, 49, .55) 0%, rgba(12, 22, 49, .35) 40%, rgba(12, 22, 49, .82) 100%); }
}

/* the rule under a section title takes the place of part of the lead's own gap */
.section-head .section-title + .section-lead { margin-top: 16px; }

/* ---------- Third-party booking widgets (Lodgify) ----------
   Two things break an embedded booking widget, and both were present:
   a clipping ancestor cuts off a date picker that pops out of its box, and a
   transformed ancestor becomes the containing block for position:fixed, so any
   modal the widget opens lands in the wrong place. Containers that hold a widget
   opt out of both, and never animate.                                          */
.availability__card:has(.lodgify-widget) { overflow: visible; }
.availability__tool:has(.lodgify-widget) { overflow: visible; }
.js [data-reveal]:has(.lodgify-widget) { opacity: 1; transform: none; transition: none; }
.lodgify-widget, .lodgify-widget * { max-width: 100%; }
.lodgify-widget { position: relative; z-index: 2; }
.lodgify-widget iframe { width: 100%; border: 0; display: block; }

/* The hero slot, when Lodgify's Search Box stands in for the theme's own bar. */
.lodgify-widget--hero {
	background: var(--c-white); border-radius: var(--radius);
	box-shadow: var(--shadow); padding: 14px; overflow: visible;
}
.hero__booking:has(.lodgify-widget) { position: relative; transform: none; margin-top: -28px; padding-bottom: 8px; }
.hero--full:has(.lodgify-widget) .hero__inner { padding-bottom: clamp(56px, 7vw, 84px); }
.hero:has(.lodgify-widget) + * { padding-top: var(--space); }
.lodgify-widget--card { background: none; padding: 0; }

/* A booking widget must never sit under the sticky header or the mobile bar. */
@media (max-width: 900px) {
	.lodgify-widget { scroll-margin-top: calc(var(--header-h) + 16px); }
}

/* ==========================================================================
   Editorial layer — European-modern refinement.
   Instrument Serif carries display, Schibsted Grotesk carries everything else.
   Nothing here introduces a gradient fill; texture and hairlines do the work.
   ========================================================================== */

/* ---------- Type recalibration for the new faces ---------- */
html { font-synthesis-weight: none; font-synthesis-style: none; }
body { font-size: 16.5px; line-height: 1.66; letter-spacing: -.005em; }

/* Everything that used to be faux-bold serif is now a real single weight. */
.exp-card h3, .offer-card__body h3, .direct-item h3, .stats dt,
.booking-bar__value, .booking-bar select, .mobile-menu a, .map__overlay p,
.unit-card__title, .prose h2, .h-sub { font-weight: 400; }

/* Display sizes go up a touch — Instrument Serif has a smaller apparent weight
   than Newsreader did, so the same measurements read quieter. */
.section-title { font-size: clamp(2.3rem, 3.9vw, 3.6rem); line-height: 1.03; }
.hero__title { font-size: clamp(3rem, 6.8vw, 6.4rem); line-height: .95; letter-spacing: -.028em; }
.cta-band__title { font-size: clamp(2.8rem, 5.8vw, 5.4rem); letter-spacing: -.026em; }
.unit-card__title { font-size: 2rem; letter-spacing: -.02em; }
.stats dt { font-size: 3.4rem; letter-spacing: -.03em; }
.stats--band dt { font-size: clamp(3.2rem, 5.2vw, 4.6rem); }
.h-sub { letter-spacing: -.02em; }

/* Labels are the sans, always, and they are small and wide. */
.eyebrow, .footer-title, .booking-bar label, .hero__cue, .site-loader__word,
.unit-card__meta, .offer-card__valid, .exp-card__detail { font-family: var(--f-sans); }
.eyebrow { font-weight: 600; letter-spacing: .28em; }

/* A hairline runs into every label. It is the one detail repeated everywhere. */
.eyebrow { display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ""; flex: none; width: 30px; height: 1px; background: currentColor; opacity: .55; }
.section-head--center .eyebrow, .center .eyebrow, .cta-band .eyebrow { justify-content: center; }

/* Body copy sits a shade darker than before so the photography is the only soft thing. */
.section-lead, .unit-card__excerpt, .direct-item p, .offer-card__body p { color: var(--c-muted); }
.prose--lead p { font-size: 1.1rem; line-height: 1.75; }

/* ---------- Texture ----------
   A fine film of grain over every dark surface. It is what stops a large flat
   navy field from reading as a flat vector fill. */
:root {
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--navy, .availability__card, .site-footer, .cta-band { isolation: isolate; }
.site-footer { position: relative; }
.section--navy::before, .availability__card::before, .site-footer::before,
.cta-band::before, .hero__shade::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: var(--grain); background-size: 180px 180px;
	opacity: .085; mix-blend-mode: overlay;
}
.amenities::before { content: ""; }

/* ---------- Headline reveal ----------
   Section titles arrive word by word from behind a mask, the same gesture the
   hero already uses. The padding/margin pair keeps descenders from clipping. */
.sw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.sw > i { display: inline-block; font-style: inherit; }
.js .sw > i { transform: translateY(105%); transition: transform .95s var(--ease-out); transition-delay: calc(var(--w) * .045s); }
.js .is-in .sw > i, .js [data-reveal].is-in .sw > i { transform: none; }
.no-js .sw > i { transform: none; }

/* ---------- Marquee ----------
   One continuous line of what the property actually is. Pauses on hover. */
.ticker { overflow: hidden; padding-block: 22px; border-block: 1px solid var(--c-line); background: var(--c-shell); }
.section--sand + .ticker, .ticker + .section--sand { border-color: var(--c-sand-2); }
.ticker__track { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; flex: none; }
.ticker__item {
	display: inline-flex; align-items: center; gap: 26px; padding-inline: 26px;
	font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--c-navy);
	white-space: nowrap;
}
.ticker__item::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-sun); opacity: .9; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker--navy { background: var(--c-navy); border-color: rgba(255, 255, 255, .12); }
.ticker--navy .ticker__item { color: rgba(255, 255, 255, .74); }
.ticker--navy .ticker__item::after { background: var(--c-sun-2); }

/* ---------- Photography reveals ----------
   Images wipe up from their own bottom edge instead of fading in. */
.js [data-reveal] .intro__img, .js [data-reveal] .split__media .frame,
.js [data-reveal] .map-frame, .js [data-stagger] .unit-card__media,
.js [data-stagger] .offer-card__media, .js [data-stagger] .exp-card,
.js [data-stagger] .strip__item {
	clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease-out);
}
.js [data-reveal].is-in .intro__img, .js [data-reveal].is-in .split__media .frame,
.js [data-reveal].is-in .map-frame, .js [data-stagger].is-in .unit-card__media,
.js [data-stagger].is-in .offer-card__media, .js [data-stagger].is-in .exp-card,
.js [data-stagger].is-in .strip__item { clip-path: inset(0 0 0 0); }

/* A slow drift on the big editorial images, driven from the scroll loop. */
.intro__img--main img, .split__media .frame img { will-change: transform; }

/* ---------- Cards ----------
   The top rule stays; what is new is a frame that draws itself on hover and a
   caption row that behaves like a contents line rather than a button bar. */
.unit-card, .offer-card { transition: border-top-color .45s var(--ease-out), transform .5s var(--ease-out); }
.unit-card:hover, .offer-card:hover { transform: translateY(-4px); }
.offer-card:hover { box-shadow: none; }
.unit-card__media, .offer-card__media { position: relative; }
.unit-card__media::after, .offer-card__media::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); opacity: 0;
	transition: opacity .5s var(--ease-out); pointer-events: none;
}
.unit-card:hover .unit-card__media::after, .offer-card:hover .offer-card__media::after { opacity: 1; }
.unit-card__body { padding: 22px 0 0; }
.offer-card__body { padding: 22px 0 0; }
.unit-card__meta { color: var(--c-brown); letter-spacing: .2em; font-weight: 600; font-size: .64rem; }
.offer-card__valid { color: var(--c-brown) !important; letter-spacing: .2em; font-size: .64rem !important; font-weight: 600; }
.unit-card__foot { border-top: 1px solid var(--c-line); }

/* Index numerals in the "why direct" row — larger, warmer. */
.direct-item::before { font-size: 2.1rem; color: var(--c-sand-2); margin-bottom: 22px; letter-spacing: -.03em; }
.direct-item:hover::before { color: var(--c-sun); transition: color .4s var(--ease-out); }

/* ---------- Links ---------- */
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.link-arrow .icon { transition: transform .45s var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(6px); }

/* ---------- Buttons ---------- */
.btn { letter-spacing: .14em; font-weight: 600; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(4, 21, 62, .8); }
.btn--sun:hover { box-shadow: 0 14px 30px -16px rgba(185, 26, 1, .75); }

/* ---------- Availability panel ---------- */
.availability__card { border-radius: var(--radius-lg); }
.availability__tool { border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(2px); }

/* ---------- Footer ---------- */
.footer-title { letter-spacing: .3em; font-weight: 600; }

/* ---------- Section rules ---------- */
.section + .section:not(.section--sand):not(.section--navy)::before {
	content: ""; position: absolute; inset: 0 var(--gutter) auto; height: 1px; background: var(--c-line); opacity: .55;
}
.section--navy + .section::before, .section--sand + .section::before { content: none; }

@media (prefers-reduced-motion: reduce) {
	.ticker__track { animation: none !important; width: 100%; }
	.ticker__group:nth-child(2) { display: none; }
	.ticker { padding-block: 16px; }
	.ticker__track { flex-wrap: wrap; justify-content: center; }
	.js .sw > i { transform: none !important; transition: none !important; }
	.js [data-reveal] .intro__img, .js [data-reveal] .split__media .frame,
	.js [data-reveal] .map-frame, .js [data-stagger] .unit-card__media,
	.js [data-stagger] .offer-card__media, .js [data-stagger] .exp-card,
	.js [data-stagger] .strip__item { clip-path: none !important; transition: none !important; }
	.unit-card:hover, .offer-card:hover { transform: none; }
}

/* The two big editorial images carry a drift set from the scroll loop; they hold
   a base scale so the crop does not jump as they enter the viewport. */
.intro__img--main img, .split__media .frame img,
.intro__img--main:hover img, .split__media .frame:hover img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
	.intro__img--main img, .split__media .frame img { transform: none !important; }
}

/* ==========================================================================
   Colour, distributed.
   The mark is a third gold, a fifth vermilion and the rest sea blues. The page
   was reading almost entirely navy-and-cream, with gold locked inside the one
   gradient. Every colour below now has a job, and the jobs are consistent:

     gold / amber   secondary accent — labels, numerals, icons, small marks
     sea / sky      interaction — links, focus, hover, anything clickable
     ember          conversion, and conversion only — one per screen
     sienna         warm hairlines and index numerals on light grounds
     ocean          a second dark ground, so the page is not one navy

   Contrast: gold is too light for small text on cream, so labels on light
   grounds take sienna and labels on dark grounds take amber.
   ========================================================================== */

/* ---------- A second dark ground ---------- */
.section--ocean { background: var(--c-ocean); }
.availability__card { background: var(--c-ocean); }
.cta-band { background: var(--c-navy); }

/* ---------- Labels ---------- */
.eyebrow { color: var(--c-sienna); }
.eyebrow--light, .section--navy .eyebrow, .hero .eyebrow,
.cta-band .eyebrow, .availability .eyebrow { color: var(--c-amber); }
.eyebrow::before { background: currentColor; opacity: .7; }

/* ---------- Numerals ---------- */
.direct-item::before { color: var(--c-sienna); opacity: .55; }
.direct-item:hover::before { color: var(--c-gold); opacity: 1; }
.stats dt { color: var(--c-sea); }
.stats--band dt { color: var(--c-amber); }
.hero__dot-num { color: inherit; }

/* ---------- Marks, chips and badges ----------
   The badge is the loudest small element on the page; it takes the logo's gold. */
.badge {
	background: var(--c-gold); color: #2A0F02; border: 0;
	font-weight: 700; letter-spacing: .16em;
}
.badge--sun { background: var(--c-gold); color: #2A0F02; border: 0; }
.unit-card__meta { color: var(--c-sienna); }
.offer-card__valid { color: var(--c-sienna) !important; }
.exp-card__detail { color: var(--c-amber) !important; }
.exp-row .exp-card__detail { color: var(--c-sienna) !important; }

/* ---------- Icons ----------
   Blue on light grounds, amber on dark — so an icon never sinks into its panel. */
.facts .icon, .fact-strip .icon, .amenity-grid .icon,
.check-list .icon, .book-card__secure .icon, .contact-list .icon { color: var(--c-sea); }
.section--navy .icon-circle, .section--ocean .icon-circle,
.amenity-list .icon-circle, .trust-list .icon,
.availability__note .icon { color: var(--c-amber); }
.amenity-list .icon-circle { border-color: rgba(227, 166, 38, .3); }

/* ---------- Interaction ---------- */
.link-arrow:hover, .accordion__item summary:hover,
.accordion__item[open] summary, .chip.is-active,
.contact-list--dark a:hover, .muted a, .cookie-notice a { color: var(--c-sea); }
.chip.is-active { border-color: var(--c-sea); }
.prose a { text-decoration-color: var(--c-gold); }
.prose a:hover { color: var(--c-sea); text-decoration-color: var(--c-sea); }
::selection { background: var(--c-gold); color: #2A0F02; }

/* The accordion's open marker carries the sun rather than the sea. */
.accordion__item[open] .accordion__icon {
	background: var(--c-gold); border-color: var(--c-gold); color: #2A0F02;
}
.accordion__icon { border-color: var(--c-sand-2); }

/* ---------- Warm hairlines ---------- */
.unit-card, .offer-card, .direct-item { border-top-color: var(--c-sienna); }
.unit-card:hover, .offer-card:hover, .direct-item:hover { border-top-color: var(--c-gold); }
.prose .is-style-note { border-left-color: var(--c-gold); }

/* ---------- The running band ----------
   Its separators cycle the three signature colours rather than repeating one. */
.ticker__item:nth-child(3n+1)::after { background: var(--c-gold); }
.ticker__item:nth-child(3n+2)::after { background: var(--c-sky); }
.ticker__item:nth-child(3n+3)::after { background: var(--c-ember); }
.ticker--navy .ticker__item { color: rgba(255, 255, 255, .8); }
.ticker--navy .ticker__item:nth-child(3n+1)::after { background: var(--c-amber); }
.ticker--navy .ticker__item:nth-child(3n+2)::after { background: var(--c-sky); }
.ticker--navy .ticker__item:nth-child(3n+3)::after { background: var(--c-ember); }

/* ---------- Footer ---------- */
.footer-title { color: var(--c-amber); opacity: .85; }
.site-footer a:hover { color: var(--c-amber); }

/* ---------- Header ---------- */
.primary-nav a::after { background: var(--c-amber); }
.site-header.is-scrolled .primary-nav a::after { background: var(--c-sea); }

/* ---------- Forms ---------- */
.booking-bar label { color: var(--c-sea); }
.booking-bar__nights { color: var(--c-ember); }
.booking-bar__field:focus-within { outline-color: var(--c-sea); }
:focus-visible { outline-color: var(--c-sea); }

/* ---------- Loader ---------- */
.site-loader__word { color: var(--c-sienna); }

/* ---------- Corrections after looking at it on the page ---------- */

/* The index numerals were legible but timid. */
.direct-item::before { opacity: .8; }

/* The closing band was a third navy in a row. It takes the logo's deep red
   instead — the warm end of the mark finally gets a ground of its own, and the
   page ends on a different temperature from the one it opened on. */
.cta-band { background: var(--c-maroon); }
.cta-band::after {
	background: linear-gradient(180deg, rgba(54, 5, 2, .62), rgba(54, 5, 2, .84));
}
.cta-band__media img { filter: saturate(1.05); }
.cta-band .eyebrow { color: var(--c-amber); }
.cta-band .btn--light { background: var(--c-shell); color: var(--c-maroon); }
.cta-band .btn--light:hover { background: var(--c-amber); color: #2A0F02; }
.cta-band .btn--ghost-light:hover { background: var(--c-amber); border-color: var(--c-amber); color: #2A0F02; }

/* The footer sits under that red band, so its rule reads as the horizon line. */
.site-footer { border-top-width: 2px; }

/* Vermilion on the deep-red band was red on red — the most important click on
   the page lost its edge. On this one ground the primary takes the sun's gold,
   which is both the louder contrast and the larger colour in the mark. */
.cta-band .btn--sun { background: var(--c-amber); color: #2A0F02; }
.cta-band .btn--sun:hover { background: var(--c-shell); color: var(--c-maroon); box-shadow: 0 14px 30px -16px rgba(227, 166, 38, .8); }

/* Gold on cream measures 2.9:1 — just under the 3:1 floor for non-text marks.
   A single darker step clears it without leaving the sun's range. */
:root { --c-gold-ink: #BE7705; }   /* 3.2:1 on the page ground */
.direct-item:hover::before { color: var(--c-gold-ink); }
.prose .is-style-note { border-left-color: var(--c-gold-ink); }

/* ==========================================================================
   Punch.
   The page was uniform: one container width, one card size, every photograph
   a polite 4:3. Uniform reads as soft however good the individual parts are.
   What follows breaks that rhythm — full-bleed photography at architectural
   scale, captions that carry a point, and display type large enough to stop
   someone scrolling.
   ========================================================================== */

/* ---------- The plate: a photograph the width of the window ---------- */
.plate {
	position: relative; isolation: isolate;
	min-height: clamp(520px, 86vh, 900px);
	display: flex; align-items: flex-end;
	color: var(--c-white); background: var(--c-navy);
	overflow: hidden;
}
.plate__media { position: absolute; inset: 0; z-index: -2; }
.plate__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.plate::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(105deg, rgba(8, 18, 44, .82) 0%, rgba(8, 18, 44, .42) 42%, rgba(8, 18, 44, 0) 76%),
		linear-gradient(0deg, rgba(8, 18, 44, .7) 0%, rgba(8, 18, 44, 0) 48%);
}
.plate--right { justify-content: flex-end; }
.plate--right::after {
	background:
		linear-gradient(255deg, rgba(8, 18, 44, .82) 0%, rgba(8, 18, 44, .42) 42%, rgba(8, 18, 44, 0) 76%),
		linear-gradient(0deg, rgba(8, 18, 44, .7) 0%, rgba(8, 18, 44, 0) 48%);
}
.plate__inner { padding-block: clamp(48px, 7vw, 96px); }
.plate__caption { margin: 0; max-width: 30ch; }
.plate--right .plate__caption { margin-left: auto; }

.plate__label {
	display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
	font-family: var(--f-sans); font-size: .64rem; font-weight: 600;
	letter-spacing: .3em; text-transform: uppercase; color: var(--c-amber);
}
.plate__label::before { content: ""; flex: none; width: 34px; height: 1px; background: currentColor; opacity: .8; }

.plate__title {
	margin: 0; font-family: var(--f-serif); font-weight: 400;
	font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -.025em;
	color: var(--c-white);
}
.plate__title em { font-style: normal; font-weight: 600; }
.plate__text { margin: 18px 0 0; max-width: 42ch; font-size: 1rem; color: rgba(255, 255, 255, .82); }

/* The plate carries the page's grain, like every other dark surface. */
.plate { isolation: isolate; }
.plate .plate__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: var(--grain); background-size: 180px 180px;
	opacity: .09; mix-blend-mode: overlay;
}

@media (max-width: 700px) {
	.plate { min-height: clamp(440px, 72vh, 620px); }
	.plate--right { justify-content: flex-start; }
	.plate--right .plate__caption { margin-left: 0; }
	.plate__caption { max-width: 100%; }
}

/* ---------- Scale ----------
   The hero was sized to be tasteful. It is now sized to be seen. */
.hero--full .hero__title { font-size: clamp(3.2rem, 8.4vw, 8rem); line-height: .92; letter-spacing: -.035em; }
.hero--full .hero__subtitle { font-size: clamp(1.06rem, 1.5vw, 1.28rem); max-width: 48ch; }
.section-title { font-size: clamp(2.5rem, 4.4vw, 4.1rem); }
.cta-band__title { font-size: clamp(3rem, 6.4vw, 6rem); }

/* ---------- Gallery captions ----------
   A photograph with a caption is evidence. Without one it is wallpaper. */
.masonry__item { position: relative; display: block; }
.masonry__caption {
	display: block; margin: 10px 2px 0;
	font-family: var(--f-sans); font-size: .72rem; font-weight: 500;
	letter-spacing: .04em; line-height: 1.45; color: var(--c-muted);
}
.masonry__caption b {
	display: block; font-weight: 600; font-size: .62rem; letter-spacing: .22em;
	text-transform: uppercase; color: var(--c-sienna); margin-bottom: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.plate__media img { transform: none !important; }
}

/* The plate image is scaled so its drift never exposes an edge. */
.plate__media img { transform: scale(1.1); }

/* ==========================================================================
   Mobile.
   Found by walking the site at 375px rather than by shrinking a desktop layout.
   Six real defects, in the order they hurt: content permanently hidden behind
   the sticky bar; the booking card pushed below the fold; slide numbers
   orphaned at the top of the screen; dead space between every section; the
   running band cut off mid-word; and the intro collage colliding with itself.
   ========================================================================== */

@media (max-width: 900px) {

	/* 1. The fixed booking bar sat on top of the last 90px of every page, so the
	      final line of any section was unreadable. The page now ends above it. */
	.site-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
	.site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

	/* 2. Hero: the card is the point of the screen, so it has to be on it.
	      Shorter hero, tighter headline, a subtitle that stops at two lines. */
	.hero--full { min-height: auto; }
	.hero--full .hero__inner { padding-top: calc(var(--header-h) + 34px); padding-bottom: 30px; }
	.hero--full .hero__title { font-size: clamp(2.5rem, 11vw, 3.4rem); line-height: .98; }
	/* Clamping this truncated the sentence mid-word with an ellipsis, which reads
	   as broken rather than concise. Four honest lines beat three and a stump. */
	.hero--full .hero__subtitle { margin-top: 15px; font-size: .97rem; line-height: 1.48; max-width: 36ch; }
	.hero__booking { margin-top: -18px; padding-bottom: 0; }

	/* 3. The 01 / 02 / 03 slide counter floated in dead space above the headline
	      and meant nothing on a phone. The slideshow still runs. */
	.hero__slidenav { display: none; }

	/* 4. Section rhythm. The desktop measure left half-screen gaps on a phone. */
	:root { --space: clamp(52px, 11vw, 76px); }
	.section--tight { padding-block: clamp(36px, 8vw, 52px); }
	.section-head, .section-head-row { margin-bottom: 28px; }
	.intro__grid, .location-teaser__grid, .split, .faq-teaser__grid, .amenities__grid { gap: 36px; }

	/* 5. The running band was cut mid-word. Smaller, tighter, closer together. */
	.ticker { padding-block: 15px; }
	.ticker__item { font-size: .6rem; letter-spacing: .18em; gap: 16px; padding-inline: 16px; }
	.ticker__item::after { width: 4px; height: 4px; }

	/* 6. The intro collage overlapped its own caption stamp. On a phone the two
	      images stack honestly and the stamp sits under them. */
	.intro__media { padding: 0; }
	.intro__img--main { aspect-ratio: 4 / 3; }
	.intro__img--accent {
		position: relative; right: auto; bottom: auto; width: 64%;
		margin: -34px 6px 0 auto; border-width: 5px;
	}
	.intro__stamp { margin-top: 18px; }

	/* Touch targets: nothing tappable smaller than 44px. */
	.link-arrow { min-height: 44px; align-items: center; }
	.accordion__item summary { padding-block: 18px; }
	.footer-menu a, .footer-legal a { display: inline-block; padding-block: 6px; }

	/* Cards get a little more room to breathe between them. */
	.unit-grid, .offer-grid { gap: 30px; }
	.unit-card__body, .offer-card__body { padding-top: 18px; }
}

@media (max-width: 600px) {
	.hero--full .hero__title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
	.plate { min-height: clamp(400px, 64vh, 560px); }
	.plate__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
	.plate__inner { padding-block: 40px; }
	.section-title { font-size: clamp(1.95rem, 8.2vw, 2.6rem); }
	.stats { gap: 18px 26px; }
	.stats dt { font-size: 2.5rem; }
	.stats dd { font-size: .78rem; }
}

/* ==========================================================================
   All-grotesque.
   Instrument Serif is gone. Display is now Familjen Grotesk — a Swedish
   grotesque with a single-storey 'a' and tight apertures, which is what gives
   it character where a neutral sans would read generic. A grotesque at display
   size needs the opposite treatment to a high-contrast serif: more weight,
   much tighter tracking, and slightly less size for the same presence.
   ========================================================================== */

.section-title, .hero__title, .cta-band__title, .unit-top__title, .h-sub,
.prose h2, .unit-card__title, .exp-row h2, .exp-card h3, .offer-card__body h3,
.direct-item h3, .stats dt, .booking-bar__value, .booking-bar select,
.mobile-menu a, .map__overlay p, .plate__title {
	font-family: var(--f-display);
	font-weight: 500;
	letter-spacing: -.03em;
}
.hero__title, .cta-band__title, .plate__title { font-weight: 600; letter-spacing: -.038em; }
.stats dt { font-weight: 600; letter-spacing: -.045em; }

/* Italic is now a real italic rather than a second style of letterform, so the
   emphasis in a headline is quieter. Lifting the weight keeps it distinct. */
.hero__title em, .section-title em, .cta-band__title em, .plate__title em,
.prose h2 em { font-style: normal; font-weight: 600; }

/* Sizes come down: the grotesque sets wider and darker than the serif did. */
.hero--full .hero__title { font-size: clamp(3rem, 7.4vw, 6.8rem); line-height: .96; }
.section-title { font-size: clamp(2.2rem, 3.7vw, 3.4rem); line-height: 1.05; }
.cta-band__title { font-size: clamp(2.6rem, 5.2vw, 4.8rem); line-height: 1.02; }
.plate__title { font-size: clamp(2.1rem, 3.9vw, 3.5rem); line-height: 1.04; }
.unit-card__title { font-size: 1.7rem; }
.stats dt { font-size: 3rem; }
.h-sub { font-size: clamp(1.5rem, 2.1vw, 1.95rem); }
.mobile-menu a { font-size: 1.75rem; font-weight: 500; }

/* The two faces are close cousins, so body copy leans on size and colour for
   separation rather than on a change of species. */
body { font-size: 16.5px; line-height: 1.62; letter-spacing: -.003em; }
.section-lead { font-size: 1.05rem; line-height: 1.55; }

@media (max-width: 900px) {
	.hero--full .hero__title { font-size: clamp(2.4rem, 10.5vw, 3.2rem); letter-spacing: -.04em; }
	.section-title { font-size: clamp(1.85rem, 7.6vw, 2.4rem); }
	.mobile-menu a { font-size: 1.55rem; }
	.stats dt { font-size: 2.4rem; }
}

/* ==========================================================================
   Drawn marks.
   Less text means the page needs something other than words to carry rhythm.
   These are line drawings — a horizon, a sun arc — set as backgrounds so they
   cost nothing and scale to any width. Generic motifs drawn for this site;
   the logo itself is never redrawn, only placed.
   ========================================================================== */

:root {
	/* A horizon: two long swells, drawn in one stroke. */
	--draw-horizon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' fill='none' stroke='%2373381C' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 22c60 0 60-11 120-11s60 11 120 11 60-11 120-11 60 11 120 11 60-11 120-11 60 11 120 11 60-11 120-11 60 11 120 11 60-11 120-11 60 11 120 11'/%3E%3Cpath d='M60 32c60 0 60-8 120-8s60 8 120 8 60-8 120-8 60 8 120 8 60-8 120-8 60 8 120 8 60-8 120-8 60 8 120 8' opacity='.45'/%3E%3C/svg%3E");
	/* A sun, half-risen, with two birds — the brand's own vocabulary, drawn fresh. */
	--draw-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64' fill='none' stroke='%23C87E05' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M28 46a32 32 0 0 1 64 0'/%3E%3Cpath d='M8 46h104' opacity='.5'/%3E%3Cpath d='M44 20c4-4 8-4 12 0M64 14c4-4 8-4 12 0' opacity='.8'/%3E%3C/svg%3E");
}

/* The divider between two pale sections becomes a drawn horizon instead of a
   hairline. Same job, but it reads as a mark rather than a border. */
.section + .section:not(.section--sand):not(.section--navy)::before {
	height: 20px; background: var(--draw-horizon) center / 1200px 20px repeat-x;
	opacity: .22; inset: -10px var(--gutter) auto;
}

/* A section head can carry the sun mark above its label. */
.section-head--center .eyebrow::after,
.section-head--mark .eyebrow::after { content: none; }
.section-mark {
	display: block; width: 104px; height: 56px; margin: 0 0 18px;
	background: var(--draw-sun) left center / contain no-repeat;
}
.section-head--center .section-mark, .center .section-mark { margin-inline: auto; }
.section--navy .section-mark, .section--ocean .section-mark, .cta-band .section-mark {
	filter: brightness(1.5) saturate(.9);
}

@media (max-width: 900px) {
	.section + .section:not(.section--sand):not(.section--navy)::before { height: 14px; background-size: 800px 14px; }
	.section-mark { width: 84px; height: 44px; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .section-mark { transition: none; } }

/* The grotesque sets tighter than the serif did, so the space a heading used to
   inherit from its own line-height has gone. Give it back explicitly. */
.prose h2 { margin-bottom: .5em; line-height: 1.08; }
.prose > h2 + p { margin-top: 0; }
.prose > * + * { margin-top: 1.15em; }
.prose p + p { margin-top: .9em; }
.section-head .section-title + .section-lead { margin-top: 20px; }

/* ==========================================================================
   Tonal scales.
   Until now every brand colour was a single flat value, so every interactive
   state had to be faked with opacity. These are real ramps built from the
   sampled logo colours — hue held, lightness stepped, saturation eased at the
   pale end so tints stay clean. Surfaces, borders, hovers, selected and focus
   states now each have a correct colour instead of a transparent approximation.
   Navy 300-400 are deliberately unused: the hue drifts to periwinkle up there.
   ========================================================================== */

:root {
	--navy-50:#EEF2FE;  --navy-100:#DAE4FD; --navy-600:#263C73; --navy-700:#202F55;
	--navy-800:#182139; --navy-900:#04102F;

	--sea-50:#EFF9FD;  --sea-100:#DEF1FA; --sea-200:#BEE3F4; --sea-300:#8AC9E5;
	--sea-400:#51A6CD; --sea-600:#2D586C; --sea-700:#114A64; --sea-800:#0B3446;

	--gold-50:#FFF8EE;  --gold-100:#FDF0DA; --gold-200:#FAE1B7; --gold-300:#F0C580;
	--gold-400:#DBA143; --gold-600:#905D09; --gold-700:#704706; --gold-800:#4F3203;

	--ember-50:#FFF2ED;  --ember-100:#FEE2DA; --ember-200:#FBC7B6; --ember-400:#DD6641;
	--ember-600:#912808; --ember-700:#711E05;

	--sienna-600:#654434; --sienna-700:#5B2F1A;

	/* Elevation, now a scale rather than one shadow reused everywhere. */
	--e1: 0 1px 2px rgba(2,19,63,.05), 0 1px 3px rgba(2,19,63,.06);
	--e2: 0 2px 6px -1px rgba(2,19,63,.07), 0 4px 12px -2px rgba(2,19,63,.08);
	--e3: 0 8px 20px -6px rgba(2,19,63,.12), 0 18px 40px -20px rgba(2,19,63,.20);
	--e4: 0 20px 48px -12px rgba(2,19,63,.20), 0 40px 80px -40px rgba(2,19,63,.30);
}

/* ---------- Surfaces and borders now come off the ramps ---------- */
.unit-card__media, .offer-card__media, .exp-card, .strip__item,
.map-frame, .split__media .frame, .intro__img { box-shadow: var(--e2); }
.unit-card:hover .unit-card__media, .offer-card:hover .offer-card__media { box-shadow: var(--e3); }
.availability__tool, .booking-bar--hero { box-shadow: var(--e4); }
.accordion__icon { border-color: var(--sea-200); }
.booking-bar--hero { border-color: var(--sea-200); }

/* ---------- Interactive states ---------- */
.booking-bar--hero .booking-bar__field:hover,
.booking-bar--hero .booking-bar__field:focus-within { background: var(--sea-50); }
.accordion__item summary:hover { color: var(--sea-700); }
.accordion__item:hover { background: linear-gradient(90deg, var(--sea-50), transparent 60%); }
.masonry__item:hover::after { opacity: .08; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible {
	outline: 2px solid var(--sea-400); outline-offset: 3px;
}
.btn--ghost:hover { background: var(--navy-700); border-color: var(--navy-700); }
.chip:hover { border-color: var(--sea-400); background: var(--sea-50); }
.direct-item { border-top-color: var(--sienna-600); }
.direct-item:hover { border-top-color: var(--gold-400); }

/* Selected / active now has a real colour instead of an opacity guess. */
.chip.is-active { background: var(--gold-100); border-color: var(--gold-400); color: var(--gold-800); }
.hero__dot.is-active { color: var(--gold-300); }

/* ==========================================================================
   The stay.
   A semi-hotel booking flow remembers what you asked for. Dates chosen
   anywhere on the site are kept, restored into every search box, shown in a
   strip under the header, and carried into every booking link — so the guest
   never types the same dates twice. It never claims availability: only
   Lodgify knows that, and pretending otherwise would be a lie at the worst
   possible moment.
   ========================================================================== */

.stay-bar {
	/* Inside the header, in normal flow. It previously tried to position itself
	   under a fixed header using a custom property; when that property was
	   missing the strip fell to top:auto and landed across the navigation.
	   Nesting it removes the offset, the property and the failure mode. */
	display: flex; align-items: center; justify-content: center; gap: 18px;
	padding: 9px var(--gutter);
	background: var(--navy-900); color: #fff;
	border-top: 0 solid rgba(219, 161, 67, .55);
	font-size: .78rem; letter-spacing: .01em;
	height: 0; overflow: hidden; padding-block: 0;
	transition: height .35s var(--ease-out), padding-block .35s var(--ease-out);
}
.stay-bar.is-on { height: 44px; padding-block: 9px; border-top-width: 1px; }
.stay-bar__dates { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.stay-bar__dates b { font-weight: 600; color: var(--gold-300); }
.stay-bar__sep { width: 1px; height: 15px; background: rgba(255,255,255,.22); }
.stay-bar__meta { color: rgba(255,255,255,.72); }
.stay-bar__act {
	margin-left: 4px; padding: 6px 16px; border-radius: 999px;
	background: var(--gold-400); color: #2A0F02; font-weight: 700;
	font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
	transition: background .25s var(--ease-out);
}
.stay-bar__act:hover { background: #fff; }
.stay-bar__clear {
	background: none; border: 0; padding: 6px; color: rgba(255,255,255,.55);
	font-size: .72rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.stay-bar__clear:hover { color: #fff; }

/* A card whose dates are already known says so, quietly. */
.unit-card__stay {
	display: none; align-items: center; gap: 7px; margin-top: 10px;
	font-size: .74rem; font-weight: 600; color: var(--sea-700);
}
.has-stay .unit-card__stay { display: inline-flex; }
.unit-card__stay::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400);
}

@media (max-width: 900px) {
	/* padding-inline only: the shorthand would re-add block padding and leave a
	   16px sliver of the strip visible when it is supposed to be collapsed. */
	.stay-bar { font-size: .72rem; gap: 10px; padding-inline: 14px; flex-wrap: nowrap; }
	.stay-bar.is-on { padding-block: 8px; }
	.stay-bar__meta, .stay-bar__clear { display: none; }
	.stay-bar__act { padding: 6px 12px; font-size: .64rem; }
	.site-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .stay-bar { transition: none; } }

/* ==========================================================================
   Polish.
   The tonal ramps exist; this is where they earn their keep. Everything below
   is a state that was previously approximated with opacity, or a surface that
   had no considered treatment at all.
   ========================================================================== */

/* ---------- Cards read as objects, not as floating images ---------- */
.unit-card, .offer-card {
	padding: 0 0 4px; border-top: 0; position: relative;
	transition: transform .5s var(--ease-out);
}
.unit-card::before, .offer-card::before {
	content: ""; position: absolute; inset: -14px -14px -6px; z-index: -1;
	border-radius: var(--radius-lg); background: transparent;
	transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.unit-card:hover::before, .offer-card:hover::before {
	background: #fff; box-shadow: var(--e3);
}
.unit-card__media, .offer-card__media { border-radius: var(--radius); }

/* The badge stops floating over the photograph and sits on the card's edge. */
.badge {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	padding: 7px 13px; font-size: .58rem; border-radius: 999px;
	box-shadow: 0 2px 8px -2px rgba(42,15,2,.45);
}

/* Facts become a quiet rule-separated row rather than loose icons. */
.unit-card .facts {
	gap: 6px 14px; padding: 12px 0 0; margin: 14px 0 0;
	border-top: 1px solid var(--sea-100);
}
.unit-card .facts li { font-size: .8rem; font-weight: 600; color: var(--navy-700); }
.unit-card__foot { border-top: 1px solid var(--sea-100); padding-top: 14px; }

/* ---------- The search box is the most important object on the page ---------- */
.booking-bar--hero { border-radius: var(--radius-lg); }
.booking-bar--hero .booking-bar__field + .booking-bar__field::before { background: var(--sea-100); }
.booking-bar__submit { border-radius: 0; font-weight: 700; }
.booking-bar__submit:hover { background: var(--ember-600); }
.booking-bar__value { transition: color .2s; }
.booking-bar__field:focus-within .booking-bar__value { color: var(--sea-700); }
.booking-bar__nights {
	padding: 3px 9px; border-radius: 999px; background: var(--gold-100);
	color: var(--gold-800); font-weight: 700;
}

/* ---------- Accordion: a real open state ---------- */
.accordion__item[open] { background: var(--sea-50); }
.accordion__item[open] summary { color: var(--sea-800); }
.accordion__item summary { padding-inline: 16px; border-radius: var(--radius-sm); }
.accordion__body { padding-inline: 16px 56px; }

/* ---------- Footer gets structure instead of four equal columns ---------- */
.site-footer { border-top-width: 3px; }
.footer-grid { gap: 44px 56px; }
.footer-menu a, .footer-legal a { transition: color .2s, padding-left .25s var(--ease-out); }
.footer-menu a:hover { color: var(--gold-300); padding-left: 5px; }

/* ---------- Links carry a drawn underline that grows ---------- */
.prose a {
	background: linear-gradient(var(--gold-400), var(--gold-400)) 0 100% / 0 1.5px no-repeat;
	text-decoration: none; transition: background-size .4s var(--ease-out), color .25s;
	padding-bottom: 2px;
}
.prose a:hover { background-size: 100% 1.5px; color: var(--sea-700); }

/* ---------- Images warm very slightly as they enter, then settle ---------- */
.unit-card__media img, .offer-card__media img, .exp-card img {
	transition: transform 1.1s var(--ease-out), filter .6s var(--ease-out);
}
.unit-card:hover .unit-card__media img,
.offer-card:hover .offer-card__media img { filter: saturate(1.06); }

@media (max-width: 900px) {
	.unit-card::before, .offer-card::before { content: none; }
	.badge { top: 10px; left: 10px; }
	.accordion__item summary { padding-inline: 12px; }
	.accordion__body { padding-inline: 12px 16px; }
}

/* The header condenses to 72px on scroll; the stay bar follows it. */

/* The nights pill was absolutely positioned over the departure value. At phone
   width the field is narrow enough that it clipped the date — "Fri 19 M". It
   now sits in the flow underneath instead of on top. */
@media (max-width: 900px) {
	.booking-bar--hero .booking-bar__nights,
	.booking-bar--card .booking-bar__nights {
		position: static; display: inline-block; margin-top: 6px;
		right: auto; bottom: auto;
	}
	.booking-bar--hero .booking-bar__field--date { padding-bottom: 14px; }
}

/* The stay bar's admin-bar offset assumed the 32px desktop bar. WordPress serves
   a 46px bar below 782px, which pushed the strip 14px up into the header — the
   exact gap seen on a phone. Below 600px the admin bar is not fixed at all, so
   once the page scrolls there is no offset to add. Mirrors the header's own rules.
   Visitors never see the admin bar; this is for the client's own preview. */

/* Belt and braces: even with no custom property at all, the strip is a block in
   normal flow below the header rather than a fixed element with top:auto. */

/* With a stay showing, the header is 44px taller — the hero's first line clears it. */
html.has-stay .hero__inner { padding-top: calc(var(--header-h) + 104px); }
@media (max-width: 900px) {
	.stay-bar.is-on { height: 40px; }
	html.has-stay .hero--full .hero__inner { padding-top: calc(var(--header-h) + 74px); }
}

/* ==========================================================================
   1.24 — Chapters.
   The home page rebuilt as seven numbered chapters, each doing one job. Fewer
   sections, denser composition: a bento that proves the promise in one screen,
   product cards that read as bookable objects, a booking chapter that explains
   payment, and a film strip for the rooms. Everything is drawn from the logo's
   tonal ramps defined above.
   ========================================================================== */

/* A hidden nights pill must stay hidden: the mobile rule gave it display, which
   beat the [hidden] attribute and left an empty gold bar under "Departure". */
.booking-bar__nights[hidden] { display: none !important; }

/* ---------- Rhythm: the chapters breathe less than the old sections ---------- */
.glance, .stays, .booking-how, .beyond, .offers-teaser, .film, .know {
	padding-block: clamp(72px, 8.4vw, 124px);
}
.hero:has(.hero__booking) + .glance { padding-top: clamp(120px, 11vw, 176px); }

/* ---------- Chapter head ---------- */
.chapter { position: relative; max-width: 780px; margin: 0 0 clamp(34px, 4vw, 56px); }
.chapter-row {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 22px 40px; flex-wrap: wrap; margin-bottom: clamp(34px, 4vw, 56px);
}
.chapter-row .chapter { margin-bottom: 0; }
.chapter-row > .btn { flex: none; }
.chapter__no {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 26px; padding: 0 10px; margin-right: 12px;
	border: 1px solid var(--gold-300); border-radius: 999px;
	font-family: var(--f-display); font-size: .76rem; font-weight: 700;
	letter-spacing: .02em; color: var(--gold-700); vertical-align: middle;
}
.chapter__label {
	display: inline; margin: 0; vertical-align: middle;
	font-size: .68rem; font-weight: 600; letter-spacing: .26em;
	text-transform: uppercase; color: var(--c-sienna);
}
.chapter__title {
	margin: 18px 0 0; font-family: var(--f-display); font-weight: 600;
	font-size: clamp(2.3rem, 4.5vw, 4.1rem); line-height: 1; letter-spacing: -.042em;
	color: var(--c-navy); text-wrap: balance;
}
.chapter__title em { font-style: normal; font-weight: 700; color: var(--c-brand-orange); }
.chapter__lead {
	margin: 18px 0 0; max-width: 52ch;
	font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; color: var(--c-muted);
}
.chapter--light .chapter__no { color: var(--c-amber); border-color: rgba(227, 166, 38, .45); }
.chapter--light .chapter__label { color: var(--gold-300); }
.chapter--light .chapter__title { color: #fff; }
.chapter--light .chapter__title em { color: var(--c-amber); }
.chapter--light .chapter__lead { color: rgba(255, 255, 255, .74); }

/* ---------- 01 · Glance: one screen that proves the promise ---------- */
.bento {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(230px, 1fr));
	gap: clamp(12px, 1.4vw, 18px);
}
.bento__tile {
	position: relative; margin: 0; min-height: 230px;
	border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
}
.bento__tile--hero { grid-column: span 2; grid-row: span 2; }
.bento__tile--photo { background: var(--c-sand-2); }
.bento__tile--photo img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s var(--ease-out);
}
.bento__tile--photo:hover img { transform: scale(1.045); }
.bento__tile--photo figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 1; }
.bento__tag {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
	border-radius: 999px; background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	font-size: .74rem; font-weight: 600; color: var(--c-navy); box-shadow: var(--e2);
}
.bento__tag .icon { width: 14px; height: 14px; color: var(--c-ember); }
.bento__tile--stat {
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(20px, 2vw, 28px);
}
.bento__tile--stat > .icon { position: absolute; top: 22px; left: 22px; width: 26px; height: 26px; }
.bento__num {
	display: block; font-family: var(--f-display); font-weight: 600;
	font-size: clamp(3rem, 5.2vw, 4.8rem); line-height: .88; letter-spacing: -.055em;
}
.bento__num small { margin-left: 5px; font-size: .34em; font-weight: 600; letter-spacing: 0; }
.bento__cap { display: block; margin-top: 12px; max-width: 22ch; font-size: .9rem; line-height: 1.4; }
.bento__tile--sea { background: var(--sea-100); color: var(--sea-800); }
.bento__tile--sea > .icon { color: var(--c-sea); }
.bento__tile--navy { background: var(--c-navy); color: #fff; }
.bento__tile--navy .bento__cap { color: rgba(255, 255, 255, .76); }
.bento__tile--navy > .icon { color: var(--c-amber); }
.bento__tile--sun { background: var(--gold-100); color: var(--gold-800); }
.bento__tile--sun > .icon { color: var(--c-ember); }
.bento__tile--sun::after {
	content: ""; position: absolute; right: -8px; top: 16px; width: 130px; height: 70px;
	background: var(--draw-sun) no-repeat center / contain; opacity: .75; pointer-events: none;
}
.bento__tile--navy::after {
	content: ""; position: absolute; inset: auto -30% -60% auto; width: 90%; aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(227, 166, 38, .28), transparent 70%);
	pointer-events: none; z-index: -1;
}

.inclusions {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: clamp(20px, 2.2vw, 28px) 0 0; padding: 0; list-style: none;
}
.inclusions li {
	display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px;
	border-radius: 999px; background: #fff; border: 1px solid var(--sea-100);
	box-shadow: var(--e1); font-size: .86rem; font-weight: 600; color: var(--navy-700);
}
.inclusions .icon { width: 18px; height: 18px; color: var(--c-sea); }

/* ---------- 02 · Residences: cards that read as bookable objects ---------- */
.unit-grid--rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.unit-card {
	padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden;
	background: #fff; box-shadow: var(--e2);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.unit-card::before { content: none; }
.unit-card:hover { transform: translateY(-6px); box-shadow: var(--e4); }
.unit-card__media { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none !important; }
.unit-card__media::after {
	opacity: 1 !important;
	background: linear-gradient(0deg, rgba(4, 16, 47, .62) 0%, rgba(4, 16, 47, 0) 44%) !important;
}
.unit-card__chips {
	position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
	display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.unit-card__chips li {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
	border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
	font-size: .74rem; font-weight: 600; color: #fff;
}
.unit-card__chips .icon { width: 14px; height: 14px; }
.unit-card__body { padding: 22px 24px 20px; }
.unit-card__title { font-size: 1.62rem; }
.unit-card__excerpt {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.unit-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sea-100); }
.unit-card__body > .unit-card__excerpt + .unit-card__stay,
.unit-card__body > .unit-card__excerpt + .unit-card__foot { margin-top: 18px; }
.unit-card .price-note { font-size: .82rem; font-weight: 600; color: var(--c-muted); }
.unit-card__go {
	position: relative; z-index: 1; flex: none; display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%; background: var(--c-navy); color: #fff;
	transition: background .3s, transform .45s var(--ease-out);
}
.unit-card__go .icon { width: 18px; height: 18px; }
.unit-card:hover .unit-card__go, .unit-card__go:focus-visible { background: var(--c-ember); transform: rotate(-45deg); }

/* ---------- The plate: one line of display type, not four ---------- */
.plate__caption { max-width: min(100%, 780px); }
.plate__title { text-wrap: balance; }

/* ---------- 03 · Book direct ---------- */
.booking-how { background: var(--navy-900); overflow: hidden; }
.booking-how::after {
	content: ""; position: absolute; right: -18%; bottom: -40%; z-index: -1;
	width: 70vw; aspect-ratio: 1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(227, 166, 38, .14), rgba(187, 46, 2, .06) 55%, transparent 72%);
}
.booking-how__grid {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
	gap: 28px clamp(40px, 6vw, 96px); align-items: start;
}
.booking-how .chapter { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.booking-how__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.link-arrow--light { color: #fff; }
.link-arrow--light:hover { color: var(--c-amber); }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.step {
	position: relative; padding: 28px 26px 26px; border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
	transition: background .4s, border-color .4s, transform .5s var(--ease-out);
}
.step:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .3); transform: translateY(-4px); }
.step__no {
	position: absolute; top: 22px; right: 24px;
	font-family: var(--f-display); font-size: 2.7rem; font-weight: 600; line-height: 1; letter-spacing: -.04em;
	color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .3);
}
.step__icon {
	display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 28px;
	border-radius: 15px; color: #fff;
	background: var(--c-brand-navy);
	box-shadow: 0 8px 18px -10px rgba(2, 19, 63, .7);
}
/* Each of the four steps gets its own flat logo colour — no gradient. The
   fourth swaps to a white chip with a navy glyph, since solid navy would
   vanish against this section's own navy ground. */
.step:nth-child(1) .step__icon { background: var(--c-brand-yellow); color: #2A1A02; box-shadow: 0 8px 18px -10px rgba(227, 166, 38, .6); }
.step:nth-child(2) .step__icon { background: var(--c-brand-blue); color: #04263A; box-shadow: 0 8px 18px -10px rgba(94, 194, 232, .55); }
.step:nth-child(3) .step__icon { background: var(--c-brand-orange); color: #fff; box-shadow: 0 8px 18px -10px rgba(232, 103, 42, .6); }
.step:nth-child(4) .step__icon { background: var(--c-shell); color: var(--c-brand-navy); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .3); }
.step__icon .icon { width: 22px; height: 22px; }
.step h3 { margin: 0; font-size: 1.24rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.step p { margin: 8px 0 0; font-size: .92rem; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.booking-how__links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.booking-how__links a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
	border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
	font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .88);
	transition: border-color .25s, color .25s, background .25s;
}
.booking-how__links a:hover { border-color: var(--c-amber); color: var(--c-amber); }

/* ---------- 04 · Beyond: a bento of the region ---------- */
.xp-bento {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(220px, 20vw, 290px); gap: clamp(12px, 1.4vw, 18px);
}
.xp-tile {
	position: relative; display: block; overflow: hidden; isolation: isolate;
	border-radius: var(--radius-lg); background: var(--c-navy); color: #fff;
}
.xp-tile--1 { grid-column: span 2; grid-row: span 2; }
.xp-tile img {
	position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.2s var(--ease-out);
}
.xp-tile::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(0deg, rgba(4, 16, 47, .86) 0%, rgba(4, 16, 47, .28) 46%, rgba(4, 16, 47, 0) 70%);
}
.xp-tile:hover img { transform: scale(1.06); }
.xp-tile__body { position: absolute; left: 22px; right: 72px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.xp-tile--1 .xp-tile__body { left: 30px; bottom: 28px; right: 90px; }
.xp-tile__detail { font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-300); }
.xp-tile__title { font-family: var(--f-display); font-size: 1.42rem; font-weight: 600; line-height: 1.06; letter-spacing: -.025em; }
.xp-tile--1 .xp-tile__title { font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1; }
.xp-tile__text { max-width: 44ch; margin-top: 4px; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.xp-tile__go {
	position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	transition: background .3s, border-color .3s, transform .45s var(--ease-out);
}
.xp-tile__go .icon { width: 18px; height: 18px; }
.xp-tile:hover .xp-tile__go, .xp-tile:focus-visible .xp-tile__go { background: var(--c-ember); border-color: var(--c-ember); transform: rotate(-45deg); }
.credit {
	position: absolute; top: 12px; right: 14px; z-index: 1;
	font-size: .6rem; letter-spacing: .03em; color: rgba(255, 255, 255, .8);
	text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* ---------- Illustrated mood board (placed beside real photography) ---------- */
.illus-strip { margin-top: clamp(28px, 3vw, 40px); }
.illus-strip__label {
	margin: 0 0 16px; max-width: 46ch; font-size: .84rem; line-height: 1.5;
	color: var(--c-muted); font-style: normal;
}
.illus-strip__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.illus-chip {
	position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
	overflow: hidden; isolation: isolate; box-shadow: var(--shadow-sm);
}
.illus-chip::before {
	content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 4px;
}
.illus-chip--yellow::before { background: var(--c-brand-yellow); }
.illus-chip--blue::before { background: var(--c-brand-blue); }
.illus-chip--orange::before { background: var(--c-brand-orange); }
.illus-chip--navy::before { background: var(--c-brand-navy); }
.illus-chip img { width: 100%; height: 100%; object-fit: cover; }
.illus-chip figcaption {
	position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 4px 11px;
	border-radius: 999px; background: rgba(255, 255, 255, .92);
	font-size: .7rem; font-weight: 600; color: var(--c-navy);
}
@media (max-width: 900px) {
	.illus-strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.illus-strip__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.illus-chip figcaption { font-size: .64rem; padding: 3px 9px; }
}

/* ---------- 05 · Rates ---------- */
.offer-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer-grid--compact .offer-card {
	padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden;
	background: #fff; box-shadow: var(--e2);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.offer-grid--compact .offer-card::before { content: none; }
.offer-grid--compact .offer-card:hover { transform: translateY(-6px); box-shadow: var(--e4); }
.offer-grid--compact .offer-card__media { aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none !important; }
.offer-grid--compact .offer-card__body { padding: 22px 24px 24px; }
.offer-grid--compact .offer-card__body h3 { font-size: 1.45rem; }

/* ---------- 06 · Film ---------- */
.film { background: var(--c-navy-deep); color: #fff; overflow: hidden; isolation: isolate; }
.film__nav { display: flex; align-items: center; gap: 10px; }
.film__btn {
	display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
	border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: transparent;
	color: #fff; cursor: pointer; transition: background .25s, color .25s, opacity .25s;
}
.film__btn:hover:not(:disabled) { background: #fff; color: var(--c-navy); }
.film__btn:disabled { opacity: .3; cursor: default; }
.film__btn .icon { width: 18px; height: 18px; }
.film__nav .btn { margin-left: 8px; }
.film__track {
	--edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
	display: flex; gap: clamp(12px, 1.4vw, 18px);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
	padding-inline: var(--edge); scrollbar-width: none;
}
.film__track::-webkit-scrollbar { display: none; }
.film__track:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 4px; }
.film__item {
	position: relative; flex: 0 0 auto; width: clamp(240px, 24vw, 340px); aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg); overflow: hidden; scroll-snap-align: start; background: var(--navy-800);
}
.film__item--wide { width: clamp(300px, 40vw, 580px); }
.film__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.film__item:hover img { transform: scale(1.05); }
.film__cap {
	position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px;
	background: rgba(4, 16, 47, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font-size: .74rem; font-weight: 600; color: #fff;
	opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.film__item:hover .film__cap, .film__item:focus-visible .film__cap { opacity: 1; transform: none; }
@media (hover: none) { .film__cap { opacity: 1; transform: none; } }

/* ---------- 07 · Good to know ---------- */
.know__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.place-card { position: relative; margin: 0 0 22px; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; background: var(--c-sand-2); }
.place-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.place-card::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(0deg, rgba(4, 16, 47, .55), rgba(4, 16, 47, 0) 50%);
}
.place-card figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.place-card__facts {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0;
	border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.place-card__facts div { padding: 14px 16px; background: rgba(4, 16, 47, .5); }
.place-card__facts dt { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; color: #fff; }
.place-card__facts dd { margin: 2px 0 0; font-size: .74rem; line-height: 1.35; color: rgba(255, 255, 255, .84); }
.know__addr { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: .92rem; color: var(--c-muted); }
.know__addr .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--c-ember); }
.know__faq {
	padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-lg);
	background: #fff; box-shadow: var(--e2);
}
.know__sub { margin: 0 0 16px; font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; color: var(--c-navy); }
.know__faq .accordion { margin-bottom: 22px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
	.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(200px, auto); }
	.bento__tile--hero { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
	.booking-how__grid { grid-template-columns: 1fr; }
	.booking-how .chapter { position: static; }
	.booking-how__links { grid-column: 1; }
	.xp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 34vw, 280px); }
	.xp-tile--1 { grid-row: span 1; }
	.know__grid { grid-template-columns: 1fr; }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
	.glance, .stays, .booking-how, .beyond, .offers-teaser, .film, .know { padding-block: 64px; }
	.hero:has(.hero__booking) + .glance { padding-top: 56px; }
	.chapter__title { font-size: clamp(2rem, 9.4vw, 2.6rem); margin-top: 14px; }
	.chapter__lead { font-size: 1rem; margin-top: 14px; }
	.chapter-row { margin-bottom: 28px; }
	.chapter-row > .btn { display: none; }

	/* Rails: swipe sideways, the next card peeking in from the edge. */
	.unit-grid--rail, .offer-grid--compact, .inclusions {
		display: grid; grid-auto-flow: column; grid-template-columns: none;
		overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
		margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px;
		scroll-padding-inline: var(--gutter); scrollbar-width: none;
	}
	.unit-grid--rail::-webkit-scrollbar, .offer-grid--compact::-webkit-scrollbar, .inclusions::-webkit-scrollbar { display: none; }
	.unit-grid--rail { grid-auto-columns: 82%; gap: 14px; }
	.offer-grid--compact { grid-auto-columns: 82%; gap: 14px; }
	.unit-grid--rail > *, .offer-grid--compact > * { scroll-snap-align: start; }
	.inclusions { grid-auto-columns: max-content; gap: 8px; padding-bottom: 6px; }
	.inclusions li { font-size: .82rem; }
	.unit-card:hover, .offer-grid--compact .offer-card:hover { transform: none; }

	.bento { gap: 10px; grid-auto-rows: minmax(168px, auto); }
	.bento__tile { min-height: 168px; border-radius: 16px; }
	.bento__tile--hero { aspect-ratio: 4 / 3; min-height: 0; }
	.bento__num { font-size: 2.9rem; }
	.bento__cap { font-size: .82rem; }
	.bento__tile--stat > .icon { top: 16px; left: 16px; width: 22px; height: 22px; }
	.bento__tile--stat { padding: 16px; }
	.bento__tile--sun::after { width: 90px; height: 48px; top: 12px; right: -6px; }

	.steps { grid-template-columns: 1fr; gap: 12px; }
	.step { padding: 22px 20px; display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; align-items: start; }
	.step__icon { grid-row: span 2; width: 46px; height: 46px; margin: 0; border-radius: 13px; }
	.step__no { top: 18px; right: 18px; font-size: 1.9rem; }
	.step h3 { font-size: 1.1rem; padding-right: 44px; }
	.step p { margin-top: 4px; }
	.booking-how::after { width: 140vw; right: -60%; bottom: -20%; }

	.xp-bento { grid-auto-rows: 190px; gap: 10px; }
	.xp-tile--1 { grid-column: span 2; grid-row: span 1; min-height: 300px; }
	.xp-tile--1 .xp-tile__text { display: none; }
	.xp-tile__body { left: 14px; right: 14px; bottom: 14px; }
	.xp-tile--1 .xp-tile__body { left: 18px; bottom: 18px; right: 70px; }
	.xp-tile__title { font-size: 1.08rem; }
	.xp-tile__detail { font-size: .56rem; letter-spacing: .16em; }
	.xp-tile:not(.xp-tile--1) .xp-tile__go { display: none; }

	.film__nav { display: none; }
	.film__item { width: 70vw; }
	.film__item--wide { width: 84vw; aspect-ratio: 4 / 3.4; }

	.place-card { aspect-ratio: 4 / 4.2; }
	.place-card__facts div { padding: 10px 10px; }
	.place-card__facts dt { font-size: 1.05rem; }
	.place-card__facts dd { font-size: .66rem; }
	.know__faq { padding: 20px 14px; }

	/* Hero search: two tidy rows so the photograph stays visible. */
	.booking-bar--hero .booking-bar__field { min-height: 64px; padding: 12px 16px; }
	.booking-bar--hero .booking-bar__field--date { padding-bottom: 12px; }
	.booking-bar--hero .booking-bar__field--guests { grid-column: auto; }
	.booking-bar--hero .booking-bar__submit { grid-column: auto; min-height: 64px; padding-inline: 12px; border-top: 1px solid var(--sea-100); }
	.booking-bar--hero .booking-bar__submit span { font-size: .68rem; letter-spacing: .1em; }
	.booking-bar--hero .booking-bar__submit .icon { display: none; }
	.booking-bar--hero .booking-bar__value { font-size: 1.08rem; }
	.hero__subtitle { font-size: 1rem; margin-top: 16px; }
}
.exp-row__media { position: relative; }

/* 1.24 tuning after the first look */
.unit-grid--rail .unit-card__media { aspect-ratio: 5 / 6; }
.booking-how__grid { align-items: center; }
.booking-how .chapter { position: static; }
.film__item, .film__item--wide {
	--h: clamp(300px, 30vw, 430px);
	height: var(--h); width: calc(var(--h) * .8); aspect-ratio: auto;
}
.film__item--wide { width: calc(var(--h) * 1.42); }
@media (max-width: 700px) {
	.film__item, .film__item--wide { --h: 92vw; width: 70vw; aspect-ratio: auto; }
	.film__item--wide { width: 88vw; }
	.unit-grid--rail .unit-card__media { aspect-ratio: 4 / 4.2; }
}
@media (max-width: 700px) {
	.step__icon { grid-row: 1 / span 3; }
	.step__no {
		position: static; grid-column: 2; margin-bottom: 4px;
		font-size: .7rem; font-weight: 700; letter-spacing: .22em;
		color: var(--gold-300); -webkit-text-stroke: 0;
	}
	.step h3 { padding-right: 0; }
}
@media (max-width: 700px) {
	.xp-bento { grid-auto-rows: auto; }
	.xp-tile { height: 200px; }
	.xp-tile--1 { height: 300px; min-height: 0; }
	.xp-tile:not(.xp-tile--1) .xp-tile__detail { display: none; }
	.credit { left: 12px; right: 12px; text-align: right; font-size: .54rem; }
}
.place-card img { object-position: 50% 35%; }
.exp-row { scroll-margin-top: calc(var(--header-h) + 24px); }
/* Tablet: three product cards in 768px are too narrow; they become the rail too. */
@media (min-width: 701px) and (max-width: 1100px) {
	.unit-grid--rail, .offer-grid--compact {
		display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 44%;
		overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
		margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px;
		scroll-padding-inline: var(--gutter); scrollbar-width: none;
	}
	.unit-grid--rail > *, .offer-grid--compact > * { scroll-snap-align: start; }
}

/* ==========================================================================
   1.25 — The chapter system, site-wide.
   Every inner page now speaks the home page's language: chapter heads, white
   object cards, the glance bento, the film strip and the booking steps.
   ========================================================================== */

/* Section heads are chapters now; retire the old underline and eyebrow rule. */
.section-head.chapter .chapter__title::after { content: none; }
.chapter.section-head--center { margin-inline: auto; text-align: center; }
.chapter.section-head--center .chapter__lead { margin-inline: auto; }
.section--navy .chapter__title, .section-title--light { color: #fff; }

/* ---------- Included-in-every-stay chips, centred variant ---------- */
.inclusions--center { justify-content: center; }
.compare .chapter { margin-bottom: 26px; }

/* ---------- The property ---------- */
.about-intro {
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(34px, 4vw, 56px);
}
.about-intro .chapter { margin-bottom: 0; }
.about-intro__text p { margin: 0 0 14px; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.65; color: var(--c-muted); }
.about-intro__text p:last-child { margin-bottom: 0; }
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.value {
	position: relative; padding: 28px 24px 26px; border: 0; border-radius: var(--radius-lg);
	background: #fff; box-shadow: var(--e2);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.value:hover { transform: translateY(-5px); box-shadow: var(--e4); }
/* Flat logo colours, one per card — no gradients. */
.value__icon {
	display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 26px;
	border-radius: 14px; color: #fff; background: var(--c-brand-navy);
}
.value:nth-child(2) .value__icon { background: var(--c-brand-orange); }
.value:nth-child(3) .value__icon { background: var(--c-brand-blue); color: #04263A; }
.value:nth-child(4) .value__icon { background: var(--c-brand-yellow); color: #2A1A02; }
.value__icon .icon { width: 22px; height: 22px; }
.value__num {
	position: absolute; top: 24px; right: 22px; margin: 0;
	font-family: var(--f-display); font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -.04em;
	color: transparent; -webkit-text-stroke: 1px var(--gold-300);
}
.value h3 { margin: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--c-navy); }
.value p { margin: 8px 0 0; font-size: .92rem; line-height: 1.55; color: var(--c-muted); }

/* ---------- Experiences: the photograph leads ---------- */
.exp-list { gap: clamp(28px, 4vw, 56px); }
.exp-row {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px);
	padding: clamp(14px, 1.4vw, 18px); border-radius: calc(var(--radius-lg) + 6px);
	background: #fff; box-shadow: var(--e2);
}
.exp-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.exp-row__media { aspect-ratio: 16 / 11; box-shadow: none; border-radius: var(--radius-lg); }
.exp-row__media img { transition: transform 1.2s var(--ease-out); }
.exp-row:hover .exp-row__media img { transform: scale(1.04); }
.exp-row__no {
	position: absolute; left: 16px; top: 16px; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 30px; padding: 0 12px;
	border-radius: 999px; background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	font-family: var(--f-display); font-size: .82rem; font-weight: 700; color: var(--c-navy);
}
.exp-row__body { padding: clamp(8px, 2vw, 28px) clamp(8px, 2vw, 28px) clamp(8px, 2vw, 28px) 0; }
.exp-row--flip .exp-row__body { padding: clamp(8px, 2vw, 28px) 0 clamp(8px, 2vw, 28px) clamp(8px, 2vw, 28px); }
.exp-row h2 { font-weight: 600; letter-spacing: -.035em; font-size: clamp(1.9rem, 3vw, 2.6rem); }
.exp-row .icon-circle { display: none; }
.exp-row .exp-card__detail {
	display: inline-flex; margin: 0 0 14px !important; padding: 6px 12px; border-radius: 999px;
	background: var(--gold-100); color: var(--gold-800) !important;
	font-size: .66rem !important; letter-spacing: .16em;
}
.exp-row .prose p { color: var(--c-muted); }

/* ---------- Offers and places become white objects too ---------- */
.offer-card--wide {
	padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden;
	background: #fff; box-shadow: var(--e2);
}
.offer-card--wide::before { content: none; }
.offer-card--wide .offer-card__media { border-radius: 0; box-shadow: none !important; }
.offer-card--wide:hover { transform: translateY(-4px); box-shadow: var(--e4); }
.place {
	padding: 24px; border: 0; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--e1);
	transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.place:hover { transform: translateY(-4px); box-shadow: var(--e3); }

/* ---------- Information pages: facts first, then an index beside the prose ---------- */
.facts-glance-wrap { padding-block: clamp(36px, 4vw, 56px) 0; }
.facts-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.facts-glance li {
	display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center;
	padding: 18px 20px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--e2);
}
.facts-glance .icon { grid-row: span 2; width: 22px; height: 22px; color: var(--c-ember); }
.facts-glance span { font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-sienna); }
.facts-glance strong { font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.02em; color: var(--c-navy); }
.page-body__grid {
	display: grid; grid-template-columns: 240px minmax(0, 760px); justify-content: center;
	gap: clamp(32px, 5vw, 80px); align-items: start;
}
.toc { position: sticky; top: calc(var(--header-h) + 28px); }
.toc__label { margin: 0 0 12px; font-size: .66rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--c-sienna); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; border-left: 1px solid var(--sea-100); }
.toc li { counter-increment: toc; }
.toc a {
	display: block; padding: 8px 0 8px 18px; margin-left: -1px; border-left: 2px solid transparent;
	font-size: .88rem; line-height: 1.35; color: var(--c-muted); transition: color .2s, border-color .2s;
}
.toc a::before { content: counter(toc, decimal-leading-zero) "  "; font-weight: 700; color: var(--gold-700); margin-right: 6px; }
.toc a:hover, .toc a.is-current { color: var(--c-navy); border-left-color: var(--c-gold); }
.prose--page h2 { scroll-margin-top: calc(var(--header-h) + 28px); letter-spacing: -.03em; font-weight: 600; }

/* ---------- Gallery filter ---------- */
.gallery-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.gallery-filter .chip {
	display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px;
	border: 1px solid var(--sea-100); border-radius: 999px; background: #fff;
	font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--navy-700);
	cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.gallery-filter .chip small { font-size: .72rem; font-weight: 600; color: var(--c-muted); }
.gallery-filter .chip:hover { border-color: var(--c-navy); }
.gallery-filter .chip.is-active { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.gallery-filter .chip.is-active small { color: var(--gold-300); }
.masonry__item[hidden] { display: none !important; }

/* ---------- Tablet / phone ---------- */
@media (max-width: 1100px) {
	.value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.facts-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.page-body__grid { grid-template-columns: 1fr; }
	.toc { position: static; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--sea-50); }
	.toc ol { border-left: 0; }
	.toc a { padding: 6px 0; border-left: 0; }
}
@media (max-width: 900px) {
	.about-intro { grid-template-columns: 1fr; }
	.exp-row, .exp-row--flip { grid-template-columns: 1fr; gap: 18px; }
	.exp-row__body, .exp-row--flip .exp-row__body { padding: 4px 8px 12px; }
}
@media (max-width: 700px) {
	.value-grid { grid-template-columns: 1fr; gap: 10px; }
	.value { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; padding: 20px; }
	.value__icon { grid-row: 1 / span 3; width: 46px; height: 46px; margin: 0; }
	.value__num { position: static; grid-column: 2; font-size: .7rem; font-weight: 700; letter-spacing: .22em; color: var(--gold-700); -webkit-text-stroke: 0; margin-bottom: 2px; }
	.facts-glance li { padding: 14px; column-gap: 10px; }
	.facts-glance strong { font-size: .98rem; }
	.gallery-filter {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
	}
	.gallery-filter::-webkit-scrollbar { display: none; }
	.gallery-filter .chip { flex: none; }
	.inclusions--center { justify-content: flex-start; }
}
/* Gallery on a phone: two columns, captions left to the lightbox. */
@media (max-width: 700px) {
	.masonry { columns: 2; column-gap: 8px; }
	.masonry__item { margin-bottom: 8px; border-radius: 10px; }
	.masonry__caption, .masonry__zoom { display: none !important; }
}

/* ==========================================================================
   1.26 — Live.
   Photographs that arrive softly and drift while on screen, and a live
   strip that says it is 14:32 and 31° in Sahl Hasheesh right now. Colour
   stays flat throughout — the four logo colours, used solid, never blended.
   ========================================================================== */

/* ---------- Photographs: warm placeholder, soft arrival, slow drift ---------- */
.bento__tile--photo, .unit-card__media, .xp-tile, .film__item, .masonry__item,
.offer-card__media, .exp-row__media, .place-card {
	background-color: #E9E1D2;
	background-image: linear-gradient(135deg, #EFE6D6 0%, #DCE9EE 100%);
}
.js img.is-loading { opacity: 0; }
.bento__tile--photo img, .unit-card__media img, .xp-tile img, .film__item img, .masonry__item img,
.offer-card__media img, .exp-row__media img, .place-card img {
	transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out), filter .6s var(--ease-out);
}
@keyframes rsss-drift {
	0%   { transform: scale(1.02) translate3d(0, 0, 0); }
	100% { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}
.bento__tile--hero.is-live img, .xp-tile.is-live img, .place-card.is-live img, .exp-row__media.is-live img {
	animation: rsss-drift 22s ease-in-out infinite alternate;
}
.xp-tile:nth-child(2n).is-live img { animation-duration: 26s; animation-direction: alternate-reverse; }
.xp-tile:hover img, .bento__tile--hero:hover img { animation-play-state: paused; }
/* A thin inner edge so photos sit on the page like prints, not cut-outs. */
.bento__tile--photo::after, .xp-tile > span.xp-tile__go ~ .credit, .film__item::after, .unit-card__media::before {
	pointer-events: none;
}
.bento__tile--photo::after, .film__item::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
/* Colour on hover: a sun-warm lift. */
.xp-tile:hover img, .film__item:hover img, .unit-card:hover .unit-card__media img { filter: saturate(1.12) contrast(1.03); }

/* ---------- Live strip ---------- */
.live-strip {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px;
	animation: rise 1s var(--ease) both .75s;
}
.live-strip__item {
	display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px;
	border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24);
	background: rgba(4, 16, 47, .32); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
	font-size: .8rem; line-height: 1; color: rgba(255, 255, 255, .86); white-space: nowrap;
}
.live-strip__item[hidden] { display: none; }
.live-strip__item b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.live-strip__item .icon { width: 15px; height: 15px; color: var(--c-amber); }
.live-strip__item[data-live-sea] .icon { color: #7FD3EC; }
.live-strip__dot {
	position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; flex: none;
}
.live-strip__dot::after {
	content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3DDC84;
	animation: rsss-pulse 2s ease-out infinite;
}
@keyframes rsss-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- Plate: a warmer, deeper veil so the colour of the pool survives ---------- */
.plate::after {
	background:
		linear-gradient(105deg, rgba(4, 16, 47, .78) 0%, rgba(4, 16, 47, .30) 42%, rgba(4, 16, 47, 0) 72%),
		linear-gradient(0deg, rgba(4, 16, 47, .55) 0%, rgba(4, 16, 47, 0) 45%);
}

@media (max-width: 700px) {
	.live-strip { gap: 6px; margin-top: 16px; }
	.live-strip__item { min-height: 30px; padding: 5px 10px; font-size: .74rem; }
	.live-strip__item[data-live-sun] { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.live-strip__dot::after { animation: none; }
	.bento__tile--hero.is-live img, .xp-tile.is-live img, .place-card.is-live img, .exp-row__media.is-live img { animation: none; }
}
/* Hero and CTA-band accent words: flat brand yellow, no italic, no clip. */
.hero__title em, .cta-band__title em { color: var(--c-brand-yellow); }
/* CTA band: let the evening pool glow through — a navy-to-ember dusk veil
   instead of a flat brown wash. */
.cta-band::after {
	background:
		radial-gradient(90% 70% at 50% 50%, rgba(4, 16, 47, .52) 0%, rgba(4, 16, 47, .18) 70%),
		linear-gradient(180deg, rgba(4, 16, 47, .35) 0%, rgba(4, 16, 47, .15) 45%, rgba(116, 30, 4, .55) 100%) !important;
}
.cta-band__media img { filter: saturate(1.2) contrast(1.05) !important; }
.cta-band__text { text-shadow: 0 1px 12px rgba(4, 16, 47, .6); }

/* Phone hero: the live strip replaces the subtitle and runs on one line. */
@media (max-width: 700px) {
	.hero--full .hero__content:has(.live-strip) .hero__subtitle { display: none; }
	.live-strip {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
	}
	.live-strip::-webkit-scrollbar { display: none; }
	.live-strip__item { flex: none; }
	.live-strip__item[data-live-sun] { display: inline-flex !important; }
	.live-strip__item[data-live-sun][hidden] { display: none !important; }
}
@media (max-width: 700px) {
	.cta-band::after {
		background: linear-gradient(180deg, rgba(4, 16, 47, .5) 0%, rgba(4, 16, 47, .42) 55%, rgba(116, 30, 4, .6) 100%) !important;
	}
}

/* ==========================================================================
   1.28 — On-site booking engine (live Lodgify data, our design)
   ========================================================================== */
.stay-search { padding-top: 0; margin-top: -48px; position: relative; z-index: 3; }
.stay-search .form-notice { margin-top: 16px; }
.stay-meta { margin: 0 0 24px; font-size: .95rem; color: var(--c-muted); }
.stay-meta strong { color: var(--c-navy); font-weight: 600; }
.stay-list { display: grid; gap: 20px; }
.stay-card { display: grid; grid-template-columns: 280px 1fr 240px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.stay-card.is-unavailable { box-shadow: none; }
.stay-card.is-unavailable .stay-card__media { opacity: .72; }
.stay-card.is-unavailable .stay-card__media img { filter: grayscale(.7); }
.stay-card__media { display: block; position: relative; min-height: 210px; background: var(--c-shell); }
.stay-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stay-card__body { padding: 26px 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stay-card__title { margin: 0; font-size: 1.5rem; line-height: 1.15; }
.stay-card__title a { color: var(--c-navy); text-decoration: none; }
.stay-card__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: .85rem; color: var(--c-muted); }
.stay-card__facts li { display: inline-flex; align-items: center; gap: 7px; }
.stay-card__facts .icon { width: 17px; height: 17px; color: var(--c-brand-orange); }
.stay-card__text { margin: 0; color: var(--c-muted); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.stay-card__buy { padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; gap: 12px; border-left: 1px solid var(--c-line); background: var(--c-shell); }
.stay-card__price { margin: 0; display: grid; gap: 4px; }
.stay-card__price strong { font-family: var(--f-serif); font-size: 2.1rem; line-height: 1; color: var(--c-navy); font-weight: 600; }
.stay-card__price span { font-size: .78rem; color: var(--c-muted); letter-spacing: .02em; }
.stay-card__flag { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-brand-orange); }
.stay-card__note { margin: 0; font-size: .9rem; color: var(--c-muted); }
.stay-foot { margin: 26px 0 0; font-size: .82rem; color: var(--c-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stay-foot .icon { width: 15px; height: 15px; }
.stay-empty { padding: 44px 0; max-width: 620px; }
.stay-empty .section-title { margin-bottom: 12px; }
@media (max-width: 900px) {
	.stay-card { grid-template-columns: 1fr; }
	.stay-card__media { min-height: 200px; aspect-ratio: 16 / 9; }
	.stay-card__buy { border-left: 0; border-top: 1px solid var(--c-line); flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* Reservation step */
.stay-reserve__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.stay-title { margin: 0 0 6px; font-size: 1.7rem; }
.stay-summary { position: sticky; top: calc(var(--header-h, 80px) + 24px); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.stay-summary__media { aspect-ratio: 16 / 9; position: relative; background: var(--c-shell); }
.stay-summary__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stay-summary__body { padding: 24px 26px 26px; }
.stay-summary__body h3 { margin: 0 0 8px; font-size: 1.35rem; }
.stay-summary__dates { margin: 0 0 18px; font-weight: 600; color: var(--c-navy); display: grid; gap: 2px; }
.stay-summary__dates span { font-weight: 400; font-size: .85rem; color: var(--c-muted); }
.stay-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.stay-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--c-line); font-size: .92rem; }
.stay-lines li.is-credit span:last-child { color: #1d7a4a; font-weight: 600; }
.stay-total { display: flex; justify-content: space-between; align-items: baseline; margin: 16px 0 0; }
.stay-total span { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.stay-total strong { font-family: var(--f-serif); font-size: 2rem; color: var(--c-navy); font-weight: 600; }
.stay-policy { margin: 16px 0 0; font-size: .8rem; color: var(--c-muted); line-height: 1.55; }
.stay-edit { margin: 14px 0 0; font-size: .85rem; }
.stay-done { padding: 34px; border: 1px solid var(--c-line); border-left: 6px solid var(--c-brand-yellow); border-radius: var(--radius); background: var(--c-white); }
.stay-done > .icon { width: 34px; height: 34px; color: var(--c-brand-orange); margin-bottom: 8px; }
.stay-reserve .form-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
	.stay-reserve__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.stay-summary { position: static; order: -1; }
}

/* Availability calendar (apartment page) */
.stay-picker { display: grid; gap: 14px; }
.stay-picker__dates { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--c-rule, var(--c-line)); border-radius: 10px; overflow: hidden; }
.stay-picker__field { background: var(--c-white); border: 0; padding: 12px 14px; text-align: left; cursor: pointer; display: grid; gap: 3px; font: inherit; color: var(--c-navy); }
.stay-picker__field + .stay-picker__field { border-left: 1px solid var(--c-line); }
.stay-picker__field span { font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted); }
.stay-picker__field strong { font-size: .98rem; font-weight: 600; }
.stay-picker__field:hover, .stay-picker__field:focus-visible { background: var(--c-shell); outline: none; }
.stay-cal { border: 1px solid var(--c-line); border-radius: 10px; padding: 14px; background: var(--c-white); }
.stay-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stay-cal__title { font-weight: 600; color: var(--c-navy); }
.stay-cal__nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.stay-cal__nav:hover { background: var(--c-navy); color: var(--c-white); }
.stay-cal__dow, .stay-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.stay-cal__dow span { text-align: center; font-size: .66rem; font-weight: 600; color: var(--c-muted); padding: 4px 0; }
.stay-cal__pad { display: block; }
.stay-cal__day { aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: .88rem; color: var(--c-navy); cursor: pointer; }
.stay-cal__day:hover:not(:disabled) { background: var(--c-brand-yellow); }
.stay-cal__day:disabled { cursor: not-allowed; color: #aeb5c4; }
.stay-cal__day.is-taken { text-decoration: line-through; background: #f1ece6; color: #b7a99c; }
.stay-cal__day.is-past { background: transparent; text-decoration: none; opacity: .55; }
.stay-cal__day.is-range { background: #f6dfae; border-radius: 0; }
.stay-cal__day.is-start, .stay-cal__day.is-end { background: var(--c-navy); color: var(--c-white); }
.stay-cal__legend { margin: 10px 0 0; font-size: .74rem; color: var(--c-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stay-cal__legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.stay-cal__legend .dot--free { background: var(--c-white); border: 1px solid var(--c-navy); }
.stay-cal__legend .dot--taken { background: #f1ece6; margin-left: 10px; }
.stay-picker__guests { display: grid; gap: 4px; }
.stay-picker__guests label { font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted); }
.stay-picker__guests select { width: 100%; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-white); font: inherit; color: var(--c-navy); }
.stay-picker__quote { min-height: 0; }
.stay-picker__price { margin: 0; display: grid; gap: 2px; }
.stay-picker__price strong { font-family: var(--f-serif); font-size: 1.9rem; color: var(--c-navy); font-weight: 600; }
.stay-picker__price span, .stay-picker__loading { font-size: .8rem; color: var(--c-muted); margin: 0; }
.stay-picker__error { margin: 0; font-size: .88rem; color: #a3321a; }
.stay-picker__go { width: 100%; justify-content: center; }
.stay-picker__go[aria-disabled="true"] { background: var(--c-navy); opacity: .55; cursor: pointer; }

/* 1.30 — Checkout stepper and steps */
.stepper { background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.stepper ol { display: flex; gap: 8px; list-style: none; margin: 0 auto; padding: 14px var(--gutter, 20px); overflow-x: auto; }
.stepper li { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: max-content; color: var(--c-muted, #6b7780); font-size: .86rem; font-weight: 600; }
.stepper li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--c-line); margin-left: 6px; min-width: 18px; }
.stepper__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--c-line); font-size: .8rem; background: var(--c-white); }
.stepper__n .icon { width: 14px; height: 14px; }
.stepper li.is-current { color: var(--sea-800, #0B3446); }
.stepper li.is-current .stepper__n { background: var(--sea-700, #114A64); border-color: var(--sea-700, #114A64); color: #fff; }
.stepper li.is-done { color: var(--sea-700, #114A64); }
.stepper li.is-done .stepper__n { background: var(--c-brand-yellow); border-color: var(--c-brand-yellow); color: var(--sea-800, #0B3446); }
@media (max-width: 640px) { .stepper__l { display: none; } .stepper li.is-current .stepper__l { display: inline; } .stepper li { min-width: 0; } }

.js-steps .checkout__panel[hidden] { display: none; }
.checkout__panel + .checkout__panel { margin-top: 30px; }
.js-steps .checkout__panel + .checkout__panel { margin-top: 0; }
.review { margin: 18px 0; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); }
.review > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--c-line); }
.review > div:last-child { border-bottom: 0; }
.review dt { color: var(--c-muted, #6b7780); }
.review dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.review__total { background: var(--sea-50, #EFF9FD); }
.review__total dd { font-size: 1.15rem; }

.stay-done__ref { font-size: 1.05rem; margin: 6px 0 18px; }
.stay-done__ref strong { display: inline-block; padding: 4px 12px; background: var(--gold-100, #FDF0DA); border-radius: 4px; letter-spacing: .04em; }
.stay-done__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 22px; }
.stay-done__facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted, #6b7780); }
.stay-done__facts dd { margin: 2px 0 0; font-weight: 600; }
.stay-next { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 8px; }
.stepper { position: relative; z-index: 4; }
.stepper + .stay-search { margin-top: 0; padding-top: 24px; }

/* 1.31 — Guest account */
.account-box { margin: 20px 0 4px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); }
.account-box--in { background: var(--sea-50, #EFF9FD); border-color: var(--sea-200, #BEE3F4); }
.account-box--in .icon { display: inline-block; vertical-align: -3px; margin-right: 8px; width: 18px; height: 18px; color: var(--sea-700, #114A64); }
.account-box__toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.account-box__toggle input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.account-box__pw { margin-top: 14px; }
.account-box__pw[hidden] { display: none; }
.account-box__signin { margin: 12px 0 0; font-size: .9rem; color: var(--c-muted, #6b7780); }
.account__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.account__grid--in { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.account__card { padding: 28px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); }
.account__card[data-active] { border-color: var(--sea-300, #8AC9E5); }
.account-form .field { margin-bottom: 14px; }
.account-form .field--check { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.account-link { align-self: center; font-size: .9rem; }
.account-pw { margin: 4px 0 16px; }
.account-pw summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }
.booking-list { display: grid; gap: 16px; margin-bottom: 22px; }
.booking-item { display: grid; grid-template-columns: 180px minmax(0, 1fr); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); overflow: hidden; }
.booking-item__media { background: var(--sea-100, #DEF1FA); min-height: 140px; }
.booking-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.booking-item__body { padding: 18px 20px; }
.booking-item__body h3 { margin: 4px 0 6px; font-size: 1.15rem; }
.booking-item__ref { margin: 0; font-size: .85rem; color: var(--c-muted, #6b7780); }
.booking-item__dates, .booking-item__total { margin: 0 0 6px; }
.booking-item__actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.pill { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.pill--wait { background: var(--gold-100, #FDF0DA); color: #7a4a00; }
.pill--ok { background: #DDF3E4; color: #14532d; }
.pill--off { background: #F1E1E1; color: #7f1d1d; }
@media (max-width: 860px) {
	.account__grid, .account__grid--in { grid-template-columns: minmax(0, 1fr); }
	.booking-item { grid-template-columns: minmax(0, 1fr); }
	.booking-item__media { min-height: 160px; }
}

.stay-reserve__main, .checkout, .checkout__panel, .form-grid > .field { min-width: 0; }
.checkout input, .checkout textarea { max-width: 100%; }
@media (max-width: 860px) { .stay-summary__media { display: none; } }

/* 1.32 — Account required: auth card, guest area */
.auth-card { padding: 28px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); }
.auth-tabs { display: flex; gap: 6px; margin: 18px 0 22px; padding: 4px; background: var(--c-shell, #f4efe6); border-radius: 999px; }
.auth-tab { flex: 1; padding: 11px 16px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 600; color: var(--c-muted, #6b7780); cursor: pointer; }
.auth-tab[aria-selected="true"] { background: var(--c-navy); color: #fff; }
.auth-card.is-tabs .auth-panel[hidden] { display: none; }
.auth-card:not(.is-tabs) .auth-tabs { display: none; }
.auth-card:not(.is-tabs) .auth-panel + .auth-panel { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.auth-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: .92rem; }
.auth-consent input { margin-top: 4px; flex: none; }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 64px; }
.pw__toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; font: inherit; font-size: .82rem; font-weight: 600; color: var(--sea-700, #114A64); cursor: pointer; padding: 6px 8px; }
.account__split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.account__narrow { max-width: 520px; margin: 0 auto; }
.account-perks { padding: 28px; border-radius: var(--radius); background: var(--sea-50, #EFF9FD); border: 1px solid var(--sea-200, #BEE3F4); }
.account-perks h3 { margin: 0 0 14px; }
.account-perks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.account-perks li { display: flex; gap: 10px; align-items: flex-start; }
.account-perks .icon { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--sea-700, #114A64); }

.avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-brand-yellow); color: var(--sea-800, #0B3446); font-weight: 700; flex: none; }
.avatar--sm { width: 30px; height: 30px; font-size: .85rem; }
.header-account.is-in { border-color: transparent; }
.account-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
.account-nav { position: sticky; top: calc(var(--header-h, 80px) + 24px); padding: 20px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); }
.account-nav__who { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line); overflow-wrap: anywhere; }
.account-nav__who small { color: var(--c-muted, #6b7780); }
.account-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.account-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--c-text); text-decoration: none; font-weight: 500; }
.account-nav a:hover { background: var(--c-shell, #f4efe6); }
.account-nav a.is-active { background: var(--c-navy); color: #fff; }
.account-nav .icon { width: 18px; height: 18px; flex: none; }
.count { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: auto; border-radius: 999px; background: var(--gold-100, #FDF0DA); color: #7a4a00; font-size: .72rem; font-weight: 700; text-align: center; }
.account-nav a.is-active .count { background: rgba(255,255,255,.2); color: #fff; }
.account-main { display: grid; gap: 22px; min-width: 0; }
.account-main > * { min-width: 0; }
.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--c-line); }
.tab { padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 600; color: var(--c-muted, #6b7780); text-decoration: none; }
.tab.is-active { color: var(--c-navy); border-color: var(--c-brand-yellow); }
.tab .count { margin-left: 6px; }

.next-stay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); overflow: hidden; box-shadow: var(--shadow); }
.next-stay--empty { grid-template-columns: 1fr; background: var(--sea-50, #EFF9FD); border-color: var(--sea-200, #BEE3F4); box-shadow: none; }
.next-stay__media { min-height: 220px; background: var(--sea-100, #DEF1FA); }
.next-stay__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.next-stay__body { padding: 26px; }
.next-stay__body h2 { margin: 4px 0 8px; font-size: 1.6rem; }
.next-stay__dates { font-weight: 600; margin: 0 0 12px; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); }
.stat strong { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--c-navy); }
.stat span { color: var(--c-muted, #6b7780); font-size: .88rem; }
.back-link { margin: 0; }
.back-link a { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-weight: 600; }
.back-link .icon { width: 16px; height: 16px; }
.booking-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.booking-head .section-title { margin: 4px 0 6px; }
.pill--lg { padding: 7px 16px; font-size: .82rem; margin-left: 0; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.timeline li { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 3px solid var(--c-line); font-size: .86rem; color: var(--c-muted, #6b7780); font-weight: 600; }
.timeline__dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--c-line); background: var(--c-white); font-size: .78rem; }
.timeline__dot .icon { width: 13px; height: 13px; }
.timeline li.is-done, .timeline li.is-current { border-color: var(--c-brand-yellow); color: var(--c-navy); }
.timeline li.is-done .timeline__dot { background: var(--c-brand-yellow); border-color: var(--c-brand-yellow); }
.timeline li.is-current .timeline__dot { background: var(--sea-700, #114A64); border-color: var(--sea-700, #114A64); color: #fff; }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.booking-side { display: grid; gap: 22px; }
.booking-item__actions--stack { flex-direction: column; align-items: stretch; }
.request-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.request-list li { padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
.request-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.pref { border: 0; padding: 0; margin: 0 0 14px; }
.pref legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.pref label { margin-right: 18px; }
.account__card--danger { border-color: #e3b9b9; }
.btn--danger { border-color: #b32d2e; color: #b32d2e; }
.btn--danger:hover { background: #b32d2e; color: #fff; }
.account__card + .account__card { margin-top: 0; }
.account-form select, .account-form textarea { width: 100%; }
@media (max-width: 900px) {
	.account__split, .account-shell, .next-stay, .booking-grid { grid-template-columns: minmax(0, 1fr); }
	.account-nav { position: static; padding: 14px; }
	.account-nav ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
	.account-nav__who { display: none; }
	.account-nav a { white-space: nowrap; }
	.timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media print {
	.site-header, .mobile-bookbar, .account-nav, .booking-side .account__card:not(:first-child), .cookie-notice, .back-link, .stepper, footer, .cta-band, .hero, .page-hero { display: none !important; }
	.booking-grid { grid-template-columns: 1fr; }
	body { background: #fff; }
}

/* 1.33 minimum stay */
.stay-picker__rule { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: .82rem; line-height: 1.4; color: var(--c-navy); background: #fff7e0; border-radius: 10px; padding: 8px 10px; }
.stay-picker__rule svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }
.stay-picker__alt { display: inline-block; font-weight: 600; color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; }
.stay-cal__hint { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: #fff7e0; color: var(--c-navy); font-size: .8rem; font-weight: 600; }
.stay-cal__day.has-min { position: relative; }
.stay-cal__day.has-min::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--c-brand-orange, #e8812a); }
.stay-cal__legend .dot--min { width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand-orange, #e8812a); margin-left: 10px; }
.stay-minrules { list-style: none; margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: #fff7e0; font-size: .88rem; color: var(--c-navy); display: grid; gap: 4px; }
.stay-card__buy .btn + .stay-card__note, .stay-card__note + .btn { margin-top: 8px; }

/* 1.35.1 guests stepper */
.gstep { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gstep__val { flex: 1; font-family: var(--f-serif); font-size: 1.32rem; line-height: 1.15; color: var(--c-ink); white-space: nowrap; }
.gstep__btn { width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy); font: 500 1.25rem/1 var(--f-sans, inherit); cursor: pointer; padding: 0; transition: background .15s, border-color .15s, color .15s; }
.gstep__btn:hover:not(:disabled) { border-color: var(--c-navy); background: var(--c-navy); color: #fff; }
.gstep__btn:disabled { opacity: .35; cursor: not-allowed; }
.gstep__btn:focus-visible { outline: 2px solid var(--c-sun-red); outline-offset: 2px; }
.booking-bar__field--guests .gstep { margin-top: 2px; }
.booking-bar__field--guests { padding-right: 20px; }
.stay-picker__guests .gstep { padding: 6px 8px 6px 16px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-white); }
.stay-picker__guests .gstep__val { font-family: inherit; font-size: 1rem; color: var(--c-navy); }
.gstep__note { margin: 6px 0 0; font-size: .74rem; line-height: 1.35; color: var(--c-sun-red, #b8300a); }
.booking-bar__field--guests .gstep__note { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 4px 0 0; padding: 8px 12px; border-radius: 8px; background: #fff7e0; color: var(--c-navy); box-shadow: 0 6px 18px rgba(2,15,65,.12); }
@media (max-width: 640px) {
	.stay-picker__guests .gstep__btn { width: 40px; height: 40px; flex-basis: 40px; }
	.booking-bar__field--guests { padding-left: 14px; padding-right: 10px; }
	.booking-bar__field--guests .gstep { gap: 4px; }
	.booking-bar__field--guests .gstep__btn { width: 34px; height: 34px; flex-basis: 34px; }
	.booking-bar__field--guests .gstep__val { font-size: 1rem; text-align: center; }
}
/* The hero's search bar overlaps the next section: lift the whole hero so the lower half of the bar (guests, button) stays clickable. */
.hero:has(.hero__booking), .page-hero:has(.hero__booking) { position: relative; z-index: 3; }

/* 1.36 mobile pass */
@media (max-width: 640px) {
	html, body { overflow-x: clip; }
	/* Long Lodgify-style titles ("apart/balcony/fountain") must wrap, never widen the page. */
	h1, h2, h3, .unit-top__title, .stay-card__title, .unit-card__title, .section-title { overflow-wrap: anywhere; }
	.unit-top__title { font-size: clamp(1.7rem, 8.4vw, 2.3rem); line-height: 1.1; }
	.unit-top__lead { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
	/* Listings: shorter photos so six apartments are not a wall of scrolling. */
	.unit-grid:not(.unit-grid--rail) .unit-card__media { aspect-ratio: 4 / 3; }
	.stay-card__media { min-height: 0; aspect-ratio: 16 / 10; }
	.stay-card__body { padding: 18px 18px 8px; }
	.stay-card__buy { padding: 16px 18px 18px; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; border-left: 0; border-top: 1px solid var(--c-line); flex-wrap: wrap; }
	.stay-card__price strong { font-size: 1.7rem; }
	.stay-card__buy .btn { min-height: 46px; }
	/* Progress steps: current label must never be clipped. */
	.stepper ol { gap: 4px; padding-inline: 16px; scroll-snap-type: x proximity; }
	.stepper li { gap: 6px; }
	.stepper li:not(:last-child)::after { min-width: 8px; margin-left: 0; }
	.stepper li.is-current { flex: 0 0 auto; }
	.stepper__n { width: 26px; height: 26px; }
	/* Touch targets */
	.footer-menu a, .footer-legal a, .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; }
	.footer-legal { display: flex; flex-wrap: wrap; column-gap: 18px; }
	.chip { min-height: 44px; min-width: 44px; padding-inline: 16px; }
	.pw__toggle { min-height: 44px; min-width: 52px; }
	input[type="checkbox"] { width: 22px; height: 22px; }
	.breadcrumb a, .breadcrumbs a, .unit-top nav a { display: inline-block; padding-block: 8px; }
	/* Type floor: tiny tracked labels stay legible */
	.eyebrow, .chapter__label, .footer-title, .booking-bar label, .plate__label, .ticker__item, figcaption, .film__cap, .bento__tag, .map__note, .booking-bar__nights, .xp-tile__detail, .btn { font-size: max(.75rem, 12px); }
	.badge { font-size: .7rem; }
	.credit, .site-footer .credit a { font-size: .72rem; }
	.stay-card__facts, .unit-card__facts { font-size: .8rem; }
}
@media (max-width: 640px) {
	.legal-menu { display: flex; flex-wrap: wrap; column-gap: 18px; list-style: none; padding: 0; margin: 0; }
	.legal-menu a, .credit a { display: inline-flex; align-items: center; min-height: 44px; }
	.contact-list a, .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
	.link-list a, .jump a, .page-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 640px) {
	.filter-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; margin-inline: calc(var(--gutter, 20px) * -1); padding-inline: var(--gutter, 20px); scrollbar-width: none; }
	.filter-chips::-webkit-scrollbar { display: none; }
	.filter-chips .chip { flex: 0 0 auto; margin-right: 8px; white-space: nowrap; }
}

/* ==========================================================================
   1.37 — Comfort & ease of use for every age
   ========================================================================== */
html { font-size: 100%; }
html.a11y-t1 { font-size: 115%; }
html.a11y-t2 { font-size: 130%; }
body { font-size: 1.1rem; line-height: 1.65; }
:root { --c-muted: #4A5266; --c-text: #2A3452; }
.section-lead, .lead { font-size: 1.2rem; line-height: 1.6; }

/* Small tracked capitals are the hardest thing to read: bigger, calmer spacing. */
.eyebrow, .chapter__label, .footer-title, .booking-bar label, .stay-picker__guests label, .plate__label, .bento__tag, .xp-tile__detail, .ticker__item, .stay-card__flag { letter-spacing: .12em; }
.stay-meta { letter-spacing: 0; font-size: 1.02rem; }
.hero__dot-num { font-size: .8rem; letter-spacing: .12em; }
.help-strip + .stay-search { margin-top: 0; padding-top: 28px; }
@media (min-width: 901px) { .stay-card { grid-template-columns: 280px 1fr minmax(250px, 290px); } }
.stay-card__buy .btn { white-space: normal; text-align: center; line-height: 1.2; }
.help-num, .help-call { white-space: nowrap; }
.help-call { display: none; }
@media (max-width: 640px) { .help-num { display: none; } .help-call { display: inline; } }
.eyebrow, .chapter__label, .footer-title, .booking-bar label, .stay-picker__guests label { font-size: .8rem; }
.btn { font-size: .86rem; letter-spacing: .08em; min-height: 54px; }
.btn--sm { font-size: .8rem; min-height: 46px; }
.chip { font-size: .82rem; letter-spacing: .08em; }
.stay-cal__day { font-size: 1rem; min-height: 44px; }
.stay-card__facts, .unit-card__facts li { font-size: .92rem; }
.stay-card__note, .stay-foot { font-size: .98rem; }
input, select, textarea { font-size: 1.05rem; }
.field input, .field select, .field textarea, .account-form input, .account-form select, .account-form textarea { min-height: 52px; }
main p a:not(.btn), .prose a, .stay-foot a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Focus you cannot miss, on light and dark grounds. */
:focus-visible { outline: 3px solid #1B6EF3; outline-offset: 3px; box-shadow: 0 0 0 2px #fff; border-radius: 4px; }
.site-footer :focus-visible, .hero :focus-visible, .mobile-nav :focus-visible, .cta-band :focus-visible, .page-hero :focus-visible { outline-color: #FFD166; box-shadow: 0 0 0 2px rgba(2, 19, 63, .9); }

/* Display / reading options */
.display-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; min-width: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .34); background: transparent; color: inherit; font: inherit; font-size: .92rem; cursor: pointer; transition: background .25s, border-color .25s; }
.display-toggle:hover { background: rgba(255, 255, 255, .12); }
.site-header.is-scrolled .display-toggle { border-color: var(--c-line); }
.display-toggle__aa { font-weight: 700; font-size: 1.08rem; letter-spacing: -.03em; line-height: 1; }
.display-toggle__txt { display: none; font-weight: 500; }
@media (min-width: 1280px) { .display-toggle__txt { display: inline; } }
.display-toggle.is-set { background: var(--c-brand-yellow); border-color: var(--c-brand-yellow); color: var(--c-navy); }
.display-panel { position: fixed; z-index: 400; top: 84px; right: max(16px, 2vw); width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 110px); overflow-y: auto; padding: 22px; border-radius: 18px; background: #fff; color: var(--c-navy); box-shadow: 0 24px 70px -12px rgba(2, 19, 63, .45); border: 1px solid var(--c-line); }
.display-panel[hidden] { display: none; }
.display-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.display-panel__head h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.display-panel .icon-btn { border-color: var(--c-line); color: var(--c-navy); }
.display-panel__label { margin: 0 0 8px; font-weight: 600; font-size: .95rem; }
.display-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.display-seg button { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 84px; padding: 8px; border-radius: 12px; border: 2px solid var(--c-line); background: #fff; color: var(--c-navy); font: inherit; font-size: .88rem; cursor: pointer; }
.display-seg button span:first-child { font-weight: 700; line-height: 1; }
.display-seg__a0 span:first-child { font-size: 1.1rem; } .display-seg__a1 span:first-child { font-size: 1.5rem; } .display-seg__a2 span:first-child { font-size: 1.95rem; }
.display-seg button[aria-pressed="true"] { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.display-switches { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.display-switches button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px; text-align: left; border-radius: 12px; border: 2px solid var(--c-line); background: #fff; color: var(--c-navy); font: inherit; cursor: pointer; }
.display-switches strong { display: block; font-size: 1rem; }
.display-switches small { display: block; font-size: .85rem; color: var(--c-muted); }
.display-switches .sw { position: relative; flex: 0 0 52px; height: 30px; border-radius: 999px; background: #9aa3b5; transition: background .2s; }
.display-switches .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.display-switches button[aria-checked="true"] { border-color: var(--c-navy); }
.display-switches button[aria-checked="true"] .sw { background: var(--c-navy); }
.display-switches button[aria-checked="true"] .sw::after { transform: translateX(22px); }
.display-reset { width: 100%; min-height: 48px; border-radius: 12px; border: 0; background: transparent; color: var(--c-navy); text-decoration: underline; font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) {
	.display-toggle { width: 46px; padding: 0; }
	.display-panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 88vh; border-radius: 22px 22px 0 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); }
}

/* Larger text: use the menu earlier so the header never crowds */
@media (max-width: 1420px) { html.a11y-t1 .primary-nav, html.a11y-t2 .primary-nav { display: none; } html.a11y-t1 .nav-toggle, html.a11y-t2 .nav-toggle { display: inline-grid; } }
html.a11y-t1 .header-cta, html.a11y-t2 .header-cta { display: none; }

/* Hero slideshow: a real pause control */
.hero__slidenav { align-items: flex-end; }
.hero__pp { align-self: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(2, 19, 63, .45); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.hero__pp:hover { background: rgba(2, 19, 63, .75); }

/* Help while booking */
.help-strip { background: #FFF7E0; border-bottom: 1px solid rgba(2, 19, 63, .1); }
.help-strip__in { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding-block: 12px; }
.help-strip__text { margin: 0; font-size: 1rem; color: var(--c-navy); }
.help-strip__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.help-strip .btn { background: #fff; text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; }
.stepper__now { display: none; margin: 0; padding: 0 16px 12px; font-weight: 600; color: var(--c-navy); }
@media (max-width: 640px) {
	.stepper__now { display: block; }
	.help-strip__text span { display: none; }
	.help-strip__actions { width: 100%; }
	.help-strip__actions .btn { flex: 1; }
	.btn { white-space: normal; text-align: center; }
}

/* High contrast */
html.a11y-contrast { --c-text: #000; --c-muted: #1B2233; --c-line: rgba(0, 0, 0, .6); --c-rule: #000; }
.a11y-contrast body { color: #000; }
.a11y-contrast main a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.a11y-contrast .btn { border-width: 2px; }
.a11y-contrast .hero__shade { background: rgba(2, 19, 63, .78) !important; }
.a11y-contrast .unit-card, .a11y-contrast .stay-card, .a11y-contrast .account__card, .a11y-contrast .booking-card { border: 2px solid #000; }
.a11y-contrast input, .a11y-contrast select, .a11y-contrast textarea { border: 2px solid #000 !important; }
.a11y-contrast .eyebrow, .a11y-contrast .eyebrow--light { color: inherit; opacity: 1; }
.a11y-contrast .stay-cal__day.is-taken, .a11y-contrast .stay-cal__day:disabled { color: #4a4a4a; }
.a11y-contrast .site-footer, .a11y-contrast .site-footer a { color: #fff; }

/* Simple font */
html.a11y-plain { --f-serif: var(--f-sans); --f-display: var(--f-sans); }
.a11y-plain h1, .a11y-plain h2, .a11y-plain h3, .a11y-plain .section-title, .a11y-plain .hero__title { letter-spacing: 0; font-weight: 600; }

/* Calm mode: nothing moves */
.a11y-calm *, .a11y-calm *::before, .a11y-calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.a11y-calm [data-reveal], .a11y-calm [data-stagger] > *, .a11y-calm .unit-card__media, .a11y-calm .hero__title, .a11y-calm .hero__subtitle, .a11y-calm .hero__actions, .a11y-calm .hero .eyebrow { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.a11y-calm [data-hero-media], .a11y-calm .hero__slide img { transform: none !important; }
.a11y-calm .ticker__track { transform: none !important; flex-wrap: wrap; }
.a11y-calm .scroll-progress, .a11y-calm .hero__cue { display: none; }
/* Booking bar sitting on a navy card (contact page): readable labels and values */
.info-card--navy .booking-bar label { color: rgba(255, 255, 255, .88); }
.info-card--navy .booking-bar__value, .info-card--navy .gstep__val { color: #fff; }
.info-card--navy .booking-bar__value.is-empty { color: rgba(255, 255, 255, .75); }
.info-card--navy .gstep__btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.info-card--navy .gstep__btn:hover:not(:disabled) { background: #fff; color: var(--c-navy); }

/* ===== 1.38 Deeper design & mobile ===== */
.unit-top__price { margin: 14px 0 0; font-size: 1.05rem; color: rgba(255, 255, 255, .82); }
.unit-top__price strong { color: var(--c-sun, #F2B24B); font-family: var(--f-serif); font-size: 1.5rem; font-weight: 600; letter-spacing: 0; }
.unit-gallery__count { display: none; }
.book-card__close { display: none; }
.sheet-backdrop { display: none; }
.mobile-bookbar__price { display: none; }
html.sheet-lock { overflow: hidden; }

@media (max-width: 700px) {
	/* Unit page: photos first, full-bleed, swipeable */
	.single-rsss_unit .site-main { display: flex; flex-direction: column; }
	.single-rsss_unit .unit-gallery { order: -1; margin: 0; padding-top: var(--header-h); background: var(--c-navy); }
	.single-rsss_unit .unit-gallery > .container { padding: 0; max-width: none; }
	.single-rsss_unit .unit-gallery__grid { position: relative; margin: 0; padding: 0; gap: 0; }
	.single-rsss_unit .unit-gallery__item, .single-rsss_unit .unit-gallery__item.is-hidden { flex: 0 0 100%; aspect-ratio: 4 / 3; border-radius: 0 !important; }
	.single-rsss_unit .unit-gallery__count { display: block; position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(2, 19, 63, .72); color: #fff; font-size: .82rem; font-weight: 700; pointer-events: none; }
	.single-rsss_unit .unit-gallery__grid { position: relative; }
	.single-rsss_unit .unit-top { padding: 24px 0 28px; }
	.single-rsss_unit .unit-top .breadcrumbs, .single-rsss_unit .unit-top__lead { display: none; }
	.single-rsss_unit .unit-top__head { display: block; }
	.single-rsss_unit .unit-top__head > .btn { display: none; }
	.single-rsss_unit .unit-top__title { font-size: clamp(1.9rem, 9vw, 2.5rem); }
	.single-rsss_unit .unit-body { padding-top: 28px; }
}

@media (max-width: 900px) {
	.js .book-card[data-sheet] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 320; max-height: 92svh; overflow: auto; overscroll-behavior: contain; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; border-width: 0; box-shadow: 0 -18px 50px rgba(2, 19, 63, .28); transform: translateY(105%); visibility: hidden; transition: transform .38s var(--ease), visibility 0s linear .38s; }
	.js .book-card[data-sheet].is-sheet-open { transform: none; visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
	.js .book-card[data-sheet]::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--c-line); margin: -8px auto 14px; }
	.js .book-card__close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-white); color: var(--c-navy); }
	.js .book-card__close .icon { width: 18px; }
	.js .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 310; background: rgba(2, 19, 63, .55); }
	.js .sheet-backdrop[hidden] { display: none; }
	.a11y-calm .book-card { transition: none !important; }

	/* Sticky bar with the from-price */
	.mobile-bookbar--price { align-items: center; }
	.mobile-bookbar--price .mobile-bookbar__price { display: block; flex: 1 1 auto; margin: 0; padding-left: 8px; font-size: .78rem; line-height: 1.25; color: var(--c-muted); }
	.mobile-bookbar--price .mobile-bookbar__price strong { display: block; font-family: var(--f-serif); font-size: 1.3rem; color: var(--c-ink); line-height: 1.1; }
	.mobile-bookbar--price .btn { flex: 0 0 auto; padding-inline: 20px; }
}

html.sheet-lock .mobile-bookbar, html.sheet-lock .cookie-notice { display: none; }

/* Results page: search summary pill (phones) */
.stay-summary { display: none; }
@media (max-width: 700px) {
	.page-template-tpl-book .page-hero--compact, .page-template-tpl-book .page-hero.hero--compact { min-height: 0; padding-bottom: 28px; }
	.page-template-tpl-book .hero__subtitle { display: none; }
	.help-strip__in { flex-wrap: nowrap; padding-block: 8px; gap: 10px; }
	.help-strip__text span { display: none; }
	.help-strip__text { font-size: .95rem; }
	.help-strip .btn { min-height: 44px; padding-inline: 14px; }
	.help-strip__actions { flex-wrap: nowrap; }
	.help-strip .help-num { display: none; }
	.js .stay-search.has-summary { padding-top: 16px; }
	.js .stay-search.has-summary .stay-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 10px 18px; border: 1.5px solid var(--c-navy); border-radius: 999px; background: #fff; color: var(--c-navy); font: inherit; font-weight: 700; font-size: 1rem; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm, 0 6px 18px rgba(2, 19, 63, .08)); }
	.stay-summary__edit { flex: none; padding: 6px 14px; border-radius: 999px; background: var(--c-navy); color: #fff; font-size: .85rem; }
	.js .stay-search.has-summary:not(.is-open) .stay-search__bar { display: none; }
	.js .stay-search.has-summary.is-open .stay-search__bar { margin-top: 14px; }
}
@media (max-width: 700px) {
	.page-template-tpl-book .hero--compact .hero__inner { padding-top: calc(var(--header-h) + 14px); padding-bottom: 22px; }
	.page-template-tpl-book .hero--compact .hero__title { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
	.page-template-tpl-book .hero--compact .eyebrow { display: none; }
}
@media (max-width: 700px) {
	.js .has-summary ~ section .stay-meta__when, .js .stay-search.has-summary + section .stay-meta__when { display: none; }
	.help-strip__text { white-space: nowrap; }
}

/* ===== Date-range picker ===== */
.rp-on .booking-bar__field--date input[type="date"] { pointer-events: none; }
.rp { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rp[hidden] { display: none; }
.rp__scrim { position: absolute; inset: 0; background: rgba(2, 19, 63, .55); }
.rp__box { position: relative; display: flex; flex-direction: column; width: min(780px, 100%); max-height: calc(100svh - 32px); background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(2, 19, 63, .35); overflow: hidden; }
.rp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 4px; }
.rp__title { margin: 0; font-size: 1.5rem; color: var(--c-navy); }
.rp__x, .rp__arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; color: var(--c-navy); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.rp__x:hover, .rp__arrow:hover:not(:disabled) { background: var(--c-sand); }
.rp__arrow:disabled { opacity: .35; cursor: default; }
.rp__sum { margin: 0; padding: 4px 24px 8px; min-height: 2.2em; font-weight: 700; color: var(--c-sea); }
.rp__nav { position: absolute; top: 126px; left: 24px; right: 24px; display: flex; justify-content: space-between; pointer-events: none; z-index: 2; }
.rp__nav > * { pointer-events: auto; }
.rp__months { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 24px 8px; overflow: auto; }
.rp__mt { margin: 0 0 8px; text-align: center; font-size: 1.1rem; color: var(--c-navy); line-height: 44px; }
.rp__dow, .rp__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.rp__dow span { text-align: center; font-size: .8rem; font-weight: 700; color: var(--c-muted); padding: 4px 0 6px; }
.rp__d { position: relative; min-height: 46px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--c-ink); font: inherit; font-size: 1.02rem; cursor: pointer; }
.rp__d:disabled { color: rgba(18, 28, 51, .3); text-decoration: line-through; cursor: default; }
.rp__d:hover:not(:disabled):not(.is-a):not(.is-d) { background: var(--c-sand); border-radius: 50%; }
.rp__d.is-today { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.rp__d.is-in, .rp__d.is-prev { background: #D8E7EE; border-radius: 0; }
.rp__d.is-a, .rp__d.is-d { background: var(--c-navy); color: #fff; border-radius: 50%; font-weight: 800; }
.rp__d.is-a.has-range { border-radius: 50% 0 0 50%; }
.rp__d.is-d.has-range { border-radius: 0 50% 50% 0; }
.rp__d:focus-visible { outline: 3px solid var(--c-sea); outline-offset: -3px; z-index: 1; }
.rp__foot { display: flex; justify-content: space-between; gap: 12px; padding: 14px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); background: #fff; }
.rp__foot .btn { min-height: 52px; }
.rp__foot .btn[data-rp-apply] { flex: 1; max-width: 280px; }
.rp__foot .btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 700px) {
	.rp { padding: 0; align-items: flex-end; }
	.rp__box { width: 100%; height: min(94svh, 760px); max-height: none; border-radius: 22px 22px 0 0; }
	.rp__head { padding: 16px 16px 0; }
	.rp__sum { padding: 4px 16px 10px; border-bottom: 1px solid var(--c-line); }
	.rp__nav { display: none; }
	.rp__months { display: block; flex: 1 1 auto; padding: 0 12px 12px; -webkit-overflow-scrolling: touch; }
	.rp__m { padding-top: 12px; }
	.rp__mt { text-align: left; padding-left: 4px; }
	.rp__d { min-height: 50px; font-size: 1.1rem; }
	.rp__foot { padding-inline: 16px; }
	.rp__foot .btn[data-rp-apply] { max-width: none; }
}
.a11y-contrast .rp__d.is-in { background: #BCD6E3; }
.a11y-contrast .rp__d:disabled { color: #4a4a4a; }
@media (prefers-reduced-motion: no-preference) { .rp__box { animation: rpUp .3s var(--ease) both; } }
@keyframes rpUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 700px) {
	.hero--full { min-height: min(80svh, 700px); }
}

/* ===== Currency switch (EUR | USD) ===== */
.cur-switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid currentColor; border-radius: 999px; font-size: .85rem; font-weight: 700; line-height: 1; }
.cur-switch__l { display: none; padding: 0 6px 0 10px; font-weight: 600; opacity: .85; }
.cur-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 999px; color: inherit; text-decoration: none !important; letter-spacing: .02em; }
.cur-switch a:hover { background: rgba(127, 127, 127, .18); }
.cur-switch a.is-on { background: var(--c-navy); color: #fff; }
.site-header:not(.is-scrolled) .cur-switch a.is-on { background: #fff; color: var(--c-navy); }
.cur-switch--header { display: none; }
@media (min-width: 1366px) { .cur-switch--header { display: inline-flex; } }
.cur-switch a { white-space: nowrap; }
.cur-switch--card { margin: 0 0 14px; color: var(--c-navy); border-color: var(--c-line); }
.cur-switch--card .cur-switch__l, .cur-switch--inline .cur-switch__l { display: inline; }
.cur-switch--inline { color: var(--c-navy); border-color: var(--c-line); background: #fff; }
.cur-switch--nav { display: flex; justify-content: center; color: #fff; border-color: rgba(255, 255, 255, .5); margin-bottom: 4px; }
.cur-switch--nav .cur-switch__l { display: inline; }
.cur-switch--nav a.is-on { background: #fff; color: var(--c-navy); }
.js .book-card[data-sheet] .cur-switch--card { margin-right: 54px; }
.stay-cur { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 18px; }
.stay-chg, .stay-picker__note { margin: 6px 0 0; font-size: .86rem; color: var(--c-muted); }
.stay-cur .stay-chg { margin: 0; }
.review__chg dd { font-size: .86rem; color: var(--c-muted); margin: 0; }
.a11y-contrast .cur-switch { border-width: 2px; }
.primary-nav a { white-space: nowrap; }

/* Reading options now live quietly in the footer */
.a11y-link { margin: 10px 0 0; }
.a11y-link__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-size: .85rem; color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.a11y-link__btn:hover { color: #fff; }
@media print { .a11y-link { display: none; } }

/* Ambient sound hint + toggle states */
.header-actions { position: relative; }
.audio-toggle[aria-pressed="true"] { background: var(--c-sun, #C87E05); border-color: var(--c-sun, #C87E05); color: #fff; }
.site-header.is-scrolled .audio-toggle[aria-pressed="true"] { color: #fff; }
.audio-hint { position: absolute; top: calc(100% + 14px); left: 0; z-index: 5; margin: 0; width: max-content; max-width: 230px; padding: 10px 14px; border-radius: 12px; background: #fff; color: var(--c-navy); font-size: .88rem; font-weight: 600; line-height: 1.3; box-shadow: 0 14px 40px -10px rgba(2, 19, 63, .45); }
.audio-hint[hidden] { display: none; }
.audio-hint::before { content: ""; position: absolute; top: -6px; left: 17px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
@media (max-width: 600px) { .audio-hint { left: auto; right: -4px; } .audio-hint::before { left: auto; right: 112px; } }

/* Tidier header: smaller icons, a tiny currency switch */
.header-actions { gap: 8px; }
.header-actions .icon-btn { width: 40px; height: 40px; }
.cur-switch--header { padding: 2px; gap: 1px; font-size: .68rem; letter-spacing: .04em; border-color: rgba(255, 255, 255, .35); }
.site-header.is-scrolled .cur-switch--header { border-color: var(--c-line); }
.cur-switch--header a { min-height: 26px; padding: 0 9px; }
@media (min-width: 1180px) { .cur-switch--header { display: inline-flex; } }
.cur-switch--inline a, .cur-switch--card a { min-height: 30px; padding: 0 10px; }
.cur-switch--inline, .cur-switch--card { font-size: .78rem; }

/* 1.41 — Boxes & selections, phone first */
/* Form fields become real boxes: visible edge, generous tap area, calm focus. */
.field input, .field select, .field textarea,
.account-form input, .account-form select, .account-form textarea,
.stay-picker__guests select, .stay-reserve input, .stay-reserve select, .stay-reserve textarea {
	border: 1px solid var(--sea-200, #BFD6E0); border-radius: 14px; background-color: #fff; padding: 14px 16px; min-height: 54px;
	transition: border-color .2s, box-shadow .2s;
}
.field textarea, .account-form textarea { min-height: 130px; }
.field select, .account-form select { padding-right: 42px; }
.field input:focus, .field select:focus, .field textarea:focus,
.account-form input:focus, .account-form select:focus, .account-form textarea:focus {
	outline: none; border: 1px solid var(--sea-700, #114A64); box-shadow: 0 0 0 4px rgba(17, 74, 100, .14);
}
.field input::placeholder, .field textarea::placeholder, .account-form input::placeholder { color: #7a8892; opacity: 1; }
.field input[type="date"] { display: block; text-align: left; }
.field--check label { padding: 12px 14px; border: 1px solid var(--sea-100, #DEF1FA); border-radius: 14px; background: #fff; cursor: pointer; }
.field--check input { width: 24px; height: 24px; margin-top: 0; }
.form-grid { gap: 16px 18px; }

@media (max-width: 900px) {
	/* Sticky bar must never hide the end of a page. */
	.site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

	/* Booking card inside the unit sheet: boxed fields. */
	.booking-bar--card { grid-template-columns: 1fr 1fr; gap: 10px; }
	.booking-bar--card .booking-bar__field { padding: 11px 14px; min-height: 66px; border: 1px solid var(--sea-100, #DEF1FA); border-radius: 14px; background: #fff; }
	.booking-bar--card .booking-bar__field:nth-child(odd) { padding-right: 14px; }
	.booking-bar--card .booking-bar__field--guests, .booking-bar--card .booking-bar__submit { grid-column: 1 / -1; }
	.booking-bar--card .booking-bar__submit { border-radius: 14px; margin-top: 4px; }
	.booking-bar--card .booking-bar__nights { right: 14px; bottom: 11px; }
}

@media (max-width: 640px) {
	/* Hero search: three clear tiles + one big button. */
	.booking-bar--hero { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border-radius: 22px; overflow: visible; }
	.booking-bar--hero .booking-bar__field { min-height: 66px; padding: 11px 14px; border: 1px solid var(--sea-100, #DEF1FA); border-radius: 14px; background: #fff; }
	.booking-bar--hero .booking-bar__field + .booking-bar__field::before, .booking-bar--hero .booking-bar__field::before { display: none; }
	.booking-bar--hero .booking-bar__field--guests { grid-column: 1 / -1; min-height: 62px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
	.booking-bar--hero .booking-bar__field--guests .gstep { flex: 0 1 190px; margin: 0; }
	.booking-bar--hero .booking-bar__field--guests .gstep__btn { width: 42px; height: 42px; flex-basis: 42px; }
	.booking-bar--hero .booking-bar__field--guests .gstep__note { top: 100%; }
	.booking-bar--hero .booking-bar__submit { grid-column: 1 / -1; min-height: 58px; border: 0; border-radius: 14px; padding-inline: 18px; }
	.booking-bar--hero .booking-bar__submit span { font-size: .86rem; letter-spacing: .1em; }
	.booking-bar--hero .booking-bar__submit .icon { display: inline-block; }
	.booking-bar--hero .booking-bar__nights { right: 12px; bottom: 11px; }
	.booking-bar--hero .booking-bar__value { font-size: 1.1rem; }
	.booking-bar__field--date { cursor: pointer; }

	/* Results: shorter, scannable cards. */
	.stay-card__text { display: none; }
	.stay-card__media { aspect-ratio: 16 / 9; }
	.stay-card__body { padding: 14px 16px 2px; gap: 8px; }
	.stay-card__title { font-size: 1.28rem; }
	.stay-card__buy { flex-wrap: nowrap; gap: 12px; padding: 12px 16px 16px; }
	.stay-card__price { flex: 0 1 auto; min-width: 0; }
	.stay-card__price strong { font-size: 1.55rem; }
	.stay-card__buy .btn { flex: 1 1 auto; min-width: 0; min-height: 50px; padding-inline: 14px; font-size: .78rem; letter-spacing: .06em; border-radius: 14px; }
	.stay-card__buy .btn .icon { display: none; }
	.stay-card__buy .stay-card__note { flex: 1 1 auto; margin: 0; }
	.stay-card__flag { grid-column: 1 / -1; }
	.stay-card.is-unavailable { grid-template-columns: 92px minmax(0, 1fr); }
	.stay-card.is-unavailable .stay-card__media { aspect-ratio: auto; min-height: 92px; }
	.stay-card.is-unavailable .stay-card__body { padding: 12px 14px; justify-content: center; }
	.stay-card.is-unavailable .stay-card__title { font-size: 1.05rem; }
	.stay-card.is-unavailable .stay-card__facts { display: none; }
	.stay-card.is-unavailable .stay-card__buy { grid-column: 1 / -1; padding: 10px 16px; background: transparent; }
	.stay-card.is-unavailable .stay-card__note { font-size: .9rem; }
	.stay-list { gap: 14px; }

	/* Forms: full-width, comfortable rhythm. */
	.form-grid { grid-template-columns: 1fr; gap: 14px; }
	.field label { font-size: .86rem; }
	.account__card { padding: 20px 16px; border-radius: 18px; }
	.stay-picker__guests .gstep { padding: 6px 8px 6px 16px; border-radius: 14px; }
	.stay-search .btn, .stay-reserve .btn[type="submit"], .account-form .btn { width: 100%; justify-content: center; }
	.stay-foot, .stay-card__note { font-size: .92rem; }
}
@media (max-width: 900px) {
	.info-card--navy .booking-bar--card .booking-bar__field { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .32); }
	.info-card--navy .booking-bar--card label { color: rgba(255, 255, 255, .85); }
}
.field--check label > span { color: var(--c-text); }
@media (max-width: 900px) {
	.cur-switch--inline a, .cur-switch--card a, .cur-switch--nav a { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; }
	.gstep__btn, .booking-bar__field--guests .gstep__btn { width: 42px; height: 42px; flex-basis: 42px; }
}

/* 1.42 — Lodgify checkout hand-off */
.lg-pay .review { margin-bottom: 18px; }
.lg-pay__how { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; counter-reset: lg; }
.lg-pay__how li { position: relative; padding: 12px 14px 12px 52px; border: 1px solid var(--sea-100, #DEF1FA); border-radius: 14px; background: #fff; counter-increment: lg; }
.lg-pay__how li::before { content: counter(lg); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c-brand-yellow, #F6B21B); color: var(--sea-800, #0B3446); font-weight: 700; font-size: .85rem; }
.lg-pay__terms { margin: 0 0 18px; font-size: .9rem; color: var(--c-muted, #5b6a73); }
.lg-pay__terms a { text-decoration: underline; text-underline-offset: 3px; }
.lg-pay .btn { min-width: 0; }
@media (max-width: 640px) { .lg-pay .form-actions { flex-direction: column; align-items: stretch; } .lg-pay .form-actions .btn { width: 100%; justify-content: center; } }
.lg-pay .form-note { display: flex; gap: 8px; align-items: flex-start; }
.lg-pay .form-note .icon { flex: none; margin-top: 3px; }

/* 1.43 sync */
.verify-card { margin-bottom: 24px; border-color: var(--sea-300, #8AC9E5); }
.verify-card .btn { margin-top: 8px; }