/* ============================================================
   LAVENDER COUNSELING CENTER
   ABOUT — HERO
============================================================ */

.lavAboutHero{

    position:relative;

    overflow:hidden;

    min-height:
        calc(100vh - 88px);

    padding:
        clamp(90px,9vw,145px)
        0
        clamp(105px,11vw,165px);

    background:
        linear-gradient(
            135deg,
            #fcfbfa 0%,
            #f8f4f7 45%,
            #f5eff5 100%
        );

    isolation:isolate;

}


/* ============================================================
   BACKGROUND TEXTURE
============================================================ */

.lavAboutHeroTexture{

    position:absolute;

    inset:0;

    z-index:-3;

    background-image:
        linear-gradient(
            rgba(111,83,120,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(111,83,120,.021) 1px,
            transparent 1px
        );

    background-size:
        74px 74px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.58),
            rgba(0,0,0,.25) 68%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.58),
            rgba(0,0,0,.25) 68%,
            transparent
        );

    pointer-events:none;

}


/* ============================================================
   AMBIENT GLOWS
============================================================ */

.lavAboutHeroGlow{

    position:absolute;

    z-index:-2;

    border-radius:50%;

    filter:
        blur(18px);

    pointer-events:none;

}


.lavAboutHeroGlowOne{

    top:-190px;

    left:-210px;

    width:600px;

    height:600px;

    background:
        radial-gradient(
            circle,
            rgba(192,168,202,.28) 0%,
            rgba(192,168,202,.10) 36%,
            rgba(192,168,202,0) 72%
        );

}


.lavAboutHeroGlowTwo{

    right:-250px;

    bottom:-260px;

    width:700px;

    height:700px;

    background:
        radial-gradient(
            circle,
            rgba(181,196,167,.22) 0%,
            rgba(181,196,167,.08) 38%,
            rgba(181,196,167,0) 72%
        );

}


/* ============================================================
   TOP ACCENT
============================================================ */

.lavAboutHero::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    left:0;

    z-index:2;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(118,82,134,.18),
            transparent
        );

    pointer-events:none;

}


/* ============================================================
   BOTTOM SHAPE
============================================================ */

.lavAboutHero::after{

    content:"";

    position:absolute;

    right:-160px;

    bottom:-340px;

    z-index:-1;

    width:720px;

    height:720px;

    border:
        1px solid
        rgba(118,82,134,.07);

    border-radius:50%;

    box-shadow:
        0 0 0 90px
        rgba(118,82,134,.022),
        0 0 0 180px
        rgba(118,82,134,.014);

    pointer-events:none;

}


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

.lavAboutHero .container{

    position:relative;

    z-index:4;

    width:min(
        calc(100% - 40px),
        1240px
    );

    margin-inline:auto;

}


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

.lavAboutHeroGrid{

    display:grid;

    grid-template-columns:
        minmax(0,.91fr)
        minmax(460px,1.09fr);

    align-items:center;

    gap:
        clamp(65px,8vw,125px);

}


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

.lavAboutHeroContent{

    position:relative;

    z-index:4;

    max-width:620px;

}


/* ============================================================
   EYEBROW
============================================================ */

.lavAboutHeroEyebrow{

    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:24px;

    color:#80608d;

}


.lavAboutHeroEyebrow > span{

    display:block;

    width:39px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            #80608d,
            rgba(128,96,141,.14)
        );

}


.lavAboutHeroEyebrow small{

    font-size:.71rem;

    font-weight:800;

    line-height:1;

    letter-spacing:.15em;

    text-transform:uppercase;

}


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

.lavAboutHero h1{

    max-width:650px;

    margin:0;

    color:#403743;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(4.1rem,7.3vw,7rem);

    font-weight:500;

    line-height:.88;

    letter-spacing:
        -.055em;

    text-wrap:balance;

}


.lavAboutHero h1 span{

    display:block;

    position:relative;

    width:max-content;

    max-width:100%;

    margin:
        8px 0 10px;

    color:#7b5888;

    font-style:italic;

}


.lavAboutHero h1 span::after{

    content:"";

    position:absolute;

    right:-7px;

    bottom:4px;

    left:-4px;

    z-index:-1;

    height:18px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            rgba(184,158,196,.24),
            rgba(184,158,196,.07)
        );

    transform:
        rotate(-1.5deg);

}


/* ============================================================
   LEAD
============================================================ */

