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

.lavAboutPhilosophy {

    position: relative;

    overflow: hidden;

    padding:
        clamp(110px, 11vw, 170px)
        0;

    background:
        linear-gradient(
            180deg,
            #f4eef5 0%,
            #efe7f1 47%,
            #f6f1f6 100%
        );

    isolation: isolate;
}


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

.lavAboutPhilosophy::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -4;

    background-image:
        radial-gradient(
            circle at 1px 1px,
            rgba(91, 65, 101, 0.045) 1px,
            transparent 0
        );

    background-size:
        28px 28px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.6) 16%,
            rgba(0, 0, 0, 0.6) 84%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.6) 16%,
            rgba(0, 0, 0, 0.6) 84%,
            transparent 100%
        );

    pointer-events: none;
}


/* ============================================================
   LARGE DECORATIVE ARC
============================================================ */

.lavAboutPhilosophy::after {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: -3;

    width:
        min(82vw, 1180px);

    aspect-ratio: 1;

    border:
        1px solid
        rgba(116, 82, 129, 0.08);

    border-radius: 50%;

    transform:
        translate(-50%, -47%);

    pointer-events: none;
}


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

.lavAboutPhilosophyGlow {

    position: absolute;

    z-index: -2;

    border-radius: 50%;

    filter:
        blur(22px);

    pointer-events: none;
}


.lavAboutPhilosophyGlowOne {

    top: -220px;
    right: -230px;

    width: 660px;
    height: 660px;

    background:
        radial-gradient(
            circle,
            rgba(185, 153, 199, 0.3) 0%,
            rgba(185, 153, 199, 0.1) 38%,
            rgba(185, 153, 199, 0) 72%
        );
}


.lavAboutPhilosophyGlowTwo {

    bottom: -250px;
    left: -240px;

    width: 700px;
    height: 700px;

    background:
        radial-gradient(
            circle,
            rgba(175, 193, 157, 0.2) 0%,
            rgba(175, 193, 157, 0.07) 40%,
            rgba(175, 193, 157, 0) 72%
        );
}


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

.lavAboutPhilosophy .container {

    position: relative;

    z-index: 3;

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

    margin-inline:
        auto;
}


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

.lavAboutPhilosophyHeader {

    max-width: 1180px;

    margin:
        0 auto
        clamp(78px, 9vw, 125px);
}


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

.lavAboutPhilosophyEyebrow {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 28px;

    color: #765681;
}


.lavAboutPhilosophyEyebrow > span {

    display: block;

    width: 42px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(118, 86, 129, 0.08),
            #765681
        );
}


.lavAboutPhilosophyEyebrow small {

    font-size: 0.7rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


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

.lavAboutPhilosophyHeaderGrid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.26fr)
        minmax(310px, 0.74fr);

    align-items: end;

    gap:
        clamp(50px, 8vw, 110px);
}


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

.lavAboutPhilosophyHeader h2 {

    max-width: 790px;

    margin: 0;

    color: #453949;

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

    font-size:
        clamp(3.25rem, 5.9vw, 6rem);

    font-weight: 500;

    line-height: 0.97;

    letter-spacing:
        -0.05em;

    text-wrap: balance;
}


.lavAboutPhilosophyHeader h2 span {

    display: block;

    margin-top: 12px;

    color: #795585;

    font-style: italic;
}


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

.lavAboutPhilosophyHeaderNote {

    display: grid;

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

    align-items: start;

    gap: 17px;

    max-width: 430px;

    padding:
        21px 0 2px;

    border-top:
        1px solid
        rgba(105, 74, 117, 0.18);
}


.lavAboutPhilosophyHeaderMark {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(119, 84, 132, 0.16);

    border-radius: 50%;

    color: #866291;

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

    font-size: 1rem;

    box-shadow:
        0 10px 26px
        rgba(72, 49, 80, 0.06);
}


