/* ===================================================================
   Land of Smile — Mobile CSS v1.0
   HyperOS v3 animations + responsive breakpoints + touch optimizations
   =================================================================== */

/* ===================================================================
   1. HYPEROS v3 KEYFRAME ANIMATIONS
   =================================================================== */

/* Spring bounce — element overshoots then settles */
@keyframes losSpringIn {
    0%   { opacity: 0; transform: translateY(30px) scale(0.92); }
    60%  { opacity: 1; transform: translateY(-6px) scale(1.02); }
    80%  { transform: translateY(2px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Spring scale — from center */
@keyframes losSpringScale {
    0%   { opacity: 0; transform: scale(0.85); }
    50%  { opacity: 1; transform: scale(1.04); }
    75%  { transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* Page entrance — fade + slight scale */
@keyframes losPageEnter {
    0%   { opacity: 0; transform: scale(0.97) translateY(8px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Staggered reveal — used with animation-delay cascade */
@keyframes losStaggerReveal {
    0%   { opacity: 0; transform: translateY(24px); }
    60%  { transform: translateY(-3px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Drawer slide in from right with spring */
@keyframes losDrawerSlideIn {
    0%   { transform: translateX(100%); }
    70%  { transform: translateX(-3%); }
    85%  { transform: translateX(1%); }
    100% { transform: translateX(0); }
}

/* Tap glow pulse — replaces hover glow on mobile */
@keyframes losTapGlow {
    0%   { box-shadow: 0 0 0 0 rgba(212,168,83,0.3); }
    50%  { box-shadow: 0 0 20px 4px rgba(212,168,83,0.15); }
    100% { box-shadow: 0 0 0 0 rgba(212,168,83,0); }
}

/* Parallax float for hero backgrounds */
@keyframes losParallaxFloat {
    0%, 100% { transform: translateY(0) scale(1.05); }
    50%      { transform: translateY(-10px) scale(1.05); }
}

/* Card expand pop */
@keyframes losCardPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Rubber-band overscroll */
@keyframes losRubberBand {
    0%   { transform: scaleY(1); }
    30%  { transform: scaleY(1.02); }
    60%  { transform: scaleY(0.99); }
    100% { transform: scaleY(1); }
}


/* ===================================================================
   2. GLOBAL MOBILE TOUCH OPTIMIZATIONS
   =================================================================== */

@media (max-width: 991px) {

    /* CRITICAL: Prevent horizontal overflow — fixes drawer visible on pinch-zoom */
    html {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden !important;
    }
    body {
        overflow-x: hidden !important;
        position: relative;
        width: 100% !important;
        max-width: 100vw !important;
    }
    #wrapper,
    .site,
    .site-container,
    main,
    #inner-wrap {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Remove tap highlight globally */
    *,
    *::before,
    *::after {
        -webkit-tap-highlight-color: transparent;
    }

    /* GPU-accelerated scroll on scrollable containers */
    .los-expand-card,
    .los-mobile-drawer,
    .los-listings-page {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal scroll — only on outermost wrappers */
    .los-listings-page,
    .los-footer,
    .los-footer-main {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    /* Inner elements — just constrain width, no overflow hidden */
    .los-search-form,
    .los-filters-row,
    .los-price-row,
    .los-property-grid,
    .los-page-hero,
    .los-hero,
    .los-section,
    .los-section--alt,
    .los-cta,
    .los-footer-inner {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Search form — contained width */
    .los-search-form {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* All selects/inputs inside filters — prevent overflow */
    .los-select,
    .los-input-search,
    .los-input-price,
    .los-btn-search {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ensure minimum tap target size (44px) for key interactive elements only */
    .los-carousel-btn, .los-expand-prev, .los-expand-next,
    .los-social-link, .los-msg-icon,
    .los-lang-btn, .los-mobile-toggle,
    .los-cur-tab, .los-nav-arrow,
    .los-pagination .page-numbers {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover transforms — replace with :active spring feedback */
    .los-property-card:hover,
    .los-feature-card:hover,
    .los-about-story-card:hover,
    .los-about-service-panel:hover,
    .los-contact-card:hover,
    .los-team-card:hover,
    .los-pricelist-card-wrap:hover .los-pricelist-card,
    .luxury-black-card:hover,
    .los-nav-card:hover,
    .los-service-block:hover {
        transform: none;
    }

    /* Disable hover glow overlays */
    .los-feature-card:hover::after,
    .luxury-card:hover::before,
    .los-about-story-card:hover::before {
        opacity: 0;
    }
}


/* ===================================================================
   3. PAGE LOAD TRANSITION
   =================================================================== */

@media (max-width: 991px) {

    /* Page entrance animation */
    .los-luxury,
    .los-page-hero,
    .los-listings-page {
        animation: losPageEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* Staggered reveal for cards when scrolled into view
       Works with existing Intersection Observer that adds .los-visible */
    .los-reveal.los-visible {
        animation: losStaggerReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .los-reveal.los-visible.los-reveal-delay-1 {
        animation-delay: 0.08s;
    }
    .los-reveal.los-visible.los-reveal-delay-2 {
        animation-delay: 0.16s;
    }
    .los-reveal.los-visible.los-reveal-delay-3 {
        animation-delay: 0.24s;
    }
    .los-reveal.los-visible.los-reveal-delay-4 {
        animation-delay: 0.32s;
    }
}


/* ===================================================================
   4. SCROLL REVEAL — SPRING ANIMATIONS FOR VISIBLE ELEMENTS
   =================================================================== */

@media (max-width: 991px) {

    /* Cards spring in when revealed */
    .los-feature-card.los-visible,
    .los-about-story-card.los-visible,
    .los-about-service-panel.los-visible,
    .los-contact-card.los-visible,
    .los-team-card.los-visible,
    .los-service-block.los-visible,
    .los-stat.los-visible,
    .los-pricelist-card-wrap.los-visible {
        animation: losSpringIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* Stats spring with scale */
    .los-stat-item.los-visible,
    .los-stat.los-visible {
        animation: losSpringScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
}


/* ===================================================================
   5. SPRING BUTTON EFFECTS — HAPTIC-FEEL TAP
   =================================================================== */

@media (max-width: 991px) {

    /* Primary buttons — haptic press */
    .los-btn-primary,
    .los-btn-outline,
    .los-btn-gold,
    .los-btn-outline-gold,
    .los-btn,
    .los-btn-search,
    .los-form button {
        transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.15s ease,
                    background 0.2s ease;
    }

    .los-btn-primary:active,
    .los-btn-outline:active,
    .los-btn-gold:active,
    .los-btn-outline-gold:active,
    .los-btn:active,
    .los-btn-search:active,
    .los-form button:active {
        transform: scale(0.95) !important;
        transition-duration: 0.08s;
    }

    /* Remove hover transforms from buttons */
    .los-btn-primary:hover,
    .los-btn-outline:hover,
    .los-btn-gold:hover,
    .los-btn-outline-gold:hover,
    .los-btn:hover,
    .los-btn-search:hover,
    .los-form button:hover {
        transform: none;
    }

    /* Card tap feedback — slight press + glow */
    .los-property-card:active,
    .los-feature-card:active,
    .los-about-story-card:active,
    .los-nav-card:active,
    .luxury-black-card:active,
    .los-pricelist-card:active {
        transform: scale(0.97);
        transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
        animation: losTapGlow 0.4s ease-out;
    }

    /* Service block tap */
    .los-service-block:active {
        transform: scale(0.98);
        transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Team card tap */
    .los-team-card:active {
        transform: scale(0.98);
        border-color: rgba(212,168,83,0.25);
    }

    /* Contact card tap */
    .los-contact-card:active {
        transform: scale(0.98);
        border-color: rgba(212,168,83,0.2);
    }

    /* Carousel buttons — always visible on mobile + tap effect */
    .los-carousel-btn {
        opacity: 1 !important;
    }

    .los-carousel-btn:active,
    .los-expand-prev:active,
    .los-expand-next:active {
        transform: translateY(-50%) scale(0.88);
        background: rgba(212,168,83,0.3);
        transition: transform 0.08s ease;
    }

    /* Social / messenger icon tap */
    .los-social-link:active,
    .los-msg-icon:active,
    .los-footer-socials a:active {
        transform: scale(0.88);
        transition: transform 0.08s ease;
    }

    /* Team link tap */
    .los-team-link:active {
        transform: scale(0.94);
        background: linear-gradient(135deg, var(--gold, #D4A853), var(--gold-deep, #B8922E));
        color: #0a0a1a;
    }

    /* Pagination tap */
    .los-pagination .page-numbers:active {
        transform: scale(0.92);
        transition: transform 0.08s ease;
    }

    /* Language button tap */
    .los-lang-btn:active {
        transform: scale(0.94) !important;
    }

    /* Currency tab tap */
    .los-cur-tab:active {
        transform: scale(0.94);
        transition: transform 0.08s ease;
    }
}


/* ===================================================================
   6. MOBILE DRAWER — SPRING ANIMATION ENHANCEMENT
   =================================================================== */

@media (max-width: 991px) {

    /* Override right-based positioning with transform for spring animation */
    .los-mobile-drawer {
        right: 0 !important;
        transform: translateX(110%) !important;
        transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                    visibility 0s 0.45s !important;
        visibility: hidden !important;
    }

    .los-mobile-drawer.open {
        transform: translateX(0) !important;
        visibility: visible !important;
        transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                    visibility 0s 0s !important;
        animation: losDrawerSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
    }

    /* Menu items stagger in */
    .los-mobile-drawer.open .los-mobile-nav ul li {
        animation: losStaggerReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .los-mobile-drawer.open .los-mobile-nav ul li:nth-child(1) { animation-delay: 0.05s; }
    .los-mobile-drawer.open .los-mobile-nav ul li:nth-child(2) { animation-delay: 0.10s; }
    .los-mobile-drawer.open .los-mobile-nav ul li:nth-child(3) { animation-delay: 0.15s; }
    .los-mobile-drawer.open .los-mobile-nav ul li:nth-child(4) { animation-delay: 0.20s; }
    .los-mobile-drawer.open .los-mobile-nav ul li:nth-child(5) { animation-delay: 0.25s; }
    .los-mobile-drawer.open .los-mobile-nav ul li:nth-child(6) { animation-delay: 0.30s; }
    .los-mobile-drawer.open .los-mobile-nav ul li:nth-child(7) { animation-delay: 0.35s; }
    .los-mobile-drawer.open .los-mobile-nav ul li:nth-child(8) { animation-delay: 0.40s; }

    /* Mobile nav link tap feedback */
    .los-mobile-nav ul li a:active {
        background: rgba(212,168,83,0.08) !important;
        transform: scale(0.97);
        transition: transform 0.08s ease;
    }
}


/* ===================================================================
   7. PARALLAX HERO — SUBTLE DEPTH ON MOBILE
   =================================================================== */

@media (max-width: 991px) {

    /* Subtle parallax effect via background attachment */
    .los-hero {
        background-attachment: fixed;
        overflow: hidden;
    }

    /* Hero overlay subtle floating animation */
    .los-hero-overlay {
        animation: losParallaxFloat 8s ease-in-out infinite;
        transform-origin: center center;
    }

    /* Page hero — subtle scale entrance */
    .los-page-hero {
        animation: losSpringScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
}


/* ===================================================================
   8. BREAKPOINT: 991px — TABLET
   =================================================================== */

@media (max-width: 991px) {

    /* Sections — reduce padding */
    .los-section {
        padding: 70px 20px;
    }

    /* Section header spacing */
    .los-section-header {
        margin-bottom: 44px;
    }

    /* CTA — reduce padding */
    .los-cta {
        padding: 80px 20px;
    }

    /* Stats — 2x2 grid */
    .los-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 40px;
        justify-items: center;
        padding: 60px 20px;
    }

    /* Team — single column */
    .los-team-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        gap: 30px;
    }

    /* Feature cards — 2 columns */
    .los-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* About story — 2 columns */
    .los-about-story {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    /* About services — single column */
    .los-about-services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Contact grid — single column */
    .los-contacts-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Services list — single column inside panels */
    .los-services-list {
        grid-template-columns: 1fr;
    }

    /* Property grid — 2 columns */
    .los-property-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Nav grid — 2 columns */
    .los-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer — 2 columns */
    .los-footer-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px 28px !important;
    }

    /* Pricelist — reduce gap */
    .los-pricelist-grid {
        gap: 20px;
    }

    /* Service blocks — remove alternating margin */
    .los-service-block:nth-child(even),
    .los-service-block:nth-child(odd) {
        margin-left: 0;
        margin-right: 0;
    }

    /* Filters — 2 columns on tablet */
    .los-filters-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    /* Sort select — full width in price row */
    .los-select-sort {
        flex: 1 1 100%;
        width: 100%;
    }

    /* Price row — wrap nicely */
    .los-price-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .los-price-sep {
        display: none;
    }

    .los-input-price {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    .los-btn-search {
        flex: 1 1 calc(50% - 4px);
        padding: 12px 16px;
    }

    /* Card body — slightly less padding */
    .los-card-body {
        padding: 18px 20px 22px;
    }

    /* Expanded card — touch-friendly */
    .los-expand-card {
        border-radius: 14px;
    }

    .los-expand-prev,
    .los-expand-next {
        opacity: 1;
        width: 44px;
        height: 44px;
    }
}


/* ===================================================================
   9. BREAKPOINT: 768px — SMALL TABLET / LARGE PHONE
   =================================================================== */

@media (max-width: 768px) {

    /* Page hero — reduce padding */
    .los-page-hero {
        min-height: 200px;
        padding: 56px 16px 44px;
    }

    .los-page-hero h1 {
        font-size: clamp(26px, 5vw, 38px);
    }

    /* Hero home — reduce */
    .los-hero {
        min-height: 80vh;
        padding: 36px 16px;
    }

    /* Sections */
    .los-section {
        padding: 60px 16px;
    }

    /* CTA */
    .los-cta {
        padding: 70px 16px;
    }

    /* Stats */
    .los-stats {
        gap: 24px 32px;
        padding: 50px 16px;
    }

    .los-stat-number {
        font-size: clamp(30px, 3vw + 12px, 42px);
    }

    /* Feature cards */
    .los-feature-card {
        padding: 30px 20px;
    }

    .los-feature-icon {
        width: 60px;
        height: 60px;
    }

    /* About story — single column */
    .los-about-story {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Team photo — reduce height */
    .los-team-photo {
        height: 300px;
    }

    /* Contact cards */
    .los-contact-card {
        padding: 24px 20px;
    }

    /* Service blocks */
    .los-service-block {
        grid-template-columns: 60px 1fr;
        gap: 16px;
        padding: 26px 22px;
    }

    .los-service-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    /* Footer */
    .los-footer-inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .los-footer-main {
        padding: 0 20px 48px !important;
    }

    .los-footer-bottom {
        padding: 0 20px !important;
    }

    /* Map responsive */
    .los-map iframe {
        aspect-ratio: 4 / 3;
    }

    /* About intro block */
    .los-about-intro-block {
        padding-left: 20px;
        border-left-width: 2px;
        margin-bottom: 48px;
    }

    /* Pricelist */
    .los-pricelist-grid {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .los-pricelist-card-wrap {
        flex: 0 1 auto;
        width: 100%;
        max-width: 360px;
    }
}


/* ===================================================================
   10. BREAKPOINT: 600px — PHONE
   =================================================================== */

@media (max-width: 600px) {

    /* Hero — stack buttons */
    .los-hero {
        min-height: 85vh;
        padding: 32px 14px;
    }

    .los-hero-sub {
        max-width: 100%;
        font-size: 15px;
    }

    .los-hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    /* Buttons — full width stack */
    .los-btn-primary,
    .los-btn-outline,
    .los-btn-gold,
    .los-btn-outline-gold {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        padding: 14px 28px;
        text-align: center;
    }

    /* CTA buttons stack */
    .los-cta .los-hero-buttons,
    .los-cta .los-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Sections — compact */
    .los-section {
        padding: 52px 14px;
    }

    .los-section-header {
        margin-bottom: 36px;
    }

    /* CTA compact */
    .los-cta {
        padding: 56px 14px;
    }

    /* Page hero compact */
    .los-page-hero {
        min-height: 180px;
        padding: 48px 14px 36px;
    }

    /* Hide decorative corners on page hero */
    .los-page-hero::before,
    .los-page-hero .los-corner-br {
        display: none;
    }

    /* Feature cards — single column */
    .los-features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .los-feature-card {
        padding: 28px 20px;
    }

    /* Property grid — single column */
    .los-property-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Card body — compact padding */
    .los-card-body {
        padding: 16px 18px 20px;
    }

    .los-card-title {
        font-size: 16px;
    }

    .los-card-price {
        font-size: 18px;
        padding-top: 10px;
    }

    /* Carousel buttons — always visible, compact */
    .los-carousel-btn {
        opacity: 1 !important;
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    /* Stats — 2x2 compact */
    .los-stats {
        gap: 20px 24px;
        padding: 44px 14px;
    }

    /* Nav grid */
    .los-nav-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .los-nav-card {
        padding: 22px 14px;
    }

    /* Team card */
    .los-team-photo {
        height: 280px;
    }

    .los-team-info {
        padding: 22px 20px 26px;
    }

    /* Contact card */
    .los-contact-card {
        padding: 22px 18px;
    }

    /* Service blocks — stack */
    .los-service-block {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px 18px;
    }

    .los-service-icon {
        margin: 0 auto;
    }

    /* Filters — single column on phone */
    .los-filters-row {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }

    /* Price row — stack vertically */
    .los-price-row {
        flex-direction: column;
        gap: 8px;
    }

    .los-price-sep {
        display: none;
    }

    .los-input-price {
        width: 100%;
        flex: none;
    }

    .los-select-sort {
        width: 100%;
    }

    /* Buttons — side by side */
    .los-btn-search {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
        min-height: 48px;
    }

    /* Pricelist — full width */
    .los-pricelist-grid {
        flex-direction: column;
        align-items: center;
        gap: 22px;
    }

    .los-pricelist-card-wrap {
        flex: 0 1 auto;
        width: 100%;
        max-width: 340px;
    }

    /* Expanded card — near full width */
    .los-expand-wrap {
        padding: 14px 8px;
    }

    .los-expand-card {
        width: 97vw;
        max-width: none;
        border-radius: 12px;
    }

    .los-expand-carousel {
        border-radius: 12px 12px 0 0;
    }

    .los-expand-prev,
    .los-expand-next {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .los-expand-prev { left: 6px; }
    .los-expand-next { right: 6px; }

    .los-expand-body {
        padding: 16px 18px 20px;
    }

    .los-expand-body .los-card-title {
        font-size: 18px;
    }

    .los-expand-body .los-card-price {
        font-size: 20px;
    }

    /* Currency bar compact */
    .los-currency-bar {
        padding: 18px 14px;
    }

    .los-currency-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .los-cur-tab {
        padding: 6px 14px;
        font-size: 11px;
    }

    .los-currency-calc {
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 10px;
    }

    /* Footer bottom stack */
    .los-footer-bottom-inner {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center !important;
        padding: 18px 0 !important;
    }

    /* About headline */
    .los-about-headline {
        font-size: clamp(22px, 5vw, 32px);
    }

    .los-about-lead {
        font-size: 15px;
    }

    /* About service panel */
    .los-about-service-panel {
        padding: 24px 18px;
    }
}


/* ===================================================================
   11. BREAKPOINT: 480px — SMALL PHONE
   =================================================================== */

@media (max-width: 480px) {

    /* Hero title */
    .los-hero h1 {
        font-size: clamp(26px, 6vw, 36px);
        letter-spacing: -0.5px;
    }

    .los-hero-badge,
    .los-badge-gold {
        font-size: 10px;
        letter-spacing: 2px;
        padding: 7px 18px;
    }

    .los-hero-sub {
        font-size: 14px;
    }

    /* Page hero */
    .los-page-hero h1 {
        font-size: clamp(22px, 6vw, 30px);
    }

    .los-page-hero p {
        font-size: 13px;
    }

    /* Sections — extra compact */
    .los-section {
        padding: 44px 12px;
    }

    .los-section-header h2 {
        font-size: clamp(22px, 5vw, 32px);
    }

    /* Feature cards — compact */
    .los-feature-card {
        padding: 24px 16px;
    }

    .los-feature-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
        margin-bottom: 18px;
    }

    /* Nav grid — single column */
    .los-nav-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .los-nav-card {
        padding: 18px 14px;
    }

    /* Stats */
    .los-stat-number {
        font-size: clamp(26px, 6vw, 36px);
    }

    .los-stat-label {
        font-size: 10px;
        letter-spacing: 2px;
    }

    /* Team */
    .los-team-info {
        padding: 18px 16px 22px;
    }

    .los-team-info h3 {
        font-size: 18px;
    }

    .los-team-photo {
        height: 240px;
    }

    /* Contact card */
    .los-contact-card {
        padding: 18px 14px;
    }

    .los-contact-photo {
        width: 64px;
        height: 64px;
    }

    /* CTA */
    .los-cta {
        padding: 48px 12px;
    }

    .los-cta h2 {
        font-size: clamp(22px, 5vw, 32px);
    }

    .los-cta p {
        font-size: 14px;
    }

    /* Card body — extra compact */
    .los-card-body {
        padding: 14px 16px 18px;
    }

    .los-card-title {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .los-card-meta {
        gap: 4px;
        margin-bottom: 8px;
    }

    .los-meta-item {
        font-size: 11px;
        padding: 2px 6px;
    }

    .los-card-price {
        font-size: 17px;
    }

    /* Pricelist title */
    .los-pricelist-title {
        font-size: clamp(20px, 5vw, 30px);
    }

    /* About */
    .los-about-intro-block {
        padding-left: 16px;
    }

    .los-about-story-card {
        padding: 28px 18px;
    }

    .los-about-service-panel {
        padding: 22px 16px;
    }

    /* Service block */
    .los-service-block {
        padding: 22px 16px;
    }

    /* Search input — proper touch size */
    .los-input-search {
        padding: 12px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .los-select {
        padding: 12px 14px;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .los-input-price {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}


/* ===================================================================
   12. BREAKPOINT: 360px — VERY SMALL PHONE
   =================================================================== */

@media (max-width: 360px) {

    /* Hero */
    .los-hero h1 {
        font-size: clamp(22px, 7vw, 30px);
    }

    .los-hero {
        padding: 28px 10px;
    }

    /* Sections — minimal */
    .los-section {
        padding: 36px 10px;
    }

    .los-container {
        padding: 0 10px;
    }

    /* Page hero */
    .los-page-hero {
        padding: 40px 10px 30px;
        min-height: 160px;
    }

    .los-page-hero h1 {
        font-size: clamp(20px, 7vw, 26px);
    }

    /* CTA */
    .los-cta {
        padding: 40px 10px;
    }

    .los-cta h2 {
        font-size: clamp(20px, 6vw, 28px);
    }

    /* Stats — single column on tiny screens */
    .los-stats {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 36px 10px;
    }

    /* Feature card */
    .los-feature-card {
        padding: 22px 14px;
    }

    .los-feature-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
        margin-bottom: 14px;
    }

    /* Buttons — full width */
    .los-btn-primary,
    .los-btn-outline,
    .los-btn-gold,
    .los-btn-outline-gold {
        padding: 12px 20px;
        font-size: 12px;
        letter-spacing: 1px;
    }

    /* Property card body */
    .los-card-body {
        padding: 12px 14px 16px;
    }

    .los-card-title {
        font-size: 14px;
    }

    .los-card-price {
        font-size: 16px;
    }

    /* Team */
    .los-team-photo {
        height: 220px;
    }

    .los-team-info {
        padding: 16px 14px 20px;
    }

    .los-team-info h3 {
        font-size: 16px;
    }

    /* Contact */
    .los-contact-card {
        padding: 16px 12px;
    }

    .los-contact-photo {
        width: 56px;
        height: 56px;
    }

    /* Footer */
    .los-footer {
        padding-top: 36px !important;
    }

    .los-footer-main {
        padding: 0 12px 32px !important;
    }

    .los-footer-bottom {
        padding: 0 12px !important;
    }

    /* Service block */
    .los-service-block {
        padding: 18px 14px;
    }

    /* Expanded card */
    .los-expand-wrap {
        padding: 8px 4px;
    }

    .los-expand-body {
        padding: 14px 14px 18px;
    }

    .los-expand-body .los-card-title {
        font-size: 16px;
    }

    .los-expand-body .los-card-price {
        font-size: 18px;
    }

    /* Pricelist */
    .los-pricelist-card-wrap {
        max-width: 100%;
    }

    .los-pricelist-info {
        padding: 12px 14px 16px;
    }

    /* Search form — solid bg + fade shadow so cards dissolve beneath */
    .los-search-form {
        padding: 12px 10px 4px;
        background: linear-gradient(180deg, #050510 60%, rgba(5,5,16,0.95) 85%, transparent 100%) !important;
        box-shadow: 0 12px 40px rgba(5,5,16,0.95), 0 4px 80px rgba(5,5,16,0.8);
    }

    /* Pagination */
    .los-pagination .page-numbers {
        padding: 6px 12px;
        font-size: 13px;
        margin: 0 2px;
    }
}


/* ===================================================================
   13. SCROLL SNAP — KEY SECTIONS (HOME PAGE)
   =================================================================== */

@media (max-width: 991px) {

    /* scroll-snap removed — caused janky scrolling on mobile */
}


/* ===================================================================
   14. TOUCH-OPTIMIZED EXPANDED CARD VIEW
   =================================================================== */

@media (max-width: 991px) {

    /* Smoother expand animation on mobile */
    .los-expand-card {
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.35s ease;
    }

    .los-expand-card.los-expand-visible {
        animation: losSpringScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* Larger touch targets for expand nav */
    .los-expand-prev,
    .los-expand-next {
        min-width: 44px;
        min-height: 44px;
    }

    /* Background blur — use lighter blur for performance */
    .los-expand-overlay {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Smoother body scale on card open */
    body.los-expanded-active #masthead,
    body.los-expanded-active .los-hero,
    body.los-expanded-active .los-page-hero,
    body.los-expanded-active .los-section,
    body.los-expanded-active .los-section--alt,
    body.los-expanded-active .los-stats,
    body.los-expanded-active .los-cta,
    body.los-expanded-active .los-listings-page {
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                    filter 0.4s ease;
    }

    /* Swipe-friendly carousel — snap behavior */
    .los-carousel-track,
    .los-expand-track {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .los-carousel-slide,
    .los-expand-slide {
        scroll-snap-align: center;
    }
}


/* ===================================================================
   15. FORM TOUCH ENHANCEMENTS
   =================================================================== */

@media (max-width: 991px) {

    /* Prevent iOS zoom on input focus — ensure 16px minimum */
    .los-form input,
    .los-form textarea,
    .los-input-search,
    .los-select,
    .los-input-price,
    .los-cur-input {
        font-size: 16px !important;
    }

    /* Larger touch area for form inputs */
    .los-form input,
    .los-form textarea {
        padding: 14px 16px;
        min-height: 48px;
    }

    /* Form button — full width on mobile */
    .los-form button {
        width: 100%;
        padding: 16px 32px;
        min-height: 52px;
    }
}


/* ===================================================================
   16. CONTACT CARD PHOTO — RESPONSIVE HEADER
   =================================================================== */

@media (max-width: 480px) {

    .los-contact-card-header {
        gap: 14px;
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .los-contact-item {
        gap: 10px;
        font-size: 14px;
    }

    .los-contact-icon svg {
        width: 16px;
        height: 16px;
    }

    /* Messenger icons — ensure 44px tap */
    .los-messenger-icons {
        gap: 8px;
    }

    .los-msg-icon {
        width: 44px;
        height: 44px;
    }

    /* Social links */
    .los-socials {
        gap: 10px;
    }

    .los-social-link {
        width: 44px;
        height: 44px;
    }
}


/* ===================================================================
   17. HEADER MOBILE REFINEMENTS
   =================================================================== */

@media (max-width: 991px) {

    /* Header inner — less padding */
    .los-header-inner {
        padding: 0 16px !important;
    }

    .los-header.scrolled .los-header-inner {
        padding: 0 14px !important;
    }

    /* Phone button — hide text, show icon only on very small */
    .los-header-phone {
        padding: 8px 14px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {

    .los-header-inner {
        padding: 0 12px !important;
        height: 68px !important;
    }

    .los-header.scrolled .los-header-inner {
        height: 56px !important;
        padding: 0 12px !important;
    }

    .los-header .los-logo-img {
        height: 44px !important;
    }

    .los-header.scrolled .los-logo-img {
        height: 36px !important;
    }

    .los-header-phone span {
        display: none;
    }

    .los-header-phone {
        padding: 8px 12px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        justify-content: center;
    }
}


/* ===================================================================
   18. STATS BAR — HOME PAGE (RESPONSIVE)
   =================================================================== */

@media (max-width: 768px) {

    .los-stats-bar {
        padding: 0;
    }

    .los-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px 20px;
    }

    .los-stat-item {
        text-align: center;
    }

    /* Desktop min-height:116px выравнивало 4-ю колонку без plus в 4-col сетке.
       На мобильном 2-col выравнивание не нужно — сбрасываем до компактного. */
    .los-stat-top {
        min-height: 76px;
    }
}

@media (max-width: 360px) {

    .los-stats-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .los-stat-top {
        min-height: auto;
    }
}


/* ===================================================================
   18b. VTORICHKA PREMIUM — 768px TABLET ADAPTATION
   (vtorichka-premium.css на сервере имеет только 600px брейкпоинт)
   =================================================================== */

@media (max-width: 768px) {

    /* Expanded card body */
    .los-expand-body {
        padding: 22px 24px 26px !important;
    }

    .los-expand-body .los-card-title {
        font-size: 21px !important;
    }

    /* "О проекте" modal: 680px → вписываем в планшет с полями */
    .los-project-modal-content {
        width: 94vw !important;
        max-width: 640px !important;
    }

    .los-project-modal-content h2 {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .los-pm-loc-tagline {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .los-pm-desc {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    /* Tagline block с большой кавычкой */
    .los-pm-tagline {
        padding: 18px 20px 18px 46px !important;
        font-size: 14.5px !important;
    }

    .los-pm-tagline::before {
        font-size: 38px !important;
        top: 8px !important;
        left: 13px !important;
    }

    .los-modal-close {
        right: 20px !important;
    }
}


/* ===================================================================
   19. PERFORMANCE — WILL-CHANGE HINTS (SPARINGLY)
   =================================================================== */

@media (max-width: 991px) {

    /* will-change only for active overlays */
    .los-mobile-drawer.open {
        will-change: transform;
    }

    /* Remove heavy backdrop-filter on mobile — major scroll perf killer */
    .los-badge-gold,
    .los-currency-bar,
    .los-cur-group,
    .los-search-form {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Simplify card shadows — 4-layer shadow kills scroll perf */
    .los-property-card,
    .los-feature-card,
    .los-nav-card,
    .los-service-block,
    .los-contact-card,
    .los-team-card,
    .los-about-story-card,
    .los-about-service-panel {
        box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
        transition: none !important;
    }

    /* No hover effects on touch devices */
    .los-property-card:hover,
    .los-feature-card:hover,
    .los-nav-card:hover {
        transform: none !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
    }

    /* Simplify reveal — fade only, no transform */
    .los-reveal {
        transform: none !important;
        transition: opacity 0.4s ease !important;
    }
    .los-reveal.los-visible {
        opacity: 1 !important;
        transform: none !important;
    }
    .los-reveal.los-property-card,
    .los-reveal.los-feature-card,
    .los-reveal.los-nav-card,
    .los-reveal.los-service-block,
    .los-reveal.los-contact-card,
    .los-reveal.los-team-card {
        transform: none !important;
        transition: opacity 0.4s ease !important;
    }
}


/* ===================================================================
   20. REDUCED MOTION — ACCESSIBILITY
   =================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .los-hero-overlay {
        animation: none !important;
    }

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

    .los-reveal.los-visible {
        animation: none !important;
    }

    .los-mobile-drawer {
        transition: none !important;
    }

    .los-mobile-drawer.open {
        animation: none !important;
    }

    .los-expand-card {
        transition: none !important;
    }

    .los-expand-card.los-expand-visible {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto !important;
    }

    .los-luxury {
        scroll-snap-type: none !important;
    }
}