/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   03. GALLERY HERO
============================================================ */


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

.gf-gallery-hero {

    position: relative;

    isolation: isolate;

    width: 100%;

    height:
        min(
            650px,
            calc(
                100svh -
                var(--gf-first-fold-offset)
            )
        );

    max-height:
        calc(
            100svh -
            var(--gf-first-fold-offset)
        );

    overflow: hidden;

    color:
        var(--gf-ink);

    background-color:
        var(--gf-paper);

    background-image:
        var(--gf-paper-texture);

}


@supports (height: 100dvh) {

    .gf-gallery-hero {

        height:
            min(
                650px,
                calc(
                    100dvh -
                    var(--gf-first-fold-offset)
                )
            );

        max-height:
            calc(
                100dvh -
                var(--gf-first-fold-offset)
            );

    }

}



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

.gf-gallery-hero__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.gf-gallery-hero__grain {

    position: absolute;

    inset: 0;

    opacity: 0.12;

    background-image:

        radial-gradient(
            rgba(3, 71, 43, 0.15)
            0.5px,
            transparent 0.75px
        );

    background-size:
        10px 10px;

}


.gf-gallery-hero__contour {

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.04);

}


.gf-gallery-hero__contour::before,
.gf-gallery-hero__contour::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.03);

}


.gf-gallery-hero__contour::before {

    inset: 28px;

}


.gf-gallery-hero__contour::after {

    inset: 62px;

}


.gf-gallery-hero__contour--1 {

    left: -270px;
    bottom: -330px;

    width: 630px;
    height: 630px;

    transform:
        rotate(34deg);

}


.gf-gallery-hero__contour--2 {

    right: -260px;
    top: -370px;

    width: 670px;
    height: 670px;

    transform:
        rotate(47deg);

}


.gf-gallery-hero__vertical-word {

    position: absolute;

    top: 50%;
    left: -38px;

    font-size: 0.46rem;
    font-weight: 800;

    letter-spacing: 0.5em;

    color:
        rgba(3, 71, 43, 0.11);

    transform:
        rotate(-90deg);

}



/* ============================================================
   03. CONTAINER
============================================================ */

.gf-gallery-hero__container {

    display: grid;

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

    height: 100%;

}



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

.gf-gallery-hero__main {

    display: grid;

    grid-template-columns:
        minmax(0, 0.86fr)
        minmax(520px, 1.14fr);

    min-height: 0;

}



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

.gf-gallery-hero__content {

    display: flex;

    justify-content: center;

    flex-direction: column;

    min-width: 0;

    padding:
        clamp(28px, 4vh, 48px)
        clamp(46px, 5vw, 80px)
        clamp(24px, 3vh, 38px)
        0;

}



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

.gf-gallery-hero__eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom:
        clamp(14px, 2vh, 21px);

    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

    animation:
        gf-gallery-hero-eyebrow
        720ms
        60ms
        var(--gf-ease-standard)
        both;

}


.gf-gallery-hero__eyebrow-line {

    width: 38px;
    height: 1px;

    background:
        currentColor;

    transform-origin:
        left;

    animation:
        gf-gallery-hero-line
        900ms
        150ms
        var(--gf-ease-emphasized)
        both;

}



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

.gf-gallery-hero__title {

    max-width: 740px;

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

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

    font-weight: 600;

    line-height: 0.9;

    letter-spacing: -0.065em;

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

}


.gf-gallery-hero__title-line {

    display: block;

    overflow: hidden;

    padding-bottom:
        0.04em;

}


.gf-gallery-hero__title-line > span {

    display: block;

    animation:
        gf-gallery-hero-title
        920ms
        var(--gf-ease-emphasized)
        both;

}


.gf-gallery-hero__title-line:nth-child(1) > span {

    animation-delay:
        100ms;

}


.gf-gallery-hero__title-line:nth-child(2) > span {

    animation-delay:
        190ms;

}


.gf-gallery-hero__title-line:nth-child(3) > span {

    animation-delay:
        280ms;

}


.gf-gallery-hero__title-line--accent {

    margin-top:
        0.08em;

    font-family:
        var(--gf-font-serif);

    font-size:
        0.72em;

    font-style: italic;
    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.045em;

    color:
        var(--gf-green);

}



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

.gf-gallery-hero__description {

    max-width: 590px;

    margin:
        0 0
        clamp(20px, 3vh, 31px);

    font-size:
        clamp(
            0.78rem,
            0.88vw,
            0.94rem
        );

    line-height: 1.7;

    color:
        var(--gf-gray);

    animation:
        gf-gallery-hero-copy
        800ms
        410ms
        var(--gf-ease-standard)
        both;

}



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

.gf-gallery-hero__actions {

    display: flex;

    align-items: center;

    gap: 25px;

    animation:
        gf-gallery-hero-copy
        800ms
        490ms
        var(--gf-ease-standard)
        both;

}



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

.gf-gallery-hero__primary {

    position: relative;

    isolation: isolate;

    display: inline-flex;

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

    gap: 23px;

    min-height: 51px;

    padding:
        0 21px;

    overflow: hidden;

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

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

    color:
        var(--gf-white);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.075em;

    text-transform: uppercase;

}


.gf-gallery-hero__primary::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        420ms
        var(--gf-ease-emphasized);

}


.gf-gallery-hero__primary:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-gallery-hero__primary-arrow {

    color:
        var(--gf-leaf);

    transition:
        color
        280ms
        ease,

        transform
        300ms
        var(--gf-ease-standard);

}


.gf-gallery-hero__primary:hover
.gf-gallery-hero__primary-arrow {

    color:
        var(--gf-white);

    transform:
        translateY(4px);

}



/* ============================================================
   11. SECONDARY
============================================================ */

.gf-gallery-hero__secondary {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding:
        7px 0;

    font-size: 0.55rem;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;

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

}


.gf-gallery-hero__secondary::after {

    content: "";

    position: absolute;

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

    height: 1px;

    background:
        var(--gf-copper);

    transform:
        scaleX(0.4);

    transform-origin:
        left;

    transition:
        transform
        350ms
        var(--gf-ease-standard);

}


.gf-gallery-hero__secondary:hover::after {

    transform:
        scaleX(1);

}



/* ============================================================
   12. META
============================================================ */

.gf-gallery-hero__meta {

    display: flex;

    align-items: center;

    gap: 18px;

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

    animation:
        gf-gallery-hero-copy
        800ms
        570ms
        var(--gf-ease-standard)
        both;

}


.gf-gallery-hero__meta-item {

    display: flex;

    align-items: flex-end;

    gap: 9px;

}


.gf-gallery-hero__meta-item strong {

    font-size:
        clamp(
            1.9rem,
            2.3vw,
            2.8rem
        );

    font-weight: 650;

    line-height: 0.8;

    letter-spacing: -0.06em;

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

}


.gf-gallery-hero__meta-item span {

    display: flex;

    flex-direction: column;

    font-size: 0.43rem;
    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-gallery-hero__meta-item em {

    font-style: normal;

    color:
        var(--gf-green);

}


.gf-gallery-hero__meta-divider {

    width: 1px;
    height: 35px;

    background:
        rgba(3, 71, 43, 0.16);

}


.gf-gallery-hero__meta-copy {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-gallery-hero__meta-copy span {

    font-size: 0.42rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-gallery-hero__meta-copy strong {

    font-family:
        var(--gf-font-serif);

    font-size: 0.95rem;
    font-style: italic;
    font-weight: 500;

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

}



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

.gf-gallery-hero__visual {

    position: relative;

    display: grid;

    grid-template-columns:
        29%
        31%
        40%;

    grid-template-rows:
        54%
        22%
        24%;

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

    margin:
        clamp(18px, 2.5vh, 28px)
        0
        clamp(16px, 2vh, 24px);

    overflow: hidden;

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

}



/* ============================================================
   14. MEDIA
============================================================ */

.gf-gallery-hero__media {

    position: relative;

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

    margin: 0;

    overflow: hidden;

}


.gf-gallery-hero__media--main {

    grid-column:
        1 / span 2;

    grid-row:
        1 / span 2;

}


.gf-gallery-hero__media--mulch {

    grid-column:
        3;

    grid-row:
        1;

}


.gf-gallery-hero__media--cleanup {

    grid-column:
        3;

    grid-row:
        2 / span 2;

}


.gf-gallery-hero__media--lawn {

    grid-column:
        2;

    grid-row:
        3;

}



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

.gf-gallery-hero__image-mask {

    position: absolute;

    inset: 0;

    overflow: hidden;

    animation:
        gf-gallery-hero-image-mask
        1.05s
        var(--gf-ease-emphasized)
        both;

}


.gf-gallery-hero__media--main
.gf-gallery-hero__image-mask {

    animation-delay:
        140ms;

}


.gf-gallery-hero__media--mulch
.gf-gallery-hero__image-mask {

    animation-delay:
        260ms;

}


.gf-gallery-hero__media--cleanup
.gf-gallery-hero__image-mask {

    animation-delay:
        370ms;

}


.gf-gallery-hero__media--lawn
.gf-gallery-hero__image-mask {

    animation-delay:
        470ms;

}


.gf-gallery-hero__image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    scale: 1;

    translate:
        0
        var(--gf-gallery-image-shift, 0px);

    animation:
        gf-gallery-hero-image-scale
        1.45s
        var(--gf-ease-standard)
        both;

    transition:
        filter
        600ms
        ease,

        scale
        900ms
        var(--gf-ease-standard);

}


.gf-gallery-hero__media:hover
.gf-gallery-hero__image {

    scale: 1.035;

    filter:
        saturate(1.04)
        contrast(1.025);

}



/* ============================================================
   16. IMAGE SHADE
============================================================ */

.gf-gallery-hero__media::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        linear-gradient(
            to top,
            rgba(3, 29, 19, 0.58),
            transparent 43%
        );

}



/* ============================================================
   17. CAPTION
============================================================ */

.gf-gallery-hero__caption {

    position: absolute;

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

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        15px 17px;

    color:
        var(--gf-white);

}


.gf-gallery-hero__caption span {

    font-family:
        var(--gf-font-serif);

    font-size: 0.61rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-gallery-hero__caption strong {

    font-size: 0.52rem;
    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



/* ============================================================
   18. STATEMENT
============================================================ */

.gf-gallery-hero__statement {

    position: relative;

    grid-column:
        1;

    grid-row:
        3;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        clamp(16px, 2vw, 25px);

    overflow: hidden;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

    animation:
        gf-gallery-hero-panel
        850ms
        490ms
        var(--gf-ease-emphasized)
        both;

}


.gf-gallery-hero__statement::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        var(--gf-green);

}


.gf-gallery-hero__statement-index {

    font-size: 0.4rem;
    font-weight: 700;

    letter-spacing: 0.12em;

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

}


.gf-gallery-hero__statement-leaf {

    position: absolute;

    top: 19px;
    right: 17px;

    width: 37px;
    height: 37px;

    color:
        rgba(126, 217, 87, 0.42);

}


.gf-gallery-hero__statement-leaf svg {

    width: 100%;
    height: 100%;

}


.gf-gallery-hero__statement p {

    position: relative;

    z-index: 2;

    margin: auto 0 0;

    font-size:
        clamp(
            0.95rem,
            1.35vw,
            1.35rem
        );

    font-weight: 650;

    line-height: 1;

    letter-spacing: -0.04em;

}


.gf-gallery-hero__statement p span {

    display: block;

    margin-top: 4px;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}


.gf-gallery-hero__statement-rule {

    display: block;

    width: 33px;
    height: 1px;

    margin-top: 13px;

    background:
        var(--gf-copper);

}



/* ============================================================
   19. ACCENT
============================================================ */

.gf-gallery-hero__accent {

    position: absolute;

    top: 0;
    right: 0;

    z-index: 8;

    width: 4px;
    height: 30%;

    background:
        var(--gf-green);

    transform-origin:
        top;

    animation:
        gf-gallery-hero-accent
        750ms
        700ms
        var(--gf-ease-standard)
        both;

}



/* ============================================================
   20. BOTTOM STRIP
============================================================ */

.gf-gallery-hero__bottom {

    display: grid;

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

    align-items: center;

    gap: 27px;

    min-height: 72px;

    padding:
        0 24px;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

    animation:
        gf-gallery-hero-bottom
        850ms
        650ms
        var(--gf-ease-emphasized)
        both;

}


.gf-gallery-hero__bottom-label {

    font-size: 0.47rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-gallery-hero__bottom-services {

    display: flex;

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

    gap:
        clamp(15px, 2.5vw, 36px);

}


.gf-gallery-hero__bottom-services span {

    position: relative;

    font-size: 0.46rem;
    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;

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

}


.gf-gallery-hero__bottom-services span:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 50%;
    right:
        calc(
            clamp(15px, 2.5vw, 36px) / -2
        );

    width: 3px;
    height: 3px;

    background:
        var(--gf-green);

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

}


.gf-gallery-hero__bottom-index {

    font-family:
        var(--gf-font-serif);

    font-size: 0.8rem;
    font-style: italic;

    color:
        var(--gf-leaf);

}



/* ============================================================
   21. KEYFRAMES
============================================================ */

@keyframes gf-gallery-hero-eyebrow {

    from {
        opacity: 0;

        transform:
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes gf-gallery-hero-line {

    from {
        transform:
            scaleX(0);
    }

    to {
        transform:
            scaleX(1);
    }

}


@keyframes gf-gallery-hero-title {

    from {
        opacity: 0;

        transform:
            translateY(112%);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes gf-gallery-hero-copy {

    from {
        opacity: 0;

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

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        clip-path:
            inset(0);

        transform:
            translateY(0);
    }

}


@keyframes gf-gallery-hero-image-mask {

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

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

}


@keyframes gf-gallery-hero-image-scale {

    from {
        scale: 1.08;
    }

    to {
        scale: 1;
    }

}


@keyframes gf-gallery-hero-panel {

    from {
        opacity: 0;

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

    to {
        opacity: 1;

        clip-path:
            inset(0);
    }

}


@keyframes gf-gallery-hero-accent {

    from {
        transform:
            scaleY(0);
    }

    to {
        transform:
            scaleY(1);
    }

}


@keyframes gf-gallery-hero-bottom {

    from {
        opacity: 0;

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

    to {
        opacity: 1;

        clip-path:
            inset(0);
    }

}



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

@media (min-width: 1200px) {

    .gf-gallery-hero__main {

        grid-template-columns:
            minmax(0, 0.86fr)
            minmax(520px, 1.14fr);

    }

}



/* ============================================================
   23. TABLET
   768px - 1199px
============================================================ */

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

    .gf-gallery-hero {

        height:
            min(
                610px,
                calc(
                    100svh -
                    var(--gf-first-fold-offset)
                )
            );

    }


    .gf-gallery-hero__main {

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

    }


    .gf-gallery-hero__content {

        padding:
            24px
            32px
            20px
            0;

    }


    .gf-gallery-hero__title {

        font-size:
            clamp(
                2.8rem,
                6vw,
                4.7rem
            );

    }


    .gf-gallery-hero__description {

        font-size: 0.72rem;

        line-height: 1.55;

    }


    .gf-gallery-hero__actions {

        gap: 18px;

    }


    .gf-gallery-hero__primary {

        min-height: 45px;

        padding:
            0 15px;

    }


    .gf-gallery-hero__secondary {

        font-size: 0.48rem;

    }


    .gf-gallery-hero__visual {

        grid-template-columns:
            31%
            29%
            40%;

    }


    .gf-gallery-hero__bottom {

        gap: 17px;

        padding:
            0 18px;

    }


    .gf-gallery-hero__bottom-services {

        gap: 15px;

    }


    .gf-gallery-hero__bottom-services span {

        font-size: 0.4rem;

    }

}



/* ============================================================
   24. MOBILE
   481px - 767px
============================================================ */

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

    .gf-gallery-hero {

        height:
            calc(
                100svh -
                var(--gf-first-fold-offset)
            );

    }


    .gf-gallery-hero__container {

        width: 100%;

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

    }


    .gf-gallery-hero__main {

        grid-template-columns:
            1fr;

        grid-template-rows:
            57%
            43%;

    }


    .gf-gallery-hero__content {

        justify-content: center;

        padding:
            15px
            var(--gf-gutter)
            12px;

    }


    .gf-gallery-hero__eyebrow {

        margin-bottom: 10px;

        font-size: 0.51rem;

    }


    .gf-gallery-hero__title {

        margin-bottom: 11px;

        font-size:
            clamp(
                2.5rem,
                9.5vw,
                3.9rem
            );

    }


    .gf-gallery-hero__description {

        display: -webkit-box;

        max-width: 550px;

        margin-bottom: 13px;

        overflow: hidden;

        font-size: 0.68rem;

        line-height: 1.45;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp: 3;

    }


    .gf-gallery-hero__actions {

        gap: 17px;

    }


    .gf-gallery-hero__primary {

        min-height: 42px;

        padding:
            0 14px;

        font-size: 0.51rem;

    }


    .gf-gallery-hero__secondary {

        font-size: 0.46rem;

    }


    .gf-gallery-hero__meta {

        margin-top: 14px;

    }


    .gf-gallery-hero__visual {

        grid-template-columns:
            50%
            50%;

        grid-template-rows:
            62%
            38%;

        margin: 0;

    }


    .gf-gallery-hero__media--main {

        grid-column:
            1;

        grid-row:
            1 / span 2;

    }


    .gf-gallery-hero__media--cleanup {

        grid-column:
            2;

        grid-row:
            1;

    }


    .gf-gallery-hero__media--mulch {

        grid-column:
            2;

        grid-row:
            2;

    }


    .gf-gallery-hero__media--lawn,
    .gf-gallery-hero__statement {

        display: none;

    }


    .gf-gallery-hero__bottom {

        min-height: 55px;

        grid-template-columns:
            auto
            1fr
            auto;

        padding:
            0 var(--gf-gutter);

    }


    .gf-gallery-hero__bottom-services span:nth-child(n+4) {

        display: none;

    }

}



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

@media (max-width: 480px) {

    .gf-gallery-hero {

        height:
            calc(
                100svh -
                var(--gf-first-fold-offset)
            );

    }


    .gf-gallery-hero__container {

        width: 100%;

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

    }


    .gf-gallery-hero__main {

        grid-template-columns:
            1fr;

        grid-template-rows:
            60%
            40%;

    }


    .gf-gallery-hero__content {

        justify-content: center;

        padding:
            10px
            var(--gf-gutter)
            8px;

    }


    .gf-gallery-hero__eyebrow {

        gap: 10px;

        margin-bottom: 7px;

        font-size: 0.44rem;

    }


    .gf-gallery-hero__eyebrow-line {

        width: 25px;

    }


    .gf-gallery-hero__title {

        margin-bottom: 8px;

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

    }


    .gf-gallery-hero__title-line--accent {

        font-size: 0.68em;

    }


    .gf-gallery-hero__description {

        display: -webkit-box;

        margin-bottom: 9px;

        overflow: hidden;

        font-size: 0.6rem;

        line-height: 1.4;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp: 3;

    }


    .gf-gallery-hero__actions {

        gap: 11px;

    }


    .gf-gallery-hero__primary {

        min-height: 37px;

        padding:
            0 10px;

        gap: 8px;

        font-size: 0.44rem;

    }


    .gf-gallery-hero__secondary {

        font-size: 0.4rem;

    }


    .gf-gallery-hero__meta {

        margin-top: 10px;

        gap: 10px;

    }


    .gf-gallery-hero__meta-item strong {

        font-size: 1.65rem;

    }


    .gf-gallery-hero__meta-item span,
    .gf-gallery-hero__meta-copy span {

        font-size: 0.33rem;

    }


    .gf-gallery-hero__meta-copy strong {

        font-size: 0.74rem;

    }


    .gf-gallery-hero__meta-divider {

        height: 27px;

    }


    .gf-gallery-hero__visual {

        grid-template-columns:
            58%
            42%;

        grid-template-rows:
            58%
            42%;

        margin: 0;

    }


    .gf-gallery-hero__media--main {

        grid-column:
            1;

        grid-row:
            1 / span 2;

    }


    .gf-gallery-hero__media--cleanup {

        grid-column:
            2;

        grid-row:
            1;

    }


    .gf-gallery-hero__media--mulch {

        grid-column:
            2;

        grid-row:
            2;

    }


    .gf-gallery-hero__media--lawn,
    .gf-gallery-hero__statement,
    .gf-gallery-hero__accent {

        display: none;

    }


    .gf-gallery-hero__caption {

        padding:
            9px;

    }


    .gf-gallery-hero__caption span {

        display: none;

    }


    .gf-gallery-hero__caption strong {

        font-size: 0.38rem;

    }


    .gf-gallery-hero__bottom {

        grid-template-columns:
            auto
            1fr;

        gap: 14px;

        min-height: 50px;

        padding:
            0 var(--gf-gutter);

    }


    .gf-gallery-hero__bottom-label {

        font-size: 0.36rem;

    }


    .gf-gallery-hero__bottom-services {

        justify-content: flex-end;

        gap: 12px;

    }


    .gf-gallery-hero__bottom-services span {

        font-size: 0.34rem;

    }


    .gf-gallery-hero__bottom-services span:nth-child(n+3) {

        display: none;

    }


    .gf-gallery-hero__bottom-index {

        display: none;

    }


    .gf-gallery-hero__vertical-word {

        display: none;

    }

}



/* ============================================================
   26. REDUCED MOTION
============================================================ */

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

    .gf-gallery-hero__eyebrow,
    .gf-gallery-hero__eyebrow-line,
    .gf-gallery-hero__title-line > span,
    .gf-gallery-hero__description,
    .gf-gallery-hero__actions,
    .gf-gallery-hero__meta,
    .gf-gallery-hero__image-mask,
    .gf-gallery-hero__image,
    .gf-gallery-hero__statement,
    .gf-gallery-hero__accent,
    .gf-gallery-hero__bottom {

        animation:
            none !important;

        opacity:
            1 !important;

        transform:
            none !important;

        clip-path:
            none !important;

    }


    .gf-gallery-hero__image {

        translate:
            0 0 !important;

        scale:
            1 !important;

    }

}








































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   04. SERVICE GALLERY NAVIGATION
============================================================ */


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

:root {

    --gf-gallery-nav-height: 88px;

}



/* ============================================================
   02. SECTION
============================================================ */

.gf-gallery-nav {

    position: relative;

    z-index: 900;

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

    background:
        var(--gf-paper);

}



/* ============================================================
   03. STICKY SHELL
============================================================ */

.gf-gallery-nav__shell {

    position: sticky;

    /*
        --gf-header-top is already updated by header.js.

        While the topbar is visible:
        gallery nav stays below topbar + header.

        Once the topbar leaves:
        header reaches top:0 and this navigation
        remains directly underneath it.
    */

    top:
        calc(
            var(--gf-header-top, 0px) +
            var(--gf-header-height)
        );

    z-index: 900;

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

    border-top:
        1px solid
        rgba(3, 71, 43, 0.10);

    border-bottom:
        1px solid
        rgba(3, 71, 43, 0.13);

    background:
        rgba(250, 248, 242, 0.96);

    box-shadow:
        0 10px 32px
        rgba(3, 61, 39, 0.045);

    backdrop-filter:
        blur(14px);

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

}



/* ============================================================
   04. TOP ACCENTS
============================================================ */

.gf-gallery-nav__shell::before {

    content: "";

    position: absolute;

    top: -1px;
    left: 0;

    width: 19%;
    height: 2px;

    background:
        var(--gf-green);

}


.gf-gallery-nav__shell::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -1px;

    width: 10%;
    height: 1px;

    background:
        var(--gf-copper);

}



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

.gf-gallery-nav__inner {

    display: grid;

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

    align-items: stretch;

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

    padding-inline:
        0;

}



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

.gf-gallery-nav__intro {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 190px;

    padding-right: 26px;

    border-right:
        1px solid
        rgba(3, 71, 43, 0.12);

}


.gf-gallery-nav__intro-index {

    font-family:
        var(--gf-font-serif);

    font-size: 0.82rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-gallery-nav__intro > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-gallery-nav__eyebrow {

    font-size: 0.4rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-gallery-nav__intro strong {

    font-size: 0.62rem;
    font-weight: 750;

    letter-spacing: 0.035em;

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

}



/* ============================================================
   07. NAVIGATION WRAPPER
============================================================ */

.gf-gallery-nav__navigation {

    min-width: 0;

    overflow: hidden;

}



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

.gf-gallery-nav__track {

    position: relative;

    display: grid;

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

    min-width: 0;
    height: 100%;

}



/* ============================================================
   09. ACTIVE INDICATOR
============================================================ */

.gf-gallery-nav__indicator {

    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 5;

    width:
        var(
            --gf-gallery-indicator-width,
            20%
        );

    height: 3px;

    background:
        var(--gf-green);

    transform:
        translateX(
            var(
                --gf-gallery-indicator-x,
                0px
            )
        );

    transform-origin:
        left;

    transition:
        width
        420ms
        var(--gf-ease-standard),

        transform
        420ms
        var(--gf-ease-emphasized);

}



/* ============================================================
   10. LINK
============================================================ */

.gf-gallery-nav__link {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 10px;

    min-width: 0;

    padding:
        0 18px;

    border-right:
        1px solid
        rgba(3, 71, 43, 0.09);

    color:
        var(--gf-gray);

    background:
        transparent;

    transition:
        color
        300ms
        ease,

        background-color
        300ms
        ease;

}


.gf-gallery-nav__link:last-of-type {

    border-right: 0;

}


.gf-gallery-nav__link::before {

    content: "";

    position: absolute;

    inset:
        0 0 3px;

    z-index: -1;

    background:
        rgba(5, 184, 92, 0.045);

    opacity: 0;

    transition:
        opacity
        300ms
        ease;

}


.gf-gallery-nav__link:hover::before,
.gf-gallery-nav__link.is-active::before {

    opacity: 1;

}



/* ============================================================
   11. LINK NUMBER
============================================================ */

.gf-gallery-nav__number {

    font-family:
        var(--gf-font-serif);

    font-size: 0.66rem;
    font-style: italic;

    color:
        var(--gf-copper);

    opacity: 0.65;

    transition:
        opacity
        300ms
        ease,

        color
        300ms
        ease;

}


.gf-gallery-nav__link:hover
.gf-gallery-nav__number,
.gf-gallery-nav__link.is-active
.gf-gallery-nav__number {

    opacity: 1;

}



/* ============================================================
   12. NAME
============================================================ */

.gf-gallery-nav__name {

    overflow: hidden;

    font-size: 0.51rem;
    font-weight: 750;

    line-height: 1.35;

    letter-spacing: 0.055em;

    text-overflow: ellipsis;

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        color
        300ms
        ease;

}


.gf-gallery-nav__link:hover
.gf-gallery-nav__name,
.gf-gallery-nav__link.is-active
.gf-gallery-nav__name {

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

}



/* ============================================================
   13. ARROW
============================================================ */

.gf-gallery-nav__arrow {

    color:
        var(--gf-green);

    opacity: 0;

    transform:
        translateY(-4px);

    transition:
        opacity
        280ms
        ease,

        transform
        320ms
        var(--gf-ease-standard);

}


.gf-gallery-nav__link:hover
.gf-gallery-nav__arrow,
.gf-gallery-nav__link.is-active
.gf-gallery-nav__arrow {

    opacity: 1;

    transform:
        translateY(0);

}



/* ============================================================
   14. META
============================================================ */

.gf-gallery-nav__meta {

    display: flex;

    justify-content: center;

    flex-direction: column;

    gap: 1px;

    min-width: 115px;

    padding-left: 23px;

    border-left:
        1px solid
        rgba(3, 71, 43, 0.12);

}


.gf-gallery-nav__meta span {

    font-size: 0.38rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-gallery-nav__meta strong {

    font-family:
        var(--gf-font-serif);

    font-size: 0.85rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-green);

}



/* ============================================================
   15. STICKY STATE
============================================================ */

.gf-gallery-nav.is-stuck
.gf-gallery-nav__shell {

    border-bottom-color:
        rgba(3, 71, 43, 0.18);

    box-shadow:
        0 15px 42px
        rgba(3, 61, 39, 0.09);

}



/* ============================================================
   16. DIRECT ANCHOR OFFSET

   These IDs will exist when we build the service galleries.
============================================================ */

#gallery-landscaping,
#gallery-lawn-maintenance,
#gallery-edge-bush-trimming,
#gallery-mulch-installation,
#gallery-yard-cleanup {

    scroll-margin-top:

        calc(
            var(--gf-header-height) +
            var(--gf-gallery-nav-height) +
            22px
        );

}



/* ============================================================
   17. ENTRY ANIMATION
============================================================ */

.gf-gallery-nav.is-prepared
.gf-gallery-nav__intro {

    opacity: 0;

    transform:
        translateX(-18px);

}


.gf-gallery-nav.is-prepared
.gf-gallery-nav__track {

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

}


.gf-gallery-nav.is-prepared
.gf-gallery-nav__meta {

    opacity: 0;

    transform:
        translateX(18px);

}


.gf-gallery-nav.is-visible
.gf-gallery-nav__intro {

    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        550ms
        ease,

        transform
        720ms
        var(--gf-ease-standard);

}


.gf-gallery-nav.is-visible
.gf-gallery-nav__track {

    clip-path:
        inset(0);

    transition:
        clip-path
        850ms
        80ms
        var(--gf-ease-emphasized);

}


.gf-gallery-nav.is-visible
.gf-gallery-nav__meta {

    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        550ms
        270ms
        ease,

        transform
        720ms
        270ms
        var(--gf-ease-standard);

}



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

@media (min-width: 1200px) {

    :root {

        --gf-gallery-nav-height:
            88px;

    }


    .gf-gallery-nav__link {

        padding:
            0 18px;

    }

}



/* ============================================================
   19. TABLET
   768px - 1199px
============================================================ */

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

    :root {

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

    }


    .gf-gallery-nav__inner {

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

    }


    .gf-gallery-nav__intro {

        min-width: 150px;

        padding-right: 18px;

    }


    .gf-gallery-nav__meta {

        display: none;

    }


    .gf-gallery-nav__link {

        gap: 7px;

        padding:
            0 12px;

    }


    .gf-gallery-nav__number {

        font-size:
            0.57rem;

    }


    .gf-gallery-nav__name {

        font-size:
            0.43rem;

    }


    .gf-gallery-nav__arrow {

        display: none;

    }

}



/* ============================================================
   20. MOBILE
   481px - 767px
============================================================ */

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

    :root {

        --gf-gallery-nav-height:
            72px;

    }


    .gf-gallery-nav__inner {

        display: block;

        width: 100%;

    }


    .gf-gallery-nav__intro,
    .gf-gallery-nav__meta {

        display: none;

    }


    .gf-gallery-nav__navigation {

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        overscroll-behavior-inline:
            contain;

        -webkit-overflow-scrolling:
            touch;

    }


    .gf-gallery-nav__navigation::-webkit-scrollbar {

        display: none;

    }


    .gf-gallery-nav__track {

        display: flex;

        width: max-content;
        min-width: 100%;

    }


    .gf-gallery-nav__link {

        flex:
            0 0 auto;

        min-width: 170px;

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

        padding:
            0 18px;

    }


    .gf-gallery-nav__name {

        font-size: 0.46rem;

    }


    .gf-gallery-nav__arrow {

        display: none;

    }

}



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

@media (max-width: 480px) {

    :root {

        --gf-gallery-nav-height:
            65px;

    }


    .gf-gallery-nav__inner {

        display: block;

        width: 100%;

    }


    .gf-gallery-nav__intro,
    .gf-gallery-nav__meta {

        display: none;

    }


    .gf-gallery-nav__navigation {

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        scrollbar-width: none;

        overscroll-behavior-inline:
            contain;

        -webkit-overflow-scrolling:
            touch;

    }


    .gf-gallery-nav__navigation::-webkit-scrollbar {

        display: none;

    }


    .gf-gallery-nav__track {

        display: flex;

        width: max-content;
        min-width: 100%;

    }


    .gf-gallery-nav__link {

        flex:
            0 0 auto;

        min-width: 145px;

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

        gap: 8px;

        padding:
            0 14px;

    }


    .gf-gallery-nav__number {

        font-size: 0.51rem;

    }


    .gf-gallery-nav__name {

        font-size: 0.41rem;

    }


    .gf-gallery-nav__arrow {

        display: none;

    }

}



/* ============================================================
   22. REDUCED MOTION
============================================================ */

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

    .gf-gallery-nav__intro,
    .gf-gallery-nav__track,
    .gf-gallery-nav__meta {

        opacity:
            1 !important;

        transform:
            none !important;

        clip-path:
            none !important;

        transition:
            none !important;

    }


    .gf-gallery-nav__indicator,
    .gf-gallery-nav__link,
    .gf-gallery-nav__link::before,
    .gf-gallery-nav__arrow {

        transition:
            none !important;

    }

}









































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   05. GALLERY INTRODUCTION
============================================================ */


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

.gf-gallery-intro {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    background-color:
        var(--gf-ivory);

    background-image:
        var(--gf-paper-texture);

}


.gf-gallery-intro::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 26%;
    height: 2px;

    background:
        var(--gf-copper);

}


.gf-gallery-intro::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 9%;
    height: 2px;

    background:
        var(--gf-green);

}



