/* Fonts — Wagumi Tones Design System */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600&family=Noto+Sans+JP:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
    /* Wagumi Tones — 和製アースカラー & 和製RGB */
    --bg-color: #F4F1EB;          /* 生成色 / Kinari — 背景70% */
    --text-color: #2C2C2C;        /* 墨色 / Sumi — 文字・ロゴ25% */
    --accent-color: #BFA07A;      /* ゴールド — 家紋・ロゴ */
    --gold-accent: #BFA07A;       /* ゴールド */
    --jp-blue: #2A4A7A;           /* 藍色 / Japan Blue — アクセント<5% */
    --card-bg: #FFFFFF;           /* カード背景 */
    --highlight-color: #2A4A7A;   /* CTAハイライト = 藍色 */
    --border-color: #2C2C2C;
    --border-light: rgba(191, 160, 122, 0.25); /* ゴールドボーダー */

    --font-main: 'Montserrat', 'Noto Sans JP', sans-serif;
    --font-display: 'Playfair Display', 'Noto Serif JP', serif;
    --font-jp-serif: 'Noto Serif JP', serif;
    --font-jp-sans: 'Noto Sans JP', sans-serif;

    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 5rem;
    --spacing-xl: 10rem;

    --header-height: 138px;
}

/* Japanese Mode Overrides */
.lang-jp {
    --font-main: 'Noto Sans JP', 'Montserrat', sans-serif;
    --font-display: 'Noto Serif JP', 'Playfair Display', serif;
    font-family: var(--font-main);
    font-weight: 300;
}

/* Japanese mobile font size adjustments */
@media (max-width: 768px) {
    .lang-jp .home-page .card-info .location {
        font-size: 0.6rem !important;
    }

    .lang-jp .home-page .card-info p {
        font-size: 0.68rem !important;
    }

    /* English mode - only location smaller */
    .home-page .card-info .location {
        font-size: 0.6rem !important;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    scroll-behavior: smooth;
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-weight: 400;
    line-height: 1.2;
}

h1 {
    font-size: clamp(3.5rem, 6vw, 6rem);
    /* Larger */
    font-family: var(--font-display);
    letter-spacing: -0.03em;
    /* Tighter */
}

h2 {
    font-size: clamp(2.5rem, 4vw, 4rem);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.subtitle {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    /* Wider spacing for elegance */
    font-size: 0.75rem;
    color: #2C2C2C;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.9;
}

/* Layout Utilities */
.container {
    max-width: 1600px;
    /* Wider canvas for luxury feel */
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Featured section stretches to edges on desktop */
.featured.container {
    max-width: 100%;
    padding: 0 2rem;
    /* Minimal side padding for edge-to-edge feel */
}

.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

@media (max-width: 768px) {
    .grid {
        gap: 0;
    }
}

.flex {
    display: flex;
}

.flex-between {
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

/* Components */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: 1px solid var(--highlight-color);
    color: var(--highlight-color);
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
}

.btn:hover {
    background: var(--highlight-color);
    color: #000;
    /* High contrast on hover */
    opacity: 1;
}

.btn-primary {
    background: var(--highlight-color);
    color: #000;
    border: none;
    font-weight: 500;
}

.btn-primary:hover {
    background: var(--accent-color);
    color: #000;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 3rem 0;
    /* Thicker header for stronger presence */
    z-index: 6000;
    /* Above detail overlay (5000) */
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.4s ease;
}

/* Spacer used on stays.html to push content below the fixed header.
   Desktop matches the ~138px header; overridden for mobile in the 768px
   breakpoint below to match the slimmer mobile header. */
.stays-top-spacer {
    width: 100%;
    padding-top: 140px;
    background: #F4F1EB;
}

header.scrolled {
    background: rgba(244, 241, 235, 0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(191, 160, 122, 0.3);
    box-shadow: 0 2px 20px rgba(44, 44, 44, 0.08);
}

/* Dark text when scrolled over light background */
header.scrolled .nav-link,
header.scrolled .lang-current {
    color: #2C2C2C !important;
}

header.scrolled .btn-login {
    border-color: #2C2C2C !important;
    color: #2C2C2C !important;
}

header.scrolled .btn-login:hover {
    background: #2C2C2C !important;
    color: #F4F1EB !important;
}

header.scrolled .mobile-menu-btn {
    color: #2C2C2C !important;
}

/* Header Search Bar */
.header-search-container {
    position: relative;
    /* Changed from absolute */
    width: 450px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin: 0 auto;
    /* Center in flex container */
    display: none;
    /* Hide when not active to prevent visual glitches */
}

body.show-header-search .header-search-container {
    opacity: 1;
    visibility: visible;
    display: block;
    /* Show in flow */
}

body.show-header-search .nav-center {
    display: none;
    /* Remove from flow to make space */
}

.header-search-input-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0.4rem 1rem;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

.header-search-input-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.header-search-input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    width: 100%;
    margin-left: 0.5rem;
    outline: none;
}

.header-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.header-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FEFCF8;
    border: 1px solid rgba(191, 160, 122, 0.3);
    border-radius: 8px;
    margin-top: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1001;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Suggestion Styles (Reused) */
.header-search-suggestions .suggestion-item {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(44, 44, 44, 0.06);
    cursor: pointer;
    transition: background 0.2s;
}

.header-search-suggestions .suggestion-item:last-child {
    border-bottom: none;
}

.header-search-suggestions .suggestion-item:hover {
    background: rgba(191, 160, 122, 0.08);
}

.header-search-suggestions .suggestion-title {
    color: #2C2C2C;
    font-size: 0.9rem;
    font-weight: 500;
}

.header-search-suggestions .suggestion-subtitle {
    color: #2C2C2C;
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

/* Mobile Tweaks for Header Search */
@media (max-width: 768px) {
    .header-search-container {
        position: absolute;
        /* Force absolute on mobile to ignore flex flow */
        left: 40%;
        /* Adjusted left per request to fix overlap */
        top: 50%;
        /* Vertically centered */
        transform: translate(-50%, -50%);
        /* Centered on both axes relative to its position */
        width: 170px;
        /* Keep narrow width or fluid */
        margin: 0;
    }

    /* Widen the suggestions dropdown on mobile */
    .header-search-suggestions {
        width: 280px;
        left: 50%;
        transform: translateX(-50%);
    }

    body.show-header-search .header-search-container {
        /* Ensure it fits on mobile header */
        display: block;
    }

    /* On mobile, we might need to hide the logo or menu button if it's too tight? 
       For now, let's just ensure it's centered and absolute so it doesn't push things.
    */

    .header-search-input-wrapper {
        padding: 0.35rem 0.8rem;
    }

    .header-search-input-wrapper:focus-within {
        width: 100%;
        /* Don't expand on mobile to avoid overflow */
    }

    .header-search-input {
        font-size: 0.8rem;
    }

    /* Ensure nav-center is hidden (it is by default on mobile usually, but careful) */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 4rem;
    /* Wide padding */
}

.mobile-search-trigger {
    display: none;
    /* Hidden by default on desktop */
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--text-color);
    font-size: 0.9rem;
    cursor: pointer;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #F4F1EB;
    cursor: pointer;
    padding: 0;
}

.mobile-menu {
    position: fixed;
    inset: 0;
    background: #F4F1EB;
    z-index: 7000;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(44, 44, 44, 0.12);
}

.btn-close-menu {
    background: none;
    border: none;
    color: #2C2C2C;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
}

.mobile-menu-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.mobile-menu-links a {
    font-family: var(--font-display);
    font-size: 2rem;
    color: #2C2C2C;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.mobile-menu-links a:hover {
    opacity: 1;
    color: var(--jp-blue);
}

.mobile-login {
    margin-top: 1rem;
    font-family: var(--font-main) !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid rgba(44, 44, 44, 0.2);
    padding: 1rem 2rem;
    border-radius: 50px;
}

/* Scroll-Triggered Mobile Menu (Desktop & Tablet) */
/* When header search is visible (scrolled past hero), hide Auth Dropdown/Login Button and show Hamburger */
body.show-header-search .auth-dropdown,
body.show-header-search .btn-login {
    display: none !important;
}

body.show-header-search .mobile-menu-btn {
    display: flex !important;
}

/* Ensure mobile menu button is hidden by default on desktop (>768px) */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none;
    }
}

/* Tablet Logo Override (769px - 1024px) - Use Abbreviated "JV" */
@media (min-width: 769px) and (max-width: 1024px) {
    .logo-desktop {
        display: none !important;
    }

    .logo-mobile {
        display: block !important;
    }
}

/* Old search-modal rules removed */

@media (max-width: 768px) {

    /* Global Mobile Visibility */
    .desktop-only,
    .nav-center {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
    }

    .mobile-search-trigger {
        display: flex !important;
        width: 100%;
        max-width: 340px;
        /* Narrower for iPhone */
        margin: 1.5rem auto 0;
        /* Gap from title */
        background: #fff;
        /* Solid White */
        padding: 1rem 1.5rem;
        /* Matches Home */
        border-radius: 50px;
        color: #000;
        /* Black Text */
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
        /* Explicit Gap */
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    /* Reset Search Container Width & Remove Ghosting */
    /* Reset Search Container Width & Remove Ghosting */
    .hero-search-container {
        min-width: auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
        background: transparent !important;
        /* No background on mobile */
        box-shadow: none !important;
        /* No shadow on mobile */
        border: none !important;
        justify-content: center;
        /* Force Center */
    }

    /* Stays Hero styles removed - search bar removed as requested */
    /* .stays-hero .container original padding was 140px, now handled via inline style on filter bar */

    .hero-headline {
        font-size: 2.5rem !important;
        /* Smaller for mobile */
    }

    .header-inner {
        padding: 0 1.5rem;
    }

    /* Slim header on mobile — the 3rem (48px) vertical padding from the base
       `header` rule is too thick on phones and eats up screen real estate
       (thick cream band above hero). Halve it on mobile. */
    header {
        padding: 1.1rem 0 !important;
    }

    /* Spacer on stays.html is trimmed to match the slimmer mobile header */
    .stays-top-spacer {
        padding-top: 72px;
    }

    /* Specific Header/Nav Adjustments */
    .header-inner .hero-search-container {
        /* If header search existed */
        min-width: auto;
    }

    .header-inner .search-field {
        padding: 0 1rem;
    }
}

.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3.5rem;
}

.nav-link {
    position: relative;
    color: #F4F1EB;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    opacity: 0.88;
    padding: 0.75rem 0.25rem;
    border-radius: 0;
    border: none;
    background: transparent;
    transition: color 0.25s ease, opacity 0.25s ease;
}

.nav-link:hover {
    opacity: 1;
    color: #F4F1EB;
    background: transparent;
    border: none;
}

/* Short accent dash above the active / hovered nav link */
.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 2px;
    background: var(--gold-accent);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover::before,
.nav-link.active::before {
    transform: translateX(-50%) scaleX(1);
}

/* When header has white background (scrolled), give nav links dark theme */
header.scrolled .nav-link {
    color: #2C2C2C;
    background: transparent;
    border: none;
}

header.scrolled .nav-link:hover {
    color: #2C2C2C;
    background: transparent;
    border: none;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
}

.lang-current {
    background: transparent;
    border: none;
    color: #F4F1EB;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 500;
    opacity: 0.85;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.lang-current:hover {
    opacity: 1;
}

.lang-current svg {
    transition: transform 0.3s ease;
}

.lang-dropdown.open .lang-current svg {
    transform: rotate(180deg);
}

.lang-options {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: #FEFCF8;
    border: 1px solid rgba(191, 160, 122, 0.3);
    border-radius: 6px;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(44, 44, 44, 0.1);
}

.lang-dropdown.open .lang-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #2C2C2C;
    transition: background 0.2s ease;
}

.lang-option:hover {
    background: rgba(191, 160, 122, 0.1);
    color: var(--jp-blue);
}

.lang-option:first-child {
    border-radius: 6px 6px 0 0;
}

.lang-option:last-child {
    border-radius: 0 0 6px 6px;
}

.btn-login {
    border: 1px solid rgba(244, 241, 235, 0.55);
    padding: 0.85rem 1.6rem;
    border-radius: 2px;
    font-size: 0.72rem;
    color: #F4F1EB;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background: var(--gold-accent);
    color: #fff;
    border-color: var(--gold-accent);
}

/* Stays Page Specifics */
body.stays-page {
    background-color: #F4F1EB;
    color: #2C2C2C;
}

.stays-page .nav-logo,
.stays-page .nav-link,
.stays-page .lang-current,
.stays-page .btn-login,
.stays-page .mobile-menu-btn,
.contact-page .nav-link,
.contact-page .lang-current,
.contact-page .btn-login,
.contact-page .mobile-menu-btn {
    color: #2C2C2C !important;
}

/* Contact page has no dark hero — always show dark logo */
.contact-page .logo-img--light { display: none; }
.contact-page .logo-img--dark  { display: block; }

.stays-page .btn-login,
.contact-page .btn-login {
    border-color: #2C2C2C;
}

.stays-page .btn-login:hover {
    background: #2C2C2C;
    color: #F4F1EB;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    /* Align start to allow scrolling */
    flex-wrap: nowrap;
    /* Force single line */
    width: fit-content;
    /* Shrink to content... */
    max-width: 100%;
    /* ...but constrain to screen */
    margin: 0 auto 4rem auto;
    /* Center the block */
    overflow-x: auto;
    /* Scrollable */
    padding-bottom: 1rem;
    /* Space for scrollbar hide */
    scrollbar-width: none;
    /* Firefox */
    -webkit-overflow-scrolling: touch;
    padding-left: 1rem;
    padding-right: 1rem;
}

.filter-bar::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    border: 1px solid rgba(44, 44, 44, 0.15);
    background: rgba(255, 255, 255, 0.6);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    color: #2C2C2C;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 500;
}

