/* =========================================================
   SPICEST — LUXURY LIGHT EDITORIAL ABOUT
   Theme: Cream + Olive + Charcoal
========================================================= */

:root{
    --la-olive: #7A8B5A;
    --la-olive-dark: #617046;
    --la-olive-deep: #4D5B37;
    --la-olive-light: #A7B58B;

    --la-cream: #F7F4EA;
    --la-cream-2: #F1EDDF;
    --la-soft: #FCFAF4;

    --la-dark: #20211E;
    --la-text: #62635C;

    --la-white: #FFFFFF;
}


/* =========================================================
   SECTION
========================================================= */

.lux-about{
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding:
        115px 0;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(122,139,90,.13),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(205,183,145,.14),
            transparent 27%
        ),
        linear-gradient(
            130deg,
            #F8F5EC 0%,
            #F4F0E4 48%,
            #FBF8F0 100%
        );
}


/* top luxury line */

.lux-about::before{
    content: "";

    position: absolute;

    top: 0;
    left: 6%;
    right: 6%;

    height: 1px;

    z-index: 10;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(122,139,90,.35),
            transparent
        );
}


/* bottom fade */

.lux-about::after{
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 150px;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(255,255,255,.30),
            transparent
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.lux-about-container{
    position: relative;

    z-index: 8;

    max-width: 1720px;

    margin-inline: auto;
}


/* =========================================================
   NOISE
========================================================= */

.lux-about-noise{
    position: absolute;

    inset: 0;

    z-index: 1;

    opacity: .17;

    pointer-events: none;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            transparent 0,
            rgba(80,90,65,.055) 1px,
            transparent 2px
        );

    background-size:
        9px 9px;

    animation:
        luxAboutNoise
        9s linear infinite;
}


/* =========================================================
   GRID
========================================================= */

.lux-about-grid{
    position: absolute;

    inset: 0;

    z-index: 0;

    opacity: .32;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(122,139,90,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(122,139,90,.045) 1px,
            transparent 1px
        );

    background-size:
        75px 75px;

    mask-image:
        radial-gradient(
            circle at 25% 50%,
            black,
            transparent 65%
        );
}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.lux-about-orb{
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(6px);
}


.lux-about-orb-one{
    width: 430px;
    height: 430px;

    left: -230px;
    top: -180px;

    background:
        radial-gradient(
            circle,
            rgba(122,139,90,.17),
            transparent 70%
        );

    animation:
        luxAboutOrbOne
        11s ease-in-out infinite;
}


.lux-about-orb-two{
    width: 380px;
    height: 380px;

    right: -190px;
    bottom: -190px;

    background:
        radial-gradient(
            circle,
            rgba(183,163,125,.14),
            transparent 70%
        );

    animation:
        luxAboutOrbTwo
        13s ease-in-out infinite;
}


/* =========================================================
   DECORATIVE LEAVES
========================================================= */

.lux-about-leaf{
    position: absolute;

    z-index: 1;

    pointer-events: none;

    color:
        rgba(122,139,90,.075);
}


.lux-about-leaf-one{
    left: 2%;
    bottom: 7%;

    font-size: 110px;

    transform:
        rotate(-28deg);

    animation:
        luxAboutLeafOne
        7s ease-in-out infinite;
}


