/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   02. GALLERY HERO
   ========================================================= */


/* =========================================================
   01. HERO
   ========================================================= */

.tzir-gallery-hero {

    position:
        relative;

    width:
        100%;

    /*
        Header + Gallery Hero ≈ 88svh.

        We intentionally show a hint of the next section
        instead of occupying the complete first viewport.
    */

    height:
        calc(
            88svh -
            var(--tzir-header-height)
        );

    min-height:
        0;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            118deg,
            #F8F6F0 0%,
            var(--tzir-ivory-50) 47%,
            #EFECE4 100%
        );

}



/* =========================================================
   02. PAPER GRAIN
   ========================================================= */

.tzir-gallery-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        0.03;

    mix-blend-mode:
        multiply;

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

}



/*
    Very subtle green organic light behind imagery.
*/

.tzir-gallery-hero::after {

    content:
        "";

    position:
        absolute;

    top:
        8%;

    right:
        2%;

    z-index:
        -4;

    width:
        47vw;

    height:
        75%;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(
                95,
                119,
                40,
                0.12
            ) 0%,
            rgba(
                95,
                119,
                40,
                0.03
            ) 48%,
            transparent 72%
        );

    filter:
        blur(30px);

}



/* =========================================================
   03. TOPOGRAPHY
   ========================================================= */

.tzir-gallery-hero__topography {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    pointer-events:
        none;

    opacity:
        0.5;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1080' height='720' viewBox='0 0 1080 720'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.075' d='M-120 112C88 16 245 192 427 116S769 22 1201 169'/%3E%3Cpath opacity='.052' d='M-116 155C99 59 264 234 450 157S797 77 1203 212'/%3E%3Cpath opacity='.07' d='M-118 561C100 437 283 627 481 536S841 447 1202 594'/%3E%3Cpath opacity='.05' d='M561-80C497 74 622 193 759 130S919 79 1129-1'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-position:
        center;

    background-size:
        1080px 720px;

}



/* =========================================================
   04. CONTAINER
   ========================================================= */

.tzir-gallery-hero__container {

    position:
        relative;

    z-index:
        3;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    height:
        100%;

    margin-inline:
        auto;

    padding-bottom:
        clamp(
            52px,
            6vh,
            70px
        );

    display:
        grid;

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

    align-items:
        center;

    gap:
        clamp(
            45px,
            6vw,
            96px
        );

}



/* =========================================================
   05. CONTENT
   ========================================================= */

.tzir-gallery-hero__content {

    position:
        relative;

    z-index:
        8;

    min-width:
        0;

}



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

.tzir-gallery-hero__eyebrow {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        11px;

    margin-bottom:
        clamp(
            15px,
            2vh,
            22px
        );

    color:
        var(--tzir-moss-700);

    font-size:
        0.7rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


.tzir-gallery-hero__eyebrow i {

    display:
        block;

    width:
        29px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.4
        );

}



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

.tzir-gallery-hero__title {

    max-width:
        790px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

    font-size:
        clamp(
            4rem,
            5.7vw,
            6.7rem
        );

    font-weight:
        600;

    line-height:
        0.87;

    letter-spacing:
        -0.058em;

}


.tzir-gallery-hero__title-line {

    display:
        block;

    overflow:
        hidden;

    padding-bottom:
        0.06em;

}


.tzir-gallery-hero__title-line > span {

    display:
        block;

}


.tzir-gallery-hero__title em {

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



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

.tzir-gallery-hero__description {

    max-width:
        575px;

    margin:
        clamp(
            20px,
            2.5vh,
            28px
        )
        0
        0;

    color:
        var(--tzir-text-secondary);

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

    line-height:
        1.7;

}



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

.tzir-gallery-hero__actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        23px;

    margin-top:
        clamp(
            23px,
            3vh,
            32px
        );

}


.tzir-gallery-hero__explore {

    min-width:
        205px;

}


.tzir-gallery-hero__explore svg {

    width:
        18px;

    height:
        18px;

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-gallery-hero__explore:hover svg {

    transform:
        translateY(3px);

}



/* =========================================================
   10. ESTIMATE TEXT LINK
   ========================================================= */

.tzir-gallery-hero__estimate-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.3
        );

    color:
        var(--tzir-bark-900);

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.05em;

    transition:
        color
        300ms
        ease,

        border-color
        300ms
        ease;

}


.tzir-gallery-hero__estimate-link span {

    color:
        var(--tzir-moss-700);

    transition:
        transform
        400ms
        var(--tzir-ease-standard);

}


.tzir-gallery-hero__estimate-link:hover {

    border-color:
        var(--tzir-moss-700);

    color:
        var(--tzir-moss-700);

}


.tzir-gallery-hero__estimate-link:hover span {

    transform:
        translate(
            3px,
            -3px
        );

}



/* =========================================================
   11. META
   ========================================================= */

.tzir-gallery-hero__meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;

    margin-top:
        clamp(
            22px,
            3vh,
            31px
        );

    padding-top:
        18px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-gallery-hero__meta-item {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.tzir-gallery-hero__meta-item svg {

    width:
        21px;

    height:
        21px;

    flex:
        0 0 auto;

    color:
        var(--tzir-moss-700);

}


.tzir-gallery-hero__meta-item > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.tzir-gallery-hero__meta-item span {

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

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


.tzir-gallery-hero__meta-item strong {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1rem;

    font-weight:
        600;

    line-height:
        1.1;

}


.tzir-gallery-hero__meta-divider {

    display:
        block;

    width:
        1px;

    height:
        34px;

    background:
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-gallery-hero__meta-copy {

    max-width:
        225px;

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

    font-size:
        0.68rem;

    font-weight:
        600;

    line-height:
        1.5;

}



/* =========================================================
   12. VISUAL
   ========================================================= */

.tzir-gallery-hero__visual {

    position:
        relative;

    align-self:
        stretch;

    min-width:
        0;

    --tzir-gallery-main-x:
        0px;

    --tzir-gallery-main-y:
        0px;

    --tzir-gallery-secondary-x:
        0px;

    --tzir-gallery-secondary-y:
        0px;

    --tzir-gallery-detail-x:
        0px;

    --tzir-gallery-detail-y:
        0px;

}



/* =========================================================
   13. VISUAL BACKDROP
   ========================================================= */

.tzir-gallery-hero__visual-backdrop {

    position:
        absolute;

    top:
        16%;

    right:
        6%;

    width:
        69%;

    height:
        61%;

    z-index:
        0;

    background:
        linear-gradient(
            145deg,
            rgba(
                95,
                119,
                40,
                0.14
            ),
            rgba(
                39,
                62,
                10,
                0.035
            )
        );

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.08
        );

    transform:
        rotate(-2deg);

}



/* =========================================================
   14. PHOTOS
   ========================================================= */

.tzir-gallery-hero__photo {

    position:
        absolute;

    margin:
        0;

}


.tzir-gallery-hero__photo-paper {

    width:
        100%;

    height:
        100%;

    padding:
        8px;

    overflow:
        hidden;

    background:
        var(--tzir-white);

    box-shadow:
        var(--tzir-shadow-photo);

}


.tzir-gallery-hero__photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.02);

    transition:
        transform
        1.1s
        var(--tzir-ease-standard);

}


.tzir-gallery-hero__photo:hover img {

    transform:
        scale(1.055);

}



/* =========================================================
   15. MAIN PHOTO
   ========================================================= */

.tzir-gallery-hero__photo--main {

    top:
        7%;

    left:
        12%;

    z-index:
        3;

    width:
        61%;

    height:
        69%;

    transform:
        translate3d(
            var(--tzir-gallery-main-x),
            var(--tzir-gallery-main-y),
            0
        )
        rotate(1.4deg);

}



/* =========================================================
   16. SECONDARY PHOTO
   ========================================================= */

.tzir-gallery-hero__photo--secondary {

    right:
        0;

    bottom:
        8%;

    z-index:
        6;

    width:
        48%;

    height:
        35%;

    transform:
        translate3d(
            var(--tzir-gallery-secondary-x),
            var(--tzir-gallery-secondary-y),
            0
        )
        rotate(-2.25deg);

}



/* =========================================================
   17. DETAIL PHOTO
   ========================================================= */

.tzir-gallery-hero__photo--detail {

    left:
        0;

    bottom:
        10%;

    z-index:
        5;

    width:
        31%;

    height:
        39%;

    transform:
        translate3d(
            var(--tzir-gallery-detail-x),
            var(--tzir-gallery-detail-y),
            0
        )
        rotate(-4deg);

}



/* =========================================================
   18. SCRIPT NOTE
   ========================================================= */

.tzir-gallery-hero__script {

    position:
        absolute;

    top:
        14%;

    right:
        -1%;

    z-index:
        8;

    display:
        flex;

    flex-direction:
        column;

    color:
        rgba(
            50,
            33,
            33,
            0.65
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        clamp(
            1.3rem,
            1.6vw,
            1.85rem
        );

    font-weight:
        500;

    line-height:
        0.95;

    transform:
        rotate(-4deg);

}


.tzir-gallery-hero__script span + span {

    margin-left:
        18px;

}


.tzir-gallery-hero__script i {

    width:
        77px;

    height:
        2px;

    margin:
        9px
        0
        0
        42px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-5deg);

}



/* =========================================================
   19. STAMP
   ========================================================= */

.tzir-gallery-hero__stamp {

    position:
        absolute;

    right:
        1%;

    top:
        45%;

    z-index:
        7;

    width:
        112px;

    min-height:
        106px;

    padding:
        14px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            39,
            62,
            10,
            0.17
        );

    background:
        rgba(
            248,
            246,
            240,
            0.94
        );

    box-shadow:
        0 15px 35px
        rgba(
            23,
            37,
            7,
            0.1
        );

    transform:
        rotate(3deg);

}


.tzir-gallery-hero__stamp small {

    color:
        var(--tzir-moss-700);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.tzir-gallery-hero__stamp strong {

    margin-top:
        3px;

    color:
        var(--tzir-bark-900);

    font-family:
        var(--tzir-font-script);

    font-size:
        1.55rem;

    font-weight:
        600;

    line-height:
        1;

}


.tzir-gallery-hero__stamp > span {

    display:
        block;

    width:
        100%;

    height:
        1px;

    margin:
        10px
        0
        8px;

    background:
        rgba(
            50,
            33,
            33,
            0.15
        );

}


.tzir-gallery-hero__stamp em {

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

    font-size:
        0.53rem;

    font-style:
        normal;

    font-weight:
        700;

    letter-spacing:
        0.14em;

}



/* =========================================================
   20. BOTANICAL
   ========================================================= */

.tzir-gallery-hero__botanical {

    position:
        absolute;

    z-index:
        -1;

    pointer-events:
        none;

    color:
        var(--tzir-moss-700);

}


.tzir-gallery-hero__botanical--left {

    left:
        -47px;

    bottom:
        4%;

    width:
        130px;

    height:
        190px;

    opacity:
        0.085;

    transform:
        rotate(-12deg);

}



/* =========================================================
   21. CONTINUE
   ========================================================= */

.tzir-gallery-hero__continue {

    position:
        absolute;

    left:
        50%;

    bottom:
        15px;

    z-index:
        9;

    display:
        grid;

    grid-template-columns:
        auto
        minmax(35px, 72px)
        18px;

    align-items:
        center;

    gap:
        12px;

    color:
        rgba(
            50,
            33,
            33,
            0.52
        );

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

    transform:
        translateX(-50%);

}


.tzir-gallery-hero__continue i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            50,
            33,
            33,
            0.23
        );

}


.tzir-gallery-hero__continue svg {

    width:
        16px;

    height:
        16px;

    color:
        var(--tzir-moss-700);

    transition:
        transform
        400ms
        var(--tzir-ease-standard);

}


.tzir-gallery-hero__continue:hover svg {

    transform:
        translateY(4px);

}



/* =========================================================
   22. ACCESSIBILITY
   ========================================================= */

.tzir-gallery-hero a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}



/* =========================================================
   23. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-gallery-hero * {

    transition:
        none !important;

}



/* =========================================================
   24. COMPUTER
   >= 1200px
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-gallery-hero {

        height:
            calc(
                88svh -
                var(--tzir-header-height)
            );

    }


    .tzir-gallery-hero__container {

        padding-top:
            1vh;

    }


    .tzir-gallery-hero__photo--main {

        max-height:
            680px;

    }

}



/* =========================================================
   25. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-gallery-hero {

        height:
            calc(
                90svh -
                var(--tzir-header-height)
            );

    }


    .tzir-gallery-hero__container {

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

        gap:
            35px;

        padding-bottom:
            53px;

    }


    .tzir-gallery-hero__title {

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

    }


    .tzir-gallery-hero__description {

        max-width:
            500px;

        font-size:
            0.96rem;

        line-height:
            1.62;

    }


    .tzir-gallery-hero__actions {

        gap:
            16px;

    }


    .tzir-gallery-hero__explore {

        min-width:
            185px;

        min-height:
            52px;

    }


    .tzir-gallery-hero__meta-copy {

        display:
            none;

    }


    .tzir-gallery-hero__meta-divider {

        display:
            none;

    }


    .tzir-gallery-hero__photo--main {

        top:
            9%;

        left:
            9%;

        width:
            66%;

        height:
            65%;

    }


    .tzir-gallery-hero__photo--secondary {

        right:
            -2%;

        bottom:
            8%;

        width:
            51%;

        height:
            32%;

    }


    .tzir-gallery-hero__photo--detail {

        left:
            -2%;

        bottom:
            11%;

        width:
            31%;

        height:
            36%;

    }


    .tzir-gallery-hero__script {

        right:
            -2%;

        font-size:
            1.15rem;

    }


    .tzir-gallery-hero__stamp {

        right:
            -1%;

        width:
            96px;

        min-height:
            91px;

    }

}



/* =========================================================
   26. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-gallery-hero {

        height:
            calc(
                94svh -
                var(--tzir-header-height)
            );

    }


    .tzir-gallery-hero__container {

        width:
            calc(
                100% -
                36px
            );

        grid-template-columns:
            1fr;

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

        gap:
            11px;

        padding:
            23px
            0
            42px;

    }


    .tzir-gallery-hero__content {

        align-self:
            start;

    }


    .tzir-gallery-hero__eyebrow {

        margin-bottom:
            9px;

        gap:
            7px;

        font-size:
            0.57rem;

        letter-spacing:
            0.14em;

    }


    .tzir-gallery-hero__eyebrow i {

        width:
            18px;

    }


    .tzir-gallery-hero__title {

        max-width:
            650px;

        font-size:
            clamp(
                3rem,
                9vw,
                4.2rem
            );

        line-height:
            0.88;

    }


    .tzir-gallery-hero__description {

        max-width:
            590px;

        margin-top:
            11px;

        font-size:
            0.9rem;

        line-height:
            1.48;

    }


    .tzir-gallery-hero__actions {

        margin-top:
            13px;

        gap:
            15px;

    }


    .tzir-gallery-hero__explore {

        min-width:
            180px;

        min-height:
            47px;

        font-size:
            0.79rem;

    }


    .tzir-gallery-hero__estimate-link {

        font-size:
            0.69rem;

    }


    .tzir-gallery-hero__meta {

        margin-top:
            10px;

        padding-top:
            9px;

    }


    .tzir-gallery-hero__meta-copy,
    .tzir-gallery-hero__meta-divider {

        display:
            none;

    }


    .tzir-gallery-hero__meta-item strong {

        font-size:
            0.87rem;

    }


    .tzir-gallery-hero__visual {

        min-height:
            0;

    }


    .tzir-gallery-hero__photo--main {

        top:
            1%;

        left:
            19%;

        width:
            55%;

        height:
            91%;

    }


    .tzir-gallery-hero__photo--secondary {

        right:
            3%;

        bottom:
            1%;

        width:
            41%;

        height:
            52%;

    }


    .tzir-gallery-hero__photo--detail {

        left:
            4%;

        bottom:
            3%;

        width:
            28%;

        height:
            54%;

    }


    .tzir-gallery-hero__photo-paper {

        padding:
            5px;

    }


    .tzir-gallery-hero__script {

        top:
            4%;

        right:
            1%;

        font-size:
            0.95rem;

    }


    .tzir-gallery-hero__script i {

        width:
            48px;

        margin-top:
            5px;

    }


    .tzir-gallery-hero__stamp {

        top:
            7%;

        left:
            4%;

        right:
            auto;

        width:
            89px;

        min-height:
            80px;

        padding:
            10px;

    }


    .tzir-gallery-hero__stamp strong {

        font-size:
            1.16rem;

    }


    .tzir-gallery-hero__continue {

        bottom:
            9px;

        grid-template-columns:
            auto
            39px
            15px;

        gap:
            7px;

        font-size:
            0.48rem;

    }

}



/* =========================================================
   27. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    .tzir-gallery-hero {

        height:
            calc(
                96svh -
                var(--tzir-header-height)
            );

    }


    .tzir-gallery-hero__container {

        width:
            calc(
                100% -
                28px
            );

        grid-template-columns:
            1fr;

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

        gap:
            7px;

        padding:
            15px
            0
            34px;

    }


    .tzir-gallery-hero__eyebrow {

        margin-bottom:
            6px;

        gap:
            5px;

        font-size:
            0.48rem;

        letter-spacing:
            0.11em;

    }


    .tzir-gallery-hero__eyebrow i {

        width:
            13px;

    }


    .tzir-gallery-hero__title {

        font-size:
            clamp(
                2.5rem,
                11.7vw,
                3.3rem
            );

        line-height:
            0.89;

    }


    .tzir-gallery-hero__description {

        margin-top:
            7px;

        font-size:
            0.79rem;

        line-height:
            1.4;

    }


    .tzir-gallery-hero__actions {

        display:
            grid;

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

        gap:
            10px;

        margin-top:
            8px;

    }


    .tzir-gallery-hero__explore {

        min-width:
            0;

        width:
            100%;

        min-height:
            42px;

        padding:
            8px
            10px;

        font-size:
            0.69rem;

    }


    .tzir-gallery-hero__explore svg {

        width:
            14px;

        height:
            14px;

    }


    .tzir-gallery-hero__estimate-link {

        align-self:
            center;

        font-size:
            0.61rem;

    }


    .tzir-gallery-hero__meta {

        margin-top:
            6px;

        padding-top:
            6px;

    }


    .tzir-gallery-hero__meta-item svg {

        width:
            15px;

        height:
            15px;

    }


    .tzir-gallery-hero__meta-item span {

        display:
            none;

    }


    .tzir-gallery-hero__meta-item strong {

        font-size:
            0.73rem;

    }


    .tzir-gallery-hero__meta-divider,
    .tzir-gallery-hero__meta-copy {

        display:
            none;

    }


    .tzir-gallery-hero__photo--main {

        top:
            0;

        left:
            17%;

        width:
            57%;

        height:
            93%;

    }


    .tzir-gallery-hero__photo--secondary {

        right:
            0;

        bottom:
            0;

        width:
            42%;

        height:
            51%;

    }


    .tzir-gallery-hero__photo--detail {

        left:
            1%;

        bottom:
            2%;

        width:
            29%;

        height:
            54%;

    }


    .tzir-gallery-hero__photo-paper {

        padding:
            4px;

    }


    .tzir-gallery-hero__visual-backdrop {

        top:
            12%;

        right:
            8%;

        width:
            68%;

        height:
            68%;

    }


    .tzir-gallery-hero__script {

        top:
            3%;

        right:
            0;

        font-size:
            0.7rem;

    }


    .tzir-gallery-hero__script span + span {

        margin-left:
            7px;

    }


    .tzir-gallery-hero__script i {

        width:
            34px;

        height:
            1px;

        margin:
            4px
            0
            0
            17px;

    }


    .tzir-gallery-hero__stamp {

        top:
            6%;

        left:
            0;

        width:
            73px;

        min-height:
            65px;

        padding:
            7px;

    }


    .tzir-gallery-hero__stamp small {

        font-size:
            0.36rem;

    }


    .tzir-gallery-hero__stamp strong {

        font-size:
            0.94rem;

    }


    .tzir-gallery-hero__stamp > span {

        margin:
            5px
            0;

    }


    .tzir-gallery-hero__stamp em {

        font-size:
            0.39rem;

    }


    .tzir-gallery-hero__continue {

        bottom:
            6px;

        grid-template-columns:
            auto
            24px
            13px;

        gap:
            5px;

        font-size:
            0.39rem;

        letter-spacing:
            0.08em;

    }


    .tzir-gallery-hero__continue svg {

        width:
            13px;

        height:
            13px;

    }


    .tzir-gallery-hero__botanical--left {

        left:
            -42px;

        width:
            83px;

        height:
            125px;

    }

}











































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   03. SERVICE NAVIGATION
   ========================================================= */


/* =========================================================
   01. VARIABLES

   This value is also used as the exact layout reservation
   when the navigation becomes fixed.
   ========================================================= */

:root {

    --tzir-gallery-nav-height:
        78px;

    --tzir-gallery-nav-z:
        1850;

}



/* =========================================================
   02. SECTION / RESERVED SLOT
   ========================================================= */

.tzir-gallery-navigation {

    position:
        relative;

    z-index:
        20;

    width:
        100%;

    height:
        var(--tzir-gallery-nav-height);

    min-height:
        var(--tzir-gallery-nav-height);

    background:
        #F5F2EB;

}



/* =========================================================
   03. NAVIGATION SHELL
   ========================================================= */

.tzir-gallery-navigation__shell {

    position:
        relative;

    top:
        auto;

    left:
        auto;

    width:
        100%;

    height:
        var(--tzir-gallery-nav-height);

    z-index:
        var(--tzir-gallery-nav-z);

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.11
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

    background:
        rgba(
            246,
            245,
            243,
            0.94
        );

    transition:
        background-color
        320ms
        ease,

        box-shadow
        420ms
        var(--tzir-ease-standard),

        border-color
        320ms
        ease;

}



/* =========================================================
   04. FIXED STATE

   Same architecture idea as the main Header:
   fixed instead of sticky.
   ========================================================= */

.tzir-gallery-navigation__shell.is-fixed {

    position:
        fixed;

    top:
        var(--tzir-header-height);

    left:
        0;

    width:
        100%;

    height:
        var(--tzir-gallery-nav-height);

    background:
        rgba(
            246,
            245,
            243,
            0.965
        );

    border-top-color:
        rgba(
            50,
            33,
            33,
            0.07
        );

    border-bottom-color:
        rgba(
            39,
            62,
            10,
            0.15
        );

    box-shadow:
        0 12px 30px
        rgba(
            23,
            37,
            7,
            0.08
        );

    backdrop-filter:
        blur(16px);

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

}



/*
    Thin green line when the navigation follows the Header.
*/

.tzir-gallery-navigation__shell.is-fixed::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -1px;

    width:
        min(
            210px,
            28vw
        );

    height:
        1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                95,
                119,
                40,
                0.68
            ),
            transparent
        );

    transform:
        translateX(-50%);

}



/* =========================================================
   05. INNER
   ========================================================= */

.tzir-gallery-navigation__inner {

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    height:
        100%;

    margin-inline:
        auto;

    display:
        grid;

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

    align-items:
        center;

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

}



/* =========================================================
   06. IDENTITY
   ========================================================= */

.tzir-gallery-navigation__identity {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        105px;

    padding-right:
        22px;

    border-right:
        1px solid
        rgba(
            50,
            33,
            33,
            0.12
        );

}


.tzir-gallery-navigation__identity span {

    margin-bottom:
        1px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.5rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-gallery-navigation__identity strong {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.25rem;

    font-weight:
        600;

    line-height:
        1;

}



/* =========================================================
   07. TRACK WRAPPER
   ========================================================= */

.tzir-gallery-navigation__track-wrap {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

}



/*
    Soft edge fades communicate horizontal scrolling when
    all items do not fit.
*/

.tzir-gallery-navigation__track-wrap::before,
.tzir-gallery-navigation__track-wrap::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    z-index:
        4;

    width:
        22px;

    height:
        100%;

    pointer-events:
        none;

}


.tzir-gallery-navigation__track-wrap::before {

    left:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(
                246,
                245,
                243,
                0.97
            ),
            transparent
        );

}


.tzir-gallery-navigation__track-wrap::after {

    right:
        0;

    background:
        linear-gradient(
            270deg,
            rgba(
                246,
                245,
                243,
                0.97
            ),
            transparent
        );

}



/* =========================================================
   08. TRACK
   ========================================================= */

.tzir-gallery-navigation__track {

    display:
        flex;

    align-items:
        stretch;

    gap:
        clamp(
            18px,
            2.2vw,
            31px
        );

    width:
        100%;

    height:
        var(--tzir-gallery-nav-height);

    overflow-x:
        auto;

    overflow-y:
        hidden;

    padding:
        0
        16px;

    overscroll-behavior-inline:
        contain;

    scroll-snap-type:
        x proximity;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;

}


.tzir-gallery-navigation__track::-webkit-scrollbar {

    display:
        none;

}



/* =========================================================
   09. LINKS
   ========================================================= */

.tzir-gallery-navigation__link {

    position:
        relative;

    flex:
        0
        0
        auto;

    min-height:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        0
        1px;

    color:
        rgba(
            50,
            33,
            33,
            0.56
        );

    white-space:
        nowrap;

    scroll-snap-align:
        center;

    transition:
        color
        300ms
        ease;

}



/*
    Active / hover underline.
*/

.tzir-gallery-navigation__link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        2px;

    background:
        var(--tzir-leaf-600);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        440ms
        var(--tzir-ease-standard);

}



/* =========================================================
   10. NUMBERS
   ========================================================= */

.tzir-gallery-navigation__number {

    color:
        rgba(
            62,
            83,
            28,
            0.43
        );

    font-size:
        0.49rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.09em;

    transition:
        color
        300ms
        ease;

}



/* =========================================================
   11. NAMES
   ========================================================= */

.tzir-gallery-navigation__name {

    font-size:
        0.72rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.015em;

}



/* =========================================================
   12. LINK HOVER
   ========================================================= */

.tzir-gallery-navigation__link:hover {

    color:
        var(--tzir-forest-800);

}


.tzir-gallery-navigation__link:hover
.tzir-gallery-navigation__number {

    color:
        var(--tzir-leaf-600);

}


.tzir-gallery-navigation__link:hover::after {

    transform:
        scaleX(1);

    transform-origin:
        left center;

}



/* =========================================================
   13. ACTIVE SERVICE
   ========================================================= */

.tzir-gallery-navigation__link.is-active {

    color:
        var(--tzir-forest-800);

}


.tzir-gallery-navigation__link.is-active
.tzir-gallery-navigation__number {

    color:
        var(--tzir-leaf-600);

}


.tzir-gallery-navigation__link.is-active::after {

    transform:
        scaleX(1);

    transform-origin:
        left center;

}



/* =========================================================
   14. MARK
   ========================================================= */

.tzir-gallery-navigation__mark {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        67px;

    min-height:
        32px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.16
        );

    color:
        var(--tzir-moss-700);

    font-size:
        0.5rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.13em;

}



/* =========================================================
   15. FOCUS
   ========================================================= */

.tzir-gallery-navigation__link:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}



/* =========================================================
   16. SERVICE SECTION ANCHOR OFFSET

   These are the exact anchors already linked from Home.
   ========================================================= */

#gallery-lawn-care,
#gallery-planting,
#gallery-tree-services,
#gallery-concrete,
#gallery-fence,
#gallery-deck-painting,
#gallery-power-washing,
#gallery-snow-plowing,
#gallery-yard-cleanup {

    scroll-margin-top:
        calc(
            var(--tzir-header-height) +
            var(--tzir-gallery-nav-height) +
            18px
        );

}



/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-gallery-navigation__shell,
html.tzir-reduced-motion
.tzir-gallery-navigation__link,
html.tzir-reduced-motion
.tzir-gallery-navigation__link::after {

    transition:
        none !important;

}



/* =========================================================
   18. COMPUTER
   >= 1200px
   ========================================================= */

@media (min-width: 1200px) {

    :root {

        --tzir-gallery-nav-height:
            78px;

    }


    .tzir-gallery-navigation__track {

        gap:
            clamp(
                18px,
                1.6vw,
                28px
            );

    }

}



/* =========================================================
   19. TABLET
   769px — 1199px
   ========================================================= */

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

    :root {

        --tzir-gallery-nav-height:
            74px;

    }


    .tzir-gallery-navigation__inner {

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

        gap:
            22px;

    }


    .tzir-gallery-navigation__identity {

        min-width:
            94px;

        padding-right:
            18px;

    }


    .tzir-gallery-navigation__identity strong {

        font-size:
            1.12rem;

    }


    .tzir-gallery-navigation__mark {

        display:
            none;

    }


    .tzir-gallery-navigation__track {

        gap:
            26px;

    }


    .tzir-gallery-navigation__name {

        font-size:
            0.7rem;

    }

}