.lavAboutHeroLead{

    max-width:590px;

    margin:
        clamp(28px,3.4vw,42px)
        0
        0;

    padding-left:23px;

    border-left:
        1px solid
        rgba(118,82,134,.25);

    color:#6f6672;

    font-size:
        clamp(1rem,1.15vw,1.12rem);

    line-height:1.85;

}


/* ============================================================
   VALUES
============================================================ */

.lavAboutHeroValues{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:13px;

    margin-top:
        clamp(34px,4vw,50px);

}


.lavAboutHeroValues article{

    position:relative;

    min-width:0;

    padding:
        20px 17px 19px;

    overflow:hidden;

    border:
        1px solid
        rgba(105,81,113,.10);

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.85),
            rgba(255,255,255,.52)
        );

    box-shadow:
        0 16px 40px
        rgba(67,51,72,.055),
        inset 0 1px 0
        rgba(255,255,255,.85);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.lavAboutHeroValues article::before{

    content:"";

    position:absolute;

    top:0;

    left:18px;

    width:35px;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #8b6997,
            rgba(139,105,151,.12)
        );

}


.lavAboutHeroValues article:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(118,82,134,.19);

    box-shadow:
        0 23px 50px
        rgba(67,51,72,.09),
        inset 0 1px 0
        rgba(255,255,255,.90);

}


.lavAboutHeroValues strong{

    display:block;

    margin-bottom:8px;

    color:#5c485f;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:1.28rem;

    font-weight:600;

    line-height:1;

}


.lavAboutHeroValues p{

    margin:0;

    color:#827985;

    font-size:.76rem;

    line-height:1.55;

}


/* ============================================================
   ACTION
============================================================ */

.lavAboutHeroActions{

    margin-top:
        clamp(34px,4vw,48px);

}


/* ============================================================
   PREMIUM CONSULTATION BUTTON
============================================================ */

.lavAboutHero .lavConsultationButton{

    position:relative;

    display:grid;

    grid-template-columns:
        auto minmax(0,1fr) auto;

    align-items:center;

    gap:15px;

    width:max-content;

    max-width:100%;

    min-height:70px;

    padding:
        11px 12px 11px 15px;

    overflow:hidden;

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

    border-radius:999px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #886695 0%,
            #755181 52%,
            #654270 100%
        );

    box-shadow:
        0 18px 42px
        rgba(88,58,99,.28),
        inset 0 1px 0
        rgba(255,255,255,.18);

    text-decoration:none;

    isolation:isolate;

    transition:
        transform .32s
        cubic-bezier(.2,.8,.2,1),
        border-color .3s ease,
        box-shadow .32s ease;

}


.lavAboutHero .lavConsultationButton::before{

    content:"";

    position:absolute;

    top:-70%;

    left:-25%;

    z-index:-1;

    width:40%;

    height:240%;

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

    transform:
        rotate(20deg)
        translateX(-180%);

    transition:
        transform .85s
        cubic-bezier(.2,.8,.2,1);

}


.lavAboutHero .lavConsultationButton::after{

    content:"";

    position:absolute;

    right:65px;

    bottom:-48px;

    z-index:-1;

    width:135px;

    height:135px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(218,199,225,.22),
            rgba(218,199,225,0) 72%
        );

    pointer-events:none;

}


.lavAboutHero .lavConsultationButton:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(255,255,255,.34);

    box-shadow:
        0 26px 55px
        rgba(88,58,99,.37),
        inset 0 1px 0
        rgba(255,255,255,.23);

}


.lavAboutHero .lavConsultationButton:hover::before{

    transform:
        rotate(20deg)
        translateX(470%);

}


.lavAboutHero .lavConsultationButton:focus-visible{

    outline:
        3px solid
        rgba(143,106,160,.33);

    outline-offset:6px;

}


/* ============================================================
   BUTTON BOTANICAL MARK
============================================================ */

.lavAboutHero .lavConsultationButtonMark{

    position:relative;

    display:inline-block;

    width:44px;

    height:44px;

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

    border-radius:50%;

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

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.13);

}


.lavAboutHero .lavConsultationButtonStem{

    position:absolute;

    bottom:8px;

    left:21px;

    width:1.5px;

    height:27px;

    border-radius:999px;

    background:
        rgba(232,240,225,.90);

    transform:
        rotate(5deg);

}


