/* ============================================================
   LAVENDER COUNSELING CENTER
   THERAPISTS — COMPACT HERO
============================================================ */


/* ============================================================
   HERO BASE
============================================================ */

.lavTeamHero {

    position: relative;

    isolation: isolate;

    display: flex;

    align-items: center;

    min-height:
        clamp(430px, 48vh, 560px);

    overflow: hidden;

    padding:
        clamp(118px, 10vw, 145px)
        0
        clamp(62px, 6vw, 82px);

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(159, 122, 176, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 78%,
            rgba(215, 177, 197, 0.19),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #fcfafc 0%,
            #f8f3f8 48%,
            #fbf8f6 100%
        );

}


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

.lavTeamHeroGlow {

    position: absolute;

    z-index: -5;

    border-radius: 50%;

    pointer-events: none;

    will-change: transform;

}


.lavTeamHeroGlowOne {

    top: -260px;

    left: -230px;

    width:
        clamp(470px, 46vw, 700px);

    aspect-ratio: 1;

    background:
        radial-gradient(
            circle,
            rgba(137, 97, 155, 0.24) 0%,
            rgba(137, 97, 155, 0.08) 44%,
            transparent 73%
        );

    filter:
        blur(8px);

    animation:
        lavTeamHeroGlowOneMove
        12s
        ease-in-out
        infinite
        alternate;

}


.lavTeamHeroGlowTwo {

    right: -270px;

    bottom: -350px;

    width:
        clamp(530px, 54vw, 800px);

    aspect-ratio: 1;

    background:
        radial-gradient(
            circle,
            rgba(213, 164, 190, 0.25) 0%,
            rgba(213, 164, 190, 0.08) 45%,
            transparent 74%
        );

    filter:
        blur(10px);

    animation:
        lavTeamHeroGlowTwoMove
        15s
        ease-in-out
        infinite
        alternate;

}


@keyframes lavTeamHeroGlowOneMove {

    from {

        transform:
            translate3d(0, 0, 0)
            scale(1);

    }

    to {

        transform:
            translate3d(42px, 26px, 0)
            scale(1.08);

    }

}


@keyframes lavTeamHeroGlowTwoMove {

    from {

        transform:
            translate3d(0, 0, 0)
            scale(1);

    }

    to {

        transform:
            translate3d(-38px, -24px, 0)
            scale(1.07);

    }

}


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

.lavTeamHeroTexture {

    position: absolute;

    z-index: -4;

    inset: 0;

    overflow: hidden;

    opacity: 0.36;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(101, 72, 112, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(101, 72, 112, 0.026) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.85),
            rgba(0, 0, 0, 0.32) 72%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.85),
            rgba(0, 0, 0, 0.32) 72%,
            transparent
        );

}


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

.lavTeamHeroTexture::before {

    content: "";

    position: absolute;

    right:
        clamp(20px, 7vw, 110px);

    bottom: -48px;

    width:
        clamp(230px, 25vw, 350px);

    height:
        clamp(300px, 33vw, 440px);

    opacity: 0.48;

    transform-origin:
        50% 100%;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 10%,
            rgba(131, 91, 149, 0.42) 0 4px,
            transparent 5px
        ),
        radial-gradient(
            ellipse at 42% 17%,
            rgba(153, 108, 167, 0.39) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            ellipse at 59% 21%,
            rgba(184, 137, 176, 0.38) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            ellipse at 39% 29%,
            rgba(141, 98, 158, 0.35) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            ellipse at 62% 33%,
            rgba(196, 149, 185, 0.36) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            ellipse at 45% 41%,
            rgba(150, 105, 165, 0.34) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            ellipse at 58% 48%,
            rgba(181, 133, 174, 0.33) 0 5px,
            transparent 6px
        ),
        linear-gradient(
            83deg,
            transparent 49%,
            rgba(99, 119, 87, 0.46) 49.2%,
            rgba(99, 119, 87, 0.46) 50.1%,
            transparent 50.3%
        );

    animation:
        lavTeamHeroLavenderBloom
        1.7s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.3s
        both,
        lavTeamHeroLavenderSway
        7s
        ease-in-out
        2s
        infinite
        alternate;

}


.lavTeamHeroTexture::after {

    content: "";

    position: absolute;

    top: 15%;

    left: 5%;

    width: 180px;

    height: 180px;

    border:
        1px solid
        rgba(125, 89, 140, 0.08);

    border-radius:
        45% 55% 44% 56% /
        52% 45% 55% 48%;

    pointer-events: none;

    transform:
        rotate(-14deg);

    animation:
        lavTeamHeroOrganicShape
        20s
        linear
        infinite;

}


