/* Unique Font Pairing: Cinzel (Classic/Upscale Headings) & Lato (Modern/Clean Body) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Lato:wght@300;400;700&display=swap');

/* Reset & Base Layout */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* Lato is sleeker and more "corporate boutique" than Montserrat */
  font-family: 'Lato', sans-serif;
  background-color: #ffffff; 
  color: #2d2d2d; 
  line-height: 1.6;
}

/* HEADINGS: The 'Cinzel' font mimics the strength of the logo's typography */
h1, h2, h3 {
  font-family: 'Cinzel', serif;
  font-weight: 900;
 
  margin-bottom: 1.5rem;
  letter-spacing: 2px; /* Increased tracking for a luxury feel */
  text-transform: uppercase; /* Cinzel looks best in all-caps like the logo */
}

/* --- ARCHITECTURAL TOPBAR --- */
.bw-top-utility {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    padding: 0 30px; /* Aligns with your header padding */
    background: transparent;
}

.bw-utility-inner {
    max-width: 1600px;
    margin: 0 auto;
    background: #1E3A47; /* Updated from burgundy to deep slate blue */
    height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-bottom: 2px solid var(--bw-plus-red); /* Automatically uses the new gold variable */
    border-radius: 0 0 4px 4px; /* Only bottom corners rounded */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Left Wing Content */
.bw-util-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.util-tag {
    font-size: 10px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1.5px;
}

.util-val {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    margin: 0;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.5px;
}

/* Right Wing Content */
.bw-util-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.util-socials {
    display: flex;
    gap: 15px;
}

.util-socials a {
    color: #fff;
    font-size: 15px;
    opacity: 0.6;
    transition: 0.3s;
}

.util-socials a:hover {
    opacity: 1;
    color: var(--bw-plus-red); /* Automatically uses the new gold hover variable */
}

.util-divider {
    width: 1px;
    height: 15px;
    background: rgba(255,255,255,0.1);
}

.util-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-pulse {
    width: 6px;
    height: 6px;
    background: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 5px #2ecc71;
}

.status-txt {
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
}

/* --- ADJUSTING THE MAIN HEADER --- */
.bw-frame-header {
    top: 35px !important; /* Forces it to sit right under the tiered topbar */
    padding-top: 10px !important; /* Tightens the gap */
}

/* --- THE IPAD & MOBILE TRANSFORMATION --- */
@media (max-width: 1024px) {
    .bw-top-utility {
        padding: 0; /* Flush to edges on tablet/mobile */
    }

    .bw-utility-inner {
        height: 40px;
        border-radius: 0; /* Full width looks more stable on small screens */
        padding: 0 15px;
    }

    /* Hide the long address, but show a clickable Icon instead */
    .util-val {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }

    .util-tag, .util-divider, .util-status {
        display: none; 
    }
}

@media (max-width: 600px) {
    .bw-utility-inner {
        height: 35px;
    }
    
    /* On tiny screens, just center the socials and phone icon */
    .bw-util-left {
        display: none; /* Address takes too much space on phone */
    }

    .bw-util-right {
        width: 100%;
        justify-content: center;
        gap: 25px;
    }
    
    .util-socials a {
        font-size: 16px; /* Tap targets should be larger on mobile */
    }
}

/* --- HEADER ADJUSTMENT --- */
.bw-frame-header {
    top: 45px !important; /* Sync with desktop height */
}

@media (max-width: 1024px) {
    .bw-frame-header {
        top: 40px !important;
    }
}
@media (max-width: 600px) {
    .bw-frame-header {
        top: 35px !important;
    }
}
/* Core Variables */
:root {
    --bw-oxford: #1E3A47;
    --bw-plus-red: #C5A059;
    --bw-text: #333333;
    --bw-border: rgba(30, 58, 71, 0.08);
}

.bw-frame-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 30px; /* This creates the "floating" effect */
}

/* 1. The Outer Perimeter Rim */
.bw-outer-rim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    
}

/* 2. Nav Core - Floating Glass */
.bw-nav-core {
    background: #ffffff;
    border: 1px solid var(--bw-border);
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    border-radius: 4px; /* Sharp, professional corners */
    height: 90px;
}

.bw-nav-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* 3. Logo Area */
.bw-brand-area {
    padding-right: 40px;
    border-right: 1px solid #eee;
}

.bw-brand-area img {
    height: 55px;
    transition: transform 0.3s ease;
}

/* 4. The "Rail" Navigation - Very different from center-aligned lists */
.bw-menu-rail {
    flex: 1;
    padding-left: 40px;
}

.bw-nav-list {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.bw-nav-list a {
    text-decoration: none;
    color: var(--bw-text);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
}

.bw-nav-list a span {
    font-size: 9px;
    color: var(--bw-plus-red);
    margin-bottom: 2px;
    font-family: serif; /* Classic hotel touch */
}

.bw-nav-list a:hover {
    color: var(--bw-oxford);
    transform: translateY(-2px);
}

/* 5. Contact Capsule & CTA */
.bw-contact-capsule {
    display: flex;
    align-items: center;
    gap: 25px;
}

.bw-meta-content {
    text-align: right;
    border-right: 1px solid #eee;
    padding-right: 25px;
}

.bw-phone-link {
    color: var(--bw-oxford);
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    display: block;
}

.bw-address-text {
    font-size: 10px;
    color: #888;
    margin: 2px 0 0;
    text-transform: uppercase;
}

/* The Action Button - Arrow Flare Design */
.bw-book-trigger {
    background: var(--bw-plus-red);
    color: #fff;
    text-decoration: none;
    padding: 0 25px;
    height: 90px; /* Matches header height exactly */
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-right: -20px; /* Extends to the edge of the white box */
    border-radius: 0 4px 4px 0;
    transition: background 0.3s;
}

.bw-book-trigger svg {
    width: 18px;
    stroke: currentColor;
    stroke-width: 3px;
    fill: none;
}

.bw-book-trigger:hover {
    background: var(--bw-oxford);
}

/* 6. Mobile Toggle - Dots Grid Style */
.bw-mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.dots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.dots-grid span {
    width: 4px;
    height: 4px;
    background: var(--bw-oxford);
    border-radius: 50%;
}
@media (max-width: 1200px) {
    .bw-menu-rail, .bw-meta-content { display: none; }
    .bw-mobile-toggle { display: block; margin-left: auto; margin-right: 20px;}
    .bw-frame-header { padding: 10px; }
    .bw-nav-core { height: 70px; }
    .bw-book-trigger { height: 70px; }
}
/* Update the span style to be a "Data Tag" */
.bw-nav-list a .ms-data {
    font-size: 8.5px;
    color: var(--bw-plus-red);
    font-weight: 900;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif; /* Clean sans-serif for data */
    opacity: 0.8;
    position: relative;
    padding-left: 10px;
}

/* Add a small vertical line before the data to make it look "Architectural" */
.bw-nav-list a .ms-data::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 8px;
    background: var(--bw-plus-red);
}

/* Hover effect: The data tag glows slightly */
.bw-nav-list a:hover .ms-data {
    opacity: 1;
    color: var(--bw-oxford);
}

.bw-nav-list a:hover .ms-data::before {
    background: var(--bw-oxford);
}

/* Live Status Dot for the Address area */
.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #2ecc71; /* Green for "Live/Open" */
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0 0 8px #2ecc71;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* Refined Brand Area */
.bw-brand-area {
    padding-right: 40px;
    border-right: 1px solid rgba(0,0,0,0.05);
}

/* Ensure the Book Now button feels like part of the frame */
.bw-book-trigger {
    background: var(--bw-plus-red);
    border-left: 4px solid var(--bw-oxford); /* Dual brand colors */
}
/* --- THE TABLET & MOBILE OVERHAUL --- */

@media (max-width: 1200px) {
    /* 1. Reduce the outer "Floating" padding */
    .bw-frame-header { 
        padding: 10px 15px; 
    }

    /* 2. Shrink the nav core height for better screen real estate */
    .bw-nav-core { 
        height: 65px; 
        border-radius: 8px; /* Slightly softer for mobile */
    }

    .bw-nav-wrapper {
        padding: 0 15px;
        justify-content: space-between; /* Ensures logo left, toggle right */
    }

    /* 3. Scale the logo down so it doesn't look cramped */
    .bw-brand-area {
        border-right: none;
        padding-right: 0;
    }

    .bw-brand-area img {
        height: 40px; 
    }

    /* 4. Fix the Book Now button for Tablet */
    .bw-book-trigger {
        height: 65px;
        padding: 0 15px;
        font-size: 10px;
        margin-right: -15px; /* Alignment with core padding */
        border-left: 2px solid var(--bw-oxford);
    }

    .bw-book-trigger span {
        display: none; /* Hide text on small mobile if it overflows, keep the icon */
    }

    /* 5. The Mobile Dots Toggle - Vertically Centered */
    .bw-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: 40px;
        margin-left: 10px;
        margin-right: 0; /* Reset desktop margin */
    }
}

/* Specific Phone Fixes */
@media (max-width: 480px) {
    .bw-frame-header {
        padding: 8px 10px;
    }
    
    .bw-nav-core {
        height: 60px;
    }

    .bw-brand-area img {
        height: 35px;
    }

    .bw-book-trigger {
        height: 60px;
        padding: 0 12px;
    }
    
    .bw-book-trigger svg {
        width: 14px;
        margin: 0;
    }
}
/* --- FLOAT MENU CORE --- */
.bw-float-menu {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    padding: 20px;
}

.bw-glass-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 58, 71, 0.4); /* Updated background alpha to match Deep Slate Blue profile */
    backdrop-filter: blur(15px); /* This makes it feel premium */
    opacity: 0;
    transition: 0.6s;
}

.bw-float-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(50px) scale(0.95);
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.bw-float-menu.active { visibility: visible; }
.bw-float-menu.active .bw-glass-backdrop { opacity: 1; }
.bw-float-menu.active .bw-float-container { transform: translateY(0) scale(1); }

/* --- STATUS RAIL --- */
.bw-menu-status {
    display: flex;
    background: var(--bw-oxford);
    padding: 20px 40px;
    gap: 40px;
}

.status-item span {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    color: var(--bw-plus-red);
    letter-spacing: 2px;
    font-weight: 800;
}

.status-item p {
    color: #fff;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
}

/* --- TILE NAVIGATION --- */
.bw-main-flex {
    flex: 1;
    display: flex;
}

.bw-exclusive-nav {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2x2 grid instead of a list */
}

.nav-tile {
    text-decoration: none;
    padding: 60px;
    border: 0.5px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

.nav-tile::before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    font-weight: 900;
    color: rgba(30, 58, 71, 0.03); /* Ghost text updated to subtle Slate tint */
    pointer-events: none;
}

.tile-index {
    color: var(--bw-plus-red);
    font-weight: 900;
    font-size: 14px;
}

.tile-label {
    color: var(--bw-oxford);
    font-size: 35px;
    font-weight: 800;
    text-transform: uppercase;
}

.nav-tile:hover {
    background: var(--bw-oxford);
}