.lavAboutHero .lavConsultationButtonLeaf{

    position:absolute;

    width:11px;

    height:4px;

    border-radius:
        100% 0 100% 0;

    background:
        rgba(219,231,210,.92);

}


.lavAboutHero .lavConsultationButtonLeafOne{

    bottom:13px;

    left:11px;

    transform:
        rotate(21deg);

}


.lavAboutHero .lavConsultationButtonLeafTwo{

    bottom:19px;

    left:21px;

    transform:
        scaleX(-1)
        rotate(18deg);

}


.lavAboutHero .lavConsultationButtonBud{

    position:absolute;

    width:7px;

    height:10px;

    border-radius:
        60% 60% 45% 45%;

    background:
        linear-gradient(
            145deg,
            #eee4f2,
            #c8afd3
        );

    box-shadow:
        0 2px 5px
        rgba(45,30,50,.18);

}


.lavAboutHero .lavConsultationButtonBudOne{

    top:6px;

    left:18px;

}


.lavAboutHero .lavConsultationButtonBudTwo{

    top:13px;

    left:12px;

    transform:
        rotate(-17deg)
        scale(.84);

}


.lavAboutHero .lavConsultationButtonBudThree{

    top:15px;

    left:25px;

    transform:
        rotate(18deg)
        scale(.78);

}


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

.lavAboutHero .lavConsultationButtonText{

    display:grid;

    gap:4px;

    min-width:0;

}


.lavAboutHero .lavConsultationButtonText small{

    color:
        rgba(255,255,255,.70);

    font-size:.62rem;

    font-weight:750;

    line-height:1;

    letter-spacing:.09em;

    text-transform:uppercase;

}


.lavAboutHero .lavConsultationButtonText strong{

    color:#ffffff;

    font-size:.93rem;

    font-weight:750;

    line-height:1.2;

    letter-spacing:
        -.01em;

}


.lavAboutHero .lavConsultationButtonArrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:43px;

    height:43px;

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

    border-radius:50%;

    color:#ffffff;

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

    font-size:1.05rem;

    transition:
        transform .3s ease,
        background-color .3s ease;

}


.lavAboutHero .lavConsultationButton:hover
.lavConsultationButtonArrow{

    transform:
        translateX(3px);

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

}


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

.lavAboutHeroVisual{

    position:relative;

    min-width:0;

    width:100%;

    max-width:610px;

    margin-left:auto;

    padding:
        36px 38px 44px 28px;

}


/* ============================================================
   VISUAL BACKPLATE
============================================================ */

.lavAboutHeroVisual::before{

    content:"";

    position:absolute;

    top:7px;

    right:7px;

    bottom:17px;

    left:56px;

    z-index:-1;

    border:
        1px solid
        rgba(118,82,134,.10);

    border-radius:
        47% 47% 36px 36px;

    background:
        linear-gradient(
            145deg,
            rgba(215,198,220,.34),
            rgba(235,226,236,.12)
        );

    transform:
        rotate(2.5deg);

}


.lavAboutHeroVisual::after{

    content:"";

    position:absolute;

    top:65px;

    right:-8px;

    z-index:-2;

    width:230px;

    height:230px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(151,119,164,.19),
            rgba(151,119,164,0) 72%
        );

    filter:
        blur(5px);

}


/* ============================================================
   MAIN IMAGE
============================================================ */

.lavAboutHeroImage{

    position:relative;

    min-height:
        clamp(600px,60vw,760px);

    overflow:hidden;

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

    border-radius:
        47% 47% 34px 34px;

    background:
        #d9d0d8;

    box-shadow:
        0 40px 95px
        rgba(66,48,72,.16),
        inset 0 1px 0
        rgba(255,255,255,.70);

    isolation:isolate;

}


.lavAboutHeroImage::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            180deg,
            rgba(44,34,47,.02) 30%,
            rgba(44,34,47,.12) 100%
        );

    pointer-events:none;

}


.lavAboutHeroImage::after{

    content:"";

    position:absolute;

    inset:13px;

    z-index:3;

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

    border-radius:
        calc(47% - 8px)
        calc(47% - 8px)
        25px
        25px;

    pointer-events:none;

}


.lavAboutHeroImage img{

    position:absolute;

    inset:-5%;

    display:block;

    width:110%;

    height:110%;

    object-fit:cover;

    object-position:center;

    transform:
        translate3d(
            var(--about-image-x,0px),
            var(--about-image-y,0px),
            0
        )
        scale(1.02);

    transition:
        transform .22s ease-out,
        filter .45s ease;

    will-change:transform;

}


