/* ============================================================
   LAND & STONE WORKS LLC
   CONTACT.HTML
   02. CONTACT HERO
   ============================================================ */


/* ============================================================
   01. HERO SHELL
   Header + Hero can NEVER exceed 100svh.
   ============================================================ */

.lsw-contact-hero {
    position: relative;

    width: 100%;

    height:
        min(
            585px,
            calc(
                100vh -
                var(--lsw-header-height)
            )
        );

    height:
        min(
            585px,
            calc(
                100svh -
                var(--lsw-header-height)
            )
        );

    min-height: 0;

    overflow: hidden;

    color:
        var(--lsw-text);

    background:
        var(--lsw-ivory-soft);

    isolation: isolate;
}


/* Mineral lighting */

.lsw-contact-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 76% 47%,
            rgba(199, 163, 93, 0.095),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 65%,
            rgba(36, 59, 42, 0.035),
            transparent 29%
        );
}


/* Soft surface depth */

.lsw-contact-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.2;

    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.52),
            transparent 35%,
            rgba(215, 206, 188, 0.14)
        );
}


/* ============================================================
   02. MAIN LAYOUT
   ============================================================ */

.lsw-contact-hero__inner {
    position: relative;

    z-index: 4;

    display: grid;

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

    align-items: center;

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

    height: 100%;

    padding-block:
        clamp(
            22px,
            3.5vh,
            42px
        );
}


/* ============================================================
   03. BACKGROUND GEOMETRY
   ============================================================ */

.lsw-contact-hero__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


.lsw-contact-hero__shape {
    position: absolute;

    display: block;

    border:
        1px solid
        rgba(36, 59, 42, 0.045);

    transform:
        rotate(30deg);
}


.lsw-contact-hero__shape--one {
    top: -120px;
    left: -145px;

    width: 310px;
    height: 310px;

    background:
        rgba(215, 206, 188, 0.11);
}


.lsw-contact-hero__shape--two {
    left: 20%;
    bottom: -110px;

    width: 210px;
    height: 210px;

    border-color:
        rgba(180, 140, 69, 0.10);
}


.lsw-contact-hero__background-line {
    position: absolute;

    top: 0;
    left: 43%;

    width: 1px;
    height: 27%;

    background:
        linear-gradient(
            180deg,
            rgba(180, 140, 69, 0),
            rgba(180, 140, 69, 0.32)
        );
}


/* ============================================================
   04. CONTENT
   ============================================================ */

.lsw-contact-hero__content {
    position: relative;

    z-index: 6;

    max-width: 680px;
}


/* ============================================================
   05. EYEBROW
   ============================================================ */

.lsw-contact-hero__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    width: fit-content;

    margin-bottom:
        clamp(
            18px,
            2.5vh,
            27px
        );

    font-size: 0.75rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.135em;

    text-transform: uppercase;
}


.lsw-contact-hero__eyebrow-label {
    color:
        var(--lsw-gold-700);
}


.lsw-contact-hero__eyebrow-location {
    color:
        var(--lsw-forest-700);
}


.lsw-contact-hero__eyebrow-line {
    width: 52px;
    height: 1px;

    background:
        var(--lsw-gold-600);

    transform-origin:
        left center;
}


/* ============================================================
   06. TITLE
   ============================================================ */

.lsw-contact-hero__title {
    max-width: 700px;

    margin: 0;

    font-family:
        var(--lsw-font-display);

    font-size:
        clamp(
            3.45rem,
            5vw,
            5.55rem
        );

    font-weight: 500;

    line-height: 0.91;

    letter-spacing: -0.047em;

    color:
        var(--lsw-charcoal);
}


.lsw-contact-hero__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.055em;
}


.lsw-contact-hero__title-mask > span {
    display: block;
}


.lsw-contact-hero__title-accent {
    color:
        var(--lsw-forest-800);
}


/* ============================================================
   07. DIVIDER
   ============================================================ */

.lsw-contact-hero__divider {
    display: flex;

    align-items: center;

    width:
        min(
            100%,
            330px
        );

    margin:
        clamp(17px, 2.4vh, 25px)
        0;
}


.lsw-contact-hero__divider-line {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--lsw-gold-500),
            rgba(180, 140, 69, 0.17)
        );

    transform-origin:
        left center;
}


.lsw-contact-hero__divider-mark {
    display: grid;

    place-items: center;

    width: 18px;
    height: 18px;

    margin-left: -1px;

    background:
        var(--lsw-ivory-soft);

    border:
        2px solid
        var(--lsw-gold-500);

    transform:
        rotate(30deg);
}


.lsw-contact-hero__divider-mark span {
    width: 4px;
    height: 4px;

    background:
        var(--lsw-gold-600);
}


/* ============================================================
   08. DESCRIPTION
   ============================================================ */

.lsw-contact-hero__description {
    max-width: 560px;

    margin:
        0
        0
        clamp(
            22px,
            3vh,
            33px
        );

    font-size:
        clamp(
            1rem,
            0.96rem + 0.16vw,
            1.1rem
        );

    line-height: 1.7;

    color:
        var(--lsw-text-soft);

    text-wrap: pretty;
}


/* ============================================================
   09. ACTION
   ============================================================ */

.lsw-contact-hero__action {
    position: relative;

    display: inline-flex;

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

    gap: 19px;

    min-height: 56px;

    padding:
        14px
        21px
        14px
        24px;

    overflow: hidden;

    color:
        var(--lsw-white);

    background:
        var(--lsw-forest-800);

    border:
        1px solid
        var(--lsw-forest-800);

    border-radius:
        var(--lsw-radius-sm);

    box-shadow:
        0 12px 30px
        rgba(36, 59, 42, 0.12);

    font-size: 0.82rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    isolation: isolate;

    transition:
        color
        430ms
        var(--lsw-ease),
        border-color
        430ms
        var(--lsw-ease),
        transform
        430ms
        var(--lsw-ease),
        box-shadow
        430ms
        var(--lsw-ease);
}


.lsw-contact-hero__action::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--lsw-gold-500);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        520ms
        var(--lsw-ease);
}


.lsw-contact-hero__action:hover::before {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


.lsw-contact-hero__action:hover {
    color:
        var(--lsw-forest-950);

    border-color:
        var(--lsw-gold-500);

    transform:
        translateY(-2px);

    box-shadow:
        var(--lsw-shadow-gold);
}


.lsw-contact-hero__action-icon {
    display: grid;

    place-items: center;

    width: 19px;
    height: 19px;

    color:
        var(--lsw-gold-300);

    transition:
        color
        380ms
        var(--lsw-ease),
        transform
        380ms
        var(--lsw-ease);
}


.lsw-contact-hero__action-icon svg {
    width: 100%;
    height: 100%;
}


.lsw-contact-hero__action:hover
.lsw-contact-hero__action-icon {
    color:
        var(--lsw-forest-950);

    transform:
        translateY(3px);
}


/* ============================================================
   10. VISUAL
   ============================================================ */

.lsw-contact-hero__visual {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}


/* ============================================================
   11. MAIN IMAGE
   ============================================================ */

.lsw-contact-hero__image {
    position: absolute;

    z-index: 3;

    top: 2%;
    right: 0;

    width: 89%;
    height: 88%;

    margin: 0;

    overflow: hidden;

    background:
        var(--lsw-limestone);

    clip-path:
        polygon(
            14% 0,
            100% 0,
            100% 83%,
            88% 100%,
            0 100%,
            0 22%
        );

    box-shadow:
        0 26px 68px
        rgba(24, 38, 28, 0.14);
}


/* Very fine interior frame */

.lsw-contact-hero__image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.32);
}


/* ============================================================
   12. MAIN MEDIA
   ============================================================ */

.lsw-contact-hero__media {
    position: absolute;

    inset: 0;

    transform:
        translate3d(
            var(--contact-hero-x, 0px),
            var(--contact-hero-y, 0px),
            0
        )
        scale(1.045);

    will-change:
        transform;
}


.lsw-contact-hero__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* ============================================================
   13. DETAIL IMAGE
   Same source, different crop.
   ============================================================ */

.lsw-contact-hero__detail {
    position: absolute;

    z-index: 7;

    left: 0;
    bottom: 1%;

    width: 30%;
    height: 35%;

    margin: 0;

    overflow: hidden;

    background:
        var(--lsw-limestone);

    border:
        7px solid
        var(--lsw-ivory-soft);

    clip-path:
        polygon(
            14% 0,
            100% 0,
            100% 100%,
            0 100%,
            0 16%
        );

    box-shadow:
        0 20px 46px
        rgba(24, 38, 28, 0.17);
}


.lsw-contact-hero__detail-media {
    position: absolute;

    inset: 0;

    transform:
        translate3d(
            var(--contact-detail-x, 0px),
            var(--contact-detail-y, 0px),
            0
        )
        scale(1.08);

    will-change:
        transform;
}


.lsw-contact-hero__detail img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        74% center;
}


/* ============================================================
   14. GOLD VISUAL LINE
   ============================================================ */

.lsw-contact-hero__visual-line {
    position: absolute;

    z-index: 8;

    top: 0;
    left: 11%;

    width: 1px;
    height: 34%;

    background:
        var(--lsw-gold-500);

    transform-origin:
        top center;
}


/* ============================================================
   15. MEDALLION
   ============================================================ */

.lsw-contact-hero__medallion {
    position: absolute;

    z-index: 10;

    right: 2%;
    bottom: 2%;

    width:
        clamp(
            80px,
            7vw,
            112px
        );

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    background:
        var(--lsw-gold-500);

    clip-path:
        polygon(
            25% 6.7%,
            75% 6.7%,
            100% 50%,
            75% 93.3%,
            25% 93.3%,
            0 50%
        );

    filter:
        drop-shadow(
            0 15px 25px
            rgba(24, 38, 28, 0.18)
        );
}


.lsw-contact-hero__medallion-inner {
    position: absolute;

    inset: 3px;

    display: grid;

    place-items: center;

    background:
        var(--lsw-ivory);

    clip-path: inherit;
}


.lsw-contact-hero__medallion-inner img {
    width: 56%;
    height: 56%;

    object-fit: contain;

    opacity: 0.13;

    filter:
        grayscale(1);
}


/* ============================================================
   16. VISUAL CAPTION
   ============================================================ */