/* ============================================================
   02. BACKGROUND DECORATION
============================================================ */

.gf-gallery-intro__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.gf-gallery-intro__grid {

    position: absolute;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        rgba(3, 71, 43, 0.04);

}


.gf-gallery-intro__grid--1 {

    left: 34%;

}


.gf-gallery-intro__grid--2 {

    right: 32%;

}


.gf-gallery-intro__outline {

    position: absolute;

    right: -240px;
    bottom: -330px;

    width: 600px;
    height: 600px;

    border:
        1px solid
        rgba(3, 71, 43, 0.035);

    transform:
        rotate(38deg);

}


.gf-gallery-intro__outline::before,
.gf-gallery-intro__outline::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.028);

}


.gf-gallery-intro__outline::before {

    inset: 36px;

}


.gf-gallery-intro__outline::after {

    inset: 75px;

}


.gf-gallery-intro__watermark {

    position: absolute;

    left: -0.05em;
    bottom: -0.21em;

    font-family:
        var(--gf-font-serif);

    font-size:
        clamp(
            15rem,
            26vw,
            30rem
        );

    font-style: italic;
    font-weight: 500;

    line-height: 0.7;

    letter-spacing: -0.09em;

    color:
        rgba(3, 71, 43, 0.027);

}



/* ============================================================
   03. LAYOUT
============================================================ */

.gf-gallery-intro__layout {

    display: grid;

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

    gap:
        clamp(65px, 9vw, 145px);

    align-items: center;

}



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

.gf-gallery-intro__content {

    position: relative;

    max-width: 850px;

}



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

.gf-gallery-intro__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 21px;

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-gallery-intro__eyebrow-line {

    display: block;

    width: 40px;
    height: 1px;

    background:
        currentColor;

}



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

.gf-gallery-intro__title {

    max-width: 820px;

    margin:
        0 0 28px;

    font-size:
        clamp(
            3rem,
            5vw,
            6rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing: -0.064em;

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

}


.gf-gallery-intro__title-line {

    display: block;

    overflow: hidden;

    padding-bottom:
        0.035em;

}


.gf-gallery-intro__title-line > span {

    display: block;

}


.gf-gallery-intro__title-line--accent {

    margin-top:
        0.06em;

    font-family:
        var(--gf-font-serif);

    font-size: 0.78em;

    font-style: italic;
    font-weight: 500;

    line-height: 1;

    color:
        var(--gf-green);

}



/* ============================================================
   07. DESCRIPTION
============================================================ */

.gf-gallery-intro__description {

    max-width: 620px;

    margin:
        0 0 36px;

    font-size:
        clamp(
            0.81rem,
            0.9vw,
            0.96rem
        );

    line-height: 1.75;

    color:
        var(--gf-gray);

}



/* ============================================================
   08. NOTE
============================================================ */

.gf-gallery-intro__note {

    display: grid;

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

    gap: 19px;

    max-width: 560px;

    padding:
        20px 0 0;

    border-top:
        1px solid
        rgba(3, 71, 43, 0.14);

}


.gf-gallery-intro__note-mark {

    height: 50px;

    font-family:
        var(--gf-font-serif);

    font-size: 4.6rem;
    font-weight: 500;

    line-height: 0.8;

    color:
        var(--gf-green);

}


.gf-gallery-intro__note > div {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.gf-gallery-intro__note > div > span {

    font-size: 0.49rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-gallery-intro__note p {

    margin: 0;

    font-size: 0.7rem;

    line-height: 1.65;

    color:
        var(--gf-gray);

}



/* ============================================================
   09. INDEX
============================================================ */

.gf-gallery-intro__index {

    position: relative;

    min-width: 0;

    border:
        1px solid
        rgba(3, 71, 43, 0.13);

    background:
        rgba(250, 248, 242, 0.75);

    box-shadow:
        var(--gf-shadow-soft);

}



/* ============================================================
   10. INDEX TOP
============================================================ */

.gf-gallery-intro__index-top {

    display: flex;

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

    gap: 25px;

    min-height: 100px;

    padding:
        22px 25px;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-gallery-intro__index-top > div:first-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.gf-gallery-intro__index-top span {

    font-size: 0.45rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-gallery-intro__index-top strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.3rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-white);

}


.gf-gallery-intro__leaf {

    width: 47px;
    height: 47px;

    color:
        rgba(126, 217, 87, 0.5);

}


.gf-gallery-intro__leaf svg {

    width: 100%;
    height: 100%;

}



/* ============================================================
   11. SERVICE LINK
============================================================ */

.gf-gallery-intro__service {

    position: relative;

    isolation: isolate;

    display: grid;

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

    align-items: center;

    gap: 16px;

    min-height: 78px;

    padding:
        13px 23px;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(3, 71, 43, 0.11);

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

}


.gf-gallery-intro__service:last-child {

    border-bottom: 0;

}


.gf-gallery-intro__service::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        rgba(5, 184, 92, 0.075);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        420ms
        var(--gf-ease-emphasized);

}


.gf-gallery-intro__service:hover::before,
.gf-gallery-intro__service:focus-visible::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}



/* ============================================================
   12. SERVICE NUMBER
============================================================ */

.gf-gallery-intro__service-number {

    font-family:
        var(--gf-font-serif);

    font-size: 0.74rem;
    font-style: italic;

    color:
        var(--gf-copper);

}



/* ============================================================
   13. SERVICE COPY
============================================================ */

.gf-gallery-intro__service > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.gf-gallery-intro__service strong {

    font-size: 0.69rem;
    font-weight: 750;

    letter-spacing: -0.01em;

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

}


.gf-gallery-intro__service > div span {

    font-size: 0.5rem;

    color:
        var(--gf-gray);

}



/* ============================================================
   14. SERVICE ARROW
============================================================ */

.gf-gallery-intro__service-arrow {

    font-size: 0.82rem;

    color:
        var(--gf-green);

    opacity: 0.45;

    transform:
        translate(0, 0);

    transition:
        opacity
        280ms ease,

        transform
        320ms
        var(--gf-ease-standard);

}


.gf-gallery-intro__service:hover
.gf-gallery-intro__service-arrow {

    opacity: 1;

    transform:
        translate(3px, 3px);

}



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

.gf-gallery-intro__bottom {

    display: grid;

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

    align-items: center;

    gap: 22px;

    margin-top:
        clamp(50px, 6vw, 78px);

}


.gf-gallery-intro__bottom-line {

    display: block;

    width: 100%;
    height: 1px;

    background:
        var(--gf-copper);

}


.gf-gallery-intro__bottom-message {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-gallery-intro__bottom-message span {

    font-size: 0.43rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-gallery-intro__bottom-message strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;

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

}



/* ============================================================
   16. START LINK
============================================================ */

.gf-gallery-intro__start {

    position: relative;

    isolation: isolate;

    display: inline-flex;

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

    gap: 18px;

    min-height: 47px;

    padding:
        0 18px;

    overflow: hidden;

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

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

    color:
        var(--gf-white);

    font-size: 0.52rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.gf-gallery-intro__start::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        400ms
        var(--gf-ease-emphasized);

}


.gf-gallery-intro__start:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-gallery-intro__start span:last-child {

    color:
        var(--gf-leaf);

    transition:
        color
        280ms ease,

        transform
        300ms
        var(--gf-ease-standard);

}


.gf-gallery-intro__start:hover
span:last-child {

    color:
        var(--gf-white);

    transform:
        translateY(3px);

}



/* ============================================================
   17. PREPARED STATE
============================================================ */

.gf-gallery-intro.is-prepared
.gf-gallery-intro__eyebrow {

    opacity: 0;

    transform:
        translateX(-18px);

}


.gf-gallery-intro.is-prepared
.gf-gallery-intro__title-line > span {

    transform:
        translateY(110%);

}


.gf-gallery-intro.is-prepared
.gf-gallery-intro__description,
.gf-gallery-intro.is-prepared
.gf-gallery-intro__note {

    opacity: 0;

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

}


.gf-gallery-intro.is-prepared
.gf-gallery-intro__index {

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

}


.gf-gallery-intro.is-prepared
.gf-gallery-intro__bottom {

    opacity: 0;

}



/* ============================================================
   18. REVEAL
============================================================ */

.gf-gallery-intro.is-visible
.gf-gallery-intro__eyebrow {

    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        550ms ease,

        transform
        720ms
        var(--gf-ease-standard);

}


.gf-gallery-intro.is-visible
.gf-gallery-intro__title-line > span {

    transform:
        translateY(0);

    transition:
        transform
        900ms
        var(--gf-ease-emphasized);

}


.gf-gallery-intro.is-visible
.gf-gallery-intro__title-line:nth-child(1) > span {

    transition-delay:
        80ms;

}


.gf-gallery-intro.is-visible
.gf-gallery-intro__title-line:nth-child(2) > span {

    transition-delay:
        150ms;

}


.gf-gallery-intro.is-visible
.gf-gallery-intro__title-line:nth-child(3) > span {

    transition-delay:
        220ms;

}


.gf-gallery-intro.is-visible
.gf-gallery-intro__description {

    opacity: 1;

    clip-path:
        inset(0);

    transition:
        opacity
        600ms
        330ms ease,

        clip-path
        820ms
        330ms
        var(--gf-ease-emphasized);

}


.gf-gallery-intro.is-visible
.gf-gallery-intro__note {

    opacity: 1;

    clip-path:
        inset(0);

    transition:
        opacity
        600ms
        430ms ease,

        clip-path
        820ms
        430ms
        var(--gf-ease-emphasized);

}


.gf-gallery-intro.is-visible
.gf-gallery-intro__index {

    clip-path:
        inset(0);

    transition:
        clip-path
        950ms
        260ms
        var(--gf-ease-emphasized);

}


.gf-gallery-intro.is-visible
.gf-gallery-intro__bottom {

    opacity: 1;

    transition:
        opacity
        650ms
        650ms
        ease;

}



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

@media (min-width: 1200px) {

    .gf-gallery-intro__layout {

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

    }

}



/* ============================================================
   20. TABLET
   768px - 1199px
============================================================ */

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

    .gf-gallery-intro__layout {

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

        gap:
            48px;

    }


    .gf-gallery-intro__title {

        font-size:
            clamp(
                3rem,
                6.5vw,
                4.8rem
            );

    }


    .gf-gallery-intro__description {

        font-size: 0.79rem;

    }


    .gf-gallery-intro__index-top {

        min-height: 91px;

        padding:
            20px 22px;

    }


    .gf-gallery-intro__service {

        min-height: 72px;

        padding:
            12px 19px;

    }

}



/* ============================================================
   21. MOBILE
   481px - 767px
============================================================ */

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

    .gf-gallery-intro__layout {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .gf-gallery-intro__title {

        max-width: 590px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.3rem
            );

    }


    .gf-gallery-intro__description {

        max-width: 550px;

    }


    .gf-gallery-intro__note {

        max-width: 520px;

    }


    .gf-gallery-intro__index {

        max-width: none;

    }


    .gf-gallery-intro__service {

        min-height: 70px;

    }


    .gf-gallery-intro__bottom {

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

    }


    .gf-gallery-intro__watermark {

        font-size: 18rem;

    }

}



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

@media (max-width: 480px) {

    .gf-gallery-intro__layout {

        grid-template-columns:
            1fr;

        gap:
            36px;

    }


    .gf-gallery-intro__eyebrow {

        margin-bottom: 14px;

        font-size: 0.57rem;

    }


    .gf-gallery-intro__title {

        margin-bottom: 21px;

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

    }


    .gf-gallery-intro__description {

        margin-bottom: 28px;

        font-size: 0.75rem;

    }


    .gf-gallery-intro__note {

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

        gap: 13px;

    }


    .gf-gallery-intro__note-mark {

        font-size: 3.7rem;

    }


    .gf-gallery-intro__index-top {

        min-height: 83px;

        padding:
            18px;

    }


    .gf-gallery-intro__index-top strong {

        font-size: 1.13rem;

    }


    .gf-gallery-intro__leaf {

        width: 39px;
        height: 39px;

    }


    .gf-gallery-intro__service {

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

        gap: 11px;

        min-height: 66px;

        padding:
            11px 15px;

    }


    .gf-gallery-intro__service strong {

        font-size: 0.61rem;

    }


    .gf-gallery-intro__service > div span {

        font-size: 0.43rem;

    }


    .gf-gallery-intro__bottom {

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

        gap: 13px;

        margin-top: 38px;

    }


    .gf-gallery-intro__start {

        grid-column:
            2;

        width: 100%;

        margin-top: 8px;

    }


    .gf-gallery-intro__watermark {

        font-size: 13rem;

    }

}



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

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

    .gf-gallery-intro__eyebrow,
    .gf-gallery-intro__description,
    .gf-gallery-intro__note,
    .gf-gallery-intro__bottom {

        opacity:
            1 !important;

        transform:
            none !important;

        clip-path:
            none !important;

        transition:
            none !important;

    }


    .gf-gallery-intro__title-line > span {

        transform:
            none !important;

        transition:
            none !important;

    }


    .gf-gallery-intro__index {

        clip-path:
            none !important;

        transition:
            none !important;

    }

}









































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   06. LANDSCAPING
============================================================ */


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

.gf-service-gallery {

    position: relative;

    isolation: isolate;

    padding:
        clamp(80px, 9vw, 140px)
        0;

    overflow: hidden;

}


.gf-service-gallery--landscaping {

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-service-gallery--landscaping::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 33%;
    height: 3px;

    background:
        var(--gf-green);

}


.gf-service-gallery--landscaping::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 13%;
    height: 1px;

    background:
        var(--gf-copper);

}



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

.gf-service-gallery__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.gf-service-gallery__texture {

    position: absolute;

    inset: 0;

    opacity: 0.08;

    background-image:

        radial-gradient(
            rgba(255,255,255,0.18)
            0.5px,
            transparent 0.75px
        );

    background-size:
        11px 11px;

}


.gf-service-gallery__outline {

    position: absolute;

    border:
        1px solid
        rgba(126, 217, 87, 0.055);

}


.gf-service-gallery__outline::before,
.gf-service-gallery__outline::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(126, 217, 87, 0.045);

}


.gf-service-gallery__outline::before {

    inset: 35px;

}


.gf-service-gallery__outline::after {

    inset: 73px;

}


.gf-service-gallery__outline--1 {

    top: -360px;
    right: -350px;

    width: 720px;
    height: 720px;

    transform:
        rotate(37deg);

}


.gf-service-gallery__outline--2 {

    left: -320px;
    bottom: -460px;

    width: 700px;
    height: 700px;

    transform:
        rotate(49deg);

}


.gf-service-gallery__watermark {

    position: absolute;

    right: -0.02em;
    top: 150px;

    writing-mode:
        vertical-rl;

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

    font-weight: 800;

    letter-spacing: -0.06em;

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

}



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

.gf-service-gallery__header {

    display: grid;

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

    align-items: end;

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

    margin-bottom:
        clamp(55px, 7vw, 95px);

}



/* ============================================================
   04. EYEBROW
============================================================ */

.gf-service-gallery__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-service-gallery__eyebrow-line {

    width: 42px;
    height: 1px;

    background:
        currentColor;

}



/* ============================================================
   05. TITLE
============================================================ */

.gf-service-gallery__title {

    max-width: 830px;

    margin: 0;

    font-size:
        clamp(
            3rem,
            5.2vw,
            6.1rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing: -0.065em;

    color:
        var(--gf-white);

}


.gf-service-gallery__title span {

    display: block;

    margin-top: 0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   06. SUMMARY
============================================================ */

.gf-service-gallery__summary {

    padding-left: 28px;

    border-left:
        1px solid
        rgba(255,255,255,0.14);

}


.gf-service-gallery__count {

    display: flex;

    align-items: flex-end;

    gap: 13px;

    margin-bottom: 18px;

}


.gf-service-gallery__count strong {

    font-size:
        clamp(
            3rem,
            4vw,
            4.8rem
        );

    font-weight: 600;

    line-height: 0.78;

    letter-spacing: -0.07em;

    color:
        var(--gf-green-bright);

}


.gf-service-gallery__count > span {

    display: flex;

    flex-direction: column;

    font-size: 0.53rem;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(--gf-white);

}


.gf-service-gallery__count em {

    font-style: normal;
    font-weight: 600;

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

}


.gf-service-gallery__summary p {

    max-width: 350px;

    margin:
        0 0 20px;

    font-size: 0.76rem;

    line-height: 1.7;

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

}



/* ============================================================
   07. VIEWER HINT
============================================================ */

.gf-service-gallery__viewer-hint {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.45rem;
    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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

}


.gf-service-gallery__viewer-icon {

    display: grid;

    width: 24px;
    height: 24px;

    place-items: center;

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

    background:
        var(--gf-leaf);

}



/* ============================================================
   08. GRID
============================================================ */

.gf-service-gallery__grid {

    display: grid;

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

    grid-auto-rows:
        92px;

    grid-auto-flow:
        dense;

    gap: 5px;

}



/* ============================================================
   09. ITEMS
============================================================ */

.gf-service-gallery__item {

    position: relative;

    isolation: isolate;

    display: block;

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

    padding: 0;

    overflow: hidden;

    cursor: zoom-in;

    border: 0;

    background:
        var(--gf-charcoal);

    color:
        var(--gf-white);

}


.gf-service-gallery__item--feature {

    grid-column:
        span 6;

    grid-row:
        span 4;

}


.gf-service-gallery__item--large {

    grid-column:
        span 4;

    grid-row:
        span 3;

}


.gf-service-gallery__item--wide {

    grid-column:
        span 6;

    grid-row:
        span 2;

}


.gf-service-gallery__item--tall {

    grid-column:
        span 3;

    grid-row:
        span 3;

}


.gf-service-gallery__item--medium {

    grid-column:
        span 4;

    grid-row:
        span 2;

}


.gf-service-gallery__item--small {

    grid-column:
        span 3;

    grid-row:
        span 2;

}


.gf-service-gallery__item--panorama {

    grid-column:
        1 / -1;

    grid-row:
        span 3;

}



/* ============================================================
   10. IMAGE
============================================================ */

.gf-service-gallery__item img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

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

        filter
        550ms
        ease;

}


.gf-service-gallery__item::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            to top,
            rgba(3, 30, 19, 0.68),
            transparent 43%
        );

    opacity: 0.45;

    transition:
        opacity
        400ms
        ease;

}