.nav-tile:hover .tile-label { color: #fff; }
.nav-tile:hover .tile-index { color: #fff; } /* Preserves contrast when background switches to Slate Blue */

/* --- SIDEBAR --- */
.bw-action-sidebar {
    width: 100px;
    border-left: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
}

.bw-exit-btn {
    background: var(--bw-plus-red);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #fff;
}

.bw-exit-btn svg { width: 24px; stroke: currentColor; stroke-width: 2; }

.bw-side-socials {
    margin-top: auto;
    writing-mode: vertical-rl; /* Vertical social links */
}

.bw-side-socials a {
    text-decoration: none;
    color: #999;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
    margin: 20px 0;
    transition: 0.3s;
}

.bw-side-socials a:hover { color: var(--bw-oxford); }

/* --- SCROLLABLE NAV LOGIC --- */
.bw-exclusive-nav {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-y: auto; /* Enable vertical scrolling */
    scroll-behavior: smooth;
    
    /* Hide scrollbar for Chrome/Safari */
    scrollbar-width: none; 
}

.bw-exclusive-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar for IE/Edge */
}

.nav-tile {
    text-decoration: none;
    padding: 60px;
    min-height: 300px; /* Ensures tiles stay large enough to scroll */
    border: 0.5px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: 0.4s;
    position: relative;
    overflow: hidden;
    background: #fff;
}

/* Mobile Adjustments for Scrolling */
@media (max-width: 900px) {
    .bw-exclusive-nav {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    
    .nav-tile {
        min-height: 200px; /* Shorter tiles on mobile so you see more at once */
        padding: 40px;
    }

    .nav-tile::before {
        font-size: 80px; /* Smaller ghost text for mobile */
    }
}

/* --- ADDING A SCROLL INDICATOR (Expert Touch) --- */
/* This subtle line at the bottom shows there is more to see */
/* --- FIXING THE SCROLL AREA --- */
.bw-main-flex {
    flex: 1;
    display: flex;
    overflow: hidden; /* CRITICAL: Prevents the container from growing with the content */
    position: relative;
}

.bw-exclusive-nav {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    /* SCROLL FIXES */
    height: 100%; /* Occupy full height of the main flex */
    overflow-y: auto !important; /* Force scroll */
    overflow-x: hidden;
    
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
    
    /* Hide scrollbar */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.bw-exclusive-nav::-webkit-scrollbar {
    display: none;
}

/* Ensure the sidebar doesn't scroll with the nav */
.bw-action-sidebar {
    width: 100px;
    border-left: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    flex-shrink: 0; /* Prevents sidebar from squishing */
    background: #fff;
    z-index: 5;
}

/* Fix for the Scroll Indicator position */
.bw-main-flex::after {
    content: 'SCROLL TO EXPLORE ↓';
    position: absolute;
    bottom: 20px;
    left: 40px;
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 800;
    color: var(--bw-oxford); /* Updated to use the deep slate blue root variable */
    opacity: 0.4;
    z-index: 10;
    pointer-events: none;
}
@media (max-width: 900px) {
    .bw-float-container {
        height: 95dvh; /* Dynamic viewport height for mobile browsers */
        width: 95%;
    }

    .bw-exclusive-nav {
        grid-template-columns: 1fr; /* Single column for mobile */
    }
    
    .nav-tile {
        min-height: 180px; /* Reduced height so user sees the "cut off" next tile */
        padding: 30px;
    }

    .bw-action-sidebar {
        width: 70px;
    }
}
/* --- STICKY ANIMATION CORE --- */
.bw-top-utility, 
.bw-frame-header {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
    will-change: transform;
}

/* State when scrolling down: Push both off-screen */
.nav-hidden .bw-top-utility {
    transform: translateY(-100%);
}

.nav-hidden .bw-frame-header {
    transform: translateY(-150%); /* Pushes further to clear the shadow */
}

/* Optional: Add a slight glass effect only when sticky/scrolled */
.header-scrolled .bw-nav-core {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* --- KINETIC HERO BASE --- */
.kinetic-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #0c1a20; /* Updated to a deeper premium slate profile base */
    overflow: hidden;
}

.kn-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    /* Clean transition for opacity to prevent flashing */
    transition: opacity 1.2s ease, visibility 0s 1.2s;
}

.kn-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
    transition: opacity 1.2s ease;
}

/* --- THE SPLIT PANEL REVEAL --- */
.kn-mask-container {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    /* This creates the "Slide from Right" wipe effect */
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.kn-slide.active .kn-mask-container {
    clip-path: inset(0 0 0 0%);
}

.kn-bg-panel {
    width: 100%;
    height: 100%;
}

.kn-bg-panel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4) contrast(1.1);
    /* Image starts slightly zoomed and moves left slightly */
    transform: scale(1.3) translateX(5%);
    transition: transform 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.kn-slide.active .kn-bg-panel img {
    transform: scale(1.1) translateX(0%);
}

/* --- CONTENT REVEAL --- */
/* --- CONTENT STAGGERED REVEAL --- */
.kn-content {
    position: relative;
    z-index: 20;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8%;
}

/* Masking text for a "Rise up" effect */
.kn-tag, .kn-title {
    overflow: hidden;
}

.kn-tag span, .kn-title span {
    display: block;
    transform: translateY(110%);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
/* Staggered text delays */
.kn-slide.active .kn-tag span { 
    transform: translateY(0); 
    transition-delay: 0.6s;
    color: #C5A367; 
}
.kn-slide.active .kn-title span { 
    transform: translateY(0); 
    transition-delay: 0.8s; 
}

.kn-description {
    color: rgba(255,255,255,0.8);
    opacity: 0;
    transform: translateX(-30px); /* Slides in from left instead of up */
    transition: all 1s ease 1.2s;
}

.kn-slide.active .kn-description {
    opacity: 1;
    transform: translateX(0);
}

.kn-tag span {
    display: block;
    color: #C5A367; /* Champagne Gold Accent */
    font-weight: 800;
    letter-spacing: 5px;
    font-size: 13px;
    text-transform: uppercase;
    transform: translateY(105%);
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) 0.8s;
}

.kn-title span {
    display: block;
    font-size: clamp(2.5rem, 6vw, 6rem);
    color: #ffffff;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    transform: translateY(105%);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.9s;
}

.kn-description {
    color: rgba(255,255,255,0.8);
    font-size: 18px;
    max-width: 550px;
    line-height: 1.6;
    margin: 25px 0 40px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease 1.2s;
}

.kn-slide.active .kn-tag span,
.kn-slide.active .kn-title span,
.kn-slide.active .kn-description {
    opacity: 1;
    transform: translateY(0);
}

/* --- ACTION AREA --- */
.kn-action {
    display: flex;
    align-items: center;
    gap: 40px;
    opacity: 0;
    transition: opacity 1s ease 1.5s;
}

.kn-slide.active .kn-action { opacity: 1; }

.kn-btn {
    background: #C5A367; /* Swapped from Crimson Crimson to Gold profile */
    color: #ffffff;
    padding: 18px 40px;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2px;
    transition: 0.4s;
    border: 2px solid #C5A367; /* Swapped from Crimson border to Gold */
    text-transform: uppercase;
}

.kn-btn:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

.kn-scroll-hint {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hint-line {
    width: 60px;
    height: 1px;
    background: rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}

.hint-line::after {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: #C5A367; /* Gold Animated Line */
    animation: hintAnim 2s infinite;
}

@keyframes hintAnim {
    0% { left: -100%; }
    50% { left: 0%; }
    100% { left: 100%; }
}

/* --- CONTROLS --- */
.kn-controls {
    position: absolute;
    bottom: 50px;
    right: 50px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 30px;
}

.kn-progress-circle {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-circle {
    fill: none;
    stroke: rgba(255,255,255,0.1);
    stroke-width: 2;
}

.progress-path {
    fill: none;
    stroke: #C5A367; /* Swapped from Crimson loaders to Gold loader ring */
    stroke-width: 2;
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    transition: stroke-dashoffset 8s linear;
    transform: rotate(-90deg);
    transform-origin: center;
}

.kn-slide.active ~ .kn-controls .progress-path {
    stroke-dashoffset: 0;
}

.kn-counter {
    position: absolute;
    color: #ffffff;
    font-weight: 400;
    
    font-size: 16px;
}

.kn-dots {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dot {
    width: 6px;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.4s;
}

.dot.active {
    background: #C5A367; /* Gold active dot */
    transform: scale(1.8);
}

/* --- ARROW CONTROLS --- */
.kn-arrows {
    display: flex;
    gap: 10px;
    margin-right: 15px;
}

.kn-arrow-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.kn-arrow-btn svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    transition: fill 0.3s ease;
}

.kn-arrow-btn:hover {
    background: #C5A367;
    border-color: #C5A367;
}

.kn-arrow-btn:hover svg {
    fill: #0c1a20; /* Updated to dark slate color fill on hover */
}

/* --- RESPONSIVE FIXES --- */

@media (max-width: 1024px) {
	/* --- KINETIC HERO BASE --- */
.kinetic-hero {
   margin-top:50px;
    height: 70vh;
   
}
    .kn-content {
        padding: 0 5%;
        justify-content: center; /* Center content for tablets/mobile */
        text-align: center;
    }

    .kn-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .kn-action {
        flex-direction: column;
        gap: 20px;
    }

    .kn-description {
        margin: 15px auto 30px;
    }

    /* Move controls to be more accessible on touch */
    .kn-controls {
        right: 50%;
        transform: translateX(50%);
        bottom: 30px;
        flex-direction: row;
        gap: 20px;
    }

    .kn-dots {
        flex-direction: row; /* Horizontal dots on mobile */
    }
}

@media (max-width: 768px) {
    /* Make the images appear as one instead of a split "half-image" */
    .kn-bg-panel img {
        width: 100vw; /* Image takes full width of screen */
        object-fit: cover;
    }

    /* Adjust the left/right logic so the image isn't cut off weirdly */
    .kn-bg-panel.left img {
        left: 0;
    }
    
    .kn-bg-panel.right img {
        right: 0;
        left: auto;
        /* Shift the right panel's image so it aligns with the left */
        transform: translateX(50%); 
    }

    /* Reset scale for mobile to prevent blurriness */
    .kn-slide.active .kn-bg-panel img {
        transform: scale(1.05);
    }
    
    /* Adjust Typography for Mobile */
    .kn-title span {
        font-size: 2.5rem;
    }
    
    .kn-description {
        font-size: 15px;
        line-height: 1.4;
    }
}
/* --- BW KINETIC SECTION (UNIQUE NAMES) --- */

.bw-kn-reveal {
    position: relative;
    height: 350vh; 
    background: #fdfbf7;
    overflow: clip;
}

.bw-kn-sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bw-kn-content-wrap {
    z-index: 10;
    text-align: center;
    width: 100%;
    max-width: 900px;
    padding: 0 30px;
}

.bw-kn-brand-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.bw-kn-logo img {
    width: 70px;
    height: auto;
    margin-bottom: 20px;
}

.bw-kn-welcome {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.8rem;
    color: var(--bw-plus-red); /* Swapped to use the new Gold variable */
    margin-bottom: 10px;
}

.bw-kn-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--bw-oxford); /* Swapped from Burgundy to Deep Slate Blue variable */
    line-height: 1.1;
    font-weight: 700;
}

.bw-kn-title span { color: var(--bw-plus-red); } /* Swapped to use the new Gold variable */

.bw-kn-divider {
    width: 50px;
    height: 1px;
    background: var(--bw-plus-red); /* Swapped to use the new Gold variable */
    margin: 20px auto;
}

/* TYPEWRITER TEXT */
.bw-kn-item {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, 2.5vw, 1.8rem);
    line-height: 1.7;
    color: #d1cdc7; /* Faded state */
    max-width: 800px;
    margin: 0 auto;
}

.bw-kn-item span.lit {
    color: #324955;
    transition: color 0.2s ease;
}

/* FLOATING IMAGES */
.bw-kn-parallax-img {
    position: absolute;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    z-index: 1;
    transition: opacity 0.5s ease;
}

.bw-kn-parallax-img img { width: 100%; height: 100%; object-fit: cover; }

/* Desktop Positions */
.bw-kn-img-1 { width: 18vw; height: 28vh; top: 8%; left: 4%; }
.bw-kn-img-2 { width: 15vw; height: 20vh; top: 12%; right: 5%; }
.bw-kn-img-3 { width: 16vw; height: 25vh; bottom: 8%; left: 6%; }
.bw-kn-img-4 { width: 18vw; height: 25vh; bottom: 12%; right: 4%; }