.lsw-contact-hero__visual-caption {
    position: absolute;

    z-index: 9;

    top: 7%;
    right: 3%;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        8px
        11px;

    color:
        var(--lsw-ivory-soft);

    background:
        rgba(29, 48, 34, 0.78);

    backdrop-filter:
        blur(8px);

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

    font-size: 0.59rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.lsw-contact-hero__visual-caption i {
    width: 4px;
    height: 4px;

    border:
        1px solid
        var(--lsw-gold-300);

    transform:
        rotate(45deg);
}


/* ============================================================
   17. BOTTOM DETAIL
   ============================================================ */

.lsw-contact-hero__bottom-detail {
    position: absolute;

    z-index: 10;

    left: 0;
    bottom: 0;

    width: 20%;
    height: 1px;

    background:
        rgba(36, 59, 42, 0.10);

    pointer-events: none;
}


.lsw-contact-hero__bottom-detail span {
    display: block;

    width: 42%;
    height: 1px;

    background:
        var(--lsw-gold-500);
}


/* ============================================================
   18. SHORT VIEWPORT
   JS controlled.
   ============================================================ */

.lsw-contact-hero.is-short
.lsw-contact-hero__inner {
    padding-block: 12px;
}


.lsw-contact-hero.is-short
.lsw-contact-hero__eyebrow {
    margin-bottom: 11px;
}


.lsw-contact-hero.is-short
.lsw-contact-hero__title {
    font-size:
        clamp(
            2.9rem,
            4.2vw,
            4.35rem
        );
}


.lsw-contact-hero.is-short
.lsw-contact-hero__divider {
    margin:
        11px
        0;
}


.lsw-contact-hero.is-short
.lsw-contact-hero__description {
    margin-bottom: 15px;

    line-height: 1.5;
}


.lsw-contact-hero.is-short
.lsw-contact-hero__action {
    min-height: 48px;
}


/* ============================================================
   19. INITIAL ENTRANCE STATES
   ============================================================ */

html.lsw-js
.lsw-contact-hero__eyebrow {
    opacity: 0;

    transform:
        translateX(-20px);
}


html.lsw-js
.lsw-contact-hero__eyebrow-line {
    transform:
        scaleX(0);
}


html.lsw-js
.lsw-contact-hero__title-mask > span {
    opacity: 0.1;

    transform:
        translateY(112%);
}


html.lsw-js
.lsw-contact-hero__divider-line {
    transform:
        scaleX(0);
}


html.lsw-js
.lsw-contact-hero__divider-mark {
    opacity: 0;

    transform:
        rotate(30deg)
        scale(0.4);
}


html.lsw-js
.lsw-contact-hero__description,
html.lsw-js
.lsw-contact-hero__action {
    opacity: 0;

    transform:
        translateY(18px);
}


html.lsw-js
.lsw-contact-hero__image {
    opacity: 0;

    clip-path:
        polygon(
            14% 0,
            14% 0,
            14% 100%,
            0 100%,
            0 22%
        );
}


html.lsw-js
.lsw-contact-hero__detail {
    opacity: 0;

    transform:
        translate(-22px, 22px);
}


html.lsw-js
.lsw-contact-hero__medallion {
    opacity: 0;

    transform:
        rotate(-16deg)
        scale(0.72);
}


html.lsw-js
.lsw-contact-hero__visual-caption {
    opacity: 0;

    transform:
        translateY(-12px);
}


html.lsw-js
.lsw-contact-hero__visual-line {
    transform:
        scaleY(0);
}


/* ============================================================
   20. READY STATES
   ============================================================ */

html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__eyebrow {
    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        650ms
        ease
        100ms,
        transform
        850ms
        var(--lsw-ease)
        100ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__eyebrow-line {
    transform:
        scaleX(1);

    transition:
        transform
        900ms
        var(--lsw-ease)
        220ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__title-mask > span {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        ease,
        transform
        1050ms
        var(--lsw-ease);
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__title-mask:nth-child(1) > span {
    transition-delay: 170ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__title-mask:nth-child(2) > span {
    transition-delay: 260ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__title-mask:nth-child(3) > span {
    transition-delay: 350ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__divider-line {
    transform:
        scaleX(1);

    transition:
        transform
        1000ms
        var(--lsw-ease)
        470ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__divider-mark {
    opacity: 1;

    transform:
        rotate(30deg)
        scale(1);

    transition:
        opacity
        450ms
        ease
        650ms,
        transform
        720ms
        var(--lsw-ease)
        610ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__description {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        ease
        530ms,
        transform
        850ms
        var(--lsw-ease)
        530ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__action {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        ease
        650ms,
        transform
        850ms
        var(--lsw-ease)
        650ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__image {
    opacity: 1;

    clip-path:
        polygon(
            14% 0,
            100% 0,
            100% 83%,
            88% 100%,
            0 100%,
            0 22%
        );

    transition:
        opacity
        700ms
        ease
        160ms,
        clip-path
        1200ms
        var(--lsw-ease)
        160ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__detail {
    opacity: 1;

    transform:
        translate(0, 0);

    transition:
        opacity
        650ms
        ease
        520ms,
        transform
        950ms
        var(--lsw-ease)
        520ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__visual-line {
    transform:
        scaleY(1);

    transition:
        transform
        1100ms
        var(--lsw-ease)
        430ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__medallion {
    opacity: 1;

    transform:
        rotate(0)
        scale(1);

    transition:
        opacity
        550ms
        ease
        720ms,
        transform
        900ms
        var(--lsw-ease)
        680ms;
}


html.lsw-js
.lsw-contact-hero.is-ready
.lsw-contact-hero__visual-caption {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        ease
        730ms,
        transform
        800ms
        var(--lsw-ease)
        730ms;
}


/* ============================================================
   21. REDUCED MOTION
   ============================================================ */

html.lsw-reduced-motion
.lsw-contact-hero__media,
html.lsw-reduced-motion
.lsw-contact-hero__detail-media {
    transform:
        scale(1.04) !important;
}


/* ============================================================
   22. COMPUTER
   ============================================================ */

@media (min-width: 1200px) {

    .lsw-contact-hero__inner {
        grid-template-columns:
            minmax(500px, 0.88fr)
            minmax(600px, 1.12fr);
    }


    .lsw-contact-hero__content {
        padding-left:
            clamp(
                0px,
                1vw,
                15px
            );
    }

}


/* ============================================================
   23. TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1199px) {

    .lsw-contact-hero {
        height:
            min(
                560px,
                calc(
                    100svh -
                    var(--lsw-header-height)
                )
            );
    }


    .lsw-contact-hero__inner {
        grid-template-columns:
            minmax(0, 0.94fr)
            minmax(0, 1.06fr);

        gap: 33px;

        width:
            calc(100% - 54px);

        padding-block: 21px;
    }


    .lsw-contact-hero__title {
        font-size:
            clamp(
                3rem,
                5.9vw,
                4.45rem
            );
    }


    .lsw-contact-hero__description {
        max-width: 470px;

        font-size: 0.96rem;

        line-height: 1.58;
    }


    .lsw-contact-hero__eyebrow {
        font-size: 0.67rem;
    }


    .lsw-contact-hero__eyebrow-line {
        width: 36px;
    }


    .lsw-contact-hero__image {
        width: 92%;
    }


    .lsw-contact-hero__detail {
        width: 34%;
    }


    .lsw-contact-hero__visual-caption {
        font-size: 0.52rem;
    }


    .lsw-contact-hero__action {
        min-height: 51px;

        font-size: 0.74rem;
    }

}


/* ============================================================
   24. MOBILE
   ============================================================ */

@media (min-width: 481px) and (max-width: 767px) {

    .lsw-contact-hero {
        height:
            min(
                600px,
                calc(
                    100svh -
                    var(--lsw-header-height)
                )
            );
    }


    .lsw-contact-hero__inner {
        grid-template-columns: 1fr;

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

        align-items: stretch;

        gap:
            clamp(
                13px,
                2vh,
                19px
            );

        width:
            calc(100% - 38px);

        padding:
            17px
            0
            12px;
    }


    .lsw-contact-hero__content {
        max-width: 620px;
    }


    .lsw-contact-hero__eyebrow {
        gap: 9px;

        margin-bottom: 10px;

        font-size: 0.61rem;
    }


    .lsw-contact-hero__eyebrow-line {
        width: 31px;
    }


    .lsw-contact-hero__title {
        max-width: 600px;

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

        line-height: 0.91;
    }


    .lsw-contact-hero__divider {
        width: 210px;

        margin:
            9px
            0;
    }


    .lsw-contact-hero__description {
        max-width: 550px;

        margin-bottom: 11px;

        font-size: 0.89rem;

        line-height: 1.45;
    }


    .lsw-contact-hero__action {
        min-height: 44px;

        padding:
            10px
            14px;

        font-size: 0.67rem;
    }


    .lsw-contact-hero__visual {
        min-height: 0;
    }


    .lsw-contact-hero__image {
        top: 0;
        right: 0;

        width: 92%;
        height: 100%;

        clip-path:
            polygon(
                10% 0,
                100% 0,
                100% 82%,
                90% 100%,
                0 100%,
                0 19%
            );
    }


    .lsw-contact-hero__detail {
        left: 0;
        bottom: 0;

        width: 28%;
        height: 48%;

        border-width: 5px;
    }


    .lsw-contact-hero__medallion {
        right: 1%;
        bottom: 2%;

        width: 65px;
    }


    .lsw-contact-hero__visual-caption {
        top: 10px;
        right: 8px;

        font-size: 0.5rem;
    }

}


/* ============================================================
   25. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .lsw-contact-hero {
        height:
            min(
                575px,
                calc(
                    100svh -
                    var(--lsw-header-height)
                )
            );
    }


    .lsw-contact-hero__inner {
        grid-template-columns: 1fr;

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

        gap: 9px;

        width:
            calc(100% - 28px);

        padding:
            11px
            0
            8px;
    }


    .lsw-contact-hero__eyebrow {
        gap: 7px;

        margin-bottom: 7px;

        font-size: 0.55rem;

        letter-spacing: 0.1em;
    }


    .lsw-contact-hero__eyebrow-line {
        width: 22px;
    }


    .lsw-contact-hero__title {
        font-size:
            clamp(
                2.15rem,
                10.3vw,
                2.8rem
            );

        line-height: 0.9;
    }


    .lsw-contact-hero__divider {
        width: 170px;

        margin:
            7px
            0;
    }


    .lsw-contact-hero__divider-mark {
        width: 14px;
        height: 14px;
    }


    .lsw-contact-hero__description {
        max-width: 420px;

        margin-bottom: 8px;

        font-size: 0.77rem;

        line-height: 1.38;
    }


    .lsw-contact-hero__action {
        min-height: 41px;

        padding:
            8px
            11px;

        gap: 10px;

        font-size: 0.59rem;
    }


    .lsw-contact-hero__action-icon {
        width: 15px;
        height: 15px;
    }


    .lsw-contact-hero__visual {
        min-height: 0;
    }


    .lsw-contact-hero__image {
        top: 0;

        width: 94%;
        height: 100%;

        clip-path:
            polygon(
                9% 0,
                100% 0,
                100% 83%,
                89% 100%,
                0 100%,
                0 18%
            );
    }


    .lsw-contact-hero__detail {
        width: 29%;
        height: 45%;

        border-width: 4px;
    }


    .lsw-contact-hero__medallion {
        width: 52px;
    }


    .lsw-contact-hero__visual-caption {
        display: none;
    }


    .lsw-contact-hero__visual-line {
        left: 8%;

        height: 28%;
    }


    /*
        For extremely short phones we preserve
        the 100svh rule by simplifying copy.
    */

    .lsw-contact-hero.is-short
    .lsw-contact-hero__description {
        display: none;
    }


    .lsw-contact-hero.is-short
    .lsw-contact-hero__divider {
        margin:
            5px
            0;
    }

}










































/* ============================================================
   LAND & STONE WORKS LLC
   CONTACT.HTML
   03. CONTACT / ESTIMATE FORM
   ============================================================ */


/* ============================================================
   01. SECTION
   ============================================================ */

.lsw-estimate {
    position: relative;

    padding:
        clamp(110px, 8.5vw, 155px)
        0
        clamp(105px, 8vw, 145px);

    overflow: hidden;

    color:
        var(--lsw-text);

    background:
        var(--lsw-sand);

    isolation: isolate;
}


/* Mineral lighting */

.lsw-estimate::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 83% 19%,
            rgba(199, 163, 93, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 7% 78%,
            rgba(36, 59, 42, 0.045),
            transparent 28%
        );
}


/* ============================================================
   02. BACKGROUND GEOMETRY
   ============================================================ */

.lsw-estimate__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


.lsw-estimate__shape {
    position: absolute;

    border:
        1px solid
        rgba(36, 59, 42, 0.055);

    transform:
        rotate(30deg);
}


.lsw-estimate__shape--one {
    top: 8%;
    right: -130px;

    width: 310px;
    height: 310px;
}


.lsw-estimate__shape--two {
    left: -150px;
    bottom: 5%;

    width: 285px;
    height: 285px;

    border-color:
        rgba(180, 140, 69, 0.10);
}


/* ============================================================
   03. HEADER
   ============================================================ */

.lsw-estimate__header {
    margin-bottom:
        clamp(
            52px,
            5.5vw,
            82px
        );
}


.lsw-estimate__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    font-size: 0.76rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        var(--lsw-forest-700);
}


.lsw-estimate__eyebrow span:first-child {
    color:
        var(--lsw-gold-700);
}


.lsw-estimate__eyebrow i {
    width: 51px;
    height: 1px;

    background:
        var(--lsw-gold-600);

    transform-origin:
        left center;
}


.lsw-estimate__heading-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(300px, 0.7fr);

    align-items: end;

    gap:
        clamp(
            55px,
            8vw,
            125px
        );
}


.lsw-estimate__title {
    max-width: 910px;

    margin: 0;

    font-family:
        var(--lsw-font-display);

    font-size:
        clamp(
            3.25rem,
            5vw,
            5.5rem
        );

    font-weight: 500;

    line-height: 0.94;

    letter-spacing: -0.045em;

    color:
        var(--lsw-charcoal);
}


.lsw-estimate__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.05em;
}


.lsw-estimate__title-mask > span {
    display: block;
}


.lsw-estimate__title-accent {
    color:
        var(--lsw-forest-800);
}


.lsw-estimate__intro {
    max-width: 470px;

    margin: 0;

    font-size:
        clamp(
            1rem,
            0.96rem + 0.17vw,
            1.1rem
        );

    line-height: 1.72;

    color:
        var(--lsw-text-soft);
}


/* ============================================================
   04. MAIN COMPOSITION
   ============================================================ */

.lsw-estimate__composition {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(305px, 0.34fr)
        minmax(0, 0.66fr);

    overflow: hidden;

    border:
        1px solid
        rgba(36, 59, 42, 0.11);

    border-radius:
        var(--lsw-radius-sm);

    background:
        var(--lsw-ivory-soft);

    box-shadow:
        0 28px 75px
        rgba(24, 38, 28, 0.10);
}


/* ============================================================
   05. CONTACT PANEL
   ============================================================ */

.lsw-estimate__contact {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        clamp(
            35px,
            4vw,
            58px
        );

    overflow: hidden;

    color:
        var(--lsw-ivory-soft);

    background:
        var(--lsw-forest-950);

    isolation: isolate;
}


/* Soft gold depth */

.lsw-estimate__contact::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(199, 163, 93, 0.16),
            transparent 28%
        );
}


/* Large faceted shape */

.lsw-estimate__contact::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -120px;
    bottom: -130px;

    width: 280px;
    height: 280px;

    border:
        1px solid
        rgba(199, 163, 93, 0.12);

    transform:
        rotate(30deg);
}


/* ============================================================
   06. CONTACT INTRO
   ============================================================ */

.lsw-estimate__contact-kicker {
    display: block;

    margin-bottom: 14px;

    font-size: 0.69rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color:
        var(--lsw-gold-300);
}


.lsw-estimate__contact-top h3 {
    max-width: 380px;

    margin:
        0
        0
        18px;

    font-family:
        var(--lsw-font-display);

    font-size:
        clamp(
            2.4rem,
            3.4vw,
            3.8rem
        );

    font-weight: 500;

    line-height: 0.96;

    letter-spacing: -0.035em;

    color:
        var(--lsw-ivory-soft);
}


.lsw-estimate__contact-top p {
    max-width: 400px;

    margin: 0;

    font-size: 0.96rem;

    line-height: 1.68;

    color:
        rgba(245, 241, 232, 0.66);
}


/* ============================================================
   07. CONTACT DIVIDER
   ============================================================ */

.lsw-estimate__contact-rule {
    position: relative;

    width: 100%;
    height: 1px;

    margin:
        34px
        0;

    background:
        rgba(222, 199, 148, 0.14);
}


.lsw-estimate__contact-rule span {
    display: block;

    width: 32%;
    height: 1px;

    background:
        var(--lsw-gold-500);
}


/* ============================================================
   08. CONTACT LIST
   ============================================================ */

.lsw-estimate__contact-list {
    display: grid;

    gap: 0;
}


.lsw-estimate-contact-item {
    display: grid;

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

    gap: 18px;

    padding:
        18px
        0;

    border-bottom:
        1px solid
        rgba(222, 199, 148, 0.13);
}


.lsw-estimate-contact-item__label {
    padding-top: 3px;

    font-size: 0.64rem;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    color:
        var(--lsw-gold-500);
}


.lsw-estimate-contact-item__content {
    display: grid;

    gap: 5px;

    min-width: 0;
}


.lsw-estimate-contact-item__content a,
.lsw-estimate-contact-item__content strong,
.lsw-estimate-contact-item__content span {
    font-size: 0.84rem;

    line-height: 1.5;
}


.lsw-estimate-contact-item__content a,
.lsw-estimate-contact-item__content strong {
    font-weight: 600;

    color:
        var(--lsw-ivory-soft);
}


.lsw-estimate-contact-item__content span {
    color:
        rgba(245, 241, 232, 0.58);
}


.lsw-estimate-contact-item__content a {
    overflow-wrap: anywhere;

    transition:
        color
        350ms
        var(--lsw-ease);
}


.lsw-estimate-contact-item__content a:hover {
    color:
        var(--lsw-gold-300);
}


/* ============================================================
   09. SOCIAL
   ============================================================ */

.lsw-estimate__social {
    margin-top: auto;

    padding-top: 35px;
}


.lsw-estimate__social > span {
    display: block;

    margin-bottom: 13px;

    font-size: 0.63rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        rgba(245, 241, 232, 0.49);
}


.lsw-estimate__social > div {
    display: flex;

    flex-wrap: wrap;

    gap:
        10px
        23px;
}


.lsw-estimate__social a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding-bottom: 5px;

    border-bottom:
        1px solid
        rgba(199, 163, 93, 0.45);

    font-size: 0.81rem;

    font-weight: 700;

    color:
        var(--lsw-gold-300);
}


.lsw-estimate__social a span {
    transition:
        transform
        350ms
        var(--lsw-ease);
}


.lsw-estimate__social a:hover span {
    transform:
        translate(3px, -3px);
}


/* ============================================================
   10. CONTACT FACET
   ============================================================ */

.lsw-estimate__contact-facet {
    position: absolute;

    top: 30px;
    right: 30px;

    width: 36px;
    height: 36px;

    border:
        1px solid
        rgba(199, 163, 93, 0.47);

    transform:
        rotate(30deg);

    pointer-events: none;
}


/* ============================================================
   11. FORM PANEL
   ============================================================ */

.lsw-estimate__form-panel {
    min-width: 0;

    padding:
        clamp(
            38px,
            5vw,
            72px
        );

    background:
        var(--lsw-ivory-soft);
}


/* ============================================================
   12. FORM HEADING
   ============================================================ */

.lsw-estimate__form-heading {
    margin-bottom: 39px;
}


.lsw-estimate__form-heading > span {
    display: block;

    margin-bottom: 9px;

    font-size: 0.66rem;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--lsw-gold-700);
}


.lsw-estimate__form-heading h3 {
    margin: 0;

    font-family:
        var(--lsw-font-display);

    font-size:
        clamp(
            2.3rem,
            3vw,
            3.3rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.035em;

    color:
        var(--lsw-forest-800);
}


/* ============================================================
   13. FORM
   ============================================================ */

.lsw-estimate-form {
    display: grid;

    gap: 28px;
}


.lsw-estimate-form__row {
    display: grid;

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

    gap: 24px;
}


/* ============================================================
   14. FIELD
   ============================================================ */

.lsw-field {
    position: relative;

    min-width: 0;
}


.lsw-field label {
    display: block;

    margin-bottom: 9px;

    font-size: 0.72rem;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.065em;

    color:
        var(--lsw-charcoal);
}


.lsw-field label span,
.lsw-estimate-form__footer p span {
    color:
        var(--lsw-gold-700);
}


/* ============================================================
   15. INPUT SHELL
   ============================================================ */

.lsw-field__control {
    position: relative;

    min-width: 0;
}


.lsw-field input,
.lsw-field select,
.lsw-field textarea {
    display: block;

    width: 100%;

    border:
        1px solid
        rgba(36, 59, 42, 0.16);

    border-radius:
        var(--lsw-radius-sm);

    outline: none;

    color:
        var(--lsw-charcoal);

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

    font-family:
        var(--lsw-font-body);

    font-size: 0.96rem;

    font-weight: 500;

    transition:
        border-color
        350ms
        var(--lsw-ease),
        background-color
        350ms
        var(--lsw-ease),
        box-shadow
        350ms
        var(--lsw-ease);
}


.lsw-field input,
.lsw-field select {
    min-height: 56px;

    padding:
        14px
        16px;
}


.lsw-field textarea {
    min-height: 165px;

    padding:
        16px;

    line-height: 1.62;

    resize: vertical;
}


.lsw-field input::placeholder,
.lsw-field textarea::placeholder {
    color:
        #8A8D86;

    opacity: 1;
}


.lsw-field input:hover,
.lsw-field select:hover,
.lsw-field textarea:hover {
    border-color:
        rgba(36, 59, 42, 0.29);
}


.lsw-field input:focus,
.lsw-field select:focus,
.lsw-field textarea:focus {
    border-color:
        var(--lsw-gold-600);

    background:
        var(--lsw-white);

    box-shadow:
        0 0 0 3px
        rgba(180, 140, 69, 0.10);
}


/* ============================================================
   16. GOLD FOCUS LINE
   ============================================================ */

.lsw-field__line {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    pointer-events: none;

    background:
        var(--lsw-gold-600);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        450ms
        var(--lsw-ease);
}


.lsw-field__control:focus-within
.lsw-field__line {
    transform:
        scaleX(1);
}


/* ============================================================
   17. SELECT
   ============================================================ */

.lsw-field select {
    padding-right: 50px;

    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;
}


.lsw-field__select-arrow {
    position: absolute;

    top: 50%;
    right: 17px;

    display: grid;

    place-items: center;

    width: 20px;
    height: 20px;

    pointer-events: none;

    color:
        var(--lsw-gold-700);

    transform:
        translateY(-50%);
}


.lsw-field__select-arrow svg {
    width: 100%;
    height: 100%;
}


/* ============================================================
   18. MESSAGE
   ============================================================ */

.lsw-field__label-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.lsw-field__counter {
    margin-bottom: 9px;

    font-size: 0.66rem;

    font-weight: 600;

    color:
        var(--lsw-text-muted);

    font-variant-numeric:
        tabular-nums;
}


.lsw-field__message-footer {
    display: grid;

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

    gap: 15px;

    margin-top: 8px;
}


.lsw-field__help {
    max-width: 620px;

    font-size: 0.69rem;

    line-height: 1.5;

    color:
        var(--lsw-text-muted);
}


/* ============================================================
   19. ERRORS
   ============================================================ */

.lsw-field__error {
    display: block;

    min-height: 0;

    margin-top: 6px;

    font-size: 0.69rem;

    font-weight: 600;

    line-height: 1.4;

    color:
        #934A36;
}


.lsw-field.has-error
input,
.lsw-field.has-error
select,
.lsw-field.has-error
textarea {
    border-color:
        #A56549;
}


.lsw-field.has-error
.lsw-field__line {
    background:
        #A56549;
}


/* ============================================================
   20. FORM FOOTER
   ============================================================ */

.lsw-estimate-form__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 5px;
}


.lsw-estimate-form__footer p {
    margin: 0;

    font-size: 0.68rem;

    line-height: 1.5;

    color:
        var(--lsw-text-muted);
}


/* ============================================================
   21. SUBMIT
   ============================================================ */

.lsw-estimate-form__submit {
    position: relative;

    display: inline-flex;

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

    gap: 19px;

    min-height: 57px;

    padding:
        14px
        24px;

    overflow: hidden;

    border:
        1px solid
        var(--lsw-forest-800);

    border-radius:
        var(--lsw-radius-sm);

    color:
        var(--lsw-white);

    background:
        var(--lsw-forest-800);

    box-shadow:
        0 12px 30px
        rgba(36, 59, 42, 0.12);

    font-family:
        var(--lsw-font-body);

    font-size: 0.8rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    cursor: pointer;

    isolation: isolate;

    transition:
        color
        430ms
        var(--lsw-ease),
        border-color
        430ms
        var(--lsw-ease),
        transform
        430ms
        var(--lsw-ease),
        box-shadow
        430ms
        var(--lsw-ease);
}


.lsw-estimate-form__submit::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--lsw-gold-500);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        520ms
        var(--lsw-ease);
}


.lsw-estimate-form__submit:hover::before {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


.lsw-estimate-form__submit:hover {
    color:
        var(--lsw-forest-950);

    border-color:
        var(--lsw-gold-500);

    transform:
        translateY(-2px);

    box-shadow:
        var(--lsw-shadow-gold);
}


.lsw-estimate-form__submit svg {
    width: 20px;
    height: 20px;

    color:
        var(--lsw-gold-300);

    transition:
        color
        400ms
        var(--lsw-ease),
        transform
        400ms
        var(--lsw-ease);
}


.lsw-estimate-form__submit:hover svg {
    color:
        var(--lsw-forest-950);

    transform:
        translateX(4px);
}


/* ============================================================
   22. STATUS BANNER
   ============================================================ */

.lsw-estimate__status {
    margin-bottom: 26px;

    padding:
        14px
        17px;

    border-left:
        3px solid
        var(--lsw-gold-600);

    background:
        rgba(180, 140, 69, 0.08);

    font-size: 0.83rem;

    line-height: 1.55;

    color:
        var(--lsw-charcoal);
}


.lsw-estimate__status.is-error {
    border-left-color:
        var(--lsw-clay);

    background:
        rgba(165, 101, 73, 0.08);
}


/* ============================================================
   23. HONEYPOT
   ============================================================ */

.lsw-estimate-form__trap {
    position: absolute !important;

    left: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* ============================================================
   24. INITIAL REVEAL
   ============================================================ */

html.lsw-js
[data-estimate-reveal="eyebrow"] {
    opacity: 0;

    transform:
        translateX(-20px);
}


html.lsw-js
[data-estimate-reveal="eyebrow"] i {
    transform:
        scaleX(0);
}


html.lsw-js
.lsw-estimate__title-mask > span {
    opacity: 0.12;

    transform:
        translateY(110%);
}


html.lsw-js
[data-estimate-reveal="intro"] {
    opacity: 0;

    transform:
        translateY(20px);
}


html.lsw-js
[data-estimate-reveal="composition"] {
    opacity: 0;

    clip-path:
        polygon(
            0 0,
            13% 0,
            0 13%,
            0 100%,
            0 100%
        );

    transform:
        translateY(20px);
}


/* ============================================================
   25. VISIBLE
   ============================================================ */

html.lsw-js
.lsw-estimate.is-visible
[data-estimate-reveal="eyebrow"] {
    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        650ms
        ease
        80ms,
        transform
        850ms
        var(--lsw-ease)
        80ms;
}


html.lsw-js
.lsw-estimate.is-visible
[data-estimate-reveal="eyebrow"] i {
    transform:
        scaleX(1);

    transition:
        transform
        900ms
        var(--lsw-ease)
        180ms;
}


html.lsw-js
.lsw-estimate.is-visible
.lsw-estimate__title-mask > span {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        ease,
        transform
        1050ms
        var(--lsw-ease);
}


html.lsw-js
.lsw-estimate.is-visible
.lsw-estimate__title-mask:nth-child(1) > span {
    transition-delay: 150ms;
}


html.lsw-js
.lsw-estimate.is-visible
.lsw-estimate__title-mask:nth-child(2) > span {
    transition-delay: 240ms;
}


html.lsw-js
.lsw-estimate.is-visible
[data-estimate-reveal="intro"] {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        700ms
        ease
        330ms,
        transform
        900ms
        var(--lsw-ease)
        330ms;
}


html.lsw-js
.lsw-estimate.is-visible
[data-estimate-reveal="composition"] {
    opacity: 1;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            0 100%,
            0 0
        );

    transform:
        translateY(0);

    transition:
        opacity
        750ms
        ease
        400ms,
        clip-path
        1150ms
        var(--lsw-ease)
        400ms,
        transform
        900ms
        var(--lsw-ease)
        400ms;
}


/* ============================================================
   26. COMPUTER
   ============================================================ */

@media (min-width: 1200px) {

    .lsw-estimate__composition {
        min-height: 790px;
    }


    .lsw-estimate__contact {
        min-height: 100%;
    }

}


/* ============================================================
   27. TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1199px) {

    .lsw-estimate {
        padding:
            105px
            0
            98px;
    }


    .lsw-estimate__heading-grid {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, 0.9fr);

        gap: 46px;
    }


    .lsw-estimate__title {
        font-size:
            clamp(
                3rem,
                5.7vw,
                4.4rem
            );
    }


    .lsw-estimate__composition {
        grid-template-columns:
            minmax(260px, 0.35fr)
            minmax(0, 0.65fr);
    }


    .lsw-estimate__contact {
        padding:
            36px
            28px;
    }


    .lsw-estimate__form-panel {
        padding:
            42px
            34px;
    }


    .lsw-estimate-form__row {
        gap: 18px;
    }


    .lsw-estimate-contact-item {
        grid-template-columns: 1fr;

        gap: 7px;
    }

}


/* ============================================================
   28. MOBILE
   ============================================================ */

@media (min-width: 481px) and (max-width: 767px) {

    .lsw-estimate {
        padding:
            86px
            0
            82px;
    }


    .lsw-estimate__heading-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .lsw-estimate__title {
        font-size:
            clamp(
                2.75rem,
                9vw,
                3.8rem
            );
    }


    .lsw-estimate__composition {
        grid-template-columns: 1fr;
    }


    .lsw-estimate__contact {
        padding:
            35px
            30px;
    }


    .lsw-estimate__contact-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            0
            28px;
    }


    .lsw-estimate-contact-item {
        grid-template-columns: 1fr;

        gap: 6px;
    }


    .lsw-estimate__form-panel {
        padding:
            40px
            30px;
    }


    .lsw-estimate-form__row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 17px;
    }


    .lsw-estimate-form__footer {
        align-items: flex-end;
    }

}


/* ============================================================
   29. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .lsw-estimate {
        padding:
            76px
            0
            70px;
    }


    .lsw-estimate__header {
        margin-bottom: 34px;
    }


    .lsw-estimate__eyebrow {
        gap: 10px;

        margin-bottom: 15px;

        font-size: 0.65rem;

        letter-spacing: 0.12em;
    }


    .lsw-estimate__eyebrow i {
        width: 35px;
    }


    .lsw-estimate__heading-grid {
        grid-template-columns: 1fr;

        gap: 21px;
    }


    .lsw-estimate__title {
        font-size:
            clamp(
                2.45rem,
                12vw,
                3.3rem
            );

        line-height: 0.95;
    }


    .lsw-estimate__intro {
        font-size: 0.96rem;

        line-height: 1.63;
    }


    .lsw-estimate__composition {
        grid-template-columns: 1fr;
    }


    .lsw-estimate__contact {
        padding:
            29px
            21px;
    }


    .lsw-estimate__contact-top h3 {
        font-size:
            clamp(
                2.3rem,
                11vw,
                3rem
            );
    }


    .lsw-estimate__contact-top p {
        font-size: 0.91rem;
    }


    .lsw-estimate__contact-rule {
        margin:
            27px
            0;
    }


    .lsw-estimate-contact-item {
        grid-template-columns:
            68px
            minmax(0, 1fr);

        gap: 12px;

        padding:
            15px
            0;
    }


    .lsw-estimate-contact-item__content a,
    .lsw-estimate-contact-item__content strong,
    .lsw-estimate-contact-item__content span {
        font-size: 0.77rem;
    }


    .lsw-estimate__contact-facet {
        top: 20px;
        right: 20px;

        width: 27px;
        height: 27px;
    }


    .lsw-estimate__form-panel {
        padding:
            31px
            18px
            34px;
    }


    .lsw-estimate__form-heading {
        margin-bottom: 30px;
    }


    .lsw-estimate__form-heading h3 {
        font-size:
            clamp(
                2.15rem,
                10vw,
                2.75rem
            );
    }


    .lsw-estimate-form {
        gap: 22px;
    }


    .lsw-estimate-form__row {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .lsw-field input,
    .lsw-field select,
    .lsw-field textarea {
        font-size: 1rem;
    }


    .lsw-field input,
    .lsw-field select {
        min-height: 54px;
    }


    .lsw-field textarea {
        min-height: 175px;
    }


    .lsw-field__message-footer {
        grid-template-columns: 1fr;
    }


    .lsw-estimate-form__footer {
        flex-direction: column;

        align-items: stretch;

        gap: 18px;
    }


    .lsw-estimate-form__submit {
        width: 100%;

        min-height: 55px;
    }

}



/* ============================================================
   FORM SERVER STATUS
   ============================================================ */

.lsw-estimate__status {
    position: relative;

    margin:
        0
        0
        28px;

    padding:
        16px
        18px
        16px
        21px;

    border:
        1px solid
        rgba(36, 59, 42, 0.12);

    border-left:
        4px solid
        var(--lsw-gold-600);

    border-radius:
        var(--lsw-radius-sm);

    background:
        var(--lsw-ivory);

    box-shadow:
        0 8px 24px
        rgba(24, 38, 28, 0.06);

    font-size: 0.88rem;

    font-weight: 600;

    line-height: 1.55;

    color:
        var(--lsw-charcoal);
}


.lsw-estimate__status.is-success {
    border-left-color:
        var(--lsw-forest-700);

    background:
        rgba(66, 96, 71, 0.07);

    color:
        var(--lsw-forest-900);
}


.lsw-estimate__status.is-error {
    border-left-color:
        var(--lsw-clay);

    background:
        rgba(165, 101, 73, 0.075);

    color:
        #743E2F;
}













































/* ============================================================
   LAND & STONE WORKS LLC
   CONTACT.HTML
   04. WHAT HAPPENS NEXT
   ============================================================ */


/* ============================================================
   01. SECTION
   ============================================================ */

.lsw-next {
    position: relative;

    padding:
        clamp(115px, 8.5vw, 155px)
        0
        clamp(100px, 7.5vw, 135px);

    overflow: hidden;

    color:
        var(--lsw-text);

    background:
        var(--lsw-ivory-soft);

    isolation: isolate;
}


/* Soft architectural depth */

.lsw-next::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 82% 23%,
            rgba(199, 163, 93, 0.075),
            transparent 27%
        ),
        radial-gradient(
            circle at 11% 83%,
            rgba(36, 59, 42, 0.035),
            transparent 30%
        );
}