.gf-service-gallery__item::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

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

    transition:
        border-color
        350ms
        ease;

}


.gf-service-gallery__item:hover img,
.gf-service-gallery__item:focus-visible img {

    transform:
        scale(1.045);

}


.gf-service-gallery__item:hover::before,
.gf-service-gallery__item:focus-visible::before {

    opacity: 0.75;

}


.gf-service-gallery__item:hover::after,
.gf-service-gallery__item:focus-visible::after {

    border-color:
        rgba(126,217,87,0.65);

}



/* ============================================================
   11. IMAGE UI
============================================================ */

.gf-service-gallery__item-ui {

    position: absolute;

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

    z-index: 4;

    display: flex;

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

    padding:
        13px 15px;

    pointer-events: none;

}


.gf-service-gallery__item-ui span:first-child {

    font-family:
        var(--gf-font-serif);

    font-size: 0.64rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-service-gallery__item-ui span:last-child {

    font-size: 0.8rem;

    color:
        var(--gf-leaf);

    opacity: 0;

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

    transition:
        opacity
        300ms
        ease,

        transform
        350ms
        var(--gf-ease-standard);

}


.gf-service-gallery__item:hover
.gf-service-gallery__item-ui span:last-child,
.gf-service-gallery__item:focus-visible
.gf-service-gallery__item-ui span:last-child {

    opacity: 1;

    transform:
        translate(0);

}



/* ============================================================
   12. FOOTER
============================================================ */

.gf-service-gallery__footer {

    display: grid;

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

    align-items: center;

    gap: 28px;

    margin-top:
        clamp(36px, 4vw, 52px);

}


.gf-service-gallery__footer-index {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-service-gallery__footer-index span,
.gf-service-gallery__next > span:first-child {

    font-size: 0.43rem;
    font-weight: 750;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-service-gallery__footer-index strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-white);

}


.gf-service-gallery__footer-line {

    width: 100%;
    height: 1px;

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

}


.gf-service-gallery__next {

    display: grid;

    grid-template-columns:
        auto auto;

    align-items: center;

    column-gap: 14px;

}


.gf-service-gallery__next strong {

    grid-column: 1;

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}


.gf-service-gallery__next > span:last-child {

    grid-column: 2;
    grid-row: 1 / span 2;

    color:
        var(--gf-copper);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-service-gallery__next:hover
> span:last-child {

    transform:
        translateY(4px);

}



/* ============================================================
   13. REVEAL PREPARATION
============================================================ */

.gf-service-gallery.is-prepared
.gf-service-gallery__eyebrow,
.gf-service-gallery.is-prepared
.gf-service-gallery__title,
.gf-service-gallery.is-prepared
.gf-service-gallery__summary {

    opacity: 0;

    transform:
        translateY(22px);

}


.gf-service-gallery.is-prepared
.gf-service-gallery__item {

    opacity: 0;

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

}


.gf-service-gallery.is-prepared
.gf-service-gallery__footer {

    opacity: 0;

}



/* ============================================================
   14. HEADER REVEAL
============================================================ */

.gf-service-gallery.is-header-visible
.gf-service-gallery__eyebrow {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        550ms ease,

        transform
        720ms
        var(--gf-ease-standard);

}


.gf-service-gallery.is-header-visible
.gf-service-gallery__title {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        70ms
        ease,

        transform
        850ms
        70ms
        var(--gf-ease-standard);

}


.gf-service-gallery.is-header-visible
.gf-service-gallery__summary {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        160ms
        ease,

        transform
        780ms
        160ms
        var(--gf-ease-standard);

}



/* ============================================================
   15. INDIVIDUAL IMAGE REVEAL
============================================================ */

.gf-service-gallery__item.is-visible {

    opacity: 1 !important;

    clip-path:
        inset(0) !important;

    transition:
        opacity
        650ms
        ease,

        clip-path
        850ms
        var(--gf-ease-emphasized);

}


.gf-service-gallery__footer.is-visible {

    opacity: 1 !important;

    transition:
        opacity
        650ms
        ease;

}



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

@media (min-width: 1200px) {

    .gf-service-gallery__grid {

        grid-auto-rows:
            92px;

    }

}



/* ============================================================
   17. TABLET
============================================================ */

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

    .gf-service-gallery__header {

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

        gap: 50px;

    }


    .gf-service-gallery__title {

        font-size:
            clamp(
                3rem,
                6.5vw,
                4.8rem
            );

    }


    .gf-service-gallery__grid {

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

        grid-auto-rows:
            86px;

    }


    .gf-service-gallery__item--feature {

        grid-column:
            span 5;

        grid-row:
            span 4;

    }


    .gf-service-gallery__item--large {

        grid-column:
            span 4;

    }


    .gf-service-gallery__item--wide {

        grid-column:
            span 5;

    }


    .gf-service-gallery__item--tall {

        grid-column:
            span 3;

    }


    .gf-service-gallery__item--medium {

        grid-column:
            span 4;

    }


    .gf-service-gallery__item--small {

        grid-column:
            span 3;

    }


    .gf-service-gallery__item--panorama {

        grid-column:
            1 / -1;

    }

}



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

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

    .gf-service-gallery {

        padding:
            75px 0;

    }


    .gf-service-gallery__header {

        grid-template-columns:
            1fr;

        gap: 30px;

        margin-bottom: 45px;

    }


    .gf-service-gallery__title {

        max-width: 590px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.3rem
            );

    }


    .gf-service-gallery__summary {

        max-width: 520px;

    }


    .gf-service-gallery__grid {

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

        grid-auto-rows:
            155px;

        gap: 4px;

    }


    .gf-service-gallery__item--feature {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-service-gallery__item--large,
    .gf-service-gallery__item--wide,
    .gf-service-gallery__item--tall,
    .gf-service-gallery__item--medium,
    .gf-service-gallery__item--small {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-service-gallery__item--wide {

        grid-column:
            1 / -1;

    }


    .gf-service-gallery__item--panorama {

        grid-column:
            1 / -1;

        grid-row:
            span 2;

    }

}



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

@media (max-width: 480px) {

    .gf-service-gallery {

        padding:
            65px 0;

    }


    .gf-service-gallery__header {

        grid-template-columns:
            1fr;

        gap: 25px;

        margin-bottom: 35px;

    }


    .gf-service-gallery__eyebrow {

        font-size: 0.55rem;

    }


    .gf-service-gallery__title {

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

    }


    .gf-service-gallery__summary {

        padding-left: 18px;

    }


    .gf-service-gallery__grid {

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

        grid-auto-rows:
            120px;

        gap: 3px;

    }


    .gf-service-gallery__item--feature {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-service-gallery__item--large,
    .gf-service-gallery__item--wide,
    .gf-service-gallery__item--medium {

        grid-column:
            1 / -1;

        grid-row:
            span 2;

    }


    .gf-service-gallery__item--tall,
    .gf-service-gallery__item--small {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-service-gallery__item--panorama {

        grid-column:
            1 / -1;

        grid-row:
            span 2;

    }


    .gf-service-gallery__footer {

        grid-template-columns:
            1fr;

        gap: 18px;

    }


    .gf-service-gallery__footer-line {

        display: none;

    }


    .gf-service-gallery__next {

        justify-self:
            start;

    }

}



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

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

    .gf-service-gallery__eyebrow,
    .gf-service-gallery__title,
    .gf-service-gallery__summary,
    .gf-service-gallery__item,
    .gf-service-gallery__footer {

        opacity:
            1 !important;

        transform:
            none !important;

        clip-path:
            none !important;

        transition:
            none !important;

    }


    .gf-service-gallery__item img {

        transition:
            none !important;

    }

}








































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   07. LAWN MAINTENANCE
============================================================ */


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

.gf-service-gallery--lawn {

    position: relative;

    padding:
        clamp(80px, 9vw, 140px)
        0;

    color:
        var(--gf-ink);

    background-color:
        var(--gf-ivory);

    background-image:
        var(--gf-paper-texture);

}


.gf-service-gallery--lawn::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 31%;
    height: 3px;

    background:
        var(--gf-green);

}


.gf-service-gallery--lawn::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 11%;
    height: 1px;

    background:
        var(--gf-copper);

}



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

.gf-lawn-gallery__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.gf-lawn-gallery__paper-grid {

    position: absolute;

    inset: 0;

    opacity: 0.45;

    background-image:

        linear-gradient(
            rgba(3, 71, 43, 0.027)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(3, 71, 43, 0.027)
            1px,
            transparent 1px
        );

    background-size:
        90px 90px;

}


.gf-lawn-gallery__contour {

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.038);

}


.gf-lawn-gallery__contour::before,
.gf-lawn-gallery__contour::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.03);

}


.gf-lawn-gallery__contour::before {

    inset: 34px;

}


.gf-lawn-gallery__contour::after {

    inset: 72px;

}


.gf-lawn-gallery__contour--1 {

    top: -340px;
    left: -320px;

    width: 670px;
    height: 670px;

    transform:
        rotate(37deg);

}


.gf-lawn-gallery__contour--2 {

    right: -330px;
    bottom: -420px;

    width: 700px;
    height: 700px;

    transform:
        rotate(48deg);

}


.gf-lawn-gallery__watermark {

    position: absolute;

    right: -0.05em;
    top: 50%;

    font-size:
        clamp(
            10rem,
            20vw,
            23rem
        );

    font-weight: 800;

    line-height: 0.7;

    letter-spacing: -0.09em;

    color:
        rgba(3, 71, 43, 0.022);

    transform:
        translateY(-50%);

}



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

.gf-lawn-gallery__header {

    display: grid;

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

    align-items: end;

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

    margin-bottom:
        clamp(55px, 7vw, 92px);

}



/* ============================================================
   04. EYEBROW
============================================================ */

.gf-lawn-gallery__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-lawn-gallery__eyebrow-line {

    width: 42px;
    height: 1px;

    background:
        currentColor;

}



/* ============================================================
   05. TITLE
============================================================ */

.gf-lawn-gallery__title {

    max-width: 830px;

    margin: 0;

    font-size:
        clamp(
            3rem,
            5.2vw,
            6.1rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing: -0.065em;

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

}


.gf-lawn-gallery__title span {

    display: block;

    margin-top: 0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-green);

}



/* ============================================================
   06. SUMMARY
============================================================ */

.gf-lawn-gallery__summary {

    padding-left: 28px;

    border-left:
        1px solid
        rgba(3, 71, 43, 0.15);

}


.gf-lawn-gallery__count {

    display: flex;

    align-items: flex-end;

    gap: 14px;

    margin-bottom: 18px;

}


.gf-lawn-gallery__count > strong {

    font-size:
        clamp(
            3.1rem,
            4.3vw,
            5rem
        );

    font-weight: 600;

    line-height: 0.78;

    letter-spacing: -0.075em;

    color:
        var(--gf-green);

}


.gf-lawn-gallery__count > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-lawn-gallery__count span {

    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-lawn-gallery__count small {

    font-size: 0.45rem;
    font-weight: 600;

    color:
        var(--gf-gray);

}


.gf-lawn-gallery__summary p {

    max-width: 350px;

    margin:
        0 0 20px;

    font-size: 0.76rem;

    line-height: 1.7;

    color:
        var(--gf-gray);

}



/* ============================================================
   07. VIEWER HINT
============================================================ */

.gf-lawn-gallery__hint {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.44rem;
    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-lawn-gallery__hint-icon {

    display: grid;

    width: 24px;
    height: 24px;

    flex: 0 0 auto;

    place-items: center;

    color:
        var(--gf-white);

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

}



/* ============================================================
   08. COLLECTION

   12-column architectural collage.
============================================================ */

.gf-lawn-gallery__collection {

    display: grid;

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

    grid-template-rows:
        repeat(9, 92px);

    gap: 5px;

}



/* ============================================================
   09. ITEM
============================================================ */

.gf-lawn-gallery__item {

    position: relative;

    isolation: isolate;

    display: block;

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

    padding: 0;

    overflow: hidden;

    cursor: zoom-in;

    border: 0;

    border-radius: 0;

    background:
        var(--gf-cream);

    color:
        var(--gf-white);

}



/* ============================================================
   10. ITEM POSITIONS
============================================================ */

.gf-lawn-gallery__item--hero {

    grid-column:
        1 / 8;

    grid-row:
        1 / 5;

}


.gf-lawn-gallery__statement {

    grid-column:
        8 / 13;

    grid-row:
        1 / 3;

}


.gf-lawn-gallery__item--vertical {

    grid-column:
        8 / 11;

    grid-row:
        3 / 6;

}


.gf-lawn-gallery__item--square-a {

    grid-column:
        11 / 13;

    grid-row:
        3 / 6;

}


.gf-lawn-gallery__item--square-b {

    grid-column:
        1 / 5;

    grid-row:
        5 / 8;

}


.gf-lawn-gallery__item--wide {

    grid-column:
        5 / 8;

    grid-row:
        5 / 8;

}


.gf-lawn-gallery__item--lower-a {

    grid-column:
        8 / 13;

    grid-row:
        6 / 8;

}


.gf-lawn-gallery__item--lower-b {

    grid-column:
        1 / 13;

    grid-row:
        8 / 10;

}



/* ============================================================
   11. IMAGES
============================================================ */

.gf-lawn-gallery__item img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

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

        filter
        600ms
        ease;

}


.gf-lawn-gallery__item:hover img,
.gf-lawn-gallery__item:focus-visible img {

    transform:
        scale(1.045);

    filter:
        saturate(1.04)
        contrast(1.025);

}



/* ============================================================
   12. IMAGE SHADE
============================================================ */

.gf-lawn-gallery__image-shade {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            to top,
            rgba(3, 31, 20, 0.72),
            transparent 47%
        );

    opacity: 0.45;

    transition:
        opacity
        400ms
        ease;

}


.gf-lawn-gallery__item:hover
.gf-lawn-gallery__image-shade,
.gf-lawn-gallery__item:focus-visible
.gf-lawn-gallery__image-shade {

    opacity: 0.75;

}



/* ============================================================
   13. GREEN BORDER HOVER
============================================================ */

.gf-lawn-gallery__item::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    border:
        1px solid
        rgba(126, 217, 87, 0);

    transition:
        border-color
        350ms
        ease;

}


.gf-lawn-gallery__item:hover::after,
.gf-lawn-gallery__item:focus-visible::after {

    border-color:
        rgba(5, 184, 92, 0.72);

}



/* ============================================================
   14. ITEM UI
============================================================ */

.gf-lawn-gallery__item-ui {

    position: absolute;

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

    z-index: 5;

    display: grid;

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

    align-items: center;

    gap: 13px;

    padding:
        13px 15px;

    pointer-events: none;

}


.gf-lawn-gallery__photo-number {

    font-family:
        var(--gf-font-serif);

    font-size: 0.65rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-lawn-gallery__photo-label {

    font-size: 0.47rem;
    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--gf-white);

}


.gf-lawn-gallery__expand {

    color:
        var(--gf-leaf);

    opacity: 0;

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

    transition:
        opacity
        300ms ease,

        transform
        350ms
        var(--gf-ease-standard);

}


.gf-lawn-gallery__item:hover
.gf-lawn-gallery__expand,
.gf-lawn-gallery__item:focus-visible
.gf-lawn-gallery__expand {

    opacity: 1;

    transform:
        translate(0);

}



/* ============================================================
   15. STATEMENT
============================================================ */

.gf-lawn-gallery__statement {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        clamp(22px, 3vw, 37px);

    overflow: hidden;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-lawn-gallery__statement::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        var(--gf-green);

}


.gf-lawn-gallery__statement::after {

    content: "";

    position: absolute;

    right: -100px;
    bottom: -110px;

    width: 220px;
    height: 220px;

    border:
        1px solid
        rgba(126, 217, 87, 0.09);

    transform:
        rotate(37deg);

}


.gf-lawn-gallery__statement-index {

    position: relative;

    z-index: 2;

    font-size: 0.42rem;
    font-weight: 750;

    letter-spacing: 0.11em;

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

}


.gf-lawn-gallery__statement-icon {

    position: absolute;

    top: 22px;
    right: 25px;

    width: 49px;
    height: 49px;

    color:
        rgba(126,217,87,0.43);

}


.gf-lawn-gallery__statement-icon svg {

    width: 100%;
    height: 100%;

}


.gf-lawn-gallery__statement > div {

    position: relative;

    z-index: 2;

    margin-top: auto;

}


.gf-lawn-gallery__statement > div > span {

    display: block;

    margin-bottom: 8px;

    font-size: 0.43rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-lawn-gallery__statement p {

    max-width: 340px;

    margin: 0;

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

    font-weight: 650;

    line-height: 1.08;

    letter-spacing: -0.04em;

    color:
        var(--gf-white);

}


.gf-lawn-gallery__statement em {

    display: block;

    margin-top: 4px;

    font-family:
        var(--gf-font-serif);

    font-size: 1.07em;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}


.gf-lawn-gallery__statement-line {

    position: relative;

    z-index: 2;

    display: block;

    width: 42px;
    height: 1px;

    margin-top: 17px;

    background:
        var(--gf-copper);

}



/* ============================================================
   16. FOOTER
============================================================ */

.gf-lawn-gallery__footer {

    display: grid;

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

    align-items: center;

    gap: 22px;

    margin-top:
        clamp(38px, 5vw, 60px);

}



/* ============================================================
   17. COLLECTION LINKS
============================================================ */

.gf-lawn-gallery__collection-link {

    display: flex;

    align-items: center;

    gap: 13px;

}


.gf-lawn-gallery__collection-link--next {

    text-align: right;

}


.gf-lawn-gallery__collection-link > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-lawn-gallery__collection-link span {

    font-size: 0.42rem;
    font-weight: 750;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-lawn-gallery__collection-link > span {

    font-size: 0.8rem;

    color:
        var(--gf-green);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-lawn-gallery__collection-link strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;
    font-weight: 500;

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

}


.gf-lawn-gallery__collection-link:first-child:hover
> span {

    transform:
        translateY(-4px);

}


.gf-lawn-gallery__collection-link--next:hover
> span {

    transform:
        translateY(4px);

}



/* ============================================================
   18. FOOTER LINE
============================================================ */

.gf-lawn-gallery__footer-line {

    width: 100%;
    height: 1px;

    background:
        rgba(3, 71, 43, 0.14);

}



/* ============================================================
   19. FOOTER CENTER
============================================================ */

.gf-lawn-gallery__footer-center {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

}


.gf-lawn-gallery__footer-center span {

    font-size: 0.39rem;
    font-weight: 750;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-lawn-gallery__footer-center strong {

    font-size: 0.62rem;
    font-weight: 800;

    color:
        var(--gf-copper);

}



/* ============================================================
   20. REVEAL PREPARATION
============================================================ */

.gf-service-gallery--lawn.is-prepared
.gf-lawn-gallery__eyebrow,
.gf-service-gallery--lawn.is-prepared
.gf-lawn-gallery__title,
.gf-service-gallery--lawn.is-prepared
.gf-lawn-gallery__summary {

    opacity: 0;

    transform:
        translateY(22px);

}


.gf-service-gallery--lawn.is-prepared
.gf-lawn-gallery__item {

    opacity: 0;

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

}


.gf-service-gallery--lawn.is-prepared
.gf-lawn-gallery__statement {

    opacity: 0;

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

}


.gf-service-gallery--lawn.is-prepared
.gf-lawn-gallery__footer {

    opacity: 0;

}



/* ============================================================
   21. HEADER REVEAL
============================================================ */

.gf-service-gallery--lawn.is-header-visible
.gf-lawn-gallery__eyebrow {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        550ms
        ease,

        transform
        720ms
        var(--gf-ease-standard);

}


.gf-service-gallery--lawn.is-header-visible
.gf-lawn-gallery__title {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        70ms
        ease,

        transform
        850ms
        70ms
        var(--gf-ease-standard);

}


.gf-service-gallery--lawn.is-header-visible
.gf-lawn-gallery__summary {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        150ms
        ease,

        transform
        780ms
        150ms
        var(--gf-ease-standard);

}



/* ============================================================
   22. PHOTO REVEAL
============================================================ */

.gf-lawn-gallery__item.is-visible {

    opacity: 1 !important;

    clip-path:
        inset(0) !important;

    transition:
        opacity
        650ms
        ease,

        clip-path
        850ms
        var(--gf-ease-emphasized);

}


.gf-lawn-gallery__statement.is-visible {

    opacity: 1 !important;

    clip-path:
        inset(0) !important;

    transition:
        opacity
        700ms
        ease,

        clip-path
        900ms
        var(--gf-ease-emphasized);

}


.gf-lawn-gallery__footer.is-visible {

    opacity: 1 !important;

    transition:
        opacity
        650ms
        ease;

}



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

@media (min-width: 1200px) {

    .gf-lawn-gallery__collection {

        grid-template-rows:
            repeat(9, 92px);

    }

}



/* ============================================================
   24. TABLET
   768px - 1199px
============================================================ */

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

    .gf-lawn-gallery__header {

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

        gap: 48px;

    }


    .gf-lawn-gallery__title {

        font-size:
            clamp(
                3rem,
                6.5vw,
                4.8rem
            );

    }


    .gf-lawn-gallery__collection {

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

        grid-template-rows:
            repeat(10, 80px);

    }


    .gf-lawn-gallery__item--hero {

        grid-column:
            1 / 6;

        grid-row:
            1 / 5;

    }


    .gf-lawn-gallery__statement {

        grid-column:
            6 / 9;

        grid-row:
            1 / 5;

    }


    .gf-lawn-gallery__item--vertical {

        grid-column:
            1 / 4;

        grid-row:
            5 / 8;

    }


    .gf-lawn-gallery__item--square-a {

        grid-column:
            4 / 6;

        grid-row:
            5 / 8;

    }


    .gf-lawn-gallery__item--square-b {

        grid-column:
            6 / 9;

        grid-row:
            5 / 8;

    }


    .gf-lawn-gallery__item--wide {

        grid-column:
            1 / 5;

        grid-row:
            8 / 11;

    }


    .gf-lawn-gallery__item--lower-a {

        grid-column:
            5 / 7;

        grid-row:
            8 / 11;

    }


    .gf-lawn-gallery__item--lower-b {

        grid-column:
            7 / 9;

        grid-row:
            8 / 11;

    }


    .gf-lawn-gallery__footer {

        gap: 14px;

    }

}



/* ============================================================
   25. MOBILE
   481px - 767px
============================================================ */

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

    .gf-service-gallery--lawn {

        padding:
            75px 0;

    }


    .gf-lawn-gallery__header {

        grid-template-columns:
            1fr;

        gap: 30px;

        margin-bottom: 45px;

    }


    .gf-lawn-gallery__title {

        max-width: 590px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.3rem
            );

    }


    .gf-lawn-gallery__summary {

        max-width: 520px;

    }


    .gf-lawn-gallery__collection {

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

        grid-template-rows:
            none;

        grid-auto-rows:
            155px;

        gap: 4px;

    }


    .gf-lawn-gallery__item--hero {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-lawn-gallery__statement {

        grid-column:
            1 / -1;

        grid-row:
            auto;

        min-height: 220px;

    }


    .gf-lawn-gallery__item--vertical,
    .gf-lawn-gallery__item--square-a,
    .gf-lawn-gallery__item--square-b,
    .gf-lawn-gallery__item--wide,
    .gf-lawn-gallery__item--lower-a,
    .gf-lawn-gallery__item--lower-b {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-lawn-gallery__item--wide {

        grid-column:
            1 / -1;

    }


    .gf-lawn-gallery__footer {

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

    }


    .gf-lawn-gallery__footer-center,
    .gf-lawn-gallery__footer-line:nth-of-type(2) {

        display: none;

    }

}



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

@media (max-width: 480px) {

    .gf-service-gallery--lawn {

        padding:
            65px 0;

    }


    .gf-lawn-gallery__header {

        grid-template-columns:
            1fr;

        gap: 25px;

        margin-bottom: 35px;

    }


    .gf-lawn-gallery__eyebrow {

        font-size: 0.55rem;

    }


    .gf-lawn-gallery__title {

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

    }


    .gf-lawn-gallery__summary {

        padding-left: 18px;

    }


    .gf-lawn-gallery__collection {

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

        grid-template-rows:
            none;

        grid-auto-rows:
            120px;

        gap: 3px;

    }


    .gf-lawn-gallery__item--hero {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-lawn-gallery__statement {

        grid-column:
            1 / -1;

        grid-row:
            auto;

        min-height: 200px;

        padding: 22px;

    }


    .gf-lawn-gallery__item--vertical,
    .gf-lawn-gallery__item--square-a,
    .gf-lawn-gallery__item--square-b,
    .gf-lawn-gallery__item--wide,
    .gf-lawn-gallery__item--lower-a,
    .gf-lawn-gallery__item--lower-b {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-lawn-gallery__item--wide,
    .gf-lawn-gallery__item--lower-b {

        grid-column:
            1 / -1;

    }


    .gf-lawn-gallery__photo-label {

        display: none;

    }


    .gf-lawn-gallery__item-ui {

        padding:
            10px;

    }


    .gf-lawn-gallery__footer {

        grid-template-columns:
            1fr;

        gap: 22px;

    }


    .gf-lawn-gallery__footer-line,
    .gf-lawn-gallery__footer-center {

        display: none;

    }


    .gf-lawn-gallery__collection-link--next {

        justify-content:
            flex-end;

    }

}



/* ============================================================
   27. REDUCED MOTION
============================================================ */

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

    .gf-lawn-gallery__eyebrow,
    .gf-lawn-gallery__title,
    .gf-lawn-gallery__summary,
    .gf-lawn-gallery__item,
    .gf-lawn-gallery__statement,
    .gf-lawn-gallery__footer {

        opacity:
            1 !important;

        transform:
            none !important;

        clip-path:
            none !important;

        transition:
            none !important;

    }


    .gf-lawn-gallery__item img,
    .gf-lawn-gallery__expand {

        transition:
            none !important;

    }

}








































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   08. EDGE & BUSH TRIMMING
============================================================ */


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

.gf-service-gallery--trimming {

    position: relative;

    isolation: isolate;

    padding:
        clamp(80px, 9vw, 140px)
        0;

    overflow: hidden;

    color:
        var(--gf-ink);

    background-color:
        var(--gf-paper);

    background-image:
        var(--gf-paper-texture);

}


.gf-service-gallery--trimming::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 38%;
    height: 3px;

    background:
        var(--gf-copper);

}


.gf-service-gallery--trimming::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 21%;
    height: 3px;

    background:
        var(--gf-green);

}



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

.gf-trimming-gallery__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.gf-trimming-gallery__grain {

    position: absolute;

    inset: 0;

    opacity: 0.1;

    background-image:

        radial-gradient(
            rgba(3, 71, 43, 0.17)
            0.45px,
            transparent 0.7px
        );

    background-size:
        10px 10px;

}


.gf-trimming-gallery__axis {

    position: absolute;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
        rgba(3, 71, 43, 0.035);

}


.gf-trimming-gallery__axis--1 {

    left: 25%;

}


.gf-trimming-gallery__axis--2 {

    left: 50%;

}


.gf-trimming-gallery__axis--3 {

    left: 75%;

}


.gf-trimming-gallery__contour {

    position: absolute;

    right: -330px;
    top: 150px;

    width: 660px;
    height: 660px;

    border:
        1px solid
        rgba(3, 71, 43, 0.035);

    transform:
        rotate(39deg);

}


.gf-trimming-gallery__contour::before,
.gf-trimming-gallery__contour::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.028);

}