/* =========================================================
   20. MOBILE
   481px — 768px
   ========================================================= */

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

    :root {

        --tzir-gallery-nav-height:
            70px;

    }


    .tzir-gallery-navigation__inner {

        width:
            100%;

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .tzir-gallery-navigation__identity,
    .tzir-gallery-navigation__mark {

        display:
            none;

    }


    .tzir-gallery-navigation__track-wrap {

        width:
            100%;

    }


    .tzir-gallery-navigation__track {

        height:
            var(--tzir-gallery-nav-height);

        gap:
            30px;

        padding:
            0
            28px;

    }


    .tzir-gallery-navigation__number {

        font-size:
            0.48rem;

    }


    .tzir-gallery-navigation__name {

        font-size:
            0.72rem;

    }

}



/* =========================================================
   21. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    :root {

        --tzir-gallery-nav-height:
            66px;

    }


    .tzir-gallery-navigation__inner {

        width:
            100%;

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .tzir-gallery-navigation__identity,
    .tzir-gallery-navigation__mark {

        display:
            none;

    }


    .tzir-gallery-navigation__track {

        height:
            var(--tzir-gallery-nav-height);

        gap:
            25px;

        padding:
            0
            20px;

    }


    .tzir-gallery-navigation__number {

        font-size:
            0.45rem;

    }


    .tzir-gallery-navigation__name {

        font-size:
            0.68rem;

    }


    .tzir-gallery-navigation__track-wrap::before,
    .tzir-gallery-navigation__track-wrap::after {

        width:
            15px;

    }

}















































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   04. GALLERY INTRO
   ========================================================= */


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

.tzir-gallery-intro {

    position:
        relative;

    padding:
        clamp(100px, 8vw, 145px)
        0
        clamp(90px, 7vw, 125px);

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            145deg,
            #F7F5EF 0%,
            var(--tzir-ivory-50) 55%,
            #EFECE4 100%
        );

}



/* =========================================================
   02. PAPER GRAIN
   ========================================================= */

.tzir-gallery-intro::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -4;

    pointer-events:
        none;

    opacity:
        0.025;

    mix-blend-mode:
        multiply;

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

}



/* =========================================================
   03. TOPOGRAPHY
   ========================================================= */

.tzir-gallery-intro__topography {

    position:
        absolute;

    top:
        -120px;

    left:
        -190px;

    z-index:
        -3;

    width:
        760px;

    height:
        620px;

    pointer-events:
        none;

    opacity:
        0.44;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.08' d='M-70 109C92 25 206 171 357 109S616 29 830 144'/%3E%3Cpath opacity='.055' d='M-68 151C102 67 224 213 378 150S639 80 833 187'/%3E%3Cpath opacity='.065' d='M-72 482C108 383 244 538 410 471S675 405 832 516'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

}



/* =========================================================
   04. BOTANICAL
   ========================================================= */

.tzir-gallery-intro__botanical {

    position:
        absolute;

    right:
        -58px;

    bottom:
        7%;

    z-index:
        -2;

    width:
        150px;

    height:
        205px;

    pointer-events:
        none;

    color:
        var(--tzir-moss-700);

    opacity:
        0.07;

    transform:
        rotate(13deg);

}


.tzir-gallery-intro__botanical svg {

    width:
        100%;

    height:
        100%;

}



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

.tzir-gallery-intro__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   06. LAYOUT
   ========================================================= */

.tzir-gallery-intro__layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.66fr);

    align-items:
        end;

    gap:
        clamp(
            60px,
            9vw,
            135px
        );

}



/* =========================================================
   07. HEADING
   ========================================================= */

.tzir-gallery-intro__heading {

    max-width:
        800px;

}


.tzir-gallery-intro__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.7rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.19em;

    text-transform:
        uppercase;

}


.tzir-gallery-intro__eyebrow::before {

    content:
        "";

    width:
        31px;

    height:
        1px;

    background:
        var(--tzir-leaf-600);

}



/* =========================================================
   08. TITLE
   ========================================================= */

.tzir-gallery-intro__title {

    max-width:
        780px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-gallery-intro__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



/* =========================================================
   09. SCRIPT
   ========================================================= */

.tzir-gallery-intro__script {

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    margin-top:
        24px;

    color:
        rgba(
            50,
            33,
            33,
            0.52
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.3rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-gallery-intro__script i {

    width:
        72px;

    height:
        2px;

    margin:
        8px
        0
        0
        38px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-4deg);

}



/* =========================================================
   10. COPY
   ========================================================= */

.tzir-gallery-intro__copy {

    max-width:
        470px;

    padding-bottom:
        5px;

}


.tzir-gallery-intro__copy p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-gallery-intro__copy p + p {

    margin-top:
        14px;

}



/* =========================================================
   11. START LINK
   ========================================================= */

.tzir-gallery-intro__start {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        24px;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.28
        );

    color:
        var(--tzir-forest-800);

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    transition:
        color
        300ms
        ease,

        border-color
        300ms
        ease;

}


.tzir-gallery-intro__start span {

    color:
        var(--tzir-leaf-600);

    transition:
        transform
        400ms
        var(--tzir-ease-standard);

}


.tzir-gallery-intro__start:hover {

    border-color:
        var(--tzir-leaf-600);

    color:
        var(--tzir-moss-700);

}


.tzir-gallery-intro__start:hover span {

    transform:
        translateY(4px);

}



/* =========================================================
   12. FOLIO
   ========================================================= */

.tzir-gallery-intro__folio {

    position:
        relative;

    margin-top:
        clamp(
            58px,
            6vw,
            86px
        );

    padding:
        27px
        31px;

    display:
        grid;

    grid-template-columns:
        minmax(145px, 0.55fr)
        minmax(0, 2fr)
        auto;

    align-items:
        center;

    gap:
        35px;

    border:
        1px solid
        rgba(
            50,
            33,
            33,
            0.12
        );

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

    box-shadow:
        0 17px 42px
        rgba(
            23,
            37,
            7,
            0.055
        );

    backdrop-filter:
        blur(8px);

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

}



/*
    Offset paper layer.
*/

.tzir-gallery-intro__folio::before {

    content:
        "";

    position:
        absolute;

    inset:
        7px
        -7px
        -7px
        7px;

    z-index:
        -1;

    pointer-events:
        none;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.08
        );

    background:
        rgba(
            237,
            233,
            222,
            0.72
        );

}



/* =========================================================
   13. FOLIO NOTE
   ========================================================= */

.tzir-gallery-intro__folio-note {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    padding-right:
        28px;

    border-right:
        1px solid
        rgba(
            50,
            33,
            33,
            0.12
        );

}


.tzir-gallery-intro__folio-note span {

    color:
        var(--tzir-moss-700);

    font-size:
        0.53rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.tzir-gallery-intro__folio-note strong {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.34rem;

    font-weight:
        600;

    line-height:
        1;

}



/* =========================================================
   14. FOLIO SERVICES
   ========================================================= */

.tzir-gallery-intro__folio-services {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    column-gap:
        22px;

    row-gap:
        10px;

    min-width:
        0;

}


.tzir-gallery-intro__folio-services a {

    position:
        relative;

    color:
        rgba(
            50,
            33,
            33,
            0.62
        );

    font-size:
        0.69rem;

    font-weight:
        700;

    line-height:
        1.4;

    white-space:
        nowrap;

    transition:
        color
        300ms
        ease;

}


.tzir-gallery-intro__folio-services a::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -3px;

    width:
        100%;

    height:
        1px;

    background:
        var(--tzir-leaf-600);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-gallery-intro__folio-services a:hover {

    color:
        var(--tzir-moss-700);

}


.tzir-gallery-intro__folio-services a:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left center;

}



/* =========================================================
   15. FOLIO MARK
   ========================================================= */

.tzir-gallery-intro__folio-mark {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    min-width:
        78px;

    justify-content:
        flex-end;

    color:
        var(--tzir-moss-700);

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}


.tzir-gallery-intro__folio-mark i {

    width:
        18px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.3
        );

}



/* =========================================================
   16. BOTTOM TRANSITION
   ========================================================= */

.tzir-gallery-intro__transition {

    position:
        relative;

    margin-top:
        clamp(
            55px,
            6vw,
            84px
        );

    display:
        grid;

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

    align-items:
        center;

    gap:
        18px;

}


.tzir-gallery-intro__transition > span {

    color:
        rgba(
            50,
            33,
            33,
            0.46
        );

    font-size:
        0.56rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.tzir-gallery-intro__transition svg {

    width:
        100%;

    height:
        70px;

    overflow:
        visible;

}


.tzir-gallery-intro__transition-base,
.tzir-gallery-intro__transition-progress {

    fill:
        none;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.tzir-gallery-intro__transition-base {

    stroke:
        rgba(
            50,
            33,
            33,
            0.1
        );

    stroke-width:
        1.4;

}


.tzir-gallery-intro__transition-progress {

    stroke:
        var(--tzir-leaf-600);

    stroke-width:
        1.8;

}



/* =========================================================
   17. ACCESSIBILITY
   ========================================================= */

.tzir-gallery-intro a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}



/* =========================================================
   18. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-gallery-intro__start,
html.tzir-reduced-motion
.tzir-gallery-intro__folio-services a,
html.tzir-reduced-motion
.tzir-gallery-intro__folio-services a::before {

    transition:
        none !important;

}



/* =========================================================
   19. COMPUTER
   >= 1200px
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-gallery-intro__layout {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(330px, 0.62fr);

    }


    .tzir-gallery-intro__folio {

        min-height:
            112px;

    }

}



/* =========================================================
   20. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-gallery-intro {

        padding:
            95px
            0
            88px;

    }


    .tzir-gallery-intro__layout {

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

        gap:
            55px;

    }


    .tzir-gallery-intro__title {

        font-size:
            clamp(
                3rem,
                5.7vw,
                4.5rem
            );

    }


    .tzir-gallery-intro__folio {

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

        gap:
            28px;

    }


    .tzir-gallery-intro__folio-mark {

        display:
            none;

    }


    .tzir-gallery-intro__folio-services {

        column-gap:
            18px;

    }

}



/* =========================================================
   21. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-gallery-intro {

        padding:
            82px
            0
            74px;

    }


    .tzir-gallery-intro__layout {

        grid-template-columns:
            1fr;

        gap:
            24px;

    }


    .tzir-gallery-intro__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-gallery-intro__copy {

        max-width:
            610px;

    }


    .tzir-gallery-intro__folio {

        grid-template-columns:
            1fr;

        gap:
            24px;

        padding:
            26px;

    }


    .tzir-gallery-intro__folio-note {

        padding:
            0
            0
            18px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(
                50,
                33,
                33,
                0.12
            );

    }


    .tzir-gallery-intro__folio-mark {

        display:
            none;

    }


    .tzir-gallery-intro__folio-services {

        column-gap:
            20px;

        row-gap:
            11px;

    }


    .tzir-gallery-intro__transition {

        margin-top:
            52px;

    }

}



/* =========================================================
   22. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    .tzir-gallery-intro {

        padding:
            70px
            0
            64px;

    }


    .tzir-gallery-intro__layout {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .tzir-gallery-intro__eyebrow {

        margin-bottom:
            11px;

        font-size:
            0.62rem;

    }


    .tzir-gallery-intro__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-gallery-intro__script {

        margin-top:
            18px;

        font-size:
            1.08rem;

    }


    .tzir-gallery-intro__copy p {

        font-size:
            0.9rem;

        line-height:
            1.62;

    }


    .tzir-gallery-intro__start {

        margin-top:
            20px;

        font-size:
            0.63rem;

    }


    .tzir-gallery-intro__folio {

        margin-top:
            44px;

        padding:
            22px
            19px;

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .tzir-gallery-intro__folio-note {

        padding:
            0
            0
            16px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(
                50,
                33,
                33,
                0.12
            );

    }


    .tzir-gallery-intro__folio-note strong {

        font-size:
            1.2rem;

    }


    .tzir-gallery-intro__folio-services {

        column-gap:
            14px;

        row-gap:
            10px;

    }


    .tzir-gallery-intro__folio-services a {

        font-size:
            0.64rem;

    }


    .tzir-gallery-intro__folio-mark {

        display:
            none;

    }


    .tzir-gallery-intro__transition {

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

        gap:
            10px;

        margin-top:
            42px;

    }


    .tzir-gallery-intro__transition > span:last-child {

        display:
            none;

    }


    .tzir-gallery-intro__transition svg {

        height:
            50px;

    }


    .tzir-gallery-intro__botanical {

        right:
            -52px;

        width:
            92px;

        height:
            132px;

    }

}














































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   05. LAWN CARE & MAINTENANCE
   ========================================================= */


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

.tzir-lawn-gallery {

    position:
        relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(100px, 8vw, 140px);

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        #F1EEE6;

}



/* Soft paper grain */

.tzir-lawn-gallery::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -4;

    pointer-events:
        none;

    opacity:
        0.026;

    mix-blend-mode:
        multiply;

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

}



/* =========================================================
   02. TOPOGRAPHY
   ========================================================= */

.tzir-lawn-gallery__topography {

    position:
        absolute;

    top:
        -100px;

    right:
        -190px;

    z-index:
        -3;

    width:
        780px;

    height:
        640px;

    pointer-events:
        none;

    opacity:
        0.44;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='780' height='640' viewBox='0 0 780 640'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.075' d='M-80 108C91 22 213 174 371 108S640 27 858 145'/%3E%3Cpath opacity='.055' d='M-78 151C104 64 233 218 394 151S665 78 861 191'/%3E%3Cpath opacity='.07' d='M-81 502C113 397 255 553 426 483S702 415 861 530'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

}



/* =========================================================
   03. BOTANICAL
   ========================================================= */

.tzir-lawn-gallery__botanical {

    position:
        absolute;

    left:
        -67px;

    top:
        30%;

    z-index:
        -2;

    width:
        164px;

    height:
        225px;

    pointer-events:
        none;

    color:
        var(--tzir-moss-700);

    opacity:
        0.07;

    transform:
        rotate(-12deg);

}


.tzir-lawn-gallery__botanical svg {

    width:
        100%;

    height:
        100%;

}



/* =========================================================
   04. CONTAINER
   ========================================================= */

.tzir-lawn-gallery__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



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

.tzir-lawn-gallery__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    align-items:
        end;

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

}



/* =========================================================
   06. KICKER
   ========================================================= */

.tzir-lawn-gallery__kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.68rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-lawn-gallery__kicker i {

    display:
        block;

    width:
        31px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.35
        );

}



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

.tzir-lawn-gallery__title {

    max-width:
        800px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-lawn-gallery__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



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

.tzir-lawn-gallery__intro {

    max-width:
        470px;

}


.tzir-lawn-gallery__intro p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-lawn-gallery__script {

    display:
        inline-flex;

    flex-direction:
        column;

    margin-top:
        21px;

    color:
        rgba(
            50,
            33,
            33,
            0.54
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-lawn-gallery__script i {

    width:
        68px;

    height:
        2px;

    margin:
        8px
        0
        0
        38px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-4deg);

}



/* =========================================================
   09. SERVICES STRIP
   ========================================================= */

.tzir-lawn-gallery__services {

    margin-top:
        clamp(
            52px,
            5vw,
            72px
        );

    padding:
        23px
        0;

    display:
        grid;

    grid-template-columns:
        minmax(150px, 0.4fr)
        minmax(0, 1.6fr);

    gap:
        35px;

    align-items:
        start;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-lawn-gallery__services-label {

    color:
        var(--tzir-moss-700);

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.tzir-lawn-gallery__services-list {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px
        25px;

}


.tzir-lawn-gallery__services-list > span {

    position:
        relative;

    color:
        rgba(
            50,
            33,
            33,
            0.72
        );

    font-size:
        0.76rem;

    font-weight:
        700;

}


.tzir-lawn-gallery__services-list > span:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        -14px;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--tzir-leaf-600);

    transform:
        translateY(-50%);

}


.tzir-lawn-gallery__services-list small {

    margin-left:
        3px;

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

    font-size:
        0.62rem;

    font-weight:
        600;

}



/* =========================================================
   10. COLLECTION
   ========================================================= */

.tzir-lawn-gallery__collection {

    position:
        relative;

    display:
        grid;

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

    grid-auto-rows:
        52px;

    grid-auto-flow:
        dense;

    gap:
        clamp(
            15px,
            1.8vw,
            26px
        );

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

}



/* =========================================================
   11. PHOTO
   ========================================================= */

.tzir-lawn-photo {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

}


.tzir-lawn-photo__frame {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    padding:
        7px;

    overflow:
        hidden;

    background:
        var(--tzir-white);

    box-shadow:
        var(--tzir-shadow-photo);

    transition:
        transform
        650ms
        var(--tzir-ease-standard),

        box-shadow
        650ms
        var(--tzir-ease-standard);

}


.tzir-lawn-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.015);

    transition:
        transform
        850ms
        var(--tzir-ease-standard),

        filter
        600ms
        ease;

}


.tzir-lawn-photo:hover
.tzir-lawn-photo__frame {

    transform:
        translateY(-5px);

    box-shadow:
        0 36px 72px
        rgba(
            23,
            37,
            7,
            0.16
        ),
        0 12px 26px
        rgba(
            50,
            33,
            33,
            0.08
        );

}


.tzir-lawn-photo:hover img {

    transform:
        scale(1.055);

}



/* =========================================================
   12. PHOTO NUMBER
   ========================================================= */

.tzir-lawn-photo__number {

    position:
        absolute;

    right:
        15px;

    bottom:
        14px;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        31px;

    height:
        25px;

    padding:
        0
        7px;

    background:
        rgba(
            246,
            245,
            243,
            0.9
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}



/* =========================================================
   13. DESKTOP COLLAGE POSITIONS
   ========================================================= */

.tzir-lawn-photo--01 {

    grid-column:
        1 / span 7;

    grid-row:
        span 10;

}


.tzir-lawn-photo--02 {

    grid-column:
        8 / span 5;

    grid-row:
        span 6;

    margin-top:
        42px;

}


.tzir-lawn-photo--03 {

    grid-column:
        8 / span 5;

    grid-row:
        span 5;

}


.tzir-lawn-photo--04 {

    grid-column:
        1 / span 4;

    grid-row:
        span 7;

}


.tzir-lawn-photo--05 {

    grid-column:
        5 / span 8;

    grid-row:
        span 8;

    margin-top:
        28px;

}


.tzir-lawn-photo--06 {

    grid-column:
        1 / span 5;

    grid-row:
        span 7;

    margin-top:
        32px;

}


.tzir-lawn-photo--07 {

    grid-column:
        6 / span 7;

    grid-row:
        span 6;

}


.tzir-lawn-photo--08 {

    grid-column:
        1 / span 4;

    grid-row:
        span 7;

}


.tzir-lawn-photo--09 {

    grid-column:
        5 / span 8;

    grid-row:
        span 8;

    margin-top:
        35px;

}


.tzir-lawn-photo--10 {

    grid-column:
        1 / span 6;

    grid-row:
        span 7;

    margin-top:
        22px;

}


.tzir-lawn-photo--11 {

    grid-column:
        7 / span 6;

    grid-row:
        span 7;

}


.tzir-lawn-photo--12 {

    grid-column:
        1 / span 8;

    grid-row:
        span 8;

    margin-top:
        30px;

}


.tzir-lawn-photo--13 {

    grid-column:
        9 / span 4;

    grid-row:
        span 7;

}


.tzir-lawn-photo--14 {

    grid-column:
        3 / span 8;

    grid-row:
        span 8;

    margin-top:
        34px;

}



/* =========================================================
   14. SUBTLE ROTATIONS
   ========================================================= */

.tzir-lawn-photo--02
.tzir-lawn-photo__frame,
.tzir-lawn-photo--08
.tzir-lawn-photo__frame,
.tzir-lawn-photo--13
.tzir-lawn-photo__frame {

    transform:
        rotate(0.6deg);

}


.tzir-lawn-photo--04
.tzir-lawn-photo__frame,
.tzir-lawn-photo--10
.tzir-lawn-photo__frame {

    transform:
        rotate(-0.55deg);

}


.tzir-lawn-photo--02:hover
.tzir-lawn-photo__frame,
.tzir-lawn-photo--08:hover
.tzir-lawn-photo__frame,
.tzir-lawn-photo--13:hover
.tzir-lawn-photo__frame {

    transform:
        translateY(-5px)
        rotate(0);

}


.tzir-lawn-photo--04:hover
.tzir-lawn-photo__frame,
.tzir-lawn-photo--10:hover
.tzir-lawn-photo__frame {

    transform:
        translateY(-5px)
        rotate(0);

}



/* =========================================================
   15. NEXT COLLECTION
   ========================================================= */

.tzir-lawn-gallery__next {

    margin-top:
        clamp(
            80px,
            8vw,
            120px
        );

    padding-top:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.15
        );

}


.tzir-lawn-gallery__next > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.tzir-lawn-gallery__next > div > span {

    color:
        var(--tzir-moss-700);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-lawn-gallery__next > div > strong {

    color:
        var(--tzir-bark-900);

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

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

    font-weight:
        600;

    line-height:
        1;

}


.tzir-lawn-gallery__next > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.21
        );

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform
        450ms
        var(--tzir-ease-standard),

        background-color
        320ms
        ease,

        border-color
        320ms
        ease;

}


.tzir-lawn-gallery__next > a svg {

    width:
        18px;

    height:
        18px;

    color:
        var(--tzir-leaf-600);

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-lawn-gallery__next > a:hover {

    border-color:
        var(--tzir-moss-700);

    background:
        var(--tzir-white);

    transform:
        translateY(-3px);

}


.tzir-lawn-gallery__next > a:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   16. ACCESSIBILITY
   ========================================================= */

.tzir-lawn-gallery a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}



/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-lawn-photo__frame,
html.tzir-reduced-motion
.tzir-lawn-photo img,
html.tzir-reduced-motion
.tzir-lawn-gallery__next > a,
html.tzir-reduced-motion
.tzir-lawn-gallery__next > a svg {

    transition:
        none !important;

}



/* =========================================================
   18. COMPUTER
   >= 1200px
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-lawn-gallery__collection {

        grid-auto-rows:
            52px;

    }


    .tzir-lawn-photo--01
    .tzir-lawn-photo__frame {

        padding:
            9px;

    }


    .tzir-lawn-photo--14 {

        justify-self:
            center;

        width:
            94%;

    }

}



/* =========================================================
   19. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-lawn-gallery {

        padding:
            100px
            0;

    }


    .tzir-lawn-gallery__header {

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

        gap:
            50px;

    }


    .tzir-lawn-gallery__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-lawn-gallery__services {

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

        gap:
            25px;

    }


    .tzir-lawn-gallery__collection {

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

        grid-auto-rows:
            48px;

        gap:
            19px;

    }


    .tzir-lawn-photo {

        margin-top:
            0;

    }


    .tzir-lawn-photo--01 {

        grid-column:
            1 / span 5;

        grid-row:
            span 9;

    }


    .tzir-lawn-photo--02 {

        grid-column:
            6 / span 3;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--03 {

        grid-column:
            1 / span 3;

        grid-row:
            span 6;

    }


    .tzir-lawn-photo--04 {

        grid-column:
            4 / span 5;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--05 {

        grid-column:
            1 / span 5;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--06 {

        grid-column:
            6 / span 3;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--07 {

        grid-column:
            1 / span 4;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--08 {

        grid-column:
            5 / span 4;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--09 {

        grid-column:
            1 / span 5;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--10 {

        grid-column:
            6 / span 3;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--11 {

        grid-column:
            1 / span 3;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--12 {

        grid-column:
            4 / span 5;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--13 {

        grid-column:
            1 / span 3;

        grid-row:
            span 7;

    }


    .tzir-lawn-photo--14 {

        grid-column:
            4 / span 5;

        grid-row:
            span 7;

        width:
            auto;

    }

}



/* =========================================================
   20. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-lawn-gallery {

        padding:
            86px
            0;

    }


    .tzir-lawn-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .tzir-lawn-gallery__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-lawn-gallery__intro {

        max-width:
            590px;

    }


    .tzir-lawn-gallery__services {

        grid-template-columns:
            1fr;

        gap:
            16px;

        margin-top:
            42px;

    }


    .tzir-lawn-gallery__services-list {

        gap:
            10px
            22px;

    }


    .tzir-lawn-gallery__collection {

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

        grid-auto-rows:
            auto;

        gap:
            16px;

        margin-top:
            55px;

    }


    .tzir-lawn-photo {

        grid-column:
            auto !important;

        grid-row:
            auto !important;

        width:
            auto !important;

        margin:
            0 !important;

    }


    .tzir-lawn-photo__frame {

        aspect-ratio:
            4 / 5;

        padding:
            5px;

    }


    .tzir-lawn-photo--01,
    .tzir-lawn-photo--05,
    .tzir-lawn-photo--09,
    .tzir-lawn-photo--12,
    .tzir-lawn-photo--14 {

        grid-column:
            1 / -1 !important;

    }


    .tzir-lawn-photo--01
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--05
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--09
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--12
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--14
    .tzir-lawn-photo__frame {

        aspect-ratio:
            16 / 10;

    }


    .tzir-lawn-gallery__next {

        margin-top:
            70px;

    }

}



/* =========================================================
   21. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    .tzir-lawn-gallery {

        padding:
            72px
            0;

    }


    .tzir-lawn-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .tzir-lawn-gallery__kicker {

        gap:
            7px;

        margin-bottom:
            11px;

        font-size:
            0.61rem;

    }


    .tzir-lawn-gallery__kicker i {

        width:
            22px;

    }


    .tzir-lawn-gallery__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-lawn-gallery__intro p {

        font-size:
            0.91rem;

        line-height:
            1.63;

    }


    .tzir-lawn-gallery__script {

        margin-top:
            17px;

        font-size:
            1.05rem;

    }


    .tzir-lawn-gallery__services {

        grid-template-columns:
            1fr;

        gap:
            14px;

        margin-top:
            35px;

        padding:
            19px
            0;

    }


    .tzir-lawn-gallery__services-list {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            10px
            18px;

    }


    .tzir-lawn-gallery__services-list > span {

        font-size:
            0.69rem;

        line-height:
            1.45;

    }


    .tzir-lawn-gallery__services-list > span::after {

        display:
            none;

    }


    .tzir-lawn-gallery__services-list small {

        display:
            block;

        margin:
            2px
            0
            0;

    }


    .tzir-lawn-gallery__collection {

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-auto-rows:
            auto;

        gap:
            17px;

        margin-top:
            44px;

    }


    .tzir-lawn-photo {

        grid-column:
            1 !important;

        grid-row:
            auto !important;

        width:
            100% !important;

        margin:
            0 !important;

    }


    .tzir-lawn-photo__frame {

        aspect-ratio:
            4 / 3;

        padding:
            5px;

        transform:
            none !important;

    }


    .tzir-lawn-photo--02
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--04
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--06
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--08
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--10
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--11
    .tzir-lawn-photo__frame,
    .tzir-lawn-photo--13
    .tzir-lawn-photo__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-lawn-photo__number {

        right:
            11px;

        bottom:
            10px;

    }


    .tzir-lawn-gallery__next {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            58px;

        padding-top:
            23px;

    }


    .tzir-lawn-gallery__next > a {

        justify-content:
            space-between;

        width:
            100%;

    }


    .tzir-lawn-gallery__botanical {

        left:
            -55px;

        width:
            95px;

        height:
            135px;

    }

}











































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   06. PLANTING & INSTALLATION
   ========================================================= */


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

.tzir-planting-gallery {

    position:
        relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(100px, 8vw, 140px);

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            145deg,
            #F7F3E9 0%,
            #F1EEE4 55%,
            #EAE7DC 100%
        );

}



/* =========================================================
   02. PAPER GRAIN
   ========================================================= */

.tzir-planting-gallery::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        0.027;

    mix-blend-mode:
        multiply;

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

}



/* =========================================================
   03. SOFT BOTANICAL GLOW
   ========================================================= */

.tzir-planting-gallery::after {

    content:
        "";

    position:
        absolute;

    top:
        18%;

    left:
        -170px;

    z-index:
        -4;

    width:
        540px;

    height:
        540px;

    pointer-events:
        none;

    border-radius:
        50%;

    background:
        rgba(
            95,
            119,
            40,
            0.075
        );

    filter:
        blur(85px);

}



/* =========================================================
   04. TOPOGRAPHY
   ========================================================= */

.tzir-planting-gallery__topography {

    position:
        absolute;

    top:
        -130px;

    right:
        -170px;

    z-index:
        -3;

    width:
        800px;

    height:
        660px;

    pointer-events:
        none;

    opacity:
        0.43;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='660' viewBox='0 0 800 660'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.075' d='M-90 112C87 21 218 181 380 112S655 26 889 150'/%3E%3Cpath opacity='.052' d='M-87 157C100 67 239 225 404 157S681 82 892 197'/%3E%3Cpath opacity='.068' d='M-91 520C110 410 260 574 438 501S723 429 895 552'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

}



/* =========================================================
   05. BOTANICAL
   ========================================================= */

.tzir-planting-gallery__botanical {

    position:
        absolute;

    right:
        -75px;

    bottom:
        12%;

    z-index:
        -2;

    width:
        185px;

    height:
        250px;

    pointer-events:
        none;

    color:
        var(--tzir-moss-700);

    opacity:
        0.08;

    transform:
        rotate(12deg);

}


.tzir-planting-gallery__botanical svg {

    width:
        100%;

    height:
        100%;

}