.lavAboutPhilosophyHeaderNote p {

    margin: 0;

    color: #706575;

    font-size:
        clamp(0.98rem, 1.08vw, 1.06rem);

    line-height: 1.82;
}


/* ============================================================
   MANIFESTO
============================================================ */

.lavAboutPhilosophyManifesto {

    position: relative;

    display: grid;

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

    align-items: stretch;

    gap:
        clamp(42px, 6vw, 80px);

    margin-bottom:
        clamp(90px, 10vw, 135px);

    padding:
        clamp(42px, 5vw, 68px);

    border:
        1px solid
        rgba(104, 74, 116, 0.12);

    border-radius:
        42px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.63),
            rgba(250, 246, 251, 0.38)
        );

    box-shadow:
        0 34px 85px
        rgba(71, 49, 80, 0.1),
        inset 0 1px 0
        rgba(255, 255, 255, 0.84);

    backdrop-filter:
        blur(14px);

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

    isolation: isolate;
}


/* ============================================================
   MANIFESTO INNER LIGHT
============================================================ */

.lavAboutPhilosophyManifesto::before {

    content: "";

    position: absolute;

    top: 0;
    left: 10%;

    z-index: -1;

    width: 46%;
    height: 1px;

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

    pointer-events: none;
}


.lavAboutPhilosophyManifesto::after {

    content: "";

    position: absolute;

    right: 18px;
    bottom: 18px;

    z-index: -1;

    width: 130px;
    height: 130px;

    border-right:
        1px solid
        rgba(119, 85, 132, 0.08);

    border-bottom:
        1px solid
        rgba(119, 85, 132, 0.08);

    border-radius:
        0 0 32px 0;

    pointer-events: none;
}


/* ============================================================
   VERTICAL RAIL
============================================================ */

.lavAboutPhilosophyManifestoRail {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 17px;

    min-height: 100%;
}


.lavAboutPhilosophyManifestoRail > span {

    display: block;

    width: 1px;
    height:
        clamp(90px, 13vw, 155px);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(111, 78, 123, 0.5),
            transparent
        );
}


.lavAboutPhilosophyManifestoRail small {

    color: #948498;

    font-size: 0.6rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.17em;

    text-transform: uppercase;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);
}


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

.lavAboutPhilosophyManifestoContent {

    min-width: 0;

    padding:
        4px 0;
}


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

.lavAboutPhilosophyManifestoLead {

    max-width: 670px;

    margin:
        0 0
        clamp(35px, 4vw, 52px);

    color: #514255;

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

    font-size:
        clamp(2.15rem, 3.55vw, 3.55rem);

    font-weight: 500;

    line-height: 1.12;

    letter-spacing:
        -0.035em;

    text-wrap: balance;
}


/* ============================================================
   MANIFESTO COPY
============================================================ */

.lavAboutPhilosophyManifestoCopy {

    display: grid;

    gap: 24px;

    max-width: 680px;

    padding-top: 30px;

    border-top:
        1px solid
        rgba(105, 74, 117, 0.11);
}


.lavAboutPhilosophyManifestoCopy p {

    margin: 0;

    color: #746978;

    font-size:
        clamp(0.99rem, 1.08vw, 1.07rem);

    line-height: 1.88;
}


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

.lavAboutPhilosophyQuote {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    margin: 0;

    padding:
        clamp(36px, 4vw, 53px);

    overflow: hidden;

    border:
        1px solid
        rgba(106, 76, 118, 0.13);

    border-radius:
        34px;

    background:
        linear-gradient(
            155deg,
            rgba(111, 78, 123, 0.95),
            rgba(79, 56, 88, 0.98)
        );

    box-shadow:
        0 28px 65px
        rgba(59, 41, 66, 0.17);

    isolation: isolate;
}


.lavAboutPhilosophyQuote::before {

    content: "";

    position: absolute;

    top: -120px;
    right: -115px;

    z-index: -2;

    width: 280px;
    height: 280px;

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

    border-radius: 50%;
}


