/* =====================================================================
   B&B Giardini di Iside e Osiride — Casamicciola Terme, Ischia
   Phase 1 · Header + Hero + Stats
   Design system built on the official brand palette:
     terracotta #e56d38 · ink #0d2c35 · ivory #fffef2 · sage #638974 · petrol #25424c
   ===================================================================== */

/* ---------- Self-hosted brand fonts (variable, latin) ---------- */
@font-face {
    font-family: 'Lora';
    src: url('/assets/fonts/lora-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('/assets/fonts/lora-italic-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
    /* Brand palette (official) */
    --terracotta: #e56d38;
    --terracotta-deep: #c74f1e;     /* button hover — AA (4.5:1) with ivory text */
    --terracotta-soft: #f0a279;
    --ink: #0d2c35;
    --petrol: #25424c;
    --sage: #638974;                /* official swatch — decorative fills */
    --sage-deep: #4f7160;           /* accessible sage for small text on light (AA) */
    --ivory: #fffef2;

    /* Derived surfaces */
    --paper: #fbf8ef;          /* page background */
    --paper-2: #f4efe1;        /* warm alt panel */
    --cream-card: #fffdf4;

    /* Text */
    --text: #0d2c35;
    --text-soft: rgba(13, 44, 53, 0.74);
    --text-muted: rgba(13, 44, 53, 0.66);   /* ~4.85:1 on cream — AA for the "Select"/(optional) labels */
    --on-dark: #fffef2;
    --on-dark-soft: rgba(255, 254, 242, 0.82);
    --line: rgba(37, 66, 76, 0.14);

    /* Typography */
    --serif: 'Lora', Georgia, 'Times New Roman', serif;
    --sans: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Radii */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 34px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(13, 44, 53, 0.07);
    --shadow-md: 0 10px 30px rgba(13, 44, 53, 0.10);
    --shadow-lg: 0 22px 60px rgba(13, 44, 53, 0.16);
    --shadow-glow: 0 14px 34px rgba(229, 109, 56, 0.34);

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 0.2s;
    --t-base: 0.35s;
    --t-slow: 0.6s;

    /* Layout */
    --container: 1200px;
    --gutter: clamp(1.15rem, 4vw, 3rem);
    --header-h: 84px;
    --header-h-scrolled: 66px;

    --z-header: 1000;
    --z-menu: 1100;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h-scrolled); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--text);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
    position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
    z-index: 2000; background: var(--ink); color: var(--on-dark);
    padding: 0.7rem 1.4rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: 0.85rem; font-weight: 600; transition: transform var(--t-base) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Shared bits ---------- */
.section-eyebrow, .hero-eyebrow {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
}
.section-eyebrow { color: var(--sage-deep); }
.eyebrow-line { display: inline-block; width: 2.4rem; height: 2px; background: var(--terracotta); border-radius: 2px; }

.section-title {
    font-size: clamp(1.85rem, 1rem + 2.9vw, 3rem);
    color: var(--petrol);
    margin-top: 1rem;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em;
    padding: 0.95rem 1.9rem; border-radius: var(--r-pill);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease), color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}
.btn-book {
    background: var(--terracotta); color: var(--ink);
    box-shadow: var(--shadow-glow);
}
.btn-book:hover { background: var(--terracotta-deep); color: var(--ivory); transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 40px rgba(229, 109, 56, 0.42); }
.btn-book:active { transform: translateY(0) scale(0.99); }

.btn-ghost {
    background: rgba(255, 254, 242, 0.06); color: var(--on-dark);
    border: 1.5px solid rgba(255, 254, 242, 0.7);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); transform: translateY(-2px); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
    position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
    /* animate cheap paint properties only — blur snaps in to avoid per-frame filter cost */
    transition: background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
    border-bottom: 1px solid transparent;
}
/* Soft top scrim in the transparent state — guarantees nav/brand legibility
   over bright regions of the hero photo without a solid bar. */
.site-header[data-state="top"]::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(13, 44, 53, 0.42), rgba(13, 44, 53, 0));
    opacity: 1; transition: opacity var(--t-base) var(--ease);
}
.site-header[data-state="scrolled"]::before { opacity: 0; }
.header-inner {
    display: flex; align-items: center; gap: 1.5rem;
    height: var(--header-h);
    transition: height var(--t-base) var(--ease);
}
/* Glass state after scroll. The blurred backdrop-filter is DESKTOP-ONLY: a
   fixed, blurred bar over scrolling content is a known trigger for garbage
   paint bands on some Android GPUs, so touch devices get a near-opaque bar
   (visually all but identical) with no live filter. */
.site-header[data-state="scrolled"] {
    background: rgba(251, 248, 239, 0.94);
    box-shadow: 0 6px 30px rgba(13, 44, 53, 0.09);
    border-bottom-color: var(--line);
}
@media (hover: hover) and (pointer: fine) {
    .site-header[data-state="scrolled"] {
        background: rgba(251, 248, 239, 0.82);
        backdrop-filter: saturate(150%) blur(16px);
        -webkit-backdrop-filter: saturate(150%) blur(16px);
    }
}
.site-header[data-state="scrolled"] .header-inner { height: var(--header-h-scrolled); }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 0.75rem; margin-right: auto; }
.brand-logo { position: relative; flex: none; display: block; height: 54px; aspect-ratio: 191 / 160; transition: transform var(--t-base) var(--ease); }
.brand:hover .brand-logo { transform: scale(1.04) rotate(-2deg); }
/* Both variants absolutely fill the same box (object-fit: contain) so the
   light↔colour crossfade is perfectly registered regardless of tiny source-size deltas. */
.brand-logo picture { position: absolute; inset: 0; display: block; transition: opacity var(--t-base) var(--ease); }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-logo-color { opacity: 0; }
.brand-logo-light { opacity: 1; }
.site-header[data-state="scrolled"] .brand-logo-light { opacity: 0; }
.site-header[data-state="scrolled"] .brand-logo-color { opacity: 1; }

.brand-text { display: flex; flex-direction: column; line-height: 1.14; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--on-dark); letter-spacing: 0.005em; transition: color var(--t-base) var(--ease); }
.brand-tag { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft); transition: color var(--t-base) var(--ease); }

.site-header[data-state="scrolled"] .brand-name { color: var(--petrol); }
.site-header[data-state="scrolled"] .brand-tag { color: var(--sage-deep); }

/* Nav */
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem); }
.nav-list { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); list-style: none; padding: 0; }
.nav-link {
    position: relative; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em;
    color: var(--on-dark); padding: 0.35rem 0; transition: color var(--t-fast) var(--ease);
}
.nav-link::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
    background: var(--terracotta); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.site-header[data-state="scrolled"] .nav-link { color: var(--petrol); }
.site-header[data-state="scrolled"] .nav-link:hover, .site-header[data-state="scrolled"] .nav-link.is-active { color: var(--ink); }

.nav-book { padding: 0.7rem 1.5rem; font-size: 0.88rem; }

