/* ============================================
   ZAMBALA CANGGU — Homepage
   ============================================ */

/* --- Custom Fonts (WOFF2) --- */
@font-face {
    font-family: 'Runalto';
    src: url('../assets/fonts/Runalto/Runalto.woff2') format('woff2'),
         url('../assets/fonts/Runalto/Runalto.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Larken';
    src: url('../assets/fonts/Larken/Larken%20Regular.woff2') format('woff2'),
         url('../assets/fonts/Larken/Larken%20Regular.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Larken Light';
    src: url('../assets/fonts/Larken/Larken%20Light.woff2') format('woff2'),
         url('../assets/fonts/Larken/Larken%20Light.ttf') format('truetype');
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Artinosy';
    src: url('../assets/fonts/Artinosy/Artinosy.woff2') format('woff2'),
         url('../assets/fonts/Artinosy/Artinosy.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('../assets/fonts/Nunito/Nunito%20Regular.woff2') format('woff2'),
         url('../assets/fonts/Nunito/Nunito%20Regular.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

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

:root {
    --cream: #EBE0C1;
    --cream-bg: #F3EFDE;
    --gold: #EBBD69;
    --emerald: #173A2E;
    --palm-shadow: #172722;
    --dark: #1a1a1a;
    --font-heading: 'Runalto', Georgia, serif;
    --font-subheading: 'Larken Light', Georgia, serif;
    --font-body: 'Nunito', 'Helvetica Neue', sans-serif;
    --font-accent: 'Artinosy', cursive;

    /* === Type Scale ===
       Fluid via clamp(min, vw-formula, max). One ladder, used everywhere.
       Tuned for 375px (mobile) → 1440px (desktop). Avoid hardcoding font-size
       outside the scale — if a new size is needed, add a token, don't inline. */
    --type-display:  clamp(36px, 4.5vw + 17px, 78px);   /* hero headlines */
    --type-h1:       clamp(30px, 3vw + 17px, 54px);     /* page titles */
    --type-h2:       clamp(26px, 2.2vw + 16px, 40px);   /* section heads */
    --type-hero:     clamp(31px, 2.4vw + 20px, 45px);   /* page hero h1 only — bumped for legibility on imagery */
    --type-h3:       clamp(22px, 1.2vw + 16px, 30px);   /* sub-heads, large quote */
    --type-sub:      clamp(18px, 0.5vw + 16px, 22px);   /* leading body, taglines */
    --type-body:     16px;                              /* regular body copy */
    --type-meta:     clamp(14px, 0.1vw + 13.6px, 15px); /* labels, captions */
    --type-eyebrow:  clamp(11px, 0.1vw + 10.6px, 12px); /* uppercase micro labels */

    /* === Line-Height Scale ===
       Paired with type tokens. Same body text on every page → same lh. */
    --lh-flush:    1;      /* buttons, single-line labels */
    --lh-display:  1.05;   /* very large display headings */
    --lh-tight:    1.1;    /* h1 */
    --lh-snug:     1.2;    /* h2, h3 */
    --lh-sub:      1.4;    /* sub, leading body */
    --lh-body:     1.7;    /* body — long-form readable */

    /* === Letter-Spacing Scale ===
       4 tokens, all em-based so they scale proportionally with fluid type.
       Replaces 27 distinct px values across the site. */
    --ls-display:  -0.03em;   /* display + h1: subtle optical tightening at large sizes */
    --ls-heading:  -0.015em;  /* h2 / h3 / hero / sub: gentle tightening */
    --ls-body:      0;        /* body, meta — neutral */
    --ls-eyebrow:   0.1em;    /* uppercase labels, buttons, eyebrows */

    /* === Spacing Scale ===
       8 steps. Smaller steps are fixed (component spacing); larger steps
       (--space-xl and up) use clamp() so vertical rhythm scales fluidly. */
    --space-xxs: 4px;
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  40px;
    --space-xl:  clamp(48px, 4vw + 32px, 64px);
    --space-2xl: clamp(64px, 6vw + 40px, 96px);
    --space-3xl: clamp(96px, 8vw + 60px, 140px);

    /* Layout */
    --gutter: var(--space-lg);   /* page-edge horizontal padding */
    --max-w: 1440px;             /* content max-width */

    /* Button system — two sizes only, used everywhere.
       Compact for nav pills, standard for in-page CTAs. */
    --btn-w-compact:  140px;
    --btn-h-compact:  32px;
    --btn-w-standard: 180px;
    --btn-h-standard: 36px;

    /* Motion system */
    --ease-drift: cubic-bezier(0.25, 0.1, 0.26, 1);
    --ease-float: cubic-bezier(0.16, 1, 0.3, 1);
}

h1, h2, h3, h4, h5, h6, p, a, button, span {
    font-weight: normal;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--cream-bg);
    color: var(--palm-shadow);
    overflow-x: hidden;
    opacity: 0;
    animation: pageIn 1.2s var(--ease-drift) 0.3s forwards;
}

@keyframes pageIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Utility --- */
.bg-warm-sand { background: var(--cream); }

/* Skip-to-content link — visible only when focused via keyboard. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
    padding: var(--space-sm) var(--space-md);
    background: var(--emerald);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: var(--type-meta);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--cream);
    outline-offset: 2px;
}

/* Mobile: editorial line breaks in headings cause uncontrolled wrap at narrow
   widths. Default to "soft-suppress" — the <br> becomes a 0.25em-wide
   inline-block placeholder, which acts as a space character between adjacent
   words ("Culinary Connections" reads correctly) without breaking the line.
   Per-heading overrides restore the actual break with `br { display: inline }`. */
@media (max-width: 480px) {
    h1 br, h2 br, h3 br {
        display: inline-block;
        width: 0.25em;
        height: 0;
        overflow: hidden;
        vertical-align: top;
    }
    .preserve-breaks br { display: inline !important; width: auto; height: auto; }
    /* Body copy: 1px softer on mobile so long-form reads more relaxed */
    :root { --type-body: 15px; }
}

/* ============================================
   STICKY TOP NAV
   ============================================ */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;  /* tops of burger, ZAMBALA wordmark, BOOK NOW share one line — CANGGU hangs below naturally */
    padding: var(--space-lg) var(--space-lg) var(--space-md);  /* generous top breathing room (40px), tighter bottom */
    transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Soft scrim behind nav while over video hero — gives cream wordmark + button
   a barely-there darker substrate so they don't fight the leaf-green video.
   Removed once .scrolled kicks in (blurred-glass nav takes over). */
.top-nav::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: -1;
}
.top-nav.scrolled::before,
.top-nav.nav-dark::before {
    opacity: 0;
}

.top-nav.scrolled {
    background: rgba(23, 58, 46, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Smart hide-on-scroll: nav slides up when scrolling DOWN past hero,
   slides back down when scrolling UP. Class toggled by JS in canggu.js. */
.top-nav {
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                background 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                backdrop-filter 0.6s ease;
}
.top-nav.nav-hidden {
    transform: translateY(-100%);
}

/* Dark nav over light sections */
.top-nav.nav-dark .nav-book-btn {
    border-color: var(--emerald);
    color: var(--emerald);
}

.top-nav.nav-dark .nav-book-btn:hover {
    background: var(--emerald);
    color: var(--cream-bg);
}

.top-nav.nav-dark .nav-hamburger span {
    background: var(--emerald);
}

.top-nav.nav-dark .nav-logo-full {
    filter: brightness(0) saturate(100%);
}

.top-nav.nav-dark.scrolled {
    background: rgba(243, 239, 222, 0.5);
}

.nav-logo {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

/* Book Now Button */
.nav-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-w-compact);
    height: var(--btn-h-compact);
    border: 1px solid var(--cream);
    color: var(--cream);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    background: transparent;
    transition: all 0.4s ease;
}

.nav-book-btn:hover {
    background: var(--cream);
    color: var(--emerald);
}

/* Logo */
.nav-logo-full {
    height: 40px;
    width: auto;
    transition: opacity 0.4s ease;
}

.nav-logo-icon {
    height: 35px;
    width: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.4s ease, left 0.4s ease, transform 0.4s ease;
}

/* Light icon (beige) shows on scroll over dark/hero */
.nav-icon-dark {
    display: none;
}

/* When nav switches to dark mode (over light backgrounds) */
.top-nav.nav-dark .nav-icon-light {
    display: none;
}

.top-nav.nav-dark .nav-icon-dark {
    display: block;
}

.top-nav.scrolled .nav-logo-full {
    opacity: 0;
}

.top-nav.scrolled .nav-logo-icon {
    opacity: 1;
}

/* Hamburger — refined: longer, tighter lines. Sits flush-left at top of
   nav so its top edge aligns with the ZAMBALA wordmark cap. min-height
   ensures a 44px tap target on mobile without changing visual position. */
.nav-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    width: 140px;
    min-height: 44px;
    margin-top: 6px;  /* aligns lines with the optical top of the wordmark */
}

.nav-hamburger span {
    display: block;
    width: 34px;
    height: 1px;
    background: var(--cream);
    transition: all 0.3s ease;
}

/* ============================================
   FULLSCREEN MENU
   ============================================ */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--cream);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.18, 1);
    display: flex;
    flex-direction: column;
    /* Match the closed-nav padding so the logo doesn't shift Y when the
       menu opens. Top + sides mirror .top-nav exactly. */
    padding: var(--space-lg) var(--space-lg) var(--space-lg);
}

.menu-overlay.open {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Menu top bar — mirrors .top-nav so the logo stays put on open/close */
.menu-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.menu-book-btn {
    border-color: var(--emerald);
    color: var(--emerald);
}

.menu-book-btn:hover {
    background: var(--emerald);
    color: var(--cream-bg);
}

.menu-logo {
    flex: 1;
    display: flex;
    justify-content: center;
}

.menu-logo-img {
    height: 40px;
    width: auto;
}

.menu-close {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-xs);
    width: 140px;
    min-height: 44px;
    color: var(--palm-shadow);
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.menu-close:hover { opacity: 0.6; }

.menu-close-x {
    font-size: var(--type-h3);
    line-height: var(--lh-flush);
    font-weight: 300;
}

/* Menu body — two columns */
.menu-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-xl);
    position: relative;
}

.menu-body::after {
    content: '';
    position: absolute;
    left: 50%;
    top: var(--space-xl);
    bottom: 0;
    width: 1px;
    background: rgba(23, 58, 46, 0.12);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.26, 1);
}

.menu-overlay.open .menu-body::after {
    transform: scaleY(1);
    transition-delay: 0.3s;
}

.menu-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: var(--space-lg);
    flex: 0 0 50%;
}

.menu-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.menu-link {
    font-family: var(--font-heading);
    font-size: var(--type-display);
    font-weight: normal;
    color: var(--emerald);
    text-decoration: none;
    transition: opacity 0.5s var(--ease-drift), transform 0.6s var(--ease-float);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    opacity: 0;
    transform: translateY(12px);
}

/* Stagger menu items when overlay opens — delays cleared after entrance via .menu-entered */
.menu-overlay.open .menu-link:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.menu-overlay.open .menu-link:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.menu-overlay.open .menu-link:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.menu-overlay.open .menu-link:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }
.menu-overlay.open .menu-link:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }
.menu-overlay.open .menu-link:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.85s; }

/* After entrance animation, remove delays so hover is instant */
.menu-overlay.menu-entered .menu-link {
    transition-delay: 0s !important;
}

/* Hover effect — fade other links */
.menu-overlay.open .menu-nav:hover .menu-link {
    opacity: 0.25;
}

.menu-overlay.open .menu-nav:hover .menu-link:hover {
    opacity: 1;
}

.menu-overlay.open .menu-link.active {
    opacity: 1;
}

.menu-ig {
    color: var(--emerald);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-overlay.open .menu-ig {
    opacity: 1;
    transition-delay: 0.9s;
}

.menu-ig:hover { opacity: 0.6; }

/* Menu right column */
.menu-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    flex: 0 0 45%;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.26, 1);
}

.menu-overlay.open .menu-right {
    opacity: 1;
    transition-delay: 0.5s;
}

.menu-num {
    font-family: var(--font-heading);
    font-size: var(--type-display);
    color: var(--emerald);
    padding-top: 0;
    display: flex;
    line-height: var(--lh-flush);
}

.menu-num-static {
    display: inline-block;
}

.menu-num-roller {
    display: inline-block;
    height: 1em;
    overflow: hidden;
    position: relative;
}

