/* ============================================================
   LAND & STONE WORKS LLC
   GLOBAL DESIGN SYSTEM
   ============================================================ */


/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */

:root {

    /* ---------------------------------------------------------
       BRAND — FOREST
    --------------------------------------------------------- */

    --lsw-forest-950: #1D3022;
    --lsw-forest-900: #243B2A;
    --lsw-forest-800: #31503A;
    --lsw-forest-700: #426047;

    --lsw-olive-600: #687956;


    /* ---------------------------------------------------------
       BRAND — GOLD
    --------------------------------------------------------- */

    --lsw-gold-700: #9F7A38;
    --lsw-gold-600: #B48C45;
    --lsw-gold-500: #C7A35D;
    --lsw-gold-300: #DEC794;


    /* ---------------------------------------------------------
       NEUTRALS
    --------------------------------------------------------- */

    --lsw-ink: #171A18;
    --lsw-charcoal: #262A27;

    --lsw-slate: #4E5A58;
    --lsw-stone: #77776F;

    --lsw-limestone: #D7CEBC;
    --lsw-sand: #E7DFD0;

    --lsw-ivory: #F5F1E8;
    --lsw-ivory-soft: #FAF8F3;

    --lsw-white: #FFFFFF;


    /* ---------------------------------------------------------
       CONTROLLED CONTRAST
    --------------------------------------------------------- */

    --lsw-clay: #A56549;


    /* ---------------------------------------------------------
       GLOBAL BACKGROUNDS
    --------------------------------------------------------- */

    --lsw-bg: var(--lsw-ivory);

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

    --lsw-bg-dark: var(--lsw-forest-950);

    --lsw-bg-stone: #EDE7DC;


    /* ---------------------------------------------------------
       TEXT
    --------------------------------------------------------- */

    --lsw-text: #202421;

    --lsw-text-soft: #62665F;

    --lsw-text-muted: #7B7E77;

    --lsw-text-light: rgba(255, 255, 255, 0.84);

    --lsw-text-light-soft: rgba(255, 255, 255, 0.67);


    /* ---------------------------------------------------------
       BORDERS
    --------------------------------------------------------- */

    --lsw-border:
        rgba(36, 59, 42, 0.14);

    --lsw-border-dark:
        rgba(255, 255, 255, 0.13);

    --lsw-border-gold:
        rgba(180, 140, 69, 0.55);


    /* ---------------------------------------------------------
       TYPOGRAPHY
    --------------------------------------------------------- */

    --lsw-font-display:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    --lsw-font-body:
        "Manrope",
        Arial,
        sans-serif;


    /* ---------------------------------------------------------
       DIMENSIONS
    --------------------------------------------------------- */

    --lsw-container: 1440px;

    --lsw-content-narrow: 880px;

    --lsw-header-offset: 110px;


    /* ---------------------------------------------------------
       RADIUS
    --------------------------------------------------------- */

    --lsw-radius-sm: 6px;
    --lsw-radius-md: 10px;
    --lsw-radius-lg: 16px;


    /* ---------------------------------------------------------
       SHADOWS
    --------------------------------------------------------- */

    --lsw-shadow-xs:
        0 4px 12px
        rgba(24, 38, 28, 0.05);

    --lsw-shadow-sm:
        0 10px 30px
        rgba(24, 38, 28, 0.08);

    --lsw-shadow-md:
        0 18px 46px
        rgba(24, 38, 28, 0.11);

    --lsw-shadow-lg:
        0 28px 80px
        rgba(19, 31, 23, 0.15);

    --lsw-shadow-gold:
        0 18px 46px
        rgba(159, 122, 56, 0.14);


    /* ---------------------------------------------------------
       TRANSITIONS
    --------------------------------------------------------- */

    --lsw-ease:
        cubic-bezier(0.22, 1, 0.36, 1);

    --lsw-ease-soft:
        cubic-bezier(0.16, 1, 0.3, 1);

    --lsw-ease-sharp:
        cubic-bezier(0.76, 0, 0.24, 1);

    --lsw-speed-fast: 220ms;
    --lsw-speed: 420ms;
    --lsw-speed-slow: 720ms;


    /* ---------------------------------------------------------
       Z INDEX
    --------------------------------------------------------- */

    --lsw-z-base: 1;

    --lsw-z-header: 100;

    --lsw-z-menu: 500;

    --lsw-z-transition: 9999;
}


/* ============================================================
   02. RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    width: 100%;

    min-height: 100%;

    scroll-behavior: smooth;

    scroll-padding-top:
        var(--lsw-header-offset);

    background:
        var(--lsw-bg);
}


body {
    position: relative;

    width: 100%;

    min-width: 320px;

    min-height: 100vh;
    min-height: 100svh;

    margin: 0;

    overflow-x: hidden;

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

    font-size: 17px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: -0.01em;

    color:
        var(--lsw-text);

    background:
        var(--lsw-bg);

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


/* ============================================================
   03. MINERAL TEXTURE
   ============================================================ */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 9998;

    pointer-events: none;

    opacity: 0.055;

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

    background-repeat: repeat;

    background-size: 170px 170px;

    mix-blend-mode: multiply;
}


/* ============================================================
   04. GLOBAL SITE
   ============================================================ */

.lsw-site {
    position: relative;

    z-index: var(--lsw-z-base);

    width: 100%;

    min-height: 100vh;
    min-height: 100svh;
}


main {
    display: block;

    width: 100%;
}


/* ============================================================
   05. CONTAINER
   ============================================================ */

.lsw-container {
    width:
        min(
            calc(100% - 112px),
            var(--lsw-container)
        );

    margin-inline: auto;
}


.lsw-container--narrow {
    width:
        min(
            calc(100% - 112px),
            var(--lsw-content-narrow)
        );

    margin-inline: auto;
}


/* ============================================================
   06. SECTIONS
   ============================================================ */

section {
    position: relative;

    scroll-margin-top:
        var(--lsw-header-offset);
}


.lsw-section {
    position: relative;

    padding-block:
        clamp(88px, 8vw, 150px);
}


.lsw-section--ivory {
    background:
        var(--lsw-ivory);
}


.lsw-section--soft {
    background:
        var(--lsw-ivory-soft);
}


.lsw-section--stone {
    background:
        var(--lsw-bg-stone);
}