/* =========================================================
   06. CONTAINER
   ========================================================= */

.tzir-planting-gallery__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   07. HEADER
   ========================================================= */

.tzir-planting-gallery__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    align-items:
        end;

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

}



/* =========================================================
   08. KICKER
   ========================================================= */

.tzir-planting-gallery__kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.68rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-planting-gallery__kicker i {

    display:
        block;

    width:
        31px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.35
        );

}



/* =========================================================
   09. TITLE
   ========================================================= */

.tzir-planting-gallery__title {

    max-width:
        790px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-planting-gallery__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



/* =========================================================
   10. INTRO
   ========================================================= */

.tzir-planting-gallery__intro {

    max-width:
        470px;

}


.tzir-planting-gallery__intro p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-planting-gallery__script {

    display:
        inline-flex;

    flex-direction:
        column;

    margin-top:
        21px;

    color:
        rgba(
            50,
            33,
            33,
            0.54
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-planting-gallery__script i {

    width:
        70px;

    height:
        2px;

    margin:
        8px
        0
        0
        42px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-5deg);

}



/* =========================================================
   11. SERVICES
   ========================================================= */

.tzir-planting-gallery__services {

    margin-top:
        clamp(
            52px,
            5vw,
            72px
        );

    padding:
        23px
        0;

    display:
        grid;

    grid-template-columns:
        minmax(160px, 0.42fr)
        minmax(0, 1.58fr);

    align-items:
        center;

    gap:
        35px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-planting-gallery__services-label {

    color:
        var(--tzir-moss-700);

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.tzir-planting-gallery__services-list {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px
        30px;

}


.tzir-planting-gallery__services-list span {

    position:
        relative;

    color:
        rgba(
            50,
            33,
            33,
            0.72
        );

    font-size:
        0.77rem;

    font-weight:
        700;

}


.tzir-planting-gallery__services-list span:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        -17px;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--tzir-leaf-600);

    transform:
        translateY(-50%);

}



/* =========================================================
   12. COLLECTION
   ========================================================= */

.tzir-planting-gallery__collection {

    position:
        relative;

    display:
        grid;

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

    grid-auto-rows:
        54px;

    grid-auto-flow:
        dense;

    gap:
        clamp(
            16px,
            1.8vw,
            26px
        );

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

}



/* =========================================================
   13. PHOTO
   ========================================================= */

.tzir-planting-photo {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

}


.tzir-planting-photo__frame {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    padding:
        7px;

    overflow:
        hidden;

    background:
        var(--tzir-white);

    box-shadow:
        var(--tzir-shadow-photo);

    transition:
        transform
        650ms
        var(--tzir-ease-standard),

        box-shadow
        650ms
        var(--tzir-ease-standard);

}


.tzir-planting-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.015);

    transition:
        transform
        900ms
        var(--tzir-ease-standard);

}


.tzir-planting-photo:hover
.tzir-planting-photo__frame {

    transform:
        translateY(-5px);

    box-shadow:
        0 38px 75px
        rgba(
            23,
            37,
            7,
            0.16
        ),
        0 12px 27px
        rgba(
            50,
            33,
            33,
            0.08
        );

}


.tzir-planting-photo:hover img {

    transform:
        scale(1.055);

}



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

.tzir-planting-photo__number {

    position:
        absolute;

    right:
        14px;

    bottom:
        13px;

    z-index:
        3;

    min-width:
        31px;

    height:
        25px;

    padding:
        0
        7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            246,
            245,
            243,
            0.9
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}



/* =========================================================
   15. COLLAGE — DESKTOP
   ========================================================= */

.tzir-planting-photo--01 {

    grid-column:
        1 / span 7;

    grid-row:
        span 10;

}


.tzir-planting-photo--02 {

    grid-column:
        8 / span 5;

    grid-row:
        span 7;

    margin-top:
        50px;

}


.tzir-planting-photo--03 {

    grid-column:
        2 / span 4;

    grid-row:
        span 7;

    margin-top:
        20px;

}


.tzir-planting-photo--04 {

    grid-column:
        6 / span 7;

    grid-row:
        span 7;

}


.tzir-planting-photo--05 {

    grid-column:
        1 / span 5;

    grid-row:
        span 8;

    margin-top:
        42px;

}


.tzir-planting-photo--06 {

    grid-column:
        6 / span 4;

    grid-row:
        span 8;

}


.tzir-planting-gallery__collection-note {

    grid-column:
        10 / span 3;

    grid-row:
        span 6;

    align-self:
        center;

}


.tzir-planting-photo--07 {

    grid-column:
        1 / span 8;

    grid-row:
        span 8;

}


.tzir-planting-photo--08 {

    grid-column:
        9 / span 4;

    grid-row:
        span 8;

    margin-top:
        34px;

}


.tzir-planting-photo--09 {

    grid-column:
        3 / span 8;

    grid-row:
        span 8;

    margin-top:
        35px;

}



/* =========================================================
   16. SUBTLE ROTATIONS
   ========================================================= */

.tzir-planting-photo--02
.tzir-planting-photo__frame,
.tzir-planting-photo--05
.tzir-planting-photo__frame,
.tzir-planting-photo--08
.tzir-planting-photo__frame {

    transform:
        rotate(0.55deg);

}


.tzir-planting-photo--03
.tzir-planting-photo__frame,
.tzir-planting-photo--06
.tzir-planting-photo__frame {

    transform:
        rotate(-0.5deg);

}


.tzir-planting-photo--02:hover
.tzir-planting-photo__frame,
.tzir-planting-photo--03:hover
.tzir-planting-photo__frame,
.tzir-planting-photo--05:hover
.tzir-planting-photo__frame,
.tzir-planting-photo--06:hover
.tzir-planting-photo__frame,
.tzir-planting-photo--08:hover
.tzir-planting-photo__frame {

    transform:
        translateY(-5px)
        rotate(0);

}



/* =========================================================
   17. COLLECTION NOTE
   ========================================================= */

.tzir-planting-gallery__collection-note {

    position:
        relative;

    min-height:
        215px;

    padding:
        26px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.15
        );

    background:
        rgba(
            95,
            119,
            40,
            0.075
        );

    transform:
        rotate(1.5deg);

}


.tzir-planting-gallery__collection-note span {

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

    font-family:
        var(--tzir-font-script);

    font-size:
        1.2rem;

}


.tzir-planting-gallery__collection-note strong {

    color:
        var(--tzir-moss-700);

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

    font-size:
        clamp(
            2.2rem,
            3vw,
            3.2rem
        );

    font-weight:
        600;

    line-height:
        0.9;

}


.tzir-planting-gallery__collection-note i {

    display:
        block;

    width:
        58px;

    height:
        1px;

    margin:
        16px
        0
        13px;

    background:
        rgba(
            62,
            83,
            28,
            0.35
        );

}


.tzir-planting-gallery__collection-note small {

    max-width:
        150px;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.68rem;

    font-weight:
        600;

    line-height:
        1.5;

}



/* =========================================================
   18. NEXT COLLECTION
   ========================================================= */

.tzir-planting-gallery__next {

    margin-top:
        clamp(
            80px,
            8vw,
            120px
        );

    padding-top:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.15
        );

}


.tzir-planting-gallery__next > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.tzir-planting-gallery__next > div > span {

    color:
        var(--tzir-moss-700);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-planting-gallery__next > div > strong {

    color:
        var(--tzir-bark-900);

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

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

    font-weight:
        600;

    line-height:
        1;

}


.tzir-planting-gallery__next > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.21
        );

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform
        450ms
        var(--tzir-ease-standard),

        background-color
        320ms
        ease,

        border-color
        320ms
        ease;

}


.tzir-planting-gallery__next > a svg {

    width:
        18px;

    height:
        18px;

    color:
        var(--tzir-leaf-600);

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-planting-gallery__next > a:hover {

    border-color:
        var(--tzir-moss-700);

    background:
        var(--tzir-white);

    transform:
        translateY(-3px);

}


.tzir-planting-gallery__next > a:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   19. ACCESSIBILITY
   ========================================================= */

.tzir-planting-gallery a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}



/* =========================================================
   20. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-planting-photo__frame,
html.tzir-reduced-motion
.tzir-planting-photo img,
html.tzir-reduced-motion
.tzir-planting-gallery__next > a,
html.tzir-reduced-motion
.tzir-planting-gallery__next > a svg {

    transition:
        none !important;

}



/* =========================================================
   21. COMPUTER
   >= 1200px
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-planting-gallery__collection {

        grid-auto-rows:
            54px;

    }


    .tzir-planting-photo--01
    .tzir-planting-photo__frame {

        padding:
            9px;

    }


    .tzir-planting-photo--09 {

        justify-self:
            center;

        width:
            94%;

    }

}



/* =========================================================
   22. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-planting-gallery {

        padding:
            100px
            0;

    }


    .tzir-planting-gallery__header {

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

        gap:
            50px;

    }


    .tzir-planting-gallery__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-planting-gallery__collection {

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

        grid-auto-rows:
            48px;

        gap:
            19px;

    }


    .tzir-planting-photo {

        margin-top:
            0;

    }


    .tzir-planting-photo--01 {

        grid-column:
            1 / span 5;

        grid-row:
            span 9;

    }


    .tzir-planting-photo--02 {

        grid-column:
            6 / span 3;

        grid-row:
            span 7;

    }


    .tzir-planting-photo--03 {

        grid-column:
            1 / span 3;

        grid-row:
            span 7;

    }


    .tzir-planting-photo--04 {

        grid-column:
            4 / span 5;

        grid-row:
            span 7;

    }


    .tzir-planting-photo--05 {

        grid-column:
            1 / span 4;

        grid-row:
            span 7;

    }


    .tzir-planting-photo--06 {

        grid-column:
            5 / span 4;

        grid-row:
            span 7;

    }


    .tzir-planting-gallery__collection-note {

        display:
            none;

    }


    .tzir-planting-photo--07 {

        grid-column:
            1 / span 5;

        grid-row:
            span 7;

    }


    .tzir-planting-photo--08 {

        grid-column:
            6 / span 3;

        grid-row:
            span 7;

    }


    .tzir-planting-photo--09 {

        grid-column:
            2 / span 6;

        grid-row:
            span 7;

        width:
            auto;

    }

}



/* =========================================================
   23. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-planting-gallery {

        padding:
            86px
            0;

    }


    .tzir-planting-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .tzir-planting-gallery__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-planting-gallery__services {

        grid-template-columns:
            1fr;

        gap:
            16px;

        margin-top:
            42px;

    }


    .tzir-planting-gallery__collection {

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

        grid-auto-rows:
            auto;

        gap:
            16px;

        margin-top:
            55px;

    }


    .tzir-planting-photo {

        grid-column:
            auto !important;

        grid-row:
            auto !important;

        width:
            auto !important;

        margin:
            0 !important;

    }


    .tzir-planting-photo__frame {

        aspect-ratio:
            4 / 5;

        padding:
            5px;

    }


    .tzir-planting-photo--01,
    .tzir-planting-photo--04,
    .tzir-planting-photo--07,
    .tzir-planting-photo--09 {

        grid-column:
            1 / -1 !important;

    }


    .tzir-planting-photo--01
    .tzir-planting-photo__frame,
    .tzir-planting-photo--04
    .tzir-planting-photo__frame,
    .tzir-planting-photo--07
    .tzir-planting-photo__frame,
    .tzir-planting-photo--09
    .tzir-planting-photo__frame {

        aspect-ratio:
            16 / 10;

    }


    .tzir-planting-gallery__collection-note {

        display:
            none;

    }


    .tzir-planting-gallery__next {

        margin-top:
            70px;

    }

}



/* =========================================================
   24. SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

    .tzir-planting-gallery {

        padding:
            72px
            0;

    }


    .tzir-planting-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .tzir-planting-gallery__kicker {

        gap:
            7px;

        margin-bottom:
            11px;

        font-size:
            0.61rem;

    }


    .tzir-planting-gallery__kicker i {

        width:
            22px;

    }


    .tzir-planting-gallery__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-planting-gallery__intro p {

        font-size:
            0.91rem;

        line-height:
            1.63;

    }


    .tzir-planting-gallery__script {

        margin-top:
            17px;

        font-size:
            1.05rem;

    }


    .tzir-planting-gallery__services {

        grid-template-columns:
            1fr;

        gap:
            14px;

        margin-top:
            35px;

        padding:
            19px
            0;

    }


    .tzir-planting-gallery__services-list {

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            9px;

    }


    .tzir-planting-gallery__services-list span {

        font-size:
            0.7rem;

    }


    .tzir-planting-gallery__services-list span::after {

        display:
            none;

    }


    .tzir-planting-gallery__collection {

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-auto-rows:
            auto;

        gap:
            17px;

        margin-top:
            44px;

    }


    .tzir-planting-photo {

        grid-column:
            1 !important;

        grid-row:
            auto !important;

        width:
            100% !important;

        margin:
            0 !important;

    }


    .tzir-planting-photo__frame {

        aspect-ratio:
            4 / 3;

        padding:
            5px;

        transform:
            none !important;

    }


    .tzir-planting-photo--02
    .tzir-planting-photo__frame,
    .tzir-planting-photo--03
    .tzir-planting-photo__frame,
    .tzir-planting-photo--05
    .tzir-planting-photo__frame,
    .tzir-planting-photo--06
    .tzir-planting-photo__frame,
    .tzir-planting-photo--08
    .tzir-planting-photo__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-planting-gallery__collection-note {

        display:
            none;

    }


    .tzir-planting-gallery__next {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            58px;

        padding-top:
            23px;

    }


    .tzir-planting-gallery__next > a {

        justify-content:
            space-between;

        width:
            100%;

    }


    .tzir-planting-gallery__botanical {

        right:
            -58px;

        width:
            100px;

        height:
            140px;

    }

}











































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   07. TREE SERVICES
   ========================================================= */


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

.tzir-tree-gallery {

    position:
        relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(100px, 8vw, 140px);

    overflow:
        hidden;

    isolation:
        isolate;

    color:
        var(--tzir-white);

    background:
        linear-gradient(
            145deg,
            #172507 0%,
            #203308 48%,
            #172507 100%
        );

}



/* =========================================================
   02. FOREST GLOW
   ========================================================= */

.tzir-tree-gallery::before {

    content:
        "";

    position:
        absolute;

    top:
        18%;

    right:
        -210px;

    z-index:
        -4;

    width:
        620px;

    height:
        620px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        rgba(
            95,
            119,
            40,
            0.21
        );

    filter:
        blur(100px);

}



/* =========================================================
   03. SUBTLE PAPER / MINERAL GRAIN
   ========================================================= */

.tzir-tree-gallery::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        0.045;

    mix-blend-mode:
        soft-light;

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

}



/* =========================================================
   04. TOPOGRAPHY
   ========================================================= */

.tzir-tree-gallery__topography {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    pointer-events:
        none;

    opacity:
        0.5;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1080' height='760' viewBox='0 0 1080 760'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath opacity='.055' d='M-120 116C91 20 248 194 431 118S775 25 1201 170'/%3E%3Cpath opacity='.035' d='M-118 160C103 63 269 238 455 161S805 79 1205 215'/%3E%3Cpath opacity='.05' d='M-120 590C105 462 289 651 491 560S852 470 1207 620'/%3E%3Cpath opacity='.04' d='M565-90C497 72 625 198 765 132S925 79 1137-5'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        1080px 760px;

}



/* =========================================================
   05. BOTANICAL
   ========================================================= */

.tzir-tree-gallery__botanical {

    position:
        absolute;

    left:
        -72px;

    bottom:
        12%;

    z-index:
        -2;

    width:
        185px;

    height:
        260px;

    pointer-events:
        none;

    color:
        #C6D29C;

    opacity:
        0.075;

    transform:
        rotate(-13deg);

}


.tzir-tree-gallery__botanical svg {

    width:
        100%;

    height:
        100%;

}



/* =========================================================
   06. CONTAINER
   ========================================================= */

.tzir-tree-gallery__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   07. HEADER
   ========================================================= */

.tzir-tree-gallery__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    align-items:
        end;

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

}



/* =========================================================
   08. KICKER
   ========================================================= */

.tzir-tree-gallery__kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        #C5D391;

    font-size:
        0.68rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-tree-gallery__kicker i {

    display:
        block;

    width:
        31px;

    height:
        1px;

    background:
        rgba(
            197,
            211,
            145,
            0.44
        );

}



/* =========================================================
   09. TITLE
   ========================================================= */

.tzir-tree-gallery__title {

    max-width:
        790px;

    margin:
        0;

    color:
        var(--tzir-white);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-tree-gallery__title em {

    display:
        block;

    color:
        #C5D391;

    font-style:
        normal;

}



/* =========================================================
   10. INTRO
   ========================================================= */

.tzir-tree-gallery__intro {

    max-width:
        470px;

}


.tzir-tree-gallery__intro p {

    margin:
        0;

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

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-tree-gallery__script {

    display:
        inline-flex;

    flex-direction:
        column;

    margin-top:
        21px;

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

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-tree-gallery__script i {

    width:
        66px;

    height:
        2px;

    margin:
        8px
        0
        0
        36px;

    background:
        #AFC276;

    transform:
        rotate(-4deg);

}



/* =========================================================
   11. SERVICES STRIP
   ========================================================= */

.tzir-tree-gallery__services {

    margin-top:
        clamp(
            52px,
            5vw,
            72px
        );

    padding:
        23px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        34px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

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

}


.tzir-tree-gallery__services-label {

    color:
        #C5D391;

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-tree-gallery__services-list {

    display:
        flex;

    align-items:
        center;

    gap:
        31px;

    flex-wrap:
        wrap;

}


.tzir-tree-gallery__services-list span {

    position:
        relative;

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

    font-size:
        0.78rem;

    font-weight:
        700;

}


.tzir-tree-gallery__services-list span:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        -17px;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #AFC276;

    transform:
        translateY(-50%);

}



/* =========================================================
   12. CURRENT IMAGE COUNT
   ========================================================= */

.tzir-tree-gallery__collection-meta {

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    white-space:
        nowrap;

}


.tzir-tree-gallery__collection-meta > span {

    color:
        #C5D391;

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

    font-size:
        1.35rem;

    font-weight:
        600;

}


.tzir-tree-gallery__collection-meta small {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



/* =========================================================
   13. FLEXIBLE COLLECTION

   Critical:
   There are NO fixed column starts.

   Images only receive spans and CSS Grid automatically
   determines their position.

   3, 4, 5, 6+ photos can therefore coexist without creating
   empty fixed slots.
   ========================================================= */

.tzir-tree-gallery__collection {

    display:
        grid;

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

    grid-auto-rows:
        56px;

    grid-auto-flow:
        dense;

    gap:
        clamp(
            17px,
            1.9vw,
            27px
        );

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

}



/* =========================================================
   14. DEFAULT PHOTO
   ========================================================= */

.tzir-tree-photo {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

    grid-column:
        span 5;

    grid-row:
        span 7;

}



/* =========================================================
   15. ADAPTIVE RHYTHM

   Repeating 5-image pattern.

   If images are removed, remaining DOM elements automatically
   assume the corresponding nth-child layout.

   If more images are added, the pattern simply repeats.
   ========================================================= */

.tzir-tree-photo:nth-child(5n + 1) {

    grid-column:
        span 7;

    grid-row:
        span 10;

}


.tzir-tree-photo:nth-child(5n + 2) {

    grid-column:
        span 5;

    grid-row:
        span 6;

    margin-top:
        44px;

}


.tzir-tree-photo:nth-child(5n + 3) {

    grid-column:
        span 5;

    grid-row:
        span 6;

}


.tzir-tree-photo:nth-child(5n + 4) {

    grid-column:
        span 7;

    grid-row:
        span 8;

}


.tzir-tree-photo:nth-child(5n + 5) {

    grid-column:
        span 5;

    grid-row:
        span 8;

    margin-top:
        26px;

}



/* Missing files are removed from grid calculation */

.tzir-tree-photo.is-missing {

    display:
        none;

}



/* =========================================================
   16. FRAME
   ========================================================= */

.tzir-tree-photo__frame {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    padding:
        8px;

    overflow:
        hidden;

    cursor:
        zoom-in;

    background:
        var(--tzir-white);

    box-shadow:
        0 32px 70px
        rgba(
            0,
            0,
            0,
            0.24
        ),
        0 9px 25px
        rgba(
            0,
            0,
            0,
            0.13
        );

    transition:
        transform
        650ms
        var(--tzir-ease-standard),

        box-shadow
        650ms
        var(--tzir-ease-standard);

}


.tzir-tree-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.015);

    transition:
        transform
        900ms
        var(--tzir-ease-standard),

        filter
        550ms
        ease;

}



/* =========================================================
   17. FRAME HOVER
   ========================================================= */

.tzir-tree-photo:hover
.tzir-tree-photo__frame {

    transform:
        translateY(-5px);

    box-shadow:
        0 39px 80px
        rgba(
            0,
            0,
            0,
            0.28
        ),
        0 13px 30px
        rgba(
            0,
            0,
            0,
            0.16
        );

}


.tzir-tree-photo:hover img {

    transform:
        scale(1.055);

}



/* =========================================================
   18. NUMBER
   ========================================================= */

.tzir-tree-photo__number {

    position:
        absolute;

    right:
        15px;

    bottom:
        14px;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        32px;

    height:
        26px;

    padding:
        0
        7px;

    background:
        rgba(
            246,
            245,
            243,
            0.92
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}



/* =========================================================
   19. VIEW LABEL
   ========================================================= */

.tzir-tree-photo__view {

    position:
        absolute;

    left:
        15px;

    bottom:
        14px;

    z-index:
        4;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px
        9px;

    background:
        rgba(
            23,
            37,
            7,
            0.82
        );

    backdrop-filter:
        blur(8px);

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

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

    font-size:
        0.5rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        opacity
        330ms
        ease,

        transform
        430ms
        var(--tzir-ease-standard);

}


.tzir-tree-photo__view i {

    color:
        #C5D391;

    font-style:
        normal;

}


.tzir-tree-photo:hover
.tzir-tree-photo__view {

    opacity:
        1;

    transform:
        translateY(0);

}



/* =========================================================
   20. SUBTLE FRAME RHYTHM
   ========================================================= */

.tzir-tree-photo:nth-child(4n + 2)
.tzir-tree-photo__frame {

    transform:
        rotate(0.45deg);

}


.tzir-tree-photo:nth-child(4n + 3)
.tzir-tree-photo__frame {

    transform:
        rotate(-0.45deg);

}


.tzir-tree-photo:nth-child(4n + 2):hover
.tzir-tree-photo__frame,
.tzir-tree-photo:nth-child(4n + 3):hover
.tzir-tree-photo__frame {

    transform:
        translateY(-5px)
        rotate(0);

}



/* =========================================================
   21. EDITORIAL DETAIL
   ========================================================= */

.tzir-tree-gallery__detail {

    margin-top:
        clamp(
            65px,
            6vw,
            90px
        );

    padding:
        22px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        25px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

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

}


.tzir-tree-gallery__detail > span {

    color:
        #C5D391;

    font-family:
        var(--tzir-font-script);

    font-size:
        1.4rem;

}


.tzir-tree-gallery__detail > div {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        4px;

}


.tzir-tree-gallery__detail small {

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

    font-size:
        0.49rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.tzir-tree-gallery__detail p {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin:
        0;

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

    font-size:
        0.7rem;

    font-weight:
        700;

}


.tzir-tree-gallery__detail p i {

    width:
        30px;

    height:
        1px;

    background:
        rgba(
            197,
            211,
            145,
            0.42
        );

}


.tzir-tree-gallery__detail > strong {

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

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}



/* =========================================================
   22. NEXT COLLECTION
   ========================================================= */

.tzir-tree-gallery__next {

    margin-top:
        clamp(
            70px,
            7vw,
            105px
        );

    padding-top:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.13
        );

}


.tzir-tree-gallery__next > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.tzir-tree-gallery__next > div > span {

    color:
        #C5D391;

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-tree-gallery__next > div > strong {

    color:
        var(--tzir-white);

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

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

    font-weight:
        600;

    line-height:
        1;

}


.tzir-tree-gallery__next > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(
            197,
            211,
            145,
            0.24
        );

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

    color:
        var(--tzir-white);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform
        450ms
        var(--tzir-ease-standard),

        background-color
        320ms
        ease,

        border-color
        320ms
        ease;

}


.tzir-tree-gallery__next > a svg {

    width:
        18px;

    height:
        18px;

    color:
        #C5D391;

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-tree-gallery__next > a:hover {

    border-color:
        rgba(
            197,
            211,
            145,
            0.52
        );

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

    transform:
        translateY(-3px);

}


.tzir-tree-gallery__next > a:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   23. ACCESSIBILITY
   ========================================================= */

.tzir-tree-gallery a:focus-visible {

    outline:
        2px solid
        #C5D391;

    outline-offset:
        4px;

}



/* =========================================================
   24. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-tree-photo__frame,
html.tzir-reduced-motion
.tzir-tree-photo img,
html.tzir-reduced-motion
.tzir-tree-photo__view,
html.tzir-reduced-motion
.tzir-tree-gallery__next > a,
html.tzir-reduced-motion
.tzir-tree-gallery__next > a svg {

    transition:
        none !important;

}



/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-tree-gallery__collection {

        grid-auto-rows:
            56px;

    }


    .tzir-tree-photo:nth-child(5n + 1)
    .tzir-tree-photo__frame {

        padding:
            9px;

    }

}



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

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

    .tzir-tree-gallery {

        padding:
            100px
            0;

    }


    .tzir-tree-gallery__header {

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

        gap:
            50px;

    }


    .tzir-tree-gallery__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-tree-gallery__services {

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

    }


    .tzir-tree-gallery__collection-meta {

        display:
            none;

    }


    .tzir-tree-gallery__collection {

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

        grid-auto-rows:
            50px;

        gap:
            19px;

    }


    .tzir-tree-photo {

        grid-column:
            span 4;

        grid-row:
            span 7;

        margin-top:
            0;

    }


    .tzir-tree-photo:nth-child(4n + 1) {

        grid-column:
            span 5;

        grid-row:
            span 8;

    }


    .tzir-tree-photo:nth-child(4n + 2) {

        grid-column:
            span 3;

        grid-row:
            span 7;

    }


    .tzir-tree-photo:nth-child(4n + 3) {

        grid-column:
            span 3;

        grid-row:
            span 7;

    }


    .tzir-tree-photo:nth-child(4n + 4) {

        grid-column:
            span 5;

        grid-row:
            span 8;

    }

}



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

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

    .tzir-tree-gallery {

        padding:
            86px
            0;

    }


    .tzir-tree-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .tzir-tree-gallery__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-tree-gallery__services {

        grid-template-columns:
            1fr;

        gap:
            15px;

        margin-top:
            42px;

    }


    .tzir-tree-gallery__collection-meta {

        display:
            none;

    }


    .tzir-tree-gallery__collection {

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

        grid-auto-rows:
            auto;

        gap:
            16px;

        margin-top:
            55px;

    }


    .tzir-tree-photo,
    .tzir-tree-photo:nth-child(n) {

        grid-column:
            auto;

        grid-row:
            auto;

        margin:
            0;

    }


    .tzir-tree-photo__frame {

        aspect-ratio:
            4 / 5;

        padding:
            5px;

    }


    .tzir-tree-photo:nth-child(3n + 1) {

        grid-column:
            1 / -1;

    }


    .tzir-tree-photo:nth-child(3n + 1)
    .tzir-tree-photo__frame {

        aspect-ratio:
            16 / 10;

    }


    .tzir-tree-photo__view {

        opacity:
            1;

        transform:
            none;

    }


    .tzir-tree-gallery__detail {

        grid-template-columns:
            1fr;

        justify-items:
            start;

        gap:
            14px;

    }


    .tzir-tree-gallery__detail > div {

        align-items:
            flex-start;

    }


    .tzir-tree-gallery__detail > strong {

        display:
            none;

    }

}



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

@media (max-width: 480px) {

    .tzir-tree-gallery {

        padding:
            72px
            0;

    }


    .tzir-tree-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .tzir-tree-gallery__kicker {

        gap:
            7px;

        margin-bottom:
            11px;

        font-size:
            0.61rem;

    }


    .tzir-tree-gallery__kicker i {

        width:
            22px;

    }


    .tzir-tree-gallery__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-tree-gallery__intro p {

        font-size:
            0.91rem;

        line-height:
            1.63;

    }


    .tzir-tree-gallery__script {

        margin-top:
            17px;

        font-size:
            1.05rem;

    }


    .tzir-tree-gallery__services {

        grid-template-columns:
            1fr;

        gap:
            14px;

        margin-top:
            35px;

        padding:
            19px
            0;

    }


    .tzir-tree-gallery__services-list {

        gap:
            10px
            24px;

    }


    .tzir-tree-gallery__collection-meta {

        display:
            none;

    }


    .tzir-tree-gallery__collection {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            auto;

        gap:
            17px;

        margin-top:
            44px;

    }


    .tzir-tree-photo,
    .tzir-tree-photo:nth-child(n) {

        grid-column:
            1;

        grid-row:
            auto;

        width:
            100%;

        margin:
            0;

    }


    .tzir-tree-photo__frame {

        aspect-ratio:
            4 / 3;

        padding:
            5px;

        transform:
            none !important;

    }


    .tzir-tree-photo:nth-child(even)
    .tzir-tree-photo__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-tree-photo__view {

        left:
            11px;

        bottom:
            10px;

        opacity:
            1;

        transform:
            none;

    }


    .tzir-tree-photo__number {

        right:
            11px;

        bottom:
            10px;

    }


    .tzir-tree-gallery__detail {

        margin-top:
            50px;

        grid-template-columns:
            1fr;

        justify-items:
            start;

        gap:
            12px;

    }


    .tzir-tree-gallery__detail > div {

        align-items:
            flex-start;

    }


    .tzir-tree-gallery__detail > strong {

        display:
            none;

    }


    .tzir-tree-gallery__next {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            56px;

    }


    .tzir-tree-gallery__next > a {

        width:
            100%;

        justify-content:
            space-between;

    }


    .tzir-tree-gallery__botanical {

        left:
            -58px;

        width:
            100px;

        height:
            145px;

    }

}












































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   08. CONCRETE WORK
   ========================================================= */


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

.tzir-concrete-gallery {

    position:
        relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(100px, 8vw, 140px);

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            135deg,
            #E8E5DE 0%,
            #F1EEE7 48%,
            #E2DED5 100%
        );

}



/* =========================================================
   02. PAPER / MINERAL GRAIN
   ========================================================= */

.tzir-concrete-gallery::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        0.034;

    mix-blend-mode:
        multiply;

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

}



/* =========================================================
   03. LIGHT
   ========================================================= */

.tzir-concrete-gallery::after {

    content:
        "";

    position:
        absolute;

    top:
        20%;

    left:
        7%;

    z-index:
        -4;

    width:
        520px;

    height:
        520px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        rgba(
            95,
            119,
            40,
            0.055
        );

    filter:
        blur(90px);

}



/* =========================================================
   04. ARCHITECTURAL LINES
   ========================================================= */

.tzir-concrete-gallery__architecture {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    pointer-events:
        none;

}


.tzir-concrete-gallery__architecture span {

    position:
        absolute;

    display:
        block;

    background:
        rgba(
            50,
            33,
            33,
            0.055
        );

}


.tzir-concrete-gallery__architecture span:nth-child(1) {

    top:
        17%;

    right:
        7%;

    width:
        27%;

    height:
        1px;

}


.tzir-concrete-gallery__architecture span:nth-child(2) {

    top:
        13%;

    right:
        11%;

    width:
        1px;

    height:
        32%;

}


.tzir-concrete-gallery__architecture span:nth-child(3) {

    left:
        8%;

    bottom:
        12%;

    width:
        36%;

    height:
        1px;

}



/* =========================================================
   05. TOPOGRAPHY
   ========================================================= */

.tzir-concrete-gallery__topography {

    position:
        absolute;

    right:
        -220px;

    bottom:
        -90px;

    z-index:
        -3;

    width:
        780px;

    height:
        620px;

    opacity:
        0.38;

    pointer-events:
        none;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='780' height='620' viewBox='0 0 780 620'%3E%3Cg fill='none' stroke='%23322121' stroke-width='1'%3E%3Cpath opacity='.06' d='M-80 106C96 23 220 171 379 108S650 31 861 145'/%3E%3Cpath opacity='.04' d='M-76 151C108 65 239 214 402 151S676 82 864 191'/%3E%3Cpath opacity='.055' d='M-82 493C112 394 256 546 430 480S708 418 862 525'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

}



/* =========================================================
   06. CONTAINER
   ========================================================= */

.tzir-concrete-gallery__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   07. HEADER
   ========================================================= */

.tzir-concrete-gallery__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    align-items:
        end;

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

}



/* =========================================================
   08. KICKER
   ========================================================= */

.tzir-concrete-gallery__kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.68rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-concrete-gallery__kicker i {

    display:
        block;

    width:
        31px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.35
        );

}



