/* ============================================================
   LAVENDER COUNSELING CENTER
   ABOUT — OUR STORY
============================================================ */

.lavAboutStory {

    position: relative;

    overflow: hidden;

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

    background:
        linear-gradient(
            180deg,
            #fbf9fa 0%,
            #f7f3f7 48%,
            #fbfaf9 100%
        );

    isolation: isolate;
}


/* ============================================================
   SUBTLE BACKGROUND TEXTURE
============================================================ */

.lavAboutStory::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    background-image:
        linear-gradient(
            rgba(107, 81, 116, 0.021) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(107, 81, 116, 0.018) 1px,
            transparent 1px
        );

    background-size:
        74px 74px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 0, 0, 0.5) 18%,
            rgba(0, 0, 0, 0.5) 82%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 0, 0, 0.5) 18%,
            rgba(0, 0, 0, 0.5) 82%,
            transparent
        );

    pointer-events: none;
}


/* ============================================================
   BOTTOM DIVIDER
============================================================ */

.lavAboutStory::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 50%;

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

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(99, 74, 109, 0.14),
            transparent
        );

    transform:
        translateX(-50%);

    pointer-events: none;
}


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

.lavAboutStoryGlow {

    position: absolute;

    z-index: -2;

    border-radius: 50%;

    filter:
        blur(20px);

    pointer-events: none;
}


.lavAboutStoryGlowOne {

    top: 2%;
    left: -240px;

    width: 560px;
    height: 560px;

    background:
        radial-gradient(
            circle,
            rgba(188, 165, 198, 0.23) 0%,
            rgba(188, 165, 198, 0.08) 38%,
            rgba(188, 165, 198, 0) 72%
        );
}


.lavAboutStoryGlowTwo {

    right: -250px;
    bottom: 3%;

    width: 620px;
    height: 620px;

    background:
        radial-gradient(
            circle,
            rgba(179, 196, 164, 0.19) 0%,
            rgba(179, 196, 164, 0.07) 40%,
            rgba(179, 196, 164, 0) 72%
        );
}


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

.lavAboutStory .container {

    position: relative;

    z-index: 3;

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

    margin-inline:
        auto;
}


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

.lavAboutStoryHeader {

    max-width: 1120px;

    margin:
        0 auto
        clamp(70px, 8vw, 112px);
}


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

.lavAboutStoryEyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    margin-bottom: 26px;

    color: #80608d;
}


.lavAboutStoryEyebrow > span {

    display: block;

    width: 39px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(128, 96, 141, 0.12),
            #80608d
        );
}


.lavAboutStoryEyebrow > span::after {

    content: "";

    display: block;

    width: 39px;
    height: 1px;

    margin-left: 72px;

    background:
        linear-gradient(
            90deg,
            #80608d,
            rgba(128, 96, 141, 0.12)
        );
}


.lavAboutStoryEyebrow small {

    font-size: 0.71rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


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

.lavAboutStoryHeaderGrid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    align-items: end;

    gap:
        clamp(45px, 7vw, 100px);
}


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

.lavAboutStoryHeader h2 {

    max-width: 710px;

    margin: 0;

    color: #403743;

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

    font-size:
        clamp(3.2rem, 5.7vw, 5.8rem);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing:
        -0.048em;

    text-wrap: balance;
}


.lavAboutStoryHeader h2 span {

    display: block;

    margin-top: 8px;

    color: #7c5a89;

    font-style: italic;
}


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

.lavAboutStoryHeaderLead {

    max-width: 465px;

    margin: 0;

    padding-left: 22px;

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

    color: #756c78;

    font-size:
        clamp(1rem, 1.15vw, 1.1rem);

    line-height: 1.86;
}


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

.lavAboutStoryGrid {

    display: grid;

    grid-template-columns:
        minmax(430px, 0.96fr)
        minmax(0, 1.04fr);

    align-items: start;

    gap:
        clamp(70px, 9vw, 130px);
}


/* ============================================================
   VISUAL
============================================================ */

.lavAboutStoryVisual {

    position: relative;

    min-width: 0;

    margin: 0;

    padding:
        26px 25px 0 0;
}


/* ============================================================
   VISUAL BACKPLATE
============================================================ */

