/* ============================================================
   LIGHT UP LETTERS LONDON — UX POLISH · OCT 2026
   Fixes spacing, commercial quote styling, gallery scale,
   mobile navigation and floating WhatsApp presentation.
   ============================================================ */

/* Homepage: remove excessive dead space between editorial sections. */
.home-phase1 .home-intro-phase1{
    padding-top:88px;
    padding-bottom:76px;
}
.home-phase1 .home-product-phase1{
    padding-top:72px;
    padding-bottom:82px;
}
.home-phase1 .home-product-phase1 .product-copy{
    margin-bottom:38px;
    align-items:start;
}
.home-phase1 .home-product-phase1 .product-heading{
    padding:0;
}
.home-phase1 .home-product-phase1 .product-sidecopy{
    margin-top:30px;
}
.home-phase1 .home-product-phase1 .simple-slider{
    min-height:430px;
}

/* Homepage product editorial: keep the headline elegant and proportionate.
   This section previously inherited a 6.4vw / 102px heading rule from the
   legacy stylesheet, which made the copy dominate the layout on wide screens. */
.home-phase1 .home-product-phase1 .product-copy-slider{
    grid-template-columns:minmax(0,1fr) minmax(520px,1.08fr) !important;
    gap:clamp(42px,4vw,72px) !important;
    align-items:center !important;
}
.home-phase1 .home-product-phase1 .product-heading{
    max-width:720px !important;
    padding:24px 0 !important;
    justify-content:center !important;
}
.home-phase1 .home-product-phase1 .product-heading h2{
    max-width:720px;
    margin:0 !important;
    font-family:'DM Serif Display',Georgia,serif !important;
    font-size:clamp(46px,3.35vw,62px) !important;
    font-weight:400 !important;
    line-height:.98 !important;
    letter-spacing:-.03em !important;
    text-wrap:balance;
}
.home-phase1 .home-product-phase1 .product-heading h2 em{
    color:#9d7d49 !important;
    font-style:italic !important;
}
.home-phase1 .home-product-phase1 .product-sidecopy{
    max-width:560px !important;
    margin-top:34px !important;
}

/* Gallery: keep the hero installation impressive without swallowing the viewport. */
.gallery-phase2 .portfolio-feature{
    min-height:520px;
}
.gallery-phase2 .portfolio-feature__image img{
    height:520px;
    min-height:520px;
}
.gallery-phase2 .portfolio-feature__panel{
    padding:38px 34px 30px;
}
.gallery-phase2 .portfolio-feature__panel h2{
    font-size:clamp(38px,3.6vw,58px);
}
.gallery-phase2 .portfolio-card,
.gallery-phase2 .portfolio-card:nth-child(7n+1),
.gallery-phase2 .portfolio-card:nth-child(7n+5),
.gallery-phase2 .portfolio-card:nth-child(7n+3),
.gallery-phase2 .portfolio-card:nth-child(7n+4){
    min-height:340px;
}

