/* ==========================================================
   LAVENDER COUNSELING CENTER
   ACCESSIBILITY HERO
========================================================== */

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

    display:flex;
    align-items:center;

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

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

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

    border-bottom:
        1px solid
        rgba(119,89,137,.10);
}


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

.lavAccessibilityHero .container{

    position:relative;
    z-index:5;

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

    margin-inline:auto;

}


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

.lavAccessibilityHeroInner{

    display:grid;

    grid-template-columns:
        minmax(0,1.45fr)
        minmax(290px,.55fr);

    align-items:center;

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

}


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

.lavAccessibilityHeroContent{

    max-width:720px;

}


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

.lavAccessibilityHeroEyebrow{

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

    margin-bottom:1rem;

}

.lavAccessibilityHeroEyebrow span{

    width:2.25rem;
    height:1px;

    background:
        linear-gradient(
            90deg,
            #7c5d92,
            #b69ac8
        );

}

.lavAccessibilityHeroEyebrow p{

    margin:0;

    color:#785b8c;

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

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

}


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

.lavAccessibilityHero h1{

    margin:0;

    color:#32273a;

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

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

    font-weight:500;
    line-height:.96;

    letter-spacing:-.045em;

}

.lavAccessibilityHero h1 span{

    color:#87659d;

}


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

.lavAccessibilityHeroLead{

    max-width:650px;

    margin:
        1.25rem
        0
        0;

    color:#675f6f;

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

    line-height:1.75;

}


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

.lavAccessibilityHeroMeta{

    display:inline-flex;
    align-items:center;
    gap:1.25rem;

    flex-wrap:wrap;

    margin-top:2rem;

}

.lavAccessibilityHeroMetaItem{

    display:flex;
    flex-direction:column;
    gap:.25rem;

}

.lavAccessibilityHeroMetaItem strong{

    color:#493956;

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

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

}

.lavAccessibilityHeroMetaItem span{

    color:#7c727f;

    font-size:.94rem;

}

.lavAccessibilityHeroDivider{

    width:1px;
    height:34px;

    background:
        rgba(
            122,
            91,
            141,
            .18
        );

}


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

.lavAccessibilityHeroCard{

    position:relative;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.80),
            rgba(255,255,255,.56)
        );

    border:
        1px solid
        rgba(120,90,140,.14);

    border-radius:30px;

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

    box-shadow:
        0 28px 60px
        rgba(73,50,88,.10);

}

.lavAccessibilityHeroCard::before{

    content:"";

    position:absolute;

    top:1rem;
    right:1rem;

    width:56px;
    height:56px;

    border:
        1px solid
        rgba(136,102,157,.15);

    border-radius:
        61% 39% 63% 37% /
        45% 58% 42% 55%;

    transform:rotate(16deg);

}

.lavAccessibilityHeroCardIcon{

    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    margin-bottom:1rem;

    color:#7b5d91;

    background:
        rgba(
            138,
            103,
            160,
            .10
        );

    border:
        1px solid
        rgba(
            138,
            103,
            160,
            .15
        );

    border-radius:16px;

}

.lavAccessibilityHeroCardIcon svg{

    width:25px;
    height:25px;

}

.lavAccessibilityHeroCard h2{

    margin:0;

    color:#382d41;

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

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

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

}

.lavAccessibilityHeroCard p{

    margin:
        .9rem
        0
        0;

    color:#736979;

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

}


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

.lavAccessibilityHeroGlow{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(10px);

    z-index:0;

}

.lavAccessibilityHeroGlowOne{

    top:-150px;
    left:-90px;

    width:390px;
    height:390px;

    background:
        radial-gradient(
            circle,
            rgba(184,154,203,.22),
            rgba(184,154,203,0)
            70%
        );

}

.lavAccessibilityHeroGlowTwo{

    right:-130px;
    bottom:-180px;

    width:470px;
    height:470px;

    background:
        radial-gradient(
            circle,
            rgba(152,117,174,.18),
            rgba(152,117,174,0)
            72%
        );

}


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

.lavAccessibilityHeroTexture{

    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
========================================================== */

.lavAccessibilityHero .reveal-soft{

    opacity:0;

    transform:
        translateY(20px);

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

}

.lavAccessibilityHero.is-visible
.reveal-soft{

    opacity:1;
    transform:none;

}

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

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

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

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


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

@media (max-width:900px){

    .lavAccessibilityHero{

        max-height:none;
        min-height:auto;

        padding:
            7rem
            0
            4rem;

    }

    .lavAccessibilityHeroInner{

        grid-template-columns:1fr;

    }

    .lavAccessibilityHeroCard{

        max-width:460px;

    }

}


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

@media (max-width:640px){

    .lavAccessibilityHero{

        padding:
            6.5rem
            0
            3rem;

    }

    .lavAccessibilityHero .container{

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

    }

    .lavAccessibilityHero h1{

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

    }

    .lavAccessibilityHeroMeta{

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

        gap:.9rem;

    }

    .lavAccessibilityHeroDivider{

        display:none;

    }

    .lavAccessibilityHeroCard{

        padding:1.4rem;

        border-radius:22px;

    }

}


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

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

    .lavAccessibilityHero{

        min-height:320px;

        padding:
            5.2rem
            0
            2.6rem;

    }

}


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

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

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

    outline-offset:4px;

}


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

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

    .lavAccessibilityHero *,
    .lavAccessibilityHero *::before,
    .lavAccessibilityHero *::after{

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

        transition-duration:.01ms!important;

    }

    .lavAccessibilityHero .reveal-soft{

        opacity:1;
        transform:none;

    }

}