/* --- TABLET & MOBILE RESPONSIVE --- */
/* --- BW KINETIC SECTION UPDATED RESPONSIVE --- */
/* TABLET (iPad) */
@media (max-width: 1024px) {
    .bw-kn-reveal { height: 280vh; } /* Reduced from 350vh */

    .bw-kn-content-wrap {
        max-width: 700px;
        z-index: 20; /* Ensure text stays above images */
    }

    /* Reposition images to the extreme corners to avoid text overlap */
    .bw-kn-img-1 { width: 22vw; height: 18vh; top: 5%; left: 5%; }
    .bw-kn-img-2 { width: 22vw; height: 18vh; top: 5%; right: 5%; }
    .bw-kn-img-3 { width: 22vw; height: 18vh; bottom: 5%; left: 5%; }
    .bw-kn-img-4 { width: 22vw; height: 18vh; bottom: 5%; right: 5%; }

    .bw-kn-parallax-img {
        opacity: 0.5; /* Soften images so text is the hero */
    }
}

/* MOBILE (Phones) */
@media (max-width: 768px) {
    .bw-kn-reveal { height: 220vh; } /* Much shorter scroll for mobile users */

    .bw-kn-sticky-container {
        justify-content: center; /* Keeps everything vertically centered */
    }

    .bw-kn-content-wrap {
        padding: 0 15px;
    }

    .bw-kn-title { 
        font-size: 1.7rem; 
        margin-bottom: 10px;
    }

    .bw-kn-item {
        font-size: 1.2rem;
        line-height: 1.5;
        padding: 0 10px;
    }

    /* MOBILE IMAGE STRATEGY: 
       We only keep two images and push them to the very top/bottom 
       so they don't interfere with the text while scrolling. */
    
    .bw-kn-img-1 { 
        width: 40vw; 
        height: 15vh; 
        top: 2%; 
        left: -5%; /* Slightly off-screen for a modern look */
        opacity: 0.3;
    }

    .bw-kn-img-4 { 
        width: 40vw; 
        height: 15vh; 
        bottom: 2%; 
        right: -5%; 
        opacity: 0.3;
    }

    /* Hide middle images to prevent a cluttered mobile screen */
    .bw-kn-img-2, .bw-kn-img-3 { 
        display: none !important; 
    }

    .bw-kn-brand-intro {
        margin-bottom: 15px;
    }

    .bw-kn-logo img {
        width: 50px;
        margin-bottom: 10px;
    }
}

/* Landscape Mode Fix for Phones */
@media (max-height: 500px) and (max-width: 900px) {
    .bw-kn-sticky-container {
        padding-top: 20px;
    }
    .bw-kn-parallax-img {
        display: none; /* Hide images in landscape phone mode to save space */
    }
}
/* --- SECTION STYLING --- */
.prop-intro {
    position: relative;
    padding: 40px 0;
    background: #fdfdfc; /* Gallery White */
    font-family: 'Montserrat', sans-serif; /* Cleaner professional font */
    overflow: hidden;
}

.pi-container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
}

/* --- MEDIA STYLING (Masked & Clean) --- */
.pi-media-wrap {
    position: relative;
}

.pi-image-reveal {
    position: relative;
    height: 700px;
    clip-path: inset(0 0 0 0); 
    background: #324955;
    cursor: pointer;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.pi-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);
}

.pi-image-reveal:hover .pi-img {
    transform: scale(1.03);
    opacity: 0.6;
}

.pi-video-hint {
    position: absolute;
    bottom: 40px; left: 40px;
    display: flex; align-items: center; gap: 15px;
    color: #fff; opacity: 0;
    transition: 0.5s ease;
}

.pi-image-reveal:hover .pi-video-hint { opacity: 1; transform: translateY(-10px); }

.pi-play-circle {
    width: 50px; height: 50px; 
    background: var(--bw-plus-red); /* Swapped to standard brand Muted Gold variable */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.pi-play-circle svg { width: 20px; fill: #ffffff; }

.pi-img-caption {
    position: absolute;
    top: 40px; right: -40px;
    writing-mode: vertical-rl;
    color: var(--bw-oxford); /* Swapped from burgundy to Deep Slate Blue */
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- CONTENT STYLING --- */
.pi-label-group {
    display: flex; align-items: center; gap: 15px; margin-bottom: 25px;
}

.pi-dash { width: 40px; height: 2px; background: var(--bw-plus-red); } /* Swapped to brand Muted Gold */
.pi-eyebrow { font-size: 12px; letter-spacing: 5px; color: var(--bw-oxford); font-weight: 700; text-transform: uppercase; } /* Swapped to brand Deep Slate Blue */

.pi-title {
    /* Elegant Serif for Luxury */
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    color: #1e3a47; line-height: 1.1; margin-bottom: 30px;
}

.pi-title strong { color: #c5a059; font-weight: 400;  } /* Swapped inline strong emphasis to brand Deep Slate Blue */

.pi-lead { font-size: 20px; color: #444; margin-bottom: 25px; font-weight: 500; line-height: 1.5; }
.pi-body { font-size: 16px; color: #666; line-height: 1.8; }

/* Custom Trigger Button */
.pi-discover-trigger {
    background: none; border: none; display: flex; align-items: center; gap: 20px;
    cursor: pointer; padding: 15px 0; border-bottom: 1px solid #e5e5e5; transition: 0.3s;
}

.pi-btn-label { font-weight: 700; letter-spacing: 2px; font-size: 12px; color: #324955; text-transform: uppercase;}
.pi-btn-arrow { transition: transform 0.3s ease; }
.pi-btn-arrow svg { width: 20px; fill: var(--bw-oxford); } /* Swapped arrow svg fill to brand Deep Slate Blue */

.pi-discover-trigger:hover { border-bottom-color: var(--bw-oxford); } /* Swapped underline transition color to brand Deep Slate Blue */
.pi-discover-trigger:hover .pi-btn-arrow { transform: translateX(10px); }

/* --- GUIDE OVERLAY STYLING (Dark Contrast) --- */
.pi-guide-overlay {
    position: fixed; inset: 0; 
    background: #324955; /* Sophisticated deep charcoal */
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    transform: translateY(100%); transition: transform 0.7s cubic-bezier(0.85, 0, 0.15, 1);
}

.pi-guide-overlay.active { transform: translateY(0); }

.pi-guide-inner { width: 1000px; max-width: 90%; }

.pi-guide-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 30px;
}

.pi-guide-header h3 { color: #fff; font-size: 32px; letter-spacing: 1px; font-family: 'Playfair Display', serif; }
.pi-guide-header strong { color: var(--bw-plus-red); font-weight: 400; } /* Swapped modal header text to brand Muted Gold */

.pi-close-x { 
    background: transparent; 
    border: 1px solid var(--bw-plus-red); /* Swapped layout border to brand Muted Gold */
    color: var(--bw-plus-red); /* Swapped layout text to brand Muted Gold */
    padding: 8px 25px; 
    cursor: pointer; 
    font-weight: 700; 
    font-size: 10px; 
    letter-spacing: 2px; 
    transition: 0.3s;
}

.pi-close-x:hover {
    background: var(--bw-plus-red); /* Swapped modal close hover background to brand Muted Gold */
    color: #324955;
}

/* --- SCROLLING AREAS --- */
.pi-scroll-area {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 25px;
    color: #ccc;
}

.pi-scroll-area::-webkit-scrollbar { width: 3px; }
.pi-scroll-area::-webkit-scrollbar-thumb { background: var(--bw-oxford); } /* Swapped scroll scrollbar rail fill to brand Deep Slate Blue */

.pi-about-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.pi-body-scroll {
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 40px;
    padding-right: 20px;
}

.pi-body-scroll::-webkit-scrollbar { width: 2px; }
.pi-body-scroll::-webkit-scrollbar-thumb { background: var(--bw-plus-red); } /* Swapped inner content scrollbar to brand Muted Gold */

/* --- VIDEO OVERLAY --- */
.ew-video-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.98);
    z-index: 10001;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(15px);
}

.ew-video-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: var(--bw-oxford); /* Swapped video close trigger background to brand Deep Slate Blue */
    border: none;
    padding: 12px 25px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    cursor: pointer;
    color: #fff;
    transition: 0.3s;
}

.ew-video-close:hover { background: var(--bw-plus-red); } /* Swapped video close hover background to brand Muted Gold */

#ew-video-target {
    width: 90%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(197, 163, 103, 0.3); /* Preserved soft gold styling frame context */
}

/* Responsive */
@media (max-width: 900px) {
    .prop-intro { padding: 80px 0; }
    .pi-container { grid-template-columns: 1fr; gap: 40px; }
    .pi-image-reveal { height: 450px; }
    .pi-about-wrapper { grid-template-columns: 1fr; gap: 30px; }
    .pi-img-caption { display: none; }
}
/* --- GLOBAL SECTION CONTAINER --- */
.room-cinematic {
    background-color: #fcf9f5; /* Warm Alabaster/Ivory background to sync with site */
    padding: 120px 0;
    overflow: hidden;
    position: relative;
    font-family: 'Montserrat', sans-serif;
}

.rc-container {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Card stays on the right */
    min-height: 700px;
    padding: 0 40px;
}

/* --- THE MECHANICAL SHUTTERS (ANTIQUE REVEAL) --- */
.rc-shutter-blade {
    position: absolute;
    top: 0; 
    width: 0%; 
    height: 100%;
    background: #1A2F3B; /* Updated from charcoal to premium Deep Slate Blue profile */
    z-index: 15;
    transition: width 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

#shutter-l { 
    left: 0; 
    border-right: 1px solid #C5A059; /* Updated to brand premium Gold tone */
}

#shutter-r { 
    right: 0; 
    border-left: 1px solid #C5A059; 
}

/* State when JS adds .switching class */
.room-cinematic.switching #shutter-l,
.room-cinematic.switching #shutter-r { 
    width: 50.5%; 
}

/* --- THE VISUAL CANVAS --- */
.rc-visual-canvas {
    position: absolute; 
    left: 0; 
    top: 0;
    width: 75%; /* Large visual area */
    height: 100%;
    z-index: 1;
    background: #000;
}

.rc-image-wrapper { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    overflow: hidden;
}

.rc-image-wrapper img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    filter: brightness(0.85) contrast(1.05);
    transition: filter 0.4s ease;
}

.rc-vignette {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 20%, rgba(26, 47, 59, 0.5) 110%); /* Synced vignette filter with Deep Slate Blue */
    pointer-events: none; 
    z-index: 2;
}