.lavAboutStoryVisual::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    bottom: 57px;
    left: 39px;

    z-index: -1;

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

    border-radius:
        42px 42px 46% 42px;

    background:
        linear-gradient(
            145deg,
            rgba(221, 207, 225, 0.42),
            rgba(238, 231, 239, 0.14)
        );

    transform:
        rotate(2.4deg);
}


.lavAboutStoryVisual::after {

    content: "";

    position: absolute;

    top: 54px;
    right: -25px;

    z-index: -2;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(142, 110, 155, 0.14),
            rgba(142, 110, 155, 0) 71%
        );

    filter:
        blur(6px);
}


/* ============================================================
   IMAGE FRAME
============================================================ */

.lavAboutStoryImageFrame {

    position: relative;

    min-width: 0;

    isolation: isolate;
}


/* ============================================================
   IMAGE
============================================================ */

.lavAboutStoryImage {

    position: relative;

    min-height:
        clamp(570px, 53vw, 700px);

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.72);

    border-radius:
        42px 42px 46% 42px;

    background:
        #d8d0d8;

    box-shadow:
        0 38px 90px
        rgba(64, 47, 69, 0.15),
        inset 0 1px 0
        rgba(255, 255, 255, 0.75);
}


.lavAboutStoryImage::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(43, 33, 46, 0.02) 28%,
            rgba(43, 33, 46, 0.07) 64%,
            rgba(43, 33, 46, 0.16) 100%
        );

    pointer-events: none;
}


.lavAboutStoryImage::after {

    content: "";

    position: absolute;

    inset: 13px;

    z-index: 3;

    border:
        1px solid
        rgba(255, 255, 255, 0.32);

    border-radius:
        32px 32px 44% 32px;

    pointer-events: none;
}


.lavAboutStoryImage img {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        var(--story-image-position, 50% 50%);

    transform:
        translate3d(
            var(--story-image-x, 0px),
            var(--story-image-y, 0px),
            0
        )
        scale(1.045);

    transition:
        transform 0.24s ease-out,
        filter 0.45s ease;

    will-change: transform;
}


.lavAboutStoryVisual:hover
.lavAboutStoryImage img {

    filter:
        saturate(1.03)
        contrast(1.015);
}


/* ============================================================
   INNER IMAGE LINE
============================================================ */

.lavAboutStoryImageLine {

    position: absolute;

    right: 18px;
    bottom: 18px;

    z-index: 4;

    width: 92px;
    height: 92px;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.42);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.42);

    border-radius:
        0 0 47px 0;

    pointer-events: none;
}


/* ============================================================
   FIGURE CAPTION
============================================================ */

.lavAboutStoryCaption {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    max-width: 410px;

    margin:
        25px 0 0
        27px;
}


.lavAboutStoryCaption > span {

    flex: 0 0 auto;

    display: block;

    width: 33px;
    height: 1px;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            #84658f,
            rgba(132, 101, 143, 0.12)
        );
}


.lavAboutStoryCaption p {

    margin: 0;

    color: #918694;

    font-size: 0.74rem;

    font-weight: 650;

    line-height: 1.6;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


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

.lavAboutStoryContent {

    position: relative;

    min-width: 0;

    padding-top:
        clamp(15px, 2vw, 34px);
}


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

.lavAboutStoryOpening {

    position: relative;

    display: grid;

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

    gap: 19px;

    padding:
        0 0
        clamp(35px, 4vw, 50px);

    border-bottom:
        1px solid
        rgba(105, 79, 115, 0.1);
}


.lavAboutStoryOpeningMark {

    display: block;

    color: rgba(128, 94, 141, 0.33);

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

    font-size: 5.8rem;

    font-weight: 500;

    line-height: 0.74;
}


.lavAboutStoryOpening p {

    max-width: 650px;

    margin: 0;

    color: #514756;

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

    font-size:
        clamp(1.75rem, 2.7vw, 2.45rem);

    font-weight: 500;

    line-height: 1.28;

    letter-spacing:
        -0.024em;
}


/* ============================================================
   STORY COPY
============================================================ */

.lavAboutStoryCopy {

    display: grid;

    gap: 25px;

    padding:
        clamp(35px, 4vw, 50px)
        0;
}


.lavAboutStoryCopy p {

    max-width: 680px;

    margin: 0;

    color: #746b77;

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

    line-height: 1.91;
}


.lavAboutStoryCopy p:first-child::first-letter {

    float: left;

    margin:
        8px 9px 0 0;

    color: #795985;

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

    font-size: 3.65rem;

    font-weight: 600;

    line-height: 0.72;
}


/* ============================================================
   PRINCIPLES
============================================================ */

.lavAboutStoryPrinciples {

    display: grid;

    gap: 0;

    margin-top: 3px;

    border-top:
        1px solid
        rgba(105, 79, 115, 0.1);
}


.lavAboutStoryPrinciple {

    position: relative;

    display: grid;

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

    gap: 20px;

    padding:
        25px 0;

    border-bottom:
        1px solid
        rgba(105, 79, 115, 0.1);

    transition:
        padding-left 0.3s ease;
}


.lavAboutStoryPrinciple::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: -20px;

    width: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(137, 102, 151, 0),
            rgba(137, 102, 151, 0.58),
            rgba(137, 102, 151, 0)
        );

    opacity: 0;

    transform:
        scaleY(0.4);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.lavAboutStoryPrinciple:hover {

    padding-left: 8px;
}