.gf-trimming-gallery__contour::before {

    inset: 38px;

}


.gf-trimming-gallery__contour::after {

    inset: 80px;

}


.gf-trimming-gallery__watermark {

    position: absolute;

    left: -0.06em;
    bottom: 90px;

    font-size:
        clamp(
            10rem,
            20vw,
            24rem
        );

    font-weight: 800;

    line-height: 0.7;

    letter-spacing: -0.09em;

    color:
        rgba(3, 71, 43, 0.022);

}



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

.gf-trimming-gallery__header {

    display: grid;

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

    align-items: end;

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

    margin-bottom:
        clamp(50px, 6vw, 78px);

}



/* ============================================================
   04. EYEBROW
============================================================ */

.gf-trimming-gallery__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-trimming-gallery__eyebrow-line {

    width: 42px;
    height: 1px;

    background:
        currentColor;

}



/* ============================================================
   05. TITLE
============================================================ */

.gf-trimming-gallery__title {

    max-width: 830px;

    margin: 0;

    font-size:
        clamp(
            3rem,
            5.2vw,
            6.1rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing: -0.065em;

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

}


.gf-trimming-gallery__title span {

    display: block;

    margin-top:
        0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-green);

}



/* ============================================================
   06. SUMMARY
============================================================ */

.gf-trimming-gallery__summary {

    padding-left: 28px;

    border-left:
        1px solid
        rgba(3, 71, 43, 0.15);

}


.gf-trimming-gallery__collection-meta {

    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-bottom: 18px;

}


.gf-trimming-gallery__collection-meta > span {

    font-size: 0.46rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-trimming-gallery__collection-meta strong {

    font-family:
        var(--gf-font-serif);

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

    font-style: italic;
    font-weight: 500;

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

}


.gf-trimming-gallery__summary p {

    max-width: 350px;

    margin:
        0 0 20px;

    font-size: 0.76rem;

    line-height: 1.7;

    color:
        var(--gf-gray);

}



/* ============================================================
   07. VIEWER HINT
============================================================ */

.gf-trimming-gallery__viewer-hint {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.44rem;
    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-trimming-gallery__viewer-icon {

    display: grid;

    width: 24px;
    height: 24px;

    flex: 0 0 auto;

    place-items: center;

    color:
        var(--gf-white);

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

}



/* ============================================================
   08. PRECISION BAND
============================================================ */

.gf-trimming-gallery__band {

    display: grid;

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

    min-height: 190px;

    margin-bottom:
        5px;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}



/* ============================================================
   09. BAND MAIN
============================================================ */

.gf-trimming-gallery__band-main {

    position: relative;

    display: flex;

    justify-content: space-between;

    flex-direction: column;

    padding:
        clamp(27px, 3vw, 40px);

    overflow: hidden;

}


.gf-trimming-gallery__band-main::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        var(--gf-green);

}


.gf-trimming-gallery__band-index {

    font-size: 0.43rem;
    font-weight: 750;

    letter-spacing: 0.12em;

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

}


.gf-trimming-gallery__band-main > div {

    margin-top:
        25px;

}


.gf-trimming-gallery__band-label {

    display: block;

    margin-bottom: 8px;

    font-size: 0.44rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-trimming-gallery__band-main p {

    max-width: 620px;

    margin: 0;

    font-size:
        clamp(
            1.35rem,
            2vw,
            2.05rem
        );

    font-weight: 650;

    line-height: 1.03;

    letter-spacing: -0.045em;

    color:
        var(--gf-white);

}


.gf-trimming-gallery__band-main em {

    display: block;

    margin-top: 5px;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   10. BAND ART
============================================================ */

.gf-trimming-gallery__band-art {

    display: grid;

    place-items: center;

    border-left:
        1px solid
        rgba(255,255,255,0.10);

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

    color:
        rgba(126,217,87,0.48);

}


.gf-trimming-gallery__band-art svg {

    width: 88px;
    height: 88px;

}



/* ============================================================
   11. BAND POINTS
============================================================ */

.gf-trimming-gallery__band-points {

    display: grid;

    grid-template-rows:
        repeat(3, 1fr);

}


.gf-trimming-gallery__band-points span {

    display: flex;

    align-items: center;

    padding:
        0 23px;

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

    font-size: 0.48rem;
    font-weight: 750;

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

}


.gf-trimming-gallery__band-points span:last-child {

    border-bottom: 0;

}


.gf-trimming-gallery__band-points span::before {

    content: "";

    width: 5px;
    height: 5px;

    margin-right: 12px;

    background:
        var(--gf-green);

}



/* ============================================================
   12. PHOTO GRID
============================================================ */

.gf-trimming-gallery__grid {

    display: grid;

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

    grid-auto-flow:
        dense;

    grid-auto-rows:
        94px;

    gap: 5px;

}



/* ============================================================
   13. GENERATED ITEM
============================================================ */

.gf-trimming-gallery__item {

    position: relative;

    isolation: isolate;

    display: block;

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

    padding: 0;

    overflow: hidden;

    cursor: zoom-in;

    border: 0;
    border-radius: 0;

    background:
        var(--gf-cream);

    color:
        var(--gf-white);

}



/* ============================================================
   14. ARCHITECTURAL PATTERN

   Repeats every 10 photographs, so it remains useful
   regardless of the final amount of images.
============================================================ */

.gf-trimming-gallery__item:nth-child(10n + 1) {

    grid-column:
        span 6;

    grid-row:
        span 4;

}


.gf-trimming-gallery__item:nth-child(10n + 2) {

    grid-column:
        span 3;

    grid-row:
        span 2;

}


.gf-trimming-gallery__item:nth-child(10n + 3) {

    grid-column:
        span 3;

    grid-row:
        span 2;

}


.gf-trimming-gallery__item:nth-child(10n + 4) {

    grid-column:
        span 6;

    grid-row:
        span 2;

}


.gf-trimming-gallery__item:nth-child(10n + 5) {

    grid-column:
        span 3;

    grid-row:
        span 3;

}


.gf-trimming-gallery__item:nth-child(10n + 6) {

    grid-column:
        span 5;

    grid-row:
        span 3;

}


.gf-trimming-gallery__item:nth-child(10n + 7) {

    grid-column:
        span 4;

    grid-row:
        span 3;

}


.gf-trimming-gallery__item:nth-child(10n + 8) {

    grid-column:
        span 4;

    grid-row:
        span 2;

}


.gf-trimming-gallery__item:nth-child(10n + 9) {

    grid-column:
        span 4;

    grid-row:
        span 2;

}


.gf-trimming-gallery__item:nth-child(10n + 10) {

    grid-column:
        span 4;

    grid-row:
        span 2;

}



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

.gf-trimming-gallery__item img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

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

        filter
        550ms
        ease;

}


.gf-trimming-gallery__item:hover img,
.gf-trimming-gallery__item:focus-visible img {

    transform:
        scale(1.045);

    filter:
        saturate(1.04)
        contrast(1.025);

}



/* ============================================================
   16. IMAGE OVERLAY
============================================================ */

.gf-trimming-gallery__item::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            to top,
            rgba(3, 31, 20, 0.67),
            transparent 46%
        );

    opacity: 0.45;

    transition:
        opacity
        350ms
        ease;

}


.gf-trimming-gallery__item::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    border:
        1px solid
        transparent;

    transition:
        border-color
        350ms
        ease;

}


.gf-trimming-gallery__item:hover::before,
.gf-trimming-gallery__item:focus-visible::before {

    opacity: 0.73;

}


.gf-trimming-gallery__item:hover::after,
.gf-trimming-gallery__item:focus-visible::after {

    border-color:
        rgba(5,184,92,0.7);

}



/* ============================================================
   17. ITEM UI
============================================================ */

.gf-trimming-gallery__item-ui {

    position: absolute;

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

    z-index: 5;

    display: flex;

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

    padding:
        13px 15px;

    pointer-events: none;

}


.gf-trimming-gallery__item-number {

    font-family:
        var(--gf-font-serif);

    font-size: 0.65rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-trimming-gallery__item-expand {

    color:
        var(--gf-leaf);

    opacity: 0;

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

    transition:
        opacity
        300ms
        ease,

        transform
        350ms
        var(--gf-ease-standard);

}


.gf-trimming-gallery__item:hover
.gf-trimming-gallery__item-expand,
.gf-trimming-gallery__item:focus-visible
.gf-trimming-gallery__item-expand {

    opacity: 1;

    transform:
        translate(0);

}



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

.gf-trimming-gallery__footer {

    display: grid;

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

    align-items: center;

    gap: 35px;

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

}



/* ============================================================
   19. COLLECTION LINK
============================================================ */

.gf-trimming-gallery__collection-link {

    display: flex;

    align-items: center;

    gap: 13px;

}


.gf-trimming-gallery__collection-link--next {

    text-align: right;

}


.gf-trimming-gallery__collection-link > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-trimming-gallery__collection-link div span {

    font-size: 0.42rem;
    font-weight: 750;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-trimming-gallery__collection-link strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;
    font-weight: 500;

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

}


.gf-trimming-gallery__collection-arrow {

    color:
        var(--gf-green);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-trimming-gallery__collection-link:first-child:hover
.gf-trimming-gallery__collection-arrow {

    transform:
        translateY(-4px);

}


.gf-trimming-gallery__collection-link--next:hover
.gf-trimming-gallery__collection-arrow {

    transform:
        translateY(4px);

}



/* ============================================================
   20. FOOTER CENTER
============================================================ */

.gf-trimming-gallery__footer-center {

    display: grid;

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

    align-items: center;

    gap: 18px;

}


.gf-trimming-gallery__footer-line {

    width: 100%;
    height: 1px;

    background:
        rgba(3,71,43,0.14);

}


.gf-trimming-gallery__footer-center > div {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

}


.gf-trimming-gallery__footer-center span {

    font-size: 0.38rem;
    font-weight: 750;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-trimming-gallery__footer-center strong {

    font-size: 0.61rem;
    font-weight: 800;

    color:
        var(--gf-copper);

}



/* ============================================================
   21. REVEAL PREPARATION
============================================================ */

.gf-service-gallery--trimming.is-prepared
.gf-trimming-gallery__eyebrow,
.gf-service-gallery--trimming.is-prepared
.gf-trimming-gallery__title,
.gf-service-gallery--trimming.is-prepared
.gf-trimming-gallery__summary {

    opacity: 0;

    transform:
        translateY(22px);

}


.gf-service-gallery--trimming.is-prepared
.gf-trimming-gallery__band {

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

}


.gf-service-gallery--trimming.is-prepared
.gf-trimming-gallery__item {

    opacity: 0;

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

}


.gf-service-gallery--trimming.is-prepared
.gf-trimming-gallery__footer {

    opacity: 0;

}



/* ============================================================
   22. HEADER REVEAL
============================================================ */

.gf-service-gallery--trimming.is-header-visible
.gf-trimming-gallery__eyebrow {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        550ms
        ease,

        transform
        720ms
        var(--gf-ease-standard);

}


.gf-service-gallery--trimming.is-header-visible
.gf-trimming-gallery__title {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        70ms
        ease,

        transform
        850ms
        70ms
        var(--gf-ease-standard);

}


.gf-service-gallery--trimming.is-header-visible
.gf-trimming-gallery__summary {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        150ms
        ease,

        transform
        780ms
        150ms
        var(--gf-ease-standard);

}



/* ============================================================
   23. CONTENT REVEALS
============================================================ */

.gf-trimming-gallery__band.is-visible {

    clip-path:
        inset(0) !important;

    transition:
        clip-path
        950ms
        var(--gf-ease-emphasized);

}


.gf-trimming-gallery__item.is-visible {

    opacity: 1 !important;

    clip-path:
        inset(0) !important;

    transition:
        opacity
        650ms
        ease,

        clip-path
        850ms
        var(--gf-ease-emphasized);

}


.gf-trimming-gallery__footer.is-visible {

    opacity: 1 !important;

    transition:
        opacity
        650ms
        ease;

}



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

@media (min-width: 1200px) {

    .gf-trimming-gallery__grid {

        grid-auto-rows:
            94px;

    }

}



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

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

    .gf-trimming-gallery__header {

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

        gap: 48px;

    }


    .gf-trimming-gallery__title {

        font-size:
            clamp(
                3rem,
                6.5vw,
                4.8rem
            );

    }


    .gf-trimming-gallery__band {

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

    }


    .gf-trimming-gallery__grid {

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

        grid-auto-rows:
            84px;

    }


    .gf-trimming-gallery__item:nth-child(10n + 1) {

        grid-column:
            span 5;

    }


    .gf-trimming-gallery__item:nth-child(10n + 2),
    .gf-trimming-gallery__item:nth-child(10n + 3),
    .gf-trimming-gallery__item:nth-child(10n + 5) {

        grid-column:
            span 3;

    }


    .gf-trimming-gallery__item:nth-child(10n + 4),
    .gf-trimming-gallery__item:nth-child(10n + 6),
    .gf-trimming-gallery__item:nth-child(10n + 7),
    .gf-trimming-gallery__item:nth-child(10n + 8),
    .gf-trimming-gallery__item:nth-child(10n + 9),
    .gf-trimming-gallery__item:nth-child(10n + 10) {

        grid-column:
            span 4;

    }

}



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

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

    .gf-service-gallery--trimming {

        padding:
            75px 0;

    }


    .gf-trimming-gallery__header {

        grid-template-columns:
            1fr;

        gap: 30px;

        margin-bottom: 43px;

    }


    .gf-trimming-gallery__title {

        max-width: 590px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.3rem
            );

    }


    .gf-trimming-gallery__summary {

        max-width: 520px;

    }


    .gf-trimming-gallery__band {

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

        min-height: 180px;

    }


    .gf-trimming-gallery__band-points {

        display: none;

    }


    .gf-trimming-gallery__grid {

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

        grid-auto-rows:
            155px;

        gap: 4px;

    }


    .gf-trimming-gallery__item:nth-child(n) {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-trimming-gallery__item:nth-child(5n + 1) {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-trimming-gallery__footer {

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

        gap: 18px;

    }


    .gf-trimming-gallery__footer-center {

        display: block;

    }


    .gf-trimming-gallery__footer-center
    .gf-trimming-gallery__footer-line {

        display: none;

    }

}



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

@media (max-width: 480px) {

    .gf-service-gallery--trimming {

        padding:
            65px 0;

    }


    .gf-trimming-gallery__header {

        grid-template-columns:
            1fr;

        gap: 25px;

        margin-bottom: 35px;

    }


    .gf-trimming-gallery__eyebrow {

        font-size:
            0.55rem;

    }


    .gf-trimming-gallery__title {

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

    }


    .gf-trimming-gallery__summary {

        padding-left:
            18px;

    }


    .gf-trimming-gallery__band {

        display: block;

        min-height: 190px;

    }


    .gf-trimming-gallery__band-main {

        min-height: 190px;

        padding: 24px 20px;

    }


    .gf-trimming-gallery__band-art,
    .gf-trimming-gallery__band-points {

        display: none;

    }


    .gf-trimming-gallery__grid {

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

        grid-auto-rows:
            120px;

        gap: 3px;

    }


    .gf-trimming-gallery__item:nth-child(n) {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-trimming-gallery__item:nth-child(4n + 1) {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-trimming-gallery__item-ui {

        padding:
            10px;

    }


    .gf-trimming-gallery__footer {

        grid-template-columns:
            1fr;

        gap: 21px;

    }


    .gf-trimming-gallery__footer-center {

        display: none;

    }


    .gf-trimming-gallery__collection-link--next {

        justify-content:
            flex-end;

    }

}



/* ============================================================
   28. REDUCED MOTION
============================================================ */

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

    .gf-trimming-gallery__eyebrow,
    .gf-trimming-gallery__title,
    .gf-trimming-gallery__summary,
    .gf-trimming-gallery__band,
    .gf-trimming-gallery__item,
    .gf-trimming-gallery__footer {

        opacity:
            1 !important;

        transform:
            none !important;

        clip-path:
            none !important;

        transition:
            none !important;

    }


    .gf-trimming-gallery__item img,
    .gf-trimming-gallery__item-expand {

        transition:
            none !important;

    }

}






































/* ============================================================
   GREEN FORCE GALLERY
   CRITICAL VISIBILITY FIX

   Gallery photography must NEVER depend on IntersectionObserver
   to remain visible.
============================================================ */


/* ============================================================
   LANDSCAPING
============================================================ */

.gf-service-gallery--landscaping.is-prepared
.gf-service-gallery__item {

    opacity: 1 !important;

    clip-path: none !important;

}


.gf-service-gallery--landscaping.is-prepared
.gf-service-gallery__footer {

    opacity: 1 !important;

}



/* ============================================================
   LAWN MAINTENANCE
============================================================ */

.gf-service-gallery--lawn.is-prepared
.gf-lawn-gallery__item {

    opacity: 1 !important;

    clip-path: none !important;

}


.gf-service-gallery--lawn.is-prepared
.gf-lawn-gallery__statement {

    opacity: 1 !important;

    clip-path: none !important;

}


.gf-service-gallery--lawn.is-prepared
.gf-lawn-gallery__footer {

    opacity: 1 !important;

}



/* ============================================================
   EDGE & BUSH TRIMMING
============================================================ */

.gf-service-gallery--trimming.is-prepared
.gf-trimming-gallery__item {

    opacity: 1 !important;

    clip-path: none !important;

}


.gf-service-gallery--trimming.is-prepared
.gf-trimming-gallery__band {

    opacity: 1 !important;

    clip-path: none !important;

}


.gf-service-gallery--trimming.is-prepared
.gf-trimming-gallery__footer {

    opacity: 1 !important;

}



/* ============================================================
   SAFE IMAGE ENTRANCE

   Animation can enhance the image.
   It can no longer determine whether the image exists visually.
============================================================ */

.gf-service-gallery__item.is-visible img,
.gf-lawn-gallery__item.is-visible img,
.gf-trimming-gallery__item.is-visible img {

    animation:
        gf-gallery-safe-image-in
        850ms
        var(--gf-ease-standard)
        both;

}


@keyframes gf-gallery-safe-image-in {

    from {

        transform:
            scale(1.025);

        filter:
            saturate(0.94)
            contrast(0.98);

    }

    to {

        transform:
            scale(1);

        filter:
            none;

    }

}



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

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

    .gf-service-gallery__item img,
    .gf-lawn-gallery__item img,
    .gf-trimming-gallery__item img {

        animation:
            none !important;

    }

}


































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   09. MULCH INSTALLATION
============================================================ */


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

.gf-service-gallery--mulch {

    position: relative;

    isolation: isolate;

    padding:
        clamp(80px, 9vw, 140px)
        0;

    overflow: hidden;

    color:
        var(--gf-ink);

    background-color:
        var(--gf-cream);

    background-image:
        var(--gf-paper-texture);

}


.gf-service-gallery--mulch::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 44%;
    height: 3px;

    background:
        var(--gf-copper);

}


.gf-service-gallery--mulch::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 17%;
    height: 3px;

    background:
        var(--gf-green);

}



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

.gf-mulch-gallery__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.gf-mulch-gallery__grain {

    position: absolute;

    inset: 0;

    opacity: 0.1;

    background-image:
        radial-gradient(
            rgba(148, 88, 45, 0.16)
            0.5px,
            transparent 0.75px
        );

    background-size:
        11px 11px;

}


.gf-mulch-gallery__contour {

    position: absolute;

    border:
        1px solid
        rgba(148, 88, 45, 0.045);

}


.gf-mulch-gallery__contour::before,
.gf-mulch-gallery__contour::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(148, 88, 45, 0.035);

}


.gf-mulch-gallery__contour::before {

    inset: 37px;

}


.gf-mulch-gallery__contour::after {

    inset: 78px;

}


.gf-mulch-gallery__contour--1 {

    top: -350px;
    right: -320px;

    width: 690px;
    height: 690px;

    transform:
        rotate(39deg);

}


.gf-mulch-gallery__contour--2 {

    bottom: -430px;
    left: -350px;

    width: 720px;
    height: 720px;

    transform:
        rotate(48deg);

}


.gf-mulch-gallery__watermark {

    position: absolute;

    right: -0.07em;
    bottom: 7%;

    font-size:
        clamp(
            10rem,
            21vw,
            25rem
        );

    font-weight: 800;

    line-height: 0.75;

    letter-spacing: -0.1em;

    color:
        rgba(148, 88, 45, 0.025);

}



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

.gf-mulch-gallery__header {

    display: grid;

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

    align-items: end;

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

    margin-bottom:
        clamp(50px, 6vw, 78px);

}



/* ============================================================
   04. EYEBROW
============================================================ */

.gf-mulch-gallery__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-mulch-gallery__eyebrow-line {

    width: 42px;
    height: 1px;

    background:
        currentColor;

}



/* ============================================================
   05. TITLE
============================================================ */

.gf-mulch-gallery__title {

    max-width: 830px;

    margin: 0;

    font-size:
        clamp(
            3rem,
            5.2vw,
            6.1rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing: -0.065em;

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

}


.gf-mulch-gallery__title span {

    display: block;

    margin-top: 0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-copper-dark);

}



/* ============================================================
   06. SUMMARY
============================================================ */

.gf-mulch-gallery__summary {

    padding-left: 28px;

    border-left:
        1px solid
        rgba(3, 71, 43, 0.15);

}


.gf-mulch-gallery__count {

    display: flex;

    align-items: flex-end;

    gap: 14px;

    margin-bottom: 18px;

}


.gf-mulch-gallery__count > strong {

    font-size:
        clamp(
            3.1rem,
            4.3vw,
            5rem
        );

    font-weight: 600;

    line-height: 0.78;

    letter-spacing: -0.075em;

    color:
        var(--gf-copper);

}