/* Language selector */
.lang { position: relative; }
.lang-trigger {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.7rem; border-radius: var(--r-pill);
    color: var(--on-dark); font-size: 0.88rem; font-weight: 500;
    border: 1.4px solid rgba(255, 254, 242, 0.34);
    transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.lang-trigger:hover { border-color: rgba(255, 254, 242, 0.7); background: rgba(255, 254, 242, 0.08); }
.site-header[data-state="scrolled"] .lang-trigger { color: var(--petrol); border-color: var(--line); }
.site-header[data-state="scrolled"] .lang-trigger:hover { border-color: rgba(37, 66, 76, 0.4); background: rgba(37, 66, 76, 0.05); }
.lang-globe { width: 19px; height: 19px; transition: transform var(--t-base) var(--ease); }
.lang-trigger:hover .lang-globe { transform: rotate(-20deg); }
.lang-code { display: none; font-weight: 600; letter-spacing: 0.05em; }
.lang-caret { width: 15px; height: 15px; opacity: 0.75; transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
.lang[data-open] .lang-caret { transform: rotate(180deg); opacity: 1; }

.lang-menu {
    position: absolute; top: calc(100% + 0.7rem); right: 0; z-index: var(--z-menu);
    min-width: 13rem; list-style: none; padding: 0.5rem; margin: 0;
    background: rgba(251, 248, 239, 0.9);
    backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid rgba(255, 254, 242, 0.6); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
}
.lang[data-open] .lang-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lang-menu::before {
    content: ""; position: absolute; top: -6px; right: 1.6rem; width: 12px; height: 12px;
    background: inherit; border-left: 1px solid rgba(255, 254, 242, 0.6); border-top: 1px solid rgba(255, 254, 242, 0.6);
    transform: rotate(45deg);
}
.lang-option {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    padding: 0.68rem 0.8rem; border-radius: var(--r-sm);
    font-size: 0.92rem; font-weight: 500; color: var(--petrol); text-align: left;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-flag { flex: none; width: 1.45rem; height: 0.97rem; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(13, 44, 53, 0.12); }
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-opt-name { flex: 1; }
.lang-check { width: 17px; height: 17px; color: var(--terracotta); opacity: 0; transform: scale(0.6); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.lang-option:hover, .lang-option:focus-visible { background: rgba(229, 109, 56, 0.1); color: var(--ink); }
.lang-option.is-current { color: var(--ink); font-weight: 600; }
.lang-option.is-current .lang-check { opacity: 1; transform: scale(1); }

/* Staggered menu items */
.lang-menu li { opacity: 0; transform: translateY(6px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.lang[data-open] .lang-menu li { opacity: 1; transform: none; }
.lang[data-open] .lang-menu li:nth-child(1) { transition-delay: 0.04s; }
.lang[data-open] .lang-menu li:nth-child(2) { transition-delay: 0.08s; }
.lang[data-open] .lang-menu li:nth-child(3) { transition-delay: 0.12s; }
.lang[data-open] .lang-menu li:nth-child(4) { transition-delay: 0.16s; }

/* Mobile toggle */
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; }
.nav-toggle-bar { width: 24px; height: 2px; background: var(--on-dark); border-radius: 2px; transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease), background-color var(--t-base) var(--ease); }
.site-header[data-state="scrolled"] .nav-toggle-bar { background: var(--ink); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: var(--header-h); overflow: hidden; isolation: isolate;
}
.hero-slides { position: absolute; inset: 0; z-index: -2; }
.hero-media { position: absolute; inset: 0; opacity: 0; }
.hero-media.is-active { opacity: 1; }
/* The cinematic slideshow (crossfade + slow Ken Burns) now runs on EVERY device.
   Each slide sits on its own GPU layer so the crossfade blends cleanly; the
   opaque, promoted booking-card backdrop (.booking-card::before, below) keeps the
   animating background from tearing the native date fields on mobile GPUs. */
.hero-img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
    transform: translateZ(0); backface-visibility: hidden;
}
.hero-media:nth-child(2) .hero-img { object-position: center 42%; }
.hero-media:nth-child(3) .hero-img { object-position: center 62%; }

.hero-media { transition: opacity 1.7s var(--ease); }
/* Alternating drift: odd slides zoom out, [data-ken="in"] slides zoom in. It runs
   only while a slide is active and stays paused (frozen mid-frame) during fade-out
   so the scale never snaps back; JS restarts it each time a slide re-activates. */
.js .hero-img { animation: heroKenOut 13s var(--ease-out) both paused; }
.js [data-ken="in"] .hero-img { animation-name: heroKenIn; }
.js .hero-media.is-active .hero-img { animation-play-state: running; }

@keyframes heroKenOut { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes heroKenIn { from { transform: scale(1); } to { transform: scale(1.09); } }

.hero-scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        /* left-anchored wash carves a calm field for the headline & de-emphasises foreground clutter */
        linear-gradient(to right, rgba(13, 44, 53, 0.52) 0%, rgba(13, 44, 53, 0.16) 46%, rgba(13, 44, 53, 0) 72%),
        radial-gradient(120% 90% at 30% 60%, rgba(13, 44, 53, 0.3) 0%, rgba(13, 44, 53, 0) 60%),
        linear-gradient(to bottom, rgba(13, 44, 53, 0.5) 0%, rgba(13, 44, 53, 0.12) 26%, rgba(13, 44, 53, 0.2) 62%, rgba(13, 44, 53, 0.74) 100%);
}

.hero-content { position: relative; display: flex; flex-direction: column; max-width: 760px; padding-bottom: 3rem; }
.hero-eyebrow { color: var(--on-dark); text-shadow: 0 1px 12px rgba(13, 44, 53, 0.5); }
.hero-eyebrow .eyebrow-line { background: var(--terracotta-soft); }
.hero-title {
    color: var(--ivory); margin-top: 1.15rem;
    font-size: clamp(2.7rem, 1.2rem + 6.4vw, 5.6rem); font-weight: 600;
    text-shadow: 0 2px 30px rgba(13, 44, 53, 0.4);
}
.hero-title-a, .hero-title-b { display: block; }
.hero-title-b { color: var(--terracotta); }
.hero-title-b em { font-style: italic; font-weight: 400; color: var(--ivory); }
.hero-subtitle {
    margin-top: 1.4rem; max-width: 34em; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
    font-weight: 400; color: var(--ivory); text-shadow: 0 1px 3px rgba(13, 44, 53, 0.55), 0 2px 22px rgba(13, 44, 53, 0.6);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.3rem; }

/* Floating ratings — glassmorphism pills over the hero. Compact so they read
   as social proof under the CTAs without competing with them. */
.hero-ratings { list-style: none; margin: 1.9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hero-ratings li { display: contents; }
.hero-rating {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.9rem; border-radius: var(--r-pill);
    background: rgba(255, 254, 242, 0.13);
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 254, 242, 0.26);
    box-shadow: 0 8px 26px rgba(13, 44, 53, 0.26);
    color: var(--ivory); text-shadow: 0 1px 6px rgba(13, 44, 53, 0.4);
    transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.hero-rating:hover, .hero-rating:focus-visible {
    transform: translateY(-3px);
    background: rgba(255, 254, 242, 0.2);
    border-color: rgba(255, 254, 242, 0.46);
    box-shadow: 0 14px 34px rgba(13, 44, 53, 0.34);
}
.hero-rating:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.hero-rating:active { transform: translateY(-1px) scale(0.98); }
/* Fallback where backdrop-filter is unsupported: a solid-enough tint keeps the
   text readable instead of washing out over a bright hero region. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .hero-rating { background: rgba(13, 44, 53, 0.5); border-color: rgba(255, 254, 242, 0.34); }
}
.hr-star { width: 0.95rem; height: 0.95rem; flex: none; fill: var(--terracotta); filter: drop-shadow(0 1px 2px rgba(13, 44, 53, 0.35)); }
.hr-score { font-weight: 700; font-size: 0.98rem; line-height: 1; }
.hr-plat { font-size: 0.84rem; font-weight: 500; color: rgba(255, 254, 242, 0.86); }

/* Short viewports (landscape laptops): shrink the headline and tighten the
   vertical rhythm so the hero — now including the ratings — fits without the
   booking card overlapping it. */
@media (max-height: 800px) {
    .hero-title { font-size: clamp(2.2rem, 1rem + 4vw, 3.7rem); margin-top: 0.7rem; }
    .hero-content { padding-bottom: 0.8rem; }
    .hero-subtitle { margin-top: 0.9rem; }
    .hero-actions { margin-top: 1.4rem; }
    .hero-ratings { margin-top: 1rem; }
    /* NOTE: don't put `.booking { margin-top: … }` here — this block sits
       before the .booking base rule below, so at equal specificity the base
       always wins and the declaration is silently dead. Phone placement is
       governed by the single ≤620px rule in the responsive section. */
}

/* =====================================================================
   BOOKING / CHECK AVAILABILITY
   The elevated card overlaps the hero's bottom edge and replaces the old
   scroll indicator as the "there's more below" affordance.
   ===================================================================== */
.booking { position: relative; z-index: 5; margin-top: calc(-1 * clamp(2.6rem, 6vw, 4.4rem)); }
.booking-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(37, 66, 76, 0.08);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 70px rgba(13, 44, 53, 0.22);
    padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.3rem, 2.6vw, 2.2rem) clamp(1.1rem, 2vw, 1.5rem);
    isolation: isolate;
}
/* GPU-safe backdrop: a promoted, opaque layer that sits between the animated
   hero and the card's contents. It gives the card a clean, non-repainting
   backing so the background slideshow can't tear the fields — WITHOUT promoting
   the card itself (which would put the native <input type=date> controls on a
   composited layer that some Android GPUs rasterise as garbage). The fields
   stay in the normal layer, above this backdrop. */
.booking-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: #fff; border-radius: inherit;
    transform: translateZ(0); backface-visibility: hidden;
}
.booking-card > * { position: relative; z-index: 1; }
.booking-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.05rem; }
.booking-title {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-deep);
}
.booking-title svg { width: 1.15rem; height: 1.15rem; color: var(--terracotta); }
.booking-nights {
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--petrol);
    padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper);
    white-space: nowrap;
}
.booking-nights[hidden] { display: none; }

.booking-fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: clamp(0.7rem, 1.4vw, 1rem); align-items: stretch; }
.bfield {
    display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; min-width: 0;
    padding: 0.7rem 0.95rem;
    background: var(--cream-card); border: 1.5px solid var(--line); border-radius: var(--r-md);
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
    cursor: pointer;
}
.bfield:hover { border-color: rgba(37, 66, 76, 0.32); }
.bfield:focus-within { border-color: var(--terracotta); background: #fff; box-shadow: 0 0 0 3px rgba(229, 109, 56, 0.16); }
.bfield-label {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-deep);
}
.bfield-label svg { width: 1.05rem; height: 1.05rem; color: var(--terracotta); flex: none; }
/* Custom date-field buttons (replace the native date inputs) */
.bfield--date { text-align: left; -webkit-tap-highlight-color: transparent; }
.bfield-value {
    font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--petrol);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bfield-value.is-empty { color: var(--text-muted); font-weight: 500; }
.bfield--date.is-active { border-color: var(--terracotta); background: #fff; box-shadow: 0 0 0 3px rgba(229, 109, 56, 0.16); }
.bfield--date:focus-visible { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(229, 109, 56, 0.2); }

/* ---- In-card calendar (unfolds smoothly, no native OS picker) ---- */
.booking-cal-wrap { display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); transition: grid-template-rows 0.42s var(--ease-out); }
.booking-card.is-expanded .booking-cal-wrap { grid-template-rows: 1fr; }
.booking-cal {
    overflow: hidden; min-height: 0;
    visibility: hidden; opacity: 0; transform: translateY(10px);
    transition: opacity 0.34s var(--ease), transform 0.4s var(--ease-out), visibility 0.42s var(--ease);
}
/* Inner block: carries the spacing (so it collapses cleanly with the height
   animation — no residual line when closed) AND the max-width + centering.
   Centering lives here, NOT on .booking-cal, because auto margins on a grid
   item disable its stretch and shrink it to content width. */
.booking-cal-inner {
    max-width: 27rem; margin-inline: auto;
    padding-top: clamp(1.1rem, 2.4vw, 1.5rem); margin-top: clamp(1.1rem, 2.4vw, 1.5rem);
    border-top: 1px solid var(--line);
}
.booking-card.is-expanded .booking-cal { visibility: visible; opacity: 1; transform: none; }

.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.75rem; }
.cal-title {
    flex: 1; text-align: center; font-family: var(--serif); font-weight: 600;
    font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); color: var(--petrol); text-transform: capitalize;
}
.cal-nav {
    flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border-radius: var(--r-pill); border: 1.5px solid var(--line); color: var(--petrol);
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cal-nav svg { width: 1.15rem; height: 1.15rem; }
.cal-nav:hover:not(:disabled) { border-color: var(--terracotta); color: var(--terracotta); }
.cal-nav:active:not(:disabled) { transform: scale(0.94); }
.cal-nav:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.cal-nav:disabled { opacity: 0.3; cursor: default; }

.cal-hint {
    text-align: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--sage-deep); margin-bottom: 0.8rem;
}
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 0.3rem; }
.cal-weekdays span {
    text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--text-muted); text-transform: uppercase; padding: 0.15rem 0;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 3px; }