.lavAboutStoryPrinciple:hover::before {

    opacity: 1;

    transform:
        scaleY(1);
}


/* ============================================================
   PRINCIPLE NUMBER
============================================================ */

.lavAboutStoryPrinciple > span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    color: #83658e;

    background:
        rgba(248, 244, 249, 0.78);

    font-size: 0.6rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.07em;

    box-shadow:
        0 8px 22px
        rgba(68, 50, 73, 0.05);
}


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

.lavAboutStoryPrinciple h3 {

    margin:
        0 0 6px;

    color: #594b5d;

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

    font-size:
        clamp(1.32rem, 1.75vw, 1.62rem);

    font-weight: 600;

    line-height: 1.15;

    letter-spacing:
        -0.015em;
}


.lavAboutStoryPrinciple p {

    max-width: 520px;

    margin: 0;

    color: #817784;

    font-size: 0.9rem;

    line-height: 1.7;
}


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

.lavAboutStorySignature {

    display: inline-grid;

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

    align-items: center;

    gap: 15px;

    margin-top:
        clamp(34px, 4vw, 49px);

    padding:
        14px 20px 14px 14px;

    border:
        1px solid
        rgba(111, 83, 120, 0.1);

    border-radius: 999px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.79),
            rgba(250, 247, 250, 0.58)
        );

    box-shadow:
        0 16px 40px
        rgba(62, 46, 67, 0.06),
        inset 0 1px 0
        rgba(255, 255, 255, 0.86);

    backdrop-filter:
        blur(10px);

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


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

.lavAboutStorySignatureMark {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 45px;
    height: 45px;

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

    border-radius: 50%;

    background:
        rgba(239, 231, 242, 0.72);
}


.lavAboutStorySignatureMark > span {

    position: absolute;

    width: 6px;
    height: 12px;

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

    background:
        linear-gradient(
            145deg,
            #b99fc5,
            #765283
        );

    transform-origin:
        bottom center;
}


.lavAboutStorySignatureMark > span:nth-child(1) {

    top: 7px;
    left: 19px;
}


.lavAboutStorySignatureMark > span:nth-child(2) {

    top: 15px;
    left: 13px;

    transform:
        rotate(-19deg)
        scale(0.85);
}


.lavAboutStorySignatureMark > span:nth-child(3) {

    top: 16px;
    left: 26px;

    transform:
        rotate(18deg)
        scale(0.8);
}


.lavAboutStorySignatureMark::before {

    content: "";

    position: absolute;

    bottom: 7px;
    left: 21px;

    width: 1.5px;
    height: 19px;

    border-radius: 999px;

    background: #8b9c7d;

    transform:
        rotate(4deg);
}


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