.gf-mulch-gallery__count > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-mulch-gallery__count span {

    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-mulch-gallery__count small {

    font-size: 0.45rem;
    font-weight: 600;

    color:
        var(--gf-gray);

}


.gf-mulch-gallery__summary p {

    max-width: 360px;

    margin:
        0 0 20px;

    font-size: 0.76rem;

    line-height: 1.7;

    color:
        var(--gf-gray);

}



/* ============================================================
   07. VIEWER HINT
============================================================ */

.gf-mulch-gallery__viewer-hint {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.44rem;
    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-mulch-gallery__viewer-icon {

    display: grid;

    width: 24px;
    height: 24px;

    flex: 0 0 auto;

    place-items: center;

    color:
        var(--gf-white);

    background:
        var(--gf-copper-dark);

}



/* ============================================================
   08. FEATURE BAND
============================================================ */

.gf-mulch-gallery__feature-band {

    display: grid;

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

    min-height: 205px;

    margin-bottom: 5px;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}



/* ============================================================
   09. FEATURE COPY
============================================================ */

.gf-mulch-gallery__feature-copy {

    position: relative;

    display: flex;

    justify-content: space-between;

    flex-direction: column;

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

    overflow: hidden;

}


.gf-mulch-gallery__feature-copy::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background:
        var(--gf-copper);

}


.gf-mulch-gallery__feature-index {

    font-size: 0.43rem;
    font-weight: 750;

    letter-spacing: 0.12em;

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

}


.gf-mulch-gallery__feature-copy > div {

    margin-top: 28px;

}


.gf-mulch-gallery__feature-label {

    display: block;

    margin-bottom: 8px;

    font-size: 0.44rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-mulch-gallery__feature-copy p {

    max-width: 650px;

    margin: 0;

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

    font-weight: 650;

    line-height: 1.02;

    letter-spacing: -0.045em;

}


.gf-mulch-gallery__feature-copy em {

    display: block;

    margin-top: 5px;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   10. FEATURE MARK
============================================================ */

.gf-mulch-gallery__feature-mark {

    display: grid;

    place-items: center;

    border-left:
        1px solid
        rgba(255,255,255,0.1);

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

    color:
        rgba(184,116,60,0.7);

}


.gf-mulch-gallery__feature-mark svg {

    width: 94px;
    height: 94px;

}



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

.gf-mulch-gallery__feature-meta {

    display: grid;

    grid-template-rows:
        1fr
        1fr;

}


.gf-mulch-gallery__feature-meta > div {

    display: flex;

    justify-content: center;

    flex-direction: column;

    padding:
        20px 25px;

}


.gf-mulch-gallery__feature-meta > div:first-child {

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

}


.gf-mulch-gallery__feature-meta span {

    margin-bottom: 3px;

    font-size: 0.4rem;
    font-weight: 750;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-mulch-gallery__feature-meta strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.15rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-white);

}



/* ============================================================
   12. GRID
============================================================ */

.gf-mulch-gallery__grid {

    display: grid;

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

    grid-auto-rows:
        95px;

    grid-auto-flow:
        dense;

    gap: 5px;

}



/* ============================================================
   13. ITEMS

   IMPORTANT:
   Items are visible by default.
============================================================ */

.gf-mulch-gallery__item {

    position: relative;

    isolation: isolate;

    display: block;

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

    padding: 0;

    overflow: hidden;

    cursor: zoom-in;

    border: 0;
    border-radius: 0;

    opacity: 1;

    background:
        var(--gf-charcoal);

    color:
        var(--gf-white);

}



/* ============================================================
   14. EDITORIAL GRID PATTERN

   Only photographs exist as children, therefore nth-child
   remains predictable.
============================================================ */

.gf-mulch-gallery__item:nth-child(10n + 1) {

    grid-column:
        span 6;

    grid-row:
        span 4;

}


.gf-mulch-gallery__item:nth-child(10n + 2) {

    grid-column:
        span 3;

    grid-row:
        span 2;

}


.gf-mulch-gallery__item:nth-child(10n + 3) {

    grid-column:
        span 3;

    grid-row:
        span 2;

}


.gf-mulch-gallery__item:nth-child(10n + 4) {

    grid-column:
        span 6;

    grid-row:
        span 2;

}


.gf-mulch-gallery__item:nth-child(10n + 5) {

    grid-column:
        span 3;

    grid-row:
        span 3;

}


.gf-mulch-gallery__item:nth-child(10n + 6) {

    grid-column:
        span 5;

    grid-row:
        span 3;

}


.gf-mulch-gallery__item:nth-child(10n + 7) {

    grid-column:
        span 4;

    grid-row:
        span 3;

}


.gf-mulch-gallery__item:nth-child(10n + 8) {

    grid-column:
        span 4;

    grid-row:
        span 2;

}


.gf-mulch-gallery__item:nth-child(10n + 9) {

    grid-column:
        span 4;

    grid-row:
        span 2;

}


.gf-mulch-gallery__item:nth-child(10n + 10) {

    grid-column:
        span 4;

    grid-row:
        span 2;

}



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

.gf-mulch-gallery__item img {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

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

        filter
        550ms
        ease;

}


.gf-mulch-gallery__item:hover img,
.gf-mulch-gallery__item:focus-visible img {

    transform:
        scale(1.045);

    filter:
        saturate(1.04)
        contrast(1.025);

}



/* ============================================================
   16. OVERLAY
============================================================ */

.gf-mulch-gallery__item::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(3,30,19,0.7),
            transparent 46%
        );

    opacity: 0.48;

    transition:
        opacity
        350ms
        ease;

}


.gf-mulch-gallery__item::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    border:
        1px solid
        transparent;

    transition:
        border-color
        350ms
        ease;

}


.gf-mulch-gallery__item:hover::before,
.gf-mulch-gallery__item:focus-visible::before {

    opacity: 0.76;

}


.gf-mulch-gallery__item:hover::after,
.gf-mulch-gallery__item:focus-visible::after {

    border-color:
        rgba(184,116,60,0.9);

}



/* ============================================================
   17. IMAGE UI
============================================================ */

.gf-mulch-gallery__item-ui {

    position: absolute;

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

    z-index: 5;

    display: flex;

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

    padding:
        13px 15px;

    pointer-events: none;

}


.gf-mulch-gallery__item-ui span:first-child {

    font-family:
        var(--gf-font-serif);

    font-size: 0.65rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-mulch-gallery__item-ui span:last-child {

    color:
        var(--gf-leaf);

    opacity: 0;

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

    transition:
        opacity
        300ms
        ease,

        transform
        350ms
        var(--gf-ease-standard);

}


.gf-mulch-gallery__item:hover
.gf-mulch-gallery__item-ui span:last-child,
.gf-mulch-gallery__item:focus-visible
.gf-mulch-gallery__item-ui span:last-child {

    opacity: 1;

    transform:
        translate(0);

}



/* ============================================================
   18. OPTIONAL ENHANCEMENT

   This animation never controls visibility.
============================================================ */

.gf-mulch-gallery__item.is-enhanced img {

    animation:
        gf-mulch-image-settle
        750ms
        var(--gf-ease-standard)
        both;

}


@keyframes gf-mulch-image-settle {

    from {

        transform:
            scale(1.025);

        filter:
            saturate(0.95)
            contrast(0.98);

    }

    to {

        transform:
            scale(1);

        filter:
            none;

    }

}



/* ============================================================
   19. FEATURE BAND ENHANCEMENT
============================================================ */

.gf-mulch-gallery__feature-band {

    --gf-mulch-rule-scale:
        0;

}


.gf-mulch-gallery__feature-band::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--gf-copper),
            var(--gf-green)
        );

    transform:
        scaleX(
            var(--gf-mulch-rule-scale)
        );

    transform-origin:
        left;

    transition:
        transform
        900ms
        var(--gf-ease-emphasized);

}


.gf-mulch-gallery__feature-band {

    position: relative;

}


.gf-mulch-gallery__feature-band.is-enhanced {

    --gf-mulch-rule-scale:
        1;

}



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

.gf-mulch-gallery__footer {

    display: grid;

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

    align-items: center;

    gap: 35px;

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

}



/* ============================================================
   21. COLLECTION LINKS
============================================================ */

.gf-mulch-gallery__collection-link {

    display: flex;

    align-items: center;

    gap: 13px;

}


.gf-mulch-gallery__collection-link--next {

    text-align: right;

}


.gf-mulch-gallery__collection-link > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-mulch-gallery__collection-link div span {

    font-size: 0.42rem;
    font-weight: 750;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-mulch-gallery__collection-link strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;
    font-weight: 500;

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

}


.gf-mulch-gallery__collection-arrow {

    color:
        var(--gf-copper);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-mulch-gallery__collection-link:first-child:hover
.gf-mulch-gallery__collection-arrow {

    transform:
        translateY(-4px);

}


.gf-mulch-gallery__collection-link--next:hover
.gf-mulch-gallery__collection-arrow {

    transform:
        translateY(4px);

}



/* ============================================================
   22. FOOTER CENTER
============================================================ */

.gf-mulch-gallery__footer-center {

    display: grid;

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

    align-items: center;

    gap: 18px;

}


.gf-mulch-gallery__footer-line {

    width: 100%;
    height: 1px;

    background:
        rgba(148,88,45,0.2);

}


.gf-mulch-gallery__footer-center > div {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

}


.gf-mulch-gallery__footer-center span {

    font-size: 0.38rem;
    font-weight: 750;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-mulch-gallery__footer-center strong {

    font-size: 0.61rem;
    font-weight: 800;

    color:
        var(--gf-copper-dark);

}



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

@media (min-width: 1200px) {

    .gf-mulch-gallery__grid {

        grid-auto-rows:
            95px;

    }

}



/* ============================================================
   24. TABLET
   768px - 1199px
============================================================ */

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

    .gf-mulch-gallery__header {

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

        gap: 48px;

    }


    .gf-mulch-gallery__title {

        font-size:
            clamp(
                3rem,
                6.5vw,
                4.8rem
            );

    }


    .gf-mulch-gallery__feature-band {

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

    }


    .gf-mulch-gallery__grid {

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

        grid-auto-rows:
            84px;

    }


    .gf-mulch-gallery__item:nth-child(10n + 1) {

        grid-column:
            span 5;

    }


    .gf-mulch-gallery__item:nth-child(10n + 2),
    .gf-mulch-gallery__item:nth-child(10n + 3),
    .gf-mulch-gallery__item:nth-child(10n + 5) {

        grid-column:
            span 3;

    }


    .gf-mulch-gallery__item:nth-child(10n + 4),
    .gf-mulch-gallery__item:nth-child(10n + 6),
    .gf-mulch-gallery__item:nth-child(10n + 7),
    .gf-mulch-gallery__item:nth-child(10n + 8),
    .gf-mulch-gallery__item:nth-child(10n + 9),
    .gf-mulch-gallery__item:nth-child(10n + 10) {

        grid-column:
            span 4;

    }

}



/* ============================================================
   25. MOBILE
   481px - 767px
============================================================ */

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

    .gf-service-gallery--mulch {

        padding:
            75px 0;

    }


    .gf-mulch-gallery__header {

        grid-template-columns:
            1fr;

        gap: 30px;

        margin-bottom:
            43px;

    }


    .gf-mulch-gallery__title {

        max-width: 590px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.3rem
            );

    }


    .gf-mulch-gallery__summary {

        max-width:
            520px;

    }


    .gf-mulch-gallery__feature-band {

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

        min-height:
            190px;

    }


    .gf-mulch-gallery__feature-meta {

        display:
            none;

    }


    .gf-mulch-gallery__grid {

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

        grid-auto-rows:
            155px;

        gap:
            4px;

    }


    .gf-mulch-gallery__item:nth-child(n) {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-mulch-gallery__item:nth-child(5n + 1) {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-mulch-gallery__footer {

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

        gap:
            18px;

    }


    .gf-mulch-gallery__footer-center {

        display:
            block;

    }


    .gf-mulch-gallery__footer-center
    .gf-mulch-gallery__footer-line {

        display:
            none;

    }

}



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

@media (max-width: 480px) {

    .gf-service-gallery--mulch {

        padding:
            65px 0;

    }


    .gf-mulch-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            25px;

        margin-bottom:
            35px;

    }


    .gf-mulch-gallery__eyebrow {

        font-size:
            0.55rem;

    }


    .gf-mulch-gallery__title {

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

    }


    .gf-mulch-gallery__summary {

        padding-left:
            18px;

    }


    .gf-mulch-gallery__feature-band {

        display:
            block;

        min-height:
            190px;

    }


    .gf-mulch-gallery__feature-copy {

        min-height:
            190px;

        padding:
            24px 20px;

    }


    .gf-mulch-gallery__feature-mark,
    .gf-mulch-gallery__feature-meta {

        display:
            none;

    }


    .gf-mulch-gallery__grid {

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

        grid-auto-rows:
            120px;

        gap:
            3px;

    }


    .gf-mulch-gallery__item:nth-child(n) {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-mulch-gallery__item:nth-child(4n + 1) {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-mulch-gallery__item-ui {

        padding:
            10px;

    }


    .gf-mulch-gallery__footer {

        grid-template-columns:
            1fr;

        gap:
            21px;

    }


    .gf-mulch-gallery__footer-center {

        display:
            none;

    }


    .gf-mulch-gallery__collection-link--next {

        justify-content:
            flex-end;

    }

}



/* ============================================================
   27. REDUCED MOTION
============================================================ */

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

    .gf-mulch-gallery__item img,
    .gf-mulch-gallery__item-ui span:last-child,
    .gf-mulch-gallery__collection-arrow,
    .gf-mulch-gallery__feature-band::after {

        animation:
            none !important;

        transition:
            none !important;

    }


    .gf-mulch-gallery__feature-band {

        --gf-mulch-rule-scale:
            1;

    }

}















































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   10. YARD CLEANUP
============================================================ */


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

.gf-service-gallery--cleanup {

    position: relative;

    isolation: isolate;

    padding:
        clamp(80px, 9vw, 140px)
        0;

    overflow: hidden;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-service-gallery--cleanup::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 51%;
    height: 3px;

    background:
        var(--gf-green);

}


.gf-service-gallery--cleanup::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 16%;
    height: 2px;

    background:
        var(--gf-copper);

}



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

.gf-cleanup-gallery__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.gf-cleanup-gallery__grain {

    position: absolute;

    inset: 0;

    opacity: 0.08;

    background-image:
        radial-gradient(
            rgba(255,255,255,0.18)
            0.5px,
            transparent 0.75px
        );

    background-size:
        11px 11px;

}


.gf-cleanup-gallery__contour {

    position: absolute;

    border:
        1px solid
        rgba(126,217,87,0.05);

}


.gf-cleanup-gallery__contour::before,
.gf-cleanup-gallery__contour::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(126,217,87,0.04);

}


.gf-cleanup-gallery__contour::before {

    inset: 40px;

}


.gf-cleanup-gallery__contour::after {

    inset: 85px;

}


.gf-cleanup-gallery__contour--1 {

    top: -390px;
    right: -330px;

    width: 740px;
    height: 740px;

    transform:
        rotate(40deg);

}


.gf-cleanup-gallery__contour--2 {

    left: -390px;
    bottom: -430px;

    width: 760px;
    height: 760px;

    transform:
        rotate(49deg);

}


.gf-cleanup-gallery__watermark {

    position: absolute;

    right: -0.08em;
    top: 35%;

    writing-mode:
        vertical-rl;

    font-size:
        clamp(
            6rem,
            12vw,
            13rem
        );

    font-weight: 800;

    letter-spacing: -0.06em;

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

}



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

.gf-cleanup-gallery__header {

    display: grid;

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

    align-items: end;

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

    margin-bottom:
        clamp(50px, 6vw, 80px);

}



/* ============================================================
   04. EYEBROW
============================================================ */

.gf-cleanup-gallery__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-cleanup-gallery__eyebrow-line {

    width: 42px;
    height: 1px;

    background:
        currentColor;

}



/* ============================================================
   05. TITLE
============================================================ */

.gf-cleanup-gallery__title {

    max-width: 900px;

    margin: 0;

    font-size:
        clamp(
            3rem,
            5.2vw,
            6.1rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing: -0.065em;

    color:
        var(--gf-white);

}


.gf-cleanup-gallery__title span {

    display: block;

    margin-top: 0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   06. SUMMARY
============================================================ */

.gf-cleanup-gallery__summary {

    padding-left: 28px;

    border-left:
        1px solid
        rgba(255,255,255,0.14);

}


.gf-cleanup-gallery__count {

    display: flex;

    align-items: flex-end;

    gap: 14px;

    margin-bottom: 18px;

}


.gf-cleanup-gallery__count > strong {

    font-size:
        clamp(
            3.2rem,
            4.5vw,
            5.2rem
        );

    font-weight: 600;

    line-height: 0.78;

    letter-spacing: -0.075em;

    color:
        var(--gf-green-bright);

}


.gf-cleanup-gallery__count > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-cleanup-gallery__count span {

    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

}


.gf-cleanup-gallery__count small {

    font-size: 0.45rem;
    font-weight: 600;

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

}


.gf-cleanup-gallery__summary p {

    max-width: 360px;

    margin:
        0 0 20px;

    font-size: 0.76rem;

    line-height: 1.7;

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

}



/* ============================================================
   07. VIEWER HINT
============================================================ */

.gf-cleanup-gallery__viewer-hint {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.44rem;
    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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

}


.gf-cleanup-gallery__viewer-icon {

    display: grid;

    width: 24px;
    height: 24px;

    flex: 0 0 auto;

    place-items: center;

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

    background:
        var(--gf-leaf);

}



/* ============================================================
   08. MANIFESTO
============================================================ */

.gf-cleanup-gallery__manifesto {

    position: relative;

    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr)
        160px
        220px;

    min-height: 210px;

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

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

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

}


.gf-cleanup-gallery__manifesto::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--gf-green),
            var(--gf-copper)
        );

    transform:
        scaleX(
            var(--gf-cleanup-rule, 0)
        );

    transform-origin:
        left;

    transition:
        transform
        900ms
        var(--gf-ease-emphasized);

}


.gf-cleanup-gallery__manifesto.is-enhanced {

    --gf-cleanup-rule:
        1;

}



/* ============================================================
   09. MANIFESTO INDEX
============================================================ */

.gf-cleanup-gallery__manifesto-index {

    display: flex;

    justify-content: space-between;

    flex-direction: column;

    padding: 28px;

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

}


.gf-cleanup-gallery__manifesto-index span {

    font-size: 0.4rem;
    font-weight: 750;

    letter-spacing: 0.11em;

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

}


.gf-cleanup-gallery__manifesto-index strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.35rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



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

.gf-cleanup-gallery__manifesto-copy {

    display: flex;

    justify-content: flex-end;

    flex-direction: column;

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

}


.gf-cleanup-gallery__manifesto-copy > span {

    margin-bottom: 8px;

    font-size: 0.44rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-cleanup-gallery__manifesto-copy p {

    max-width: 630px;

    margin: 0;

    font-size:
        clamp(
            1.3rem,
            2vw,
            2.05rem
        );

    font-weight: 650;

    line-height: 1.04;

    letter-spacing: -0.045em;

}


.gf-cleanup-gallery__manifesto-copy em {

    display: block;

    margin-top: 5px;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   11. MANIFESTO ART
============================================================ */

.gf-cleanup-gallery__manifesto-art {

    display: grid;

    place-items: center;

    border-left:
        1px solid
        rgba(255,255,255,0.1);

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

    color:
        rgba(126,217,87,0.45);

}


.gf-cleanup-gallery__manifesto-art svg {

    width: 100px;
    height: 100px;

}



/* ============================================================
   12. MANIFESTO META
============================================================ */

.gf-cleanup-gallery__manifesto-meta {

    display: grid;

    grid-template-rows:
        repeat(2, 1fr);

}


.gf-cleanup-gallery__manifesto-meta > div {

    display: flex;

    justify-content: center;

    flex-direction: column;

    padding:
        20px 25px;

}


.gf-cleanup-gallery__manifesto-meta > div:first-child {

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

}


.gf-cleanup-gallery__manifesto-meta span {

    font-size: 0.39rem;
    font-weight: 750;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-cleanup-gallery__manifesto-meta strong {

    margin-top: 3px;

    font-family:
        var(--gf-font-serif);

    font-size: 1.1rem;
    font-style: italic;
    font-weight: 500;

}



/* ============================================================
   13. CHAPTER
============================================================ */

.gf-cleanup-gallery__chapter + .gf-cleanup-gallery__chapter {

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

}


.gf-cleanup-gallery__chapter-heading {

    display: flex;

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

    gap: 35px;

    margin-bottom: 27px;

    padding-bottom: 17px;

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

}


.gf-cleanup-gallery__chapter-heading > div {

    display: flex;

    align-items: center;

    gap: 17px;

}


.gf-cleanup-gallery__chapter-number {

    font-family:
        var(--gf-font-serif);

    font-size: 1.15rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-cleanup-gallery__chapter-heading > div > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-cleanup-gallery__chapter-heading
> div > div > span {

    font-size: 0.45rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

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

}


.gf-cleanup-gallery__chapter-heading strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.2rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-white);

}


.gf-cleanup-gallery__chapter-count {

    font-size: 0.52rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    color:
        var(--gf-leaf);

}



/* ============================================================
   14. FEATURED GRID
============================================================ */

.gf-cleanup-gallery__featured-grid {

    display: grid;

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

    grid-auto-rows:
        94px;

    grid-auto-flow:
        dense;

    gap: 5px;

}



/* ============================================================
   15. FEATURED COMPOSITION
============================================================ */

.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(1) {

    grid-column: span 6;
    grid-row: span 4;

}


.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(2) {

    grid-column: span 3;
    grid-row: span 2;

}


.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(3) {

    grid-column: span 3;
    grid-row: span 2;

}


.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(4) {

    grid-column: span 6;
    grid-row: span 2;

}


.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(5) {

    grid-column: span 3;
    grid-row: span 3;

}


.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(6) {

    grid-column: span 5;
    grid-row: span 3;

}


.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(7) {

    grid-column: span 4;
    grid-row: span 3;

}


.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(8),
.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(9),
.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(10) {

    grid-column: span 4;
    grid-row: span 2;

}


.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(11) {

    grid-column: span 5;
    grid-row: span 3;

}


.gf-cleanup-gallery__featured-grid
.gf-cleanup-gallery__item:nth-child(12) {

    grid-column: span 7;
    grid-row: span 3;

}



/* ============================================================
   16. ARCHIVE GRID
============================================================ */

.gf-cleanup-gallery__archive-grid {

    display: grid;

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

    grid-auto-rows:
        240px;

    gap: 5px;

}


.gf-cleanup-gallery__archive-grid
.gf-cleanup-gallery__item:nth-child(7n + 1) {

    grid-column:
        span 2;

}


.gf-cleanup-gallery__archive-grid
.gf-cleanup-gallery__item:nth-child(7n + 4) {

    grid-row:
        span 2;

}


.gf-cleanup-gallery__archive-grid
.gf-cleanup-gallery__item:nth-child(7n + 7) {

    grid-column:
        span 2;

}



/* ============================================================
   17. ITEM
============================================================ */

.gf-cleanup-gallery__item {

    position: relative;

    isolation: isolate;

    display: block;

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

    padding: 0;

    overflow: hidden;

    cursor: zoom-in;

    border: 0;
    border-radius: 0;

    opacity: 1;

    background:
        var(--gf-charcoal);

    color:
        var(--gf-white);

}



/* ============================================================
   18. IMAGE
============================================================ */

.gf-cleanup-gallery__item img {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

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

        filter
        550ms
        ease;

}


.gf-cleanup-gallery__item:hover img,
.gf-cleanup-gallery__item:focus-visible img {

    transform:
        scale(1.045);

    filter:
        saturate(1.035)
        contrast(1.025);

}



/* ============================================================
   19. OVERLAY
============================================================ */

.gf-cleanup-gallery__item::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(3,30,19,0.72),
            transparent 45%
        );

    opacity: 0.45;

    transition:
        opacity
        350ms
        ease;

}


.gf-cleanup-gallery__item::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    border:
        1px solid
        transparent;

    transition:
        border-color
        350ms
        ease;

}


.gf-cleanup-gallery__item:hover::before,
.gf-cleanup-gallery__item:focus-visible::before {

    opacity: 0.76;

}


.gf-cleanup-gallery__item:hover::after,
.gf-cleanup-gallery__item:focus-visible::after {

    border-color:
        rgba(126,217,87,0.7);

}



/* ============================================================
   20. ITEM UI
============================================================ */

.gf-cleanup-gallery__item-ui {

    position: absolute;

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

    z-index: 5;

    display: flex;

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

    padding:
        13px 15px;

    pointer-events: none;

}


.gf-cleanup-gallery__item-ui span:first-child {

    font-family:
        var(--gf-font-serif);

    font-size: 0.65rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-cleanup-gallery__item-ui span:last-child {

    color:
        var(--gf-leaf);

    opacity: 0;

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

    transition:
        opacity
        300ms ease,

        transform
        350ms
        var(--gf-ease-standard);

}


.gf-cleanup-gallery__item:hover
.gf-cleanup-gallery__item-ui span:last-child,
.gf-cleanup-gallery__item:focus-visible
.gf-cleanup-gallery__item-ui span:last-child {

    opacity: 1;

    transform:
        translate(0);

}



/* ============================================================
   21. OPTIONAL IMAGE ENHANCEMENT

   NEVER controls visibility.
============================================================ */

.gf-cleanup-gallery__item.is-enhanced img {

    animation:
        gf-cleanup-image-settle
        750ms
        var(--gf-ease-standard)
        both;

}


@keyframes gf-cleanup-image-settle {

    from {

        transform:
            scale(1.02);

        filter:
            saturate(0.95)
            contrast(0.98);

    }

    to {

        transform:
            scale(1);

        filter:
            none;

    }

}



/* ============================================================
   22. FOOTER
============================================================ */

.gf-cleanup-gallery__footer {

    display: grid;

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

    align-items: center;

    gap: 35px;

    margin-top:
        clamp(60px, 7vw, 95px);

    padding-top: 28px;

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

}



/* ============================================================
   23. PREVIOUS
============================================================ */

.gf-cleanup-gallery__previous {

    display: flex;

    align-items: center;

    gap: 13px;

}


.gf-cleanup-gallery__previous > span {

    color:
        var(--gf-copper);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-cleanup-gallery__previous:hover > span {

    transform:
        translateY(-4px);

}


.gf-cleanup-gallery__previous > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-cleanup-gallery__previous div span,
.gf-cleanup-gallery__complete span {

    font-size: 0.4rem;
    font-weight: 750;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-cleanup-gallery__previous strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-white);

}



/* ============================================================
   24. COMPLETE
============================================================ */

.gf-cleanup-gallery__complete {

    justify-self: center;

    display: flex;

    align-items: center;

    flex-direction: column;

    gap: 3px;

}


.gf-cleanup-gallery__complete strong {

    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    color:
        var(--gf-leaf);

}



/* ============================================================
   25. CTA
============================================================ */

.gf-cleanup-gallery__cta {

    position: relative;

    isolation: isolate;

    display: inline-flex;

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

    gap: 20px;

    min-height: 50px;

    padding:
        0 20px;

    overflow: hidden;

    border:
        1px solid
        var(--gf-green);

    background:
        var(--gf-green);

    color:
        var(--gf-white);

    font-size: 0.52rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.gf-cleanup-gallery__cta::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--gf-copper);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        400ms
        var(--gf-ease-emphasized);

}