/* Floating WhatsApp: clean native-green button, no heavy black outer disc. */
.whatsapp-float{
    width:62px !important;
    height:62px !important;
    right:22px !important;
    bottom:22px !important;
    border:2px solid rgba(255,255,255,.72) !important;
    background:#25D366 !important;
    color:#fff !important;
    box-shadow:
        0 12px 30px rgba(37,211,102,.30),
        0 3px 10px rgba(0,0,0,.16) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible{
    background:#20c95d !important;
    border-color:#fff !important;
    transform:translateY(-3px) scale(1.03) !important;
    box-shadow:
        0 16px 38px rgba(37,211,102,.36),
        0 4px 12px rgba(0,0,0,.18) !important;
}
.whatsapp-float__icon,
.whatsapp-float__icon svg{
    width:38px !important;
    height:38px !important;
}
.whatsapp-float__icon svg circle{
    fill:transparent !important;
}

/* Premium mobile navigation experience. */
@media(max-width:1100px){
    .site-header .mobile-menu{
        position:relative;
        width:50px;
        height:50px;
        flex:0 0 50px;
        padding:0;
        border:1px solid rgba(255,255,255,.42);
        border-radius:50%;
        background:rgba(13,12,10,.50);
        color:transparent;
        font-size:0;
        cursor:pointer;
        transition:background .25s ease,border-color .25s ease,transform .25s ease;
        overflow:hidden;
    }
    .site-header.scrolled .mobile-menu,
    .site-header.menu-open .mobile-menu{
        border-color:rgba(23,22,20,.25);
        background:#171614;
    }
    .site-header .mobile-menu::before,
    .site-header .mobile-menu::after{
        content:"";
        position:absolute;
        left:14px;
        width:20px;
        height:2px;
        border-radius:2px;
        background:#fff;
        transition:transform .25s ease,top .25s ease;
    }
    .site-header .mobile-menu::before{top:19px}
    .site-header .mobile-menu::after{top:28px}
    .site-header.menu-open .mobile-menu::before{
        top:24px;
        transform:rotate(45deg);
    }
    .site-header.menu-open .mobile-menu::after{
        top:24px;
        transform:rotate(-45deg);
    }

    .site-header.menu-open .site-nav{
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        top:100% !important;
        bottom:auto !important;
        width:100vw !important;
        height:calc(100dvh - 130px) !important;
        max-height:calc(100dvh - 130px) !important;
        z-index:120 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start;
        gap:0 !important;
        margin:0 !important;
        padding:38px 6vw 54px !important;
        overflow-y:auto;
        background:
            radial-gradient(circle at 90% 10%,rgba(200,167,106,.17),transparent 28%),
            linear-gradient(160deg,#f8f3ea 0%,#f1e8dc 100%) !important;
        color:#171614 !important;
        border-top:1px solid rgba(23,22,20,.08);
        box-shadow:0 30px 60px rgba(23,22,20,.15);
        animation:luxMenuIn .3s ease both;
    }
    .site-header.menu-open .site-nav::before{
        content:"EXPLORE";
        display:block;
        margin:0 0 22px;
        color:#a27e45;
        font-size:9px;
        font-weight:700;
        letter-spacing:.22em;
    }
    .site-header.menu-open .site-nav>a,
    .site-header.menu-open .site-nav>.nav-item>a,
    .site-header.menu-open .site-nav>.nav-dropdown>.nav-parent{
        position:relative;
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        min-height:58px;
        padding:10px 0 !important;
        border-bottom:1px solid rgba(23,22,20,.12);
        color:#171614 !important;
        opacity:1 !important;
        font:clamp(28px,6vw,42px) 'DM Serif Display',Georgia,serif !important;
        font-weight:400 !important;
        line-height:1 !important;
        letter-spacing:-.02em !important;
        text-transform:none !important;
    }
    .site-header.menu-open .site-nav>a::after,
    .site-header.menu-open .site-nav>.nav-item>a::after,
    .site-header.menu-open .site-nav>.nav-dropdown>.nav-parent::after{
        content:"↗";
        color:#b18a4b;
        font:18px Manrope,Arial,sans-serif;
    }
    .site-header.menu-open .nav-dropdown{
        position:static !important;
        min-width:0 !important;
        padding:0 !important;
        margin:0 !important;
        border:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
    }
    .site-header.menu-open .nav-dropdown-menu{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        padding:12px 0 20px;
    }
    .site-header.menu-open .nav-dropdown-menu a{
        padding:12px 13px !important;
        border:1px solid rgba(23,22,20,.10);
        border-radius:8px;
        background:rgba(255,255,255,.48);
        color:#514940 !important;
        font-size:12px !important;
        line-height:1.3;
    }
    @keyframes luxMenuIn{
        from{opacity:0;transform:translateY(-10px)}
        to{opacity:1;transform:translateY(0)}
    }
    body.nav-open{
        overflow:hidden;
    }
}

@media(max-width:1100px){
    .home-phase1 .home-product-phase1 .product-copy-slider{
        grid-template-columns:1fr !important;
        gap:30px !important;
    }
    .home-phase1 .home-product-phase1 .product-heading{
        max-width:760px !important;
        padding:0 !important;
    }
    .home-phase1 .home-product-phase1 .product-heading h2{
        font-size:clamp(42px,6.2vw,58px) !important;
        max-width:760px;
    }
}

@media(max-width:700px){
    .home-phase1 .home-intro-phase1{
        padding-top:54px;
        padding-bottom:48px;
    }
    .home-phase1 .home-intro-phase1 .intro-side{
        padding-top:0;
    }
    .home-phase1 .home-product-phase1{
        padding:48px 6vw 58px;
    }
    .home-phase1 .home-product-phase1 .product-heading{
        padding:0 !important;
    }
    .home-phase1 .home-product-phase1 .product-heading h2{
        font-size:clamp(38px,10.5vw,50px) !important;
        line-height:1 !important;
    }
    .home-phase1 .home-product-phase1 .product-copy{
        gap:28px !important;
        margin-bottom:26px;
    }
    .home-phase1 .home-product-phase1 .simple-slider{
        min-height:315px !important;
    }

    .gallery-phase2 .portfolio-feature{
        min-height:0;
    }
    .gallery-phase2 .portfolio-feature__image img{
        height:370px;
        min-height:370px;
    }
    .gallery-phase2 .portfolio-feature__panel{
        min-height:0;
        padding:28px 22px 26px;
    }
    .gallery-phase2 .portfolio-feature__panel h2{
        font-size:38px;
    }
    .gallery-phase2 .portfolio-card,
    .gallery-phase2 .portfolio-card:nth-child(n){
        min-height:315px !important;
    }

    .site-header.menu-open .site-nav{
        top:100% !important;
        height:calc(100dvh - 126px) !important;
        max-height:calc(100dvh - 126px) !important;
        padding-top:28px !important;
    }
    .site-header.menu-open .site-nav>a,
    .site-header.menu-open .site-nav>.nav-item>a,
    .site-header.menu-open .site-nav>.nav-dropdown>.nav-parent{
        min-height:54px;
        font-size:34px !important;
    }

    .whatsapp-float{
        width:58px !important;
        height:58px !important;
        right:16px !important;
        bottom:16px !important;
    }
    .whatsapp-float__icon,
    .whatsapp-float__icon svg{
        width:35px !important;
        height:35px !important;
    }
}


/* Quote reassurance collision fix:
   legacy .quote-reassurance rules were forcing a two-column parent grid,
   which split each reassurance item into separate text fragments. */
.quote-panel-phase3 .quote-reassurance.quote-reassurance-phase3{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    margin-top:48px !important;
    max-width:480px !important;
    align-items:stretch !important;
}
.quote-panel-phase3 .quote-reassurance.quote-reassurance-phase3 span{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:12px !important;
    align-items:center !important;
    width:100% !important;
    padding:17px 0 !important;
    margin:0 !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    color:rgba(255,255,255,.68) !important;
    font-family:Manrope,Arial,sans-serif !important;
    font-size:12px !important;
    line-height:1.45 !important;
    letter-spacing:.01em !important;
}
.quote-panel-phase3 .quote-reassurance.quote-reassurance-phase3 b{
    display:block !important;
    color:#cfb37c !important;
    font-family:Manrope,Arial,sans-serif !important;
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:.14em !important;
}
@media(max-width:700px){
    .quote-panel-phase3 .quote-reassurance.quote-reassurance-phase3{
        margin-top:34px !important;
        max-width:none !important;
    }
    .quote-panel-phase3 .quote-reassurance.quote-reassurance-phase3 span{
        grid-template-columns:34px minmax(0,1fr) !important;
        padding:15px 0 !important;
        font-size:12px !important;
    }
}


/* Mobile menu containment hotfix · Oct 2026
   Keep the menu as a true viewport-height panel below the utility/header bars.
   position:fixed on a descendant of a backdrop-filtered header can be treated
   as header-contained on mobile browsers, which caused the short broken panel. */
@media(max-width:1100px){
    .site-header.menu-open{
        overflow:visible !important;
        isolation:isolate;
    }
    .site-header.menu-open .site-nav{
        box-sizing:border-box !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
}
@media(max-width:700px){
    .site-header.menu-open .site-nav{
        left:0 !important;
        right:0 !important;
        width:100vw !important;
    }
}