/* =========================================================
   09. TITLE
   ========================================================= */

.tzir-concrete-gallery__title {

    max-width:
        820px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-concrete-gallery__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



/* =========================================================
   10. INTRO
   ========================================================= */

.tzir-concrete-gallery__intro {

    max-width:
        470px;

}


.tzir-concrete-gallery__intro p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-concrete-gallery__script {

    display:
        inline-flex;

    flex-direction:
        column;

    margin-top:
        21px;

    color:
        rgba(
            50,
            33,
            33,
            0.54
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-concrete-gallery__script i {

    width:
        72px;

    height:
        2px;

    margin:
        8px
        0
        0
        41px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-4deg);

}



/* =========================================================
   11. SERVICE STRIP
   ========================================================= */

.tzir-concrete-gallery__service-strip {

    margin-top:
        clamp(
            52px,
            5vw,
            72px
        );

    padding:
        22px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        30px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-concrete-gallery__service-strip > div:first-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.tzir-concrete-gallery__service-strip
> div:first-child
> span {

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

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.tzir-concrete-gallery__service-strip
> div:first-child
> strong {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-concrete-gallery__service-line i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(
                50,
                33,
                33,
                0.08
            ),
            rgba(
                62,
                83,
                28,
                0.28
            ),
            rgba(
                50,
                33,
                33,
                0.08
            )
        );

}



/* =========================================================
   12. COUNT
   ========================================================= */

.tzir-concrete-gallery__count {

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

}


.tzir-concrete-gallery__count strong {

    color:
        var(--tzir-moss-700);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-concrete-gallery__count span {

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

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



/* =========================================================
   13. COLLECTION
   ========================================================= */

.tzir-concrete-gallery__collection {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(250px, 0.3fr);

    align-items:
        stretch;

    gap:
        clamp(
            25px,
            3.5vw,
            52px
        );

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

}



/* =========================================================
   14. PHOTOS GRID
   ========================================================= */

.tzir-concrete-gallery__photos {

    display:
        grid;

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

    grid-auto-flow:
        dense;

    gap:
        clamp(
            16px,
            1.8vw,
            26px
        );

}



/* =========================================================
   15. DEFAULT PHOTO

   This default handles 3+ images.
   ========================================================= */

.tzir-concrete-photo {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

    grid-column:
        span 6;

}



/* =========================================================
   16. SINGLE IMAGE

   Current production state.
   ========================================================= */

.tzir-concrete-gallery__collection[data-photo-count="1"]
.tzir-concrete-photo {

    grid-column:
        1 / -1;

}


.tzir-concrete-gallery__collection[data-photo-count="1"]
.tzir-concrete-photo__frame {

    aspect-ratio:
        16 / 10;

}



/* =========================================================
   17. TWO IMAGES
   ========================================================= */

.tzir-concrete-gallery__collection[data-photo-count="2"]
.tzir-concrete-photo {

    grid-column:
        span 6;

}


.tzir-concrete-gallery__collection[data-photo-count="2"]
.tzir-concrete-photo:nth-child(1)
.tzir-concrete-photo__frame {

    aspect-ratio:
        4 / 5;

}


.tzir-concrete-gallery__collection[data-photo-count="2"]
.tzir-concrete-photo:nth-child(2)
.tzir-concrete-photo__frame {

    aspect-ratio:
        4 / 5;

}



/* =========================================================
   18. THREE IMAGES
   ========================================================= */

.tzir-concrete-gallery__collection[data-photo-count="3"]
.tzir-concrete-photo:nth-child(1) {

    grid-column:
        span 7;

}


.tzir-concrete-gallery__collection[data-photo-count="3"]
.tzir-concrete-photo:nth-child(2),
.tzir-concrete-gallery__collection[data-photo-count="3"]
.tzir-concrete-photo:nth-child(3) {

    grid-column:
        span 5;

}


.tzir-concrete-gallery__collection[data-photo-count="3"]
.tzir-concrete-photo:nth-child(1)
.tzir-concrete-photo__frame {

    aspect-ratio:
        5 / 4;

}


.tzir-concrete-gallery__collection[data-photo-count="3"]
.tzir-concrete-photo:nth-child(2)
.tzir-concrete-photo__frame,
.tzir-concrete-gallery__collection[data-photo-count="3"]
.tzir-concrete-photo:nth-child(3)
.tzir-concrete-photo__frame {

    aspect-ratio:
        4 / 3;

}



/* =========================================================
   19. FOUR IMAGES
   ========================================================= */

.tzir-concrete-gallery__collection[data-photo-count="4"]
.tzir-concrete-photo {

    grid-column:
        span 6;

}


.tzir-concrete-gallery__collection[data-photo-count="4"]
.tzir-concrete-photo:nth-child(1)
.tzir-concrete-photo__frame,
.tzir-concrete-gallery__collection[data-photo-count="4"]
.tzir-concrete-photo:nth-child(4)
.tzir-concrete-photo__frame {

    aspect-ratio:
        16 / 11;

}


.tzir-concrete-gallery__collection[data-photo-count="4"]
.tzir-concrete-photo:nth-child(2)
.tzir-concrete-photo__frame,
.tzir-concrete-gallery__collection[data-photo-count="4"]
.tzir-concrete-photo:nth-child(3)
.tzir-concrete-photo__frame {

    aspect-ratio:
        4 / 5;

}



/* =========================================================
   20. FIVE OR MORE
   ========================================================= */

.tzir-concrete-gallery__collection[data-photo-count="many"]
.tzir-concrete-photo {

    grid-column:
        span 6;

}


.tzir-concrete-gallery__collection[data-photo-count="many"]
.tzir-concrete-photo:nth-child(5n + 1) {

    grid-column:
        span 7;

}


.tzir-concrete-gallery__collection[data-photo-count="many"]
.tzir-concrete-photo:nth-child(5n + 2) {

    grid-column:
        span 5;

}


.tzir-concrete-gallery__collection[data-photo-count="many"]
.tzir-concrete-photo:nth-child(5n + 3) {

    grid-column:
        span 5;

}


.tzir-concrete-gallery__collection[data-photo-count="many"]
.tzir-concrete-photo:nth-child(5n + 4) {

    grid-column:
        span 7;

}


.tzir-concrete-gallery__collection[data-photo-count="many"]
.tzir-concrete-photo__frame {

    aspect-ratio:
        4 / 3;

}



/* =========================================================
   21. FRAME
   ========================================================= */

.tzir-concrete-photo__frame {

    position:
        relative;

    width:
        100%;

    min-height:
        100%;

    aspect-ratio:
        4 / 3;

    padding:
        8px;

    overflow:
        hidden;

    cursor:
        zoom-in;

    background:
        var(--tzir-white);

    box-shadow:
        0 30px 68px
        rgba(
            23,
            37,
            7,
            0.13
        ),
        0 9px 25px
        rgba(
            50,
            33,
            33,
            0.08
        );

    transition:
        transform
        650ms
        var(--tzir-ease-standard),

        box-shadow
        650ms
        var(--tzir-ease-standard);

}


.tzir-concrete-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.015);

    transition:
        transform
        900ms
        var(--tzir-ease-standard);

}


.tzir-concrete-photo:hover
.tzir-concrete-photo__frame {

    transform:
        translateY(-5px);

    box-shadow:
        0 38px 78px
        rgba(
            23,
            37,
            7,
            0.17
        ),
        0 12px 29px
        rgba(
            50,
            33,
            33,
            0.09
        );

}


.tzir-concrete-photo:hover img {

    transform:
        scale(1.05);

}



/* =========================================================
   22. OVERLAY
   ========================================================= */

.tzir-concrete-photo__overlay {

    position:
        absolute;

    inset:
        8px;

    z-index:
        3;

    pointer-events:
        none;

}



/* =========================================================
   23. NUMBER
   ========================================================= */

.tzir-concrete-photo__number {

    position:
        absolute;

    right:
        12px;

    bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        33px;

    height:
        26px;

    padding:
        0
        8px;

    background:
        rgba(
            246,
            245,
            243,
            0.92
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}



/* =========================================================
   24. VIEW
   ========================================================= */

.tzir-concrete-photo__view {

    position:
        absolute;

    left:
        12px;

    bottom:
        12px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px
        10px;

    background:
        rgba(
            23,
            37,
            7,
            0.83
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-white);

    font-size:
        0.49rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        opacity
        330ms
        ease,

        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-concrete-photo__view i {

    color:
        #C5D391;

    font-style:
        normal;

}


.tzir-concrete-photo:hover
.tzir-concrete-photo__view {

    opacity:
        1;

    transform:
        translateY(0);

}



/* =========================================================
   25. MISSING IMAGE
   ========================================================= */

.tzir-concrete-photo.is-missing {

    display:
        none;

}



/* =========================================================
   26. EDITORIAL PANEL
   ========================================================= */

.tzir-concrete-gallery__editorial {

    position:
        relative;

    min-height:
        100%;

    padding:
        clamp(
            28px,
            3vw,
            44px
        );

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            50,
            33,
            33,
            0.12
        );

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

    box-shadow:
        0 25px 55px
        rgba(
            23,
            37,
            7,
            0.12
        );

}



/* large decorative lines */

.tzir-concrete-gallery__editorial::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        -18%;

    width:
        140%;

    height:
        1px;

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

    transform:
        rotate(-29deg);

}



/* =========================================================
   27. EDITORIAL TOP
   ========================================================= */

.tzir-concrete-gallery__editorial-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

}


.tzir-concrete-gallery__editorial-top span {

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

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-concrete-gallery__editorial-top strong {

    margin-top:
        4px;

    color:
        #C5D391;

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

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

    font-weight:
        600;

    line-height:
        0.92;

}



/* =========================================================
   28. BIG NUMBER
   ========================================================= */

.tzir-concrete-gallery__editorial-mark {

    position:
        relative;

    z-index:
        2;

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

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

    font-size:
        clamp(
            7rem,
            10vw,
            11rem
        );

    font-weight:
        600;

    line-height:
        0.75;

    letter-spacing:
        -0.08em;

}



/* =========================================================
   29. EDITORIAL BOTTOM
   ========================================================= */

.tzir-concrete-gallery__editorial-bottom {

    position:
        relative;

    z-index:
        2;

}


.tzir-concrete-gallery__editorial-bottom > i {

    display:
        block;

    width:
        44px;

    height:
        1px;

    margin-bottom:
        16px;

    background:
        #AFC276;

}


.tzir-concrete-gallery__editorial-bottom p {

    margin:
        0;

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

    font-size:
        0.78rem;

    line-height:
        1.65;

}


.tzir-concrete-gallery__editorial-bottom span {

    display:
        block;

    margin-top:
        20px;

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

    font-family:
        var(--tzir-font-script);

    font-size:
        1.05rem;

    transform:
        rotate(-3deg);

}



/* =========================================================
   30. COLLECTION FOOTER
   ========================================================= */

.tzir-concrete-gallery__collection-footer {

    margin-top:
        28px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        18px;

}


.tzir-concrete-gallery__collection-footer > span {

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

    font-size:
        0.53rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


.tzir-concrete-gallery__collection-footer > div i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            50,
            33,
            33,
            0.14
        );

}



/* =========================================================
   31. NEXT COLLECTION
   ========================================================= */

.tzir-concrete-gallery__next {

    margin-top:
        clamp(
            75px,
            7vw,
            110px
        );

    padding-top:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.15
        );

}


.tzir-concrete-gallery__next > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.tzir-concrete-gallery__next > div > span {

    color:
        var(--tzir-moss-700);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-concrete-gallery__next > div > strong {

    color:
        var(--tzir-bark-900);

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

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

    font-weight:
        600;

}


.tzir-concrete-gallery__next > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.21
        );

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform
        450ms
        var(--tzir-ease-standard),

        background-color
        320ms
        ease,

        border-color
        320ms
        ease;

}


.tzir-concrete-gallery__next > a svg {

    width:
        18px;

    height:
        18px;

    color:
        var(--tzir-leaf-600);

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-concrete-gallery__next > a:hover {

    border-color:
        var(--tzir-moss-700);

    background:
        var(--tzir-white);

    transform:
        translateY(-3px);

}


.tzir-concrete-gallery__next > a:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   32. ACCESSIBILITY
   ========================================================= */

.tzir-concrete-gallery a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}



/* =========================================================
   33. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-concrete-photo__frame,
html.tzir-reduced-motion
.tzir-concrete-photo img,
html.tzir-reduced-motion
.tzir-concrete-photo__view,
html.tzir-reduced-motion
.tzir-concrete-gallery__next > a,
html.tzir-reduced-motion
.tzir-concrete-gallery__next > a svg {

    transition:
        none !important;

}



/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-concrete-gallery__collection[data-photo-count="1"]
    .tzir-concrete-gallery__photos {

        min-height:
            610px;

    }


    .tzir-concrete-gallery__collection[data-photo-count="1"]
    .tzir-concrete-photo__frame {

        height:
            100%;

        aspect-ratio:
            auto;

    }

}



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

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

    .tzir-concrete-gallery {

        padding:
            100px
            0;

    }


    .tzir-concrete-gallery__header {

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

        gap:
            50px;

    }


    .tzir-concrete-gallery__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-concrete-gallery__collection {

        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(220px, 0.5fr);

        gap:
            26px;

    }


    .tzir-concrete-gallery__collection[data-photo-count="1"]
    .tzir-concrete-photo__frame {

        aspect-ratio:
            4 / 3;

    }


    .tzir-concrete-gallery__editorial {

        padding:
            28px;

    }

}



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

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

    .tzir-concrete-gallery {

        padding:
            86px
            0;

    }


    .tzir-concrete-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .tzir-concrete-gallery__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-concrete-gallery__service-strip {

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

        gap:
            20px;

        margin-top:
            42px;

    }


    .tzir-concrete-gallery__collection {

        grid-template-columns:
            1fr;

        gap:
            20px;

        margin-top:
            55px;

    }


    .tzir-concrete-gallery__photos {

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

    }


    .tzir-concrete-photo,
    .tzir-concrete-gallery__collection[data-photo-count]
    .tzir-concrete-photo {

        grid-column:
            auto;

    }


    .tzir-concrete-gallery__collection[data-photo-count="1"]
    .tzir-concrete-photo {

        grid-column:
            1 / -1;

    }


    .tzir-concrete-photo__frame {

        aspect-ratio:
            4 / 5 !important;

        padding:
            5px;

    }


    .tzir-concrete-gallery__collection[data-photo-count="1"]
    .tzir-concrete-photo__frame {

        aspect-ratio:
            16 / 10 !important;

    }


    .tzir-concrete-photo__view {

        opacity:
            1;

        transform:
            none;

    }


    .tzir-concrete-gallery__editorial {

        min-height:
            235px;

    }


    .tzir-concrete-gallery__editorial-mark {

        position:
            absolute;

        top:
            50%;

        right:
            30px;

        transform:
            translateY(-50%);

    }

}



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

@media (max-width: 480px) {

    .tzir-concrete-gallery {

        padding:
            72px
            0;

    }


    .tzir-concrete-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .tzir-concrete-gallery__kicker {

        gap:
            7px;

        margin-bottom:
            11px;

        font-size:
            0.61rem;

    }


    .tzir-concrete-gallery__kicker i {

        width:
            22px;

    }


    .tzir-concrete-gallery__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-concrete-gallery__intro p {

        font-size:
            0.91rem;

        line-height:
            1.63;

    }


    .tzir-concrete-gallery__script {

        margin-top:
            17px;

        font-size:
            1.05rem;

    }


    .tzir-concrete-gallery__service-strip {

        grid-template-columns:
            1fr
            auto;

        gap:
            20px;

        margin-top:
            35px;

    }


    .tzir-concrete-gallery__service-line {

        display:
            none;

    }


    .tzir-concrete-gallery__count {

        align-self:
            center;

    }


    .tzir-concrete-gallery__count span {

        display:
            none;

    }


    .tzir-concrete-gallery__collection {

        grid-template-columns:
            1fr;

        gap:
            17px;

        margin-top:
            44px;

    }


    .tzir-concrete-gallery__photos {

        grid-template-columns:
            1fr;

        gap:
            17px;

    }


    .tzir-concrete-photo,
    .tzir-concrete-gallery__collection[data-photo-count]
    .tzir-concrete-photo {

        grid-column:
            1;

        width:
            100%;

    }


    .tzir-concrete-photo__frame,
    .tzir-concrete-gallery__collection[data-photo-count]
    .tzir-concrete-photo__frame {

        aspect-ratio:
            4 / 3 !important;

        padding:
            5px;

    }


    .tzir-concrete-photo:nth-child(even)
    .tzir-concrete-photo__frame {

        aspect-ratio:
            4 / 5 !important;

    }


    .tzir-concrete-photo__view {

        left:
            10px;

        bottom:
            10px;

        opacity:
            1;

        transform:
            none;

    }


    .tzir-concrete-photo__number {

        right:
            10px;

        bottom:
            10px;

    }


    .tzir-concrete-gallery__editorial {

        min-height:
            230px;

        padding:
            26px;

    }


    .tzir-concrete-gallery__editorial-mark {

        position:
            absolute;

        top:
            50%;

        right:
            22px;

        font-size:
            7rem;

        transform:
            translateY(-50%);

    }


    .tzir-concrete-gallery__editorial-bottom p {

        max-width:
            190px;

    }


    .tzir-concrete-gallery__collection-footer {

        grid-template-columns:
            auto
            1fr;

    }


    .tzir-concrete-gallery__collection-footer
    > span:last-child {

        display:
            none;

    }


    .tzir-concrete-gallery__next {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            58px;

    }


    .tzir-concrete-gallery__next > a {

        width:
            100%;

        justify-content:
            space-between;

    }

}












































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   09. FENCE INSTALLATION
   ========================================================= */


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

.tzir-fence-gallery {

    position:
        relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(100px, 8vw, 140px);

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            140deg,
            #F6F2E9 0%,
            #EEE9DF 52%,
            #F4F1E9 100%
        );

}



/* =========================================================
   02. PAPER GRAIN
   ========================================================= */

.tzir-fence-gallery::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        0.028;

    mix-blend-mode:
        multiply;

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

}



/* =========================================================
   03. WARM BARK GLOW
   ========================================================= */

.tzir-fence-gallery::after {

    content:
        "";

    position:
        absolute;

    right:
        -180px;

    top:
        24%;

    z-index:
        -4;

    width:
        560px;

    height:
        560px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        rgba(
            162,
            140,
            121,
            0.13
        );

    filter:
        blur(100px);

}



/* =========================================================
   04. VERTICAL SLATS
   ========================================================= */

.tzir-fence-gallery__slats {

    position:
        absolute;

    top:
        7%;

    right:
        4%;

    z-index:
        -2;

    width:
        min(
            31vw,
            440px
        );

    height:
        470px;

    display:
        flex;

    justify-content:
        space-between;

    pointer-events:
        none;

    opacity:
        0.34;

}


.tzir-fence-gallery__slats span {

    width:
        1px;

    height:
        100%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(
                50,
                33,
                33,
                0.15
            ),
            transparent
        );

}


.tzir-fence-gallery__slats span:nth-child(even) {

    transform:
        translateY(50px);

}



/* =========================================================
   05. TOPOGRAPHY
   ========================================================= */

.tzir-fence-gallery__topography {

    position:
        absolute;

    left:
        -220px;

    bottom:
        -110px;

    z-index:
        -3;

    width:
        760px;

    height:
        620px;

    pointer-events:
        none;

    opacity:
        0.38;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.07' d='M-80 110C93 24 214 176 371 111S636 29 849 147'/%3E%3Cpath opacity='.045' d='M-78 152C103 66 234 217 396 152S663 82 852 192'/%3E%3Cpath opacity='.06' d='M-83 496C112 396 255 548 427 482S704 418 851 527'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

}



/* =========================================================
   06. CONTAINER
   ========================================================= */

.tzir-fence-gallery__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   07. HEADER
   ========================================================= */

.tzir-fence-gallery__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    align-items:
        end;

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

}



/* =========================================================
   08. KICKER
   ========================================================= */

.tzir-fence-gallery__kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.68rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-fence-gallery__kicker i {

    display:
        block;

    width:
        31px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.35
        );

}



/* =========================================================
   09. TITLE
   ========================================================= */