/* --- THE CONTENT CARD (FIXED DIMENSIONS) --- */
.rc-floating-card {
    position: relative; 
    z-index: 20;
    width: 650px; 
    height: 650px; /* Fixed height prevents layout jumping during text swap */
    background: #233A47; /* Updated layout background to premium Deep Slate card profile */
    padding: 60px;
    border: 1px solid rgba(197, 160, 89, 0.2); /* Synced boundary lines to brand premium Gold tone */
    box-shadow: -30px 30px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Art Deco Framing Corners */
.rc-frame-corner {
    position: absolute; 
    width: 35px; 
    height: 35px;
    border: 1px solid #C5A059; /* Updated to brand premium Gold tone */
}
.top-left { top: -20px; left: -20px; border-right: none; border-bottom: none; }
.bottom-right { bottom: -20px; right: -20px; border-left: none; border-top: none; }

/* --- TYPOGRAPHY --- */
.rc-card-inner {
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.rc-eyebrow {
    color: #C5A059; /* Updated to brand premium Gold tone */
    font-size: 11px; 
    font-weight: 700;
    text-transform: uppercase; 
    letter-spacing: 5px;
    display: block; 
    margin-bottom: 20px;
}

.antique-title {
    font-size: 48px; 
    color: #ffffff; 
    line-height: 1.1; 
    margin-bottom: 15px;
}

.rc-tags-row { 
    color: #C5A059; /* Updated to brand premium Gold tone */
    font-size: 14px; 
    margin-bottom: 30px; 
    opacity: 0.9;
}

.antique-copy {
    font-size: 18px; 
    color: #d1cdc7; /* Warm Muted Gray */
    line-height: 1.7;
    margin-bottom: 40px;
    min-height: 120px; /* Space for text swap */
}

/* --- SPECS SECTION --- */
.rc-specs {
    border-top: 1px solid rgba(197, 160, 89, 0.3); /* Synced spec boundary lines with Gold profile */
    border-bottom: 1px solid rgba(197, 160, 89, 0.3);
    padding: 25px 0; 
    margin-bottom: 40px;
    display: flex; 
    justify-content: space-between;
}

.spec-label { 
    display: block; 
    font-size: 10px; 
    color: #C5A059; /* Updated to brand premium Gold tone */
    text-transform: uppercase; 
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.spec-value { 
    font-size: 20px; 
    color: #ffffff; 
    font-weight: 600; 
}

.spec-divider {
    width: 1px;
    background: rgba(197, 160, 89, 0.3); /* Synced interior spec line down with Gold profile */
}

/* --- FOOTER & NAVIGATION --- */
.rc-footer { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

.rc-button-antique {
    background: #C5A059; /* Swapped background from signature burgundy directly to brand premium Gold tone */
    color: #ffffff; 
    padding: 16px 35px;
    text-decoration: none; 
    font-size: 12px; 
    font-weight: 700;
    letter-spacing: 2px; 
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rc-button-antique:hover {
    background: #1A2F3B; /* Soft hover feedback using the premium Deep Slate profile */
    color: #ffffff;
    transform: translateY(-3px);
}

.rc-nav-group { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

.antique-btn {
    background: transparent; 
    border: 1px solid #C5A059; /* Updated arrow control border line to brand premium Gold tone */
    color: #C5A059; /* Updated arrow icon fill to brand premium Gold tone */
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: 0.3s;
}

.antique-btn:hover { 
    background: #C5A059; /* Updated arrow hover state to premium Gold background fill */
    color: #ffffff;
}

.rc-counter-wrap { 
    color: #C5A059; /* Updated section slider counter text to brand premium Gold tone */
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    font-size: 12px;
}

.counter-line { 
    width: 30px; 
    height: 1px; 
    background: #C5A059; /* Updated baseline counter decoration line to premium Gold */
}
/* --- IMPROVED RESPONSIVE ADAPTATION --- */

/* 1. IPADS & SMALL LAPTOPS (Up to 1100px) */
@media (max-width: 1100px) {
    .room-cinematic {
        padding: 80px 0;
    }

    .rc-container {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0 20px;
        min-height: auto;
    }

    /* Make visual canvas a fixed-ratio header */
    .rc-visual-canvas {
        position: relative;
        width: 100%;
        height: 500px;
        z-index: 5;
    }

    /* Adjust the Floating Card to be responsive */
    .rc-floating-card {
        width: 95%;
        max-width: 700px; /* Limits size on iPads */
        height: auto; /* Remove fixed height for content flow */
        margin: -80px auto 0; /* Pull up over the image */
        padding: 40px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .antique-title {
        font-size: 36px;
    }

    .top-left { top: -10px; left: -10px; }
    .bottom-right { bottom: -10px; right: -10px; }
}

/* 2. MOBILE PHONES (Up to 768px) */
@media (max-width: 768px) {
    .room-cinematic {
        padding: 40px 0 80px;
    }

    .rc-container {
        padding: 0 15px;
    }

    .rc-visual-canvas {
        height: 350px; /* Shorter image for mobile verticality */
    }

    .rc-floating-card {
        width: 100%;
        margin: -40px 0 0 0; /* Less overlap on mobile */
        padding: 30px 20px;
        border: none; /* Cleaner mobile look */
    }

    .rc-eyebrow {
        letter-spacing: 3px;
        margin-bottom: 10px;
    }

    .antique-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .antique-copy {
        font-size: 16px;
        min-height: auto;
        margin-bottom: 30px;
    }

    /* Specs become 2x2 grid or stacked */
    .rc-specs {
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px 0;
    }

    .spec-item {
        flex: 1 1 40%; /* Two items per row */
    }

    .spec-divider {
        display: none; /* Remove vertical lines on mobile */
    }

    .spec-value {
        font-size: 18px;
    }

    /* Footer: Stack buttons or make them compact */
    .rc-footer {
        flex-direction: column;
        gap: 30px;
    }

    .rc-button-antique {
        width: 100%;
        justify-content: center;
        order: 1; /* Button on top */
    }

    .rc-nav-group {
        width: 100%;
        justify-content: center;
        order: 2; /* Nav below */
    }

    /* Ensure shutters still work but cover the whole width properly */
    .room-cinematic.switching #shutter-l,
    .room-cinematic.switching #shutter-r {
        width: 50.1%;
    }
}

/* 3. SMALL PHONES (Up to 400px) */
@media (max-width: 400px) {
    .rc-visual-canvas {
        height: 280px;
    }
    
    .antique-title {
        font-size: 24px;
    }
}
.kinetic-amenities {
    position: relative;
    padding: 100px 0;
    /* BACKGROUND: Premium Midnight Slate Base */
    background: #0A141A; 
    overflow: hidden;
    height: 700px;
    display: flex;
    align-items: center;
}

.ka-watermark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10vw;
    font-weight: 900;
    /* WATERMARK: Subtle Slate Profile silhouette shadow */
    color: rgba(30, 58, 71, 0.15); 
    z-index: 1;
    letter-spacing: 25px;
    pointer-events: none;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.ka-container {
    width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* COLUMN TRACKS */
.ka-column {
    height: 600px;
    width: 350px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.ka-track {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.ka-node {
    display: flex;
    align-items: center;
    gap: 25px;
    
    font-size: 28px;
    /* TEXT: Muted Champagne */
    color: rgba(224, 214, 197, 0.4); 
    font-weight: 500;
    transition: 0.4s ease;
}

.ka-node i {
    font-size: 24px;
    /* ICON: Premium Muted Gold */
    color: #C5A059; 
    filter: drop-shadow(0 0 12px rgba(197, 160, 89, 0.4));
}

/* OUTLINE CONTRAST: Gold architectural stroke */
.ka-node.ka-outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(197, 160, 89, 0.3);
}

/* CENTER HERO */
.ka-hero { 
    text-align: center; 
    flex: 1; 
    /* Deep Slate Architectural Ambient Glow in center */
    background: radial-gradient(circle, rgba(30, 58, 71, 0.5) 0%, transparent 70%);
    padding: 60px 0;
}

.ka-eyebrow {
    font-size: 12px; 
    letter-spacing: 6px; 
    color: #C5A059; /* Unified Muted Gold */
    font-weight: 800; 
    display: block; 
    margin-bottom: 25px;
    text-transform: uppercase;
}

.ka-title {
    font-size: 58px; 
    color: #ffffff; 
    line-height: 1.1; 
    margin-bottom: 35px;
}

.ka-title span { 
    color: #C5A059; /* High contrast gold italics */
}

.ka-badges {
    display: flex; 
    justify-content: center; 
    gap: 25px;
}

.badge {
    font-size: 11px; 
    font-weight: 700; 
    color: #ffffff; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    letter-spacing: 2px;
    background: #1E3A47; /* Premium Deep Slate Blue Badge for sharp layout contrast */
    padding: 10px 22px;
    border: 1px solid rgba(197, 160, 89, 0.4); /* Refined gold boundary line */
    border-radius: 4px; /* Sharp professional corners */
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* ANIMATIONS */
.col-up .ka-track { animation: driftUp 45s linear infinite; }
.col-down .ka-track { animation: driftDown 45s linear infinite; }

@keyframes driftUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes driftDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* INTERACTION: Light up on hover */
.ka-node:hover {
    color: #C5A059; /* Light up brand Gold */
    transform: translateX(10px);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1024px) {
    .ka-container { flex-direction: column; width: 100%; gap: 40px; }
    .ka-column { 
        width: 100vw; 
        height: auto; 
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }
    .ka-track { flex-direction: row; width: max-content; gap: 40px; padding: 10px 0; }
    .ka-node { font-size: 18px; white-space: nowrap; }
    .ka-title { font-size: 38px; }
    .ka-hero { padding: 40px 20px; }
    .ka-badges { flex-direction: row; gap: 10px; }
    .badge { font-size: 10px; padding: 8px 15px; }

    .col-up .ka-track { animation: driftLeft 25s linear infinite; }
    .col-down .ka-track { animation: driftRight 25s linear infinite; }
}

@keyframes driftLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes driftRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.kinetic-attractions {
  position: relative;
  height: 90vh;
  min-height: 750px;
  background: #0a141a; /* Updated from True Black to Premium Deep Slate base */
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  perspective: 1px; 
}

/* --- CINEMATIC BG EFFECTS --- */
.ka-bg-container { 
  position: absolute; 
  inset: 0; 
  z-index: 1;
  overflow: hidden;
}

.ka-bg-slide {
  position: absolute; 
  inset: 0;
  background-size: cover; 
  background-position: center;
  background-attachment: fixed; 
  opacity: 0; 
  transform: scale(1.1);
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 10s linear;
  filter: grayscale(30%) brightness(0.6) contrast(1.2); /* High contrast treatment */
}
.ka-bg-slide.is-active { opacity: 1; transform: scale(1); }

/* The "Visibility Fix" Vignette - Deep Slate Architectural Blend */
.ka-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, 
    rgba(10,20,26,1) 0%, 
    rgba(10,20,26,0.7) 40%, 
    rgba(10,20,26,0.3) 100%);
  z-index: 2;
}

/* --- CONTENT AREA --- */
.ka-content-wrapper {
  position: relative; z-index: 10;
  height: 100%; display: flex; flex-direction: column;
  padding: 80px 8%;
}

.ka-eyebrow {
  color: #c5a367; /* Brass Gold */
  letter-spacing: 5px; 
  text-transform: uppercase;
  font-size: 11px; 
  font-weight: 700;
}

.ka-title {
   /* Matching hotel luxury font */
  font-size: 62px; 
  color: #fff; 
  margin-top: 10px; 
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

/* --- THE INFO SHIELD (High Contrast Glassmorphism) --- */
.ka-main-stage {
  margin-top: auto; 
  display: flex;
  justify-content: space-between; 
  align-items: flex-end;
  padding-bottom: 50px;
}

.ka-info-area {
  max-width: 500px;
  background: rgba(10, 20, 26, 0.75); /* Deep Slate Tinted Glass for better readability */
  backdrop-filter: blur(15px);
  padding: 45px;
  border-left: 3px solid #c5a367; /* Swapped from Signature Burgundy to premium Muted Gold */
  box-shadow: 30px 30px 60px rgba(0,0,0,0.6);
  border-radius: 0 4px 4px 0;
}

.ka-info-block { display: none; }
.ka-info-block.is-active { display: block; animation: fadeInUp 0.6s ease forwards; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.ka-tag { 
  color: #c5a367; /* Gold */
  font-size: 13px; 
  font-weight: 700; 
  text-transform: uppercase; 
  margin-bottom: 15px; 
  display: block; 
}

.ka-info-block h3 { 
  font-size: 44px; 
  color: #fff; 
  margin-bottom: 15px; 
  letter-spacing: -0.5px;
}

.ka-info-block p { 
  color: #d1cdc7; /* Warm Muted White */
  line-height: 1.8; 
  font-size: 17px; 
  margin-bottom: 30px; 
}

.ka-btn {
  background: #c5a367; /* Swapped from Burgundy Button to unified Muted Gold */
  color: #fff; 
  text-decoration: none; 
  font-weight: 700;
  font-size: 12px; 
  text-transform: uppercase; 
  letter-spacing: 2px;
  padding: 12px 25px;
  border-radius: 2px;
  transition: 0.3s ease;
  display: inline-block;
}

.ka-btn:hover {
  background: #13232c; /* Clean hover profile background flip against the text layout */
  color: #fff;
  transform: translateY(-2px);
}

/* --- NAVIGATION DOCK --- */
.ka-dock {
  display: flex; 
  gap: 50px;
  border-top: 1px solid rgba(197, 163, 103, 0.2); /* Faded Gold Border */
  padding-top: 25px;
}

.ka-nav-item { 
  cursor: pointer; 
  position: relative; 
  opacity: 0.3; 
  transition: 0.3s; 
}

.ka-nav-item.is-active { 
  opacity: 1; 
}

.ka-nav-item.is-active::after {
  content: ''; 
  position: absolute; 
  top: -26px; 
  left: 0;
  width: 100%; 
  height: 3px; 
  background: #c5a367; /* Gold Active Line */
}

.ka-num { 
  display: block; 
  font-size: 14px; 
  color: #c5a367; 
  margin-bottom: 8px; 
  font-weight: 800;
}

.ka-label { 
  color: #fff; 
  font-size: 18px; 
  font-weight: 600; 
  white-space: nowrap; 
  letter-spacing: 0.5px;
}

/* --- IMPROVED RESPONSIVE REFINEMENTS --- */

@media (max-width: 1100px) {
    .kinetic-attractions {
        height: auto;
        min-height: 100vh;
        padding-bottom: 40px;
    }

    .ka-content-wrapper {
        padding: 60px 5%;
    }

    .ka-title {
        font-size: 44px;
        margin-bottom: 40px;
    }

    .ka-main-stage {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
    }

    .ka-info-area {
        max-width: 100%;
        width: 100%;
        padding: 30px;
        border-radius: 0 4px 4px 0;
        border-left-width: 4px;
    }

    /* Scrollable Navigation for iPad */
    .ka-dock {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 15px;
        gap: 35px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar for Firefox */
    }

    .ka-dock::-webkit-scrollbar {
        display: none; /* Hide scrollbar for Chrome/Safari */
    }

    .ka-nav-item {
        flex-shrink: 0; /* Prevents text from squishing */
    }
}

@media (max-width: 768px) {
    .kinetic-attractions {
        min-height: 850px; /* Ensure enough height for stacked content */
    }

    .ka-bg-slide {
        background-attachment: scroll; /* Fixed backgrounds jitter on mobile */
    }

    /* Mobile-optimized Vignette for better text contrast */
    .ka-vignette {
        background: linear-gradient(180deg, 
            rgba(10,10,10,0.8) 0%, 
            rgba(10,10,10,0.4) 40%, 
            rgba(10,10,10,0.9) 100%);
    }

    .ka-title {
        font-size: 34px;
        line-height: 1.2;
    }

    .ka-info-block h3 {
        font-size: 28px;
    }

    .ka-info-block p {
        font-size: 15px;
        line-height: 1.6;
    }

    .ka-info-area {
        padding: 25px;
        margin-top: 20px;
        background: rgba(20, 20, 20, 0.9); /* More opaque for mobile readability */
    }

    /* Navigation Dock as a "Menu" style on mobile */
    .ka-dock {
        gap: 25px;
        margin-top: 30px;
    }

    .ka-label {
        font-size: 15px;
    }

    .ka-num {
        font-size: 12px;
    }

    .ka-btn {
        width: 100%;
        text-align: center;
        padding: 15px;
    }
}

/* Fix for very small phones */
@media (max-width: 400px) {
    .ka-title {
        font-size: 28px;
    }
    
    .ka-info-block h3 {
        font-size: 24px;
    }
}
.mora-horizontal-reveal {
  /* BACKGROUND: Clean Gallery White / Bone */
  background: #fdfdfc; 
  position: relative;
}

.mora-reveal-wrapper {
  display: flex;
  min-height: 100vh;
}

/* Left Content: Fixed 50% */
.mora-reveal-content {
  width: 50%;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding: 0 8%;
  z-index: 2;
  /* Adds a subtle separation from the white background */
  background: #fdfdfc; 
}

.mora-eyebrow { 
  color: #a68b5b; /* Deeper Gold/Bronze for readability on white */
  letter-spacing: 5px; 
  text-transform: uppercase; 
  font-size: 11px; 
  font-weight: 700; 
}

.mora-title { 
  font-family: 'Playfair Display', serif; 
  font-size: 52px; 
  color:rgb(53 78 90); /* Soft Black/Charcoal */
  margin: 20px 0; 
  line-height: 1.1; 
}

.mora-title span { 
  color: rgb(197 160 89); /* Swapped from Burgundy to Deep Slate Blue highlight */
  opacity: 0.9;
}

.mora-accent-line { 
  width: 50px; 
  height: 2px; 
  background: #1E3A47; /* Swapped from Burgundy to Deep Slate Blue */
  margin-bottom: 30px; 
}

.mora-text-box p { 
  color: #4a4a4a; /* Slate Grey for better legibility */
  line-height: 1.8; 
  max-width: 400px; 
  font-size: 16px; 
}

/* Right Visuals Container */
.mora-reveal-visuals {
  width: 50%;
  position: relative;
  /* Light shadow to give the sliding images a 'paper' depth */
  box-shadow: -10px 0 30px rgba(0,0,0,0.03);
}

/* Panels: Stacked on top of each other */
.mora-reveal-panel {
  height: 100vh;
  width: 100%;
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  background: #fdfdfc;
}

.mora-panel-img {
  width: 100%;
  height: 100%;
  position: relative;
  animation: slideInFromRight linear;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}

.mora-panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slightly warmer images to match light theme */
  filter: sepia(5%) brightness(1.02);
}

/* Label on each image */
.mora-panel-tag {
  position: absolute;
  bottom: 50px;
  right: 50px;
  background: #ffffff; /* Pure White Tag */
  color: #324955;
  padding: 18px 30px;
  border-left: 4px solid #1E3A47; /* Swapped tag accent border from Burgundy to Deep Slate Blue */
  /* Elevation shadow for light theme */
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.mora-panel-tag span { 
  color: #a68b5b; 
  font-weight: bold; 
  margin-right: 10px; 
  font-size: 0.9em;
}

/* The Counter Nav styling for Light Theme */
.mora-reveal-nav {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #e0e0de;
}

.nav-count {
    color: #a68b5b;
    font-size: 11px;
    letter-spacing: 2px;
}

#current-index {
    color: #324955;
    font-weight: 800;
}

/* THE MAGIC: Horizontal Slide Animation */
@keyframes slideInFromRight {
  0% { transform: translateX(100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(0%); }
}

/* --- REFINED RESPONSIVE DESIGN --- */

/* 1. IPADS & TABLETS (Up to 1100px) */
@media (max-width: 1100px) {
    .mora-reveal-wrapper {
        flex-direction: column;
        min-height: auto;
    }

    /* Remove Sticky for Tablet - let content flow naturally */
    .mora-reveal-content {
        width: 100%;
        height: auto;
        position: relative;
        padding: 80px 10%;
        text-align: center;
        display: block; /* Centering the content block */
    }

    .mora-accent-line {
        margin: 0 auto 30px;
    }

    .mora-text-box p {
        max-width: 600px;
        margin: 0 auto;
    }

    .mora-title {
        font-size: 42px;
    }

    /* Visuals Container */
    .mora-reveal-visuals {
        width: 100%;
        box-shadow: none;
    }

    /* Stack Panels Vertically */
    .mora-reveal-panel {
        position: relative;
        height: 70vh; /* Controlled height for tablet */
        width: 100%;
        margin-bottom: 20px;
    }

    /* Disable the Horizontal Animation on Tablet/Mobile */
    .mora-panel-img {
        animation: none; 
        transform: none !important;
    }

    .mora-panel-tag {
        bottom: 30px;
        right: 30px;
        padding: 12px 20px;
        font-size: 14px;
    }

    .mora-reveal-nav {
        display: none; /* Counter is less relevant in a vertical scroll */
    }
}

/* 2. MOBILE PHONES (Up to 768px) */
@media (max-width: 768px) {
    .mora-reveal-content {
        padding: 60px 20px;
    }

    .mora-title {
        font-size: 32px;
    }

    .mora-text-box p {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Mobile Image height */
    .mora-reveal-panel {
        height: 50vh; 
    }

    .mora-panel-tag {
        bottom: 15px;
        right: 15px;
        left: 15px; /* Spans across the bottom on mobile */
        padding: 10px 15px;
        border-left: 3px solid #8b1538;
        font-size: 12px;
        box-sizing: border-box;
    }
}

/* 3. FIX FOR BROWSERS WITHOUT ANIMATION-TIMELINE SUPPORT */
/* If the browser doesn't support the scroll-linked animation, 
   we ensure the visuals are at least visible on desktop too. */
@supports not (animation-timeline: view()) {
    .mora-panel-img {
        transform: translateX(0);
        animation: none;
    }
    .mora-reveal-panel {
        position: relative;
        height: 100vh;
    }
}
/* --- PROFESSIONAL ALIGNED FOOTER --- */
.mke-pro-footer {
  background-color: #ffffff;
  color: #324955;
  
  border-top: 1px solid #e0e0de;
  padding-top: 20px; /* Gives the whole footer a bit of top margin */
}

.mke-container {
  max-width: 1400px; /* Increased from 1200 to fill the screen better */
  margin: 0 auto;
  padding: 0 5%;
}

/* --- TIER 1: TOP BAR --- */
.mke-footer-top {
  padding: 50px 0;
  border-bottom: 1px solid #eeeeee;
}

.mke-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.mke-footer-logo {
  height: 60px; /* Increased size */
  width: auto;
}

.mke-main-title {
    color: #324955;
  font-size: 35px; /* Increased for impact */
  font-weight: 400;
  margin: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
}

.mke-italic {
  color: #cbaa6a; /* Swapped from burgundy to Deep Slate Blue */
  text-transform: none; /* Keeps the name elegant */
}

.mke-btn-outline {
  display: inline-block;
  border: 1.5px solid #324955;
  padding: 15px 35px;
  text-decoration: none;
  color: #324955;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.mke-btn-outline:hover {
  background: #324955;
  color: #fff;
}

/* --- TIER 2: MIDDLE GRID --- */
.mke-footer-mid {
  padding: 90px 0; /* Huge vertical space for professionalism */
}

.mke-grid-layout {
  display: grid;
  grid-template-columns: 0.5fr 0.8fr 3.5fr 1.5fr; /* Custom widths for balance */
  gap: 40px;
}

.mke-heading {
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #1E3A47; /* Swapped from burgundy to Deep Slate Blue */
  margin-bottom: 35px;
  font-weight: 700;
  text-decoration: none;
}

.mke-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mke-link-list li {
  margin-bottom: 15px;
}

.mke-link-list a {
  text-decoration: none;
  color: #4a4a4a;
  font-size: 18px;
  transition: 0.3s;
}

.mke-link-list a:hover {
  color: #1E3A47; /* Swapped hover state to brand Deep Slate Blue */
  padding-left: 5px;
}

.mke-info-text {
  font-style: normal;
  font-size: 18px;
  line-height: 1.8;
  color: #4a4a4a;
 
}

.mke-hotel-name {
  color: #324955;
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
}

.mke-contact-link {
  display: block;
  text-decoration: none;
  color: #4a4a4a;
  margin-bottom: 10px;
  font-size: 18px;
  transition: 0.3s;
}

.mke-phone-bold {
  font-weight: 700;
  font-size: 18px;
  color: #324955;
   text-decoration: none;
}

.mke-border-left {
  border-left: 1px solid #e0e0de;
  padding-left: 50px; /* Deeper padding for the vertical lines */
}

.mke-social-row {
  margin-top: -30px;
  display: flex;
  gap: 20px;
}

.mke-soc-icon {
  color: #324955;
  font-size: 25px;
  opacity: 0.5;
  transition: 0.3s;
}

.mke-soc-icon:hover {
  opacity: 1;
  color: #1E3A47; /* Swapped hover state to brand Deep Slate Blue */
  transform: translateY(-3px);
}

/* --- TIER 3: BOTTOM FLOOR --- */
.mke-footer-bottom {
  background-color: #f9f9f8;
  padding: 50px 0;
  border-top: 1px solid #e0e0de;
}

.mke-ownership-statement {
  font-size: 15px;
  color: #777;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

/* Updated layout configuration to center legal links gracefully */
.mke-legal-wrapper {
  display: flex;
  justify-content: center; /* Centered layout block */
  align-items: center;
  border-top: 1px solid #e0e0de;
  padding-top: 30px;
}

.mke-legal-links a {
  font-size: 15px;
  color: #777;
  text-decoration: none;
  transition: 0.3s;
}

.mke-legal-links a:hover {
  color: #1E3A47;
}

.mke-pipe {
  margin: 0 15px;
  color: #c5a367;
}

/* --- Bullets & Spacing Update --- */

.mke-bulleted {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mke-bulleted li {
  position: relative;
  padding-left: 20px; /* Space for the bullet */
  margin-bottom: 18px; /* Increased spacing to make it look larger */
}

/* Custom Geometric Bullet */
.mke-bulleted li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px; /* Centers bullet with first line of text */
  width: 6px;
  height: 6px;
  background-color: #c5a367; /* Gold color to match your theme */
  transform: rotate(45deg); /* Makes it a diamond shape */
  transition: all 0.3s ease;
}

.mke-bulleted li:hover::before {
  background-color: #1E3A47; /* Changes to brand Deep Slate Blue on hover */
  transform: rotate(90deg);
}

.mke-bulleted li a {
  text-decoration: none;
  color: #4a4a4a;
  font-size: 18px; /* Increased font size */
  font-weight: 500;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.mke-bulleted li a:hover {
  color: #324955;
  transform: translateX(5px); /* Subtle shift to the right */
}

/* Ensure the headings match the increased scale */
.mke-heading {
  font-size: 25px; /* Scaled up from 11px */
  letter-spacing: 3px;
  margin-bottom: 40px;
}
/* Mobile Devices (768px and below) */
@media screen and (max-width: 768px) {
  .mke-footer-top .mke-flex-between {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .mke-grid-layout {
    display: block; /* Stack the main sections (Explore, Location, etc.) */
    padding: 0 5%;
  }

  /* --- EXPLORE SECTION (FLEX FLOW) --- */
  .mke-bulleted {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap like the screenshot */
    justify-content: flex-start;
    gap: 15px 30px; /* Vertical and Horizontal spacing between links */
    text-align: left;
    margin: 0;
    padding: 0;
  }

  .mke-bulleted li {
    margin-bottom: 0; /* Let the gap handle spacing */
    flex: 0 1 auto; /* Items only take as much space as their text */
    padding-left: 18px;
    white-space: nowrap; /* Prevents a single link from breaking into two lines */
  }

  /* --- ALIGNMENT FOR HEADINGS & TEXT --- */
  .mke-heading {
    text-align: left;
    margin: 40px 0 20px 0; /* Space out the sections */
    font-size: 22px;
  }

  .mke-info-text, 
  .mke-hotel-name, 
  .mke-contact-link,
  .mke-phone-bold {
    text-align: left;
    display: inline;
  
  }

  .mke-social-row {
    justify-content: flex-start;
  }

  /* --- FOOTER BOTTOM --- */
  .mke-legal-wrapper {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .mke-pipe {
    display: none;
  }
}
/* --- INNER PAGE HERO BASE --- */
.inner-hero {
    position: relative;
    width: 100%;
    height: 70vh; /* Shorter height ideal for internal info-dense pages */
    min-height: 450px;
    background: #0c1a20; 
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* --- THE KINETIC SINGLE ZOOM MOTION --- */
.inner-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.inner-bg-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4) contrast(1.1);
    
    /* Elegant infinite pulse or immediate smooth onload zoom */
    transform: scale(1.15);
    animation: innerZoomReveal 8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes innerZoomReveal {
    0% {
        transform: scale(1.15) translateY(0);
    }
    100% {
        transform: scale(1.03) translateY(0);
    }
}

/* --- INNER TYPOGRAPHY MATCHING LAYER --- */
.inner-content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0 8%;
}

.inner-hero-container {
    max-width: 1280px;
}

/* Masking text blocks for the classic "Rise Up" entrance */
.inner-tag, .inner-line {
    overflow: hidden;
    display: block;
}

.inner-tag span {
    display: block;
    color: #C5A367;
    font-weight: 800;
    letter-spacing: 5px;
    font-size: 13px;
    text-transform: uppercase;
    transform: translateY(110%);
    animation: innerTextRise 1s cubic-bezier(0.19, 1, 0.22, 1) 0.3s forwards;
}

.inner-title .inner-line span {
    display: block;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    color: #ffffff;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    transform: translateY(110%);
    animation: innerTextRise 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.5s forwards;
}

.inner-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    max-width: 1280px;
    line-height: 1.6;
    margin: 20px 0 0 0;
    opacity: 0;
    transform: translateY(20px);
    animation: innerDescFade 1s ease 0.9s forwards;
}

/* --- MOTION ANIMATION RULES --- */
@keyframes innerTextRise {
    to { transform: translateY(0); }
}

@keyframes innerDescFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================================
   Tablet Adaptations (iPad / Media Breakpoint under 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .inner-hero {
        height: 55vh; /* Shifts from viewport height dependency to dynamic scaling */
        min-height: 480px;
    }

    .inner-content {
        padding: 0 6%; /* Slightly more horizontal space for content presentation */
    }

    .inner-title .inner-line span {
        line-height: 1.25; /* Loosened line height to handle word wrap cleanly */
    }

    .inner-description {
        font-size: 16px;
        margin-top: 20px;
        max-width: 90%;
    }
}


/* ==========================================================================
   Mobile Adaptations (Smartphones / Media Breakpoint under 767px)
   ========================================================================== */
@media (max-width: 767px) {
    .inner-hero {
        height: auto; /* Drops VH rules completely on phones to avoid text overflow */
        padding: 120px 0 80px 0; /* Uses solid spatial padding to contain elements gracefully */
        min-height: 420px;
        align-items: flex-end; /* Anchors content to the bottom quadrant like luxury mobile lookbooks */
    }

    .inner-content {
        padding: 0 24px; /* Hard pixel layout grids for small screens */
    }

    .inner-tag span {
        font-size: 11px;
        letter-spacing: 3px;
        margin-bottom: 6px;
    }

    .inner-title .inner-line span {
        font-size: 1.95rem; /* Strict, non-breaking size fallback targeting small screens */
        line-height: 1.3; /* Relaxed baseline height for multi-line headers */
        letter-spacing: 0.5px;
    }

    .inner-description {
        font-size: 14.5px;
        line-height: 1.6;
        margin-top: 16px;
        max-width: 100%;
        color: rgba(255, 255, 255, 0.9); /* Enhanced mobile crisp readability */
    }
}




/* --- EDITORIAL ASYMMETRIC CANVAS --- */
.mke-canvas-section {
  padding: 50px 0;
  background-color: #ffffff;
  font-family: inherit;
}

.mke-canvas-container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 4%;
}

/* --- CENTERED HERO INTRO --- */
.mke-canvas-intro-center {
  text-align: center;
  max-width: 1280px; /* Slightly wider to give breathing room to the antique layout style */
  margin: 0 auto 50px;
}

.mke-canvas-heading {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 35px 0;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Row 1: Slate Blue Text Elements */
.mke-head-primary {
  color: #1e3a47; /* Primary Deep Slate Blue */
  font-size: 0.95em;
}

/* Row 2 & 3: Multi-line Antique Gold Text Elements */
.mke-head-brand {
  color: #c5a059; /* Brand Antique Gold */
  font-weight: 700;
  letter-spacing: 0px;
}

.mke-canvas-lead {
  font-size: 18px;
  line-height: 1.8;
  color: #555555;
  max-width: 1280px;
  margin: 0 auto 40px;
}

/* Tag Cloud (Perfectly Centered Alignment) */
.mke-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 25px;
  margin: 0 auto;
}

.mke-tag-cloud span {
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  color: #1e3a47; /* Primary Deep Slate Blue */
  letter-spacing: 1px;
  position: relative;
}

.mke-tag-cloud span::after {
  content: "•";
  position: absolute;
  right: -15px;
  color: #c5a059; /* Brand Antique Gold Accent */
}

.mke-tag-cloud span:last-child::after {
  display: none;
}

/* --- STRUCTURED DATA ROWS --- */
.mke-canvas-row {
  display: grid;
  grid-template-columns: 0.8fr 2fr;
  gap: 60px;
  padding: 80px 0;
  border-top: 1px solid #1e3a47; /* Structural brand border lines */
}

/* --- LEFT SIDE: STICKY LABELS --- */
.mke-canvas-left {
  position: relative;
}

.mke-row-title {
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;
  color: #1e3a47; /* Primary Deep Slate Blue */
  letter-spacing: 1.5px;
  margin: 0;
}

@media (min-width: 992px) {
  .mke-sticky-title {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
  }
}

/* --- RIGHT SIDE: PREMIUM LAYOUT NODES --- */
.mke-split-text-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.mke-feature-node {
  margin-bottom: 40px;
}

.mke-feature-node:last-child {
  margin-bottom: 0;
}

.mke-feature-node h4 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #1e3a47; /* Primary Deep Slate Blue */
  font-weight: 800;
  margin: 0 0 12px 0;
}

.mke-feature-node p {
  font-size: 17px;
  line-height: 1.65;
  color: #666666;
  margin: 0;
}

/* Asymmetric Grid Matrix for Room Features */
.mke-room-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.mke-matrix-item {
  background-color: #faf9f6; /* Antique soft off-white tone */
  padding: 35px;
  transition: transform 0.3s ease;
}

.mke-matrix-item:hover {
  transform: translateY(-4px);
}

.mke-matrix-item h5 {
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c5a059; /* Brand Antique Gold */
  font-weight: 400;
  margin: 0 0 12px 0;
}

.mke-matrix-item p {
  font-size: 17px;
  line-height: 1.6;
  color: #444444;
  margin: 0;
}

/* Linear Horizontal Rows for Policies */
.mke-policy-stripes {
  display: flex;
  flex-direction: column;
}

.mke-stripe {
  display: grid;
  grid-template-columns: 0.8fr 2fr;
  padding: 25px 0;
  border-bottom: 1px dashed #e2e1dd;
}

.mke-stripe:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mke-stripe-label {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #1e3a47; /* Primary Deep Slate Blue */
}

.mke-stripe-value {
  font-size: 17px;
  line-height: 1.5;
  color: #555555;
}

/* ==========================================================================
   Tablet Adaptations (iPad / Media Breakpoint under 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .mke-canvas-section {
    padding: 80px 0;
  }

  .mke-canvas-intro-center {
    margin-bottom: 50px;
  }

  .mke-canvas-row {
    grid-template-columns: 1fr; /* Drop asymmetric side columns to prevent squeezing */
    gap: 30px;
    padding: 50px 0;
  }

  .mke-row-title {
    font-size: 22px;
    border-bottom: 2px solid #c5a059; /* Elegant dividing strip added under title for tablets */
    padding-bottom: 10px;
    display: inline-block;
  }

  .mke-split-text-block {
    gap: 40px;
  }

  .mke-room-matrix {
    gap: 20px;
  }

  .mke-matrix-item {
    padding: 28px;
  }

  .mke-stripe {
    grid-template-columns: 1fr 2fr; /* Retains inline row reading flow on medium layout frames */
    gap: 20px;
  }
}


/* ==========================================================================
   Mobile Adaptations (Smartphones / Media Breakpoint under 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .mke-canvas-section {
    padding: 60px 0;
  }

  .mke-canvas-heading {
    font-size: 1.85rem; /* Strict non-breaking absolute mobile title target */
    line-height: 1.25;
    margin-bottom: 20px;
  }

  .mke-canvas-lead {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 30px;
  }

  /* Structural protection for tag clouds on miniature viewports */
  .mke-tag-cloud {
    gap: 10px 20px;
  }

  .mke-tag-cloud span {
    font-size: 11.5px;
    letter-spacing: 0.5px;
  }

  .mke-tag-cloud span::after {
    right: -12px;
  }

  .mke-canvas-row {
    padding: 40px 0;
  }

  .mke-row-title {
    font-size: 19px;
    letter-spacing: 1px;
  }

  .mke-split-text-block, 
  .mke-room-matrix {
    grid-template-columns: 1fr; /* Convert interior content blocks into single columns */
    gap: 25px;
  }

  .mke-feature-node {
    margin-bottom: 25px;
  }

  .mke-feature-node h4 {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .mke-feature-node p,
  .mke-matrix-item p,
  .mke-stripe-value {
    font-size: 14.5px;
    line-height: 1.55;
  }

  .mke-matrix-item h5 {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .mke-stripe {
    grid-template-columns: 1fr; /* Policies drop stacked vertically for natural touch reading */
    gap: 6px;
    padding: 18px 0;
  }

  .mke-stripe-label {
    font-size: 13px;
    letter-spacing: 1px;
  }
}

/* --- EDITORIAL INTERACTION CANVAS --- */
.mke-todo-section {
  padding: 120px 0;
  background-color: #ffffff;
  font-family: inherit;
}

.mke-todo-container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 4%;
}

/* --- HEADER AREA --- */
.mke-todo-intro {
  margin-bottom: 80px;
  max-width: 1280px;
}

.mke-todo-intro h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 25px 0;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mke-todo-intro h2 .primary {
  color: #1e3a47;
}

.mke-todo-intro h2 .accent {
  color: #c5a059;
  font-weight: 700;
}

.mke-todo-lead {
  font-size: 17.5px;
  line-height: 1.75;
  color: #555555;
  margin: 0;
}

/* --- INTERACTIVE SPLIT WORKSPACE --- */
.mke-todo-split-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 80px;
  align-items: start;
}

/* STICKY LEFT SIDE: Frame Frame & Counter Tracking */
.mke-todo-sticky-left {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  height: calc(85vh - 100px);
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mke-todo-image-frame {
  position: relative;
  width: 100%;
  height: 82%;
  background-color: #faf9f6;
  overflow: hidden;
  border: 1px solid rgba(30, 58, 71, 0.1);
}

.mke-todo-img-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

/* Active Class trigger controlled via basic intersection observer */
.mke-todo-img-layer.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.mke-todo-meta-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid #1e3a47;
}

.mke-todo-brand-label {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 2px;
  color: #c5a059;
}

.mke-todo-counter {
  font-size: 16px;
  font-weight: 700;
  color: #1e3a47;
  letter-spacing: 1px;
}

/* SCROLLABLE RIGHT SIDE: Luxury Content Blocks */
.mke-todo-scroll-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mke-attraction-card {
  background-color: #faf9f6;
  padding: 50px 45px;
  border-left: 0px solid #c5a059;
  transition: border-left 0.4s ease, background-color 0.4s ease;
}

/* Soft activation visual focus style */
.mke-attraction-card.is-focused {
  border-left: 5px solid #c5a059;
  background-color: #f5f3ed;
}

.mke-card-tag {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
  color: #c5a059;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 15px;
}

.mke-attraction-card h3 {
  font-size: 26px;
  color: #1e3a47;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 20px 0;
  letter-spacing: 0.5px;
}

.mke-attraction-card p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #555555;
  margin: 0;
}

/* ==========================================================================
   Responsive Adaptations (Tablets & Mobile Viewports Re-Architected)
   ========================================================================== */
@media (max-width: 1024px) {
  .mke-todo-section {
    padding: 60px 0;
  }
  
  /* Retain the split-screen view on tablets to maintain visual layout balance */
  .mke-todo-split-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
  }

  .mke-todo-sticky-left {
    position: -webkit-sticky;
    position: sticky;
    top: 90px; /* Offset to clear fixed main navigation headers */
    height: calc(70vh - 100px);
    min-height: 380px;
  }

  .mke-todo-image-frame {
    height: 85%;
  }

  .mke-todo-meta-footer {
    padding: 12px 0;
  }
  
  .mke-todo-scroll-right {
    gap: 30px;
  }
  
  .mke-attraction-card {
    padding: 35px 30px;
  }

  .mke-attraction-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }
}

@media (max-width: 767px) {
  .mke-todo-section {
    padding: 50px 0;
  }

  .mke-todo-intro h2 {
    font-size: 1.85rem;
    line-height: 1.25;
  }

  .mke-todo-lead {
    font-size: 15px;
    line-height: 1.65;
  }

  /* Structural change for phone layouts */
  .mke-todo-split-grid {
    grid-template-columns: 1fr;
    gap: 0px;
  }

  /* Lock image banner directly to screen top during text scroll transitions */
  .mke-todo-sticky-left {
    position: -webkit-sticky;
    position: sticky;
    top: 60px; /* Standard mobile header clearing zone */
    width: 100%;
    height: 260px;
    min-height: auto;
    z-index: 10;
    background-color: #ffffff;
    padding-bottom: 15px;
  }

  .mke-todo-image-frame {
    height: 100%;
    border-bottom: 2px solid #c5a059; /* Visual baseline bridge connection */
  }

  /* Temporarily hide metadata timeline details on phone screens to prevent visual clutter */
  .mke-todo-meta-footer {
    display: none;
  }

  /* Slide card elements underneath the fixed dynamic top banner view */
  .mke-todo-scroll-right {
    position: relative;
    z-index: 5;
    gap: 20px;
    padding-top: 25px;
  }

  .mke-attraction-card {
    padding: 30px 20px;
    border-left: 4px solid transparent;
  }

  .mke-attraction-card.is-focused {
    border-left: 4px solid #c5a059;
  }

  .mke-attraction-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .mke-attraction-card p {
    font-size: 14px;
    line-height: 1.6;
  }
}


/* --- DEEP SLATE PREMIUM EDITORIAL CATALOG --- */
.mke-catalog-section {
  padding: 40px 0;
  font-family: inherit;
  color: #ffffff;
  
  /* Sticky Background Image Configurations */
  position: relative;
  background-image: linear-gradient(
      to bottom,
      rgba(35, 58, 71, 0.92), 
      rgba(35, 58, 71, 0.92)
    ), 
    url('../images/hudson-park.jpg'); /* Replace with your actual background image file path */
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Fallback fix for iOS Safari/Mobile Webkit browsers where fixed attachments glitch */
@supports (-webkit-overflow-scrolling: touch) {
  .mke-catalog-section {
    background-attachment: scroll;
  }
}

.mke-catalog-container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 4%;
}

/* --- VERTICAL CONTINUOUS CATALOG WRAP --- */
.mke-catalog-block {
  margin-bottom: 70px;
}

.mke-catalog-block:last-child {
  margin-bottom: 0;
}

/* Category Large Headings */
.mke-catalog-category-title {
  font-size: 28px;
  font-weight: 400;
  text-transform: uppercase;
  color: #c5a059; /* Brand Antique Gold */
  letter-spacing: 2px;
  margin: 0 0 30px 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.mke-catalog-category-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(197, 160, 89, 0.4), transparent);
}

/* Flex Masonry Layout List */
.mke-catalog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px 40px;
  padding-left: 15px;
  border-left: 2px solid rgba(197, 160, 89, 0.2); /* Left-anchored accent timeline line */
}

/* INDIVIDUAL MINIMAL CARD */
.mke-catalog-item {
  position: relative;
  transition: transform 0.3s ease;
}

.mke-catalog-item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 10px;
  width: 8px;
  height: 8px;
  background-color: #c5a059;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mke-catalog-item:hover {
  transform: translateX(5px);
}