.menu-num-digits {
    display: flex;
    flex-direction: column;
    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.26, 1);
    line-height: var(--lh-flush);
}

.menu-num-digits span {
    height: 1em;
}

.menu-preview {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: var(--space-lg);
}

.menu-preview-tagline {
    font-family: var(--font-subheading);
    font-size: var(--type-h2);
    font-weight: 300;
    color: var(--emerald);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-heading);
    text-align: right;
    z-index: 2;
    white-space: nowrap;
    margin-bottom: var(--space-sm);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.menu-preview-tagline.swapping {
    opacity: 0;
}

.menu-preview-image {
    position: relative;
    width: 400px;
    aspect-ratio: 3/2;
    overflow: hidden;
    flex-shrink: 0;
}

.menu-preview-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    clip-path: inset(0 0 0 0);
}

.menu-preview-image .menu-img-next {
    clip-path: inset(100% 0 0 0);
    z-index: 2;
}

.menu-preview-image .menu-img-next.reveal {
    clip-path: inset(0 0 0 0);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Hide native video play button on iOS */
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-panel,
video::-webkit-media-controls {
    display: none !important;
    -webkit-appearance: none;
}

.hero-slide {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transition: clip-path 0.8s cubic-bezier(0.25, 0.1, 0.26, 1);
}

.hero-slide.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Layered gradients:
       - Top: darker band (0 → 140px) to ensure nav legibility against bright sky
       - Middle: standard hero darkening at centre for headline contrast
       - Bottom: subtle gradient for bottom-nav legibility */
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 220px),
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.38) 50%,
            rgba(0, 0, 0, 0.2) 100%);
    z-index: 2;
}

/* Mobile: smaller wordmark and bottom nav already read against imagery,
   so lighten the top scrim — preserves the imagery as the hero. */
@media (max-width: 480px) {
    .hero-overlay {
        background:
            linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 180px),
            linear-gradient(to bottom,
                rgba(0, 0, 0, 0.08) 0%,
                rgba(0, 0, 0, 0.30) 50%,
                rgba(0, 0, 0, 0.18) 100%);
    }
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

.hero-tagline {
    font-family: var(--font-heading);
    font-size: var(--type-hero);
    color: var(--cream);
    letter-spacing: var(--ls-heading);
    opacity: 0;
    transform: translateY(12px);
    animation: heroTextIn 1.8s var(--ease-drift) 1.2s forwards;
}

@keyframes heroTextIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   HERO BOTTOM NAV
   ============================================ */
.hero-nav {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-lg);
    width: calc(100% - 80px);
    z-index: 3;
    display: flex;
    justify-content: space-between;
}

.hero-nav-item {
    text-decoration: none;
    color: var(--cream);
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    position: relative;
    padding-bottom: var(--space-xs);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transform: translateY(12px);
    animation: heroNavIn 1.2s var(--ease-drift) forwards;
}

/* Underline — fills from left on hover */
.hero-nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: rgba(235, 224, 193, 0.6);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-nav-item:hover::after {
    width: 100%;
}

.hero-nav-item:nth-of-type(1) { animation-delay: 2.4s; }
.hero-nav-item:nth-of-type(2) { animation-delay: 2.55s; }
.hero-nav-item:nth-of-type(3) { animation-delay: 2.7s; }
.hero-nav-item:nth-of-type(4) { animation-delay: 2.85s; }

/* Palm tree nav indicator — inline next to active page label */
.hero-nav-palm-inline {
    display: none;
    height: 30px;
    width: auto;
    margin-left: -4px;
    vertical-align: baseline;
    margin-bottom: -1px;
}

.hero-nav-item.active .hero-nav-palm-inline {
    display: inline-block;
}

@keyframes heroNavIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.hero-nav-num {
    font-family: var(--font-heading);
    font-size: var(--type-sub);
    color: var(--cream);
}

.hero-nav-label {
    font-family: var(--font-heading);
    font-size: var(--type-h3);
    line-height: normal;
}

.hero-nav-label-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.hero-nav-palm {
    height: 30px;
    width: auto;
    opacity: 0.8;
}

/* ============================================
   INTRO SECTION
   ============================================ */
.intro {
    background: var(--cream-bg);
    padding: var(--space-3xl) var(--space-lg) var(--space-xl);
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
}

.intro-inner {
    display: flex;
    gap: var(--space-lg);
    align-items: stretch;
    position: relative;
    width: 100%;
}

.intro-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin-right: -10%;
    align-self: stretch;
    padding-bottom: var(--space-xl);
}

.intro-headline {
    font-family: var(--font-heading);
    font-size: var(--type-display);
    color: var(--emerald);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    margin-bottom: 0;
    white-space: nowrap;
}

/* Word-by-word scroll reveal — archvoyage style */
.word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.word {
    display: inline-block;
    transform: translateY(110%) rotate(8deg);
    transform-origin: left center;
    transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-reveal.revealed .word {
    transform: translateY(0) rotate(0deg);
}


.intro-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    max-width: 440px;
    margin-bottom: var(--space-md);
}

.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-w-standard);
    height: var(--btn-h-standard);
    border: 1px solid var(--emerald);
    color: var(--palm-shadow);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    background: transparent;
    transition: all 0.4s ease;
}

.btn-outline-dark:hover {
    background: var(--emerald);
    color: var(--cream-bg);
}

.intro-image {
    flex: 0 1 50%;
    max-width: 640px;
    overflow: hidden;
    align-self: flex-start;
    aspect-ratio: 4/5;
    padding: 0;
    margin-top: var(--space-2xl);
}

.intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    display: block;
    transition: transform 0.1s linear;
}

/* ============================================
   CELEBRATE SECTION
   ============================================ */
.celebrate {
    background: var(--cream);
    position: relative;
    height: 500vh;
    z-index: 1;
}

.celebrate::before {
    content: '';
    position: absolute;
    inset: -2px 0 0 0;
    background: var(--cream);
    z-index: -1;
}

.celebrate-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cream);
}

.celebrate-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: var(--space-xl) var(--space-lg) var(--space-md);
    flex-shrink: 0;
    background: var(--cream);
}

.celebrate-text {
    max-width: 500px;
}

.celebrate-title {
    font-family: var(--font-heading);
    font-size: var(--type-h1);
    color: var(--emerald);
    letter-spacing: var(--ls-display);
    margin-bottom: var(--space-md);
}

.celebrate-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
}

/* --- Celebrate: gallery with stacking images --- */
.celebrate-gallery {
    position: relative;
    flex: 1;
    overflow: hidden;
    margin: 0 var(--space-lg) var(--space-md);  /* bottom margin matches header top padding for symmetry */
    background: none;
}


.stack-card {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: calc(100% + 4px);
    overflow: hidden;
    border-radius: 0;
    will-change: transform, filter;
    transition: filter 0.3s ease;
    background: none;
}

.stack-card-1 {
    z-index: 1;
}

.stack-card:not(.stack-card-1) {
    transform: translateY(100%);
}

.stack-card-2 {
    z-index: 2;
}

.stack-card-3 {
    z-index: 3;
}

.stack-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.stack-card:hover img {
    transform: scale(1.02);
}

/* ============================================
   STAY SECTION
   ============================================ */
.stay {
    background: var(--cream-bg);
    padding: var(--space-3xl) var(--space-lg) var(--space-lg);  /* extra top padding for breathing room after celebrate */
    border-top: 1px solid rgba(23, 58, 46, 0.1);
}

.stay-inner {
    display: flex;
    gap: var(--space-2xl);
    align-items: flex-start;
}

.stay-image-large {
    flex: 0 0 45%;
    overflow: hidden;
}

.stay-image-large img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.stay-right {
    flex: 1;
    padding-top: var(--space-lg);
}

.stay-title {
    font-family: var(--font-heading);
    font-size: var(--type-h1);
    color: var(--emerald);
    letter-spacing: var(--ls-display);
    margin-bottom: var(--space-md);
}

.stay-image-small {
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.stay-image-small img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.stay-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    max-width: 400px;
    margin-bottom: var(--space-md);
}

/* ============================================
   EXPLORE SECTION
   ============================================ */
.explore {
    background: var(--cream-bg);
    padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

.explore-title {
    font-family: var(--font-heading);
    font-size: var(--type-h1);
    color: var(--emerald);
    letter-spacing: var(--ls-display);
    margin: 0 auto var(--space-md);
    position: relative;
    width: 50%;
    max-width: 640px;
    text-align: left;
}

.explore-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.explore-image {
    width: 50%;
    max-width: 640px;
    aspect-ratio: 4/5;
    overflow: hidden;
}

.explore-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: var(--space-md);
    width: 50%;
    max-width: 640px;
}

.explore-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 75%;
    display: block;
}

.explore-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    max-width: 400px;
    margin-bottom: var(--space-md);
    text-align: right;
    align-self: flex-end;
}

.explore .btn-outline-dark {
    white-space: nowrap;
    width: auto;
    padding: 0 var(--space-md);
}

/* ============================================
   TESTIMONIAL SECTION
   ============================================ */
.testimonial {
    background: var(--cream-bg);
    padding: var(--space-3xl) var(--space-3xl);
    text-align: center;
}

.testimonial-quote {
    width: min(85%, 1200px);
    margin: 0 auto;
}

.testimonial-quote p {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    color: var(--emerald);
    line-height: var(--lh-sub);
    letter-spacing: var(--ls-heading);
    margin: 0 0 var(--space-md);
}

.quote-mark {
    font-family: var(--font-accent);
    font-size: var(--type-h2);
    line-height: 0;
    vertical-align: -8px;
    opacity: 0.5;
}

.testimonial-cite {
    font-family: var(--font-subheading);
    font-size: var(--type-meta);
    color: var(--emerald);
    font-style: normal;
    letter-spacing: 0.5px;
}

/* ============================================
   BOOK CTA SECTION
   ============================================ */
.book-cta {
    background: var(--cream-bg);
    padding: var(--space-lg) var(--space-lg);
}

.book-cta-inner {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.book-cta-image {
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: center 20%;  /* shift focal point up so text overlay sits over darker tree-line area */
    display: block;
    will-change: transform;
}

.book-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.book-cta-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-align: center;
    padding: 0 var(--space-xl);
}

/* When headline is standalone (no byline wrapper), center it directly */
.book-cta-headline {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    color: var(--cream);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-heading);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 var(--space-xl);
    text-align: center;
}

/* When headline + byline are grouped, center the group instead */
.book-cta-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 var(--space-xl);
    text-align: center;
}

.book-cta-text .book-cta-headline {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    padding: 0;
    width: auto;
}

.book-cta-headline + .book-cta-byline,
.book-cta-text .book-cta-byline {
    margin-top: var(--space-xs);
}

.book-cta-byline {
    font-family: var(--font-body);
    font-size: var(--type-sub);
    font-weight: 300;
    color: var(--cream);
    line-height: var(--lh-body);
    max-width: 700px;
    margin: 0 auto var(--space-md);
    opacity: 0.85;
    white-space: nowrap;
}

.book-cta-content .btn-outline-light {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, 0);
}

/* Celebrate banner: headline + byline + button grouped and centered */
.book-cta-content--with-byline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.book-cta-content--with-byline .book-cta-headline {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    padding: 0;
    width: auto;
}

.book-cta-content--with-byline .book-cta-byline {
    position: static;
    margin: var(--space-xs) 0 0;
    text-align: center;
}

.book-cta-content--with-byline .btn-outline-light {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    margin-top: var(--space-md);
}

.btn-outline-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-w-standard);
    height: var(--btn-h-standard);
    border: 1px solid var(--cream);
    color: var(--cream);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    background: transparent;
    transition: all 0.4s ease;
}

.btn-outline-light:hover {
    background: var(--cream);
    color: var(--emerald);
}

/* ============================================
   COMING SOON
   ============================================ */
.page-coming-soon .intro-text {
    justify-content: space-between;
    padding-bottom: 0;
}

.page-coming-soon .coming-soon-heading {
    padding-top: var(--space-md);
}

.page-coming-soon .coming-soon-heading,
.page-coming-soon .coming-soon-form,
.page-coming-soon .coming-soon-field,
.page-coming-soon .btn-solid-dark {
    max-width: 350px;
}

.page-coming-soon .intro-image {
    overflow: visible;
}

.page-coming-soon .intro-image img {
    transition: none;
}

.page-coming-soon .intro-headline {
    margin-bottom: var(--space-md);
}

