/* ============================================================
   SPARSH — Mobile Responsiveness System
   Consolidated overrides for all sub-pages (320px - 850px)
   ============================================================ */

/* 1. HAMBURGER MENU COMPONENT */
.nav-hamburger {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1001;
    margin-left: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0);
    background: rgba(255, 255, 255, 0);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.nav-hamburger span {
    display: block;
    position: absolute;
    left: 8px;
    width: 24px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-hamburger span:nth-child(1) {
    top: 13px;
}

.nav-hamburger span:nth-child(2) {
    top: 19px;
}

.nav-hamburger span:nth-child(3) {
    top: 25px;
}

@media (max-width: 850px) {

    /* 2. NAVBAR RESTRUCTURE */
    .navbar {
        width: calc(100% - 30px) !important;
        left: 15px !important;
        transform: none !important;
        border-radius: 20px !important;
        padding: 15px 25px !important;
        bottom: auto !important;
        top: 15px !important;
        animation: none !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-container {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .nav-hamburger {
        display: flex !important;
    }

    .nav-links,
    .social-links {
        display: none !important;
    }

    /* 3. MOBILE MENU OPEN STATE */
    .navbar.is-active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        background: rgba(10, 15, 30, 0.98) !important;
        flex-direction: column !important;
        padding: 40px 25px !important;
        overflow-y: auto !important;
        box-shadow: none !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar.is-active .nav-container {
        flex-direction: column !important;
        height: 100% !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .navbar.is-active .nav-logo {
        margin-bottom: 50px !important;
    }

    .navbar.is-active .nav-links {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 25px !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar.is-active .nav-links li {
        width: 100%;
        opacity: 0;
        transform: translateY(10px);
        animation: mobileNavFadeIn 0.4s forwards;
    }

    .navbar.is-active .nav-links a {
        font-size: 1.4rem !important;
        font-weight: 600 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.8) !important;
        display: block;
        padding: 10px 0;
        transition: all 0.3s ease;
    }

    .navbar.is-active .nav-links a.active,
    .navbar.is-active .nav-links a:hover {
        color: #fff !important;
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important;
        transform: scale(1.05);
    }

    .navbar.is-active .nav-links li:nth-child(1) {
        animation-delay: 0.1s;
    }

    .navbar.is-active .nav-links li:nth-child(2) {
        animation-delay: 0.15s;
    }

    .navbar.is-active .nav-links li:nth-child(3) {
        animation-delay: 0.2s;
    }

    .navbar.is-active .nav-links li:nth-child(4) {
        animation-delay: 0.25s;
    }

    .navbar.is-active .nav-links li:nth-child(5) {
        animation-delay: 0.3s;
    }

    .navbar.is-active .nav-links li:nth-child(6) {
        animation-delay: 0.35s;
    }

    .navbar.is-active .social-links {
        display: flex !important;
        margin-top: auto !important;
        padding: 40px 0 !important;
        gap: 30px !important;
        justify-content: center !important;
        width: 100% !important;
        opacity: 0;
        animation: mobileNavFadeIn 0.4s forwards 0.4s;
    }

    .navbar.is-active .social-links a {
        font-size: 1.5rem !important;
        color: var(--accent-gold) !important;
    }

    /* Hamburger Animation to X — when the drawer is open the hamburger
       morphs into an explicit X and floats to the top-right corner of
       the now-full-screen navbar, so the close affordance is always
       visible (and matches users' "X to close" mental model). */
    .navbar.is-active .nav-hamburger {
        position: absolute !important;
        top: 22px !important;
        right: 22px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50%;
        z-index: 10000 !important;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .navbar.is-active .nav-hamburger:hover {
        background: rgba(255, 255, 255, 0.12);
        transform: scale(1.05);
    }
    body.light-mode:not(.home-page) .navbar.is-active .nav-hamburger {
        background: rgba(26, 26, 46, 0.06) !important;
        border-color: rgba(26, 26, 46, 0.12) !important;
    }
    .navbar.is-active .nav-hamburger span {
        position: absolute !important;
        left: 8px !important;
        top: 19px !important;
        width: 24px !important;
        height: 2px !important;
        background: #fff !important;
        margin: 0 !important;
    }
    .navbar.is-active .nav-hamburger span:nth-child(1) {
        transform: rotate(45deg) !important;
    }

    .navbar.is-active .nav-hamburger span:nth-child(2) {
        opacity: 0 !important;
    }

    .navbar.is-active .nav-hamburger span:nth-child(3) {
        transform: rotate(-45deg) !important;
    }

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

    /* 4. GLOBAL COMPONENT ADJUSTMENTS */
    .about-hero,
    .page-hero {
        padding: 120px 20px 60px !important;
        text-align: center !important;
    }

    h1 {
        font-size: clamp(2.2rem, 8vw, 3rem) !important;
        line-height: 1.1 !important;
    }

    .section-title {
        font-size: 2rem !important;
    }

    .usp-grid,
    .tier-grid,
    .leadership-stage,
    .gallery-container,
    .features-grid,
    .tech-grid,
    .suggestion-grid,
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    /* 5. PDP SPECIFIC */
    .pdp-hero .hero-container {
        flex-direction: column !important;
        gap: 30px !important;
        padding-top: 40px !important;
    }

    .hero-content-side {
        text-align: center !important;
    }

    .pdp-title {
        font-size: 2.8rem !important;
    }

    .pdp-key-benefits {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    .size-options {
        justify-content: center !important;
    }

    .pdp-actions {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn-buy-now {
        width: 100% !important;
    }

    .whatsapp-btn {
        width: 100% !important;
    }

    .testimonial-text {
        font-size: 1.4rem !important;
    }

    /* 6. PRODUCTS PAGE MOBILE OPTIMIZATION */

    /* Compact Categories */
    .collection-toggle {
        gap: 8px !important;
        margin-top: 20px !important;
        padding: 0 15px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .collection-toggle::-webkit-scrollbar {
        display: none;
    }

    .toggle-btn {
        padding: 10px 20px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Mobile Filter Button */
    .mobile-filter-bar {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        padding: 0 15px;
    }

    .mobile-filter-btn {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #fff;
        padding: 10px 25px;
        border-radius: 30px;
        font-size: 0.85rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        backdrop-filter: blur(10px);
    }

    /* Filter Sidebar as Mobile Overlay */
    .products-main-layout {
        padding: 0 15px !important;
        flex-direction: column !important;
    }

    .filters-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2000 !important;
        background: rgba(10, 15, 30, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        /* Tighter top padding so the close (X) inside the sidebar header
           sits within thumb reach on short-viewport phones (iPhone SE,
           landscape iPhones, devices with the URL bar shown). The header
           itself carries the "Filters" title + close button row. */
        padding: 56px 20px 30px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        display: flex !important;
        flex-direction: column !important;
    }

    .filters-sidebar.active {
        transform: translateX(0);
    }

    .sidebar-header-mobile {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 20px;
    }

    .sidebar-header-mobile h3 {
        font-size: 1.8rem;
        color: #fff;
        font-weight: 300;
        letter-spacing: 1px;
    }

    .close-filters-btn {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: #fff;
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Compact 2-Column Grid */
    .gallery-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Compact Product Card */
    .product-card {
        border-radius: 12px !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
    }

    .product-image-container {
        padding: 12px !important;
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, transparent 80%) !important;
    }

    .product-badge {
        top: 8px !important;
        right: 8px !important;
        padding: 3px 8px !important;
        font-size: 0.7rem !important;
        /* Was 0.5rem (~8px) which drops below the 12px readability floor.
           0.7rem ≈ 11.2px sits at the boundary; with the bold-ish weight
           of badge text it stays legible on small screens. */
        border-radius: 4px !important;
    }

    .product-details {
        padding: 10px !important;
    }

    .product-tags {
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .product-tags span {
        font-size: 0.55rem !important;
    }

    .product-name {
        font-size: 0.9rem !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
        height: 2.4em !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .product-desc {
        display: none !important;
    }

    .product-specs {
        padding: 6px !important;
        margin: 6px 0 !important;
        gap: 4px !important;
        border-radius: 8px !important;
    }

    .product-specs span {
        font-size: 0.55rem !important;
    }

    .product-action {
        gap: 6px !important;
        margin-top: 4px !important;
    }

    .quote-btn {
        height: 38px !important;
        padding: 0 8px !important;
        font-size: 0.6rem !important;
        border-radius: 8px !important;
        letter-spacing: 0.05em !important;
    }

    .whatsapp-btn-small {
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        font-size: 1rem !important;
    }

    .series-header {
        margin-top: 30px !important;
        margin-bottom: 15px !important;
    }

    .series-header h2 {
        font-size: 1.4rem !important;
    }

    /* 4. FOOTER MOBILE OPTIMIZATION */
    .footer {
        padding: 60px 0 30px !important;
    }

    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
        text-align: center !important;
        padding: 0 25px !important;
    }

    .footer-brand {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .footer-logo-link {
        margin-bottom: 20px !important;
    }

    .footer-logo-link img {
        height: 45px !important;
    }

    .footer-tagline {
        max-width: 100% !important;
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* Blog Accordion (Mobile) */
    .blog-card.featured::before {
        top: 15px !important;
        right: auto !important;
        left: 20px !important;
        font-size: 9px !important;
        padding: 4px 10px !important;
    }

    .blog-card-cat {
        margin-top: 25px !important;
        /* Make room for the featured badge if present */
    }

    /* If it's NOT a featured card, reset the margin */
    .blog-card:not(.featured) .blog-card-cat {
        margin-top: 0 !important;
    }

    .blog-dropdown-btn {
        display: flex !important;
    }

    .blog-card p {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .blog-card .blog-card-meta {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }

    .blog-card.is-expanded {
        border-color: var(--accent-gold) !important;
        background: rgba(255, 255, 255, 0.03) !important;
    }

    .blog-card.is-expanded .blog-dropdown-btn {
        transform: rotate(180deg);
        background: var(--accent-gold);
        color: #000;
    }

    .blog-card.is-expanded p {
        max-height: 300px;
        opacity: 1;
        margin-top: 18px !important;
        margin-bottom: 22px !important;
        padding: 18px;
        background: rgba(255, 255, 255, 0.03);
        /* Nested look */
        border-radius: 12px;
        border-left: 2px solid var(--accent-gold);
    }

    .blog-card.is-expanded .blog-card-meta {
        max-height: 100px;
        opacity: 1;
        margin-top: 10px !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .footer-socials {
        justify-content: center !important;
        gap: 25px !important;
        margin-top: 20px !important;
    }

    .footer-links {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .link-group h4 {
        margin-bottom: 20px !important;
        font-size: 1rem !important;
        letter-spacing: 2px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 20px !important;
        padding-top: 40px !important;
        margin-top: 60px !important;
        text-align: center !important;
    }

    .footer-legal {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    /* Sub-page Footer Centering */
    body:not(.home-page) .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    body:not(.home-page) .footer-brand {
        text-align: center !important;
        margin-bottom: 40px !important;
    }

    body:not(.home-page) .footer-tagline {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:not(.home-page) .footer-socials {
        justify-content: center !important;
    }

    body:not(.home-page) .footer-links {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    body:not(.home-page) .link-group {
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:not(.home-page) .footer-contact p {
        text-align: center !important;
    }

    /* Product Detail Page (PDP) Mobile Fixes */
    .pdp-page .pdp-hero {
        padding-top: 120px !important;
        min-height: auto !important;
        padding-bottom: 60px !important;
    }

    .pdp-page .hero-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .pdp-page .hero-image-side {
        order: 1 !important;
        width: 100% !important;
    }

    .pdp-page .explainer {
        max-width: 320px !important;
        margin-bottom: 20px !important;
    }

    .pdp-page .hero-content-side {
        order: 2 !important;
        width: 100% !important;
        text-align: center !important;
    }

    .pdp-page .pdp-title {
        font-size: 3rem !important;
        margin: 10px 0 !important;
    }

    .pdp-page .pdp-tagline {
        font-size: 1.1rem !important;
        margin-bottom: 25px !important;
    }

    .pdp-page .pdp-key-benefits {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        margin-bottom: 30px !important;
    }

    .pdp-page .config-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .pdp-page .size-options {
        justify-content: center !important;
        gap: 8px !important;
    }

    .pdp-page .pdp-actions {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        margin-top: 30px !important;
        display: flex !important;
    }

    .pdp-page .btn-buy-now,
    .pdp-page .whatsapp-btn {
        width: 100% !important;
        height: 60px !important;
        flex: none !important;
        max-width: none !important;
    }

    .pdp-page .pdp-trust-badges {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        margin-top: 30px !important;
    }

    /* Comparison Grid Fixes */
    .pdp-page .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .pdp-page .comp-card {
        padding: 30px !important;
    }

    /* Compact Product Cards */
    .product-features,
    .product-specs,
    .product-badge {
        display: none !important;
    }

    .product-card {
        padding: 15px !important;
    }

    .product-info {
        padding-top: 10px !important;
    }

    .product-name {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
    }

    .quote-btn {
        display: none !important;
    }

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

    .product-action {
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .whatsapp-btn-small,
    .call-btn-mobile {
        flex: 1 !important;
        /* Make both icons take equal space on mobile */
        height: 50px !important;
    }
}

/* ============================================================
   HOME PAGE — MOBILE OVERRIDES (hero scene act 1)
   ============================================================ */

/* Mobile-only line-break helper inside hero text */
.mobile-br {
    display: none;
}

@media (max-width: 850px) {

    /* Reveal the line-break on small screens */
    body.home-page .mobile-br {
        display: inline;
    }

    /* Optimize preloader performance on mobile */
    .shooting-star,
    .shooting-stars,
    #preloader-shooting-stars {
        display: none !important;
    }

    #preloader-moon {
        filter: none !important;
        box-shadow: -15px 15px 0 0 #fffdeb !important;
    }

    #preloader-bar-fill {
        box-shadow: none !important;
    }

    /* HERO TEXT — stacked on two lines in the upper-half night sky */
    body.home-page .hero-main-text {
        font-size: 92px !important;
        line-height: 0.92 !important;
        margin-bottom: 22vh !important;
        gap: 0.15em !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.home-page .text-line-1-wrapper {
        white-space: normal !important;
        display: grid !important;
        place-items: center !important;

    }

    body.home-page .text-line-1 {
        grid-area: 1 / 1 !important;
        line-height: 0.95 !important;
        width: 100% !important;

    }

    /* Keep the scroll-swap text in the same centered slot on mobile. */
    body.home-page .text-line-1-swap {
        text-align: center !important;
        width: auto !important;

    }

    /* SLEEPING BOY — pushed into the lower half so clouds can frame him */
    body.home-page .subject-single-img {
        width: 90vw !important;
        max-width: 460px !important;
        margin-top: 26vh !important;
    }

    /* CLOUD BLOBS — freeze GSAP transforms and reposition to frame the boy.
       This breaks the scroll-driven cloud-hug on mobile, but the visual
       composition matches the desktop reveal state. */
    body.home-page .cloud-blob {
        animation: none !important;
    }

    /* Hide back blobs that would drift into the upper-half night sky.
       The .natural-clouds strip is repositioned (not hidden) to seal the
       bottom corners so the lower half is fully cloud-covered. */
    body.home-page .blob-back-3,
    body.home-page .blob-back-4 {
        display: none !important;
    }

    body.home-page .cloud-fog-transition {
        display: none !important;
    }

    body.home-page .natural-clouds .single-bg-clouds {
        width: 200vw !important;
        left: -50vw !important;
        bottom: -2vh !important;
    }

    /* Cloud-toned gradient floor — seals the gaps where blob PNG edges
       fade to transparent so the lower half reads as a solid cloud bank. 
    body.home-page #bg-night-sky::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 55vh;
        background: linear-gradient(to bottom,
                transparent 0%,
                rgba(180, 195, 220, 0.25) 30%,
                rgba(210, 220, 235, 0.55) 70%,
                rgba(225, 232, 245, 0.75) 100%);
        pointer-events: none;
        z-index: 1;
    }*/

    @keyframes cloudSoftFloat {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }

        33% {
            transform: translate(8px, -12px) rotate(0.5deg);
        }

        66% {
            transform: translate(-12px, 8px) rotate(-0.5deg);
        }
    }

    @keyframes cloudSoftFloatAlt {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }

        33% {
            transform: translate(-10px, -10px) rotate(-0.3deg);
        }

        66% {
            transform: translate(12px, 5px) rotate(0.3deg);
        }
    }

    /* Soft back clouds — high band defining the cloud "horizon" at 50% */
    body.home-page .blob-back-left {
        animation: cloudSoftFloat 18s ease-in-out infinite !important;
        left: -20vw !important;
        top: auto !important;
        bottom: 28% !important;
        width: 95vw !important;
        opacity: 1 !important;
    }

    body.home-page .blob-back-right {
        animation: cloudSoftFloatAlt 22s ease-in-out infinite !important;
        animation-delay: -2s !important;
        right: -30vw !important;
        top: auto !important;
        bottom: 28% !important;
        width: 95vw !important;
        opacity: 1 !important;
    }

    /* FRONT clouds — pile around and beneath the boy in the lower half */
    body.home-page .blob-left {
        animation: cloudSoftFloat 15s ease-in-out infinite !important;
        animation-delay: -5s !important;
        left: -50vw !important;
        bottom: 20% !important;
        width: 100vw !important;
        opacity: 1 !important;
    }

    body.home-page .blob-right {
        animation: cloudSoftFloatAlt 19s ease-in-out infinite !important;
        animation-delay: -1s !important;
        right: -40vw !important;
        bottom: 14% !important;
        width: 100vw !important;
        opacity: 1 !important;
    }

    body.home-page .blob-center {
        animation: cloudSoftFloat 25s ease-in-out infinite !important;
        animation-delay: -3s !important;
        left: -10vw !important;
        bottom: 00% !important;
        width: 120vw !important;
        opacity: 1 !important;
    }

    body.home-page .blob-center-left {
        animation: cloudSoftFloatAlt 28s ease-in-out infinite !important;
        animation-delay: -8s !important;
        left: -25vw !important;
        bottom: 8% !important;
        width: 110vw !important;
        opacity: 1 !important;
    }

    body.home-page .blob-left-2,
    body.home-page .blob-right-2 {
        display: none !important;
    }

    body.home-page .blob-large-left {
        animation: cloudSoftFloat 30s ease-in-out infinite !important;
        animation-delay: -4s !important;
        left: -45vw !important;
        bottom: -08% !important;
        width: 130vw !important;
        opacity: 0.9 !important;
    }

    body.home-page .blob-large-right {
        animation: cloudSoftFloatAlt 32s ease-in-out infinite !important;
        animation-delay: -10s !important;
        right: -45vw !important;
        bottom: -14% !important;
        width: 130vw !important;
        opacity: 0.9 !important;
    }

    body.home-page .blob-footer-1 {
        animation: cloudSoftFloat 35s ease-in-out infinite !important;
        animation-delay: -6s !important;
        bottom: -0% !important;
        left: -15% !important;
        width: 130vw !important;
        opacity: 0.95 !important;
    }

    body.home-page .blob-footer-2 {
        animation: cloudSoftFloatAlt 40s ease-in-out infinite !important;
        animation-delay: -12s !important;
        bottom: -5% !important;
        right: -10% !important;
        width: 130vw !important;
        opacity: 0.9 !important;
    }

    /* Smaller feathers on mobile so they don't crowd the text */
    body.home-page .feathers-front .feather {
        width: 60px !important;
    }

    /* ─── PERF: drop GPU-heavy blur filters during scroll ───
       The cinematic blur(2-4px) + drop-shadow stack on every cloud blob is
       re-applied each paint while GSAP scrubs the timeline. On phones this
       was the dominant cost. The cloudSoftFloat translate-only animations
       above stay (cheap), but the blur effects come off. */
    body.home-page .cloud-blob,
    body.home-page .blob-back-left,
    body.home-page .blob-back-right,
    body.home-page .blob-large-left,
    body.home-page .blob-large-right,
    body.home-page .blob-footer-1,
    body.home-page .blob-footer-2 {
        filter: none !important;
    }

    body.home-page .feathers-front .feather,
    body.home-page .feathers-back .feather {
        filter: none !important;
    }

    /* DO NOT disable cloud or feather CSS animations on mobile.
       Both the cloudSoftFloat keyframes and the featherSwing keyframes
       suppress GSAP's initial gsap.set() inline transforms while
       running. If we kill the animations, those raw inline offsets
       become visible and every cloud / feather visibly jumps from its
       intended composed position. The translate-only keyframes are
       compositor-cheap; the real win came from filter:none above. */

    /* ─── PERF: GPU layer promotion for the big fixed scenes ───
       REVERSED — see "MOBILE GPU MEMORY RELIEF" at the end of this file.

       This used to force each large fixed layer onto its own compositor
       layer (transform: translate3d(0,0,0)) so the browser could
       transform/opacity-tween them with no relayout. Sound reasoning, and
       correct for a handful of layers — but the story now has 16
       .hero-layer elements, and a full-screen texture on a 390x844 @3x
       screen is 11.3MB, so promoting all of them reserved ~181MB. Mobile
       Safari evicts long before that, so layers were being discarded and
       re-rasterised mid-swipe. Trading relayout for eviction thrashing is
       a bad deal at this layer count, so promotion is now released on
       mobile and the browser promotes only what is actively animating. */

    /* The stepper lock rules used to live here — moved out of the mobile
       @media so they also apply on desktop (the gesture stepper now drives
       both viewports). See the rules below this @media block. */

    /* ─── ACT 2 — STREET / WORKSHOP SCENE ─── */

    /* Shift street photo crop 23% past centre toward the right edge */
    body.home-page .street-img-bg {
        object-position: 73% 30% !important;
    }

    /* Act 3 — bedroom-window crop shifted 14% past centre toward the right edge */
    body.home-page .window-img-inner {
        object-position: 64.5% 50% !important;
    }

    /* Act 3 — resize and reposition the bed children + pillow on mobile so
       the boy sits at the lower-left, the pillow floats mid-frame between
       them, and the girl jumps on the right (matches the reference comp). */
    body.home-page .child-boy {
        width: 95vw !important;
        max-width: 550px !important;
        bottom: 22% !important;
        left: -12% !important;
    }

    body.home-page .floating-pillow {
        width: 33.8vw !important;
        max-width: 195px !important;
        top: calc(40% - 65px) !important;
        left: 50% !important;
    }

    body.home-page .child-girl {
        width: 72vw !important;
        max-width: 440px !important;
        bottom: 12% !important;
        left: 44% !important;
    }

    /* ─── UNIFIED ACT-TEXT TREATMENT (Acts 2–5) ───
       All four hero text overlays share the same mobile layout:
       horizontally centred, parked in the lower half, with a
       150%-bumped font size. */
    body.home-page #street-text-overlay,
    body.home-page #bedroom-text-overlay,
    body.home-page #office-text-overlay,
    body.home-page #final-text-overlay {
        top: auto !important;
        bottom: 12% !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        align-items: center !important;
        text-align: center !important;
        width: auto !important;
        max-width: 96vw !important;
        overflow: visible !important;
    }

    /* Individual Line Spacing (Gaps) */
    body.home-page #street-text-overlay {
        gap: 20px !important;
    }

    body.home-page #bedroom-text-overlay {
        gap: 2px !important;
    }

    body.home-page #office-text-overlay {
        gap: 2px !important;
    }

    body.home-page #final-text-overlay {
        gap: 2px !important;
    }

    /* 150% of desktop's clamp(33px, 6.2vw, 83px).
       Don't force width:100% — that would poison the JS that measures
       the longest flipping word and cause the rotating word to overflow. */
    body.home-page #street-text-overlay .street-text-top,
    body.home-page #bedroom-text-overlay .street-text-top,
    body.home-page #office-text-overlay .street-text-top,
    body.home-page #final-text-overlay .street-text-top {
        font-size: clamp(49.5px, 9.3vw, 124.5px) !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.home-page #street-text-overlay .flipping-text-container {
        justify-content: center !important;
        align-self: center !important;
    }

    body.home-page #street-text-overlay .flipping-word {
        text-align: center !important;
    }

    /* Final-act Sparsh logo also bumped 150% */
    body.home-page #final-text-overlay .final-sparsh-logo {
        height: clamp(104px, 17.25vw, 224px) !important;
        margin: 0 auto !important;
    }

    /* Frame 6 CTA — small glass pill below the Sparsh logo, points the
       user to the products page once the story has ended. */
    body.home-page #final-text-overlay .final-cta-btn {
        display: inline-flex !important;
        align-self: center !important;
        white-space: nowrap !important;
        margin-top: 18px !important;
        padding: 11px 26px !important;
        font-family: 'Inter', sans-serif !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.18em !important;
        text-transform: uppercase !important;
        color: #fff !important;
        text-decoration: none !important;
        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.30) !important;
        border-radius: 999px !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.45),
            0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
        transition: transform 0.25s ease, background 0.25s ease !important;
        pointer-events: auto !important;
    }

    body.home-page #final-text-overlay .final-cta-btn:active {
        transform: scale(0.97) !important;
        background: rgba(255, 255, 255, 0.18) !important;
    }

    /* ─── BOUNCING SCROLL-UP PROMPT (mobile-only, home-page) ─── */
    body.home-page .mobile-scroll-prompt {
        display: flex !important;
        position: fixed;
        bottom: 24px;
        left: 50%;
        z-index: 900;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        background: transparent;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: #fff;
        font-size: 22px;
        text-shadow:
            0 2px 6px rgba(0, 0, 0, 0.7),
            0 0 14px rgba(0, 0, 0, 0.45);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
        pointer-events: none;
        animation: scrollPromptBounce 1.6s ease-in-out infinite;
        transition: opacity 0.4s ease;
    }

    body.home-page .mobile-scroll-prompt.is-hidden {
        opacity: 0 !important;
        animation: none !important;
    }

    @keyframes scrollPromptBounce {

        0%,
        100% {
            transform: translateX(-50%) translateY(0);
            opacity: 0.85;
        }

        50% {
            transform: translateX(-50%) translateY(-12px);
            opacity: 0.55;
        }
    }
}

/* Scroll prompt is hidden on desktop */
.mobile-scroll-prompt {
    display: none;
}

/* Frame-6 CTA is mobile-only — keeps the cinematic desktop ending intact */
#final-text-overlay .final-cta-btn {
    display: none;
}

/* ─── HERO GESTURE STEPPER LOCK (desktop + mobile) ───
   While the stepper is active, native scroll is suppressed so no momentum
   can leak through and cause frame skipping on fast input. Once the
   stepper reaches the final frame it adds .home-stepper-released, which
   unlocks overflow / touch-action so the user can scroll to the footer. */
html.home-stepper-active,
html.home-stepper-active body.home-page {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
}

html.home-stepper-active.home-stepper-released,
html.home-stepper-active.home-stepper-released body.home-page {
    overflow: auto !important;
    height: auto !important;
    max-height: none !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
}

/* ============================================================
   PHASE 8 — Additional breakpoints for non-homepage pages only
   Scoped via body:not(.home-page) so the homepage layout is
   never affected. These supplement the existing 850px rules
   without overriding them.
   ============================================================ */

/* --- TABLET (1024px) — non-homepage only ----------------- */
@media (max-width: 1024px) and (min-width: 851px) {
    body:not(.home-page) .page-body {
        max-width: 100% !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
    body:not(.home-page) .footer-container {
        gap: 28px;
    }
    body:not(.home-page) .footer-links {
        gap: 24px;
    }
    body:not(.home-page) .why-partner-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body:not(.home-page) .how-it-works-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    body:not(.home-page) .foam-vertical-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body:not(.home-page) .locations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body:not(.home-page) .products-static-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body:not(.home-page) .city-resources {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- Related-resource card rows on phones -----------------
   `.city-resources` collapses to 2 columns only in the tablet band
   above (851–1024px). Dealership state pages set the grid via an
   INLINE `repeat(3, 1fr)` (generate-dealership-pages.js), which no
   ≤850px rule overrode — so phones showed 3 cramped columns of
   sentence-long link cards. Force a single column on phones; the
   `!important` is required to beat the inline style. Safe across
   dealership / locations / SKU "related resources" rows. */
@media (max-width: 850px) {
    body:not(.home-page) .city-resources {
        grid-template-columns: 1fr !important;
    }

    /* Safety net: the global `img { max-width: none }` (style.css, needed
       so the homepage's off-canvas hero clouds can scale past their box)
       means any content image without its own constraint could overflow.
       Clamp editorial/content images on phones. Decorative hero clouds
       are positioned/fixed and unaffected. */
    body:not(.home-page) .page-body img,
    .post-content img,
    .blog-post img,
    .about-body img,
    .foam-content img {
        max-width: 100%;
        height: auto;
    }
}

/* --- SMALL MOBILE (480px) — non-homepage only ----------- */
@media (max-width: 480px) {
    body:not(.home-page) .page-hero {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    body:not(.home-page) .page-hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }
    body:not(.home-page) .page-lede {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
    }
    body:not(.home-page) .page-body {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    body:not(.home-page) .page-body h2 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }
    body:not(.home-page) .city-proximity-strip,
    body:not(.home-page) .foam-trust-strip {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    body:not(.home-page) .sku-spec-table th,
    body:not(.home-page) .sku-spec-table td,
    body:not(.home-page) .foam-spec-table th,
    body:not(.home-page) .foam-spec-table td {
        padding: 8px 10px !important;
        font-size: 0.82rem !important;
    }
    body:not(.home-page) .sku-spec-table th {
        width: 110px !important;
    }
    body:not(.home-page) .sku-buy-cta,
    body:not(.home-page) .city-buy-cta,
    body:not(.home-page) .foam-quote-cta {
        padding: 22px 20px !important;
        gap: 16px !important;
    }
    body:not(.home-page) .sku-buy-cta .ctab-text h3,
    body:not(.home-page) .city-buy-cta .ctab-text h3,
    body:not(.home-page) .foam-quote-cta .cta-text h3 {
        font-size: 1.05rem !important;
    }
    body:not(.home-page) .footer-container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    body:not(.home-page) .footer-bottom {
        padding-left: 18px !important;
        padding-right: 18px !important;
        text-align: center !important;
    }
    body:not(.home-page) .breadcrumb {
        font-size: 0.82rem !important;
        padding: 12px 18px !important;
    }
}


/* =============================================================
   MOBILE GPU MEMORY RELIEF — homepage story only
   =============================================================
   The desktop story deliberately promotes every layer onto its own
   GPU texture (.hero-layer translate3d + ~34 will-change hints).
   That is the right call on desktop, where VRAM is plentiful and it
   avoids cascading repaints. On a phone it backfires badly:

     one full-screen layer on a 390x844 @3x screen = 11.3MB texture
     x16 .hero-layer elements                      = ~181MB
     + decoded hero images                         = ~74MB

   Mobile Safari evicts long before that, so scrolling thrashes —
   layers are discarded and re-rasterised mid-swipe, which is what
   the reported lag actually was. None of these hints were ever
   scoped away from mobile (responsive.css had zero will-change
   overrides).

   Releasing them does NOT disable compositing: the browser still
   promotes a layer while it is being animated, it just stops
   reserving all of them permanently. Mobile drives the story with a
   discrete gesture stepper (tweenTo per swipe), not a continuous
   scrub, so transient promotion is sufficient here.

   Desktop is untouched — everything below is inside the mobile
   breakpoint, and no visual property is altered.
   ============================================================= */
@media (max-width: 850px) {

    /* Stop forcing all 16 full-screen layers to hold their own texture.
       GSAP's inline transforms still promote whichever layer is mid-
       animation, so the story renders identically. */
    body.home-page .hero-layer {
        transform: none;
        backface-visibility: visible;
    }

    /* Release the permanent "keep me ready on the GPU" hints. */
    body.home-page .bg-parallax-layer,
    body.home-page .parallax-img,
    body.home-page .moon,
    body.home-page .window-closeup-layer,
    body.home-page .window-zoom-wrapper,
    body.home-page .window-overlay,
    body.home-page .sleeping-scene-layer,
    body.home-page .sleeping-img,
    body.home-page .office-scene-layer,
    body.home-page .office-reveal-container,
    body.home-page .office-man-container,
    body.home-page .sleeping-man-container,
    body.home-page .office-img-static,
    body.home-page .bed-child,
    body.home-page .floating-pillow,
    body.home-page .cloud-blob,
    body.home-page .cloud-fog-transition,
    body.home-page .feathers-back,
    body.home-page .feather,
    body.home-page .subject-layer,
    body.home-page .subject-img,
    body.home-page .feathers-front,
    body.home-page .feather-transition,
    body.home-page .hero-main-text,
    body.home-page .text-line-1,
    body.home-page .brand-logo,
    body.home-page .hero-text-primary,
    body.home-page .hero-text-secondary,
    body.home-page .hero-cta,
    body.home-page .hero-glow,
    body.home-page .flipping-text-container,
    body.home-page .bedroom-text-overlay,
    body.home-page .office-text-overlay,
    body.home-page .final-text-overlay {
        will-change: auto;
    }
}