.mke-catalog-item:hover::before {
  opacity: 1;
}

/* Inline Dynamic Metadata Layout Elements */
.mke-item-meta-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.mke-item-distance {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  color: #c5a059; /* Brand Antique Gold */
  letter-spacing: 0.5px;
  background: rgba(197, 160, 89, 0.1);
  padding: 2px 6px;
}

.mke-item-name {
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.3px;
}

.mke-item-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* ==========================================================================
   Responsive Adaptations (Tablets & Mobile Viewports)
   ========================================================================== */
@media (max-width: 1024px) {
  .mke-catalog-section {
    padding: 80px 0;
  }
  
  .mke-catalog-list {
    grid-template-columns: 1fr 1fr;
    gap: 25px 30px;
  }
}

@media (max-width: 767px) {
  .mke-catalog-section {
    padding: 60px 0;
  }

  .mke-catalog-list {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-left: 10px;
  }
  
  .mke-catalog-item:hover {
    transform: none;
  }

  .mke-catalog-category-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
}


/* --- PREMIUM CONTACT CORE SECTION --- */
.mke-contact-section {
  padding: 40px 0;
  background-color: #ffffff;
  font-family: inherit;
}

.mke-contact-container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 4%;
}

/* Main Split Grid Workspace */
.mke-contact-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 100px;
  align-items: start;
}