.coming-soon-combined {
    background: var(--cream-bg);
    padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

.coming-soon-combined-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 0;
    align-items: flex-end;
    position: relative;
}

.coming-soon-combined-left {
    flex: 0 0 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.coming-soon-intro {
    margin-bottom: var(--space-xl);
}

.coming-soon-combined-right {
    flex: 0 0 50%;
    aspect-ratio: 96 / 115;
    position: relative;
    overflow: hidden;
    margin-top: var(--space-3xl);
}

.coming-soon-combined-right img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coming-soon-form-wrap {
    max-width: 500px;
}

.coming-soon-signup {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    background: var(--cream-bg);
}

.coming-soon-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.coming-soon-left {
    flex: 1;
    max-width: 350px;
}

.coming-soon-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color: var(--emerald);
    margin-bottom: var(--space-md);
}

.coming-soon-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Reset native fieldset chrome — only here for a11y grouping. */
.coming-soon-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Visually hidden but readable by screen readers. */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.coming-soon-status {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    color: var(--emerald);
    opacity: 0.85;
    min-height: 1.4em;
    margin-top: var(--space-sm);
    text-align: center;
}

.coming-soon-field {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 1px solid var(--emerald);
    padding-bottom: var(--space-xs);
}

.coming-soon-label {
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    color: var(--palm-shadow);
    white-space: nowrap;
    min-width: 50px;
}

.coming-soon-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    padding: var(--space-xxs) 0;
    outline: none;
}

.coming-soon-input::placeholder {
    color: rgba(23, 58, 46, 0.4);
}

.coming-soon-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--type-meta);
    color: var(--palm-shadow);
    line-height: 1.5;
    cursor: pointer;
    margin-top: var(--space-xs);
}

.coming-soon-consent input[type="checkbox"] {
    margin-top: var(--space-xxs);
    accent-color: var(--emerald);
}

.coming-soon-consent a {
    color: var(--emerald);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.coming-soon-submit {
    margin-top: var(--space-sm);
    align-self: flex-start;
}

.coming-soon-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.coming-soon-image-wrap {
    position: relative;
    max-width: 580px;
    width: 100%;
}

.coming-soon-image {
    width: 100%;
    aspect-ratio: 222/317;
    object-fit: cover;
    border-radius: 2px;
}

.coming-soon-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.coming-soon-logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    max-width: 200px;
    opacity: 0.85;
    pointer-events: none;
}

.intro-image-wrap {
    position: relative;
}

.btn-solid-dark {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: var(--emerald);
    color: var(--cream-bg);
    border: 1px solid var(--emerald);
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    width: 100%;
}

.btn-solid-dark:hover {
    background: transparent;
    color: var(--emerald);
}

/* --- Coming Soon responsive --- */
@media (max-width: 768px) {
    .coming-soon-combined { padding: var(--space-xl) var(--space-sm); }
    .coming-soon-combined-inner { flex-direction: column; gap: var(--space-lg); }
    .coming-soon-combined-left { flex: none; width: 100%; }
    .coming-soon-combined-right { flex: none; width: 100%; margin-top: 0; }
    .coming-soon-intro { margin-bottom: var(--space-lg); }
    .coming-soon-signup { padding: var(--space-lg) var(--space-md) var(--space-xl); }
    .coming-soon-inner { flex-direction: column; gap: var(--space-lg); }
    .coming-soon-left { max-width: 100%; }
    .coming-soon-heading { font-size: var(--type-h2); }
    .coming-soon-form-wrap { max-width: 100%; }
    .coming-soon-right { width: 100%; }
    .page-coming-soon .coming-soon-heading,
    .page-coming-soon .coming-soon-form,
    .page-coming-soon .coming-soon-field,
    .page-coming-soon .btn-solid-dark { max-width: 100%; }
}

@media (max-width: 480px) {
    .coming-soon-combined { padding: var(--space-lg) var(--space-sm); }
    .coming-soon-heading { font-size: var(--type-h2); }
    .coming-soon-label { font-size: var(--type-eyebrow); }
    /* iOS Safari zooms on focus when input font-size < 16px. Pin to 16px
       regardless of the mobile body-copy override. */
    .coming-soon-input { font-size: 16px; }
    .coming-soon-signup { padding: var(--space-md) var(--space-md) var(--space-lg); }
    .btn-solid-dark { font-size: var(--type-eyebrow); padding: var(--space-sm) var(--space-md); min-height: 48px; }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--cream);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* --- Upper footer: 3 columns --- */
.footer-upper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: flex-start;
}

/* Left: nav links */
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-nav a {
    font-family: var(--font-heading);
    font-size: var(--type-h3);
    color: var(--emerald);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-nav a:hover {
    opacity: 0.6;
}

/* Center: palm logomark */
.footer-logo-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-palm {
    height: 120px;
    width: auto;
}

/* When palm appears in the lower section (after the wordmark moved up),
   it's smaller + centered. */
.footer-palm-lower {
    height: 72px !important;  /* 10% smaller than before */
    width: auto;
    display: block;
    margin: 0 auto;
}

/* Right: location, contact, instagram */
.footer-info {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer-info-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.footer-info-label {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    font-weight: 700;
    color: var(--palm-shadow);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
}

.footer-info-text {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    color: var(--palm-shadow);
    line-height: 1.6;
    text-decoration: none;
}

.footer-map-link {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    font-weight: 700;
    color: var(--palm-shadow);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-social {
    color: var(--emerald);
    align-self: flex-end;
    transition: opacity 0.3s ease;
}

.footer-social:hover {
    opacity: 0.6;
}

/* --- Divider --- */
.footer-divider {
    border: none;
    border-top: 1px solid var(--emerald);
    margin: var(--space-xl) 0 var(--space-lg);
    opacity: 0.3;
}

/* --- Lower footer --- */
.footer-lower {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.footer-copyright {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    color: var(--palm-shadow);
    opacity: 0.6;
}

.footer-credit {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    color: var(--palm-shadow);
    opacity: 0.6;
}

.footer-credit a {
    color: var(--emerald);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.3s ease;
}

.footer-credit a:hover {
    opacity: 1;
}

.footer-wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.footer-wordmark-logo {
    width: 200px;
    height: auto;
    opacity: 0.7;
}

/* When wordmark appears in the upper footer (swapped with palm),
   it's the brand statement — bigger and prominent. */
.footer-wordmark-upper {
    width: 320px !important;
    height: auto;
    opacity: 1;
    display: block;
    margin: 0 auto;
}

.footer-legal {
    display: flex;
    gap: var(--space-md);
}

.footer-legal a {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    color: var(--palm-shadow);
    text-decoration: none;
    font-style: italic;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.footer-legal a:hover {
    opacity: 1;
}

/* ============================================
   BOOK PAGE
   ============================================ */

/* --- Trust Pillars --- */
/* Trust pillars — slim reassurance strip below the booking widget.
   Was: 3 large cards above the widget. Now: 3 compact horizontal items. */
.book-pillars {
    background: var(--cream-bg);
    padding: var(--space-lg) var(--space-lg);
    border-top: 1px solid rgba(23, 58, 46, 0.08);
}

.book-pillars-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 960px;
    margin: 0 auto;
}

.book-pillar {
    text-align: center;
    padding: 0 var(--space-md);
    position: relative;
}

.book-pillar:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(23, 58, 46, 0.1);
}

.book-pillar-title {
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    color: var(--emerald);
    margin-bottom: var(--space-xs);
    letter-spacing: var(--ls-heading);
    text-transform: uppercase;
}

.book-pillar-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    max-width: 240px;
    margin: 0 auto;
    opacity: 0.65;
}

/* --- Cloudbeds Booking Widget ---
   Conversion-first pattern: cream-on-cream so the section blends into the page
   (no transactional "card" feel), large emerald-accented inputs side by side,
   single solid emerald CTA below, slim reassurance row underneath. Cloudbeds
   ships its own CSS via the widget script, so we use !important + grid
   overrides to wrangle it into the brand. */
.book-widget {
    background: var(--cream);
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

.book-widget-inner-wrap {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.book-widget-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    color: var(--emerald);
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-lg);
}

.book-widget-inner {
    max-width: 640px;
    margin: 0 auto var(--space-md);
}

/* Reassurance row beneath the CTA — three pipe-separated points */
.book-widget-reassurance {
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    color: var(--emerald);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: var(--space-md);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    line-height: var(--lh-sub);
}

.book-widget-reassurance > span[aria-hidden="true"] {
    opacity: 0.5;
}

/* Cloudbeds widget overrides — cream-section / emerald-accent */
.book-widget-inner .CloudBedsWidget,
.book-widget-inner .widgetHotelsForm {
    width: 100% !important;
    font-family: var(--font-body) !important;
}

/* Flip the vertical-stacked widget into a 2-col grid:
   [Check In input ] [Check Out input]
   [    CHECK AVAILABILITY spans both ] */
.book-widget-inner .vertical-widget {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "checkin checkout"
        "submit  submit";
    gap: var(--space-sm);
    width: 100% !important;
}

/* Hide the float-clear divider that the widget ships */
.book-widget-inner .vertical-widget > div[style*="clear"] {
    display: none !important;
}

.book-widget-inner .acessa_widget_block {
    display: block !important;
    margin: 0 !important;
    text-align: left;
    position: relative;
}
.book-widget-inner .acessa_widget_block:nth-of-type(1) { grid-area: checkin; }
.book-widget-inner .acessa_widget_block:nth-of-type(2) { grid-area: checkout; }
.book-widget-inner .submit_link,
.book-widget-inner .widgetHotelsForm a.submit_link,
.CloudBedsWidget .widgetHotelsForm a.submit_link {
    grid-area: submit;
}

/* Labels: "Check In" / "Check Out" — small uppercase above each input */
.book-widget-inner .acessa_widget_block p {
    font-family: var(--font-body) !important;
    font-size: var(--type-eyebrow) !important;
    color: var(--emerald) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin: 0 0 var(--space-xs) 0 !important;
    padding: 0 !important;
    opacity: 0.7;
}

/* Date input — needs HIGHER specificity than Cloudbeds's own
   .widgetHotelsForm .acessa_widget_block .widgetHotelsInputText.date
   (which sets height: 20px !important). Chaining 5 classes beats theirs.
   Background transparent so the warm cream section shows through. */
.book-widget-inner .CloudBedsWidget .widgetHotelsForm .acessa_widget_block .widgetHotelsInputText.date {
    width: 100% !important;
    height: 72px !important;
    box-sizing: border-box !important;
    padding: 0 var(--space-md) !important;
    border: 1px solid var(--emerald) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--emerald) !important;
    font-family: var(--font-heading) !important;
    font-size: var(--type-body) !important;
    letter-spacing: 0.5px !important;
    line-height: var(--lh-flush) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: background 0.3s ease, border-color 0.3s ease;
    float: none !important;
}

.book-widget-inner .CloudBedsWidget .widgetHotelsForm .acessa_widget_block .widgetHotelsInputText.date:hover,
.book-widget-inner .CloudBedsWidget .widgetHotelsForm .acessa_widget_block .widgetHotelsInputText.date:focus {
    background: var(--cream-bg) !important;
    border-color: var(--palm-shadow) !important;
    outline: none !important;
}

/* Primary CTA — same height as inputs (72px). Higher specificity than
   Cloudbeds's .CloudBedsWidget .widgetHotelsForm a.submit_link by chaining
   .book-widget-inner in front. Aggressive min/max-height locks because
   Cloudbeds also injects padding that can balloon the height. */
.book-widget-inner .CloudBedsWidget .widgetHotelsForm a.submit_link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    margin: var(--space-sm) 0 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--emerald) !important;
    border-radius: 0 !important;
    background: var(--emerald) !important;
    color: var(--cream) !important;
    font-family: var(--font-body) !important;
    font-size: 0 !important;       /* hides the literal "Go" injected by Cloudbeds */
    font-weight: 400 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

/* Replace the "Go" label with "Check Availability" via a pseudo-element.
   font-size: 0 above collapses the original "Go" text; this writes the
   replacement label at the proper size. */
.book-widget-inner .CloudBedsWidget .widgetHotelsForm a.submit_link::before {
    content: "Check Availability";
    font-size: var(--type-eyebrow);
    font-family: var(--font-body);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--cream);
    line-height: var(--lh-flush);
}

.book-widget-inner .CloudBedsWidget .widgetHotelsForm a.submit_link:hover {
    background: var(--palm-shadow) !important;
    color: var(--cream) !important;
}