.filter-btn:hover,
.filter-btn.active {
    background: #2A4A7A;
    color: #F4F1EB;
    border-color: #2A4A7A;
    box-shadow: 0 4px 16px rgba(42, 74, 122, 0.25);
}

/* Property List Item (Stays Page) */
.property-list-item {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 2rem;
    background: transparent;
    /* Clean list */
    border-radius: 0;
    /* Clean list */
    padding-bottom: 12px;
    margin-bottom: 1.5rem;
    align-items: start;
    cursor: pointer;
    /* Clickable */
}

.list-img-wrapper {
    width: 100%;
    height: 280px;
    overflow: hidden;
    margin-bottom: 0;
}

.list-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
    /* Remove baseline gap */
}

.property-list-item:hover .list-img {
    transform: scale(1.05);
}

.list-content {
    padding: 0;
}

.list-region {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #2C2C2C;
    margin-bottom: 0.2rem;
    margin-top: 0;
    line-height: 1;
    display: block;
}

.list-title {
    font-family: var(--font-display);
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: #2C2C2C;
}

.list-desc {
    color: #2C2C2C;
    margin-bottom: 1rem;
    max-width: 600px;
    font-weight: 300;
    line-height: 1.8;
}

.list-btn {
    border-bottom: 1px solid var(--jp-blue);
    padding-bottom: 4px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--jp-blue);
    transition: opacity 0.3s;
}

.list-btn:hover {
    opacity: 0.7;
}


/* New Hero Visual Section */
.hero-visual {
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 50;
    /* Higher than map */
    /* background: removed for slideshow */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    /* Deeper shadow */
    overflow: hidden;
    /* Contain zoom effect */
}

.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    /* Behind overlay */
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    transform: scale(1.0);
}

/* First hero slide is a real <img> (so the preload scanner finds it
   and downloads it as the LCP candidate). Cover-fill it like the
   background-image-based slides. */
.hero-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-slide.active {
    opacity: 1;
    animation: zoomPan 15s infinite alternate;
    /* Elegantly moving */
}

@keyframes zoomPan {
    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.1);
    }
}

/* Overlay for premium text readability */
.hero-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    /* Vignette */
    z-index: -1;
    /* Above slideshow, below content */
}

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 400;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Softer shadow */
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.hero-subheadline {
    font-size: 0.6em;
    font-weight: 300;
    display: block;
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
}

.hero-subheadline:empty {
    display: none;
}

.hero-subheadline:empty {
    display: none;
}

/* Floating Search Bar (Premium) */
/* Floating Search Bar (Premium) */
.hero-search-container {
    background: #fff;
    /* Solid White */
    border: none;
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: auto;
    min-width: 600px;
    border-radius: 100px;
    /* Keep round */
    animation: floatUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
    animation-delay: 0.3s;
    color: #000;
    /* Dark Text */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

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

/* Mobile Search Trigger w/ Force */
.mobile-search-trigger {
    display: none;
    /* Default hidden on desktop */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    flex: 1;
    cursor: pointer;
    color: #000 !important;
    /* Force black text */
    font-weight: 500;
    padding: 0;
    /* Let parent padding handle spacing if needed, or set explicitly */
}

.mobile-search-trigger .search-text,
.mobile-search-trigger .search-icon {
    display: inline-block !important;
    /* Ensure children are visible */
    color: #000 !important;
    font-size: 1rem;
    opacity: 1 !important;
}

.search-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 1.5rem;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}

.search-field:last-of-type {
    border-right: none;
}

.nav-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo-img {
    height: 28px;
    width: auto;
    display: block;
}

/* Dark variant hidden by default (nav starts over dark hero) */
.logo-img--dark {
    display: none;
}

/* Scrolled header → show dark logo */
header.scrolled .logo-img--light { display: none; }
header.scrolled .logo-img--dark  { display: block; }

/* Mobile menu has light background → always dark logo */
.mobile-menu .logo-img--light { display: none; }
.mobile-menu .logo-img--dark  { display: block; }

@media (max-width: 768px) {
    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: inline;
    }
}

.search-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #666;
    /* Darker grey */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
}

.search-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
    /* Black text */
}

.search-btn {
    background: #000;
    /* Black button on white bar */
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.3s;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.search-btn:hover {
    background: #333;
    transform: scale(1.05);
}

/* Leaflet Map */
#mapbox-container {
    /* Reusing ID for Leaflet */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #0E0E0E;
    z-index: 1;
    /* Behind content */
}

/* Orphaned styles removed */

.search-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

/* Mobile Search Modal */
.search-modal {
    position: fixed;
    inset: 0;
    background: #F4F1EB;
    z-index: 8000;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.search-modal.active {
    transform: translateY(0);
}

.search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(44, 44, 44, 0.1);
    color: #2C2C2C;
    font-weight: 600;
}