@keyframes lavTeamHeroLavenderBloom {

    0% {

        opacity: 0;

        transform:
            translateY(48px)
            scaleY(0.4)
            scaleX(0.76)
            rotate(5deg);

        filter:
            blur(7px);

    }

    65% {

        opacity: 0.6;

    }

    100% {

        opacity: 0.48;

        transform:
            translateY(0)
            scaleY(1)
            scaleX(1)
            rotate(0);

        filter:
            blur(0);

    }

}


@keyframes lavTeamHeroLavenderSway {

    from {

        transform:
            rotate(-1.4deg)
            translateX(-3px);

    }

    to {

        transform:
            rotate(1.9deg)
            translateX(5px);

    }

}


@keyframes lavTeamHeroOrganicShape {

    from {

        transform:
            rotate(-14deg);

    }

    to {

        transform:
            rotate(346deg);

    }

}


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

.lavTeamHero .container {

    position: relative;

    z-index: 3;

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

    margin-inline: auto;

}


/* ============================================================
   HERO INNER
============================================================ */

.lavTeamHeroInner {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 250px;

}


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

.lavTeamHeroContent {

    position: relative;

    z-index: 2;

    width: min(100%, 780px);

    padding-left:
        clamp(0px, 2vw, 24px);

}


/* ============================================================
   DECORATIVE VERTICAL LINE
============================================================ */

.lavTeamHeroContent::before {

    content: "";

    position: absolute;

    top: 7px;

    bottom: 8px;

    left:
        clamp(-24px, -2vw, -10px);

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(135, 97, 151, 0.32) 22%,
            rgba(135, 97, 151, 0.16) 76%,
            transparent
        );

    transform:
        scaleY(0);

    transform-origin:
        top;

    animation:
        lavTeamHeroContentLine
        1.1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.65s
        forwards;

}


@keyframes lavTeamHeroContentLine {

    to {

        transform:
            scaleY(1);

    }

}


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

.lavTeamHeroEyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom:
        clamp(17px, 2vw, 22px);

    color: #80638b;

}


.lavTeamHeroEyebrow > span {

    position: relative;

    flex: 0 0 auto;

    width: 42px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #9472a2,
            rgba(211, 180, 197, 0.55)
        );

}


.lavTeamHeroEyebrow > span::before {

    content: "";

    position: absolute;

    top: 50%;

    right: 0;

    width: 7px;

    height: 7px;

    border:
        1px solid
        rgba(145, 106, 160, 0.55);

    border-radius:
        65% 35% 62% 38%;

    background: #faf6fa;

    transform:
        translateY(-50%)
        rotate(38deg)
        scale(0);

    animation:
        lavTeamHeroEyebrowBloom
        0.75s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.85s
        forwards;

}


.lavTeamHeroEyebrow p {

    margin: 0;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 0.72rem;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.17em;

    text-transform: uppercase;

}


@keyframes lavTeamHeroEyebrowBloom {

    0% {

        opacity: 0;

        transform:
            translateY(-50%)
            rotate(10deg)
            scale(0);

    }

    70% {

        opacity: 1;

        transform:
            translateY(-50%)
            rotate(46deg)
            scale(1.18);

    }

    100% {

        opacity: 1;

        transform:
            translateY(-50%)
            rotate(38deg)
            scale(1);

    }

}


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

.lavTeamHero h1 {

    max-width: 780px;

    margin: 0;

    color: #352a3b;

    font-family:
        "Newsreader",
        Georgia,
        serif;

    font-size:
        clamp(3.15rem, 5.2vw, 5.45rem);

    font-weight: 500;

    line-height: 0.96;

    letter-spacing: -0.048em;

    text-wrap: balance;

}


.lavTeamHero h1 span {

    display: block;

    margin-top: 3px;

    color: #8c6899;

    font-style: italic;

}


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

.lavTeamHeroLead {

    max-width: 675px;

    margin:
        clamp(22px, 2.5vw, 29px)
        0
        0;

    color: #68606c;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size:
        clamp(0.98rem, 1.12vw, 1.08rem);

    font-weight: 400;

    line-height: 1.78;

    text-wrap: pretty;

}


/* ============================================================
   SMALL ACCENT UNDER CONTENT
============================================================ */

.lavTeamHeroContent::after {

    content: "";

    display: block;

    width: 72px;

    height: 2px;

    margin-top:
        clamp(26px, 3vw, 34px);

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(132, 96, 148, 0.7),
            rgba(195, 155, 185, 0.34),
            transparent
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    animation:
        lavTeamHeroAccentReveal
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.9s
        forwards;

}


@keyframes lavTeamHeroAccentReveal {

    to {

        transform:
            scaleX(1);

    }

}


/* ============================================================
   REVEAL STATES
============================================================ */