/* ============================================================
   02. TRANSITION FROM ESTIMATE
   ============================================================ */

.lsw-next__transition {
    position: absolute;

    z-index: 8;

    top: -1px;
    left: 0;

    width: 100%;
    height: 72px;

    pointer-events: none;
}


.lsw-next__transition::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 64%;
    height: 48px;

    background:
        var(--lsw-sand);

    clip-path:
        polygon(
            0 0,
            100% 0,
            91% 100%,
            0 54%
        );
}


.lsw-next__transition::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 41%;
    height: 24px;

    background:
        var(--lsw-sand);

    clip-path:
        polygon(
            13% 0,
            100% 0,
            100% 100%,
            0 100%
        );
}


.lsw-next__transition-line {
    position: absolute;

    z-index: 4;

    top: 46px;
    left: 9%;

    width: 150px;
    height: 1px;

    background:
        var(--lsw-gold-500);

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.lsw-next.is-visible
.lsw-next__transition-line {
    transform:
        scaleX(1);

    transition:
        transform
        1050ms
        var(--lsw-ease);
}


.lsw-next__transition-mark {
    position: absolute;

    z-index: 5;

    top: 40px;
    left:
        calc(
            9% + 143px
        );

    width: 12px;
    height: 12px;

    background:
        var(--lsw-ivory-soft);

    border:
        2px solid
        var(--lsw-gold-500);

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


.lsw-next.is-visible
.lsw-next__transition-mark {
    transform:
        rotate(30deg)
        scale(1);

    transition:
        transform
        680ms
        var(--lsw-ease)
        550ms;
}


/* ============================================================
   03. BACKGROUND DECORATION
   ============================================================ */

.lsw-next__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


.lsw-next__shape {
    position: absolute;

    border:
        1px solid
        rgba(36, 59, 42, 0.055);

    transform:
        rotate(30deg);
}


.lsw-next__shape--one {
    top: 12%;
    right: -110px;

    width: 270px;
    height: 270px;
}


.lsw-next__shape--two {
    left: -125px;
    bottom: -80px;

    width: 240px;
    height: 240px;

    border-color:
        rgba(180, 140, 69, 0.11);
}


.lsw-next__grid {
    position: absolute;

    top: 12%;
    right: 6%;

    width: 190px;
    height: 190px;

    opacity: 0.027;

    background-image:
        linear-gradient(
            var(--lsw-forest-900) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--lsw-forest-900) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;

    transform:
        rotate(5deg);
}


/* ============================================================
   04. HEADER
   ============================================================ */

.lsw-next__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.75fr);

    align-items: end;

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

    margin-bottom:
        clamp(
            65px,
            7vw,
            105px
        );
}