/* Mobile: stack date inputs vertically when viewport is narrow */
@media (max-width: 540px) {
    .book-widget-inner .vertical-widget {
        grid-template-columns: 1fr;
        grid-template-areas:
            "checkin"
            "checkout"
            "submit";
    }
    .book-widget-reassurance {
        flex-direction: column;
        gap: var(--space-xs);
    }
    .book-widget-reassurance > span[aria-hidden="true"] {
        display: none;
    }
    .book-pillars-inner {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    .book-pillar:not(:last-child)::after {
        display: none;
    }
    .book-pillar:not(:last-child) {
        border-bottom: 1px solid rgba(23, 58, 46, 0.1);
        padding-bottom: var(--space-md);
    }
}

/* Pikaday popup calendar — brand-coloured */
/* Pikaday popup — sized to match the input column width (~312px), brand-typeset */
.CloudBedsDatePicker.pika-single {
    width: 320px !important;
    max-width: calc(100vw - var(--space-md) * 2) !important;
    background: var(--cream) !important;
    border: 1px solid var(--emerald) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(23, 58, 46, 0.18) !important;
    font-family: var(--font-heading) !important;
    color: var(--emerald) !important;
    padding: var(--space-md) !important;
    box-sizing: border-box !important;
}

.CloudBedsDatePicker .pika-lendar,
.CloudBedsDatePicker .pika-table {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    table-layout: fixed !important;
}

/* Pikaday day cells: equal width so the columns sit symmetrically inside
   the popup (default ships variable widths that shift the grid left). */
.CloudBedsDatePicker .pika-table th,
.CloudBedsDatePicker .pika-table td {
    width: calc(100% / 7) !important;
    text-align: center !important;
}

/* Pikaday wraps the month + year labels in `.pika-label` divs that contain
   a `<select>`. Both ship with white-ish backgrounds — flatten to transparent. */
.CloudBedsDatePicker .pika-title,
.CloudBedsDatePicker .pika-label {
    font-family: var(--font-heading) !important;
    font-size: var(--type-sub) !important;
    color: var(--emerald) !important;
    background: transparent !important;
    letter-spacing: 0.3px !important;
}

.CloudBedsDatePicker .pika-label select.pika-select {
    background: transparent !important;
    border: none !important;
    color: var(--emerald) !important;
    font-family: var(--font-heading) !important;
}

.CloudBedsDatePicker .pika-table th {
    color: var(--emerald) !important;
    font-family: var(--font-body) !important;
    font-size: var(--type-eyebrow) !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    padding: var(--space-xs) 0 var(--space-sm) !important;
}

.CloudBedsDatePicker .pika-button {
    background: transparent !important;
    color: var(--emerald) !important;
    font-family: var(--font-heading) !important;
    font-size: var(--type-body) !important;
    line-height: var(--lh-flush) !important;
    padding: var(--space-sm) 0 !important;
    border-radius: 0 !important;
    text-align: center !important;
}

.CloudBedsDatePicker .pika-button:hover {
    background: var(--emerald) !important;
    color: var(--cream) !important;
    border-radius: 0 !important;
}

.CloudBedsDatePicker.pika-single .is-today .pika-button {
    color: var(--emerald) !important;
}

.CloudBedsDatePicker.pika-single .is-selected .pika-button {
    background: var(--emerald) !important;
    color: var(--cream) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
}

/* Past / disabled dates — muted sage so they're visibly "unavailable" but
   still readable on the cream background. Pikaday's default ships
   opacity: 0.3 on disabled buttons, so we explicitly reset it. */
.CloudBedsDatePicker.pika-single .is-disabled,
.CloudBedsDatePicker.pika-single .is-disabled .pika-button,
.CloudBedsDatePicker.pika-single .pika-button[disabled],
.CloudBedsDatePicker.pika-single td.is-disabled .pika-button {
    color: #6B8773 !important;
    background: transparent !important;
    opacity: 1 !important;
    cursor: default !important;
}
.CloudBedsDatePicker.pika-single .is-disabled .pika-button:hover,
.CloudBedsDatePicker.pika-single td.is-disabled .pika-button:hover {
    background: transparent !important;
    color: #6B8773 !important;
}

.CloudBedsDatePicker .pika-prev,
.CloudBedsDatePicker .pika-next {
    opacity: 0.6 !important;
    transition: opacity 0.2s ease;
}
.CloudBedsDatePicker .pika-prev:hover,
.CloudBedsDatePicker .pika-next:hover {
    opacity: 1 !important;
}

/* --- Good to Know FAQ --- */
.book-faq {
    background: var(--cream-bg);
    padding: var(--space-3xl) var(--space-lg);  /* more breathing room above and below */
}

.book-faq-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    color: var(--emerald);
    text-align: center;
    letter-spacing: var(--ls-heading);
    margin-bottom: var(--space-lg);
}

.book-faq-inner {
    max-width: 1100px;  /* wider — Minimum Stay + Cancellation cards now have more room */
    margin: 0 auto;
}

.book-faq-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: var(--space-xl);  /* more space between the trust-cards row and the FAQ list below */
}

.book-faq-card {
    border: 1px solid rgba(23, 58, 46, 0.15);
    padding: var(--space-lg) var(--space-xl);
    text-align: center;
}

.book-faq-card:first-child {
    border-right: none;
}

.book-faq-card-title {
    font-family: var(--font-subheading);
    font-size: var(--type-sub);
    font-weight: 300;
    color: var(--emerald);
    margin-bottom: var(--space-xs);
}

.book-faq-card-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    opacity: 0.7;
}

.book-faq-answer a {
    color: var(--emerald);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.3s ease;
}

.book-faq-answer a:hover {
    opacity: 0.6;
}

.book-faq-item {
    border-bottom: 1px solid rgba(23, 58, 46, 0.12);
}

.book-faq-question {
    width: 100%;
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: var(--type-sub);
    font-weight: 400;
    color: var(--emerald);
    text-align: left;
    padding: var(--space-sm) 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    transition: opacity 0.3s ease;
}

.book-faq-question:hover {
    opacity: 0.6;
}

.book-faq-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}

.book-faq-icon svg {
    display: block;
}

.book-faq-item.open .book-faq-icon {
    transform: rotate(45deg);
}

/* Accordion using CSS Grid 1fr → 0fr trick — animates to natural content
   height (no fixed max-height needed), no jolt when switching between items. */
.book-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
    opacity: 0;
}

.book-faq-answer > * {
    min-height: 0;
}

.book-faq-item.open .book-faq-answer {
    grid-template-rows: 1fr;
    padding-top: var(--space-xs);
    padding-bottom: var(--space-lg);
    opacity: 1;
}

.book-faq-answer p {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    opacity: 0.7;
    margin: 0;
}

/* --- Contact CTAs --- */
.book-contact {
    background: var(--cream);
    padding: var(--space-xl) var(--space-lg);
}

.book-contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.book-contact-card {
    padding: var(--space-lg);
    background: var(--cream-bg);
    position: relative;
    text-align: center;
}

.book-contact-card:first-child::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(23, 58, 46, 0.12);
}

.book-contact-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h3);
    color: var(--emerald);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    margin-bottom: var(--space-md);
}

.book-contact-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    margin-bottom: var(--space-md);
    opacity: 0.7;
}

.book-contact-buttons {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
    justify-content: center;
}

.book-contact-buttons .btn-outline-dark {
    width: auto;
    padding: 0 var(--space-md);
}

/* ============================================
   LEGAL PAGES (Privacy Policy, Terms)
   ============================================ */
.legal-page {
    background: var(--cream-bg);
    padding: var(--space-3xl) var(--space-lg) var(--space-xl);
}

.legal-inner {
    max-width: 880px;
    margin: 0 auto;
}

.legal-title {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    font-weight: normal;
    color: var(--emerald);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    margin-bottom: var(--space-sm);
}

.legal-updated {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    color: var(--palm-shadow);
    opacity: 0.6;
    margin-bottom: var(--space-xl);
}

.legal-body h2 {
    font-family: var(--font-subheading);
    font-size: var(--type-h3);
    font-weight: 400;
    color: var(--emerald);
    margin: var(--space-lg) 0 var(--space-sm);
}

.legal-body p {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    margin-bottom: var(--space-sm);
}

.legal-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-sm);
}

.legal-body li {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    padding-left: var(--space-sm);
    position: relative;
    margin-bottom: var(--space-xs);
}

.legal-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--space-xs);
    width: 4px;
    height: 4px;
    background: var(--emerald);
    border-radius: 50%;
}

.legal-body a {
    color: var(--emerald);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 768px) {
    .legal-page { padding: var(--space-3xl) var(--space-md) var(--space-xl); }
    .legal-updated { margin-bottom: var(--space-lg); }
    .legal-body h2 { font-size: var(--type-h3); margin-top: var(--space-lg); }
}

@media (max-width: 480px) {
    .legal-page { padding: var(--space-2xl) var(--space-md) var(--space-lg); }
}

/* ============================================
   SCROLL ANIMATIONS — Floaty, archvoyage-style
   ============================================ */

/* Text reveals — gentle fade + lift */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.2s var(--ease-drift),
                transform 1.2s var(--ease-drift);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Image reveals — longer, floatier */
