/* ============================================================
   LAVENDER COUNSELING CENTER
   HOME — PREMIUM INTRODUCTION
============================================================ */

.lavIntroduction{

    position:relative;

    overflow:hidden;

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

    background:
        linear-gradient(
            180deg,
            #fcfbfa 0%,
            #f9f6f8 48%,
            #fbf9f8 100%
        );

    isolation:isolate;

}


/*
|--------------------------------------------------------------------------
| Fine texture
|--------------------------------------------------------------------------
*/

.lavIntroduction::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    background-image:
        linear-gradient(
            rgba(103,78,111,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(103,78,111,.018) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0,0,0,.55) 20%,
            rgba(0,0,0,.55) 80%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0,0,0,.55) 20%,
            rgba(0,0,0,.55) 80%,
            transparent
        );

    pointer-events:none;

}


/*
|--------------------------------------------------------------------------
| Bottom divider
|--------------------------------------------------------------------------
*/

.lavIntroduction::after{

    content:"";

    position:absolute;

    right:0;

    bottom:0;

    left:50%;

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

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(93,70,113,.15),
            transparent
        );

    transform:
        translateX(-50%);

    pointer-events:none;

}


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

.lavIntroductionGlow{

    position:absolute;

    z-index:-1;

    border-radius:50%;

    filter:
        blur(14px);

    pointer-events:none;

}


.lavIntroductionGlowOne{

    top:5%;

    left:-190px;

    width:470px;

    height:470px;

    background:
        radial-gradient(
            circle,
            rgba(187,162,198,.22) 0%,
            rgba(187,162,198,0) 72%
        );

}


.lavIntroductionGlowTwo{

    right:-230px;

    bottom:4%;

    width:560px;

    height:560px;

    background:
        radial-gradient(
            circle,
            rgba(178,194,164,.18) 0%,
            rgba(178,194,164,0) 72%
        );

}


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

.lavIntroduction .container-narrow{

    position:relative;

    z-index:3;

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

    margin-inline:auto;

}


/* ============================================================
   MAIN LAYOUT
============================================================ */

.lavIntroductionInner{

    display:grid;

    grid-template-columns:
        minmax(300px,.78fr)
        minmax(0,1.22fr);

    align-items:start;

    gap:
        clamp(60px,8vw,120px);

}


/* ============================================================
   STICKY HEADER
============================================================ */

.lavIntroductionHeader{

    position:relative;

    min-width:0;

}


.lavIntroductionHeaderInner{

    position:sticky;

    top:132px;

    max-width:490px;

}


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

.lavIntroductionEyebrow{

    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:24px;

    color:#82608f;

}


.lavIntroductionEyebrow > span{

    display:block;

    width:38px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            #82608f,
            rgba(130,96,143,.12)
        );

}


.lavIntroductionEyebrow small{

    font-size:.7rem;

    font-weight:800;

    line-height:1;

    letter-spacing:.15em;

    text-transform:uppercase;

}


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

.lavIntroductionHeader .section-title{

    max-width:510px;

    margin:0;

    color:#403743;

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

    font-size:
        clamp(2.85rem,4.8vw,5rem);

    font-weight:500;

    line-height:.98;

    letter-spacing:
        -.047em;

}


.lavIntroductionHeader .section-title span{

    display:block;

    margin-top:8px;

    color:#7c5a89;

    font-style:italic;

}


/* ============================================================
   HEADER NOTE
============================================================ */

.lavIntroductionHeaderNote{

    max-width:400px;

    margin:
        31px 0 0;

    padding-left:20px;

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

    color:#756c78;

    font-size:.93rem;

    line-height:1.75;

}


/* ============================================================
   SIGNATURE
============================================================ */

.lavIntroductionHeaderSignature{

    display:flex;

    align-items:center;

    gap:11px;

    margin-top:34px;

    color:#9a889f;

}


.lavIntroductionHeaderSignature > span{

    position:relative;

    display:block;

    width:34px;

    height:34px;

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

    border-radius:50%;

}


.lavIntroductionHeaderSignature > span::before,
.lavIntroductionHeaderSignature > span::after{

    content:"";

    position:absolute;

    border-radius:
        100% 0 100% 0;

    background:#8ea07d;

}


.lavIntroductionHeaderSignature > span::before{

    top:9px;

    left:8px;

    width:11px;

    height:4px;

    transform:
        rotate(27deg);

}


.lavIntroductionHeaderSignature > span::after{

    right:7px;

    bottom:9px;

    width:10px;

    height:4px;

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

}


.lavIntroductionHeaderSignature small{

    font-size:.64rem;

    font-weight:750;

    letter-spacing:.09em;

    text-transform:uppercase;

}


/* ============================================================
   EDITORIAL PANEL
============================================================ */