.lavAboutPhilosophyQuote::after {

    content: "";

    position: absolute;

    right: -55px;
    bottom: -70px;

    z-index: -2;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(203, 181, 212, 0.2),
            rgba(203, 181, 212, 0)
        );
}


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

.lavAboutPhilosophyQuoteMark {

    display: block;

    height: 67px;

    margin-bottom: 13px;

    color: rgba(255, 255, 255, 0.22);

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

    font-size: 7.1rem;

    font-weight: 500;

    line-height: 0.83;
}


/* ============================================================
   BLOCKQUOTE
============================================================ */

.lavAboutPhilosophyQuote blockquote {

    position: relative;

    z-index: 2;

    margin:
        0 0 34px;

    color: #ffffff;

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

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

    font-weight: 500;

    line-height: 1.28;

    letter-spacing:
        -0.022em;
}


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

.lavAboutPhilosophyQuoteSignature {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: auto;
}


.lavAboutPhilosophyQuoteSignature > span {

    display: block;

    width: 34px;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.42);
}


.lavAboutPhilosophyQuoteSignature small {

    color:
        rgba(255, 255, 255, 0.64);

    font-size: 0.62rem;

    font-weight: 800;

    line-height: 1.45;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


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

.lavAboutPhilosophyPrinciples {

    display: grid;

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

    gap: 1px;

    margin-bottom:
        clamp(80px, 9vw, 120px);

    overflow: hidden;

    border:
        1px solid
        rgba(103, 73, 115, 0.11);

    border-radius:
        36px;

    background:
        rgba(103, 73, 115, 0.11);

    box-shadow:
        0 30px 75px
        rgba(65, 44, 73, 0.08);
}


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

.lavAboutPhilosophyPrinciple {

    position: relative;

    min-width: 0;

    padding:
        clamp(39px, 4vw, 56px);

    overflow: hidden;

    background:
        linear-gradient(
            160deg,
            rgba(252, 249, 252, 0.98),
            rgba(247, 241, 248, 0.95)
        );

    transition:
        background 0.42s ease,
        transform 0.42s
        cubic-bezier(0.22, 1, 0.36, 1);
}


.lavAboutPhilosophyPrinciple::before {

    content: "";

    position: absolute;

    top: -70px;
    right: -65px;

    width: 180px;
    height: 180px;

    border:
        1px solid
        rgba(116, 81, 130, 0.07);

    border-radius: 50%;

    transition:
        transform 0.5s
        cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s ease;
}


.lavAboutPhilosophyPrinciple::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            rgba(120, 85, 134, 0),
            rgba(120, 85, 134, 0.65),
            rgba(120, 85, 134, 0)
        );

    opacity: 0;

    transform:
        scaleX(0.35);

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


.lavAboutPhilosophyPrinciple:hover {

    z-index: 2;

    background:
        linear-gradient(
            160deg,
            #ffffff,
            #f7f0f8
        );

    transform:
        translateY(-7px);
}


.lavAboutPhilosophyPrinciple:hover::before {

    border-color:
        rgba(116, 81, 130, 0.13);

    transform:
        scale(1.08);
}


.lavAboutPhilosophyPrinciple:hover::after {

    opacity: 1;

    transform:
        scaleX(1);
}


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

.lavAboutPhilosophyPrincipleNumber {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom:
        clamp(35px, 4vw, 48px);

    border:
        1px solid
        rgba(111, 78, 123, 0.14);

    border-radius: 50%;

    color: #80608b;

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

    font-size: 0.62rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.08em;

    box-shadow:
        0 10px 25px
        rgba(69, 48, 77, 0.06);
}


/* ============================================================
   PRINCIPLE BODY
============================================================ */

.lavAboutPhilosophyPrincipleBody {

    position: relative;

    z-index: 2;
}


/* ============================================================
   PRINCIPLE ICON
============================================================ */