.gf-cleanup-gallery__cta:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-cleanup-gallery__cta span:last-child {

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-cleanup-gallery__cta:hover
span:last-child {

    transform:
        translateX(4px);

}



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

@media (min-width: 1200px) {

    .gf-cleanup-gallery__featured-grid {

        grid-auto-rows:
            94px;

    }

}



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

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

    .gf-cleanup-gallery__header {

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

        gap:
            48px;

    }


    .gf-cleanup-gallery__title {

        font-size:
            clamp(
                3rem,
                6.5vw,
                4.8rem
            );

    }


    .gf-cleanup-gallery__manifesto {

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

    }


    .gf-cleanup-gallery__manifesto-meta {

        display: none;

    }


    .gf-cleanup-gallery__featured-grid {

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

        grid-auto-rows:
            84px;

    }


    .gf-cleanup-gallery__featured-grid
    .gf-cleanup-gallery__item:nth-child(n) {

        grid-column:
            span 4;

        grid-row:
            span 3;

    }


    .gf-cleanup-gallery__featured-grid
    .gf-cleanup-gallery__item:nth-child(5n + 1) {

        grid-column:
            span 5;

        grid-row:
            span 4;

    }


    .gf-cleanup-gallery__featured-grid
    .gf-cleanup-gallery__item:nth-child(5n + 2) {

        grid-column:
            span 3;

        grid-row:
            span 4;

    }


    .gf-cleanup-gallery__archive-grid {

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

        grid-auto-rows:
            220px;

    }


    .gf-cleanup-gallery__archive-grid
    .gf-cleanup-gallery__item:nth-child(n) {

        grid-column:
            span 1;

        grid-row:
            span 1;

    }


    .gf-cleanup-gallery__archive-grid
    .gf-cleanup-gallery__item:nth-child(7n + 1) {

        grid-column:
            span 2;

    }

}



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

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

    .gf-service-gallery--cleanup {

        padding:
            75px 0;

    }


    .gf-cleanup-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            30px;

        margin-bottom:
            45px;

    }


    .gf-cleanup-gallery__title {

        max-width:
            590px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.3rem
            );

    }


    .gf-cleanup-gallery__summary {

        max-width:
            520px;

    }


    .gf-cleanup-gallery__manifesto {

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

    }


    .gf-cleanup-gallery__manifesto-index,
    .gf-cleanup-gallery__manifesto-meta {

        display:
            none;

    }


    .gf-cleanup-gallery__manifesto-copy {

        min-height:
            190px;

    }


    .gf-cleanup-gallery__featured-grid {

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

        grid-auto-rows:
            155px;

        gap:
            4px;

    }


    .gf-cleanup-gallery__featured-grid
    .gf-cleanup-gallery__item:nth-child(n) {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-cleanup-gallery__featured-grid
    .gf-cleanup-gallery__item:nth-child(4n + 1) {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-cleanup-gallery__archive-grid {

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

        grid-auto-rows:
            180px;

        gap:
            4px;

    }


    .gf-cleanup-gallery__archive-grid
    .gf-cleanup-gallery__item:nth-child(n) {

        grid-column:
            span 1;

        grid-row:
            span 1;

    }


    .gf-cleanup-gallery__archive-grid
    .gf-cleanup-gallery__item:nth-child(6n + 1) {

        grid-column:
            1 / -1;

        grid-row:
            span 2;

    }


    .gf-cleanup-gallery__footer {

        grid-template-columns:
            1fr
            auto;

    }


    .gf-cleanup-gallery__complete {

        display:
            none;

    }

}



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

@media (max-width: 480px) {

    .gf-service-gallery--cleanup {

        padding:
            65px 0;

    }


    .gf-cleanup-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            25px;

        margin-bottom:
            35px;

    }


    .gf-cleanup-gallery__eyebrow {

        font-size:
            0.55rem;

    }


    .gf-cleanup-gallery__title {

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

    }


    .gf-cleanup-gallery__summary {

        padding-left:
            18px;

    }


    .gf-cleanup-gallery__manifesto {

        display:
            block;

        min-height:
            190px;

    }


    .gf-cleanup-gallery__manifesto-copy {

        min-height:
            190px;

        padding:
            24px 20px;

    }


    .gf-cleanup-gallery__manifesto-index,
    .gf-cleanup-gallery__manifesto-art,
    .gf-cleanup-gallery__manifesto-meta {

        display:
            none;

    }


    .gf-cleanup-gallery__chapter-heading {

        gap:
            15px;

    }


    .gf-cleanup-gallery__chapter-heading strong {

        font-size:
            1rem;

    }


    .gf-cleanup-gallery__chapter-count {

        font-size:
            0.43rem;

    }


    .gf-cleanup-gallery__featured-grid {

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

        grid-auto-rows:
            120px;

        gap:
            3px;

    }


    .gf-cleanup-gallery__featured-grid
    .gf-cleanup-gallery__item:nth-child(n) {

        grid-column:
            span 1;

        grid-row:
            span 2;

    }


    .gf-cleanup-gallery__featured-grid
    .gf-cleanup-gallery__item:nth-child(3n + 1) {

        grid-column:
            1 / -1;

        grid-row:
            span 3;

    }


    .gf-cleanup-gallery__archive-grid {

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

        grid-auto-rows:
            130px;

        gap:
            3px;

    }


    .gf-cleanup-gallery__archive-grid
    .gf-cleanup-gallery__item:nth-child(n) {

        grid-column:
            span 1;

        grid-row:
            span 1;

    }


    .gf-cleanup-gallery__archive-grid
    .gf-cleanup-gallery__item:nth-child(5n + 1) {

        grid-column:
            1 / -1;

        grid-row:
            span 2;

    }


    .gf-cleanup-gallery__item-ui {

        padding:
            10px;

    }


    .gf-cleanup-gallery__footer {

        grid-template-columns:
            1fr;

        gap:
            24px;

    }


    .gf-cleanup-gallery__complete {

        display:
            none;

    }


    .gf-cleanup-gallery__cta {

        width:
            100%;

    }

}



/* ============================================================
   30. REDUCED MOTION
============================================================ */

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

    .gf-cleanup-gallery__item img,
    .gf-cleanup-gallery__item-ui span:last-child,
    .gf-cleanup-gallery__previous > span,
    .gf-cleanup-gallery__cta::before,
    .gf-cleanup-gallery__cta span,
    .gf-cleanup-gallery__manifesto::after {

        animation:
            none !important;

        transition:
            none !important;

    }


    .gf-cleanup-gallery__manifesto {

        --gf-cleanup-rule:
            1;

    }

}




































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   11. GLOBAL FULLSCREEN IMAGE VIEWER
============================================================ */


/* ============================================================
   01. ROOT
============================================================ */

.gf-gallery-viewer {

    position: fixed;

    inset: 0;

    z-index: 100000;

    width: 100%;
    height: 100vh;

    visibility: hidden;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    color:
        var(--gf-white);

}


@supports (height: 100dvh) {

    .gf-gallery-viewer {

        height:
            100dvh;

    }

}


.gf-gallery-viewer.is-open {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}



/* ============================================================
   02. BACKDROP
============================================================ */

.gf-gallery-viewer__backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(2, 14, 9, 0.985);

}


.gf-gallery-viewer__backdrop::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0.1;

    background-image:

        radial-gradient(
            rgba(255,255,255,0.2)
            0.45px,
            transparent 0.7px
        );

    background-size:
        11px 11px;

}


.gf-gallery-viewer__backdrop::after {

    content: "";

    position: absolute;

    right: -300px;
    bottom: -380px;

    width: 700px;
    height: 700px;

    border:
        1px solid
        rgba(126,217,87,0.045);

    transform:
        rotate(40deg);

}



/* ============================================================
   03. DIALOG
============================================================ */

.gf-gallery-viewer__dialog {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-rows:
        74px
        minmax(0, 1fr)
        82px;

    width: 100%;
    height: 100%;

    outline: 0;

}



/* ============================================================
   04. TOP
============================================================ */

.gf-gallery-viewer__top {

    position: relative;

    z-index: 10;

    display: grid;

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

    align-items: center;

    gap: 30px;

    padding:
        0
        clamp(22px, 4vw, 64px);

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

}



/* ============================================================
   05. IDENTITY
============================================================ */

.gf-gallery-viewer__identity {

    display: flex;

    align-items: center;

    gap: 15px;

}


.gf-gallery-viewer__monogram {

    display: grid;

    width: 36px;
    height: 36px;

    flex: 0 0 auto;

    place-items: center;

    font-size: 0.61rem;
    font-weight: 800;

    letter-spacing: -0.03em;

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

    background:
        var(--gf-green);

}


.gf-gallery-viewer__identity-copy {

    display: flex;

    flex-direction: column;

    gap: 1px;

}


.gf-gallery-viewer__identity-copy span {

    font-size: 0.38rem;
    font-weight: 750;

    letter-spacing: 0.13em;

    text-transform: uppercase;

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

}


.gf-gallery-viewer__identity-copy strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   06. TOP META
============================================================ */

.gf-gallery-viewer__top-meta {

    display: flex;

    align-items: center;

    gap: 15px;

}


.gf-gallery-viewer__top-meta > span:first-child {

    font-size: 0.4rem;
    font-weight: 750;

    letter-spacing: 0.12em;

    text-transform: uppercase;

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

}


.gf-gallery-viewer__top-rule {

    width: 45px;
    height: 1px;

    background:
        var(--gf-copper);

}


.gf-gallery-viewer__top-meta strong {

    font-size: 0.52rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    color:
        var(--gf-white);

}



/* ============================================================
   07. CLOSE
============================================================ */

.gf-gallery-viewer__close {

    justify-self: end;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    min-height: 44px;

    padding:
        0;

    cursor: pointer;

    border: 0;

    background:
        transparent;

    color:
        var(--gf-white);

}


.gf-gallery-viewer__close > span:first-child {

    font-size: 0.45rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

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

}


.gf-gallery-viewer__close-icon {

    display: grid;

    width: 35px;
    height: 35px;

    place-items: center;

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

    font-size: 1.35rem;
    font-weight: 300;

    line-height: 1;

    color:
        var(--gf-leaf);

    transition:
        color
        300ms ease,

        border-color
        300ms ease,

        background-color
        300ms ease,

        transform
        350ms
        var(--gf-ease-standard);

}


.gf-gallery-viewer__close:hover
.gf-gallery-viewer__close-icon,
.gf-gallery-viewer__close:focus-visible
.gf-gallery-viewer__close-icon {

    border-color:
        var(--gf-green);

    color:
        var(--gf-white);

    background:
        var(--gf-green);

    transform:
        rotate(90deg);

}



/* ============================================================
   08. STAGE
============================================================ */

.gf-gallery-viewer__stage {

    position: relative;

    display: grid;

    grid-template-columns:
        clamp(62px, 7vw, 108px)
        minmax(0, 1fr)
        clamp(62px, 7vw, 108px);

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

}



/* ============================================================
   09. MEDIA
============================================================ */

.gf-gallery-viewer__media {

    position: relative;

    display: grid;

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

    place-items: center;

    padding:
        clamp(16px, 2vw, 32px);

    overflow: hidden;

}



/* ============================================================
   10. IMAGE SHELL
============================================================ */

.gf-gallery-viewer__image-shell {

    position: relative;

    display: grid;

    width: 100%;
    height: 100%;

    place-items: center;

    overflow: hidden;

}



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

.gf-gallery-viewer__image {

    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;

    -webkit-user-drag: none;

    opacity: 1;

    transform:
        scale(1);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,0.33);

    transition:
        opacity
        180ms
        ease,

        transform
        500ms
        var(--gf-ease-standard);

}


.gf-gallery-viewer.is-changing
.gf-gallery-viewer__image {

    opacity: 0;

    transform:
        scale(0.992);

}



/* ============================================================
   12. LOADING
============================================================ */

.gf-gallery-viewer__loading {

    position: absolute;

    inset: 0;

    display: grid;

    place-content: center;

    gap: 12px;

    text-align: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

}


.gf-gallery-viewer.is-loading
.gf-gallery-viewer__loading {

    visibility: visible;

    opacity: 1;

}


.gf-gallery-viewer__loading span {

    width: 28px;
    height: 28px;

    margin:
        0 auto;

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

    border-top-color:
        var(--gf-green);

    border-radius:
        50%;

    animation:
        gf-viewer-loading
        700ms
        linear
        infinite;

}


.gf-gallery-viewer__loading small {

    font-size: 0.4rem;
    font-weight: 750;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


@keyframes gf-viewer-loading {

    to {

        transform:
            rotate(360deg);

    }

}



/* ============================================================
   13. NAV BUTTONS
============================================================ */

.gf-gallery-viewer__nav {

    position: relative;

    z-index: 5;

    display: flex;

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

    flex-direction: column;

    gap: 11px;

    width: 100%;
    height: 100%;

    padding: 0;

    cursor: pointer;

    border: 0;

    background:
        transparent;

    color:
        var(--gf-white);

}


.gf-gallery-viewer__nav::before {

    content: "";

    position: absolute;

    top: 50%;

    width: 42px;
    height: 58px;

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

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

    transform:
        translateY(-50%);

    transition:
        border-color
        300ms ease,

        background-color
        300ms ease,

        transform
        350ms
        var(--gf-ease-standard);

}


.gf-gallery-viewer__nav:hover::before,
.gf-gallery-viewer__nav:focus-visible::before {

    border-color:
        var(--gf-green);

    background:
        var(--gf-green);

}


.gf-gallery-viewer__nav--previous:hover::before {

    transform:
        translate(-4px, -50%);

}


.gf-gallery-viewer__nav--next:hover::before {

    transform:
        translate(4px, -50%);

}



/* ============================================================
   14. NAV LABEL
============================================================ */

.gf-gallery-viewer__nav-label {

    position: absolute;

    top: 50%;

    font-size: 0.35rem;
    font-weight: 750;

    letter-spacing: 0.13em;

    text-transform: uppercase;

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

    writing-mode:
        vertical-rl;

}


.gf-gallery-viewer__nav--previous
.gf-gallery-viewer__nav-label {

    left: 8px;

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

}


.gf-gallery-viewer__nav--next
.gf-gallery-viewer__nav-label {

    right: 8px;

    transform:
        translateY(-50%);

}



/* ============================================================
   15. NAV ICON
============================================================ */

.gf-gallery-viewer__nav-icon {

    position: relative;

    z-index: 2;

    font-size: 1rem;

    color:
        var(--gf-leaf);

    transition:
        color
        300ms ease;

}


.gf-gallery-viewer__nav:hover
.gf-gallery-viewer__nav-icon {

    color:
        var(--gf-white);

}



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

.gf-gallery-viewer__bottom {

    position: relative;

    z-index: 10;

    display: grid;

    grid-template-columns:
        minmax(170px, 0.7fr)
        minmax(260px, 1fr)
        minmax(170px, 0.7fr);

    align-items: center;

    gap:
        clamp(25px, 5vw, 80px);

    padding:
        0
        clamp(22px, 4vw, 64px);

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

}



/* ============================================================
   17. BOTTOM CATEGORY
============================================================ */

.gf-gallery-viewer__bottom-category {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-gallery-viewer__bottom-category span {

    font-size: 0.38rem;
    font-weight: 750;

    letter-spacing: 0.12em;

    text-transform: uppercase;

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

}


.gf-gallery-viewer__bottom-category strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   18. PROGRESS
============================================================ */

.gf-gallery-viewer__progress {

    min-width: 0;

}


.gf-gallery-viewer__progress-meta {

    display: flex;

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

    gap: 20px;

    margin-bottom: 9px;

}


.gf-gallery-viewer__progress-meta span {

    font-size: 0.36rem;
    font-weight: 750;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-gallery-viewer__progress-meta strong {

    font-size: 0.47rem;
    font-weight: 800;

    letter-spacing: 0.08em;

}


.gf-gallery-viewer__progress-track {

    position: relative;

    width: 100%;
    height: 2px;

    overflow: hidden;

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

}


.gf-gallery-viewer__progress-value {

    position: absolute;

    inset:
        0 auto 0 0;

    width:
        var(--gf-viewer-progress, 0%);

    background:
        linear-gradient(
            90deg,
            var(--gf-green),
            var(--gf-leaf)
        );

    transition:
        width
        420ms
        var(--gf-ease-standard);

}



/* ============================================================
   19. INSTRUCTIONS
============================================================ */

.gf-gallery-viewer__instructions {

    justify-self: end;

    display: flex;

    align-items: center;

    gap: 19px;

}


.gf-gallery-viewer__instructions span {

    font-size: 0.35rem;
    font-weight: 750;

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

}


.gf-gallery-viewer__instructions-mobile {

    display: none;

}



/* ============================================================
   20. OPEN ANIMATION
============================================================ */

.gf-gallery-viewer__backdrop {

    opacity: 0;

    transition:
        opacity
        420ms
        ease;

}


.gf-gallery-viewer__dialog {

    opacity: 0;

    transform:
        scale(1.008);

    transition:
        opacity
        420ms
        60ms
        ease,

        transform
        600ms
        60ms
        var(--gf-ease-standard);

}


.gf-gallery-viewer.is-open
.gf-gallery-viewer__backdrop {

    opacity: 1;

}


.gf-gallery-viewer.is-open
.gf-gallery-viewer__dialog {

    opacity: 1;

    transform:
        scale(1);

}



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

@media (min-width: 1200px) {

    .gf-gallery-viewer__stage {

        grid-template-columns:
            clamp(80px, 7vw, 110px)
            minmax(0, 1fr)
            clamp(80px, 7vw, 110px);

    }

}



/* ============================================================
   22. TABLET
   768px - 1199px
============================================================ */

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

    .gf-gallery-viewer__dialog {

        grid-template-rows:
            70px
            minmax(0, 1fr)
            76px;

    }


    .gf-gallery-viewer__top {

        grid-template-columns:
            1fr
            auto;

    }


    .gf-gallery-viewer__top-meta {

        display: none;

    }


    .gf-gallery-viewer__stage {

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

    }


    .gf-gallery-viewer__bottom {

        grid-template-columns:
            minmax(150px, 0.8fr)
            minmax(230px, 1.2fr);

    }


    .gf-gallery-viewer__instructions {

        display: none;

    }

}



/* ============================================================
   23. MOBILE
   481px - 767px
============================================================ */

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

    .gf-gallery-viewer__dialog {

        grid-template-rows:
            62px
            minmax(0, 1fr)
            67px;

    }


    .gf-gallery-viewer__top {

        grid-template-columns:
            1fr
            auto;

        padding:
            0 18px;

    }


    .gf-gallery-viewer__top-meta {

        display: none;

    }


    .gf-gallery-viewer__stage {

        display: block;

    }


    .gf-gallery-viewer__media {

        width: 100%;
        height: 100%;

        padding:
            14px 48px;

    }


    .gf-gallery-viewer__nav {

        position: absolute;

        top: 0;
        bottom: 0;

        width: 45px;
        height: 100%;

    }


    .gf-gallery-viewer__nav--previous {

        left: 0;

    }


    .gf-gallery-viewer__nav--next {

        right: 0;

    }


    .gf-gallery-viewer__nav::before {

        width: 34px;
        height: 50px;

    }


    .gf-gallery-viewer__nav-label {

        display: none;

    }


    .gf-gallery-viewer__bottom {

        grid-template-columns:
            minmax(120px, 0.8fr)
            minmax(180px, 1.2fr);

        gap: 24px;

        padding:
            0 18px;

    }


    .gf-gallery-viewer__instructions {

        display: none;

    }

}



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

@media (max-width: 480px) {

    .gf-gallery-viewer__dialog {

        grid-template-rows:
            58px
            minmax(0, 1fr)
            64px;

    }


    .gf-gallery-viewer__top {

        grid-template-columns:
            1fr
            auto;

        gap: 15px;

        padding:
            0 14px;

    }


    .gf-gallery-viewer__monogram {

        width: 31px;
        height: 31px;

        font-size: 0.53rem;

    }


    .gf-gallery-viewer__identity-copy span {

        display: none;

    }


    .gf-gallery-viewer__identity-copy strong {

        max-width: 165px;

        overflow: hidden;

        font-size: 0.83rem;

        text-overflow: ellipsis;

        white-space: nowrap;

    }


    .gf-gallery-viewer__top-meta,
    .gf-gallery-viewer__close > span:first-child {

        display: none;

    }


    .gf-gallery-viewer__close-icon {

        width: 33px;
        height: 33px;

    }


    .gf-gallery-viewer__stage {

        display: block;

    }


    .gf-gallery-viewer__media {

        width: 100%;
        height: 100%;

        padding:
            10px 40px;

    }


    .gf-gallery-viewer__nav {

        position: absolute;

        top: 0;
        bottom: 0;

        width: 38px;
        height: 100%;

    }


    .gf-gallery-viewer__nav--previous {

        left: 0;

    }


    .gf-gallery-viewer__nav--next {

        right: 0;

    }


    .gf-gallery-viewer__nav::before {

        width: 31px;
        height: 46px;

    }


    .gf-gallery-viewer__nav-label {

        display: none;

    }


    .gf-gallery-viewer__bottom {

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

        gap: 17px;

        padding:
            0 14px;

    }


    .gf-gallery-viewer__bottom-category strong {

        max-width: 150px;

        overflow: hidden;

        font-size: 0.82rem;

        text-overflow: ellipsis;

        white-space: nowrap;

    }


    .gf-gallery-viewer__progress {

        min-width: 90px;

    }


    .gf-gallery-viewer__progress-meta {

        margin-bottom: 7px;

    }


    .gf-gallery-viewer__progress-meta span {

        display: none;

    }


    .gf-gallery-viewer__progress-meta strong {

        margin-left: auto;

    }


    .gf-gallery-viewer__instructions {

        display: none;

    }

}



/* ============================================================
   25. REDUCED MOTION
============================================================ */

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

    .gf-gallery-viewer,
    .gf-gallery-viewer__backdrop,
    .gf-gallery-viewer__dialog,
    .gf-gallery-viewer__image,
    .gf-gallery-viewer__progress-value,
    .gf-gallery-viewer__nav::before,
    .gf-gallery-viewer__close-icon {

        animation:
            none !important;

        transition:
            none !important;

    }


    .gf-gallery-viewer__loading span {

        animation:
            none !important;

    }

}







































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   GLOBAL DESCRIPTION READABILITY UPDATE

   Increases readable/descriptive copy while preserving
   small editorial metadata, indexes and labels.
============================================================ */


/* ============================================================
   01. GALLERY HERO DESCRIPTION
============================================================ */

.gf-gallery-hero__description {

    max-width:
        630px;

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

    line-height:
        1.68;

}



/* ============================================================
   02. GALLERY INTRODUCTION — MAIN DESCRIPTION
============================================================ */

.gf-gallery-intro__description {

    max-width:
        650px;

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

    line-height:
        1.72;

}



/* ============================================================
   03. GALLERY INTRODUCTION — NOTE
============================================================ */

.gf-gallery-intro__note p {

    max-width:
        500px;

    font-size:
        clamp(
            0.86rem,
            0.9vw,
            0.96rem
        );

    line-height:
        1.68;

}



/* ============================================================
   04. GALLERY INTRODUCTION — SERVICE DESCRIPTIONS
============================================================ */

.gf-gallery-intro__service > div span {

    font-size:
        0.62rem;

    line-height:
        1.45;

}



/* ============================================================
   05. LANDSCAPING DESCRIPTION
============================================================ */

.gf-service-gallery__summary p {

    max-width:
        400px;

    font-size:
        clamp(
            0.92rem,
            0.96vw,
            1.02rem
        );

    line-height:
        1.68;

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

}



/* ============================================================
   06. LAWN MAINTENANCE DESCRIPTION
============================================================ */

.gf-lawn-gallery__summary p {

    max-width:
        400px;

    font-size:
        clamp(
            0.92rem,
            0.96vw,
            1.02rem
        );

    line-height:
        1.68;

}



/* ============================================================
   07. EDGE & BUSH TRIMMING DESCRIPTION
============================================================ */

.gf-trimming-gallery__summary p {

    max-width:
        400px;

    font-size:
        clamp(
            0.92rem,
            0.96vw,
            1.02rem
        );

    line-height:
        1.68;

}



/* ============================================================
   08. MULCH INSTALLATION DESCRIPTION
============================================================ */

.gf-mulch-gallery__summary p {

    max-width:
        410px;

    font-size:
        clamp(
            0.92rem,
            0.96vw,
            1.02rem
        );

    line-height:
        1.68;

}



/* ============================================================
   09. YARD CLEANUP DESCRIPTION
============================================================ */

.gf-cleanup-gallery__summary p {

    max-width:
        410px;

    font-size:
        clamp(
            0.92rem,
            0.96vw,
            1.02rem
        );

    line-height:
        1.68;

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

}



/* ============================================================
   10. TRIMMING FEATURE STATEMENT

   Already large, only improves comfortable reading.
============================================================ */

.gf-trimming-gallery__band-main p {

    line-height:
        1.12;

}



/* ============================================================
   11. MULCH FEATURE STATEMENT
============================================================ */

.gf-mulch-gallery__feature-copy p {

    line-height:
        1.1;

}



/* ============================================================
   12. CLEANUP MANIFESTO
============================================================ */

.gf-cleanup-gallery__manifesto-copy p {

    line-height:
        1.12;

}



/* ============================================================
   13. LAWN STATEMENT
============================================================ */

.gf-lawn-gallery__statement p {

    line-height:
        1.14;

}



/* ============================================================
   14. VIEWER HINTS

   These are functional instructions, so they should not be
   as tiny as decorative metadata.
============================================================ */