.lavAboutHeroVisual:hover
.lavAboutHeroImage img{

    filter:
        saturate(1.03)
        contrast(1.015);

}


/* ============================================================
   IMAGE CORNER DETAIL
============================================================ */

.lavAboutHeroImage > span{

    position:absolute;

    z-index:4;

}


/* ============================================================
   FLOATING CARD
============================================================ */

.lavAboutHeroFloating{

    position:absolute;

    bottom:85px;

    left:-36px;

    z-index:6;

    width:
        clamp(230px,23vw,285px);

    padding:
        23px 24px 24px;

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

    border-radius:25px;

    background:
        rgba(252,249,251,.83);

    box-shadow:
        0 27px 65px
        rgba(62,45,68,.17),
        inset 0 1px 0
        rgba(255,255,255,.84);

    backdrop-filter:
        blur(18px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(130%);

    transform:
        translate3d(
            var(--about-card-x,0px),
            var(--about-card-y,0px),
            0
        );

    transition:
        transform .25s ease-out,
        box-shadow .35s ease;

    will-change:transform;

}


.lavAboutHeroFloating:hover{

    box-shadow:
        0 33px 78px
        rgba(62,45,68,.22),
        inset 0 1px 0
        rgba(255,255,255,.90);

}


.lavAboutHeroFloating::before{

    content:"";

    position:absolute;

    top:0;

    left:26px;

    width:43px;

    height:3px;

    border-radius:
        0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            #876494,
            #aa8ab7
        );

}


.lavAboutHeroFloatingIcon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:39px;

    height:39px;

    margin-bottom:17px;

    border:
        1px solid
        rgba(118,82,134,.13);

    border-radius:50%;

    color:#80608d;

    background:
        rgba(239,231,242,.75);

    font-size:1.05rem;

}


.lavAboutHeroFloating p{

    margin:0;

    color:#635968;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(1.22rem,1.65vw,1.5rem);

    font-weight:550;

    line-height:1.18;

    letter-spacing:
        -.018em;

}


.lavAboutHeroFloating p + p{

    margin-top:4px;

}


.lavAboutHeroFloating p:last-child{

    margin-top:11px;

    color:#82638d;

    font-style:italic;

}


/* ============================================================
   EXPERIENCE LABEL
============================================================ */

.lavAboutHeroExperience{

    position:absolute;

    top:53px;

    right:-26px;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    width:126px;

    height:126px;

    padding:18px;

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

    border-radius:50%;

    background:
        rgba(118,82,134,.88);

    box-shadow:
        0 22px 50px
        rgba(87,58,97,.26),
        inset 0 1px 0
        rgba(255,255,255,.18);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transform:
        translate3d(
            var(--about-experience-x,0px),
            var(--about-experience-y,0px),
            0
        )
        rotate(7deg);

    transition:
        transform .25s ease-out;

    will-change:transform;

}


.lavAboutHeroExperience::before{

    content:"";

    position:absolute;

    inset:8px;

    border:
        1px dashed
        rgba(255,255,255,.25);

    border-radius:50%;

}


.lavAboutHeroExperience small{

    position:relative;

    z-index:2;

    color:#ffffff;

    font-size:.65rem;

    font-weight:750;

    line-height:1.55;

    letter-spacing:.06em;

    text-align:center;

    text-transform:uppercase;

}


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

.lavAboutHeroBotanical{

    position:absolute;

    right:-18px;

    bottom:0;

    z-index:7;

    width:105px;

    height:230px;

    opacity:.74;

    transform:
        translate3d(
            var(--about-botanical-x,0px),
            var(--about-botanical-y,0px),
            0
        )
        rotate(7deg);

    transform-origin:
        bottom center;

    transition:
        transform .28s ease-out;

    pointer-events:none;

    will-change:transform;

}


.lavAboutHeroBotanical::before{

    content:"";

    position:absolute;

    bottom:2px;

    left:51px;

    width:2px;

    height:185px;

    border-radius:999px;

    background:
        linear-gradient(
            to top,
            #627554,
            #94a485
        );

    transform:
        rotate(4deg);

}


.lavAboutHeroBotanical span{

    position:absolute;

}


/*
|--------------------------------------------------------------------------
| Leaves
|--------------------------------------------------------------------------
*/