/* LEFT SIDE: Narrative Information Hub */
.mke-contact-info h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 30px 0;
  letter-spacing: 0.5px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mke-contact-info h2 .primary {
  color: #1e3a47; /* Brand Blue */
}

.mke-contact-info h2 .accent {
  color: #c5a059; /* Brand Antique Gold */
  font-weight: 700;
}

.mke-contact-desc {
  font-size: 17.5px;
  line-height: 1.8;
  color: #555555;
  margin: 0;
}

/* RIGHT SIDE: Luxury Content Information Cards */
.mke-contact-cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.mke-meta-card {
  background-color: #faf9f6;
  padding: 40px 45px;
  border-left: 4px solid #1e3a47;
  transition: border-left-color 0.3s ease;
}

.mke-meta-card.accent-card {
  border-left-color: #c5a059;
}

.mke-meta-card label {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  color: #c5a059;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 15px;
}

.mke-meta-card address {
  font-style: normal;
  font-size: 20px;
  line-height: 1.5;
  color: #1e3a47;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.mke-contact-link {
  font-size: 24px;
  font-weight: 800;
  color: #1e3a47;
  text-decoration: none;
  display: inline-block;
  transition: color 0.3s ease;
}

.mke-contact-link:hover {
  color: #c5a059;
}

/* ==========================================================================
   Responsive Adaptations (Tablets & Mobile Viewports)
   ========================================================================== */