.lavAboutPhilosophyPrincipleIcon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 57px;
    height: 57px;

    margin-bottom: 24px;

    border:
        1px solid
        rgba(110, 77, 122, 0.13);

    border-radius:
        19px;

    color: #795984;

    background:
        linear-gradient(
            145deg,
            rgba(236, 225, 239, 0.8),
            rgba(255, 255, 255, 0.72)
        );

    box-shadow:
        0 15px 34px
        rgba(72, 51, 80, 0.07);

    transition:
        transform 0.38s
        cubic-bezier(0.22, 1, 0.36, 1),
        color 0.38s ease;
}


.lavAboutPhilosophyPrincipleIcon svg {

    display: block;

    width: 34px;
    height: 34px;
}


.lavAboutPhilosophyPrinciple:hover
.lavAboutPhilosophyPrincipleIcon {

    color: #63466f;

    transform:
        translateY(-3px)
        rotate(-2deg);
}


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

.lavAboutPhilosophyPrinciple h3 {

    max-width: 310px;

    margin:
        0 0 17px;

    color: #514355;

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

    font-size:
        clamp(1.62rem, 2.15vw, 2.1rem);

    font-weight: 600;

    line-height: 1.12;

    letter-spacing:
        -0.025em;

    text-wrap: balance;
}


/* ============================================================
   PRINCIPLE COPY
============================================================ */

.lavAboutPhilosophyPrinciple p {

    max-width: 335px;

    margin: 0;

    color: #786e7c;

    font-size: 0.96rem;

    line-height: 1.79;
}


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

.lavAboutPhilosophyClosing {

    position: relative;

    display: grid;

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

    align-items: center;

    gap:
        clamp(30px, 5vw, 70px);

    max-width: 1030px;

    margin-inline:
        auto;

    padding:
        clamp(40px, 5vw, 63px)
        clamp(35px, 6vw, 75px);

    border:
        1px solid
        rgba(104, 74, 116, 0.12);

    border-radius:
        36px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.72),
            rgba(250, 246, 250, 0.46)
        );

    box-shadow:
        0 25px 65px
        rgba(66, 45, 74, 0.08),
        inset 0 1px 0
        rgba(255, 255, 255, 0.87);

    backdrop-filter:
        blur(12px);

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


.lavAboutPhilosophyClosing::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 130px;

    width: 1px;
    height: 54%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(111, 78, 123, 0.2),
            transparent
        );

    transform:
        translateY(-50%);
}


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

.lavAboutPhilosophyClosing > p {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0;

    color: #56475a;

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

    font-size:
        clamp(1.75rem, 2.8vw, 2.65rem);

    font-weight: 500;

    line-height: 1.27;

    letter-spacing:
        -0.026em;
}


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

.lavAboutPhilosophyClosingBotanical {

    position: relative;

    width: 105px;
    height: 190px;

    margin-inline:
        auto;

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

    transform-origin:
        bottom center;

    transition:
        transform 0.25s ease-out;

    pointer-events: none;

    will-change:
        transform;
}


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

.lavAboutPhilosophyClosingStem {

    position: absolute;

    bottom: 5px;
    left: 51px;

    width: 2px;
    height: 150px;

    border-radius: 999px;

    background:
        linear-gradient(
            to top,
            #617453,
            #98a98a
        );

    transform:
        rotate(3deg);
}


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

.lavAboutPhilosophyClosingLeaf {

    position: absolute;

    width: 40px;
    height: 14px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #91a181,
            #637655
        );

    box-shadow:
        0 5px 12px
        rgba(69, 87, 60, 0.1);
}


.lavAboutPhilosophyClosingLeafOne {

    bottom: 48px;
    left: 14px;

    transform:
        rotate(21deg);
}


