/* ============================================================
   LAVENDER COUNSELING CENTER
   PREMIUM HEADER
============================================================ */

.lavHeader{

    position:sticky;

    top:0;

    z-index:1000;

    width:100%;

    border-bottom:
        1px solid
        rgba(70,63,74,.09);

    background:
        rgba(252,251,250,.90);

    box-shadow:
        0 10px 34px
        rgba(58,49,63,.045);

    backdrop-filter:
        blur(20px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(135%);

    transition:
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


/*
|--------------------------------------------------------------------------
| Lavender top accent
|--------------------------------------------------------------------------
*/

.lavHeader::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    left:0;

    z-index:2;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(177,153,190,.20) 18%,
            rgba(118,82,134,.70) 50%,
            rgba(177,153,190,.20) 82%,
            transparent 100%
        );

    opacity:.68;

    pointer-events:none;

}


.lavHeader.is-scrolled{

    border-bottom-color:
        rgba(70,63,74,.13);

    background:
        rgba(252,251,250,.97);

    box-shadow:
        0 16px 45px
        rgba(58,49,63,.09);

}


/*
|--------------------------------------------------------------------------
| Ambient botanical glow
|--------------------------------------------------------------------------
*/

.lavHeaderAura{

    position:absolute;

    top:-80px;

    left:8%;

    width:260px;

    height:150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(192,169,203,.17) 0%,
            rgba(192,169,203,0) 72%
        );

    filter:
        blur(8px);

    opacity:.75;

    pointer-events:none;

}


.lavHeader .container{

    position:relative;

    z-index:3;

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

    margin-inline:auto;

}


.lavHeaderInner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:
        clamp(18px,2.4vw,34px);

    min-height:92px;

    transition:
        min-height .35s ease;

}


.lavHeader.is-scrolled .lavHeaderInner{

    min-height:80px;

}


/* ============================================================
   LOGO
============================================================ */

.lavLogo{

    position:relative;

    display:inline-flex;

    align-items:center;

    flex:0 0 auto;

    text-decoration:none;

    isolation:isolate;

}


.lavLogoImage{

    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

}


.lavLogo img{

    display:block;

    width:auto;

    max-width:180px;

    height:auto;

    transition:
        transform .35s ease,
        opacity .35s ease;

}


.lavLogo:hover img{

    transform:
        translateX(2px);

}


.lavLogo:focus-visible{

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

    outline-offset:7px;

    border-radius:10px;

}


/* ============================================================
   BOTANICAL LOGO DETAIL
============================================================ */

.lavLogoBotanical{

    position:absolute;

    top:50%;

    left:-19px;

    z-index:1;

    width:30px;

    height:56px;

    opacity:.72;

    transform:
        translateY(-50%)
        rotate(-7deg);

    transform-origin:
        bottom center;

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.2,.8,.2,1);

    pointer-events:none;

}


.lavLogo:hover .lavLogoBotanical{

    opacity:1;

    transform:
        translateY(-50%)
        rotate(-2deg)
        scale(1.04);

}


.lavLogoStem{

    position:absolute;

    bottom:5px;

    left:14px;

    width:1.5px;

    height:43px;

    border-radius:999px;

    background:
        linear-gradient(
            to top,
            #6f845f,
            #8ea27e
        );

    transform:
        rotate(5deg);

}


.lavLogoLeaf{

    position:absolute;

    width:10px;

    height:4px;

    border-radius:
        100% 0 100% 0;

    background:
        #829773;

}


.lavLogoLeafOne{

    bottom:15px;

    left:7px;

    transform:
        rotate(18deg);

}


.lavLogoLeafTwo{

    bottom:24px;

    left:15px;

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

}


.lavLogoBud{

    position:absolute;

    left:12px;

    width:7px;

    height:11px;

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

    background:
        linear-gradient(
            145deg,
            #bda3c8,
            #856194
        );

    box-shadow:
        0 3px 8px
        rgba(118,82,134,.18);

}


.lavLogoBudOne{

    top:3px;

    transform:
        rotate(-8deg);

}


.lavLogoBudTwo{

    top:13px;

    left:8px;

    transform:
        rotate(-19deg)
        scale(.86);

}


.lavLogoBudThree{

    top:18px;

    left:17px;

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

}


/* ============================================================
   DESKTOP NAVIGATION
============================================================ */

.lavNavigation{

    margin-left:auto;

}


.lavNavigationList{

    display:flex;

    align-items:center;

    gap:
        clamp(17px,1.8vw,29px);

    margin:0;

    padding:0;

    list-style:none;

}


.lavNavigationList li{

    margin:0;

    padding:0;

}


.lavNavigationList a{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:46px;

    padding:
        0 2px;

    color:#504755;

    font-size:.88rem;

    font-weight:650;

    line-height:1;

    letter-spacing:
        -.01em;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;

}


.lavNavigationList a::before{

    content:"";

    position:absolute;

    right:0;

    bottom:5px;

    left:0;

    height:8px;

    border-radius:999px;

    background:
        rgba(181,153,194,.18);

    opacity:0;

    transform:
        scaleX(.45)
        translateY(3px);

    transition:
        opacity .25s ease,
        transform .3s ease;

}