.lavIntroductionEditorial{

    position:relative;

    min-width:0;

    padding:
        clamp(34px,4.5vw,62px);

    border:
        1px solid
        rgba(104,82,111,.10);

    border-radius:
        clamp(28px,4vw,44px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(251,248,250,.84)
        );

    box-shadow:
        0 34px 90px
        rgba(69,51,76,.085),
        inset 0 1px 0
        rgba(255,255,255,.90);

    backdrop-filter:
        blur(12px);

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

}


.lavIntroductionEditorial::before{

    content:"";

    position:absolute;

    top:22px;

    right:22px;

    width:90px;

    height:90px;

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

    border-radius:50%;

    box-shadow:
        0 0 0 18px
        rgba(118,82,134,.018),
        0 0 0 38px
        rgba(118,82,134,.012);

    pointer-events:none;

}


.lavIntroductionEditorialAccent{

    position:absolute;

    top:58px;

    bottom:58px;

    left:0;

    width:3px;

    border-radius:
        0 999px 999px 0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(137,101,151,.65) 18%,
            rgba(132,153,115,.42) 78%,
            transparent
        );

}


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

.lavIntroductionContent{

    display:grid;

    gap:0;

    min-width:0;

}


/* ============================================================
   PARAGRAPH BLOCK
============================================================ */

.lavIntroductionOpening,
.lavIntroductionParagraph,
.lavIntroductionClosing{

    position:relative;

    display:block;

    padding:
        clamp(31px,4vw,46px)
        0;

}


.lavIntroductionOpening{

    padding-top:5px;

}


.lavIntroductionClosing{

    padding-bottom:5px;

}


.lavIntroductionParagraph::before,
.lavIntroductionClosing::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    left:0;

    height:1px;

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

}


/* ============================================================
   NUMBERS
============================================================ */




/* ============================================================
   TYPOGRAPHY
============================================================ */

.lavIntroductionContent p{

    max-width:680px;

    margin:0;

    color:#716875;

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

    line-height:1.92;

}


.lavIntroductionOpening p{

    color:#514756;

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

    font-size:
        clamp(1.65rem,2.5vw,2.25rem);

    font-weight:500;

    line-height:1.3;

    letter-spacing:
        -.02em;

}


.lavIntroductionClosing p{

    color:#514756;

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

    font-size:
        clamp(1.4rem,2vw,1.85rem);

    font-weight:500;

    line-height:1.42;

    letter-spacing:
        -.018em;

}


/* ============================================================
   LINK
============================================================ */

.lavIntroductionLink{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    margin-top:27px;

    padding-bottom:7px;

    color:#765286;

    font-size:.84rem;

    font-weight:800;

    text-decoration:none;

}


.lavIntroductionLink::after{

    content:"";

    position:absolute;

    right:0;

    bottom:0;

    left:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            #856391,
            rgba(133,99,145,.18)
        );

    transform:
        scaleX(.38);

    transform-origin:left;

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

}


.lavIntroductionLink svg{

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

}


.lavIntroductionLink:hover::after{

    transform:
        scaleX(1);

}


.lavIntroductionLink:hover svg{

    transform:
        translateX(5px);

}


.lavIntroductionLink:focus-visible{

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

    outline-offset:5px;

    border-radius:5px;

}


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

.lavIntroductionBotanical{

    position:absolute;

    right:
        max(2vw,24px);

    bottom:80px;

    z-index:1;

    width:120px;

    height:260px;

    opacity:.11;

    transform:
        rotate(8deg);

    transform-origin:
        bottom center;

    pointer-events:none;

}


.lavIntroductionBotanicalStem{

    position:absolute;

    bottom:7px;

    left:59px;

    width:2px;

    height:218px;

    border-radius:999px;

    background:
        linear-gradient(
            to top,
            #687c5a,
            #9eaf90
        );

    transform:
        rotate(4deg);

}


.lavIntroductionBotanicalLeaf{

    position:absolute;

    width:46px;

    height:14px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #8c9c7d,
            #647957
        );

}


.lavIntroductionBotanicalLeafOne{

    bottom:49px;

    left:18px;

    transform:
        rotate(22deg);

}


.lavIntroductionBotanicalLeafTwo{

    bottom:91px;

    left:58px;

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

}


.lavIntroductionBotanicalLeafThree{

    bottom:132px;

    left:22px;

    transform:
        rotate(23deg)
        scale(.84);

}


.lavIntroductionBotanicalLeafFour{

    bottom:164px;

    left:57px;

    transform:
        scaleX(-1)
        rotate(21deg)
        scale(.72);

}


.lavIntroductionBotanicalBud{

    position:absolute;

    width:21px;

    height:36px;

    border-radius:
        65% 65% 46% 46%;

    background:
        linear-gradient(
            145deg,
            #bca3c6,
            #70507d
        );

    box-shadow:
        0 5px 13px
        rgba(118,82,134,.14);

}


.lavIntroductionBotanicalBudOne{

    top:3px;

    left:50px;

}


.lavIntroductionBotanicalBudTwo{

    top:28px;

    left:32px;

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

}


.lavIntroductionBotanicalBudThree{

    top:35px;

    left:68px;

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

}


