/* ============================================================
   HOME — HOW THERAPY WORKS
============================================================ */

.lavJourney {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfafc 52%,
            #f8f3f9 100%
        );
}


/* ============================================================
   AMBIENT BACKGROUND
============================================================ */

.lavJourney::before {
    content: "";

    position: absolute;
    z-index: -2;

    top: -220px;
    left: -180px;

    width: 540px;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(211, 194, 225, 0.28) 0%,
            rgba(211, 194, 225, 0.08) 42%,
            rgba(211, 194, 225, 0) 72%
        );

    filter: blur(20px);

    pointer-events: none;
}

.lavJourney::after {
    content: "";

    position: absolute;
    z-index: -2;

    right: -190px;
    bottom: -260px;

    width: 620px;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(189, 204, 185, 0.24) 0%,
            rgba(189, 204, 185, 0.07) 46%,
            rgba(189, 204, 185, 0) 74%
        );

    filter: blur(24px);

    pointer-events: none;
}


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

.lavJourney .container {
    position: relative;
    z-index: 2;
}


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

.lavJourneyHeader {
    max-width: 830px;

    margin: 0 auto clamp(72px, 9vw, 120px);

    text-align: center;
}

.lavJourneyHeader .section-title {
    max-width: 780px;

    margin-inline: auto;
    margin-top: 18px;

    text-wrap: balance;
}

.lavJourneyHeader .section-description {
    max-width: 650px;

    margin-inline: auto;
    margin-top: 24px;

    text-wrap: pretty;
}


/* ============================================================
   TIMELINE
============================================================ */

.lavJourneyTimeline {
    position: relative;

    display: grid;

    gap: clamp(54px, 7vw, 88px);

    max-width: 1040px;

    margin-inline: auto;
}


/* ============================================================
   CENTRAL LINE
============================================================ */

.lavJourneyTimeline::before {
    content: "";

    position: absolute;

    top: 24px;
    bottom: 24px;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            rgba(111, 86, 136, 0) 0%,
            rgba(111, 86, 136, 0.2) 12%,
            rgba(111, 86, 136, 0.26) 50%,
            rgba(111, 86, 136, 0.2) 88%,
            rgba(111, 86, 136, 0) 100%
        );

    transform: translateX(-50%);

    pointer-events: none;
}


/* ============================================================
   STEP
============================================================ */

.lavJourneyStep {
    position: relative;

    display: grid;

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

    align-items: center;

    min-height: 190px;
}


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

.lavJourneyStep:nth-child(odd) .lavJourneyContent {
    grid-column: 1;

    justify-self: end;

    max-width: 390px;

    padding-right:
        clamp(24px, 4vw, 58px);

    text-align: right;
}

.lavJourneyStep:nth-child(even) .lavJourneyContent {
    grid-column: 3;

    justify-self: start;

    max-width: 390px;

    padding-left:
        clamp(24px, 4vw, 58px);

    text-align: left;
}


/* ============================================================
   MARKER
============================================================ */

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

    grid-column: 2;
    grid-row: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-inline: auto;

    border:
        1px
        solid
        rgba(104, 79, 125, 0.15);

    border-radius:
        50% 48% 52% 46%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(242, 234, 247, 0.78)
        );

    box-shadow:
        0 18px 48px
        rgba(72, 53, 88, 0.12),
        inset
        0 0 0 7px
        rgba(255, 255, 255, 0.42);

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

    transform: rotate(-3deg);

    transition:
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms ease,
        border-color 500ms ease;
}

.lavJourneyMarker::before {
    content: "";

    position: absolute;

    inset: -10px;

    border:
        1px solid
        rgba(117, 91, 139, 0.08);

    border-radius: 50%;

    opacity: 0;

    transform: scale(0.86);

    transition:
        opacity 450ms ease,
        transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lavJourneyMarker::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 12px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 155, 204, 0.22),
            rgba(184, 155, 204, 0)
        );
}

.lavJourneyMarker span {
    color: var(--lavender-primary);

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

    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.04em;

    transform: rotate(3deg);
}


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

.lavJourneyContent h3 {
    margin: 0 0 16px;

    color: var(--lavender-ink);

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

    font-size:
        clamp(
            1.65rem,
            2.4vw,
            2.3rem
        );

    font-weight: 500;
    line-height: 1.15;

    text-wrap: balance;
}

.lavJourneyContent p {
    margin: 0;

    color: var(--lavender-muted);

    font-size:
        clamp(
            0.98rem,
            1.15vw,
            1.05rem
        );

    line-height: 1.85;

    text-wrap: pretty;
}