.lsw-section--forest {
    color:
        var(--lsw-white);

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


/* ============================================================
   07. TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

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

    font-weight: 600;

    color:
        inherit;

    text-wrap: balance;

    letter-spacing: -0.035em;
}


h1 {
    font-size:
        clamp(3.7rem, 6.6vw, 7.5rem);

    line-height: 0.91;
}


h2 {
    font-size:
        clamp(3rem, 5vw, 5.5rem);

    line-height: 0.96;
}


h3 {
    font-size:
        clamp(2rem, 3vw, 3.1rem);

    line-height: 1;
}


h4 {
    font-size:
        clamp(1.55rem, 2vw, 2rem);

    line-height: 1.08;
}


p {
    margin-top: 0;
    margin-bottom: 1.35em;

    text-wrap: pretty;
}


p:last-child {
    margin-bottom: 0;
}


strong {
    font-weight: 700;
}


small {
    font-size: 0.875rem;
}


/* ============================================================
   08. LINKS
   ============================================================ */

a {
    color: inherit;

    text-decoration: none;
}


a,
button {
    -webkit-tap-highlight-color:
        transparent;
}


button,
input,
textarea,
select {
    font: inherit;
}


/* ============================================================
   09. IMAGES
   ============================================================ */

img,
picture,
video,
canvas,
svg {
    display: block;

    max-width: 100%;
}


img {
    height: auto;
}


/* ============================================================
   10. SELECTION
   ============================================================ */

::selection {
    color:
        var(--lsw-white);

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


/* ============================================================
   11. ACCESSIBLE FOCUS
   ============================================================ */

:focus {
    outline: none;
}


:focus-visible {
    outline:
        2px solid
        var(--lsw-gold-500);

    outline-offset: 5px;
}


/* ============================================================
   12. LABEL / EYEBROW
   ============================================================ */

.lsw-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;

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

    font-size: 0.82rem;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.18em;

    text-transform: uppercase;

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


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

    width: 46px;
    height: 1px;

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


.lsw-section--forest
.lsw-eyebrow {
    color:
        var(--lsw-gold-300);
}


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

.lsw-copy {
    max-width: 700px;

    font-size:
        clamp(
            1.02rem,
            0.95rem + 0.25vw,
            1.16rem
        );

    line-height: 1.75;

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


.lsw-section--forest
.lsw-copy {
    color:
        var(--lsw-text-light);
}


/* ============================================================
   14. GLOBAL BUTTONS
   ============================================================ */

.lsw-btn {
    position: relative;

    display: inline-flex;

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

    gap: 18px;

    min-height: 58px;

    padding:
        15px
        27px;

    overflow: hidden;

    border:
        1px solid
        transparent;

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

    font-size: 0.93rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;

    isolation: isolate;

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


.lsw-btn::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-btn:hover::before {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


.lsw-btn:hover {
    transform:
        translateY(-2px);
}


.lsw-btn:active {
    transform:
        translateY(0);
}


/* Primary */

.lsw-btn--primary {
    color:
        var(--lsw-white);

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

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

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


.lsw-btn--primary:hover {
    color:
        var(--lsw-forest-950);

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

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


/* Secondary */

.lsw-btn--outline {
    color:
        var(--lsw-gold-700);

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

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


.lsw-btn--outline:hover {
    color:
        var(--lsw-forest-950);
}


/* ============================================================
   15. ARCHITECTURAL GOLD LINE
   ============================================================ */

.lsw-rule {
    position: relative;

    width: 100%;
    max-width: 380px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--lsw-gold-600),
            rgba(180, 140, 69, 0.12)
        );
}


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

    position: absolute;

    right: 0;
    top: 50%;

    width: 11px;
    height: 11px;

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

    transform:
        translateY(-50%)
        rotate(45deg);

    background:
        var(--lsw-bg);
}


/* ============================================================
   16. GLOBAL REVEAL SYSTEM
   ============================================================ */

[data-lsw-reveal] {
    opacity: 0;

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


[data-lsw-reveal="text"] {
    transform:
        translateY(26px);
}


[data-lsw-reveal="left"] {
    transform:
        translateX(-42px);
}


[data-lsw-reveal="right"] {
    transform:
        translateX(42px);
}


[data-lsw-reveal="scale"] {
    transform:
        scale(0.965);
}


[data-lsw-reveal="mask"] {
    opacity: 1;

    clip-path:
        inset(
            0
            100%
            0
            0
        );
}


[data-lsw-reveal].is-visible {
    opacity: 1;

    transform:
        none;

    clip-path:
        inset(
            0
            0
            0
            0
        );
}


/* ============================================================
   17. SAME PAGE DESTINATION INDICATOR
   ============================================================ */

.lsw-section-focus::after {
    content: "";

    position: absolute;

    inset:
        14px
        18px;

    z-index: 15;

    pointer-events: none;

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

    animation:
        lswDestination
        900ms
        var(--lsw-ease)
        forwards;
}


@keyframes lswDestination {

    0% {
        opacity: 0;

        transform:
            scaleX(0.985);
    }

    32% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            scaleX(1);
    }
}


/* ============================================================
   18. PAGE TRANSITION
   ============================================================ */

.lsw-page-transition {
    position: fixed;

    inset: 0;

    z-index:
        var(--lsw-z-transition);

    display: grid;

    place-items: center;

    pointer-events: none;

    visibility: hidden;
}


.lsw-page-transition__panel {
    position: absolute;

    inset: -12%;

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

    transform:
        translateX(-105%)
        skewX(-7deg);

    transform-origin:
        left center;

    box-shadow:
        30px 0 90px
        rgba(17, 28, 20, 0.22);

    will-change:
        transform;

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


.lsw-page-transition__panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 4%;

    width: 2px;
    height: 100%;

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

    opacity: 0.8;
}


.lsw-page-transition__panel::after {
    content: "";

    position: absolute;

    top: 0;
    right: 7%;

    width: 11%;
    height: 100%;

    opacity: 0.1;

    background:
        linear-gradient(
            135deg,
            transparent 25%,
            var(--lsw-gold-500) 25%,
            var(--lsw-gold-500) 26%,
            transparent 26%,
            transparent 74%,
            var(--lsw-gold-500) 74%,
            var(--lsw-gold-500) 75%,
            transparent 75%
        );

    background-size:
        48px
        48px;
}


.lsw-page-transition__mark {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 18px;

    opacity: 0;

    color:
        var(--lsw-ivory);

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

    font-size: 0.84rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    transform:
        translateY(12px);

    transition:
        opacity
        280ms
        ease
        210ms,
        transform
        440ms
        var(--lsw-ease)
        160ms;
}


.lsw-page-transition__line {
    display: block;

    width: 42px;
    height: 1px;

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


/* Transition leaving */

html.lsw-leaving
.lsw-page-transition {
    visibility: visible;

    pointer-events: all;
}


html.lsw-leaving
.lsw-page-transition__panel {
    transform:
        translateX(0)
        skewX(-7deg);
}


html.lsw-leaving
.lsw-page-transition__mark {
    opacity: 1;

    transform:
        translateY(0);
}


/* Arriving page */

html.lsw-arriving
.lsw-page-transition {
    visibility: visible;
}


html.lsw-arriving
.lsw-page-transition__panel {
    transform:
        translateX(0)
        skewX(-7deg);

    transition: none;
}


html.lsw-arriving
.lsw-page-transition__mark {
    opacity: 1;

    transform:
        translateY(0);

    transition: none;
}


/* Arrival animation */

html.lsw-enter
.lsw-page-transition {
    visibility: visible;
}


html.lsw-enter
.lsw-page-transition__panel {
    transform:
        translateX(105%)
        skewX(-7deg);

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


html.lsw-enter
.lsw-page-transition__mark {
    opacity: 0;

    transform:
        translateY(-10px);

    transition:
        opacity
        220ms
        ease,
        transform
        260ms
        ease;
}


/* ============================================================
   19. REDUCED MOTION
   Controlled with JS instead of an extra CSS media query.
   ============================================================ */

html.lsw-reduced-motion *,
html.lsw-reduced-motion *::before,
html.lsw-reduced-motion *::after {
    scroll-behavior: auto !important;

    animation-duration:
        0.001ms !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        0.001ms !important;
}


/* ============================================================
   20. SCROLLBAR
   ============================================================ */

html {
    scrollbar-width: thin;

    scrollbar-color:
        var(--lsw-gold-600)
        var(--lsw-forest-950);
}


body::-webkit-scrollbar {
    width: 11px;
}


body::-webkit-scrollbar-track {
    background:
        var(--lsw-forest-950);
}


body::-webkit-scrollbar-thumb {
    border:
        3px solid
        var(--lsw-forest-950);

    border-radius:
        0;

    background:
        linear-gradient(
            180deg,
            var(--lsw-gold-500),
            var(--lsw-gold-700)
        );
}


body::-webkit-scrollbar-thumb:hover {
    background:
        var(--lsw-gold-300);
}


/* ============================================================
   21. RESPONSIVE — COMPUTER
   ============================================================ */

@media (min-width: 1200px) {

    body {
        font-size: 18px;
    }


    .lsw-container {
        width:
            min(
                calc(100% - 128px),
                var(--lsw-container)
            );
    }


    .lsw-container--narrow {
        width:
            min(
                calc(100% - 128px),
                var(--lsw-content-narrow)
            );
    }

}


/* ============================================================
   22. RESPONSIVE — TABLET
   ============================================================ */

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

    :root {
        --lsw-header-offset: 96px;
    }


    body {
        font-size: 17px;
    }


    .lsw-container,
    .lsw-container--narrow {
        width:
            calc(100% - 64px);
    }


    .lsw-section {
        padding-block:
            100px;
    }


    .lsw-btn {
        min-height: 56px;

        padding:
            14px
            24px;
    }

}


/* ============================================================
   23. RESPONSIVE — MOBILE
   ============================================================ */

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

    :root {
        --lsw-header-offset: 84px;
    }


    body {
        font-size: 16.5px;

        line-height: 1.68;
    }


    .lsw-container,
    .lsw-container--narrow {
        width:
            calc(100% - 40px);
    }


    .lsw-section {
        padding-block:
            82px;
    }


    h1 {
        font-size:
            clamp(3rem, 13vw, 4.6rem);

        line-height: 0.94;
    }


    h2 {
        font-size:
            clamp(2.65rem, 10vw, 4rem);
    }


    .lsw-btn {
        min-height: 55px;

        padding:
            14px
            21px;

        font-size: 0.88rem;
    }


    .lsw-page-transition__mark {
        font-size: 0.75rem;
    }

}


/* ============================================================
   24. RESPONSIVE — SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    :root {
        --lsw-header-offset: 80px;
    }


    body {
        font-size: 16px;

        line-height: 1.67;
    }


    .lsw-container,
    .lsw-container--narrow {
        width:
            calc(100% - 32px);
    }


    .lsw-section {
        padding-block:
            72px;
    }


    h1 {
        font-size:
            clamp(2.75rem, 14.5vw, 4.1rem);

        line-height: 0.94;
    }


    h2 {
        font-size:
            clamp(2.35rem, 12vw, 3.55rem);
    }


    h3 {
        font-size:
            clamp(1.85rem, 8vw, 2.5rem);
    }


    .lsw-copy {
        font-size: 1rem;
    }


    .lsw-btn {
        min-height: 54px;

        padding:
            14px
            18px;

        font-size: 0.84rem;

        letter-spacing: 0.065em;
    }


    .lsw-eyebrow {
        font-size: 0.75rem;

        letter-spacing: 0.14em;
    }


    .lsw-page-transition__mark {
        gap: 12px;

        font-size: 0.67rem;

        letter-spacing: 0.13em;
    }


    .lsw-page-transition__line {
        width: 28px;
    }

}












































/* ============================================================
   LAND & STONE WORKS LLC
   01. HEADER
   ============================================================ */


/* ============================================================
   01. HEADER TOKENS
   ============================================================ */

:root {

    --lsw-header-height: 112px;

    --lsw-header-bg:
        rgba(250, 248, 243, 0.97);

    --lsw-header-border:
        rgba(36, 59, 42, 0.10);

    --lsw-header-shadow:
        0 14px 36px
        rgba(24, 38, 28, 0.08);

}


/* ============================================================
   02. RESERVED HEADER SPACE
   ============================================================ */

.lsw-header-slot {
    width: 100%;

    height:
        var(--lsw-header-height);

    flex: 0 0
        var(--lsw-header-height);
}


/* ============================================================
   03. FIXED HEADER SHELL
   IMPORTANT:
   Never position: sticky.
   ============================================================ */

.lsw-header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index:
        var(--lsw-z-header);

    width: 100%;

    height:
        var(--lsw-header-height);

    background:
        var(--lsw-header-bg);

    border-bottom:
        1px solid
        transparent;

    isolation: isolate;

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


/* Fine architectural line */

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

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(180, 140, 69, 0.38) 15%,
            rgba(180, 140, 69, 0.65) 50%,
            rgba(180, 140, 69, 0.38) 85%,
            transparent 100%
        );

    transform:
        scaleX(0.75);

    transition:
        opacity
        var(--lsw-speed)
        var(--lsw-ease),
        transform
        var(--lsw-speed-slow)
        var(--lsw-ease);
}


/* Header after scroll */

.lsw-header.is-scrolled {
    background:
        rgba(250, 248, 243, 0.985);

    border-color:
        var(--lsw-header-border);

    box-shadow:
        var(--lsw-header-shadow);

    backdrop-filter:
        blur(18px);

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


.lsw-header.is-scrolled::after {
    opacity: 1;

    transform:
        scaleX(1);
}


/* ============================================================
   04. HEADER INNER LAYOUT
   ============================================================ */

.lsw-header__inner {
    position: relative;

    display: grid;

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

    grid-template-areas:
        "brand nav estimate";

    align-items: center;

    column-gap: 36px;

    height: 100%;
}


/* ============================================================
   05. BRAND
   ============================================================ */

.lsw-header__brand {
    grid-area: brand;

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-self: start;

    width: fit-content;

    z-index: 3;
}


.lsw-header__logo {
    width: 220px;

    max-height: 82px;

    object-fit: contain;

    object-position: left center;

    transition:
        transform
        500ms
        var(--lsw-ease),
        filter
        500ms
        var(--lsw-ease);
}


.lsw-header__brand:hover
.lsw-header__logo {
    transform:
        translateY(-2px);
}


/* ============================================================
   06. DESKTOP NAVIGATION
   ============================================================ */

.lsw-desktop-nav {
    grid-area: nav;

    display: flex;

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

    gap: clamp(22px, 2.15vw, 38px);

    white-space: nowrap;
}


.lsw-nav-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 44px;

    font-size: 0.9rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.025em;

    color:
        var(--lsw-charcoal);

    transition:
        color
        var(--lsw-speed)
        var(--lsw-ease);
}


/* Gold active line */

.lsw-nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 5px;

    width: 100%;
    height: 1px;

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

    transform:
        scaleX(0);

    transform-origin:
        right center;

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


.lsw-nav-link:hover,
.lsw-nav-link.is-active {
    color:
        var(--lsw-forest-800);
}


.lsw-nav-link:hover::after,
.lsw-nav-link.is-active::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


/* ============================================================
   07. FREE ESTIMATE BUTTON
   ============================================================ */

.lsw-header-estimate {
    grid-area: estimate;

    position: relative;

    display: inline-flex;

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

    justify-self: end;

    gap: 16px;

    min-height: 56px;

    padding:
        13px
        22px
        13px
        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 9px 25px
        rgba(36, 59, 42, 0.12);

    font-size: 0.88rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    isolation: isolate;

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


/* Gold wipe */

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

    position: absolute;

    inset: 0;

    z-index: -1;

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

    transform:
        scaleX(0);

    transform-origin:
        right center;

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


/* Small architectural corner */

.lsw-header-estimate::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 14px;
    height: 14px;

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

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

    opacity: 0.85;
}


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

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

    transform:
        translateY(-2px);

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


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

    transform-origin:
        left center;
}


.lsw-header-estimate__arrow {
    display: grid;

    place-items: center;

    width: 20px;
    height: 20px;

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

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


.lsw-header-estimate__arrow svg {
    width: 100%;
    height: 100%;
}


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

    transform:
        translateX(3px);
}


/* ============================================================
   08. MOBILE MENU TOGGLE
   ============================================================ */

.lsw-menu-toggle {
    grid-area: toggle;

    position: relative;

    display: none;

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

    justify-self: start;

    width: 48px;
    height: 48px;

    padding: 0;

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

    background:
        transparent;

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

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

    cursor: pointer;

    z-index: 20;

    transition:
        background-color
        var(--lsw-speed)
        var(--lsw-ease),
        border-color
        var(--lsw-speed)
        var(--lsw-ease),
        transform
        var(--lsw-speed)
        var(--lsw-ease);
}


.lsw-menu-toggle:hover {
    background:
        rgba(36, 59, 42, 0.05);

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


.lsw-menu-toggle__icon {
    position: relative;

    display: block;

    width: 22px;
    height: 16px;
}


.lsw-menu-toggle__icon span {
    position: absolute;

    left: 0;

    width: 22px;
    height: 1.5px;

    background:
        currentColor;

    transform-origin:
        center;

    transition:
        top
        320ms
        var(--lsw-ease),
        transform
        420ms
        var(--lsw-ease),
        width
        320ms
        var(--lsw-ease);
}


.lsw-menu-toggle__icon span:first-child {
    top: 4px;
}


.lsw-menu-toggle__icon span:last-child {
    top: 11px;

    width: 15px;
}


/* Turn hamburger into X */

html.lsw-menu-open
.lsw-menu-toggle__icon span:first-child {
    top: 7px;

    transform:
        rotate(45deg);
}


html.lsw-menu-open
.lsw-menu-toggle__icon span:last-child {
    top: 7px;

    width: 22px;

    transform:
        rotate(-45deg);
}


.lsw-menu-toggle__label {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;

    overflow: hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ============================================================
   09. MOBILE MENU OVERLAY
   Direct child of body.
   ============================================================ */

.lsw-mobile-menu {
    position: fixed;

    inset: 0;

    z-index:
        calc(var(--lsw-z-header) - 1);

    display: block;

    overflow: hidden;

    visibility: hidden;

    pointer-events: none;
}


/* Background */

.lsw-mobile-menu__background {
    position: absolute;

    inset: 0;

    background:
        rgba(23, 26, 24, 0.22);

    opacity: 0;

    backdrop-filter:
        blur(3px);

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

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


/* Full viewport panel */

.lsw-mobile-menu__panel {
    position: absolute;

    inset: 0;

    overflow:
        hidden auto;

    padding-top:
        calc(
            var(--lsw-header-height) +
            34px
        );

    padding-bottom: 32px;

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

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

    will-change:
        clip-path;

    transition:
        clip-path
        720ms
        var(--lsw-ease-sharp);
}


/* Dark architectural section */

.lsw-mobile-menu__panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 33%;
    height: 100%;

    opacity: 0.045;

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

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

    pointer-events: none;
}


/* Gold edge */

.lsw-mobile-menu__panel::after {
    content: "";

    position: absolute;

    top: 0;
    right: 17%;

    width: 1px;
    height: 100%;

    opacity: 0.28;

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

    transform:
        skewX(-12deg);

    pointer-events: none;
}


/* Open state */

html.lsw-menu-open
.lsw-mobile-menu {
    visibility: visible;

    pointer-events: auto;
}


html.lsw-menu-open
.lsw-mobile-menu__background {
    opacity: 1;
}


html.lsw-menu-open
.lsw-mobile-menu__panel {
    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            0 100%
        );
}


/* ============================================================
   10. MOBILE MENU CONTENT
   ============================================================ */

.lsw-mobile-menu__content {
    position: relative;

    z-index: 3;

    width:
        min(
            calc(100% - 64px),
            760px
        );

    margin-inline: auto;

    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity
        400ms
        ease
        220ms,
        transform
        650ms
        var(--lsw-ease)
        180ms;
}


html.lsw-menu-open
.lsw-mobile-menu__content {
    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   11. MOBILE INTRO
   ============================================================ */

.lsw-mobile-menu__intro {
    display: grid;

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

    align-items: center;

    gap: 20px;

    margin-bottom: 30px;

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;

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


.lsw-mobile-menu__intro p {
    margin: 0;

    font-size: inherit;

    white-space: nowrap;
}


.lsw-mobile-menu__rule {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--lsw-gold-600),
            rgba(180, 140, 69, 0.10)
        );
}


/* ============================================================
   12. MOBILE NAV LINKS
   ============================================================ */

.lsw-mobile-nav {
    border-top:
        1px solid
        var(--lsw-border);
}


.lsw-mobile-nav__link {
    position: relative;

    display: grid;

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

    align-items: center;

    min-height: 78px;

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

    color:
        var(--lsw-charcoal);

    transition:
        color
        var(--lsw-speed)
        var(--lsw-ease),
        padding-left
        var(--lsw-speed)
        var(--lsw-ease);
}


.lsw-mobile-nav__number {
    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.1em;

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


.lsw-mobile-nav__text {
    font-family:
        var(--lsw-font-display);

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.025em;
}


.lsw-mobile-nav__arrow {
    justify-self: end;

    font-size: 1.2rem;

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

    transform:
        translateX(-7px);

    opacity: 0;

    transition:
        opacity
        var(--lsw-speed)
        var(--lsw-ease),
        transform
        var(--lsw-speed)
        var(--lsw-ease);
}


.lsw-mobile-nav__link:hover,
.lsw-mobile-nav__link.is-active {
    color:
        var(--lsw-forest-800);
}


.lsw-mobile-nav__link:hover {
    padding-left: 6px;
}


.lsw-mobile-nav__link:hover
.lsw-mobile-nav__arrow {
    opacity: 1;

    transform:
        translateX(0);
}


/* ============================================================
   13. MOBILE MENU FOOTER
   ============================================================ */

.lsw-mobile-menu__footer {
    display: flex;

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

    gap: 24px;

    margin-top: 30px;

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

    font-size: 0.76rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ============================================================
   14. DECORATIVE GEOMETRY
   ============================================================ */

.lsw-mobile-menu__geometry {
    position: absolute;

    right: 6%;
    bottom: 5%;

    width: 190px;
    height: 190px;

    opacity: 0.055;

    pointer-events: none;
}


.lsw-mobile-menu__geometry span {
    position: absolute;

    inset: 0;

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

    transform:
        rotate(30deg);
}


.lsw-mobile-menu__geometry span:last-child {
    inset: 33px;

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

    transform:
        rotate(30deg);
}


/* ============================================================
   15. MENU OPEN SAFETY
   ============================================================ */

html.lsw-menu-open {
    overscroll-behavior: none;
}


/* ============================================================
   16. COMPUTER
   ============================================================ */

@media (min-width: 1200px) {

    :root {
        --lsw-header-height: 112px;
        --lsw-header-offset: 112px;
    }


    .lsw-header__logo {
        width: 220px;
    }


    .lsw-desktop-nav {
        display: flex;
    }


    .lsw-menu-toggle {
        display: none;
    }


    .lsw-mobile-menu {
        display: none;
    }

}


/* ============================================================
   17. TABLET
   Hamburger mode begins here intentionally.
   ============================================================ */

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

    :root {
        --lsw-header-height: 96px;
        --lsw-header-offset: 96px;
    }


    .lsw-header__inner {
        grid-template-columns:
            1fr
            auto
            1fr;

        grid-template-areas:
            "toggle brand estimate";

        column-gap: 18px;
    }


    .lsw-desktop-nav {
        display: none;
    }


    .lsw-menu-toggle {
        display: inline-flex;
    }


    .lsw-header__brand {
        justify-self: center;
    }


    .lsw-header__logo {
        width: 172px;

        max-height: 68px;

        object-position: center;
    }


    .lsw-header-estimate {
        min-height: 52px;

        padding:
            12px
            17px;

        font-size: 0.8rem;
    }


    .lsw-header-estimate__arrow {
        width: 18px;
        height: 18px;
    }


    .lsw-mobile-menu__content {
        width:
            min(
                calc(100% - 72px),
                700px
            );
    }

}


/* ============================================================
   18. MOBILE
   ============================================================ */

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

    :root {
        --lsw-header-height: 84px;
        --lsw-header-offset: 84px;
    }


    .lsw-header__inner {
        width:
            calc(100% - 32px);

        grid-template-columns:
            1fr
            auto
            1fr;

        grid-template-areas:
            "toggle brand estimate";

        column-gap: 8px;
    }


    .lsw-desktop-nav {
        display: none;
    }


    .lsw-menu-toggle {
        display: inline-flex;

        width: 44px;
        height: 44px;
    }


    .lsw-header__brand {
        justify-self: center;
    }


    .lsw-header__logo {
        width: 150px;

        max-height: 62px;

        object-position: center;
    }


    .lsw-header-estimate {
        gap: 8px;

        min-height: 46px;

        padding:
            10px
            12px;

        font-size: 0.72rem;

        letter-spacing: 0.045em;
    }


    .lsw-header-estimate__arrow {
        width: 16px;
        height: 16px;
    }


    .lsw-mobile-menu__panel {
        padding-top:
            calc(
                var(--lsw-header-height) +
                26px
            );
    }


    .lsw-mobile-menu__content {
        width:
            calc(100% - 40px);
    }


    .lsw-mobile-menu__intro {
        grid-template-columns:
            1fr;

        gap: 9px;

        margin-bottom: 22px;
    }


    .lsw-mobile-menu__intro p {
        white-space: normal;
    }


    .lsw-mobile-menu__rule {
        width: 90px;
    }


    .lsw-mobile-nav__link {
        min-height: 72px;
    }


    .lsw-mobile-nav__text {
        font-size:
            clamp(
                2rem,
                7.5vw,
                2.65rem
            );
    }

}


/* ============================================================
   19. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    :root {
        --lsw-header-height: 78px;
        --lsw-header-offset: 78px;
    }


    .lsw-header__inner {
        width:
            calc(100% - 24px);

        grid-template-columns:
            1fr
            auto
            1fr;

        grid-template-areas:
            "toggle brand estimate";

        column-gap: 5px;
    }


    .lsw-desktop-nav {
        display: none;
    }


    .lsw-menu-toggle {
        display: inline-flex;

        width: 42px;
        height: 42px;
    }


    .lsw-menu-toggle__icon {
        width: 20px;
    }


    .lsw-menu-toggle__icon span {
        width: 20px;
    }


    .lsw-menu-toggle__icon span:last-child {
        width: 14px;
    }


    html.lsw-menu-open
    .lsw-menu-toggle__icon span:last-child {
        width: 20px;
    }


    .lsw-header__brand {
        justify-self: center;
    }


    .lsw-header__logo {
        width: 126px;

        max-height: 58px;

        object-position: center;
    }


    .lsw-header-estimate {
        gap: 0;

        min-height: 42px;

        padding:
            9px
            10px;

        font-size: 0.66rem;

        letter-spacing: 0.025em;
    }


    .lsw-header-estimate__arrow {
        display: none;
    }


    .lsw-mobile-menu__panel {
        padding-top:
            calc(
                var(--lsw-header-height) +
                22px
            );

        padding-bottom: 22px;
    }


    .lsw-mobile-menu__content {
        width:
            calc(100% - 32px);
    }


    .lsw-mobile-menu__intro {
        grid-template-columns:
            1fr;

        gap: 8px;

        margin-bottom: 18px;

        font-size: 0.68rem;
    }


    .lsw-mobile-menu__intro p {
        white-space: normal;
    }


    .lsw-mobile-menu__rule {
        width: 74px;
    }


    .lsw-mobile-nav__link {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            24px;

        min-height: 67px;
    }


    .lsw-mobile-nav__number {
        font-size: 0.64rem;
    }


    .lsw-mobile-nav__text {
        font-size:
            clamp(
                1.85rem,
                8.3vw,
                2.35rem
            );
    }


    .lsw-mobile-nav__arrow {
        display: none;
    }


    .lsw-mobile-menu__footer {
        display: grid;

        gap: 6px;

        margin-top: 22px;

        font-size: 0.66rem;
    }


    .lsw-mobile-menu__geometry {
        right: -50px;
        bottom: 8%;

        width: 150px;
        height: 150px;
    }

}










































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


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

.lsw-hero {
    position: relative;

    width: 100%;

    height:
        calc(
            100vh -
            var(--lsw-header-height)
        );

    height:
        calc(
            100svh -
            var(--lsw-header-height)
        );

    min-height: 0;

    overflow: hidden;

    color:
        var(--lsw-text);

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

    isolation: isolate;
}


/* Soft lighting — not a visible gradient section */

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

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 73% 47%,
            rgba(199, 163, 93, 0.075),
            transparent 28%
        ),
        radial-gradient(
            circle at 16% 45%,
            rgba(36, 59, 42, 0.035),
            transparent 31%
        );
}


/* Very subtle paper/mineral depth */

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

    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: 0.16;

    background-image:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.58),
            transparent 30%,
            rgba(215, 206, 188, 0.18)
        );
}


/* ============================================================
   02. HERO LAYOUT
   ============================================================ */

.lsw-hero__inner {
    position: relative;

    z-index: 3;

    display: grid;

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

    align-items: center;

    gap:
        clamp(
            34px,
            3.7vw,
            72px
        );

    height: 100%;

    padding-block:
        clamp(
            24px,
            3.1vh,
            42px
        );
}


/* ============================================================
   03. BACKGROUND GEOMETRY
   Based on the faceted S from the logo
   ============================================================ */

.lsw-hero__background-art {
    position: absolute;

    z-index: -1;

    top: 0;
    left: 0;
    bottom: 0;

    width: 36%;

    overflow: hidden;

    pointer-events: none;

    opacity: 0.74;
}


.lsw-hero__shape {
    position: absolute;

    display: block;

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

    background:
        rgba(215, 206, 188, 0.14);

    transform:
        rotate(30deg);
}


.lsw-hero__shape--one {
    width: 260px;
    height: 260px;

    left: -130px;
    top: 13%;
}


.lsw-hero__shape--two {
    width: 190px;
    height: 190px;

    left: -76px;
    top: 43%;

    background:
        rgba(180, 140, 69, 0.045);
}


.lsw-hero__shape--three {
    width: 315px;
    height: 315px;

    left: -195px;
    bottom: -60px;
}


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

.lsw-hero__content {
    position: relative;

    z-index: 6;

    width: 100%;

    max-width: 720px;
}


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

.lsw-hero__eyebrow {
    display: flex;

    align-items: center;

    gap: 18px;

    width: fit-content;

    margin-bottom:
        clamp(
            22px,
            3vh,
            34px
        );
}


.lsw-hero__eyebrow-text {
    font-family:
        var(--lsw-font-body);

    font-size:
        clamp(
            0.76rem,
            0.7rem + 0.14vw,
            0.86rem
        );

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.15em;

    text-transform: uppercase;

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

    white-space: nowrap;
}


.lsw-hero__eyebrow-line {
    display: block;

    width: 72px;
    height: 1px;

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

    transform-origin:
        left center;
}


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