.lavIntroductionBotanicalBudFour{

    top:62px;

    left:40px;

    transform:
        rotate(-14deg)
        scale(.74);

}


.lavIntroductionBotanicalBudFive{

    top:70px;

    left:68px;

    transform:
        rotate(15deg)
        scale(.68);

}


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

.lavIntroductionHeader,
.lavIntroductionOpening,
.lavIntroductionParagraph,
.lavIntroductionClosing{

    opacity:1;

    transform:none;

    filter:none;

}


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

.js .lavIntroductionHeader.reveal-soft,
.js .lavIntroductionOpening.reveal-soft,
.js .lavIntroductionParagraph.reveal-soft,
.js .lavIntroductionClosing.reveal-soft{

    opacity:0;

    transform:
        translateY(26px);

    filter:
        blur(8px);

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

}


.js .lavIntroductionHeader.reveal-soft.is-visible,
.js .lavIntroductionOpening.reveal-soft.is-visible,
.js .lavIntroductionParagraph.reveal-soft.is-visible,
.js .lavIntroductionClosing.reveal-soft.is-visible{

    opacity:1;

    transform:
        translateY(0);

    filter:
        blur(0);

}


.js .lavIntroductionContent .delay-1{

    transition-delay:100ms;

}


.js .lavIntroductionContent .delay-2{

    transition-delay:170ms;

}


.js .lavIntroductionContent .delay-3{

    transition-delay:240ms;

}


.js .lavIntroductionContent .delay-4{

    transition-delay:310ms;

}


.js .lavIntroductionContent .delay-5{

    transition-delay:380ms;

}


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

@media (max-width:1040px){

    .lavIntroductionInner{

        grid-template-columns:
            minmax(270px,.68fr)
            minmax(0,1.32fr);

        gap:55px;

    }


    .lavIntroductionHeader .section-title{

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

    }

}


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

@media (max-width:860px){

    .lavIntroduction{

        padding:
            100px 0;

    }


    .lavIntroductionInner{

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

        gap:48px;

    }


    .lavIntroductionHeaderInner{

        position:relative;

        top:auto;

        max-width:690px;

    }


    .lavIntroductionHeader .section-title{

        max-width:680px;

    }


    .lavIntroductionHeaderNote{

        max-width:570px;

    }


    .lavIntroductionEditorial{

        max-width:760px;

    }


    .lavIntroductionBotanical{

        right:-24px;

        bottom:40px;

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

    }

}


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

@media (max-width:600px){

    .lavIntroduction{

        padding:
            82px 0;

    }


    .lavIntroduction .container-narrow{

        width:
            calc(100% - 28px);

    }


    .lavIntroductionInner{

        gap:36px;

    }


    .lavIntroductionHeader .section-title{

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

    }


    .lavIntroductionHeaderNote{

        margin-top:25px;

        padding-left:16px;

        font-size:.88rem;

    }


    .lavIntroductionHeaderSignature{

        margin-top:26px;

    }


    .lavIntroductionEditorial{

        padding:
            30px 23px;

        border-radius:28px;

    }


    .lavIntroductionEditorial::before{

        top:16px;

        right:16px;

        transform:
            scale(.7);

    }


    .lavIntroductionEditorialAccent{

        top:38px;

        bottom:38px;

    }


    .lavIntroductionOpening,
    .lavIntroductionParagraph,
    .lavIntroductionClosing{

        display:block;

        padding:
            29px 0;

    }


    .lavIntroductionOpening{

        padding-top:4px;

    }


    .lavIntroductionClosing{

        padding-bottom:4px;

    }


    .lavIntroductionParagraph::before,
    .lavIntroductionClosing::before{

        left:46px;

    }


    


    .lavIntroductionContent p{

        font-size:.98rem;

        line-height:1.82;

    }


    .lavIntroductionOpening p{

        font-size:
            clamp(1.5rem,7vw,1.9rem);

        line-height:1.34;

    }


    .lavIntroductionClosing p{

        font-size:
            clamp(1.3rem,6vw,1.65rem);

    }


    .lavIntroductionBotanical{

        display:none;

    }

}


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

@media (max-width:420px){

    .lavIntroductionEditorial{

        padding:
            27px 19px;

    }


    .lavIntroductionOpening,
    .lavIntroductionParagraph,
    .lavIntroductionClosing{

        grid-template-columns:
            1fr;

        gap:12px;

    }


    

    .lavIntroductionParagraph::before,
    .lavIntroductionClosing::before{

        left:0;

    }

}


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

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

    .js .lavIntroductionHeader.reveal-soft,
    .js .lavIntroductionOpening.reveal-soft,
    .js .lavIntroductionParagraph.reveal-soft,
    .js .lavIntroductionClosing.reveal-soft{

        opacity:1;

        transform:none;

        filter:none;

        transition:none;

    }


    .lavIntroductionLink::after,
    .lavIntroductionLink svg{

        transition:none;

    }

}