@media (max-width: 1024px) {
  .mke-contact-section {
    padding: 80px 0;
  }

  .mke-contact-split {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .mke-meta-card {
    padding: 35px 35px;
  }
}

@media (max-width: 767px) {
  .mke-contact-section {
    padding: 60px 0;
  }

  .mke-contact-info h2 {
    font-size: 1.85rem;
    line-height: 1.25;
    margin-bottom: 20px;
  }

  .mke-contact-desc {
    font-size: 15px;
    line-height: 1.65;
  }

  .mke-meta-card {
    padding: 30px 25px;
  }

  .mke-meta-card address {
    font-size: 17px;
  }

  .mke-contact-link {
    font-size: 20px;
  }
}

/* --- PREMIUM LOCATION CORE CANVAS --- */
.mke-location-section {
  padding: 120px 0;
  background-color: #ffffff;
  font-family: inherit;
}

.mke-location-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4%;
}

/* Master Asymmetric Structural Grid */
.mke-location-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

/* LEFT COLUMN: Editorial Text & Dynamic Routing Form */
.mke-location-content h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 25px 0;
  letter-spacing: 0.5px;
}

.mke-location-content h2 .primary {
  color: #1e3a47; /* Brand Deep Slate Blue */
  display: block;
}

.mke-location-content h2 .accent {
  color: #c5a059; /* Brand Antique Gold */
  font-weight: 700;
  display: block;
}

.mke-location-lead {
  font-size: 16.5px;
  line-height: 1.75;
  color: #555555;
  margin: 0 0 40px 0;
}

/* --- PREMIUM INTERACTIVE DIRECTIONS FORM --- */
.route-form {
  width: 100%;
  max-width: 520px;
}

.route-form .input-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.route-form input[type="text"] {
  width: 100%;
  padding: 18px 25px;
  font-size: 15px;
  font-family: inherit;
  color: #1e3a47;
  background-color: #faf9f6;
  border: 1px solid rgba(30, 58, 71, 0.15);
  border-radius: 0; /* Clean architectural sharp corners */
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  box-sizing: border-box;
}