.lavAboutStorySignature small {

    display: block;

    margin-bottom: 3px;

    color: #948799;

    font-size: 0.6rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.lavAboutStorySignature strong {

    display: block;

    color: #604d65;

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

    font-size: 1.18rem;

    font-weight: 600;

    line-height: 1.1;
}


/* ============================================================
   BOTANICAL DETAIL
============================================================ */

.lavAboutStoryBotanical {

    position: absolute;

    right: -33px;
    bottom: -27px;

    z-index: 5;

    width: 112px;
    height: 235px;

    opacity: 0.78;

    transform:
        translate3d(
            var(--story-botanical-x, 0px),
            var(--story-botanical-y, 0px),
            0
        )
        rotate(8deg);

    transform-origin:
        bottom center;

    transition:
        transform 0.28s ease-out;

    pointer-events: none;

    will-change: transform;
}


/* ============================================================
   BOTANICAL STEM
============================================================ */

.lavAboutStoryBotanicalStem {

    position: absolute;

    bottom: 4px;
    left: 54px;

    width: 2px;
    height: 188px;

    border-radius: 999px;

    background:
        linear-gradient(
            to top,
            #627455,
            #93a484
        );

    transform:
        rotate(4deg);
}


/* ============================================================
   BOTANICAL LEAVES
============================================================ */

.lavAboutStoryBotanicalLeaf {

    position: absolute;

    width: 43px;
    height: 14px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #8d9d7e,
            #637755
        );

    box-shadow:
        0 5px 11px
        rgba(69, 88, 59, 0.09);
}


.lavAboutStoryBotanicalLeafOne {

    bottom: 49px;
    left: 16px;

    transform:
        rotate(22deg);
}