.gf-service-gallery__viewer-hint,
.gf-lawn-gallery__hint,
.gf-trimming-gallery__viewer-hint,
.gf-mulch-gallery__viewer-hint,
.gf-cleanup-gallery__viewer-hint {

    font-size:
        0.58rem;

    line-height:
        1.45;

}



/* ============================================================
   15. LANDSCAPING / COLLECTION COUNT SUPPORTING TEXT
============================================================ */

.gf-service-gallery__count > span {

    font-size:
        0.6rem;

}


.gf-lawn-gallery__count span,
.gf-mulch-gallery__count span,
.gf-cleanup-gallery__count span {

    font-size:
        0.6rem;

}


.gf-lawn-gallery__count small,
.gf-mulch-gallery__count small,
.gf-cleanup-gallery__count small {

    font-size:
        0.54rem;

    line-height:
        1.4;

}



/* ============================================================
   16. TABLET
   768px - 1199px
============================================================ */

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

    .gf-gallery-hero__description {

        font-size:
            0.92rem;

        line-height:
            1.6;

    }


    .gf-gallery-intro__description {

        font-size:
            0.94rem;

    }


    .gf-gallery-intro__note p {

        font-size:
            0.82rem;

    }


    .gf-gallery-intro__service > div span {

        font-size:
            0.58rem;

    }


    .gf-service-gallery__summary p,
    .gf-lawn-gallery__summary p,
    .gf-trimming-gallery__summary p,
    .gf-mulch-gallery__summary p,
    .gf-cleanup-gallery__summary p {

        font-size:
            0.88rem;

        line-height:
            1.62;

    }


    .gf-service-gallery__viewer-hint,
    .gf-lawn-gallery__hint,
    .gf-trimming-gallery__viewer-hint,
    .gf-mulch-gallery__viewer-hint,
    .gf-cleanup-gallery__viewer-hint {

        font-size:
            0.55rem;

    }

}



/* ============================================================
   17. MOBILE
   481px - 767px
============================================================ */

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

    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .gf-gallery-hero__description {

        max-width:
            570px;

        font-size:
            0.82rem;

        line-height:
            1.52;

    }



    /* --------------------------------------------------------
       INTRODUCTION
    -------------------------------------------------------- */

    .gf-gallery-intro__description {

        max-width:
            570px;

        font-size:
            0.92rem;

        line-height:
            1.65;

    }


    .gf-gallery-intro__note p {

        font-size:
            0.82rem;

        line-height:
            1.62;

    }


    .gf-gallery-intro__service strong {

        font-size:
            0.72rem;

    }


    .gf-gallery-intro__service > div span {

        font-size:
            0.59rem;

        line-height:
            1.4;

    }



    /* --------------------------------------------------------
       COLLECTION DESCRIPTIONS
    -------------------------------------------------------- */

    .gf-service-gallery__summary p,
    .gf-lawn-gallery__summary p,
    .gf-trimming-gallery__summary p,
    .gf-mulch-gallery__summary p,
    .gf-cleanup-gallery__summary p {

        max-width:
            500px;

        font-size:
            0.86rem;

        line-height:
            1.62;

    }



    /* --------------------------------------------------------
       FUNCTIONAL VIEWER HINT
    -------------------------------------------------------- */

    .gf-service-gallery__viewer-hint,
    .gf-lawn-gallery__hint,
    .gf-trimming-gallery__viewer-hint,
    .gf-mulch-gallery__viewer-hint,
    .gf-cleanup-gallery__viewer-hint {

        font-size:
            0.54rem;

    }

}



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

@media (max-width: 480px) {

    /* ========================================================
       GALLERY HERO

       Previous description:
       0.60rem

       New:
       0.78rem
    ======================================================== */

    .gf-gallery-hero__description {

        font-size:
            0.78rem;

        line-height:
            1.48;

    }



    /* ========================================================
       GALLERY INTRODUCTION
    ======================================================== */

    .gf-gallery-intro__description {

        margin-bottom:
            29px;

        font-size:
            0.88rem;

        line-height:
            1.64;

    }


    /*
        This paragraph was around .70rem.
    */

    .gf-gallery-intro__note p {

        font-size:
            0.8rem;

        line-height:
            1.6;

    }


    .gf-gallery-intro__service strong {

        font-size:
            0.7rem;

    }


    .gf-gallery-intro__service > div span {

        font-size:
            0.56rem;

        line-height:
            1.4;

    }



    /* ========================================================
       LANDSCAPING
       LAWN
       TRIMMING
       MULCH
       CLEANUP
    ======================================================== */

    .gf-service-gallery__summary p,
    .gf-lawn-gallery__summary p,
    .gf-trimming-gallery__summary p,
    .gf-mulch-gallery__summary p,
    .gf-cleanup-gallery__summary p {

        max-width:
            100%;

        font-size:
            0.84rem;

        line-height:
            1.6;

    }



    /* ========================================================
       VIEWER INSTRUCTIONS
    ======================================================== */

    .gf-service-gallery__viewer-hint,
    .gf-lawn-gallery__hint,
    .gf-trimming-gallery__viewer-hint,
    .gf-mulch-gallery__viewer-hint,
    .gf-cleanup-gallery__viewer-hint {

        font-size:
            0.52rem;

        line-height:
            1.4;

    }



    /* ========================================================
       COLLECTION COUNTERS

       Still secondary, but no longer excessively tiny.
    ======================================================== */

    .gf-service-gallery__count > span {

        font-size:
            0.56rem;

    }


    .gf-lawn-gallery__count span,
    .gf-mulch-gallery__count span,
    .gf-cleanup-gallery__count span {

        font-size:
            0.56rem;

    }


    .gf-lawn-gallery__count small,
    .gf-mulch-gallery__count small,
    .gf-cleanup-gallery__count small {

        font-size:
            0.5rem;

    }

}



/* ============================================================
   19. REDUCED MOTION
============================================================ */

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

    /*
        Typography only.
        No additional motion changes required.
    */

}

















































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   11. DOWNSPOUT DRAINAGE SOLUTIONS
============================================================ */


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

.gf-service-gallery--drainage {

    position: relative;

    overflow: hidden;

    padding:
        clamp(
            86px,
            9vw,
            145px
        )
        0;

    background-color:
        var(--gf-paper);

    background-image:
        var(--gf-paper-texture);

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

}


.gf-service-gallery--drainage::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 31%;
    height: 3px;

    background:
        var(--gf-green);

}


.gf-service-gallery--drainage::after {

    content: "";

    position: absolute;

    top: 0;
    left: 31%;

    width: 14%;
    height: 3px;

    background:
        var(--gf-copper);

}



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

.gf-drainage-gallery__background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


.gf-drainage-gallery__grain {

    position: absolute;

    inset: 0;

    opacity:
        0.18;

    background-image:
        var(--gf-paper-texture);

}


.gf-drainage-gallery__watermark {

    position: absolute;

    top: 9%;
    right: -0.08em;

    font-size:
        clamp(
            7rem,
            15vw,
            16rem
        );

    font-weight: 800;

    line-height: 0.8;

    letter-spacing:
        -0.08em;

    writing-mode:
        vertical-rl;

    color:
        rgba(
            3,
            71,
            43,
            0.025
        );

    user-select:
        none;

}



/* ============================================================
   03. FLOW DECORATIONS
============================================================ */

.gf-drainage-gallery__flow {

    position: absolute;

    display: block;

    width:
        clamp(
            380px,
            48vw,
            760px
        );

    aspect-ratio:
        1;

    border:
        1px solid
        rgba(
            3,
            71,
            43,
            0.055
        );

    border-radius:
        47% 53% 63% 37% /
        58% 38% 62% 42%;

}


.gf-drainage-gallery__flow--1 {

    top: -28%;
    right: -16%;

    transform:
        rotate(22deg);

}


.gf-drainage-gallery__flow--2 {

    bottom: -42%;
    left: -20%;

    transform:
        rotate(-32deg);

}



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

.gf-drainage-gallery__header {

    position: relative;

    z-index: 2;

    display: grid;

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

    align-items:
        end;

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

    margin-bottom:
        clamp(
            50px,
            6vw,
            88px
        );

}



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

.gf-drainage-gallery__eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom:
        20px;

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

    color:
        var(--gf-copper);

}


.gf-drainage-gallery__eyebrow-line {

    width:
        40px;

    height:
        1px;

    background:
        currentColor;

}



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

.gf-drainage-gallery__title {

    max-width:
        900px;

    margin:
        0;

    font-size:
        clamp(
            3rem,
            5.1vw,
            6.1rem
        );

    font-weight:
        600;

    line-height:
        0.92;

    letter-spacing:
        -0.065em;

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

}


.gf-drainage-gallery__title span {

    display: block;

    margin-top:
        0.05em;

    font-family:
        var(--gf-font-serif);

    font-style:
        italic;

    font-weight:
        500;

    letter-spacing:
        -0.045em;

    color:
        var(--gf-green);

}



/* ============================================================
   07. SUMMARY
============================================================ */

.gf-drainage-gallery__summary {

    padding-left:
        29px;

    border-left:
        1px solid
        rgba(
            3,
            71,
            43,
            0.14
        );

}


.gf-drainage-gallery__count {

    display: flex;

    align-items:
        flex-end;

    gap:
        14px;

    margin-bottom:
        22px;

}


.gf-drainage-gallery__count strong {

    font-family:
        var(--gf-font-serif);

    font-size:
        3.25rem;

    font-style:
        italic;

    font-weight:
        500;

    line-height:
        0.8;

    color:
        var(--gf-copper);

}


.gf-drainage-gallery__count div {

    display: flex;

    flex-direction:
        column;

    gap:
        2px;

}


.gf-drainage-gallery__count span {

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

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

}


.gf-drainage-gallery__count small {

    font-size:
        0.57rem;

    color:
        var(--gf-gray);

}


.gf-drainage-gallery__summary p {

    max-width:
        430px;

    margin:
        0;

    font-size:
        clamp(
            0.92rem,
            0.96vw,
            1.02rem
        );

    line-height:
        1.68;

    color:
        var(--gf-gray);

}



/* ============================================================
   08. VIEWER HINT
============================================================ */

.gf-drainage-gallery__viewer-hint {

    display: flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        20px;

    font-size:
        0.58rem;

    font-weight:
        800;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

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

}


.gf-drainage-gallery__viewer-icon {

    display: grid;

    width:
        26px;

    height:
        26px;

    place-items:
        center;

    border:
        1px solid
        rgba(
            3,
            71,
            43,
            0.18
        );

    color:
        var(--gf-green);

}



/* ============================================================
   09. FEATURE BAND
============================================================ */

.gf-drainage-gallery__feature {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(190px, 0.65fr)
        minmax(320px, 1.45fr)
        140px
        minmax(190px, 0.7fr);

    align-items:
        center;

    gap:
        clamp(
            26px,
            4vw,
            60px
        );

    min-height:
        210px;

    margin-bottom:
        5px;

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

    overflow:
        hidden;

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

    color:
        var(--gf-white);

}


.gf-drainage-gallery__feature::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width:
        var(
            --gf-drainage-rule,
            0%
        );

    height:
        3px;

    background:
        var(--gf-green);

    transition:
        width
        1.1s
        var(--gf-ease-standard);

}


.gf-drainage-gallery__feature.is-enhanced {

    --gf-drainage-rule:
        100%;

}



/* ============================================================
   10. FEATURE INDEX
============================================================ */

.gf-drainage-gallery__feature-index {

    display: flex;

    flex-direction:
        column;

    gap:
        8px;

}


.gf-drainage-gallery__feature-index span {

    font-size:
        0.52rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

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

}


.gf-drainage-gallery__feature-index strong {

    max-width:
        175px;

    font-family:
        var(--gf-font-serif);

    font-size:
        1.4rem;

    font-style:
        italic;

    font-weight:
        500;

    line-height:
        1.05;

    color:
        var(--gf-leaf);

}



/* ============================================================
   11. FEATURE COPY
============================================================ */

.gf-drainage-gallery__feature-copy > span {

    display:
        block;

    margin-bottom:
        7px;

    font-size:
        0.56rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    color:
        var(--gf-copper);

}


.gf-drainage-gallery__feature-copy p {

    max-width:
        600px;

    margin:
        0;

    font-size:
        clamp(
            1.4rem,
            2vw,
            2.5rem
        );

    font-weight:
        600;

    line-height:
        1.03;

    letter-spacing:
        -0.04em;

    color:
        var(--gf-white);

}


.gf-drainage-gallery__feature-copy em {

    display:
        block;

    margin-top:
        0.06em;

    font-family:
        var(--gf-font-serif);

    font-weight:
        500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   12. FEATURE ART
============================================================ */

.gf-drainage-gallery__feature-art {

    color:
        rgba(
            167,
            226,
            127,
            0.58
        );

}


.gf-drainage-gallery__feature-art svg {

    display:
        block;

    width:
        100%;

}



/* ============================================================
   13. FEATURE META
============================================================ */

.gf-drainage-gallery__feature-meta {

    display: grid;

    gap:
        17px;

}


.gf-drainage-gallery__feature-meta div {

    padding-top:
        12px;

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

}


.gf-drainage-gallery__feature-meta span {

    display:
        block;

    margin-bottom:
        3px;

    font-size:
        0.48rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

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

}


.gf-drainage-gallery__feature-meta strong {

    font-size:
        0.72rem;

    font-weight:
        700;

    color:
        var(--gf-white);

}



/* ============================================================
   14. COLLECTION
============================================================ */

.gf-drainage-gallery__collection {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    min-height:
        650px;

    gap:
        5px;

}



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

.gf-drainage-gallery__item {

    position:
        relative;

    display:
        block;

    width:
        100%;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    padding:
        0;

    cursor:
        pointer;

    border:
        0;

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

    opacity:
        1;

}


.gf-drainage-gallery__item img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.001);

    filter:
        saturate(0.94)
        contrast(1.02);

    transition:
        transform
        1s
        var(--gf-ease-standard),

        filter
        500ms
        ease;

}


.gf-drainage-gallery__item:hover img {

    transform:
        scale(1.035);

    filter:
        saturate(1.02)
        contrast(1.035);

}



/* ============================================================
   16. PHOTO SHADE
============================================================ */

.gf-drainage-gallery__shade {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            180deg,
            rgba(
                3,
                29,
                19,
                0.04
            )
            25%,

            rgba(
                3,
                29,
                19,
                0.82
            )
            100%
        );

}



/* ============================================================
   17. PHOTO UI
============================================================ */

.gf-drainage-gallery__item-ui {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        end;

    gap:
        22px;

    padding:
        clamp(
            22px,
            3vw,
            38px
        );

    color:
        var(--gf-white);

}


.gf-drainage-gallery__photo-index {

    font-family:
        var(--gf-font-serif);

    font-size:
        2.2rem;

    font-style:
        italic;

    color:
        var(--gf-copper);

}


.gf-drainage-gallery__photo-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.gf-drainage-gallery__photo-copy small {

    font-size:
        0.5rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

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

}


.gf-drainage-gallery__photo-copy strong {

    font-size:
        0.82rem;

    font-weight:
        700;

}


.gf-drainage-gallery__expand {

    display:
        grid;

    width:
        40px;

    height:
        40px;

    place-items:
        center;

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

    color:
        var(--gf-leaf);

    transition:
        background-color
        300ms
        ease,

        color
        300ms
        ease;

}


.gf-drainage-gallery__item:hover
.gf-drainage-gallery__expand {

    background:
        var(--gf-green);

    color:
        var(--gf-white);

}



/* ============================================================
   18. SIDE PANEL
============================================================ */

.gf-drainage-gallery__panel {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    min-width:
        0;

    padding:
        clamp(
            30px,
            4vw,
            55px
        );

    overflow:
        hidden;

    background:
        var(--gf-cream);

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

}


.gf-drainage-gallery__panel::after {

    content: "";

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        3px;

    height:
        35%;

    background:
        var(--gf-copper);

}


.gf-drainage-gallery__panel-index {

    font-family:
        var(--gf-font-serif);

    font-size:
        1rem;

    font-style:
        italic;

    color:
        var(--gf-copper);

}


.gf-drainage-gallery__panel-label {

    display:
        block;

    margin-bottom:
        10px;

    font-size:
        0.55rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    color:
        var(--gf-green);

}


.gf-drainage-gallery__panel-content h3 {

    max-width:
        360px;

    margin:
        0 0 22px;

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

    line-height:
        0.96;

    letter-spacing:
        -0.055em;

}


.gf-drainage-gallery__panel-content h3 span {

    display:
        block;

    font-family:
        var(--gf-font-serif);

    font-style:
        italic;

    font-weight:
        500;

    color:
        var(--gf-green);

}


.gf-drainage-gallery__panel-content p {

    max-width:
        360px;

    margin:
        0;

    font-size:
        0.9rem;

    line-height:
        1.68;

    color:
        var(--gf-gray);

}


.gf-drainage-gallery__panel-bottom {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(
            3,
            71,
            43,
            0.12
        );

}


.gf-drainage-gallery__panel-bottom span {

    font-size:
        0.49rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

    color:
        var(--gf-gray);

}


.gf-drainage-gallery__panel-bottom strong {

    font-family:
        var(--gf-font-serif);

    font-size:
        1rem;

    font-style:
        italic;

    font-weight:
        500;

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

}



/* ============================================================
   19. COLLECTION FOOTER
============================================================ */

.gf-drainage-gallery__footer {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    align-items:
        center;

    gap:
        clamp(
            25px,
            4vw,
            55px
        );

    margin-top:
        5px;

    padding:
        30px
        0;

    border-bottom:
        1px solid
        rgba(
            3,
            71,
            43,
            0.13
        );

}



/* ============================================================
   20. FOOTER LINKS
============================================================ */

.gf-drainage-gallery__collection-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

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

}


.gf-drainage-gallery__collection-link--next {

    justify-self:
        end;

    text-align:
        right;

}


.gf-drainage-gallery__collection-link div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.gf-drainage-gallery__collection-link div > span {

    font-size:
        0.48rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;

    color:
        var(--gf-gray);

}


.gf-drainage-gallery__collection-link strong {

    font-family:
        var(--gf-font-serif);

    font-size:
        1.05rem;

    font-style:
        italic;

    font-weight:
        500;

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

}


.gf-drainage-gallery__collection-arrow {

    color:
        var(--gf-green);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-drainage-gallery__collection-link:hover
.gf-drainage-gallery__collection-arrow {

    transform:
        translateY(
            -3px
        );

}


.gf-drainage-gallery__collection-link--next:hover
.gf-drainage-gallery__collection-arrow {

    transform:
        translateY(
            3px
        );

}



/* ============================================================
   21. FOOTER CENTER
============================================================ */

.gf-drainage-gallery__footer-center {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

}


.gf-drainage-gallery__footer-line {

    display:
        block;

    width:
        38px;

    height:
        1px;

    background:
        rgba(
            3,
            71,
            43,
            0.15
        );

}


.gf-drainage-gallery__footer-center div {

    text-align:
        center;

}


.gf-drainage-gallery__footer-center span {

    display:
        block;

    margin-bottom:
        2px;

    font-size:
        0.46rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    color:
        var(--gf-gray);

}


.gf-drainage-gallery__footer-center strong {

    font-size:
        0.69rem;

    font-weight:
        800;

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

}



/* ============================================================
   22. OPTIONAL ENHANCEMENT

   IMPORTANT:
   Never controls content visibility.
============================================================ */

.gf-drainage-gallery__item.is-enhanced img {

    animation:
        gf-drainage-image-settle
        900ms
        var(--gf-ease-standard)
        both;

}


@keyframes gf-drainage-image-settle {

    from {

        filter:
            saturate(0.82)
            contrast(0.98);

    }

    to {

        filter:
            saturate(0.94)
            contrast(1.02);

    }

}



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

@media (min-width: 1200px) {

    .gf-drainage-gallery__collection {

        min-height:
            650px;

    }

}



/* ============================================================
   24. TABLET
   768px - 1199px
============================================================ */

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

    .gf-drainage-gallery__header {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(270px, 0.9fr);

        gap:
            48px;

    }


    .gf-drainage-gallery__feature {

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

    }


    .gf-drainage-gallery__feature-meta {

        display:
            none;

    }


    .gf-drainage-gallery__collection {

        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(280px, 0.55fr);

        min-height:
            560px;

    }


    .gf-drainage-gallery__footer {

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

    }

}



/* ============================================================
   25. MOBILE
   481px - 767px
============================================================ */

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

    .gf-service-gallery--drainage {

        padding:
            78px 0;

    }


    .gf-drainage-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            33px;

    }


    .gf-drainage-gallery__summary {

        max-width:
            550px;

        padding-left:
            20px;

    }


    .gf-drainage-gallery__summary p {

        font-size:
            0.86rem;

    }


    .gf-drainage-gallery__feature {

        grid-template-columns:
            1fr
            95px;

        min-height:
            auto;

    }


    .gf-drainage-gallery__feature-index,
    .gf-drainage-gallery__feature-meta {

        display:
            none;

    }


    .gf-drainage-gallery__feature-copy p {

        font-size:
            clamp(
                1.3rem,
                4vw,
                1.8rem
            );

    }


    .gf-drainage-gallery__collection {

        grid-template-columns:
            1fr;

        min-height:
            0;

    }


    .gf-drainage-gallery__item {

        min-height:
            510px;

    }


    .gf-drainage-gallery__panel {

        min-height:
            390px;

    }


    .gf-drainage-gallery__footer {

        grid-template-columns:
            1fr 1fr;

    }


    .gf-drainage-gallery__footer-center {

        display:
            none;

    }

}



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

@media (max-width: 480px) {

    .gf-service-gallery--drainage {

        padding:
            68px 0;

    }


    .gf-drainage-gallery__header {

        grid-template-columns:
            1fr;

        gap:
            29px;

        margin-bottom:
            38px;

    }


    .gf-drainage-gallery__eyebrow {

        font-size:
            0.55rem;

    }


    .gf-drainage-gallery__title {

        font-size:
            clamp(
                2.55rem,
                12vw,
                3.7rem
            );

    }


    .gf-drainage-gallery__summary {

        padding-left:
            17px;

    }


    .gf-drainage-gallery__summary p {

        max-width:
            100%;

        font-size:
            0.84rem;

        line-height:
            1.6;

    }


    .gf-drainage-gallery__viewer-hint {

        font-size:
            0.52rem;

    }


    .gf-drainage-gallery__feature {

        grid-template-columns:
            1fr;

        gap:
            20px;

        padding:
            27px 22px;

    }


    .gf-drainage-gallery__feature-index,
    .gf-drainage-gallery__feature-art,
    .gf-drainage-gallery__feature-meta {

        display:
            none;

    }


    .gf-drainage-gallery__feature-copy p {

        font-size:
            1.35rem;

    }


    .gf-drainage-gallery__collection {

        grid-template-columns:
            1fr;

        min-height:
            0;

    }


    .gf-drainage-gallery__item {

        min-height:
            430px;

    }


    .gf-drainage-gallery__item-ui {

        grid-template-columns:
            auto
            1fr
            auto;

        gap:
            13px;

        padding:
            19px;

    }


    .gf-drainage-gallery__photo-index {

        font-size:
            1.7rem;

    }


    .gf-drainage-gallery__panel {

        min-height:
            390px;

        padding:
            28px 22px;

    }


    .gf-drainage-gallery__panel-content h3 {

        font-size:
            clamp(
                2rem,
                10vw,
                2.8rem
            );

    }


    .gf-drainage-gallery__panel-content p {

        font-size:
            0.84rem;

    }


    .gf-drainage-gallery__footer {

        grid-template-columns:
            1fr;

        gap:
            22px;

        padding:
            28px 0;

    }


    .gf-drainage-gallery__footer-center {

        display:
            none;

    }


    .gf-drainage-gallery__collection-link--next {

        justify-self:
            stretch;

        justify-content:
            flex-end;

    }

}



/* ============================================================
   27. REDUCED MOTION
============================================================ */

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

    .gf-drainage-gallery__feature::after {

        width:
            100% !important;

        transition:
            none !important;

    }


    .gf-drainage-gallery__item img {

        animation:
            none !important;

        transition:
            none !important;

    }


    .gf-drainage-gallery__collection-arrow,
    .gf-drainage-gallery__expand {

        transition:
            none !important;

    }

}

/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   DRAINAGE GALLERY
   10 IMAGE COLLECTION UPDATE
============================================================ */


/* ============================================================
   01. GRID
============================================================ */

.gf-drainage-gallery__grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    grid-auto-rows:
        105px;

    gap:
        5px;

}



/* ============================================================
   02. ITEMS
============================================================ */

.gf-drainage-gallery__item {

    position: relative;

    display: block;

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

    overflow: hidden;

    padding: 0;

    cursor: pointer;

    border: 0;

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

    opacity: 1;

}



/* ============================================================
   03. EDITORIAL LAYOUT
============================================================ */

.gf-drainage-gallery__item--feature {

    grid-column:
        1 / span 7;

    grid-row:
        span 5;

}


.gf-drainage-gallery__item--vertical {

    grid-column:
        8 / span 5;

    grid-row:
        span 3;

}


.gf-drainage-gallery__item--small-a {

    grid-column:
        8 / span 2;

    grid-row:
        span 2;

}


.gf-drainage-gallery__item--small-b {

    grid-column:
        10 / span 3;

    grid-row:
        span 2;

}


.gf-drainage-gallery__item--wide-a {

    grid-column:
        1 / span 6;

    grid-row:
        span 3;

}


.gf-drainage-gallery__item--wide-b {

    grid-column:
        7 / span 6;

    grid-row:
        span 3;

}


.gf-drainage-gallery__item--lower-a {

    grid-column:
        1 / span 4;

    grid-row:
        span 3;

}