/* ============================================================
   STEP DECORATIVE ACCENT
============================================================ */

.lavJourneyContent::before {
    content: "";

    display: block;

    width: 36px;
    height: 1px;

    margin-bottom: 21px;

    background:
        linear-gradient(
            90deg,
            rgba(111, 86, 136, 0.26),
            rgba(111, 86, 136, 0.7)
        );
}

.lavJourneyStep:nth-child(odd) .lavJourneyContent::before {
    margin-left: auto;
}

.lavJourneyStep:nth-child(even) .lavJourneyContent::before {
    margin-right: auto;
}


/* ============================================================
   HOVER
============================================================ */

.lavJourneyStep:hover .lavJourneyMarker {
    border-color:
        rgba(104, 79, 125, 0.28);

    box-shadow:
        0 24px 58px
        rgba(72, 53, 88, 0.17),
        inset
        0 0 0 7px
        rgba(255, 255, 255, 0.55);

    transform:
        rotate(0deg)
        scale(1.06);
}

.lavJourneyStep:hover .lavJourneyMarker::before {
    opacity: 1;

    transform: scale(1);
}


/* ============================================================
   CLOSING
============================================================ */

.lavJourneyClosing {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 860px;

    margin:
        clamp(84px, 10vw, 138px)
        auto
        0;

    padding:
        clamp(54px, 7vw, 82px)
        clamp(28px, 6vw, 78px);

    overflow: hidden;

    border:
        1px
        solid
        rgba(103, 79, 123, 0.11);

    border-radius:
        clamp(30px, 4vw, 54px);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.86),
            rgba(245, 238, 248, 0.76)
        );

    box-shadow:
        0 34px 90px
        rgba(76, 55, 92, 0.1);

    text-align: center;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.lavJourneyClosing::before {
    content: "";

    position: absolute;

    top: -130px;
    right: -100px;

    width: 320px;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(211, 194, 225, 0.32),
            rgba(211, 194, 225, 0)
        );

    pointer-events: none;
}

.lavJourneyClosing::after {
    content: "✦";

    position: absolute;

    left: 42px;
    bottom: 30px;

    color:
        rgba(104, 79, 125, 0.17);

    font-size: 2rem;

    transform: rotate(12deg);

    pointer-events: none;
}


/* ============================================================
   QUOTE
============================================================ */

.lavJourneyClosing blockquote {
    position: relative;
    z-index: 1;

    max-width: 650px;

    margin: 0 0 34px;

    color: var(--lavender-ink);

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

    font-size:
        clamp(
            1.75rem,
            3vw,
            2.85rem
        );

    font-weight: 500;
    line-height: 1.22;

    text-wrap: balance;
}

.lavJourneyClosing blockquote span {
    display: block;

    margin-top: 6px;

    color: var(--lavender-primary);

    font-style: italic;
    font-weight: 400;
}


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

.lavJourneyClosing .button-primary {
    position: relative;
    z-index: 1;

    min-height: 54px;

    box-shadow:
        0 18px 38px
        rgba(83, 60, 102, 0.18);
}


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

@media (max-width: 900px) {

    .lavJourneyHeader {
        margin-bottom: 76px;
    }

    .lavJourneyTimeline {
        max-width: 720px;

        gap: 62px;
    }

    .lavJourneyStep {
        grid-template-columns:
            80px
            minmax(0, 1fr);

        min-height: auto;
    }

    .lavJourneyTimeline::before {
        left: 39px;

        transform: none;
    }

    .lavJourneyMarker {
        grid-column: 1;
        grid-row: 1;

        width: 66px;
        height: 66px;

        margin-inline: 0;
    }

    .lavJourneyStep:nth-child(odd) .lavJourneyContent,
    .lavJourneyStep:nth-child(even) .lavJourneyContent {
        grid-column: 2;
        grid-row: 1;

        justify-self: stretch;

        max-width: 100%;

        padding:
            2px
            0
            0
            30px;

        text-align: left;
    }

    .lavJourneyStep:nth-child(odd) .lavJourneyContent::before,
    .lavJourneyStep:nth-child(even) .lavJourneyContent::before {
        margin-left: 0;
        margin-right: auto;
    }

}


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