.btn-close-search {
    background: none;
    border: none;
    color: #2C2C2C;
    font-size: 2rem;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-modal-body {
    flex: 1;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.search-input-group label {
    display: block;
    color: #2C2C2C;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.search-input {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(44, 44, 44, 0.2);
    padding: 0.5rem 0;
    color: #2C2C2C;
    font-size: 1.2rem;
    font-family: var(--font-main);
}

.search-input:focus {
    outline: none;
    border-color: var(--jp-blue);
}

.date-display,
.guest-display {
    color: #2C2C2C;
    font-size: 1.2rem;
}

.search-filters-section h3 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.filter-chips {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.filter-chip {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-chip.active {
    background: #fff;
    color: #000;
}

.search-modal-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(44, 44, 44, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.btn-clear {
    background: none;
    border: none;
    color: #2C2C2C;
    text-decoration: underline;
    font-size: 0.9rem;
    cursor: pointer;
}

.btn-search-submit {
    background: var(--jp-blue);
    color: #F4F1EB;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.leaflet-container {
    background: #0E0E0E !important;
    font-family: var(--font-main) !important;
}

/* Custom Marker */
.custom-pin {
    background: transparent;
    border: none;
}

.pin-inner {
    width: 14px;
    height: 14px;
    background-color: var(--highlight-color);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 0 15px rgba(198, 63, 63, 0.6);
    position: relative;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pin-inner::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-pin:hover .pin-inner {
    transform: rotate(-45deg) scale(1.3);
    box-shadow: 0 0 25px rgba(198, 63, 63, 0.9);
    z-index: 1000;
}

/* Popup Styling */
.leaflet-popup-content-wrapper {
    background: rgba(14, 14, 14, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    padding: 0;
}

.leaflet-popup-tip {
    background: rgba(14, 14, 14, 0.9);
}

.leaflet-popup-content {
    margin: 0.8rem 1rem;
    font-family: var(--font-main);
    font-size: 0.85rem;
    line-height: 1.4;
}

.leaflet-control-zoom {
    display: none !important;
}


/* --- Featured Properties Grid (Original Structure) --- */
.featured {
    padding: 0;
    /* padding: var(--spacing-lg) 0; Removed for tighter layout */
    /* position: relative; z-index: 2; handled in HTML */
}

/* Map Section Spacer */
/* Map Section Spacer (Collapsed to allow Welcome Section to take over) */
.hero {
    min-height: 0vh;
    /* Collapsed */
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.hero-content {
    /* Hidden to prioritize "Welcome to Japan Villas" */
    display: none;
}

/* Mobile Stack */
#featured-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* --- REDESIGN: Home Page Immersive Stack (Peeking Cards) --- */
/* Only apply these overrides and layouts when on the .home-page */

@media (min-width: 768px) {

    /* Tighter "Welcome" spacing logic */
    .home-page .featured {
        padding-top: 0;
    }

    .home-page #featured-grid {
        display: flex;
        flex-direction: column;
        gap: 8vh;
        padding-top: 0;
        /* Remove top padding as welcome section handles it */
        padding-bottom: 30vh;
    }

    /* Old welcome-section rules removed */

    .home-page .property-card {
        width: 60vw;
        /* Always occupy 60% of viewport width */
        height: 70vh;
        min-height: 550px;
        /* Prevent crushing on short screens */
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .home-page .card-image-wrapper {
        margin: 0;
        width: 100%;
        flex: 2;
        /* Prioritize Image Height */
        min-height: 50%;
        /* Ensure it takes at least half the card */
        border-radius: 12px 12px 0 0;
        aspect-ratio: auto;
        position: relative;
    }

    .home-page .card-info {
        background: #FFFFFF;
        padding: 1.5rem 2rem;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 250px;
    }

    /* Compact & Fluid Text Styles for Home Card */
    .home-page .card-info h3 {
        font-size: clamp(1.5rem, 3vw, 2.2rem);
        /* Fluid title */
        margin-bottom: 0.5rem;
        line-height: 1.1;
    }

    .home-page .card-info .location {
        margin-bottom: 0.1rem !important;
        /* Minimal space between location and title */
        font-size: 0.7rem;
    }

    .home-page .card-info p {
        font-size: clamp(0.8rem, 1.5vw, 0.95rem);
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #2C2C2C;
    }

    .home-page .card-info .card-stats {
        padding-top: 0.3rem;
        margin-top: 0.5rem;
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    }

    /* These two rules were duplicated and had slightly different padding/height.
       Keeping the ones that seem more specific to the home-page redesign.
       The original .home-page .card-image-wrapper and .home-page .card-info
       were already defined above within this media query.
       Removing the duplicates to avoid confusion and potential overrides.
    */
    /*
    .home-page .card-image-wrapper {
        margin: 0;
        height: 100%;
        border-radius: 12px 12px 0 0;
        aspect-ratio: auto;
    }

    .home-page .card-info {
        background: #111;
        padding: 2rem 3rem;
    }
    */
}


/* 2. Scroll to Explore Indicator */
.scroll-indicator {
    position: absolute;
    /* Absolute relative to hero-visual so it scrolls away */
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 1;
    transition: opacity 0.5s;
    text-align: center;
    z-index: 200;
    /* Above Hero but below overlay */
    pointer-events: none;
    /* Don't block interaction */
}

/* Hide scroll indicator on mobile - REMOVED per user request */
/*
@media (max-width: 768px) {
    .scroll-indicator {
        display: none !important;
    }
}
*/

/* Welcome Section Adjustment for Mobile */
/* Welcome Section Adjustment */
.welcome-section {
    min-height: 40vh;
    /* Balanced Desktop Height */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 0;
    /* Moderate spacing */
    z-index: 60;
    /* Higher than Hero (50) for proper overlap */
    position: relative;
}

/* Constrain text width as requested "narrower" */
.welcome-section .flex-center {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .welcome-section {
        display: none !important;
        /* Hidden on mobile per user request */
    }

    .welcome-section h2 {
        font-size: 1.1rem;
        margin: 0;
        line-height: 1;
        /* Remove font leading offset */
        position: relative;
        z-index: 60;
    }

    /* Mobile Property Card Sizing - Instagram Style */
    .featured.container {
        padding: 0 !important;
        margin: 0 !important;
        /* Remove all spacing for sticky map */
    }

    #featured-grid.grid.grid-3 {
        gap: 0 !important;
        /* No gap between cards */
        padding: 0 !important;
    }

    /* Image Counter Style */
    .image-counter {
        position: absolute;
        bottom: 12px;
        right: 12px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.7rem;
        backdrop-filter: blur(4px);
        font-weight: 500;
        letter-spacing: 0.05em;
        pointer-events: none;
        z-index: 5;
    }

    /* Disable hover effects on mobile to prevent double tap */
    .home-page .property-card:hover {
        transform: none !important;
    }

    .home-page .property-card .card-image-wrapper::after {
        opacity: 0 !important;
        /* Hide hover overlay */
    }

    /* Ensure buttons are always visible or hidden depending on design preference */
    /* Counter handles indication, arrows can be hidden or keep consistent */


    .home-page .property-card {
        max-width: 100% !important;
        width: 100% !important;
        /* Full width */
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        border-radius: 0 !important;
        /* No rounded corners for Instagram feel */
    }

    .home-page .card-image-wrapper {
        flex: none;
        height: 75vw;
        /* Square-ish aspect ratio like Instagram */
        max-height: none;
        width: 100%;
        border-radius: 0 !important;
    }

    .home-page .card-info {
        flex: 1;
        min-height: 0;
        padding: 0.75rem 1rem !important;
        /* Reduced vertical padding */
        padding-bottom: 1rem !important;
        /* More space below buttons */
        justify-content: flex-start;
        gap: 0.2rem !important;
        /* Tighter gap */
    }

    .home-page .card-info h3 {
        font-size: 1.1rem !important;
        /* Much smaller title on mobile */
        margin-bottom: 0 !important;
    }

    .home-page .card-info p {
        -webkit-line-clamp: 4;
        line-clamp: 4;
        margin-bottom: 0.15rem !important;
    }

    /* Japanese mode - smaller description */
    .lang-jp .home-page .card-info p {
        font-size: 0.68rem !important;
    }

    .home-page .card-info .card-stats {
        margin-top: 0.5rem;
        padding-top: 0.3rem !important;
        border-top: none !important;
        display: flex !important;
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    /* Style stats items as buttons on mobile */
    .home-page .card-stats span {
        background: rgba(44, 44, 44, 0.04);
        border: 1px solid rgba(44, 44, 44, 0.1);
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.7rem;
        white-space: nowrap;
    }

    /* Reduce space between title and location */
    .home-page .card-info .location {
        margin-bottom: 0.1rem !important;
    }

    /* Disable hover effects on mobile */
    .property-card:hover {
        transform: none !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    }

    .property-card:hover .card-image {
        transform: none !important;
    }

    /* Remove shadows from property cards on mobile */
    .property-card {
        box-shadow: none !important;
    }

    /* Sticky Map on Mobile */
    #mapbox-container {
        position: sticky !important;
        /* Sticky allows map to start in normal flow, then stick when scrolled */
        top: var(--header-height, 70px);
        height: 25vh;
        /* 1/4 of screen height */
        z-index: 10;
        /* Above cards to stay on top */
        width: 100vw;
        /* Full viewport width */
        left: 0;
        /* Align to left edge */
        margin: 0;
        padding: 0;
    }

    /* Hero Section on Mobile - contains map */
    .hero {
        min-height: 0 !important;
        height: auto !important;
        /* No fixed height, just wraps map */
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        justify-content: flex-start !important;
        /* Remove centering that creates gaps */
        z-index: 60 !important;
        /* Above hero-visual (50) to prevent map from being hidden */
    }

    /* Remove spacing around sections */
    .featured {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ensure no background gaps */
    body,
    main,
    #home-view {
        background: var(--bg-color) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-visual {
        margin-bottom: 0 !important;
        box-shadow: none !important;
        /* Remove shadow that appears on map */
    }
}

/* Carousel Button Base Styles */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
    /* Hidden by default, shown on hover */
}


.property-card:hover .carousel-btn,
.property-list-item:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background: #fff;
    color: #000;
}

.carousel-btn.prev {
    left: 20px;
}

.carousel-btn.next {
    right: 20px;
}

/* Zig-Zag Logic - cards stick to edges */
.home-page .property-card:nth-child(odd) {
    margin-right: auto;
    margin-left: 0;
    /* Stick to left edge */
}

.home-page .property-card:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
    /* Stick to right edge */
}

/* Compact & Fluid Text Styles for Home Card */
.home-page .card-info h3 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    /* Fluid title */
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.home-page .card-info .location {
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
}

.home-page .card-info p {
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #2C2C2C;
}

.home-page .card-info .card-stats {
    padding-top: 0.3rem;
    margin-top: 0.5rem;
    /* Reduced spacing to move buttons closer to description */
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
}




/* Property Cards - Shared Base Styles */
.property-card {
    display: block;
    background: #FFFFFF;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
    transform: translateY(40px);
    margin-bottom: 2rem;
    width: 100%;
    box-shadow: 0 4px 20px rgba(44, 44, 44, 0.1);
}

.property-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.property-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(44, 44, 44, 0.18);
}

.card-image-wrapper {
    margin: 0;
    /* Full Bleed */
    width: 100%;
    aspect-ratio: 4/3;
    /* Taller, more substantial */
    position: relative;
    overflow: hidden;
}

/* Horizontal slider for card image carousel */
.card-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
}
.card-slider__track {
    display: flex;
    width: 100%;
    height: 100%;
}
.card-slider__img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Also let list-img-wrapper clip the slider */
.list-img-wrapper {
    overflow: hidden;
}

/* Pagination Dots (Airbnb-style) */
.card-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 6;
    padding: 4px 8px;
    pointer-events: auto;
}
.card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
.card-dot:hover {
    background: rgba(255, 255, 255, 0.85);
}
.card-dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.property-card:hover .card-image {
    transform: scale(1.05);
}

.card-info {
    padding: 2rem;
    background: transparent;
}

/* Instagram Button Overlay */
.insta-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-left: 0.5rem;
    color: #E1306C !important;
    /* Instagram pink color by default */
    transition: all 0.3s ease;
    opacity: 1;
    /* Full opacity */
    position: relative;
    /* Remove vertical offset for proper centering */
}

.insta-btn:hover {
    transform: scale(1.1);
    background: transparent;
    /* No Background */
    opacity: 1;
}

@media (max-width: 768px) {
    .insta-btn {
        width: 36px;
        height: 36px;
    }

    .insta-btn svg {
        width: 24px;
        height: 24px;
    }
}

/* Destinations List Image */
.list-img-wrapper {
    position: relative;
    overflow: hidden;
    /* Clean corners */
}

.card-info h3,
.list-title {
    font-size: clamp(1.4rem, 4vw, 2.5rem);
    /* Responsive sizing to prevent wrap */
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    display: flex;
    align-items: center;
    line-height: 1.1;
}

.card-info .location {
    display: block;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

/* Availability Badge */
.availability-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    /* Oval / Pill shape */
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
    pointer-events: none;
    /* Let clicks pass through if needed */
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.card-info .price {
    font-size: 1.1rem;
    font-weight: 500;
    color: #2C2C2C;
}

.card-stats {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #2C2C2C;
    margin-top: 0.5rem;
    padding-top: 0.3rem;
    flex-wrap: wrap;
}

/* Plain inline stat with icon — no pill background */
.card-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
    font-size: 0.85rem;
    color: #2C2C2C;
    white-space: nowrap;
}

.card-stats span svg {
    width: 16px;
    height: 16px;
    stroke: #2C2C2C;
    flex-shrink: 0;
}

/* Detail View Overlay — Floating side panel (Ibiza Bay style) */
.detail-overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: min(880px, 94vw);
    height: 100%;
    background: #F4F1EB;
    z-index: 5000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.28);
    opacity: 1;
}

.detail-overlay.active {
    transform: translateX(0);
}

/* Backdrop scrim behind floating panel */
.detail-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    z-index: 4999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.detail-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Inside-panel layout overrides — narrow column, vertical photo stack */
.detail-overlay .detail-scroll-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: auto;
    border-radius: 0;
    padding: 0;
}

/* Single-image horizontal slider inside floating panel (Nobu/Ibiza Bay style) */
.pd-slider {
    position: relative;
    width: 100%;
    background: #111;
    overflow: hidden;
}

.pd-slider__viewport {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}

.pd-slider__track {
    display: flex;
    width: 100%;
    height: 100%;
}

.pd-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.pd-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.pd-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    border: none;
    color: #2C2C2C;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background 0.25s ease, transform 0.25s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.pd-slider__btn:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.06);
}

.pd-slider__btn--prev {
    left: 1rem;
}

.pd-slider__btn--next {
    right: 1rem;
}

.pd-slider__counter {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-family: var(--font-main);
    z-index: 3;
    pointer-events: none;
}

.pd-slider .pd-gallery__all {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    top: auto;
    left: auto;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #2C2C2C;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-family: var(--font-main);
    letter-spacing: 0.08em;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: background 0.25s ease;
}

.pd-slider .pd-gallery__all:hover {
    background: #ffffff;
    color: #2C2C2C;
}

/* Hide any legacy multi-photo grid inside the overlay */
.detail-overlay .pd-gallery:not(.pd-slider) {
    display: none;
}

.detail-overlay .pd-container {
    max-width: none;
    padding: 0 2rem;
}

.detail-overlay .pd-layout {
    display: block;
    grid-template-columns: none;
    gap: 0;
    padding: 2rem 0 4rem;
    padding-bottom: 14rem;
}

.detail-overlay .pd-content {
    margin-bottom: 2.5rem;
}

.detail-overlay > .pd-booking {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 520px;
    z-index: 10;
}

.detail-overlay .pd-header {
    padding: 2.5rem 0 1.8rem;
}

.detail-overlay .pd-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.detail-overlay .pd-amenities-grid {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .detail-overlay {
        width: 100vw;
        max-width: none;
    }
    .detail-overlay .pd-amenities-grid {
        grid-template-columns: 1fr 1fr;
    }
    .detail-overlay .pd-container {
        padding: 0 1.2rem;
    }
}

/* === PHOTO LIGHTBOX (horizontally swipeable gallery — Ibiza Bay style) === */
.pd-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.28);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 7000;
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pd-lightbox.active {
    display: flex;
    opacity: 1;
}

.pd-lightbox__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    cursor: pointer;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7010;
    transition: background 0.25s ease;
}