/* ============================================================
   05. EYEBROW
   ============================================================ */

.lsw-next__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 22px;

    font-size: 0.75rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        var(--lsw-forest-700);
}


.lsw-next__eyebrow span:first-child {
    color:
        var(--lsw-gold-700);
}


.lsw-next__eyebrow i {
    width: 51px;
    height: 1px;

    background:
        var(--lsw-gold-600);

    transform-origin:
        left center;
}


/* ============================================================
   06. TITLE
   ============================================================ */

.lsw-next__title {
    max-width: 860px;

    margin: 0;

    font-family:
        var(--lsw-font-display);

    font-size:
        clamp(
            3.35rem,
            5.1vw,
            5.55rem
        );

    font-weight: 500;

    line-height: 0.94;

    letter-spacing: -0.045em;

    color:
        var(--lsw-charcoal);
}


.lsw-next__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.05em;
}


.lsw-next__title-mask > span {
    display: block;
}


.lsw-next__title-accent {
    color:
        var(--lsw-forest-800);
}


/* ============================================================
   07. INTRO
   ============================================================ */

.lsw-next__intro {
    position: relative;

    display: grid;

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

    align-items: start;

    gap: 22px;

    max-width: 470px;
}


.lsw-next__intro-mark {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    margin-top: 3px;

    border:
        1px solid
        rgba(180, 140, 69, 0.55);

    transform:
        rotate(30deg);
}


