/* Lock the site to its light brand palette and opt out of any
           OS / Android "force dark" auto-theming that would invert or
           recolor the carefully chosen espresso/cream aesthetic. */
        :root {
            color-scheme: only light;
        }

        html {
            forced-color-adjust: none;
        }

        /* Belt-and-braces: if a browser ignores the opt-out and tries to
           apply dark mode, pin the brand surface colors anyway. */
        @media (prefers-color-scheme: dark) {
            html, body {
                background-color: #F5F1EA; /* Cream */
                color: #3E322B;            /* Dark Brown */
            }
        }

        /* Base & Reset with premium palette and natural scrolling restored */
        body {
            background-color: #F5F1EA; /* Cream */
            color: #3E322B; /* Dark Brown */
            overflow-x: hidden;
            overflow-y: auto; /* Ensures natural system mousewheel is always active */
            -webkit-overflow-scrolling: touch;
        }

        ::selection {
            background-color: #D6C2A8; /* Warm Sand */
            color: #3E322B; /* Dark Brown */
        }

        /* High-End Reveal Animations */
        .reveal-clip {
            clip-path: inset(100% 0 0 0);
            transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-clip.is-revealed {
            clip-path: inset(0 0 0 0);
        }

        .reveal-text {
            transform: translateY(40px);
            opacity: 0;
            transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-text.is-revealed {
            transform: translateY(0);
            opacity: 1;
        }

        .stagger-1 { transition-delay: 0.1s; }
        .stagger-2 { transition-delay: 0.2s; }
        .stagger-3 { transition-delay: 0.3s; }

        /* Custom Magnetic Button styled with Dark Brown and Cream */
        .btn-magnetic {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid #3E322B; /* Dark Brown */
            border-radius: 999px;
            padding: 0.75rem 2.25rem;
            transition: color 0.4s ease, border-color 0.4s ease;
            z-index: 1;
            color: #3E322B;
        }
        
        .btn-magnetic::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #3E322B; /* Dark Brown */
            transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: -1;
            border-radius: 50% 50% 0 0;
        }

        .btn-magnetic:hover {
            color: #F5F1EA; /* Cream */
            border-color: #3E322B;
        }

        .btn-magnetic:hover::before {
            top: 0;
            border-radius: 0;
        }

        /* Marquee Animation Styles */
        .marquee-container {
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            overflow: hidden;
            padding: 1rem 0;
        }

        .marquee-track {
            display: flex;
            width: max-content;
            animation: marquee 50s linear infinite;
        }

        .marquee-track:hover {
            animation-play-state: paused;
        }

        @keyframes marquee {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }

        /* Testimonial card optimization */
        .review-card {
            width: 80vw;
            max-width: 360px;
            margin: 0 0.75rem;
            flex-shrink: 0;
        }

        /* Custom Styling for the Interactive Amenities Section */
        .amenity-row {
            border-bottom: 1px solid rgba(245, 241, 234, 0.15); /* Tinted cream border */
            transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            -webkit-tap-highlight-color: transparent; /* no glow flash on tap/click */
            outline: none;
        }
        .amenity-row:focus,
        .amenity-row:focus-visible,
        .amenity-row:active {
            outline: none;
            background-color: transparent;
        }
        /* Hover tint only on real pointer devices so touch taps don't leave
           a sticky "glow" highlight on the row. */
        @media (hover: hover) {
            .amenity-row:hover {
                background-color: rgba(214, 194, 168, 0.05); /* Very subtle sand tint */
            }
        }
        .amenity-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
            opacity: 0;
        }
        .amenity-row.is-active .amenity-content {
            max-height: 1000px;
            opacity: 1;
        }
        .amenity-chevron {
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .amenity-row.is-active .amenity-chevron {
            transform: rotate(180deg);
        }

        /* Upgraded Custom Toast / Notification Alert Bubble */
        #toast-alert {
            box-shadow: 0 20px 40px rgba(62, 50, 43, 0.15);
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
        }


/* ============================================================
   MOBILE + DEVICE-CHROME BLENDING (iOS & Android)
   Added for: edge-to-edge color blend with the phone's status
   bar (battery/signal area) and bottom home-indicator bar.
   ============================================================ */

/* The root paints brand espresso so any overscroll/rubber-band
   and the notch/home-indicator safe-area zones blend with the
   brown status bar (set via <meta name="theme-color">) instead
   of flashing white. */
html {
    background-color: #3E322B; /* Dark Brown */
}

html, body {
    /* Prevent any sideways drift on small screens */
    max-width: 100%;
    overflow-x: hidden;
}

body {
    /* Honour the notch / home-indicator so nothing is clipped,
       and let the brand color flow into those inset strips. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Smoother momentum scrolling + no tap-highlight flash on mobile */
* {
    -webkit-tap-highlight-color: transparent; /* no glow flash on any tap */
}

/* Use dynamic viewport height where supported so the full-screen
   hero and the full-screen guest portal track the *visible*
   viewport on mobile (no jump when the URL bar shows/hides). */
@supports (height: 100dvh) {
    .h-screen { height: 100dvh; }
    .min-h-screen { min-height: 100dvh; }
}

/* Keep the fixed full-screen overlays (modals, welcome portal,
   assistance panel) clear of the notch and home indicator. */
.fixed.inset-0 {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Text-entry fields at >=16px stop iOS from auto-zooming the page
   on focus. Scoped to inputs/selects only so the tiny uppercase
   button labels keep their intended size. */
@media (max-width: 640px) {
    input, select, textarea {
        font-size: 16px;
    }
}


/* ============================================================
   FORM CONTROL FOCUS — remove the default browser glow/ring
   that appears when tapping selects/inputs (keeps the clean
   minimal underline aesthetic).
   ============================================================ */
select:focus,
select:focus-visible,
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible {
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

/* Remove the subtle highlight some browsers paint on the
   selected option / select control itself. */
select {
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
}