/* 
Theme Name: Nova Cima
*/

:root {
    --bg-light: #fdfdfc;
    /* Warmer, cleaner ivory */
    --bg-dark: #0f0e0d;
    /* Deeper obsidian */
    --text-main: #2b2623;
    --accent-gold: #cfa76e;
    --accent-gold-soft: rgba(207, 167, 110, 0.4);
    --accent-dark: #1a1816;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Montserrat', sans-serif;
    /* Placeholder for future luxury serif */
    
    /* WordPress Admin Bar compensation default */
    --wp-admin--admin-bar--height: 0px;
}

body.admin-bar {
    --wp-admin--admin-bar--height: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar {
        --wp-admin--admin-bar--height: 46px;
    }
}

html {
    box-sizing: border-box;
    height: 100%;
    overscroll-behavior: none;
}

/* Lenis Smooth Scroll Global Styles */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: var(--bg-light);
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    overflow-x: hidden;
}

h1,
h2,
h3,
.logo,
.hero-subtitle {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
    /* Tighter headings for premium look */
}

/* --- ХЕДЕР --- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px clamp(20px, 5vw, 60px);
    z-index: 1000; /* Increased to stay above potentially pinned elements */
    display: flex;
    justify-content: center;
    background: rgba(244, 244, 240, 0.9);
    border-bottom: 1px solid rgba(43, 38, 35, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease, top 0.3s ease;
}

/* Фикс для админ-панели (используем стандартную переменную WP) */
.admin-bar .site-header {
    top: var(--wp-admin--admin-bar--height, 32px) !important;
}

@media screen and (max-width: 600px) {
    /* На очень маленьких экранах админ-панель обычно не фиксирована */
    .admin-bar .site-header {
        top: 0 !important;
    }
}

/* Компенсация админ-панели для контентных страниц */
.admin-bar .contacts-main,
.admin-bar .inv-wrapper,
.admin-bar .legal-main {
    margin-top: var(--wp-admin--admin-bar--height, 32px);
}

body.is-header-solid .site-header {
    /* Kept for JS compatibility if needed, but styles are now default */
    background: rgba(244, 244, 240, 0.75);
    border-bottom-color: rgba(43, 38, 35, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-section {
    position: relative;
    width: 100%;
    /* Use exact screen height minus admin bar offset to prevent GSAP extra scrollbar */
    height: calc(100vh - var(--wp-admin--admin-bar--height));
    min-height: 44.64vw; /* 1000px / 2240px */
    overflow: hidden;
    background-color: var(--bg-dark);
}

.header-inner {
    position: relative;
    width: 100%;
    max-width: 1800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sf-legal-links {
    margin-top: 15px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.sf-legal-links a {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.3s ease;
}
.sf-legal-links a:hover {
    color: var(--color-gold);
}
.logo {
    font-size: 15px; 
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--accent-dark);
    position: relative;
    z-index: 1005;
    text-decoration: none;
    transition: color 0.3s ease;
}

.logo:hover {
    color: var(--accent-gold);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--accent-dark);
    transition: all 0.3s ease-in-out;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-main);
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: var(--accent-gold);
}

.nav-dropdown-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-item-with-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-chevron {
    width: 8px;
    height: 5px;
    opacity: 0.6;
    transition: transform 0.3s;
}

.nav-dropdown-wrapper:hover .nav-chevron {
    transform: rotate(180deg);
    color: var(--accent-gold);
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    margin-top: 15px;
    background: rgba(244, 244, 240, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(43, 38, 35, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 10px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Invisible bridge to prevent hover loss between menu item and dropdown */
.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
}

.nav-dropdown-wrapper:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-link {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-main) !important;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    font-size: 11px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.dropdown-link:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--accent-gold) !important;
}

.btn-contact {
    background: transparent;
    border: 1px solid rgba(43, 38, 35, 0.15);
    padding: 8px 22px;
    color: var(--accent-dark) !important;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.btn-contact:hover {
    background: rgba(43, 38, 35, 0.05);
    border-color: rgba(43, 38, 35, 0.4);
    transform: translateY(-1px);
}

/* --- LANGUAGE SWITCHER --- */
.lang-switcher {
    position: relative;
    margin-left: 30px;
    z-index: 1002;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 20px;
    transition: background 0.3s;
    color: var(--text-main);
}

.lang-current:hover {
    background: rgba(0, 0, 0, 0.05);
}

.lang-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lang-chevron {
    width: 10px;
    height: 6px;
    opacity: 0.6;
    transition: transform 0.3s;
}

.lang-switcher.active .lang-chevron {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: rgba(244, 244, 240, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 8px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--text-main);
    border-radius: 8px;
    transition: background 0.2s;
}

.lang-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

.lang-option.current-lang {
    background: rgba(207, 167, 110, 0.15);
    /* Gold tint */
    color: var(--accent-dark);
}

.lang-name {
    font-size: 11px;
    font-weight: 600;
}

/* --- MOBILE CONNECTIVITY --- */
@media (max-width: 768px) {
    .site-header {
        top: 0 !important;
        padding: 14px 20px;
    }

    .menu-toggle {
        display: flex;
        position: relative;
        z-index: 1002;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--bg-light);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s 0.4s;
        z-index: 1001;
        padding: 40px;
        visibility: hidden;
    }

    .site-header.is-menu-open .main-nav {
        right: 0;
        visibility: visible;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s 0s;
    }

    .main-nav a {
        font-size: 20px;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease;
    }

    /* Staggered delay for links - Updated for nested structure */
    .site-header.is-menu-open .main-nav>a,
    .site-header.is-menu-open .main-nav>.nav-dropdown-wrapper>a {
        opacity: 1;
        transform: translateY(0);
    }

    .site-header.is-menu-open .main-nav>*:nth-child(1) {
        transition-delay: 0.2s;
    }

    .site-header.is-menu-open .main-nav>*:nth-child(2) {
        transition-delay: 0.3s;
    }

    .site-header.is-menu-open .main-nav>*:nth-child(3) {
        transition-delay: 0.4s;
    }

    .site-header.is-menu-open .main-nav>*:nth-child(4) {
        transition-delay: 0.5s;
    }

    .site-header.is-menu-open .main-nav>*:nth-child(5) {
        transition-delay: 0.6s;
    }

    /* Hide dropdown in mobile, just show main link or expand it? 
       User wanted "Apartments" to default to Visual.
       Maybe on mobile we just show the main link.
    */
    .nav-dropdown {
        display: none !important;
        /* Keep it simple on mobile for now unless requested */
    }

    .nav-chevron {
        display: none;
    }

    /* Animated Hamburger */
    .is-menu-open .menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .is-menu-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .is-menu-open .menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* --- HERO TRANSITION WRAPPER (Curtain Effect) --- */
.hero-transition-wrapper {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    /* This wrapper will be pinned by GSAP */
}

/* --- HERO SECTION --- */
.hero-section {
    grid-area: 1 / 1;
    z-index: 10;
    /* On top of horizontal section */
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-light);
    /* Ensure opaque bg to hide scene 2 initially */
    background-image:
        /* Subtle texture for non-sterile feel */
        repeating-linear-gradient(135deg,
            rgba(90, 80, 70, 0.01) 0px,
            rgba(90, 80, 70, 0.01) 1px,
            transparent 1px,
            transparent 8px),
        /* Soft light glow behind the building */
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, rgba(244, 240, 231, 0) 70%),
        /* Elegant main gradient */
        linear-gradient(to bottom, #f7f9fb 0%, #fdfdfc 50%, #f4f0e7 100%);
    /* Без тяжелой тени-полосы — вся глубина строится за счет слоев выше. */
    will-change: transform;
    isolation: isolate;
    /* фиксируем слои, чтобы blend-mode не давал «грязь» */
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 8%, rgba(90, 80, 70, 0.12), transparent 60%),
        linear-gradient(to bottom, rgba(90, 80, 70, 0.06), transparent 45%),
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px,
            transparent 3px);
    mix-blend-mode: soft-light;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

.hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 17.5vh;
    /* 220px / 1260px */
    /* Мягкая «подложка» снизу без жесткой границы/прямоугольника */
    background:
        radial-gradient(ellipse at 50% 115%, rgba(120, 110, 100, 0.18), transparent 68%),
        radial-gradient(ellipse at 20% 120%, rgba(120, 110, 100, 0.10), transparent 72%),
        linear-gradient(to top, rgba(244, 244, 240, 0.0), rgba(244, 244, 240, 0.0));
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.clouds-wrap {
    display: none;
}

.clouds-img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.8;
}

/* --- ЗДАНИЕ (АДАПТИВНОЕ) --- */
.building-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    overflow: hidden;
    will-change: transform;
}

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

/* --- КОНТЕНТ СЛЕВА --- */
.hero-content {
    position: absolute;
    left: 14vw;
    /* Constant relative to 2240px */
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 24vw; /* Narrowed for more "breath" */
    /* 550px / 2240px */
    opacity: 0;
    visibility: hidden;
}

.hero-subtitle {
    font-size: 1.8vw;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.15em;
    color: var(--accent-dark);
    margin-bottom: 2vw;
}

.hero-title {
    font-size: 2.8vw;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.2;
    color: var(--accent-dark);
    margin-bottom: 1.5vw;
}

.hero-text {
    font-size: 0.71vw;
    line-height: 1.8;
    letter-spacing: 0.03em;
    color: var(--text-main);
    margin-bottom: 2.5vw;
    max-width: 90%;
}

.hero-offer {
    border-left: 2px solid var(--accent-gold);
    padding-left: 1.5vw;
    margin-bottom: 2vw;
    /* 30px / 2240px */
}

.offer-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 5px;
}

.offer-price {
    font-size: 1.6vw;
    /* 36px / 2240px */
    font-weight: 400;
    color: var(--accent-dark);
    letter-spacing: 3px;
    margin-bottom: 1vw;
}