/* ARIA week rows carry no box — cells flow straight into the 7-col grid */
.cal-grid > [role="row"] { display: contents; }
/* the CELL carries the square aspect ratio (reliable) and the range band; the
   day button fills it, so the endpoints stay perfectly circular at any width */
.cal-cell { position: relative; aspect-ratio: 1 / 1; }
.cal-cell--pad { pointer-events: none; }
.cal-cell.in-range { background: rgba(229, 109, 56, 0.1); }
.cal-cell.is-start { background: linear-gradient(to right, transparent 50%, rgba(229, 109, 56, 0.1) 50%); }
.cal-cell.is-end { background: linear-gradient(to left, transparent 50%, rgba(229, 109, 56, 0.1) 50%); }

.cal-day {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 0.9rem; font-weight: 600; color: var(--petrol); background: transparent;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cal-day:hover:not(:disabled):not(.is-endpoint) { background: rgba(37, 66, 76, 0.08); }
.cal-day:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -2px; }
.cal-day.today:not(.is-endpoint) { box-shadow: inset 0 0 0 1.6px var(--sage); }
.cal-day.is-endpoint { background: var(--terracotta); color: var(--ivory); box-shadow: 0 5px 14px rgba(229, 109, 56, 0.34); }
.cal-day.is-endpoint:hover { background: var(--terracotta-deep); }
.cal-day:disabled { color: var(--text-muted); opacity: 0.38; cursor: default; }

.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; }
.cal-clear {
    font-size: 0.84rem; font-weight: 600; color: var(--text-soft);
    text-decoration: underline; text-underline-offset: 2px; transition: color var(--t-fast) var(--ease);
}
.cal-clear:hover { color: var(--terracotta); }
.cal-done { padding: 0.6rem 1.7rem; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
    .booking-cal-wrap, .booking-cal, .cal-day, .cal-nav { transition-duration: 0.01ms; }
}

.guests-stepper { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.step-btn {
    flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
    border: 1.5px solid var(--line); border-radius: var(--r-pill);
    font-size: 1.15rem; line-height: 1; color: var(--petrol);
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.step-btn:hover:not(:disabled) { border-color: var(--terracotta); color: var(--terracotta); transform: scale(1.06); }
.step-btn:active:not(:disabled) { transform: scale(0.96); }
.step-btn:disabled { opacity: 0.35; cursor: default; }
.guests-value { font-size: 0.98rem; font-weight: 600; color: var(--petrol); white-space: nowrap; }

.booking-submit { gap: 0.55rem; padding: 0.95rem 1.7rem; font-size: 0.95rem; }
.booking-submit svg { width: 1.15rem; height: 1.15rem; flex: none; }

.booking-error { margin-top: 0.85rem; font-size: 0.86rem; font-weight: 500; color: var(--terracotta-deep); }
.booking-error[hidden] { display: none; }

.booking-trust {
    list-style: none; padding: 1.05rem 0 0; margin: 1.15rem 0 0;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2.2rem;
}
.booking-trust li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--text-soft); }
.booking-trust svg { width: 1.05rem; height: 1.05rem; color: var(--sage-deep); flex: none; }

/* =====================================================================
   STATS / INTRO
   ===================================================================== */
.stats { position: relative; padding: clamp(4rem, 7vw, 7.5rem) 0; background: var(--paper); }
.stats::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 46%;
    background: linear-gradient(to bottom, var(--paper-2), var(--paper)); z-index: 0;
}
.stats-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}

/* Gallery collage */
.gallery {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: clamp(0.7rem, 1.4vw, 1.15rem);
    height: clamp(430px, 46vw, 600px);
}
.gallery-item {
    position: relative; overflow: hidden; border-radius: var(--r-lg);
    box-shadow: var(--shadow-md); background: var(--paper-2);
}
.gallery-item--tall { grid-row: 1 / span 2; }
.gallery-item picture { position: absolute; inset: 0; display: block; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.gallery-item::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 254, 242, 0.35);
    background: linear-gradient(to top, rgba(13, 44, 53, 0.18), transparent 45%);
    pointer-events: none;
}
.gallery-item:hover img { transform: scale(1.07); }

/* Panel */
.stats-panel { min-width: 0; }
.stats-body { margin-top: 1.3rem; color: var(--text-soft); font-size: 1.02rem; max-width: 40em; }
.stats-cta { margin-top: 2rem; }

/* =====================================================================
   ABOUT US
   ===================================================================== */
.about { padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(3.5rem, 6vw, 6rem); background: var(--paper); }
.about-inner { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }

/* Layered editorial image composition */
.about-media { position: relative; }
.about-frame {
    position: absolute; z-index: 0; top: -1.1rem; left: -1.1rem; width: 54%; height: 52%;
    border: 1.5px solid rgba(229, 109, 56, 0.55); border-radius: var(--r-lg); pointer-events: none;
}
.about-photo { border-radius: var(--r-lg); overflow: hidden; margin: 0; }
.about-photo--main { position: relative; z-index: 1; box-shadow: var(--shadow-lg); }
.about-photo--main img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 839; object-fit: cover; }
.about-photo--inset {
    position: absolute; z-index: 2; right: -1.3rem; bottom: -1.7rem; width: 43%;
    border: 6px solid var(--paper); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.about-photo--inset img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r-md) - 4px); }

/* Story text */
.about-body .section-title { margin-top: 1rem; }
.about-text { margin-top: 1.3rem; color: var(--text-soft); font-size: clamp(1rem, 0.96rem + 0.3vw, 1.1rem); line-height: 1.78; max-width: 40em; }
.about-signature { margin-top: 1.7rem; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); color: var(--petrol); }

/* Amenities feature cards */
.amenities { margin-top: clamp(4rem, 7vw, 6.5rem); }
.amenities-title { text-align: center; margin: 0.9rem auto 0; max-width: 20ch; font-family: var(--serif); font-weight: 600; color: var(--petrol); font-size: clamp(1.5rem, 1rem + 1.9vw, 2.3rem); line-height: 1.14; }
.amenities-grid {
    list-style: none; padding: 0; margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem);
}
.amenity {
    display: flex; align-items: flex-start; gap: 1.15rem;
    padding: clamp(1.3rem, 2vw, 1.7rem);
    background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.amenity:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(229, 109, 56, 0.35); }
.amenity-icon {
    flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: var(--r-md);
    color: var(--terracotta); background: rgba(229, 109, 56, 0.12);
    transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.amenity-icon svg { width: 1.6rem; height: 1.6rem; }
.amenity:hover .amenity-icon { background: var(--terracotta); color: var(--ivory); transform: rotate(-4deg); }
.amenity-text { min-width: 0; }
.amenity-title { font-family: var(--sans); font-weight: 700; font-size: 1.02rem; color: var(--petrol); }
.amenity-desc { margin-top: 0.32rem; font-size: 0.88rem; color: var(--text-soft); line-height: 1.55; }

/* At a glance — editorial photo gallery + statistics card */
.glance { margin-top: clamp(4rem, 7vw, 6.5rem); }
.glance > .section-eyebrow { margin-bottom: clamp(2rem, 4vw, 3rem); }
.glance-inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.5rem, 3vw, 2.6rem); align-items: stretch; }
.glance-gallery { display: flex; flex-direction: column; gap: clamp(0.9rem, 1.6vw, 1.3rem); }
.glance-shot { margin: 0; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-md); background: var(--paper-2); }
.glance-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.glance-shot--tall img { aspect-ratio: 4 / 5; }
.glance-shot--wide img { aspect-ratio: 3 / 2; }
.glance-shot--sq img { aspect-ratio: 1 / 1; }
.glance-shot:hover img { transform: scale(1.06); }

.glance-card {
    margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: clamp(1.6rem, 3vw, 2.7rem); text-align: center;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: #ffffff; border: 1px solid rgba(37, 66, 76, 0.08); border-radius: var(--r-xl);
    box-shadow: 0 30px 70px rgba(13, 44, 53, 0.14);
}
.glance-stat { display: flex; flex-direction: column-reverse; align-items: center; }
.glance-num {
    font-family: var(--serif); font-weight: 700; color: var(--terracotta); line-height: 1; letter-spacing: -0.02em;
    font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.2rem); font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: baseline;
}
.glance-unit { font-family: var(--sans); font-weight: 600; font-size: 0.4em; color: var(--sage-deep); margin-left: 0.14em; letter-spacing: 0; }
.glance-label { margin-top: 0.85rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--petrol); }
.glance-rule { width: clamp(3rem, 30%, 7rem); height: 1px; background: var(--line); }

/* =====================================================================
   LOCATION
   ===================================================================== */
.location {
    position: relative; overflow: hidden;
    padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(2.4rem, 4vw, 4rem);
    background:
        radial-gradient(90rem 40rem at 85% -10%, rgba(229, 109, 56, 0.14), transparent 60%),
        linear-gradient(180deg, var(--ink) 0%, var(--petrol) 100%);
    color: var(--on-dark);
}
.location-head { max-width: 46rem; margin: 0 auto clamp(2.6rem, 5vw, 4rem); text-align: center; }
.location-eyebrow { color: var(--terracotta-soft); }
.location-eyebrow .eyebrow-line { background: var(--terracotta-soft); }
.location-title { color: var(--ivory); }
.location-intro { margin-top: 1.15rem; color: var(--on-dark-soft); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); line-height: 1.7; }

.location-grid {
    display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(1.4rem, 2.6vw, 2.4rem);
    align-items: stretch;
}