@media (max-width: 600px) {

    .lavJourneyHeader {
        margin-bottom: 58px;

        text-align: left;
    }

    .lavJourneyHeader .section-title,
    .lavJourneyHeader .section-description {
        margin-inline: 0;
    }

    .lavJourneyTimeline {
        gap: 48px;
    }

    .lavJourneyTimeline::before {
        top: 22px;
        bottom: 22px;
        left: 28px;
    }

    .lavJourneyStep {
        grid-template-columns:
            58px
            minmax(0, 1fr);
    }

    .lavJourneyMarker {
        width: 56px;
        height: 56px;

        box-shadow:
            0 14px 34px
            rgba(72, 53, 88, 0.11),
            inset
            0 0 0 5px
            rgba(255, 255, 255, 0.4);
    }

    .lavJourneyMarker span {
        font-size: 0.98rem;
    }

    .lavJourneyStep:nth-child(odd) .lavJourneyContent,
    .lavJourneyStep:nth-child(even) .lavJourneyContent {
        padding-left: 20px;
    }

    .lavJourneyContent::before {
        width: 28px;

        margin-bottom: 16px;
    }

    .lavJourneyContent h3 {
        margin-bottom: 12px;

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

    .lavJourneyContent p {
        font-size: 0.97rem;
        line-height: 1.75;
    }

    .lavJourneyClosing {
        align-items: flex-start;

        margin-top: 76px;

        padding:
            42px
            24px;

        border-radius: 30px;

        text-align: left;
    }

    .lavJourneyClosing blockquote {
        margin-bottom: 28px;

        font-size:
            clamp(
                1.65rem,
                8vw,
                2.15rem
            );
    }

    .lavJourneyClosing .button {
        width: 100%;
    }

    .lavJourneyClosing::after {
        right: 22px;
        bottom: 20px;
        left: auto;

        font-size: 1.5rem;
    }

}


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

@media (max-width: 390px) {

    .lavJourneyStep {
        grid-template-columns:
            52px
            minmax(0, 1fr);
    }

    .lavJourneyTimeline::before {
        left: 25px;
    }

    .lavJourneyMarker {
        width: 50px;
        height: 50px;
    }

    .lavJourneyStep:nth-child(odd) .lavJourneyContent,
    .lavJourneyStep:nth-child(even) .lavJourneyContent {
        padding-left: 17px;
    }

}


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

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

    .lavJourneyMarker,
    .lavJourneyMarker::before {
        transition: none;
    }

    .lavJourneyStep:hover .lavJourneyMarker {
        transform: none;
    }

}

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

.lavJourneyClosingEyebrow {
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;

    margin-bottom: 22px;
    padding:
        9px
        15px;

    border:
        1px solid
        rgba(104, 79, 125, 0.12);

    border-radius: 999px;

    color: var(--lavender-primary);

    background:
        rgba(255, 255, 255, 0.56);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ============================================================
   CLOSING DESCRIPTION
============================================================ */

.lavJourneyClosingDescription {
    position: relative;
    z-index: 1;

    max-width: 610px;

    margin:
        -10px
        0
        32px;

    color: var(--lavender-muted);

    font-size: 1rem;
    line-height: 1.8;

    text-wrap: pretty;
}
/* ============================================================
   PREMIUM CLOSING HIGHLIGHT
============================================================ */

.lavJourneyClosingHighlight {
    position: relative;

    display: inline-flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;

    margin-top: 18px;
    padding:
        18px
        clamp(22px, 4vw, 38px);

    border:
        1px solid
        rgba(103, 78, 124, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92),
            rgba(241, 232, 247, 0.82)
        );

    box-shadow:
        0 22px 54px
        rgba(73, 52, 91, 0.12),
        inset
        0 1px 0
        rgba(255, 255, 255, 0.76);

    overflow: hidden;

    color: var(--lavender-ink);

    text-align: center;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.lavJourneyClosingHighlight::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.52) 44%,
            transparent 68%
        );

    transform: translateX(-120%);

    transition:
        transform
        900ms
        cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;
}

.lavJourneyClosingHighlight::after {
    content: "";

    position: absolute;

    right: 18px;
    bottom: 12px;

    width: 40px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(111, 86, 136, 0),
            rgba(111, 86, 136, 0.75)
        );

    pointer-events: none;
}

.lavJourneyClosing:hover
.lavJourneyClosingHighlight::before {
    transform: translateX(120%);
}

.lavJourneyClosingHighlightLine {
    position: relative;
    z-index: 1;

    color: var(--lavender-muted);

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

    font-size:
        clamp(
            0.78rem,
            1vw,
            0.9rem
        );

    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.lavJourneyClosingHighlight strong {
    position: relative;
    z-index: 1;

    color: var(--lavender-primary);

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

    font-size:
        clamp(
            1.7rem,
            3.2vw,
            2.75rem
        );

    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;

    text-wrap: balance;
}


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

@media (max-width: 600px) {

    .lavJourneyClosingHighlight {
        align-items: flex-start;

        width: 100%;

        padding:
            17px
            18px;

        border-radius: 20px;

        text-align: left;
    }

    .lavJourneyClosingHighlight strong {
        font-size:
            clamp(
                1.55rem,
                8vw,
                2.15rem
            );
    }

}


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

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

    .lavJourneyClosingHighlight::before {
        display: none;
    }

}