.hero-legal {
    font-size: 10px;
    letter-spacing: 1.5px;
    line-height: 1.6;
    font-weight: 300;
    opacity: 0.7;
    color: rgba(59, 53, 48, 0.6);
    max-width: 90%;
    margin-bottom: 1.4vw;
    /* 32px / 2240px */
}

.hero-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.btn-primary {
    display: inline-block;
    padding: 18px 45px;
    background: rgba(26, 25, 24, 0.85); /* Liquid Dark Glass */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 400;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-primary:hover {
    background: rgba(26, 25, 24, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.btn-outline-white {
    background: rgba(244, 244, 240, 0.8) !important; /* Liquid Light Glass */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(15, 14, 13, 0.05) !important;
    color: #1a1918 !important;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: 400;
    padding: 18px 45px;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(15, 14, 13, 0.15) !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), inset 0 0 10px rgba(0, 0, 0, 0.02);
}

/* --- ВТОРОЙ ЭКРАН --- */
.next-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--bg-dark);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.spacer {
    height: 100dvh;
    width: 100%;
    position: relative;
    z-index: 5;
    pointer-events: none;
}

/* Медиа-запросы */
/* Удалены промежуточные адаптации */

/* --- MOBILE HERO ADAPTATION --- */
@media (max-width: 768px) {
    .hero-transition-wrapper {
        display: block !important;
        /* Switch from grid to block flow */
        width: 100% !important;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
        position: relative !important;
    }

    .hero-section {
        position: relative !important;
        grid-area: auto !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh;
        padding: 10;
        /* Removed top padding */
        justify-content: flex-start;
        align-items: center;
        background-color: var(--bg-light) !important;
        z-index: 2;
        overflow: visible;
    }

    /* Restore texture visibility on mobile */
    .hero-section::before {
        z-index: 10;
        opacity: 0.6;
    }

    .hero-bg-text {
        display: none;
    }

    .building-wrap {
        position: relative;
        width: 100% !important;
        height: 65vh !important;
        /* Fixed height for majesty */
        margin-bottom: -30px;
        z-index: 2;
        overflow: hidden;
    }

    .building-img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        /* Cover for better zoom effect */
        object-position: 73% 0%;
        /* Pulled up to remove top gap */
        transform: scale(1.1);
        /* Slight permanent zoom on mobile */
    }

    /* Content block as a "pedestal" */
    .hero-content {
        position: relative;
        width: 100%;
        max-width: 100%;
        left: 0;
        top: 0;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 50px 24px 80px;
        /* Generous padding */
        background: #fff;
        box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.03);
        z-index: 3;
        /* Above building overlap */
        margin-top: 0;
        border-radius: 32px 32px 0 0;
        /* More rounded */
    }

    .hero-subtitle {
        font-size: 26px;
        margin-bottom: 20px;
        line-height: 1.2;
    }

    .hero-text {
        font-size: 14px;
        margin-bottom: 30px;
        max-width: 100%;
        color: rgba(59, 53, 48, 0.9);
    }

    .hero-offer {
        margin-bottom: 30px;
        background: rgba(207, 167, 110, 0.05);
        /* Very subtle gold tint for the offer block */
        padding: 20px;
        border-radius: 12px;
    }

    .offer-price {
        font-size: 28px;
    }

    .hero-legal {
        margin-bottom: 30px;
        font-size: 14px !important;
        /* Larger and visible */
        line-height: 1.5;
        color: rgba(59, 53, 48, 0.7);
    }

    .btn-primary {
        width: 100%;
        text-align: center;
        padding: 22px 30px !important;
        /* Larger comfortable button */
        border-radius: 8px;
        font-size: 14px !important;
        /* Readable */
        letter-spacing: 1px;
    }

    /* --- HORIZONTAL SCROLL RESET --- */
    .horizontal-scroll-section {
        grid-area: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        z-index: 10;
        /* Elevated to ensure it's above any stray desktop layers */
        background-color: #111 !important;
        margin-top: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    .horizontal-scroll-wrapper {
        height: auto;
        display: block;
        overflow: visible;
    }

    .horizontal-track {
        display: block;
        width: 100% !important;
        height: auto;
        transform: none !important;
    }

    .scene {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        display: block !important;
        position: relative !important;
    }

    .depth-1,
    .scene-content {
        height: auto !important;
        display: block !important;
        position: relative !important;
    }

    /* --- SCENE 2: LIFESTYLE REDESIGN (Mobile) --- */
    .scene-lifestyle {
        padding: 60px 0;
        background-color: #1a1816 !important;
        display: block !important;
        height: auto !important;
    }

    .lifestyle-main-title {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        font-size: 26px !important; /* Reduced for Quiet Luxury */
        font-weight: 300 !important;
        letter-spacing: 0.15em !important;
        margin-bottom: 30px !important;
        padding: 0 24px !important;
        white-space: normal !important;
        text-align: left !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    .lifestyle-cards-container {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 24px !important;
        width: 100% !important;
    }

    .lifestyle-card {
        width: 100% !important;
        height: 55vh !important;
        min-height: 440px !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        border-radius: 12px !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4) !important;
        cursor: default !important;
        padding: 30px 20px !important;
        overflow: hidden !important; /* Ensure gradient stays inside */
    }

    /* Gradient overlay for better text readability on mobile */
    .lifestyle-card::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60% !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    .card-bg {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5 !important;
        filter: none !important;
        z-index: 1;
    }

    .card-title-rotated {
        writing-mode: horizontal-tb !important;
        position: relative !important;
        width: 100% !important;
        z-index: 10 !important;
        display: block !important;
        margin-top: auto !important;
        /* Force push to bottom */
        margin-bottom: 8px !important;
    }

    .card-title-rotated h4 {
        transform: none !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        letter-spacing: 0.05em !important;
        color: #fff !important;
        margin: 0 !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        text-align: left !important;
        position: relative !important;
        z-index: 10 !important; /* Above gradient */
    }

    .card-icon {
        display: flex !important;
        width: 20px !important;
        height: 20px !important;
        margin-bottom: 20px !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        opacity: 0.9 !important; /* Increased for readability */
        z-index: 10 !important;
    }

    .card-content {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        opacity: 1 !important;
        background: transparent !important;
        z-index: 10 !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* Reset from desktop flex-end */
    }

    .card-desc {
        font-size: 14px !important;
        font-weight: 300 !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.85) !important; /* Increased for contrast */
        text-align: left !important;
        margin-top: 10px !important;
        position: relative !important;
        z-index: 10 !important;
    }
}

/* =========================================
   HORIZONTAL SCROLL SECTION
   ========================================= */
.horizontal-scroll-section {
    grid-area: 1 / 1;
    z-index: 1;
    /* Underneath Hero */
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Content is visible but covered by Hero initially */
}

.horizontal-scroll-wrapper {
    width: 100%;
    /* Use exact screen height minus admin bar offset to prevent GSAP extra scrollbar */
    height: calc(100vh - var(--wp-admin--admin-bar--height));
    overflow: hidden;
    position: relative;
    display: flex;
}

.horizontal-track {
    display: flex;
    height: 100%;
    /* CRITICAL FIX: Allow track to grow based on content (400vw scene) */
    width: max-content;
    will-change: transform;
}