.tzir-fence-gallery__title {

    max-width:
        800px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-fence-gallery__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



/* =========================================================
   10. INTRO
   ========================================================= */

.tzir-fence-gallery__intro {

    max-width:
        470px;

}


.tzir-fence-gallery__intro p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-fence-gallery__script {

    display:
        inline-flex;

    flex-direction:
        column;

    margin-top:
        21px;

    color:
        rgba(
            50,
            33,
            33,
            0.54
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-fence-gallery__script i {

    width:
        72px;

    height:
        2px;

    margin:
        8px
        0
        0
        40px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-4deg);

}



/* =========================================================
   11. SERVICE BAR
   ========================================================= */

.tzir-fence-gallery__service-bar {

    margin-top:
        clamp(
            52px,
            5vw,
            72px
        );

    padding:
        22px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        30px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-fence-gallery__service-name {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.tzir-fence-gallery__service-name span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.tzir-fence-gallery__service-name strong {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-fence-gallery__service-rule i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(
                50,
                33,
                33,
                0.07
            ),
            rgba(
                62,
                83,
                28,
                0.3
            ),
            rgba(
                50,
                33,
                33,
                0.07
            )
        );

}



/* =========================================================
   12. COUNT
   ========================================================= */

.tzir-fence-gallery__count {

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    white-space:
        nowrap;

}


.tzir-fence-gallery__count strong {

    color:
        var(--tzir-moss-700);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-fence-gallery__count span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



/* =========================================================
   13. COLLECTION
   ========================================================= */

.tzir-fence-gallery__collection {

    display:
        grid;

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

    grid-auto-rows:
        58px;

    grid-auto-flow:
        dense;

    gap:
        clamp(
            17px,
            1.9vw,
            27px
        );

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

}



/*
    Flexible 3-photo pattern.

    If more photographs are added, the rhythm repeats.
*/

.tzir-fence-photo {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

    grid-column:
        span 5;

    grid-row:
        span 7;

}


.tzir-fence-photo:nth-child(3n + 1) {

    grid-column:
        span 7;

    grid-row:
        span 12;

}


.tzir-fence-photo:nth-child(3n + 2) {

    grid-column:
        span 5;

    grid-row:
        span 6;

    margin-top:
        36px;

}


.tzir-fence-photo:nth-child(3n + 3) {

    grid-column:
        span 5;

    grid-row:
        span 6;

}



/* =========================================================
   14. FRAME
   ========================================================= */

.tzir-fence-photo__frame {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    padding:
        8px;

    overflow:
        hidden;

    cursor:
        zoom-in;

    background:
        var(--tzir-white);

    box-shadow:
        var(--tzir-shadow-photo);

    transition:
        transform
        650ms
        var(--tzir-ease-standard),

        box-shadow
        650ms
        var(--tzir-ease-standard);

}


.tzir-fence-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.015);

    transition:
        transform
        900ms
        var(--tzir-ease-standard);

}



/* =========================================================
   15. HOVER
   ========================================================= */

.tzir-fence-photo:hover
.tzir-fence-photo__frame {

    transform:
        translateY(-5px);

    box-shadow:
        0 38px 78px
        rgba(
            23,
            37,
            7,
            0.16
        ),
        0 12px 28px
        rgba(
            50,
            33,
            33,
            0.08
        );

}


.tzir-fence-photo:hover img {

    transform:
        scale(1.055);

}



/* =========================================================
   16. SUBTLE PAPER ROTATIONS
   ========================================================= */

.tzir-fence-photo:nth-child(3n + 2)
.tzir-fence-photo__frame {

    transform:
        rotate(0.55deg);

}


.tzir-fence-photo:nth-child(3n + 3)
.tzir-fence-photo__frame {

    transform:
        rotate(-0.45deg);

}


.tzir-fence-photo:nth-child(3n + 2):hover
.tzir-fence-photo__frame,
.tzir-fence-photo:nth-child(3n + 3):hover
.tzir-fence-photo__frame {

    transform:
        translateY(-5px)
        rotate(0);

}



/* =========================================================
   17. OVERLAY
   ========================================================= */

.tzir-fence-photo__overlay {

    position:
        absolute;

    inset:
        8px;

    z-index:
        3;

    pointer-events:
        none;

}



/* =========================================================
   18. NUMBER
   ========================================================= */

.tzir-fence-photo__number {

    position:
        absolute;

    right:
        12px;

    bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        32px;

    height:
        26px;

    padding:
        0
        7px;

    background:
        rgba(
            246,
            245,
            243,
            0.92
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}



/* =========================================================
   19. VIEW LABEL
   ========================================================= */

.tzir-fence-photo__view {

    position:
        absolute;

    left:
        12px;

    bottom:
        12px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px
        10px;

    background:
        rgba(
            23,
            37,
            7,
            0.82
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-white);

    font-size:
        0.49rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        opacity
        330ms
        ease,

        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-fence-photo__view i {

    color:
        #C5D391;

    font-style:
        normal;

}


.tzir-fence-photo:hover
.tzir-fence-photo__view {

    opacity:
        1;

    transform:
        translateY(0);

}



/* =========================================================
   20. MISSING IMAGE
   ========================================================= */

.tzir-fence-photo.is-missing {

    display:
        none;

}



/* =========================================================
   21. DETAIL STRIP
   ========================================================= */

.tzir-fence-gallery__detail {

    margin-top:
        clamp(
            58px,
            6vw,
            82px
        );

    padding:
        19px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        18px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

}


.tzir-fence-gallery__detail > span {

    color:
        var(--tzir-moss-700);

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

    font-size:
        1.55rem;

    font-weight:
        600;

}


.tzir-fence-gallery__detail p {

    margin:
        0;

    color:
        var(--tzir-bark-900);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.tzir-fence-gallery__detail > i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-fence-gallery__detail strong {

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

    font-family:
        var(--tzir-font-script);

    font-size:
        1.05rem;

    font-weight:
        500;

}



/* =========================================================
   22. NEXT
   ========================================================= */

.tzir-fence-gallery__next {

    margin-top:
        clamp(
            75px,
            7vw,
            110px
        );

    padding-top:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.15
        );

}


.tzir-fence-gallery__next > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.tzir-fence-gallery__next > div > span {

    color:
        var(--tzir-moss-700);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-fence-gallery__next > div > strong {

    color:
        var(--tzir-bark-900);

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

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

    font-weight:
        600;

}


.tzir-fence-gallery__next > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.21
        );

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform
        450ms
        var(--tzir-ease-standard),

        background-color
        320ms
        ease,

        border-color
        320ms
        ease;

}


.tzir-fence-gallery__next > a svg {

    width:
        18px;

    height:
        18px;

    color:
        var(--tzir-leaf-600);

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-fence-gallery__next > a:hover {

    border-color:
        var(--tzir-moss-700);

    background:
        var(--tzir-white);

    transform:
        translateY(-3px);

}


.tzir-fence-gallery__next > a:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   23. ACCESSIBILITY
   ========================================================= */

.tzir-fence-gallery a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}



/* =========================================================
   24. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-fence-photo__frame,
html.tzir-reduced-motion
.tzir-fence-photo img,
html.tzir-reduced-motion
.tzir-fence-photo__view,
html.tzir-reduced-motion
.tzir-fence-gallery__next > a,
html.tzir-reduced-motion
.tzir-fence-gallery__next > a svg {

    transition:
        none !important;

}



/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-fence-gallery__collection {

        grid-auto-rows:
            58px;

    }


    .tzir-fence-photo:nth-child(3n + 1)
    .tzir-fence-photo__frame {

        padding:
            9px;

    }

}



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

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

    .tzir-fence-gallery {

        padding:
            100px
            0;

    }


    .tzir-fence-gallery__header {

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

        gap:
            50px;

    }


    .tzir-fence-gallery__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-fence-gallery__collection {

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

        grid-auto-rows:
            52px;

        gap:
            19px;

    }


    .tzir-fence-photo {

        margin-top:
            0;

    }


    .tzir-fence-photo:nth-child(3n + 1) {

        grid-column:
            span 5;

        grid-row:
            span 10;

    }


    .tzir-fence-photo:nth-child(3n + 2),
    .tzir-fence-photo:nth-child(3n + 3) {

        grid-column:
            span 3;

        grid-row:
            span 5;

    }

}



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

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

    .tzir-fence-gallery {

        padding:
            86px
            0;

    }


    .tzir-fence-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .tzir-fence-gallery__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-fence-gallery__service-bar {

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

        gap:
            20px;

        margin-top:
            42px;

    }


    .tzir-fence-gallery__collection {

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

        grid-auto-rows:
            auto;

        gap:
            16px;

        margin-top:
            55px;

    }


    .tzir-fence-photo,
    .tzir-fence-photo:nth-child(n) {

        grid-column:
            auto;

        grid-row:
            auto;

        margin:
            0;

    }


    .tzir-fence-photo__frame {

        aspect-ratio:
            4 / 5;

        padding:
            5px;

    }


    .tzir-fence-photo:nth-child(3n + 1) {

        grid-column:
            1 / -1;

    }


    .tzir-fence-photo:nth-child(3n + 1)
    .tzir-fence-photo__frame {

        aspect-ratio:
            16 / 10;

    }


    .tzir-fence-photo__view {

        opacity:
            1;

        transform:
            none;

    }

}



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

@media (max-width: 480px) {

    .tzir-fence-gallery {

        padding:
            72px
            0;

    }


    .tzir-fence-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .tzir-fence-gallery__kicker {

        gap:
            7px;

        margin-bottom:
            11px;

        font-size:
            0.61rem;

    }


    .tzir-fence-gallery__kicker i {

        width:
            22px;

    }


    .tzir-fence-gallery__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-fence-gallery__intro p {

        font-size:
            0.91rem;

        line-height:
            1.63;

    }


    .tzir-fence-gallery__service-bar {

        grid-template-columns:
            1fr
            auto;

        gap:
            18px;

        margin-top:
            35px;

    }


    .tzir-fence-gallery__service-rule {

        display:
            none;

    }


    .tzir-fence-gallery__count span {

        display:
            none;

    }


    .tzir-fence-gallery__collection {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            auto;

        gap:
            17px;

        margin-top:
            44px;

    }


    .tzir-fence-photo,
    .tzir-fence-photo:nth-child(n) {

        grid-column:
            1;

        grid-row:
            auto;

        width:
            100%;

        margin:
            0;

    }


    .tzir-fence-photo__frame {

        aspect-ratio:
            4 / 3;

        padding:
            5px;

        transform:
            none !important;

    }


    .tzir-fence-photo:nth-child(even)
    .tzir-fence-photo__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-fence-photo__view {

        left:
            10px;

        bottom:
            10px;

        opacity:
            1;

        transform:
            none;

    }


    .tzir-fence-photo__number {

        right:
            10px;

        bottom:
            10px;

    }


    .tzir-fence-gallery__detail {

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

        gap:
            14px;

        margin-top:
            46px;

    }


    .tzir-fence-gallery__detail > i,
    .tzir-fence-gallery__detail strong {

        display:
            none;

    }


    .tzir-fence-gallery__next {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            58px;

    }


    .tzir-fence-gallery__next > a {

        width:
            100%;

        justify-content:
            space-between;

    }


    .tzir-fence-gallery__slats {

        right:
            -8%;

        width:
            46%;

        height:
            330px;

    }

}













































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   10. DECK PAINTING
   ========================================================= */


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

.tzir-deck-gallery {

    position:
        relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(100px, 8vw, 140px);

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            140deg,
            #EEE7DD 0%,
            #F5F1E9 48%,
            #E9E1D6 100%
        );

}



/* =========================================================
   02. PAPER GRAIN
   ========================================================= */

.tzir-deck-gallery::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        0.03;

    mix-blend-mode:
        multiply;

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

}



/* =========================================================
   03. WARM GLOW
   ========================================================= */

.tzir-deck-gallery::after {

    content:
        "";

    position:
        absolute;

    top:
        18%;

    left:
        -190px;

    z-index:
        -4;

    width:
        590px;

    height:
        590px;

    pointer-events:
        none;

    border-radius:
        50%;

    background:
        rgba(
            162,
            140,
            121,
            0.18
        );

    filter:
        blur(100px);

}



/* =========================================================
   04. ARCHITECTURAL / WOOD LINES
   ========================================================= */

.tzir-deck-gallery__lines {

    position:
        absolute;

    right:
        4%;

    top:
        10%;

    z-index:
        -2;

    width:
        min(
            32vw,
            460px
        );

    height:
        430px;

    pointer-events:
        none;

}


.tzir-deck-gallery__lines span {

    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                50,
                33,
                33,
                0.13
            ),
            transparent
        );

}


.tzir-deck-gallery__lines span:nth-child(1) {

    top:
        0;

}


.tzir-deck-gallery__lines span:nth-child(2) {

    top:
        30%;

    transform:
        translateX(35px);

}


.tzir-deck-gallery__lines span:nth-child(3) {

    top:
        61%;

    transform:
        translateX(-22px);

}


.tzir-deck-gallery__lines span:nth-child(4) {

    top:
        92%;

    transform:
        translateX(18px);

}



/* =========================================================
   05. TOPOGRAPHY
   ========================================================= */

.tzir-deck-gallery__topography {

    position:
        absolute;

    right:
        -190px;

    bottom:
        -120px;

    z-index:
        -3;

    width:
        760px;

    height:
        620px;

    pointer-events:
        none;

    opacity:
        0.36;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Cg fill='none' stroke='%23322121' stroke-width='1'%3E%3Cpath opacity='.065' d='M-80 109C92 24 216 175 372 110S638 28 850 147'/%3E%3Cpath opacity='.042' d='M-77 152C104 67 235 217 396 152S664 82 853 192'/%3E%3Cpath opacity='.055' d='M-82 497C111 398 255 550 427 483S705 420 852 527'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

}



/* =========================================================
   06. CONTAINER
   ========================================================= */

.tzir-deck-gallery__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   07. HEADER
   ========================================================= */

.tzir-deck-gallery__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    align-items:
        end;

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

}



/* =========================================================
   08. KICKER
   ========================================================= */

.tzir-deck-gallery__kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.68rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-deck-gallery__kicker i {

    display:
        block;

    width:
        31px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.35
        );

}



/* =========================================================
   09. TITLE
   ========================================================= */

.tzir-deck-gallery__title {

    max-width:
        820px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-deck-gallery__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



/* =========================================================
   10. INTRO
   ========================================================= */

.tzir-deck-gallery__intro {

    max-width:
        470px;

}


.tzir-deck-gallery__intro p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-deck-gallery__script {

    display:
        inline-flex;

    flex-direction:
        column;

    margin-top:
        21px;

    color:
        rgba(
            50,
            33,
            33,
            0.54
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-deck-gallery__script i {

    width:
        70px;

    height:
        2px;

    margin:
        8px
        0
        0
        39px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-4deg);

}



/* =========================================================
   11. SERVICE BAR
   ========================================================= */

.tzir-deck-gallery__service-bar {

    margin-top:
        clamp(
            52px,
            5vw,
            72px
        );

    padding:
        22px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        30px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-deck-gallery__service-name {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.tzir-deck-gallery__service-name span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.tzir-deck-gallery__service-name strong {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-deck-gallery__service-rule i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(
                50,
                33,
                33,
                0.08
            ),
            rgba(
                162,
                140,
                121,
                0.48
            ),
            rgba(
                50,
                33,
                33,
                0.08
            )
        );

}



/* =========================================================
   12. COUNT
   ========================================================= */

.tzir-deck-gallery__count {

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    white-space:
        nowrap;

}


.tzir-deck-gallery__count strong {

    color:
        var(--tzir-moss-700);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-deck-gallery__count span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



/* =========================================================
   13. COLLECTION
   ========================================================= */

.tzir-deck-gallery__collection {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(235px, 0.4fr);

    align-items:
        stretch;

    gap:
        clamp(
            25px,
            3.5vw,
            52px
        );

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

}



/* =========================================================
   14. PHOTOS
   ========================================================= */

.tzir-deck-gallery__photos {

    display:
        grid;

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

    grid-auto-flow:
        dense;

    align-items:
        start;

    gap:
        clamp(
            16px,
            1.9vw,
            27px
        );

}



/* =========================================================
   15. DEFAULT PHOTO
   ========================================================= */

.tzir-deck-photo {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

    grid-column:
        span 6;

}



/* =========================================================
   16. ONE IMAGE
   ========================================================= */

.tzir-deck-gallery__collection[data-photo-count="1"]
.tzir-deck-photo {

    grid-column:
        1 / -1;

}


.tzir-deck-gallery__collection[data-photo-count="1"]
.tzir-deck-photo__frame {

    aspect-ratio:
        16 / 10;

}



/* =========================================================
   17. TWO IMAGES — CURRENT STATE
   ========================================================= */

.tzir-deck-gallery__collection[data-photo-count="2"]
.tzir-deck-photo:first-child {

    grid-column:
        1 / span 8;

}


.tzir-deck-gallery__collection[data-photo-count="2"]
.tzir-deck-photo:nth-child(2) {

    grid-column:
        8 / span 5;

    margin-top:
        clamp(
            110px,
            10vw,
            165px
        );

    margin-left:
        -11%;
}


.tzir-deck-gallery__collection[data-photo-count="2"]
.tzir-deck-photo:first-child
.tzir-deck-photo__frame {

    aspect-ratio:
        16 / 11;

}


.tzir-deck-gallery__collection[data-photo-count="2"]
.tzir-deck-photo:nth-child(2)
.tzir-deck-photo__frame {

    aspect-ratio:
        4 / 5;

}



/* =========================================================
   18. THREE IMAGES
   ========================================================= */

.tzir-deck-gallery__collection[data-photo-count="3"]
.tzir-deck-photo:first-child {

    grid-column:
        span 7;

}


.tzir-deck-gallery__collection[data-photo-count="3"]
.tzir-deck-photo:nth-child(2),
.tzir-deck-gallery__collection[data-photo-count="3"]
.tzir-deck-photo:nth-child(3) {

    grid-column:
        span 5;

}


.tzir-deck-gallery__collection[data-photo-count="3"]
.tzir-deck-photo:first-child
.tzir-deck-photo__frame {

    aspect-ratio:
        5 / 4;

}


.tzir-deck-gallery__collection[data-photo-count="3"]
.tzir-deck-photo:nth-child(2)
.tzir-deck-photo__frame,
.tzir-deck-gallery__collection[data-photo-count="3"]
.tzir-deck-photo:nth-child(3)
.tzir-deck-photo__frame {

    aspect-ratio:
        4 / 3;

}



/* =========================================================
   19. FOUR+ IMAGES
   ========================================================= */

.tzir-deck-gallery__collection[data-photo-count="many"]
.tzir-deck-photo {

    grid-column:
        span 6;

}


.tzir-deck-gallery__collection[data-photo-count="many"]
.tzir-deck-photo:nth-child(5n + 1) {

    grid-column:
        span 7;

}


.tzir-deck-gallery__collection[data-photo-count="many"]
.tzir-deck-photo:nth-child(5n + 2) {

    grid-column:
        span 5;

}


.tzir-deck-gallery__collection[data-photo-count="many"]
.tzir-deck-photo:nth-child(5n + 3) {

    grid-column:
        span 5;

}


.tzir-deck-gallery__collection[data-photo-count="many"]
.tzir-deck-photo:nth-child(5n + 4) {

    grid-column:
        span 7;

}


.tzir-deck-gallery__collection[data-photo-count="many"]
.tzir-deck-photo__frame {

    aspect-ratio:
        4 / 3;

}



/* =========================================================
   20. FRAME
   ========================================================= */

.tzir-deck-photo__frame {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    padding:
        8px;

    overflow:
        hidden;

    cursor:
        zoom-in;

    background:
        var(--tzir-white);

    box-shadow:
        var(--tzir-shadow-photo);

    transition:
        transform
        650ms
        var(--tzir-ease-standard),

        box-shadow
        650ms
        var(--tzir-ease-standard);

}


.tzir-deck-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.015);

    transition:
        transform
        900ms
        var(--tzir-ease-standard);

}



/* =========================================================
   21. HOVER
   ========================================================= */

.tzir-deck-photo:hover
.tzir-deck-photo__frame {

    transform:
        translateY(-5px);

    box-shadow:
        0 38px 78px
        rgba(
            23,
            37,
            7,
            0.16
        ),
        0 12px 28px
        rgba(
            50,
            33,
            33,
            0.09
        );

}


.tzir-deck-photo:hover img {

    transform:
        scale(1.055);

}



/* =========================================================
   22. SECOND IMAGE PAPER ROTATION
   ========================================================= */

.tzir-deck-gallery__collection[data-photo-count="2"]
.tzir-deck-photo:nth-child(2)
.tzir-deck-photo__frame {

    transform:
        rotate(1deg);

}


.tzir-deck-gallery__collection[data-photo-count="2"]
.tzir-deck-photo:nth-child(2):hover
.tzir-deck-photo__frame {

    transform:
        translateY(-5px)
        rotate(0);

}



/* =========================================================
   23. OVERLAY
   ========================================================= */

.tzir-deck-photo__overlay {

    position:
        absolute;

    inset:
        8px;

    z-index:
        3;

    pointer-events:
        none;

}



/* =========================================================
   24. NUMBER
   ========================================================= */

.tzir-deck-photo__number {

    position:
        absolute;

    right:
        12px;

    bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        32px;

    height:
        26px;

    padding:
        0
        7px;

    background:
        rgba(
            246,
            245,
            243,
            0.92
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}



/* =========================================================
   25. VIEW LABEL
   ========================================================= */

.tzir-deck-photo__view {

    position:
        absolute;

    left:
        12px;

    bottom:
        12px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px
        10px;

    background:
        rgba(
            50,
            33,
            33,
            0.84
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-white);

    font-size:
        0.49rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        opacity
        330ms
        ease,

        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-deck-photo__view i {

    color:
        #D6C6A8;

    font-style:
        normal;

}


.tzir-deck-photo:hover
.tzir-deck-photo__view {

    opacity:
        1;

    transform:
        translateY(0);

}



/* =========================================================
   26. MISSING IMAGE
   ========================================================= */

.tzir-deck-photo.is-missing {

    display:
        none;

}



/* =========================================================
   27. EDITORIAL PANEL
   ========================================================= */

.tzir-deck-gallery__editorial {

    position:
        relative;

    min-height:
        100%;

    padding:
        clamp(
            28px,
            3vw,
            43px
        );

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    overflow:
        hidden;

    background:
        var(--tzir-bark-900);

    box-shadow:
        0 26px 57px
        rgba(
            50,
            33,
            33,
            0.15
        );

}



/* diagonal wood-like detail */

.tzir-deck-gallery__editorial::before {

    content:
        "";

    position:
        absolute;

    left:
        -20%;

    top:
        48%;

    width:
        140%;

    height:
        1px;

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

    transform:
        rotate(-27deg);

}



/* =========================================================
   28. EDITORIAL INDEX
   ========================================================= */

.tzir-deck-gallery__editorial-index {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        baseline;

    gap:
        20px;

}


.tzir-deck-gallery__editorial-index span {

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

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.tzir-deck-gallery__editorial-index strong {

    color:
        #D6C6A8;

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

    font-size:
        1.5rem;

    font-weight:
        600;

}



/* =========================================================
   29. EDITORIAL COPY
   ========================================================= */

.tzir-deck-gallery__editorial-copy {

    position:
        relative;

    z-index:
        2;

}


.tzir-deck-gallery__editorial-copy > span {

    display:
        block;

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

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

}


.tzir-deck-gallery__editorial-copy > strong {

    display:
        block;

    color:
        var(--tzir-white);

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

    font-size:
        clamp(
            2.4rem,
            3vw,
            3.5rem
        );

    font-weight:
        600;

    line-height:
        0.9;

}


.tzir-deck-gallery__editorial-copy > i {

    display:
        block;

    width:
        45px;

    height:
        1px;

    margin:
        18px
        0
        15px;

    background:
        #D6C6A8;

}


.tzir-deck-gallery__editorial-copy p {

    margin:
        0;

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

    font-size:
        0.77rem;

    line-height:
        1.65;

}



/* =========================================================
   30. SCRIPT
   ========================================================= */

.tzir-deck-gallery__editorial-script {

    position:
        relative;

    z-index:
        2;

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

    font-family:
        var(--tzir-font-script);

    font-size:
        1.02rem;

    transform:
        rotate(-3deg);

}



/* =========================================================
   31. DETAIL FOOTER
   ========================================================= */

.tzir-deck-gallery__detail {

    margin-top:
        31px;

    padding:
        18px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        18px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

}


.tzir-deck-gallery__detail > span {

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

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


.tzir-deck-gallery__detail > i {

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-deck-gallery__detail strong {

    color:
        var(--tzir-moss-700);

    font-family:
        var(--tzir-font-script);

    font-size:
        1.1rem;

    font-weight:
        500;

}



/* =========================================================
   32. NEXT COLLECTION
   ========================================================= */

.tzir-deck-gallery__next {

    margin-top:
        clamp(
            75px,
            7vw,
            110px
        );

    padding-top:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.15
        );

}


.tzir-deck-gallery__next > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.tzir-deck-gallery__next > div > span {

    color:
        var(--tzir-moss-700);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-deck-gallery__next > div > strong {

    color:
        var(--tzir-bark-900);

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

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

    font-weight:
        600;

}


.tzir-deck-gallery__next > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.21
        );

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform
        450ms
        var(--tzir-ease-standard),

        background-color
        320ms
        ease,

        border-color
        320ms
        ease;

}


.tzir-deck-gallery__next > a svg {

    width:
        18px;

    height:
        18px;

    color:
        var(--tzir-leaf-600);

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-deck-gallery__next > a:hover {

    border-color:
        var(--tzir-moss-700);

    background:
        var(--tzir-white);

    transform:
        translateY(-3px);

}


.tzir-deck-gallery__next > a:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   33. ACCESSIBILITY
   ========================================================= */

.tzir-deck-gallery a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}



/* =========================================================
   34. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-deck-photo__frame,
html.tzir-reduced-motion
.tzir-deck-photo img,
html.tzir-reduced-motion
.tzir-deck-photo__view,
html.tzir-reduced-motion
.tzir-deck-gallery__next > a,
html.tzir-reduced-motion
.tzir-deck-gallery__next > a svg {

    transition:
        none !important;

}



/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-deck-gallery__collection[data-photo-count="2"]
    .tzir-deck-gallery__photos {

        min-height:
            620px;

    }

}



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

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

    .tzir-deck-gallery {

        padding:
            100px
            0;

    }


    .tzir-deck-gallery__header {

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

        gap:
            50px;

    }


    .tzir-deck-gallery__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-deck-gallery__collection {

        grid-template-columns:
            minmax(0, 1.48fr)
            minmax(215px, 0.52fr);

        gap:
            27px;

    }


    .tzir-deck-gallery__collection[data-photo-count="2"]
    .tzir-deck-photo:first-child {

        grid-column:
            1 / span 8;

    }


    .tzir-deck-gallery__collection[data-photo-count="2"]
    .tzir-deck-photo:nth-child(2) {

        grid-column:
            8 / span 5;

        margin-top:
            88px;

    }


    .tzir-deck-gallery__editorial {

        padding:
            28px;

    }

}



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

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

    .tzir-deck-gallery {

        padding:
            86px
            0;

    }


    .tzir-deck-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .tzir-deck-gallery__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-deck-gallery__service-bar {

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

        gap:
            20px;

        margin-top:
            42px;

    }


    .tzir-deck-gallery__collection {

        grid-template-columns:
            1fr;

        gap:
            20px;

        margin-top:
            55px;

    }


    .tzir-deck-gallery__photos {

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

        gap:
            16px;

    }


    .tzir-deck-photo,
    .tzir-deck-gallery__collection[data-photo-count]
    .tzir-deck-photo {

        grid-column:
            auto;

        margin:
            0;

    }


    .tzir-deck-gallery__collection[data-photo-count="1"]
    .tzir-deck-photo {

        grid-column:
            1 / -1;

    }


    .tzir-deck-photo__frame,
    .tzir-deck-gallery__collection[data-photo-count]
    .tzir-deck-photo__frame {

        aspect-ratio:
            4 / 5;

        padding:
            5px;

    }


    .tzir-deck-gallery__collection[data-photo-count="1"]
    .tzir-deck-photo__frame {

        aspect-ratio:
            16 / 10;

    }


    .tzir-deck-photo__view {

        opacity:
            1;

        transform:
            none;

    }


    .tzir-deck-gallery__editorial {

        min-height:
            245px;

    }

}



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

@media (max-width: 480px) {

    .tzir-deck-gallery {

        padding:
            72px
            0;

    }


    .tzir-deck-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .tzir-deck-gallery__kicker {

        gap:
            7px;

        margin-bottom:
            11px;

        font-size:
            0.61rem;

    }


    .tzir-deck-gallery__kicker i {

        width:
            22px;

    }


    .tzir-deck-gallery__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-deck-gallery__intro p {

        font-size:
            0.91rem;

        line-height:
            1.63;

    }


    .tzir-deck-gallery__script {

        margin-top:
            17px;

        font-size:
            1.05rem;

    }


    .tzir-deck-gallery__service-bar {

        grid-template-columns:
            1fr
            auto;

        gap:
            18px;

        margin-top:
            35px;

    }


    .tzir-deck-gallery__service-rule {

        display:
            none;

    }


    .tzir-deck-gallery__count span {

        display:
            none;

    }


    .tzir-deck-gallery__collection {

        grid-template-columns:
            1fr;

        gap:
            17px;

        margin-top:
            44px;

    }


    .tzir-deck-gallery__photos {

        grid-template-columns:
            1fr;

        gap:
            17px;

    }


    .tzir-deck-photo,
    .tzir-deck-gallery__collection[data-photo-count]
    .tzir-deck-photo {

        grid-column:
            1;

        width:
            100%;

        margin:
            0;

    }


    .tzir-deck-photo__frame,
    .tzir-deck-gallery__collection[data-photo-count]
    .tzir-deck-photo__frame {

        aspect-ratio:
            4 / 3;

        padding:
            5px;

        transform:
            none !important;

    }


    .tzir-deck-photo:nth-child(even)
    .tzir-deck-photo__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-deck-photo__view {

        left:
            10px;

        bottom:
            10px;

        opacity:
            1;

        transform:
            none;

    }


    .tzir-deck-photo__number {

        right:
            10px;

        bottom:
            10px;

    }


    .tzir-deck-gallery__editorial {

        min-height:
            235px;

        padding:
            25px;

    }


    .tzir-deck-gallery__detail {

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

    }


    .tzir-deck-gallery__detail
    > span:nth-of-type(2),
    .tzir-deck-gallery__detail strong {

        display:
            none;

    }


    .tzir-deck-gallery__next {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            58px;

    }


    .tzir-deck-gallery__next > a {

        width:
            100%;

        justify-content:
            space-between;

    }


    .tzir-deck-gallery__lines {

        right:
            -15%;

        width:
            58%;

        height:
            300px;

    }

}














































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   11. POWER WASHING
   ========================================================= */


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

.tzir-power-gallery {

    position:
        relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(100px, 8vw, 140px);

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            145deg,
            #F5F4EF 0%,
            #EBECE5 52%,
            #F5F2EA 100%
        );

}



/* =========================================================
   02. GRAIN
   ========================================================= */

.tzir-power-gallery::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        0.027;

    mix-blend-mode:
        multiply;

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

}



/* =========================================================
   03. GREEN GLOW
   ========================================================= */

.tzir-power-gallery::after {

    content:
        "";

    position:
        absolute;

    top:
        18%;

    right:
        -170px;

    z-index:
        -4;

    width:
        570px;

    height:
        570px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        rgba(
            95,
            119,
            40,
            0.07
        );

    filter:
        blur(95px);

}



/* =========================================================
   04. FLOW LINES
   ========================================================= */

.tzir-power-gallery__flow {

    position:
        absolute;

    top:
        5%;

    right:
        -8%;

    z-index:
        -2;

    width:
        min(
            54vw,
            850px
        );

    height:
        600px;

    pointer-events:
        none;

    opacity:
        0.38;

}


.tzir-power-gallery__flow svg {

    width:
        100%;

    height:
        100%;

}


.tzir-power-gallery__flow path {

    fill:
        none;

    stroke:
        rgba(
            62,
            83,
            28,
            0.13
        );

    stroke-width:
        1;

}



/* =========================================================
   05. TOPOGRAPHY
   ========================================================= */

.tzir-power-gallery__topography {

    position:
        absolute;

    left:
        -210px;

    bottom:
        -130px;

    z-index:
        -3;

    width:
        760px;

    height:
        620px;

    pointer-events:
        none;

    opacity:
        0.35;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.065' d='M-80 109C92 24 216 175 372 110S638 28 850 147'/%3E%3Cpath opacity='.042' d='M-77 152C104 67 235 217 396 152S664 82 853 192'/%3E%3Cpath opacity='.055' d='M-82 497C111 398 255 550 427 483S705 420 852 527'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

}



/* =========================================================
   06. CONTAINER
   ========================================================= */

.tzir-power-gallery__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   07. HEADER
   ========================================================= */

.tzir-power-gallery__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    align-items:
        end;

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

}



/* =========================================================
   08. KICKER
   ========================================================= */

.tzir-power-gallery__kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.68rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-power-gallery__kicker i {

    width:
        31px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.35
        );

}



/* =========================================================
   09. TITLE
   ========================================================= */

.tzir-power-gallery__title {

    max-width:
        820px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-power-gallery__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



/* =========================================================
   10. INTRO
   ========================================================= */

.tzir-power-gallery__intro {

    max-width:
        470px;

}


.tzir-power-gallery__intro p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-power-gallery__script {

    display:
        inline-flex;

    flex-direction:
        column;

    margin-top:
        21px;

    color:
        rgba(
            50,
            33,
            33,
            0.54
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-power-gallery__script i {

    width:
        72px;

    height:
        2px;

    margin:
        8px
        0
        0
        43px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-4deg);

}



/* =========================================================
   11. SERVICE BAR
   ========================================================= */

.tzir-power-gallery__service-bar {

    margin-top:
        clamp(
            52px,
            5vw,
            72px
        );

    padding:
        22px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        30px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-power-gallery__service-name {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.tzir-power-gallery__service-name span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.tzir-power-gallery__service-name strong {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-power-gallery__service-rule i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(
                50,
                33,
                33,
                0.06
            ),
            rgba(
                95,
                119,
                40,
                0.38
            ),
            rgba(
                50,
                33,
                33,
                0.06
            )
        );

}



/* =========================================================
   12. COUNT
   ========================================================= */

.tzir-power-gallery__count {

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    white-space:
        nowrap;

}


.tzir-power-gallery__count strong {

    color:
        var(--tzir-moss-700);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-power-gallery__count span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



/* =========================================================
   13. COLLECTION
   ========================================================= */

.tzir-power-gallery__collection {

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

    display:
        grid;

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

    grid-auto-flow:
        dense;

    gap:
        clamp(
            17px,
            1.9vw,
            28px
        );

}



/* =========================================================
   14. DEFAULT PHOTO
   ========================================================= */

.tzir-power-photo {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

    grid-column:
        span 6;

}



/* =========================================================
   15. ONE IMAGE
   ========================================================= */

.tzir-power-gallery__collection[data-photo-count="1"]
.tzir-power-photo {

    grid-column:
        2 / span 10;

}


.tzir-power-gallery__collection[data-photo-count="1"]
.tzir-power-photo__frame {

    aspect-ratio:
        16 / 9;

}



/* =========================================================
   16. TWO IMAGES
   ========================================================= */

.tzir-power-gallery__collection[data-photo-count="2"]
.tzir-power-photo {

    grid-column:
        span 6;

}


.tzir-power-gallery__collection[data-photo-count="2"]
.tzir-power-photo__frame {

    aspect-ratio:
        4 / 3;

}



/* =========================================================
   17. THREE IMAGES
   ========================================================= */

.tzir-power-gallery__collection[data-photo-count="3"]
.tzir-power-photo:nth-child(1) {

    grid-column:
        1 / span 7;

}


.tzir-power-gallery__collection[data-photo-count="3"]
.tzir-power-photo:nth-child(2),
.tzir-power-gallery__collection[data-photo-count="3"]
.tzir-power-photo:nth-child(3) {

    grid-column:
        8 / span 5;

}


.tzir-power-gallery__collection[data-photo-count="3"]
.tzir-power-photo:nth-child(1)
.tzir-power-photo__frame {

    aspect-ratio:
        5 / 4;

}


.tzir-power-gallery__collection[data-photo-count="3"]
.tzir-power-photo:nth-child(2)
.tzir-power-photo__frame,
.tzir-power-gallery__collection[data-photo-count="3"]
.tzir-power-photo:nth-child(3)
.tzir-power-photo__frame {

    aspect-ratio:
        16 / 10;

}



/* =========================================================
   18. FOUR IMAGES
   ========================================================= */

.tzir-power-gallery__collection[data-photo-count="4"]
.tzir-power-photo {

    grid-column:
        span 6;

}


.tzir-power-gallery__collection[data-photo-count="4"]
.tzir-power-photo:nth-child(1)
.tzir-power-photo__frame,
.tzir-power-gallery__collection[data-photo-count="4"]
.tzir-power-photo:nth-child(4)
.tzir-power-photo__frame {

    aspect-ratio:
        16 / 10;

}


.tzir-power-gallery__collection[data-photo-count="4"]
.tzir-power-photo:nth-child(2)
.tzir-power-photo__frame,
.tzir-power-gallery__collection[data-photo-count="4"]
.tzir-power-photo:nth-child(3)
.tzir-power-photo__frame {

    aspect-ratio:
        4 / 5;

}



/* =========================================================
   19. FIVE OR MORE
   ========================================================= */

.tzir-power-gallery__collection[data-photo-count="many"]
.tzir-power-photo:nth-child(5n + 1) {

    grid-column:
        span 7;

}


.tzir-power-gallery__collection[data-photo-count="many"]
.tzir-power-photo:nth-child(5n + 2) {

    grid-column:
        span 5;

}


.tzir-power-gallery__collection[data-photo-count="many"]
.tzir-power-photo:nth-child(5n + 3) {

    grid-column:
        span 5;

}


.tzir-power-gallery__collection[data-photo-count="many"]
.tzir-power-photo:nth-child(5n + 4) {

    grid-column:
        span 7;

}


.tzir-power-gallery__collection[data-photo-count="many"]
.tzir-power-photo:nth-child(5n + 5) {

    grid-column:
        3 / span 8;

}


.tzir-power-gallery__collection[data-photo-count="many"]
.tzir-power-photo__frame {

    aspect-ratio:
        4 / 3;

}


.tzir-power-gallery__collection[data-photo-count="many"]
.tzir-power-photo:nth-child(5n + 2)
.tzir-power-photo__frame,
.tzir-power-gallery__collection[data-photo-count="many"]
.tzir-power-photo:nth-child(5n + 3)
.tzir-power-photo__frame {

    aspect-ratio:
        4 / 5;

}



/* =========================================================
   20. FRAME
   ========================================================= */

.tzir-power-photo__frame {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    padding:
        7px;

    overflow:
        hidden;

    cursor:
        zoom-in;

    background:
        var(--tzir-white);

    box-shadow:
        var(--tzir-shadow-photo);

    transition:
        transform
        650ms
        var(--tzir-ease-standard),

        box-shadow
        650ms
        var(--tzir-ease-standard);

}


.tzir-power-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.015);

    transition:
        transform
        900ms
        var(--tzir-ease-standard);

}



/* =========================================================
   21. HOVER
   ========================================================= */

.tzir-power-photo:hover
.tzir-power-photo__frame {

    transform:
        translateY(-5px);

    box-shadow:
        0 38px 78px
        rgba(
            23,
            37,
            7,
            0.16
        ),
        0 12px 28px
        rgba(
            50,
            33,
            33,
            0.08
        );

}


.tzir-power-photo:hover img {

    transform:
        scale(1.055);

}



/* =========================================================
   22. SUBTLE ROTATIONS
   ========================================================= */

.tzir-power-photo:nth-child(4n + 2)
.tzir-power-photo__frame {

    transform:
        rotate(0.45deg);

}


.tzir-power-photo:nth-child(4n + 3)
.tzir-power-photo__frame {

    transform:
        rotate(-0.45deg);

}


.tzir-power-photo:nth-child(4n + 2):hover
.tzir-power-photo__frame,
.tzir-power-photo:nth-child(4n + 3):hover
.tzir-power-photo__frame {

    transform:
        translateY(-5px)
        rotate(0);

}



/* =========================================================
   23. OVERLAY
   ========================================================= */

.tzir-power-photo__overlay {

    position:
        absolute;

    inset:
        7px;

    z-index:
        3;

    pointer-events:
        none;

}



/* =========================================================
   24. NUMBER
   ========================================================= */

.tzir-power-photo__number {

    position:
        absolute;

    right:
        12px;

    bottom:
        12px;

    min-width:
        32px;

    height:
        26px;

    padding:
        0
        7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            246,
            245,
            243,
            0.92
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}



/* =========================================================
   25. VIEW LABEL
   ========================================================= */

.tzir-power-photo__view {

    position:
        absolute;

    left:
        12px;

    bottom:
        12px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px
        10px;

    background:
        rgba(
            23,
            37,
            7,
            0.84
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-white);

    font-size:
        0.49rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        opacity
        330ms
        ease,

        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-power-photo__view i {

    color:
        #C5D391;

    font-style:
        normal;

}


.tzir-power-photo:hover
.tzir-power-photo__view {

    opacity:
        1;

    transform:
        translateY(0);

}



/* =========================================================
   26. MISSING IMAGES
   ========================================================= */

.tzir-power-photo.is-missing {

    display:
        none;

}



/* =========================================================
   27. DETAIL BAND
   ========================================================= */

.tzir-power-gallery__detail {

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

    padding:
        21px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        21px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

}


.tzir-power-gallery__detail-index {

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

}


.tzir-power-gallery__detail-index span {

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

    font-size:
        0.5rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


.tzir-power-gallery__detail-index strong {

    color:
        var(--tzir-moss-700);

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

    font-size:
        1.5rem;

    font-weight:
        600;

}


.tzir-power-gallery__detail-line i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-power-gallery__detail-copy {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

}


.tzir-power-gallery__detail-copy span {

    color:
        var(--tzir-bark-900);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.tzir-power-gallery__detail-copy small {

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

    font-size:
        0.51rem;

    font-weight:
        600;

}


.tzir-power-gallery__detail-script {

    color:
        var(--tzir-moss-700);

    font-family:
        var(--tzir-font-script);

    font-size:
        1.08rem;

    transform:
        rotate(-3deg);

}



/* =========================================================
   28. NEXT
   ========================================================= */

.tzir-power-gallery__next {

    margin-top:
        clamp(
            75px,
            7vw,
            110px
        );

    padding-top:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.15
        );

}


.tzir-power-gallery__next > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.tzir-power-gallery__next > div > span {

    color:
        var(--tzir-moss-700);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-power-gallery__next > div > strong {

    color:
        var(--tzir-bark-900);

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

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

    font-weight:
        600;

}


.tzir-power-gallery__next > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.21
        );

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform
        450ms
        var(--tzir-ease-standard),

        background-color
        320ms
        ease,

        border-color
        320ms
        ease;

}


.tzir-power-gallery__next > a svg {

    width:
        18px;

    height:
        18px;

    color:
        var(--tzir-leaf-600);

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-power-gallery__next > a:hover {

    border-color:
        var(--tzir-moss-700);

    background:
        var(--tzir-white);

    transform:
        translateY(-3px);

}


.tzir-power-gallery__next > a:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   29. ACCESSIBILITY
   ========================================================= */

.tzir-power-gallery a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}



/* =========================================================
   30. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-power-photo__frame,
html.tzir-reduced-motion
.tzir-power-photo img,
html.tzir-reduced-motion
.tzir-power-photo__view,
html.tzir-reduced-motion
.tzir-power-gallery__next > a,
html.tzir-reduced-motion
.tzir-power-gallery__next > a svg {

    transition:
        none !important;

}



/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-power-gallery__collection[data-photo-count="3"]
    .tzir-power-photo:nth-child(2) {

        margin-top:
            38px;

    }


    .tzir-power-gallery__collection[data-photo-count="many"]
    .tzir-power-photo:nth-child(5n + 5) {

        margin-top:
            20px;

    }

}



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

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

    .tzir-power-gallery {

        padding:
            100px
            0;

    }


    .tzir-power-gallery__header {

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

        gap:
            50px;

    }


    .tzir-power-gallery__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-power-gallery__collection {

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

        gap:
            19px;

    }


    .tzir-power-photo,
    .tzir-power-gallery__collection[data-photo-count]
    .tzir-power-photo {

        grid-column:
            span 4;

        margin-top:
            0;

    }


    .tzir-power-gallery__collection[data-photo-count="1"]
    .tzir-power-photo {

        grid-column:
            1 / -1;

    }


    .tzir-power-gallery__collection[data-photo-count="3"]
    .tzir-power-photo:first-child {

        grid-column:
            span 5;

    }


    .tzir-power-gallery__collection[data-photo-count="3"]
    .tzir-power-photo:nth-child(2) {

        grid-column:
            span 3;

    }


    .tzir-power-gallery__collection[data-photo-count="3"]
    .tzir-power-photo:nth-child(3) {

        grid-column:
            2 / span 6;

    }


    .tzir-power-gallery__collection[data-photo-count="many"]
    .tzir-power-photo:nth-child(5n + 1) {

        grid-column:
            span 5;

    }


    .tzir-power-gallery__collection[data-photo-count="many"]
    .tzir-power-photo:nth-child(5n + 2) {

        grid-column:
            span 3;

    }


    .tzir-power-gallery__collection[data-photo-count="many"]
    .tzir-power-photo:nth-child(5n + 5) {

        grid-column:
            2 / span 6;

    }

}



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

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

    .tzir-power-gallery {

        padding:
            86px
            0;

    }


    .tzir-power-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .tzir-power-gallery__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-power-gallery__service-bar {

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

        gap:
            20px;

        margin-top:
            42px;

    }


    .tzir-power-gallery__collection {

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

        gap:
            16px;

        margin-top:
            55px;

    }


    .tzir-power-photo,
    .tzir-power-gallery__collection[data-photo-count]
    .tzir-power-photo {

        grid-column:
            auto;

        width:
            auto;

        margin:
            0;

    }


    .tzir-power-photo__frame,
    .tzir-power-gallery__collection[data-photo-count]
    .tzir-power-photo__frame {

        aspect-ratio:
            4 / 5;

        padding:
            5px;

    }


    .tzir-power-photo:nth-child(3n + 1) {

        grid-column:
            1 / -1 !important;

    }


    .tzir-power-photo:nth-child(3n + 1)
    .tzir-power-photo__frame {

        aspect-ratio:
            16 / 10;

    }


    .tzir-power-photo__view {

        opacity:
            1;

        transform:
            none;

    }


    .tzir-power-gallery__detail {

        grid-template-columns:
            auto
            1fr
            auto;

    }


    .tzir-power-gallery__detail-script {

        display:
            none;

    }

}



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

@media (max-width: 480px) {

    .tzir-power-gallery {

        padding:
            72px
            0;

    }


    .tzir-power-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .tzir-power-gallery__kicker {

        gap:
            7px;

        margin-bottom:
            11px;

        font-size:
            0.61rem;

    }


    .tzir-power-gallery__kicker i {

        width:
            22px;

    }


    .tzir-power-gallery__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-power-gallery__intro p {

        font-size:
            0.91rem;

        line-height:
            1.63;

    }


    .tzir-power-gallery__script {

        margin-top:
            17px;

        font-size:
            1.05rem;

    }


    .tzir-power-gallery__service-bar {

        grid-template-columns:
            1fr
            auto;

        gap:
            18px;

        margin-top:
            35px;

    }


    .tzir-power-gallery__service-rule {

        display:
            none;

    }


    .tzir-power-gallery__count span {

        display:
            none;

    }


    .tzir-power-gallery__collection {

        grid-template-columns:
            1fr;

        gap:
            17px;

        margin-top:
            44px;

    }


    .tzir-power-photo,
    .tzir-power-photo:nth-child(n),
    .tzir-power-gallery__collection[data-photo-count]
    .tzir-power-photo {

        grid-column:
            1 !important;

        width:
            100%;

        margin:
            0 !important;

    }


    .tzir-power-photo__frame,
    .tzir-power-gallery__collection[data-photo-count]
    .tzir-power-photo__frame {

        aspect-ratio:
            4 / 3;

        padding:
            5px;

        transform:
            none !important;

    }


    .tzir-power-photo:nth-child(even)
    .tzir-power-photo__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-power-photo__view {

        left:
            10px;

        bottom:
            10px;

        opacity:
            1;

        transform:
            none;

    }


    .tzir-power-photo__number {

        right:
            10px;

        bottom:
            10px;

    }


    .tzir-power-gallery__detail {

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

        gap:
            15px;

        margin-top:
            48px;

    }


    .tzir-power-gallery__detail-copy,
    .tzir-power-gallery__detail-script {

        display:
            none;

    }


    .tzir-power-gallery__next {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            58px;

    }


    .tzir-power-gallery__next > a {

        width:
            100%;

        justify-content:
            space-between;

    }


    .tzir-power-gallery__flow {

        top:
            8%;

        right:
            -40%;

        width:
            90%;

        height:
            350px;

    }

}













































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   12. SNOW PLOWING
   ========================================================= */


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

.tzir-snow-gallery {

    position:
        relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(100px, 8vw, 140px);

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            140deg,
            #F5F5F1 0%,
            #E9EBE5 48%,
            #F3F0E9 100%
        );

}



/* =========================================================
   02. MINERAL GRAIN
   ========================================================= */

.tzir-snow-gallery::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        0.026;

    mix-blend-mode:
        multiply;

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

}



/* =========================================================
   03. COOL LIGHT
   ========================================================= */

.tzir-snow-gallery__light {

    position:
        absolute;

    top:
        19%;

    right:
        -160px;

    z-index:
        -4;

    width:
        580px;

    height:
        580px;

    pointer-events:
        none;

    border-radius:
        50%;

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

    filter:
        blur(95px);

}



/* =========================================================
   04. CONTOUR LINES
   ========================================================= */

.tzir-snow-gallery__contours {

    position:
        absolute;

    top:
        0;

    right:
        -9%;

    z-index:
        -3;

    width:
        min(
            61vw,
            960px
        );

    height:
        670px;

    pointer-events:
        none;

    opacity:
        0.48;

}


.tzir-snow-gallery__contours svg {

    width:
        100%;

    height:
        100%;

}


.tzir-snow-gallery__contours path {

    fill:
        none;

    stroke:
        rgba(
            39,
            62,
            10,
            0.095
        );

    stroke-width:
        1;

}



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

.tzir-snow-gallery__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   06. HEADER
   ========================================================= */

.tzir-snow-gallery__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    align-items:
        end;

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

}



/* =========================================================
   07. KICKER
   ========================================================= */

.tzir-snow-gallery__kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-snow-gallery__kicker i {

    width:
        31px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.35
        );

}