.lux-about-leaf-two{
    right: 3%;
    top: 9%;

    font-size: 95px;

    transform:
        rotate(22deg);

    animation:
        luxAboutLeafTwo
        8s ease-in-out infinite;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.lux-about-visual{
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        20px 35px;
}


.lux-about-stage{
    --about-x: 0px;
    --about-y: 0px;

    --about-depth-x: 0px;
    --about-depth-y: 0px;

    position: relative;

    width: 100%;
    max-width: 650px;

    height: 640px;

    transform:
        translate(
            var(--about-x),
            var(--about-y)
        );

    transition:
        transform .25s ease-out;
}


/* =========================================================
   SIDE EDITORIAL WORD
========================================================= */

.lux-about-side-word{
    position: absolute;

    left: -5px;
    top: 50%;

    z-index: 7;

    display: flex;
    align-items: center;

    gap: 12px;

    color:
        rgba(32,33,30,.34);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 4px;

    writing-mode:
        vertical-rl;

    transform:
        translateY(-50%)
        rotate(180deg);
}


.lux-about-side-word i{
    width: 1px;
    height: 58px;

    background:
        rgba(122,139,90,.30);
}


/* =========================================================
   GHOST NUMBER
========================================================= */

.lux-about-ghost-number{
    position: absolute;

    right: -15px;
    top: -45px;

    z-index: -1;

    color:
        rgba(122,139,90,.055);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 210px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -15px;
}


/* =========================================================
   MAIN ARCH
========================================================= */

.lux-about-arch{
    position: absolute;

    left: 13%;
    top: 2%;

    width: 68%;
    height: 88%;

    z-index: 4;

    padding: 9px;

    border-radius:
        220px 220px 32px 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(255,255,255,.38)
        );

    border:
        1px solid
        rgba(255,255,255,.85);

    box-shadow:
        0 40px 90px
        rgba(64,72,50,.16),
        0 10px 30px
        rgba(0,0,0,.05);

    backdrop-filter:
        blur(15px);
}


.lux-about-arch-inner{
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius:
        210px 210px 25px 25px;
}


.lux-about-main-image{
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform:
        scale(1.04);

    animation:
        luxAboutImageBreath
        11s ease-in-out infinite;
}


.lux-about-image-overlay{
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(20,25,16,.02) 40%,
            rgba(20,25,16,.48) 100%
        );
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.lux-about-image-label{
    position: absolute;

    left: 20px;
    bottom: 20px;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        9px 14px 9px 9px;

    border-radius: 16px;

    color:
        #fff;

    background:
        rgba(26,32,21,.58);

    border:
        1px solid
        rgba(255,255,255,.18);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.18);

    backdrop-filter:
        blur(14px);
}


.lux-about-image-label-icon{
    width: 39px;
    height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color:
        var(--la-olive-dark);

    background:
        #fff;
}


.lux-about-image-label > span:last-child{
    display: flex;
    flex-direction: column;
}


.lux-about-image-label small{
    color:
        rgba(255,255,255,.68);

    font-size: 9px;
}


.lux-about-image-label strong{
    font-size: 12px;

    font-weight: 850;
}


/* =========================================================
   EXPERIENCE SEAL
========================================================= */

.lux-about-seal{
    position: absolute;

    left: -1%;
    top: 4%;

    z-index: 10;

    width: 160px;
    height: 160px;

    border-radius: 50%;

    background:
        rgba(252,250,244,.82);

    border:
        1px solid
        rgba(122,139,90,.20);

    box-shadow:
        0 25px 60px
        rgba(69,79,53,.16);

    backdrop-filter:
        blur(16px);
}


.lux-about-seal-svg{
    position: absolute;

    inset: 6px;

    width:
        calc(100% - 12px);

    height:
        calc(100% - 12px);

    animation:
        luxAboutSealRotate
        20s linear infinite;
}


.lux-about-seal-svg text{
    fill:
        #667748;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.lux-about-seal-center{
    position: absolute;

    top: 50%;
    left: 50%;

    width: 75px;
    height: 75px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            var(--la-olive),
            var(--la-olive-dark)
        );

    transform:
        translate(-50%,-50%);

    box-shadow:
        0 16px 35px
        rgba(122,139,90,.28);
}


.lux-about-seal-center strong{
    font-size: 22px;

    line-height: 1;

    font-weight: 950;
}


.lux-about-seal-center small{
    margin-top: 3px;

    font-size: 7px;

    letter-spacing: 1px;
}


/* =========================================================
   MINI PHOTO
========================================================= */

.lux-about-mini-photo{
    position: absolute;

    right: 0;
    bottom: 5%;

    z-index: 8;

    width: 37%;
    height: 32%;

    overflow: hidden;

    border-radius:
        28px 28px 100px 28px;

    border:
        7px solid
        rgba(255,255,255,.82);

    box-shadow:
        0 28px 65px
        rgba(52,62,42,.18);

    background: #FFFFFF;

    transform:
        translate(
            var(--about-depth-x),
            var(--about-depth-y)
        );
}


.lux-about-mini-photo img{
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1s
        cubic-bezier(.22,1,.36,1);
}