.reveal-image {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 2s var(--ease-float),
                transform 2s var(--ease-float);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.reveal-image.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: halve all animation timings. Desktop's slow editorial feel
   reads as sluggish on a scroll-heavy mobile session. Keeps the soft
   fade character but feels responsive. */
@media (max-width: 768px) {
    body {
        animation-duration: 0.5s;
        animation-delay: 0s;
    }
    .hero-tagline {
        animation: heroTextIn 0.9s var(--ease-drift) 0.3s forwards;
    }
    .reveal {
        transition: opacity 0.6s var(--ease-drift),
                    transform 0.6s var(--ease-drift);
        transform: translateY(8px);
    }
    .reveal-image {
        transition: opacity 0.9s var(--ease-float),
                    transform 0.9s var(--ease-float);
        transform: translateY(16px);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* --- Large tablet / small desktop (1024px) --- */
@media screen and (max-width: 1024px) {
    .menu-link { font-size: var(--type-display); line-height: 1.14; }
    .menu-num { font-size: var(--type-display); }
    .menu-preview-image { width: 300px; height: 200px; }
    .menu-preview-tagline { font-size: var(--type-h2); line-height: 1.25; }
    .menu-body { padding-top: var(--space-md); }
    .intro-headline { font-size: var(--type-display); }
    .intro-text { margin-right: -10%; }
    .celebrate-title, .stay-title, .explore-title { font-size: var(--type-h1); }
    .testimonial-quote p { line-height: 1.44; }
    .quote-mark { font-size: var(--type-h2); }
    .explore-title, .explore-image, .explore-bottom { width: 70%; }
    .footer-nav a { font-size: var(--type-h3); }
    .footer-palm { height: 100px; }
}

/* --- Tablet (768px) --- */
@media screen and (max-width: 768px) {
    /* Menu */
    .menu-overlay { padding: var(--space-sm) var(--space-sm) var(--space-md); }
    .menu-link { font-size: var(--type-display); line-height: 1.25; white-space: nowrap; }
    .menu-num { font-size: var(--type-display); }
    .menu-preview { display: block; position: relative; width: 100%; height: auto; }
    .menu-preview-tagline { position: static; font-size: var(--type-h2); line-height: 1.3; text-align: right; white-space: normal; margin-bottom: var(--space-xs); }
    .menu-preview-image { position: relative; right: auto; bottom: auto; width: 100%; aspect-ratio: 3/2; }
    .menu-body::after { display: none; }
    .menu-body { position: relative; }
    .menu-right { justify-content: flex-end; padding-top: 0; flex: 0 0 auto; align-items: flex-start; }
    .menu-num { position: absolute; top: var(--space-lg); right: 0; font-size: var(--type-display); }
    .menu-logo-img { height: 30px; }
    .menu-close { width: 110px; }
    .menu-body { padding-top: var(--space-lg); }
    .menu-left { padding-right: 0; flex: 1; }
    .menu-nav { gap: var(--space-xxs); }

    /* Nav */
    .top-nav { padding: var(--space-sm) var(--space-sm); }
    .nav-book-btn { width: 110px; height: 30px; font-size: var(--type-eyebrow); }
    .nav-hamburger { width: 110px; }
    .nav-logo-full { height: 30px; }
    .nav-logo-icon { height: 28px; }

    /* Hero */
    .hero-nav {
        left: var(--space-sm);
        width: calc(100% - 40px);
        bottom: var(--space-md);
        gap: var(--space-xs);
    }
    .hero-nav-num { font-size: var(--type-sub); }
    .hero-nav-label { font-size: var(--type-h3); }
    .hero-nav-palm-inline { height: 20px; }

    /* Intro */
    .intro { padding: var(--space-xl) var(--space-sm); }
    .intro-inner { flex-direction: column; }
    .intro-text { flex: 1; margin-right: 0; padding-bottom: 0; }
    .intro-headline { font-size: var(--type-display); white-space: normal; margin-bottom: var(--space-lg); }
    .intro-body { font-size: var(--type-body); max-width: 100%; }
    .intro-image { flex: none; width: 100%; margin-top: var(--space-md); aspect-ratio: 3/2; padding: 0; margin-right: 0; }

    /* Celebrate — disable sticky, show images stacked */
    .celebrate { height: auto; background: var(--cream); }
    .celebrate::before { display: none; }
    .celebrate-sticky { position: relative; height: auto; overflow: visible; background: var(--cream); }
    .celebrate-header {
        padding: var(--space-xl) var(--space-md) var(--space-md);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
    .celebrate-title { font-size: var(--type-h1); }
    .celebrate-body { font-size: var(--type-body); }
    .celebrate-gallery {
        position: relative;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        background: var(--cream);
        margin: 0;
        padding: 0 var(--space-md) var(--space-lg);
        overflow: visible;
    }
    .stack-card {
        position: relative;
        height: auto;
        margin-bottom: var(--space-sm);
    }
    .stack-card:last-child {
        margin-bottom: 0;
    }
    .stack-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 3/2;
    }
    .stack-card:not(.stack-card-1) { transform: none; }

    /* Stay */
    .stay { padding: var(--space-xl) var(--space-sm) var(--space-md); }
    .stay-inner { flex-direction: column; gap: var(--space-md); }
    .stay-image-large { flex: none; width: 100%; order: 2; margin-top: var(--space-xs); aspect-ratio: 3/2; }
    .stay-image-large img { height: 100%; }
    .stay-right { padding-top: 0; order: 1; }
    .stay-title { font-size: var(--type-h1); }
    .stay-body { font-size: var(--type-body); max-width: 100%; }

    /* Explore */
    .explore { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
    .explore-title { font-size: var(--type-h1); width: 100%; text-align: left; }
    .explore-content { align-items: flex-start; }
    .explore-image { width: 100%; aspect-ratio: 3/2; }
    .explore-bottom { width: 90%; align-items: flex-start; }
    .explore-body { text-align: left; align-self: flex-start; max-width: 100%; }

    /* Testimonial */
    .testimonial { padding: var(--space-xl) var(--space-sm); }
    .testimonial-quote { width: 95%; }
    .testimonial-quote p { line-height: 1.58; }
    .quote-mark { font-size: var(--type-h2); vertical-align: -6px; }

    /* Book CTA */
    .book-cta { padding: var(--space-sm) var(--space-md); }
    .book-cta-inner { height: 60vh; }
    .book-cta-headline { position: static; transform: none; padding: 0; width: auto; }
    .book-cta-content { padding: 0 var(--space-md); display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .book-cta-content .btn-outline-light { position: static; transform: none; margin-top: var(--space-md); }
    .btn-outline-light { width: var(--btn-w-standard); height: 34px; font-size: var(--type-eyebrow); }

    /* Footer */
    .site-footer { padding: var(--space-xl) var(--space-sm) var(--space-md); }
    .footer-upper { grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; justify-items: center; }
    .footer-nav { align-items: center; text-align: center; }
    .footer-info { text-align: center; align-items: center; }
    .footer-info-block { align-items: center; }
    .footer-social { align-self: center; }
    .footer-logo-col { display: none; }
    .footer-lower { flex-direction: column; gap: var(--space-md); align-items: center; text-align: center; }
    .footer-wordmark { align-items: center; }
    .footer-legal { gap: var(--space-md); }
    .footer-divider { margin: var(--space-lg) 0 var(--space-md); }
    .footer-nav a { font-size: var(--type-sub); }

    /* Buttons */
    .btn-outline-dark { width: var(--btn-w-standard); height: 34px; font-size: var(--type-eyebrow); }

    /* Book page */
    .book-pillars { padding: var(--space-xl) var(--space-sm); }
    .book-pillars-inner { grid-template-columns: 1fr; gap: var(--space-lg); max-width: 500px; }
    .book-pillar:not(:last-child)::after { display: none; }
    .book-widget { padding: var(--space-lg) var(--space-sm); }
    .book-faq { padding: var(--space-xl) var(--space-sm); }
    .book-faq-heading { font-size: var(--type-h2); }
    .book-faq-cards { grid-template-columns: 1fr; }
    .book-faq-card:first-child { border-right: 1px solid rgba(23, 58, 46, 0.15); border-bottom: none; }
    .book-contact { padding: var(--space-xl) var(--space-sm); }
    .book-contact-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
    .book-contact-card { padding: var(--space-lg) var(--space-md); }
}

/* --- Mobile (480px) --- */
@media screen and (max-width: 480px) {
    /* Menu */
    .menu-overlay { padding: 14px var(--space-sm) var(--space-sm); }
    /* Inside the menu, the three boxes (close, logo, BOOK NOW) pin to
       the top of the row so each starts at 14px from the top of the
       screen. INNER content alignment varies by item: the close × and
       BOOK NOW text centre vertically inside their boxes (so they look
       right inside their tap targets); the logo image sits flush at
       the top of its wrapper so the logo itself starts at 14px. */
    .menu-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
    .menu-close,
    .menu-logo,
    .menu-book-btn {
        height: 30px;
        display: flex;
    }
    .menu-close { justify-self: start; justify-content: flex-start; align-items: flex-start; width: 95px; }
    .menu-logo { justify-self: center; justify-content: center; align-items: center; flex: 0 0 auto; }
    .menu-book-btn { justify-self: end; justify-content: center; align-items: center; width: 95px; }
    .menu-close-x { display: inline-block; line-height: 1; }
    .menu-body { flex-direction: column; padding-top: var(--space-sm); }
    .menu-left { flex: none; width: 100%; }
    .menu-right { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; justify-content: flex-end; }
    .menu-preview { width: 100%; }
    .menu-num { top: var(--space-lg); }
    .menu-preview-tagline { font-size: var(--type-h2); text-align: right; }
    .menu-preview-image { width: 100%; aspect-ratio: 3/2; }
    .menu-link { font-size: var(--type-display); line-height: 1.3; letter-spacing: -0.3px; }
    .menu-nav { gap: 0; }
    .menu-book-btn { width: 95px; height: 30px; font-size: var(--type-eyebrow); letter-spacing: 0.8px; }
    .menu-close { width: 95px; font-size: var(--type-eyebrow); }
    .menu-close-x { font-size: var(--type-h3); }
    .menu-logo-img { height: 26px; margin-top: 0; }
    .menu-body { padding-top: var(--space-lg); }
    .menu-nav { gap: var(--space-xxs); }
    .menu-ig { margin-top: var(--space-sm); }

    /* Nav — 3-col grid so the centre slot is true page-centre regardless
       of hamburger / book-btn widths. align-items: start pins all three
       children to the grid row's top edge; hamburger bars sit at the top
       of the 44px tap target so the first bar shares a horizontal line
       with the top of the logo and the top of the BOOK NOW pill. */
    .top-nav { padding: 14px var(--space-sm); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
    /* All three items share the BOOK NOW pill's optical centre —
       hamburger bars centred inside its 30px box, logo image centred
       in the 30px row, pill itself fills the row. */
    .nav-hamburger { justify-self: start; justify-content: center; width: 95px; height: 30px; min-height: 0; margin-top: 0; }
    .nav-logo { justify-self: center; }
    .nav-book-btn { justify-self: end; width: 95px; height: 30px; font-size: var(--type-eyebrow); letter-spacing: 0.8px; }
    .nav-logo-full { height: 26px; }
    .nav-logo-icon { height: 24px; }

    /* Hero */
    .hero-tagline { padding: 0 var(--space-sm); }
    .hero-nav {
        left: var(--space-sm);
        width: calc(100% - 32px);
        bottom: var(--space-sm);
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: var(--space-xs);
    }
    .hero-nav-item { width: auto; flex: none; }
    .hero-nav-num { font-size: var(--type-sub); }
    .hero-nav-label { font-size: var(--type-h3); }
    .hero-nav-palm-inline { height: 16px; }

    /* Intro */
    .intro { padding: var(--space-xl) var(--space-sm); }
    .intro-headline { font-size: var(--type-display); margin-bottom: var(--space-md); }
    .intro-body { font-size: var(--type-body); margin-bottom: var(--space-md); max-width: 100%; }
    .intro-image { margin-top: var(--space-md); }

    /* Celebrate — side padding matches other sections (var(--space-sm))
       so the heading + body align with stay / explore / book on mobile */
    .celebrate-header { padding: var(--space-lg) var(--space-sm) var(--space-sm); gap: var(--space-md); }
    .celebrate-gallery { padding: 0 var(--space-sm) var(--space-lg); }
    .celebrate-title { font-size: var(--type-h1); }
    .celebrate-body { font-size: var(--type-body); }

    /* Stay */
    .stay { padding: var(--space-xl) var(--space-sm); }
    .stay-inner { gap: var(--space-md); }
    .stay-title { font-size: var(--type-h1); }
    .stay-body { font-size: var(--type-body); }

    /* Explore */
    .explore { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
    .explore-title { font-size: var(--type-h1); width: 100%; text-align: left; }
    .explore-content { align-items: flex-start; }
    .explore-image { width: 100%; aspect-ratio: 3/2; }
    .explore-bottom { width: 100%; }
    .explore-body { font-size: var(--type-body); }
    .explore .btn-outline-dark { padding: 0 var(--space-sm); }

    /* Testimonial — generous top + bottom padding so the quote feels like
       its own editorial moment, not crammed between adjacent sections. */
    .testimonial { padding: var(--space-3xl) var(--space-sm); }
    .testimonial-quote { width: 100%; }
    .testimonial-quote p { font-size: var(--type-h3); line-height: 1.6; }
    .quote-mark { font-size: var(--type-h2); vertical-align: -4px; }
    .testimonial-cite { font-size: var(--type-meta); }

    /* Book CTA */
    .book-cta { padding: var(--space-sm) var(--space-sm); }
    .book-cta-inner { height: 50vh; }
    .book-cta-headline { line-height: 1.3; }
    .book-cta-content { padding: 0 var(--space-sm); }
    .book-cta-content .btn-outline-light { margin-top: var(--space-md); }
    .btn-outline-light { width: 160px; height: 36px; font-size: var(--type-eyebrow); }

    /* Footer */
    .site-footer { padding: var(--space-lg) var(--space-sm) var(--space-md); }
    .footer-upper { gap: var(--space-md); }
    .footer-nav a { font-size: var(--type-sub); gap: var(--space-xxs); }
    .footer-info-label { font-size: var(--type-meta); }
    .footer-info-text { font-size: var(--type-meta); }
    .footer-map-link { font-size: var(--type-meta); }
    .footer-divider { margin: var(--space-md) 0 var(--space-sm); }
    .footer-lower { gap: var(--space-md); }
    .footer-wordmark-logo { width: 160px; }
    .footer-copyright, .footer-credit, .footer-legal a { font-size: var(--type-eyebrow); }

    /* Buttons */
    .btn-outline-dark { width: 160px; height: 36px; font-size: var(--type-eyebrow); }

    /* Disable parallax on mobile for performance */
    .book-cta-image { height: 100%; will-change: auto; }

    /* Book page */
    .book-pillars { padding: var(--space-xl) var(--space-sm); }
    .book-pillar-title { font-size: var(--type-sub); }
    .book-pillar-body { font-size: var(--type-body); }
    .book-widget { padding: var(--space-xl) var(--space-sm) var(--space-md); }
    .book-faq { padding: var(--space-xl) var(--space-sm); }
    .book-faq-heading { font-size: var(--type-h2); margin-bottom: var(--space-md); }
    .book-faq-question { font-size: var(--type-sub); padding: var(--space-sm) 0; }
    .book-faq-answer p { font-size: var(--type-body); }
    .book-contact { padding: var(--space-xl) var(--space-sm); }
    /* Mobile: strip the cream-on-cream box chrome — too many container
       outlines on a narrow viewport. Cards become flat editorial blocks
       separated by a single hairline, matching the rest of the site. */
    .book-contact-card { background: transparent; padding: 0; }
    .book-contact-card + .book-contact-card {
        margin-top: var(--space-lg);
        padding-top: var(--space-lg);
        border-top: 1px solid rgba(23, 58, 46, 0.15);
    }
    .book-contact-body { font-size: var(--type-body); }
    .book-contact-buttons { flex-direction: column; }
    .book-contact-buttons .btn-outline-dark { width: 100%; height: 44px; }
}


/* ============================================
   STAY PAGE — Introducing Section
   ============================================ */

.stay-intro {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding: var(--space-3xl) var(--space-xl);
    background: var(--cream-bg);
    min-height: 80vh;
    align-items: start;
}

.stay-intro-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-right: var(--space-lg);
}

.stay-intro-heading {
    font-family: var(--font-heading);
    font-size: var(--type-display);
    font-weight: 400;
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--emerald);
}

.stay-intro-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: var(--lh-body);
    color: var(--palm-shadow);
    max-width: 340px;
    margin-top: auto;
    margin-bottom: var(--space-md);
}

.stay-intro-centre {
    display: flex;
    justify-content: flex-end;
    height: 100%;
    overflow: visible;
    margin-right: -80px;
    position: relative;
    z-index: 2;
}

.stay-intro-img {
    width: 100%;
    max-width: 580px;
    max-height: 80vh;
    aspect-ratio: 222/317;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 2;
}

.stay-intro-right {
    display: flex;
    align-items: flex-start;
    padding-top: var(--space-xl);
    padding-left: 0;
}

.stay-features {
    list-style: none;
    width: 100%;
}

.stay-features li {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--palm-shadow);
    text-align: right;
    padding: var(--space-sm) 0;
    position: relative;
    overflow: hidden;
}

/* Animated lines — bottom */
.stay-features li::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 1px;
    background: rgba(23, 58, 46, 0.15);
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animated line — top of first item */
.stay-features li:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 1px;
    background: rgba(23, 58, 46, 0.15);
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Text reveal */
.stay-features li span {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Animate in when visible */
.stay-features.is-visible li::after {
    width: 100%;
}

.stay-features.is-visible li:first-child::before {
    width: 100%;
}

.stay-features.is-visible li span {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.stay-features.is-visible li:nth-child(1)::before { transition-delay: 0s; }
.stay-features.is-visible li:nth-child(1)::after { transition-delay: 0.1s; }
.stay-features.is-visible li:nth-child(1) span { transition-delay: 0.15s; }

.stay-features.is-visible li:nth-child(2)::after { transition-delay: 0.25s; }
.stay-features.is-visible li:nth-child(2) span { transition-delay: 0.3s; }

.stay-features.is-visible li:nth-child(3)::after { transition-delay: 0.4s; }
.stay-features.is-visible li:nth-child(3) span { transition-delay: 0.45s; }

.stay-features.is-visible li:nth-child(4)::after { transition-delay: 0.55s; }
.stay-features.is-visible li:nth-child(4) span { transition-delay: 0.6s; }

.stay-features.is-visible li:nth-child(5)::after { transition-delay: 0.7s; }
.stay-features.is-visible li:nth-child(5) span { transition-delay: 0.75s; }

.stay-features.is-visible li:nth-child(6)::after { transition-delay: 0.85s; }
.stay-features.is-visible li:nth-child(6) span { transition-delay: 0.9s; }

/* Stay intro responsive */
@media (max-width: 1024px) {
    .stay-intro { padding: var(--space-xl) var(--space-sm); }
    .stay-intro-heading { font-size: var(--type-display); }
    .stay-intro-right { padding-top: 0; }
}

@media (max-width: 768px) {
    .stay-intro {
        grid-template-columns: 1fr;
        padding: var(--space-xl) var(--space-md);
        gap: var(--space-lg);
        min-height: auto;
    }
    /* Restore the controlled 3-line break for "Introducing / Villa Zambala /
       Canggu" so it doesn't wrap into 4 lines at 320–360px. */
    .stay-intro-heading { font-size: clamp(30px, 6vw + 12px, 44px); white-space: normal; margin-bottom: var(--space-lg); }
    .stay-intro-heading br { display: inline; }
    .stay-intro-heading br + * { margin-left: 0; }
    /* Preserve the deliberate "You bring the people. / We'll do the rest." break */
    .stay-book-cta-heading br { display: inline; }
    .stay-book-cta-heading br + * { margin-left: 0; }
    .stay-intro-left { padding-right: 0; justify-content: flex-start; }
    .stay-intro-centre { margin-right: 0; }
    .stay-intro-body { font-size: var(--type-body); max-width: 100%; }
    .stay-intro-img { max-width: 100%; height: auto; aspect-ratio: 3/4; }
    .stay-intro-right { padding-top: 0; }
    .stay-features li { text-align: left; }
    /* Mobile: animated underline should draw in the reading direction */
    .stay-features li::after,
    .stay-features li:first-child::before { right: auto; left: 0; }
}


/* ============================================
   STAY PAGE — The Main House
   ============================================ */

.stay-mainhouse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    padding: var(--space-3xl) var(--space-xl);
    background: var(--cream-bg);
    align-items: center;
}

.mainhouse-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.mainhouse-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h1);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    color: var(--emerald);
    margin-bottom: var(--space-md);
}

.mainhouse-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: var(--lh-body);
    color: var(--palm-shadow);
    max-width: 540px;
}

/* Main House responsive */
@media (max-width: 768px) {
    .stay-mainhouse {
        grid-template-columns: 1fr;
        padding: var(--space-xl) var(--space-md);
        gap: var(--space-md);
    }
    .mainhouse-heading { font-size: var(--type-h1); }
    .mainhouse-image img { height: 350px; }
}


.stay-divider {
    border: none;
    border-top: 1px solid rgba(23, 58, 46, 0.12);
    margin: 0 var(--space-xl);
    background: var(--cream-bg);
}

/* ============================================
   STAY PAGE — Main House Suites
   ============================================ */

.stay-suites {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-xl);
    padding: var(--space-2xl) var(--space-xl);
    background: var(--cream-bg);
    align-items: start;
}