/* =========================================================
   08. TITLE
   ========================================================= */

.tzir-snow-gallery__title {

    max-width:
        820px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-snow-gallery__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



/* =========================================================
   09. INTRO
   ========================================================= */

.tzir-snow-gallery__intro {

    max-width:
        470px;

}


.tzir-snow-gallery__intro p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-snow-gallery__script {

    display:
        inline-flex;

    flex-direction:
        column;

    margin-top:
        21px;

    color:
        rgba(
            50,
            33,
            33,
            0.53
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-snow-gallery__script i {

    width:
        72px;

    height:
        2px;

    margin:
        8px
        0
        0
        44px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-4deg);

}



/* =========================================================
   10. SERVICE BAR
   ========================================================= */

.tzir-snow-gallery__service-bar {

    margin-top:
        clamp(
            52px,
            5vw,
            72px
        );

    padding:
        22px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        30px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

}


.tzir-snow-gallery__service-name {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.tzir-snow-gallery__service-name span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.tzir-snow-gallery__service-name strong {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-snow-gallery__service-rule i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(
                50,
                33,
                33,
                0.05
            ),
            rgba(
                95,
                119,
                40,
                0.34
            ),
            rgba(
                50,
                33,
                33,
                0.05
            )
        );

}



/* =========================================================
   11. COUNT
   ========================================================= */

.tzir-snow-gallery__media-count {

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    white-space:
        nowrap;

}


.tzir-snow-gallery__media-count strong {

    color:
        var(--tzir-moss-700);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-snow-gallery__media-count span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



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

.tzir-snow-gallery__collection {

    position:
        relative;

    display:
        grid;

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

    align-items:
        center;

    gap:
        clamp(
            24px,
            4vw,
            62px
        );

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

}



/* =========================================================
   13. MEDIA ITEM
   ========================================================= */

.tzir-snow-media {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

}


.tzir-snow-media--video {

    margin-top:
        82px;

}



/* =========================================================
   14. CLICKABLE BUTTON
   ========================================================= */

.tzir-snow-media__button {

    display:
        block;

    width:
        100%;

    margin:
        0;

    padding:
        0;

    border:
        0;

    text-align:
        inherit;

    cursor:
        zoom-in;

    background:
        transparent;

}


.tzir-snow-media--video
.tzir-snow-media__button {

    cursor:
        pointer;

}



/* =========================================================
   15. FRAME
   ========================================================= */

.tzir-snow-media__frame {

    position:
        relative;

    display:
        block;

    width:
        100%;

    padding:
        8px;

    overflow:
        hidden;

    background:
        var(--tzir-white);

    box-shadow:
        var(--tzir-shadow-photo);

    transition:
        transform
        650ms
        var(--tzir-ease-standard),

        box-shadow
        650ms
        var(--tzir-ease-standard);

}


.tzir-snow-media--image
.tzir-snow-media__frame {

    aspect-ratio:
        16 / 10;

}


.tzir-snow-media--video
.tzir-snow-media__frame {

    aspect-ratio:
        4 / 5;

    transform:
        rotate(0.7deg);

}



/* =========================================================
   16. IMAGE / VIDEO PREVIEW
   ========================================================= */

.tzir-snow-media img,
.tzir-snow-media__preview-video {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    pointer-events:
        none;

    transform:
        scale(1.015);

    transition:
        transform
        900ms
        var(--tzir-ease-standard),

        filter
        500ms
        ease;

}



/* =========================================================
   17. MEDIA HOVER
   ========================================================= */

.tzir-snow-media__button:hover
.tzir-snow-media__frame {

    transform:
        translateY(-5px);

    box-shadow:
        0 40px 82px
        rgba(
            23,
            37,
            7,
            0.17
        ),
        0 13px 30px
        rgba(
            50,
            33,
            33,
            0.08
        );

}


.tzir-snow-media--video
.tzir-snow-media__button:hover
.tzir-snow-media__frame {

    transform:
        translateY(-5px)
        rotate(0);

}


.tzir-snow-media__button:hover img,
.tzir-snow-media__button:hover
.tzir-snow-media__preview-video {

    transform:
        scale(1.05);

}



/* =========================================================
   18. OVERLAY
   ========================================================= */

.tzir-snow-media__overlay {

    position:
        absolute;

    inset:
        8px;

    z-index:
        4;

    display:
        block;

    pointer-events:
        none;

}



/* =========================================================
   19. MEDIA TYPE
   ========================================================= */

.tzir-snow-media__type {

    position:
        absolute;

    top:
        13px;

    left:
        13px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        30px;

    padding:
        0
        10px;

    background:
        rgba(
            246,
            245,
            243,
            0.91
        );

    backdrop-filter:
        blur(9px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.5rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

}


.tzir-snow-media__type svg {

    width:
        15px;

    height:
        15px;

}



/* =========================================================
   20. NUMBER
   ========================================================= */

.tzir-snow-media__number {

    position:
        absolute;

    right:
        13px;

    bottom:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        33px;

    height:
        27px;

    padding:
        0
        7px;

    background:
        rgba(
            246,
            245,
            243,
            0.91
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}



/* =========================================================
   21. VIEW LABEL
   ========================================================= */

.tzir-snow-media__view {

    position:
        absolute;

    left:
        13px;

    bottom:
        13px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px
        10px;

    background:
        rgba(
            23,
            37,
            7,
            0.84
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-white);

    font-size:
        0.49rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        opacity
        330ms
        ease,

        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-snow-media__view i {

    color:
        #C5D391;

    font-style:
        normal;

}


.tzir-snow-media__button:hover
.tzir-snow-media__view {

    opacity:
        1;

    transform:
        translateY(0);

}



/* =========================================================
   22. PLAY BUTTON
   ========================================================= */

.tzir-snow-media__play {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    z-index:
        5;

    width:
        clamp(
            64px,
            6vw,
            88px
        );

    height:
        clamp(
            64px,
            6vw,
            88px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        var(--tzir-white);

    background:
        rgba(
            23,
            37,
            7,
            0.7
        );

    backdrop-filter:
        blur(9px);

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

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

    transition:
        transform
        450ms
        var(--tzir-ease-standard),

        background-color
        350ms
        ease;

}


.tzir-snow-media__play svg {

    width:
        62%;

    height:
        62%;

}


.tzir-snow-media__button:hover
.tzir-snow-media__play {

    background:
        rgba(
            23,
            37,
            7,
            0.88
        );

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.07);

}



/* =========================================================
   23. MEDIA NOTE
   ========================================================= */

.tzir-snow-gallery__media-note {

    margin-top:
        clamp(
            56px,
            6vw,
            82px
        );

    padding:
        20px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        35px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

}


.tzir-snow-gallery__media-note > div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.tzir-snow-gallery__media-note > div span {

    color:
        var(--tzir-moss-700);

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.tzir-snow-gallery__media-note > div i {

    width:
        24px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.3
        );

}


.tzir-snow-gallery__media-note p {

    max-width:
        500px;

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.74rem;

    line-height:
        1.6;

}


.tzir-snow-gallery__media-note-script {

    color:
        rgba(
            50,
            33,
            33,
            0.52
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.04rem;

    transform:
        rotate(-2deg);

}



/* =========================================================
   24. NEXT COLLECTION
   ========================================================= */

.tzir-snow-gallery__next {

    margin-top:
        clamp(
            75px,
            7vw,
            110px
        );

    padding-top:
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.15
        );

}


.tzir-snow-gallery__next > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

}


.tzir-snow-gallery__next > div > span {

    color:
        var(--tzir-moss-700);

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-snow-gallery__next > div > strong {

    color:
        var(--tzir-bark-900);

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

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

    font-weight:
        600;

}


.tzir-snow-gallery__next > a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0
        18px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.21
        );

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;

    transition:
        transform
        450ms
        var(--tzir-ease-standard),

        background-color
        320ms
        ease,

        border-color
        320ms
        ease;

}


.tzir-snow-gallery__next > a svg {

    width:
        18px;

    height:
        18px;

    color:
        var(--tzir-leaf-600);

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-snow-gallery__next > a:hover {

    border-color:
        var(--tzir-moss-700);

    background:
        var(--tzir-white);

    transform:
        translateY(-3px);

}


.tzir-snow-gallery__next > a:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   25. FOCUS
   ========================================================= */

.tzir-snow-media__button:focus-visible,
.tzir-snow-gallery__next > a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        5px;

}



/* =========================================================
   26. FULLSCREEN MEDIA VIEWER
   ========================================================= */

.tzir-snow-viewer {

    position:
        fixed;

    inset:
        0;

    z-index:
        100000;

    display:
        grid;

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

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    color:
        var(--tzir-white);

    transition:
        opacity
        380ms
        ease,

        visibility
        380ms
        ease;

}



/* Open viewer */

.tzir-snow-viewer.is-open {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}



/* =========================================================
   27. VIEWER BACKDROP
   ========================================================= */

.tzir-snow-viewer__backdrop {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background:
        rgba(
            11,
            17,
            7,
            0.965
        );

}



/* subtle contours */

.tzir-snow-viewer::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    opacity:
        0.13;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath opacity='.22' d='M-80 115C128 15 271 189 444 117S743 32 982 168'/%3E%3Cpath opacity='.14' d='M-77 158C141 61 291 231 467 159S769 80 985 211'/%3E%3Cpath opacity='.18' d='M-82 478C143 367 309 529 493 458S792 393 990 510'/%3E%3C/g%3E%3C/svg%3E"
        );

}



/* =========================================================
   28. VIEWER TOP
   ========================================================= */

.tzir-snow-viewer__top {

    min-width:
        0;

    min-height:
        82px;

    padding:
        17px
        clamp(
            20px,
            3vw,
            46px
        );

    display:
        grid;

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

    align-items:
        center;

    gap:
        26px;

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

}


.tzir-snow-viewer__identity {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.tzir-snow-viewer__identity span {

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

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-snow-viewer__identity strong {

    overflow:
        hidden;

    color:
        var(--tzir-white);

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

    font-size:
        1.45rem;

    font-weight:
        600;

    line-height:
        1;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}



/* =========================================================
   29. VIEWER COUNTER
   ========================================================= */

.tzir-snow-viewer__counter {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

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

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

}


.tzir-snow-viewer__counter
span:first-child {

    color:
        #C5D391;

}


.tzir-snow-viewer__counter i {

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

    font-style:
        normal;

}



/* =========================================================
   30. CLOSE BUTTON
   ========================================================= */

.tzir-snow-viewer__close {

    position:
        relative;

    width:
        46px;

    height:
        46px;

    padding:
        0;

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

    cursor:
        pointer;

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

    transition:
        background-color
        300ms
        ease,

        border-color
        300ms
        ease,

        transform
        400ms
        var(--tzir-ease-standard);

}


.tzir-snow-viewer__close span {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        18px;

    height:
        1px;

    background:
        var(--tzir-white);

}


.tzir-snow-viewer__close span:first-child {

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

}


.tzir-snow-viewer__close span:last-child {

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

}


.tzir-snow-viewer__close:hover {

    border-color:
        rgba(
            197,
            211,
            145,
            0.5
        );

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

    transform:
        rotate(4deg);

}



/* =========================================================
   31. VIEWER STAGE
   ========================================================= */

.tzir-snow-viewer__stage {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        12px;

    padding:
        24px
        clamp(
            10px,
            2vw,
            26px
        );

}



/* =========================================================
   32. VIEWER MEDIA
   ========================================================= */

.tzir-snow-viewer__media {

    width:
        100%;

    height:
        100%;

    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

}


.tzir-snow-viewer__image,
.tzir-snow-viewer__video {

    display:
        block;

    max-width:
        100%;

    max-height:
        100%;

    object-fit:
        contain;

}


.tzir-snow-viewer__image[hidden],
.tzir-snow-viewer__video[hidden] {

    display:
        none;

}


.tzir-snow-viewer__video {

    width:
        min(
            100%,
            1180px
        );

}



/* =========================================================
   33. VIEWER ARROWS
   ========================================================= */

.tzir-snow-viewer__arrow {

    width:
        54px;

    height:
        54px;

    justify-self:
        center;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    cursor:
        pointer;

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

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

    transition:
        color
        300ms
        ease,

        background-color
        300ms
        ease,

        border-color
        300ms
        ease,

        transform
        400ms
        var(--tzir-ease-standard);

}


.tzir-snow-viewer__arrow svg {

    width:
        22px;

    height:
        22px;

}


.tzir-snow-viewer__arrow:hover {

    border-color:
        rgba(
            197,
            211,
            145,
            0.46
        );

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

    color:
        #C5D391;

}


.tzir-snow-viewer__arrow--prev:hover {

    transform:
        translateX(-3px);

}


.tzir-snow-viewer__arrow--next:hover {

    transform:
        translateX(3px);

}



/* =========================================================
   34. VIEWER BOTTOM
   ========================================================= */

.tzir-snow-viewer__bottom {

    min-height:
        70px;

    padding:
        13px
        clamp(
            20px,
            3vw,
            46px
        );

    display:
        grid;

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

    align-items:
        center;

    gap:
        22px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

}


.tzir-snow-viewer__bottom > span {

    color:
        #C5D391;

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.tzir-snow-viewer__bottom p {

    margin:
        0;

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

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

    font-size:
        1.05rem;

    font-weight:
        600;

}


.tzir-snow-viewer__bottom small {

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

    font-size:
        0.52rem;

    font-weight:
        600;

}



/* =========================================================
   35. VIEWER FOCUS
   ========================================================= */

.tzir-snow-viewer button:focus-visible {

    outline:
        2px solid
        #C5D391;

    outline-offset:
        4px;

}



/* =========================================================
   36. VIEWER SCROLL LOCK
   ========================================================= */

html.tzir-snow-viewer-open,
html.tzir-snow-viewer-open body {

    overflow:
        hidden;

}



/* =========================================================
   37. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-snow-media__frame,
html.tzir-reduced-motion
.tzir-snow-media img,
html.tzir-reduced-motion
.tzir-snow-media__preview-video,
html.tzir-reduced-motion
.tzir-snow-media__play,
html.tzir-reduced-motion
.tzir-snow-media__view,
html.tzir-reduced-motion
.tzir-snow-viewer,
html.tzir-reduced-motion
.tzir-snow-viewer button,
html.tzir-reduced-motion
.tzir-snow-gallery__next > a {

    transition:
        none !important;

}



/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-snow-gallery__collection {

        padding:
            0
            3%;

    }


    .tzir-snow-media--image {

        transform:
            translateY(-12px);

    }


    .tzir-snow-media--video {

        width:
            88%;

        justify-self:
            center;

    }

}



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

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

    .tzir-snow-gallery {

        padding:
            100px
            0;

    }


    .tzir-snow-gallery__header {

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

        gap:
            50px;

    }


    .tzir-snow-gallery__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-snow-gallery__collection {

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

        gap:
            30px;

    }


    .tzir-snow-media--video {

        margin-top:
            56px;

    }


    .tzir-snow-gallery__media-note {

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

        gap:
            28px;

    }


    .tzir-snow-gallery__media-note-script {

        display:
            none;

    }


    .tzir-snow-viewer__stage {

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

    }

}



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

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

    .tzir-snow-gallery {

        padding:
            86px
            0;

    }


    .tzir-snow-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .tzir-snow-gallery__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-snow-gallery__service-bar {

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

        gap:
            20px;

        margin-top:
            42px;

    }


    .tzir-snow-gallery__collection {

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

        gap:
            16px;

        margin-top:
            55px;

    }


    .tzir-snow-media--video {

        margin-top:
            42px;

    }


    .tzir-snow-media__frame {

        padding:
            5px;

    }


    .tzir-snow-media--image
    .tzir-snow-media__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-snow-media--video
    .tzir-snow-media__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-snow-media__view {

        opacity:
            1;

        transform:
            none;

    }


    .tzir-snow-gallery__media-note {

        grid-template-columns:
            1fr;

        gap:
            13px;

    }


    .tzir-snow-gallery__media-note-script {

        display:
            none;

    }


    .tzir-snow-viewer__top {

        min-height:
            70px;

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

        gap:
            16px;

    }


    .tzir-snow-viewer__counter {

        display:
            none;

    }


    .tzir-snow-viewer__stage {

        grid-template-columns:
            1fr;

        padding:
            18px;

    }


    .tzir-snow-viewer__arrow {

        position:
            absolute;

        z-index:
            5;

        top:
            50%;

        width:
            46px;

        height:
            46px;

        transform:
            translateY(-50%);

    }


    .tzir-snow-viewer__arrow--prev {

        left:
            16px;

    }


    .tzir-snow-viewer__arrow--next {

        right:
            16px;

    }


    .tzir-snow-viewer__bottom {

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

    }


    .tzir-snow-viewer__bottom small {

        display:
            none;

    }

}



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

@media (max-width: 480px) {

    .tzir-snow-gallery {

        padding:
            72px
            0;

    }


    .tzir-snow-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .tzir-snow-gallery__kicker {

        gap:
            7px;

        margin-bottom:
            11px;

        font-size:
            0.61rem;

    }


    .tzir-snow-gallery__kicker i {

        width:
            22px;

    }


    .tzir-snow-gallery__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-snow-gallery__intro p {

        font-size:
            0.91rem;

        line-height:
            1.63;

    }


    .tzir-snow-gallery__script {

        margin-top:
            17px;

        font-size:
            1.05rem;

    }


    .tzir-snow-gallery__service-bar {

        grid-template-columns:
            1fr
            auto;

        gap:
            18px;

        margin-top:
            35px;

    }


    .tzir-snow-gallery__service-rule {

        display:
            none;

    }


    .tzir-snow-gallery__media-count span {

        display:
            none;

    }


    .tzir-snow-gallery__collection {

        grid-template-columns:
            1fr;

        gap:
            17px;

        margin-top:
            44px;

    }


    .tzir-snow-media,
    .tzir-snow-media--video {

        width:
            100%;

        margin:
            0;

    }


    .tzir-snow-media__frame {

        padding:
            5px;

        transform:
            none !important;

    }


    .tzir-snow-media--image
    .tzir-snow-media__frame {

        aspect-ratio:
            4 / 3;

    }


    .tzir-snow-media--video
    .tzir-snow-media__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-snow-media__view {

        left:
            10px;

        bottom:
            10px;

        opacity:
            1;

        transform:
            none;

    }


    .tzir-snow-media__number {

        right:
            10px;

        bottom:
            10px;

    }


    .tzir-snow-media__type {

        top:
            10px;

        left:
            10px;

    }


    .tzir-snow-gallery__media-note {

        grid-template-columns:
            1fr;

        gap:
            12px;

        margin-top:
            46px;

    }


    .tzir-snow-gallery__media-note-script {

        display:
            none;

    }


    .tzir-snow-gallery__next {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            58px;

    }


    .tzir-snow-gallery__next > a {

        width:
            100%;

        justify-content:
            space-between;

    }


    /* Viewer */

    .tzir-snow-viewer__top {

        min-height:
            64px;

        padding:
            10px
            14px;

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

        gap:
            10px;

    }


    .tzir-snow-viewer__identity span,
    .tzir-snow-viewer__counter {

        display:
            none;

    }


    .tzir-snow-viewer__identity strong {

        font-size:
            1.13rem;

    }


    .tzir-snow-viewer__close {

        width:
            44px;

        height:
            44px;

    }


    .tzir-snow-viewer__stage {

        grid-template-columns:
            1fr;

        padding:
            12px;

    }


    .tzir-snow-viewer__arrow {

        position:
            absolute;

        top:
            50%;

        z-index:
            7;

        width:
            44px;

        height:
            44px;

        transform:
            translateY(-50%);

        background:
            rgba(
                11,
                17,
                7,
                0.72
            );

    }


    .tzir-snow-viewer__arrow--prev {

        left:
            9px;

    }


    .tzir-snow-viewer__arrow--next {

        right:
            9px;

    }


    .tzir-snow-viewer__bottom {

        min-height:
            60px;

        padding:
            10px
            14px;

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

        gap:
            12px;

    }


    .tzir-snow-viewer__bottom p {

        font-size:
            0.9rem;

    }


    .tzir-snow-viewer__bottom small {

        display:
            none;

    }

}








































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   13. YARD CLEAN UP
   ========================================================= */


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

.tzir-yard-gallery {

    position:
        relative;

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

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            142deg,
            #F2EEE5 0%,
            #E9E5D9 51%,
            #F3F0E8 100%
        );

}



/* =========================================================
   02. PAPER / EARTH GRAIN
   ========================================================= */

.tzir-yard-gallery::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        0.03;

    mix-blend-mode:
        multiply;

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

}



/* =========================================================
   03. FOREST GLOW
   ========================================================= */

.tzir-yard-gallery::after {

    content:
        "";

    position:
        absolute;

    left:
        -220px;

    top:
        25%;

    z-index:
        -4;

    width:
        600px;

    height:
        600px;

    pointer-events:
        none;

    border-radius:
        50%;

    background:
        rgba(
            95,
            119,
            40,
            0.09
        );

    filter:
        blur(105px);

}



/* =========================================================
   04. ORGANIC MOVEMENT
   ========================================================= */

.tzir-yard-gallery__movement {

    position:
        absolute;

    top:
        2%;

    right:
        -8%;

    z-index:
        -3;

    width:
        min(
            64vw,
            980px
        );

    height:
        650px;

    pointer-events:
        none;

    opacity:
        0.44;

}


.tzir-yard-gallery__movement svg {

    width:
        100%;

    height:
        100%;

}


.tzir-yard-gallery__movement path {

    fill:
        none;

    stroke:
        rgba(
            62,
            83,
            28,
            0.11
        );

    stroke-width:
        1;

}



/* =========================================================
   05. BOTANICAL
   ========================================================= */

.tzir-yard-gallery__botanical {

    position:
        absolute;

    right:
        -67px;

    bottom:
        18%;

    z-index:
        -2;

    width:
        170px;

    height:
        230px;

    pointer-events:
        none;

    color:
        var(--tzir-moss-700);

    opacity:
        0.075;

    transform:
        rotate(12deg);

}


.tzir-yard-gallery__botanical svg {

    width:
        100%;

    height:
        100%;

}



/* =========================================================
   06. CONTAINER
   ========================================================= */

.tzir-yard-gallery__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   07. HEADER
   ========================================================= */

.tzir-yard-gallery__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(320px, 0.62fr);

    align-items:
        end;

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

}



/* =========================================================
   08. KICKER
   ========================================================= */

.tzir-yard-gallery__kicker {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-yard-gallery__kicker i {

    width:
        31px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.35
        );

}



/* =========================================================
   09. TITLE
   ========================================================= */

.tzir-yard-gallery__title {

    max-width:
        830px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

    font-weight:
        600;

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-yard-gallery__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



/* =========================================================
   10. INTRO
   ========================================================= */

.tzir-yard-gallery__intro {

    max-width:
        470px;

}


.tzir-yard-gallery__intro p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}


.tzir-yard-gallery__script {

    display:
        inline-flex;

    flex-direction:
        column;

    margin-top:
        21px;

    color:
        rgba(
            50,
            33,
            33,
            0.54
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-yard-gallery__script i {

    width:
        70px;

    height:
        2px;

    margin:
        8px
        0
        0
        38px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-4deg);

}



/* =========================================================
   11. SERVICE BAR
   ========================================================= */

.tzir-yard-gallery__service-bar {

    margin-top:
        clamp(
            52px,
            5vw,
            72px
        );

    padding:
        22px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        30px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-yard-gallery__service-name {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.tzir-yard-gallery__service-name span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.tzir-yard-gallery__service-name strong {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-yard-gallery__service-rule i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(50, 33, 33, 0.06),
            rgba(95, 119, 40, 0.37),
            rgba(50, 33, 33, 0.06)
        );

}



/* =========================================================
   12. COUNT
   ========================================================= */

.tzir-yard-gallery__count {

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

    white-space:
        nowrap;

}


.tzir-yard-gallery__count strong {

    color:
        var(--tzir-moss-700);

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

    font-size:
        1.45rem;

    font-weight:
        600;

}


.tzir-yard-gallery__count span {

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

    font-size:
        0.51rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}



/* =========================================================
   13. COLLECTION
   ========================================================= */

.tzir-yard-gallery__collection {

    position:
        relative;

    display:
        grid;

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

    grid-auto-flow:
        dense;

    gap:
        clamp(
            17px,
            1.9vw,
            28px
        );

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

}



/* =========================================================
   14. PHOTO
   ========================================================= */

.tzir-yard-photo {

    position:
        relative;

    min-width:
        0;

    margin:
        0;

    grid-column:
        span 6;

}



/* =========================================================
   15. ONE PHOTO
   ========================================================= */

.tzir-yard-gallery__collection[data-photo-count="1"]
.tzir-yard-photo {

    grid-column:
        2 / span 10;

}


.tzir-yard-gallery__collection[data-photo-count="1"]
.tzir-yard-photo__frame {

    aspect-ratio:
        16 / 9;

}



/* =========================================================
   16. TWO PHOTOS
   ========================================================= */

.tzir-yard-gallery__collection[data-photo-count="2"]
.tzir-yard-photo[data-layout-index="1"] {

    grid-column:
        1 / span 7;

}


.tzir-yard-gallery__collection[data-photo-count="2"]
.tzir-yard-photo[data-layout-index="2"] {

    grid-column:
        8 / span 5;

    margin-top:
        70px;

}


.tzir-yard-gallery__collection[data-photo-count="2"]
.tzir-yard-photo[data-layout-index="1"]
.tzir-yard-photo__frame {

    aspect-ratio:
        16 / 10;

}


.tzir-yard-gallery__collection[data-photo-count="2"]
.tzir-yard-photo[data-layout-index="2"]
.tzir-yard-photo__frame {

    aspect-ratio:
        4 / 5;

}



/* =========================================================
   17. THREE PHOTOS
   CURRENT EXPECTED STATE
   ========================================================= */

.tzir-yard-gallery__collection[data-photo-count="3"]
.tzir-yard-photo[data-layout-index="1"] {

    grid-column:
        1 / span 7;

}


.tzir-yard-gallery__collection[data-photo-count="3"]
.tzir-yard-photo[data-layout-index="2"] {

    grid-column:
        8 / span 5;

    margin-top:
        42px;

}


.tzir-yard-gallery__collection[data-photo-count="3"]
.tzir-yard-photo[data-layout-index="3"] {

    grid-column:
        8 / span 5;

}


.tzir-yard-gallery__collection[data-photo-count="3"]
.tzir-yard-photo[data-layout-index="1"]
.tzir-yard-photo__frame {

    aspect-ratio:
        5 / 4;

}


.tzir-yard-gallery__collection[data-photo-count="3"]
.tzir-yard-photo[data-layout-index="2"]
.tzir-yard-photo__frame,
.tzir-yard-gallery__collection[data-photo-count="3"]
.tzir-yard-photo[data-layout-index="3"]
.tzir-yard-photo__frame {

    aspect-ratio:
        16 / 10;

}



/* =========================================================
   18. FOUR PHOTOS
   ========================================================= */

.tzir-yard-gallery__collection[data-photo-count="4"]
.tzir-yard-photo[data-layout-index="1"],
.tzir-yard-gallery__collection[data-photo-count="4"]
.tzir-yard-photo[data-layout-index="4"] {

    grid-column:
        span 7;

}


.tzir-yard-gallery__collection[data-photo-count="4"]
.tzir-yard-photo[data-layout-index="2"],
.tzir-yard-gallery__collection[data-photo-count="4"]
.tzir-yard-photo[data-layout-index="3"] {

    grid-column:
        span 5;

}


.tzir-yard-gallery__collection[data-photo-count="4"]
.tzir-yard-photo[data-layout-index="1"]
.tzir-yard-photo__frame,
.tzir-yard-gallery__collection[data-photo-count="4"]
.tzir-yard-photo[data-layout-index="4"]
.tzir-yard-photo__frame {

    aspect-ratio:
        16 / 10;

}


.tzir-yard-gallery__collection[data-photo-count="4"]
.tzir-yard-photo[data-layout-index="2"]
.tzir-yard-photo__frame,
.tzir-yard-gallery__collection[data-photo-count="4"]
.tzir-yard-photo[data-layout-index="3"]
.tzir-yard-photo__frame {

    aspect-ratio:
        4 / 5;

}



/* =========================================================
   19. FIVE OR MORE PHOTOS
   ========================================================= */

.tzir-yard-gallery__collection[data-photo-count="many"]
.tzir-yard-photo[data-layout-index="1"] {

    grid-column:
        span 7;

}


.tzir-yard-gallery__collection[data-photo-count="many"]
.tzir-yard-photo[data-layout-index="2"] {

    grid-column:
        span 5;

    margin-top:
        35px;

}


.tzir-yard-gallery__collection[data-photo-count="many"]
.tzir-yard-photo[data-layout-index="3"] {

    grid-column:
        span 5;

}


.tzir-yard-gallery__collection[data-photo-count="many"]
.tzir-yard-photo[data-layout-index="4"] {

    grid-column:
        span 7;

    margin-top:
        25px;

}


.tzir-yard-gallery__collection[data-photo-count="many"]
.tzir-yard-photo[data-layout-index="5"] {

    grid-column:
        3 / span 8;

    margin-top:
        25px;

}



/* Any image beyond five receives a stable alternating pattern */

.tzir-yard-gallery__collection[data-photo-count="many"]
.tzir-yard-photo[data-layout-cycle="wide"] {

    grid-column:
        span 7;

}


.tzir-yard-gallery__collection[data-photo-count="many"]
.tzir-yard-photo[data-layout-cycle="narrow"] {

    grid-column:
        span 5;

}



/* =========================================================
   20. FRAME
   ========================================================= */

.tzir-yard-photo__frame {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    padding:
        8px;

    overflow:
        hidden;

    cursor:
        zoom-in;

    background:
        var(--tzir-white);

    box-shadow:
        var(--tzir-shadow-photo);

    transition:
        transform
        650ms
        var(--tzir-ease-standard),

        box-shadow
        650ms
        var(--tzir-ease-standard);

}


.tzir-yard-photo img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.015);

    transition:
        transform
        900ms
        var(--tzir-ease-standard);

}



/* =========================================================
   21. PAPER RHYTHM
   ========================================================= */

.tzir-yard-photo[data-layout-index="2"]
.tzir-yard-photo__frame {

    transform:
        rotate(0.55deg);

}


.tzir-yard-photo[data-layout-index="3"]
.tzir-yard-photo__frame {

    transform:
        rotate(-0.45deg);

}



/* =========================================================
   22. HOVER
   ========================================================= */

.tzir-yard-photo:hover
.tzir-yard-photo__frame {

    transform:
        translateY(-5px)
        rotate(0);

    box-shadow:
        0 39px 80px
        rgba(
            23,
            37,
            7,
            0.17
        ),
        0 12px 29px
        rgba(
            50,
            33,
            33,
            0.08
        );

}


.tzir-yard-photo:hover img {

    transform:
        scale(1.055);

}



/* =========================================================
   23. OVERLAY
   ========================================================= */

.tzir-yard-photo__overlay {

    position:
        absolute;

    inset:
        8px;

    z-index:
        3;

    pointer-events:
        none;

}



/* =========================================================
   24. NUMBER
   ========================================================= */

.tzir-yard-photo__number {

    position:
        absolute;

    right:
        12px;

    bottom:
        12px;

    min-width:
        32px;

    height:
        26px;

    padding:
        0
        7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            246,
            245,
            243,
            0.92
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-forest-800);

    font-size:
        0.48rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

}