/* ============================================================
   PREMIUM CONSULTATION BUTTON
============================================================ */

.lavConsultationButton{

    position:relative;

    display:grid;

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

    align-items:center;

    gap:15px;

    width:max-content;

    max-width:100%;

    min-height:68px;

    padding:
        10px 12px 10px 15px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:999px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #856391 0%,
            #765286 48%,
            #65426f 100%
        );

    box-shadow:
        0 18px 38px
        rgba(92,61,104,.28),
        inset 0 1px 0
        rgba(255,255,255,.18);

    text-decoration:none;

    isolation:isolate;

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        border-color .3s ease;

}


.lavConsultationButton::before{

    content:"";

    position:absolute;

    top:-55%;

    left:-18%;

    z-index:-1;

    width:44%;

    height:210%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.16),
            transparent
        );

    transform:
        rotate(18deg)
        translateX(-150%);

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

}


.lavConsultationButton::after{

    content:"";

    position:absolute;

    right:72px;

    bottom:-34px;

    z-index:-1;

    width:110px;

    height:110px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(208,188,216,.22),
            rgba(208,188,216,0) 70%
        );

    pointer-events:none;

}


.lavConsultationButton:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(255,255,255,.34);

    box-shadow:
        0 24px 50px
        rgba(92,61,104,.36),
        inset 0 1px 0
        rgba(255,255,255,.22);

}


.lavConsultationButton:hover::before{

    transform:
        rotate(18deg)
        translateX(420%);

}


.lavConsultationButton:focus-visible{

    outline:
        3px solid
        rgba(153,121,168,.34);

    outline-offset:5px;

}


/* ============================================================
   BOTANICAL MARK
============================================================ */

.lavConsultationButtonMark{

    position:relative;

    display:inline-block;

    flex:0 0 auto;

    width:42px;

    height:42px;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius:50%;

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

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.12);

}


.lavConsultationButtonStem{

    position:absolute;

    bottom:8px;

    left:20px;

    width:1.5px;

    height:24px;

    border-radius:999px;

    background:
        rgba(231,239,224,.90);

    transform:
        rotate(5deg);

}


.lavConsultationButtonLeaf{

    position:absolute;

    width:10px;

    height:4px;

    border-radius:
        100% 0 100% 0;

    background:
        rgba(217,230,207,.92);

}


.lavConsultationButtonLeafOne{

    bottom:13px;

    left:11px;

    transform:
        rotate(20deg);

}


.lavConsultationButtonLeafTwo{

    bottom:18px;

    left:20px;

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

}


.lavConsultationButtonBud{

    position:absolute;

    width:6px;

    height:9px;

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

    background:
        linear-gradient(
            145deg,
            #eadff0,
            #c7aed2
        );

    box-shadow:
        0 2px 5px
        rgba(51,35,57,.18);

}


.lavConsultationButtonBudOne{

    top:7px;

    left:17px;

}


.lavConsultationButtonBudTwo{

    top:13px;

    left:12px;

    transform:
        rotate(-17deg)
        scale(.84);

}


.lavConsultationButtonBudThree{

    top:15px;

    left:23px;

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

}


/* ============================================================
   TEXT
============================================================ */

.lavConsultationButtonText{

    display:grid;

    gap:4px;

    min-width:0;

}


.lavConsultationButtonText small{

    color:
        rgba(255,255,255,.72);

    font-size:.63rem;

    font-weight:700;

    line-height:1;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.lavConsultationButtonText strong{

    color:#ffffff;

    font-size:.9rem;

    font-weight:750;

    line-height:1.2;

    letter-spacing:
        -.01em;

}


/* ============================================================
   ARROW
============================================================ */

.lavConsultationButtonArrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius:50%;

    color:#ffffff;

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

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

}


.lavConsultationButton:hover
.lavConsultationButtonArrow{

    transform:
        translateX(3px);

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

}


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

@media (max-width:560px){

    .lavConsultationButton{

        width:100%;

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

        min-height:66px;

        border-radius:22px;

    }


    .lavConsultationButtonText small{

        font-size:.57rem;

        line-height:1.35;

    }


    .lavConsultationButtonText strong{

        font-size:.84rem;

    }

}


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

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

    .lavConsultationButton,
    .lavConsultationButton::before,
    .lavConsultationButtonArrow{

        transition:none;

    }

}