html.js
.lavTeamHero
.reveal-soft {

    opacity: 0;

    transform:
        translateY(24px);

    filter:
        blur(5px);

    transition:
        opacity 850ms
        cubic-bezier(0.22, 1, 0.36, 1),
        transform 850ms
        cubic-bezier(0.22, 1, 0.36, 1),
        filter 850ms
        cubic-bezier(0.22, 1, 0.36, 1);

}


html.js
.lavTeamHero.is-visible
.reveal-soft,
html.js
.lavTeamHero
.reveal-soft.is-visible {

    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);

}


.lavTeamHero .delay-1 {

    transition-delay: 100ms;

}


.lavTeamHero .delay-2 {

    transition-delay: 210ms;

}


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

@media (min-width: 1450px) {

    .lavTeamHero {

        min-height:
            clamp(460px, 48vh, 590px);

    }


    .lavTeamHero .container {

        width:
            min(
                calc(100% - 48px),
                1260px
            );

    }


    .lavTeamHeroContent {

        width:
            min(100%, 820px);

    }

}


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

@media (max-width: 860px) {

    .lavTeamHero {

        min-height: auto;

        padding:
            110px
            0
            62px;

    }


    .lavTeamHero .container {

        width:
            min(
                calc(100% - 34px),
                1200px
            );

    }


    .lavTeamHeroInner {

        min-height: auto;

    }


    .lavTeamHeroContent {

        width:
            min(100%, 710px);

        padding-left: 12px;

    }


    .lavTeamHeroContent::before {

        left: -10px;

    }


    .lavTeamHero h1 {

        font-size:
            clamp(2.95rem, 8vw, 4.6rem);

    }


    .lavTeamHeroLead {

        max-width: 640px;

    }


    .lavTeamHeroTexture::before {

        right: -55px;

        bottom: -85px;

        width: 280px;

        height: 360px;

        opacity: 0.3;

    }

}


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

@media (max-width: 640px) {

    .lavTeamHero {

        display: block;

        padding:
            98px
            0
            49px;

    }


    .lavTeamHero .container {

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

    }


    .lavTeamHeroContent {

        padding-left: 0;

    }


    .lavTeamHeroContent::before {

        display: none;

    }


    .lavTeamHeroEyebrow {

        gap: 10px;

        margin-bottom: 15px;

    }


    .lavTeamHeroEyebrow > span {

        width: 33px;

    }


    .lavTeamHeroEyebrow p {

        font-size: 0.66rem;

        letter-spacing: 0.14em;

    }


    .lavTeamHero h1 {

        max-width: 560px;

        font-size:
            clamp(2.65rem, 12.6vw, 3.75rem);

        line-height: 0.99;

        letter-spacing: -0.043em;

    }


    .lavTeamHero h1 span {

        margin-top: 5px;

    }


    .lavTeamHeroLead {

        margin-top: 20px;

        font-size: 0.94rem;

        line-height: 1.68;

    }


    .lavTeamHeroContent::after {

        width: 58px;

        margin-top: 27px;

    }


    .lavTeamHeroTexture::before {

        right: -112px;

        bottom: -100px;

        width: 245px;

        height: 315px;

        opacity: 0.22;

    }


    .lavTeamHeroTexture::after {

        top: 6%;

        left: -78px;

        width: 145px;

        height: 145px;

    }

}


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

@media (max-width: 420px) {

    .lavTeamHero {

        padding:
            92px
            0
            44px;

    }


    .lavTeamHero h1 {

        font-size:
            clamp(2.45rem, 13vw, 3.25rem);

    }


    .lavTeamHeroLead {

        font-size: 0.91rem;

    }

}


/* ============================================================
   SHORT VIEWPORTS
============================================================ */

@media (min-width: 861px) and (max-height: 760px) {

    .lavTeamHero {

        min-height: auto;

        padding:
            105px
            0
            48px;

    }


    .lavTeamHero h1 {

        font-size:
            clamp(2.9rem, 4.5vw, 4.6rem);

    }


    .lavTeamHeroLead {

        margin-top: 20px;

        line-height: 1.66;

    }

}


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

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

    .lavTeamHero *,
    .lavTeamHero *::before,
    .lavTeamHero *::after {

        animation-duration:
            0.01ms !important;

        animation-delay:
            0ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }


    html.js
    .lavTeamHero
    .reveal-soft {

        opacity: 1;

        transform: none;

        filter: none;

    }


    .lavTeamHeroGlow,
    .lavTeamHeroTexture::before,
    .lavTeamHeroTexture::after {

        transform: none;

    }

}


/* ============================================================
   PRINT
============================================================ */

@media print {

    .lavTeamHero {

        min-height: auto;

        padding:
            32px
            0;

        background:
            #ffffff;

    }


    .lavTeamHeroGlow,
    .lavTeamHeroTexture {

        display: none;

    }

}