.lsw-next__intro-mark span {
    width: 12px;
    height: 12px;

    border:
        1px solid
        var(--lsw-forest-700);
}


.lsw-next__intro p {
    margin: 0;

    font-size:
        clamp(
            1rem,
            0.96rem + 0.17vw,
            1.1rem
        );

    line-height: 1.72;

    color:
        var(--lsw-text-soft);
}


/* ============================================================
   08. PROCESS
   ============================================================ */

.lsw-next__process {
    position: relative;

    display: grid;

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

    gap:
        clamp(
            40px,
            5vw,
            78px
        );

    padding-top: 5px;
}


/* ============================================================
   09. PROCESS RAIL
   ============================================================ */

.lsw-next__rail {
    position: absolute;

    z-index: 0;

    top: 76px;
    left: 4%;

    width: 92%;
    height: 1px;

    pointer-events: none;
}


.lsw-next__rail-base,
.lsw-next__rail-progress {
    position: absolute;

    inset:
        0
        auto
        auto
        0;

    width: 100%;
    height: 1px;
}


.lsw-next__rail-base {
    background:
        rgba(36, 59, 42, 0.13);
}


.lsw-next__rail-progress {
    background:
        linear-gradient(
            90deg,
            var(--lsw-gold-600),
            var(--lsw-gold-300)
        );

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.lsw-next.is-visible
.lsw-next__rail-progress {
    transform:
        scaleX(1);

    transition:
        transform
        1500ms
        var(--lsw-ease)
        470ms;
}


/* ============================================================
   10. STEP
   ============================================================ */

.lsw-next-step {
    position: relative;

    z-index: 2;

    min-width: 0;

    padding:
        0
        clamp(
            8px,
            1vw,
            17px
        )
        24px;

    isolation: isolate;
}


/* Very subtle hover field */

.lsw-next-step::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset:
        54px
        -10px
        -5px;

    opacity: 0;

    background:
        linear-gradient(
            180deg,
            rgba(231, 223, 208, 0.15),
            rgba(231, 223, 208, 0.52)
        );

    clip-path:
        polygon(
            0 0,
            92% 0,
            100% 12%,
            100% 100%,
            0 100%
        );

    transition:
        opacity
        420ms
        var(--lsw-ease);
}


.lsw-next-step:hover::before {
    opacity: 1;
}


/* ============================================================
   11. STEP TOP
   ============================================================ */

.lsw-next-step__top {
    position: relative;

    height: 106px;
}


.lsw-next-step__number {
    position: absolute;

    top: 0;
    left: 0;

    font-family:
        var(--lsw-font-display);

    font-size:
        clamp(
            3.2rem,
            4.7vw,
            5rem
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.06em;

    color:
        rgba(36, 59, 42, 0.19);
}


/* ============================================================
   12. NODE
   ============================================================ */

.lsw-next-step__node {
    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 18px;

    display: grid;

    place-items: center;

    width: 20px;
    height: 20px;

    background:
        var(--lsw-ivory-soft);

    border:
        2px solid
        var(--lsw-gold-600);

    transform:
        rotate(45deg);

    box-shadow:
        0 0 0 7px
        var(--lsw-ivory-soft);

    transition:
        background-color
        420ms
        var(--lsw-ease),
        transform
        420ms
        var(--lsw-ease);
}


.lsw-next-step__node span {
    width: 5px;
    height: 5px;

    background:
        var(--lsw-forest-800);
}


.lsw-next-step:hover
.lsw-next-step__node {
    background:
        var(--lsw-gold-500);

    transform:
        rotate(135deg);
}


/* ============================================================
   13. BODY
   ============================================================ */

.lsw-next-step__body {
    max-width: 390px;

    padding-top: 20px;
}


.lsw-next-step__label {
    display: block;

    margin-bottom: 10px;

    font-size: 0.67rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--lsw-gold-700);
}


.lsw-next-step h3 {
    margin:
        0
        0
        14px;

    font-family:
        var(--lsw-font-display);

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

    font-weight: 600;

    line-height: 0.99;

    letter-spacing: -0.035em;

    color:
        var(--lsw-forest-800);
}


.lsw-next-step p {
    margin: 0;

    font-size: 0.96rem;

    line-height: 1.7;

    color:
        var(--lsw-text-soft);
}