/* Nearby attractions — glass cards */
.poi-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.75rem, 1.3vw, 1.05rem); }
.poi {
    display: flex; align-items: center; gap: 1.05rem;
    padding: clamp(1.05rem, 1.7vw, 1.35rem) clamp(1.1rem, 1.8vw, 1.45rem);
    background: rgba(255, 254, 242, 0.055);
    border: 1px solid rgba(255, 254, 242, 0.14);
    border-radius: var(--r-lg);
    transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.poi:hover {
    transform: translateY(-4px);
    background: rgba(255, 254, 242, 0.085);
    border-color: rgba(240, 162, 121, 0.5);
    box-shadow: 0 18px 40px rgba(6, 20, 26, 0.45);
}
.poi-icon {
    flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-md);
    color: var(--terracotta-soft); background: rgba(229, 109, 56, 0.16);
    transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.poi-icon svg { width: 1.5rem; height: 1.5rem; }
.poi:hover .poi-icon { background: var(--terracotta); color: var(--ivory); transform: rotate(-4deg); }
.poi-text { min-width: 0; flex: 1; }
.poi-title { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--ivory); }
.poi-desc { margin-top: 0.28rem; font-size: 0.86rem; line-height: 1.5; color: var(--on-dark-soft); }
.poi-dist {
    flex: none; align-self: center; white-space: nowrap;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
    color: #f5b797; /* lighter terracotta tint — keeps AA (≥4.8:1) on the glass cards, incl. hover */
    padding: 0.4rem 0.75rem; border: 1px solid rgba(240, 162, 121, 0.45); border-radius: var(--r-pill);
}

/* Map card — capped height and vertically centered so it doesn't over-stretch
   next to the full attraction list on desktop */
.map-card { display: flex; flex-direction: column; align-self: center; width: 100%; height: 100%; max-height: 620px; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 26px 60px rgba(6, 20, 26, 0.5); border: 1px solid rgba(255, 254, 242, 0.16); }
.map-frame { position: relative; flex: 1; min-height: 320px; background: rgba(255, 254, 242, 0.06); }
.map-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
    color: var(--on-dark-soft); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-align: center; padding: 1rem;
}
.map-placeholder svg { width: 2.6rem; height: 2.6rem; color: var(--terracotta-soft); }
.map-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-open {
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    padding: 0.95rem 1.2rem;
    background: rgba(255, 254, 242, 0.07); border-top: 1px solid rgba(255, 254, 242, 0.14);
    color: var(--ivory); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em;
    transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.map-open svg { width: 1.1rem; height: 1.1rem; color: var(--terracotta-soft); transition: transform var(--t-base) var(--ease); }
.map-open:hover { background: rgba(229, 109, 56, 0.2); }
.map-open:hover svg { transform: translate(2px, -2px); }

/* Booking CTA */
.location-cta { margin-top: clamp(2.8rem, 5vw, 4.2rem); text-align: center; }
.location-cta-title {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem); color: var(--ivory); margin-bottom: 1.6rem;
}
.location-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.btn-whatsapp {
    background: #25d366; color: #073b27;
    box-shadow: 0 14px 34px rgba(37, 211, 102, 0.28);
}
.btn-whatsapp svg { width: 1.35rem; height: 1.35rem; }
.btn-whatsapp:hover { background: #1fc85c; transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 40px rgba(37, 211, 102, 0.36); }
.btn-whatsapp:active { transform: translateY(0) scale(0.99); }

/* Section footer — subtle divider into the next section */
.location-end { display: block; width: clamp(4rem, 12vw, 7rem); height: 1px; margin: clamp(2.2rem, 3.5vw, 3rem) auto 0; background: rgba(255, 254, 242, 0.22); }

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews {
    position: relative; overflow: hidden;
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(4rem, 7vw, 7.5rem);
    background: linear-gradient(180deg, #faf6ec 0%, var(--paper) 100%);
}
.reviews-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(60rem 26rem at 82% -8%, rgba(229, 109, 56, 0.10), transparent 62%);
}
.reviews .container { position: relative; z-index: 1; }
.reviews-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.2rem, 3.5vw, 3rem); }
.reviews-intro { margin-top: 1rem; color: var(--text-soft); font-size: 1.02rem; }

/* Visually-hidden but available to screen readers */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Summary cards (platform ratings) ----
   Owner-supplied trust figures; each card opens the official platform page in a
   new tab. Soft white cards matching the site; 2×2 grid that never breaks. */