.lux-about-mini-photo.lux-about-mini-logo img{
    object-fit: contain;
    padding: 14px;
}



.lux-about-mini-photo:hover img{
    transform:
        scale(1.10);
}


.lux-about-mini-photo > span{
    position: absolute;

    right: 12px;
    bottom: 12px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--la-olive-dark);

    background:
        rgba(255,255,255,.90);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.12);
}


/* =========================================================
   STORY CARD
========================================================= */

.lux-about-story-card{
    position: absolute;

    left: 0;
    bottom: 15%;

    z-index: 12;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        10px 16px 10px 9px;

    border-radius: 18px;

    background:
        rgba(255,255,255,.78);

    border:
        1px solid
        rgba(122,139,90,.16);

    box-shadow:
        0 20px 50px
        rgba(61,72,48,.14);

    backdrop-filter:
        blur(15px);

    animation:
        luxAboutStoryFloat
        5s ease-in-out infinite;
}


.lux-about-story-icon{
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            var(--la-olive),
            var(--la-olive-dark)
        );
}


.lux-about-story-card > div:last-child{
    display: flex;
    flex-direction: column;
}


.lux-about-story-card small{
    color:
        #8A8D83;

    font-size: 9px;
}


.lux-about-story-card strong{
    color:
        var(--la-dark);

    font-size: 13px;

    font-weight: 900;
}


/* =========================================================
   ORBIT
========================================================= */

.lux-about-orbit{
    position: absolute;

    right: 2%;
    top: 8%;

    z-index: -1;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(122,139,90,.20);

    animation:
        luxAboutOrbit
        22s linear infinite;
}


.lux-about-orbit span{
    position: absolute;

    left: 37px;
    top: 25px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background:
        var(--la-olive);

    box-shadow:
        0 0 20px
        rgba(122,139,90,.35);
}


/* =========================================================
   BOTANICAL
========================================================= */

.lux-about-botanical{
    position: absolute;

    right: 3%;
    top: 46%;

    z-index: 2;

    display: flex;
    align-items: center;

    gap: 7px;

    color:
        rgba(122,139,90,.45);

    transform:
        rotate(90deg);
}


.lux-about-botanical span{
    width: 35px;
    height: 1px;

    background:
        rgba(122,139,90,.24);
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.lux-about-content{
    position: relative;

    z-index: 8;

    max-width: 800px;

    padding-right:
        clamp(0px, 2vw, 30px);
}


/* =========================================================
   KICKER
========================================================= */

.lux-about-kicker{
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color:
        var(--la-olive-dark);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .6px;

    text-transform: uppercase;
}


.lux-about-kicker-line{
    width: 46px;
    height: 2px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            var(--la-olive),
            transparent
        );
}


.lux-about-kicker-icon{
    width: 31px;
    height: 31px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--la-olive);

    background:
        rgba(255,255,255,.68);

    border:
        1px solid
        rgba(122,139,90,.16);
}


.lux-about-kicker small{
    color:
        #9A9C94;

    font-size: 8px;

    letter-spacing: 1px;
}


/* =========================================================
   HEADING
========================================================= */

.lux-about-heading{
    margin:
        0 0 20px;

    color:
        var(--la-dark);

    font-size:
        clamp(37px, 3.8vw, 62px);

    line-height: .98;

    font-weight: 950;

    letter-spacing: -3px;
}


.lux-about-heading-line{
    display: block;
}


.lux-about-heading-line em{
    position: relative;

    color:
        var(--la-olive);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 500;

    font-style: italic;

    letter-spacing: -3px;
}


.lux-about-heading-line em::after{
    content: "";

    position: absolute;

    left: 2%;
    right: -4%;
    bottom: 2px;

    height: 8px;

    z-index: -1;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            rgba(122,139,90,.22),
            transparent
        );
}


.lux-about-heading-bottom{
    display: block;

    color:
        var(--la-olive-dark);
}


/* =========================================================
   INTRO
========================================================= */

.lux-about-intro{
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 17px;

    max-width: 720px;

    margin-bottom: 30px;
}


.lux-about-intro-number{
    padding-top: 5px;

    color:
        var(--la-olive);

    font-size: 10px;

    font-weight: 950;
}