.route-form input[type="text"]:focus {
  border-color: #c5a059;
  background-color: #ffffff;
}

.route-form input[type="text"]::placeholder {
  color: rgba(30, 58, 71, 0.5);
}

.route-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: #1e3a47;
  color: #ffffff;
  border: none;
  padding: 18px 35px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.route-submit-btn svg {
  transition: transform 0.3s ease;
}

.route-submit-btn:hover {
  background-color: #c5a059;
  color: #ffffff;
}

.route-submit-btn:hover svg {
  transform: translateX(4px);
}

/* RIGHT COLUMN: Modern Floating Map Card Element */
.mke-location-map-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 70%; /* Restricts map proportion cleanly across monitors */
  height: 0;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(30, 58, 71, 0.08);
  border: 1px solid rgba(30, 58, 71, 0.05);
}

.mke-location-map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Responsive Adaptations (Tablets & Mobile Viewports)
   ========================================================================== */
@media (max-width: 1024px) {
  .mke-location-section {
    padding: 80px 0;
  }

  .mke-location-grid {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  
  .mke-location-map-wrapper {
    padding-bottom: 55%; /* Flattens slightly to save layout vertical scrolling space */
  }
}

@media (max-width: 767px) {
  .mke-location-section {
    padding: 60px 0;
  }

  .mke-location-content h2 {
    font-size: 1.85rem;
    line-height: 1.25;
  }

  .mke-location-lead {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 30px;
  }

  .route-form input[type="text"],
  .route-submit-btn {
    padding: 16px 20px;
    font-size: 14px;
  }
  
  .mke-location-map-wrapper {
    padding-bottom: 75%; /* Shifts square-ish to make viewport interaction intuitive */
  }
}



/* --- PREMIUM SITEMAP CORE SECTION --- */
.mke-sitemap-section {
  padding: 40px 0;
  background-color: #ffffff;
  font-family: inherit;
}

.mke-sitemap-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 4%;
}

/* --- EDITORIAL HEADER --- */
.mke-sitemap-header {
  margin-bottom: 60px;
  max-width: 1280px;
}

.mke-sitemap-header h2 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 20px 0;
  letter-spacing: 0.5px;
}

.mke-sitemap-header h2 .primary {
  color: #1e3a47; /* Brand Blue */
  display: block;
}

.mke-sitemap-header h2 .accent {
  color: #c5a059; /* Brand Antique Gold */
  font-weight: 700;
  display: block;
}

.mke-sitemap-desc {
  font-size: 18px;
  line-height: 1.75;
  color: #555555;
  margin: 0;
}

/* --- THE INDEX GRID MATRIX --- */
.mke-sitemap-matrix {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  border-top: 1px solid rgba(30, 58, 71, 0.15);
  padding-top: 40px;
}

.mke-sitemap-matrix li {
  position: relative;
}

.mke-sitemap-matrix li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 25px;
  background-color: #faf9f6;
  color: #1e3a47;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-left: 0px solid #c5a059;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Luxury Interactive Hover State */
.mke-sitemap-matrix li a:hover {
  background-color: #1e3a47;
  color: #ffffff;
  border-left: 4px solid #c5a059;
  padding-left: 30px;
}

/* Micro-indicator Arrow Icon inside links */
.mke-sitemap-matrix li a::after {
  content: "→";
  font-size: 16px;
  font-weight: 300;
  color: #c5a059;
  transition: transform 0.3s ease, color 0.3s ease;
}

.mke-sitemap-matrix li a:hover::after {
  color: #ffffff;
  transform: translateX(4px);
}

/* ==========================================================================
   Responsive Adaptations (Tablets & Mobile Viewports)
   ========================================================================== */
@media (max-width: 1024px) {
  .mke-sitemap-section {
    padding: 80px 0;
  }
  
  .mke-sitemap-matrix {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

@media (max-width: 767px) {
  .mke-sitemap-section {
    padding: 60px 0;
  }

  .mke-sitemap-header h2 {
    font-size: 1.85rem;
    line-height: 1.25;
  }

  .mke-sitemap-desc {
    font-size: 15px;
    line-height: 1.65;
  }

  .mke-sitemap-matrix {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 30px;
  }

  .mke-sitemap-matrix li a {
    padding: 18px 20px;
    font-size: 15px;
  }
}

/* --- MODERN ASYMMETRIC EDITORIAL FAQ --- */
.mke-faq-section {
  padding: 120px 0;
  background-color: #ffffff;
  font-family: inherit;
  color: #1e3a47;
}

.mke-faq-container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 4%;
}

/* Master Grid Structure */
.mke-faq-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 100px;
  align-items: start;
}

/* LEFT SIDE: Clean Sticky Branding Block */
.mke-faq-sticky-side {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

.mke-faq-sticky-side h2 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
}

.mke-faq-sticky-side h2 .primary {
  color: #1e3a47; /* Brand Deep Slate */
  display: block;
}

.mke-faq-sticky-side h2 .accent {
  color: #c5a059; /* Brand Antique Gold */
  font-weight: 700;
  display: block;
}

.mke-faq-meta-label {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  color: #c5a059;
  letter-spacing: 3px;
  display: block;
  margin-bottom: 15px;
}

/* RIGHT SIDE: Smooth Flowing Q&A Index */
.mke-faq-index-stack {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.mke-faq-row {
  border-bottom: 1px solid rgba(30, 58, 71, 0.1);
  padding-bottom: 50px;
  transition: border-color 0.3s ease;
}

.mke-faq-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mke-faq-row:hover {
  border-color: #c5a059;
}

.mke-faq-question {
  font-size: 20px;
  font-weight: 800;
  color: #1e3a47;
  margin: 0 0 20px 0;
  line-height: 1.4;
  letter-spacing: -0.2px;
  position: relative;
}

.mke-faq-answer {
  font-size: 16px;
  line-height: 1.8;
  color: #555555;
  margin: 0;
}

/* Premium Link Typographic Treatment */
.mke-faq-answer a {
  color: #1e3a47;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.mke-faq-answer a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #c5a059;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.mke-faq-answer a:hover {
  color: #c5a059;
}

.mke-faq-answer a:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   Responsive Adaptations (Tablets & Mobile Viewports)
   ========================================================================== */
@media (max-width: 1024px) {
  .mke-faq-section {
    padding: 80px 0;
  }

  .mke-faq-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .mke-faq-sticky-side {
    position: relative;
    top: 0;
  }
}

@media (max-width: 767px) {
  .mke-faq-section {
    padding: 60px 0;
  }

  .mke-faq-index-stack {
    gap: 40px;
  }

  .mke-faq-row {
    padding-bottom: 35px;
  }

  .mke-faq-question {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .mke-faq-answer {
    font-size: 14.5px;
    line-height: 1.7;
  }
}
/* Container adjusted to merge perfectly with the warm cream section below */
.booking-container {
  width: 100%;
  background-color: #fcfaf7; /* Matches your layout's warm off-white/cream background */
  padding: 30px 20px; 
  position: relative;
  z-index: 99;
  box-sizing: border-box;
}

/* Redesigned Reservation Box aligned with Best Western Plus Branding */
.reservation-box {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e2dfda; /* Softer, warmer border line */
  border-left: 5px solid #ccaa66; /* Elegant Best Western Gold anchor accent */
  box-sizing: border-box;
  padding: 30px 40px; 
  box-shadow: 0 10px 25px rgba(26, 43, 60, 0.05); /* Soft drop shadow using layout slate color */
}

.reservation-box form {
  display: flex;
  align-items: flex-end; 
  gap: 20px;
  width: 100%;
}

.form-group {
  flex: 1;
  min-width: 160px; 
  display: flex;
  flex-direction: column;
  position: relative;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1a2b3c; /* Deep Luxury Slate/Navy from layout */
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 16px; 
}

.form-group label svg {
  color: #ccaa66; /* Gold Accent Icon */
}

/* Input and Select Fields */
.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2dfda;
  border-radius: 2px;
  font-size: 14px;
  color: #222;
  background: #ffffff;
  height: 48px;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

.input-with-icon {
  position: relative;
  width: 100%;
}

.input-with-icon input {
  cursor: pointer;
}

/* Vertically Centered Custom Dropdown Arrow */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select-wrapper::after {
  content: "▼";
  font-size: 8px;
  color: #1a2b3c; /* Deep Luxury Slate arrow */
  position: absolute;
  right: 15px;
  bottom: 19px; 
  pointer-events: none;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #ccaa66; /* Gold focus ring */
  background: #fff;
  outline: none;
}

/* Button Group Wrapper */
.form-btn-group {
  flex: 1.2; 
  min-width: 180px; 
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Check Availability Button */
.check-btn {
  width: 100%;
  height: 48px; 
  background: #1a2b3c; /* Deep Luxury Slate/Navy */
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: none;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.check-btn:hover {
  background: #ccaa66; /* Hover switches cleanly to Gold, matching the hero button styles */
  color: #ffffff;
}

/* jQuery UI Datepicker Overrides matching layout colors */
.ui-datepicker {
  border: none !important;
  box-shadow: 0 10px 25px rgba(26, 43, 60, 0.15) !important;
}
.ui-datepicker-header {
  background: #1a2b3c !important; /* Deep Luxury Slate header */
  color: #fff !important;
  border: none !important;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight {
  border: 1px solid #ccaa66 !important;
  background: #fdfaf2 !important; /* Light tint of gold/cream */
  color: #1a2b3c !important;
}
.ui-state-active, .ui-widget-content .ui-state-active {
  background: #ccaa66 !important; /* Active selection turns Gold */
  color: #fff !important;
  border: 1px solid #ccaa66 !important;
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .booking-container {
    padding: 20px 15px;
  }
  .reservation-box {
    padding: 20px; 
  }
  .reservation-box form {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  .form-group {
    width: 100%;
  }
  .form-group label {
    height: auto;
  }
  .form-btn-group {
    width: 100%;
  }
}
/* --- BACK TO TOP BUTTON DESIGN --- */
#backToTopBtn {
  display: none; /* Hidden by default; handled by JS */
  position: fixed;
  bottom: 70px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: 1.5px solid #324955;
  outline: none;
  background-color: #ffffff;
  color: #324955;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 0px; /* Kept sharp to match your booking layout style */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

#backToTopBtn:hover {
  background-color: #1E3A47;
  color: #ffffff;
  border-color: #1E3A47;
  transform: translateY(-5px); /* Clean upward micro-interaction */
}
/* --- UNIVERSAL COOKIE BANNER --- */
.uni-cookie-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #324955; /* Updated: Deep Slate Blue from your main layout */
  border-top: 1px solid #e0e0de; /* Matches layout floor borders */
  z-index: 999999;
  padding: 10px 20px; /* Slim vertical profile */
  box-sizing: border-box;
  display: none; /* Controlled dynamically by JavaScript */
}

.uni-cookie-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.uni-cookie-text {
  color: #ffffff; /* High contrast clean white text */
  font-size: 15px; /* Sized down slightly for a sleek profile */
  text-align: center;
}

.uni-cookie-link {
  color: #cbaa6a; /* Updated: Theme gold matching your layout accents */
  text-decoration: none;
  margin-left: 2px;
  font-weight: bold;
  transition: color 0.2s ease;
}

.uni-cookie-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.uni-cookie-btn {
  background-color: #cbaa6a; /* Updated: Theme gold primary button */
  color: #324955; /* Updated: High contrast Deep Slate Blue text */
  border: none;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700; /* Bold text for modern layout UI signature */
  cursor: pointer;
  border-radius: 0px; /* Updated: Made sharp to match your booking layout style precisely */
  transition: all 0.2s ease;
}

.uni-cookie-btn:hover {
  background-color: #ffffff;
  color: #324955;
}

/* Responsive adjustment for mobile screen breakpoints */
@media (max-width: 600px) {
  .uni-cookie-container {
    flex-direction: column;
    gap: 10px;
    padding: 5px 0;
  }
  .uni-cookie-text {
    font-size: 13px;
  }
}