.gf-drainage-gallery__item--lower-b {

    grid-column:
        5 / span 4;

    grid-row:
        span 3;

}


.gf-drainage-gallery__item--lower-c {

    grid-column:
        9 / span 4;

    grid-row:
        span 3;

}


.gf-drainage-gallery__item--closing {

    grid-column:
        1 / -1;

    grid-row:
        span 4;

}



/* ============================================================
   04. IMAGE
============================================================ */

.gf-drainage-gallery__item img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

    filter:
        saturate(0.94)
        contrast(1.025);

    transition:
        transform
        1s
        var(--gf-ease-standard),

        filter
        500ms
        ease;

}


.gf-drainage-gallery__item:hover img {

    transform:
        scale(1.04);

    filter:
        saturate(1.04)
        contrast(1.04);

}



/* ============================================================
   05. SHADE
============================================================ */

.gf-drainage-gallery__shade {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 48%,
            rgba(
                3,
                29,
                19,
                0.78
            )
            100%
        );

}



/* ============================================================
   06. IMAGE UI
============================================================ */

.gf-drainage-gallery__item-ui {

    position: absolute;

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

    z-index: 2;

    display: flex;

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

    padding:
        20px 22px;

    color:
        var(--gf-white);

}


.gf-drainage-gallery__item-ui span:first-child {

    font-family:
        var(--gf-font-serif);

    font-size:
        1.3rem;

    font-style:
        italic;

    font-weight:
        500;

    color:
        var(--gf-copper);

}


.gf-drainage-gallery__item-ui span:last-child {

    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

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

    color:
        var(--gf-leaf);

    transition:
        background-color
        280ms
        ease,

        color
        280ms
        ease;

}


.gf-drainage-gallery__item:hover
.gf-drainage-gallery__item-ui
span:last-child {

    background:
        var(--gf-green);

    color:
        var(--gf-white);

}



/* ============================================================
   07. OPTIONAL ENHANCEMENT
============================================================ */

.gf-drainage-gallery__item.is-enhanced img {

    animation:
        gf-drainage-image-settle
        850ms
        var(--gf-ease-standard)
        both;

}


@keyframes gf-drainage-image-settle {

    from {

        filter:
            saturate(0.82)
            contrast(0.98);

    }

    to {

        filter:
            saturate(0.94)
            contrast(1.025);

    }

}



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

@media (min-width: 1200px) {

    .gf-drainage-gallery__grid {

        grid-auto-rows:
            105px;

    }

}



/* ============================================================
   09. TABLET
   768px - 1199px
============================================================ */

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

    .gf-drainage-gallery__grid {

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

        grid-auto-rows:
            100px;

    }


    .gf-drainage-gallery__item--feature {

        grid-column:
            1 / span 5;

        grid-row:
            span 5;

    }


    .gf-drainage-gallery__item--vertical {

        grid-column:
            6 / span 3;

        grid-row:
            span 3;

    }


    .gf-drainage-gallery__item--small-a {

        grid-column:
            6 / span 1;

        grid-row:
            span 2;

    }


    .gf-drainage-gallery__item--small-b {

        grid-column:
            7 / span 2;

        grid-row:
            span 2;

    }


    .gf-drainage-gallery__item--wide-a,
    .gf-drainage-gallery__item--lower-a {

        grid-column:
            1 / span 4;

        grid-row:
            span 3;

    }


    .gf-drainage-gallery__item--wide-b,
    .gf-drainage-gallery__item--lower-b {

        grid-column:
            5 / span 4;

        grid-row:
            span 3;

    }


    .gf-drainage-gallery__item--lower-c {

        grid-column:
            1 / span 4;

        grid-row:
            span 3;

    }


    .gf-drainage-gallery__item--closing {

        grid-column:
            5 / span 4;

        grid-row:
            span 3;

    }

}



/* ============================================================
   10. MOBILE
   481px - 767px
============================================================ */

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

    .gf-drainage-gallery__grid {

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

        grid-auto-rows:
            250px;

    }


    .gf-drainage-gallery__item--feature {

        grid-column:
            1 / -1;

        grid-row:
            span 2;

    }


    .gf-drainage-gallery__item--vertical,
    .gf-drainage-gallery__item--small-a,
    .gf-drainage-gallery__item--small-b,
    .gf-drainage-gallery__item--wide-a,
    .gf-drainage-gallery__item--wide-b,
    .gf-drainage-gallery__item--lower-a,
    .gf-drainage-gallery__item--lower-b,
    .gf-drainage-gallery__item--lower-c,
    .gf-drainage-gallery__item--closing {

        grid-column:
            auto;

        grid-row:
            auto;

    }


    .gf-drainage-gallery__item--wide-a,
    .gf-drainage-gallery__item--wide-b,
    .gf-drainage-gallery__item--closing {

        grid-column:
            span 2;

    }

}



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

@media (max-width: 480px) {

    .gf-drainage-gallery__grid {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            300px;

    }


    .gf-drainage-gallery__item--feature,
    .gf-drainage-gallery__item--vertical,
    .gf-drainage-gallery__item--small-a,
    .gf-drainage-gallery__item--small-b,
    .gf-drainage-gallery__item--wide-a,
    .gf-drainage-gallery__item--wide-b,
    .gf-drainage-gallery__item--lower-a,
    .gf-drainage-gallery__item--lower-b,
    .gf-drainage-gallery__item--lower-c,
    .gf-drainage-gallery__item--closing {

        grid-column:
            1;

        grid-row:
            auto;

    }


    .gf-drainage-gallery__item--feature {

        min-height:
            410px;

    }


    .gf-drainage-gallery__item-ui {

        padding:
            18px;

    }

}



/* ============================================================
   12. REDUCED MOTION
============================================================ */

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

    .gf-drainage-gallery__item img {

        animation:
            none !important;

        transition:
            none !important;

        transform:
            none !important;

    }

}



































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY NAVIGATION
   7 SERVICE UPDATE
============================================================ */


/* ============================================================
   01. NAVIGATION CAN SHRINK CORRECTLY
============================================================ */

.gf-gallery-nav__navigation {

    min-width:
        0;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scrollbar-width:
        none;

    overscroll-behavior-inline:
        contain;

}


.gf-gallery-nav__navigation::-webkit-scrollbar {

    display:
        none;

}



/* ============================================================
   02. TRACK
============================================================ */

.gf-gallery-nav__track {

    width:
        max-content;

    min-width:
        100%;

}



/* ============================================================
   03. LINKS
============================================================ */

.gf-gallery-nav__link {

    flex:
        0 0 auto;

}



/* ============================================================
   04. NEW LONGER SERVICES
============================================================ */

.gf-gallery-nav__link[
    data-gf-gallery-target="gallery-downspout-drainage-solutions"
]
.gf-gallery-nav__name,
.gf-gallery-nav__link[
    data-gf-gallery-target="gallery-gutter-cleaning-maintenance"
]
.gf-gallery-nav__name {

    white-space:
        nowrap;

}



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

@media (min-width: 1200px) {

    .gf-gallery-nav__inner {

        column-gap:
            clamp(
                20px,
                2.2vw,
                40px
            );

    }


    .gf-gallery-nav__link {

        padding-left:
            clamp(
                13px,
                1.2vw,
                20px
            );

        padding-right:
            clamp(
                13px,
                1.2vw,
                20px
            );

    }

}



/* ============================================================
   06. TABLET
   768px - 1199px
============================================================ */

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

    .gf-gallery-nav__navigation {

        scroll-behavior:
            smooth;

    }

}



/* ============================================================
   07. MOBILE
   481px - 767px
============================================================ */

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

    .gf-gallery-nav__navigation {

        scroll-behavior:
            smooth;

    }

}



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

@media (max-width: 480px) {

    .gf-gallery-nav__navigation {

        scroll-behavior:
            smooth;

    }

}



/* ============================================================
   09. REDUCED MOTION
============================================================ */

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

    .gf-gallery-nav__navigation {

        scroll-behavior:
            auto;

    }

}








































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GALLERY PAGE
   12. GUTTER CLEANING & MAINTENANCE
============================================================ */


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

.gf-service-gallery--gutter {

    position: relative;

    overflow: hidden;

    padding:
        clamp(86px, 9vw, 145px)
        0;

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

    color:
        var(--gf-white);

}


.gf-service-gallery--gutter::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 38%;
    height: 3px;

    background:
        var(--gf-green);

}


.gf-service-gallery--gutter::after {

    content: "";

    position: absolute;

    top: 0;
    left: 38%;

    width: 13%;
    height: 3px;

    background:
        var(--gf-copper);

}



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

.gf-gutter-gallery__background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


.gf-gutter-gallery__grain {

    position: absolute;

    inset: 0;

    opacity: 0.15;

    background-image:
        var(--gf-forest-texture);

}


.gf-gutter-gallery__watermark {

    position: absolute;

    top: 9%;
    right: -0.04em;

    font-size:
        clamp(
            8rem,
            17vw,
            18rem
        );

    font-weight: 800;

    line-height: 0.8;

    letter-spacing:
        -0.08em;

    writing-mode:
        vertical-rl;

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

    user-select: none;

}



/* ============================================================
   03. STRUCTURAL LINES
============================================================ */

.gf-gutter-gallery__line {

    position: absolute;

    display: block;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                126,
                217,
                87,
                0.12
            ),
            transparent
        );

}


.gf-gutter-gallery__line--1 {

    top: 22%;
    right: -5%;

    width: 48%;

    transform:
        rotate(-5deg);

}


.gf-gutter-gallery__line--2 {

    top: 48%;
    left: -10%;

    width: 42%;

    transform:
        rotate(7deg);

}


.gf-gutter-gallery__line--3 {

    bottom: 17%;
    right: 7%;

    width: 31%;

}



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

.gf-gutter-gallery__header {

    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: end;

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

    margin-bottom:
        clamp(
            52px,
            6vw,
            88px
        );

}



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

.gf-gutter-gallery__eyebrow {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-gutter-gallery__eyebrow-line {

    width: 40px;
    height: 1px;

    background:
        currentColor;

}



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

.gf-gutter-gallery__title {

    max-width: 920px;

    margin: 0;

    font-size:
        clamp(
            3rem,
            5.1vw,
            6.1rem
        );

    font-weight: 600;

    line-height: 0.92;

    letter-spacing:
        -0.065em;

    color:
        var(--gf-white);

}


.gf-gutter-gallery__title span {

    display: block;

    margin-top: 0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    letter-spacing:
        -0.045em;

    color:
        var(--gf-leaf);

}



/* ============================================================
   07. SUMMARY
============================================================ */

.gf-gutter-gallery__summary {

    padding-left: 29px;

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

}


.gf-gutter-gallery__count {

    display: flex;

    align-items: flex-end;

    gap: 14px;

    margin-bottom: 22px;

}


.gf-gutter-gallery__count strong {

    font-family:
        var(--gf-font-serif);

    font-size: 3.25rem;

    font-style: italic;
    font-weight: 500;

    line-height: 0.8;

    color:
        var(--gf-copper);

}


.gf-gutter-gallery__count div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-gutter-gallery__count span {

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--gf-white);

}


.gf-gutter-gallery__count small {

    font-size: 0.57rem;

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

}


.gf-gutter-gallery__summary p {

    max-width: 430px;

    margin: 0;

    font-size:
        clamp(
            0.92rem,
            0.96vw,
            1.02rem
        );

    line-height: 1.68;

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

}



/* ============================================================
   08. VIEWER HINT
============================================================ */

.gf-gutter-gallery__viewer-hint {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

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

}


.gf-gutter-gallery__viewer-icon {

    display: grid;

    width: 26px;
    height: 26px;

    place-items: center;

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

    color:
        var(--gf-leaf);

}



/* ============================================================
   09. FEATURE BAND
============================================================ */

.gf-gutter-gallery__feature {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(170px, 0.6fr)
        minmax(320px, 1.4fr)
        140px
        minmax(180px, 0.65fr);

    align-items: center;

    gap:
        clamp(
            26px,
            4vw,
            60px
        );

    min-height: 210px;

    margin-bottom: 5px;

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

    overflow: hidden;

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

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

}


.gf-gutter-gallery__feature::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width:
        var(
            --gf-gutter-rule,
            0%
        );

    height: 3px;

    background:
        var(--gf-copper);

    transition:
        width
        1.1s
        var(--gf-ease-standard);

}


.gf-gutter-gallery__feature.is-enhanced {

    --gf-gutter-rule:
        100%;

}



/* ============================================================
   10. FEATURE INDEX
============================================================ */

.gf-gutter-gallery__feature-index {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.gf-gutter-gallery__feature-index span {

    font-size: 0.52rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

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

}


.gf-gutter-gallery__feature-index strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.45rem;

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   11. FEATURE COPY
============================================================ */

.gf-gutter-gallery__feature-copy > span {

    display: block;

    margin-bottom: 7px;

    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-gutter-gallery__feature-copy p {

    max-width: 600px;

    margin: 0;

    font-size:
        clamp(
            1.4rem,
            2vw,
            2.5rem
        );

    font-weight: 600;

    line-height: 1.03;

    letter-spacing:
        -0.04em;

    color:
        var(--gf-white);

}


.gf-gutter-gallery__feature-copy em {

    display: block;

    margin-top: 0.06em;

    font-family:
        var(--gf-font-serif);

    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   12. FEATURE ART
============================================================ */

.gf-gutter-gallery__feature-art {

    color:
        rgba(
            167,
            226,
            127,
            0.56
        );

}


.gf-gutter-gallery__feature-art svg {

    display: block;

    width: 100%;

}



/* ============================================================
   13. FEATURE META
============================================================ */

.gf-gutter-gallery__feature-meta {

    display: grid;

    gap: 17px;

}


.gf-gutter-gallery__feature-meta div {

    padding-top: 12px;

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

}


.gf-gutter-gallery__feature-meta span {

    display: block;

    margin-bottom: 3px;

    font-size: 0.48rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-gutter-gallery__feature-meta strong {

    font-size: 0.72rem;

    color:
        var(--gf-white);

}



/* ============================================================
   14. PHOTO GRID
============================================================ */

.gf-gutter-gallery__grid {

    position: relative;

    z-index: 2;

    display: grid;

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

    grid-auto-rows: 110px;

    gap: 5px;

}



/* ============================================================
   15. ITEMS
============================================================ */

.gf-gutter-gallery__item {

    position: relative;

    display: block;

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

    overflow: hidden;

    padding: 0;

    cursor: pointer;

    border: 0;

    background:
        var(--gf-charcoal);

    opacity: 1;

}


.gf-gutter-gallery__item--feature {

    grid-column:
        1 / span 7;

    grid-row:
        span 5;

}


.gf-gutter-gallery__item--vertical {

    grid-column:
        8 / span 5;

    grid-row:
        span 3;

}


.gf-gutter-gallery__item--square-a {

    grid-column:
        8 / span 2;

    grid-row:
        span 2;

}


.gf-gutter-gallery__item--square-b {

    grid-column:
        10 / span 3;

    grid-row:
        span 2;

}


.gf-gutter-gallery__item--wide {

    grid-column:
        1 / span 6;

    grid-row:
        span 3;

}


.gf-gutter-gallery__item--closing {

    grid-column:
        7 / span 6;

    grid-row:
        span 3;

}



/* ============================================================
   16. IMAGES
============================================================ */

.gf-gutter-gallery__item img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

    filter:
        saturate(0.93)
        contrast(1.025);

    transition:
        transform
        1s
        var(--gf-ease-standard),

        filter
        500ms
        ease;

}


.gf-gutter-gallery__item:hover img {

    transform:
        scale(1.04);

    filter:
        saturate(1.03)
        contrast(1.04);

}



/* ============================================================
   17. SHADE
============================================================ */

.gf-gutter-gallery__shade {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgba(
                3,
                29,
                19,
                0.73
            )
            100%
        );

}



/* ============================================================
   18. IMAGE UI
============================================================ */

.gf-gutter-gallery__item-ui {

    position: absolute;

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

    z-index: 2;

    display: flex;

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

    padding:
        20px 22px;

    font-size: 0.61rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    color:
        var(--gf-white);

}


.gf-gutter-gallery__item-ui span:first-child {

    font-family:
        var(--gf-font-serif);

    font-size: 1.25rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-gutter-gallery__item-ui span:last-child {

    display: grid;

    width: 35px;
    height: 35px;

    place-items: center;

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

    color:
        var(--gf-leaf);

    transition:
        color
        280ms ease,

        background-color
        280ms ease;

}


.gf-gutter-gallery__item:hover
.gf-gutter-gallery__item-ui span:last-child {

    background:
        var(--gf-green);

    color:
        var(--gf-white);

}



/* ============================================================
   19. COMPLETION PANEL
============================================================ */

.gf-gutter-gallery__completion {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(170px, 0.55fr)
        minmax(320px, 1.3fr)
        auto;

    align-items: center;

    gap:
        clamp(
            35px,
            6vw,
            90px
        );

    margin-top: 5px;

    padding:
        36px
        clamp(
            28px,
            4vw,
            56px
        );

    background:
        var(--gf-paper);

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

}



/* ============================================================
   20. COMPLETION INDEX
============================================================ */

.gf-gutter-gallery__completion-index {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.gf-gutter-gallery__completion-index span {

    font-size: 0.5rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-gutter-gallery__completion-index strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.35rem;

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-copper);

}



/* ============================================================
   21. COMPLETION COPY
============================================================ */

.gf-gutter-gallery__completion-copy > span {

    display: block;

    margin-bottom: 5px;

    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    color:
        var(--gf-green);

}


.gf-gutter-gallery__completion-copy p {

    margin: 0;

    font-size:
        clamp(
            1.3rem,
            1.8vw,
            2rem
        );

    font-weight: 600;

    line-height: 1.05;

    letter-spacing:
        -0.035em;

}


.gf-gutter-gallery__completion-copy em {

    display: block;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-green);

}



/* ============================================================
   22. COMPLETION CTA
============================================================ */

.gf-gutter-gallery__completion-cta {

    display: inline-flex;

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

    gap: 18px;

    min-height: 54px;

    padding:
        0 22px;

    white-space: nowrap;

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

    color:
        var(--gf-white);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    transition:
        background-color
        280ms
        ease;

}


.gf-gutter-gallery__completion-cta:hover {

    background:
        var(--gf-green);

}



/* ============================================================
   23. FOOTER
============================================================ */

.gf-gutter-gallery__footer {

    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

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

    padding:
        31px 0 0;

}



/* ============================================================
   24. PREVIOUS
============================================================ */

.gf-gutter-gallery__previous {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    color:
        var(--gf-white);

}


.gf-gutter-gallery__previous div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-gutter-gallery__previous div > span {

    font-size: 0.48rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-gutter-gallery__previous strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.05rem;

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}


.gf-gutter-gallery__previous > span {

    color:
        var(--gf-green);

}



/* ============================================================
   25. FOOTER CENTER
============================================================ */

.gf-gutter-gallery__footer-center {

    text-align: center;

}


.gf-gutter-gallery__footer-center span {

    display: block;

    margin-bottom: 2px;

    font-size: 0.47rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-gutter-gallery__footer-center strong {

    font-size: 0.7rem;

    color:
        var(--gf-white);

}



/* ============================================================
   26. BACK TOP
============================================================ */

.gf-gutter-gallery__back-top {

    justify-self: end;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(--gf-white);

}


.gf-gutter-gallery__back-top span:last-child {

    color:
        var(--gf-green);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-gutter-gallery__back-top:hover
span:last-child {

    transform:
        translateY(-4px);

}



/* ============================================================
   27. OPTIONAL ENHANCEMENT
============================================================ */

.gf-gutter-gallery__item.is-enhanced img {

    animation:
        gf-gutter-image-settle
        850ms
        var(--gf-ease-standard)
        both;

}


@keyframes gf-gutter-image-settle {

    from {

        filter:
            saturate(0.82)
            contrast(0.98);

    }

    to {

        filter:
            saturate(0.93)
            contrast(1.025);

    }

}



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

@media (min-width: 1200px) {

    .gf-gutter-gallery__grid {

        grid-auto-rows:
            110px;

    }

}



/* ============================================================
   29. TABLET
   768px - 1199px
============================================================ */

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

    .gf-gutter-gallery__header {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(270px, 0.9fr);

        gap: 48px;

    }


    .gf-gutter-gallery__feature {

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

    }


    .gf-gutter-gallery__feature-meta {

        display: none;

    }


    .gf-gutter-gallery__grid {

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

        grid-auto-rows: 100px;

    }


    .gf-gutter-gallery__item--feature {

        grid-column:
            1 / span 5;

        grid-row:
            span 5;

    }


    .gf-gutter-gallery__item--vertical {

        grid-column:
            6 / span 3;

        grid-row:
            span 3;

    }


    .gf-gutter-gallery__item--square-a {

        grid-column:
            6 / span 1;

        grid-row:
            span 2;

    }


    .gf-gutter-gallery__item--square-b {

        grid-column:
            7 / span 2;

        grid-row:
            span 2;

    }


    .gf-gutter-gallery__item--wide {

        grid-column:
            1 / span 4;

        grid-row:
            span 3;

    }


    .gf-gutter-gallery__item--closing {

        grid-column:
            5 / span 4;

        grid-row:
            span 3;

    }


    .gf-gutter-gallery__completion {

        grid-template-columns:
            1fr
            1.4fr;

    }


    .gf-gutter-gallery__completion-cta {

        grid-column:
            1 / -1;

        justify-self: start;

    }

}



/* ============================================================
   30. MOBILE
   481px - 767px
============================================================ */

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

    .gf-service-gallery--gutter {

        padding:
            78px 0;

    }


    .gf-gutter-gallery__header {

        grid-template-columns:
            1fr;

        gap: 33px;

    }


    .gf-gutter-gallery__summary {

        max-width: 550px;

        padding-left: 20px;

    }


    .gf-gutter-gallery__summary p {

        font-size: 0.86rem;

    }


    .gf-gutter-gallery__feature {

        grid-template-columns:
            1fr 95px;

    }


    .gf-gutter-gallery__feature-index,
    .gf-gutter-gallery__feature-meta {

        display: none;

    }


    .gf-gutter-gallery__grid {

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

        grid-auto-rows: 250px;

    }


    .gf-gutter-gallery__item--feature {

        grid-column:
            1 / -1;

        grid-row:
            span 2;

    }


    .gf-gutter-gallery__item--vertical,
    .gf-gutter-gallery__item--square-a,
    .gf-gutter-gallery__item--square-b,
    .gf-gutter-gallery__item--wide,
    .gf-gutter-gallery__item--closing {

        grid-column: auto;
        grid-row: auto;

    }


    .gf-gutter-gallery__item--wide,
    .gf-gutter-gallery__item--closing {

        grid-column:
            span 2;

    }


    .gf-gutter-gallery__completion {

        grid-template-columns:
            1fr;

        gap: 25px;

    }


    .gf-gutter-gallery__completion-cta {

        justify-self: start;

    }


    .gf-gutter-gallery__footer {

        grid-template-columns:
            1fr 1fr;

    }


    .gf-gutter-gallery__footer-center {

        display: none;

    }

}



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

@media (max-width: 480px) {

    .gf-service-gallery--gutter {

        padding:
            68px 0;

    }


    .gf-gutter-gallery__header {

        grid-template-columns:
            1fr;

        gap: 29px;

        margin-bottom: 38px;

    }


    .gf-gutter-gallery__eyebrow {

        font-size: 0.55rem;

    }


    .gf-gutter-gallery__title {

        font-size:
            clamp(
                2.55rem,
                12vw,
                3.7rem
            );

    }


    .gf-gutter-gallery__summary {

        padding-left: 17px;

    }


    .gf-gutter-gallery__summary p {

        font-size: 0.84rem;

        line-height: 1.6;

    }


    .gf-gutter-gallery__viewer-hint {

        font-size: 0.52rem;

    }


    .gf-gutter-gallery__feature {

        grid-template-columns:
            1fr;

        padding:
            27px 22px;

    }


    .gf-gutter-gallery__feature-index,
    .gf-gutter-gallery__feature-art,
    .gf-gutter-gallery__feature-meta {

        display: none;

    }


    .gf-gutter-gallery__feature-copy p {

        font-size: 1.35rem;

    }


    .gf-gutter-gallery__grid {

        grid-template-columns:
            1fr;

        grid-auto-rows: 300px;

    }


    .gf-gutter-gallery__item--feature,
    .gf-gutter-gallery__item--vertical,
    .gf-gutter-gallery__item--square-a,
    .gf-gutter-gallery__item--square-b,
    .gf-gutter-gallery__item--wide,
    .gf-gutter-gallery__item--closing {

        grid-column:
            1;

        grid-row:
            auto;

    }


    .gf-gutter-gallery__item--feature {

        min-height: 410px;

    }


    .gf-gutter-gallery__completion {

        grid-template-columns:
            1fr;

        gap: 24px;

        padding:
            29px 22px;

    }


    .gf-gutter-gallery__completion-copy p {

        font-size: 1.28rem;

    }


    .gf-gutter-gallery__completion-cta {

        width: 100%;

    }


    .gf-gutter-gallery__footer {

        grid-template-columns:
            1fr;

        gap: 24px;

    }


    .gf-gutter-gallery__footer-center {

        display: none;

    }


    .gf-gutter-gallery__back-top {

        justify-self: start;

    }

}



/* ============================================================
   32. REDUCED MOTION
============================================================ */

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

    .gf-gutter-gallery__feature::after {

        width:
            100% !important;

        transition:
            none !important;

    }


    .gf-gutter-gallery__item img {

        animation:
            none !important;

        transition:
            none !important;

    }


    .gf-gutter-gallery__back-top span:last-child {

        transition:
            none !important;

    }

}