.scene {
    width: 100vw;
    height: 100%;
    position: relative;
    flex-shrink: 0;
    /* Never shrink scenes */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* DEPTH LAYERS */
.depth-1 {
    z-index: 10;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.depth-minus-1 {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Parallax movement will be handled by JS, but base style here */
}

/* SCENE 2: LIFESTYLE (Cinematic Staircase) */
.scene-lifestyle {
    background: #1a1816 !important;
    /* Force override */
}

.lifestyle-main-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 3.0vw; /* Reduced size as per latest feedback */
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    z-index: 20;
    pointer-events: none;
    line-height: 1.2;
    margin: 0;
}

.lifestyle-cards-container {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.67vw;
    /* 15px / 2240px */
    align-items: flex-end;
    justify-content: center;
    z-index: 10;
}

.lifestyle-card {
    position: relative;
    width: 9vw;
    height: 60vh;
    background: #2b2623;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.18vw;
    /* 4px / 2240px */
    flex-shrink: 0;
    /* Removed transition: width for smooth GSAP scroll scrubbing */
    cursor: pointer;
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.3;
    filter: grayscale(1) brightness(0.3);
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.lifestyle-card.is-active .card-bg {
    opacity: 1;
    filter: brightness(0.3);
}

.card-title-rotated {
    position: absolute;
    top: 0;
    left: 0;
    width: 9vw;
    /* Fixed width equal to closed card belt */
    height: 100%;
    display: flex;
    align-items: center;
    /* Centered horizontally in the 9vw belt */
    justify-content: flex-start;
    /* Physical top since container is not rotated */
    padding-top: 3vh;
    /* Spacing from top */
    writing-mode: vertical-lr;
    /* Reads top-to-bottom naturally */
    z-index: 5;
    pointer-events: none;
}

.card-title-rotated h4 {
    transform: rotate(180deg);
    /* Flips text to read bottom-to-top */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1vw; /* Reduced from 1.4vw to be more subtle */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    margin: 0;
}

.card-icon {
    position: absolute;
    bottom: 1.34vw;
    left: 50%;
    transform: translateX(-50%);
    width: 1.2vw;
    height: 1.2vw;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
    opacity: 0.8;
}

.card-icon svg {
    width: 100%;
    height: 100%;
}

.card-content {
    position: absolute;
    top: 0;
    left: 14vw;
    /* Reduced offset to match 28vw total width */
    width: 14vw;
    height: 100%;
    padding: 1.5vw;
    z-index: 10;
    opacity: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.65vw; /* Refined for Quiet Luxury hierarchy */
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.4); /* Faded subtleness */
    text-align: right;
}

.lifestyle-card.is-active .card-content {
    opacity: 1;
}

/* Removed redundant card-h4 rule */


/* SCENE 3: LOCATION - Wide Cinematic Journey */
.location-section-wrapper,
.transport-section-wrapper,
.screen-5-wrapper,
.screen-7-wrapper {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100vw;
    height: 100vh;
    background-color: #2b2623;
    overflow: hidden;
}

.screen-8-wrapper {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-light);
    background-image:
        radial-gradient(ellipse at 52% 55%, rgba(255, 255, 255, 0.0) 0%, rgba(235, 220, 200, 0.75) 38%, rgba(220, 205, 188, 0.0) 70%),
        linear-gradient(to bottom, #eef2f6 0%, #f4f0e7 45%, #e1d1bd 100%);
    overflow: hidden;
}

.location-section-wrapper {
    z-index: 15;
}

.transport-section-wrapper {
    z-index: 20;
}

.screen-5-wrapper {
    z-index: 30;
}

.screen-7-wrapper {
    z-index: 40;
}

.screen-8-wrapper {
    z-index: 50;
}

.scene-location {
    position: relative;
    width: 260vw; /* Precision width: 50 (pad) + 32 (P1) + 168 (P2-4) + 10 (buffer) = 260vw */
    height: 100%;
    background-color: #1f1d1b;
    color: #fff;
    will-change: transform;
}

/* Common Layer Logic */
.loc-layer {
    position: absolute;
    top: 0;
    left: -4%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
}

/* Layer 0: Background Texture (Parallax Target) */
.layer-bg {
    z-index: 0;
}

.loc-bg-texture {
    width: 110%;
    /* Slightly wider for parallax */
    height: 100%;
    display: none;
}

/* Layer 1: Path (Stretches full width) */
.layer-path {
    z-index: 0;
    display: flex;
    align-items: center;
}

.loc-path-svg {
    width: 100%;
    /* Full 400vw */
    height: 60vh;
    /* Path Styling for 'Drawing' Effect */
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 0.18vw;
    /* 4px / 2240px */
    stroke-dasharray: 2400;
    /* Increased for longer path */
    stroke-dashoffset: 2400;
    /* Hidden initially */
    filter: none;
}

/* ============================
   LAYER 2: LOCATION POINTS
   Circle Overlapping Photo
   ============================ */
.layer-points {
    z-index: 10;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 50vw;
}

/* Each Location Point Container */
.loc-point {
    position: relative;
    flex-shrink: 0;
    margin-right: 16vw; /* Reduced from 25vw — tighter rhythm */
}

/* ============================
   PHOTO STYLING
   ============================ */
.loc-photo {
    width: 26vw; /* Reduced from 31vw */
    height: 36.4vw; /* Proportionally reduced */
    max-height: 60vh;
    overflow: visible;
    border-radius: 0.4vw;
    flex-shrink: 0;
    box-shadow: 0 0.3vw 1.2vw rgba(0, 0, 0, 0.15);
    position: relative;
    background-color: #1f1d1b;
    will-change: transform;
}

/* Inner container for parallax "window" effect */
.loc-photo-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.4vw; /* Match parent */
    position: relative;
    background-color: #1f1d1b;
}

.loc-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.27vw;
    /* 6px / 2240px */
    /* transition: transform 0.6s ease; -- removed for GSAP */
    /* Centered for parallax - GSAP will animate from here */
    position: absolute;
    top: 0;
    left: 0;
}

/* Photo Caption below image */
.photo-caption {
    position: absolute;
    bottom: -1.78vw;
    left: 0;
    right: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.65vw; /* Slightly smaller */
    font-weight: 300; /* Lighter */
    letter-spacing: 0.08em;
    color: #ffffff;
    opacity: 0.55; /* Subtle, not competing */
    text-align: left;
    padding: 0 0.18vw;
}

/* ============================
   CIRCLE COUNTER - Overlapping
   ============================ */
.loc-circle {
    position: absolute;
    top: -1.34vw;
    /* -30px / 2240px */
    left: -2.68vw;
    /* -60px / 2240px */
    z-index: 10;
}

/* The Ring */
.circle-ring {
    width: 7vw; /* Reduced from 8vw */
    height: 7vw;
    border: 0.04vw solid rgba(59, 53, 48, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0.15vw 0.6vw rgba(0, 0, 0, 0.06);
    will-change: transform;
}

/* Content inside circle (title + number + unit) */
.circle-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.27vw;
    /* 6px / 2240px */
}

/* Title INSIDE circle - at top */
.circle-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.52vw; /* Further reduced from 0.58vw */
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--text-main);
    opacity: 0.55;
    text-align: center;
    max-width: 5vw; /* Tighter for long titles */
    margin-bottom: 0.2vw;
}

/* Large Number */
.circle-number {
    font-family: 'Inter', sans-serif;
    font-size: 2.0vw; /* Reduced from 2.4vw */
    font-weight: 300; /* Light, editorial feel */
    color: var(--text-main);
    line-height: 1;
}

/* Unit Badge ("м") */
.circle-unit {
    font-family: 'Inter', sans-serif;
    font-size: 0.5vw;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-main);
    opacity: 0.5; /* Subtle, no border */
    padding: 0;
    border: none; /* Removed border */
    margin-top: 0.18vw;
}

/* Point-specific positioning */
.loc-point.point-1 {
    margin-left: 0;
}

.loc-point.point-2 {
    margin-left: 0;
}


/* Staggered vertical positioning - like a real path */
.loc-point.point-1 {
    margin-left: 6vw; /* Reduced from 10vw */
    transform: translateY(8%);
}

.loc-point.point-2 {
    transform: translateY(0%);
}

.loc-point.point-3 {
    transform: translateY(6%);
}

.loc-point.point-5 {
    transform: translateY(1%);
}

.loc-point.point-4 {
    transform: translateY(10%);
    margin-right: 0;
}

/* CINEMATIC CARD CONTAINER */
.loc-img-card {
    position: absolute;
    width: 26vw;
    /* Increased +1vw additionally */
    height: 36.4vh;
    /* Adjusted vh proportionally */
    /* Using vh for height in cards prevents them from getting too long on wide screens */
    max-height: 55vh;
    /* Ensure stability on different heights */
    border-radius: 0.36vw;
    /* 8px / 2240px */
    box-shadow: 0 0.89vw 2.68vw rgba(0, 0, 0, 0.3);
    /* 20px 60px / 2240px */
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.loc-img-card:hover {
    transform: scale(1.03);
    box-shadow: 0 1.34vw 3.57vw rgba(0, 0, 0, 0.4);
    /* 30px 80px / 2240px */
}

/* Photo Background */
.loc-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.loc-img-card:hover img {
    transform: scale(1.08);
}

/* Gradient Overlay for Text Readability */
.loc-img-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.4) 40%,
            transparent 100%);
    z-index: 5;
    /* Above image, below content */
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.loc-img-card:hover::before {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.5) 40%,
            transparent 100%);
}

/*
   JOURNEY MAP POSITIONS
   Screen 1 (0-100vw): Intro Title Only.
   Screen 2 (100-200vw): Point 1 (Pulse).
   Screen 3 (200-300vw): Point 2 (Port).
   Screen 4 (300-400vw): Point 3 (Park).
   Screen 5 (400+): Point 4 (Infra).
*/
/* Cinematic Card Positions - Staggered for Visual Interest */
.pos-1 {
    left: 90vw;
    top: 18%;
    z-index: 2;
}

.pos-2 {
    left: 170vw;
    top: 32%;
    z-index: 3;
}

.pos-3 {
    left: 250vw;
    top: 15%;
    z-index: 2;
}

.pos-4 {
    left: 330vw;
    top: 28%;
    z-index: 3;
}

/* Layer 3: Content Nodes */
.layer-content {
    z-index: 3;
}

/* Content Overlay - Positioned INSIDE the card */
.loc-node:not(.node-start) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.89vw;
    /* 20px / 2240px */
    z-index: 10;
    /* Above gradient */
    pointer-events: auto;
    /* Allow interaction */
}

/* Main Title - Centered vertically in scene */
.node-start {
    position: absolute;
    left: 15vw;
    /* Уменьшено с 30vw для смещения влево */
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-width: 80vw;
    z-index: 10;
}



.loc-main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.0vw;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: 0.12em;
    text-transform: uppercase; /* Matched to Screen 2 */
    color: #fff;
    text-shadow: 0 0.45vw 1.78vw rgba(0, 0, 0, 0.1);
    margin: 0 0 1.07vw 0;
}

/* Decorative Header Elements */
.loc-deco-line {
    width: 2.0vw;
    height: 1px; /* Thinner */
    background: var(--accent-gold);
    margin: 0 0 0.89vw 0.09vw;
    box-shadow: none;
    opacity: 0.8;
}

/* Specificity fix: .loc-node .loc-intro-upper */
.loc-node .loc-intro-upper {
    font-family: 'Inter', sans-serif;
    font-size: 0.61vw; /* Balanced size */
    font-weight: 300; /* Match luxury weight */
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.65; /* Subtler */
    margin: 0;
    text-shadow: none;
}