/* ============================================================
   14. CORNER
   ============================================================ */

.lsw-next-step__corner {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 29px;
    height: 29px;

    opacity: 0.38;

    border-right:
        1px solid
        var(--lsw-gold-600);

    border-bottom:
        1px solid
        var(--lsw-gold-600);
}


/* ============================================================
   15. BOTTOM STRIP
   ============================================================ */

.lsw-next__bottom {
    display: grid;

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

    align-items: center;

    gap:
        clamp(
            22px,
            3vw,
            42px
        );

    margin-top:
        clamp(
            62px,
            6vw,
            92px
        );

    padding-top: 31px;

    border-top:
        1px solid
        rgba(36, 59, 42, 0.12);
}


/* ============================================================
   16. BOTTOM SYMBOL
   ============================================================ */

.lsw-next__bottom-symbol {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    border:
        1px solid
        rgba(180, 140, 69, 0.48);

    transform:
        rotate(30deg);
}


.lsw-next__bottom-symbol span {
    width: 9px;
    height: 9px;

    border:
        1px solid
        var(--lsw-forest-700);
}


.lsw-next__bottom p {
    max-width: 650px;

    margin: 0;

    font-family:
        var(--lsw-font-display);

    font-size:
        clamp(
            1.4rem,
            1.8vw,
            1.9rem
        );

    font-weight: 600;

    line-height: 1.18;

    color:
        var(--lsw-charcoal);
}


.lsw-next__bottom a {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding-bottom: 6px;

    border-bottom:
        1px solid
        var(--lsw-gold-600);

    font-size: 0.78rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    color:
        var(--lsw-forest-800);
}


.lsw-next__bottom a svg {
    width: 18px;
    height: 18px;

    color:
        var(--lsw-gold-700);

    transition:
        transform
        400ms
        var(--lsw-ease);
}


.lsw-next__bottom a:hover svg {
    transform:
        translateY(-4px);
}


/* ============================================================
   17. INITIAL STATES
   ============================================================ */

html.lsw-js
[data-next-reveal="eyebrow"] {
    opacity: 0;

    transform:
        translateX(-20px);
}


html.lsw-js
[data-next-reveal="eyebrow"] i {
    transform:
        scaleX(0);
}


html.lsw-js
.lsw-next__title-mask > span {
    opacity: 0.12;

    transform:
        translateY(112%);
}


html.lsw-js
[data-next-reveal="intro"] {
    opacity: 0;

    transform:
        translateY(20px);
}


html.lsw-js
[data-next-step] {
    opacity: 0;

    transform:
        translateY(28px);
}


html.lsw-js
[data-next-step]
.lsw-next-step__node {
    transform:
        rotate(45deg)
        scale(0);
}


html.lsw-js
[data-next-reveal="bottom"] {
    opacity: 0;

    transform:
        translateY(18px);
}


/* ============================================================
   18. VISIBLE STATES
   ============================================================ */

html.lsw-js
.lsw-next.is-visible
[data-next-reveal="eyebrow"] {
    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        650ms
        ease
        80ms,
        transform
        850ms
        var(--lsw-ease)
        80ms;
}


html.lsw-js
.lsw-next.is-visible
[data-next-reveal="eyebrow"] i {
    transform:
        scaleX(1);

    transition:
        transform
        900ms
        var(--lsw-ease)
        180ms;
}


html.lsw-js
.lsw-next.is-visible
.lsw-next__title-mask > span {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        ease,
        transform
        1050ms
        var(--lsw-ease);
}


html.lsw-js
.lsw-next.is-visible
.lsw-next__title-mask:nth-child(1) > span {
    transition-delay:
        140ms;
}


html.lsw-js
.lsw-next.is-visible
.lsw-next__title-mask:nth-child(2) > span {
    transition-delay:
        230ms;
}


html.lsw-js
.lsw-next.is-visible
[data-next-reveal="intro"] {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        700ms
        ease
        320ms,
        transform
        900ms
        var(--lsw-ease)
        320ms;
}


html.lsw-js
.lsw-next.is-visible
[data-next-step] {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        700ms
        ease,
        transform
        950ms
        var(--lsw-ease);
}


html.lsw-js
.lsw-next.is-visible
[data-next-step]:nth-of-type(1) {
    transition-delay:
        500ms;
}


html.lsw-js
.lsw-next.is-visible
[data-next-step]:nth-of-type(2) {
    transition-delay:
        650ms;
}


html.lsw-js
.lsw-next.is-visible
[data-next-step]:nth-of-type(3) {
    transition-delay:
        800ms;
}


html.lsw-js
.lsw-next.is-visible
[data-next-step]
.lsw-next-step__node {
    transform:
        rotate(45deg)
        scale(1);

    transition:
        background-color
        420ms
        var(--lsw-ease),
        transform
        800ms
        var(--lsw-ease);
}


html.lsw-js
.lsw-next.is-visible
[data-next-step]:nth-of-type(1)
.lsw-next-step__node {
    transition-delay:
        500ms;
}


html.lsw-js
.lsw-next.is-visible
[data-next-step]:nth-of-type(2)
.lsw-next-step__node {
    transition-delay:
        650ms;
}


html.lsw-js
.lsw-next.is-visible
[data-next-step]:nth-of-type(3)
.lsw-next-step__node {
    transition-delay:
        800ms;
}


html.lsw-js
.lsw-next.is-visible
[data-next-reveal="bottom"] {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        700ms
        ease
        930ms,
        transform
        900ms
        var(--lsw-ease)
        930ms;
}


/* ============================================================
   19. COMPUTER
   ============================================================ */

@media (min-width: 1200px) {

    .lsw-next__process {
        padding-inline:
            clamp(
                5px,
                1vw,
                14px
            );
    }

}


/* ============================================================
   20. TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1199px) {

    .lsw-next {
        padding:
            105px
            0
            95px;
    }


    .lsw-next__header {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, 0.9fr);

        gap: 46px;

        margin-bottom: 65px;
    }


    .lsw-next__title {
        font-size:
            clamp(
                3rem,
                5.8vw,
                4.4rem
            );
    }


    .lsw-next__process {
        gap: 32px;
    }


    .lsw-next__rail {
        top: 69px;
    }


    .lsw-next-step__top {
        height: 99px;
    }


    .lsw-next-step p {
        font-size: 0.91rem;
    }


    .lsw-next__bottom {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
    }

}


/* ============================================================
   21. MOBILE
   ============================================================ */

@media (min-width: 481px) and (max-width: 767px) {

    .lsw-next {
        padding:
            88px
            0
            80px;
    }


    .lsw-next__transition {
        height: 53px;
    }


    .lsw-next__transition::before {
        width: 77%;
        height: 36px;
    }


    .lsw-next__transition-line {
        top: 35px;
        left: 20px;

        width: 95px;
    }


    .lsw-next__transition-mark {
        top: 30px;
        left: 107px;
    }


    .lsw-next__header {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 52px;
    }


    .lsw-next__title {
        font-size:
            clamp(
                2.8rem,
                9vw,
                3.8rem
            );
    }


    .lsw-next__intro {
        max-width: 570px;
    }


    .lsw-next__process {
        grid-template-columns: 1fr;

        gap: 0;

        padding-left: 39px;
    }


    .lsw-next__rail {
        top: 0;
        left: 8px;

        width: 1px;
        height: 100%;
    }


    .lsw-next__rail-base,
    .lsw-next__rail-progress {
        width: 1px;
        height: 100%;
    }


    .lsw-next__rail-progress {
        transform:
            scaleY(0);

        transform-origin:
            top center;
    }


    .lsw-next.is-visible
    .lsw-next__rail-progress {
        transform:
            scaleY(1);
    }


    .lsw-next-step {
        min-height: 250px;

        padding:
            0
            0
            45px;
    }


    .lsw-next-step__top {
        position: static;

        height: auto;
    }


    .lsw-next-step__number {
        position: relative;

        margin-bottom: 15px;
    }


    .lsw-next-step__node {
        top: 28px;
        left: -39px;
        bottom: auto;
    }


    .lsw-next-step__body {
        padding-top: 0;
    }


    .lsw-next__bottom {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        grid-template-areas:
            "symbol text"
            ". link";

        gap:
            18px
            20px;

        margin-top: 42px;
    }


    .lsw-next__bottom-symbol {
        grid-area: symbol;
    }


    .lsw-next__bottom p {
        grid-area: text;
    }


    .lsw-next__bottom a {
        grid-area: link;

        justify-self: start;
    }

}


/* ============================================================
   22. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .lsw-next {
        padding:
            78px
            0
            68px;
    }


    .lsw-next__transition {
        height: 47px;
    }


    .lsw-next__transition::before {
        width: 81%;
        height: 31px;
    }


    .lsw-next__transition::after {
        width: 38%;
        height: 17px;
    }


    .lsw-next__transition-line {
        top: 30px;
        left: 16px;

        width: 74px;
    }


    .lsw-next__transition-mark {
        top: 25px;
        left: 83px;

        width: 10px;
        height: 10px;
    }


    .lsw-next__header {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 42px;
    }


    .lsw-next__eyebrow {
        gap: 10px;

        margin-bottom: 15px;

        font-size: 0.65rem;

        letter-spacing: 0.12em;
    }


    .lsw-next__eyebrow i {
        width: 35px;
    }


    .lsw-next__title {
        font-size:
            clamp(
                2.45rem,
                12vw,
                3.25rem
            );

        line-height: 0.95;
    }


    .lsw-next__intro {
        grid-template-columns:
            34px
            1fr;

        gap: 15px;
    }


    .lsw-next__intro-mark {
        width: 32px;
        height: 32px;
    }


    .lsw-next__intro p {
        font-size: 0.95rem;

        line-height: 1.62;
    }


    .lsw-next__process {
        grid-template-columns: 1fr;

        gap: 0;

        padding-left: 34px;
    }


    .lsw-next__rail {
        top: 0;
        left: 6px;

        width: 1px;
        height: 100%;
    }


    .lsw-next__rail-base,
    .lsw-next__rail-progress {
        width: 1px;
        height: 100%;
    }


    .lsw-next__rail-progress {
        transform:
            scaleY(0);

        transform-origin:
            top center;
    }


    .lsw-next.is-visible
    .lsw-next__rail-progress {
        transform:
            scaleY(1);
    }


    .lsw-next-step {
        min-height: 235px;

        padding:
            0
            0
            40px;
    }


    .lsw-next-step__top {
        position: static;

        height: auto;
    }


    .lsw-next-step__number {
        position: relative;

        display: block;

        margin-bottom: 12px;

        font-size: 3.2rem;
    }


    .lsw-next-step__node {
        top: 24px;
        left: -34px;
        bottom: auto;

        width: 17px;
        height: 17px;

        box-shadow:
            0 0 0 5px
            var(--lsw-ivory-soft);
    }


    .lsw-next-step__body {
        padding-top: 0;
    }


    .lsw-next-step h3 {
        font-size:
            clamp(
                2rem,
                10vw,
                2.55rem
            );
    }


    .lsw-next-step p {
        font-size: 0.91rem;

        line-height: 1.65;
    }


    .lsw-next-step__corner {
        display: none;
    }


    .lsw-next__bottom {
        grid-template-columns:
            30px
            minmax(0, 1fr);

        grid-template-areas:
            "symbol text"
            ". link";

        gap:
            17px
            15px;

        margin-top: 34px;

        padding-top: 25px;
    }


    .lsw-next__bottom-symbol {
        grid-area: symbol;

        width: 29px;
        height: 29px;
    }


    .lsw-next__bottom p {
        grid-area: text;

        font-size: 1.3rem;
    }


    .lsw-next__bottom a {
        grid-area: link;

        justify-self: start;

        font-size: 0.72rem;
    }

}









































/* ============================================================
   LAND & STONE WORKS LLC
   CONTACT.HTML
   05. FAQ
   ============================================================ */