.review-summary {
    list-style: none; padding: 0; margin: 0 auto clamp(2.6rem, 4.5vw, 3.8rem);
    max-width: 52rem; display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.8rem, 1.8vw, 1.3rem);
}
.review-summary > li { display: flex; }
.rsum-card {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.55rem;
    padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1rem, 2vw, 1.5rem);
    background: #fff; border: 1px solid rgba(37, 66, 76, 0.08); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md); text-align: center; color: var(--petrol);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.rsum-card:hover, .rsum-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 26px 56px rgba(13, 44, 53, 0.17);
    border-color: rgba(229, 109, 56, 0.28);
}
.rsum-card:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.rsum-card:active { transform: translateY(-2px); }
.rsum-logo { height: 1.8rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: 0.15rem; }
.rsum-logo svg { height: 100%; width: auto; }
.rsum-mark { width: auto; display: block; }   /* official logo images */
.wm-booking { font-family: var(--sans); font-weight: 800; font-size: 1.24rem; letter-spacing: -0.01em; line-height: 1; color: #003b95; }
.wm-booking i { color: #009fe3; font-style: normal; }
.wm-google { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1; }
.wm-tripword { font-family: var(--sans); font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; color: #284b43; }
.rsum-logo[aria-label="Tripadvisor"] .rsum-mark { height: 1.65rem; }
.wm-airbnb { display: inline-flex; align-items: center; gap: 0.35rem; color: #ff385c; font-family: var(--sans); font-weight: 800; font-size: 1.2rem; }
.wm-airbnb .rsum-mark { height: 1.4rem; }
.rsum-score { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 1.5rem + 2vw, 2.8rem); line-height: 1; color: var(--petrol); }
.rsum-meta { font-size: 0.85rem; color: var(--text-soft); font-weight: 500; max-width: 16rem; }
.rsum-stars { margin-top: 0.15rem; }

@media (max-width: 400px) {
    .review-summary { gap: 0.7rem; }
    .rsum-card { padding: 1.1rem 0.7rem; gap: 0.4rem; }
    .rsum-score { font-size: 2rem; }
    .rsum-meta { font-size: 0.78rem; }
}

/* ---- Dual-row marquee (full-bleed) ----
   Two tracks scroll in opposite directions at a calm, constant speed. Each
   track holds the cards once, then a JS-cloned aria-hidden copy, so animating
   translateX 0 → -50% shifts by exactly one copy for a seamless, jump-free
   loop. GPU-composited (translate3d + will-change); paused on hover (desktop
   pointers only — touch keeps gliding); static & scrollable for reduced motion. */
.reviews-marquee {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: clamp(0.9rem, 1.7vw, 1.35rem);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* clip the horizontal overflow but keep the Y axis visible so the card
   hover-lift + shadow aren't sheared off. */
.rv-row { overflow-x: clip; overflow-y: visible; }
.rv-track {
    display: flex; width: max-content; will-change: transform;
    /* gap lives on the card's margin (not flex gap) so two identical copies
       total an even width and translateX(-50%) lands seamlessly. */
}
.rv-track--left  { animation: rvScrollLeft  64s linear infinite; }
.rv-track--right { animation: rvScrollRight 64s linear infinite; }
/* Pause on interaction — animation-play-state freezes at the EXACT current
   transform and resumes from it (no jump/reset). Per row, so only the touched/
   hovered row stops. Desktop: hover the row's cards (mice only). Touch: JS adds
   .is-paused on touchstart and removes it on touchend/touchcancel. */
.rv-track.is-paused { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
    .rv-track:hover { animation-play-state: paused; }
}
@keyframes rvScrollLeft  { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(-50%, 0, 0); } }
@keyframes rvScrollRight { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* ---- Review card ---- */
.rv-card {
    flex: 0 0 auto; width: clamp(16.5rem, 78vw, 21rem); margin-right: clamp(0.9rem, 1.7vw, 1.35rem);
    display: flex; flex-direction: column; gap: 0.8rem;
    padding: clamp(1.3rem, 2vw, 1.6rem); background: #fff;
    border: 1px solid rgba(37, 66, 76, 0.08); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .rv-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(13, 44, 53, 0.15); }
}
.rv-head { display: flex; align-items: center; gap: 0.7rem; }
.rv-avatar {
    flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--sage), var(--petrol)); color: var(--ivory); font-weight: 700; font-size: 1rem;
}
.rv-who { min-width: 0; flex: 1; }
.rv-name { display: block; font-weight: 700; color: var(--petrol); font-size: 0.96rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-sub { display: block; font-size: 0.76rem; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-logo { flex: none; }
.rv-badge-booking { font-weight: 800; font-size: 0.82rem; color: #003b95; letter-spacing: -0.01em; }
.rv-badge-booking i { color: #009fe3; font-style: normal; }
.rv-badge-airbnb { display: inline-flex; align-items: center; gap: 0.25rem; color: #ff385c; font-weight: 800; font-size: 0.82rem; }
.rv-belo { height: 0.95rem; width: auto; display: block; }
.rv-rating { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; }
.rv-score {
    display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.5rem; padding: 0 0.35rem;
    background: #003b95; color: #fff; border-radius: 0.4rem; font-weight: 700; font-size: 0.88rem;
}
.rv-text {
    font-family: var(--serif); font-style: italic; color: var(--text); font-size: 0.96rem; line-height: 1.55; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-text::before { content: "\201C"; color: var(--terracotta); font-weight: 700; margin-right: 0.05em; }
.rv-date { margin-top: auto; font-size: 0.74rem; color: var(--text-soft); }

/* proportional star row (partial fill via clipped overlay) */
.stars { position: relative; display: inline-flex; line-height: 0; }
.stars-base, .stars-fill { display: inline-flex; gap: 2px; }
.stars-base svg { fill: rgba(37, 66, 76, 0.16); }
.stars-fill { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; }
.stars-fill svg { fill: var(--terracotta); }
.stars svg { width: 1rem; height: 1rem; flex: none; }

.reviews-cta { text-align: center; margin-top: clamp(2.6rem, 4.5vw, 4rem); }
.reviews-verify { font-size: 0.85rem; color: var(--text-soft); margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; }
.reviews-verify a { color: var(--petrol); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.reviews-verify a:hover { color: var(--terracotta); }
.reviews-cta-title { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); color: var(--petrol); margin-bottom: 1.3rem; }

@media (max-width: 560px) {
    .rv-card { width: 82vw; max-width: 20rem; }
}

/* ---- Photo gallery ----
   An editorial, asymmetric grid closing the Reviews band: a tall featured
   tile on the left + a 2×2 of island scenes on the right. Fixed grid-auto-rows
   give every tile a definite box (object-fit: cover) so there is zero layout
   shift while thumbnails lazy-load. Each tile opens the fullscreen lightbox. */
.gallery-head {
    text-align: center; max-width: 46rem;
    margin: clamp(3.6rem, 6vw, 5.5rem) auto clamp(1.6rem, 3vw, 2.4rem);
}
.gallery-title { margin-top: 0.6rem; }

.gallery-grid {
    list-style: none; padding: 0; margin: 0 auto; max-width: 62rem;
    display: grid; gap: clamp(0.55rem, 1.1vw, 0.9rem);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(8.5rem, 19vw, 13.5rem);
}
.gallery-grid > li { display: flex; min-width: 0; min-height: 0; }
.gallery-grid > li:first-child { grid-row: 1 / span 2; }

.g-tile {
    position: relative; flex: 1; width: 100%; height: 100%; display: block;
    border-radius: var(--r-md); overflow: hidden; background: var(--paper-2);
    box-shadow: var(--shadow-md); -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.g-tile picture { display: block; width: 100%; height: 100%; }
.g-tile img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s var(--ease-out);
}
/* soft scrim so the zoom badge reads over bright photos */
.g-tile::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(9, 26, 32, 0.34), transparent 46%);
    opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.g-tile:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.g-tile:focus-visible::after { opacity: 1; }

.g-zoom {
    position: absolute; z-index: 1; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.82);
    width: 3.2rem; height: 3.2rem; display: grid; place-items: center;
    color: var(--ivory); background: rgba(9, 26, 32, 0.44);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    border-radius: 50%; opacity: 0;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.g-zoom svg { width: 1.5rem; height: 1.5rem; }

@media (hover: hover) and (pointer: fine) {
    .g-tile:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 28px 58px rgba(13, 44, 53, 0.24); }
    .g-tile:hover img { transform: scale(1.07); }
    .g-tile:hover::after { opacity: 1; }
    .g-tile:hover .g-zoom, .g-tile:focus-visible .g-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* touch devices: a small persistent corner hint that the tile is tappable */
@media (hover: none) {
    .g-zoom {
        top: auto; left: auto; right: 0.6rem; bottom: 0.6rem;
        width: 2.15rem; height: 2.15rem; opacity: 0.9;
        transform: none; background: rgba(9, 26, 32, 0.5);
    }
    .g-zoom svg { width: 1.05rem; height: 1.05rem; }
}

@media (max-width: 720px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(7rem, 30vw, 11rem); }
    .gallery-grid > li:first-child { grid-column: 1 / -1; grid-row: span 2; }
}
@media (max-width: 400px) {
    .gallery-grid { gap: 0.5rem; }
}

/* ---- Fullscreen lightbox ----
   A dark, blurred backdrop with a centred image that zooms + fades in. Opened
   by initGallery(): `hidden` is removed, then `.is-open` is added on the next
   frame so the fade runs; on close the fade reverses and `hidden` is restored
   after the transition. Focus is trapped within and restored to the tile. */
.lightbox {
    position: fixed; inset: 0; z-index: 3000;
    display: grid; place-items: center;
    padding: clamp(0.9rem, 3.5vw, 2.6rem);
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; visibility: visible; }
body.lb-open { overflow: hidden; }

.lb-backdrop {
    position: absolute; inset: 0; cursor: pointer;
    background: rgba(7, 20, 25, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
            backdrop-filter: blur(14px) saturate(1.1);
}
.lb-figure {
    position: relative; z-index: 1; margin: 0;
    max-width: 100%; max-height: 100%; display: grid; place-items: center;
    pointer-events: none;   /* clicks fall through to the backdrop; the img re-enables */
}
.lb-img {
    display: block; pointer-events: auto;
    max-width: min(94vw, 1280px); max-height: 86vh; width: auto; height: auto;
    border-radius: var(--r-md); background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    transform: scale(0.93); opacity: 0;
    transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease);
}
.lb-img.is-shown { transform: scale(1); opacity: 1; }

.lb-counter {
    position: absolute; z-index: 2; left: 50%; bottom: clamp(1rem, 3.5vw, 2rem);
    transform: translateX(-50%); margin: 0;
    color: var(--on-dark); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.16em;
    background: rgba(9, 26, 32, 0.5); padding: 0.35rem 0.95rem; border-radius: var(--r-pill);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}

.lb-btn {
    position: absolute; z-index: 2; display: grid; place-items: center;
    width: 3rem; height: 3rem; color: var(--ivory); border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.lb-btn svg { width: 1.4rem; height: 1.4rem; }
.lb-btn:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.4); }
.lb-btn:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.lb-close { top: clamp(1rem, 3vw, 1.6rem); right: clamp(1rem, 3vw, 1.6rem); }
.lb-close:hover { transform: scale(1.08); }
.lb-close:active { transform: scale(0.95); }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: clamp(0.7rem, 2.5vw, 1.6rem); }
.lb-next { right: clamp(0.7rem, 2.5vw, 1.6rem); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.08); }
.lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(0.95); }

@media (max-width: 560px) {
    .lb-btn { width: 2.6rem; height: 2.6rem; }
    .lb-btn svg { width: 1.2rem; height: 1.2rem; }
    .lb-prev { left: 0.6rem; }
    .lb-next { right: 0.6rem; }
    .lb-img { max-height: 80vh; }
}

@media (prefers-reduced-motion: reduce) {
    .g-tile img, .lb-img, .p-tile img { transform: none !important; }
    .lb-img { opacity: 0; }
    .lb-img.is-shown { opacity: 1; }
    .p-static.is-pulse { animation: none !important; }
}

/* =====================================================================
   THE PROPERTY (Reviews extension — editorial masonry)
   ===================================================================== */
/* An editorial, column-based masonry so portrait and landscape photos sit
   together at their natural aspect ratio (no cropping, no CLS — every image
   carries intrinsic width/height). Only .p-featured tiles open the shared
   lightbox; .p-static tiles play a calm micro-pulse on tap. */
.property {
    position: relative;
    padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(4rem, 7vw, 7rem);
    background: var(--paper);
}
.property-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 3.5vw, 3rem); }
.property-title { margin-top: 0.6rem; }
.property-sub { margin-top: 1rem; color: var(--text-soft); font-size: 1.02rem; }

.property-grid {
    list-style: none; padding: 0; margin: 0 auto; max-width: 66rem;
    column-count: 3; column-gap: clamp(0.7rem, 1.4vw, 1.15rem);
}
.property-grid > li { break-inside: avoid; margin-bottom: clamp(0.7rem, 1.4vw, 1.15rem); }

.p-tile {
    position: relative; display: block; overflow: hidden; margin: 0;
    border-radius: var(--r-lg); background: var(--paper-2); box-shadow: var(--shadow-md);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.p-tile img { width: 100%; height: auto; display: block; transition: transform 0.7s var(--ease-out); }
.p-featured { cursor: pointer; }
.p-featured:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.p-featured:focus-visible .g-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (hover: hover) and (pointer: fine) {
    .p-tile:hover { transform: translateY(-5px); box-shadow: 0 28px 58px rgba(13, 44, 53, 0.24); }
    .p-featured:hover img { transform: scale(1.05); }
    .p-featured:hover .g-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* micro "acknowledge" pulse for the non-interactive tiles (tap feedback) */
@keyframes pPulse {
    0%   { transform: scale(1);    filter: brightness(1); }
    38%  { transform: scale(0.98); filter: brightness(1.06); }
    100% { transform: scale(1);    filter: brightness(1); }
}
.p-static.is-pulse { animation: pPulse 0.45s var(--ease-out); }

@media (max-width: 900px) { .property-grid { column-count: 2; } }
@media (max-width: 400px) {
    .property-grid { column-gap: 0.6rem; }
    .property-grid > li { margin-bottom: 0.6rem; }
    .p-tile { border-radius: var(--r-md); }
}

/* =====================================================================
   CONTACT US
   ===================================================================== */
.contact {
    position: relative; overflow: hidden;
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(4rem, 7vw, 7rem);
    background: linear-gradient(180deg, var(--paper) 0%, #f7f2e7 100%);
}
.contact-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(48rem 22rem at 18% -6%, rgba(229, 109, 56, 0.09), transparent 60%);
}
.contact .container { position: relative; z-index: 1; }
.contact-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.4rem, 4vw, 3.4rem); }
.contact-title { margin-top: 0.6rem; }
.contact-sub { margin-top: 1rem; color: var(--text-soft); font-size: 1.02rem; }

.contact-grid {
    list-style: none; padding: 0; margin: 0 auto; max-width: 54rem;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.8rem, 1.8vw, 1.25rem);
}
.contact-grid > li { display: flex; }

/* Premium elevated card — matches the site's white-card language. */
.contact-card {
    flex: 1; display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.15rem);
    width: 100%; text-align: left;
    padding: clamp(1.15rem, 2.1vw, 1.55rem) clamp(1.2rem, 2.2vw, 1.6rem);
    background: #fff; border: 1px solid rgba(37, 66, 76, 0.08); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md); color: var(--petrol);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease);
}
.contact-card:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.contact-card:active { transform: translateY(-1px) scale(0.994); }