.lavNavigationList a::after{

    content:"";

    position:absolute;

    right:0;

    bottom:7px;

    left:0;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #a987b8,
            #765286
        );

    transform:
        scaleX(0);

    transform-origin:center;

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

}


.lavNavigationList a:hover{

    color:#765286;

    transform:
        translateY(-1px);

}


.lavNavigationList a:hover::before{

    opacity:1;

    transform:
        scaleX(1)
        translateY(0);

}


.lavNavigationList a:hover::after{

    transform:
        scaleX(1);

}


.lavNavigationList a.is-current{

    color:#765286;

}


.lavNavigationList a.is-current::after{

    transform:
        scaleX(1);

}


.lavNavigationList a.is-current::before{

    opacity:.75;

    transform:
        scaleX(1)
        translateY(0);

}


.lavNavigationList a:focus-visible{

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

    outline-offset:4px;

    border-radius:7px;

}


/* ============================================================
   HEADER ACTIONS
============================================================ */

.lavHeaderActions{

    display:flex;

    align-items:center;

    gap:12px;

    flex:0 0 auto;

}


.lavHeaderCare{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(107,129,91,.13);

    border-radius:999px;

    color:#67735f;

    background:
        rgba(247,249,244,.76);

    font-size:.68rem;

    font-weight:700;

    line-height:1;

    letter-spacing:.025em;

    white-space:nowrap;

}


.lavHeaderCareDot{

    position:relative;

    display:inline-block;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#81946f;

    box-shadow:
        0 0 0 4px
        rgba(129,148,111,.11);

}


.lavHeaderCareDot::after{

    content:"";

    position:absolute;

    inset:-4px;

    border:
        1px solid
        rgba(129,148,111,.28);

    border-radius:50%;

    animation:
        lavCarePulse 2.8s ease-out infinite;

}


@keyframes lavCarePulse{

    0%{

        opacity:.8;

        transform:
            scale(.65);

    }

    70%,
    100%{

        opacity:0;

        transform:
            scale(1.55);

    }

}


.lavLanguage{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:44px;

    min-height:44px;

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

    border-radius:999px;

    color:#765286;

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

    box-shadow:
        0 7px 20px
        rgba(62,51,67,.05);

    font-size:.74rem;

    font-weight:800;

    line-height:1;

    letter-spacing:.06em;

    text-decoration:none;

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

}


.lavLanguage:hover{

    transform:
        translateY(-2px);

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

    color:#ffffff;

    background:#765286;

    box-shadow:
        0 11px 23px
        rgba(118,82,134,.18);

}


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

.lavHeader .button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-height:48px;

    padding:
        0 20px;

    border-radius:999px;

    font-size:.86rem;

    font-weight:750;

    line-height:1;

    letter-spacing:
        -.01em;

    text-decoration:none;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        background-color .28s ease;

}


.lavHeader .button-primary{

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #80608f 0%,
            #684575 100%
        );

    box-shadow:
        0 12px 27px
        rgba(118,82,134,.23),
        inset 0 1px 0
        rgba(255,255,255,.17);

}


.lavHeader .button-primary:hover{

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #755383 0%,
            #5f3d6c 100%
        );

    box-shadow:
        0 18px 36px
        rgba(118,82,134,.30),
        inset 0 1px 0
        rgba(255,255,255,.18);

}


.lavHeaderAppointmentArrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:
        transform .28s ease;

}


.lavHeaderAppointment:hover
.lavHeaderAppointmentArrow{

    transform:
        translateX(3px);

}


.lavHeader .button:focus-visible,
.lavLanguage:focus-visible{

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

    outline-offset:4px;

}


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

.lavMobileButton{

    display:none;

    position:relative;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    width:48px;

    height:48px;

    padding:0;

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

    border-radius:15px;

    color:#4b4250;

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

    box-shadow:
        0 8px 22px
        rgba(58,49,63,.07);

    cursor:pointer;

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

}


.lavMobileButton:hover{

    transform:
        translateY(-2px);

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

    box-shadow:
        0 12px 26px
        rgba(58,49,63,.11);

}


.lavMobileButton span{

    display:block;

    width:21px;

    height:2px;

    border-radius:999px;

    background:
        currentColor;

    transform-origin:center;

    transition:
        transform .28s ease,
        opacity .22s ease,
        width .25s ease;

}


.lavMobileButton span:nth-child(2){

    width:16px;

    margin-left:5px;

}


.lavMobileButton[aria-expanded="true"]{

    color:#ffffff;

    border-color:#765286;

    background:#765286;

}


.lavMobileButton[aria-expanded="true"]
span:nth-child(1){

    transform:
        translateY(7px)
        rotate(45deg);

}


.lavMobileButton[aria-expanded="true"]
span:nth-child(2){

    width:0;

    opacity:0;

}


.lavMobileButton[aria-expanded="true"]
span:nth-child(3){

    transform:
        translateY(-7px)
        rotate(-45deg);

}


.lavMobileButton:focus-visible{

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

    outline-offset:4px;

}


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