.pd-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.pd-lightbox__viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-lightbox__track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}

.pd-lightbox__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16vh 22vw;
    box-sizing: border-box;
}

.pd-lightbox__slide img {
    max-width: min(52vw, 680px);
    max-height: 62vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.pd-lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7010;
    transition: background 0.25s ease;
}

.pd-lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.pd-lightbox__btn--prev {
    left: calc(50% - min(26vw, 340px) - 80px);
}

.pd-lightbox__btn--next {
    right: calc(50% - min(26vw, 340px) - 80px);
}

.pd-lightbox__counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    background: rgba(0, 0, 0, 0.4);
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-family: var(--font-main);
}

@media (max-width: 600px) {
    .pd-lightbox__btn {
        width: 44px;
        height: 44px;
    }
    .pd-lightbox__btn--prev {
        left: 0.5rem;
    }
    .pd-lightbox__btn--next {
        right: 0.5rem;
    }
    .pd-lightbox__slide {
        padding: 10vh 6vw;
    }
    .pd-lightbox__slide img {
        max-width: 86vw;
        max-height: 60vh;
    }
}

.btn-close {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 5001;
    background: rgba(44, 44, 44, 0.1);
    border: 1px solid rgba(44, 44, 44, 0.2);
    color: #2C2C2C;
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}

.btn-close:hover {
    background: rgba(44, 44, 44, 0.2);
}

/* Desktop: hide the ✕ close button entirely. The detail panel is a side
   sheet with a clickable backdrop on the left, plus ESC closes it — the
   floating button is redundant and clutters the photo. Mobile keeps it
   because the panel is full-screen with no backdrop area to click. */
@media (min-width: 769px) {
    .detail-overlay .btn-close {
        display: none;
    }
}

.detail-scroll-container {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    bottom: 0;
    overflow-y: auto;
    z-index: 10;
    padding-top: 0;
    overscroll-behavior: contain;
    border-radius: 24px 24px 0 0;
}

.sheet-spacer {
    height: calc(50vh - 90px);
    /* Adjust spacer so sheet starts at 50% screen */
    width: 100%;
    pointer-events: none;
    /* Let clicks pass through to slideshow if needed? No, standard behavior */
    /* transparent */
}

.detail-hero {
    height: 100vh;
    /* Full screen background */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
}

.detail-sheet {
    position: relative;
    background: #FFFFFF;
    min-height: 100vh;
    padding-bottom: 6rem;
    box-shadow: none;
    border-radius: 24px 24px 0 0;
}

/* Sticky Header Wrapper for the "Card Top" */
.sheet-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #FFFFFF;
    border-radius: 24px 24px 0 0;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-bottom: 0;
    width: 100%;
    display: block;
    box-shadow: none;
}

/* Handle bar visual */
.sheet-handle-bar {
    width: 40px;
    height: 4px;
    background: rgba(44, 44, 44, 0.15);
    border-radius: 2px;
    margin: 0 auto;
}

/* Ensure Nav Buttons are accessible in the gap */
.detail-nav-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    backdrop-filter: blur(4px);
}

.detail-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.detail-nav-btn.prev {
    left: 2rem;
}

.detail-nav-btn.next {
    right: 2rem;
}

/* Move counter to Top Right (Fixed) */
.detail-photo-counter {
    position: fixed;
    top: 1.5rem;
    bottom: auto;
    right: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    backdrop-filter: blur(8px);
    z-index: 5002;
    /* High z-index to stay above everything */
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-weight: 600;
    letter-spacing: 0.05em;
    pointer-events: none;
}

@media (max-width: 768px) {
    .detail-nav-btn {
        display: none;
        /* Hide arrows on mobile, rely on swipe */
    }
}

.detail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-overlay-content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    /* Match split-layout constraint */
    padding: 4rem 2rem;
    /* Match split-layout horizontal padding */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Force left alignment */
}

.detail-title {
    font-size: 3.5rem;
    font-family: var(--font-display);
    margin-bottom: 1rem;
}

.key-facts {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping to new rows */
    gap: 1rem;
    /* Reduced gap for better multi-row packing */
    margin-top: 2rem;
}

.fact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    backdrop-filter: blur(5px);
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Widget (Left/Top) gets 1fr, Content gets 2fr */
    gap: 4rem;
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 2rem;
}

.booking-panel {
    background: #FEFCF8;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(191, 160, 122, 0.25);
    position: sticky;
    top: 2rem;
}

@media (max-width: 900px) {
    .split-layout {
        grid-template-columns: 1fr;
    }
}

/* Animations */
@keyframes fadeOutScroll {
    to {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
}

/* Divider removal helper */
/* No special class needed, border removed from main rule above */

/* Border utility if needed */
.no-border {
    border: none !important;
}

/* Contact Form */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

/* Destinations Page Layout */
.property-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns Desktop */
    gap: 2rem;
    padding: 2rem 5%;
}

.property-list-item {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(44, 44, 44, 0.1);
    border-radius: 12px;
    background: #FFFFFF;
    overflow: hidden;
    transition: transform 0.3s;
    gap: 0 !important;
}

.list-img-wrapper {
    position: relative;
    width: 100%;
    height: 230px;
    margin-bottom: 0 !important;
    line-height: 0;
}

.list-img-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-list-item:hover {
    transform: translateY(-5px);
    border-color: rgba(42, 74, 122, 0.3);
    box-shadow: 0 8px 24px rgba(44, 44, 44, 0.1);
}

.list-content {
    padding: 1rem 1rem 0.75rem 1rem !important;
    /* Reduced padding */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.list-region {
    font-size: 0.7rem;
    color: #2C2C2C;
    letter-spacing: 0.15em;
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: block;
    line-height: 1;
}

.list-title {
    font-size: 1.3rem !important;
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.list-desc {
    font-size: 0.9rem;
    color: #2C2C2C;
    font-weight: 300;
    margin-bottom: 0.4rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.form-group {
    margin-bottom: 2rem;
}

.property-list-item .card-stats {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .property-list {
        padding: 0 1rem 2rem 1rem;
        /* Bottom padding for scrollbar */
        display: flex !important;
        /* Override grid */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        width: 100%;
        /* Ensure full width */
        -webkit-overflow-scrolling: touch;
    }

    .property-list::-webkit-scrollbar {
        height: 4px;
        /* Subtle scrollbar */
        background: transparent;
    }

    .property-list::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
    }

    .property-list-item {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: auto;
        min-width: 85vw;
        /* Horizontal Card Width */
        max-width: 85vw;
        margin-bottom: 0;
        scroll-snap-align: center;
        /* Snap to center */
        flex: none;
        /* Don't shrink */
        gap: 0;
    }

    .list-img-wrapper {
        width: 100%;
    }

    .list-content {
        width: 100%;
        padding: 1rem 1rem 0.5rem 1rem !important;
        /* Uniform padding on all sides */
        margin-top: 0;
        text-align: left;
    }

    .list-content h3 {
        font-size: 2rem;
    }
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.form-control {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    color: #2C2C2C;
    font-family: var(--font-main);
    font-size: 1.1rem;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--jp-blue);
}

/* Global Footer */
.global-footer {
    padding: clamp(4.5rem, 8vw, 6.5rem) 0 var(--spacing-lg) 0;
    border-top: 1px solid rgba(191, 160, 122, 0.3);
    margin-top: 4rem;
    background: #F4F1EB;
    color: #2C2C2C;
    font-size: 0.9rem;
    position: relative;
    z-index: 10;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: space-between;
}

.footer-left {
    flex-shrink: 0;
    max-width: 320px;
}

.footer-left p {
    white-space: nowrap;
}

.footer-logo {
    display: block;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .footer-left p {
        white-space: normal;
    }
}

.footer-logo img {
    height: 28px;
    width: auto;
}

.footer-links-grid {
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-col h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-accent);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.footer-col a {
    color: #2C2C2C;
    text-decoration: none;
    transition: color 0.3s, transform 0.3s;
    font-size: 0.95rem;
    display: inline-block;
}

.footer-col a:hover {
    color: var(--gold-accent);
    transform: translateX(3px);
}

.footer-bottom {
    margin-top: clamp(3rem, 5vw, 4rem);
    border-top: 1px solid rgba(44, 44, 44, 0.08);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    opacity: 0.7;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom__legal {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.footer-bottom__legal a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}

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

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom__legal {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .footer-links-grid {
        gap: 1.5rem 2.5rem;
    }
    .footer-inner {
        gap: 2.5rem;
    }
    .footer-left {
        max-width: 100%;
    }
}

/* Response */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .property-content {
        grid-template-columns: 1fr;
    }

    .hero {
        height: 80vh;
    }

    header .container.flex-between {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-links {
        display: flex;
        gap: 1rem;
        font-size: 0.8rem;
    }
}

/* --- New Features --- */

/* 1. Login Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.auth-modal {
    background: #1a1a1a;
    width: 90%;
    max-width: 400px;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.modal-overlay.active .auth-modal {
    transform: translateY(0);
}

.auth-title {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #fff;
}

.auth-btn {
    display: block;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.auth-btn:hover {
    background: #fff;
    color: #000;
}

.auth-btn.primary {
    background: #fff;
    color: #000;
    border-color: #fff;
    font-weight: 600;
}

.auth-btn.primary:hover {
    background: #ccc;
    border-color: #ccc;
}



.scroll-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    transform: rotate(45deg);
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: rotate(45deg) translate(0, 0);
    }

    40% {
        transform: rotate(45deg) translate(-5px, -5px);
    }

    60% {
        transform: rotate(45deg) translate(-3px, -3px);
    }
}

/* 3. Destinations Search Bar Unification */
/* 3. Destinations Search Bar Unification - Removed to match Home Page */

/* 4. Filters - Feature Chips */
.feature-icon {
    width: 14px;
    height: 14px;
    /* No filter inversion needed if using currentColor and carefully setting color context */
}

/* Filter buttons handled in main logic block above */

.clear-filters {
    font-size: 0.75rem;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.clear-filters.visible {
    opacity: 1;
    pointer-events: all;
}

/* --- Contact Page Premium Redesign --- */
.contact-container {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align closer to top */
    background: transparent;
}

.contact-form-wrapper {
    width: 100%;
    max-width: 550px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(191, 160, 122, 0.25);
    border-radius: 24px;
    padding: 3.5rem;
    box-shadow: 0 20px 50px rgba(44, 44, 44, 0.1);
    margin-bottom: 4rem;
}

.contact-form .form-group {
    margin-bottom: 2rem;
}

.contact-form label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #2C2C2C;
    font-weight: 600;
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    background: rgba(44, 44, 44, 0.04);
    border: 1px solid rgba(44, 44, 44, 0.15);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    color: #2C2C2C;
    font-family: var(--font-main);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    background: rgba(44, 44, 44, 0.06);
    border-color: var(--jp-blue);
    outline: none;
    box-shadow: 0 0 0 4px rgba(42, 74, 122, 0.08);
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-submit {
    width: 100%;
    background: var(--jp-blue);
    color: #F4F1EB;
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1.25rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    font-weight: 600;
}

.btn-submit:hover {
    background: #1e3a5f;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(42, 74, 122, 0.25);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .contact-form-wrapper {
        padding: 2rem;
        border-radius: 16px;
    }

    .contact-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

}

/* --- Legal Pages (Privacy / Terms / Commercial Notice) --- */
.legal-main {
    background: var(--bg-color);
}

.legal-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 160px 1.5rem 6rem;
    color: #2C2C2C;
}

.legal-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: #1a1a1a;
}

.legal-updated {
    font-family: var(--font-main);
    font-size: 0.8rem;
    color: rgba(44, 44, 44, 0.55);
    letter-spacing: 0.05em;
    margin: 0 0 2.5rem;
}

.legal-intro {
    font-family: var(--font-jp-sans);
    font-size: 1rem;
    line-height: 1.9;
    color: #2C2C2C;
    margin: 0 0 3rem;
    padding: 1.5rem 1.75rem;
    background: rgba(191, 160, 122, 0.07);
    border-left: 3px solid var(--gold-accent);
    border-radius: 4px;
}

.legal-section {
    margin-bottom: 2.5rem;
}

.legal-section h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 0.85rem;
    letter-spacing: 0.01em;
}