/* Text columns align to top of image */
.suites-left,
.living-right,
.pool-gardens-left,
.suites-text-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: start;
}

.suites-label {
    font-family: 'Larken', Georgia, serif;
    font-size: var(--type-sub);
    font-weight: 400;
    line-height: 2.06;
    color: var(--emerald);
    display: block;
    margin-bottom: var(--space-xs);
    letter-spacing: 0;
    text-transform: none;
}

.suites-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color: var(--emerald);
    margin-bottom: var(--space-sm);
}

.suites-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: var(--lh-body);
    color: var(--palm-shadow);
    margin-bottom: var(--space-md);
}

.suites-nav {
    display: flex;
    flex-direction: column;
}

.suite-tab, .living-tab, .pool-tab {
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 400;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--palm-shadow);
    background: none;
    border: none;
    border-top: 1px solid rgba(23, 58, 46, 0.15);
    padding: var(--space-sm) 0;
    text-align: left;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.suite-tab:last-child, .living-tab:last-child, .pool-tab:last-child {
    border-bottom: 1px solid rgba(23, 58, 46, 0.15);
}

.suite-tab.active, .living-tab.active, .pool-tab.active {
    opacity: 1;
    font-weight: 400;
}

.suite-tab:hover, .living-tab:hover, .pool-tab:hover {
    opacity: 0.8;
}

/* Suite carousel */
.suites-right {
    position: relative;
}

.suite-carousel {
    display: none;
}

.suite-carousel.active {
    display: block;
}

.suite-slides {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    max-height: 70vh;
    overflow: hidden;
    cursor: pointer;
}

.suite-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.suite-arrow:hover {
    opacity: 1;
}

.suite-arrow svg {
    width: 14px;
    height: 14px;
}

.suite-arrow--prev {
    left: 10px;
}

.suite-arrow--next {
    right: 10px;
}

/* Mobile: keep arrows as a discoverability backup for swipe, slightly
   larger tap target than desktop but tighter than the iOS 44pt rule. */
@media (max-width: 768px) {
    .suite-arrow {
        width: 38px;
        height: 38px;
        background: rgba(0, 0, 0, 0.18);
        opacity: 0.9;
    }
    .suite-arrow svg { width: 16px; height: 16px; }
}

.suite-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s var(--ease-drift);
}

.suite-slide.active {
    opacity: 1;
}

.suite-slide[src*="gym"] {
    object-position: center 65%;
}

.suite-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
}

.suite-name {
    font-family: 'Larken', Georgia, serif;
    font-size: var(--type-sub);
    font-weight: 400;
    line-height: 2.06;
    color: var(--palm-shadow);
}

.suite-dots {
    display: flex;
    gap: var(--space-xs);
}

.suite-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid var(--emerald);
    background: transparent;
    cursor: pointer;
    transition: background 0.3s ease;
}

.suite-dot.active {
    background: var(--emerald);
}

.suite-features {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    color: var(--palm-shadow);
}

/* Suites responsive */
@media (max-width: 1024px) {
    .stay-suites {
        grid-template-columns: 220px 1fr;
        gap: var(--space-lg);
        padding: var(--space-xl) var(--space-lg);
    }
    .suites-heading { font-size: var(--type-h2); }
}

@media (max-width: 768px) {
    .stay-suites {
        grid-template-columns: 1fr;
        padding: var(--space-xl) var(--space-md);
        gap: var(--space-md);
    }
    .suites-heading { font-size: var(--type-h2); }
    .suite-info { flex-wrap: wrap; gap: var(--space-xs); }
}


/* ============================================
   STAY PAGE — Interactive Floorplan
   ============================================ */

.stay-floorplan {
    background: var(--cream-bg);
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.floorplan-tabs {
    display: flex;
    margin-top: 0;
}

.floorplan-tab {
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    font-weight: 400;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--palm-shadow);
    background: transparent;
    border: 1px solid var(--emerald);
    padding: var(--space-sm) var(--space-lg);
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.floorplan-tab:first-child {
    border-right: none;
}

.floorplan-tab:hover {
    background: var(--emerald);
    color: var(--cream-bg);
}

/* Floorplan lightbox */
.floorplan-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    padding: var(--space-lg);
}

.floorplan-lightbox.open {
    opacity: 1;
    pointer-events: all;
}

.floorplan-lightbox-img {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
}

.floorplan-lightbox-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-md);
    background: none;
    border: none;
    color: var(--cream);
    font-size: var(--type-h3);
    font-weight: 300;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    line-height: var(--lh-flush);
}

.floorplan-lightbox-close:hover {
    opacity: 1;
}

/* Floorplan responsive */
@media (max-width: 768px) {
    .stay-floorplan { padding: var(--space-sm) var(--space-md); }
}


/* ============================================
   STAY PAGE — Main House: Living
   ============================================ */

.stay-living {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-xl);
    padding: var(--space-2xl) var(--space-xl);
    background: var(--cream-bg);
    align-items: start;
}

.living-left {
    position: relative;
}

.living-carousel {
    display: none;
}

.living-carousel.active {
    display: block;
}

.living-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    padding-top: var(--space-sm);
}

.living-right {
    padding-top: var(--space-sm);
}

.living-nav {
    display: flex;
    flex-direction: column;
}

/* living-tab styles consolidated above with suite-tab */

/* Living responsive */
@media (max-width: 768px) {
    .stay-living {
        grid-template-columns: 1fr;
        padding: var(--space-xl) var(--space-md);
        gap: var(--space-md);
    }
    .living-right { order: -1; }
}

/* ============================================
   STAY PAGE — Pool & Gardens
   ============================================ */

.pool-gardens-section {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-xl);
    padding: var(--space-2xl) var(--space-xl);
    background: var(--cream);
    align-items: start;
}

.pool-gardens-left {
    padding-top: var(--space-sm);
}

.pool-gardens-right {
    position: relative;
}

.pool-carousel {
    display: none;
}

.pool-carousel.active {
    display: block;
}

.pool-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    padding-top: var(--space-sm);
}

.pool-nav {
    display: flex;
    flex-direction: column;
}

/* pool-tab styles consolidated above with suite-tab */

/* Pool responsive */
@media (max-width: 768px) {
    .pool-gardens-section {
        grid-template-columns: 1fr;
        padding: var(--space-xl) var(--space-md);
        gap: var(--space-md);
    }
    .pool-gardens-left { order: -1; }
}