.lux-about-intro p{
    margin: 0;

    padding-left: 18px;

    color:
        var(--la-text);

    font-size:
        clamp(13px, 1vw, 14px);

    line-height: 1.7;

    border-left:
        1px solid
        rgba(122,139,90,.20);
}


.lux-about-intro strong{
    color:
        #3F4936;

    font-weight: 850;
}


/* =========================================================
   FEATURES
========================================================= */

.lux-about-features{
    display: flex;

    flex-direction: column;

    gap: 11px;
}


.lux-about-feature{
    position: relative;

    display: grid;

    grid-template-columns:
        34px 52px 1fr 38px;

    align-items: center;

    gap: 13px;

    min-height: 88px;

    padding:
        12px 15px;

    overflow: hidden;

    border-radius: 20px;

    background:
        rgba(255,255,255,.55);

    border:
        1px solid
        rgba(122,139,90,.14);

    box-shadow:
        0 15px 40px
        rgba(61,72,48,.055);

    backdrop-filter:
        blur(10px);

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1),

        box-shadow .4s ease,

        border-color .4s ease,

        background .4s ease;
}


.lux-about-feature::before{
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 0;

    background:
        linear-gradient(
            to bottom,
            var(--la-olive),
            var(--la-olive-light)
        );

    transition:
        height .45s
        cubic-bezier(.22,1,.36,1);
}


.lux-about-feature:hover{
    transform:
        translateX(8px);

    background:
        rgba(255,255,255,.82);

    border-color:
        rgba(122,139,90,.26);

    box-shadow:
        0 24px 55px
        rgba(61,72,48,.11);
}


.lux-about-feature:hover::before{
    height: 100%;
}


.lux-about-feature-index{
    color:
        rgba(122,139,90,.55);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.lux-about-feature-icon{
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    color:
        var(--la-olive-dark);

    font-size: 18px;

    background:
        rgba(122,139,90,.11);

    border:
        1px solid
        rgba(122,139,90,.16);

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1),

        color .35s ease,

        background .35s ease;
}


.lux-about-feature:hover
.lux-about-feature-icon{
    color:
        #fff;

    background:
        var(--la-olive);

    transform:
        rotate(-7deg)
        scale(1.05);
}


.lux-about-feature-copy h3{
    margin:
        0 0 5px;

    color:
        var(--la-dark);

    font-size: 16px;

    font-weight: 800;
}


.lux-about-feature-copy p{
    margin: 0;

    color:
        #4e5046;

    font-size: 13.5px;

    line-height: 1.55;
}


.lux-about-feature-arrow{
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--la-olive);

    background:
        rgba(122,139,90,.08);

    transition:
        transform .4s ease,

        background .35s ease,

        color .35s ease;
}


.lux-about-feature:hover
.lux-about-feature-arrow{
    color:
        #fff;

    background:
        var(--la-olive);

    transform:
        rotate(-35deg);
}


/* =========================================================
   BOTTOM AREA
========================================================= */

.lux-about-bottom{
    display: flex;
    align-items: center;

    gap: 25px;

    flex-wrap: wrap;

    margin-top: 28px;
}


/* =========================================================
   BUTTON
========================================================= */

.lux-about-btn{
    position: relative;

    min-height: 59px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    padding:
        8px 9px 8px 26px;

    overflow: hidden;

    border-radius: 999px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #83955F,
            #687A4A
        );

    text-decoration: none;

    font-size: 14px;

    font-weight: 900;

    box-shadow:
        0 18px 42px
        rgba(122,139,90,.24);

    transition:
        transform .4s ease,

        box-shadow .4s ease;
}


.lux-about-btn::before{
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    transform:
        skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transition:
        left .75s ease;
}


.lux-about-btn:hover::before{
    left: 150%;
}


.lux-about-btn:hover{
    color:
        #fff;

    transform:
        translateY(-5px);

    box-shadow:
        0 27px 58px
        rgba(122,139,90,.34);
}


.lux-about-btn-icon{
    position: relative;

    width: 41px;
    height: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--la-olive-dark);

    background:
        #fff;

    transition:
        transform .4s ease;
}


.lux-about-btn:hover
.lux-about-btn-icon{
    transform:
        rotate(-35deg);
}


/* =========================================================
   MINI TRUST
========================================================= */