.lsw-hero__title {
    max-width: 750px;

    margin: 0;

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

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

    font-weight: 500;

    line-height: 0.94;

    letter-spacing: -0.047em;

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


.lsw-hero__title-clip {
    display: block;

    overflow: hidden;

    padding-bottom: 0.055em;
}


.lsw-hero__title-line {
    display: block;
}


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


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

.lsw-hero__divider {
    display: flex;

    align-items: center;

    width:
        min(
            100%,
            390px
        );

    margin:
        clamp(22px, 2.7vh, 34px)
        0
        clamp(20px, 2.4vh, 30px);
}


.lsw-hero__divider-line {
    display: block;

    flex: 1;

    height: 1px;

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

    transform-origin:
        left center;
}


.lsw-hero__divider-mark {
    position: relative;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    margin-left: -1px;

    transform:
        rotate(30deg);

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

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


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

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


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

.lsw-hero__description {
    max-width: 590px;

    margin:
        0
        0
        clamp(
            26px,
            3.4vh,
            40px
        );

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

    font-weight: 400;

    line-height: 1.72;

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

    text-wrap: pretty;
}


/* ============================================================
   09. ACTIONS
   ============================================================ */

.lsw-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;
}


.lsw-hero__button {
    position: relative;

    display: inline-flex;

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

    gap: 22px;

    min-height: 58px;

    padding:
        15px
        25px;

    overflow: hidden;

    border:
        1px solid
        transparent;

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

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

    font-size: 0.87rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    isolation: isolate;

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


.lsw-hero__button svg {
    width: 21px;
    height: 21px;

    flex: 0 0 auto;

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


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

    position: absolute;

    inset: 0;

    z-index: -1;

    transform:
        scaleX(0);

    transform-origin:
        right center;

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


.lsw-hero__button:hover {
    transform:
        translateY(-2px);
}


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

    transform-origin:
        left center;
}


.lsw-hero__button:hover svg {
    transform:
        translateX(4px);
}


/* Primary */

.lsw-hero__button--primary {
    color:
        var(--lsw-white);

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

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

    box-shadow:
        0 13px 32px
        rgba(36, 59, 42, 0.13);
}


.lsw-hero__button--primary::before {
    background:
        var(--lsw-gold-500);
}


.lsw-hero__button--primary:hover {
    color:
        var(--lsw-forest-950);

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

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


/* Secondary */

.lsw-hero__button--secondary {
    color:
        var(--lsw-gold-700);

    background:
        rgba(250, 248, 243, 0.42);

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


.lsw-hero__button--secondary::before {
    background:
        var(--lsw-gold-500);
}


.lsw-hero__button--secondary:hover {
    color:
        var(--lsw-forest-950);

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


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

.lsw-hero__visual {
    position: relative;

    z-index: 4;

    width: 100%;
    height: 100%;

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


.lsw-hero__gallery-stage {
    position: absolute;

    inset:
        clamp(10px, 1.4vh, 22px)
        0;

    isolation: isolate;

    will-change:
        transform;
}


/* ============================================================
   11. IMAGE FRAME BASE
   ============================================================ */

.lsw-hero__frame {
    position: absolute;

    margin: 0;

    overflow: hidden;

    background:
        var(--lsw-limestone);

    box-shadow:
        0 19px 50px
        rgba(25, 35, 28, 0.13);

    isolation: isolate;
}


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

    position: absolute;

    inset: 0;

    pointer-events: none;

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

    mix-blend-mode:
        soft-light;
}


.lsw-hero__media {
    position: absolute;

    inset: 0;

    transform:
        translate3d(
            var(--lsw-parallax-x, 0px),
            var(--lsw-parallax-y, 0px),
            0
        )
        scale(1.045);

    will-change:
        transform;

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


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

    object-fit: cover;

    object-position: center;
}


/* ============================================================
   12. MAIN IMAGE
   ============================================================ */

.lsw-hero__frame--main {
    z-index: 3;

    top: 2%;
    left: 4%;

    width: 60%;
    height: 48%;

    clip-path:
        polygon(
            17% 0,
            100% 0,
            100% 100%,
            17% 100%,
            0 70%,
            11% 52%,
            0 36%
        );
}


.lsw-hero__frame--main
.lsw-hero__media img {
    object-position:
        center 52%;
}


/* ============================================================
   13. STEPS IMAGE
   ============================================================ */

.lsw-hero__frame--steps {
    z-index: 2;

    top: 2%;
    right: -4%;

    width: 37%;
    height: 48%;

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


/* ============================================================
   14. PATH IMAGE
   ============================================================ */

.lsw-hero__frame--path {
    z-index: 2;

    left: 18%;
    bottom: 1%;

    width: 49%;
    height: 43%;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            18% 100%,
            0 76%,
            9% 55%
        );
}


/* ============================================================
   15. MASONRY IMAGE
   ============================================================ */

.lsw-hero__frame--masonry {
    z-index: 2;

    right: -4%;
    bottom: 1%;

    width: 36%;
    height: 43%;
}


/* ============================================================
   16. SMALL IVORY GUTTERS
   ============================================================ */

.lsw-hero__frame--steps::before,
.lsw-hero__frame--masonry::before {
    content: "";

    position: absolute;

    z-index: 4;

    top: 0;
    left: 0;

    width: 7px;
    height: 100%;

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

    pointer-events: none;
}


.lsw-hero__frame--path::before {
    content: "";

    position: absolute;

    z-index: 4;

    top: 0;
    left: 0;

    width: 100%;
    height: 7px;

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

    pointer-events: none;
}


.lsw-hero__frame--masonry::after {
    content: "";

    position: absolute;

    z-index: 5;

    top: 0;
    left: 0;

    width: 100%;
    height: 7px;

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

    border: 0;

    mix-blend-mode: normal;
}


/* ============================================================
   17. GOLD COLLAGE LINES
   ============================================================ */

.lsw-hero__gallery-line {
    position: absolute;

    z-index: 7;

    display: block;

    width: 165px;
    height: 1px;

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

    pointer-events: none;

    transform-origin:
        left center;
}


.lsw-hero__gallery-line::before {
    content: "";

    position: absolute;

    left: 0;

    width: 1px;
    height: 42px;

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


.lsw-hero__gallery-line--top {
    top: 0;
    left: 18%;

    transform:
        rotate(-60deg);
}


.lsw-hero__gallery-line--top::before {
    bottom: 0;
}


.lsw-hero__gallery-line--bottom {
    left: 20%;
    bottom: 1%;

    transform:
        rotate(60deg);
}


.lsw-hero__gallery-line--bottom::before {
    top: 0;
}


/* ============================================================
   18. BRAND MEDALLION
   ============================================================ */

.lsw-hero__medallion {
    position: absolute;

    z-index: 12;

    top: 45%;
    left: 61%;

    width:
        clamp(
            94px,
            8vw,
            136px
        );

    aspect-ratio: 1;

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


.lsw-hero__medallion-border {
    position: absolute;

    inset: 0;

    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 14px 24px
            rgba(34, 42, 35, 0.15)
        );
}


.lsw-hero__medallion-inner {
    position: absolute;

    inset: 3px;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:
        var(--lsw-ivory);

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


.lsw-hero__medallion-inner::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.15;

    background:
        linear-gradient(
            130deg,
            transparent,
            var(--lsw-limestone)
        );
}


.lsw-hero__medallion-inner img {
    position: relative;

    z-index: 2;

    width: 55%;
    height: 55%;

    object-fit: contain;

    opacity: 0.09;

    filter:
        grayscale(1);
}


/* ============================================================
   19. CORNER DETAIL
   ============================================================ */

.lsw-hero__corner-detail {
    position: absolute;

    z-index: 1;

    right: 0;
    bottom: 0;

    width: 74px;
    height: 74px;

    overflow: hidden;

    pointer-events: none;
}


.lsw-hero__corner-detail::before {
    content: "";

    position: absolute;

    right: -45px;
    bottom: -45px;

    width: 90px;
    height: 90px;

    transform:
        rotate(45deg);

    background:
        rgba(36, 59, 42, 0.05);
}


.lsw-hero__corner-detail span {
    position: absolute;

    right: 12px;
    bottom: 12px;

    width: 20px;
    height: 1px;

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


/* ============================================================
   20. SHORT VIEWPORT MODE
   Controlled by JS.
   Prevents Hero from overflowing available first screen.
   ============================================================ */

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


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


.lsw-hero.is-short
.lsw-hero__title {
    font-size:
        clamp(
            3rem,
            4vw,
            4.6rem
        );
}


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


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

    line-height: 1.55;
}


.lsw-hero.is-short
.lsw-hero__button {
    min-height: 50px;
}


/* ============================================================
   21. ENTRANCE ANIMATION
   Only hides elements when JS is available.
   ============================================================ */

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

    transform:
        translateY(15px);
}


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


html.lsw-js
.lsw-hero__title-line {
    transform:
        translateY(112%);

    opacity: 0.15;
}


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


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

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


html.lsw-js
.lsw-hero__description {
    opacity: 0;

    transform:
        translateY(18px);
}


html.lsw-js
.lsw-hero__actions {
    opacity: 0;

    transform:
        translateY(18px);
}


html.lsw-js
.lsw-hero__frame {
    opacity: 0;

    clip-path:
        inset(
            0
            100%
            0
            0
        );
}


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

    transform:
        translate(-50%, -50%)
        rotate(-16deg)
        scale(0.72);
}


html.lsw-js
.lsw-hero__gallery-line {
    opacity: 0;

    scale: 0 1;
}


/* ============================================================
   22. READY STATE
   ============================================================ */

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

    transform:
        translateY(0);

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


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

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


html.lsw-js
.lsw-hero.is-ready
.lsw-hero__title-line {
    opacity: 1;

    transform:
        translateY(0);

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


html.lsw-js
.lsw-hero.is-ready
.lsw-hero__title-clip:nth-child(1)
.lsw-hero__title-line {
    transition-delay:
        190ms;
}


html.lsw-js
.lsw-hero.is-ready
.lsw-hero__title-clip:nth-child(2)
.lsw-hero__title-line {
    transition-delay:
        280ms;
}


html.lsw-js
.lsw-hero.is-ready
.lsw-hero__title-clip:nth-child(3)
.lsw-hero__title-line {
    transition-delay:
        370ms;
}


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

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


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

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

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


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

    transform:
        translateY(0);

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


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

    transform:
        translateY(0);

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


/* Frames restore their own polygon shapes */

html.lsw-js
.lsw-hero.is-ready
.lsw-hero__frame--main {
    opacity: 1;

    clip-path:
        polygon(
            17% 0,
            100% 0,
            100% 100%,
            17% 100%,
            0 70%,
            11% 52%,
            0 36%
        );

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


html.lsw-js
.lsw-hero.is-ready
.lsw-hero__frame--steps {
    opacity: 1;

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

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


html.lsw-js
.lsw-hero.is-ready
.lsw-hero__frame--path {
    opacity: 1;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            18% 100%,
            0 76%,
            9% 55%
        );

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


html.lsw-js
.lsw-hero.is-ready
.lsw-hero__frame--masonry {
    opacity: 1;

    clip-path:
        inset(
            0
            0
            0
            0
        );

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


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

    transform:
        translate(-50%, -50%)
        rotate(0)
        scale(1);

    transition:
        opacity
        600ms
        ease
        820ms,
        transform
        1000ms
        var(--lsw-ease)
        760ms;
}


html.lsw-js
.lsw-hero.is-ready
.lsw-hero__gallery-line {
    opacity: 1;

    scale: 1 1;

    transition:
        opacity
        400ms
        ease
        760ms,
        scale
        1000ms
        var(--lsw-ease)
        720ms;
}


/* ============================================================
   23. REDUCED MOTION
   Uses global JS class — no fifth media query.
   ============================================================ */

html.lsw-reduced-motion
.lsw-hero__media {
    transform:
        scale(1.025) !important;
}


/* ============================================================
   24. COMPUTER
   ============================================================ */

@media (min-width: 1200px) {

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


    .lsw-hero__content {
        padding-left:
            clamp(
                0px,
                1.2vw,
                18px
            );
    }


    .lsw-hero__visual {
        margin-right:
            clamp(
                -38px,
                -2vw,
                -10px
            );
    }

}


/* ============================================================
   25. TABLET
   ============================================================ */

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

    .lsw-hero__inner {
        grid-template-columns:
            minmax(0, 0.93fr)
            minmax(0, 1.07fr);

        gap: 28px;

        width:
            calc(100% - 54px);

        padding-block: 22px;
    }


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


    .lsw-hero__description {
        font-size: 0.98rem;

        line-height: 1.62;
    }


    .lsw-hero__eyebrow-line {
        width: 46px;
    }


    .lsw-hero__button {
        min-height: 52px;

        padding:
            13px
            18px;

        font-size: 0.77rem;
    }


    .lsw-hero__actions {
        gap: 10px;
    }


    .lsw-hero__frame--main {
        left: 0;

        width: 65%;
    }


    .lsw-hero__frame--steps {
        right: -7%;

        width: 39%;
    }


    .lsw-hero__frame--path {
        left: 16%;

        width: 53%;
    }


    .lsw-hero__frame--masonry {
        right: -7%;

        width: 38%;
    }


    .lsw-hero__medallion {
        left: 62%;

        width:
            clamp(
                80px,
                9vw,
                105px
            );
    }

}


/* ============================================================
   26. MOBILE
   ============================================================ */

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

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

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

        align-items: stretch;

        gap:
            clamp(
                14px,
                2.2vh,
                20px
            );

        width:
            calc(100% - 38px);

        padding:
            18px
            0
            14px;
    }


    .lsw-hero__content {
        max-width: 100%;
    }


    .lsw-hero__background-art {
        width: 70%;

        opacity: 0.55;
    }


    .lsw-hero__eyebrow {
        margin-bottom: 13px;
    }


    .lsw-hero__eyebrow-text {
        font-size: 0.68rem;

        letter-spacing: 0.115em;
    }


    .lsw-hero__eyebrow-line {
        width: 42px;
    }


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

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

        line-height: 0.92;
    }


    .lsw-hero__divider {
        width: 240px;

        margin:
            13px
            0;
    }


    .lsw-hero__description {
        max-width: 580px;

        margin-bottom: 15px;

        font-size: 0.92rem;

        line-height: 1.5;
    }


    .lsw-hero__actions {
        gap: 9px;
    }


    .lsw-hero__button {
        min-height: 46px;

        padding:
            11px
            15px;

        gap: 12px;

        font-size: 0.69rem;
    }


    .lsw-hero__button svg {
        width: 17px;
        height: 17px;
    }


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


    .lsw-hero__gallery-stage {
        inset:
            0
            -5px
            0
            0;
    }


    .lsw-hero__frame--main {
        top: 0;
        left: 0;

        width: 63%;
        height: 100%;

        clip-path:
            polygon(
                12% 0,
                100% 0,
                100% 100%,
                11% 100%,
                0 72%,
                8% 52%,
                0 32%
            );
    }


    .lsw-hero__frame--steps {
        top: 0;
        right: 0;

        width: 38%;
        height: 48%;
    }


    .lsw-hero__frame--path {
        display: none;
    }


    .lsw-hero__frame--masonry {
        right: 0;
        bottom: 0;

        width: 38%;
        height: 50%;
    }


    .lsw-hero__medallion {
        top: 50%;
        left: 62%;

        width: 72px;
    }


    .lsw-hero__gallery-line--top {
        left: 14%;
    }


    .lsw-hero__gallery-line--bottom {
        display: none;
    }

}


/* ============================================================
   27. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

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

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

        gap: 12px;

        width:
            calc(100% - 28px);

        padding:
            13px
            0
            10px;
    }


    .lsw-hero__background-art {
        width: 85%;

        opacity: 0.42;
    }


    .lsw-hero__eyebrow {
        gap: 10px;

        margin-bottom: 10px;
    }


    .lsw-hero__eyebrow-text {
        font-size: 0.6rem;

        letter-spacing: 0.105em;
    }


    .lsw-hero__eyebrow-line {
        width: 28px;
    }


    .lsw-hero__title {
        font-size:
            clamp(
                2.1rem,
                10.2vw,
                2.8rem
            );

        line-height: 0.91;

        letter-spacing: -0.04em;
    }


    .lsw-hero__divider {
        width: 190px;

        margin:
            9px
            0;
    }


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


    .lsw-hero__description {
        margin-bottom: 11px;

        font-size: 0.8rem;

        line-height: 1.42;
    }


    .lsw-hero__actions {
        gap: 7px;
    }


    .lsw-hero__button {
        min-height: 42px;

        padding:
            9px
            11px;

        gap: 8px;

        font-size: 0.59rem;

        letter-spacing: 0.045em;
    }


    .lsw-hero__button svg {
        width: 15px;
        height: 15px;
    }


    .lsw-hero__gallery-stage {
        inset: 0;
    }


    .lsw-hero__frame--main {
        top: 0;
        left: 0;

        width: 69%;
        height: 100%;

        clip-path:
            polygon(
                10% 0,
                100% 0,
                100% 100%,
                10% 100%,
                0 72%,
                7% 52%,
                0 31%
            );
    }


    .lsw-hero__frame--steps {
        top: 0;
        right: 0;

        width: 32%;
        height: 48%;
    }


    .lsw-hero__frame--path {
        display: none;
    }


    .lsw-hero__frame--masonry {
        right: 0;
        bottom: 0;

        width: 32%;
        height: 50%;
    }


    .lsw-hero__medallion {
        top: 50%;
        left: 68%;

        width: 58px;
    }


    .lsw-hero__gallery-line--top,
    .lsw-hero__gallery-line--bottom {
        display: none;
    }


    /*
        Extremely short mobile viewports:
        JS adds .is-short.
    */

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


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


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

}









































/* ============================================================
   LAND & STONE WORKS LLC
   03. SERVICES
   ============================================================ */


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

.lsw-services {
    position: relative;

    z-index: 2;

    padding:
        clamp(110px, 9vw, 165px)
        0
        clamp(100px, 8vw, 150px);

    overflow: hidden;

    background:
        var(--lsw-bg-stone);

    isolation: isolate;
}


/* Subtle mineral lighting */

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

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 78% 13%,
            rgba(199, 163, 93, 0.09),
            transparent 29%
        ),
        radial-gradient(
            circle at 10% 72%,
            rgba(36, 59, 42, 0.045),
            transparent 27%
        );
}


/* ============================================================
   02. TRANSITION FROM HERO
   ============================================================ */

.lsw-services__transition {
    position: absolute;

    z-index: 8;

    top: 0;
    left: 0;

    width: 100%;
    height: 68px;

    pointer-events: none;
}


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

    position: absolute;

    top: -1px;
    left: 0;

    width: 58%;
    height: 44px;

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

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


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

    position: absolute;

    top: 0;
    right: 0;

    width: 46%;
    height: 26px;

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

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