/* Section divider */
.section-divider {
    border: none;
    border-top: 1px solid rgba(23, 58, 46, 0.15);
    margin: 0 var(--space-xl);
}

/* Poolside Rooms */
.poolside-rooms {
    background: var(--cream);
    grid-template-columns: 280px 1fr;
}

@media (max-width: 768px) {
    .poolside-rooms { grid-template-columns: 1fr; }
}

/* ============================================
   STAY PAGE — Make it Your Own
   ============================================ */

.make-your-own {
    display: flex;
    justify-content: center;
    align-items: center;  /* vertically centre the text against the image */
    gap: var(--space-2xl);
    padding: var(--space-2xl) var(--space-xl);
    background: var(--cream-bg);
}

.make-your-own-image {
    flex: 0 1 50%;
    max-width: 640px;
    aspect-ratio: 4/5;
    overflow: hidden;
}

.make-your-own-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.make-your-own-text {
    flex: 0 1 480px;
    padding-top: var(--space-sm);
}

.extras-list {
    list-style: none;
    padding: 0;
    margin-top: var(--space-md);
}

.extras-list li {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    padding: var(--space-xs) 0;
    border-top: 1px solid rgba(23, 58, 46, 0.15);
}

.extras-list li:last-child {
    border-bottom: 1px solid rgba(23, 58, 46, 0.15);
}

@media (max-width: 768px) {
    .make-your-own {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-md) var(--space-md) var(--space-xl);
        gap: var(--space-md);
    }
    .make-your-own-image { flex: none; max-width: 100%; width: 100%; }
    .make-your-own-text { flex: none; max-width: 100%; width: 100%; padding-top: 0; }
}

/* ============================================
   STAY PAGE — Book CTA
   ============================================ */

.stay-book-cta {
    padding: var(--space-lg) var(--space-lg);
    background: var(--cream-bg);
}

.stay-book-cta-inner {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stay-book-cta .book-cta-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stay-book-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

.stay-book-cta-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-align: center;
    padding: 0 var(--space-xl);
}

.stay-book-cta-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    color: var(--cream);
    line-height: var(--lh-snug);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 var(--space-xl);
}

.stay-book-cta-buttons {
    display: flex;
    gap: var(--space-md);
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, 0);
}

.stay-book-cta-buttons .btn-outline-light {
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--cream);
    border: 1px solid var(--cream);
    width: var(--btn-w-standard);
    height: var(--btn-h-standard);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.stay-book-cta-buttons .btn-outline-light:hover {
    background: var(--cream);
    color: var(--emerald);
}

@media (max-width: 768px) {
    .stay-book-cta { padding: 0 var(--space-md) var(--space-sm); }
    .stay-book-cta-heading { font-size: var(--type-h2); position: static; transform: none; padding: 0; width: auto; }
    .stay-book-cta-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--space-md); }
    .stay-book-cta-buttons { position: static; transform: none; flex-direction: column; gap: var(--space-xs); align-items: center; margin-top: var(--space-md); }
    .stay-divider { margin: 0 var(--space-md); }
    .section-divider { margin: 0 var(--space-md); }
}

/* --- Stay page 480px --- */
@media (max-width: 480px) {
    /* Intro */
    .stay-intro { padding: var(--space-xl) var(--space-sm); gap: var(--space-md); }
    .stay-intro-heading { font-size: var(--type-display); margin-bottom: var(--space-md); }
    .stay-intro-body { font-size: var(--type-body); margin-bottom: var(--space-md); max-width: 100%; }
    .stay-intro-img { aspect-ratio: 3/4; height: auto; }
    .stay-features li { font-size: var(--type-meta); padding: var(--space-xs) 0; }

    /* Floorplan */
    .stay-floorplan { padding: var(--space-sm) var(--space-md); }
    .floorplan-tabs { width: 100%; gap: var(--space-xxs); }
    .floorplan-tab { flex: 1; padding: var(--space-md) var(--space-sm); min-height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; }
    /* Restore the right border on the first tab — desktop hides it because
       the two tabs share a border, but on mobile they have a gap. */
    .floorplan-tab:first-child { border-right: 1px solid var(--emerald); }

    /* Main House */
    .stay-mainhouse { padding: var(--space-xl) var(--space-sm); gap: var(--space-md); }
    .mainhouse-heading { font-size: var(--type-h1); }
    .mainhouse-body { font-size: var(--type-body); }
    .mainhouse-image img { height: auto; }

    /* Suites — fluid heading: scales with viewport so "Main House: Living"
       sits on one line at 360px+ and grows to 30px on larger phones. */
    .stay-suites { padding: var(--space-xl) var(--space-sm); gap: var(--space-md); }
    .suites-heading { font-size: clamp(24px, 7vw, 30px); }
    .suites-label { font-size: var(--type-sub); letter-spacing: 0; }
    .suites-body { font-size: var(--type-body); }
    .suite-tab, .living-tab, .pool-tab { font-size: var(--type-body); padding: var(--space-xs) 0; }
    .suite-name { font-size: var(--type-sub); }
    .suite-features { font-size: var(--type-meta); }

    /* Living */
    .stay-living { padding: var(--space-xl) var(--space-sm); gap: var(--space-md); }

    /* Pool & Gardens */
    .pool-gardens-section { padding: var(--space-xl) var(--space-sm); gap: var(--space-md); }

    /* Poolside Rooms */
    .poolside-rooms { padding: var(--space-xl) var(--space-sm); }

    /* Make it Your Own — side padding matches other mobile sections
       (var(--space-sm)) so image + body copy align with the page gutter */
    .make-your-own { padding: var(--space-sm) var(--space-sm) var(--space-lg); gap: var(--space-md); }
    .extras-list li { font-size: var(--type-body); }

    /* Book CTA */
    .stay-book-cta { padding: 0 var(--space-sm) var(--space-sm); }
    .stay-book-cta-inner { height: 50vh; }
    .stay-book-cta-heading { font-size: var(--type-h2); line-height: 1.3; }
    .stay-book-cta-content { padding: 0 var(--space-sm); }
    .stay-book-cta-buttons .btn-outline-light { width: 160px; height: 34px; font-size: var(--type-eyebrow); }

    /* Dividers */
    .stay-divider { margin: 0 var(--space-md); }
    .section-divider { margin: 0 var(--space-md); }
}

/* ============================================
   CELEBRATE PAGE
   ============================================ */

/* ============================================
   CELEBRATE PAGE — Photo Gallery Masonry
   ============================================ */

.page-celebrate .celebrate-gallery {
    padding: var(--space-lg) var(--space-3xl) var(--space-3xl);
    background: var(--cream-bg);
}

.celebrate-masonry {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-md);
    max-width: 1100px;
    margin: 0 auto;  /* centralise the masonry gallery on the page */
}

.masonry-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.masonry-col-left {
    padding-top: var(--space-3xl);
}

.masonry-col-left .masonry-row {
    margin-left: 0;
}

.masonry-col-right {
    padding-top: 0;
    align-items: flex-start;
}

.masonry-col-right .masonry-short {
    margin-right: var(--space-xl);
}


.masonry-item {
    overflow: hidden;
}

.masonry-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transform: scale(1.08);
    will-change: transform;
}

/* Mobile: the desktop scale(1.08) crops 8% of every gallery image for
   no payoff (no hover state on touch). Reset. */
@media (max-width: 768px) {
    .masonry-item img { transform: none; }
}

.masonry-item img[src*="celebrate-food"] {
    max-width: 350px;
}

.masonry-item img[src*="celebrate-tablescape"] {
    max-width: 550px;
}

.masonry-item img[src*="celebrate-laughing"] {
    max-width: 650px;
    margin-left: auto;
}

.masonry-row {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-md);
}

.celebrate-whats-possible {
    font-family: var(--font-heading);
    font-size: var(--type-h1);
    font-weight: 400;
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--emerald);
    margin-top: var(--space-sm);
}

/* Celebrate responsive */
@media (max-width: 1024px) {
    .celebrate-intro-heading { font-size: var(--type-h1); }
    .celebrate-whats-possible { font-size: var(--type-h1); }
}

@media (max-width: 768px) {
    .celebrate-intro { padding: var(--space-xl) var(--space-sm) var(--space-xl); }
    .celebrate-intro-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .celebrate-intro-heading { font-size: var(--type-h1); }
    section.celebrate-gallery { padding: var(--space-sm) var(--space-sm) var(--space-xl); }

    /* Mosaic — staggered two-column flex layout. Tight 8px gaps + no
       left-column stagger so the rows sit closer and feel like a single
       composed grid rather than two disjointed columns. */
    .celebrate-masonry { display: flex; gap: 8px; align-items: flex-start; }
    .masonry-col { display: flex; flex-direction: column; gap: 8px; flex: 1; }
    .masonry-col-left { padding-top: 0; }
    .masonry-col-right { padding-top: 0; }
    .masonry-col-right .masonry-short { margin-right: 0; }
    .masonry-row { display: flex; gap: 8px; }
    .masonry-row .masonry-item { flex: 1; }
    /* Masonry items are also .reveal-image, which has 40px margin-bottom
       baked in. Cancel it on mobile so the 8px column gap fully controls
       vertical rhythm. */
    .masonry-item.reveal-image { margin-bottom: 0; }
    .masonry-item img { width: 100%; max-width: 100% !important; margin-left: 0 !important; height: auto; object-fit: cover; }
    .celebrate-whats-possible { display: none; }
}

@media (max-width: 480px) {
    .celebrate-intro-heading { font-size: var(--type-h1); }
    .masonry-col-left { padding-top: var(--space-lg); }
}

/* ============================================
   CELEBRATE PAGE — Event Sections
   ============================================ */

.event-section {
    padding: var(--space-2xl) var(--space-xl);
    background: var(--cream-bg);
}

.event-grid {
    display: grid;
    grid-template-columns: 640px 1fr;  /* image at 640px wide (matching home intro), text on the right */
    gap: var(--space-2xl);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

.event-grid .event-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.event-image {
    position: relative;
    z-index: 1;
    max-width: 640px;
    aspect-ratio: 4/5;
    overflow: hidden;
    justify-self: center;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Celebrations image bleeds 120px into the Weddings section */
.event-section--celebrations {
    position: relative;
    z-index: 3;
    padding-bottom: 0;
}

.event-section--celebrations .event-image {
    position: relative;
    z-index: 3;
    margin-bottom: -120px;
    display: flex;
    justify-content: flex-end;
}

.event-section--celebrations .event-image img {
    max-width: none;
}

.event-section--flipped {
    background: var(--cream);
    margin-top: 0;
    padding: 280px var(--space-xl);
    position: relative;
    z-index: 1;
}

.event-section--flipped .event-grid {
    grid-template-columns: 1fr 640px;  /* text on left, image on right — same 640px image */
    align-items: center;
}

.event-section--flipped .event-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color: var(--emerald);
    margin-bottom: var(--space-sm);
}

.event-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--palm-shadow);
    max-width: 440px;
    margin-bottom: var(--space-md);
}

/* Flipped layout — text left, image right */
.event-section--flipped .event-grid {
    direction: ltr;
}

/* Divider — hidden, images cross this boundary */
.event-divider {
    display: none;
}

/* Stacked layout — centred image bleeds up into Weddings section */
.event-section--stacked {
    padding: 0 var(--space-xl) var(--space-2xl);
    margin-top: -120px;
    /* First 120px matches Weddings background so the image blends in seamlessly */
    background: linear-gradient(to bottom, var(--cream) 120px, var(--cream-bg) 120px);
    position: relative;
    z-index: 2;
}

.event-stacked {
    max-width: 640px;  /* matches the home intro image width */
    margin: 0 auto;
}

.event-stacked .event-text {
    margin-top: var(--space-lg);
}

/* ============================================
   CELEBRATE: THREE PILLARS
   ============================================ */
.celebrate-pillars {
    padding: var(--space-3xl) var(--space-xl);
    background: var(--cream);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
}

.pillar-image img {
    width: 100%;
    aspect-ratio: 4/5;
    max-height: 540px;
    object-fit: cover;
    display: block;
}

.pillar-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color: var(--emerald);
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

.pillar-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--palm-shadow);
}