/* =========================================================
   25. VIEW
   ========================================================= */

.tzir-yard-photo__view {

    position:
        absolute;

    left:
        12px;

    bottom:
        12px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px
        10px;

    background:
        rgba(
            23,
            37,
            7,
            0.84
        );

    backdrop-filter:
        blur(8px);

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

    color:
        var(--tzir-white);

    font-size:
        0.49rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(5px);

    transition:
        opacity
        330ms
        ease,

        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-yard-photo__view i {

    color:
        #C5D391;

    font-style:
        normal;

}


.tzir-yard-photo:hover
.tzir-yard-photo__view {

    opacity:
        1;

    transform:
        translateY(0);

}



/* =========================================================
   26. MISSING
   ========================================================= */

.tzir-yard-photo.is-missing {

    display:
        none;

}



/* =========================================================
   27. SIGNATURE
   ========================================================= */

.tzir-yard-gallery__signature {

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

    padding:
        21px
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        21px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

}


.tzir-yard-gallery__signature-index {

    display:
        flex;

    align-items:
        baseline;

    gap:
        8px;

}


.tzir-yard-gallery__signature-index span {

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

    font-size:
        0.5rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


.tzir-yard-gallery__signature-index strong {

    color:
        var(--tzir-moss-700);

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

    font-size:
        1.5rem;

    font-weight:
        600;

}


.tzir-yard-gallery__signature-line i {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-yard-gallery__signature-copy {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

}


.tzir-yard-gallery__signature-copy strong {

    color:
        var(--tzir-bark-900);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


.tzir-yard-gallery__signature-copy span {

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

    font-size:
        0.51rem;

    font-weight:
        600;

}


.tzir-yard-gallery__signature-script {

    color:
        var(--tzir-moss-700);

    font-family:
        var(--tzir-font-script);

    font-size:
        1.08rem;

    transform:
        rotate(-2deg);

}



/* =========================================================
   28. CLOSEOUT
   ========================================================= */

.tzir-yard-gallery__closeout {

    position:
        relative;

    margin-top:
        clamp(
            80px,
            8vw,
            120px
        );

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

    display:
        grid;

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

    align-items:
        center;

    gap:
        clamp(
            40px,
            6vw,
            90px
        );

    overflow:
        hidden;

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

    box-shadow:
        0 30px 70px
        rgba(
            23,
            37,
            7,
            0.13
        );

}



/* Topographic detail inside closeout */

.tzir-yard-gallery__closeout::before {

    content:
        "";

    position:
        absolute;

    right:
        -120px;

    top:
        -120px;

    width:
        520px;

    height:
        420px;

    pointer-events:
        none;

    opacity:
        0.13;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420' viewBox='0 0 520 420'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath opacity='.25' d='M-60 91C72 17 173 133 285 91S471 28 585 125'/%3E%3Cpath opacity='.16' d='M-59 132C78 60 186 174 299 132S490 75 586 165'/%3E%3C/g%3E%3C/svg%3E"
        );

}



/* =========================================================
   29. CLOSEOUT COPY
   ========================================================= */

.tzir-yard-gallery__closeout-copy {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

}


.tzir-yard-gallery__closeout-copy > span {

    display:
        block;

    margin-bottom:
        12px;

    color:
        #C5D391;

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-yard-gallery__closeout-copy h3 {

    margin:
        0;

    color:
        var(--tzir-white);

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

    font-size:
        clamp(
            2.4rem,
            4vw,
            4.2rem
        );

    font-weight:
        600;

    line-height:
        0.95;

    letter-spacing:
        -0.04em;

}


.tzir-yard-gallery__closeout-copy h3 em {

    display:
        block;

    color:
        #C5D391;

    font-style:
        normal;

}


.tzir-yard-gallery__closeout-copy p {

    max-width:
        580px;

    margin:
        19px
        0
        0;

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

    font-size:
        0.9rem;

    line-height:
        1.66;

}



/* =========================================================
   30. CLOSEOUT ACTIONS
   ========================================================= */

.tzir-yard-gallery__closeout-actions {

    position:
        relative;

    z-index:
        2;

    min-width:
        220px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        17px;

}


.tzir-yard-gallery__phone {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding:
        5px;

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

    text-align:
        center;

}


.tzir-yard-gallery__phone span {

    font-size:
        0.5rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


.tzir-yard-gallery__phone strong {

    margin-top:
        3px;

    color:
        var(--tzir-white);

    font-size:
        0.8rem;

    font-weight:
        700;

}



/* =========================================================
   31. ACCESSIBILITY
   ========================================================= */

.tzir-yard-gallery a:focus-visible {

    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset:
        4px;

}


.tzir-yard-gallery__closeout a:focus-visible {

    outline-color:
        #C5D391;

}



/* =========================================================
   32. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-yard-photo__frame,
html.tzir-reduced-motion
.tzir-yard-photo img,
html.tzir-reduced-motion
.tzir-yard-photo__view {

    transition:
        none !important;

}



/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-yard-gallery__collection[data-photo-count="3"]
    .tzir-yard-photo[data-layout-index="1"] {

        align-self:
            center;

    }


    .tzir-yard-gallery__closeout {

        min-height:
            330px;

    }

}



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

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

    .tzir-yard-gallery {

        padding:
            100px
            0;

    }


    .tzir-yard-gallery__header {

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

        gap:
            50px;

    }


    .tzir-yard-gallery__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-yard-gallery__collection {

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

        gap:
            19px;

    }


    .tzir-yard-photo,
    .tzir-yard-gallery__collection[data-photo-count]
    .tzir-yard-photo {

        margin-top:
            0;

    }


    .tzir-yard-gallery__collection[data-photo-count="3"]
    .tzir-yard-photo[data-layout-index="1"] {

        grid-column:
            1 / span 5;

    }


    .tzir-yard-gallery__collection[data-photo-count="3"]
    .tzir-yard-photo[data-layout-index="2"] {

        grid-column:
            6 / span 3;

    }


    .tzir-yard-gallery__collection[data-photo-count="3"]
    .tzir-yard-photo[data-layout-index="3"] {

        grid-column:
            2 / span 6;

    }


    .tzir-yard-gallery__collection[data-photo-count="4"]
    .tzir-yard-photo {

        grid-column:
            span 4;

    }


    .tzir-yard-gallery__collection[data-photo-count="many"]
    .tzir-yard-photo {

        grid-column:
            span 4;

    }


    .tzir-yard-gallery__signature {

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

    }


    .tzir-yard-gallery__signature-script {

        display:
            none;

    }


    .tzir-yard-gallery__closeout {

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

        gap:
            40px;

    }

}



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

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

    .tzir-yard-gallery {

        padding:
            86px
            0;

    }


    .tzir-yard-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .tzir-yard-gallery__title {

        max-width:
            650px;

        font-size:
            clamp(
                2.85rem,
                8vw,
                4rem
            );

    }


    .tzir-yard-gallery__service-bar {

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

        gap:
            20px;

        margin-top:
            42px;

    }


    .tzir-yard-gallery__collection {

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

        gap:
            16px;

        margin-top:
            55px;

    }


    .tzir-yard-photo,
    .tzir-yard-gallery__collection[data-photo-count]
    .tzir-yard-photo {

        grid-column:
            auto;

        width:
            auto;

        margin:
            0;

    }


    .tzir-yard-photo__frame,
    .tzir-yard-gallery__collection[data-photo-count]
    .tzir-yard-photo__frame {

        aspect-ratio:
            4 / 5;

        padding:
            5px;

    }


    .tzir-yard-photo[data-layout-index="1"],
    .tzir-yard-photo[data-layout-index="4"] {

        grid-column:
            1 / -1 !important;

    }


    .tzir-yard-photo[data-layout-index="1"]
    .tzir-yard-photo__frame,
    .tzir-yard-photo[data-layout-index="4"]
    .tzir-yard-photo__frame {

        aspect-ratio:
            16 / 10;

    }


    .tzir-yard-photo__view {

        opacity:
            1;

        transform:
            none;

    }


    .tzir-yard-gallery__signature {

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

    }


    .tzir-yard-gallery__signature-script {

        display:
            none;

    }


    .tzir-yard-gallery__closeout {

        grid-template-columns:
            1fr;

        gap:
            32px;

    }


    .tzir-yard-gallery__closeout-actions {

        max-width:
            320px;

    }

}



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

@media (max-width: 480px) {

    .tzir-yard-gallery {

        padding:
            72px
            0;

    }


    .tzir-yard-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

    }


    .tzir-yard-gallery__kicker {

        gap:
            7px;

        margin-bottom:
            11px;

        font-size:
            0.61rem;

    }


    .tzir-yard-gallery__kicker i {

        width:
            22px;

    }


    .tzir-yard-gallery__title {

        font-size:
            clamp(
                2.5rem,
                11vw,
                3.3rem
            );

    }


    .tzir-yard-gallery__intro p {

        font-size:
            0.91rem;

        line-height:
            1.63;

    }


    .tzir-yard-gallery__script {

        margin-top:
            17px;

        font-size:
            1.05rem;

    }


    .tzir-yard-gallery__service-bar {

        grid-template-columns:
            1fr
            auto;

        gap:
            18px;

        margin-top:
            35px;

    }


    .tzir-yard-gallery__service-rule {

        display:
            none;

    }


    .tzir-yard-gallery__count span {

        display:
            none;

    }


    .tzir-yard-gallery__collection {

        grid-template-columns:
            1fr;

        gap:
            17px;

        margin-top:
            44px;

    }


    .tzir-yard-photo,
    .tzir-yard-gallery__collection[data-photo-count]
    .tzir-yard-photo {

        grid-column:
            1 !important;

        width:
            100%;

        margin:
            0 !important;

    }


    .tzir-yard-photo__frame,
    .tzir-yard-gallery__collection[data-photo-count]
    .tzir-yard-photo__frame {

        aspect-ratio:
            4 / 3;

        padding:
            5px;

        transform:
            none !important;

    }


    .tzir-yard-photo[data-layout-index="2"]
    .tzir-yard-photo__frame,
    .tzir-yard-photo[data-layout-index="4"]
    .tzir-yard-photo__frame {

        aspect-ratio:
            4 / 5;

    }


    .tzir-yard-photo__view {

        left:
            10px;

        bottom:
            10px;

        opacity:
            1;

        transform:
            none;

    }


    .tzir-yard-photo__number {

        right:
            10px;

        bottom:
            10px;

    }


    .tzir-yard-gallery__signature {

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

        gap:
            14px;

        margin-top:
            48px;

    }


    .tzir-yard-gallery__signature-copy,
    .tzir-yard-gallery__signature-script {

        display:
            none;

    }


    .tzir-yard-gallery__closeout {

        margin-top:
            62px;

        padding:
            30px
            24px;

        grid-template-columns:
            1fr;

        gap:
            28px;

    }


    .tzir-yard-gallery__closeout-copy h3 {

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

    }


    .tzir-yard-gallery__closeout-copy p {

        font-size:
            0.87rem;

    }


    .tzir-yard-gallery__closeout-actions {

        width:
            100%;

    }


    .tzir-yard-gallery__movement {

        right:
            -45%;

        width:
            100%;

        height:
            360px;

    }


    .tzir-yard-gallery__botanical {

        right:
            -58px;

        width:
            100px;

        height:
            140px;

    }

}












































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   14. GLOBAL FULLSCREEN GALLERY VIEWER
   ========================================================= */


/* =========================================================
   01. ROOT
   ========================================================= */

.tzir-gallery-viewer {
    position: fixed;
    inset: 0;

    z-index: 2147483000;

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

    width: 100%;
    height: 100dvh;
    height: 100svh;

    overflow: hidden;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    color: var(--tzir-white);

    isolation: isolate;

    transition:
        opacity 360ms ease,
        visibility 360ms ease;
}


.tzir-gallery-viewer.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}



/* =========================================================
   02. BACKDROP
   ========================================================= */

.tzir-gallery-viewer__backdrop {
    position: absolute;
    inset: 0;
    z-index: -3;

    cursor: zoom-out;

    background:
        radial-gradient(
            circle at 50% 44%,
            rgba(39, 62, 10, 0.25),
            transparent 48%
        ),
        rgba(10, 15, 6, 0.975);
}



/* =========================================================
   03. GRAIN
   ========================================================= */

.tzir-gallery-viewer::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: 0.035;

    mix-blend-mode: soft-light;

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



/* =========================================================
   04. TOPOGRAPHY
   ========================================================= */

.tzir-gallery-viewer__topography {
    position: absolute;

    top: -130px;
    right: -170px;

    z-index: -1;

    width: min(75vw, 1050px);
    height: 750px;

    pointer-events: none;

    opacity: 0.2;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1050' height='750' viewBox='0 0 1050 750'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath opacity='.22' d='M-100 132C115 25 285 210 473 130S802 30 1170 194'/%3E%3Cpath opacity='.14' d='M-98 178C130 76 307 257 496 179S836 86 1175 239'/%3E%3Cpath opacity='.18' d='M-104 585C140 457 331 641 539 557S889 473 1184 632'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-repeat: no-repeat;
    background-size: contain;
}



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

.tzir-gallery-viewer__header {
    position: relative;
    z-index: 20;

    min-width: 0;
    min-height: 86px;

    padding:
        17px
        clamp(20px, 3.4vw, 54px);

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

    align-items: center;

    gap: 28px;

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

    background:
        rgba(11, 17, 7, 0.34);

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



/* =========================================================
   06. IDENTITY
   ========================================================= */

.tzir-gallery-viewer__identity {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.tzir-gallery-viewer__identity > span {
    overflow: hidden;

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

    font-size: 0.51rem;
    font-weight: 700;
    letter-spacing: 0.17em;

    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.tzir-gallery-viewer__identity > strong {
    overflow: hidden;

    color: var(--tzir-white);

    font-family: var(--tzir-font-display);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 600;
    line-height: 1;

    text-overflow: ellipsis;
    white-space: nowrap;
}



/* =========================================================
   07. COUNTER
   ========================================================= */

.tzir-gallery-viewer__counter {
    display: flex;
    align-items: baseline;

    gap: 7px;

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

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}


.tzir-gallery-viewer__counter
span:first-child {
    color: #C5D391;
}


.tzir-gallery-viewer__counter i {
    color:
        rgba(255, 255, 255, 0.22);

    font-style: normal;
}



/* =========================================================
   08. CLOSE BUTTON
   ========================================================= */

.tzir-gallery-viewer__close {
    position: relative;

    width: 48px;
    height: 48px;

    padding: 0;

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

    cursor: pointer;

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

    transition:
        transform 420ms var(--tzir-ease-standard),
        border-color 280ms ease,
        background-color 280ms ease;
}


.tzir-gallery-viewer__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 19px;
    height: 1px;

    background: var(--tzir-white);
}


.tzir-gallery-viewer__close
span:first-child {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.tzir-gallery-viewer__close
span:last-child {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


.tzir-gallery-viewer__close:hover {
    transform: rotate(4deg);

    border-color:
        rgba(197, 211, 145, 0.55);

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



/* =========================================================
   09. STAGE
   ========================================================= */

.tzir-gallery-viewer__stage {
    position: relative;

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

    padding:
        clamp(14px, 2vw, 28px)
        clamp(12px, 2vw, 30px);

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

    align-items: center;

    gap: 14px;
}



/* =========================================================
   10. MEDIA AREA
   ========================================================= */

.tzir-gallery-viewer__media {
    position: relative;

    width: 100%;
    height: 100%;

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

    display: flex;

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

    overflow: hidden;
}



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

.tzir-gallery-viewer__image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    user-select: none;

    filter:
        drop-shadow(
            0 24px 50px
            rgba(0, 0, 0, 0.3)
        );
}


.tzir-gallery-viewer__image[hidden] {
    display: none;
}



/* =========================================================
   12. VIDEO
   ========================================================= */

.tzir-gallery-viewer__video {
    display: block;

    width: min(100%, 1200px);

    max-width: 100%;
    max-height: 100%;

    background: #000;

    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.35);
}


.tzir-gallery-viewer__video[hidden] {
    display: none;
}



/* =========================================================
   13. STATUS
   ========================================================= */

.tzir-gallery-viewer__status {
    max-width: 340px;

    padding: 32px;

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

    text-align: center;

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


.tzir-gallery-viewer__status[hidden] {
    display: none;
}


.tzir-gallery-viewer__status span {
    display: block;

    color: #C5D391;

    font-family: var(--tzir-font-display);
    font-size: 1.7rem;
    font-weight: 600;
}


.tzir-gallery-viewer__status p {
    margin:
        8px
        0
        0;

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

    font-size: 0.78rem;
    line-height: 1.6;
}



/* =========================================================
   14. ARROWS
   ========================================================= */

.tzir-gallery-viewer__arrow {
    position: relative;

    z-index: 10;

    width: 54px;
    height: 54px;

    justify-self: center;

    padding: 0;

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

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

    cursor: pointer;

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

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

    transition:
        transform 420ms var(--tzir-ease-standard),
        color 280ms ease,
        border-color 280ms ease,
        background-color 280ms ease;
}


.tzir-gallery-viewer__arrow svg {
    width: 22px;
    height: 22px;
}


.tzir-gallery-viewer__arrow:hover {
    color: #C5D391;

    border-color:
        rgba(197, 211, 145, 0.48);

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


.tzir-gallery-viewer__arrow--previous:hover {
    transform: translateX(-4px);
}


.tzir-gallery-viewer__arrow--next:hover {
    transform: translateX(4px);
}


.tzir-gallery-viewer__arrow[hidden] {
    display: none;
}



/* =========================================================
   15. FOOTER
   ========================================================= */

.tzir-gallery-viewer__footer {
    position: relative;

    z-index: 20;

    min-height: 72px;

    padding:
        13px
        clamp(20px, 3.4vw, 54px);

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

    align-items: center;

    gap: 26px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);

    background:
        rgba(11, 17, 7, 0.34);

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



/* =========================================================
   16. MEDIA INFO
   ========================================================= */

.tzir-gallery-viewer__media-info {
    min-width: 0;

    display: flex;
    align-items: baseline;

    gap: 11px;
}


.tzir-gallery-viewer__media-info > span {
    flex: 0 0 auto;

    color: #C5D391;

    font-size: 0.51rem;
    font-weight: 700;
    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.tzir-gallery-viewer__media-info > strong {
    overflow: hidden;

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

    font-family: var(--tzir-font-display);
    font-size: 1rem;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}



/* =========================================================
   17. INSTRUCTIONS
   ========================================================= */

.tzir-gallery-viewer__instructions {
    display: flex;
    align-items: center;

    gap: 7px;

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

    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.tzir-gallery-viewer__instructions
span:nth-child(1),
.tzir-gallery-viewer__instructions
span:nth-child(2),
.tzir-gallery-viewer__instructions
span:nth-child(5) {
    color:
        rgba(255, 255, 255, 0.67);
}


.tzir-gallery-viewer__instructions i {
    width: 1px;
    height: 15px;

    margin-inline: 5px;

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



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

.tzir-gallery-viewer__brand {
    justify-self: end;

    overflow: hidden;

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

    font-family: var(--tzir-font-script);
    font-size: 1.04rem;

    white-space: nowrap;

    transform: rotate(-2deg);
}



/* =========================================================
   19. OPENABLE GALLERY ITEMS
   ========================================================= */

[data-tzir-gallery-image],
[data-tzir-snow-media] {
    cursor: zoom-in;
}


[data-tzir-gallery-image]:focus-visible {
    outline:
        2px solid
        var(--tzir-moss-700);

    outline-offset: 5px;
}



/* =========================================================
   20. SCROLL LOCK
   ========================================================= */

html.tzir-gallery-viewer-open {
    overflow: hidden;
}



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

html.tzir-reduced-motion
.tzir-gallery-viewer,
html.tzir-reduced-motion
.tzir-gallery-viewer__close,
html.tzir-reduced-motion
.tzir-gallery-viewer__arrow {
    transition: none !important;
}



/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-gallery-viewer__media {
        padding-inline: 2vw;
    }

}


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

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

    .tzir-gallery-viewer__header {
        min-height: 78px;
    }

    .tzir-gallery-viewer__stage {
        grid-template-columns:
            62px
            minmax(0, 1fr)
            62px;
    }

    .tzir-gallery-viewer__arrow {
        width: 50px;
        height: 50px;
    }

    .tzir-gallery-viewer__footer {
        min-height: 66px;

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

    .tzir-gallery-viewer__brand {
        display: none;
    }

}


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

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

    .tzir-gallery-viewer__header {
        min-height: 70px;

        padding:
            11px
            17px;

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

        gap: 15px;
    }

    .tzir-gallery-viewer__counter {
        display: none;
    }

    .tzir-gallery-viewer__close {
        width: 46px;
        height: 46px;
    }

    .tzir-gallery-viewer__stage {
        grid-template-columns: 1fr;

        padding: 14px;
    }

    .tzir-gallery-viewer__arrow {
        position: absolute;

        top: 50%;

        z-index: 20;

        width: 47px;
        height: 47px;

        background:
            rgba(11, 17, 7, 0.68);

        transform:
            translateY(-50%);
    }

    .tzir-gallery-viewer__arrow--previous {
        left: 15px;
    }

    .tzir-gallery-viewer__arrow--next {
        right: 15px;
    }

    .tzir-gallery-viewer__arrow--previous:hover,
    .tzir-gallery-viewer__arrow--next:hover {
        transform:
            translateY(-50%);
    }

    .tzir-gallery-viewer__footer {
        min-height: 62px;

        padding:
            10px
            17px;

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

    .tzir-gallery-viewer__instructions {
        display: none;
    }

    .tzir-gallery-viewer__brand {
        display: block;

        font-size: 0.92rem;
    }

}


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

@media (max-width: 480px) {

    .tzir-gallery-viewer__header {
        min-height: 64px;

        padding:
            9px
            12px;

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

        gap: 10px;
    }

    .tzir-gallery-viewer__identity > span,
    .tzir-gallery-viewer__counter {
        display: none;
    }

    .tzir-gallery-viewer__identity > strong {
        font-size: 1.12rem;
    }

    .tzir-gallery-viewer__close {
        width: 44px;
        height: 44px;
    }

    .tzir-gallery-viewer__stage {
        grid-template-columns: 1fr;

        padding:
            10px
            8px;
    }

    .tzir-gallery-viewer__media {
        width: 100%;
    }

    .tzir-gallery-viewer__arrow {
        position: absolute;

        top: 50%;

        z-index: 30;

        width: 44px;
        height: 44px;

        background:
            rgba(11, 17, 7, 0.76);

        transform:
            translateY(-50%);
    }

    .tzir-gallery-viewer__arrow--previous {
        left: 7px;
    }

    .tzir-gallery-viewer__arrow--next {
        right: 7px;
    }

    .tzir-gallery-viewer__arrow--previous:hover,
    .tzir-gallery-viewer__arrow--next:hover {
        transform:
            translateY(-50%);
    }

    .tzir-gallery-viewer__footer {
        min-height: 58px;

        padding:
            9px
            12px;

        grid-template-columns:
            1fr;
    }

    .tzir-gallery-viewer__media-info {
        width: 100%;
    }

    .tzir-gallery-viewer__media-info > strong {
        font-size: 0.9rem;
    }

    .tzir-gallery-viewer__instructions,
    .tzir-gallery-viewer__brand {
        display: none;
    }

}













































/* =========================================================
   TZIR LANDSCAPING
   GALLERY.HTML
   15. PROJECT CTA
   ========================================================= */


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

.tzir-project-cta {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(100px, 9vw, 150px)
        0
        clamp(38px, 4vw, 58px);

    background:
        linear-gradient(
            135deg,
            #172507 0%,
            #203308 47%,
            #172507 100%
        );

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



/* =========================================================
   02. GRAIN
   ========================================================= */

.tzir-project-cta::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -5;

    pointer-events: none;

    opacity: 0.045;

    mix-blend-mode: soft-light;

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



/* =========================================================
   03. ORGANIC LIGHT
   ========================================================= */

.tzir-project-cta::after {
    content: "";

    position: absolute;

    top: -240px;
    left: 35%;

    z-index: -4;

    width: 780px;
    height: 620px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(95, 119, 40, 0.27) 0%,
            rgba(95, 119, 40, 0.08) 43%,
            transparent 72%
        );

    filter: blur(28px);
}



/* =========================================================
   04. TOPOGRAPHY
   ========================================================= */

.tzir-project-cta__topography {
    position: absolute;

    top: -110px;
    right: -190px;

    z-index: -3;

    width: min(72vw, 1050px);
    height: 720px;

    pointer-events: none;

    opacity: 0.45;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1050' height='720' viewBox='0 0 1050 720'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath opacity='.075' d='M-110 125C114 20 280 200 467 125S801 28 1170 185'/%3E%3Cpath opacity='.045' d='M-105 173C131 72 302 248 493 174S833 87 1171 233'/%3E%3Cpath opacity='.065' d='M-110 565C137 439 326 619 530 541S875 460 1181 610'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size: contain;
    background-repeat: no-repeat;
}



/* =========================================================
   05. BOTANICAL
   ========================================================= */

.tzir-project-cta__botanical {
    position: absolute;

    left: -82px;
    bottom: 8%;

    z-index: -2;

    width: 190px;
    height: 285px;

    pointer-events: none;

    color: #C5D391;

    opacity: 0.085;

    transform: rotate(-12deg);
}


.tzir-project-cta__botanical svg {
    width: 100%;
    height: 100%;
}



/* =========================================================
   06. CONTAINER
   ========================================================= */

.tzir-project-cta__container {
    position: relative;

    z-index: 3;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(310px, 0.55fr);

    align-items: center;

    gap:
        clamp(
            65px,
            9vw,
            140px
        );
}



/* =========================================================
   07. MAIN COPY
   ========================================================= */

.tzir-project-cta__main {
    position: relative;

    min-width: 0;
}



/* =========================================================
   08. EYEBROW
   ========================================================= */

.tzir-project-cta__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom:
        clamp(
            21px,
            2vw,
            30px
        );

    color: #C5D391;

    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.tzir-project-cta__eyebrow i {
    display: block;

    width: 35px;
    height: 1px;

    background:
        rgba(197, 211, 145, 0.42);
}



/* =========================================================
   09. TITLE
   ========================================================= */

.tzir-project-cta__title {
    max-width: 930px;

    margin: 0;

    color: var(--tzir-white);

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

    font-size:
        clamp(
            4.2rem,
            7vw,
            7.6rem
        );

    font-weight: 600;

    line-height: 0.84;

    letter-spacing: -0.062em;
}


.tzir-project-cta__title > span {
    display: block;
}


.tzir-project-cta__title em {
    color: #C5D391;

    font-style: normal;
}



/* =========================================================
   10. DESCRIPTION
   ========================================================= */

.tzir-project-cta__description {
    max-width: 630px;

    margin:
        clamp(
            27px,
            3vw,
            38px
        )
        0
        0;

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

    font-size: 1rem;

    line-height: 1.7;
}



/* =========================================================
   11. ACTIONS
   ========================================================= */

.tzir-project-cta__actions {
    margin-top:
        clamp(
            29px,
            3vw,
            40px
        );

    display: flex;

    align-items: stretch;

    flex-wrap: wrap;

    gap: 13px;
}



/* =========================================================
   12. BUTTON BASE
   ========================================================= */

.tzir-project-cta__button {
    min-height: 58px;

    display: inline-flex;

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

    gap: 13px;

    padding:
        0
        22px;

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

    font-size: 0.69rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        transform 440ms var(--tzir-ease-standard),
        border-color 300ms ease,
        background-color 300ms ease,
        color 300ms ease,
        box-shadow 440ms var(--tzir-ease-standard);
}



/* =========================================================
   13. PRIMARY BUTTON
   ========================================================= */

.tzir-project-cta__button--primary {
    min-width: 190px;

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

    background: #D3DEA9;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.12);
}


.tzir-project-cta__button--primary svg {
    width: 20px;
    height: 20px;

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


.tzir-project-cta__button--primary:hover {
    transform: translateY(-4px);

    background: var(--tzir-white);

    box-shadow:
        0 17px 38px
        rgba(0, 0, 0, 0.16);
}


.tzir-project-cta__button--primary:hover svg {
    transform: translateX(4px);
}



/* =========================================================
   14. PHONE BUTTON
   ========================================================= */

.tzir-project-cta__button--secondary {
    min-width: 190px;

    flex-direction: column;

    align-items: flex-start;

    gap: 1px;

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

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

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


.tzir-project-cta__phone-label {
    color:
        rgba(255, 255, 255, 0.4);

    font-size: 0.48rem;
    letter-spacing: 0.13em;
}


.tzir-project-cta__button--secondary strong {
    color: var(--tzir-white);

    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing: 0.04em;
}


.tzir-project-cta__button--secondary:hover {
    transform: translateY(-4px);

    border-color:
        rgba(197, 211, 145, 0.5);

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



/* =========================================================
   15. LOCATION
   ========================================================= */

.tzir-project-cta__location {
    margin-top: 26px;

    display: flex;

    align-items: center;

    gap: 9px;

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

    font-size: 0.65rem;
    font-weight: 600;
}


.tzir-project-cta__location svg {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    color: #C5D391;
}



/* =========================================================
   16. PROJECT CARD
   ========================================================= */

.tzir-project-cta__card {
    position: relative;

    min-height: 545px;

    padding:
        clamp(
            29px,
            3vw,
            42px
        );

    display: flex;

    flex-direction: column;

    overflow: hidden;

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

    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.055)
        );

    box-shadow:
        0 35px 80px
        rgba(0, 0, 0, 0.18);

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

    transform:
        translate3d(
            var(--tzir-cta-card-x, 0),
            var(--tzir-cta-card-y, 0),
            0
        );

    transition:
        transform
        680ms
        var(--tzir-ease-standard);
}



/* =========================================================
   17. CARD LARGE DECORATIVE CIRCLE
   ========================================================= */

.tzir-project-cta__card::before {
    content: "";

    position: absolute;

    top: 23%;
    right: -45%;

    width: 390px;
    height: 390px;

    border:
        1px solid
        rgba(197, 211, 145, 0.1);

    border-radius: 50%;

    pointer-events: none;
}


.tzir-project-cta__card::after {
    content: "";

    position: absolute;

    top: 31%;
    right: -23%;

    width: 250px;
    height: 250px;

    border:
        1px solid
        rgba(197, 211, 145, 0.08);

    border-radius: 50%;

    pointer-events: none;
}



/* =========================================================
   18. CARD TOP
   ========================================================= */

.tzir-project-cta__card-top {
    position: relative;

    z-index: 3;

    display: flex;

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

    gap: 20px;

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

    font-size: 0.49rem;
    font-weight: 700;
    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.tzir-project-cta__card-top
span:last-child {
    color: #C5D391;

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

    font-size: 1.2rem;

    letter-spacing: 0;
}



/* =========================================================
   19. LOGO
   ========================================================= */

.tzir-project-cta__logo-wrap {
    position: relative;

    z-index: 3;

    width: 158px;
    height: 158px;

    margin:
        clamp(
            36px,
            5vw,
            58px
        )
        auto
        34px;

    display: flex;

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


.tzir-project-cta__logo-halo {
    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(197, 211, 145, 0.2);

    border-radius: 50%;

    transform: scale(1.15);
}


.tzir-project-cta__logo-halo::before {
    content: "";

    position: absolute;

    inset: 13px;

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

    border-radius: 50%;
}


.tzir-project-cta__logo {
    position: relative;

    z-index: 2;

    width: 132px;
    height: 132px;

    object-fit: contain;
}



/* =========================================================
   20. CARD COPY
   ========================================================= */

.tzir-project-cta__card-copy {
    position: relative;

    z-index: 3;
}


.tzir-project-cta__card-copy > span {
    display: block;

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

    font-family: var(--tzir-font-script);

    font-size: 1.15rem;
}


.tzir-project-cta__card-copy > strong {
    display: block;

    color: var(--tzir-white);

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

    font-size:
        clamp(
            2.2rem,
            3vw,
            3.2rem
        );

    font-weight: 600;

    line-height: 0.92;
}


.tzir-project-cta__card-copy p {
    max-width: 290px;

    margin:
        15px
        0
        0;

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

    font-size: 0.74rem;

    line-height: 1.62;
}



/* =========================================================
   21. CARD DIVIDER
   ========================================================= */

.tzir-project-cta__card-divider {
    position: relative;

    z-index: 3;

    margin:
        auto
        0
        19px;

    padding-top: 28px;
}


.tzir-project-cta__card-divider i {
    display: block;

    width: 100%;
    height: 1px;

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



/* =========================================================
   22. CARD DETAILS
   ========================================================= */

.tzir-project-cta__card-details {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    gap: 20px;
}


.tzir-project-cta__card-details > div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.tzir-project-cta__card-details
> div:last-child {
    text-align: right;
}


.tzir-project-cta__card-details span {
    color:
        rgba(255, 255, 255, 0.36);

    font-size: 0.45rem;
    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.tzir-project-cta__card-details strong {
    color:
        rgba(255, 255, 255, 0.75);

    font-size: 0.62rem;
    font-weight: 700;
}



/* =========================================================
   23. CARD LINK
   ========================================================= */

.tzir-project-cta__card-link {
    position: relative;

    z-index: 3;

    min-height: 49px;

    margin-top: 25px;

    padding:
        0
        15px;

    display: flex;

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

    gap: 16px;

    border:
        1px solid
        rgba(197, 211, 145, 0.21);

    color: #D8E2B5;

    background:
        rgba(197, 211, 145, 0.045);

    font-size: 0.58rem;
    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    transition:
        transform 430ms var(--tzir-ease-standard),
        border-color 300ms ease,
        background-color 300ms ease;
}


.tzir-project-cta__card-link svg {
    width: 18px;
    height: 18px;

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


.tzir-project-cta__card-link:hover {
    transform: translateY(-3px);

    border-color:
        rgba(197, 211, 145, 0.5);

    background:
        rgba(197, 211, 145, 0.085);
}


.tzir-project-cta__card-link:hover svg {
    transform: translateX(4px);
}



/* =========================================================
   24. BOTTOM
   ========================================================= */

.tzir-project-cta__bottom {
    position: relative;

    z-index: 3;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin:
        clamp(
            75px,
            8vw,
            115px
        )
        auto
        0;

    padding-top: 23px;

    display: flex;

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

    gap: 35px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.11);
}


.tzir-project-cta__bottom > div {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;
}


.tzir-project-cta__bottom > div span {
    color:
        rgba(255, 255, 255, 0.39);

    font-size: 0.49rem;
    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.tzir-project-cta__bottom > div i {
    width: 17px;
    height: 1px;

    background:
        rgba(197, 211, 145, 0.3);
}


.tzir-project-cta__signature {
    color:
        rgba(255, 255, 255, 0.42);

    font-family: var(--tzir-font-script);

    font-size: 1.1rem;

    white-space: nowrap;

    transform: rotate(-2deg);
}



/* =========================================================
   25. FOCUS
   ========================================================= */

.tzir-project-cta a:focus-visible {
    outline:
        2px solid
        #C5D391;

    outline-offset: 4px;
}



/* =========================================================
   26. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-project-cta__card,
html.tzir-reduced-motion
.tzir-project-cta__button,
html.tzir-reduced-motion
.tzir-project-cta__button svg,
html.tzir-reduced-motion
.tzir-project-cta__card-link,
html.tzir-reduced-motion
.tzir-project-cta__card-link svg {
    transition: none !important;
}



/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .tzir-project-cta__main {
        padding-left: 2%;
    }

    .tzir-project-cta__card {
        transform:
            translate3d(
                var(--tzir-cta-card-x, 0),
                var(--tzir-cta-card-y, 0),
                0
            )
            rotate(0.6deg);
    }

}


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

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

    .tzir-project-cta {
        padding-top: 105px;
    }

    .tzir-project-cta__container {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, 0.55fr);

        gap: 55px;
    }

    .tzir-project-cta__title {
        font-size:
            clamp(
                3.9rem,
                7vw,
                5.9rem
            );
    }

    .tzir-project-cta__card {
        min-height: 500px;

        padding: 30px;
    }

    .tzir-project-cta__logo-wrap {
        width: 135px;
        height: 135px;

        margin:
            40px
            auto
            30px;
    }

    .tzir-project-cta__logo {
        width: 112px;
        height: 112px;
    }

}


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

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

    .tzir-project-cta {
        padding:
            86px
            0
            38px;
    }

    .tzir-project-cta__container {
        grid-template-columns: 1fr;

        gap: 58px;
    }

    .tzir-project-cta__title {
        max-width: 700px;

        font-size:
            clamp(
                3.6rem,
                10vw,
                5rem
            );
    }

    .tzir-project-cta__description {
        max-width: 590px;
    }

    .tzir-project-cta__card {
        width: min(100%, 500px);

        min-height: 460px;

        justify-self: end;
    }

    .tzir-project-cta__bottom {
        margin-top: 70px;
    }

    .tzir-project-cta__signature {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .tzir-project-cta {
        padding:
            72px
            0
            31px;
    }

    .tzir-project-cta__container {
        grid-template-columns: 1fr;

        gap: 46px;
    }

    .tzir-project-cta__eyebrow {
        gap: 7px;

        margin-bottom: 17px;

        font-size: 0.55rem;
    }

    .tzir-project-cta__eyebrow i {
        width: 22px;
    }

    .tzir-project-cta__title {
        font-size:
            clamp(
                3rem,
                14vw,
                4.15rem
            );

        line-height: 0.88;
    }

    .tzir-project-cta__description {
        margin-top: 23px;

        font-size: 0.9rem;

        line-height: 1.62;
    }

    .tzir-project-cta__actions {
        margin-top: 27px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }

    .tzir-project-cta__button {
        width: 100%;

        min-height: 56px;
    }

    .tzir-project-cta__button--secondary {
        align-items: center;
    }

    .tzir-project-cta__location {
        align-items: flex-start;

        font-size: 0.6rem;

        line-height: 1.45;
    }

    .tzir-project-cta__card {
        min-height: 440px;

        padding: 25px;

        transform: none !important;
    }

    .tzir-project-cta__logo-wrap {
        width: 125px;
        height: 125px;

        margin:
            34px
            auto
            27px;
    }

    .tzir-project-cta__logo {
        width: 103px;
        height: 103px;
    }

    .tzir-project-cta__card-copy > strong {
        font-size: 2.45rem;
    }

    .tzir-project-cta__bottom {
        margin-top: 54px;

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

    .tzir-project-cta__bottom > div {
        gap: 7px;
    }

    .tzir-project-cta__bottom > div span {
        font-size: 0.44rem;
    }

    .tzir-project-cta__signature {
        display: none;
    }

    .tzir-project-cta__botanical {
        left: -61px;

        width: 110px;
        height: 170px;
    }

}