.lavMobileNavigation{

    position:absolute;

    top:100%;

    right:0;

    left:0;

    z-index:5;

    max-height:0;

    overflow:hidden;

    visibility:hidden;

    border-top:
        1px solid
        rgba(70,63,74,.08);

    background:
        rgba(252,251,250,.985);

    box-shadow:
        0 30px 55px
        rgba(58,49,63,.13);

    opacity:0;

    transform:
        translateY(-10px);

    transition:
        max-height .5s
        cubic-bezier(.2,.8,.2,1),
        opacity .28s ease,
        transform .38s ease,
        visibility .38s ease;

}


.lavMobileNavigation.is-open{

    max-height:
        calc(100vh - 70px);

    visibility:visible;

    overflow-y:auto;

    opacity:1;

    transform:
        translateY(0);

}


.lavMobileNavigationInner{

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

    margin-inline:auto;

    padding:
        22px 0 30px;

}


.lavMobileNavigationIntro{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

    color:#866893;

}


.lavMobileNavigationIntroLine{

    display:block;

    width:26px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            #9f7faf,
            rgba(159,127,175,.20)
        );

}


.lavMobileNavigationIntro small{

    font-size:.67rem;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.lavMobileNavigation ul{

    margin:0;

    padding:0;

    list-style:none;

}


.lavMobileNavigation li{

    margin:0;

    padding:0;

    border-bottom:
        1px solid
        rgba(70,63,74,.075);

}


.lavMobileNavigation li:first-child{

    border-top:
        1px solid
        rgba(70,63,74,.075);

}


.lavMobileNavigation li a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    min-height:58px;

    color:#4b4250;

    font-size:.98rem;

    font-weight:650;

    text-decoration:none;

    transition:
        color .25s ease,
        padding-left .25s ease,
        background-color .25s ease;

}


.lavMobileNavigation li a svg{

    flex:0 0 auto;

    opacity:.54;

    transition:
        opacity .25s ease,
        transform .25s ease;

}


.lavMobileNavigation li a:hover{

    padding-left:7px;

    color:#765286;

    background:
        linear-gradient(
            90deg,
            rgba(143,106,160,.06),
            transparent 55%
        );

}


.lavMobileNavigation li a:hover svg{

    opacity:1;

    transform:
        translateX(3px);

}


.lavMobileNavigation li a.is-current{

    color:#765286;

}


.lavMobileNavigation li a.is-current span{

    position:relative;

}


.lavMobileNavigation li a.is-current span::after{

    content:"";

    position:absolute;

    right:0;

    bottom:-7px;

    left:0;

    height:2px;

    border-radius:999px;

    background:#8f6aa0;

}


/* ============================================================
   MOBILE NAVIGATION FOOTER
============================================================ */

.lavMobileNavigationFooter{

    display:grid;

    gap:14px;

    padding-top:20px;

}


.lavMobileLanguage{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:50px;

    padding:
        0 16px;

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

    border-radius:14px;

    color:#765286;

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

    font-size:.86rem;

    font-weight:700;

    text-decoration:none;

}


.lavMobileLanguage span:last-child{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:34px;

    min-height:28px;

    border-radius:999px;

    color:#ffffff;

    background:#856194;

    font-size:.67rem;

    letter-spacing:.06em;

}


.lavMobileNavigationFooter
.button-primary{

    width:100%;

    min-height:54px;

}


.lavMobileNavigationFooter p{

    max-width:420px;

    margin:
        2px auto 0;

    color:#817985;

    font-size:.77rem;

    line-height:1.6;

    text-align:center;

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width:1120px){

    .lavHeaderCare{

        display:none;

    }


    .lavNavigationList{

        gap:17px;

    }


    .lavHeader .button{

        padding:
            0 17px;

    }

}


@media (max-width:980px){

    .lavNavigation,
    .lavHeaderActions{

        display:none;

    }


    .lavMobileButton{

        display:flex;

    }


    .lavHeaderInner,
    .lavHeader.is-scrolled
    .lavHeaderInner{

        min-height:80px;

    }

}


@media (max-width:560px){

    .lavHeader .container{

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

    }


    .lavHeaderInner,
    .lavHeader.is-scrolled
    .lavHeaderInner{

        min-height:76px;

    }


    .lavLogo img{

        max-width:150px;

    }


    .lavLogoBotanical{

        left:-15px;

        transform:
            translateY(-50%)
            rotate(-7deg)
            scale(.84);

    }


    .lavMobileNavigationInner{

        width:
            calc(100% - 28px);

        padding-top:18px;

    }

}


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

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

    .lavHeader,
    .lavHeaderInner,
    .lavLogo img,
    .lavLogoBotanical,
    .lavNavigationList a,
    .lavNavigationList a::before,
    .lavNavigationList a::after,
    .lavLanguage,
    .lavHeader .button,
    .lavHeaderAppointmentArrow,
    .lavMobileButton,
    .lavMobileButton span,
    .lavMobileNavigation,
    .lavMobileNavigation li a,
    .lavMobileNavigation li a svg{

        transition:none;

    }


    .lavHeaderCareDot::after{

        animation:none;

    }

}