/* Remove old card styling - content is now overlaid */
.loc-node:not(.node-start) {
    background: none;
    backdrop-filter: none;
    padding: 0.89vw;
    /* 20px / 2240px */
    /* Keep padding for content spacing */
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* Content nodes now overlay their respective cards - same positions as images */

/* Counter Badge - Top Right Corner */
.node-dist {
    align-self: flex-end;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(0.45vw);
    /* 10px / 2240px */
    -webkit-backdrop-filter: blur(0.45vw);
    padding: 0.36vw 0.71vw;
    /* 8px 16px / 2240px */
    border-radius: 0.89vw;
    /* 20px / 2240px */
    display: flex;
    align-items: baseline;
    gap: 0.18vw;
    /* 4px / 2240px */
    border: 0.04vw solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.loc-img-card:hover .node-dist {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
}

.dist-val {
    font-family: 'Inter', sans-serif;
    font-size: 1.25vw;
    /* 28px / 2240px (Approx 1.8rem) */
    font-weight: 500;
    color: var(--accent-gold);
    line-height: 1;
}

.dist-unit {
    font-family: 'Inter', sans-serif;
    font-size: 0.63vw;
    /* 14px / 2240px (Approx 0.9rem) */
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

/* Text Content - Bottom of Card */
.loc-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.36vw;
    /* 8px / 2240px */
}

.loc-node h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.07vw;
    /* 24px / 2240px (Approx 1.5rem) */
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 0.09vw 0.36vw rgba(0, 0, 0, 0.3);
    /* 2px 8px / 2240px */
    transition: transform 0.3s ease;
}

.loc-img-card:hover h3 {
    transform: translateY(-2px);
}

.loc-node p {
    font-family: 'Inter', sans-serif;
    font-size: 0.64vw;
    /* 14.4px / 2240px (Approx 0.9rem) */
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin: 0;
    text-shadow: 0 0.04vw 0.18vw rgba(0, 0, 0, 0.4);
    /* 1px 4px / 2240px */
}

/* Responsive: Collapse to vertical or slide?
   For simplicity in hybrid mode, keeping vertical stack on specific mobile breakpoint is safer,
   but user is on desktop mostly. Let's ensure functionality.
*/
@media (max-width: 768px) {
    .scene-location {
        min-width: 100vw;
        width: 100vw;
        flex-direction: column;
        overflow-y: auto;
        display: block;
        padding-top: 100px;
    }

    .layer-points {
        display: flex;
        flex-direction: column;
        padding-left: 0;
        height: auto;
    }

    .loc-point {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 120px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: none !important;
        position: relative;
    }

    .loc-photo {
        width: 85vw;
        height: 110vw;
        max-height: 50vh;
    }

    .loc-circle {
        position: relative;
        top: -40px;
        left: 0;
        margin-bottom: -10vw;
        z-index: 20;
    }
}




/* ЧЕТВЕРТЫЙ ЭКРАН: TRANSPORT */
.scene-transport {
    background: linear-gradient(to bottom, #eef2f6 0%, #f5f7fa 50%, #ffffff 100%);
    position: relative;
    min-width: 120vw;
    width: 120vw;
}

.scene-transport::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6vw;
    height: 100%;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.04) 40%,
            transparent 100%);
    pointer-events: none;
    z-index: 10;
}



.transport-circle {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13.39vw;
    /* 300px / 2240px */
    height: 13.39vw;
    /* 300px / 2240px */
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(207, 167, 110, 0.4), rgba(207, 167, 110, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0.89vw);
    /* 20px / 2240px */
    -webkit-backdrop-filter: blur(0.89vw);
    box-shadow: 0 0.89vw 2.68vw rgba(207, 167, 110, 0.2);
    /* 20px 60px / 2240px */
}

.transport-circle-inner {
    width: 12.95vw;
    /* 290px / 2240px */
    height: 12.95vw;
    /* 290px / 2240px */
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(244, 244, 240, 0.85));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 1.79vw rgba(207, 167, 110, 0.1);
    /* 40px / 2240px */
}

.transport-logo {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25vw;
    /* 28px / 2240px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.13vw;
    /* 3px / 2240px */
    color: var(--accent-dark);
}

.transport-circles {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.emanating-circle {
    position: absolute;
    left: calc(10% - 6.7vw);
    /* left edge of transport-circle (150px / 2240px) */
    top: 50%;
    transform: translateY(-50%);
    transform-origin: left center;
    border-radius: 50%;
    border: 0.09vw solid rgba(207, 167, 110, 0.4);
    /* 2px / 2240px */
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.circle-1 {
    width: 20.09vw;
    /* 450px / 2240px */
    height: 20.09vw;
}

.circle-2 {
    width: 44.64vw;
    /* 1000px / 2240px */
    height: 44.64vw;
}

.circle-3 {
    width: 64.73vw;
    /* 1450px / 2240px */
    height: 64.73vw;
}

.circle-point {
    position: absolute;
    right: -0.36vw;
    /* -8px / 2240px */
    top: 50%;
    transform: translateY(-50%);
    width: 0.71vw;
    /* 16px / 2240px */
    height: 0.71vw;
    background: #fff;
    border: 0.09vw solid var(--accent-gold);
    /* 2px / 2240px */
    border-radius: 50%;
    box-shadow: 0 0 0.67vw rgba(207, 167, 110, 0.5);
    /* 15px / 2240px */
    z-index: 10;
}

/* Эффект пульсации для точки */
.circle-point::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--accent-gold);
    opacity: 0;
    animation: pointPulse 2s infinite;
}

@keyframes pointPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.circle-info {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    text-align: left;
    white-space: nowrap;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    opacity: 0;
    z-index: 10;
    /* Above palm tree */
}

.info-1 {
    left: calc(10% + 15.63vw);
    /* 350px / 2240px */
}

.info-2 {
    left: calc(10% + 40.18vw);
    /* 900px / 2240px */
}

.info-3 {
    left: calc(10% + 60.27vw);
    /* 1350px / 2240px */
}

/* Убираем соединительную линию */
.circle-info::before {
    display: none;
}

/* Контейнер для цифры и единицы */
.distance {
    display: flex;
    align-items: flex-start;
    gap: 0.27vw;
    /* 6px / 2240px */
    margin-bottom: 0.45vw;
    /* 10px / 2240px */
}

/* Большие цифры */
.distance-value {
    font-size: 5.36vw;
    /* 120px / 2240px */
    font-weight: 700;
    line-height: 0.85;
    color: #79736f;
    letter-spacing: -0.04em;
    font-family: 'Inter', sans-serif;
}

/* Маленький значок единицы измерения */
.distance-unit {
    font-size: 0.8vw;
    /* 18px / 2240px */
    font-weight: 700;
    color: #79736f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 1.12vw;
    /* 25px / 2240px */
}

.circle-info p {
    font-size: 1.16vw;
    /* 26px / 2240px */
    line-height: 1.2;
    margin: 0;
    color: #79736f;
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.02em;
}

/* --- NEW SPLIT TRANSPORT WRAPPER --- */
.transport-section-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    z-index: 20;
    background-color: #fff;
    /* Initially hidden or offset? GSAP will handle 'from right' */
}

/* Ensure valid positioning context for absolute children */
.transport-section-wrapper .scene-transport {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* Reset min-width to avoid horizontal scroll INSIDE this wrapper */
    min-width: 100vw;
}

/* --- SCREEN 5 WRAPPER (Parallax Overtake) --- */
.screen-5-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    z-index: 30;
    /* Above transport */
    background-color: #2b2623;
    /* Solid dark placeholder */
}

/* =========================================
   SCENE 5: MANAGEMENT (SERVICE)
   ========================================= */
.screen-5-wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 50;
    /* Softer radial gradient — warm but not heavy */
    background: radial-gradient(circle at 40% 50%, #222019 0%, #151311 70%);
}

.scene-management {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* --- Left Column: Orbit --- */
.man-content-left {
    width: 45%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Push orbit towards center line */
    padding-right: 1vw;
}

.man-orbit-container {
    width: 28.93vw;
    /* 648px (approx 60vh at 1080p) / 2240px */
    height: 28.93vw;
    position: relative;
    /* We want the right edge of circle to be near the center of screen */
    transform: translateX(-35%);
}

/* Central Title */
.man-center-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 80%;
    /* restrict width to fit in circle */
}

.man-center-title h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2vw; /* Refined scale */
    font-weight: 300; /* Quiet Luxury */
    line-height: 1.3;
    color: var(--accent-gold);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em; /* Breathable spacing */
}

.man-guarantee-text {
    position: absolute;
    bottom: 4.46vw;
    left: 4.46vw;
    font-family: 'Inter', sans-serif;
    font-size: 0.9vw; /* Subtler */
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5); /* More muted */
    letter-spacing: 0.05em;
    white-space: nowrap;
    z-index: 20;
}



.man-photo-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.man-photo {
    width: 120%;
    height: 120%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(0);
    /* Will be animated for parallax */
    filter: brightness(0.7);
}

.man-photo-text {
    position: absolute;
    bottom: -8%;
    left: -30%;
    width: 150%;
    font-family: 'Inter', sans-serif;
    font-size: 1.07vw;
    /* 24px / 2240px */
    line-height: 1.4;
    color: #fff;
    z-index: 15;
    text-shadow: 0 0.09vw 0.18vw rgba(0, 0, 0, 0.5);
    /* 2px 4px / 2240px */
    text-transform: uppercase;
    text-align: left;
}

/* The Ring */
.man-orbit-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    /* Rotation will be handled by GSAP */
}

.orbit-dash {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08); /* Minimal noise, solid line */
}