.lsw-services__transition-line {
    position: absolute;

    z-index: 4;

    top: 41px;
    left: 8%;

    width: 165px;
    height: 1px;

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

    transform:
        scaleX(0);

    transform-origin:
        left center;

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


.lsw-services.is-visible
.lsw-services__transition-line {
    transform:
        scaleX(1);
}


.lsw-services__transition-mark {
    position: absolute;

    z-index: 5;

    top: 34px;
    left:
        calc(
            8% + 157px
        );

    width: 14px;
    height: 14px;

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

    background:
        var(--lsw-bg-stone);

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

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


.lsw-services.is-visible
.lsw-services__transition-mark {
    transform:
        rotate(30deg)
        scale(1);
}


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

.lsw-services__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


.lsw-services__bg-shape {
    position: absolute;

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

    transform:
        rotate(30deg);
}


.lsw-services__bg-shape--one {
    top: 9%;
    right: -130px;

    width: 320px;
    height: 320px;

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


.lsw-services__bg-shape--two {
    left: -155px;
    bottom: 5%;

    width: 280px;
    height: 280px;

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


/* ============================================================
   04. INNER
   ============================================================ */

.lsw-services__inner {
    position: relative;

    z-index: 2;
}


/* ============================================================
   05. SECTION HEADER
   ============================================================ */

.lsw-services__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.28fr)
        minmax(310px, 0.72fr);

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

    align-items: end;

    margin-bottom:
        clamp(
            58px,
            6vw,
            90px
        );
}


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

.lsw-services__eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;

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

    font-size: 0.79rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;

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


.lsw-services__eyebrow-index {
    color:
        var(--lsw-gold-700);
}


.lsw-services__eyebrow-line {
    display: block;

    width: 54px;
    height: 1px;

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

    transform-origin:
        left center;
}


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

.lsw-services__title {
    max-width: 850px;

    margin: 0;

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

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

    font-weight: 500;

    line-height: 0.94;

    letter-spacing: -0.045em;

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


.lsw-services__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.05em;
}


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


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


/* ============================================================
   08. INTRO
   ============================================================ */

.lsw-services__intro {
    max-width: 490px;

    padding-bottom: 4px;
}


.lsw-services__intro p {
    margin:
        0
        0
        26px;

    font-size:
        clamp(
            1rem,
            0.96rem + 0.18vw,
            1.12rem
        );

    line-height: 1.72;

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


.lsw-services__gallery-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 17px;

    padding-bottom: 8px;

    font-size: 0.87rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.085em;

    text-transform: uppercase;

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


.lsw-services__gallery-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

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

    transform-origin:
        left center;

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


.lsw-services__gallery-link:hover::after {
    transform:
        scaleX(0.72);
}


.lsw-services__gallery-arrow {
    display: grid;

    place-items: center;

    width: 20px;
    height: 20px;

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

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


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


.lsw-services__gallery-link:hover
.lsw-services__gallery-arrow {
    transform:
        translateX(5px);
}


/* ============================================================
   09. MOSAIC GRID
   ============================================================ */

.lsw-services__grid {
    display: grid;

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

    grid-template-rows:
        minmax(260px, 0.98fr)
        minmax(260px, 0.98fr)
        minmax(285px, 1fr);

    gap: 18px;
}


/* ============================================================
   10. SERVICE CARD BASE
   ============================================================ */

.lsw-service-card {
    position: relative;

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

    margin: 0;

    overflow: hidden;

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

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

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

    box-shadow:
        0 15px 38px
        rgba(24, 38, 28, 0.07);

    isolation: isolate;
}


.lsw-service-card__link {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    color: inherit;
}


/* Gold hover edge */

.lsw-service-card::after {
    content: "";

    position: absolute;

    z-index: 8;

    top: 0;
    right: 0;

    width: 1px;
    height: 100%;

    pointer-events: none;

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

    transform:
        scaleY(0);

    transform-origin:
        top center;

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


.lsw-service-card:hover::after {
    transform:
        scaleY(1);
}


/* ============================================================
   11. GRID POSITIONS
   ============================================================ */

.lsw-service-card--landscaping {
    grid-column:
        1 / span 7;

    grid-row:
        1 / span 2;
}


.lsw-service-card--hardscape {
    grid-column:
        8 / span 5;

    grid-row:
        1;
}


.lsw-service-card--masonry {
    grid-column:
        8 / span 5;

    grid-row:
        2;
}


.lsw-service-card--turf {
    grid-column:
        1 / span 4;

    grid-row:
        3;
}


.lsw-service-card--sod {
    grid-column:
        5 / span 4;

    grid-row:
        3;
}


.lsw-service-card--ground-cover {
    grid-column:
        9 / span 4;

    grid-row:
        3;
}


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

.lsw-service-card__media {
    position: relative;

    overflow: hidden;

    background:
        var(--lsw-limestone);
}


.lsw-service-card__media::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

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


.lsw-service-card__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

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

    will-change:
        transform;

    transition:
        transform
        1000ms
        var(--lsw-ease),
        filter
        800ms
        var(--lsw-ease);
}


.lsw-service-card:hover
.lsw-service-card__media img {
    transform:
        translate3d(
            var(--service-x, 0px),
            var(--service-y, 0px),
            0
        )
        scale(1.085);
}


/* ============================================================
   13. FEATURED CARD
   ============================================================ */

.lsw-service-card--featured
.lsw-service-card__media {
    position: absolute;

    inset: 0;
}


.lsw-service-card__shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(20, 31, 23, 0.10) 15%,
            rgba(20, 31, 23, 0.14) 42%,
            rgba(17, 27, 20, 0.78) 100%
        );
}


.lsw-service-card__feature-top {
    position: absolute;

    z-index: 4;

    top: 28px;
    left: 30px;
    right: 30px;

    display: flex;

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

    gap: 20px;

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


.lsw-service-card__number {
    font-family:
        var(--lsw-font-body);

    font-size: 0.74rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.13em;

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


.lsw-service-card__category {
    font-size: 0.72rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.115em;

    text-transform: uppercase;

    color:
        rgba(255, 255, 255, 0.82);
}


.lsw-service-card__feature-content {
    position: absolute;

    z-index: 5;

    left: 34px;
    right: 34px;
    bottom: 32px;

    display: flex;

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

    gap: 32px;

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


.lsw-service-card--featured
.lsw-service-card__title {
    margin-bottom: 10px;

    font-size:
        clamp(
            2.7rem,
            4vw,
            4.7rem
        );

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


.lsw-service-card--featured
.lsw-service-card__description {
    max-width: 490px;

    color:
        rgba(255, 255, 255, 0.78);
}


/* ============================================================
   14. CARD TITLES / COPY
   ============================================================ */

.lsw-service-card__title {
    margin: 0;

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

    font-size:
        clamp(
            2rem,
            2.45vw,
            3rem
        );

    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -0.035em;

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


.lsw-service-card__description {
    margin:
        10px
        0
        0;

    font-size: 0.94rem;

    line-height: 1.58;

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


/* ============================================================
   15. ACTION ICON
   ============================================================ */

.lsw-service-card__action {
    display: grid;

    place-items: center;

    flex: 0 0 auto;

    width: 46px;
    height: 46px;

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

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

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

    background:
        rgba(250, 248, 243, 0.08);

    backdrop-filter:
        blur(9px);

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

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


.lsw-service-card__action svg {
    width: 19px;
    height: 19px;
}


.lsw-service-card:hover
.lsw-service-card__action {
    color:
        var(--lsw-forest-950);

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

    transform:
        translateX(4px);
}


/* ============================================================
   16. HORIZONTAL CARDS
   ============================================================ */

.lsw-service-card--horizontal
.lsw-service-card__link {
    display: grid;

    grid-template-columns:
        minmax(180px, 0.92fr)
        minmax(220px, 1.08fr);
}


.lsw-service-card--horizontal
.lsw-service-card__media {
    height: 100%;
}


.lsw-service-card__body {
    position: relative;

    display: grid;

    grid-template-rows:
        auto
        1fr
        auto;

    padding:
        27px
        28px
        25px;
}


.lsw-service-card__copy {
    align-self: center;
}


.lsw-service-card--horizontal
.lsw-service-card__action {
    justify-self: end;
}


/* Small facet on content */

.lsw-service-card--horizontal
.lsw-service-card__body::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 44px;
    height: 44px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    background:
        var(--lsw-bg-stone);

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


/* ============================================================
   17. COMPACT CARDS
   ============================================================ */

.lsw-service-card--compact
.lsw-service-card__link {
    display: grid;

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


.lsw-service-card--compact
.lsw-service-card__media {
    min-height: 0;
}


.lsw-service-card__compact-content {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    grid-template-areas:
        "number action"
        "title action";

    align-items: center;

    column-gap: 18px;

    padding:
        22px
        24px
        24px;
}


.lsw-service-card__compact-content
.lsw-service-card__number {
    grid-area: number;

    margin-bottom: 8px;
}


.lsw-service-card__compact-content
.lsw-service-card__title {
    grid-area: title;

    font-size:
        clamp(
            1.85rem,
            2.15vw,
            2.65rem
        );
}


.lsw-service-card__compact-content
.lsw-service-card__title span {
    display: block;
}


.lsw-service-card__compact-content
.lsw-service-card__action {
    grid-area: action;

    align-self: end;
}


/* ============================================================
   18. SERVICES FOOTER
   ============================================================ */

.lsw-services__footer {
    display: grid;

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

    align-items: center;

    gap: 28px;

    margin-top:
        clamp(
            38px,
            4vw,
            58px
        );
}


.lsw-services__footer-rule {
    position: relative;

    height: 1px;

    background:
        rgba(36, 59, 42, 0.16);
}


.lsw-services__footer-rule span {
    position: absolute;

    top: 0;
    left: 0;

    width: 30%;
    height: 1px;

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


.lsw-services__footer p {
    margin: 0;

    font-size: 0.82rem;

    font-weight: 600;

    letter-spacing: 0.06em;

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


.lsw-services__footer > a {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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


.lsw-services__footer > a span {
    color:
        var(--lsw-gold-700);

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


.lsw-services__footer > a:hover span {
    transform:
        translateX(5px);
}


/* ============================================================
   19. ENTRANCE STATES
   Only when JS exists.
   ============================================================ */

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

    transform:
        translateX(-20px);
}


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


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

    transform:
        translateY(112%);
}


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

    transform:
        translateY(24px);
}


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

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

    transform:
        translateY(18px);
}


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

    transform:
        translateY(18px);
}


/* ============================================================
   20. REVEALED STATES
   ============================================================ */

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

    transform:
        translateX(0);

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


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

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


html.lsw-js
.lsw-services.is-visible
.lsw-services__title-mask > span {
    opacity: 1;

    transform:
        translateY(0);

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


html.lsw-js
.lsw-services.is-visible
.lsw-services__title-mask:nth-child(1) > span {
    transition-delay:
        130ms;
}


html.lsw-js
.lsw-services.is-visible
.lsw-services__title-mask:nth-child(2) > span {
    transition-delay:
        220ms;
}


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

    transform:
        translateY(0);

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


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

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

    transform:
        translateY(0);

    transition:
        opacity
        680ms
        ease,
        clip-path
        1100ms
        var(--lsw-ease),
        transform
        900ms
        var(--lsw-ease);
}


html.lsw-js
.lsw-services.is-visible
[data-services-reveal="card"]:nth-child(1) {
    transition-delay:
        260ms;
}


html.lsw-js
.lsw-services.is-visible
[data-services-reveal="card"]:nth-child(2) {
    transition-delay:
        340ms;
}


html.lsw-js
.lsw-services.is-visible
[data-services-reveal="card"]:nth-child(3) {
    transition-delay:
        420ms;
}


html.lsw-js
.lsw-services.is-visible
[data-services-reveal="card"]:nth-child(4) {
    transition-delay:
        500ms;
}


html.lsw-js
.lsw-services.is-visible
[data-services-reveal="card"]:nth-child(5) {
    transition-delay:
        570ms;
}


html.lsw-js
.lsw-services.is-visible
[data-services-reveal="card"]:nth-child(6) {
    transition-delay:
        640ms;
}


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

    transform:
        translateY(0);

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


/* ============================================================
   21. REDUCED MOTION
   Global JS class avoids an extra CSS media query.
   ============================================================ */

html.lsw-reduced-motion
.lsw-service-card__media img {
    transform:
        scale(1.03) !important;
}


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

@media (min-width: 1200px) {

    .lsw-services__grid {
        min-height: 890px;
    }


    .lsw-service-card--featured
    .lsw-service-card__description {
        font-size: 1rem;
    }

}


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

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

    .lsw-services {
        padding:
            112px
            0
            105px;
    }


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

        gap: 46px;

        margin-bottom: 52px;
    }


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


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

        grid-template-rows:
            510px
            270px
            310px
            310px;

        gap: 16px;
    }


    .lsw-service-card--landscaping {
        grid-column:
            1 / -1;

        grid-row:
            1;
    }


    .lsw-service-card--hardscape {
        grid-column:
            1;

        grid-row:
            2;
    }


    .lsw-service-card--masonry {
        grid-column:
            2;

        grid-row:
            2;
    }


    .lsw-service-card--turf {
        grid-column:
            1;

        grid-row:
            3;
    }


    .lsw-service-card--sod {
        grid-column:
            2;

        grid-row:
            3;
    }


    .lsw-service-card--ground-cover {
        grid-column:
            1 / -1;

        grid-row:
            4;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__link {
        grid-template-columns: 1fr;
        grid-template-rows:
            1fr
            auto;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__body {
        display: grid;

        grid-template-columns:
            auto
            1fr
            auto;

        grid-template-rows: auto;

        align-items: center;

        gap: 16px;

        padding:
            20px
            22px;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__description {
        display: none;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__title {
        font-size: 2rem;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__action {
        justify-self: end;
    }


    .lsw-service-card--ground-cover
    .lsw-service-card__link {
        grid-template-columns:
            1.2fr
            0.8fr;

        grid-template-rows: 1fr;
    }


    .lsw-service-card--ground-cover
    .lsw-service-card__compact-content {
        align-content: center;
    }


    .lsw-services__footer {
        grid-template-columns:
            minmax(60px, 1fr)
            auto;

        grid-template-areas:
            "rule rule"
            "text link";

        gap: 18px;
    }


    .lsw-services__footer-rule {
        grid-area: rule;
    }


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


    .lsw-services__footer > a {
        grid-area: link;
    }

}


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

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

    .lsw-services {
        padding:
            95px
            0
            86px;
    }


    .lsw-services__transition {
        height: 52px;
    }


    .lsw-services__transition::before {
        width: 72%;
        height: 33px;
    }


    .lsw-services__transition-line {
        top: 31px;
        left: 20px;

        width: 95px;
    }


    .lsw-services__transition-mark {
        top: 25px;
        left: 107px;

        width: 13px;
        height: 13px;
    }


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

        gap: 27px;

        margin-bottom: 40px;
    }


    .lsw-services__eyebrow {
        margin-bottom: 17px;

        font-size: 0.72rem;
    }


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

        font-size:
            clamp(
                2.75rem,
                9vw,
                3.85rem
            );
    }


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


    .lsw-services__intro p {
        margin-bottom: 21px;

        font-size: 1rem;
    }


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

        grid-template-rows:
            430px
            280px
            280px
            290px
            290px;

        gap: 14px;
    }


    .lsw-service-card--landscaping {
        grid-column:
            1 / -1;

        grid-row:
            1;
    }


    .lsw-service-card--hardscape {
        grid-column:
            1 / -1;

        grid-row:
            2;
    }


    .lsw-service-card--masonry {
        grid-column:
            1 / -1;

        grid-row:
            3;
    }


    .lsw-service-card--turf {
        grid-column:
            1;

        grid-row:
            4;
    }


    .lsw-service-card--sod {
        grid-column:
            2;

        grid-row:
            4;
    }


    .lsw-service-card--ground-cover {
        grid-column:
            1 / -1;

        grid-row:
            5;
    }


    .lsw-service-card__feature-top {
        top: 22px;
        left: 22px;
        right: 22px;
    }


    .lsw-service-card__feature-content {
        left: 23px;
        right: 23px;
        bottom: 23px;
    }


    .lsw-service-card--featured
    .lsw-service-card__title {
        font-size:
            clamp(
                2.6rem,
                8vw,
                3.6rem
            );
    }


    .lsw-service-card--horizontal
    .lsw-service-card__link {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);
    }


    .lsw-service-card__body {
        padding:
            21px
            20px;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__description {
        font-size: 0.86rem;
    }


    .lsw-service-card__compact-content {
        padding:
            18px
            17px
            19px;
    }


    .lsw-service-card__compact-content
    .lsw-service-card__title {
        font-size:
            clamp(
                1.65rem,
                5vw,
                2.1rem
            );
    }


    .lsw-service-card--ground-cover
    .lsw-service-card__link {
        grid-template-columns:
            1.1fr
            0.9fr;

        grid-template-rows: 1fr;
    }


    .lsw-service-card--ground-cover
    .lsw-service-card__compact-content {
        align-content: center;
    }


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

        gap: 16px;

        margin-top: 38px;
    }


    .lsw-services__footer-rule {
        width: 100%;
    }

}


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

@media (max-width: 480px) {

    .lsw-services {
        padding:
            82px
            0
            76px;
    }


    .lsw-services__transition {
        height: 46px;
    }


    .lsw-services__transition::before {
        width: 77%;
        height: 29px;
    }


    .lsw-services__transition::after {
        width: 40%;
        height: 16px;
    }


    .lsw-services__transition-line {
        top: 27px;
        left: 16px;

        width: 76px;
    }


    .lsw-services__transition-mark {
        top: 22px;
        left: 85px;

        width: 11px;
        height: 11px;
    }


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

        gap: 23px;

        margin-bottom: 34px;
    }


    .lsw-services__eyebrow {
        gap: 10px;

        margin-bottom: 14px;

        font-size: 0.66rem;

        letter-spacing: 0.12em;
    }


    .lsw-services__eyebrow-line {
        width: 37px;
    }


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

        line-height: 0.95;
    }


    .lsw-services__intro p {
        margin-bottom: 19px;

        font-size: 0.96rem;

        line-height: 1.65;
    }


    .lsw-services__gallery-link {
        font-size: 0.76rem;
    }


    .lsw-services__grid {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            390px
            315px
            315px
            295px
            295px
            315px;

        gap: 13px;
    }


    .lsw-service-card--landscaping,
    .lsw-service-card--hardscape,
    .lsw-service-card--masonry,
    .lsw-service-card--turf,
    .lsw-service-card--sod,
    .lsw-service-card--ground-cover {
        grid-column: 1;
    }


    .lsw-service-card--landscaping {
        grid-row: 1;
    }


    .lsw-service-card--hardscape {
        grid-row: 2;
    }


    .lsw-service-card--masonry {
        grid-row: 3;
    }


    .lsw-service-card--turf {
        grid-row: 4;
    }


    .lsw-service-card--sod {
        grid-row: 5;
    }


    .lsw-service-card--ground-cover {
        grid-row: 6;
    }


    .lsw-service-card__feature-top {
        top: 18px;
        left: 18px;
        right: 18px;
    }


    .lsw-service-card__category {
        display: none;
    }


    .lsw-service-card__feature-content {
        left: 19px;
        right: 19px;
        bottom: 19px;

        gap: 14px;
    }


    .lsw-service-card--featured
    .lsw-service-card__title {
        margin-bottom: 7px;

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


    .lsw-service-card--featured
    .lsw-service-card__description {
        max-width: 260px;

        font-size: 0.84rem;

        line-height: 1.48;
    }


    .lsw-service-card__action {
        width: 42px;
        height: 42px;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__link {
        grid-template-columns: 1fr;
        grid-template-rows:
            1fr
            auto;
    }


    .lsw-service-card__body {
        display: grid;

        grid-template-columns:
            auto
            1fr
            auto;

        grid-template-rows: auto;

        align-items: center;

        gap: 13px;

        padding:
            17px
            18px;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__description {
        display: none;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__title {
        font-size: 1.95rem;
    }


    .lsw-service-card--horizontal
    .lsw-service-card__action {
        justify-self: end;
    }


    .lsw-service-card--compact
    .lsw-service-card__link {
        grid-template-rows:
            1fr
            auto;
    }


    .lsw-service-card__compact-content {
        padding:
            17px
            18px
            19px;
    }


    .lsw-service-card__compact-content
    .lsw-service-card__title {
        font-size: 1.9rem;
    }


    .lsw-service-card--ground-cover
    .lsw-service-card__link {
        grid-template-columns: 1fr;
        grid-template-rows:
            1fr
            auto;
    }


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

        gap: 14px;

        margin-top: 32px;
    }


    .lsw-services__footer p {
        font-size: 0.74rem;

        line-height: 1.55;
    }


    .lsw-services__footer > a {
        font-size: 0.74rem;
    }

}






































/* ============================================================
   LAND & STONE WORKS LLC
   04. WHY CHOOSE US
   ============================================================ */


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

.lsw-why {
    position: relative;

    z-index: 2;

    padding:
        clamp(130px, 10vw, 180px)
        0
        clamp(92px, 7.5vw, 135px);

    overflow: hidden;

    color:
        var(--lsw-white);

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

    isolation: isolate;
}


/* Deep mineral illumination */

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

    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 21% 42%,
            rgba(199, 163, 93, 0.105),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 13%,
            rgba(104, 121, 86, 0.15),
            transparent 30%
        );
}


/* Dark mineral texture */

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

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.11;

    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='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");

    background-size:
        180px 180px;

    mix-blend-mode:
        soft-light;
}


/* ============================================================
   02. ARCHITECTURAL TRANSITION
   ============================================================ */

.lsw-why__transition {
    position: absolute;

    z-index: 5;

    top: -1px;
    left: 0;

    width: 100%;
    height: 76px;

    pointer-events: none;
}


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

    position: absolute;

    inset:
        0
        0
        auto
        0;

    width: 68%;
    height: 58px;

    background:
        var(--lsw-bg-stone);

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


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

    position: absolute;

    top: 0;
    right: 0;

    width: 37%;
    height: 30px;

    background:
        var(--lsw-bg-stone);

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


.lsw-why__transition > span {
    position: absolute;

    z-index: 3;

    top: 55px;
    left: 9%;

    width: 170px;
    height: 1px;

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

    transform-origin:
        left center;

    transform:
        scaleX(0);
}


.lsw-why.is-visible
.lsw-why__transition > span {
    transform:
        scaleX(1);

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


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

.lsw-why__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    overflow: hidden;
}


.lsw-why__shape {
    position: absolute;

    display: block;

    transform:
        rotate(30deg);

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


.lsw-why__shape--one {
    top: 12%;
    right: -140px;

    width: 360px;
    height: 360px;
}


.lsw-why__shape--two {
    right: 3%;
    bottom: 8%;

    width: 180px;
    height: 180px;

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


.lsw-why__shape--three {
    left: -190px;
    bottom: -135px;

    width: 390px;
    height: 390px;

    border-color:
        rgba(104, 121, 86, 0.16);
}


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

.lsw-why__inner {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(470px, 0.94fr)
        minmax(500px, 1.06fr);

    gap:
        clamp(
            70px,
            8vw,
            135px
        );

    align-items: center;
}


/* ============================================================
   05. VISUAL
   ============================================================ */

.lsw-why__visual {
    position: relative;

    min-height:
        clamp(
            650px,
            51vw,
            790px
        );
}


/* ============================================================
   06. GOLD STRUCTURAL LINE
   ============================================================ */

.lsw-why__visual-line {
    position: absolute;

    z-index: 9;

    top: 2%;
    right: 7%;

    width: 1px;
    height: 56%;

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

    transform:
        scaleY(0);

    transform-origin:
        top center;
}


.lsw-why.is-visible
.lsw-why__visual-line {
    transform:
        scaleY(1);

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


/* ============================================================
   07. MAIN IMAGE
   ============================================================ */

.lsw-why__main-image {
    position: absolute;

    z-index: 2;

    top: 0;
    left: 0;

    width: 88%;
    height: 76%;

    margin: 0;

    overflow: hidden;

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

    background:
        var(--lsw-charcoal);

    box-shadow:
        0 34px 80px
        rgba(0, 0, 0, 0.22);
}


/* Gold inner edge */

.lsw-why__main-image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            145deg,
            rgba(199, 163, 93, 0.25),
            transparent 19%,
            transparent 77%,
            rgba(199, 163, 93, 0.13)
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(222, 199, 148, 0.14);
}


/* ============================================================
   08. IMAGE MEDIA
   ============================================================ */

.lsw-why__media {
    position: absolute;

    inset: 0;

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

    will-change:
        transform;
}


.lsw-why__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ============================================================
   09. DETAIL IMAGE
   ============================================================ */

.lsw-why__detail-image {
    position: absolute;

    z-index: 6;

    right: 0;
    bottom: 2%;

    width: 49%;
    height: 40%;

    margin: 0;

    overflow: hidden;

    background:
        var(--lsw-charcoal);

    border:
        7px solid
        var(--lsw-forest-950);

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

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.28);
}


.lsw-why__detail-image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px
        rgba(222, 199, 148, 0.25);
}


/* ============================================================
   10. EXPERIENCE PLAQUE
   ============================================================ */

.lsw-why__experience {
    position: absolute;

    z-index: 10;

    left: 8%;
    bottom: 5%;

    display: grid;

    grid-template-columns:
        auto
        auto;

    align-items: center;

    gap: 15px;

    min-width: 190px;

    padding:
        17px
        20px;

    color:
        var(--lsw-charcoal);

    background:
        var(--lsw-ivory);

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

    box-shadow:
        0 18px 42px
        rgba(0, 0, 0, 0.20);

    transform-origin:
        center;
}


/* Faceted corner */

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

    position: absolute;

    top: -1px;
    right: -1px;

    width: 28px;
    height: 28px;

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

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


.lsw-why__experience-number {
    font-family:
        var(--lsw-font-display);

    font-size: 3.65rem;

    font-weight: 600;

    line-height: 0.8;

    letter-spacing: -0.06em;

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


.lsw-why__experience-number span {
    color:
        var(--lsw-gold-600);
}


.lsw-why__experience-label {
    display: block;

    max-width: 80px;

    font-size: 0.72rem;

    font-weight: 600;

    line-height: 1.45;

    letter-spacing: 0.07em;

    text-transform: uppercase;

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


.lsw-why__experience-label strong {
    display: block;

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


/* ============================================================
   11. VISUAL MARK
   ============================================================ */

.lsw-why__visual-mark {
    position: absolute;

    z-index: 8;

    top: 4%;
    right: 2%;

    width: 38px;
    height: 38px;

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

    transform:
        rotate(30deg);
}


.lsw-why__visual-mark span {
    position: absolute;

    inset: 10px;

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


/* ============================================================
   12. CONTENT
   ============================================================ */

.lsw-why__content {
    position: relative;

    z-index: 3;

    max-width: 690px;
}


/* ============================================================
   13. EYEBROW
   ============================================================ */

.lsw-why__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 25px;

    font-size: 0.79rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;

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


.lsw-why__eyebrow-number {
    color:
        var(--lsw-gold-500);
}


.lsw-why__eyebrow-rule {
    width: 50px;
    height: 1px;

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

    transform-origin:
        left center;
}


/* ============================================================
   14. TITLE
   ============================================================ */

.lsw-why__title {
    margin: 0;

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

    font-size:
        clamp(
            3.6rem,
            5.2vw,
            5.9rem
        );

    font-weight: 500;

    line-height: 0.88;

    letter-spacing: -0.047em;

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


.lsw-why__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.06em;
}


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


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


/* ============================================================
   15. INTRO
   ============================================================ */

.lsw-why__intro {
    max-width: 630px;

    margin:
        30px
        0
        38px;

    font-size:
        clamp(
            1rem,
            0.96rem + 0.18vw,
            1.12rem
        );

    line-height: 1.72;

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


/* ============================================================
   16. REASONS
   ============================================================ */

.lsw-why__reasons {
    position: relative;

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


/* Architectural vertical spine */

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

    position: absolute;

    top: 0;
    left: 47px;

    width: 1px;
    height: 100%;

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

    transform:
        scaleY(0);

    transform-origin:
        top center;
}


.lsw-why.is-visible
.lsw-why__reasons::before {
    transform:
        scaleY(1);

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


/* ============================================================
   17. REASON
   ============================================================ */

.lsw-why-reason {
    position: relative;

    display: grid;

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

    gap: 22px;

    align-items: start;

    padding:
        23px
        0;

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


.lsw-why-reason__number {
    position: relative;

    z-index: 2;

    padding-top: 4px;

    font-size: 0.69rem;

    font-weight: 700;

    letter-spacing: 0.11em;

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


.lsw-why-reason__content h3 {
    margin:
        0
        0
        6px;

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

    font-size:
        clamp(
            1rem,
            0.96rem + 0.18vw,
            1.12rem
        );

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -0.015em;

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


.lsw-why-reason__content p {
    max-width: 520px;

    margin: 0;

    font-size: 0.9rem;

    line-height: 1.6;

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


/* Small gold facet */

.lsw-why-reason__mark {
    position: relative;

    justify-self: end;

    width: 10px;
    height: 10px;

    margin-top: 6px;

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

    transform:
        rotate(45deg);

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


.lsw-why-reason:hover
.lsw-why-reason__mark {
    background:
        var(--lsw-gold-500);

    transform:
        rotate(135deg);
}


/* ============================================================
   18. CTA
   ============================================================ */

.lsw-why__actions {
    margin-top: 34px;
}


.lsw-why__cta {
    position: relative;

    display: inline-flex;

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

    gap: 20px;

    min-height: 57px;

    padding:
        14px
        24px;

    overflow: hidden;

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

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

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

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

    font-size: 0.84rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    isolation: isolate;

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


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

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--lsw-ivory);

    transform:
        scaleX(0);

    transform-origin:
        right center;

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


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

    transform-origin:
        left center;
}


.lsw-why__cta:hover {
    border-color:
        var(--lsw-ivory);

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 42px
        rgba(0, 0, 0, 0.20);
}


.lsw-why__cta svg {
    width: 20px;
    height: 20px;

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


.lsw-why__cta:hover svg {
    transform:
        translateX(5px);
}


/* ============================================================
   19. BRAND STATEMENT
   ============================================================ */

.lsw-why__statement {
    position: relative;

    z-index: 4;

    display: grid;

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

    align-items: center;

    gap:
        clamp(
            26px,
            4vw,
            58px
        );

    margin-top:
        clamp(
            75px,
            8vw,
            120px
        );

    padding-top: 35px;

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


.lsw-why__statement-line {
    position: relative;

    height: 1px;

    background:
        rgba(199, 163, 93, 0.22);
}


.lsw-why__statement-line::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 34%;
    height: 1px;

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


.lsw-why__statement p {
    margin: 0;

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

    font-size:
        clamp(
            1.8rem,
            2.7vw,
            3rem
        );

    font-weight: 500;

    line-height: 1.12;

    letter-spacing: -0.025em;

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


.lsw-why__statement p strong {
    font-weight: 500;

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


.lsw-why__statement-symbol {
    position: relative;

    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

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

    transform:
        rotate(30deg);
}


.lsw-why__statement-symbol span {
    width: 13px;
    height: 13px;

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


/* ============================================================
   20. INITIAL ANIMATION STATES
   ============================================================ */

html.lsw-js
.lsw-why__main-image {
    opacity: 0;

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


html.lsw-js
.lsw-why__detail-image {
    opacity: 0;

    transform:
        translate(36px, 28px);
}


html.lsw-js
.lsw-why__experience {
    opacity: 0;

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


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

    transform:
        translateX(-22px);
}


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


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

    transform:
        translateY(112%);
}


html.lsw-js
[data-why-reveal="intro"],
html.lsw-js
[data-why-reveal="actions"],
html.lsw-js
[data-why-reveal="statement"] {
    opacity: 0;

    transform:
        translateY(22px);
}


html.lsw-js
[data-why-reason] {
    opacity: 0;

    transform:
        translateX(30px);
}


/* ============================================================
   21. ACTIVE ANIMATION STATES
   ============================================================ */

html.lsw-js
.lsw-why.is-visible
.lsw-why__main-image {
    opacity: 1;

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

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


html.lsw-js
.lsw-why.is-visible
.lsw-why__detail-image {
    opacity: 1;

    transform:
        translate(0, 0);

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


html.lsw-js
.lsw-why.is-visible
.lsw-why__experience {
    opacity: 1;

    transform:
        rotate(0)
        scale(1);

    transition:
        opacity
        600ms
        ease
        670ms,
        transform
        900ms
        var(--lsw-ease)
        650ms;
}


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

    transform:
        translateX(0);

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


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

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


html.lsw-js
.lsw-why.is-visible
.lsw-why__title-mask > span {
    opacity: 1;

    transform:
        translateY(0);

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


html.lsw-js
.lsw-why.is-visible
.lsw-why__title-mask:nth-child(1) > span {
    transition-delay: 220ms;
}


html.lsw-js
.lsw-why.is-visible
.lsw-why__title-mask:nth-child(2) > span {
    transition-delay: 300ms;
}


html.lsw-js
.lsw-why.is-visible
.lsw-why__title-mask:nth-child(3) > span {
    transition-delay: 380ms;
}


html.lsw-js
.lsw-why.is-visible
.lsw-why__title-mask:nth-child(4) > span {
    transition-delay: 460ms;
}


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

    transform:
        translateY(0);

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


html.lsw-js
.lsw-why.is-visible
[data-why-reason] {
    opacity: 1;

    transform:
        translateX(0);

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


html.lsw-js
.lsw-why.is-visible
[data-why-reason]:nth-child(1) {
    transition-delay: 680ms;
}


html.lsw-js
.lsw-why.is-visible
[data-why-reason]:nth-child(2) {
    transition-delay: 770ms;
}


html.lsw-js
.lsw-why.is-visible
[data-why-reason]:nth-child(3) {
    transition-delay: 860ms;
}


html.lsw-js
.lsw-why.is-visible
[data-why-reason]:nth-child(4) {
    transition-delay: 950ms;
}


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

    transform:
        translateY(0);

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


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

    transform:
        translateY(0);

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


/* ============================================================
   22. REDUCED MOTION
   ============================================================ */

html.lsw-reduced-motion
.lsw-why__media {
    transform:
        scale(1.035) !important;
}


/* ============================================================
   23. COMPUTER
   ============================================================ */

@media (min-width: 1200px) {

    .lsw-why__visual {
        min-height: 770px;
    }


    .lsw-why__content {
        padding-top: 8px;
    }

}


/* ============================================================
   24. TABLET
   ============================================================ */

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

    .lsw-why {
        padding:
            125px
            0
            100px;
    }


    .lsw-why__inner {
        grid-template-columns:
            minmax(300px, 0.88fr)
            minmax(390px, 1.12fr);

        gap: 48px;
    }


    .lsw-why__visual {
        min-height: 600px;
    }


    .lsw-why__main-image {
        width: 90%;
        height: 74%;
    }


    .lsw-why__detail-image {
        width: 53%;
        height: 37%;
    }


    .lsw-why__experience {
        left: 4%;

        min-width: 165px;

        padding:
            15px
            16px;
    }


    .lsw-why__experience-number {
        font-size: 3rem;
    }


    .lsw-why__title {
        font-size:
            clamp(
                3.15rem,
                5.7vw,
                4.6rem
            );
    }


    .lsw-why__intro {
        margin:
            25px
            0
            30px;

        line-height: 1.62;
    }


    .lsw-why-reason {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            20px;

        gap: 16px;

        padding:
            19px
            0;
    }


    .lsw-why__reasons::before {
        left: 39px;
    }


    .lsw-why__statement {
        margin-top: 75px;
    }

}


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

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

    .lsw-why {
        padding:
            105px
            0
            82px;
    }


    .lsw-why__transition {
        height: 56px;
    }


    .lsw-why__transition::before {
        width: 78%;
        height: 39px;
    }


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

        gap: 58px;
    }


    .lsw-why__visual {
        min-height:
            clamp(
                480px,
                110vw,
                620px
            );
    }


    .lsw-why__main-image {
        width: 88%;
        height: 74%;
    }


    .lsw-why__detail-image {
        width: 48%;
        height: 38%;
    }


    .lsw-why__experience {
        left: 5%;
        bottom: 4%;
    }


    .lsw-why__visual-line {
        right: 8%;
    }


    .lsw-why__content {
        max-width: 100%;
    }


    .lsw-why__eyebrow {
        margin-bottom: 19px;

        font-size: 0.71rem;
    }


    .lsw-why__title {
        max-width: 600px;

        font-size:
            clamp(
                3rem,
                9.5vw,
                4.2rem
            );
    }


    .lsw-why__intro {
        max-width: 590px;

        margin:
            26px
            0
            31px;

        font-size: 1rem;
    }


    .lsw-why-reason {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            18px;

        gap: 15px;

        padding:
            20px
            0;
    }


    .lsw-why__reasons::before {
        left: 41px;
    }


    .lsw-why-reason__content p {
        font-size: 0.88rem;
    }


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

        gap: 22px;

        margin-top: 65px;

        padding-top: 28px;
    }


    .lsw-why__statement p {
        font-size:
            clamp(
                1.65rem,
                5.8vw,
                2.4rem
            );
    }


    .lsw-why__statement-symbol {
        width: 34px;
        height: 34px;
    }

}


/* ============================================================
   26. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .lsw-why {
        padding:
            92px
            0
            72px;
    }


    .lsw-why__transition {
        height: 48px;
    }


    .lsw-why__transition::before {
        width: 82%;
        height: 33px;
    }


    .lsw-why__transition::after {
        width: 38%;
        height: 18px;
    }


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

        gap: 47px;
    }


    .lsw-why__visual {
        min-height:
            clamp(
                410px,
                111vw,
                520px
            );
    }


    .lsw-why__main-image {
        width: 90%;
        height: 72%;

        clip-path:
            polygon(
                0 0,
                83% 0,
                100% 16%,
                100% 100%,
                15% 100%,
                0 84%
            );
    }


    .lsw-why__detail-image {
        right: 0;
        bottom: 3%;

        width: 50%;
        height: 36%;

        border-width: 5px;
    }


    .lsw-why__experience {
        left: 3%;
        bottom: 5%;

        gap: 10px;

        min-width: 145px;

        padding:
            13px
            13px;
    }


    .lsw-why__experience-number {
        font-size: 2.55rem;
    }


    .lsw-why__experience-label {
        max-width: 65px;

        font-size: 0.59rem;
    }


    .lsw-why__visual-mark {
        width: 30px;
        height: 30px;
    }


    .lsw-why__visual-mark span {
        inset: 8px;
    }


    .lsw-why__eyebrow {
        gap: 10px;

        margin-bottom: 16px;

        font-size: 0.65rem;

        letter-spacing: 0.12em;
    }


    .lsw-why__eyebrow-rule {
        width: 36px;
    }


    .lsw-why__title {
        font-size:
            clamp(
                2.7rem,
                13vw,
                3.65rem
            );

        line-height: 0.9;
    }


    .lsw-why__intro {
        margin:
            23px
            0
            28px;

        font-size: 0.96rem;

        line-height: 1.64;
    }


    .lsw-why-reason {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            14px;

        gap: 12px;

        padding:
            19px
            0;
    }


    .lsw-why__reasons::before {
        left: 33px;
    }


    .lsw-why-reason__content h3 {
        font-size: 0.96rem;
    }


    .lsw-why-reason__content p {
        font-size: 0.84rem;

        line-height: 1.57;
    }


    .lsw-why-reason__mark {
        width: 8px;
        height: 8px;
    }


    .lsw-why__actions {
        margin-top: 28px;
    }


    .lsw-why__cta {
        min-height: 52px;

        padding:
            13px
            17px;

        font-size: 0.74rem;
    }


    .lsw-why__statement {
        grid-template-columns:
            1fr
            auto;

        grid-template-areas:
            "line symbol"
            "text text";

        gap:
            18px
            16px;

        margin-top: 58px;

        padding-top: 25px;
    }


    .lsw-why__statement-line {
        grid-area: line;
    }


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

        font-size:
            clamp(
                1.7rem,
                8vw,
                2.25rem
            );
    }


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

        width: 30px;
        height: 30px;
    }

}








































/* ============================================================
   LAND & STONE WORKS LLC
   05. REVIEWS
   ============================================================ */


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

.lsw-reviews {
    position: relative;

    z-index: 2;

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

    overflow: hidden;

    color:
        var(--lsw-text);

    background:
        var(--lsw-ivory);

    isolation: isolate;
}


/* Soft mineral light */

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

    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 78% 24%,
            rgba(199, 163, 93, 0.09),
            transparent 29%
        ),
        radial-gradient(
            circle at 14% 72%,
            rgba(36, 59, 42, 0.045),
            transparent 31%
        );
}


/* Mineral-paper overlay */

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

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.12;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.38),
            transparent 36%,
            rgba(215, 206, 188, 0.13)
        );
}


/* ============================================================
   02. TRANSITION FROM WHY CHOOSE US
   ============================================================ */

.lsw-reviews__transition {
    position: absolute;

    z-index: 8;

    top: -1px;
    left: 0;

    width: 100%;
    height: 78px;

    pointer-events: none;
}


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

    position: absolute;

    top: 0;
    left: 0;

    width: 61%;
    height: 54px;

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

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


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

    position: absolute;

    top: 0;
    right: 0;

    width: 43%;
    height: 28px;

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

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


.lsw-reviews__transition-line {
    position: absolute;

    z-index: 4;

    top: 52px;
    left: 9%;

    width: 160px;
    height: 1px;

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

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.lsw-reviews.is-visible
.lsw-reviews__transition-line {
    transform:
        scaleX(1);

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


.lsw-reviews__transition-mark {
    position: absolute;

    z-index: 5;

    top: 45px;
    left:
        calc(
            9% + 152px
        );

    width: 14px;
    height: 14px;

    background:
        var(--lsw-ivory);

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

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


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

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


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

.lsw-reviews__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


.lsw-reviews__shape {
    position: absolute;

    display: block;

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

    transform:
        rotate(30deg);
}


.lsw-reviews__shape--one {
    top: 10%;
    right: -110px;

    width: 280px;
    height: 280px;
}


.lsw-reviews__shape--two {
    top: 22%;
    right: 3%;

    width: 115px;
    height: 115px;

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


.lsw-reviews__shape--three {
    left: -165px;
    bottom: 2%;

    width: 310px;
    height: 310px;

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


.lsw-reviews__background-line {
    position: absolute;

    top: 9%;
    right: 10%;

    width: 1px;
    height: 34%;

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


/* ============================================================
   04. INNER
   ============================================================ */

.lsw-reviews__inner {
    position: relative;

    z-index: 3;
}


/* ============================================================
   05. HEADER
   ============================================================ */

.lsw-reviews__header {
    display: grid;

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

    align-items: end;

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

    margin-bottom:
        clamp(
            54px,
            5.5vw,
            82px
        );
}


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

.lsw-reviews__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;

    font-size: 0.79rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;

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


.lsw-reviews__eyebrow-number {
    color:
        var(--lsw-gold-700);
}


.lsw-reviews__eyebrow-rule {
    width: 51px;
    height: 1px;

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

    transform-origin:
        left center;
}


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

.lsw-reviews__title {
    max-width: 900px;

    margin: 0;

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

    font-size:
        clamp(
            3.35rem,
            5.2vw,
            5.8rem
        );

    font-weight: 500;

    line-height: 0.93;

    letter-spacing: -0.045em;

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


.lsw-reviews__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.055em;
}


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


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


/* ============================================================
   08. INTRO
   ============================================================ */

.lsw-reviews__intro {
    position: relative;

    max-width: 460px;

    min-height: 135px;

    padding:
        22px
        0
        4px
        72px;
}


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

    position: absolute;

    top: 0;
    left: 44px;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            var(--lsw-gold-600),
            rgba(180, 140, 69, 0.08)
        );
}


.lsw-reviews__quote-symbol {
    position: absolute;

    top: -28px;
    left: 0;

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

    font-size: 7.5rem;

    font-weight: 500;

    line-height: 1;

    color:
        rgba(180, 140, 69, 0.26);
}


.lsw-reviews__intro p {
    margin: 0;

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

    line-height: 1.72;

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


/* ============================================================
   09. MAIN COMPOSITION
   ============================================================ */

.lsw-reviews__composition {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(245px, 0.24fr)
        minmax(0, 0.76fr);

    min-height: 610px;

    overflow: hidden;

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

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

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

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

    isolation: isolate;
}


/* Extremely subtle interior grid */

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

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.18;

    background-image:
        linear-gradient(
            rgba(36, 59, 42, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(36, 59, 42, 0.05) 1px,
            transparent 1px
        );

    background-size:
        52px
        52px;
}


/* ============================================================
   10. LEFT BRAND PANEL
   ============================================================ */

.lsw-reviews__brand-panel {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-width: 0;

    padding:
        36px
        32px;

    overflow: hidden;

    color:
        var(--lsw-white);

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


/* Mineral depth */

.lsw-reviews__brand-panel::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    opacity: 0.32;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(199, 163, 93, 0.17),
            transparent 30%
        );
}


/* Faceted plane */

.lsw-reviews__brand-panel::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -95px;
    bottom: -105px;

    width: 260px;
    height: 260px;

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

    transform:
        rotate(30deg);
}


/* ============================================================
   11. BRAND PANEL TOP
   ============================================================ */

.lsw-reviews__brand-panel-top {
    display: grid;

    gap: 14px;
}


.lsw-reviews__brand-label {
    font-size: 0.7rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.15em;

    text-transform: uppercase;

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


.lsw-reviews__brand-line {
    width: 72px;
    height: 1px;

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


/* ============================================================
   12. BRAND MEDALLION
   ============================================================ */

.lsw-reviews__brand-mark {
    position: relative;

    align-self: center;

    width:
        clamp(
            125px,
            11vw,
            165px
        );

    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 20px 35px
            rgba(0, 0, 0, 0.16)
        );
}


.lsw-reviews__brand-mark-inner {
    position: absolute;

    inset: 3px;

    display: grid;

    place-items: center;

    overflow: hidden;

    background:
        var(--lsw-ivory);

    clip-path:
        inherit;
}


.lsw-reviews__brand-mark-inner::before {
    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.14;

    background:
        linear-gradient(
            135deg,
            transparent,
            var(--lsw-limestone)
        );
}


.lsw-reviews__brand-mark img {
    position: relative;

    z-index: 2;

    width: 61%;
    height: 61%;

    object-fit: contain;
}


/* ============================================================
   13. BRAND PANEL FOOTER
   ============================================================ */

.lsw-reviews__brand-panel-bottom {
    display: grid;

    gap: 7px;

    font-size: 0.67rem;

    font-weight: 600;

    line-height: 1.45;

    letter-spacing: 0.09em;

    text-transform: uppercase;

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


.lsw-reviews__brand-panel-bottom
span:first-child {
    color:
        var(--lsw-gold-300);
}


/* ============================================================
   14. WIDGET AREA
   ============================================================ */

.lsw-reviews__widget-area {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        36px
        clamp(
            32px,
            4vw,
            64px
        )
        30px;
}


/* ============================================================
   15. UPPER RAIL
   ============================================================ */

.lsw-reviews__widget-rail {
    display: grid;

    grid-template-columns:
        minmax(80px, 160px)
        1fr;

    align-items: center;

    gap: 18px;

    margin-bottom: 30px;
}


.lsw-reviews__widget-rail span:first-child {
    height: 1px;

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


.lsw-reviews__widget-rail span:last-child {
    height: 1px;

    background:
        rgba(36, 59, 42, 0.12);
}


/* ============================================================
   16. ELFSIGHT SHELL
   ============================================================ */

.lsw-reviews__widget-shell {
    position: relative;

    flex: 1;

    display: flex;

    min-width: 0;

    padding:
        clamp(
            20px,
            2vw,
            30px
        );

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

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

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

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


/* Gold architectural corner */

.lsw-reviews__widget-shell::before {
    content: "";

    position: absolute;

    z-index: 2;

    top: -1px;
    right: -1px;

    width: 62px;
    height: 62px;

    pointer-events: none;

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

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


/* Opposite tiny detail */

.lsw-reviews__widget-shell::after {
    content: "";

    position: absolute;

    left: 18px;
    bottom: -1px;

    width: 76px;
    height: 1px;

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


/* ============================================================
   17. STATIC PLACEHOLDER
   No shimmer.
   No spinner.
   No loading animation.
   ============================================================ */

.lsw-reviews__placeholder {
    position: relative;

    display: grid;

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

    align-items: center;

    gap:
        clamp(
            24px,
            3vw,
            46px
        );

    width: 100%;

    min-height: 390px;

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

    overflow: hidden;

    color:
        var(--lsw-text);

    background:
        var(--lsw-bg-stone);

    border:
        1px dashed
        rgba(36, 59, 42, 0.18);
}


/* Static decorative plane */

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

    position: absolute;

    top: -82px;
    right: -70px;

    width: 190px;
    height: 190px;

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

    transform:
        rotate(30deg);

    pointer-events: none;
}


/* ============================================================
   18. PLACEHOLDER MARK
   ============================================================ */

.lsw-reviews__placeholder-mark {
    position: relative;

    display: grid;

    place-items: center;

    width: 88px;
    height: 88px;

    flex: 0 0 auto;

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

    transform:
        rotate(30deg);
}


.lsw-reviews__placeholder-mark::before {
    content: "";

    position: absolute;

    inset: 14px;

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


.lsw-reviews__placeholder-mark span {
    width: 22px;
    height: 22px;

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

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


/* ============================================================
   19. PLACEHOLDER COPY
   ============================================================ */

.lsw-reviews__placeholder-copy {
    max-width: 500px;
}


.lsw-reviews__placeholder-label {
    display: block;

    margin-bottom: 13px;

    font-size: 0.7rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

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


.lsw-reviews__placeholder-copy strong {
    display: block;

    margin-bottom: 11px;

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

    font-size:
        clamp(
            2rem,
            3vw,
            3.2rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.035em;

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


.lsw-reviews__placeholder-copy p {
    max-width: 420px;

    margin: 0;

    font-size: 0.95rem;

    line-height: 1.65;

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


/* ============================================================
   20. WIDGET FOOTER
   ============================================================ */

.lsw-reviews__widget-footer {
    display: grid;

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

    align-items: center;

    gap: 17px;

    margin-top: 25px;
}


.lsw-reviews__widget-footer-line {
    height: 1px;

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


.lsw-reviews__widget-footer p {
    margin: 0;

    font-size: 0.72rem;

    font-weight: 600;

    line-height: 1.5;

    letter-spacing: 0.06em;

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


/* ============================================================
   21. DECORATIVE CORNERS
   ============================================================ */

.lsw-reviews__corner {
    position: absolute;

    z-index: 8;

    width: 32px;
    height: 32px;

    pointer-events: none;

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

    border-style: solid;
}


.lsw-reviews__corner--top {
    top: 18px;
    right: 18px;

    border-width:
        1px
        1px
        0
        0;
}


.lsw-reviews__corner--bottom {
    left:
        calc(
            24% + 18px
        );

    bottom: 18px;

    border-width:
        0
        0
        1px
        1px;
}


/* ============================================================
   22. BOTTOM STRIP
   ============================================================ */

.lsw-reviews__bottom {
    display: grid;

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

    align-items: center;

    gap: 28px;

    margin-top:
        clamp(
            38px,
            4vw,
            58px
        );
}


.lsw-reviews__bottom-rule {
    position: relative;

    height: 1px;

    background:
        rgba(36, 59, 42, 0.15);
}


.lsw-reviews__bottom-rule span {
    position: absolute;

    top: 0;
    left: 0;

    width: 28%;
    height: 1px;

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


.lsw-reviews__bottom p {
    margin: 0;

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

    font-size:
        clamp(
            1.15rem,
            1.5vw,
            1.45rem
        );

    font-weight: 600;

    line-height: 1.2;

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


.lsw-reviews__bottom > a {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    font-size: 0.8rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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


.lsw-reviews__bottom > a span {
    color:
        var(--lsw-gold-700);

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


.lsw-reviews__bottom > a:hover span {
    transform:
        translateX(5px);
}


/* ============================================================
   23. INITIAL ENTRANCE STATES
   These animate the SECTION, not widget loading.
   ============================================================ */

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

    transform:
        translateX(-22px);
}


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


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

    transform:
        translateY(112%);
}


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

    transform:
        translateY(22px);
}


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

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

    transform:
        translateY(22px);
}


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

    transform:
        translateY(18px);
}


/* ============================================================
   24. REVEALED STATES
   ============================================================ */

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

    transform:
        translateX(0);

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


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

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


html.lsw-js
.lsw-reviews.is-visible
.lsw-reviews__title-mask > span {
    opacity: 1;

    transform:
        translateY(0);

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


html.lsw-js
.lsw-reviews.is-visible
.lsw-reviews__title-mask:nth-child(1) > span {
    transition-delay:
        180ms;
}


html.lsw-js
.lsw-reviews.is-visible
.lsw-reviews__title-mask:nth-child(2) > span {
    transition-delay:
        270ms;
}


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

    transform:
        translateY(0);

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


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

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

    transform:
        translateY(0);

    transition:
        opacity
        750ms
        ease
        420ms,
        clip-path
        1200ms
        var(--lsw-ease)
        420ms,
        transform
        950ms
        var(--lsw-ease)
        420ms;
}


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

    transform:
        translateY(0);

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


/* ============================================================
   25. REDUCED MOTION
   Global class, no extra media query.
   ============================================================ */

html.lsw-reduced-motion
.lsw-reviews__brand-mark {
    transform: none;
}


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

@media (min-width: 1200px) {

    .lsw-reviews__composition {
        min-height: 620px;
    }


    .lsw-reviews__brand-panel {
        min-width: 270px;
    }

}


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

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

    .lsw-reviews {
        padding:
            116px
            0
            104px;
    }


    .lsw-reviews__header {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(270px, 0.85fr);

        gap: 48px;

        margin-bottom: 52px;
    }


    .lsw-reviews__title {
        font-size:
            clamp(
                3.05rem,
                5.8vw,
                4.5rem
            );
    }


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

        min-height: 570px;
    }


    .lsw-reviews__brand-panel {
        padding:
            30px
            24px;
    }


    .lsw-reviews__brand-mark {
        width: 128px;
    }


    .lsw-reviews__widget-area {
        padding:
            30px
            30px
            26px;
    }


    .lsw-reviews__placeholder {
        min-height: 355px;

        padding: 34px;
    }


    .lsw-reviews__placeholder-mark {
        width: 72px;
        height: 72px;
    }


    .lsw-reviews__bottom {
        grid-template-columns:
            minmax(60px, 1fr)
            auto;

        grid-template-areas:
            "line line"
            "text link";

        gap: 18px;
    }


    .lsw-reviews__bottom-rule {
        grid-area: line;
    }


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


    .lsw-reviews__bottom > a {
        grid-area: link;
    }

}


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

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

    .lsw-reviews {
        padding:
            98px
            0
            84px;
    }


    .lsw-reviews__transition {
        height: 56px;
    }


    .lsw-reviews__transition::before {
        width: 75%;
        height: 40px;
    }


    .lsw-reviews__transition-line {
        top: 38px;
        left: 20px;

        width: 100px;
    }


    .lsw-reviews__transition-mark {
        top: 32px;
        left: 112px;

        width: 12px;
        height: 12px;
    }


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

        gap: 27px;

        margin-bottom: 40px;
    }


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


    .lsw-reviews__intro {
        max-width: 570px;

        min-height: auto;

        padding:
            18px
            0
            0
            58px;
    }


    .lsw-reviews__intro::before {
        left: 35px;
    }


    .lsw-reviews__quote-symbol {
        top: -22px;

        font-size: 6rem;
    }


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

        min-height: 0;
    }


    .lsw-reviews__brand-panel {
        display: grid;

        grid-template-columns:
            1fr
            auto
            1fr;

        align-items: center;

        min-height: 150px;

        padding:
            22px
            24px;
    }


    .lsw-reviews__brand-panel-top {
        align-self: start;
    }


    .lsw-reviews__brand-mark {
        width: 100px;
    }


    .lsw-reviews__brand-panel-bottom {
        justify-self: end;

        text-align: right;
    }


    .lsw-reviews__widget-area {
        padding:
            28px
            24px
            24px;
    }


    .lsw-reviews__placeholder {
        grid-template-columns:
            auto
            1fr;

        min-height: 320px;

        padding: 30px;
    }


    .lsw-reviews__placeholder-mark {
        width: 66px;
        height: 66px;
    }


    .lsw-reviews__widget-footer {
        grid-template-columns:
            65px
            1fr;
    }


    .lsw-reviews__corner--bottom {
        left: 18px;
    }


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

        gap: 15px;

        margin-top: 36px;
    }

}


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

@media (max-width: 480px) {

    .lsw-reviews {
        padding:
            86px
            0
            72px;
    }


    .lsw-reviews__transition {
        height: 48px;
    }


    .lsw-reviews__transition::before {
        width: 81%;
        height: 33px;
    }


    .lsw-reviews__transition::after {
        width: 38%;
        height: 18px;
    }


    .lsw-reviews__transition-line {
        top: 31px;
        left: 16px;

        width: 78px;
    }


    .lsw-reviews__transition-mark {
        top: 26px;
        left: 87px;

        width: 10px;
        height: 10px;
    }


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

        gap: 23px;

        margin-bottom: 33px;
    }


    .lsw-reviews__eyebrow {
        gap: 10px;

        margin-bottom: 15px;

        font-size: 0.65rem;

        letter-spacing: 0.12em;
    }


    .lsw-reviews__eyebrow-rule {
        width: 36px;
    }


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

        line-height: 0.94;
    }


    .lsw-reviews__intro {
        min-height: auto;

        padding:
            14px
            0
            0
            48px;
    }


    .lsw-reviews__intro::before {
        left: 29px;
    }


    .lsw-reviews__quote-symbol {
        top: -18px;

        font-size: 5rem;
    }


    .lsw-reviews__intro p {
        font-size: 0.96rem;

        line-height: 1.63;
    }


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

        min-height: 0;
    }


    .lsw-reviews__brand-panel {
        display: grid;

        grid-template-columns:
            1fr
            auto;

        grid-template-areas:
            "top mark"
            "bottom bottom";

        gap: 16px;

        min-height: auto;

        padding:
            20px;
    }


    .lsw-reviews__brand-panel-top {
        grid-area: top;

        align-self: center;
    }


    .lsw-reviews__brand-mark {
        grid-area: mark;

        width: 78px;
    }


    .lsw-reviews__brand-panel-bottom {
        grid-area: bottom;

        padding-top: 14px;

        border-top:
            1px solid
            rgba(199, 163, 93, 0.15);
    }


    .lsw-reviews__widget-area {
        padding:
            22px
            16px
            20px;
    }


    .lsw-reviews__widget-rail {
        grid-template-columns:
            65px
            1fr;

        margin-bottom: 20px;
    }


    .lsw-reviews__widget-shell {
        padding: 12px;
    }


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

        gap: 22px;

        min-height: 300px;

        padding:
            27px
            22px;
    }


    .lsw-reviews__placeholder-mark {
        width: 60px;
        height: 60px;
    }


    .lsw-reviews__placeholder-copy strong {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.55rem
            );
    }


    .lsw-reviews__placeholder-copy p {
        font-size: 0.88rem;
    }


    .lsw-reviews__widget-footer {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 12px;

        margin-top: 19px;
    }


    .lsw-reviews__widget-footer p {
        font-size: 0.65rem;
    }


    .lsw-reviews__corner {
        width: 24px;
        height: 24px;
    }


    .lsw-reviews__corner--top {
        top: 11px;
        right: 11px;
    }


    .lsw-reviews__corner--bottom {
        left: 11px;
        bottom: 11px;
    }


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

        gap: 13px;

        margin-top: 31px;
    }


    .lsw-reviews__bottom p {
        font-size: 1.16rem;
    }


    .lsw-reviews__bottom > a {
        font-size: 0.74rem;
    }

}








































/* ============================================================
   LAND & STONE WORKS LLC
   08. SERVICE AREAS
   ============================================================ */


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

.lsw-areas {
    position: relative;

    z-index: 2;

    padding:
        clamp(125px, 9vw, 170px)
        0
        clamp(105px, 8vw, 150px);

    overflow: hidden;

    color:
        var(--lsw-white);

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

    isolation: isolate;
}


/* Subtle lighting */

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

    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 76% 38%,
            rgba(199, 163, 93, 0.095),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 72%,
            rgba(104, 121, 86, 0.16),
            transparent 31%
        );
}


/* Mineral texture */

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

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.105;

    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='.72' 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
   ============================================================ */

.lsw-areas__transition {
    position: absolute;

    z-index: 10;

    top: -1px;
    left: 0;

    width: 100%;
    height: 78px;

    pointer-events: none;
}


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

    position: absolute;

    top: 0;
    left: 0;

    width: 66%;
    height: 56px;

    background:
        var(--lsw-ivory);

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


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

    position: absolute;

    top: 0;
    right: 0;

    width: 39%;
    height: 28px;

    background:
        var(--lsw-ivory);

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


.lsw-areas__transition-line {
    position: absolute;

    z-index: 4;

    top: 54px;
    left: 9%;

    width: 160px;
    height: 1px;

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

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.lsw-areas.is-visible
.lsw-areas__transition-line {
    transform:
        scaleX(1);

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


.lsw-areas__transition-mark {
    position: absolute;

    z-index: 5;

    top: 47px;
    left:
        calc(
            9% + 152px
        );

    width: 14px;
    height: 14px;

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

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

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


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

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


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

.lsw-areas__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


.lsw-areas__shape {
    position: absolute;

    display: block;

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

    transform:
        rotate(30deg);
}


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

    width: 340px;
    height: 340px;
}


.lsw-areas__shape--two {
    right: 7%;
    bottom: 5%;

    width: 150px;
    height: 150px;

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


.lsw-areas__shape--three {
    left: -180px;
    bottom: 9%;

    width: 325px;
    height: 325px;

    border-color:
        rgba(104, 121, 86, 0.18);
}


.lsw-areas__grid-decoration {
    position: absolute;

    top: 11%;
    right: 6%;

    width: 230px;
    height: 230px;

    opacity: 0.045;

    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:
        38px 38px;

    transform:
        rotate(6deg);
}


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

.lsw-areas__header {
    display: grid;

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

    align-items: end;

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

    margin-bottom:
        clamp(
            58px,
            6vw,
            88px
        );
}


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

.lsw-areas__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;

    font-size: 0.79rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.16em;

    text-transform: uppercase;

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


.lsw-areas__eyebrow-number {
    color:
        var(--lsw-gold-500);
}


.lsw-areas__eyebrow-rule {
    display: block;

    width: 52px;
    height: 1px;

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

    transform-origin:
        left center;
}


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

.lsw-areas__title {
    max-width: 900px;

    margin: 0;

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

    font-size:
        clamp(
            3.4rem,
            5.2vw,
            5.8rem
        );

    font-weight: 500;

    line-height: 0.93;

    letter-spacing: -0.045em;

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


.lsw-areas__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.055em;
}


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


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


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

.lsw-areas__intro {
    max-width: 470px;
}


.lsw-areas__intro p {
    margin:
        0
        0
        26px;

    font-size:
        clamp(
            1rem,
            0.96rem + 0.18vw,
            1.12rem
        );

    line-height: 1.72;

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


.lsw-areas__estimate-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 17px;

    padding-bottom: 8px;

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.085em;

    text-transform: uppercase;

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


.lsw-areas__estimate-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

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

    transform-origin:
        left center;

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


.lsw-areas__estimate-link:hover::after {
    transform:
        scaleX(0.72);
}


.lsw-areas__estimate-link svg {
    width: 20px;
    height: 20px;

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


.lsw-areas__estimate-link:hover svg {
    transform:
        translateX(5px);
}


/* ============================================================
   08. COMPOSITION
   ============================================================ */

.lsw-areas__composition {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(275px, 0.29fr)
        minmax(0, 0.71fr);

    min-height: 680px;

    overflow: hidden;

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

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

    background:
        rgba(17, 28, 20, 0.24);

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.22);

    isolation: isolate;
}


/* ============================================================
   09. LOCATIONS PANEL
   ============================================================ */

.lsw-areas__locations {
    position: relative;

    z-index: 4;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        34px
        28px
        28px;

    color:
        var(--lsw-text);

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


/* Faceted decoration */

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

    position: absolute;

    top: -86px;
    left: -115px;

    width: 210px;
    height: 210px;

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

    transform:
        rotate(30deg);

    pointer-events: none;
}


/* ============================================================
   10. LOCATIONS HEADER
   ============================================================ */

.lsw-areas__locations-header {
    position: relative;

    z-index: 2;

    padding-bottom: 27px;

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


.lsw-areas__locations-kicker {
    display: block;

    margin-bottom: 11px;

    font-size: 0.68rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.14em;

    text-transform: uppercase;

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


.lsw-areas__locations-header h3 {
    margin:
        0
        0
        10px;

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

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

    font-weight: 600;

    line-height: 0.98;

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


.lsw-areas__locations-header p {
    margin: 0;

    font-size: 0.86rem;

    line-height: 1.58;

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


/* ============================================================
   11. LOCATIONS LIST
   ============================================================ */

.lsw-areas__list {
    flex: 1;

    display: flex;

    flex-direction: column;

    margin-top: 10px;
}


/* ============================================================
   12. LOCATION ITEM
   ============================================================ */

.lsw-area-item {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 13px;

    width: 100%;

    min-height: 65px;

    padding:
        12px
        5px;

    border: 0;

    border-bottom:
        1px solid
        rgba(36, 59, 42, 0.10);

    color:
        var(--lsw-text);

    background:
        transparent;

    text-align: left;

    cursor: pointer;

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


.lsw-area-item:hover,
.lsw-area-item.is-active {
    padding-left: 10px;

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

    background:
        rgba(36, 59, 42, 0.035);
}


.lsw-area-item__number {
    font-size: 0.66rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.1em;

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


.lsw-area-item__content {
    display: grid;

    gap: 3px;
}


.lsw-area-item__content strong {
    font-family:
        var(--lsw-font-display);

    font-size: 1.2rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.02em;
}


.lsw-area-item__content small {
    font-size: 0.67rem;

    font-weight: 600;

    letter-spacing: 0.045em;

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


.lsw-area-item__marker {
    justify-self: end;

    width: 8px;
    height: 8px;

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

    transform:
        rotate(45deg);

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


.lsw-area-item:hover
.lsw-area-item__marker,
.lsw-area-item.is-active
.lsw-area-item__marker {
    background:
        var(--lsw-gold-500);

    transform:
        rotate(135deg);
}


/* ============================================================
   13. VIEW ALL BUTTON
   ============================================================ */

.lsw-areas__view-all {
    display: flex;

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

    gap: 14px;

    width: 100%;

    min-height: 50px;

    margin-top: 18px;

    padding:
        12px
        16px;

    color:
        var(--lsw-white);

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

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

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

    font-size: 0.72rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color
        var(--lsw-speed)
        var(--lsw-ease),
        color
        var(--lsw-speed)
        var(--lsw-ease),
        border-color
        var(--lsw-speed)
        var(--lsw-ease);
}


.lsw-areas__view-all:hover {
    color:
        var(--lsw-forest-950);

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

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


.lsw-areas__view-all svg {
    width: 17px;
    height: 17px;
}


/* ============================================================
   14. MAP COLUMN
   ============================================================ */

.lsw-areas__map-column {
    position: relative;

    z-index: 2;

    display: grid;

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

    min-width: 0;

    background:
        #E9E4D9;
}


/* ============================================================
   15. MAP TOP BAR
   ============================================================ */

.lsw-areas__map-topbar {
    display: flex;

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

    gap: 30px;

    min-height: 88px;

    padding:
        20px
        30px;

    color:
        var(--lsw-text);

    background:
        var(--lsw-sand);

    border-bottom:
        1px solid
        rgba(36, 59, 42, 0.10);
}


.lsw-areas__map-topbar > div {
    display: grid;

    gap: 5px;
}


.lsw-areas__map-label {
    font-size: 0.64rem;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;

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


.lsw-areas__map-topbar strong {
    font-family:
        var(--lsw-font-display);

    font-size: 1.7rem;

    font-weight: 600;

    line-height: 1;

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


.lsw-areas__map-coordinate {
    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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


/* ============================================================
   16. MAP FRAME
   ============================================================ */

.lsw-areas__map-frame {
    position: relative;

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

    overflow: hidden;

    isolation: isolate;
}


.lsw-areas__map {
    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    min-height: 500px;

    background:
        #DDD9CE;
}


/* Subtle site-color overlay */

.lsw-areas__map-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 350;

    pointer-events: none;

    opacity: 0.095;

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

    mix-blend-mode:
        multiply;
}


/* ============================================================
   17. MAP DECORATION
   ============================================================ */

.lsw-areas__map-decoration {
    position: absolute;

    z-index: 450;

    top: 22px;
    right: 22px;

    width: 64px;
    height: 64px;

    pointer-events: none;
}


.lsw-areas__map-decoration span {
    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(159, 122, 56, 0.62);

    transform:
        rotate(30deg);
}


.lsw-areas__map-decoration span:last-child {
    inset: 15px;

    border-color:
        rgba(36, 59, 42, 0.50);
}


.lsw-areas__map-corner {
    position: absolute;

    z-index: 450;

    left: 22px;
    bottom: 22px;

    width: 38px;
    height: 38px;

    pointer-events: none;

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

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


/* ============================================================
   18. MAP FOOTER
   ============================================================ */

.lsw-areas__map-footer {
    display: flex;

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

    gap: 26px;

    min-height: 76px;

    padding:
        18px
        30px;

    color:
        var(--lsw-text);

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

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


.lsw-areas__map-footer > div {
    display: flex;

    align-items: center;

    gap: 14px;
}


.lsw-areas__map-footer-line {
    width: 46px;
    height: 1px;

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


.lsw-areas__map-footer p {
    margin: 0;

    font-size: 0.72rem;

    font-weight: 600;

    line-height: 1.45;

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


.lsw-areas__map-footer a {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

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


.lsw-areas__map-footer a span {
    color:
        var(--lsw-gold-700);

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


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


/* ============================================================
   19. LEAFLET — GLOBAL MAP CUSTOMIZATION
   ============================================================ */

.lsw-areas
.leaflet-container {
    font-family:
        var(--lsw-font-body);

    background:
        #DDD9CE;

    outline: none;
}


/* Slightly soften default map tiles */

.lsw-areas
.leaflet-tile-pane {
    filter:
        saturate(0.72)
        contrast(0.94)
        brightness(1.02);
}


/* ============================================================
   20. LEAFLET ZOOM CONTROLS
   ============================================================ */

.lsw-areas
.leaflet-control-zoom {
    overflow: hidden;

    margin:
        22px
        0
        0
        22px;

    border: 0;

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

    box-shadow:
        0 12px 30px
        rgba(24, 38, 28, 0.13);
}


.lsw-areas
.leaflet-control-zoom a {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

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

    background:
        rgba(250, 248, 243, 0.96);

    border: 0;

    border-bottom:
        1px solid
        rgba(36, 59, 42, 0.10);

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

    font-size: 1.15rem;

    line-height: 1;

    transition:
        color
        var(--lsw-speed)
        var(--lsw-ease),
        background-color
        var(--lsw-speed)
        var(--lsw-ease);
}


.lsw-areas
.leaflet-control-zoom a:hover {
    color:
        var(--lsw-forest-950);

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


/* ============================================================
   21. ATTRIBUTION
   ============================================================ */

.lsw-areas
.leaflet-control-attribution {
    padding:
        4px
        7px;

    color:
        #5D615B;

    background:
        rgba(250, 248, 243, 0.88);

    font-size: 0.58rem;
}


.lsw-areas
.leaflet-control-attribution a {
    color:
        var(--lsw-forest-800);
}


/* ============================================================
   22. CUSTOM MAP MARKERS
   ============================================================ */

.lsw-map-marker {
    background: transparent;

    border: 0;
}


.lsw-map-pin {
    position: relative;

    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    transform:
        rotate(30deg);

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

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

    box-shadow:
        0 9px 22px
        rgba(24, 38, 28, 0.26);

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


.lsw-map-pin::after {
    content: "";

    width: 8px;
    height: 8px;

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

    transform:
        rotate(-30deg);
}


.lsw-map-pin.is-active {
    width: 42px;
    height: 42px;

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

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

    box-shadow:
        0 12px 30px
        rgba(24, 38, 28, 0.34);
}


.lsw-map-pin.is-active::after {
    background:
        var(--lsw-forest-950);
}


/* ============================================================
   23. LEAFLET POPUPS
   ============================================================ */

.lsw-areas
.leaflet-popup-content-wrapper {
    padding: 0;

    overflow: hidden;

    color:
        var(--lsw-text);

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

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

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

    box-shadow:
        0 16px 38px
        rgba(24, 38, 28, 0.18);
}


.lsw-areas
.leaflet-popup-content {
    min-width: 180px;

    margin: 0;

    padding:
        17px
        19px;
}


.lsw-map-popup {
    display: grid;

    gap: 5px;
}


.lsw-map-popup span {
    font-size: 0.61rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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


.lsw-map-popup strong {
    font-family:
        var(--lsw-font-display);

    font-size: 1.45rem;

    font-weight: 600;

    line-height: 1;

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


.lsw-map-popup small {
    font-size: 0.68rem;

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


.lsw-areas
.leaflet-popup-tip {
    background:
        var(--lsw-ivory-soft);
}


/* ============================================================
   24. INITIAL ANIMATION STATES
   ============================================================ */

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

    transform:
        translateX(-22px);
}


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


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

    transform:
        translateY(112%);
}


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

    transform:
        translateY(22px);
}


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

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

    transform:
        translateY(22px);
}


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

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

    transform:
        translateX(0);

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


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

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


html.lsw-js
.lsw-areas.is-visible
.lsw-areas__title-mask > span {
    opacity: 1;

    transform:
        translateY(0);

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


html.lsw-js
.lsw-areas.is-visible
.lsw-areas__title-mask:nth-child(1) > span {
    transition-delay:
        180ms;
}


html.lsw-js
.lsw-areas.is-visible
.lsw-areas__title-mask:nth-child(2) > span {
    transition-delay:
        270ms;
}


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

    transform:
        translateY(0);

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


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

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

    transform:
        translateY(0);

    transition:
        opacity
        750ms
        ease
        430ms,
        clip-path
        1250ms
        var(--lsw-ease)
        430ms,
        transform
        950ms
        var(--lsw-ease)
        430ms;
}


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

@media (min-width: 1200px) {

    .lsw-areas__composition {
        min-height: 700px;
    }


    .lsw-areas__map {
        min-height: 540px;
    }

}


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

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

    .lsw-areas {
        padding:
            118px
            0
            102px;
    }


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

        gap: 48px;

        margin-bottom: 52px;
    }


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


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

        min-height: 650px;
    }


    .lsw-areas__locations {
        padding:
            28px
            20px
            22px;
    }


    .lsw-area-item {
        grid-template-columns:
            30px
            1fr
            14px;

        gap: 8px;

        min-height: 61px;
    }


    .lsw-area-item__content strong {
        font-size: 1.05rem;
    }


    .lsw-areas__map-topbar {
        padding:
            18px
            22px;
    }


    .lsw-areas__map-footer {
        padding:
            17px
            22px;
    }


    .lsw-areas__map-footer p {
        display: none;
    }

}


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

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

    .lsw-areas {
        padding:
            100px
            0
            84px;
    }


    .lsw-areas__transition {
        height: 56px;
    }


    .lsw-areas__transition::before {
        width: 77%;
        height: 39px;
    }


    .lsw-areas__transition-line {
        top: 38px;
        left: 20px;

        width: 100px;
    }


    .lsw-areas__transition-mark {
        top: 32px;
        left: 112px;

        width: 12px;
        height: 12px;
    }


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

        gap: 28px;

        margin-bottom: 40px;
    }


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


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

        min-height: 0;
    }


    .lsw-areas__locations {
        padding:
            26px
            22px
            22px;
    }


    .lsw-areas__list {
        display: grid;

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

        gap: 0 15px;
    }


    .lsw-area-item {
        min-height: 63px;
    }


    .lsw-areas__map-column {
        grid-template-rows:
            auto
            470px
            auto;
    }


    .lsw-areas__map {
        position: relative;

        min-height: 470px;
    }


    .lsw-areas__map-topbar {
        padding:
            18px
            22px;
    }


    .lsw-areas__map-footer {
        padding:
            17px
            22px;
    }

}


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

@media (max-width: 480px) {

    .lsw-areas {
        padding:
            88px
            0
            72px;
    }


    .lsw-areas__transition {
        height: 48px;
    }


    .lsw-areas__transition::before {
        width: 81%;
        height: 33px;
    }


    .lsw-areas__transition::after {
        width: 38%;
        height: 18px;
    }


    .lsw-areas__transition-line {
        top: 31px;
        left: 16px;

        width: 78px;
    }


    .lsw-areas__transition-mark {
        top: 26px;
        left: 87px;

        width: 10px;
        height: 10px;
    }


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

        gap: 23px;

        margin-bottom: 33px;
    }


    .lsw-areas__eyebrow {
        gap: 10px;

        margin-bottom: 15px;

        font-size: 0.65rem;

        letter-spacing: 0.12em;
    }


    .lsw-areas__eyebrow-rule {
        width: 36px;
    }


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

        line-height: 0.94;
    }


    .lsw-areas__intro p {
        font-size: 0.96rem;

        line-height: 1.63;
    }


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

        min-height: 0;
    }


    .lsw-areas__locations {
        padding:
            23px
            17px
            18px;
    }


    .lsw-areas__locations-header {
        padding-bottom: 21px;
    }


    .lsw-areas__locations-header h3 {
        font-size: 2rem;
    }


    .lsw-areas__list {
        display: block;
    }


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

        gap: 9px;

        min-height: 59px;

        padding:
            10px
            4px;
    }


    .lsw-area-item__content strong {
        font-size: 1.06rem;
    }


    .lsw-area-item__content small {
        font-size: 0.62rem;
    }


    .lsw-areas__map-column {
        grid-template-rows:
            auto
            400px
            auto;
    }


    .lsw-areas__map {
        position: relative;

        min-height: 400px;
    }


    .lsw-areas__map-topbar {
        min-height: 76px;

        padding:
            15px
            17px;
    }


    .lsw-areas__map-topbar strong {
        font-size: 1.4rem;
    }


    .lsw-areas__map-coordinate {
        display: none;
    }


    .lsw-areas
    .leaflet-control-zoom {
        margin:
            15px
            0
            0
            15px;
    }


    .lsw-areas
    .leaflet-control-zoom a {
        width: 38px;
        height: 38px;
    }


    .lsw-areas__map-decoration {
        top: 16px;
        right: 16px;

        width: 50px;
        height: 50px;
    }


    .lsw-areas__map-footer {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        padding:
            15px
            17px;
    }


    .lsw-areas__map-footer > div {
        gap: 10px;
    }


    .lsw-areas__map-footer-line {
        width: 32px;
    }


    .lsw-areas__map-footer p {
        font-size: 0.65rem;
    }


    .lsw-areas__map-footer a {
        font-size: 0.67rem;
    }

}






































/* ============================================================
   LAND & STONE WORKS LLC
   09. FOOTER
   ============================================================ */


/* ============================================================
   01. FOOTER SHELL
   ============================================================ */

.lsw-footer {
    position: relative;

    z-index: 2;

    overflow: hidden;

    color:
        var(--lsw-text);

    background:
        var(--lsw-ivory);

    isolation: isolate;
}


/* ============================================================
   02. TRANSITION FROM SERVICE AREAS
   ============================================================ */

.lsw-footer__transition {
    position: absolute;

    z-index: 10;

    top: 0;
    left: 0;

    width: 100%;
    height: 82px;

    pointer-events: none;
}


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

    position: absolute;

    top: 0;
    left: 0;

    width: 67%;
    height: 58px;

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

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


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

    position: absolute;

    top: 0;
    right: 0;

    width: 38%;
    height: 29px;

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

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


.lsw-footer__transition-line {
    position: absolute;

    z-index: 3;

    top: 56px;
    left: 9%;

    width: 158px;
    height: 1px;

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

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.lsw-footer.is-visible
.lsw-footer__transition-line {
    transform:
        scaleX(1);

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


.lsw-footer__transition-mark {
    position: absolute;

    z-index: 4;

    top: 49px;
    left:
        calc(
            9% + 150px
        );

    width: 14px;
    height: 14px;

    background:
        var(--lsw-ivory);

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

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


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

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


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

.lsw-footer__background {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


.lsw-footer__shape {
    position: absolute;

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

    transform:
        rotate(30deg);
}


.lsw-footer__shape--one {
    top: 9%;
    right: -120px;

    width: 300px;
    height: 300px;
}


.lsw-footer__shape--two {
    left: -125px;
    bottom: 12%;

    width: 245px;
    height: 245px;

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


.lsw-footer__grid {
    position: absolute;

    top: 19%;
    right: 4%;

    width: 185px;
    height: 185px;

    opacity: 0.03;

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

    background-size:
        31px
        31px;
}


/* ============================================================
   04. MAIN FOOTER
   ============================================================ */

.lsw-footer__main {
    position: relative;

    padding:
        clamp(125px, 9vw, 165px)
        0
        clamp(70px, 6vw, 100px);
}


/* ============================================================
   05. BRAND ROW
   ============================================================ */

.lsw-footer__brand-row {
    display: grid;

    grid-template-columns:
        minmax(210px, 0.7fr)
        minmax(390px, 1.5fr)
        auto;

    align-items: center;

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


.lsw-footer__brand {
    display: inline-flex;

    align-items: center;

    justify-self: start;

    width: fit-content;
}


.lsw-footer__logo {
    width:
        clamp(
            190px,
            17vw,
            250px
        );

    max-height: 100px;

    object-fit: contain;

    object-position: left center;

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


.lsw-footer__brand:hover
.lsw-footer__logo {
    transform:
        translateY(-3px);
}


/* ============================================================
   06. STATEMENT
   ============================================================ */

.lsw-footer__statement {
    max-width: 650px;
}


.lsw-footer__kicker {
    display: block;

    margin-bottom: 13px;

    font-size: 0.71rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

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


.lsw-footer__statement p {
    margin: 0;

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

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

    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.035em;

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


.lsw-footer__statement strong {
    font-weight: 500;

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


/* ============================================================
   07. FREE ESTIMATE CTA
   ============================================================ */

.lsw-footer__estimate {
    position: relative;

    display: inline-flex;

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

    gap: 18px;

    min-height: 58px;

    padding:
        15px
        23px;

    overflow: hidden;

    color:
        var(--lsw-white);

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

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

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

    font-size: 0.82rem;

    font-weight: 700;

    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-footer__estimate::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-footer__estimate:hover::before {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


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

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

    transform:
        translateY(-2px);

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


.lsw-footer__estimate svg {
    width: 20px;
    height: 20px;

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

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


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

    transform:
        translateX(4px);
}


/* ============================================================
   08. ARCHITECTURAL DIVIDER
   ============================================================ */

.lsw-footer__divider {
    position: relative;

    display: flex;

    align-items: center;

    margin:
        clamp(55px, 5vw, 80px)
        0
        clamp(55px, 5vw, 78px);
}


.lsw-footer__divider > span {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--lsw-gold-600) 0%,
            rgba(36, 59, 42, 0.13) 28%,
            rgba(36, 59, 42, 0.13) 100%
        );
}


.lsw-footer__divider > i {
    position: absolute;

    left: 23%;

    width: 13px;
    height: 13px;

    background:
        var(--lsw-ivory);

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

    transform:
        rotate(30deg);
}


/* ============================================================
   09. COLUMNS
   ============================================================ */

.lsw-footer__grid-layout {
    display: grid;

    grid-template-columns:
        minmax(260px, 1.45fr)
        minmax(170px, 0.72fr)
        minmax(260px, 1.08fr)
        minmax(230px, 0.95fr);

    gap:
        clamp(
            38px,
            5vw,
            80px
        );

    align-items: start;
}


/* ============================================================
   10. COLUMN TITLES
   ============================================================ */

.lsw-footer__column-label,
.lsw-footer__column-title {
    display: block;

    margin:
        0
        0
        25px;

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

    font-size: 0.71rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.145em;

    text-transform: uppercase;

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


.lsw-footer__column-title {
    position: relative;

    padding-bottom: 15px;
}


.lsw-footer__column-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 42px;
    height: 1px;

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


/* ============================================================
   11. DESCRIPTION
   ============================================================ */

.lsw-footer__description {
    max-width: 390px;

    margin:
        0
        0
        28px;

    font-size: 1rem;

    line-height: 1.72;

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


/* ============================================================
   12. SERVICE LINE
   ============================================================ */

.lsw-footer__service-line {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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


.lsw-footer__service-line i {
    width: 5px;
    height: 5px;

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

    transform:
        rotate(45deg);
}


/* ============================================================
   13. QUICK LINKS
   ============================================================ */

.lsw-footer__links {
    display: grid;

    gap: 0;

    margin: 0;

    padding: 0;

    list-style: none;
}


.lsw-footer__links li {
    border-bottom:
        1px solid
        rgba(36, 59, 42, 0.10);
}


.lsw-footer__links a {
    display: flex;

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

    gap: 14px;

    min-height: 42px;

    font-size: 0.91rem;

    font-weight: 600;

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

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


.lsw-footer__links a span:last-child {
    font-size: 0.8rem;

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

    opacity: 0;

    transform:
        translate(-5px, 5px);

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


.lsw-footer__links a:hover {
    padding-left: 5px;

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


.lsw-footer__links a:hover
span:last-child {
    opacity: 1;

    transform:
        translate(0, 0);
}


/* ============================================================
   14. HOURS
   ============================================================ */

.lsw-footer__hours {
    display: grid;
}


.lsw-footer__hours-row {
    display: grid;

    grid-template-columns:
        minmax(90px, 0.8fr)
        minmax(130px, 1.2fr);

    gap: 16px;

    align-items: center;

    min-height: 39px;

    border-bottom:
        1px solid
        rgba(36, 59, 42, 0.09);

    font-size: 0.8rem;
}


.lsw-footer__hours-row span:first-child {
    font-weight: 600;

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


.lsw-footer__hours-row span:last-child {
    justify-self: end;

    white-space: nowrap;

    font-size: 0.75rem;

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


/* ============================================================
   15. SOCIAL
   ============================================================ */

.lsw-footer__social-intro {
    margin:
        0
        0
        19px;

    font-size: 0.87rem;

    line-height: 1.6;

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


.lsw-footer__socials {
    display: grid;

    gap: 10px;
}


.lsw-footer-social {
    display: grid;

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

    align-items: center;

    gap: 13px;

    min-height: 66px;

    padding:
        10px
        13px;

    color:
        var(--lsw-text);

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

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

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

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


.lsw-footer-social:hover {
    color:
        var(--lsw-forest-800);

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

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

    transform:
        translateX(4px);
}


.lsw-footer-social__icon {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

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

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

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

    transform:
        rotate(3deg);
}


.lsw-footer-social__icon svg {
    width: 21px;
    height: 21px;
}


.lsw-footer-social__text {
    display: grid;

    gap: 2px;
}


.lsw-footer-social__text small {
    font-size: 0.61rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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


.lsw-footer-social__text strong {
    font-family:
        var(--lsw-font-display);

    font-size: 1.15rem;

    font-weight: 600;

    line-height: 1;
}


.lsw-footer-social__arrow {
    color:
        var(--lsw-gold-700);

    font-size: 0.8rem;

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


.lsw-footer-social:hover
.lsw-footer-social__arrow {
    transform:
        translate(3px, -3px);
}


/* ============================================================
   16. BOTTOM FOOTER
   ============================================================ */

.lsw-footer__bottom {
    position: relative;

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

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

    border-top:
        1px solid
        rgba(199, 163, 93, 0.22);
}


/* Gold architectural accent */

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

    position: absolute;

    top: -1px;
    left: 0;

    width: 18%;
    height: 1px;

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


.lsw-footer__bottom-inner {
    display: flex;

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

    gap: 30px;

    min-height: 82px;
}


/* ============================================================
   17. COPYRIGHT
   ============================================================ */

.lsw-footer__copyright {
    margin: 0;

    font-size: 0.75rem;

    font-weight: 500;

    line-height: 1.5;

    letter-spacing: 0.025em;
}


/* ============================================================
   18. POWERED BY
   ============================================================ */

.lsw-footer__powered {
    display: inline-flex;

    align-items: center;

    gap: 7px;

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

    font-size: 0.72rem;

    line-height: 1;

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


.lsw-footer__powered-prefix {
    color:
        rgba(245, 241, 232, 0.48);
}


.lsw-footer__powered strong {
    font-weight: 700;

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


.lsw-footer__powered-arrow {
    color:
        var(--lsw-gold-500);

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


.lsw-footer__powered:hover {
    color:
        var(--lsw-white);
}


.lsw-footer__powered:hover
.lsw-footer__powered-arrow {
    transform:
        translate(3px, -3px);
}


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

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

    transform:
        translateY(24px);
}


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

    clip-path:
        inset(
            0
            0
            100%
            0
        );

    transform:
        translateY(16px);
}


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

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

    transform:
        translateY(0);

    transition:
        opacity
        720ms
        ease
        120ms,
        transform
        920ms
        var(--lsw-ease)
        120ms;
}


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

    clip-path:
        inset(
            0
            0
            0
            0
        );

    transform:
        translateY(0);

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


html.lsw-js
.lsw-footer.is-visible
[data-footer-reveal="column"]:nth-child(1) {
    transition-delay: 260ms;
}


html.lsw-js
.lsw-footer.is-visible
[data-footer-reveal="column"]:nth-child(2) {
    transition-delay: 340ms;
}


html.lsw-js
.lsw-footer.is-visible
[data-footer-reveal="column"]:nth-child(3) {
    transition-delay: 420ms;
}


html.lsw-js
.lsw-footer.is-visible
[data-footer-reveal="column"]:nth-child(4) {
    transition-delay: 500ms;
}


/* ============================================================
   21. REDUCED MOTION
   No extra media query.
   ============================================================ */

html.lsw-reduced-motion
.lsw-footer-social,
html.lsw-reduced-motion
.lsw-footer__logo {
    transform: none !important;
}


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

@media (min-width: 1200px) {

    .lsw-footer__main {
        padding-top: 150px;
    }


    .lsw-footer__grid-layout {
        grid-template-columns:
            minmax(280px, 1.45fr)
            minmax(175px, 0.72fr)
            minmax(265px, 1.08fr)
            minmax(235px, 0.95fr);
    }

}


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

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

    .lsw-footer__main {
        padding:
            120px
            0
            80px;
    }


    .lsw-footer__brand-row {
        grid-template-columns:
            auto
            1fr
            auto;

        gap: 35px;
    }


    .lsw-footer__logo {
        width: 175px;
    }


    .lsw-footer__statement p {
        font-size:
            clamp(
                2rem,
                3.6vw,
                2.9rem
            );
    }


    .lsw-footer__estimate {
        min-height: 52px;

        padding:
            13px
            17px;

        font-size: 0.74rem;
    }


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

        gap:
            52px
            65px;
    }


    .lsw-footer__column--about {
        grid-column: 1;
    }


    .lsw-footer__column--links {
        grid-column: 2;
    }


    .lsw-footer__column--hours {
        grid-column: 1;
    }


    .lsw-footer__column--social {
        grid-column: 2;
    }

}


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

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

    .lsw-footer__main {
        padding:
            102px
            0
            72px;
    }


    .lsw-footer__transition {
        height: 56px;
    }


    .lsw-footer__transition::before {
        width: 77%;
        height: 39px;
    }


    .lsw-footer__transition-line {
        top: 38px;
        left: 20px;

        width: 100px;
    }


    .lsw-footer__transition-mark {
        top: 32px;
        left: 112px;

        width: 12px;
        height: 12px;
    }


    .lsw-footer__brand-row {
        grid-template-columns:
            1fr
            auto;

        grid-template-areas:
            "logo cta"
            "statement statement";

        gap:
            28px
            22px;
    }


    .lsw-footer__brand {
        grid-area: logo;
    }


    .lsw-footer__logo {
        width: 165px;
    }


    .lsw-footer__statement {
        grid-area: statement;

        max-width: 570px;
    }


    .lsw-footer__estimate {
        grid-area: cta;

        min-height: 48px;

        padding:
            11px
            14px;

        font-size: 0.7rem;
    }


    .lsw-footer__statement p {
        font-size:
            clamp(
                2.1rem,
                7vw,
                3rem
            );
    }


    .lsw-footer__divider {
        margin:
            48px
            0;
    }


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

        gap:
            44px
            35px;
    }


    .lsw-footer__column--about {
        grid-column:
            1 / -1;
    }


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


    .lsw-footer__hours {
        min-width: 0;
    }


    .lsw-footer__hours-row {
        grid-template-columns: 1fr;

        gap: 2px;

        min-height: 48px;

        padding:
            6px
            0;
    }


    .lsw-footer__hours-row span:last-child {
        justify-self: start;
    }


    .lsw-footer__bottom-inner {
        min-height: 94px;
    }

}


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

@media (max-width: 480px) {

    .lsw-footer__main {
        padding:
            90px
            0
            62px;
    }


    .lsw-footer__transition {
        height: 48px;
    }


    .lsw-footer__transition::before {
        width: 81%;
        height: 33px;
    }


    .lsw-footer__transition::after {
        width: 38%;
        height: 18px;
    }


    .lsw-footer__transition-line {
        top: 31px;
        left: 16px;

        width: 78px;
    }


    .lsw-footer__transition-mark {
        top: 26px;
        left: 87px;

        width: 10px;
        height: 10px;
    }


    .lsw-footer__brand-row {
        grid-template-columns:
            1fr;

        gap: 24px;
    }


    .lsw-footer__logo {
        width: 160px;
    }


    .lsw-footer__kicker {
        font-size: 0.65rem;
    }


    .lsw-footer__statement p {
        font-size:
            clamp(
                2rem,
                10vw,
                2.8rem
            );
    }


    .lsw-footer__estimate {
        justify-self: start;

        min-height: 50px;

        padding:
            12px
            16px;

        font-size: 0.72rem;
    }


    .lsw-footer__divider {
        margin:
            43px
            0;
    }


    .lsw-footer__divider > i {
        left: 40%;
    }


    .lsw-footer__grid-layout {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .lsw-footer__column-label,
    .lsw-footer__column-title {
        margin-bottom: 20px;

        font-size: 0.67rem;
    }


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

        line-height: 1.67;
    }


    .lsw-footer__links a {
        min-height: 45px;

        font-size: 0.93rem;
    }


    .lsw-footer__hours-row {
        grid-template-columns:
            minmax(95px, 0.9fr)
            minmax(130px, 1.1fr);

        gap: 12px;

        min-height: 42px;

        font-size: 0.77rem;
    }


    .lsw-footer__hours-row span:last-child {
        font-size: 0.72rem;
    }


    .lsw-footer-social {
        min-height: 68px;
    }


    .lsw-footer__bottom-inner {
        flex-direction: column;

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

        gap: 11px;

        min-height: 112px;

        padding-block: 22px;
    }


    .lsw-footer__copyright {
        font-size: 0.69rem;
    }


    .lsw-footer__powered {
        flex-wrap: wrap;

        font-size: 0.69rem;
    }

}