.lavAboutStoryBotanicalLeafTwo {

    bottom: 91px;
    left: 53px;

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


.lavAboutStoryBotanicalLeafThree {

    bottom: 130px;
    left: 23px;

    transform:
        rotate(24deg)
        scale(0.76);
}


/* ============================================================
   BOTANICAL BUDS
============================================================ */

.lavAboutStoryBotanicalBud {

    position: absolute;

    width: 21px;
    height: 35px;

    border-radius:
        65% 65% 45% 45%;

    background:
        linear-gradient(
            145deg,
            #c1a8cc,
            #73507f
        );

    box-shadow:
        0 5px 14px
        rgba(85, 56, 95, 0.15);
}


.lavAboutStoryBotanicalBudOne {

    top: 7px;
    left: 44px;
}


.lavAboutStoryBotanicalBudTwo {

    top: 31px;
    left: 26px;

    transform:
        rotate(-18deg)
        scale(0.84);
}


.lavAboutStoryBotanicalBudThree {

    top: 37px;
    left: 62px;

    transform:
        rotate(18deg)
        scale(0.8);
}


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

.lavAboutStory .reveal-soft {

    opacity: 1;

    transform: none;

    filter: none;
}


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

.js .lavAboutStory .reveal-soft {

    opacity: 0;

    transform:
        translateY(25px);

    filter:
        blur(8px);

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


.js .lavAboutStory .reveal-soft.is-visible {

    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}


.js .lavAboutStory .delay-1 {

    transition-delay: 100ms;
}


.js .lavAboutStory .delay-2 {

    transition-delay: 185ms;
}


.js .lavAboutStory .delay-3 {

    transition-delay: 270ms;
}


.js .lavAboutStory .delay-4 {

    transition-delay: 355ms;
}


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

@media (min-width: 1500px) {

    .lavAboutStoryGrid {

        gap: 140px;
    }


    .lavAboutStoryVisual {

        padding-right: 32px;
    }

}


/* ============================================================
   MEDIUM DESKTOP
============================================================ */

@media (max-width: 1140px) {

    .lavAboutStoryHeaderGrid {

        gap: 60px;
    }


    .lavAboutStoryGrid {

        grid-template-columns:
            minmax(390px, 0.92fr)
            minmax(0, 1.08fr);

        gap: 70px;
    }


    .lavAboutStoryImage {

        min-height:
            clamp(540px, 55vw, 650px);
    }


    .lavAboutStoryBotanical {

        right: -14px;
    }

}


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

@media (max-width: 960px) {

    .lavAboutStory {

        padding:
            100px 0;
    }


    .lavAboutStoryHeader {

        margin-bottom: 70px;
    }


    .lavAboutStoryHeaderGrid {

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

        align-items: start;

        gap: 32px;
    }


    .lavAboutStoryHeaderLead {

        max-width: 630px;
    }


    .lavAboutStoryGrid {

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

        gap: 70px;
    }


    .lavAboutStoryVisual {

        width: 100%;

        max-width: 730px;

        margin-inline:
            auto;

        padding:
            26px 38px 0 0;
    }


    .lavAboutStoryImage {

        min-height:
            clamp(560px, 85vw, 720px);
    }


    .lavAboutStoryContent {

        max-width: 750px;

        margin-inline:
            auto;

        padding-top: 0;
    }

}


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

@media (max-width: 720px) {

    .lavAboutStory {

        padding:
            84px 0 90px;
    }


    .lavAboutStory .container {

        width:
            calc(100% - 28px);
    }


    .lavAboutStoryHeader {

        margin-bottom: 55px;
    }


    .lavAboutStoryEyebrow {

        justify-content: flex-start;
    }


    .lavAboutStoryEyebrow > span::after {

        display: none;
    }


    .lavAboutStoryHeader h2 {

        font-size:
            clamp(2.9rem, 12vw, 4.25rem);
    }


    .lavAboutStoryHeaderLead {

        padding-left: 17px;

        font-size: 0.98rem;
    }


    .lavAboutStoryGrid {

        gap: 58px;
    }


    .lavAboutStoryVisual {

        padding:
            18px 15px 0 0;
    }


    .lavAboutStoryVisual::before {

        left: 23px;

        bottom: 50px;

        border-radius:
            31px 31px 42% 31px;
    }


    .lavAboutStoryImage {

        min-height:
            clamp(460px, 113vw, 620px);

        border-radius:
            31px 31px 42% 31px;
    }


    .lavAboutStoryImage::after {

        border-radius:
            23px 23px 39% 23px;
    }


    .lavAboutStoryCaption {

        margin-left: 12px;
    }


    .lavAboutStoryOpening {

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

        gap: 14px;
    }


    .lavAboutStoryOpeningMark {

        font-size: 4.6rem;
    }


    .lavAboutStoryOpening p {

        font-size:
            clamp(1.55rem, 6.5vw, 2rem);
    }


    .lavAboutStoryPrinciple {

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

        gap: 15px;
    }


    .lavAboutStoryPrinciple > span {

        width: 34px;
        height: 34px;
    }


    .lavAboutStoryBotanical {

        right: -12px;
        bottom: -20px;

        transform:
            rotate(8deg)
            scale(0.78);
    }

}


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

@media (max-width: 560px) {

    .lavAboutStoryHeader h2 {

        font-size:
            clamp(2.7rem, 13vw, 3.7rem);

        line-height: 1;
    }


    .lavAboutStoryVisual {

        padding:
            12px 5px 0 0;
    }


    .lavAboutStoryImage {

        min-height:
            clamp(410px, 120vw, 530px);
    }


    .lavAboutStoryCaption {

        align-items: flex-start;

        margin:
            20px 0 0 7px;
    }


    .lavAboutStoryCaption p {

        font-size: 0.66rem;
    }


    .lavAboutStoryOpening {

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

        gap: 7px;
    }


    .lavAboutStoryOpeningMark {

        height: 37px;

        font-size: 4.2rem;
    }


    .lavAboutStoryCopy {

        gap: 21px;
    }


    .lavAboutStoryCopy p {

        font-size: 0.98rem;

        line-height: 1.83;
    }


    .lavAboutStoryPrinciple {

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

        gap: 13px;

        padding:
            23px 0;
    }


    .lavAboutStoryPrinciple h3 {

        font-size: 1.35rem;
    }


    .lavAboutStorySignature {

        width: 100%;

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

        border-radius: 23px;
    }


    .lavAboutStoryBotanical {

        display: none;
    }

}


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

@media (max-width: 390px) {

    .lavAboutStoryHeader h2 {

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


    .lavAboutStoryPrinciple {

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

        gap: 10px;
    }


    .lavAboutStoryPrinciple:hover {

        padding-left: 0;
    }


    .lavAboutStoryPrinciple::before {

        display: none;
    }


    .lavAboutStorySignature {

        align-items: flex-start;

        padding-right: 15px;
    }

}


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

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

    .js .lavAboutStory .reveal-soft {

        opacity: 1;

        transform: none;

        filter: none;

        transition: none;
    }


    .lavAboutStoryImage img,
    .lavAboutStoryBotanical,
    .lavAboutStoryPrinciple {

        transition: none;
    }


    .lavAboutStoryImage img {

        transform:
            scale(1.045);
    }

}