/* Points on Orbit */
.man-point {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Sizing */
    width: 1.79vw;
    /* 40px / 2240px */
    height: 1.79vw;
    /* Centering the point pivot */
    margin-top: -0.89vw;
    margin-left: -0.89vw;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 
   Positioning points roughly in a circle 
   We will place them at: 0, 72, 144... degrees.
   BUT simply utilizing transform logic here for initial placement.
   Radius = 50% of container = 30vh (approx).
   We use `transform: rotate(deg) translate(Radius) rotate(-deg)` to keep them upright if needed, 
   but here we want them fixed to the ring, so just `rotate` + `translate`.
   Wait, if we rotate the ring, the points rotate with it.
*/
/* Radius = 14.46vw (half of 28.93vw container) */
.man-point.point-1 {
    transform: rotate(0deg) translate(14.46vw) rotate(0deg);
}

.man-point.point-2 {
    transform: rotate(72deg) translate(14.46vw) rotate(-72deg);
}

.man-point.point-3 {
    transform: rotate(144deg) translate(14.46vw) rotate(-144deg);
}

.man-point.point-4 {
    transform: rotate(216deg) translate(14.46vw) rotate(-216deg);
}

.man-point.point-5 {
    transform: rotate(288deg) translate(14.46vw) rotate(-288deg);
}

/* The Dot */
.point-dot {
    width: 0.45vw; /* Smaller, more refined */
    height: 0.45vw;
    background-color: rgba(255, 255, 255, 0.1);
    border: 0.04vw solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: 0.4s ease;
}

/* Active State (when aligned to right) */
.man-point.active .point-dot {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    box-shadow: 0 0 0.5vw rgba(207, 167, 110, 0.25); /* Subtle glow */
    transform: scale(1.2);
}


/* --- Right Column: Details --- */
.man-content-right {
    width: 55%;
    height: 100%;
    position: relative;
    padding-left: 1vw;
    padding-right: 26vw;
    /* Make room for Screen 6 teaser */
    display: flex;
    align-items: center;
}


.man-details-wrapper {
    position: relative;
    width: 100%;
    max-width: 22.32vw;
    /* 500px / 2240px */
    height: 13.39vw;
    /* 300px / 2240px */
    transform: translateX(-35%);
    /* Fixed height container to prevent shift */
}

/* Detail Card */
.man-detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    /* prevent overlap clicks */
}

.man-detail.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.detail-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4vw; /* Refined scale */
    font-weight: 300; /* Quiet Luxury */
    letter-spacing: 0.08em;
    color: #fff;
    margin: 0 0 0.89vw 0;
}

.man-detail.detail-4 .detail-title,
.man-detail.detail-5 .detail-title {
    margin-top: 2.9vw;
    /* 65px / 2240px */
}

.detail-line {
    width: 2.0vw; /* Compact */
    height: 1px; /* Hair-thin */
    background-color: var(--accent-gold);
    margin-bottom: 1.12vw;
    opacity: 0.7;
}

.detail-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.65vw; /* Editorial proportion */
    font-weight: 300;
    line-height: 1.7; /* More breathing room */
    color: rgba(255, 255, 255, 0.55); /* Understated */
    letter-spacing: 0.02em;
    max-width: 17.86vw;
}

/* --- TRANSPORT PALM TREE (Background) --- */
.transport-palm {
    position: absolute;
    left: 55%;
    bottom: -5%;
    height: 55vh;
    width: auto;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
}

/* --- TRANSPORT CAR (Animated) --- */
.transport-car {
    position: absolute;
    left: -30%;
    /* Start off-screen left */
    bottom: -8%;
    height: 20vh;
    width: auto;
    z-index: 0;
    /* Above palm but below text */
    pointer-events: none;
    object-fit: contain;
    /* Subtle blur */
    filter: blur(4px);

}

/* ============================
   SCREEN 6: EXPANDING VIDEO
   ============================ */
.screen-6-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 35vw;
    /* Initially visible as teaser */
    overflow: hidden;
    z-index: 50;
    /* Above Screen 5 content */
    background-color: #000;
    /* Backdrop */
    will-change: width;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.screen-6-video {
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    /* Fixed width to prevent aspect ratio shift during expansion */
    height: 100vh;
    object-fit: cover;
    display: block;
}

.screen-6-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2;
    pointer-events: none;
}

.screen-6-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 40.18vw;
    /* 900px / 2240px */
    z-index: 10;
    text-align: center;
}

.screen-6-tagline {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2vw !important; /* Elegant editorial scale */
    font-weight: 300; /* Quiet luxury weight */
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #fff;
    text-shadow: 0 0.45vw 1.34vw rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(1.34vw);
}

/* ============================
   SCREEN 7: INVESTMENT (Horizontal Wave Chart)
   ============================ */
.screen-7-wrapper {
    position: relative;
    width: 100%;
    /* True 100vh compensation */
    height: calc(100vh - var(--wp-admin--admin-bar--height));
    height: calc(100dvh - var(--wp-admin--admin-bar--height));
    overflow: hidden;
    z-index: 60;
    /* Light gradient background like Screen 4 */
    background: linear-gradient(135deg, #f8f7f5 0%, #eef2f6 50%, #ffffff 100%);
}

.scene-investment {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Subtle texture overlay */
.scene-investment::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg,
            rgba(90, 80, 70, 0.012) 0px,
            transparent 1px,
            transparent 3px);
    pointer-events: none;
    z-index: 1;
}

/* Left shadow transition effect */
.scene-investment::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 6vw;
    height: 100%;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.02) 40%,
            transparent 100%);
    pointer-events: none;
    z-index: 10;
}

/* --- Horizontal Track --- */
.invest-horizontal-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 120vw;
    /* Match chart width */
    height: 100%;
    display: flex;
    align-items: center;
}

/* --- Intro Block (Left) --- */
.invest-intro {
    position: absolute;
    left: 6vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    opacity: 0;
    /* Hidden for animation */
}

.invest-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.57vw;
    /* 80px / 2240px */
    line-height: 1.1;
    color: #79736f;
    margin: 0 0 0.89vw 0;
    /* 20px / 2240px */
    will-change: transform, opacity, filter;
}

.invest-line {
    width: 2.68vw;
    /* 60px / 2240px */
    height: 0.13vw;
    /* 3px / 2240px */
    background: var(--accent-gold);
    transform-origin: left;
}

/* --- Wave Chart SVG --- */
.invest-wave-chart {
    position: absolute;
    left: 0;
    bottom: 5%;
    width: 120vw;
    height: 45%;
    z-index: 5;
}

/* Wave line animation */
.wave-line {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    /* Will animate to 0 */
}

.wave-area {
    opacity: 1;
    /* Reveal is now handled by clip-path animation */
}

/* --- Wave Points (on the line) --- */
.wave-point {
    position: absolute;
    z-index: 15;
    opacity: 0;
    /* Animated in */
}

/* Points positioned relative to SVG chart area */
/* SVG viewBox is 1800x500. Chart is 120vw x 45vh, positioned at bottom: 5% */
/* Chart coordinates: left: 0, bottom: 5%, width: 120vw, height: 45% */
/* Point coordinates in viewBox (0,0 is top-left, y increases downward):
   Point 1: x=500, y=330 (330 from top, so 500-330=170 from bottom = 34% from bottom)
   Point 2: x=1000, y=240 (240 from top, so 500-240=260 from bottom = 52% from bottom)
   Point 3: x=1500, y=130 (130 from top, so 500-130=370 from bottom = 74% from bottom) */

/* Point 1: x=500/1800 = 27.78% of chart width, y=330 means 34% from bottom of viewBox */
.wave-point.point-1 {
    left: 33.33vw;
    /* 500/1800 * 120vw = 33.33vw */
    bottom: 20.3%;
    /* 5% (chart bottom) + 15.3% (34% of 45% chart height) = 20.3% */
}

/* Point 2: x=1000/1800 = 55.56% of chart width, y=240 means 52% from bottom of viewBox */
.wave-point.point-2 {
    left: 66.67vw;
    /* 1000/1800 * 120vw = 66.67vw */
    bottom: 28.4%;
    /* 5% (chart bottom) + 23.4% (52% of 45% chart height) = 28.4% */
}

/* Point 3: x=1500/1800 = 83.33% of chart width, y=130 means 74% from bottom of viewBox */
.wave-point.point-3 {
    left: 100vw;
    /* 1500/1800 * 120vw = 100vw */
    bottom: 38.3%;
    /* 5% (chart bottom) + 33.3% (74% of 45% chart height) = 38.3% */
}

/* Point marker centering adjustment */
.wave-marker {
    width: 0.8vw;
    /* 18px / 2240px */
    height: 0.8vw;
    background: #fff;
    border: 0.13vw solid var(--accent-gold);
    /* 3px / 2240px */
    border-radius: 50%;
    box-shadow:
        0 0 0 0.22vw rgba(207, 167, 110, 0.15),
        0 0.18vw 0.54vw rgba(207, 167, 110, 0.25);
    position: relative;
    transform: translate(-50%, 50%);
    /* Centering: -50% X centers horizontally, +50% Y positions on the line (bottom position) */
}

.wave-marker-large {
    width: 1.07vw;
    /* 24px / 2240px */
    height: 1.07vw;
    border-width: 0.18vw;
    /* 4px / 2240px */
    box-shadow:
        0 0 0 0.36vw rgba(207, 167, 110, 0.2),
        0 0.27vw 0.89vw rgba(207, 167, 110, 0.3);
}

/* Pulse animation */
.wave-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 0.09vw solid var(--accent-gold);
    /* 2px / 2240px */
    opacity: 0;
    animation: wavePulse 2s infinite;
}

@keyframes wavePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* --- Wave Info Boxes --- */
.wave-info {
    position: absolute;
    width: max-content;
    max-width: 17.86vw;
    /* 400px / 2240px */
    padding: 0.67vw 0;
    /* 15px / 2240px */
}

.wave-info-below {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.89vw;
    /* 20px / 2240px */
    text-align: center;
}

.wave-info-above {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.89vw;
    /* 20px / 2240px */
    text-align: center;
}

.wave-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.8vw;
    /* 18px / 2240px */
    font-weight: 600;
    color: #79736f;
    text-transform: uppercase;
    letter-spacing: 0.04vw;
    /* 1px / 2240px */
    margin-bottom: 0.36vw;
    /* 8px / 2240px */
}

.wave-label-small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.71vw;
    /* 16px / 2240px */
    font-weight: 400;
    color: #79736f;
    text-transform: lowercase;
    margin-bottom: 0.36vw;
    /* 8px / 2240px */
}

.wave-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.8vw;
    /* 18px / 2240px */
    line-height: 1.6;
    color: #79736f;
    margin: 0;
}

.wave-percent {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 3.21vw;
    /* 72px / 2240px */
    font-weight: 600;
    color: #79736f;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.22vw;
    /* 5px / 2240px */
}