.legal-section p {
    font-family: var(--font-jp-sans);
    font-size: 0.95rem;
    line-height: 1.9;
    color: #2C2C2C;
    margin: 0;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-family: var(--font-jp-sans);
    font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
    padding: 1.1rem 1.25rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(44, 44, 44, 0.1);
    line-height: 1.7;
}

.legal-table th {
    width: 32%;
    font-weight: 600;
    color: #1a1a1a;
    background: rgba(191, 160, 122, 0.05);
}

.legal-table td {
    color: #2C2C2C;
}

@media (max-width: 768px) {
    .legal-container {
        padding: 120px 1.25rem 4rem;
    }

    .legal-table th,
    .legal-table td {
        padding: 0.9rem 1rem;
        font-size: 0.9rem;
    }

    .legal-table th {
        width: 38%;
    }
}

/* Forced Modal Styles to ensure visibility (GLOBAL) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10000 !important;
    /* Force on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.auth-modal {
    background: #FEFCF8;
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid rgba(191, 160, 122, 0.25);
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 20px 40px rgba(44, 44, 44, 0.15);
}

.auth-title {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #2C2C2C;
}

.auth-btn {
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(44, 44, 44, 0.15);
    background: transparent;
    color: #2C2C2C;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-btn.primary {
    background: var(--jp-blue);
    color: #F4F1EB;
    border-color: var(--jp-blue);
}

.auth-btn:hover {
    transform: translateY(-2px);
}

/* Responsive Stat Labels */
/* Hide labels ONLY when 3-column grid is tight (1151px to 1350px) */
/* At 1150px and below, we switch to 2 columns so labels fit again */
@media (min-width: 1151px) and (max-width: 1350px) {
    .stat-label {
        display: none;
    }
}

/* Intermediate 2-Column Grid (Tablet/Small Laptop) */
@media (max-width: 1150px) {
    .property-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Calendar Modal Mobile Fit */
#calendar-modal .auth-modal {
    max-height: 90vh;
    overflow-y: auto;
}
@media (max-width: 768px) {
    #calendar-modal .auth-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh;
        border-radius: 0;
        padding: 1.2rem;
    }
    #calendar-modal .auth-title {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }
    #calendar-modal .booking-controls {
        padding: 0.7rem !important;
        gap: 0.5rem !important;
    }
    #calendar-modal #price-display {
        font-size: 1.2rem !important;
    }
    #calendar-modal #calendar-container {
        margin-bottom: 1rem !important;
    }
}

/* Flatpickr Customization */
/* Reverted to original styles */
.flatpickr-calendar {
    background: #111;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled {
    color: #333;
    text-decoration: none;
    background-image: linear-gradient(to top right, transparent calc(50% - 1px), #333 calc(50% - 1px), #333 calc(50% + 1px), transparent calc(50% + 1px));
    pointer-events: auto;
    /* Allow hover for tooltip */
    cursor: not-allowed;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.focus,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus,
.flatpickr-day.inRange {
    background: var(--accent-color) !important;
    border-color: #2C2C2C !important;
    color: #fff;
    box-shadow: -5px 0 0 var(--accent-color), 5px 0 0 var(--accent-color) !important;
    /* Seamless range */
}

/* Checkout Only Date Style */
.flatpickr-day.avail-checkout-only:not(.selected):not(.startRange):not(.endRange) {
    background: transparent !important;
    /* Visuals similar to available */
    border: none !important;
    /* No border/circle */
    color: #ddd !important;
    /* High visibility text */
    opacity: 1 !important;
}

/* Default Hover: Disable highlight for checkout-only if no start date */
.flatpickr-day.avail-checkout-only:hover {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
    color: #ddd !important;
}

/* Enabled Hover: Enable highlight ONLY if start date selected (range picking) */
.flatpickr-calendar.has-selection .flatpickr-day.avail-checkout-only:hover {
    background: var(--accent-color) !important;
    border-color: #2C2C2C !important;
    color: #fff !important;
    box-shadow: -5px 0 0 var(--accent-color), 5px 0 0 var(--accent-color) !important;
}

/* Calendar Tooltip */
.calendar-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    transition: opacity 0.2s;
}

/* Loading Animation */
@keyframes pulse {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

.avail-loading {
    animation: pulse 1.5s infinite ease-in-out;
    display: inline-block;
    font-weight: 400;
}

/* Booking Widget Styles */
.booking-widget {
    background: #FEFCF8;
    border: 1px solid rgba(191, 160, 122, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 8px 30px rgba(44, 44, 44, 0.1);
}

.booking-header {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.booking-price {
    font-size: 1.4rem;
    font-weight: 500;
    color: #2C2C2C;
    font-family: var(--font-display);
}

.booking-price-note {
    font-size: 0.9rem;
    color: #2C2C2C;
    font-weight: 300;
}

.booking-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #444;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.booking-input-item {
    padding: 0.75rem;
    background: #252525;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid #444;
    /* Fallback if grid fails */
}

.booking-inputs-grid .booking-input-item:first-child {
    border-right: 1px solid #444;
}

.booking-input-item:hover {
    background: #333;
}

.input-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #888;
    margin-bottom: 4px;
}

.input-value {
    display: block;
    font-size: 0.9rem;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guest-input-item {
    border: 1px solid #444;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.75rem;
    background: #252525;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.guest-input-item:hover {
    background: #333;
}

.booking-total-row {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #333;
    font-size: 1rem;
    color: #eee;
}

.booking-total-row.total {
    font-weight: 600;
    color: #fff;
    border-top: 1px solid #444;
    padding-top: 1.5rem;
    margin-top: 0.5rem;
}

/* ============================================
   LOADING ANIMATIONS (Shimmer / Skeleton)
   ============================================ */

/* Shimmer animation keyframes */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Loading state for availability badges */
.availability-badge.loading {
    min-width: 70px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.1) 25%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.availability-badge.loading .shimmer-text {
    visibility: hidden;
}

/* Pulsing dots for text loading indicator */
.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ============================================
   PROPERTY DETAIL — Plum Guide Style (pd-*)
   Used for Lake House Nojiriko (id:2)
   ============================================ */

/* Override scroll container when .pd-new is present */
.pd-new-wrapper {
    background: #F4F1EB;
    min-height: 100%;
}

/* Desktop: leave room at the bottom for the fixed .pd-topbar booking bar */
@media (min-width: 769px) {
    .pd-new-wrapper {
        padding-bottom: 5.5rem;
    }
}

/* When new layout is rendered, reset the scroll container to fill the overlay */
.detail-scroll-container:has(.pd-new-wrapper) {
    top: 0;
    border-radius: 0;
}

/* ─── DESKTOP-ONLY: Fixed bottom booking bar inside the property detail panel.
   Always-visible compact bar with property name + price + Check Availability
   CTA. Pinned to the bottom of the viewport while the detail overlay is open
   so booking is always one click away. Hidden on mobile (mobile already has
   its own bottom sticky bar). */
.pd-topbar {
    display: none;
}

.pd-topbar__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.95rem 2rem;
}

.pd-topbar__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pd-topbar__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

.pd-topbar__price {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.pd-topbar__amount {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-color);
}

.pd-topbar__unit {
    font-size: 0.78rem;
    color: rgba(44, 44, 44, 0.55);
    font-family: var(--font-main);
}

.pd-topbar__cta {
    background: var(--gold-accent);
    color: #FFFFFF;
    border: 1px solid var(--gold-accent);
    padding: 0.75rem 1.6rem;
    border-radius: 999px;
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.pd-topbar__cta:hover:not(:disabled) {
    background: #a88a5e;
    border-color: #a88a5e;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(191, 160, 122, 0.28);
}

.pd-topbar__cta:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Hide on mobile — mobile uses the bottom sticky bar instead */
@media (max-width: 768px) {
    .pd-topbar {
        display: none !important;
    }
}

/* Hero Gallery Grid */
.pd-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    max-width: 1280px;
    margin: 2rem auto 0;
    padding: 0 2rem;
    position: relative;
    aspect-ratio: 2 / 1;
}

.pd-gallery__item {
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.pd-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
}

.pd-gallery__item:hover img {
    transform: scale(1.04);
    opacity: 0.95;
}

.pd-gallery__item--main {
    grid-column: 1;
    grid-row: 1 / -1;
    border-radius: 14px 0 0 14px;
}

.pd-gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; }
.pd-gallery__item:nth-child(3) { grid-column: 3; grid-row: 1; border-top-right-radius: 14px; }
.pd-gallery__item:nth-child(4) { grid-column: 2; grid-row: 2; }
.pd-gallery__item:nth-child(5) { grid-column: 3; grid-row: 2; border-bottom-right-radius: 14px; }

.pd-gallery__all {
    position: absolute;
    bottom: 1.5rem;
    right: 3rem;
    background: #FFFFFF;
    border: 1px solid #2C2C2C;
    padding: 0.8rem 1.4rem;
    font-size: 0.8rem;
    font-family: var(--font-main);
    letter-spacing: 0.08em;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;
    color: #2C2C2C;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
}

.pd-gallery__all:hover {
    background: #2C2C2C;
    color: #FFFFFF;
}

/* Container */
.pd-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header */
.pd-header {
    padding: 3.5rem 0 2.5rem;
    border-bottom: 1px solid rgba(44, 44, 44, 0.08);
}

.pd-region {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #2C2C2C;
    margin-bottom: 1rem;
    font-weight: 500;
}

.pd-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.8vw, 3.4rem);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1.2rem 0;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.pd-tagline {
    font-family: var(--font-jp-serif);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: rgba(44, 44, 44, 0.72);
    font-style: italic;
    margin: 0 0 2rem 0;
    line-height: 1.8;
    letter-spacing: 0.04em;
}

.pd-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem 2.2rem;
    font-size: 0.92rem;
    color: var(--text-color);
}

.pd-facts__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pd-facts__item svg {
    flex-shrink: 0;
    color: var(--gold-accent);
}

/* 2-Column Layout */
.pd-layout {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 800px;
    gap: 3rem;
    padding: 3rem 0 6rem;
    padding-bottom: 14rem;
    align-items: start;
}

.pd-content {
    min-width: 0;
}

.pd-section {
    padding: 2.8rem 0;
    border-bottom: 1px solid rgba(44, 44, 44, 0.08);
}

.pd-section:first-child {
    padding-top: 0;
}

.pd-section:last-child {
    border-bottom: none;
}

.pd-section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    font-weight: 400;
    margin: 0 0 1.6rem 0;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.pd-section p {
    font-family: var(--font-jp-sans);
    font-size: 1rem;
    line-height: 2;
    color: rgba(44, 44, 44, 0.82);
    margin: 0 0 1rem 0;
}

.pd-section p:last-child {
    margin-bottom: 0;
}

/* Amenities */
.pd-amenities-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem 2rem;
    font-size: 0.95rem;
    color: rgba(44, 44, 44, 0.88);
}

.pd-amenities-grid li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
}

.pd-amenities-grid li::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--gold-accent);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Location map */
.pd-map {
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: 12px;
    margin-top: 0.5rem;
}

/* Sticky Booking Card */
.pd-booking {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 3rem);
    max-width: 520px;
    z-index: 5400;
}

