/* ==========================================================
   LAVENDER COUNSELING CENTER
   PRIVACY HERO
========================================================== */

.lavPrivacyHero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    align-items: center;

    min-height: 360px;
    max-height: 50vh;

    padding:
        clamp(5.8rem, 8vw, 7rem)
        0
        clamp(3.2rem, 6vw, 4.5rem);

    background:
        linear-gradient(
            135deg,
            #fcfbfd 0%,
            #f7f2fa 52%,
            #efe7f5 100%
        );

    border-bottom:
        1px solid
        rgba(118, 88, 136, 0.10);
}


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

.lavPrivacyHero .container {
    position: relative;
    z-index: 5;

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

    margin-inline: auto;
}


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

.lavPrivacyHeroInner {
    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    align-items: center;

    gap:
        clamp(
            2.5rem,
            6vw,
            5rem
        );
}


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

.lavPrivacyHeroContent {
    position: relative;
    z-index: 3;

    max-width: 720px;
}


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

.lavPrivacyHeroEyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;

    margin-bottom: 1rem;
}

.lavPrivacyHeroEyebrow span {
    width: 2.3rem;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #7d5d93,
            #b79ac9
        );
}

.lavPrivacyHeroEyebrow p {
    margin: 0;

    color: #7a5d90;

    font-size: .77rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: .16em;
    text-transform: uppercase;
}


/* ==========================================================
   TITLE
========================================================== */

.lavPrivacyHero h1 {
    margin: 0;

    color: #32273a;

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

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.6rem
        );

    font-weight: 500;
    line-height: .96;
    letter-spacing: -.045em;
}

.lavPrivacyHero h1 span {
    color: #87659d;
}


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

.lavPrivacyHeroLead {
    max-width: 650px;

    margin:
        1.2rem
        0
        0;

    color: #675f6e;

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.08rem
        );

    line-height: 1.75;
}


/* ==========================================================
   META
========================================================== */

.lavPrivacyHeroMeta {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;

    flex-wrap: wrap;

    margin-top: 2rem;
}

.lavPrivacyHeroMetaItem {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.lavPrivacyHeroMetaItem strong {
    color: #4b3b56;

    font-size: .74rem;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.lavPrivacyHeroMetaItem span {
    color: #7a707f;

    font-size: .95rem;
}

.lavPrivacyHeroDivider {
    width: 1px;
    height: 34px;

    background:
        rgba(120, 88, 139, .18);
}


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

.lavPrivacyHeroCard {
    position: relative;

    padding:
        clamp(
            1.6rem,
            3vw,
            2.2rem
        );

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

    border:
        1px solid
        rgba(118,88,136,.14);

    border-radius: 30px;

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

    box-shadow:
        0 26px 60px
        rgba(70,48,83,.10);
}

.lavPrivacyHeroCard::before {
    content: "";

    position: absolute;

    top: 1rem;
    right: 1rem;

    width: 54px;
    height: 54px;

    border:
        1px solid
        rgba(137,101,158,.15);

    border-radius:
        60% 40% 63% 37% /
        45% 58% 42% 55%;

    transform: rotate(18deg);
}

.lavPrivacyHeroCardIcon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    margin-bottom: 1rem;

    color: #7d5f94;

    background:
        rgba(139,103,161,.10);

    border:
        1px solid
        rgba(139,103,161,.14);

    border-radius: 16px;
}

.lavPrivacyHeroCardIcon svg {
    width: 24px;
    height: 24px;
}

.lavPrivacyHeroCard h2 {
    margin: 0;

    color: #372d40;

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

    font-size:
        clamp(
            1.8rem,
            2.4vw,
            2.2rem
        );

    font-weight: 600;
    line-height: 1.08;
}

.lavPrivacyHeroCard p {
    margin:
        .9rem
        0
        0;

    color: #736979;

    font-size: .93rem;
    line-height: 1.7;
}


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

.lavPrivacyHeroGlow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);

    z-index: 0;
}

.lavPrivacyHeroGlowOne {
    top: -140px;
    left: -90px;

    width: 380px;
    height: 380px;

    background:
        radial-gradient(
            circle,
            rgba(186,156,205,.22),
            rgba(186,156,205,0) 70%
        );
}

.lavPrivacyHeroGlowTwo {
    right: -120px;
    bottom: -180px;

    width: 460px;
    height: 460px;

    background:
        radial-gradient(
            circle,
            rgba(150,116,172,.18),
            rgba(150,116,172,0) 72%
        );
}


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

.lavPrivacyHeroTexture {
    position: absolute;
    inset: 0;

    opacity: .28;

    pointer-events: none;

    background-image:
        radial-gradient(
            rgba(86,61,101,.12) .7px,
            transparent .7px
        );

    background-size: 18px 18px;

    mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.7),
            transparent 90%
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.7),
            transparent 90%
        );
}


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

.lavPrivacyHero .reveal-soft {
    opacity: 0;

    transform:
        translateY(20px);

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

.lavPrivacyHero.is-visible
.reveal-soft {
    opacity: 1;
    transform: none;
}

.lavPrivacyHero .delay-1 {
    transition-delay: .08s;
}

.lavPrivacyHero .delay-2 {
    transition-delay: .16s;
}

.lavPrivacyHero .delay-3 {
    transition-delay: .24s;
}

.lavPrivacyHero .delay-4 {
    transition-delay: .32s;
}


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

@media (max-width:900px) {

    .lavPrivacyHero {
        max-height: none;
        min-height: auto;

        padding:
            7rem
            0
            4rem;
    }

    .lavPrivacyHeroInner {
        grid-template-columns: 1fr;
    }

    .lavPrivacyHeroCard {
        max-width: 460px;
    }

}


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

@media (max-width:640px) {

    .lavPrivacyHero {

        padding:
            6.5rem
            0
            3rem;

    }

    .lavPrivacyHero .container {

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

    }

    .lavPrivacyHero h1 {

        font-size:
            clamp(
                2.4rem,
                12vw,
                3.5rem
            );

    }

    .lavPrivacyHeroMeta {

        flex-direction: column;
        align-items: flex-start;

        gap: .9rem;

    }

    .lavPrivacyHeroDivider {

        display: none;

    }

    .lavPrivacyHeroCard {

        padding: 1.4rem;

        border-radius: 22px;

    }

}


/* ==========================================================
   SHORT SCREENS
========================================================== */

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

    .lavPrivacyHero{

        min-height:320px;

        padding:
            5.2rem
            0
            2.6rem;

    }

}


/* ==========================================================
   FOCUS
========================================================== */

.lavPrivacyHero a:focus-visible,
.lavPrivacyHero button:focus-visible{

    outline:
        3px solid
        rgba(
            110,
            82,
            130,
            .35
        );

    outline-offset:4px;

}


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

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

    .lavPrivacyHero *,
    .lavPrivacyHero *::before,
    .lavPrivacyHero *::after{

        animation-duration:.01ms!important;
        animation-iteration-count:1!important;

        transition-duration:.01ms!important;

    }

    .lavPrivacyHero .reveal-soft{

        opacity:1;
        transform:none;

    }

}