.lavAboutHeroBotanical span:nth-child(1),
.lavAboutHeroBotanical span:nth-child(2){

    width:40px;

    height:13px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #899a79,
            #637755
        );

}


.lavAboutHeroBotanical span:nth-child(1){

    bottom:48px;

    left:16px;

    transform:
        rotate(22deg);

}


.lavAboutHeroBotanical span:nth-child(2){

    bottom:92px;

    left:50px;

    transform:
        scaleX(-1)
        rotate(18deg);

}


/*
|--------------------------------------------------------------------------
| Buds
|--------------------------------------------------------------------------
*/

.lavAboutHeroBotanical span:nth-child(3),
.lavAboutHeroBotanical span:nth-child(4),
.lavAboutHeroBotanical span:nth-child(5){

    width:20px;

    height:34px;

    border-radius:
        65% 65% 45% 45%;

    background:
        linear-gradient(
            145deg,
            #c0a7cb,
            #73507f
        );

    box-shadow:
        0 5px 14px
        rgba(85,56,95,.14);

}


.lavAboutHeroBotanical span:nth-child(3){

    top:6px;

    left:42px;

}


.lavAboutHeroBotanical span:nth-child(4){

    top:30px;

    left:25px;

    transform:
        rotate(-18deg)
        scale(.84);

}


.lavAboutHeroBotanical span:nth-child(5){

    top:36px;

    left:59px;

    transform:
        rotate(18deg)
        scale(.80);

}


/* ============================================================
   REVEAL FALLBACK
============================================================ */

.lavAboutHero .reveal-soft{

    opacity:1;

    transform:none;

    filter:none;

}


/* ============================================================
   REVEAL WITH JAVASCRIPT
============================================================ */

.js .lavAboutHero .reveal-soft{

    opacity:0;

    transform:
        translateY(25px);

    filter:
        blur(8px);

    transition:
        opacity 950ms
        cubic-bezier(.22,1,.36,1),
        transform 950ms
        cubic-bezier(.22,1,.36,1),
        filter 950ms
        cubic-bezier(.22,1,.36,1);

}


.js .lavAboutHero .reveal-soft.is-visible{

    opacity:1;

    transform:
        translateY(0);

    filter:
        blur(0);

}


.js .lavAboutHero .delay-1{

    transition-delay:100ms;

}


.js .lavAboutHero .delay-2{

    transition-delay:190ms;

}


.js .lavAboutHero .delay-3{

    transition-delay:280ms;

}


.js .lavAboutHero .delay-4{

    transition-delay:370ms;

}


/* ============================================================
   LARGE SCREEN
============================================================ */

@media (min-width:1500px){

    .lavAboutHeroGrid{

        gap:135px;

    }


    .lavAboutHeroVisual{

        max-width:650px;

    }

}


/* ============================================================
   MEDIUM DESKTOP
============================================================ */

@media (max-width:1180px){

    .lavAboutHeroGrid{

        grid-template-columns:
            minmax(0,.92fr)
            minmax(410px,1.08fr);

        gap:60px;

    }


    .lavAboutHero h1{

        font-size:
            clamp(3.8rem,6.8vw,6rem);

    }


    .lavAboutHeroValues{

        gap:10px;

    }


    .lavAboutHeroValues article{

        padding:
            18px 14px;

    }


    .lavAboutHeroFloating{

        left:-18px;

    }


    .lavAboutHeroExperience{

        right:-5px;

    }

}


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

@media (max-width:980px){

    .lavAboutHero{

        min-height:auto;

        padding:
            100px 0 130px;

    }


    .lavAboutHeroGrid{

        grid-template-columns:
            1fr;

        gap:75px;

    }


    .lavAboutHeroContent{

        max-width:760px;

    }


    .lavAboutHero h1{

        max-width:730px;

        font-size:
            clamp(4rem,9vw,6.3rem);

    }


    .lavAboutHeroLead{

        max-width:650px;

    }


    .lavAboutHeroValues{

        max-width:720px;

    }


    .lavAboutHeroVisual{

        max-width:680px;

        margin:
            0 auto;

        padding:
            35px 48px 48px;

    }


    .lavAboutHeroImage{

        min-height:
            clamp(610px,88vw,770px);

    }


    .lavAboutHeroFloating{

        left:0;

    }


    .lavAboutHeroExperience{

        right:0;

    }

}


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