.cc-icon {
    flex: none; display: grid; place-items: center;
    width: clamp(2.9rem, 5vw, 3.3rem); height: clamp(2.9rem, 5vw, 3.3rem);
    border-radius: var(--r-md);
    background: rgba(229, 109, 56, 0.12); color: var(--terracotta);
    transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.cc-icon svg { width: 1.5rem; height: 1.5rem; }
.cc-whatsapp .cc-icon { background: rgba(37, 211, 102, 0.15); color: #128a4e; }

.cc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.cc-label { font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: var(--petrol); line-height: 1.2; }
.cc-value { font-size: 0.9rem; color: var(--text-soft); font-weight: 500; line-height: 1.35; }
.cc-value--email { word-break: break-word; }

.cc-arrow {
    flex: none; color: var(--text-muted);
    transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.cc-arrow svg { width: 1.15rem; height: 1.15rem; }

@media (hover: hover) and (pointer: fine) {
    .contact-card:hover { transform: translateY(-5px); box-shadow: 0 26px 56px rgba(13, 44, 53, 0.18); border-color: rgba(229, 109, 56, 0.28); }
    .contact-card:hover .cc-icon { transform: scale(1.06); }
    .contact-card:hover .cc-arrow { transform: translateX(4px); color: var(--terracotta); }
    .cc-whatsapp:hover { border-color: rgba(37, 211, 102, 0.4); }
    .cc-whatsapp:hover .cc-arrow { color: #128a4e; }
}

/* WhatsApp "armed" state — first tap turns the whole card official WhatsApp
   green with a white icon + text; a second tap opens the chat. */
.cc-whatsapp { position: relative; }
.cc-whatsapp.is-armed {
    background: linear-gradient(135deg, #25d366 0%, #1aa856 100%);
    border-color: #1aa856; color: #fff;
    box-shadow: 0 22px 48px rgba(37, 211, 102, 0.42);
}
.cc-whatsapp.is-armed .cc-icon { background: rgba(255, 255, 255, 0.22); color: #fff; }
.cc-whatsapp.is-armed .cc-label,
.cc-whatsapp.is-armed .cc-value { color: #fff; text-shadow: 0 1px 2px rgba(4, 54, 28, 0.4); }
.cc-whatsapp.is-armed .cc-arrow { color: #fff; transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
    .cc-whatsapp.is-armed:hover { transform: translateY(-5px); box-shadow: 0 28px 58px rgba(37, 211, 102, 0.5); }
    .cc-whatsapp.is-armed:hover .cc-arrow { color: #fff; }
}

@media (max-width: 640px) {
    .contact-grid { grid-template-columns: 1fr; max-width: 30rem; }
}
@media (prefers-reduced-motion: reduce) {
    .contact-card, .cc-icon, .cc-arrow { transition: background-color 0.01ms, color 0.01ms, border-color 0.01ms; }
}

/* ---- Contact form (elevated card) ----
   Same white-card language as the rest of the site; a 2-col field grid that
   collapses to one column on phones. Inputs echo the booking widget's focus
   treatment (terracotta border + soft glow). initContactForm() gates the
   submit and drives inline validation + the toast. */
.contact-form-wrap { max-width: 46rem; margin: clamp(2.4rem, 4.5vw, 3.6rem) auto 0; }
.contact-form {
    position: relative; background: #fff;
    border: 1px solid rgba(37, 66, 76, 0.08); border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.4rem, 4vw, 2.8rem) clamp(1.25rem, 4vw, 2.6rem) clamp(1.6rem, 4vw, 2.6rem);
}
.cform-title {
    font-family: var(--serif); font-weight: 600; color: var(--petrol); text-align: center;
    font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.85rem); line-height: 1.15;
    margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.cform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.cform-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.85rem, 1.8vw, 1.2rem) clamp(0.85rem, 2vw, 1.2rem);
}
.ff { display: flex; flex-direction: column; gap: 0.38rem; min-width: 0; }
.ff-full { grid-column: 1 / -1; }
.ff-label {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--sage-deep); display: flex; align-items: baseline; gap: 0.35rem;
}
.ff-req { color: var(--terracotta); text-decoration: none; font-size: 0.85rem; }
.ff-opt { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: none; color: var(--text-muted); font-weight: 500; }

.ff-input {
    width: 100%; font: inherit; font-size: 0.95rem; color: var(--text);
    padding: 0.72rem 0.9rem; background: #fdfcf6;
    border: 1.5px solid var(--line); border-radius: var(--r-md);
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.ff-input::placeholder { color: rgba(13, 44, 53, 0.4); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.ff-input:focus { outline: none; border-color: var(--terracotta); background: #fff; box-shadow: 0 0 0 3px rgba(229, 109, 56, 0.16); }
.ff-input:focus::placeholder { opacity: 0.55; transform: translateX(2px); }
.ff-textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
.ff-input[aria-invalid="true"] { border-color: #c74f1e; background: #fffaf7; box-shadow: 0 0 0 3px rgba(199, 79, 30, 0.13); }

.ff-error {
    font-size: 0.75rem; font-weight: 500; color: #c0392b; line-height: 1.3;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height var(--t-base) var(--ease), opacity var(--t-base) var(--ease), margin-top var(--t-base) var(--ease);
}
.ff-error.is-shown { max-height: 3rem; opacity: 1; margin-top: 0.05rem; }
.ff-error--block { display: block; }

/* Privacy consent + custom checkbox */
.cform-consent {
    display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer;
    margin-top: clamp(1.1rem, 2.4vw, 1.5rem); font-size: 0.9rem; color: var(--text-soft); line-height: 1.5;
}
.cform-check { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.cform-check-box {
    flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.05rem;
    border: 1.6px solid rgba(37, 66, 76, 0.32); border-radius: 7px;
    display: grid; place-items: center; color: #fff; background: #fff;
    transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.cform-check-box svg { width: 0.95rem; height: 0.95rem; opacity: 0; transform: scale(0.5); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.cform-check:checked + .cform-check-box { background: var(--terracotta); border-color: var(--terracotta); }
.cform-check:checked + .cform-check-box svg { opacity: 1; transform: scale(1); }
.cform-check:focus-visible + .cform-check-box { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.cform-consent-text a { color: var(--petrol); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cform-consent-text a:hover { color: var(--terracotta); }

/* Submit button (extends .btn-book) */
.cform-submit {
    width: 100%; margin-top: clamp(1.2rem, 2.6vw, 1.6rem);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
}
.cform-submit:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.cform-submit.is-loading { cursor: progress; }
.cform-submit.is-loading .cform-submit-label { opacity: 0.75; }
.cform-spinner { display: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid rgba(255, 254, 242, 0.4); border-top-color: var(--ivory); animation: ccSpin 0.7s linear infinite; }
.cform-submit.is-loading .cform-spinner { display: inline-block; }
@keyframes ccSpin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .cform-grid { grid-template-columns: 1fr; }
}

/* ---- Notification toast (success / error) — fixed, no layout shift ---- */
.form-toast {
    position: fixed; left: 50%; bottom: clamp(1.2rem, 4vw, 2.4rem);
    transform: translateX(-50%) translateY(0.8rem); z-index: 4000;
    display: flex; align-items: center; gap: 0.75rem;
    max-width: min(92vw, 30rem); padding: 0.9rem 1.15rem;
    background: #fff; color: var(--petrol); border-radius: var(--r-md);
    border: 1px solid rgba(37, 66, 76, 0.08); box-shadow: var(--shadow-lg);
    font-size: 0.92rem; font-weight: 500; line-height: 1.4;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out), visibility 0.4s var(--ease);
}
.form-toast[hidden] { display: none; }
.form-toast.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.form-toast-icon { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: #fff; }
.form-toast-icon svg { width: 1rem; height: 1rem; }
.form-toast.is-success { border-left: 4px solid #1aa856; }
.form-toast.is-success .form-toast-icon { background: #1aa856; }
.form-toast.is-error { border-left: 4px solid #c0392b; }
.form-toast.is-error .form-toast-icon { background: #c0392b; }

/* =====================================================================
   PRIVACY / LEGAL PAGE (standalone)
   ===================================================================== */
.legal-page { background: var(--paper); }
.legal-header { border-bottom: 1px solid var(--line); background: #fff; }
.legal-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }
.legal-header .brand-name { color: var(--petrol); }
.legal-header .brand-tag { color: var(--sage-deep); }
.legal-back { font-size: 0.86rem; font-weight: 600; color: var(--petrol); white-space: nowrap; }
.legal-back:hover { color: var(--terracotta); }
.legal { max-width: 46rem; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.legal h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.8rem); color: var(--petrol); margin: 0.4rem 0 0.3rem; }
.legal h2 { font-size: 1.2rem; color: var(--petrol); margin: 2rem 0 0.5rem; }
.legal p { color: var(--text-soft); margin-bottom: 0.9rem; line-height: 1.7; }
.legal a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 2px; }
.legal-updated { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.6rem; }
.legal-nowrap { white-space: nowrap; }
.legal-back-row { margin-top: 2.4rem; }
.legal-footer { border-top: 1px solid var(--line); text-align: center; padding: 1.6rem 1rem; color: var(--text-muted); font-size: 0.82rem; }

@media (prefers-reduced-motion: reduce) {
    .ff-input, .ff-error, .cform-check-box, .cform-check-box svg, .form-toast { transition-duration: 0.01ms; }
}

/* =====================================================================
   WHY BOOK DIRECT (perks)
   ===================================================================== */
.perks {
    position: relative; overflow: hidden;
    padding: clamp(4rem, 7vw, 7rem) 0;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 58%, #efe8d7 100%);
}
.perks-glow {
    position: absolute; top: -14%; left: 50%; transform: translateX(-50%);
    width: 64rem; max-width: 130%; height: 34rem; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(229, 109, 56, 0.11), rgba(229, 109, 56, 0) 70%);
}
.perks .container { position: relative; z-index: 1; }
.perks-head { max-width: 46rem; margin: 0 auto clamp(2.4rem, 5vw, 3.6rem); text-align: center; }
.section-eyebrow--center { justify-content: center; }
.perks-title { margin-top: 0.9rem; }
.perks-intro { margin-top: 1.1rem; color: var(--text-soft); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); }

.perks-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
}
.perk {
    text-align: center;
    background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(1.9rem, 2.6vw, 2.5rem) clamp(1.2rem, 2vw, 1.7rem);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.perk:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(229, 109, 56, 0.4); }
.perk-icon {
    display: inline-grid; place-items: center; width: 4.4rem; height: 4.4rem; margin-bottom: 1.35rem;
    color: var(--ivory); border-radius: var(--r-pill);
    background: linear-gradient(145deg, var(--terracotta), var(--terracotta-deep));
    box-shadow: 0 12px 26px rgba(229, 109, 56, 0.32);
    transition: transform var(--t-base) var(--ease);
}
.perk-icon svg { width: 1.95rem; height: 1.95rem; }
.perk:hover .perk-icon { transform: translateY(-3px) scale(1.06) rotate(-3deg); }
.perk-title { font-family: var(--sans); font-weight: 700; font-size: 1.12rem; color: var(--petrol); letter-spacing: 0.004em; }
.perk-text { margin-top: 0.7rem; color: var(--text-soft); font-size: 0.94rem; line-height: 1.6; }

/* Floating WhatsApp contact button — official WhatsApp branding */
.fab-whatsapp {
    position: fixed; z-index: 900;
    right: clamp(1rem, 3vw, 1.7rem); bottom: clamp(1rem, 3vw, 1.7rem);
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--r-pill);
    color: #ffffff; background: #25d366;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.fab-whatsapp svg { position: relative; z-index: 1; width: 1.95rem; height: 1.95rem; }
.fab-whatsapp:hover { transform: scale(1.08); background: #1fc85c; box-shadow: 0 14px 38px rgba(37, 211, 102, 0.5); }
/* Dodge: fade the FAB away while the Location CTA (with its own WhatsApp button)
   is on screen, so it never overlaps the full-width mobile buttons. */
.fab-whatsapp { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease), opacity var(--t-base) var(--ease), visibility var(--t-base); }
body.fab-dodge .fab-whatsapp { opacity: 0; visibility: hidden; transform: scale(0.6); pointer-events: none; }
.fab-pulse {
    position: absolute; inset: 0; border-radius: inherit; background: #25d366; opacity: 0.5;
    animation: fabPulse 2.6s var(--ease) infinite;
}
@keyframes fabPulse { 0% { transform: scale(1); opacity: 0.5; } 70% { transform: scale(1.75); opacity: 0; } 100% { opacity: 0; } }

/* Perks closing CTA */
.perks-cta { margin-top: clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.perks-cta .btn { padding: 1.05rem 2.4rem; font-size: 1rem; }
.perks-note { margin-top: 0.9rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-deep); }

/* Mobile sticky booking bar */
.sticky-book {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 890; display: none;
    padding: 0.7rem clamp(1rem, 4vw, 1.5rem);
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    /* near-opaque (no live backdrop-filter) — a fixed, blurred bar over
       scrolling content triggers paint-garbage on some Android GPUs. */
    background: rgba(251, 248, 239, 0.97);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(13, 44, 53, 0.12);
    transform: translateY(115%); visibility: hidden;
    transition: transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.sticky-book[data-visible] { transform: translateY(0); visibility: visible; transition: transform var(--t-base) var(--ease-out), visibility 0s; }
.sticky-book .btn { width: 100%; }
@media (max-width: 640px) {
    .sticky-book { display: block; }
    body.has-sticky-book { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
    body.has-sticky-book .fab-whatsapp { bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px)); }
}
/* Perks grid: 4 → 2 columns (2-up on phones, matching the reference); 1-up only on the smallest screens */
@media (max-width: 940px) { .perks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .perk { padding: 1.5rem 1rem; border-radius: var(--r-md); }
    .perk-icon { width: 3.5rem; height: 3.5rem; margin-bottom: 0.95rem; }
    .perk-icon svg { width: 1.55rem; height: 1.55rem; }
    .perk-title { font-size: 1rem; }
    .perk-text { font-size: 0.84rem; margin-top: 0.55rem; }
}
@media (max-width: 360px) { .perks-grid { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; } }

/* About: stack image over text; single-column amenities on smaller screens */
@media (max-width: 860px) {
    .about-inner { grid-template-columns: 1fr; gap: clamp(2.6rem, 7vw, 3.6rem); }
    .about-media { max-width: 30rem; margin-inline: auto; }
    .about-body { text-align: center; }
    .about-body .section-eyebrow { justify-content: center; }
    .about-text { text-align: left; margin-inline: auto; }
    /* Glance: stack the gallery over the stats card */
    .glance-inner { grid-template-columns: 1fr; gap: clamp(1.8rem, 5vw, 2.6rem); }
    .glance-gallery { width: 100%; max-width: 30rem; margin-inline: auto; }
    .glance-card { width: 100%; max-width: 34rem; margin-inline: auto; }
}
@media (max-width: 620px) {
    .amenities-grid { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; }
    .about-photo--inset { right: -0.5rem; bottom: -0.9rem; width: 40%; border-width: 4px; }
    .about-frame { top: -0.7rem; left: -0.7rem; }
}

/* Booking: 4-up → 2-up → stacked */
@media (max-width: 940px) {
    .booking-fields { grid-template-columns: 1fr 1fr; }
    .booking-submit { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
    .bfield--guests { grid-column: 1 / -1; }
    .booking-trust { flex-direction: column; align-items: center; gap: 0.55rem; }
    .bfield { padding: 0.75rem 1rem; }
    .bfield-label { letter-spacing: 0.09em; }
    .step-btn { width: 2.4rem; height: 2.4rem; }
    /* Phones: the card sits BELOW the hero, never over it. The desktop
       hero-overlap design (negative margin on the base rule) assumed the hero
       reserved ≥5rem of empty bottom padding; on phones that reserve is only
       1.2–4.5rem, so any negative pull clipped the hero rating pills. One
       positive margin here replaces the old contradictory -5rem /
       margin-top:0 pair for every phone height. */
    .booking { margin-top: clamp(1.4rem, 4vw, 1.9rem); }
}
@media (max-width: 620px) and (min-height: 600px) {
    .hero { min-height: calc(100vh - 14rem); min-height: calc(100svh - 14rem); }
}
/* give the calendar more room for comfortable day touch targets on phones */
@media (max-width: 460px) {
    .booking-card { padding-left: clamp(0.7rem, 3.4vw, 1.3rem); padding-right: clamp(0.7rem, 3.4vw, 1.3rem); }
    .cal-day { font-size: 0.86rem; }
}
/* Small phones: the tracked uppercase field labels (esp. EN "Departure")
   overran the narrow date field and clipped at the edge. Trim the tracking,
   label size and field padding so every locale's label sits comfortably. */
@media (max-width: 400px) {
    .bfield { padding-left: 0.8rem; padding-right: 0.8rem; }
    .bfield-label { letter-spacing: 0.04em; font-size: 0.64rem; gap: 0.38rem; }
    .bfield-label svg { width: 0.92rem; height: 0.92rem; }
}

/* Location: stack map under the attractions list */
@media (max-width: 940px) {
    .location-grid { grid-template-columns: 1fr; }
    .poi-list { max-width: 36rem; margin-inline: auto; width: 100%; }
    .map-card { max-width: 36rem; margin-inline: auto; width: 100%; }
    .map-frame { min-height: 300px; aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
    .poi { flex-wrap: wrap; row-gap: 0.55rem; }
    .poi-text { flex: 1 1 calc(100% - 4.1rem); }
    .poi-dist { margin-left: 4.05rem; align-self: flex-start; }
    .location-cta-actions .btn { flex: 1 1 auto; }
    .map-frame { min-height: 260px; }
}

/* Mobile-menu backdrop (JS appends it to <body>, after the footer): keep it a
   fixed, inert overlay at every size so it never sits in the document flow
   below the footer. It only becomes visible/interactive when the mobile menu
   opens (visibility flips via the media-query rule further down). */
.nav-backdrop { position: fixed; inset: 0; opacity: 0; visibility: hidden; z-index: var(--z-header); }

/* =====================================================================
   FOOTER (last element on the page)
   ===================================================================== */
.site-footer {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #0f313b 0%, var(--ink) 62%, #0a2028 100%);
    color: var(--on-dark);
    padding: clamp(3.2rem, 6vw, 5rem) 0 0;
}
.footer-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(46rem 20rem at 82% 0%, rgba(229, 109, 56, 0.14), transparent 62%);
}
.footer-inner {
    position: relative; z-index: 1;
    display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(1.6rem, 3vw, 3.4rem);
    grid-template-columns: 1.6fr 1fr 1.3fr 0.9fr;
    padding-bottom: clamp(2.6rem, 4.5vw, 3.6rem);
}
.footer-col { min-width: 0; }
.footer-title {
    font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--terracotta-soft); margin-bottom: 1.15rem;
}

/* Col 1 — brand */
.footer-brand { display: inline-block; }
.footer-logo { height: clamp(66px, 8vw, 82px); width: auto; transition: transform var(--t-base) var(--ease); }
.footer-brand:hover .footer-logo { transform: translateY(-2px); }
.footer-brand:focus-visible { outline: 2px solid var(--terracotta-soft); outline-offset: 4px; border-radius: 6px; }
.footer-desc { margin-top: 1.2rem; max-width: 30rem; color: var(--on-dark-soft); font-size: 0.92rem; line-height: 1.65; }
.footer-loc {
    margin-top: 1.15rem; display: inline-flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.86rem; color: var(--on-dark-soft); line-height: 1.4;
}
.footer-loc svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--terracotta-soft); margin-top: 0.05rem; }

/* Col 2 — quick nav */
.footer-links ul, .footer-contactlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.62rem; }
.footer-links a {
    position: relative; display: inline-block; font-size: 0.92rem; color: var(--on-dark-soft);
    transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.footer-links a::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
    background: var(--terracotta); transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-base) var(--ease);
}
.footer-links a:hover, .footer-links a:focus-visible { color: var(--ivory); }
.footer-links a:hover::after, .footer-links a:focus-visible::after { transform: scaleX(1); }

/* Col 3 — contact list */
.footer-contactlist a {
    display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--on-dark-soft);
    transition: color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.footer-contactlist svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--terracotta-soft); transition: transform var(--t-base) var(--ease); }
.footer-contactlist a:hover, .footer-contactlist a:focus-visible { color: var(--ivory); }
.footer-contactlist a:hover svg { transform: scale(1.12); }
.footer-email { word-break: break-word; }

/* Col 4 — find us on (real platforms) */
.footer-social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fsoc {
    display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%;
    color: var(--on-dark); background: rgba(255, 254, 242, 0.08);
    border: 1px solid rgba(255, 254, 242, 0.16);
    transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.fsoc svg { width: 1.3rem; height: 1.3rem; }
.fsoc:hover, .fsoc:focus-visible {
    transform: translateY(-3px);
    background: var(--terracotta); border-color: var(--terracotta); color: var(--ink);
    box-shadow: 0 12px 26px rgba(229, 109, 56, 0.36);
}
.footer-follow-note { margin-top: 1.1rem; font-size: 0.82rem; color: var(--on-dark-soft); line-height: 1.5; max-width: 16rem; }

/* Bottom bar */
.footer-bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255, 254, 242, 0.12); }
.footer-bottom-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem;
    padding-block: clamp(1.2rem, 2.5vw, 1.6rem);
}
.footer-copy { font-size: 0.8rem; color: rgba(255, 254, 242, 0.6); margin: 0; }
.footer-legal { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.6rem; }
.footer-legal a { font-size: 0.8rem; color: rgba(255, 254, 242, 0.72); transition: color var(--t-base) var(--ease); }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--terracotta-soft); }
.footer-legal-sep { color: rgba(255, 254, 242, 0.35); }

@media (max-width: 900px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-about { text-align: center; }
    .footer-desc { margin-inline: auto; }
    .footer-loc { justify-content: center; }
    .footer-links ul, .footer-contactlist { align-items: center; }
    .footer-social { justify-content: center; }
    .footer-follow-note { margin-inline: auto; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
}

/* Legal-page list (privacy / cookie) */
.legal-list { margin: 0 0 0.9rem 1.1rem; padding: 0; color: var(--text-soft); }
.legal-list li { margin-bottom: 0.4rem; line-height: 1.6; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: rgba(37, 66, 76, 0.08); padding: 0.05em 0.35em; border-radius: 4px; }

/* =====================================================================
   Reveal on scroll
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Failsafe: never leave content hidden if main.js fails to run */
.reveal-fallback .reveal { opacity: 1 !important; transform: none !important; }

/* =====================================================================
   CUSTOM CURSOR
   A terracotta dot that tracks the pointer 1:1 (no lag) plus a ring that
   eases behind it and swells over interactive targets. Desktop fine-pointer
   only: `body.has-cursor` is added by JS after a matchMedia + non-touch check,
   so touch devices keep the native cursor and never paint these nodes.
   pointer-events:none guarantees it never blocks a click or a text drag, and
   the native cursor is restored over inputs/iframes for typing & selection.
   ===================================================================== */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
    body.has-cursor { cursor: none; }
    body.has-cursor a, body.has-cursor button, body.has-cursor .btn,
    body.has-cursor label, body.has-cursor summary, body.has-cursor [role="button"] { cursor: none; }
    /* keep the native cursor where precision/typing matters */
    body.has-cursor input, body.has-cursor textarea, body.has-cursor select,
    body.has-cursor [contenteditable], body.has-cursor iframe { cursor: auto; }

    body.has-cursor .cursor {
        display: block; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
    }
    .cursor-dot, .cursor-ring {
        position: absolute; top: 0; left: 0; border-radius: 50%;
        will-change: transform; /* JS writes the full transform incl. -50% centering */
    }
    .cursor-dot { width: 7px; height: 7px; background: var(--terracotta); }
    .cursor-ring {
        width: 34px; height: 34px; border: 1.5px solid rgba(229, 109, 56, 0.55);
        transition: width 0.25s var(--ease), height 0.25s var(--ease),
                    border-color 0.25s var(--ease), background-color 0.25s var(--ease), opacity 0.25s var(--ease);
    }
    body.cursor-hover .cursor-ring {
        width: 54px; height: 54px; border-color: rgba(229, 109, 56, 0.9); background: rgba(229, 109, 56, 0.09);
    }
    body.cursor-down .cursor-ring { width: 26px; height: 26px; }
    body.cursor-hidden .cursor { opacity: 0; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
    :root { --header-h: 76px; --header-h-scrolled: 62px; }
    /* Free up header space so the inline nav never crowds in the 941–1024 band */
    .brand-tag { display: none; }
}
/* Six inline nav items: the longer IT/DE labels ("Bewertungen",
   "Der Aufenthalt", "Recensioni") overran the header on small laptops before
   the off-canvas menu takes over at 940px. Tighten the inline gaps in this
   band only — typography, order and the generous wide-screen spacing are
   untouched. */
@media (min-width: 941px) and (max-width: 1080px) {
    .nav { gap: clamp(0.85rem, 1.4vw, 1.3rem); }
    .nav-list { gap: clamp(0.7rem, 1.25vw, 1.2rem); }
}

/* Tablet & below — collapse nav into off-canvas menu */
@media (max-width: 940px) {
    .nav-toggle { display: flex; }
    .lang { margin-left: auto; }
    .nav {
        position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
        padding: calc(var(--header-h) + 2.5rem) 2rem 2rem;
        background: rgba(13, 44, 53, 0.97);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        box-shadow: -20px 0 60px rgba(13, 44, 53, 0.4);
        transform: translateX(100%); visibility: hidden;
        transition: transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
        z-index: var(--z-menu);
    }
    /* When closed the panel is off-screen AND removed from the tab order / a11y tree */
    .nav[data-open] { transform: translateX(0); visibility: visible; transition: transform var(--t-base) var(--ease-out), visibility 0s; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-list li { border-bottom: 1px solid rgba(255, 254, 242, 0.1); }
    .nav-link { display: block; color: var(--on-dark); font-size: 1.05rem; padding: 1rem 0.2rem; }
    .site-header[data-state="scrolled"] .nav-link { color: var(--on-dark); }
    .nav-link::after { display: none; }
    .nav-book { margin-top: 1.6rem; padding: 0.95rem 1.9rem; text-align: center; }
    body.menu-open { overflow: hidden; }
    /* The off-canvas drawer lives inside .site-header, whose own stacking
       context (position:fixed + z-index) traps the drawer beneath the
       body-level backdrop (equal z-index, but the backdrop is later in the
       DOM so it paints on top). Lift the whole header above the backdrop
       while the menu is open so taps land on the links instead of the
       backdrop silently closing the menu. */
    body.menu-open .site-header { z-index: var(--z-menu); }
    .nav-backdrop {
        position: fixed; inset: 0; background: rgba(13, 44, 53, 0.5); z-index: var(--z-header);
        opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease);
    }
    .nav-backdrop[data-open] { opacity: 1; visibility: visible; }

    .stats-inner { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3.2rem); }
    .stats-panel { order: -1; text-align: center; }
    /* Definite width (not just max-width): auto margins on a grid item disable
       the default `stretch`, so a bare max-width let this collapse to its
       absolutely-positioned content (~0px) and vanish, leaving a tall empty band. */
    .gallery { height: clamp(400px, 82vw, 560px); width: min(100%, 620px); margin-inline: auto; }
    .section-eyebrow { justify-content: center; }
    .stats-body { margin-inline: auto; }
    .stats-cta { margin-inline: auto; }
}

/* Narrow screens: switch language label to short code */
@media (max-width: 520px) {
    .lang-label { display: none; }
    .lang-code { display: inline-block; }
    .brand-tag { display: none; }
    .brand-name { font-size: 0.98rem; }
    .brand-logo { height: 44px; }
    .hero-content { padding-bottom: 4.5rem; }
    .hero-actions .btn { flex: 1 1 auto; }
    .gallery { grid-template-rows: 1.25fr 1fr; }
}
@media (max-width: 520px) and (min-height: 800px) {
    .hero-content { padding-bottom: 1.2rem; }
    .hero-actions { margin-top: 1.6rem; }
    .hero-ratings { margin-top: 1.2rem; }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .js .hero-img { animation: none; }
    .hero-media { transition: none; }
    /* No motion: lay the real cards out as a static wrapped grid (no auto-scroll
       region for keyboard users to get stuck in) and drop the seamless-loop
       clones entirely so nothing is duplicated. */
    .rv-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: clamp(0.9rem, 1.7vw, 1.35rem); }
    .rv-card[aria-hidden="true"] { display: none; }
    .rv-row { overflow: visible; }
    .reviews-marquee { -webkit-mask-image: none; mask-image: none; }
    .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ============ FAQ ============ */
.faq {
    padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(3rem, 6vw, 5.5rem);
    background: var(--paper-2);
}
.faq-head { margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.faq-title { text-align: center; }
.faq-list { max-width: 46rem; margin: 0 auto; }
.faq-item {
    border-bottom: 1px solid var(--line);
    background: transparent;
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 0.2rem;
    font-weight: 600; color: var(--ink);
    cursor: pointer; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 1.35rem; font-weight: 400; line-height: 1;
    color: var(--ink);
    transition: transform 0.3s var(--ease-out);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-q:hover { opacity: 0.75; }
.faq-q:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.faq-a {
    padding: 0 1.8rem 1.2rem 0.2rem;
    color: var(--ink); opacity: 0.85;
    line-height: 1.65;
}