.pd-booking__card {
    background: rgba(254, 252, 248, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(191, 160, 122, 0.25);
    border-radius: 16px;
    padding: 0.9rem 1.2rem 0.8rem;
    box-shadow: 0 8px 32px rgba(44, 44, 44, 0.12), 0 2px 8px rgba(44, 44, 44, 0.06);
}

.pd-booking__price {
    display: none;
}

.pd-booking__amount {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: 0.01em;
}

.pd-booking__unit {
    font-size: 0.88rem;
    color: rgba(44, 44, 44, 0.55);
    font-weight: 300;
    font-family: var(--font-main);
}

.pd-booking__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(44, 44, 44, 0.18);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.6rem;
    background: #FFFFFF;
}

.pd-input {
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}

.pd-input:hover {
    background: #FAF7F0;
}

.pd-input:first-child {
    border-right: 1px solid rgba(44, 44, 44, 0.15);
}

.pd-input--full {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(44, 44, 44, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pd-input__label {
    display: block;
    font-family: var(--font-main);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(44, 44, 44, 0.55);
    margin-bottom: 2px;
}

.pd-input__value {
    display: block;
    font-size: 0.82rem;
    color: var(--text-color);
    font-family: var(--font-main);
}

.pd-input--full .pd-input__value::after {
    content: "▾";
    float: right;
    color: rgba(44, 44, 44, 0.4);
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.pd-booking__cta {
    width: 100%;
    padding: 0.7rem 1rem;
    background: transparent;
    color: var(--gold-accent);
    border: 1px solid var(--gold-accent);
    border-radius: 8px;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.1rem;
}

.pd-booking__cta:hover:not(:disabled) {
    background: var(--gold-accent);
    color: #FFFFFF;
    letter-spacing: 0.22em;
}

.pd-booking__cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pd-booking__note {
    text-align: center;
    font-size: 0.65rem;
    color: rgba(44, 44, 44, 0.45);
    margin: 0.4rem 0 0 0;
    font-family: var(--font-main);
}

/* Responsive */
@media (max-width: 1024px) {
    .pd-layout {
        grid-template-columns: 1.4fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 900px) {
    .pd-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        aspect-ratio: auto;
        padding: 0 1rem;
    }
    .pd-gallery__item--main {
        grid-column: 1;
        grid-row: 1;
        border-radius: 12px;
        aspect-ratio: 16 / 10;
    }
    .pd-gallery__item:nth-child(2),
    .pd-gallery__item:nth-child(3),
    .pd-gallery__item:nth-child(4),
    .pd-gallery__item:nth-child(5) {
        display: none;
    }
    .pd-gallery__all {
        right: 1.5rem;
        bottom: 1rem;
    }
    .pd-container {
        padding: 0 1.2rem;
    }
    .pd-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .pd-booking {
        position: fixed;
        bottom: 0.75rem;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 1.5rem);
        max-width: 520px;
    }
    .pd-booking__card {
        padding: 0.8rem 1rem 0.7rem;
    }
    .pd-amenities-grid {
        grid-template-columns: 1fr 1fr;
    }
    .pd-facts {
        gap: 1rem 1.5rem;
    }
}

.loading-dots span {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {

    0%,
    80%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Card image loading skeleton — disabled to prevent z-index overlay issues */

/* Card images visible immediately */
.card-image {
    opacity: 1;
}

/* Loading spinner for calendar/modals */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #888;
    font-size: 0.9rem;
    padding: 2rem;
}

.loading-spinner::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   SKELETON LOADERS
   ============================================ */

/* Hero skeleton - full screen background shimmer */
.skeleton-hero {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
            #1a1a1a 8%,
            #252525 18%,
            #1a1a1a 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* When hero slides are loaded, hide skeleton */
.hero-slideshow:has(.hero-slide) .skeleton-hero {
    display: none;
}

/* Property card skeleton */
.skeleton-card {
    background: var(--card-bg, #141414);
    border-radius: 16px;
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}

.skeleton-card-image {
    width: 100%;
    height: 280px;
    background: linear-gradient(110deg,
            #1a1a1a 8%,
            #252525 18%,
            #1a1a1a 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-card-content {
    padding: 1.5rem;
}

.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(110deg,
            #1f1f1f 8%,
            #2a2a2a 18%,
            #1f1f1f 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    margin-bottom: 12px;
}

.skeleton-line-short {
    width: 30%;
    height: 10px;
}

.skeleton-line-title {
    width: 70%;
    height: 20px;
    margin-bottom: 16px;
}

.skeleton-line-long {
    width: 90%;
    height: 10px;
}

.skeleton-line-stats {
    width: 60%;
    height: 14px;
    margin-top: 20px;
}

/* Stagger animation delays for multiple skeletons */
.skeleton-card:nth-child(2) .skeleton-card-image,
.skeleton-card:nth-child(2) .skeleton-line {
    animation-delay: 0.15s;
}

.skeleton-card:nth-child(3) .skeleton-card-image,
.skeleton-card:nth-child(3) .skeleton-line {
    animation-delay: 0.3s;
}

/* Fade in animation for when content loads */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Hide skeleton cards once real cards are loaded */
#featured-grid:has(.property-card) .skeleton-card {
    display: none;
}

/* Skeleton for list-style items (Stays page) */
.skeleton-list-item {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 4rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

.skeleton-list-image {
    width: 100%;
    height: 280px;
    border-radius: 8px;
    background: linear-gradient(110deg,
            #1a1a1a 8%,
            #252525 18%,
            #1a1a1a 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-list-content {
    padding-top: 1rem;
}

/* Stagger for list items */
.skeleton-list-item:nth-child(2) .skeleton-list-image,
.skeleton-list-item:nth-child(2) .skeleton-line {
    animation-delay: 0.2s;
}

.skeleton-list-item:nth-child(3) .skeleton-list-image,
.skeleton-list-item:nth-child(3) .skeleton-line {
    animation-delay: 0.4s;
}

/* Hide list skeletons when real items load */
#property-list:has(.property-list-item) .skeleton-list-item {
    display: none;
}

/* Mobile responsive for list skeletons */
@media (max-width: 768px) {
    .skeleton-list-item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .skeleton-list-image {
        height: 200px;
    }
}

/* Japanese Headline Split - Same size & Centered */
.lang-jp .headline-split {
    display: block;
    margin-left: 0;
    font-size: inherit;
    /* Use parent h1 size */
    margin-top: 0.5rem;
}

/* FORCE OVERRIDE for Mobile Property Card Spacing */
@media (max-width: 768px) {
    .property-list .property-list-item .list-content {
        padding: 1rem 1rem 0.5rem 1rem !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
}


/* ============================================
   NEW HOMEPAGE SECTIONS (v13)
   ============================================ */

/* --- Hero Brand Overlay --- */
.hero-brand {
    text-align: center;
    z-index: 2;
}

.hero-tagline {
    font-family: var(--font-jp-serif);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 300;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-logo-text {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.05em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    line-height: 1;
}

/* =============================================
   allbeans-style Layout System
   ============================================= */

/* --- Shared --- */
.ab-section-label {
    display: block;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #2C2C2C;
    margin-bottom: 1rem;
}

.ab-section-heading {
    font-family: var(--font-jp-serif);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}

.ab-section-sub {
    font-family: var(--font-jp-serif);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 2rem;
}

.ab-more-link {
    display: inline-block;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--text-color);
    border-bottom: 1px solid var(--gold-accent);
    padding-bottom: 3px;
    text-decoration: none;
    transition: color 0.3s;
}

.ab-more-link:hover {
    color: var(--gold-accent);
    opacity: 1;
}

/* --- MARQUEE --- */
.marquee-section {
    background: var(--bg-color);
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-bottom: 1px solid var(--border-light);
}

.marquee-track {
    display: flex;
    white-space: nowrap;
    animation: marquee-scroll 15s linear infinite;
}

.marquee-text {
    font-family: 'Optima', 'Didot', var(--font-display), serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    color: var(--text-color);
    letter-spacing: 0.08em;
    padding-right: 4rem;
    flex-shrink: 0;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* --- 2. INTRO --- */
.ab-intro {
    padding: clamp(5rem, 10vw, 8rem) 2rem 0;
}

.ab-intro-inner {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.ab-intro-heading {
    font-family: var(--font-jp-serif);
    font-size: clamp(1.45rem, 3vw, 1.92rem);
    font-weight: 400;
    line-height: 2;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
}

.ab-intro-lead {
    font-family: var(--font-jp-serif);
    font-size: clamp(2.4rem, 4.8vw, 3.85rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--gold-accent);
    letter-spacing: 0.12em;
    margin: 2.5rem 0 2.5rem;
    padding: 2rem 0;
    white-space: nowrap;
    width: max-content;
    /* Compensate for trailing letter-spacing so text appears optically centered */
    text-indent: 0.12em;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.ab-intro-lead::before,
.ab-intro-lead::after {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: var(--gold-accent);
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.ab-intro-lead::before {
    top: 0;
}

.ab-intro-lead::after {
    bottom: 0;
}

.ab-intro-body {
    font-family: var(--font-jp-sans);
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 2.2;
    color: rgba(44, 44, 44, 0.78);
}

.ab-intro-image {
    max-width: 1340px;
    margin: 0 auto;
}

.ab-intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 3. ABOUT --- */
.ab-about {
    padding: clamp(5rem, 10vw, 8rem) 2rem;
}

.ab-about-inner {
    max-width: 1340px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
}

.ab-about-header {
    min-width: 0;
}

.ab-about-images {
    min-width: 0;
}

.ab-about-images img {
    width: 100%;
    height: auto;
    display: block;
}

.ab-about-body-block {
    min-width: 0;
}

/* ABOUT-scoped header overrides (matches LOCATION sizing) */
.ab-about .ab-section-label {
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
}

.ab-about-tagline {
    font-family: var(--font-jp-serif);
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-color);
    margin-bottom: 2.8rem;
    letter-spacing: 0.02em;
}

.ab-about-body {
    font-family: var(--font-jp-sans);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 2.1;
    color: rgba(44, 44, 44, 0.78);
    margin-bottom: 1.8rem;
}

.ab-about-body + .ab-about-body {
    margin-top: 0;
}

.ab-about-body:last-of-type {
    margin-bottom: 2rem;
}


/* ─── DESKTOP-ONLY: Editorial layouts for INTRO & ABOUT ─────
   INTRO  → centered single-column flow (heading → lead one-line →
            body → image), all centered. Matches the reference design.
   ABOUT  → dual-image editorial stack (main portrait + accent offset)
   Mobile keeps the simpler stacked flow (see mobile rules below).
   ============================================================ */
@media (min-width: 769px) {
    /* --- INTRO: centered single column --- */
    .ab-intro {
        padding: clamp(5rem, 10vw, 8rem) 2rem clamp(3rem, 6vw, 5rem);
    }

    .ab-intro .ab-intro-inner {
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 0;
    }

    .ab-intro .ab-intro-heading {
        order: 1;
        max-width: 900px;
        margin: 0 0 1.5rem;
        text-align: center;
    }

    .ab-intro .ab-intro-lead {
        order: 2;
        /* Reset base centering hack — flex container handles centering */
        position: static;
        left: auto;
        transform: none;
    }

    .ab-intro .ab-intro-body {
        order: 3;
        max-width: 760px;
        margin: 0 auto clamp(3rem, 6vw, 5rem);
        text-align: center;
    }

    .ab-intro .ab-intro-image {
        order: 4;
        width: 100%;
        max-width: 1340px;
        margin: 0 auto;
    }

    .ab-intro .ab-intro-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
    }

    /* Desktop: the JP lead has a <br> for mobile wrapping —
       hide it so the lead stays on one horizontal line */
    .ab-intro .ab-intro-lead br {
        display: none;
    }

    /* --- ABOUT: 2-col editorial grid —
       images column on the left (spans both rows),
       header top-right, body bottom-right.
       DOM order stays header → images → body for mobile. */
    .ab-about .ab-about-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "images header"
            "images body";
        column-gap: clamp(3rem, 6vw, 6rem);
        row-gap: clamp(1.5rem, 3vw, 2.5rem);
        align-items: start;
    }

    .ab-about .ab-about-header {
        grid-area: header;
        align-self: end;
    }

    .ab-about .ab-about-body-block {
        grid-area: body;
        align-self: start;
    }

    .ab-about .ab-about-images {
        grid-area: images;
        grid-row: 1 / -1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-self: stretch;
    }

    .ab-about .ab-about-images__main,
    .ab-about .ab-about-images__accent {
        width: 100%;
        flex: 1;
        min-height: 0;
        object-fit: cover;
        display: block;
    }
}

/* --- 4. LOCATION --- */
.ab-location {
    padding: clamp(5rem, 10vw, 8rem) 2rem;
    border-top: 1px solid var(--border-light);
}

.ab-location-header {
    max-width: 1340px;
    margin: 0 auto clamp(4rem, 8vw, 6rem);
}

.ab-location-item {
    max-width: 1340px;
    margin: 0 auto clamp(6rem, 10vw, 9rem);
    display: flex;
    align-items: flex-start;
    gap: clamp(3rem, 6vw, 5rem);
}

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

.ab-location-text {
    flex: 1;
    min-width: 0;
    padding-top: 1rem;
}

/* LOCATION-scoped header overrides (larger than the global default) */
.ab-location .ab-section-label {
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
}

.ab-location .ab-section-heading {
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    margin-bottom: 0.8rem;
}

.ab-location .ab-section-sub {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.ab-location-intro {
    max-width: 720px;
    font-family: var(--font-jp-sans);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 2.1;
    color: rgba(44, 44, 44, 0.78);
    margin-top: 0;
}

.ab-location-intro strong {
    font-weight: 500;
    color: var(--text-color);
}

.ab-location-name {
    display: block;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #2C2C2C !important;
    margin-bottom: 1.2rem;
}

.ab-location-text h3 {
    font-family: var(--font-jp-serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.5;
    color: #2C2C2C !important;
    margin-bottom: 1rem;
    letter-spacing: 0.03em;
}

.loc-address {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: rgba(44, 44, 44, 0.75);
    text-decoration: none;
    border-bottom: 1px solid rgba(44, 44, 44, 0.2);
    padding-bottom: 3px;
    margin-bottom: 2rem;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.loc-address:hover {
    color: var(--gold-accent);
    border-bottom-color: var(--gold-accent);
}

.loc-address__pin {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.ab-location-text p {
    font-family: var(--font-jp-sans);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 2.1;
    color: rgba(44, 44, 44, 0.78);
    margin-bottom: 1.8rem;
}

.ab-location-meta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 2rem;
}

.ab-location-meta > span:nth-child(2) {
    color: rgba(44, 44, 44, 0.35);
}

/* --- LOCATION SLIDER --- */
.loc-slider {
    flex: 1.5;
    min-width: 0;
    position: relative;
}

.loc-slider__viewport {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}

.loc-slider__track {
    display: flex;
    width: 100%;
}

.loc-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f4f1ec;
    position: relative;
}

.loc-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.loc-slider__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.2rem;
    gap: 1rem;
}

.loc-slider__count {
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--text-color);
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}

.loc-slider__current {
    font-size: 1rem;
    font-weight: 500;
}

.loc-slider__sep {
    color: rgba(44, 44, 44, 0.4);
}

.loc-slider__total {
    color: rgba(44, 44, 44, 0.5);
}

.loc-slider__nav {
    display: flex;
    gap: 0.6rem;
}

.loc-slider__btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(44, 44, 44, 0.25);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    padding: 0;
}

.loc-slider__btn:hover {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--bg-color);
}

.loc-slider__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.loc-slider__btn:disabled:hover {
    background: transparent;
    border-color: rgba(44, 44, 44, 0.25);
    color: var(--text-color);
}

/* Coming Soon */
.ab-coming-soon-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: #fff;
    background: rgba(44, 44, 44, 0.6);
    padding: 0.8rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
    .ab-location-item {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .loc-slider {
        flex: none;
        width: 100%;
    }

    .ab-location-text {
        padding-top: 0;
    }

    .loc-slider__slide {
        aspect-ratio: 4 / 3;
    }
}

/* --- 5. STAY WITH US --- */
.ab-stay {
    padding: clamp(6rem, 12vw, 10rem) 2rem;
    background: var(--text-color);
    color: var(--bg-color);
}

.ab-stay-header {
    max-width: 900px;
    margin: 0 auto clamp(5rem, 10vw, 8rem);
    text-align: center;
}

.ab-stay .ab-section-label {
    color: var(--gold-accent);
}

.ab-stay-heading {
    font-family: var(--font-jp-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--bg-color);
    line-height: 1.55;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
}

.ab-stay-sub {
    font-family: var(--font-jp-sans);
    font-size: 1.05rem;
    font-weight: 300;
    color: rgba(244, 241, 235, 0.7);
    line-height: 1.8;
}

.ab-stay-grid {
    max-width: 1340px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.stay-moment {
    display: flex;
    flex-direction: column;
}

.stay-moment__num {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    color: var(--gold-accent);
    margin-bottom: 0.8rem;
}

.stay-moment__image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: rgba(244, 241, 235, 0.05);
}

.stay-moment__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.stay-moment:hover .stay-moment__image img {
    transform: scale(1.04);
}

.stay-moment__label {
    display: block;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--gold-accent);
    margin-bottom: 0.9rem;
}

.stay-moment__copy {
    font-family: var(--font-jp-serif);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    font-weight: 400;
    line-height: 1.9;
    color: rgba(244, 241, 235, 0.85);
    letter-spacing: 0.03em;
}

@media (max-width: 1024px) {
    .ab-stay-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .ab-stay {
        padding: clamp(5rem, 10vw, 7rem) 1.5rem;
    }

    .ab-stay-grid {
        gap: 3rem 1.5rem;
    }

    .stay-moment__image {
        aspect-ratio: 4 / 5;
    }

    .stay-moment__copy {
        font-size: 1rem;
    }

    .ab-stay-heading {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }
}

@media (max-width: 480px) {
    .ab-stay-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .stay-moment__image {
        aspect-ratio: 4 / 3;
    }
}

/* --- 6. FOOTER IMAGE --- */
.ab-footer-image {
    padding: 0;
    line-height: 0;
}

.ab-footer-image img {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    display: block;
}

/* --- LEGACY: keep old brand-story class hidden for stays page compat --- */
.brand-story {
    display: none;
}

.brand-story-inner {
    max-width: 900px;
    margin: 0 auto;
}

.brand-story-label {
    display: block;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    color: var(--gold-accent);
    margin-bottom: 2rem;
}

.brand-story-headline {
    font-family: var(--font-jp-serif);
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.brand-story-sub {
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    font-weight: 300;
    font-style: italic;
    color: rgba(244, 241, 235, 0.6);
    margin-bottom: 4rem;
    letter-spacing: 0.05em;
}

.brand-story-lead {
    font-family: var(--font-jp-sans);
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 2.2;
    color: rgba(244, 241, 235, 0.7);
    max-width: 640px;
    margin-bottom: 4rem;
}

.brand-story-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    border-top: 1px solid var(--gold-accent);
    padding-top: 3rem;
}

.brand-story-col h3 {
    font-family: var(--font-jp-serif);
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: var(--bg-color);
}

.brand-story-col-sub {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 300;
    font-style: italic;
    color: var(--gold-accent);
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
}

.brand-story-col p {
    font-family: var(--font-jp-sans);
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 2;
    color: rgba(244, 241, 235, 0.75);
}

@media (max-width: 768px) {
    .brand-story-columns {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* --- Our Villas Section --- */
.our-villas {
    background: var(--bg-color);
    padding: clamp(5rem, 10vw, 10rem) 2rem;
}

.our-villas-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.section-label {
    display: block;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    color: var(--gold-accent);
    margin-bottom: 1.5rem;
}

.section-headline {
    font-family: var(--font-jp-serif);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 4rem;
    max-width: 500px;
}

/* Villa Cards Grid */
.villas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.villa-card {
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.villa-card:hover {
    opacity: 0.85;
}

.villa-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

.villa-card-location {
    font-family: var(--font-main);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-accent);
    margin-bottom: 0.5rem;
}

.villa-card-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}

.villa-card-copy {
    font-family: var(--font-jp-sans);
    font-size: 0.8rem;
    font-weight: 300;
    color: rgba(44, 44, 44, 0.6);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.villa-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.villa-card-price {
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: 0.02em;
}

.villa-card-guests {
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(44, 44, 44, 0.5);
}

.villa-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.villa-card-tag {
    font-family: var(--font-main);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--gold-accent);
    border: 1px solid var(--border-light);
    padding: 0.25rem 0.6rem;
    border-radius: 2px;
}

.villa-card-link {
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-accent);
    padding-bottom: 2px;
    transition: color 0.3s, border-color 0.3s;
}

.villa-card-link:hover {
    color: var(--gold-accent);
    opacity: 1;
}

@media (max-width: 768px) {
    .villas-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .villa-card-image {
        aspect-ratio: 3 / 2;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .villas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Trust Section --- */
.trust-section {
    background: var(--bg-color);
    padding: 4rem 2rem;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.trust-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.trust-item {
    text-align: center;
    flex: 1;
}

.trust-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.trust-item p {
    font-family: var(--font-jp-sans);
    font-size: 0.75rem;
    font-weight: 300;
    color: rgba(44, 44, 44, 0.6);
    letter-spacing: 0.05em;
}

.trust-divider {
    width: 1px;
    height: 40px;
    background: var(--border-light);
}

@media (max-width: 768px) {
    .trust-inner {
        gap: 1.5rem;
    }

    .trust-number {
        font-size: 1.5rem;
    }

    .trust-item p {
        font-size: 0.65rem;
    }
}

/* --- Experience Section --- */
.experience-section {
    background: var(--text-color);
    color: var(--bg-color);
    padding: clamp(5rem, 10vw, 10rem) 2rem;
}

.experience-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.experience-section .section-label {
    color: var(--gold-accent);
}

.experience-section .section-headline {
    color: var(--bg-color);
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 160px 160px;
    gap: 0.75rem;
}

.experience-tile {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    cursor: default;
}

.experience-tile--tall {
    grid-row: span 2;
}

.experience-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.experience-tile:hover .experience-tile-img {
    transform: scale(1.05);
}

.experience-tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.4s ease;
}

.experience-tile:hover .experience-tile-overlay {
    background: rgba(0, 0, 0, 0.45);
}

.experience-tile-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    text-align: center;
}

.experience-tile-jp {
    display: block;
    font-family: var(--font-jp-serif);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.15em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.experience-tile-en {
    display: block;
    font-family: var(--font-main);
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 0.3rem;
}

.experience-tile-desc {
    display: block;
    font-family: var(--font-jp-sans);
    font-size: 0.65rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.03em;
    margin-top: 0.6rem;
    line-height: 1.6;
}

.experience-tile-property {
    display: block;
    font-family: var(--font-main);
    font-size: 0.55rem;
    font-weight: 400;
    color: var(--gold-accent);
    letter-spacing: 0.12em;
    margin-top: 0.8rem;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .experience-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 180px;
    }

    .experience-tile--tall {
        grid-row: span 2;
    }

    .experience-tile-jp {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .experience-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }

    .experience-tile--tall {
        grid-row: span 1;
    }
}

/* --- Gallery / Instagram Section --- */
.gallery-section {
    background: var(--bg-color);
    padding: clamp(5rem, 10vw, 10rem) 2rem;
}

.gallery-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    display: block;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44, 44, 44, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-overlay span {
    font-family: var(--font-main);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.05em;
}

.gallery-cta {
    text-align: center;
    margin-top: 3rem;
}

.gallery-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--text-color);
    border-bottom: 1px solid var(--gold-accent);
    padding-bottom: 4px;
    text-decoration: none;
    transition: color 0.3s;
}

.gallery-follow-btn:hover {
    color: var(--gold-accent);
    opacity: 1;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-grid .gallery-item:nth-child(4),
    .gallery-grid .gallery-item:nth-child(5) {
        display: none;
    }

    .gallery-item-overlay {
        opacity: 0;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem;
    }

    .gallery-grid .gallery-item:nth-child(3) {
        display: none;
    }
}

/* --- Contact CTA Section --- */
.contact-cta {
    background: var(--text-color);
    color: var(--bg-color);
    padding: clamp(5rem, 10vw, 10rem) 2rem;
    text-align: center;
}

.contact-cta-inner {
    /* No max-width so the headline (with letter-spacing + nowrap) can center
       properly. Narrow children (desc, etc.) get their own max-width below. */
    margin: 0 auto;
}

.contact-cta-tagline {
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.4em;
    color: rgba(244, 241, 235, 0.5);
    margin-bottom: 2rem;
}

.contact-cta-headline {
    font-family: 'Playfair Display', 'Optima', 'Noto Serif JP', serif;
    font-size: clamp(1.4rem, 3.2vw, 2.6rem);
    font-weight: 400;
    font-style: italic;
    margin-bottom: 3rem;
    letter-spacing: 0.35em;
    /* Compensate for trailing letter-spacing so text appears optically centered */
    text-indent: 0.35em;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
}

@media (max-width: 768px) {
    .contact-cta-headline {
        font-size: clamp(0.9rem, 3.6vw, 1.4rem);
        letter-spacing: 0.25em;
        text-indent: 0.25em;
    }
}

.contact-cta-btn {
    display: inline-block;
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--bg-color);
    border: 1px solid var(--gold-accent);
    padding: 1rem 3rem;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.contact-cta-desc {
    font-family: var(--font-jp-sans);
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(244, 241, 235, 0.55);
    margin: 0 auto 3rem;
    line-height: 1.8;
    max-width: 600px;
}

.contact-cta-channels {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
}

.contact-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: rgba(244, 241, 235, 0.7);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-channel:hover {
    color: var(--gold-accent);
    opacity: 1;
}

.contact-channel svg {
    opacity: 0.7;
    transition: opacity 0.3s;
}

.contact-channel:hover svg {
    opacity: 1;
}

.contact-channel span {
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

@media (max-width: 768px) {
    .contact-cta-channels {
        gap: 2rem;
    }

    .contact-channel span {
        font-size: 0.6rem;
    }
}

.contact-cta-btn:hover {
    background: var(--gold-accent);
    color: var(--text-color);
    opacity: 1;
}

/* --- Guest-only booking: hide all auth UI --------------------
   The booking flow at checkout.html does NOT require login —
   Stripe collects guest email at payment time. We hide all
   login/account UI here so guests aren't confused into thinking
   account creation is required. To re-enable login, remove this
   rule. ----------------------------------------------------- */
.btn-login,
.mobile-login,
#account-dropdown {
    display: none !important;
}

/* --- Skeleton for new villas grid --- */
.villas-grid .skeleton-card {
    border-radius: 2px;
}

.villas-grid .skeleton-card-image {
    aspect-ratio: 3 / 4;
    border-radius: 2px;
}

/* ============================================
   MOBILE FIXES (v17) — Homepage & shared
   ============================================ */
@media (max-width: 768px) {
    /* --- INTRO: lead headline must wrap on mobile (was nowrap → overflowed) --- */
    .ab-intro-lead {
        white-space: normal;
        width: auto;
        max-width: 100%;
        position: static;
        left: auto;
        transform: none;
        font-size: clamp(1.6rem, 7vw, 2.4rem);
        line-height: 1.8;
        padding: 1.5rem 0;
        margin: 2rem auto;
        text-align: center;
        text-indent: 0;
    }

    .ab-intro-lead::before,
    .ab-intro-lead::after {
        width: 48px;
    }

    .ab-intro {
        padding: clamp(4rem, 10vw, 6rem) 1.25rem 0;
    }

    .ab-intro-heading {
        font-size: clamp(1.2rem, 5.5vw, 1.6rem);
        line-height: 1.85;
    }

    .ab-intro-body {
        font-size: 0.95rem;
        line-height: 2;
    }

    /* INTRO image sits between the lead and the body on mobile —
       breathing room on both top and bottom, full-bleed side padding */
    .ab-intro-inner .ab-intro-image {
        margin: 2.5rem -1.25rem;
        max-width: none;
        min-height: 0;
        height: auto;
    }

    .ab-intro-inner .ab-intro-image img {
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    /* --- ABOUT: tighten side padding & font --- */
    .ab-about {
        padding: clamp(4rem, 10vw, 6rem) 1.25rem;
    }

    .ab-about-inner {
        gap: 2.5rem;
    }

    /* ABOUT dual-image stack — on mobile, stack vertically with a light offset */
    .ab-about .ab-about-images {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        aspect-ratio: auto;
        max-height: none;
    }

    .ab-about .ab-about-images__main {
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
        object-fit: cover;
        display: block;
    }

    .ab-about .ab-about-images__accent {
        width: 78%;
        margin-left: auto;
        margin-top: -2.5rem;
        position: relative;
        z-index: 2;
        aspect-ratio: 4 / 3;
        height: auto;
        object-fit: cover;
        display: block;
        border: 4px solid #F4F1EB;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
    }

    .ab-about-tagline {
        font-size: clamp(1.6rem, 6vw, 2rem);
        margin-bottom: 0;
    }

    .ab-about-body {
        font-size: 0.95rem;
        line-height: 1.95;
        margin-bottom: 1.4rem;
    }

    /* --- LOCATION: tighten paddings, remove forced <br> linebreaks --- */
    .ab-location {
        padding: clamp(4rem, 10vw, 6rem) 1.25rem;
    }

    .ab-location-header {
        margin-bottom: 3rem;
    }

    .ab-location-intro {
        font-size: 0.95rem;
        line-height: 1.95;
    }

    /* The desktop intro uses <br> tags for typographic line breaks —
       on narrow screens those create awkward orphaned phrases. */
    .ab-location-intro br {
        display: none;
    }

    .ab-location-item {
        margin-bottom: 4.5rem;
        gap: 1.5rem;
    }

    .ab-location-text h3 {
        font-size: clamp(1.4rem, 5.5vw, 1.7rem);
    }

    .ab-location-text p {
        font-size: 0.95rem;
        line-height: 1.95;
    }

    /* --- LOCATION SLIDER: smaller controls on mobile --- */
    .loc-slider__btn {
        width: 34px;
        height: 34px;
    }

    /* --- HERO: keep tagline + logo within bounds --- */
    .hero-tagline {
        font-size: 0.85rem;
        letter-spacing: 0.25em;
        padding: 0 1rem;
    }

    .hero-logo-text {
        font-size: clamp(2.2rem, 11vw, 3.5rem);
    }

    /* --- CONTACT CTA: allow EN headline ("This stillness — the greatest luxury.")
           to wrap on mobile (39 chars × letter-spacing was overflowing) --- */
    .contact-cta {
        padding: clamp(4rem, 10vw, 6rem) 1.25rem;
    }

    .contact-cta-headline {
        white-space: normal;
        line-height: 1.5;
        letter-spacing: 0.2em;
        text-indent: 0.2em;
        word-break: keep-all;
    }

    .contact-cta-desc {
        font-size: 0.85rem;
    }

    /* --- CONTACT PAGE: shrink hardcoded inline padding-top
           (header is shorter on mobile, 140px is excessive) --- */
    .contact-page .contact-container[style*="padding-top"] {
        padding-top: 100px !important;
    }

    .contact-form-wrapper h1 {
        font-size: 2.2rem !important;
    }

    /* --- LEGAL PAGES: cell width tighter for very narrow screens --- */
    .legal-table th,
    .legal-table td {
        font-size: 0.85rem;
        padding: 0.8rem 0.75rem;
        word-break: break-word;
    }

    /* --- GLOBAL FOOTER: clean stack on narrow screens --- */
    .global-footer .container {
        padding: 0 1.25rem;
    }

    .footer-inner {
        flex-direction: column;
        gap: 2.5rem;
    }

    .footer-left {
        max-width: 100%;
    }

    /* Mobile footer: single-column stack (previously 2+1 wrap looked awkward) */
    .footer-links-grid {
        display: flex;
        flex-direction: column;
        gap: 2.25rem;
        width: 100%;
    }

    .footer-col {
        width: 100%;
        gap: 0.85rem;
    }

    .footer-col h4 {
        font-size: 0.72rem;
        margin-bottom: 0.15rem;
    }

    /* --- MARQUEE: smaller font on mobile --- */
    .marquee-text {
        font-size: clamp(1.6rem, 7vw, 2.5rem);
        padding-right: 2.5rem;
    }

    /* --- FOOTER IMAGE: shorter on mobile --- */
    .ab-footer-image img {
        height: 28vh;
    }
}

/* Very narrow screens (iPhone SE / 320px) */
@media (max-width: 380px) {
    .ab-intro-lead {
        font-size: 1.5rem;
    }

    .hero-logo-text {
        font-size: 2rem;
    }

    .contact-cta-headline {
        font-size: 0.95rem;
        letter-spacing: 0.15em;
        text-indent: 0.15em;
    }
}

/* ============================================================
   PAGE TRANSITIONS — fade-in on load, fade-out on navigate
   Entry animation is pure CSS so the page is never stuck invisible
   if JS fails. JS only adds .page-leaving for the exit fade.
   ============================================================ */
@keyframes jvPageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body {
    animation: jvPageFadeIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: opacity 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-leaving {
    opacity: 0;
    animation: none;
    pointer-events: none;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    body {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
    body.page-leaving {
        opacity: 1 !important;
    }
}

/* ============================================================
   STRONGER BUTTON / LINK CLICK FEEDBACK
   ============================================================ */

/* Tactile press on common interactive elements */
.btn-login,
.filter-btn,
.lang-current,
.pd-booking__cta,
.auth-btn,
.btn-clear,
.btn-search-submit,
.contact-form button[type="submit"],
.property-list-item,
.villa-card,
.property-card,
.loc-slider__btn,
.nav-link,
.footer-col a,
.footer-bottom__legal a,
.lang-option {
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
}

/* Active press: small scale-down + dim for tactile feel */
.btn-login:active,
.filter-btn:active,
.lang-current:active,
.pd-booking__cta:active,
.auth-btn:active,
.btn-clear:active,
.btn-search-submit:active,
.contact-form button[type="submit"]:active,
.loc-slider__btn:active,
.lang-option:active {
    transform: scale(0.96);
    opacity: 0.85;
}

/* Cards: gentler press */
.property-list-item:active,
.villa-card:active,
.property-card:active {
    transform: scale(0.985);
    transition: transform 0.12s ease-out;
}

/* Nav links: subtle scale */
.nav-link:active,
.footer-col a:active,
.footer-bottom__legal a:active {
    transform: scale(0.95);
    opacity: 0.7;
}

/* Strengthen filter button hover for clearer hit-state */
.filter-btn {
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.filter-btn:hover {
    transform: translateY(-1px);
}

.filter-btn:active {
    transform: scale(0.96) translateY(0);
}

/* Booking CTA: stronger pulse on press */
.pd-booking__cta:active {
    transform: scale(0.97);
    box-shadow: 0 0 0 4px rgba(191, 160, 122, 0.18);
}