/* =========================================
   SCREEN 8: APARTMENTS SELECTION
   ========================================= */
.screen-8-wrapper {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    z-index: 70;
    /* Softer gradient matching Quiet Luxury palette */
    background: radial-gradient(circle at 50% 60%, #222019 0%, #151311 70%);
    isolation: isolate;
}

.scene-apartments {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.screen-8-bg-text {
    position: absolute;
    top: 35%;
    /* Higher as requested */
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(100px, 18vw, 350px);
    color: rgba(255, 255, 255, 0.04);
    z-index: 1;
    white-space: nowrap;
    margin: 0;
    pointer-events: none;
    letter-spacing: -0.02em;
}

.screen-8-building {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.building-img-8 {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.screen-8-content {
    position: absolute;
    left: 14vw;
    /* Constant relative to 2240px, matching Screen 1 */
    top: 55%;
    transform: translateY(-50%);
    z-index: 20;
}

.btn-circle-large {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.2vw 2.8vw;
    background: rgba(0, 0, 0, 0.2); /* Subtle glass backing for visibility */
    border: 0.06vw solid rgba(255, 255, 255, 0.5); /* Clearer white border */
    border-radius: 0;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn-circle-large .btn-text {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65vw; /* Editorial scale */
    font-weight: 300; /* Quiet Luxury */
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.2em; /* Wide breath */
    line-height: 1;
}

.btn-hover-effect {
    display: none;
}

.btn-circle-large:hover {
    background: rgba(207, 167, 110, 0.1); /* Whisper fill */
    border-color: rgba(207, 167, 110, 0.8);
    box-shadow: 0 0 2vw rgba(207, 167, 110, 0.08);
    transform: translateY(-2px);
}

.btn-circle-large::after {
    content: '';
    position: absolute;
    bottom: -0.3vw;
    left: 15%;
    width: 70%;
    height: 0.04vw;
    background: linear-gradient(90deg, transparent, rgba(207, 167, 110, 0.3), transparent);
    transition: opacity 0.5s ease;
    opacity: 0;
}

.btn-circle-large:hover::after {
    opacity: 1;
}

/* ==========================================================================
   SIDE FOOTER (Minimalist Premium)
   ========================================================================== */
.side-footer {
    position: fixed;
    top: 0;
    right: 0;
    width: 18.97vw;
    /* 425px / 2240px */
    height: 100vh;
    background: #ffffff;
    color: #1a1816;
    z-index: 100;
    transform: translateX(100%);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-shadow: -0.67vw 0 1.78vw rgba(0, 0, 0, 0.03);
    /* 15px 40px / 2240px */
    border-left: 0.04vw solid rgba(0, 0, 0, 0.05);
    /* 1px / 2240px */
}

/* WP Admin Bar Fix for Side Footer */
body.admin-bar .side-footer {
    top: var(--wp-admin--admin-bar--height, 32px);
    height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}
@media screen and (max-width: 782px) {
    body.admin-bar .side-footer {
        top: var(--wp-admin--admin-bar--height, 46px);
        height: calc(100vh - var(--wp-admin--admin-bar--height, 46px));
    }
}

.side-footer-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sf-section {
    padding: 1.5vw 2.23vw; /* Reduced from 2.38vw */
    border-bottom: 0.04vw solid rgba(0, 0, 0, 0.05);
}

.sf-section.sf-bottom {
    padding-top: 1.5vw;
    padding-bottom: 2.2vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Changed from center */
    gap: 1.5vw;
}

.sf-legal-links {
    margin-top: 0;
    display: flex;
    gap: 1vw;
    flex-wrap: wrap;
    justify-content: flex-start; /* Changed from center */
}

.sf-legal-links a {
    color: rgba(26, 24, 22, 0.5);
    font-size: 0.45vw; 
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.sf-legal-links a:not(:last-child)::after {
    content: '|';
    margin-left: 1vw;
    opacity: 0.15;
}

.sf-copyright {
    font-family: 'Inter', sans-serif;
    font-size: 0.45vw;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 300;
    line-height: 1.4;
    text-align: left; /* Changed from center */
}

.sf-section:last-child {
    border-bottom: none;
    margin-top: 1.5vw; /* Changed from auto to reduce gap */
    padding-bottom: 2.5vw;
}

.sf-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.67vw;
    /* 15px / 2240px */
    padding-top: 5vw;
    /* Reduced from 13.4vw to raise content */
}

.sf-link {
    font-family: 'Inter', sans-serif;
    font-size: 1.1vw;
    font-weight: 300;
    text-decoration: none;
    color: #1a1816;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

.sf-link:hover {
    color: #cfa76e;
    transform: translateX(5px);
}

.sf-info p {
    font-family: 'Inter', sans-serif;
    font-size: 0.7vw;
    line-height: 1.6;
    color: #888;
    font-weight: 400;
    margin: 0;
}

.sf-actions {
    display: flex;
    flex-direction: column;
    gap: 0.54vw;
    /* 12px / 2240px (TruePS) */
}

.btn-sf {
    display: block;
    padding: 0.8vw 1vw;
    font-family: 'Inter', sans-serif;
    font-size: 0.45vw;
    /* 10px / 2240px (TruePS) */
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-outline {
    background: rgba(244, 244, 240, 0.8);
    /* Liquid Light Glass */
    border: 1px solid rgba(15, 14, 13, 0.05);
    color: #1a1816;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 14, 13, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.btn-solid {
    background: rgba(26, 25, 24, 0.85);
    /* Liquid Dark Glass */
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-solid:hover {
    background: rgba(26, 25, 24, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

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

.sf-logo {
    display: none;
    /* Удаляем крупное лого снизу по просьбе пользователя */
}

.sf-copyright {
    font-family: 'Inter', sans-serif;
    font-size: 0.5vw;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 300;
    line-height: 1.4;
}

/* ==========================================================================
   MOBILE ADAPTATION (Vertical Flow)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Reset Layout --- */
    .hero-transition-wrapper {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    .hero-section {
        height: 100vh !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .horizontal-scroll-section,
    .horizontal-scroll-wrapper {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    .horizontal-track {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
    }

    .scene {
        width: 100% !important;
        min-height: 100vh !important;
        height: auto !important;
        position: relative !important;
        padding: 60px 0 !important;
        display: block !important;
    }

    /* --- Lifestyle (Accordion -> Stack) --- */
    .lifestyle-gallery {
        flex-direction: column !important;
        height: auto !important;
    }

    .gallery-item {
        width: 100% !important;
        height: 500px !important;
        flex: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .item-intro {
        height: auto !important;
        padding: 80px 6vw !important;
    }

    .gallery-text {
        width: 90% !important;
        padding: 0 6vw 40px 6vw !important;
    }

    .gallery-text p {
        opacity: 1 !important;
    }

    /* --- Location (Map -> Stack) --- Consolidated into Revised section below --- */

    /* --- FINAL MOBILE OVERRIDE FIXES --- */
    @media (max-width: 768px) {

        /* Flatten the wrapper to remove grid context completely */
        .hero-transition-wrapper {
            display: contents !important;
        }

        /* Ensure Hero takes up its natural space */
        .hero-section {
            display: flex !important;
            flex-direction: column !important;
            height: auto !important;
            min-height: auto !important;
            position: relative !important;
            z-index: 5 !important;
            background-color: var(--bg-light) !important;
            margin-bottom: 0 !important;
            overflow: visible !important;
        }

        /* Ensure Horizontal Section follows naturally */
        .horizontal-scroll-section {
            display: block !important;
            position: relative !important;
            z-index: 6 !important;
            margin-top: 0 !important;
            height: auto !important;
            width: 100vw !important;
            /* Force full viewport width */
            background-color: #111 !important;
            overflow: hidden !important;
            /* Prevent horizontal bleed */
        }

        .location-section-wrapper,
        .transport-section-wrapper,
        .screen-5-wrapper,
        .screen-7-wrapper,
        .screen-8-wrapper {
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
            width: 100vw !important;
            height: auto !important;
            display: block !important;
            transform: none !important;
            overflow: visible !important;
        }

        /* Fix the intro item to ensure text is visible */
        .item-intro {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            min-height: auto !important;
            padding: 0 24px 60px !important;
            /* Minimized padding */
            background: #111 !important;
            border-top: none !important;
            /* Removed separator line */
            margin-top: 0 !important;
        }

        .item-intro .intro-content {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
        }

        .item-intro h2 {
            display: block !important;
            color: #fff !important;
            opacity: 1 !important;
            visibility: visible !important;
            font-size: 40px !important;
            margin-bottom: 30px !important;
            margin-top: 0 !important;
        }

        .item-intro p {
            color: #888 !important;
            opacity: 1 !important;
        }

        /* --- SCREEN 3: LOCATION ADAPTATION (Revised) --- */
        .scene-location {
            height: auto !important;
            min-height: auto !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 0 0 60px 0 !important;
            background-color: #1f1d1b !important; /* Unified warmer tone */
            margin-top: -2px !important;
            width: 100% !important;
            /* Force full width explicitly */
            max-width: 100vw !important;
            overflow-x: hidden !important;
            right: auto !important;
            left: auto !important;
        }

        .loc-layer {
            position: relative !important;
            width: 100% !important;
            height: auto !important;
            transform: none !important;
            left: auto !important;
            top: auto !important;
        }

        /* TITLE LAYER */
        .layer-content {
            order: -1 !important;
            padding: 60px 10px 40px !important;
            /* Reduced padding to 15px */
            width: 100% !important;
            z-index: 10 !important;
            text-align: left !important;
        }

        .loc-node.node-start {
            position: relative !important;
            left: auto !important;
            top: auto !important;
            transform: none !important;
            width: 100% !important;
            text-align: left !important;
        }

        .loc-main-title {
            font-size: 26px !important;
            font-weight: 300 !important;
            line-height: 1.3 !important;
            text-transform: uppercase !important; /* Matched to Screen 2 */
            color: #fff !important;
            letter-spacing: 0.12em !important;
            margin-bottom: 8px !important;
            padding: 0 !important;
        }

        .loc-deco-line {
            display: block !important;
            width: 40px !important; /* Slightly more compact */
            height: 1px !important;
            background: #cfa76e !important;
            margin: 0 0 15px !important;
            opacity: 0.8 !important;
        }

        .loc-intro-upper {
            opacity: 0.55 !important;
            font-size: 11px !important;
            font-weight: 300 !important;
            letter-spacing: 0.18em !important;
            letter-spacing: 2px !important;
            margin: 0 !important;
        }

        /* POINTS LAYER */
        .layer-points {
            order: 2 !important;
        }

        .layer-path,
        .loc-path-svg {
            display: none !important;
        }

        .loc-layer.layer-points {
            display: flex !important;
            flex-direction: column !important;
            gap: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        .loc-point {
            position: relative !important;
            width: 100% !important;
            margin: 100px 0 20px 0 !important;
            /* Increased margin for larger circle */
            padding: 0 !important;
            background: transparent !important;
            left: auto !important;
            top: auto !important;
            transform: none !important;
        }

        /* PHOTO CONTAINER - WRAPPER */
        .loc-photo {
            position: relative !important;
            width: 100% !important;
            height: auto !important;
            margin-bottom: 0 !important;
            border-radius: 0 !important;
            overflow: visible !important;
            /* Allow caption to flow outside/below */
            box-shadow: none !important;
            background: transparent !important;
            max-height: none !important;
            /* Remove constraints */
        }

        /* IMAGE INNER - ASPECT RATIO */
        .loc-photo-inner {
            position: relative !important;
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 4/3 !important;
            /* Enforce ratio here */
            overflow: hidden !important;
            border-radius: 0 !important;
        }

        .loc-photo img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
        }

        /* CAPTION - BELOW IMAGE */
        .photo-caption {
            position: relative !important;
            display: block !important;
            width: 100% !important;
            padding: 12px 10px 0 !important;
            background: transparent !important;
            color: rgba(255, 255, 255, 0.55) !important;
            font-size: 12px !important; /* Smaller, editorial size */
            font-weight: 300 !important;
            letter-spacing: 0.05em !important;
            line-height: 1.5 !important;
            opacity: 1 !important;
            transform: none !important;
            text-align: left !important;
            bottom: auto !important;
            left: auto !important;
            right: auto !important;
        }

        /* CIRCLE COUNTER - CENTRAL OVERLAY ON IMAGE */
        .loc-circle {
            position: absolute !important;
            top: 0 !important;
            left: 50% !important;
            right: auto !important;
            transform: translate(-50%, -50%) !important;
            /* Removed scale(0.8) */
            transform-origin: center center !important;
            z-index: 50 !important;
        }

        .circle-ring {
            width: 130px !important; /* Reduced for elegance */
            height: 130px !important;
            background: rgba(255, 255, 255, 0.82) !important; /* Glass effect */
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
            border: 0.5px solid rgba(59, 53, 48, 0.08) !important;
        }

        .circle-content {
            gap: 2px !important;
        }

        .circle-title {
            font-size: 11px !important; /* Refined */
            font-weight: 300 !important;
            max-width: 90px !important;
            margin-bottom: 2px !important;
            opacity: 0.55 !important;
            color: var(--text-main) !important;
        }

        .circle-number {
            font-size: 36px !important; /* Balanced proportion */
            line-height: 1 !important;
            font-weight: 300 !important;
            color: var(--text-main) !important;
        }

        .circle-unit {
            font-size: 10px !important;
            padding: 0 !important;
            margin-top: 2px !important;
            border: none !important;
            opacity: 0.5 !important;
            color: var(--text-main) !important;
        }

        .circle-content span {
            opacity: 1 !important;
            visibility: visible !important;
        }

    }

    /* Ensure circle content is visible */
    .circle-content span {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* --- MOBILE SCREEN 4 ADAPTATION --- */
@media (max-width: 768px) {

    /* Reset Wrapper */
    .transport-section-wrapper {
        height: auto !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        overflow: visible !important;
        background: #fff;
    }

    .transport-section-wrapper .scene-transport {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 60px 20px 80px;
        background: linear-gradient(to bottom, #eef2f6 0%, #f5f7fa 50%, #ffffff 100%);
    }

    /* Logo Section */
    .transport-circle {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin-bottom: 60px;
        width: 200px;
        height: 200px;
        box-shadow: 0 10px 40px rgba(207, 167, 110, 0.15);
    }

    .transport-circle-inner {
        width: 190px;
        height: 190px;
    }

    .transport-logo {
        font-size: 20px;
        letter-spacing: 2px;
    }

    /* Container for items - reset absolute positioning */
    .transport-circles {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 40px;
        pointer-events: auto !important;
    }

    /* Info Items */
    .circle-info {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
        /* Override JS fade */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        padding-bottom: 40px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .circle-info:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Hide the emanating rings on mobile */
    .emanating-circle {
        display: none !important;
    }

    /* Adjust typography for mobile */
    .distance-value {
        font-size: 80px;
    }

    .distance-unit {
        font-size: 16px;
        padding-top: 15px;
    }

    .circle-info p {
        font-size: 18px;
    }

    /* Palm Tree & Car */
    .transport-palm {
        display: block !important;
        position: absolute !important;
        right: -25%;
        bottom: -5%;
        /* --- МЕНЯТЬ ЗДЕСЬ (НИЖЕ/ВЫШЕ ПАЛЬМУ) --- */
        height: 45vh;
        width: auto;
        opacity: 0.9;
        transform: rotate(-5deg);
        z-index: 0;
        pointer-events: none;
    }

    .transport-car {
        position: absolute !important;
        /* Changed to absolute to float at bottom */
        width: 95% !important;
        max-width: 340px;
        height: auto;
        margin-top: 0;
        left: 50% !important;
        transform: translateX(-50%) translateY(0);
        /* Centered horizontally */
        bottom: -8%;
        /* --- МЕНЯТЬ ЗДЕСЬ (НИЖЕ/ВЫШЕ МАШИНУ) --- */
        display: block;
        filter: blur(2px);
        z-index: 10;
    }

    /* --- MOBILE SCREEN 5: MANAGEMENT --- */
    .screen-5-wrapper {
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow: visible !important;
        top: auto !important;
        left: auto !important;
        display: block !important;
        background: radial-gradient(circle at 50% 50%, #222019 0%, #151311 100%) !important;
    }

    .scene-management {
        display: block !important;
        /* Switch from flex to block for natural flow */
        height: auto !important;
        min-height: 100vh !important;
        width: 100% !important;
        padding: 60px 0 20px;
        overflow: visible !important;
        /* CRITICAL */
    }

    /* Left Content: Title */
    .man-content-left {
        width: 100% !important;
        height: auto !important;
        padding: 0 20px !important;
        display: block !important;
        margin-bottom: 40px;
        overflow: visible !important;
    }

    .man-orbit-container {
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        display: block !important;
        overflow: visible !important;
    }

    .man-orbit-ring {
        display: none !important;
    }

    .man-center-title {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        text-align: center;
        display: block !important;
    }

    .man-center-title h3 {
        font-size: 24px !important;
        font-weight: 300 !important;
        letter-spacing: 0.12em !important;
        margin: 0 !important;
    }

    /* Right Content: Details List */
    .man-content-right {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        padding: 0 20px !important;
        overflow: visible !important;
    }

    .man-details-wrapper {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Reset PC max-width */
    }

    .man-detail {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        padding: 24px 20px !important; /* More breathable */
        margin-bottom: 16px !important;
        background: rgba(255, 255, 255, 0.04); /* Whisper glass */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 0.5px solid rgba(255, 255, 255, 0.06);
        border-radius: 12px;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .man-detail:last-child {
        margin-bottom: 0;
    }

    /* Reset desktop-specific margins for items 4 and 5 */
    .man-detail.detail-4 .detail-title,
    .man-detail.detail-5 .detail-title {
        margin-top: 0 !important;
    }

    .detail-title {
        font-size: 16px !important;
        font-weight: 300 !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 8px !important;
        color: var(--accent-gold);
    }

    .detail-line {
        width: 30px !important;
        height: 1px;
        background: var(--accent-gold) !important;
        margin-bottom: 12px !important;
        opacity: 0.6 !important;
    }

    .detail-text {
        font-size: 13px !important;
        font-weight: 300 !important;
        line-height: 1.6 !important;
        opacity: 0.6 !important;
        letter-spacing: 0.02em !important;
        max-width: 100% !important;
    }

    /* Guarantee Text - NOW PLACED BELOW ALL BLOCKS */
    .man-guarantee-text {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin: 40px auto 20px !important;
        text-align: center;
        width: 90% !important;
        max-width: 300px;
        font-size: 13px !important;
        font-weight: 300 !important;
        line-height: 1.5 !important;
        letter-spacing: 0.05em !important;
        color: rgba(255, 255, 255, 0.4) !important;
        display: block !important;
        clear: both;
        white-space: normal !important;
    }

    /* --- MOBILE SCREEN 6: VIDEO PANEL --- */
    .screen-6-panel {
        position: relative !important;
        width: 100% !important;
        height: 65vh !important;
        /* Slightly taller for cinematic feel */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        display: block !important;
        opacity: 1 !important;
        margin: 0 !important;
        /* Removed top margin */
        /* Pushed down after guarantee */
        background: #000 !important;
        overflow: hidden;
    }

    .screen-6-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important;
        position: relative !important;
        /* Stay in natural box */
    }

    .screen-6-content {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 90% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10;
        text-align: center;
    }

    .screen-6-tagline {
        font-family: 'Montserrat', sans-serif;
        font-size: 18px !important; /* Matched mobile luxury scale */
        font-weight: 300 !important;
        letter-spacing: 0.15em !important;
        text-transform: uppercase !important;
        line-height: 1.4 !important;
        opacity: 1 !important;
        transform: none !important;
        filter: blur(0px) !important;
        color: #fff !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    /* --- MOBILE SCREEN 7: INVESTMENT --- */
    .screen-7-wrapper {
        height: auto !important;
        position: relative !important;
        overflow: visible !important;
        display: block !important;
        z-index: 60;
    }

    .scene-investment {
        height: auto !important;
        position: relative !important;
        overflow: visible !important;
        display: block !important;
        padding: 80px 20px !important;
        width: 100% !important;
    }

    .scene-investment::after {
        display: none !important;
    }

    .invest-horizontal-track {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
    }

    .invest-intro {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 60px;
        text-align: center;
        display: block !important;
    }

    .invest-title {
        font-size: clamp(2rem, 8vw, 2.5rem) !important;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
    }

    .invest-line {
        margin: 0 auto !important;
    }

    .invest-wave-chart {
        display: none !important;
    }

    .wave-point {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 40px;
        display: block !important;
        text-align: center;
    }

    .wave-point:last-child {
        margin-bottom: 0;
    }

    .wave-marker {
        display: none !important;
    }

    .wave-info {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: none !important;
        text-align: center !important;
        padding: 0 20px !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .wave-label {
        display: block !important;
        font-size: 20px !important;
        margin-bottom: 12px !important;
        color: var(--accent-gold) !important;
        font-weight: 600 !important;
    }

    .wave-desc {
        font-size: 16px !important;
        line-height: 1.6 !important;
        opacity: 0.9 !important;
        color: #555 !important;
        max-width: none !important;
        text-align: center !important;

        br {
            display: none;
        }
    }

    .wave-percent {
        font-size: 56px !important;
        display: block !important;
        margin-bottom: 10px !important;
        color: var(--accent-gold) !important;
        font-family: 'Playfair Display', serif !important;
        line-height: 1 !important;
    }

    .wave-label-small {
        display: block !important;
        font-size: 16px !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        margin-bottom: 15px !important;
        color: #777 !important;
    }

    /* --- MOBILE SCREEN 8: APARTMENTS --- */
    .screen-8-wrapper {
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        overflow: visible !important;
        display: block !important;
        z-index: 70 !important;
        background: #161412 !important;
    }

    .scene-apartments {
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        display: block !important;
        position: relative !important;
        padding: 0 !important;
    }


    .screen-8-building {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        z-index: 1 !important;
        display: block !important;
    }

    .building-img-8 {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center top !important;
    }

    .screen-8-content {
        position: absolute !important;
        top: 55% !important;
        left: 20px !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        width: auto !important;
        bottom: auto !important;
    }

    .btn-circle-large {
        padding: 14px 28px !important;
        width: auto !important;
        height: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .btn-text {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 10px !important;
        font-weight: 300 !important;
        color: #fff !important;
        letter-spacing: 0.2em !important;
        padding: 0 !important;
    }

    /* --- MOBILE SCREEN 9: FOOTER --- */
    .side-footer {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        right: auto !important;
        top: auto !important;
        z-index: 5 !important;
        background: #ffffff !important;
        color: #1a1816 !important;
        box-shadow: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
        display: block !important;
    }

    .side-footer-inner {
        padding: 60px 20px 40px !important;
        height: auto !important;
        display: block !important;
    }

    .sf-section {
        padding: 30px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        text-align: center !important;
    }

    .sf-section:last-child {
        border-bottom: none !important;
        margin-top: 20px !important;
        padding-bottom: 80px !important; /* Increased for full clearance */
    }

    .sf-contacts {
        padding-top: 0 !important;
        gap: 15px !important;
    }

    .sf-link {
        font-size: 20px !important;
        display: block !important;
    }

    .sf-info p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #666 !important;
        text-align: center !important;
    }

    .sf-actions {
        flex-direction: column !important;
        gap: 15px !important;
        margin: 20px 0 !important;
    }

    .btn-sf {
        padding: 16px !important;
        font-size: 14px !important;
        width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .sf-copyright {
        font-size: 10px !important;
        font-weight: 300 !important;
        letter-spacing: 0.08em !important;
        opacity: 0.5 !important;
        text-align: center !important;
        padding-bottom: 10px !important; /* Prevent going below screen */
        line-height: 1.4 !important;
    }
}

/* ============================================
   CONTACTS PAGE STYLES
   ============================================ */

.contacts-page {
    background-color: var(--bg-light);
    min-height: 100vh;
}

.contacts-main {
    padding-top: 100px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contacts-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px clamp(20px, 5vw, 80px);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 8vw, 120px);
    align-items: start;
}

/* Left Column: Contact Information */
.contacts-info {
    position: sticky;
    top: 140px;
}

.contacts-title {
    font-size: clamp(48px, 6vw, 72px);
    color: var(--accent-dark);
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.contacts-subtitle {
    font-size: clamp(16px, 1.2vw, 20px);
    color: rgba(59, 53, 48, 0.7);
    margin: 0 0 60px 0;
    font-weight: 400;
}

.contacts-details {
    margin-bottom: 60px;
}

.contact-item {
    margin-bottom: 30px;
}

.contact-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(59, 53, 48, 0.5);
    margin-bottom: 8px;
    font-weight: 600;
}

.contact-value {
    display: block;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--accent-dark);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.contact-value:hover {
    color: var(--accent-gold);
}

.contacts-legal {
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(207, 167, 110, 0.05);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 8px 8px 0;
}

.contacts-legal p {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(59, 53, 48, 0.7);
    margin: 0;
}

.contacts-copyright {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(59, 53, 48, 0.4);
    font-weight: 600;
}

/* Right Column: Contact Form */
.contacts-form-wrapper {
    background: #ffffff;
    padding: clamp(40px, 5vw, 60px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--accent-dark);
    font-weight: 600;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid rgba(59, 53, 48, 0.1);
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    background: #ffffff;
    transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 4px rgba(207, 167, 110, 0.1);
}

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

.form-error {
    font-size: 12px;
    color: #d32f2f;
    margin-top: 5px;
    display: block;
}

.form-message {
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    display: none;
}

.form-message.success {
    display: block;
    background: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.form-message.error {
    display: block;
    background: rgba(211, 47, 47, 0.1);
    color: #c62828;
    border: 1px solid rgba(211, 47, 47, 0.3);
}

.form-submit {
    padding: 18px 40px;
    background: #ffffff;
    color: var(--accent-dark);
    border: 1px solid var(--accent-dark);
    border-radius: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.form-submit:hover:not(:disabled) {
    background: var(--accent-gold);
    color: var(--accent-dark);
    border-color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(207, 167, 110, 0.3);
}

.form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.submit-loading {
    display: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .contacts-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

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

    .selection-toggles {
        width: 100%;
        justify-content: center;
    }

    .contacts-info {
        position: relative;
        top: 0;
    }

    .contacts-title {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .contacts-main {
        padding-top: 80px;
    }

    .contacts-container {
        padding: 40px 20px;
        gap: 50px;
    }

    .contacts-title {
        font-size: 40px;
        margin-bottom: 15px;
    }

    .contacts-subtitle {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .contacts-details {
        margin-bottom: 40px;
    }

    .contact-item {
        margin-bottom: 25px;
    }

    .contact-value {
        font-size: 22px;
    }

    .contacts-legal {
        padding: 20px;
        margin-bottom: 30px;
    }

    .contacts-form-wrapper {
        padding: 30px 20px;
    }

    .contact-form {
        gap: 25px;
    }

    .form-input,
    .form-textarea {
        padding: 14px 16px;
        font-size: 14px;
    }

    .form-submit {
        padding: 16px 30px;
        width: 100%;
    }
}

/* --- HISTORY PAGE --- */
.history-page {
    background: #000;
}

.history-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.history-container {
    flex: 1;
    display: flex;
    align-items: center;
}

@media (min-width: 769px) {
    .history-page {
        overflow: hidden;
    }

    .history-page-wrapper {
        height: 100vh;
        overflow: hidden;
    }

    .history-container {
        display: flex;
        flex-direction: row;
        height: 100%;
        scrollbar-width: none;
    }

    .history-item {
        flex: 0 0 auto;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 100px 8vw 60px;
        box-sizing: border-box;
    }

    .history-img-wrap {
        width: 100%;
        max-width: 1200px;
        height: 60vh;
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    }

    .history-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .history-info {
        width: 100%;
        max-width: 1200px;
        margin-top: 40px;
        text-align: left;
    }

    .history-date {
        font-family: 'Montserrat', sans-serif;
        font-size: clamp(2rem, 4vw, 3.5rem);
        color: var(--accent-gold);
        margin-bottom: 15px;
    }

    .history-caption {
        font-size: clamp(1rem, 1.2vw, 1.4rem);
        line-height: 1.6;
        color: #aaa;
        max-width: 800px;
    }
}

@media (max-width: 768px) {
    .history-container {
        display: block;
        padding: 100px 20px 40px;
    }

    .history-item {
        margin-bottom: 80px;
    }

    .history-item:last-child {
        margin-bottom: 40px;
    }

    .history-img-wrap {
        width: 100%;
        aspect-ratio: 16/10;
        margin-bottom: 25px;
        border-radius: 10px;
        overflow: hidden;
    }

    .history-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .history-date {
        font-family: 'Montserrat', sans-serif;
        font-size: 2rem;
        color: var(--accent-gold);
        margin-bottom: 12px;
    }

    .history-caption {
        font-size: 1.1rem;
        line-height: 1.5;
        color: #ccc;
    }
}

.history-page .side-footer {
    background: #0a0a0a;
    border-top: 1px solid #1a1a1a;
}