@media (max-width:720px){

    .lavAboutHero{

        padding:
            84px 0 105px;

    }


    .lavAboutHero .container{

        width:
            calc(100% - 28px);

    }


    .lavAboutHeroGrid{

        gap:58px;

    }


    .lavAboutHero h1{

        font-size:
            clamp(3.55rem,14vw,5.1rem);

    }


    .lavAboutHeroValues{

        grid-template-columns:
            1fr;

        gap:11px;

    }


    .lavAboutHeroValues article{

        display:grid;

        grid-template-columns:
            115px minmax(0,1fr);

        align-items:start;

        gap:14px;

        padding:
            18px 18px;

    }


    .lavAboutHeroValues article::before{

        left:18px;

    }


    .lavAboutHeroValues strong{

        margin:0;

    }


    .lavAboutHeroVisual{

        padding:
            24px 18px 95px;

    }


    .lavAboutHeroVisual::before{

        right:0;

        left:25px;

    }


    .lavAboutHeroImage{

        min-height:
            clamp(500px,118vw,660px);

        border-radius:
            45% 45% 28px 28px;

    }


    .lavAboutHeroImage::after{

        border-radius:
            calc(45% - 7px)
            calc(45% - 7px)
            20px
            20px;

    }


    .lavAboutHeroFloating{

        right:28px;

        bottom:18px;

        left:0;

        width:auto;

        max-width:300px;

    }


    .lavAboutHeroExperience{

        top:30px;

        right:-3px;

        width:105px;

        height:105px;

        padding:14px;

    }


    .lavAboutHeroExperience small{

        font-size:.56rem;

    }


    .lavAboutHeroBotanical{

        right:-9px;

        bottom:28px;

        transform:
            rotate(7deg)
            scale(.78);

    }

}


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

@media (max-width:560px){

    .lavAboutHero h1{

        font-size:
            clamp(3.2rem,15vw,4.2rem);

        line-height:.91;

    }


    .lavAboutHeroLead{

        margin-top:28px;

        padding-left:17px;

        font-size:.98rem;

    }


    .lavAboutHeroValues article{

        grid-template-columns:
            100px minmax(0,1fr);

    }


    .lavAboutHero .lavConsultationButton{

        width:100%;

        min-height:68px;

        border-radius:22px;

    }


    .lavAboutHero .lavConsultationButtonText small{

        font-size:.56rem;

        line-height:1.35;

    }


    .lavAboutHero .lavConsultationButtonText strong{

        font-size:.87rem;

    }


    .lavAboutHeroVisual{

        padding:
            15px 6px 100px;

    }


    .lavAboutHeroImage{

        min-height:
            clamp(455px,125vw,580px);

    }


    .lavAboutHeroFloating{

        right:17px;

        bottom:13px;

        left:0;

        padding:
            20px 20px 21px;

    }


    .lavAboutHeroFloating p{

        font-size:
            clamp(1.12rem,5.5vw,1.35rem);

    }


    .lavAboutHeroExperience{

        top:15px;

        right:-3px;

        width:92px;

        height:92px;

    }


    .lavAboutHeroExperience small{

        font-size:.5rem;

        line-height:1.45;

    }


    .lavAboutHeroBotanical{

        display:none;

    }

}


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

@media (max-width:390px){

    .lavAboutHero h1{

        font-size:
            clamp(2.9rem,15vw,3.7rem);

    }


    .lavAboutHeroValues article{

        grid-template-columns:1fr;

        gap:7px;

    }


    .lavAboutHero .lavConsultationButton{

        grid-template-columns:
            auto minmax(0,1fr);

    }


    .lavAboutHero .lavConsultationButtonArrow{

        display:none;

    }


    .lavAboutHeroFloating{

        right:8px;

        left:0;

    }

}


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

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

    .js .lavAboutHero .reveal-soft{

        opacity:1;

        transform:none;

        filter:none;

        transition:none;

    }


    .lavAboutHeroValues article,
    .lavAboutHero .lavConsultationButton,
    .lavAboutHero .lavConsultationButton::before,
    .lavAboutHero .lavConsultationButtonArrow,
    .lavAboutHeroImage img,
    .lavAboutHeroFloating,
    .lavAboutHeroExperience,
    .lavAboutHeroBotanical{

        transition:none;

    }


    .lavAboutHeroImage img{

        transform:
            scale(1.02);

    }

}

.lavAboutHeroValueTitle {
    margin: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
}