/* ============================================================
   01. SECTION
   ============================================================ */

.lsw-faq {
    position: relative;

    padding:
        clamp(120px, 9vw, 165px)
        0
        clamp(105px, 8vw, 145px);

    overflow: hidden;

    color:
        var(--lsw-ivory-soft);

    background:
        var(--lsw-forest-950);

    isolation: isolate;
}


/* Mineral lighting */

.lsw-faq::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 18% 35%,
            rgba(199, 163, 93, 0.105),
            transparent 28%
        ),
        radial-gradient(
            circle at 87% 76%,
            rgba(104, 121, 86, 0.12),
            transparent 28%
        );
}


/* Fine mineral texture */

.lsw-faq::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.09;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");

    background-size:
        180px 180px;

    mix-blend-mode:
        soft-light;
}


/* ============================================================
   02. TRANSITION FROM NEXT STEPS
   ============================================================ */

.lsw-faq__transition {
    position: absolute;

    z-index: 8;

    top: -1px;
    left: 0;

    width: 100%;
    height: 76px;

    pointer-events: none;
}


.lsw-faq__transition::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 66%;
    height: 54px;

    background:
        var(--lsw-ivory-soft);

    clip-path:
        polygon(
            0 0,
            100% 0,
            91% 100%,
            0 54%
        );
}


.lsw-faq__transition::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 40%;
    height: 27px;

    background:
        var(--lsw-ivory-soft);

    clip-path:
        polygon(
            14% 0,
            100% 0,
            100% 100%,
            0 100%
        );
}


.lsw-faq__transition-line {
    position: absolute;

    z-index: 4;

    top: 52px;
    left: 9%;

    width: 155px;
    height: 1px;

    background:
        var(--lsw-gold-500);

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.lsw-faq.is-visible
.lsw-faq__transition-line {
    transform:
        scaleX(1);

    transition:
        transform
        1050ms
        var(--lsw-ease);
}


.lsw-faq__transition-mark {
    position: absolute;

    z-index: 5;

    top: 46px;
    left:
        calc(
            9% + 147px
        );

    width: 13px;
    height: 13px;

    background:
        var(--lsw-forest-950);

    border:
        2px solid
        var(--lsw-gold-500);

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


.lsw-faq.is-visible
.lsw-faq__transition-mark {
    transform:
        rotate(30deg)
        scale(1);

    transition:
        transform
        700ms
        var(--lsw-ease)
        550ms;
}


/* ============================================================
   03. BACKGROUND DECORATION
   ============================================================ */

.lsw-faq__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


.lsw-faq__shape {
    position: absolute;

    border:
        1px solid
        rgba(199, 163, 93, 0.08);

    transform:
        rotate(30deg);
}


.lsw-faq__shape--one {
    top: 10%;
    left: -165px;

    width: 350px;
    height: 350px;
}


.lsw-faq__shape--two {
    right: -115px;
    bottom: 8%;

    width: 265px;
    height: 265px;

    border-color:
        rgba(255, 255, 255, 0.04);
}


.lsw-faq__grid {
    position: absolute;

    left: 5%;
    bottom: 5%;

    width: 210px;
    height: 210px;

    opacity: 0.035;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.55) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.55) 1px,
            transparent 1px
        );

    background-size:
        35px 35px;

    transform:
        rotate(6deg);
}


/* ============================================================
   04. MAIN LAYOUT
   ============================================================ */

.lsw-faq__inner {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(360px, 0.82fr)
        minmax(520px, 1.18fr);

    gap:
        clamp(
            65px,
            8vw,
            130px
        );

    align-items: start;
}


/* ============================================================
   05. INTRO
   ============================================================ */

.lsw-faq__intro {
    position: relative;

    max-width: 580px;
}


/* ============================================================
   06. EYEBROW
   ============================================================ */

.lsw-faq__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;

    font-size: 0.75rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        var(--lsw-gold-300);
}


.lsw-faq__eyebrow span:first-child {
    color:
        var(--lsw-gold-500);
}


.lsw-faq__eyebrow i {
    width: 51px;
    height: 1px;

    background:
        var(--lsw-gold-500);

    transform-origin:
        left center;
}


/* ============================================================
   07. TITLE
   ============================================================ */

.lsw-faq__title {
    margin: 0;

    font-family:
        var(--lsw-font-display);

    font-size:
        clamp(
            3.4rem,
            5vw,
            5.45rem
        );

    font-weight: 500;

    line-height: 0.93;

    letter-spacing: -0.045em;

    color:
        var(--lsw-ivory-soft);
}


.lsw-faq__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.055em;
}


.lsw-faq__title-mask > span {
    display: block;
}


.lsw-faq__title-accent {
    color:
        var(--lsw-gold-500);
}


/* ============================================================
   08. DESCRIPTION
   ============================================================ */

.lsw-faq__description {
    max-width: 510px;

    margin:
        28px
        0
        0;

    font-size:
        clamp(
            1rem,
            0.96rem + 0.17vw,
            1.1rem
        );

    line-height: 1.72;

    color:
        rgba(245, 241, 232, 0.67);
}


/* ============================================================
   09. DECORATIVE ART
   ============================================================ */

.lsw-faq__art {
    position: relative;

    width:
        min(
            100%,
            410px
        );

    height: 190px;

    margin-top:
        clamp(
            40px,
            5vw,
            68px
        );
}


.lsw-faq__art-line {
    position: absolute;

    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--lsw-gold-500),
            rgba(199, 163, 93, 0.08)
        );
}


.lsw-faq__art-mark {
    position: absolute;

    z-index: 3;

    top: 50%;
    left: 18%;

    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    background:
        var(--lsw-forest-950);

    border:
        1px solid
        var(--lsw-gold-500);

    transform:
        translateY(-50%)
        rotate(30deg);
}


.lsw-faq__art-mark span {
    width: 16px;
    height: 16px;

    border:
        1px solid
        rgba(222, 199, 148, 0.72);
}


.lsw-faq__art-number {
    position: absolute;

    right: 3%;
    top: 50%;

    font-family:
        var(--lsw-font-display);

    font-size: 9rem;

    font-weight: 500;

    line-height: 0.7;

    color:
        rgba(199, 163, 93, 0.11);

    transform:
        translateY(-50%);
}


.lsw-faq__art-caption {
    position: absolute;

    left: 0;
    bottom: 7px;

    font-size: 0.66rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        rgba(245, 241, 232, 0.43);
}


/* ============================================================
   10. CTA
   ============================================================ */

.lsw-faq__cta {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 27px;

    padding-bottom: 7px;

    border-bottom:
        1px solid
        var(--lsw-gold-500);

    font-size: 0.8rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--lsw-gold-300);
}


.lsw-faq__cta svg {
    width: 18px;
    height: 18px;

    transition:
        transform
        400ms
        var(--lsw-ease);
}


.lsw-faq__cta:hover svg {
    transform:
        translateY(-4px);
}


/* ============================================================
   11. ACCORDION
   ============================================================ */

.lsw-faq__accordion {
    position: relative;

    border-top:
        1px solid
        rgba(222, 199, 148, 0.18);
}


/* Gold vertical architectural rail */

.lsw-faq__accordion::before {
    content: "";

    position: absolute;

    top: 0;
    left: 53px;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            var(--lsw-gold-500),
            rgba(199, 163, 93, 0.05)
        );

    opacity: 0.36;

    pointer-events: none;
}


/* ============================================================
   12. FAQ ITEM
   ============================================================ */

.lsw-faq-item {
    position: relative;

    border-bottom:
        1px solid
        rgba(222, 199, 148, 0.18);
}


.lsw-faq-item__heading {
    margin: 0;

    font: inherit;
}


/* ============================================================
   13. TRIGGER
   ============================================================ */

.lsw-faq-item__trigger {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 22px;

    width: 100%;

    min-height: 105px;

    padding:
        22px
        0;

    border: 0;

    color:
        var(--lsw-ivory-soft);

    background:
        transparent;

    font-family:
        var(--lsw-font-body);

    text-align: left;

    cursor: pointer;
}


/* Subtle active background plane */

.lsw-faq-item__trigger::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset:
        7px
        -16px;

    opacity: 0;

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

    clip-path:
        polygon(
            0 0,
            96% 0,
            100% 18%,
            100% 100%,
            0 100%
        );

    transition:
        opacity
        400ms
        var(--lsw-ease);
}


.lsw-faq-item:hover
.lsw-faq-item__trigger::before,
.lsw-faq-item.is-open
.lsw-faq-item__trigger::before {
    opacity: 1;
}


/* ============================================================
   14. NUMBER
   ============================================================ */

.lsw-faq-item__number {
    position: relative;

    z-index: 2;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    color:
        var(--lsw-gold-500);
}


/* ============================================================
   15. QUESTION
   ============================================================ */

.lsw-faq-item__question {
    max-width: 620px;

    font-family:
        var(--lsw-font-display);

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

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -0.025em;

    color:
        rgba(245, 241, 232, 0.88);

    transition:
        color
        350ms
        var(--lsw-ease);
}


.lsw-faq-item.is-open
.lsw-faq-item__question,
.lsw-faq-item__trigger:hover
.lsw-faq-item__question {
    color:
        var(--lsw-white);
}


/* ============================================================
   16. PLUS / MINUS
   ============================================================ */

.lsw-faq-item__toggle {
    position: relative;

    display: grid;

    place-items: center;

    justify-self: end;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(199, 163, 93, 0.40);

    transform:
        rotate(30deg);

    transition:
        background-color
        400ms
        var(--lsw-ease),
        border-color
        400ms
        var(--lsw-ease),
        transform
        500ms
        var(--lsw-ease);
}


.lsw-faq-item__toggle span {
    position: absolute;

    width: 14px;
    height: 1px;

    background:
        var(--lsw-gold-300);

    transition:
        transform
        400ms
        var(--lsw-ease),
        background-color
        400ms
        var(--lsw-ease);
}