/* Responsive */
@media (max-width: 768px) {
    .event-section { padding: var(--space-lg) var(--space-sm); }
    .event-grid { grid-template-columns: 1fr; gap: var(--space-xs); }
    .event-heading { font-size: var(--type-h2); margin-bottom: var(--space-xxs); }
    /* Image container inherits 4/5 portrait aspect from desktop, but the
       <img> inside is overridden to 3/2 landscape on mobile. Drop the
       container's aspect so it matches the image height, killing the
       phantom empty space below. */
    .event-image { aspect-ratio: auto; max-width: 100%; }
    .event-section--celebrations { padding: var(--space-xl) var(--space-sm); }
    /* Match Weddings/Retreats: keep the default .reveal-image margin-bottom
       (var(--space-lg) = 40px) so image-to-text gap is identical across all
       three event sections. The desktop -120px bleed effect is overridden. */
    .event-section--celebrations .event-image { margin-bottom: var(--space-lg); }
    .event-section--celebrations .event-image img { max-width: 100%; }
    .event-image img { aspect-ratio: 3/2; max-height: 45vh; width: 100%; }
    .event-section--flipped .event-image img { aspect-ratio: 3/2; max-height: 45vh; }
    .event-stacked .event-image img { aspect-ratio: 3/2; max-height: 45vh; }
    .event-stacked { max-width: 100%; }
    .pillar-image img { aspect-ratio: 2/1; max-height: 200px; }
    .event-section--flipped { padding: var(--space-xl) var(--space-sm); }
    .event-section--flipped .event-grid { grid-template-columns: 1fr; }
    .event-section--flipped .event-image { order: -1; }
    .event-section--flipped .event-text { justify-content: flex-start; }
    .event-section--stacked { padding: var(--space-xl) var(--space-sm); margin-top: 0; background: var(--cream-bg); }
    .celebrate-pillars { padding: var(--space-xl) var(--space-sm); }
    .pillars-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

@media (max-width: 480px) {
    .event-heading { font-size: var(--type-h2); }
    .event-body { font-size: var(--type-body); }
    .event-section { padding: var(--space-xl) var(--space-sm); }
    .event-section--flipped { padding: var(--space-xl) var(--space-sm); }
    .event-section--stacked { padding: var(--space-xl) var(--space-sm); }
    .celebrate-pillars { padding: var(--space-xl) var(--space-sm); }
    .pillars-grid { gap: var(--space-lg); }
    .pillar-heading { font-size: var(--type-h2); }
    .pillar-body { font-size: var(--type-body); }
}

/* ============================================
   A DAY AT ZAMBALA
   ============================================ */
.day-section {
    background: var(--cream);
    padding: var(--space-2xl) var(--space-xl);
}

.day-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
    align-items: end;
}

.day-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    font-weight: normal;
    color: var(--emerald);
    margin-bottom: var(--space-xs);
}

.day-subline {
    font-family: var(--font-subheading);
    font-size: var(--type-h3);
    color: var(--emerald);
    opacity: 0.7;
    margin-bottom: var(--space-lg);
    line-height: var(--lh-sub);
}

.day-timeline {
    position: relative;
    padding-left: var(--space-md);
}

.day-timeline::before {
    content: '';
    position: absolute;
    left: var(--space-xxs);
    top: var(--space-xs);
    bottom: var(--space-xs);
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(23, 58, 46, 0.2) 15%, rgba(23, 58, 46, 0.2) 85%, transparent);
}

.day-item {
    position: relative;
    margin-bottom: var(--space-md);
}

.day-item:last-child {
    margin-bottom: 0;
}

.day-dot {
    position: absolute;
    left: -24px;
    top: var(--space-sm);
    width: 8px;
    height: 8px;
    background: var(--emerald);
    border-radius: 50%;
}

.day-time {
    font-family: var(--font-heading);
    font-size: var(--type-h3);
    font-weight: normal;
    color: var(--emerald);
    margin-bottom: var(--space-xs);
}

.day-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    opacity: 0.7;
    max-width: 380px;
}

.day-closing {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    margin-top: var(--space-lg);
    max-width: 400px;
}

.day-left {
    display: flex;
    flex-direction: column;
}

.day-right {
    display: flex;
    align-items: stretch;
}

.day-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   GETTING THERE
   ============================================ */
.getting-there {
    background: var(--cream-bg);
    padding: var(--space-2xl) var(--space-xl);
}

.getting-there-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.getting-there-image {
    width: 100%;
    height: auto;
    display: block;
}

.getting-there-map {
    width: 100%;
    height: 480px;
    border-radius: 2px;
    overflow: hidden;
}

/* Brand-shift the Google Maps embed so its default blue/grey reads as
   warm cream + muted emerald. Blunt filter approach (no API key needed). */
.getting-there-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: hue-rotate(40deg) saturate(0.6) sepia(0.18) contrast(0.95);
}

.map-placeholder {
    width: 100%;
    height: 100%;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.map-placeholder-icon {
    width: 48px;
    height: auto;
    opacity: 0.35;
}

.map-placeholder-text {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--emerald);
    opacity: 0.5;
}

.getting-there-heading {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
    font-weight: normal;
    color: var(--emerald);
    margin-bottom: var(--space-lg);
}

.getting-there-block {
    margin-bottom: var(--space-md);
}

.getting-there-label {
    font-family: var(--font-subheading);
    font-size: var(--type-sub);
    font-weight: 300;
    color: var(--emerald);
    margin-bottom: var(--space-xs);
}

.getting-there-body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--palm-shadow);
    line-height: var(--lh-body);
    opacity: 0.7;
}

/* --- Responsive: Day + Getting There --- */
@media screen and (max-width: 1024px) {
    .day-inner { gap: var(--space-lg); }
    .day-heading { font-size: var(--type-h2); }
    .day-time { font-size: var(--type-h3); }
    .getting-there-inner { gap: var(--space-lg); }
    .getting-there-heading { font-size: var(--type-h2); }
}

@media screen and (max-width: 768px) {
    .day-section { padding: var(--space-xl) var(--space-sm); }
    .day-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
    .day-right { position: static; }
    .day-heading { font-size: var(--type-h2); }
    .day-subline { font-size: var(--type-h3); margin-bottom: var(--space-md); }
    .getting-there { padding: var(--space-xl) var(--space-sm); }
    .getting-there-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
    .getting-there-heading { font-size: var(--type-h2); }
    .getting-there-map { height: 350px; }
}

@media screen and (max-width: 480px) {
    .day-section { padding: var(--space-xl) var(--space-sm); }
    .day-heading { font-size: var(--type-h2); }
    .day-subline { font-size: var(--type-h3); margin-bottom: var(--space-md); }
    .day-time { font-size: var(--type-h3); }
    .day-body { font-size: var(--type-body); }
    .day-closing { font-size: var(--type-body); }
    .getting-there { padding: var(--space-xl) var(--space-sm); }
    .getting-there-heading { font-size: var(--type-h2); }
    .getting-there-body { font-size: var(--type-body); }
    .getting-there-label { font-size: var(--type-sub); }
    .getting-there-block { margin-bottom: var(--space-sm); }
    .getting-there-map { height: 360px; }
}

/* ============================================
   STICKY MOBILE BOOK BAR
   ============================================ */
.sticky-book-bar {
    display: none;
}

@media screen and (max-width: 768px) {
    .sticky-book-bar {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        padding: 0 var(--space-sm) var(--space-xs);
        transform: translateY(100%);
        transition: transform 0.4s ease;
    }

    .sticky-book-bar.visible {
        transform: translateY(0);
    }

    .menu-overlay.open ~ .sticky-book-bar,
    .menu-overlay.open + main + .sticky-book-bar {
        transform: translateY(100%) !important;
    }

    .nav-book-btn.nav-book-hidden {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .nav-book-btn.nav-book-hidden {
        width: 0;
        overflow: hidden;
        border: none;
        padding: 0;
        margin: 0;
        transition: opacity 0.3s ease, width 0.3s ease;
    }

    .nav-book-btn.nav-book-hidden ~ .nav-logo .nav-logo-icon {
        left: 0;
        transform: translateX(0);
    }

    .sticky-book-bar a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 48px;
        background: var(--emerald);
        color: var(--cream);
        text-decoration: none;
        font-family: 'Nunito', sans-serif;
        font-size: var(--type-meta);
        letter-spacing: var(--ls-eyebrow);
        text-transform: uppercase;
        border-radius: 0;
    }

    /* Add bottom padding to footer so legal links aren't hidden behind the
       sticky BOOK NOW bar (48px tall + 8px padding = 56px total). */
    footer {
        padding-bottom: 96px !important;
    }
}

/* ============================================
   HOVER GATE — Touch Device Safety
   Prevents sticky hover states on touch devices.
   All decorative hover effects gated behind
   @media (hover: hover).
   ============================================ */
@media (hover: none) {
    .nav-book-btn:hover,
    .top-nav.nav-dark .nav-book-btn:hover { background: transparent; color: inherit; }
    .menu-book-btn:hover { background: transparent; color: inherit; }
    .menu-close:hover { opacity: 1; }
    .menu-overlay.open .menu-nav:hover .menu-link { opacity: 1; }
    .menu-overlay.open .menu-nav:hover .menu-link:hover { opacity: 1; }
    .menu-ig:hover { opacity: 1; }
    .hero-nav-item:hover::after { width: 0; }
    .btn-outline-dark:hover { background: transparent; color: var(--emerald); }
    .btn-outline-light:hover { background: transparent; color: var(--cream); }
    .btn-solid-dark:hover { background: var(--emerald); color: var(--cream-bg); }
    .stack-card:hover img { transform: none; }
    .footer-nav a:hover { opacity: 1; }
    .footer-social:hover { opacity: 1; }
    .footer-credit a:hover { opacity: 0.7; }
    .footer-legal a:hover { opacity: 0.6; }
    .book-faq-answer a:hover { opacity: 1; }
    .book-faq-question:hover { opacity: 1; }
    .suite-tab:hover, .living-tab:hover, .pool-tab:hover { opacity: 0.6; }
    .suite-arrow:hover { opacity: 0.8; }
    .floorplan-tab:hover { background: transparent; color: var(--emerald); }
    .floorplan-lightbox-close:hover { opacity: 0.8; }
    .stay-book-cta-buttons .btn-outline-light:hover { background: transparent; color: var(--cream); }
}

/* ============================================
   REDUCED MOTION — Accessibility
   Disables all decorative animation for users
   who prefer reduced motion (vestibular disorders,
   motion sensitivity, seizure risk).
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    body {
        opacity: 1 !important;
        animation: none !important;
    }

    .hero-tagline,
    .hero-nav-item {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .reveal, .reveal-image {
        opacity: 1 !important;
        transform: none !important;
    }

    .split-reveal .word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .menu-overlay {
        transition: none !important;
        clip-path: none !important;
    }

    .menu-overlay.open {
        clip-path: none !important;
    }

    .menu-link {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================
   Cookie consent banner
   Slide-up from bottom on first visit.
   Respects --max-w container; collapses to stacked on mobile.
   ============================================ */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--cream);
    color: var(--palm-shadow);
    padding: var(--space-md) var(--gutter);
    box-shadow: 0 -2px 24px rgba(23, 39, 34, 0.12);
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.cookie-banner-visible { transform: translateY(0); }

.cookie-banner-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.cookie-banner-text { flex: 1; min-width: 0; }
.cookie-banner-title {
    font-family: var(--font-subheading);
    font-size: var(--type-body);
    color: var(--emerald);
    margin: 0 0 var(--space-xxs);
    letter-spacing: var(--ls-heading);
}
.cookie-banner-desc {
    font-family: var(--font-body);
    font-size: var(--type-meta);
    line-height: var(--lh-sub);
    color: var(--palm-shadow);
    margin: 0;
}
.cookie-banner-desc a { color: var(--emerald); text-decoration: underline; }

.cookie-banner-buttons { display: flex; gap: var(--space-sm); flex-shrink: 0; }

.cookie-btn {
    height: 36px;
    padding: 0 var(--space-md);
    border: 1px solid var(--emerald);
    border-radius: 200px;
    background: transparent;
    color: var(--emerald);
    font-family: var(--font-body);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, opacity 0.2s ease;
    white-space: nowrap;
}
.cookie-btn-primary { background: var(--emerald); color: var(--cream); }
.cookie-btn:hover { opacity: 0.88; }
.cookie-btn:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }

@media (max-width: 640px) {
    .cookie-banner { padding: var(--space-sm) var(--space-md); }
    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }
    .cookie-banner-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
    }
    .cookie-btn { width: 100%; padding: 0 var(--space-sm); }
}