.lavAboutPhilosophyClosingLeafTwo {

    bottom: 86px;
    left: 52px;

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


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

.lavAboutPhilosophyClosingBud {

    position: absolute;

    width: 19px;
    height: 32px;

    border-radius:
        65% 65% 43% 43%;

    background:
        linear-gradient(
            145deg,
            #c4a9cf,
            #72507e
        );

    box-shadow:
        0 5px 13px
        rgba(85, 57, 94, 0.15);
}


.lavAboutPhilosophyClosingBudOne {

    top: 5px;
    left: 43px;
}


.lavAboutPhilosophyClosingBudTwo {

    top: 29px;
    left: 24px;

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


.lavAboutPhilosophyClosingBudThree {

    top: 32px;
    left: 61px;

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


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

.lavAboutPhilosophy .reveal-soft {

    opacity: 1;

    transform: none;

    filter: none;
}


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

.js .lavAboutPhilosophy .reveal-soft {

    opacity: 0;

    transform:
        translateY(28px);

    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 .lavAboutPhilosophy .reveal-soft.is-visible {

    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}


.js .lavAboutPhilosophy .delay-1 {

    transition-delay: 100ms;
}


.js .lavAboutPhilosophy .delay-2 {

    transition-delay: 190ms;
}


.js .lavAboutPhilosophy .delay-3 {

    transition-delay: 280ms;
}


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

@media (min-width: 1500px) {

    .lavAboutPhilosophyManifesto {

        gap: 85px;

        padding:
            72px;
    }


    .lavAboutPhilosophyPrinciple {

        min-height: 485px;
    }

}


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

@media (max-width: 1160px) {

    .lavAboutPhilosophyHeaderGrid {

        gap: 65px;
    }


    .lavAboutPhilosophyManifesto {

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

        gap: 42px;

        padding:
            48px;
    }


    .lavAboutPhilosophyPrinciple {

        padding:
            42px 34px;
    }


    .lavAboutPhilosophyClosing {

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


    .lavAboutPhilosophyClosing::before {

        left: 112px;
    }

}


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

@media (max-width: 960px) {

    .lavAboutPhilosophy {

        padding:
            105px 0;
    }


    .lavAboutPhilosophyHeader {

        margin-bottom: 75px;
    }


    .lavAboutPhilosophyHeaderGrid {

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

        align-items: start;

        gap: 35px;
    }


    .lavAboutPhilosophyHeaderNote {

        max-width: 620px;
    }


    .lavAboutPhilosophyManifesto {

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

        gap: 35px;
    }


    .lavAboutPhilosophyQuote {

        grid-column:
            1 / -1;

        margin-left: 87px;
    }


    .lavAboutPhilosophyPrinciples {

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


    .lavAboutPhilosophyPrinciple {

        display: grid;

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

        gap: 27px;

        min-height: 0;
    }


    .lavAboutPhilosophyPrincipleNumber {

        margin-bottom: 0;
    }


    .lavAboutPhilosophyPrincipleBody {

        display: grid;

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

        column-gap: 25px;
    }


    .lavAboutPhilosophyPrincipleIcon {

        grid-row:
            1 / 3;

        margin-bottom: 0;
    }


    .lavAboutPhilosophyPrinciple h3 {

        max-width: 540px;

        margin-top: 1px;
    }


    .lavAboutPhilosophyPrinciple p {

        max-width: 680px;
    }

}


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

@media (max-width: 720px) {

    .lavAboutPhilosophy {

        padding:
            87px 0 94px;
    }


    .lavAboutPhilosophy .container {

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


    .lavAboutPhilosophyHeader {

        margin-bottom: 58px;
    }


    .lavAboutPhilosophyHeader h2 {

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


    .lavAboutPhilosophyManifesto {

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

        gap: 36px;

        padding:
            36px 28px;

        border-radius:
            30px;
    }


    .lavAboutPhilosophyManifestoRail {

        flex-direction: row;

        justify-content: flex-start;

        min-height: auto;
    }


    .lavAboutPhilosophyManifestoRail > span {

        width: 52px;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                rgba(111, 78, 123, 0.05),
                rgba(111, 78, 123, 0.5)
            );
    }


    .lavAboutPhilosophyManifestoRail small {

        writing-mode: initial;

        transform: none;
    }


    .lavAboutPhilosophyManifestoLead {

        font-size:
            clamp(2rem, 8vw, 2.75rem);
    }


    .lavAboutPhilosophyQuote {

        grid-column: auto;

        margin-left: 0;

        border-radius:
            26px;
    }


    .lavAboutPhilosophyPrinciple {

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

        gap: 23px;

        padding:
            38px 28px;
    }


    .lavAboutPhilosophyPrincipleBody {

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


    .lavAboutPhilosophyPrincipleIcon {

        grid-row: auto;

        margin-bottom: 21px;
    }


    .lavAboutPhilosophyClosing {

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

        gap: 30px;

        padding:
            38px 30px;

        border-radius:
            28px;
    }


    .lavAboutPhilosophyClosing::before {

        left: 93px;
    }


    .lavAboutPhilosophyClosingBotanical {

        transform:
            rotate(-7deg)
            scale(0.78);
    }

}


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

@media (max-width: 560px) {

    .lavAboutPhilosophyHeader h2 {

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

        line-height: 0.99;
    }


    .lavAboutPhilosophyHeaderNote {

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


    .lavAboutPhilosophyHeaderMark {

        width: 34px;
        height: 34px;
    }


    .lavAboutPhilosophyManifesto {

        padding:
            30px 21px;
    }


    .lavAboutPhilosophyManifestoLead {

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


    .lavAboutPhilosophyQuote {

        padding:
            32px 25px;
    }


    .lavAboutPhilosophyQuoteMark {

        height: 54px;

        font-size: 6rem;
    }


    .lavAboutPhilosophyQuote blockquote {

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


    .lavAboutPhilosophyPrinciple {

        padding:
            34px 23px;
    }


    .lavAboutPhilosophyPrinciple h3 {

        font-size:
            clamp(1.55rem, 7vw, 1.95rem);
    }


    .lavAboutPhilosophyClosing {

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

        gap: 13px;

        padding:
            34px 25px;
    }


    .lavAboutPhilosophyClosing::before {

        display: none;
    }


    .lavAboutPhilosophyClosingBotanical {

        width: 80px;
        height: 112px;

        margin:
            0;

        overflow: hidden;

        transform:
            rotate(-7deg)
            scale(0.7);

        transform-origin:
            bottom left;
    }


    .lavAboutPhilosophyClosing > p {

        font-size:
            clamp(1.6rem, 7.8vw, 2.15rem);
    }

}


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

@media (max-width: 390px) {

    .lavAboutPhilosophyEyebrow {

        gap: 10px;
    }


    .lavAboutPhilosophyEyebrow > span {

        width: 30px;
    }


    .lavAboutPhilosophyHeader h2 {

        font-size:
            clamp(2.4rem, 13vw, 3.25rem);
    }


    .lavAboutPhilosophyManifesto {

        padding:
            27px 18px;
    }


    .lavAboutPhilosophyQuote {

        padding:
            29px 21px;
    }


    .lavAboutPhilosophyQuoteSignature {

        align-items: flex-start;
    }


    .lavAboutPhilosophyPrinciple {

        padding:
            31px 20px;
    }


    .lavAboutPhilosophyClosing {

        padding:
            30px 21px;
    }

}


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

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

    .js .lavAboutPhilosophy .reveal-soft {

        opacity: 1;

        transform: none;

        filter: none;

        transition: none;
    }


    .lavAboutPhilosophyPrinciple,
    .lavAboutPhilosophyPrinciple::before,
    .lavAboutPhilosophyPrinciple::after,
    .lavAboutPhilosophyPrincipleIcon,
    .lavAboutPhilosophyClosingBotanical {

        transition: none;
    }


    .lavAboutPhilosophyPrinciple:hover {

        transform: none;
    }


    .lavAboutPhilosophyClosingBotanical {

        transform:
            rotate(-7deg);
    }

}