﻿
.about-why-lux {
    padding: 120px 0;
    background: var(--light-bg);
}

.why-lux-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
}

.why-lux-card {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    transition: .35s;
}

    .why-lux-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(0,0,0,.08);
    }


/* ==================================================
   CTA
   ================================================== */

.about-cta-lux {
    padding: 100px 0;
    background: linear-gradient(90deg,#111,#333);
    color: #fff;
}


/* ==================================================
   SCROLL REVEAL ANIMATION
   ================================================== */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 1s cubic-bezier(.2,.8,.2,1);
}

    .reveal.active {
        opacity: 1;
        transform: none;
    }

.delay-1 {
    transition-delay: .2s;
}

.delay-2 {
    transition-delay: .4s;
}

.delay-3 {
    transition-delay: .6s;
}


/* ==================================================
   MOBILE
   ================================================== */

@media(max-width:992px) {

    .about-lux-grid {
        grid-template-columns: 1fr;
    }

    .why-lux-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-hero-parallax {
        background-attachment: scroll;
    }

    .about-parallax-strip {
        background-attachment: scroll;
    }
}

@media(max-width:600px) {
    .why-lux-grid {
        grid-template-columns: 1fr;
    }
}
.foundation-values-section {
    position: relative;
    overflow: hidden;
}

.foundation-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.foundation-content {
    position: relative;
    z-index: 2;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    margin-bottom: 50px;
}
.values-footer {
    margin-top: 40px;
    text-align: center;
    font-size: 1.1rem;
    color: #444;
    position: relative;
    z-index: 2;
}