.lux-about-mini-trust{
    display: flex;
    align-items: center;

    gap: 11px;
}


.lux-about-trust-icons{
    display: flex;
    align-items: center;
}


.lux-about-trust-icons span{
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: -7px;

    border-radius: 50%;

    color:
        var(--la-olive-dark);

    font-size: 11px;

    background:
        #fff;

    border:
        2px solid
        var(--la-cream);

    box-shadow:
        0 8px 18px
        rgba(61,72,48,.10);
}


.lux-about-trust-icons span:first-child{
    margin-left: 0;
}


.lux-about-mini-trust > div:last-child{
    display: flex;
    flex-direction: column;
}


.lux-about-mini-trust strong{
    color:
        var(--la-dark);

    font-size: 11px;

    font-weight: 900;
}


.lux-about-mini-trust small{
    color:
        #8C8E86;

    font-size: 8px;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.lux-about-reveal{
    opacity: 0;

    transform:
        translateY(38px);

    transition:
        opacity .95s
        cubic-bezier(.22,1,.36,1),

        transform .95s
        cubic-bezier(.22,1,.36,1);
}


.lux-about.is-visible
.lux-about-reveal{
    opacity: 1;

    transform:
        translateY(0);
}


.lux-about.is-visible
.lux-about-visual{
    transition-delay: .10s;
}


.lux-about.is-visible
.lux-about-kicker{
    transition-delay: .08s;
}


.lux-about.is-visible
.lux-about-heading{
    transition-delay: .18s;
}


.lux-about.is-visible
.lux-about-intro{
    transition-delay: .30s;
}


.lux-about.is-visible
.lux-about-feature:nth-child(1){
    transition-delay: .38s;
}


.lux-about.is-visible
.lux-about-feature:nth-child(2){
    transition-delay: .46s;
}


.lux-about.is-visible
.lux-about-feature:nth-child(3){
    transition-delay: .54s;
}


.lux-about.is-visible
.lux-about-bottom{
    transition-delay: .64s;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes luxAboutImageBreath{

    0%,
    100%{
        transform:
            scale(1.04);
    }

    50%{
        transform:
            scale(1.10);
    }

}


@keyframes luxAboutSealRotate{

    to{
        transform:
            rotate(360deg);
    }

}


@keyframes luxAboutStoryFloat{

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

    50%{
        transform:
            translateY(-11px)
            rotate(-2deg);
    }

}


@keyframes luxAboutOrbit{

    to{
        transform:
            rotate(360deg);
    }

}


@keyframes luxAboutNoise{

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

    25%{
        transform:
            translate(2px,-2px);
    }

    50%{
        transform:
            translate(-2px,2px);
    }

    75%{
        transform:
            translate(1px,2px);
    }

}


@keyframes luxAboutOrbOne{

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

    50%{
        transform:
            translate(30px,22px);
    }

}


@keyframes luxAboutOrbTwo{

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

    50%{
        transform:
            translate(-28px,-20px);
    }

}


@keyframes luxAboutLeafOne{

    0%,
    100%{
        transform:
            rotate(-28deg)
            translateY(0);
    }

    50%{
        transform:
            rotate(-21deg)
            translateY(-12px);
    }

}


@keyframes luxAboutLeafTwo{

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

    50%{
        transform:
            rotate(15deg)
            translateY(10px);
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px){

    .lux-about{
        padding:
            125px 0;
    }


    .lux-about-stage{
        max-width: 690px;

        height: 670px;
    }


    .lux-about-heading{
        font-size: 74px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1399.98px){

    .lux-about{
        padding:
            95px 0;
    }


    .lux-about-visual{
        min-height: 610px;
    }


    .lux-about-stage{
        max-width: 580px;

        height: 570px;
    }


    .lux-about-heading{
        font-size:
            clamp(40px, 4.2vw, 60px);
    }


    .lux-about-seal{
        width: 140px;
        height: 140px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px){

    .lux-about{
        padding:
            85px 0;
    }


    .lux-about-visual{
        min-height: 650px;

        margin-bottom: 30px;
    }


    .lux-about-stage{
        max-width: 620px;

        height: 620px;

        margin-inline: auto;
    }


    .lux-about-content{
        max-width: 760px;

        margin-inline: auto;

        padding-right: 0;
    }


    .lux-about-kicker{
        justify-content: center;

        display: flex;
    }


    .lux-about-heading{
        text-align: center;

        font-size:
            clamp(46px, 7vw, 68px);
    }


    .lux-about-intro{
        margin-inline: auto;
    }


    .lux-about-bottom{
        justify-content: center;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px){

    .lux-about{
        padding:
            68px 0;
    }


    .lux-about-visual{
        min-height: 540px;

        padding:
            15px 10px;
    }


    .lux-about-stage{
        height: 520px;

        max-width: 500px;
    }


    .lux-about-side-word{
        display: none;
    }


    .lux-about-ghost-number{
        font-size: 150px;

        right: 0;
    }


    .lux-about-arch{
        left: 10%;

        width: 72%;

        height: 85%;

        border-radius:
            170px 170px 25px 25px;
    }


    .lux-about-arch-inner{
        border-radius:
            160px 160px 19px 19px;
    }


    .lux-about-seal{
        width: 115px;
        height: 115px;

        left: 0;
    }


    .lux-about-seal-center{
        width: 56px;
        height: 56px;
    }


    .lux-about-seal-center strong{
        font-size: 17px;
    }


    .lux-about-mini-photo{
        width: 39%;
        height: 29%;
    }


    .lux-about-story-card{
        left: 0;

        bottom: 10%;
    }


    .lux-about-heading{
        font-size:
            clamp(39px, 10vw, 56px);

        letter-spacing:
            -2.5px;
    }


    .lux-about-heading-line em{
        letter-spacing:
            -2px;
    }


    .lux-about-feature{
        grid-template-columns:
            28px 48px 1fr 34px;

        gap: 10px;
    }


    .lux-about-feature-icon{
        width: 46px;
        height: 46px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px){

    .lux-about{
        padding:
            58px 0;
    }


    .lux-about-kicker{
        font-size: 9px;

        gap: 6px;
    }


    .lux-about-kicker-line{
        width: 28px;
    }


    .lux-about-kicker small{
        display: none;
    }


    .lux-about-heading{
        font-size:
            clamp(35px, 10.8vw, 48px);

        letter-spacing:
            -2px;
    }


    .lux-about-intro{
        display: block;
    }


    .lux-about-intro-number{
        display: none;
    }


    .lux-about-intro p{
        padding-left: 14px;
    }


    .lux-about-visual{
        min-height: 455px;
    }


    .lux-about-stage{
        height: 440px;
    }


    .lux-about-arch{
        left: 9%;

        width: 76%;
    }


    .lux-about-seal{
        width: 90px;
        height: 90px;
    }


    .lux-about-seal-svg text{
        font-size: 9px;
    }


    .lux-about-seal-center{
        width: 44px;
        height: 44px;
    }


    .lux-about-seal-center strong{
        font-size: 13px;
    }


    .lux-about-seal-center small{
        font-size: 5px;
    }


    .lux-about-mini-photo{
        width: 41%;
        height: 27%;

        border-width: 5px;
    }


    .lux-about-story-card{
        transform:
            scale(.86);

        transform-origin:
            left center;

        left: -6px;
    }


    .lux-about-image-label{
        display: none;
    }


    .lux-about-feature{
        grid-template-columns:
            43px 1fr 32px;

        padding:
            11px 10px;
    }


    .lux-about-feature-index{
        display: none;
    }


    .lux-about-feature-icon{
        width: 43px;
        height: 43px;

        border-radius: 14px;
    }


    .lux-about-feature-copy h3{
        font-size: 15px;
    }


    .lux-about-feature-copy p{
        font-size: 12.5px;
    }


    .lux-about-bottom{
        flex-direction: column;

        align-items: flex-start;
    }


    .lux-about-btn{
        width: 100%;

        max-width: 330px;

        justify-content:
            space-between;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .lux-about-noise,
    .lux-about-orb,
    .lux-about-leaf,
    .lux-about-main-image,
    .lux-about-seal-svg,
    .lux-about-story-card,
    .lux-about-orbit{
        animation:
            none !important;
    }


    .lux-about-reveal{
        opacity: 1;

        transform: none;

        transition: none;
    }

}