.lsw-faq-item__toggle span:last-child {
    transform:
        rotate(90deg);
}


.lsw-faq-item.is-open
.lsw-faq-item__toggle {
    background:
        var(--lsw-gold-500);

    border-color:
        var(--lsw-gold-500);

    transform:
        rotate(120deg);
}


.lsw-faq-item.is-open
.lsw-faq-item__toggle span {
    background:
        var(--lsw-forest-950);
}


.lsw-faq-item.is-open
.lsw-faq-item__toggle span:last-child {
    transform:
        rotate(0);
}


/* ============================================================
   17. ANSWER
   CSS GRID allows smooth auto-height animation.
   ============================================================ */

.lsw-faq-item__answer {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
        grid-template-rows
        600ms
        var(--lsw-ease),
        opacity
        350ms
        ease;
}


.lsw-faq-item.is-open
.lsw-faq-item__answer {
    grid-template-rows: 1fr;

    opacity: 1;
}


.lsw-faq-item__answer-inner {
    min-height: 0;

    overflow: hidden;
}


.lsw-faq-item__answer-inner p {
    max-width: 690px;

    margin:
        0
        50px
        0
        76px;

    padding:
        0
        0
        31px;

    font-size: 0.98rem;

    line-height: 1.74;

    color:
        rgba(245, 241, 232, 0.63);
}


.lsw-faq-item__answer-inner a {
    color:
        var(--lsw-gold-300);

    text-decoration:
        underline;

    text-decoration-color:
        rgba(222, 199, 148, 0.35);

    text-underline-offset:
        4px;
}


.lsw-faq-item__answer-inner strong {
    color:
        var(--lsw-ivory-soft);
}


/* ============================================================
   18. CONTACT STRIP
   ============================================================ */

.lsw-faq__contact-strip {
    display: grid;

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

    align-items: center;

    gap: 19px;

    margin-top: 29px;

    padding:
        19px
        21px;

    border:
        1px solid
        rgba(199, 163, 93, 0.18);

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


.lsw-faq__contact-symbol {
    width: 10px;
    height: 10px;

    border:
        1px solid
        var(--lsw-gold-500);

    transform:
        rotate(45deg);
}


.lsw-faq__contact-strip p {
    margin: 0;

    font-size: 0.84rem;

    font-weight: 600;

    color:
        rgba(245, 241, 232, 0.65);
}


.lsw-faq__contact-strip a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--lsw-gold-300);
}


.lsw-faq__contact-strip a span {
    transition:
        transform
        350ms
        var(--lsw-ease);
}


.lsw-faq__contact-strip a:hover span {
    transform:
        translateX(4px);
}


/* ============================================================
   19. INITIAL REVEAL STATES
   ============================================================ */

html.lsw-js
[data-faq-reveal="eyebrow"] {
    opacity: 0;

    transform:
        translateX(-20px);
}


html.lsw-js
[data-faq-reveal="eyebrow"] i {
    transform:
        scaleX(0);
}


html.lsw-js
.lsw-faq__title-mask > span {
    opacity: 0.12;

    transform:
        translateY(112%);
}


html.lsw-js
[data-faq-reveal="description"],
html.lsw-js
[data-faq-reveal="art"],
html.lsw-js
[data-faq-reveal="cta"] {
    opacity: 0;

    transform:
        translateY(20px);
}


html.lsw-js
[data-faq-reveal="accordion"] {
    opacity: 0;

    transform:
        translateX(28px);
}


/* ============================================================
   20. VISIBLE STATES
   ============================================================ */

html.lsw-js
.lsw-faq.is-visible
[data-faq-reveal="eyebrow"] {
    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        650ms
        ease
        80ms,
        transform
        850ms
        var(--lsw-ease)
        80ms;
}


html.lsw-js
.lsw-faq.is-visible
[data-faq-reveal="eyebrow"] i {
    transform:
        scaleX(1);

    transition:
        transform
        900ms
        var(--lsw-ease)
        180ms;
}


html.lsw-js
.lsw-faq.is-visible
.lsw-faq__title-mask > span {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        ease,
        transform
        1050ms
        var(--lsw-ease);
}


html.lsw-js
.lsw-faq.is-visible
.lsw-faq__title-mask:nth-child(1) > span {
    transition-delay:
        150ms;
}


html.lsw-js
.lsw-faq.is-visible
.lsw-faq__title-mask:nth-child(2) > span {
    transition-delay:
        240ms;
}


html.lsw-js
.lsw-faq.is-visible
[data-faq-reveal="description"] {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        700ms
        ease
        340ms,
        transform
        900ms
        var(--lsw-ease)
        340ms;
}


html.lsw-js
.lsw-faq.is-visible
[data-faq-reveal="art"] {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        700ms
        ease
        470ms,
        transform
        900ms
        var(--lsw-ease)
        470ms;
}


html.lsw-js
.lsw-faq.is-visible
[data-faq-reveal="cta"] {
    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        700ms
        ease
        570ms,
        transform
        900ms
        var(--lsw-ease)
        570ms;
}


html.lsw-js
.lsw-faq.is-visible
[data-faq-reveal="accordion"] {
    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        750ms
        ease
        350ms,
        transform
        1000ms
        var(--lsw-ease)
        350ms;
}


/* ============================================================
   21. REDUCED MOTION
   ============================================================ */

html.lsw-reduced-motion
.lsw-faq-item__answer {
    transition: none;
}


/* ============================================================
   22. COMPUTER
   ============================================================ */

@media (min-width: 1200px) {

    .lsw-faq__intro {
        padding-top: 5px;
    }


    .lsw-faq__accordion {
        min-height: 620px;
    }

}


/* ============================================================
   23. TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1199px) {

    .lsw-faq {
        padding:
            108px
            0
            96px;
    }


    .lsw-faq__inner {
        grid-template-columns:
            minmax(300px, 0.8fr)
            minmax(400px, 1.2fr);

        gap: 50px;
    }


    .lsw-faq__title {
        font-size:
            clamp(
                3rem,
                5.8vw,
                4.4rem
            );
    }


    .lsw-faq__art {
        height: 150px;

        margin-top: 35px;
    }


    .lsw-faq__art-number {
        font-size: 7rem;
    }


    .lsw-faq-item__trigger {
        grid-template-columns:
            44px
            1fr
            40px;

        gap: 16px;

        min-height: 98px;
    }


    .lsw-faq__accordion::before {
        left: 43px;
    }


    .lsw-faq-item__answer-inner p {
        margin-left: 60px;
        margin-right: 40px;
    }

}


/* ============================================================
   24. MOBILE
   ============================================================ */

@media (min-width: 481px) and (max-width: 767px) {

    .lsw-faq {
        padding:
            91px
            0
            82px;
    }


    .lsw-faq__transition {
        height: 54px;
    }


    .lsw-faq__transition::before {
        width: 77%;
        height: 37px;
    }


    .lsw-faq__transition-line {
        top: 36px;
        left: 20px;

        width: 96px;
    }


    .lsw-faq__transition-mark {
        top: 30px;
        left: 108px;

        width: 11px;
        height: 11px;
    }


    .lsw-faq__inner {
        grid-template-columns: 1fr;

        gap: 54px;
    }


    .lsw-faq__title {
        max-width: 650px;

        font-size:
            clamp(
                2.8rem,
                9vw,
                3.9rem
            );
    }


    .lsw-faq__description {
        max-width: 590px;
    }


    .lsw-faq__art {
        width: 330px;
        height: 120px;

        margin-top: 30px;
    }


    .lsw-faq__art-number {
        font-size: 6rem;
    }


    .lsw-faq__cta {
        margin-top: 20px;
    }


    .lsw-faq-item__trigger {
        grid-template-columns:
            42px
            1fr
            40px;

        gap: 14px;

        min-height: 94px;
    }


    .lsw-faq__accordion::before {
        left: 41px;
    }


    .lsw-faq-item__question {
        font-size:
            clamp(
                1.55rem,
                4.5vw,
                1.95rem
            );
    }


    .lsw-faq-item__answer-inner p {
        margin:
            0
            45px
            0
            56px;

        padding-bottom: 28px;
    }

}


/* ============================================================
   25. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .lsw-faq {
        padding:
            80px
            0
            70px;
    }


    .lsw-faq__transition {
        height: 47px;
    }


    .lsw-faq__transition::before {
        width: 81%;
        height: 31px;
    }


    .lsw-faq__transition::after {
        width: 38%;
        height: 17px;
    }


    .lsw-faq__transition-line {
        top: 30px;
        left: 16px;

        width: 74px;
    }


    .lsw-faq__transition-mark {
        top: 25px;
        left: 83px;

        width: 10px;
        height: 10px;
    }


    .lsw-faq__inner {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .lsw-faq__eyebrow {
        gap: 10px;

        margin-bottom: 15px;

        font-size: 0.65rem;

        letter-spacing: 0.12em;
    }


    .lsw-faq__eyebrow i {
        width: 35px;
    }


    .lsw-faq__title {
        font-size:
            clamp(
                2.45rem,
                12vw,
                3.25rem
            );

        line-height: 0.95;
    }


    .lsw-faq__description {
        margin-top: 22px;

        font-size: 0.95rem;

        line-height: 1.63;
    }


    .lsw-faq__art {
        width: 250px;
        height: 100px;

        margin-top: 26px;
    }


    .lsw-faq__art-mark {
        width: 42px;
        height: 42px;
    }


    .lsw-faq__art-number {
        font-size: 5rem;
    }


    .lsw-faq__art-caption {
        font-size: 0.59rem;
    }


    .lsw-faq-item__trigger {
        grid-template-columns:
            32px
            minmax(0, 1fr)
            35px;

        gap: 11px;

        min-height: 90px;

        padding:
            19px
            0;
    }


    .lsw-faq__accordion::before {
        left: 31px;
    }


    .lsw-faq-item__number {
        font-size: 0.64rem;
    }


    .lsw-faq-item__question {
        font-size:
            clamp(
                1.4rem,
                7vw,
                1.7rem
            );

        line-height: 1.08;
    }


    .lsw-faq-item__toggle {
        width: 34px;
        height: 34px;
    }


    .lsw-faq-item__toggle span {
        width: 11px;
    }


    .lsw-faq-item__answer-inner p {
        margin:
            0
            8px
            0
            43px;

        padding:
            0
            0
            25px;

        font-size: 0.91rem;

        line-height: 1.66;
    }


    .lsw-faq__contact-strip {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        grid-template-areas:
            "symbol text"
            ". link";

        gap:
            11px
            14px;

        margin-top: 24px;

        padding:
            17px;
    }


    .lsw-faq__contact-symbol {
        grid-area: symbol;
    }


    .lsw-faq__contact-strip p {
        grid-area: text;

        font-size: 0.78rem;
    }


    .lsw-faq__contact-strip a {
        grid-area: link;

        justify-self: start;
    }

}