/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   01. GALLERY HERO — FULLSCREEN / LAYOUT RESTORED

   Correcciones:
   • Hero = 100svh real
   • Sin franja inferior
   • Sin margin negativo
   • Recupera el ancho .ul-container
   • Contenido alineado con el Header
   • Composición izquierda / derecha restaurada
   • No cambia ninguna ruta de imagen
   • Sin contadores
========================================================== */


/* ==========================================================
   01. ROOT
========================================================== */

.ul-gallery-hero {
    --ul-gallery-pointer-x: 0px;
    --ul-gallery-pointer-y: 0px;
    --ul-gallery-scroll-y: 0px;

    position: relative;

    width: 100%;

    height: 100vh;
    height: 100svh;

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

    max-height: 100vh;
    max-height: 100svh;

    margin: 0;

    padding: 0;

    overflow: hidden;

    color:
        var(--ul-white);

    background:
        #173C28;

    isolation: isolate;
}


/* ==========================================================
   02. MEDIA
========================================================== */

.ul-gallery-hero__media {
    position: absolute;

    z-index: -8;

    inset: -3%;

    overflow: hidden;

    pointer-events: none;

    transform:

        translate3d(
            var(--ul-gallery-pointer-x),
            calc(
                var(--ul-gallery-pointer-y) +
                var(--ul-gallery-scroll-y)
            ),
            0
        );

    will-change: transform;
}


/* ==========================================================
   03. IMAGE

   IMPORTANTE:
   No se declara ninguna ruta en CSS.
   Se utiliza exclusivamente el src que ya existe en HTML.
========================================================== */

.ul-gallery-hero__image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: 61% center;

    transform:
        scale(1.055);

    filter:
        saturate(1.02)
        contrast(1.035)
        brightness(.94);

    user-select: none;

    pointer-events: none;

    backface-visibility: hidden;
}


/* ==========================================================
   04. MAIN DARK GREEN SHADE
========================================================== */

.ul-gallery-hero__shade {
    position: absolute;

    z-index: -7;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(11, 45, 27, .99) 0%,

            rgba(14, 53, 31, .985) 17%,

            rgba(17, 60, 35, .95) 31%,

            rgba(21, 68, 40, .84) 44%,

            rgba(23, 72, 42, .62) 56%,

            rgba(21, 67, 39, .35) 67%,

            rgba(16, 52, 31, .13) 80%,

            rgba(10, 34, 20, .04) 100%
        ),

        linear-gradient(
            180deg,

            rgba(7, 28, 16, .52) 0%,

            rgba(7, 28, 16, .08) 27%,

            rgba(7, 28, 16, .08) 58%,

            rgba(5, 24, 14, .72) 100%
        );
}


/* ==========================================================
   05. VIGNETTE
========================================================== */

.ul-gallery-hero__vignette {
    position: absolute;

    z-index: -6;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse at 73% 42%,

            transparent 0%,

            transparent 34%,

            rgba(8, 28, 17, .09) 63%,

            rgba(5, 22, 13, .36) 100%
        );
}


/* ==========================================================
   06. ORGANIC TEXTURE
========================================================== */

.ul-gallery-hero__texture {
    position: absolute;

    z-index: -5;

    top: -240px;
    left: -250px;

    width: 820px;
    height: 820px;

    pointer-events: none;

    opacity: .42;

    transform:
        rotate(8deg);

    background:

        repeating-radial-gradient(
            ellipse at 40% 42%,

            transparent 0,

            transparent 34px,

            rgba(167, 213, 118, .05) 35px,

            rgba(167, 213, 118, .05) 36px,

            transparent 37px,

            transparent 69px
        ),

        repeating-radial-gradient(
            ellipse at 67% 64%,

            transparent 0,

            transparent 48px,

            rgba(241, 215, 55, .025) 49px,

            rgba(241, 215, 55, .025) 50px,

            transparent 51px,

            transparent 92px
        );

    -webkit-mask-image:

        linear-gradient(
            90deg,

            #000,

            rgba(0, 0, 0, .68) 70%,

            transparent
        );

    mask-image:

        linear-gradient(
            90deg,

            #000,

            rgba(0, 0, 0, .68) 70%,

            transparent
        );
}


/* ==========================================================
   07. AMBIENT
========================================================== */

.ul-gallery-hero__ambient {
    position: absolute;

    z-index: -4;

    top: 13%;
    right: 14%;

    width:
        min(
            500px,
            34vw
        );

    aspect-ratio: 1;

    border-radius: 50%;

    pointer-events: none;

    opacity: .54;

    background:

        radial-gradient(
            circle,

            rgba(241, 215, 55, .16),

            rgba(233, 145, 41, .05) 35%,

            rgba(189, 70, 63, .02) 51%,

            transparent 72%
        );

    animation:
        ulGalleryHeroAmbient
        8s
        ease-in-out
        infinite
        alternate;
}


@keyframes ulGalleryHeroAmbient {

    from {
        opacity: .40;

        transform:
            translate3d(-8px, 4px, 0)
            scale(.97);
    }

    to {
        opacity: .61;

        transform:
            translate3d(10px, -7px, 0)
            scale(1.04);
    }

}


/* ==========================================================
   08. MAIN LAYOUT

   ESTA ES LA CORRECCIÓN PRINCIPAL.

   No usamos width:100%.
   Recuperamos exactamente el sistema del container global.
========================================================== */

.ul-gallery-hero__layout {
    position: relative;

    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(0, 1.16fr)
        minmax(300px, .44fr);

    align-items: center;

    gap:
        clamp(
            58px,
            6vw,
            100px
        );

    width:
        var(--ul-container);

    max-width: none;

    height: 100%;

    min-height: 100%;

    margin-inline: auto;

    padding-top:

        calc(
            var(--ul-header-height) +
            clamp(
                26px,
                3.3vh,
                46px
            )
        );

    padding-bottom:
        clamp(
            78px,
            9vh,
            100px
        );
}


/* ==========================================================
   09. MAIN CONTENT
========================================================== */

.ul-gallery-hero__content {
    width: 100%;

    max-width: 780px;

    min-width: 0;
}


/* ==========================================================
   10. EYEBROW
========================================================== */

.ul-gallery-hero__eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    margin-bottom:
        clamp(
            17px,
            2.1vh,
            24px
        );

    color:
        rgba(255, 255, 255, .88);

    font-size:
        clamp(
            .82rem,
            .80vw,
            .90rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: .10em;

    text-transform: uppercase;
}


/* ==========================================================
   11. EYEBROW DOT
========================================================== */

.ul-gallery-hero__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-red);

    box-shadow:

        0 0 0 5px
        rgba(189, 60, 53, .17);
}


/* ==========================================================
   12. EYEBROW LINE
========================================================== */

.ul-gallery-hero__eyebrow-line {
    width: 52px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red)
        );
}


/* ==========================================================
   13. TITLE

   Reduced slightly so composition returns to the previous
   proportion instead of dominating the entire left side.
========================================================== */

.ul-gallery-hero__title {
    max-width: 760px;

    margin:
        0 0
        clamp(
            20px,
            2.4vh,
            27px
        );

    color:
        var(--ul-white);

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

    font-size:
        clamp(
            3.85rem,
            5.45vw,
            6.35rem
        );

    font-weight: 500;

    line-height: .90;

    letter-spacing:
        -.052em;
}


/* ==========================================================
   14. TITLE LINE
========================================================== */

.ul-gallery-hero__title-line {
    display: block;

    padding-bottom: .055em;
}


/* ==========================================================
   15. TITLE ACCENT
========================================================== */

.ul-gallery-hero__title-line--accent {
    color:
        var(--ul-green-400);
}


/* ==========================================================
   16. DESCRIPTION
========================================================== */

.ul-gallery-hero__description {
    max-width: 610px;

    margin: 0;

    color:
        rgba(255, 255, 255, .81);

    font-size:
        clamp(
            1.06rem,
            1.05vw,
            1.17rem
        );

    line-height: 1.67;

    letter-spacing:
        -.01em;
}


/* ==========================================================
   17. ACTIONS
========================================================== */

.ul-gallery-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

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


/* ==========================================================
   18. EXPLORE BUTTON
========================================================== */

.ul-gallery-hero__explore {
    display: inline-flex;

    align-items: center;

    gap: 17px;

    min-height: 56px;

    padding:
        6px 7px
        6px 19px;

    border:
        1px solid
        rgba(255, 255, 255, .25);

    border-radius: 15px;

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

    background:
        var(--ul-logo-yellow);

    box-shadow:

        0 18px 40px
        rgba(7, 29, 16, .22);

    font-size: .90rem;

    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: .025em;

    transition:

        color .35s ease,

        background-color .35s ease,

        transform .45s
        var(--ul-ease-expo),

        box-shadow .4s ease;
}


/* ==========================================================
   19. EXPLORE ICON
========================================================== */

.ul-gallery-hero__explore-icon {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:
        var(--ul-logo-blue);

    transition:
        transform .4s
        var(--ul-ease-expo);
}


.ul-gallery-hero__explore-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   20. EXPLORE HOVER
========================================================== */

.ul-gallery-hero__explore:hover {
    color:
        var(--ul-white);

    background:
        var(--ul-logo-red);

    transform:
        translateY(-3px);

    box-shadow:

        0 22px 46px
        rgba(7, 29, 16, .25),

        0 10px 25px
        rgba(189, 60, 53, .17);
}


.ul-gallery-hero__explore:hover
.ul-gallery-hero__explore-icon {
    transform:
        translateY(3px);
}


/* ==========================================================
   21. SECONDARY CTA
========================================================== */

.ul-gallery-hero__estimate {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 56px;

    padding:
        0 19px;

    border:
        1px solid
        rgba(255, 255, 255, .23);

    border-radius: 15px;

    color:
        rgba(255, 255, 255, .94);

    background:
        rgba(255, 255, 255, .08);

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

    backdrop-filter:
        blur(12px);

    font-size: .90rem;

    font-weight: 600;

    transition:

        color .3s ease,

        background-color .3s ease,

        border-color .3s ease,

        transform .4s
        var(--ul-ease-out);
}


.ul-gallery-hero__estimate:hover {
    color:
        var(--ul-white);

    border-color:
        rgba(167, 213, 118, .40);

    background:
        rgba(126, 187, 80, .18);

    transform:
        translateY(-3px);
}


/* ==========================================================
   22. LOCATION
========================================================== */

.ul-gallery-hero__local {
    display: flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-top:
        clamp(
            18px,
            2.25vh,
            24px
        );

    color:
        rgba(255, 255, 255, .72);

    font-size:
        clamp(
            .90rem,
            .86vw,
            .97rem
        );

    font-weight: 500;

    line-height: 1.35;
}


/* ==========================================================
   23. LOCATION MARK
========================================================== */

.ul-gallery-hero__local-mark {
    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(112, 186, 202, .28);

    border-radius: 11px;

    color:
        var(--ul-logo-cyan);

    background:
        rgba(112, 186, 202, .10);
}


.ul-gallery-hero__local-mark svg {
    width: 17px;
    height: 17px;
}


/* ==========================================================
   24. SERVICES INDEX

   Restores a more deliberate right-side column.
========================================================== */

.ul-gallery-hero__services {
    position: relative;

    align-self: center;

    justify-self: end;

    width: min(100%, 335px);

    padding:
        5px 0;

    border-left:
        1px solid
        rgba(255, 255, 255, .18);
}


/* ==========================================================
   25. SERVICES HEADER
========================================================== */

.ul-gallery-hero__services-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin:
        0 0 16px;

    padding:
        0 0 15px 21px;

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

    color:
        rgba(255, 255, 255, .69);

    font-size: .80rem;

    font-weight: 600;

    letter-spacing: .07em;

    text-transform: uppercase;
}


/* ==========================================================
   26. SERVICES HEADER MARK
========================================================== */

.ul-gallery-hero__services-header-mark {
    width: 40px;
    height: 3px;

    border-radius: 999px;

    background:
        var(--ul-gradient-brand);
}


/* ==========================================================
   27. SERVICES LIST
========================================================== */

.ul-gallery-hero__services-list {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


/* ==========================================================
   28. SERVICE
========================================================== */

.ul-gallery-hero-service {
    --ul-gallery-service-color:
        var(--ul-green-400);

    display: grid;

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

    align-items: center;

    gap: 11px;

    min-height: 47px;

    padding:
        7px 7px
        7px 21px;

    border-radius:
        0 11px 11px 0;

    color:
        rgba(255, 255, 255, .80);

    font-size:
        clamp(
            .90rem,
            .84vw,
            .97rem
        );

    font-weight: 500;

    line-height: 1.25;

    transition:

        color .3s ease,

        background-color .3s ease,

        transform .4s
        var(--ul-ease-expo);
}


/* ==========================================================
   29. SERVICE MARK
========================================================== */

.ul-gallery-hero-service__mark {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--ul-gallery-service-color);

    box-shadow:

        0 0 0 4px
        rgba(255, 255, 255, .04);
}


/* ==========================================================
   30. SERVICE ARROW
========================================================== */

.ul-gallery-hero-service svg {
    width: 16px;
    height: 16px;

    justify-self: end;

    opacity: .52;

    transition:

        opacity .3s ease,

        transform .4s
        var(--ul-ease-expo);
}


/* ==========================================================
   31. SERVICE HOVER
========================================================== */

.ul-gallery-hero-service:hover {
    color:
        var(--ul-white);

    background:
        rgba(255, 255, 255, .075);

    transform:
        translateX(5px);
}


.ul-gallery-hero-service:hover svg {
    opacity: 1;

    transform:
        translateX(3px);
}


/* ==========================================================
   32. SERVICE COLORS
========================================================== */

.ul-gallery-hero-service--green {
    --ul-gallery-service-color:
        var(--ul-green-400);
}


.ul-gallery-hero-service--cyan {
    --ul-gallery-service-color:
        var(--ul-logo-cyan);
}


.ul-gallery-hero-service--yellow {
    --ul-gallery-service-color:
        var(--ul-logo-yellow);
}


.ul-gallery-hero-service--orange {
    --ul-gallery-service-color:
        var(--ul-logo-orange);
}


.ul-gallery-hero-service--blue {
    --ul-gallery-service-color:
        var(--ul-logo-blue);
}


.ul-gallery-hero-service--red {
    --ul-gallery-service-color:
        var(--ul-logo-red);
}


/* ==========================================================
   33. BOTTOM BAR

   Also uses the same container width as Header/Main content.
========================================================== */

.ul-gallery-hero__bottom {
    position: absolute;

    z-index: 6;

    left: 50%;

    bottom:
        clamp(
            19px,
            2.4vh,
            25px
        );

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    width:
        var(--ul-container);

    margin: 0;

    transform:
        translateX(-50%);
}


/* ==========================================================
   34. IDENTITY
========================================================== */

.ul-gallery-hero__identity {
    display: flex;

    align-items: center;

    gap: 12px;

    color:
        rgba(255, 255, 255, .59);

    font-size: .82rem;

    font-weight: 500;
}


.ul-gallery-hero__identity i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--ul-logo-yellow);
}


/* ==========================================================
   35. SCROLL LABEL
========================================================== */

.ul-gallery-hero__scroll {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color:
        rgba(255, 255, 255, .67);

    font-size: .80rem;

    font-weight: 600;

    letter-spacing: .055em;

    text-transform: uppercase;
}


/* ==========================================================
   36. SCROLL TRACK
========================================================== */

.ul-gallery-hero__scroll-track {
    position: relative;

    width: 57px;
    height: 2px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .17);
}


.ul-gallery-hero__scroll-track i {
    position: absolute;

    inset:
        0 auto 0 0;

    width: 40%;

    background:
        var(--ul-logo-yellow);

    animation:
        ulGalleryHeroScroll
        2.1s
        var(--ul-ease-in-out)
        infinite;
}


@keyframes ulGalleryHeroScroll {

    from {
        transform:
            translateX(-120%);
    }

    to {
        transform:
            translateX(360%);
    }

}


/* ==========================================================
   37. BOTTOM COLOR LINE
========================================================== */

.ul-gallery-hero__spectrum {
    position: absolute;

    z-index: 8;

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

    height: 4px;

    background:
        var(--ul-gradient-brand);
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-hero {
        height: 100vh;
        height: 100svh;

        min-height: 100svh;

        max-height: 100svh;
    }


    .ul-gallery-hero__layout {
        width:
            var(--ul-container);

        grid-template-columns:
            minmax(0, 1.16fr)
            minmax(300px, .44fr);
    }


    .ul-gallery-hero__image {
        object-position:
            62% center;
    }


    .ul-gallery-hero__content {
        max-width: 780px;
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-hero {
        height: 100svh;

        min-height: 100svh;

        max-height: 100svh;
    }


    .ul-gallery-hero__layout {
        width:
            min(
                calc(100% - 64px),
                1400px
            );

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

        gap: 34px;

        padding-top:

            calc(
                var(--ul-header-height) +
                20px
            );

        padding-bottom: 74px;
    }


    .ul-gallery-hero__bottom {
        width:
            min(
                calc(100% - 64px),
                1400px
            );
    }


    .ul-gallery-hero__image {
        object-position:
            61% center;
    }


    .ul-gallery-hero__shade {
        background:

            linear-gradient(
                90deg,

                rgba(12, 46, 28, .99) 0%,

                rgba(17, 58, 34, .95) 31%,

                rgba(21, 66, 39, .78) 50%,

                rgba(18, 58, 34, .34) 76%,

                rgba(12, 39, 23, .14) 100%
            ),

            linear-gradient(
                180deg,

                rgba(7, 27, 16, .48),

                transparent 34%,

                rgba(6, 24, 14, .68)
            );
    }


    .ul-gallery-hero__title {
        font-size:
            clamp(
                3.35rem,
                6.2vw,
                4.9rem
            );
    }


    .ul-gallery-hero__description {
        font-size:
            clamp(
                1.02rem,
                1.4vw,
                1.11rem
            );
    }


    .ul-gallery-hero__services {
        width: 100%;
    }


    .ul-gallery-hero__services-header {
        padding-left: 16px;
    }


    .ul-gallery-hero-service {
        padding-left: 16px;

        font-size: .88rem;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-hero {
        height: 100svh;

        min-height: 100svh;

        max-height: 100svh;
    }


    .ul-gallery-hero__media {
        inset: -2%;
    }


    .ul-gallery-hero__image {
        object-position:
            66% center;

        transform:
            scale(1.04);
    }


    .ul-gallery-hero__shade {
        background:

            linear-gradient(
                90deg,

                rgba(12, 43, 26, .97) 0%,

                rgba(15, 49, 29, .90) 44%,

                rgba(13, 43, 25, .57) 100%
            ),

            linear-gradient(
                0deg,

                rgba(6, 27, 15, .90) 0%,

                rgba(7, 28, 16, .39) 47%,

                rgba(7, 28, 16, .42) 100%
            );
    }


    .ul-gallery-hero__layout {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: center;

        gap: 21px;

        width:
            calc(100% - 40px);

        margin-inline: auto;

        padding-top:

            calc(
                var(--ul-header-height) +
                16px
            );

        padding-bottom: 78px;
    }


    .ul-gallery-hero__content {
        width: 100%;

        max-width: 600px;
    }


    .ul-gallery-hero__eyebrow {
        margin-bottom: 15px;

        font-size: .76rem;
    }


    .ul-gallery-hero__eyebrow-line {
        width: 42px;
    }


    .ul-gallery-hero__title {
        margin-bottom: 17px;

        font-size:
            clamp(
                2.9rem,
                8.8vw,
                3.9rem
            );

        line-height: .91;
    }


    .ul-gallery-hero__description {
        max-width: 530px;

        font-size: 1rem;

        line-height: 1.62;
    }


    .ul-gallery-hero__actions {
        margin-top: 21px;
    }


    .ul-gallery-hero__explore,
    .ul-gallery-hero__estimate {
        min-height: 52px;
    }


    .ul-gallery-hero__explore {
        font-size: .80rem;
    }


    .ul-gallery-hero__estimate {
        font-size: .85rem;
    }


    .ul-gallery-hero__local {
        margin-top: 17px;

        font-size: .88rem;
    }


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

    .ul-gallery-hero__services {
        width: 100%;

        max-width: none;

        padding: 0;

        border-left: 0;
    }


    .ul-gallery-hero__services-header {
        display: none;
    }


    .ul-gallery-hero__services-list {
        display: flex;

        flex-direction: row;

        gap: 7px;

        overflow-x: auto;

        padding:
            2px 0 7px;

        scrollbar-width: none;

        overscroll-behavior-inline:
            contain;
    }


    .ul-gallery-hero__services-list::-webkit-scrollbar {
        display: none;
    }


    .ul-gallery-hero-service {
        display: inline-flex;

        align-items: center;

        gap: 8px;

        min-width: max-content;

        min-height: 39px;

        padding:
            0 13px;

        border:
            1px solid
            rgba(255, 255, 255, .16);

        border-radius: 999px;

        background:
            rgba(15, 49, 29, .27);

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

        backdrop-filter:
            blur(9px);

        font-size: .79rem;
    }


    .ul-gallery-hero-service:hover {
        transform:
            translateY(-2px);
    }


    .ul-gallery-hero-service svg {
        display: none;
    }


    .ul-gallery-hero-service__mark {
        width: 6px;
        height: 6px;
    }


    .ul-gallery-hero__bottom {
        width:
            calc(100% - 40px);

        bottom: 17px;

        justify-content:
            flex-end;
    }


    .ul-gallery-hero__identity {
        display: none;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-hero {
        height: 100svh;

        min-height: 100svh;

        max-height: 100svh;
    }


    .ul-gallery-hero__media {
        inset: -2%;
    }


    .ul-gallery-hero__image {
        object-position:
            67% center;

        transform:
            scale(1.035);
    }


    .ul-gallery-hero__shade {
        background:

            linear-gradient(
                90deg,

                rgba(11, 41, 24, .97) 0%,

                rgba(14, 47, 28, .87) 54%,

                rgba(11, 37, 22, .51) 100%
            ),

            linear-gradient(
                0deg,

                rgba(5, 24, 13, .93) 0%,

                rgba(6, 25, 14, .41) 52%,

                rgba(6, 25, 14, .45) 100%
            );
    }


    .ul-gallery-hero__texture {
        opacity: .30;
    }


    .ul-gallery-hero__ambient {
        width: 330px;

        right: -80px;

        top: 15%;
    }


    .ul-gallery-hero__layout {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: center;

        gap: 17px;

        width:
            calc(100% - 30px);

        margin-inline: auto;

        padding-top:

            calc(
                var(--ul-header-height) +
                12px
            );

        padding-bottom: 68px;
    }


    .ul-gallery-hero__content {
        width: 100%;
    }


    .ul-gallery-hero__eyebrow {
        gap: 9px;

        margin-bottom: 12px;

        font-size: .70rem;

        letter-spacing: .08em;
    }


    .ul-gallery-hero__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-hero__eyebrow-line {
        width: 34px;
    }


    .ul-gallery-hero__title {
        margin-bottom: 15px;

        font-size:
            clamp(
                2.45rem,
                10.4vw,
                3.25rem
            );

        line-height: .92;
    }


    .ul-gallery-hero__description {
        max-width: 100%;

        font-size: .95rem;

        line-height: 1.58;
    }


    .ul-gallery-hero__actions {
        gap: 8px;

        margin-top: 18px;
    }


    .ul-gallery-hero__explore {
        min-height: 49px;

        padding:
            5px 6px
            5px 14px;

        font-size: .75rem;
    }


    .ul-gallery-hero__explore-icon {
        width: 37px;
        height: 37px;

        border-radius: 9px;
    }


    .ul-gallery-hero__estimate {
        min-height: 49px;

        padding:
            0 14px;

        font-size: .79rem;
    }


    .ul-gallery-hero__local {
        gap: 8px;

        margin-top: 14px;

        font-size: .82rem;
    }


    .ul-gallery-hero__local-mark {
        width: 32px;
        height: 32px;

        border-radius: 10px;
    }


    .ul-gallery-hero__local-mark svg {
        width: 16px;
        height: 16px;
    }


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

    .ul-gallery-hero__services {
        width: 100%;

        max-width: none;

        padding: 0;

        border-left: 0;
    }


    .ul-gallery-hero__services-header {
        display: none;
    }


    .ul-gallery-hero__services-list {
        display: flex;

        flex-direction: row;

        gap: 6px;

        overflow-x: auto;

        padding:
            2px 0 6px;

        scrollbar-width: none;
    }


    .ul-gallery-hero__services-list::-webkit-scrollbar {
        display: none;
    }


    .ul-gallery-hero-service {
        display: inline-flex;

        align-items: center;

        gap: 7px;

        min-width: max-content;

        min-height: 37px;

        padding:
            0 11px;

        border:
            1px solid
            rgba(255, 255, 255, .14);

        border-radius: 999px;

        background:
            rgba(15, 49, 29, .29);

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

        backdrop-filter:
            blur(8px);

        font-size: .74rem;
    }


    .ul-gallery-hero-service svg {
        display: none;
    }


    .ul-gallery-hero-service__mark {
        width: 6px;
        height: 6px;
    }


    .ul-gallery-hero__bottom {
        width:
            calc(100% - 30px);

        bottom: 14px;

        justify-content:
            flex-end;
    }


    .ul-gallery-hero__identity {
        display: none;
    }


    .ul-gallery-hero__scroll {
        font-size: .70rem;
    }


    .ul-gallery-hero__scroll-track {
        width: 41px;
    }


    .ul-gallery-hero__spectrum {
        height: 3px;
    }

}


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

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

    .ul-gallery-hero__ambient,
    .ul-gallery-hero__scroll-track i {
        animation: none !important;
    }


    .ul-gallery-hero__media {
        transform: none !important;
    }


    .ul-gallery-hero-service,
    .ul-gallery-hero-service svg,
    .ul-gallery-hero__explore,
    .ul-gallery-hero__explore-icon,
    .ul-gallery-hero__estimate {
        transition: none !important;
    }

}













































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   02. SERVICE NAVIGATION — 2026 REDESIGN

   Goals:
   • Bright transition after dark Hero
   • No counters
   • Exact existing anchors preserved
   • Larger readable secondary text
   • Brand-color category system
   • Not sticky
========================================================== */


/* ==========================================================
   01. ROOT
========================================================== */

.ul-gallery-nav {
    position: relative;

    padding:
        clamp(72px, 6.5vw, 104px)
        0
        clamp(76px, 7vw, 112px);

    color:
        var(--ul-text);

    background:

        linear-gradient(
            180deg,

            #FBFCF8 0%,

            #F7FAF4 54%,

            #F2F6EE 100%
        );

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

    overflow: hidden;

    isolation: isolate;

    scroll-margin-top:
        calc(
            var(--ul-header-height) + 18px
        );
}


/* ==========================================================
   02. TOP BRAND LINE
========================================================== */

.ul-gallery-nav::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width:
        var(--ul-container);

    height: 1px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            transparent 0%,

            rgba(126, 187, 80, .48) 16%,

            rgba(241, 215, 55, .36) 35%,

            rgba(233, 145, 41, .32) 52%,

            rgba(189, 60, 53, .29) 68%,

            rgba(49, 90, 152, .26) 83%,

            transparent 100%
        );
}


/* ==========================================================
   03. BOTTOM DEPTH
========================================================== */

.ul-gallery-nav::after {
    content: "";

    position: absolute;

    z-index: -4;

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

    height: 38%;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            transparent,

            rgba(126, 187, 80, .035)
        );
}


/* ==========================================================
   04. AMBIENT
========================================================== */

.ul-gallery-nav__ambient {
    position: absolute;

    z-index: -4;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(4px);
}


/* ==========================================================
   05. GREEN AMBIENT
========================================================== */

.ul-gallery-nav__ambient--green {
    top: -280px;
    left: -300px;

    width: 660px;
    height: 660px;

    background:

        radial-gradient(
            circle,

            rgba(167, 213, 118, .16),

            rgba(126, 187, 80, .045) 46%,

            transparent 71%
        );
}


/* ==========================================================
   06. BLUE AMBIENT
========================================================== */

.ul-gallery-nav__ambient--blue {
    right: -300px;
    bottom: -330px;

    width: 680px;
    height: 680px;

    background:

        radial-gradient(
            circle,

            rgba(112, 186, 202, .11),

            rgba(49, 90, 152, .027) 46%,

            transparent 71%
        );
}


/* ==========================================================
   07. TOPOGRAPHY
========================================================== */

.ul-gallery-nav__topography {
    position: absolute;

    z-index: -3;

    top: -230px;
    right: -170px;

    width: 720px;
    height: 720px;

    pointer-events: none;

    opacity: .53;

    transform:
        rotate(-8deg);

    background:

        repeating-radial-gradient(
            ellipse at 44% 43%,

            transparent 0,

            transparent 33px,

            rgba(57, 101, 63, .038) 34px,

            rgba(57, 101, 63, .038) 35px,

            transparent 36px,

            transparent 66px
        ),

        repeating-radial-gradient(
            ellipse at 68% 70%,

            transparent 0,

            transparent 48px,

            rgba(233, 145, 41, .027) 49px,

            rgba(233, 145, 41, .027) 50px,

            transparent 51px,

            transparent 92px
        );
}


/* ==========================================================
   08. HEADER
========================================================== */

.ul-gallery-nav__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, .57fr);

    align-items: end;

    gap:
        clamp(
            48px,
            6vw,
            90px
        );

    margin-bottom:
        clamp(
            38px,
            4.5vw,
            60px
        );
}


/* ==========================================================
   09. HEADING
========================================================== */

.ul-gallery-nav__heading {
    min-width: 0;
}


/* ==========================================================
   10. EYEBROW
========================================================== */

.ul-gallery-nav__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 17px;

    color:
        var(--ul-logo-red);

    font-size:
        clamp(
            .80rem,
            .78vw,
            .88rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: .10em;

    text-transform: uppercase;
}


/* ==========================================================
   11. EYEBROW DOT
========================================================== */

.ul-gallery-nav__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-red);

    box-shadow:

        0 0 0 5px
        rgba(189, 60, 53, .10);
}


/* ==========================================================
   12. EYEBROW LINE
========================================================== */

.ul-gallery-nav__eyebrow-line {
    width: 53px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

            var(--ul-logo-yellow)
        );
}


/* ==========================================================
   13. TITLE
========================================================== */

.ul-gallery-nav__title {
    max-width: 720px;

    margin: 0;

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

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

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

    font-weight: 500;

    line-height: .96;

    letter-spacing:
        -.044em;
}


/* ==========================================================
   14. TITLE ACCENT
========================================================== */

.ul-gallery-nav__title span {
    display: block;

    color:
        var(--ul-green-600);
}


/* ==========================================================
   15. HEADER SIDE
========================================================== */

.ul-gallery-nav__header-side {
    display: flex;

    flex-direction: column;

    gap: 20px;

    max-width: 480px;

    justify-self: end;
}


/* ==========================================================
   16. DESCRIPTION
========================================================== */

.ul-gallery-nav__description {
    margin: 0;

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

    font-size:
        clamp(
            1.03rem,
            1.03vw,
            1.13rem
        );

    line-height: 1.66;
}


/* ==========================================================
   17. CURRENT CATEGORY
========================================================== */

.ul-gallery-nav__current {
    display: flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    min-width: 245px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(80, 119, 82, .13);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .72);

    box-shadow:
        var(--ul-shadow-xs);

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

    backdrop-filter:
        blur(10px);
}


/* ==========================================================
   18. CURRENT DOT
========================================================== */

.ul-gallery-nav__current-dot {
    width: 10px;
    height: 10px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-green-600);

    box-shadow:

        0 0 0 5px
        rgba(126, 187, 80, .10);

    transition:
        background-color .35s ease,
        box-shadow .35s ease;
}


/* ==========================================================
   19. CURRENT COPY
========================================================== */

.ul-gallery-nav__current > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-nav__current small {
    color:
        var(--ul-text-muted);

    font-size: .72rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-nav__current strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1rem;

    font-weight: 500;

    line-height: 1.15;
}


/* ==========================================================
   20. LINKS GRID
========================================================== */

.ul-gallery-nav__links {
    display: grid;

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

    gap: 13px;
}


/* ==========================================================
   21. LINK BASE
========================================================== */

.ul-gallery-nav__link {
    --ul-gallery-nav-accent:
        var(--ul-green-600);

    --ul-gallery-nav-soft:
        var(--ul-surface-green);

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 15px;

    min-height: 118px;

    padding:
        19px;

    overflow: hidden;

    border:
        1px solid
        rgba(75, 113, 77, .13);

    border-radius:
        var(--ul-radius-lg);

    color:
        var(--ul-text);

    background:

        linear-gradient(
            145deg,

            rgba(255, 255, 255, .94),

            rgba(255, 255, 255, .72)
        );

    box-shadow:
        var(--ul-shadow-xs);

    isolation: isolate;

    transition:

        transform .45s
        var(--ul-ease-expo),

        border-color .35s ease,

        box-shadow .4s
        var(--ul-ease-out),

        background-color .35s ease;
}


/* ==========================================================
   22. CARD COLOR WASH
========================================================== */

.ul-gallery-nav__link::before {
    content: "";

    position: absolute;

    z-index: -1;

    top: -110px;
    right: -90px;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    pointer-events: none;

    opacity: .50;

    background:

        radial-gradient(
            circle,

            color-mix(
                in srgb,
                var(--ul-gallery-nav-accent) 17%,
                transparent
            ),

            transparent 68%
        );

    transition:

        opacity .4s ease,

        transform .55s
        var(--ul-ease-expo);
}


/* ==========================================================
   23. BOTTOM ACCENT
========================================================== */

.ul-gallery-nav__link::after {
    content: "";

    position: absolute;

    left: 19px;
    right: 19px;
    bottom: 0;

    height: 3px;

    border-radius:
        999px 999px 0 0;

    opacity: .50;

    transform:
        scaleX(.32);

    transform-origin:
        left center;

    background:
        var(--ul-gallery-nav-accent);

    transition:

        opacity .35s ease,

        transform .5s
        var(--ul-ease-expo);
}


/* ==========================================================
   24. LINK HOVER
========================================================== */

.ul-gallery-nav__link:hover {
    transform:
        translateY(-6px);

    border-color:

        color-mix(
            in srgb,
            var(--ul-gallery-nav-accent) 27%,
            transparent
        );

    background:
        var(--ul-white);

    box-shadow:
        var(--ul-shadow-md);
}


.ul-gallery-nav__link:hover::before {
    opacity: .88;

    transform:
        scale(1.10);
}


.ul-gallery-nav__link:hover::after {
    opacity: 1;

    transform:
        scaleX(1);
}


/* ==========================================================
   25. ACTIVE CARD
========================================================== */

.ul-gallery-nav__link.is-active {
    border-color:

        color-mix(
            in srgb,
            var(--ul-gallery-nav-accent) 34%,
            transparent
        );

    background:
        var(--ul-white);

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


.ul-gallery-nav__link.is-active::before {
    opacity: .90;
}


.ul-gallery-nav__link.is-active::after {
    opacity: 1;

    transform:
        scaleX(1);
}


/* ==========================================================
   26. ICON
========================================================== */

.ul-gallery-nav__icon {
    display: grid;

    place-items: center;

    width: 52px;
    height: 52px;

    flex: 0 0 auto;

    border:
        1px solid

        color-mix(
            in srgb,
            var(--ul-gallery-nav-accent) 20%,
            transparent
        );

    border-radius: 16px;

    color:
        var(--ul-gallery-nav-accent);

    background:
        var(--ul-gallery-nav-soft);

    transition:

        color .35s ease,

        background-color .35s ease,

        transform .45s
        var(--ul-ease-expo),

        box-shadow .35s ease;
}


.ul-gallery-nav__icon svg {
    width: 25px;
    height: 25px;
}


/* ==========================================================
   27. ICON HOVER / ACTIVE
========================================================== */

.ul-gallery-nav__link:hover
.ul-gallery-nav__icon,
.ul-gallery-nav__link.is-active
.ul-gallery-nav__icon {
    color:
        var(--ul-white);

    background:
        var(--ul-gallery-nav-accent);

    transform:
        rotate(-4deg)
        scale(1.04);

    box-shadow:

        0 11px 24px

        color-mix(
            in srgb,
            var(--ul-gallery-nav-accent) 20%,
            transparent
        );
}


/* ==========================================================
   28. LINK COPY
========================================================== */

.ul-gallery-nav__link-copy {
    display: flex;

    flex-direction: column;

    gap: 7px;

    min-width: 0;
}


/* ==========================================================
   29. LINK TITLE
========================================================== */

.ul-gallery-nav__link-copy strong {
    color:
        var(--ul-forest-950);

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

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

    font-weight: 500;

    line-height: 1.08;

    letter-spacing:
        -.025em;
}


/* ==========================================================
   30. LINK DESCRIPTION
========================================================== */

.ul-gallery-nav__link-copy small {
    color:
        var(--ul-text-muted);

    font-size:
        clamp(
            .84rem,
            .82vw,
            .92rem
        );

    font-weight: 500;

    line-height: 1.43;
}


/* ==========================================================
   31. ARROW
========================================================== */

.ul-gallery-nav__arrow {
    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    justify-self: end;

    border:
        1px solid
        rgba(75, 113, 77, .12);

    border-radius: 12px;

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

    background:
        rgba(255, 255, 255, .64);

    transition:

        color .35s ease,

        background-color .35s ease,

        border-color .35s ease,

        transform .45s
        var(--ul-ease-expo);
}


.ul-gallery-nav__arrow svg {
    width: 17px;
    height: 17px;
}


/* ==========================================================
   32. ARROW ACTIVE
========================================================== */

.ul-gallery-nav__link:hover
.ul-gallery-nav__arrow,
.ul-gallery-nav__link.is-active
.ul-gallery-nav__arrow {
    color:
        var(--ul-white);

    border-color:
        transparent;

    background:
        var(--ul-gallery-nav-accent);

    transform:
        translateX(3px);
}


/* ==========================================================
   33. CATEGORY COLORS
========================================================== */

.ul-gallery-nav__link--green {
    --ul-gallery-nav-accent:
        var(--ul-green-600);

    --ul-gallery-nav-soft:
        var(--ul-surface-green);
}


.ul-gallery-nav__link--cyan {
    --ul-gallery-nav-accent:
        var(--ul-logo-cyan);

    --ul-gallery-nav-soft:
        var(--ul-surface-cyan);
}


.ul-gallery-nav__link--yellow {
    --ul-gallery-nav-accent:
        var(--ul-yellow-600);

    --ul-gallery-nav-soft:
        var(--ul-surface-yellow);
}


.ul-gallery-nav__link--orange {
    --ul-gallery-nav-accent:
        var(--ul-logo-orange);

    --ul-gallery-nav-soft:
        var(--ul-surface-orange);
}


.ul-gallery-nav__link--blue {
    --ul-gallery-nav-accent:
        var(--ul-logo-blue);

    --ul-gallery-nav-soft:
        var(--ul-surface-blue);
}


.ul-gallery-nav__link--red {
    --ul-gallery-nav-accent:
        var(--ul-logo-red);

    --ul-gallery-nav-soft:
        var(--ul-surface-red);
}


/* ==========================================================
   34. CURRENT CATEGORY COLOR STATES
========================================================== */

.ul-gallery-nav[data-ul-active-color="green"]
.ul-gallery-nav__current-dot {
    background:
        var(--ul-green-600);

    box-shadow:

        0 0 0 5px
        rgba(126, 187, 80, .10);
}


.ul-gallery-nav[data-ul-active-color="cyan"]
.ul-gallery-nav__current-dot {
    background:
        var(--ul-logo-cyan);

    box-shadow:

        0 0 0 5px
        rgba(112, 186, 202, .11);
}


.ul-gallery-nav[data-ul-active-color="yellow"]
.ul-gallery-nav__current-dot {
    background:
        var(--ul-yellow-600);

    box-shadow:

        0 0 0 5px
        rgba(212, 173, 40, .11);
}


.ul-gallery-nav[data-ul-active-color="orange"]
.ul-gallery-nav__current-dot {
    background:
        var(--ul-logo-orange);

    box-shadow:

        0 0 0 5px
        rgba(233, 145, 41, .11);
}


.ul-gallery-nav[data-ul-active-color="blue"]
.ul-gallery-nav__current-dot {
    background:
        var(--ul-logo-blue);

    box-shadow:

        0 0 0 5px
        rgba(49, 90, 152, .10);
}


.ul-gallery-nav[data-ul-active-color="red"]
.ul-gallery-nav__current-dot {
    background:
        var(--ul-logo-red);

    box-shadow:

        0 0 0 5px
        rgba(189, 60, 53, .10);
}


/* ==========================================================
   35. FOOTER
========================================================== */

.ul-gallery-nav__footer {
    display: grid;

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

    align-items: center;

    gap: 18px;

    margin-top:
        clamp(
            32px,
            4vw,
            48px
        );
}


/* ==========================================================
   36. FOOTER LINE
========================================================== */

.ul-gallery-nav__footer-line {
    position: relative;

    height: 1px;

    overflow: hidden;

    background:
        var(--ul-border);
}


.ul-gallery-nav__footer-line span {
    position: absolute;

    inset: 0 auto 0 0;

    width: 40%;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-600),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red),

            var(--ul-logo-blue)
        );
}


/* ==========================================================
   37. FOOTER COPY
========================================================== */

.ul-gallery-nav__footer p {
    margin: 0;

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

    font-size: .84rem;

    line-height: 1.45;
}


/* ==========================================================
   38. FOOTER MARK
========================================================== */

.ul-gallery-nav__footer-mark {
    color:
        var(--ul-forest-700);

    font-size: .79rem;

    font-weight: 600;

    white-space: nowrap;
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-nav__links {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .ul-gallery-nav__link {
        min-height: 118px;
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-nav {
        padding:
            68px 0
            84px;
    }


    .ul-gallery-nav__header {
        grid-template-columns: 1fr;

        gap: 24px;

        margin-bottom: 38px;
    }


    .ul-gallery-nav__header-side {
        display: grid;

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

        align-items: center;

        gap: 28px;

        width: 100%;

        max-width: none;

        justify-self: stretch;
    }


    .ul-gallery-nav__description {
        max-width: 570px;
    }


    .ul-gallery-nav__links {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .ul-gallery-nav__link {
        min-height: 112px;
    }


    .ul-gallery-nav__footer {
        grid-template-columns:
            minmax(60px, 1fr)
            auto;
    }


    .ul-gallery-nav__footer-mark {
        display: none;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-nav {
        padding:
            58px 0
            70px;
    }


    .ul-gallery-nav::before {
        width:
            calc(100% - 40px);
    }


    .ul-gallery-nav__header {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-bottom: 32px;
    }


    .ul-gallery-nav__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-nav__title {
        font-size:
            clamp(
                2.55rem,
                7.8vw,
                3.4rem
            );
    }


    .ul-gallery-nav__header-side {
        max-width: 100%;
    }


    .ul-gallery-nav__description {
        font-size: 1rem;

        line-height: 1.61;
    }


    .ul-gallery-nav__current {
        min-width: 0;

        width: fit-content;
    }


    .ul-gallery-nav__links {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }


    .ul-gallery-nav__link {
        grid-template-columns:
            46px
            minmax(0, 1fr);

        gap: 13px;

        min-height: 116px;

        padding: 16px;
    }


    .ul-gallery-nav__icon {
        width: 46px;
        height: 46px;

        border-radius: 14px;
    }


    .ul-gallery-nav__icon svg {
        width: 22px;
        height: 22px;
    }


    .ul-gallery-nav__link-copy strong {
        font-size: 1.16rem;
    }


    .ul-gallery-nav__link-copy small {
        font-size: .82rem;
    }


    .ul-gallery-nav__arrow {
        display: none;
    }


    .ul-gallery-nav__footer {
        grid-template-columns:
            1fr;

        gap: 11px;

        margin-top: 31px;
    }


    .ul-gallery-nav__footer-line {
        width: 100%;
    }


    .ul-gallery-nav__footer-mark {
        display: none;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-nav {
        padding:
            50px 0
            60px;
    }


    .ul-gallery-nav::before {
        width:
            calc(100% - 30px);
    }


    .ul-gallery-nav__topography {
        right: -420px;

        opacity: .40;
    }


    .ul-gallery-nav__header {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 27px;
    }


    .ul-gallery-nav__eyebrow {
        gap: 9px;

        margin-bottom: 14px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-nav__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-nav__title {
        font-size:
            clamp(
                2.25rem,
                10vw,
                2.85rem
            );

        line-height: .97;
    }


    .ul-gallery-nav__header-side {
        gap: 15px;

        width: 100%;

        max-width: none;
    }


    .ul-gallery-nav__description {
        font-size: .95rem;

        line-height: 1.58;
    }


    .ul-gallery-nav__current {
        width: 100%;

        min-width: 0;

        padding:
            11px 13px;
    }


    .ul-gallery-nav__current small {
        font-size: .68rem;
    }


    .ul-gallery-nav__current strong {
        font-size: .94rem;
    }


    .ul-gallery-nav__links {
        grid-template-columns: 1fr;

        gap: 9px;
    }


    .ul-gallery-nav__link {
        grid-template-columns:
            47px
            minmax(0, 1fr)
            37px;

        gap: 12px;

        min-height: 91px;

        padding:
            14px 13px;

        border-radius: 17px;
    }


    .ul-gallery-nav__link::after {
        left: 14px;
        right: 14px;
    }


    .ul-gallery-nav__icon {
        width: 45px;
        height: 45px;

        border-radius: 13px;
    }


    .ul-gallery-nav__icon svg {
        width: 21px;
        height: 21px;
    }


    .ul-gallery-nav__link-copy {
        gap: 5px;
    }


    .ul-gallery-nav__link-copy strong {
        font-size: 1.15rem;
    }


    .ul-gallery-nav__link-copy small {
        font-size: .81rem;

        line-height: 1.38;
    }


    .ul-gallery-nav__arrow {
        width: 35px;
        height: 35px;

        border-radius: 10px;
    }


    .ul-gallery-nav__footer {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 27px;
    }


    .ul-gallery-nav__footer p {
        font-size: .80rem;
    }


    .ul-gallery-nav__footer-mark {
        display: none;
    }

}


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

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

    .ul-gallery-nav__link,
    .ul-gallery-nav__link::before,
    .ul-gallery-nav__link::after,
    .ul-gallery-nav__icon,
    .ul-gallery-nav__arrow,
    .ul-gallery-nav__current-dot {
        animation: none !important;

        transition: none !important;
    }

}













































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   03. GALLERY INTRO — 2026 REDESIGN

   Direction:
   • Editorial pause before project galleries
   • Warm light background
   • Large subtle WORK typography
   • No counters
   • All original structural elements preserved
   • Content visible without JS
   • Improved secondary typography
========================================================== */


/* ==========================================================
   01. ROOT
========================================================== */

.ul-gallery-intro {
    position: relative;

    padding:
        clamp(105px, 9vw, 155px)
        0
        clamp(105px, 9vw, 150px);

    overflow: hidden;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            145deg,

            #FCFDF9 0%,

            #F8FAF4 42%,

            #F2F7ED 100%
        );

    isolation: isolate;

    scroll-margin-top:
        calc(
            var(--ul-header-height) + 20px
        );
}


/* ==========================================================
   02. TOP BORDER
========================================================== */

.ul-gallery-intro::before {
    content: "";

    position: absolute;

    z-index: 3;

    top: 0;
    left: 50%;

    width:
        var(--ul-container);

    height: 1px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(126, 187, 80, .28) 20%,

            rgba(112, 186, 202, .21) 45%,

            rgba(241, 215, 55, .24) 65%,

            rgba(189, 60, 53, .17) 82%,

            transparent
        );
}


/* ==========================================================
   03. BACKGROUND DEPTH
========================================================== */

.ul-gallery-intro::after {
    content: "";

    position: absolute;

    z-index: -5;

    top: 0;
    left: 0;

    width: 43%;
    height: 100%;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(126, 187, 80, .055),

            transparent
        );
}


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

.ul-gallery-intro__topography {
    position: absolute;

    z-index: -4;

    top: -240px;
    left: -310px;

    width: 850px;
    height: 850px;

    pointer-events: none;

    opacity: .54;

    transform:
        rotate(8deg);

    background:

        repeating-radial-gradient(
            ellipse at 44% 44%,

            transparent 0,

            transparent 39px,

            rgba(71, 112, 75, .038) 40px,

            rgba(71, 112, 75, .038) 41px,

            transparent 42px,

            transparent 75px
        ),

        repeating-radial-gradient(
            ellipse at 68% 66%,

            transparent 0,

            transparent 54px,

            rgba(126, 187, 80, .026) 55px,

            rgba(126, 187, 80, .026) 56px,

            transparent 57px,

            transparent 100px
        );

    -webkit-mask-image:

        linear-gradient(
            90deg,

            #000 0%,

            rgba(0, 0, 0, .68) 65%,

            transparent 100%
        );

    mask-image:

        linear-gradient(
            90deg,

            #000 0%,

            rgba(0, 0, 0, .68) 65%,

            transparent 100%
        );
}


/* ==========================================================
   05. AMBIENT
========================================================== */

.ul-gallery-intro__ambient {
    position: absolute;

    z-index: -4;

    top: -240px;
    right: -280px;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    pointer-events: none;

    background:

        radial-gradient(
            circle,

            rgba(167, 213, 118, .16),

            rgba(126, 187, 80, .045) 45%,

            transparent 71%
        );
}


/* ==========================================================
   06. BLUE AMBIENT
========================================================== */

.ul-gallery-intro__ambient--blue {
    top: auto;
    right: auto;

    left: 37%;
    bottom: -410px;

    width: 690px;
    height: 690px;

    opacity: .78;

    background:

        radial-gradient(
            circle,

            rgba(112, 186, 202, .10),

            rgba(49, 90, 152, .025) 45%,

            transparent 71%
        );
}


/* ==========================================================
   07. LARGE WORD — WORK
========================================================== */

.ul-gallery-intro__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(
            42px,
            5vw,
            75px
        );

    right:
        clamp(
            -20px,
            1vw,
            18px
        );

    pointer-events: none;

    user-select: none;

    color:
        rgba(52, 101, 64, .035);

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

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

    font-weight: 500;

    line-height: .75;

    letter-spacing:
        -.075em;

    white-space: nowrap;
}


/* ==========================================================
   08. MAIN LAYOUT
========================================================== */

.ul-gallery-intro__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(380px, .72fr);

    align-items: start;

    gap:
        clamp(
            70px,
            8vw,
            135px
        );
}


/* ==========================================================
   09. HEADING
========================================================== */

.ul-gallery-intro__heading {
    min-width: 0;
}


/* ==========================================================
   10. EYEBROW
========================================================== */

.ul-gallery-intro__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom:
        clamp(
            21px,
            2.5vw,
            30px
        );

    color:
        var(--ul-logo-red);

    font-size:
        clamp(
            .80rem,
            .79vw,
            .88rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


/* ==========================================================
   11. EYEBROW DOT
========================================================== */

.ul-gallery-intro__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-red);

    box-shadow:

        0 0 0 5px
        rgba(189, 60, 53, .10);
}


/* ==========================================================
   12. EYEBROW LINE
========================================================== */

.ul-gallery-intro__eyebrow-line {
    width: 54px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

            var(--ul-logo-yellow)
        );
}


/* ==========================================================
   13. TITLE
========================================================== */

.ul-gallery-intro__title {
    max-width: 760px;

    margin: 0;

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

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

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

    font-weight: 500;

    line-height: .93;

    letter-spacing:
        -.05em;
}


/* ==========================================================
   14. TITLE LINE
========================================================== */

.ul-gallery-intro__title-line {
    display: block;
}


/* ==========================================================
   15. TITLE ACCENT
========================================================== */

.ul-gallery-intro__title-line--accent {
    position: relative;

    width: fit-content;

    margin-top: .08em;

    color:
        var(--ul-green-600);
}


/* ==========================================================
   16. ACCENT UNDERLINE
========================================================== */

.ul-gallery-intro__title-line--accent::after {
    content: "";

    position: absolute;

    left: 2px;
    bottom: -.13em;

    width: 38%;

    height: 4px;

    border-radius: 999px;

    background:
        var(--ul-gradient-brand);

    opacity: .86;
}


/* ==========================================================
   17. STATEMENT
========================================================== */

.ul-gallery-intro__statement {
    display: flex;

    align-items: center;

    gap: 14px;

    max-width: 450px;

    margin-top:
        clamp(
            43px,
            5vw,
            65px
        );

    padding-top: 22px;

    border-top:
        1px solid
        var(--ul-border);
}


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

.ul-gallery-intro__statement-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(126, 187, 80, .18);

    border-radius: 15px;

    color:
        var(--ul-green-700);

    background:
        var(--ul-surface-green);
}


.ul-gallery-intro__statement-icon svg {
    width: 22px;
    height: 22px;
}


/* ==========================================================
   19. STATEMENT COPY
========================================================== */

.ul-gallery-intro__statement p {
    margin: 0;

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

    font-size:
        clamp(
            .98rem,
            .96vw,
            1.06rem
        );

    line-height: 1.56;
}


/* ==========================================================
   20. CONTENT SIDE
========================================================== */

.ul-gallery-intro__content {
    position: relative;

    min-width: 0;

    padding:
        clamp(
            30px,
            3.5vw,
            45px
        );

    border:
        1px solid
        rgba(77, 114, 79, .13);

    border-radius:
        var(--ul-radius-xl);

    background:

        linear-gradient(
            145deg,

            rgba(255, 255, 255, .89),

            rgba(249, 251, 246, .72)
        );

    box-shadow:

        0 22px 52px
        rgba(46, 88, 56, .075),

        inset 0 1px 0
        rgba(255, 255, 255, .75);

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

    backdrop-filter:
        blur(12px);
}


/* ==========================================================
   21. SMALL COLOR DETAIL
========================================================== */

.ul-gallery-intro__content::before {
    content: "";

    position: absolute;

    top: 0;
    left:
        clamp(
            30px,
            3.5vw,
            45px
        );

    width: 78px;
    height: 4px;

    border-radius:
        0 0 999px 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-500),

            var(--ul-logo-yellow),

            var(--ul-logo-orange)
        );
}


/* ==========================================================
   22. LEAD
========================================================== */

.ul-gallery-intro__lead {
    margin:
        0 0 21px;

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

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

    font-size:
        clamp(
            1.32rem,
            1.55vw,
            1.68rem
        );

    font-weight: 500;

    line-height: 1.47;

    letter-spacing:
        -.022em;
}


/* ==========================================================
   23. SUPPORT COPY
========================================================== */

.ul-gallery-intro__support {
    margin:
        0 0
        clamp(
            27px,
            3vw,
            38px
        );

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

    font-size:
        clamp(
            1.01rem,
            1.02vw,
            1.11rem
        );

    line-height: 1.68;
}


/* ==========================================================
   24. NOTE
========================================================== */

.ul-gallery-intro__note {
    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        16px;

    border:
        1px solid
        rgba(49, 90, 152, .11);

    border-radius: 16px;

    background:

        linear-gradient(
            115deg,

            var(--ul-surface-blue),

            rgba(237, 247, 248, .58)
        );
}


/* ==========================================================
   25. NOTE MARK
========================================================== */

.ul-gallery-intro__note-mark {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 13px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            135deg,

            var(--ul-logo-blue),

            var(--ul-logo-cyan)
        );

    box-shadow:
        var(--ul-shadow-blue);
}


.ul-gallery-intro__note-mark svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   26. NOTE COPY
========================================================== */

.ul-gallery-intro__note > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-intro__note span {
    color:
        var(--ul-logo-blue);

    font-size: .76rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .065em;

    text-transform: uppercase;
}


.ul-gallery-intro__note strong {
    color:
        var(--ul-forest-950);

    font-size: .95rem;

    font-weight: 600;

    line-height: 1.38;
}


/* ==========================================================
   27. CATEGORY RAIL
========================================================== */

.ul-gallery-intro__rail {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        12px 17px;

    margin-top:
        clamp(
            65px,
            7vw,
            96px
        );

    padding:
        22px
        clamp(
            20px,
            3vw,
            38px
        );

    border:
        1px solid
        rgba(78, 115, 80, .12);

    border-radius:
        var(--ul-radius-lg);

    background:
        rgba(255, 255, 255, .70);

    box-shadow:
        var(--ul-shadow-xs);

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

    backdrop-filter:
        blur(10px);
}


/* ==========================================================
   28. RAIL ITEMS
========================================================== */

.ul-gallery-intro__rail-item {
    --ul-gallery-intro-color:
        var(--ul-green-600);

    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    font-size:
        clamp(
            .88rem,
            .84vw,
            .96rem
        );

    font-weight: 600;

    line-height: 1.3;

    white-space: nowrap;
}


/* ==========================================================
   29. RAIL COLOR DOT
========================================================== */

.ul-gallery-intro__rail-item > i {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-gallery-intro-color);

    box-shadow:

        0 0 0 4px

        color-mix(
            in srgb,
            var(--ul-gallery-intro-color) 10%,
            transparent
        );
}


/* ==========================================================
   30. RAIL SEPARATOR
========================================================== */

.ul-gallery-intro__rail > b {
    width: 4px;
    height: 4px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        rgba(73, 105, 76, .20);
}


/* ==========================================================
   31. RAIL COLORS
========================================================== */

.ul-gallery-intro__rail-item--green {
    --ul-gallery-intro-color:
        var(--ul-green-600);
}


.ul-gallery-intro__rail-item--cyan {
    --ul-gallery-intro-color:
        var(--ul-logo-cyan);
}


.ul-gallery-intro__rail-item--yellow {
    --ul-gallery-intro-color:
        var(--ul-yellow-600);
}


.ul-gallery-intro__rail-item--orange {
    --ul-gallery-intro-color:
        var(--ul-logo-orange);
}


.ul-gallery-intro__rail-item--blue {
    --ul-gallery-intro-color:
        var(--ul-logo-blue);
}


.ul-gallery-intro__rail-item--red {
    --ul-gallery-intro-color:
        var(--ul-logo-red);
}


/* ==========================================================
   32. NEXT SECTION
========================================================== */

.ul-gallery-intro__next {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    margin-top:
        clamp(
            28px,
            3.5vw,
            46px
        );

    padding-top:
        clamp(
            27px,
            3vw,
            38px
        );

    border-top:
        1px solid
        var(--ul-border);
}


/* ==========================================================
   33. NEXT COPY
========================================================== */

.ul-gallery-intro__next-copy {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


/* ==========================================================
   34. NEXT LABEL
========================================================== */

.ul-gallery-intro__next-label {
    color:
        var(--ul-logo-red);

    font-size: .76rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .075em;

    text-transform: uppercase;
}


/* ==========================================================
   35. NEXT DESCRIPTION
========================================================== */

.ul-gallery-intro__next-copy p {
    margin: 0;

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

    font-size: .91rem;

    line-height: 1.45;
}


/* ==========================================================
   36. NEXT LINK
========================================================== */

.ul-gallery-intro__next-link {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    min-height: 55px;

    padding:
        6px 7px
        6px 18px;

    border:
        1px solid
        rgba(126, 187, 80, .20);

    border-radius: 15px;

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

    background:
        var(--ul-white);

    box-shadow:
        var(--ul-shadow-sm);

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

    font-size: 1.02rem;

    font-weight: 500;

    transition:

        color .35s ease,

        background-color .35s ease,

        border-color .35s ease,

        transform .42s
        var(--ul-ease-expo),

        box-shadow .35s ease;
}


/* ==========================================================
   37. NEXT ICON
========================================================== */

.ul-gallery-intro__next-icon {
    display: grid;

    place-items: center;

    width: 41px;
    height: 41px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:
        var(--ul-green-600);

    transition:

        background-color .35s ease,

        transform .4s
        var(--ul-ease-expo);
}


.ul-gallery-intro__next-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   38. NEXT LINK HOVER
========================================================== */

.ul-gallery-intro__next-link:hover {
    color:
        var(--ul-white);

    border-color:
        var(--ul-green-600);

    background:
        var(--ul-green-600);

    transform:
        translateY(-3px);

    box-shadow:
        var(--ul-shadow-green);
}


.ul-gallery-intro__next-link:hover
.ul-gallery-intro__next-icon {
    background:
        var(--ul-logo-blue);

    transform:
        translateY(3px);
}


/* ==========================================================
   39. BOTTOM TRANSITION

   Soft organic handoff into first gallery.
========================================================== */

.ul-gallery-intro__bottom-shape {
    position: absolute;

    z-index: -1;

    left: -5%;
    right: -5%;
    bottom: -1px;

    height:
        clamp(
            35px,
            4vw,
            65px
        );

    pointer-events: none;

    background:
        rgba(126, 187, 80, .035);

    clip-path:

        polygon(
            0 72%,
            12% 52%,
            26% 68%,
            43% 38%,
            61% 61%,
            78% 34%,
            100% 59%,
            100% 100%,
            0 100%
        );
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-intro__layout {
        grid-template-columns:
            minmax(0, .92fr)
            minmax(380px, .72fr);
    }


    .ul-gallery-intro__content {
        max-width: 600px;

        justify-self: end;
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-intro {
        padding:
            90px 0
            105px;
    }


    .ul-gallery-intro__word {
        top: 45px;

        right: -30px;

        font-size:
            clamp(
                9rem,
                23vw,
                15rem
            );
    }


    .ul-gallery-intro__layout {
        grid-template-columns:
            1fr;

        gap: 52px;
    }


    .ul-gallery-intro__title {
        max-width: 720px;

        font-size:
            clamp(
                3.25rem,
                7vw,
                4.9rem
            );
    }


    .ul-gallery-intro__statement {
        max-width: 520px;

        margin-top: 40px;
    }


    .ul-gallery-intro__content {
        max-width: 760px;
    }


    .ul-gallery-intro__rail {
        justify-content: flex-start;

        margin-top: 62px;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-intro {
        padding:
            74px 0
            85px;
    }


    .ul-gallery-intro::before {
        width:
            calc(100% - 40px);
    }


    .ul-gallery-intro__word {
        top: 54px;
        right: -45px;

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

        opacity: .75;
    }


    .ul-gallery-intro__layout {
        grid-template-columns: 1fr;

        gap: 43px;
    }


    .ul-gallery-intro__eyebrow {
        margin-bottom: 18px;

        font-size: .75rem;
    }


    .ul-gallery-intro__title {
        max-width: 620px;

        font-size:
            clamp(
                2.8rem,
                8.6vw,
                3.75rem
            );
    }


    .ul-gallery-intro__statement {
        margin-top: 35px;
    }


    .ul-gallery-intro__content {
        padding: 28px;

        border-radius: 22px;
    }


    .ul-gallery-intro__lead {
        font-size:
            clamp(
                1.22rem,
                3.6vw,
                1.45rem
            );
    }


    .ul-gallery-intro__support {
        font-size: .99rem;
    }


    .ul-gallery-intro__rail {
        justify-content: flex-start;

        gap:
            11px 14px;

        margin-top: 52px;

        padding:
            19px 20px;
    }


    .ul-gallery-intro__rail-item {
        font-size: .87rem;
    }


    .ul-gallery-intro__next {
        align-items: flex-start;

        flex-direction: column;

        gap: 19px;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-intro {
        padding:
            62px 0
            73px;
    }


    .ul-gallery-intro::before {
        width:
            calc(100% - 30px);
    }


    .ul-gallery-intro__topography {
        left: -540px;

        opacity: .38;
    }


    .ul-gallery-intro__ambient {
        top: -260px;
        right: -410px;
    }


    .ul-gallery-intro__word {
        top: 50px;
        right: -26px;

        font-size:
            clamp(
                6rem,
                29vw,
                8.5rem
            );

        color:
            rgba(52, 101, 64, .030);
    }


    .ul-gallery-intro__layout {
        grid-template-columns: 1fr;

        gap: 36px;
    }


    .ul-gallery-intro__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-intro__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-intro__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-intro__title {
        max-width: 100%;

        font-size:
            clamp(
                2.4rem,
                10.5vw,
                3.05rem
            );

        line-height: .95;
    }


    .ul-gallery-intro__title-line--accent::after {
        height: 3px;
    }


    .ul-gallery-intro__statement {
        gap: 12px;

        margin-top: 31px;

        padding-top: 18px;
    }


    .ul-gallery-intro__statement-icon {
        width: 44px;
        height: 44px;

        border-radius: 13px;
    }


    .ul-gallery-intro__statement p {
        font-size: .93rem;
    }


    .ul-gallery-intro__content {
        padding:
            24px 19px;

        border-radius: 19px;
    }


    .ul-gallery-intro__content::before {
        left: 19px;

        width: 65px;
    }


    .ul-gallery-intro__lead {
        margin-bottom: 17px;

        font-size: 1.18rem;

        line-height: 1.45;
    }


    .ul-gallery-intro__support {
        margin-bottom: 24px;

        font-size: .94rem;

        line-height: 1.6;
    }


    .ul-gallery-intro__note {
        align-items: flex-start;

        gap: 11px;

        padding: 14px;

        border-radius: 14px;
    }


    .ul-gallery-intro__note-mark {
        width: 40px;
        height: 40px;

        border-radius: 11px;
    }


    .ul-gallery-intro__note span {
        font-size: .70rem;
    }


    .ul-gallery-intro__note strong {
        font-size: .89rem;
    }


    /* ======================================================
       CATEGORY RAIL

       On small screens becomes horizontally scrollable
       rather than wrapping into a tall wall of text.
    ====================================================== */

    .ul-gallery-intro__rail {
        display: flex;

        justify-content: flex-start;

        flex-wrap: nowrap;

        gap: 8px;

        margin-top: 43px;

        padding:
            14px;

        overflow-x: auto;

        border-radius: 16px;

        scrollbar-width: none;

        overscroll-behavior-inline:
            contain;
    }


    .ul-gallery-intro__rail::-webkit-scrollbar {
        display: none;
    }


    .ul-gallery-intro__rail > b {
        display: none;
    }


    .ul-gallery-intro__rail-item {
        min-width: max-content;

        min-height: 39px;

        padding:
            0 12px;

        border:
            1px solid
            rgba(77, 114, 79, .11);

        border-radius: 999px;

        background:
            var(--ul-white);

        font-size: .82rem;
    }


    .ul-gallery-intro__next {
        align-items: stretch;

        flex-direction: column;

        gap: 17px;

        margin-top: 26px;

        padding-top: 24px;
    }


    .ul-gallery-intro__next-label {
        font-size: .70rem;
    }


    .ul-gallery-intro__next-copy p {
        font-size: .87rem;
    }


    .ul-gallery-intro__next-link {
        justify-content: space-between;

        width: 100%;

        min-height: 53px;

        font-size: .98rem;
    }

}


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

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

    .ul-gallery-intro__next-link,
    .ul-gallery-intro__next-icon {
        animation: none !important;

        transition: none !important;
    }

}









































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   04. LAWN & LANDSCAPE CARE — 2026 REDESIGN

   Direction:
   • Dark emerald portfolio section
   • Full-bleed photographic bento
   • 24 existing images
   • No visible counters
   • Progressive Load More
   • Content never depends on reveal JS
========================================================== */


/* ==========================================================
   01. ROOT
========================================================== */

.ul-gallery-landscaping {
    position: relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(85px, 7vw, 120px);

    overflow: hidden;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            145deg,

            #153B27 0%,

            #19472E 32%,

            #205438 68%,

            #183F2B 100%
        );

    isolation: isolate;

    scroll-margin-top:
        calc(
            var(--ul-header-height) + 20px
        );
}


/* ==========================================================
   02. TOP COLOR TRANSITION
========================================================== */

.ul-gallery-landscaping::before {
    content: "";

    position: absolute;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-500),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red),

            var(--ul-logo-blue),

            var(--ul-logo-cyan)
        );
}


/* ==========================================================
   03. BOTTOM DEPTH
========================================================== */

.ul-gallery-landscaping::after {
    content: "";

    position: absolute;

    z-index: -5;

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

    height: 40%;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            transparent,

            rgba(5, 26, 14, .27)
        );
}


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

.ul-gallery-landscaping__topography {
    position: absolute;

    z-index: -4;

    top: -300px;
    left: -330px;

    width: 860px;
    height: 860px;

    pointer-events: none;

    opacity: .46;

    background:

        repeating-radial-gradient(
            ellipse at 45% 43%,

            transparent 0,

            transparent 38px,

            rgba(255, 255, 255, .026) 39px,

            rgba(255, 255, 255, .026) 40px,

            transparent 41px,

            transparent 76px
        ),

        repeating-radial-gradient(
            ellipse at 69% 67%,

            transparent 0,

            transparent 55px,

            rgba(167, 213, 118, .035) 56px,

            rgba(167, 213, 118, .035) 57px,

            transparent 58px,

            transparent 102px
        );
}


/* ==========================================================
   05. AMBIENT
========================================================== */

.ul-gallery-landscaping__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   06. GREEN AMBIENT
========================================================== */

.ul-gallery-landscaping__ambient--green {
    top: -280px;
    right: -270px;

    width: 720px;
    height: 720px;

    background:

        radial-gradient(
            circle,

            rgba(167, 213, 118, .17),

            rgba(126, 187, 80, .05) 45%,

            transparent 71%
        );
}


/* ==========================================================
   07. BLUE AMBIENT
========================================================== */

.ul-gallery-landscaping__ambient--blue {
    left: 40%;
    bottom: -450px;

    width: 720px;
    height: 720px;

    background:

        radial-gradient(
            circle,

            rgba(112, 186, 202, .10),

            rgba(49, 90, 152, .025) 45%,

            transparent 71%
        );
}


/* ==========================================================
   08. LARGE WORD
========================================================== */

.ul-gallery-landscaping__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(
            40px,
            5vw,
            75px
        );

    right: -2%;

    pointer-events: none;

    user-select: none;

    color:
        rgba(255, 255, 255, .025);

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

    font-size:
        clamp(
            11rem,
            22vw,
            24rem
        );

    font-weight: 500;

    line-height: .76;

    letter-spacing:
        -.07em;

    white-space: nowrap;
}


/* ==========================================================
   09. HEADER
========================================================== */

.ul-gallery-landscaping__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.07fr)
        minmax(380px, .60fr);

    align-items: end;

    gap:
        clamp(
            60px,
            7vw,
            110px
        );

    margin-bottom:
        clamp(
            52px,
            5.5vw,
            78px
        );
}


/* ==========================================================
   10. EYEBROW
========================================================== */

.ul-gallery-landscaping__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--ul-logo-yellow);

    font-size:
        clamp(
            .82rem,
            .8vw,
            .90rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


/* ==========================================================
   11. EYEBROW DOT
========================================================== */

.ul-gallery-landscaping__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-red);

    box-shadow:

        0 0 0 5px
        rgba(189, 60, 53, .14);
}


/* ==========================================================
   12. EYEBROW LINE
========================================================== */

.ul-gallery-landscaping__eyebrow-line {
    display: block;

    width: 55px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red)
        );
}


/* ==========================================================
   13. TITLE
========================================================== */

.ul-gallery-landscaping__title {
    max-width: 850px;

    margin: 0;

    color:
        var(--ul-white);

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

    font-size:
        clamp(
            3.65rem,
            5.1vw,
            5.85rem
        );

    font-weight: 500;

    line-height: .93;

    letter-spacing:
        -.05em;
}


/* ==========================================================
   14. TITLE ACCENT
========================================================== */

.ul-gallery-landscaping__title span {
    display: block;

    margin-top: .07em;

    color:
        var(--ul-green-400);
}


/* ==========================================================
   15. INTRO
========================================================== */

.ul-gallery-landscaping__intro {
    max-width: 520px;

    justify-self: end;
}


/* ==========================================================
   16. INTRO COPY
========================================================== */

.ul-gallery-landscaping__intro > p {
    margin:
        0 0 26px;

    color:
        rgba(255, 255, 255, .76);

    font-size:
        clamp(
            1.05rem,
            1.06vw,
            1.16rem
        );

    line-height: 1.7;
}


/* ==========================================================
   17. SERVICE TAGS
========================================================== */

.ul-gallery-landscaping__services {
    display: flex;

    flex-wrap: wrap;

    gap:
        9px;
}


/* ==========================================================
   18. SERVICE TAG
========================================================== */

.ul-gallery-landscaping__services span {
    display: inline-flex;

    align-items: center;

    min-height: 37px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 999px;

    color:
        rgba(255, 255, 255, .78);

    background:
        rgba(255, 255, 255, .055);

    font-size:
        .84rem;

    font-weight: 600;

    line-height: 1;
}


/* ==========================================================
   19. TAG COLORS
========================================================== */

.ul-gallery-landscaping__services span:nth-child(1) {
    border-color:
        rgba(167, 213, 118, .22);
}


.ul-gallery-landscaping__services span:nth-child(2) {
    border-color:
        rgba(241, 215, 55, .20);
}


.ul-gallery-landscaping__services span:nth-child(3) {
    border-color:
        rgba(233, 145, 41, .20);
}


.ul-gallery-landscaping__services span:nth-child(4) {
    border-color:
        rgba(112, 186, 202, .20);
}


.ul-gallery-landscaping__services span:nth-child(5) {
    border-color:
        rgba(49, 90, 152, .24);
}


.ul-gallery-landscaping__services span:nth-child(6) {
    border-color:
        rgba(189, 60, 53, .22);
}


/* ==========================================================
   20. INFORMATION BAR
========================================================== */

.ul-gallery-landscaping__bar {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        clamp(
            28px,
            3vw,
            42px
        );

    padding:
        18px 0;

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

    border-bottom:
        1px solid
        rgba(255, 255, 255, .11);
}


/* ==========================================================
   21. BAR LEFT
========================================================== */

.ul-gallery-landscaping__bar-left {
    display: flex;

    align-items: center;

    gap: 13px;
}


/* ==========================================================
   22. BAR ICON
========================================================== */

.ul-gallery-landscaping__bar-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(167, 213, 118, .22);

    border-radius: 13px;

    color:
        var(--ul-green-400);

    background:
        rgba(167, 213, 118, .07);
}


.ul-gallery-landscaping__bar-icon svg {
    width: 21px;
    height: 21px;
}


/* ==========================================================
   23. BAR LEFT COPY
========================================================== */

.ul-gallery-landscaping__bar-left > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-landscaping__bar-left span {
    color:
        rgba(255, 255, 255, .55);

    font-size: .76rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-landscaping__bar-left strong {
    color:
        rgba(255, 255, 255, .94);

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

    font-size: 1.05rem;

    font-weight: 500;

    line-height: 1.1;
}


/* ==========================================================
   24. BAR RIGHT
========================================================== */

.ul-gallery-landscaping__bar-right {
    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255, 255, 255, .63);

    font-size:
        .90rem;

    line-height: 1.45;
}


/* ==========================================================
   25. BAR DOT
========================================================== */

.ul-gallery-landscaping__bar-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-cyan);

    box-shadow:

        0 0 0 5px
        rgba(112, 186, 202, .10);
}


/* ==========================================================
   26. PHOTO GRID
========================================================== */

.ul-gallery-landscaping__grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    grid-auto-flow:
        dense;

    grid-auto-rows:
        clamp(
            74px,
            5.3vw,
            94px
        );

    gap:
        clamp(
            12px,
            1.15vw,
            18px
        );
}


/* ==========================================================
   27. PHOTO BASE
========================================================== */

.ul-landscape-photo {
    --ul-photo-x: 50%;
    --ul-photo-y: 50%;

    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius:
        var(--ul-radius-lg);

    background:
        rgba(255, 255, 255, .055);

    box-shadow:

        0 17px 40px
        rgba(5, 24, 13, .13);

    transition:

        border-color .35s ease,

        box-shadow .4s ease,

        transform .5s
        var(--ul-ease-expo);
}


/* ==========================================================
   28. BENTO PATTERN
   Repeats for each group of images.
========================================================== */

.ul-landscape-photo:nth-child(8n + 1) {
    grid-column:
        span 7;

    grid-row:
        span 6;
}


.ul-landscape-photo:nth-child(8n + 2) {
    grid-column:
        span 5;

    grid-row:
        span 3;
}


.ul-landscape-photo:nth-child(8n + 3) {
    grid-column:
        span 5;

    grid-row:
        span 3;
}


.ul-landscape-photo:nth-child(8n + 4) {
    grid-column:
        span 4;

    grid-row:
        span 4;
}


.ul-landscape-photo:nth-child(8n + 5) {
    grid-column:
        span 4;

    grid-row:
        span 4;
}


.ul-landscape-photo:nth-child(8n + 6) {
    grid-column:
        span 4;

    grid-row:
        span 4;
}


.ul-landscape-photo:nth-child(8n + 7) {
    grid-column:
        span 5;

    grid-row:
        span 4;
}


.ul-landscape-photo:nth-child(8n + 8) {
    grid-column:
        span 7;

    grid-row:
        span 4;
}


/* ==========================================================
   29. DEFERRED ITEMS

   Applied only by JS.
   Therefore if JS fails, all photographs remain visible.
========================================================== */

.ul-landscape-photo.is-deferred {
    display: none;
}


/* ==========================================================
   30. REVEALING
========================================================== */

.ul-landscape-photo.is-revealing {
    animation:
        ulLandscapingReveal
        .72s
        var(--ul-ease-expo)
        both;
}


@keyframes ulLandscapingReveal {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ==========================================================
   31. LINK
========================================================== */

.ul-landscape-photo__link {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* ==========================================================
   32. IMAGE
========================================================== */

.ul-landscape-photo img {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    transform:
        scale(1.025);

    transition:

        transform .85s
        var(--ul-ease-expo),

        filter .55s ease;

    backface-visibility: hidden;
}


/* ==========================================================
   33. SHADE
========================================================== */

.ul-landscape-photo__shade {
    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            rgba(10, 35, 20, .02) 20%,

            rgba(9, 31, 18, .04) 52%,

            rgba(6, 25, 14, .59) 100%
        );

    opacity: .72;

    transition:
        opacity .45s ease;
}


/* ==========================================================
   34. POINTER LIGHT
========================================================== */

.ul-landscape-photo__light {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(
            circle
            at
            var(--ul-photo-x)
            var(--ul-photo-y),

            rgba(255, 255, 255, .17),

            rgba(167, 213, 118, .05) 20%,

            transparent 48%
        );

    transition:
        opacity .35s ease;
}


/* ==========================================================
   35. VIEW LABEL
========================================================== */

.ul-landscape-photo__view {
    position: absolute;

    z-index: 4;

    left: 18px;
    bottom: 17px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 42px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255, 255, 255, .18);

    border-radius: 12px;

    color:
        var(--ul-white);

    background:
        rgba(13, 45, 26, .43);

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

    backdrop-filter:
        blur(11px);

    font-size: .82rem;

    font-weight: 600;

    opacity: 0;

    transform:
        translateY(9px);

    transition:

        opacity .35s ease,

        transform .45s
        var(--ul-ease-expo),

        background-color .35s ease;
}


.ul-landscape-photo__view svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================
   36. PHOTO HOVER
========================================================== */

.ul-landscape-photo:hover {
    border-color:
        rgba(167, 213, 118, .25);

    transform:
        translateY(-4px);

    box-shadow:

        0 27px 58px
        rgba(4, 21, 11, .21);
}


.ul-landscape-photo:hover img {
    transform:
        scale(1.075);

    filter:
        saturate(1.04)
        contrast(1.02);
}


.ul-landscape-photo:hover
.ul-landscape-photo__shade {
    opacity: 1;
}


.ul-landscape-photo:hover
.ul-landscape-photo__light {
    opacity: 1;
}


.ul-landscape-photo:hover
.ul-landscape-photo__view {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   37. LOAD MORE
========================================================== */

.ul-gallery-landscaping__more {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap:
        clamp(
            25px,
            4vw,
            55px
        );

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

    padding:
        24px 0;

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

    border-bottom:
        1px solid
        rgba(255, 255, 255, .11);
}


/* ==========================================================
   38. LOAD MORE COPY
========================================================== */

.ul-gallery-landscaping__more-copy {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.ul-gallery-landscaping__more-label {
    color:
        var(--ul-logo-yellow);

    font-size: .74rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .075em;

    text-transform: uppercase;
}


.ul-gallery-landscaping__more-copy strong {
    max-width: 350px;

    color:
        rgba(255, 255, 255, .90);

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

    font-size: 1.08rem;

    font-weight: 500;

    line-height: 1.35;
}


/* ==========================================================
   39. PROGRESS
========================================================== */

.ul-gallery-landscaping__progress {
    width: 100%;
}


/* ==========================================================
   40. TRACK
========================================================== */

.ul-gallery-landscaping__progress-track {
    width: 100%;
    height: 4px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .10);
}


/* ==========================================================
   41. FILL
========================================================== */

.ul-gallery-landscaping__progress-fill {
    display: block;

    width: 100%;
    height: 100%;

    transform:
        scaleX(.333333);

    transform-origin:
        left center;

    border-radius: inherit;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-400),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red),

            var(--ul-logo-blue),

            var(--ul-logo-cyan)
        );

    transition:
        transform .7s
        var(--ul-ease-expo);
}


/* ==========================================================
   42. LOAD MORE BUTTON
========================================================== */

.ul-gallery-landscaping__more-button {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 17px;

    min-height: 56px;

    padding:
        6px 7px
        6px 18px;

    border:
        1px solid
        rgba(255, 255, 255, .23);

    border-radius: 15px;

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

    background:
        var(--ul-logo-yellow);

    box-shadow:

        0 16px 34px
        rgba(5, 23, 13, .17);

    font-size: .88rem;

    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: .025em;

    transition:

        color .35s ease,

        background-color .35s ease,

        transform .45s
        var(--ul-ease-expo),

        box-shadow .4s ease;
}


/* ==========================================================
   43. MORE ICON
========================================================== */

.ul-gallery-landscaping__more-icon {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:
        var(--ul-logo-blue);

    transition:

        background-color .35s ease,

        transform .4s
        var(--ul-ease-expo);
}


.ul-gallery-landscaping__more-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   44. BUTTON HOVER
========================================================== */

.ul-gallery-landscaping__more-button:hover {
    color:
        var(--ul-white);

    background:
        var(--ul-logo-red);

    transform:
        translateY(-3px);

    box-shadow:

        0 21px 43px
        rgba(5, 23, 13, .22);
}


.ul-gallery-landscaping__more-button:hover
.ul-gallery-landscaping__more-icon {
    background:
        var(--ul-green-700);

    transform:
        translateY(3px);
}


/* ==========================================================
   45. COMPLETED STATE
========================================================== */

.ul-gallery-landscaping__more.is-complete {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(200px, 1fr);
}


.ul-gallery-landscaping__more.is-complete
.ul-gallery-landscaping__more-button {
    display: none;
}


.ul-gallery-landscaping__more.is-complete
.ul-gallery-landscaping__progress-fill {
    transform:
        scaleX(1);
}


/* ==========================================================
   46. SECTION FOOTER
========================================================== */

.ul-gallery-landscaping__footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

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


/* ==========================================================
   47. FOOTER COPY
========================================================== */

.ul-gallery-landscaping__footer-copy {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* ==========================================================
   48. FOOTER DOT
========================================================== */

.ul-gallery-landscaping__footer-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-green-400);

    box-shadow:

        0 0 0 5px
        rgba(167, 213, 118, .10);
}


/* ==========================================================
   49. FOOTER COPY TEXT
========================================================== */

.ul-gallery-landscaping__footer-copy > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-landscaping__footer-copy small {
    color:
        rgba(255, 255, 255, .48);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-landscaping__footer-copy strong {
    color:
        rgba(255, 255, 255, .90);

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

    font-size: 1.04rem;

    font-weight: 500;
}


/* ==========================================================
   50. NEXT
========================================================== */

.ul-gallery-landscaping__next {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    min-height: 58px;

    padding:
        7px 7px
        7px 18px;

    border:
        1px solid
        rgba(112, 186, 202, .19);

    border-radius: 15px;

    color:
        var(--ul-white);

    background:
        rgba(255, 255, 255, .055);

    transition:

        transform .42s
        var(--ul-ease-expo),

        background-color .35s ease,

        border-color .35s ease;
}


/* ==========================================================
   51. NEXT COPY
========================================================== */

.ul-gallery-landscaping__next-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-landscaping__next-copy small {
    color:
        rgba(255, 255, 255, .49);

    font-size: .70rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-landscaping__next-copy strong {
    color:
        var(--ul-white);

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

    font-size: 1rem;

    font-weight: 500;
}


/* ==========================================================
   52. NEXT ICON
========================================================== */

.ul-gallery-landscaping__next-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            135deg,

            var(--ul-logo-blue),

            var(--ul-logo-cyan)
        );

    transition:
        transform .4s
        var(--ul-ease-expo);
}


.ul-gallery-landscaping__next-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   53. NEXT HOVER
========================================================== */

.ul-gallery-landscaping__next:hover {
    border-color:
        rgba(112, 186, 202, .35);

    background:
        rgba(112, 186, 202, .10);

    transform:
        translateY(-3px);
}


.ul-gallery-landscaping__next:hover
.ul-gallery-landscaping__next-icon {
    transform:
        translateX(3px);
}


/* ==========================================================
   54. BOTTOM SPECTRUM
========================================================== */

.ul-gallery-landscaping__spectrum {
    position: absolute;

    z-index: 4;

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

    height: 4px;

    pointer-events: none;

    background:
        var(--ul-gradient-brand);
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-landscaping__header {
        grid-template-columns:
            minmax(0, 1.07fr)
            minmax(380px, .60fr);
    }


    .ul-gallery-landscaping__grid {
        grid-template-columns:
            repeat(12, minmax(0, 1fr));
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-landscaping {
        padding:
            92px 0
            88px;
    }


    .ul-gallery-landscaping__word {
        top: 60px;

        right: -10%;

        font-size:
            clamp(
                9rem,
                22vw,
                15rem
            );
    }


    .ul-gallery-landscaping__header {
        grid-template-columns: 1fr;

        gap: 38px;

        margin-bottom: 50px;
    }


    .ul-gallery-landscaping__intro {
        max-width: 680px;

        justify-self: start;
    }


    .ul-gallery-landscaping__title {
        max-width: 720px;

        font-size:
            clamp(
                3.2rem,
                6.8vw,
                4.75rem
            );
    }


    .ul-gallery-landscaping__bar {
        gap: 25px;
    }


    .ul-gallery-landscaping__grid {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));

        grid-auto-rows:
            90px;

        gap: 13px;
    }


    .ul-landscape-photo:nth-child(8n + 1) {
        grid-column:
            span 4;

        grid-row:
            span 5;
    }


    .ul-landscape-photo:nth-child(8n + 2) {
        grid-column:
            span 2;

        grid-row:
            span 3;
    }


    .ul-landscape-photo:nth-child(8n + 3) {
        grid-column:
            span 2;

        grid-row:
            span 2;
    }


    .ul-landscape-photo:nth-child(8n + 4),
    .ul-landscape-photo:nth-child(8n + 5),
    .ul-landscape-photo:nth-child(8n + 6) {
        grid-column:
            span 2;

        grid-row:
            span 3;
    }


    .ul-landscape-photo:nth-child(8n + 7) {
        grid-column:
            span 3;

        grid-row:
            span 3;
    }


    .ul-landscape-photo:nth-child(8n + 8) {
        grid-column:
            span 3;

        grid-row:
            span 3;
    }


    .ul-gallery-landscaping__more {
        grid-template-columns:
            minmax(210px, .8fr)
            minmax(170px, 1fr)
            auto;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-landscaping {
        padding:
            78px 0
            72px;
    }


    .ul-gallery-landscaping__word {
        top: 70px;
        right: -18%;

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


    .ul-gallery-landscaping__header {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 41px;
    }


    .ul-gallery-landscaping__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-landscaping__title {
        max-width: 620px;

        font-size:
            clamp(
                2.8rem,
                8.7vw,
                3.8rem
            );
    }


    .ul-gallery-landscaping__intro {
        max-width: 600px;

        justify-self: start;
    }


    .ul-gallery-landscaping__intro > p {
        font-size: 1rem;

        line-height: 1.64;
    }


    .ul-gallery-landscaping__bar {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding:
            17px 0;
    }


    .ul-gallery-landscaping__bar-right {
        font-size: .87rem;
    }


    .ul-gallery-landscaping__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        grid-auto-rows:
            auto;

        gap: 11px;
    }


    .ul-landscape-photo,
    .ul-landscape-photo:nth-child(8n + 1),
    .ul-landscape-photo:nth-child(8n + 2),
    .ul-landscape-photo:nth-child(8n + 3),
    .ul-landscape-photo:nth-child(8n + 4),
    .ul-landscape-photo:nth-child(8n + 5),
    .ul-landscape-photo:nth-child(8n + 6),
    .ul-landscape-photo:nth-child(8n + 7),
    .ul-landscape-photo:nth-child(8n + 8) {
        grid-column: auto;
        grid-row: auto;

        height:
            clamp(
                250px,
                43vw,
                335px
            );
    }


    .ul-landscape-photo:nth-child(5n + 1) {
        grid-column:
            1 / -1;

        height:
            clamp(
                330px,
                61vw,
                445px
            );
    }


    .ul-landscape-photo__view {
        opacity: 1;

        transform: none;
    }


    .ul-gallery-landscaping__more {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .ul-gallery-landscaping__progress {
        order: 3;
    }


    .ul-gallery-landscaping__more-button {
        width: fit-content;
    }


    .ul-gallery-landscaping__more.is-complete {
        grid-template-columns: 1fr;
    }


    .ul-gallery-landscaping__footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-landscaping {
        padding:
            67px 0
            62px;
    }


    .ul-gallery-landscaping__topography {
        left: -590px;

        opacity: .34;
    }


    .ul-gallery-landscaping__word {
        top: 55px;
        right: -21%;

        font-size:
            clamp(
                6.5rem,
                31vw,
                9rem
            );
    }


    .ul-gallery-landscaping__header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 35px;
    }


    .ul-gallery-landscaping__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-landscaping__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-landscaping__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-landscaping__title {
        font-size:
            clamp(
                2.4rem,
                10.6vw,
                3.1rem
            );

        line-height: .95;
    }


    .ul-gallery-landscaping__intro {
        justify-self: start;
    }


    .ul-gallery-landscaping__intro > p {
        margin-bottom: 21px;

        font-size: .95rem;

        line-height: 1.60;
    }


    .ul-gallery-landscaping__services {
        gap: 7px;
    }


    .ul-gallery-landscaping__services span {
        min-height: 34px;

        padding:
            0 10px;

        font-size: .78rem;
    }


    .ul-gallery-landscaping__bar {
        align-items: flex-start;

        flex-direction: column;

        gap: 13px;

        margin-bottom: 20px;

        padding:
            15px 0;
    }


    .ul-gallery-landscaping__bar-icon {
        width: 41px;
        height: 41px;

        border-radius: 12px;
    }


    .ul-gallery-landscaping__bar-left strong {
        font-size: .98rem;
    }


    .ul-gallery-landscaping__bar-right {
        align-items: flex-start;

        font-size: .84rem;
    }


    .ul-gallery-landscaping__grid {
        grid-template-columns: 1fr;

        grid-auto-rows: auto;

        gap: 10px;
    }


    .ul-landscape-photo,
    .ul-landscape-photo:nth-child(8n + 1),
    .ul-landscape-photo:nth-child(8n + 2),
    .ul-landscape-photo:nth-child(8n + 3),
    .ul-landscape-photo:nth-child(8n + 4),
    .ul-landscape-photo:nth-child(8n + 5),
    .ul-landscape-photo:nth-child(8n + 6),
    .ul-landscape-photo:nth-child(8n + 7),
    .ul-landscape-photo:nth-child(8n + 8),
    .ul-landscape-photo:nth-child(5n + 1) {
        grid-column: auto;
        grid-row: auto;

        height:
            clamp(
                270px,
                78vw,
                350px
            );

        border-radius: 17px;
    }


    .ul-landscape-photo:nth-child(4n + 1) {
        height:
            clamp(
                315px,
                90vw,
                400px
            );
    }


    .ul-landscape-photo__view {
        left: 13px;
        bottom: 13px;

        min-height: 38px;

        padding:
            0 11px;

        font-size: .77rem;

        opacity: 1;

        transform: none;
    }


    .ul-gallery-landscaping__more {
        grid-template-columns: 1fr;

        gap: 17px;

        margin-top: 35px;

        padding:
            20px 0;
    }


    .ul-gallery-landscaping__more-copy strong {
        font-size: 1rem;
    }


    .ul-gallery-landscaping__progress {
        order: 3;
    }


    .ul-gallery-landscaping__more-button {
        width: 100%;

        min-height: 53px;

        font-size: .78rem;
    }


    .ul-gallery-landscaping__more.is-complete {
        grid-template-columns: 1fr;
    }


    .ul-gallery-landscaping__footer {
        align-items: stretch;

        flex-direction: column;

        gap: 18px;

        margin-top: 48px;
    }


    .ul-gallery-landscaping__next {
        justify-content: space-between;

        width: 100%;
    }


    .ul-gallery-landscaping__spectrum {
        height: 3px;
    }

}


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

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

    .ul-landscape-photo,
    .ul-landscape-photo img,
    .ul-landscape-photo__shade,
    .ul-landscape-photo__light,
    .ul-landscape-photo__view,
    .ul-gallery-landscaping__more-button,
    .ul-gallery-landscaping__more-icon,
    .ul-gallery-landscaping__progress-fill,
    .ul-gallery-landscaping__next,
    .ul-gallery-landscaping__next-icon {
        animation: none !important;

        transition: none !important;
    }


    .ul-landscape-photo.is-revealing {
        animation: none !important;
    }

}














































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   05. IRRIGATION SYSTEMS — 2026 REDESIGN

   Direction:
   • Light / fresh section
   • Cyan + blue irrigation identity
   • Existing 4-photo composition
   • No decorative counters
   • Existing copy and routes preserved
========================================================== */


/* ==========================================================
   01. ROOT
========================================================== */

.ul-gallery-irrigation {
    position: relative;

    padding:
        clamp(108px, 9vw, 150px)
        0
        clamp(82px, 7vw, 112px);

    overflow: hidden;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            145deg,

            #FBFDFB 0%,

            #F4FAF8 38%,

            #EEF7F7 72%,

            #F4F8F2 100%
        );

    isolation: isolate;

    scroll-margin-top:
        calc(
            var(--ul-header-height) + 20px
        );
}


/* ==========================================================
   02. TOP TRANSITION
========================================================== */

.ul-gallery-irrigation::before {
    content: "";

    position: absolute;

    z-index: 4;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-500),

            var(--ul-logo-cyan),

            var(--ul-logo-blue)
        );
}


/* ==========================================================
   03. SOFT LEFT SURFACE
========================================================== */

.ul-gallery-irrigation::after {
    content: "";

    position: absolute;

    z-index: -5;

    top: 0;
    left: 0;

    width: 43%;
    height: 100%;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(112, 186, 202, .06),

            transparent
        );
}


/* ==========================================================
   04. AMBIENT BASE
========================================================== */

.ul-gallery-irrigation__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   05. CYAN AMBIENT
========================================================== */

.ul-gallery-irrigation__ambient--cyan {
    top: -320px;
    right: -290px;

    width: 750px;
    height: 750px;

    background:

        radial-gradient(
            circle,

            rgba(112, 186, 202, .19),

            rgba(112, 186, 202, .055) 44%,

            transparent 71%
        );
}


/* ==========================================================
   06. GREEN AMBIENT
========================================================== */

.ul-gallery-irrigation__ambient--green {
    left: -370px;
    bottom: -420px;

    width: 780px;
    height: 780px;

    background:

        radial-gradient(
            circle,

            rgba(167, 213, 118, .14),

            rgba(126, 187, 80, .035) 45%,

            transparent 71%
        );
}


/* ==========================================================
   07. TOPOGRAPHY
========================================================== */

.ul-gallery-irrigation__topography {
    position: absolute;

    z-index: -3;

    top: -245px;
    right: -265px;

    width: 820px;
    height: 820px;

    pointer-events: none;

    opacity: .51;

    transform:
        rotate(-8deg);

    background:

        repeating-radial-gradient(
            ellipse at 43% 46%,

            transparent 0,

            transparent 37px,

            rgba(49, 90, 152, .030) 38px,

            rgba(49, 90, 152, .030) 39px,

            transparent 40px,

            transparent 75px
        ),

        repeating-radial-gradient(
            ellipse at 68% 69%,

            transparent 0,

            transparent 52px,

            rgba(112, 186, 202, .036) 53px,

            rgba(112, 186, 202, .036) 54px,

            transparent 55px,

            transparent 98px
        );
}


/* ==========================================================
   08. LARGE WORD
========================================================== */

.ul-gallery-irrigation__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(45px, 5vw, 80px);

    right: -2%;

    pointer-events: none;

    user-select: none;

    color:
        rgba(49, 90, 152, .035);

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

    font-size:
        clamp(10rem, 21vw, 22rem);

    font-weight: 500;

    line-height: .76;

    letter-spacing: -.075em;

    white-space: nowrap;
}


/* ==========================================================
   09. HEADER
========================================================== */

.ul-gallery-irrigation__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(360px, .62fr);

    align-items: end;

    gap:
        clamp(60px, 7vw, 115px);

    margin-bottom:
        clamp(52px, 5.5vw, 78px);
}


/* ==========================================================
   10. EYEBROW
========================================================== */

.ul-gallery-irrigation__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--ul-logo-blue);

    font-size:
        clamp(.82rem, .80vw, .90rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


/* ==========================================================
   11. EYEBROW DOT
========================================================== */

.ul-gallery-irrigation__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-cyan);

    box-shadow:

        0 0 0 5px
        rgba(112, 186, 202, .14);
}


/* ==========================================================
   12. EYEBROW LINE
========================================================== */

.ul-gallery-irrigation__eyebrow-line {
    width: 55px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-cyan),

            var(--ul-logo-blue)
        );
}


/* ==========================================================
   13. TITLE
========================================================== */

.ul-gallery-irrigation__title {
    max-width: 790px;

    margin: 0;

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

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

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

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


/* ==========================================================
   14. TITLE ACCENT
========================================================== */

.ul-gallery-irrigation__title span {
    display: block;

    margin-top: .07em;

    color:
        var(--ul-logo-blue);
}


/* ==========================================================
   15. INTRO
========================================================== */

.ul-gallery-irrigation__intro {
    max-width: 530px;

    justify-self: end;
}


/* ==========================================================
   16. INTRO TEXT
========================================================== */

.ul-gallery-irrigation__intro > p {
    margin:
        0 0 27px;

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

    font-size:
        clamp(1.05rem, 1.06vw, 1.16rem);

    line-height: 1.7;
}


/* ==========================================================
   17. TAGS
========================================================== */

.ul-gallery-irrigation__tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


/* ==========================================================
   18. TAG
========================================================== */

.ul-gallery-irrigation__tags span {
    display: inline-flex;

    align-items: center;

    min-height: 38px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(49, 90, 152, .12);

    border-radius: 999px;

    color:
        var(--ul-blue-700);

    background:
        rgba(255, 255, 255, .66);

    box-shadow:
        var(--ul-shadow-xs);

    font-size: .84rem;

    font-weight: 600;

    line-height: 1;
}


/* ==========================================================
   19. TAG INDIVIDUAL ACCENTS
========================================================== */

.ul-gallery-irrigation__tags span:nth-child(1) {
    border-color:
        rgba(112, 186, 202, .25);

    background:
        var(--ul-surface-cyan);
}


.ul-gallery-irrigation__tags span:nth-child(2) {
    border-color:
        rgba(49, 90, 152, .20);

    background:
        var(--ul-surface-blue);
}


.ul-gallery-irrigation__tags span:nth-child(3) {
    border-color:
        rgba(126, 187, 80, .19);

    background:
        var(--ul-surface-green);
}


.ul-gallery-irrigation__tags span:nth-child(4) {
    border-color:
        rgba(112, 186, 202, .25);

    background:
        var(--ul-surface-cyan);
}


/* ==========================================================
   20. GALLERY HEADER
========================================================== */

.ul-gallery-irrigation__gallery-header {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        clamp(24px, 2.8vw, 36px);

    padding:
        17px 0;

    border-top:
        1px solid
        var(--ul-border);

    border-bottom:
        1px solid
        var(--ul-border);
}


/* ==========================================================
   21. GALLERY LABEL
========================================================== */

.ul-gallery-irrigation__gallery-label {
    display: flex;

    align-items: center;

    gap: 13px;
}


/* ==========================================================
   22. GALLERY ICON
========================================================== */

.ul-gallery-irrigation__gallery-icon {
    display: grid;

    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(112, 186, 202, .21);

    border-radius: 13px;

    color:
        var(--ul-logo-blue);

    background:

        linear-gradient(
            135deg,

            var(--ul-surface-cyan),

            var(--ul-surface-blue)
        );
}


.ul-gallery-irrigation__gallery-icon svg {
    width: 21px;
    height: 21px;
}


/* ==========================================================
   23. LABEL COPY
========================================================== */

.ul-gallery-irrigation__gallery-label > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-irrigation__gallery-label small {
    color:
        var(--ul-text-muted);

    font-size: .75rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-irrigation__gallery-label strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1.06rem;

    font-weight: 500;

    line-height: 1.1;
}


/* ==========================================================
   24. VIEWER NOTE
========================================================== */

.ul-gallery-irrigation__viewer-note {
    display: flex;

    align-items: center;

    gap: 10px;

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


/* ==========================================================
   25. VIEWER NOTE DOT
========================================================== */

.ul-gallery-irrigation__viewer-note > span {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-cyan);

    box-shadow:

        0 0 0 5px
        rgba(112, 186, 202, .10);
}


/* ==========================================================
   26. VIEWER NOTE TEXT
========================================================== */

.ul-gallery-irrigation__viewer-note p {
    margin: 0;

    font-size: .90rem;

    line-height: 1.45;
}


/* ==========================================================
   27. GALLERY

   Architectural 12-column composition.
========================================================== */

.ul-gallery-irrigation__gallery {
    position: relative;

    z-index: 2;

    display: grid;

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

    grid-template-rows:
        repeat(8, minmax(55px, 1fr));

    gap:
        clamp(12px, 1.15vw, 18px);

    min-height:
        clamp(620px, 52vw, 800px);
}


/* ==========================================================
   28. PHOTO BASE
========================================================== */

.ul-irrigation-photo {
    --ul-irrigation-x: 50%;
    --ul-irrigation-y: 50%;

    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(49, 90, 152, .12);

    border-radius:
        var(--ul-radius-lg);

    background:
        #DFECEA;

    box-shadow:
        var(--ul-shadow-sm);

    transition:

        transform .5s
        var(--ul-ease-expo),

        box-shadow .4s ease,

        border-color .35s ease;
}


/* ==========================================================
   29. PRIMARY
========================================================== */

.ul-irrigation-photo--primary {
    grid-column:
        1 / span 7;

    grid-row:
        1 / span 8;
}


/* ==========================================================
   30. SECONDARY A
========================================================== */

.ul-irrigation-photo--secondary-a {
    grid-column:
        8 / span 5;

    grid-row:
        1 / span 4;
}


/* ==========================================================
   31. SECONDARY B
========================================================== */

.ul-irrigation-photo--secondary-b {
    grid-column:
        8 / span 3;

    grid-row:
        5 / span 4;
}


/* ==========================================================
   32. SECONDARY C
========================================================== */

.ul-irrigation-photo--secondary-c {
    grid-column:
        11 / span 2;

    grid-row:
        5 / span 4;
}


/* ==========================================================
   33. LINK
========================================================== */

.ul-irrigation-photo__link {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* ==========================================================
   34. IMAGE
========================================================== */

.ul-irrigation-photo img {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    transform:
        scale(1.025);

    transition:

        transform .85s
        var(--ul-ease-expo),

        filter .55s ease;

    backface-visibility: hidden;
}


/* ==========================================================
   35. SHADE
========================================================== */

.ul-irrigation-photo__shade {
    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    opacity: .68;

    background:

        linear-gradient(
            180deg,

            rgba(20, 61, 67, .01) 24%,

            rgba(13, 51, 56, .03) 53%,

            rgba(9, 42, 44, .55) 100%
        );

    transition:
        opacity .4s ease;
}


/* ==========================================================
   36. POINTER LIGHT
========================================================== */

.ul-irrigation-photo__light {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(
            circle
            at
            var(--ul-irrigation-x)
            var(--ul-irrigation-y),

            rgba(255, 255, 255, .20),

            rgba(112, 186, 202, .08) 22%,

            transparent 50%
        );

    transition:
        opacity .35s ease;
}


/* ==========================================================
   37. VIEW
========================================================== */

.ul-irrigation-photo__view {
    position: absolute;

    z-index: 3;

    left: 17px;
    bottom: 16px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 41px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255, 255, 255, .20);

    border-radius: 12px;

    color:
        var(--ul-white);

    background:
        rgba(17, 60, 65, .52);

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

    backdrop-filter:
        blur(10px);

    font-size: .82rem;

    font-weight: 600;

    opacity: 0;

    transform:
        translateY(8px);

    transition:

        opacity .35s ease,

        transform .45s
        var(--ul-ease-expo),

        background-color .35s ease;
}


.ul-irrigation-photo__view svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================
   38. PHOTO HOVER
========================================================== */

.ul-irrigation-photo:hover {
    border-color:
        rgba(112, 186, 202, .33);

    transform:
        translateY(-4px);

    box-shadow:
        0 28px 60px
        rgba(40, 94, 103, .16);
}


.ul-irrigation-photo:hover img {
    transform:
        scale(1.075);

    filter:
        saturate(1.06)
        contrast(1.02);
}


.ul-irrigation-photo:hover
.ul-irrigation-photo__light {
    opacity: 1;
}


.ul-irrigation-photo:hover
.ul-irrigation-photo__shade {
    opacity: .92;
}


.ul-irrigation-photo:hover
.ul-irrigation-photo__view {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   39. FOOTER
========================================================== */

.ul-gallery-irrigation__footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

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

    padding-top:
        clamp(27px, 3vw, 38px);

    border-top:
        1px solid
        var(--ul-border);
}


/* ==========================================================
   40. FOOTER COPY
========================================================== */

.ul-gallery-irrigation__footer-copy {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* ==========================================================
   41. FOOTER DOT
========================================================== */

.ul-gallery-irrigation__footer-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-cyan);

    box-shadow:

        0 0 0 5px
        rgba(112, 186, 202, .10);
}


/* ==========================================================
   42. FOOTER COPY STACK
========================================================== */

.ul-gallery-irrigation__footer-copy > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-irrigation__footer-copy small {
    color:
        var(--ul-text-muted);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-irrigation__footer-copy strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1.05rem;

    font-weight: 500;
}


/* ==========================================================
   43. NEXT
========================================================== */

.ul-gallery-irrigation__next {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    min-height: 58px;

    padding:
        7px 7px
        7px 18px;

    border:
        1px solid
        rgba(49, 90, 152, .14);

    border-radius: 15px;

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

    background:
        rgba(255, 255, 255, .72);

    box-shadow:
        var(--ul-shadow-xs);

    transition:

        transform .42s
        var(--ul-ease-expo),

        border-color .35s ease,

        background-color .35s ease,

        box-shadow .35s ease;
}


/* ==========================================================
   44. NEXT COPY
========================================================== */

.ul-gallery-irrigation__next-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-irrigation__next-copy small {
    color:
        var(--ul-text-muted);

    font-size: .70rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-irrigation__next-copy strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1rem;

    font-weight: 500;
}


/* ==========================================================
   45. NEXT ICON
========================================================== */

.ul-gallery-irrigation__next-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            135deg,

            var(--ul-logo-blue),

            var(--ul-logo-cyan)
        );

    transition:
        transform .4s
        var(--ul-ease-expo);
}


.ul-gallery-irrigation__next-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   46. NEXT HOVER
========================================================== */

.ul-gallery-irrigation__next:hover {
    border-color:
        rgba(112, 186, 202, .35);

    background:
        var(--ul-white);

    transform:
        translateY(-3px);

    box-shadow:
        var(--ul-shadow-blue);
}


.ul-gallery-irrigation__next:hover
.ul-gallery-irrigation__next-icon {
    transform:
        translateX(3px);
}


/* ==========================================================
   47. SPECTRUM
========================================================== */

.ul-gallery-irrigation__spectrum {
    position: absolute;

    z-index: 4;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-cyan),

            var(--ul-logo-blue),

            var(--ul-green-500),

            var(--ul-logo-yellow)
        );
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-irrigation__header {
        grid-template-columns:
            minmax(0, 1.06fr)
            minmax(360px, .62fr);
    }


    .ul-gallery-irrigation__gallery {
        min-height:
            clamp(620px, 52vw, 800px);
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-irrigation {
        padding:
            92px 0
            86px;
    }


    .ul-gallery-irrigation__word {
        right: -12%;

        font-size:
            clamp(9rem, 23vw, 15rem);
    }


    .ul-gallery-irrigation__header {
        grid-template-columns: 1fr;

        gap: 37px;

        margin-bottom: 48px;
    }


    .ul-gallery-irrigation__intro {
        max-width: 680px;

        justify-self: start;
    }


    .ul-gallery-irrigation__title {
        max-width: 720px;

        font-size:
            clamp(3.2rem, 6.8vw, 4.75rem);
    }


    .ul-gallery-irrigation__gallery {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));

        grid-template-rows:
            repeat(8, 72px);

        min-height: auto;

        gap: 13px;
    }


    .ul-irrigation-photo--primary {
        grid-column:
            1 / span 4;

        grid-row:
            1 / span 8;
    }


    .ul-irrigation-photo--secondary-a {
        grid-column:
            5 / span 2;

        grid-row:
            1 / span 4;
    }


    .ul-irrigation-photo--secondary-b {
        grid-column:
            5 / span 2;

        grid-row:
            5 / span 2;
    }


    .ul-irrigation-photo--secondary-c {
        grid-column:
            5 / span 2;

        grid-row:
            7 / span 2;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-irrigation {
        padding:
            76px 0
            70px;
    }


    .ul-gallery-irrigation__word {
        top: 68px;
        right: -17%;

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


    .ul-gallery-irrigation__header {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 40px;
    }


    .ul-gallery-irrigation__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-irrigation__title {
        max-width: 620px;

        font-size:
            clamp(2.8rem, 8.7vw, 3.8rem);
    }


    .ul-gallery-irrigation__intro {
        max-width: 600px;

        justify-self: start;
    }


    .ul-gallery-irrigation__intro > p {
        font-size: 1rem;

        line-height: 1.64;
    }


    .ul-gallery-irrigation__gallery-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .ul-gallery-irrigation__viewer-note p {
        font-size: .87rem;
    }


    .ul-gallery-irrigation__gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: auto;

        min-height: 0;

        gap: 11px;
    }


    .ul-irrigation-photo--primary,
    .ul-irrigation-photo--secondary-a,
    .ul-irrigation-photo--secondary-b,
    .ul-irrigation-photo--secondary-c {
        grid-column: auto;
        grid-row: auto;

        height:
            clamp(260px, 44vw, 340px);
    }


    .ul-irrigation-photo--primary {
        grid-column:
            1 / -1;

        height:
            clamp(350px, 64vw, 460px);
    }


    .ul-irrigation-photo--secondary-c {
        grid-column:
            1 / -1;

        height:
            clamp(270px, 43vw, 340px);
    }


    .ul-irrigation-photo__view {
        opacity: 1;

        transform: none;
    }


    .ul-gallery-irrigation__footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-irrigation {
        padding:
            65px 0
            60px;
    }


    .ul-gallery-irrigation__topography {
        right: -570px;

        opacity: .36;
    }


    .ul-gallery-irrigation__word {
        top: 54px;
        right: -18%;

        font-size:
            clamp(6.2rem, 31vw, 8.8rem);
    }


    .ul-gallery-irrigation__header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 34px;
    }


    .ul-gallery-irrigation__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-irrigation__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-irrigation__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-irrigation__title {
        font-size:
            clamp(2.4rem, 10.6vw, 3.1rem);

        line-height: .95;
    }


    .ul-gallery-irrigation__intro {
        justify-self: start;
    }


    .ul-gallery-irrigation__intro > p {
        margin-bottom: 21px;

        font-size: .95rem;

        line-height: 1.60;
    }


    .ul-gallery-irrigation__tags {
        gap: 7px;
    }


    .ul-gallery-irrigation__tags span {
        min-height: 34px;

        padding:
            0 10px;

        font-size: .78rem;
    }


    .ul-gallery-irrigation__gallery-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

        margin-bottom: 18px;

        padding:
            15px 0;
    }


    .ul-gallery-irrigation__gallery-icon {
        width: 41px;
        height: 41px;

        border-radius: 12px;
    }


    .ul-gallery-irrigation__gallery-label strong {
        font-size: .98rem;
    }


    .ul-gallery-irrigation__viewer-note {
        align-items: flex-start;
    }


    .ul-gallery-irrigation__viewer-note p {
        font-size: .84rem;
    }


    .ul-gallery-irrigation__gallery {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: auto;

        min-height: 0;

        gap: 10px;
    }


    .ul-irrigation-photo--primary,
    .ul-irrigation-photo--secondary-a,
    .ul-irrigation-photo--secondary-b,
    .ul-irrigation-photo--secondary-c {
        grid-column: auto;
        grid-row: auto;

        height:
            clamp(270px, 78vw, 350px);

        border-radius: 17px;
    }


    .ul-irrigation-photo--primary {
        height:
            clamp(315px, 90vw, 405px);
    }


    .ul-irrigation-photo__view {
        left: 13px;
        bottom: 13px;

        min-height: 38px;

        padding:
            0 11px;

        font-size: .77rem;

        opacity: 1;

        transform: none;
    }


    .ul-gallery-irrigation__footer {
        align-items: stretch;

        flex-direction: column;

        gap: 18px;

        margin-top: 47px;
    }


    .ul-gallery-irrigation__next {
        justify-content: space-between;

        width: 100%;
    }


    .ul-gallery-irrigation__spectrum {
        height: 3px;
    }

}


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

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

    .ul-irrigation-photo,
    .ul-irrigation-photo img,
    .ul-irrigation-photo__shade,
    .ul-irrigation-photo__light,
    .ul-irrigation-photo__view,
    .ul-gallery-irrigation__next,
    .ul-gallery-irrigation__next-icon {
        animation: none !important;

        transition: none !important;
    }

}








































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   06. FENCING — 2026 REDESIGN

   Direction:
   • Warm architectural portfolio
   • Single-photo layout by design
   • Existing content preserved
   • Existing /img/fencing/f.jpg only
   • No counters
========================================================== */


/* ==========================================================
   01. ROOT
========================================================== */

.ul-gallery-fencing {
    position: relative;

    padding:
        clamp(108px, 9vw, 150px)
        0
        clamp(82px, 7vw, 112px);

    overflow: hidden;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            145deg,

            #FCFBF7 0%,

            #F8F5EE 42%,

            #F4F5ED 74%,

            #F7F8F2 100%
        );

    isolation: isolate;

    scroll-margin-top:
        calc(
            var(--ul-header-height) + 20px
        );
}


/* ==========================================================
   02. TOP TRANSITION
========================================================== */

.ul-gallery-fencing::before {
    content: "";

    position: absolute;

    z-index: 5;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-blue),

            var(--ul-logo-cyan),

            var(--ul-green-500),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red)
        );
}


/* ==========================================================
   03. LEFT DEPTH
========================================================== */

.ul-gallery-fencing::after {
    content: "";

    position: absolute;

    z-index: -5;

    top: 0;
    left: 0;

    width: 41%;
    height: 100%;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(189, 60, 53, .045),

            transparent
        );
}


/* ==========================================================
   04. AMBIENT
========================================================== */

.ul-gallery-fencing__ambient {
    position: absolute;

    z-index: -4;

    pointer-events: none;

    border-radius: 50%;
}


/* ==========================================================
   05. RED AMBIENT
========================================================== */

.ul-gallery-fencing__ambient--red {
    top: -370px;
    right: -330px;

    width: 760px;
    height: 760px;

    background:

        radial-gradient(
            circle,

            rgba(189, 60, 53, .10),

            rgba(189, 60, 53, .025) 45%,

            transparent 71%
        );
}


/* ==========================================================
   06. YELLOW AMBIENT
========================================================== */

.ul-gallery-fencing__ambient--yellow {
    left: -390px;
    bottom: -430px;

    width: 780px;
    height: 780px;

    background:

        radial-gradient(
            circle,

            rgba(241, 215, 55, .13),

            rgba(233, 145, 41, .025) 45%,

            transparent 72%
        );
}


/* ==========================================================
   07. TOPOGRAPHY
========================================================== */

.ul-gallery-fencing__topography {
    position: absolute;

    z-index: -3;

    top: -265px;
    right: -275px;

    width: 840px;
    height: 840px;

    pointer-events: none;

    opacity: .48;

    transform:
        rotate(-7deg);

    background:

        repeating-radial-gradient(
            ellipse at 44% 46%,

            transparent 0,

            transparent 39px,

            rgba(129, 83, 57, .027) 40px,

            rgba(129, 83, 57, .027) 41px,

            transparent 42px,

            transparent 77px
        ),

        repeating-radial-gradient(
            ellipse at 69% 68%,

            transparent 0,

            transparent 55px,

            rgba(189, 60, 53, .019) 56px,

            rgba(189, 60, 53, .019) 57px,

            transparent 58px,

            transparent 102px
        );
}


/* ==========================================================
   08. LARGE WORD
========================================================== */

.ul-gallery-fencing__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(45px, 5vw, 80px);

    right: -2%;

    pointer-events: none;

    user-select: none;

    color:
        rgba(143, 48, 44, .035);

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

    font-size:
        clamp(10rem, 21vw, 22rem);

    font-weight: 500;

    line-height: .76;

    letter-spacing: -.075em;

    white-space: nowrap;
}


/* ==========================================================
   09. HEADER
========================================================== */

.ul-gallery-fencing__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(360px, .62fr);

    align-items: end;

    gap:
        clamp(60px, 7vw, 115px);

    margin-bottom:
        clamp(52px, 5.5vw, 78px);
}


/* ==========================================================
   10. EYEBROW
========================================================== */

.ul-gallery-fencing__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--ul-logo-red);

    font-size:
        clamp(.82rem, .80vw, .90rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


/* ==========================================================
   11. EYEBROW DOT
========================================================== */

.ul-gallery-fencing__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-red);

    box-shadow:

        0 0 0 5px
        rgba(189, 60, 53, .10);
}


/* ==========================================================
   12. EYEBROW LINE
========================================================== */

.ul-gallery-fencing__eyebrow-line {
    width: 55px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

            var(--ul-logo-yellow)
        );
}


/* ==========================================================
   13. TITLE
========================================================== */

.ul-gallery-fencing__title {
    max-width: 820px;

    margin: 0;

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

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

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

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


/* ==========================================================
   14. TITLE ACCENT
========================================================== */

.ul-gallery-fencing__title span {
    display: block;

    margin-top: .07em;

    color:
        var(--ul-logo-red);
}


/* ==========================================================
   15. INTRO
========================================================== */

.ul-gallery-fencing__intro {
    max-width: 540px;

    justify-self: end;
}


/* ==========================================================
   16. INTRO COPY
========================================================== */

.ul-gallery-fencing__intro > p {
    margin:
        0 0 27px;

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

    font-size:
        clamp(1.05rem, 1.06vw, 1.16rem);

    line-height: 1.7;
}


/* ==========================================================
   17. TAGS
========================================================== */

.ul-gallery-fencing__tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


/* ==========================================================
   18. TAG BASE
========================================================== */

.ul-gallery-fencing__tags span {
    display: inline-flex;

    align-items: center;

    min-height: 38px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(189, 60, 53, .12);

    border-radius: 999px;

    color:
        var(--ul-red-700);

    background:
        rgba(255, 255, 255, .70);

    box-shadow:
        var(--ul-shadow-xs);

    font-size: .84rem;

    font-weight: 600;

    line-height: 1;
}


/* ==========================================================
   19. TAG ACCENTS
========================================================== */

.ul-gallery-fencing__tags span:nth-child(1) {
    border-color:
        rgba(189, 60, 53, .20);

    background:
        var(--ul-surface-red);
}


.ul-gallery-fencing__tags span:nth-child(2) {
    border-color:
        rgba(233, 145, 41, .22);

    background:
        var(--ul-surface-orange);
}


.ul-gallery-fencing__tags span:nth-child(3) {
    border-color:
        rgba(112, 186, 202, .20);

    background:
        var(--ul-surface-cyan);
}


.ul-gallery-fencing__tags span:nth-child(4) {
    border-color:
        rgba(241, 215, 55, .28);

    background:
        var(--ul-surface-yellow);
}


.ul-gallery-fencing__tags span:nth-child(5) {
    border-color:
        rgba(126, 187, 80, .18);

    background:
        var(--ul-surface-green);
}


/* ==========================================================
   20. FEATURE LAYOUT
========================================================== */

.ul-gallery-fencing__feature {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: stretch;

    gap:
        clamp(16px, 1.6vw, 24px);
}


/* ==========================================================
   21. MEDIA
========================================================== */

.ul-gallery-fencing__media {
    --ul-fencing-x: 50%;
    --ul-fencing-y: 50%;

    position: relative;

    min-width: 0;

    min-height:
        clamp(560px, 49vw, 760px);

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(126, 102, 77, .14);

    border-radius:
        var(--ul-radius-xl);

    background:
        #DDD8CC;

    box-shadow:

        0 27px 66px
        rgba(66, 54, 39, .12);

    transition:

        transform .5s
        var(--ul-ease-expo),

        box-shadow .4s ease,

        border-color .35s ease;
}


/* ==========================================================
   22. IMAGE LINK
========================================================== */

.ul-gallery-fencing__image-link {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* ==========================================================
   23. IMAGE
========================================================== */

.ul-gallery-fencing__image-link img {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    transform:
        scale(1.025);

    transition:

        transform .9s
        var(--ul-ease-expo),

        filter .55s ease;

    backface-visibility: hidden;
}


/* ==========================================================
   24. IMAGE SHADE
========================================================== */

.ul-gallery-fencing__image-shade {
    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    opacity: .68;

    background:

        linear-gradient(
            180deg,

            rgba(48, 31, 20, .01) 22%,

            rgba(45, 28, 18, .03) 54%,

            rgba(35, 21, 13, .60) 100%
        );

    transition:
        opacity .4s ease;
}


/* ==========================================================
   25. POINTER LIGHT
========================================================== */

.ul-gallery-fencing__image-light {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(
            circle
            at
            var(--ul-fencing-x)
            var(--ul-fencing-y),

            rgba(255, 255, 255, .18),

            rgba(241, 215, 55, .06) 22%,

            transparent 49%
        );

    transition:
        opacity .35s ease;
}


/* ==========================================================
   26. VIEW
========================================================== */

.ul-gallery-fencing__view {
    position: absolute;

    z-index: 3;

    left: 19px;
    bottom: 18px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 43px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255, 255, 255, .19);

    border-radius: 12px;

    color:
        var(--ul-white);

    background:
        rgba(57, 34, 22, .47);

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

    backdrop-filter:
        blur(11px);

    font-size: .83rem;

    font-weight: 600;

    opacity: 0;

    transform:
        translateY(9px);

    transition:

        opacity .35s ease,

        transform .45s
        var(--ul-ease-expo);
}


.ul-gallery-fencing__view svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================
   27. PHOTO HOVER
========================================================== */

.ul-gallery-fencing__media:hover {
    border-color:
        rgba(189, 60, 53, .23);

    transform:
        translateY(-4px);

    box-shadow:

        0 34px 74px
        rgba(61, 47, 34, .18);
}


.ul-gallery-fencing__media:hover img {
    transform:
        scale(1.07);

    filter:
        saturate(1.03)
        contrast(1.02);
}


.ul-gallery-fencing__media:hover
.ul-gallery-fencing__image-shade {
    opacity: .93;
}


.ul-gallery-fencing__media:hover
.ul-gallery-fencing__image-light {
    opacity: 1;
}


.ul-gallery-fencing__media:hover
.ul-gallery-fencing__view {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   28. SIDE PANEL
========================================================== */

.ul-gallery-fencing__panel {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        clamp(25px, 2.7vw, 38px);

    border:
        1px solid
        rgba(112, 87, 62, .13);

    border-radius:
        var(--ul-radius-xl);

    background:

        linear-gradient(
            155deg,

            rgba(255, 255, 255, .93),

            rgba(249, 245, 236, .82)
        );

    box-shadow:
        var(--ul-shadow-sm);

    overflow: hidden;
}


/* ==========================================================
   29. PANEL COLOR DETAIL
========================================================== */

.ul-gallery-fencing__panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 28px;

    width: 82px;
    height: 4px;

    border-radius:
        0 0 999px 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

            var(--ul-logo-yellow)
        );
}


/* ==========================================================
   30. PANEL TOP
========================================================== */

.ul-gallery-fencing__panel-top {
    display: flex;

    align-items: center;

    gap: 13px;

    padding-bottom: 25px;

    border-bottom:
        1px solid
        var(--ul-border);
}


/* ==========================================================
   31. PANEL ICON
========================================================== */

.ul-gallery-fencing__panel-icon {
    display: grid;

    place-items: center;

    width: 50px;
    height: 50px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(189, 60, 53, .14);

    border-radius: 15px;

    color:
        var(--ul-logo-red);

    background:
        var(--ul-surface-red);
}


.ul-gallery-fencing__panel-icon svg {
    width: 24px;
    height: 24px;
}


/* ==========================================================
   32. PANEL TOP COPY
========================================================== */

.ul-gallery-fencing__panel-top > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-fencing__panel-top small {
    color:
        var(--ul-text-muted);

    font-size: .73rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-fencing__panel-top strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1.18rem;

    font-weight: 500;
}


/* ==========================================================
   33. SERVICE LIST
========================================================== */

.ul-gallery-fencing__service-list {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 24px;
}


/* ==========================================================
   34. SERVICE ITEM
========================================================== */

.ul-gallery-fencing__service-item {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 51px;

    padding:
        8px 11px;

    border-radius: 13px;

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

    background:
        rgba(255, 255, 255, .54);

    border:
        1px solid
        rgba(91, 76, 59, .08);
}


/* ==========================================================
   35. SERVICE DOT
========================================================== */

.ul-gallery-fencing__service-item > span {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-red);

    box-shadow:

        0 0 0 4px
        rgba(189, 60, 53, .08);
}


.ul-gallery-fencing__service-item:nth-child(2) > span {
    background:
        var(--ul-logo-orange);
}


.ul-gallery-fencing__service-item:nth-child(3) > span {
    background:
        var(--ul-logo-cyan);
}


.ul-gallery-fencing__service-item:nth-child(4) > span {
    background:
        var(--ul-logo-yellow);
}


.ul-gallery-fencing__service-item:nth-child(5) > span {
    background:
        var(--ul-green-600);
}


/* ==========================================================
   36. SERVICE ITEM COPY
========================================================== */

.ul-gallery-fencing__service-item strong {
    color:
        var(--ul-forest-950);

    font-size: .96rem;

    font-weight: 600;

    line-height: 1.25;
}


/* ==========================================================
   37. PANEL NOTE
========================================================== */

.ul-gallery-fencing__panel-note {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-top: auto;

    padding-top: 27px;

    border-top:
        1px solid
        var(--ul-border);
}


/* ==========================================================
   38. PANEL NOTE ICON
========================================================== */

.ul-gallery-fencing__panel-note-icon {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-logo-blue);

    background:
        var(--ul-surface-blue);
}


.ul-gallery-fencing__panel-note-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   39. PANEL NOTE TEXT
========================================================== */

.ul-gallery-fencing__panel-note p {
    margin: 0;

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

    font-size: .90rem;

    line-height: 1.53;
}


/* ==========================================================
   40. FOOTER
========================================================== */

.ul-gallery-fencing__footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

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

    padding-top:
        clamp(27px, 3vw, 38px);

    border-top:
        1px solid
        var(--ul-border);
}


/* ==========================================================
   41. FOOTER CURRENT
========================================================== */

.ul-gallery-fencing__footer-copy {
    display: flex;

    align-items: center;

    gap: 12px;
}


/* ==========================================================
   42. FOOTER DOT
========================================================== */

.ul-gallery-fencing__footer-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-red);

    box-shadow:

        0 0 0 5px
        rgba(189, 60, 53, .09);
}


/* ==========================================================
   43. FOOTER STACK
========================================================== */

.ul-gallery-fencing__footer-copy > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-fencing__footer-copy small {
    color:
        var(--ul-text-muted);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-fencing__footer-copy strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1.05rem;

    font-weight: 500;
}


/* ==========================================================
   44. NEXT SERVICE
========================================================== */

.ul-gallery-fencing__next {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    min-height: 58px;

    padding:
        7px 7px
        7px 18px;

    border:
        1px solid
        rgba(233, 145, 41, .17);

    border-radius: 15px;

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

    background:
        rgba(255, 255, 255, .72);

    box-shadow:
        var(--ul-shadow-xs);

    transition:

        transform .42s
        var(--ul-ease-expo),

        border-color .35s ease,

        background-color .35s ease,

        box-shadow .35s ease;
}


/* ==========================================================
   45. NEXT COPY
========================================================== */

.ul-gallery-fencing__next-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-fencing__next-copy small {
    color:
        var(--ul-text-muted);

    font-size: .70rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-fencing__next-copy strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1rem;

    font-weight: 500;
}


/* ==========================================================
   46. NEXT ICON
========================================================== */

.ul-gallery-fencing__next-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            135deg,

            var(--ul-logo-orange),

            var(--ul-logo-red)
        );

    transition:
        transform .4s
        var(--ul-ease-expo);
}


.ul-gallery-fencing__next-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   47. NEXT HOVER
========================================================== */

.ul-gallery-fencing__next:hover {
    border-color:
        rgba(189, 60, 53, .28);

    background:
        var(--ul-white);

    transform:
        translateY(-3px);

    box-shadow:
        var(--ul-shadow-red);
}


.ul-gallery-fencing__next:hover
.ul-gallery-fencing__next-icon {
    transform:
        translateX(3px);
}


/* ==========================================================
   48. BOTTOM SPECTRUM
========================================================== */

.ul-gallery-fencing__spectrum {
    position: absolute;

    z-index: 4;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

            var(--ul-logo-yellow),

            var(--ul-green-500)
        );
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-fencing__header {
        grid-template-columns:
            minmax(0, 1.06fr)
            minmax(360px, .62fr);
    }


    .ul-gallery-fencing__feature {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .34fr);
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-fencing {
        padding:
            92px 0
            86px;
    }


    .ul-gallery-fencing__word {
        right: -12%;

        font-size:
            clamp(9rem, 23vw, 15rem);
    }


    .ul-gallery-fencing__header {
        grid-template-columns: 1fr;

        gap: 37px;

        margin-bottom: 48px;
    }


    .ul-gallery-fencing__intro {
        max-width: 680px;

        justify-self: start;
    }


    .ul-gallery-fencing__title {
        max-width: 760px;

        font-size:
            clamp(3.2rem, 6.8vw, 4.75rem);
    }


    .ul-gallery-fencing__feature {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, .40fr);

        gap: 15px;
    }


    .ul-gallery-fencing__media {
        min-height: 590px;
    }


    .ul-gallery-fencing__panel {
        padding: 25px 21px;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-fencing {
        padding:
            76px 0
            70px;
    }


    .ul-gallery-fencing__word {
        top: 68px;
        right: -17%;

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


    .ul-gallery-fencing__header {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 40px;
    }


    .ul-gallery-fencing__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-fencing__title {
        max-width: 620px;

        font-size:
            clamp(2.8rem, 8.7vw, 3.8rem);
    }


    .ul-gallery-fencing__intro {
        max-width: 600px;

        justify-self: start;
    }


    .ul-gallery-fencing__intro > p {
        font-size: 1rem;

        line-height: 1.64;
    }


    .ul-gallery-fencing__feature {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .ul-gallery-fencing__media {
        min-height: 0;

        height:
            clamp(420px, 72vw, 550px);
    }


    .ul-gallery-fencing__view {
        opacity: 1;

        transform: none;
    }


    .ul-gallery-fencing__panel {
        padding: 27px;
    }


    .ul-gallery-fencing__service-list {
        display: grid;

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


    .ul-gallery-fencing__panel-note {
        margin-top: 26px;
    }


    .ul-gallery-fencing__footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-fencing {
        padding:
            65px 0
            60px;
    }


    .ul-gallery-fencing__topography {
        right: -580px;

        opacity: .34;
    }


    .ul-gallery-fencing__word {
        top: 54px;
        right: -19%;

        font-size:
            clamp(6.2rem, 31vw, 8.8rem);
    }


    .ul-gallery-fencing__header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 34px;
    }


    .ul-gallery-fencing__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-fencing__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-fencing__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-fencing__title {
        font-size:
            clamp(2.4rem, 10.6vw, 3.1rem);

        line-height: .95;
    }


    .ul-gallery-fencing__intro {
        justify-self: start;
    }


    .ul-gallery-fencing__intro > p {
        margin-bottom: 21px;

        font-size: .95rem;

        line-height: 1.60;
    }


    .ul-gallery-fencing__tags {
        gap: 7px;
    }


    .ul-gallery-fencing__tags span {
        min-height: 34px;

        padding:
            0 10px;

        font-size: .78rem;
    }


    .ul-gallery-fencing__feature {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .ul-gallery-fencing__media {
        min-height: 0;

        height:
            clamp(330px, 94vw, 430px);

        border-radius: 18px;
    }


    .ul-gallery-fencing__view {
        left: 13px;
        bottom: 13px;

        min-height: 38px;

        padding:
            0 11px;

        font-size: .77rem;

        opacity: 1;

        transform: none;
    }


    .ul-gallery-fencing__panel {
        padding:
            24px 18px;

        border-radius: 18px;
    }


    .ul-gallery-fencing__panel::before {
        left: 18px;

        width: 65px;
    }


    .ul-gallery-fencing__panel-icon {
        width: 45px;
        height: 45px;

        border-radius: 13px;
    }


    .ul-gallery-fencing__service-list {
        display: flex;

        flex-direction: column;

        gap: 7px;

        margin-top: 20px;
    }


    .ul-gallery-fencing__service-item {
        min-height: 47px;
    }


    .ul-gallery-fencing__panel-note {
        margin-top: 22px;

        padding-top: 22px;
    }


    .ul-gallery-fencing__panel-note p {
        font-size: .86rem;
    }


    .ul-gallery-fencing__footer {
        align-items: stretch;

        flex-direction: column;

        gap: 18px;

        margin-top: 47px;
    }


    .ul-gallery-fencing__next {
        justify-content: space-between;

        width: 100%;
    }


    .ul-gallery-fencing__spectrum {
        height: 3px;
    }

}


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

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

    .ul-gallery-fencing__media,
    .ul-gallery-fencing__image-link img,
    .ul-gallery-fencing__image-shade,
    .ul-gallery-fencing__image-light,
    .ul-gallery-fencing__view,
    .ul-gallery-fencing__next,
    .ul-gallery-fencing__next-icon {
        animation: none !important;

        transition: none !important;
    }

}










































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   07. CONCRETE & STONEWORK — 2026

   • Existing 22-image series
   • Architectural stone palette
   • Bento photo composition
   • No decorative counters
   • Original 6-image progressive load behavior
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-gallery-hardscape {
    position: relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(84px, 7vw, 116px);

    overflow: hidden;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            145deg,

            #F7F6F1 0%,

            #EFEDE6 38%,

            #E9E7DF 70%,

            #F2F3EC 100%
        );

    isolation: isolate;

    scroll-margin-top:
        calc(
            var(--ul-header-height) + 20px
        );
}


/* ==========================================================
   TOP LINE
========================================================== */

.ul-gallery-hardscape::before {
    content: "";

    position: absolute;

    z-index: 6;

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

    height: 4px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

            var(--ul-logo-yellow),

            var(--ul-green-500),

            var(--ul-logo-cyan)
        );
}


/* ==========================================================
   BACKGROUND DEPTH
========================================================== */

.ul-gallery-hardscape::after {
    content: "";

    position: absolute;

    z-index: -5;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(118, 101, 75, .045),

            transparent 37%,

            rgba(126, 187, 80, .025) 74%,

            transparent
        );
}


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

.ul-gallery-hardscape__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-gallery-hardscape__ambient--gold {
    top: -360px;
    right: -300px;

    width: 760px;
    height: 760px;

    background:

        radial-gradient(
            circle,

            rgba(241, 215, 55, .16),

            rgba(233, 145, 41, .035) 45%,

            transparent 72%
        );
}


.ul-gallery-hardscape__ambient--green {
    left: -420px;
    bottom: -430px;

    width: 800px;
    height: 800px;

    background:

        radial-gradient(
            circle,

            rgba(126, 187, 80, .11),

            rgba(126, 187, 80, .025) 45%,

            transparent 72%
        );
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-gallery-hardscape__topography {
    position: absolute;

    z-index: -3;

    top: -270px;
    right: -290px;

    width: 850px;
    height: 850px;

    opacity: .50;

    pointer-events: none;

    transform:
        rotate(-7deg);

    background:

        repeating-radial-gradient(
            ellipse at 44% 44%,

            transparent 0,

            transparent 38px,

            rgba(82, 70, 55, .028) 39px,

            rgba(82, 70, 55, .028) 40px,

            transparent 41px,

            transparent 75px
        ),

        repeating-radial-gradient(
            ellipse at 70% 68%,

            transparent 0,

            transparent 54px,

            rgba(229, 173, 50, .027) 55px,

            rgba(229, 173, 50, .027) 56px,

            transparent 57px,

            transparent 101px
        );
}


/* ==========================================================
   EDITORIAL WORD
========================================================== */

.ul-gallery-hardscape__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(45px, 5vw, 80px);

    right: -4%;

    pointer-events: none;

    user-select: none;

    color:
        rgba(61, 64, 56, .035);

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

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

    font-weight: 500;

    line-height: .76;

    letter-spacing: -.075em;

    white-space: nowrap;
}


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

.ul-gallery-hardscape__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, .61fr);

    align-items: end;

    gap:
        clamp(60px, 7vw, 115px);

    margin-bottom:
        clamp(52px, 5.5vw, 78px);
}


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

.ul-gallery-hardscape__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--ul-yellow-700);

    font-size:
        clamp(.82rem, .80vw, .90rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


.ul-gallery-hardscape__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-orange);

    box-shadow:

        0 0 0 5px
        rgba(233, 145, 41, .10);
}


.ul-gallery-hardscape__eyebrow-line {
    width: 55px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red)
        );
}


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

.ul-gallery-hardscape__title {
    max-width: 810px;

    margin: 0;

    color:
        var(--ul-charcoal-950);

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

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

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


.ul-gallery-hardscape__title span {
    display: block;

    margin-top: .07em;

    color:
        var(--ul-yellow-700);
}


/* ==========================================================
   INTRO
========================================================== */

.ul-gallery-hardscape__intro {
    max-width: 535px;

    justify-self: end;
}


.ul-gallery-hardscape__intro > p {
    margin:
        0 0 27px;

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

    font-size:
        clamp(1.05rem, 1.06vw, 1.16rem);

    line-height: 1.70;
}


/* ==========================================================
   SERVICES
========================================================== */

.ul-gallery-hardscape__services {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.ul-gallery-hardscape__services span {
    display: inline-flex;

    align-items: center;

    min-height: 38px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(164, 124, 22, .16);

    border-radius: 999px;

    color:
        var(--ul-charcoal-800);

    background:
        rgba(255, 255, 255, .68);

    box-shadow:
        var(--ul-shadow-xs);

    font-size: .84rem;

    font-weight: 600;
}


.ul-gallery-hardscape__services span:nth-child(1) {
    background:
        var(--ul-surface-yellow);
}


.ul-gallery-hardscape__services span:nth-child(2) {
    background:
        var(--ul-surface-orange);
}


.ul-gallery-hardscape__services span:nth-child(3) {
    background:
        var(--ul-surface-green);
}


/* ==========================================================
   META BAR
========================================================== */

.ul-gallery-hardscape__bar {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        clamp(26px, 3vw, 40px);

    padding:
        18px 0;

    border-top:
        1px solid
        rgba(75, 80, 68, .13);

    border-bottom:
        1px solid
        rgba(75, 80, 68, .13);
}


.ul-gallery-hardscape__bar-left {
    display: flex;

    align-items: center;

    gap: 13px;
}


.ul-gallery-hardscape__bar-icon {
    display: grid;

    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(229, 173, 50, .22);

    border-radius: 13px;

    color:
        var(--ul-yellow-700);

    background:
        var(--ul-surface-yellow);
}


.ul-gallery-hardscape__bar-icon svg {
    width: 22px;
    height: 22px;
}


.ul-gallery-hardscape__bar-left > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-hardscape__bar-left small {
    color:
        var(--ul-text-muted);

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-hardscape__bar-left strong {
    color:
        var(--ul-charcoal-950);

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

    font-size: 1.07rem;

    font-weight: 500;
}


.ul-gallery-hardscape__bar-right {
    display: flex;

    align-items: center;

    gap: 10px;

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

    font-size: .91rem;

    line-height: 1.45;
}


.ul-gallery-hardscape__bar-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-orange);

    box-shadow:

        0 0 0 5px
        rgba(233, 145, 41, .09);
}


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

.ul-gallery-hardscape__grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    grid-auto-flow:
        dense;

    grid-auto-rows:
        clamp(72px, 5vw, 91px);

    gap:
        clamp(12px, 1.15vw, 18px);
}


/* ==========================================================
   PHOTO
========================================================== */

.ul-hardscape-photo {
    --ul-hardscape-x: 50%;
    --ul-hardscape-y: 50%;

    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(92, 84, 66, .13);

    border-radius:
        var(--ul-radius-lg);

    background:
        #DAD7CF;

    box-shadow:

        0 18px 42px
        rgba(67, 61, 47, .10);

    transition:

        transform .50s
        var(--ul-ease-expo),

        box-shadow .40s ease,

        border-color .35s ease;
}


/* ==========================================================
   BENTO PATTERN — GROUP OF 6
========================================================== */

.ul-hardscape-photo:nth-child(6n + 1) {
    grid-column:
        span 7;

    grid-row:
        span 6;
}


.ul-hardscape-photo:nth-child(6n + 2) {
    grid-column:
        span 5;

    grid-row:
        span 3;
}


.ul-hardscape-photo:nth-child(6n + 3) {
    grid-column:
        span 5;

    grid-row:
        span 3;
}


.ul-hardscape-photo:nth-child(6n + 4) {
    grid-column:
        span 4;

    grid-row:
        span 4;
}


.ul-hardscape-photo:nth-child(6n + 5) {
    grid-column:
        span 4;

    grid-row:
        span 4;
}


.ul-hardscape-photo:nth-child(6n + 6) {
    grid-column:
        span 4;

    grid-row:
        span 4;
}


/* ==========================================================
   JS DEFERRED
========================================================== */

.ul-hardscape-photo.is-deferred {
    display: none;
}


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

.ul-hardscape-photo.is-revealing {
    animation:
        ulHardscapeReveal
        .72s
        var(--ul-ease-expo)
        both;
}


@keyframes ulHardscapeReveal {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(.985);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ==========================================================
   LINK
========================================================== */

.ul-hardscape-photo__link {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* ==========================================================
   IMAGE
========================================================== */

.ul-hardscape-photo img {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    transform:
        scale(1.025);

    transition:

        transform .90s
        var(--ul-ease-expo),

        filter .55s ease;

    backface-visibility: hidden;
}


/* ==========================================================
   SHADE
========================================================== */

.ul-hardscape-photo__shade {
    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    opacity: .69;

    background:

        linear-gradient(
            180deg,

            rgba(39, 35, 28, .01) 22%,

            rgba(39, 35, 28, .03) 54%,

            rgba(32, 29, 22, .58) 100%
        );

    transition:
        opacity .40s ease;
}


/* ==========================================================
   POINTER LIGHT
========================================================== */

.ul-hardscape-photo__light {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(
            circle
            at
            var(--ul-hardscape-x)
            var(--ul-hardscape-y),

            rgba(255, 255, 255, .19),

            rgba(241, 215, 55, .055) 22%,

            transparent 49%
        );

    transition:
        opacity .35s ease;
}


/* ==========================================================
   VIEW BUTTON
========================================================== */

.ul-hardscape-photo__view {
    position: absolute;

    z-index: 3;

    left: 17px;
    bottom: 16px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 41px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255, 255, 255, .20);

    border-radius: 12px;

    color:
        var(--ul-white);

    background:
        rgba(44, 39, 29, .50);

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

    backdrop-filter:
        blur(10px);

    font-size: .82rem;

    font-weight: 600;

    opacity: 0;

    transform:
        translateY(8px);

    transition:

        opacity .35s ease,

        transform .45s
        var(--ul-ease-expo);
}


.ul-hardscape-photo__view svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================
   HOVER
========================================================== */

.ul-hardscape-photo:hover {
    border-color:
        rgba(229, 173, 50, .32);

    transform:
        translateY(-4px);

    box-shadow:

        0 29px 62px
        rgba(60, 54, 40, .17);
}


.ul-hardscape-photo:hover img {
    transform:
        scale(1.075);

    filter:
        saturate(1.04)
        contrast(1.02);
}


.ul-hardscape-photo:hover
.ul-hardscape-photo__shade {
    opacity: .94;
}


.ul-hardscape-photo:hover
.ul-hardscape-photo__light {
    opacity: 1;
}


.ul-hardscape-photo:hover
.ul-hardscape-photo__view {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   IMAGE ERROR SAFETY
========================================================== */

.ul-hardscape-photo.has-image-error {
    min-height: 220px;

    background:

        linear-gradient(
            145deg,

            #E7E2D7,

            #D8D4C9
        );
}


.ul-hardscape-photo.has-image-error
.ul-hardscape-photo__link {
    pointer-events: none;
}


.ul-hardscape-photo.has-image-error img {
    display: none;
}


/* ==========================================================
   LOAD MORE
========================================================== */

.ul-gallery-hardscape__more {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap:
        clamp(25px, 4vw, 54px);

    margin-top:
        clamp(42px, 5vw, 67px);

    padding:
        24px 0;

    border-top:
        1px solid
        rgba(76, 79, 68, .13);

    border-bottom:
        1px solid
        rgba(76, 79, 68, .13);
}


.ul-gallery-hardscape__more-copy {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.ul-gallery-hardscape__more-copy small {
    color:
        var(--ul-yellow-700);

    font-size: .74rem;

    font-weight: 600;

    letter-spacing: .075em;

    text-transform: uppercase;
}


.ul-gallery-hardscape__more-copy strong {
    max-width: 380px;

    color:
        var(--ul-charcoal-900);

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

    font-size: 1.07rem;

    font-weight: 500;

    line-height: 1.36;
}


/* ==========================================================
   PROGRESS
========================================================== */

.ul-gallery-hardscape__progress {
    width: 100%;
}


.ul-gallery-hardscape__progress-track {
    width: 100%;
    height: 4px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(65, 68, 59, .10);
}


.ul-gallery-hardscape__progress-fill {
    display: block;

    width: 100%;
    height: 100%;

    transform:
        scaleX(.272727);

    transform-origin:
        left center;

    border-radius: inherit;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red),

            var(--ul-green-500),

            var(--ul-logo-blue)
        );

    transition:
        transform .70s
        var(--ul-ease-expo);
}


/* ==========================================================
   LOAD BUTTON
========================================================== */

.ul-gallery-hardscape__more-button {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 17px;

    min-height: 56px;

    padding:
        6px 7px
        6px 18px;

    border:
        1px solid
        rgba(164, 124, 22, .23);

    border-radius: 15px;

    color:
        var(--ul-charcoal-950);

    background:
        var(--ul-logo-yellow);

    box-shadow:
        var(--ul-shadow-gold);

    font-size: .88rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

    transition:

        color .35s ease,

        background-color .35s ease,

        transform .45s
        var(--ul-ease-expo),

        box-shadow .40s ease;
}


.ul-gallery-hardscape__more-icon {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:
        var(--ul-logo-orange);

    transition:

        background-color .35s ease,

        transform .40s
        var(--ul-ease-expo);
}


.ul-gallery-hardscape__more-icon svg {
    width: 18px;
    height: 18px;
}


.ul-gallery-hardscape__more-button:hover {
    color:
        var(--ul-white);

    background:
        var(--ul-logo-red);

    transform:
        translateY(-3px);

    box-shadow:
        var(--ul-shadow-red);
}


.ul-gallery-hardscape__more-button:hover
.ul-gallery-hardscape__more-icon {
    background:
        var(--ul-charcoal-900);

    transform:
        translateY(3px);
}


/* ==========================================================
   COMPLETE
========================================================== */

.ul-gallery-hardscape__more.is-complete {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 1fr);
}


.ul-gallery-hardscape__more.is-complete
.ul-gallery-hardscape__more-button {
    display: none;
}


.ul-gallery-hardscape__more.is-complete
.ul-gallery-hardscape__progress-fill {
    transform:
        scaleX(1);
}


/* ==========================================================
   FOOTER
========================================================== */

.ul-gallery-hardscape__footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

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

    padding-top:
        clamp(27px, 3vw, 38px);

    border-top:
        1px solid
        rgba(75, 80, 68, .13);
}


.ul-gallery-hardscape__footer-current {
    display: flex;

    align-items: center;

    gap: 12px;
}


.ul-gallery-hardscape__footer-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-yellow);

    box-shadow:

        0 0 0 5px
        rgba(241, 215, 55, .12);
}


.ul-gallery-hardscape__footer-current > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-hardscape__footer-current small {
    color:
        var(--ul-text-muted);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-hardscape__footer-current strong {
    color:
        var(--ul-charcoal-950);

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

    font-size: 1.05rem;

    font-weight: 500;
}


/* ==========================================================
   NEXT
========================================================== */

.ul-gallery-hardscape__next {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    min-height: 58px;

    padding:
        7px 7px
        7px 18px;

    border:
        1px solid
        rgba(49, 90, 152, .14);

    border-radius: 15px;

    color:
        var(--ul-charcoal-950);

    background:
        rgba(255, 255, 255, .70);

    box-shadow:
        var(--ul-shadow-xs);

    transition:

        transform .42s
        var(--ul-ease-expo),

        border-color .35s ease,

        background-color .35s ease,

        box-shadow .35s ease;
}


.ul-gallery-hardscape__next-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-hardscape__next-copy small {
    color:
        var(--ul-text-muted);

    font-size: .70rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-hardscape__next-copy strong {
    color:
        var(--ul-charcoal-950);

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

    font-size: 1rem;

    font-weight: 500;
}


.ul-gallery-hardscape__next-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            135deg,

            var(--ul-logo-blue),

            var(--ul-logo-cyan)
        );

    transition:
        transform .40s
        var(--ul-ease-expo);
}


.ul-gallery-hardscape__next-icon svg {
    width: 18px;
    height: 18px;
}


.ul-gallery-hardscape__next:hover {
    border-color:
        rgba(49, 90, 152, .28);

    background:
        var(--ul-white);

    transform:
        translateY(-3px);

    box-shadow:
        var(--ul-shadow-blue);
}


.ul-gallery-hardscape__next:hover
.ul-gallery-hardscape__next-icon {
    transform:
        translateX(3px);
}


/* ==========================================================
   SPECTRUM
========================================================== */

.ul-gallery-hardscape__spectrum {
    position: absolute;

    z-index: 5;

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

    height: 4px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-green-500),

            var(--ul-logo-cyan),

            var(--ul-logo-blue)
        );
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-hardscape__header {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(360px, .61fr);
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-hardscape {
        padding:
            92px 0
            86px;
    }


    .ul-gallery-hardscape__word {
        right: -15%;

        font-size:
            clamp(8.5rem, 22vw, 14rem);
    }


    .ul-gallery-hardscape__header {
        grid-template-columns: 1fr;

        gap: 38px;

        margin-bottom: 49px;
    }


    .ul-gallery-hardscape__intro {
        max-width: 680px;

        justify-self: start;
    }


    .ul-gallery-hardscape__title {
        max-width: 740px;

        font-size:
            clamp(3.2rem, 6.8vw, 4.75rem);
    }


    .ul-gallery-hardscape__grid {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));

        grid-auto-rows:
            87px;

        gap: 13px;
    }


    .ul-hardscape-photo:nth-child(6n + 1) {
        grid-column:
            span 4;

        grid-row:
            span 5;
    }


    .ul-hardscape-photo:nth-child(6n + 2) {
        grid-column:
            span 2;

        grid-row:
            span 3;
    }


    .ul-hardscape-photo:nth-child(6n + 3) {
        grid-column:
            span 2;

        grid-row:
            span 2;
    }


    .ul-hardscape-photo:nth-child(6n + 4),
    .ul-hardscape-photo:nth-child(6n + 5),
    .ul-hardscape-photo:nth-child(6n + 6) {
        grid-column:
            span 2;

        grid-row:
            span 3;
    }


    .ul-gallery-hardscape__more {
        grid-template-columns:
            minmax(210px, .8fr)
            minmax(170px, 1fr)
            auto;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-hardscape {
        padding:
            77px 0
            70px;
    }


    .ul-gallery-hardscape__word {
        top: 68px;
        right: -20%;

        font-size:
            clamp(7rem, 25vw, 10.5rem);
    }


    .ul-gallery-hardscape__header {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 40px;
    }


    .ul-gallery-hardscape__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-hardscape__title {
        max-width: 620px;

        font-size:
            clamp(2.8rem, 8.7vw, 3.8rem);
    }


    .ul-gallery-hardscape__intro {
        max-width: 600px;

        justify-self: start;
    }


    .ul-gallery-hardscape__intro > p {
        font-size: 1rem;

        line-height: 1.64;
    }


    .ul-gallery-hardscape__bar {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .ul-gallery-hardscape__bar-right {
        font-size: .87rem;
    }


    .ul-gallery-hardscape__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: auto;

        gap: 11px;
    }


    .ul-hardscape-photo,
    .ul-hardscape-photo:nth-child(6n + 1),
    .ul-hardscape-photo:nth-child(6n + 2),
    .ul-hardscape-photo:nth-child(6n + 3),
    .ul-hardscape-photo:nth-child(6n + 4),
    .ul-hardscape-photo:nth-child(6n + 5),
    .ul-hardscape-photo:nth-child(6n + 6) {
        grid-column: auto;
        grid-row: auto;

        height:
            clamp(255px, 43vw, 335px);
    }


    .ul-hardscape-photo:nth-child(5n + 1) {
        grid-column:
            1 / -1;

        height:
            clamp(340px, 61vw, 455px);
    }


    .ul-hardscape-photo__view {
        opacity: 1;

        transform: none;
    }


    .ul-gallery-hardscape__more {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .ul-gallery-hardscape__progress {
        order: 3;
    }


    .ul-gallery-hardscape__more-button {
        width: fit-content;
    }


    .ul-gallery-hardscape__more.is-complete {
        grid-template-columns: 1fr;
    }


    .ul-gallery-hardscape__footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-hardscape {
        padding:
            65px 0
            60px;
    }


    .ul-gallery-hardscape__topography {
        right: -590px;

        opacity: .34;
    }


    .ul-gallery-hardscape__word {
        top: 55px;
        right: -25%;

        font-size:
            clamp(6rem, 30vw, 8.5rem);
    }


    .ul-gallery-hardscape__header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 34px;
    }


    .ul-gallery-hardscape__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-hardscape__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-hardscape__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-hardscape__title {
        font-size:
            clamp(2.4rem, 10.6vw, 3.1rem);

        line-height: .95;
    }


    .ul-gallery-hardscape__intro {
        justify-self: start;
    }


    .ul-gallery-hardscape__intro > p {
        margin-bottom: 21px;

        font-size: .95rem;

        line-height: 1.60;
    }


    .ul-gallery-hardscape__services span {
        min-height: 34px;

        padding:
            0 10px;

        font-size: .78rem;
    }


    .ul-gallery-hardscape__bar {
        align-items: flex-start;

        flex-direction: column;

        gap: 13px;

        margin-bottom: 20px;

        padding:
            15px 0;
    }


    .ul-gallery-hardscape__bar-icon {
        width: 41px;
        height: 41px;
    }


    .ul-gallery-hardscape__bar-left strong {
        font-size: .98rem;
    }


    .ul-gallery-hardscape__bar-right {
        align-items: flex-start;

        font-size: .84rem;
    }


    .ul-gallery-hardscape__grid {
        grid-template-columns: 1fr;

        grid-auto-rows: auto;

        gap: 10px;
    }


    .ul-hardscape-photo,
    .ul-hardscape-photo:nth-child(6n + 1),
    .ul-hardscape-photo:nth-child(6n + 2),
    .ul-hardscape-photo:nth-child(6n + 3),
    .ul-hardscape-photo:nth-child(6n + 4),
    .ul-hardscape-photo:nth-child(6n + 5),
    .ul-hardscape-photo:nth-child(6n + 6),
    .ul-hardscape-photo:nth-child(5n + 1) {
        grid-column: auto;
        grid-row: auto;

        height:
            clamp(270px, 78vw, 350px);

        border-radius: 17px;
    }


    .ul-hardscape-photo:nth-child(4n + 1) {
        height:
            clamp(315px, 90vw, 405px);
    }


    .ul-hardscape-photo__view {
        left: 13px;
        bottom: 13px;

        min-height: 38px;

        padding:
            0 11px;

        font-size: .77rem;

        opacity: 1;

        transform: none;
    }


    .ul-gallery-hardscape__more {
        grid-template-columns: 1fr;

        gap: 17px;

        margin-top: 35px;

        padding:
            20px 0;
    }


    .ul-gallery-hardscape__progress {
        order: 3;
    }


    .ul-gallery-hardscape__more-button {
        width: 100%;

        min-height: 53px;

        font-size: .78rem;
    }


    .ul-gallery-hardscape__more.is-complete {
        grid-template-columns: 1fr;
    }


    .ul-gallery-hardscape__footer {
        align-items: stretch;

        flex-direction: column;

        gap: 18px;

        margin-top: 47px;
    }


    .ul-gallery-hardscape__next {
        justify-content: space-between;

        width: 100%;
    }


    .ul-gallery-hardscape__spectrum {
        height: 3px;
    }

}


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

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

    .ul-hardscape-photo,
    .ul-hardscape-photo img,
    .ul-hardscape-photo__shade,
    .ul-hardscape-photo__light,
    .ul-hardscape-photo__view,
    .ul-gallery-hardscape__progress-fill,
    .ul-gallery-hardscape__more-button,
    .ul-gallery-hardscape__more-icon,
    .ul-gallery-hardscape__next,
    .ul-gallery-hardscape__next-icon {
        animation: none !important;

        transition: none !important;
    }


    .ul-hardscape-photo.is-revealing {
        animation: none !important;
    }

}













































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   08. DRAINAGE SOLUTIONS — 2026

   • Existing single image only
   • Exact /img/drainage/d.jpg route stays in HTML
   • Dark teal / green editorial layout
   • Original copy and services preserved
   • No counters
   • Viewer integration preserved
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-gallery-drainage {
    position: relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(84px, 7vw, 116px);

    overflow: hidden;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            145deg,

            #12382E 0%,

            #16453A 34%,

            #195348 68%,

            #123C32 100%
        );

    isolation: isolate;

    scroll-margin-top:
        calc(
            var(--ul-header-height) + 20px
        );
}


/* ==========================================================
   TOP TRANSITION
========================================================== */

.ul-gallery-drainage::before {
    content: "";

    position: absolute;

    z-index: 6;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-yellow),

            var(--ul-green-500),

            var(--ul-logo-cyan),

            var(--ul-logo-blue)
        );
}


/* ==========================================================
   BOTTOM DEPTH
========================================================== */

.ul-gallery-drainage::after {
    content: "";

    position: absolute;

    z-index: -5;

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

    height: 42%;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            transparent,

            rgba(4, 23, 20, .28)
        );
}


/* ==========================================================
   AMBIENTS
========================================================== */

.ul-gallery-drainage__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-gallery-drainage__ambient--cyan {
    top: -350px;
    right: -310px;

    width: 780px;
    height: 780px;

    background:

        radial-gradient(
            circle,

            rgba(112, 186, 202, .18),

            rgba(112, 186, 202, .045) 44%,

            transparent 72%
        );
}


.ul-gallery-drainage__ambient--green {
    left: -390px;
    bottom: -440px;

    width: 800px;
    height: 800px;

    background:

        radial-gradient(
            circle,

            rgba(167, 213, 118, .13),

            rgba(126, 187, 80, .025) 46%,

            transparent 72%
        );
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-gallery-drainage__topography {
    position: absolute;

    z-index: -3;

    top: -270px;
    right: -270px;

    width: 850px;
    height: 850px;

    pointer-events: none;

    opacity: .45;

    transform:
        rotate(-8deg);

    background:

        repeating-radial-gradient(
            ellipse at 44% 44%,

            transparent 0,

            transparent 39px,

            rgba(255, 255, 255, .027) 40px,

            rgba(255, 255, 255, .027) 41px,

            transparent 42px,

            transparent 77px
        ),

        repeating-radial-gradient(
            ellipse at 69% 69%,

            transparent 0,

            transparent 55px,

            rgba(112, 186, 202, .035) 56px,

            rgba(112, 186, 202, .035) 57px,

            transparent 58px,

            transparent 102px
        );
}


/* ==========================================================
   EDITORIAL WORD
========================================================== */

.ul-gallery-drainage__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(44px, 5vw, 78px);

    right: -2%;

    pointer-events: none;

    user-select: none;

    color:
        rgba(255, 255, 255, .025);

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

    font-size:
        clamp(11rem, 22vw, 24rem);

    font-weight: 500;

    line-height: .76;

    letter-spacing: -.075em;

    white-space: nowrap;
}


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

.ul-gallery-drainage__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(370px, .62fr);

    align-items: end;

    gap:
        clamp(60px, 7vw, 115px);

    margin-bottom:
        clamp(52px, 5.5vw, 78px);
}


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

.ul-gallery-drainage__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--ul-logo-cyan);

    font-size:
        clamp(.82rem, .80vw, .90rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


.ul-gallery-drainage__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-cyan);

    box-shadow:

        0 0 0 5px
        rgba(112, 186, 202, .13);
}


.ul-gallery-drainage__eyebrow-line {
    width: 55px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-cyan),

            var(--ul-logo-blue)
        );
}


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

.ul-gallery-drainage__title {
    max-width: 810px;

    margin: 0;

    color:
        var(--ul-white);

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

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

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


.ul-gallery-drainage__title span {
    display: block;

    margin-top: .07em;

    color:
        var(--ul-logo-cyan);
}


/* ==========================================================
   INTRO
========================================================== */

.ul-gallery-drainage__intro {
    max-width: 535px;

    justify-self: end;
}


.ul-gallery-drainage__intro > p {
    margin:
        0 0 27px;

    color:
        rgba(255, 255, 255, .76);

    font-size:
        clamp(1.05rem, 1.06vw, 1.16rem);

    line-height: 1.70;
}


/* ==========================================================
   SERVICES
========================================================== */

.ul-gallery-drainage__services {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.ul-gallery-drainage__services span {
    display: inline-flex;

    align-items: center;

    min-height: 38px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255, 255, 255, .13);

    border-radius: 999px;

    color:
        rgba(255, 255, 255, .85);

    background:
        rgba(255, 255, 255, .055);

    font-size: .84rem;

    font-weight: 600;

    line-height: 1;
}


.ul-gallery-drainage__services span:nth-child(1) {
    border-color:
        rgba(112, 186, 202, .27);
}


.ul-gallery-drainage__services span:nth-child(2) {
    border-color:
        rgba(49, 90, 152, .26);
}


.ul-gallery-drainage__services span:nth-child(3) {
    border-color:
        rgba(167, 213, 118, .22);
}


/* ==========================================================
   META
========================================================== */

.ul-gallery-drainage__meta {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        clamp(25px, 2.8vw, 38px);

    padding:
        18px 0;

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

    border-bottom:
        1px solid
        rgba(255, 255, 255, .11);
}


/* ==========================================================
   META LEFT
========================================================== */

.ul-gallery-drainage__meta-left {
    display: flex;

    align-items: center;

    gap: 13px;
}


.ul-gallery-drainage__meta-icon {
    display: grid;

    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(112, 186, 202, .23);

    border-radius: 13px;

    color:
        var(--ul-logo-cyan);

    background:
        rgba(112, 186, 202, .075);
}


.ul-gallery-drainage__meta-icon svg {
    width: 22px;
    height: 22px;
}


.ul-gallery-drainage__meta-left > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-drainage__meta-left small {
    color:
        rgba(255, 255, 255, .51);

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-drainage__meta-left strong {
    color:
        rgba(255, 255, 255, .95);

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

    font-size: 1.06rem;

    font-weight: 500;
}


/* ==========================================================
   META RIGHT
========================================================== */

.ul-gallery-drainage__meta-right {
    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255, 255, 255, .62);

    font-size: .90rem;

    line-height: 1.45;
}


.ul-gallery-drainage__meta-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-cyan);

    box-shadow:

        0 0 0 5px
        rgba(112, 186, 202, .10);
}


/* ==========================================================
   SHOWCASE
========================================================== */

.ul-gallery-drainage__showcase {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(310px, .35fr);

    align-items: stretch;

    gap:
        clamp(16px, 1.6vw, 24px);
}


/* ==========================================================
   FEATURE IMAGE
========================================================== */

.ul-gallery-drainage__feature {
    --ul-drainage-x: 50%;
    --ul-drainage-y: 50%;

    position: relative;

    min-width: 0;

    min-height:
        clamp(570px, 49vw, 770px);

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(112, 186, 202, .15);

    border-radius:
        var(--ul-radius-xl);

    background:
        #173E37;

    box-shadow:

        0 28px 68px
        rgba(4, 24, 20, .25);

    transition:

        transform .50s
        var(--ul-ease-expo),

        box-shadow .40s ease,

        border-color .35s ease;
}


/* ==========================================================
   IMAGE LINK
========================================================== */

.ul-gallery-drainage__image-link {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* ==========================================================
   IMAGE
========================================================== */

.ul-gallery-drainage__image-link img {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    transform:
        scale(1.025);

    transition:

        transform .90s
        var(--ul-ease-expo),

        filter .55s ease;

    backface-visibility: hidden;
}


/* ==========================================================
   IMAGE SHADE
========================================================== */

.ul-gallery-drainage__image-shade {
    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            rgba(4, 30, 25, .03) 16%,

            rgba(4, 30, 25, .04) 53%,

            rgba(3, 24, 20, .66) 100%
        );

    opacity: .74;

    transition:
        opacity .40s ease;
}


/* ==========================================================
   POINTER LIGHT
========================================================== */

.ul-gallery-drainage__image-light {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(
            circle
            at
            var(--ul-drainage-x)
            var(--ul-drainage-y),

            rgba(255, 255, 255, .18),

            rgba(112, 186, 202, .075) 22%,

            transparent 50%
        );

    transition:
        opacity .35s ease;
}


/* ==========================================================
   IMAGE LABEL
========================================================== */

.ul-gallery-drainage__image-label {
    position: absolute;

    z-index: 3;

    top: 18px;
    left: 18px;

    display: inline-flex;

    align-items: center;

    min-height: 38px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255, 255, 255, .18);

    border-radius: 999px;

    color:
        rgba(255, 255, 255, .86);

    background:
        rgba(12, 55, 48, .40);

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

    backdrop-filter:
        blur(11px);

    font-size: .80rem;

    font-weight: 600;

    letter-spacing: .035em;

    text-transform: uppercase;
}


/* ==========================================================
   VIEW
========================================================== */

.ul-gallery-drainage__view {
    position: absolute;

    z-index: 3;

    left: 18px;
    bottom: 17px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 43px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255, 255, 255, .20);

    border-radius: 12px;

    color:
        var(--ul-white);

    background:
        rgba(8, 43, 38, .48);

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

    backdrop-filter:
        blur(11px);

    font-size: .83rem;

    font-weight: 600;

    opacity: 0;

    transform:
        translateY(9px);

    transition:

        opacity .35s ease,

        transform .45s
        var(--ul-ease-expo);
}


.ul-gallery-drainage__view svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================
   FEATURE HOVER
========================================================== */

.ul-gallery-drainage__feature:hover {
    border-color:
        rgba(112, 186, 202, .34);

    transform:
        translateY(-4px);

    box-shadow:

        0 35px 78px
        rgba(3, 21, 17, .31);
}


.ul-gallery-drainage__feature:hover img {
    transform:
        scale(1.07);

    filter:
        saturate(1.05)
        contrast(1.02);
}


.ul-gallery-drainage__feature:hover
.ul-gallery-drainage__image-shade {
    opacity: .95;
}


.ul-gallery-drainage__feature:hover
.ul-gallery-drainage__image-light {
    opacity: 1;
}


.ul-gallery-drainage__feature:hover
.ul-gallery-drainage__view {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   PROJECT PANEL
========================================================== */

.ul-gallery-drainage__project {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        clamp(26px, 2.7vw, 38px);

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .13);

    border-radius:
        var(--ul-radius-xl);

    background:

        linear-gradient(
            155deg,

            rgba(255, 255, 255, .105),

            rgba(255, 255, 255, .050)
        );

    box-shadow:

        0 23px 56px
        rgba(4, 25, 20, .13);

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

    backdrop-filter:
        blur(16px);
}


/* ==========================================================
   PANEL TOP LINE
========================================================== */

.ul-gallery-drainage__project::before {
    content: "";

    position: absolute;

    top: 0;
    left: 28px;

    width: 82px;
    height: 4px;

    border-radius:
        0 0 999px 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-cyan),

            var(--ul-logo-blue),

            var(--ul-green-400)
        );
}


/* ==========================================================
   PROJECT TOP
========================================================== */

.ul-gallery-drainage__project-top {
    display: flex;

    align-items: center;

    gap: 13px;

    padding-bottom: 25px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .11);
}


/* ==========================================================
   PROJECT ICON
========================================================== */

.ul-gallery-drainage__project-icon {
    display: grid;

    place-items: center;

    width: 50px;
    height: 50px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(112, 186, 202, .23);

    border-radius: 15px;

    color:
        var(--ul-logo-cyan);

    background:
        rgba(112, 186, 202, .075);
}


.ul-gallery-drainage__project-icon svg {
    width: 24px;
    height: 24px;
}


/* ==========================================================
   PROJECT TOP COPY
========================================================== */

.ul-gallery-drainage__project-top > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-drainage__project-top small {
    color:
        rgba(255, 255, 255, .51);

    font-size: .73rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-drainage__project-top strong {
    color:
        var(--ul-white);

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

    font-size: 1.14rem;

    font-weight: 500;

    line-height: 1.2;
}


/* ==========================================================
   PROJECT COPY
========================================================== */

.ul-gallery-drainage__project-text {
    margin:
        26px 0;

    color:
        rgba(255, 255, 255, .72);

    font-size:
        clamp(.98rem, .95vw, 1.06rem);

    line-height: 1.65;
}


/* ==========================================================
   PROJECT SERVICES
========================================================== */

.ul-gallery-drainage__project-services {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.ul-gallery-drainage__project-services > div {
    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 49px;

    padding:
        8px 11px;

    border:
        1px solid
        rgba(255, 255, 255, .085);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .042);
}


.ul-gallery-drainage__project-services > div > span {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-cyan);

    box-shadow:

        0 0 0 4px
        rgba(112, 186, 202, .08);
}


.ul-gallery-drainage__project-services > div:nth-child(2) > span {
    background:
        var(--ul-logo-blue);
}


.ul-gallery-drainage__project-services > div:nth-child(3) > span {
    background:
        var(--ul-green-400);
}


.ul-gallery-drainage__project-services strong {
    color:
        rgba(255, 255, 255, .87);

    font-size: .95rem;

    font-weight: 600;
}


/* ==========================================================
   ESTIMATE CTA
========================================================== */

.ul-gallery-drainage__estimate {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    width: 100%;

    min-height: 58px;

    margin-top: auto;

    padding:
        7px 7px
        7px 18px;

    border:
        1px solid
        rgba(167, 213, 118, .23);

    border-radius: 15px;

    color:
        var(--forest-950, #2B5738);

    background:
        var(--ul-logo-yellow);

    box-shadow:

        0 16px 35px
        rgba(4, 24, 19, .16);

    font-size: .88rem;

    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: .025em;

    transition:

        color .35s ease,

        background-color .35s ease,

        transform .42s
        var(--ul-ease-expo),

        box-shadow .35s ease;
}


/* ==========================================================
   ESTIMATE ICON
========================================================== */

.ul-gallery-drainage__estimate-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:
        var(--ul-logo-blue);

    transition:
        transform .40s
        var(--ul-ease-expo);
}


.ul-gallery-drainage__estimate-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   ESTIMATE HOVER
========================================================== */

.ul-gallery-drainage__estimate:hover {
    color:
        var(--ul-white);

    background:
        var(--ul-logo-cyan);

    transform:
        translateY(-3px);

    box-shadow:
        var(--ul-shadow-blue);
}


.ul-gallery-drainage__estimate:hover
.ul-gallery-drainage__estimate-icon {
    transform:
        translateX(3px);
}


/* ==========================================================
   FOOTER
========================================================== */

.ul-gallery-drainage__footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

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

    padding-top:
        clamp(27px, 3vw, 38px);

    border-top:
        1px solid
        rgba(255, 255, 255, .11);
}


/* ==========================================================
   FOOTER CURRENT
========================================================== */

.ul-gallery-drainage__footer-copy {
    display: flex;

    align-items: center;

    gap: 12px;
}


.ul-gallery-drainage__footer-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-cyan);

    box-shadow:

        0 0 0 5px
        rgba(112, 186, 202, .10);
}


.ul-gallery-drainage__footer-copy > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-drainage__footer-copy small {
    color:
        rgba(255, 255, 255, .48);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-drainage__footer-copy strong {
    color:
        rgba(255, 255, 255, .92);

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

    font-size: 1.05rem;

    font-weight: 500;
}


/* ==========================================================
   NEXT SERVICE
========================================================== */

.ul-gallery-drainage__next {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    min-height: 58px;

    padding:
        7px 7px
        7px 18px;

    border:
        1px solid
        rgba(167, 213, 118, .18);

    border-radius: 15px;

    color:
        var(--ul-white);

    background:
        rgba(255, 255, 255, .055);

    transition:

        transform .42s
        var(--ul-ease-expo),

        background-color .35s ease,

        border-color .35s ease;
}


.ul-gallery-drainage__next-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-drainage__next-copy small {
    color:
        rgba(255, 255, 255, .48);

    font-size: .70rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-drainage__next-copy strong {
    color:
        var(--ul-white);

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

    font-size: 1rem;

    font-weight: 500;
}


.ul-gallery-drainage__next-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

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

    background:

        linear-gradient(
            135deg,

            var(--ul-green-400),

            var(--ul-logo-yellow)
        );

    transition:
        transform .40s
        var(--ul-ease-expo);
}


.ul-gallery-drainage__next-icon svg {
    width: 18px;
    height: 18px;
}


.ul-gallery-drainage__next:hover {
    border-color:
        rgba(167, 213, 118, .34);

    background:
        rgba(167, 213, 118, .095);

    transform:
        translateY(-3px);
}


.ul-gallery-drainage__next:hover
.ul-gallery-drainage__next-icon {
    transform:
        translateX(3px);
}


/* ==========================================================
   BOTTOM SPECTRUM
========================================================== */

.ul-gallery-drainage__spectrum {
    position: absolute;

    z-index: 5;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-cyan),

            var(--ul-logo-blue),

            var(--ul-green-500),

            var(--ul-logo-yellow)
        );
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-drainage__header {
        grid-template-columns:
            minmax(0, 1.06fr)
            minmax(370px, .62fr);
    }


    .ul-gallery-drainage__showcase {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(310px, .35fr);
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-drainage {
        padding:
            92px 0
            86px;
    }


    .ul-gallery-drainage__word {
        right: -12%;

        font-size:
            clamp(9rem, 23vw, 15rem);
    }


    .ul-gallery-drainage__header {
        grid-template-columns: 1fr;

        gap: 37px;

        margin-bottom: 48px;
    }


    .ul-gallery-drainage__intro {
        max-width: 680px;

        justify-self: start;
    }


    .ul-gallery-drainage__title {
        max-width: 750px;

        font-size:
            clamp(3.2rem, 6.8vw, 4.75rem);
    }


    .ul-gallery-drainage__showcase {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(255px, .40fr);

        gap: 15px;
    }


    .ul-gallery-drainage__feature {
        min-height: 590px;
    }


    .ul-gallery-drainage__project {
        padding:
            25px 21px;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-drainage {
        padding:
            76px 0
            70px;
    }


    .ul-gallery-drainage__word {
        top: 68px;
        right: -18%;

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


    .ul-gallery-drainage__header {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 40px;
    }


    .ul-gallery-drainage__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-drainage__title {
        max-width: 620px;

        font-size:
            clamp(2.8rem, 8.7vw, 3.8rem);
    }


    .ul-gallery-drainage__intro {
        max-width: 600px;

        justify-self: start;
    }


    .ul-gallery-drainage__intro > p {
        font-size: 1rem;

        line-height: 1.64;
    }


    .ul-gallery-drainage__meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .ul-gallery-drainage__showcase {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .ul-gallery-drainage__feature {
        min-height: 0;

        height:
            clamp(420px, 72vw, 550px);
    }


    .ul-gallery-drainage__view {
        opacity: 1;

        transform: none;
    }


    .ul-gallery-drainage__project {
        padding: 27px;
    }


    .ul-gallery-drainage__project-services {
        display: grid;

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


    .ul-gallery-drainage__project-services > div {
        align-items: flex-start;

        flex-direction: column;

        min-height: 86px;
    }


    .ul-gallery-drainage__estimate {
        margin-top: 27px;
    }


    .ul-gallery-drainage__footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-drainage {
        padding:
            65px 0
            60px;
    }


    .ul-gallery-drainage__topography {
        right: -590px;

        opacity: .32;
    }


    .ul-gallery-drainage__word {
        top: 54px;
        right: -21%;

        font-size:
            clamp(6.2rem, 31vw, 8.8rem);
    }


    .ul-gallery-drainage__header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 34px;
    }


    .ul-gallery-drainage__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-drainage__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-drainage__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-drainage__title {
        font-size:
            clamp(2.4rem, 10.6vw, 3.1rem);

        line-height: .95;
    }


    .ul-gallery-drainage__intro {
        justify-self: start;
    }


    .ul-gallery-drainage__intro > p {
        margin-bottom: 21px;

        font-size: .95rem;

        line-height: 1.60;
    }


    .ul-gallery-drainage__services {
        gap: 7px;
    }


    .ul-gallery-drainage__services span {
        min-height: 34px;

        padding:
            0 10px;

        font-size: .78rem;
    }


    .ul-gallery-drainage__meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

        margin-bottom: 20px;

        padding:
            15px 0;
    }


    .ul-gallery-drainage__meta-icon {
        width: 41px;
        height: 41px;

        border-radius: 12px;
    }


    .ul-gallery-drainage__meta-left strong {
        font-size: .98rem;
    }


    .ul-gallery-drainage__meta-right {
        align-items: flex-start;

        font-size: .84rem;
    }


    .ul-gallery-drainage__showcase {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .ul-gallery-drainage__feature {
        min-height: 0;

        height:
            clamp(330px, 94vw, 430px);

        border-radius: 18px;
    }


    .ul-gallery-drainage__image-label {
        top: 13px;
        left: 13px;

        min-height: 34px;

        padding:
            0 11px;

        font-size: .72rem;
    }


    .ul-gallery-drainage__view {
        left: 13px;
        bottom: 13px;

        min-height: 38px;

        padding:
            0 11px;

        font-size: .77rem;

        opacity: 1;

        transform: none;
    }


    .ul-gallery-drainage__project {
        padding:
            24px 18px;

        border-radius: 18px;
    }


    .ul-gallery-drainage__project::before {
        left: 18px;

        width: 66px;
    }


    .ul-gallery-drainage__project-icon {
        width: 45px;
        height: 45px;

        border-radius: 13px;
    }


    .ul-gallery-drainage__project-text {
        margin:
            22px 0;

        font-size: .94rem;

        line-height: 1.60;
    }


    .ul-gallery-drainage__project-services {
        display: flex;

        flex-direction: column;

        gap: 7px;
    }


    .ul-gallery-drainage__project-services > div {
        flex-direction: row;

        align-items: center;

        min-height: 47px;
    }


    .ul-gallery-drainage__estimate {
        min-height: 53px;

        margin-top: 23px;

        font-size: .78rem;
    }


    .ul-gallery-drainage__footer {
        align-items: stretch;

        flex-direction: column;

        gap: 18px;

        margin-top: 47px;
    }


    .ul-gallery-drainage__next {
        justify-content: space-between;

        width: 100%;
    }


    .ul-gallery-drainage__spectrum {
        height: 3px;
    }

}


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

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

    .ul-gallery-drainage__feature,
    .ul-gallery-drainage__image-link img,
    .ul-gallery-drainage__image-shade,
    .ul-gallery-drainage__image-light,
    .ul-gallery-drainage__view,
    .ul-gallery-drainage__estimate,
    .ul-gallery-drainage__estimate-icon,
    .ul-gallery-drainage__next,
    .ul-gallery-drainage__next-icon {
        animation: none !important;

        transition: none !important;
    }

}










































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   09. TREE SERVICES — 2026 REDESIGN

   • Visible name: Tree Services
   • Legacy anchor remains #gallery-property-services
   • 16 existing /img/tree/t (...) images
   • Original 8 + 8 progressive behavior
   • No visible counters
   • Dark forest editorial composition
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-gallery-tree {
    position: relative;

    padding:
        clamp(112px, 9vw, 158px)
        0
        clamp(86px, 7vw, 118px);

    overflow: hidden;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            145deg,

            #163520 0%,

            #1D4529 33%,

            #275736 68%,

            #193C25 100%
        );

    isolation: isolate;

    scroll-margin-top:
        calc(
            var(--ul-header-height) + 20px
        );
}


/* ==========================================================
   TOP SPECTRUM
========================================================== */

.ul-gallery-tree::before {
    content: "";

    position: absolute;

    z-index: 6;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-cyan),

            var(--ul-logo-blue),

            var(--ul-green-500),

            var(--ul-logo-yellow),

            var(--ul-logo-orange)
        );
}


/* ==========================================================
   BOTTOM SHADE
========================================================== */

.ul-gallery-tree::after {
    content: "";

    position: absolute;

    z-index: -5;

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

    height: 45%;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            transparent,

            rgba(5, 23, 12, .32)
        );
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-gallery-tree__topography {
    position: absolute;

    z-index: -4;

    top: -280px;
    left: -330px;

    width: 880px;
    height: 880px;

    pointer-events: none;

    opacity: .44;

    transform:
        rotate(8deg);

    background:

        repeating-radial-gradient(
            ellipse at 43% 44%,

            transparent 0,

            transparent 38px,

            rgba(255,255,255,.027) 39px,

            rgba(255,255,255,.027) 40px,

            transparent 41px,

            transparent 76px
        ),

        repeating-radial-gradient(
            ellipse at 68% 68%,

            transparent 0,

            transparent 54px,

            rgba(167,213,118,.039) 55px,

            rgba(167,213,118,.039) 56px,

            transparent 57px,

            transparent 101px
        );
}


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

.ul-gallery-tree__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-gallery-tree__ambient--green {
    top: -340px;
    right: -300px;

    width: 780px;
    height: 780px;

    background:

        radial-gradient(
            circle,

            rgba(167,213,118,.17),

            rgba(126,187,80,.045) 45%,

            transparent 72%
        );
}


.ul-gallery-tree__ambient--gold {
    left: 35%;
    bottom: -510px;

    width: 760px;
    height: 760px;

    background:

        radial-gradient(
            circle,

            rgba(241,215,55,.08),

            rgba(233,145,41,.018) 45%,

            transparent 72%
        );
}


/* ==========================================================
   EDITORIAL WORD
========================================================== */

.ul-gallery-tree__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(42px, 5vw, 76px);

    right: -2%;

    pointer-events: none;

    user-select: none;

    color:
        rgba(255,255,255,.025);

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

    font-size:
        clamp(11rem, 22vw, 24rem);

    font-weight: 500;

    line-height: .75;

    letter-spacing: -.075em;

    white-space: nowrap;
}


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

.ul-gallery-tree__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, .60fr);

    align-items: end;

    gap:
        clamp(62px, 7vw, 116px);

    margin-bottom:
        clamp(45px, 5vw, 70px);
}


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

.ul-gallery-tree__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--ul-green-400);

    font-size:
        clamp(.82rem, .80vw, .90rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


.ul-gallery-tree__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-orange);

    box-shadow:

        0 0 0 5px
        rgba(233,145,41,.12);
}


.ul-gallery-tree__eyebrow-line {
    width: 55px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-400),

            var(--ul-logo-yellow),

            var(--ul-logo-orange)
        );
}


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

.ul-gallery-tree__title {
    max-width: 820px;

    margin: 0;

    color:
        var(--ul-white);

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

    font-size:
        clamp(3.6rem, 5vw, 5.8rem);

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


.ul-gallery-tree__title span {
    display: block;

    margin-top: .07em;

    color:
        var(--ul-green-400);
}


/* ==========================================================
   INTRO
========================================================== */

.ul-gallery-tree__intro {
    max-width: 530px;

    justify-self: end;
}


.ul-gallery-tree__intro > p {
    margin:
        0 0 27px;

    color:
        rgba(255,255,255,.76);

    font-size:
        clamp(1.05rem, 1.06vw, 1.16rem);

    line-height: 1.70;
}


/* ==========================================================
   SERVICE TAGS
========================================================== */

.ul-gallery-tree__services {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.ul-gallery-tree__services span {
    display: inline-flex;

    align-items: center;

    min-height: 38px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 999px;

    color:
        rgba(255,255,255,.84);

    background:
        rgba(255,255,255,.055);

    font-size: .84rem;

    font-weight: 600;
}


.ul-gallery-tree__services span:nth-child(1) {
    border-color:
        rgba(167,213,118,.28);
}


.ul-gallery-tree__services span:nth-child(2) {
    border-color:
        rgba(233,145,41,.25);
}


.ul-gallery-tree__services span:nth-child(3) {
    border-color:
        rgba(241,215,55,.24);
}


/* ==========================================================
   SERVICE STRIP
========================================================== */

.ul-gallery-tree__service-strip {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 10px;

    margin-bottom:
        clamp(37px, 4vw, 55px);

    padding:
        12px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        var(--ul-radius-lg);

    background:
        rgba(255,255,255,.045);

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

    backdrop-filter:
        blur(12px);
}


/* ==========================================================
   SERVICE CARD
========================================================== */

.ul-gallery-tree__service {
    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 82px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 15px;

    background:
        rgba(255,255,255,.035);
}


/* ==========================================================
   SERVICE ICON
========================================================== */

.ul-gallery-tree__service-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 auto;

    border-radius: 14px;

    color:
        var(--ul-green-400);

    background:
        rgba(167,213,118,.085);
}


.ul-gallery-tree__service:nth-child(2)
.ul-gallery-tree__service-icon {
    color:
        var(--ul-logo-orange);

    background:
        rgba(233,145,41,.085);
}


.ul-gallery-tree__service:nth-child(3)
.ul-gallery-tree__service-icon {
    color:
        var(--ul-logo-yellow);

    background:
        rgba(241,215,55,.08);
}


.ul-gallery-tree__service-icon svg {
    width: 23px;
    height: 23px;
}


/* ==========================================================
   SERVICE COPY
========================================================== */

.ul-gallery-tree__service > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-tree__service small {
    color:
        rgba(255,255,255,.49);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-tree__service strong {
    color:
        var(--ul-white);

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

    font-size: 1.05rem;

    font-weight: 500;
}


/* ==========================================================
   BAR
========================================================== */

.ul-gallery-tree__bar {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        clamp(26px, 3vw, 40px);

    padding:
        18px 0;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.11);
}


/* ==========================================================
   BAR LEFT
========================================================== */

.ul-gallery-tree__bar-left {
    display: flex;

    align-items: center;

    gap: 13px;
}


.ul-gallery-tree__bar-icon {
    display: grid;

    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(167,213,118,.22);

    border-radius: 13px;

    color:
        var(--ul-green-400);

    background:
        rgba(167,213,118,.07);
}


.ul-gallery-tree__bar-icon svg {
    width: 21px;
    height: 21px;
}


.ul-gallery-tree__bar-left > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-tree__bar-left small {
    color:
        rgba(255,255,255,.50);

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-tree__bar-left strong {
    color:
        rgba(255,255,255,.95);

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

    font-size: 1.06rem;

    font-weight: 500;
}


/* ==========================================================
   BAR RIGHT
========================================================== */

.ul-gallery-tree__bar-right {
    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,.62);

    font-size: .90rem;

    line-height: 1.45;
}


.ul-gallery-tree__bar-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-yellow);

    box-shadow:

        0 0 0 5px
        rgba(241,215,55,.09);
}


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

.ul-gallery-tree__grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    grid-auto-flow:
        dense;

    grid-auto-rows:
        clamp(74px, 5.2vw, 94px);

    gap:
        clamp(12px, 1.15vw, 18px);
}


/* ==========================================================
   PHOTO BASE
========================================================== */

.ul-tree-photo {
    --ul-tree-x: 50%;
    --ul-tree-y: 50%;

    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        var(--ul-radius-lg);

    background:
        rgba(255,255,255,.05);

    box-shadow:

        0 18px 43px
        rgba(4,22,11,.18);

    transition:

        transform .5s
        var(--ul-ease-expo),

        border-color .35s ease,

        box-shadow .4s ease;
}


/* ==========================================================
   BENTO PATTERN — 8 IMAGE GROUP

   More vertical rhythm than Lawn.
========================================================== */

.ul-tree-photo:nth-child(8n + 1) {
    grid-column:
        span 5;

    grid-row:
        span 7;
}


.ul-tree-photo:nth-child(8n + 2) {
    grid-column:
        span 7;

    grid-row:
        span 4;
}


.ul-tree-photo:nth-child(8n + 3) {
    grid-column:
        span 4;

    grid-row:
        span 5;
}


.ul-tree-photo:nth-child(8n + 4) {
    grid-column:
        span 3;

    grid-row:
        span 5;
}


.ul-tree-photo:nth-child(8n + 5) {
    grid-column:
        span 5;

    grid-row:
        span 4;
}


.ul-tree-photo:nth-child(8n + 6) {
    grid-column:
        span 4;

    grid-row:
        span 4;
}


.ul-tree-photo:nth-child(8n + 7) {
    grid-column:
        span 3;

    grid-row:
        span 4;
}


.ul-tree-photo:nth-child(8n + 8) {
    grid-column:
        span 5;

    grid-row:
        span 4;
}


/* ==========================================================
   DEFERRED
   JS adds this class.
========================================================== */

.ul-tree-photo.is-deferred {
    display: none;
}


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

.ul-tree-photo.is-revealing {
    animation:
        ulTreeReveal
        .74s
        var(--ul-ease-expo)
        both;
}


@keyframes ulTreeReveal {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(.984);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ==========================================================
   LINK
========================================================== */

.ul-tree-photo__link {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* ==========================================================
   IMAGE
========================================================== */

.ul-tree-photo img {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    transform:
        scale(1.025);

    transition:

        transform .90s
        var(--ul-ease-expo),

        filter .55s ease;

    backface-visibility: hidden;
}


/* ==========================================================
   SHADE
========================================================== */

.ul-tree-photo__shade {
    position: absolute;

    z-index: 1;

    inset: 0;

    pointer-events: none;

    opacity: .70;

    background:

        linear-gradient(
            180deg,

            rgba(7,31,15,.01) 20%,

            rgba(7,31,15,.03) 53%,

            rgba(5,24,12,.62) 100%
        );

    transition:
        opacity .40s ease;
}


/* ==========================================================
   POINTER LIGHT
========================================================== */

.ul-tree-photo__light {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(
            circle
            at
            var(--ul-tree-x)
            var(--ul-tree-y),

            rgba(255,255,255,.18),

            rgba(167,213,118,.07) 23%,

            transparent 50%
        );

    transition:
        opacity .35s ease;
}


/* ==========================================================
   VIEW
========================================================== */

.ul-tree-photo__view {
    position: absolute;

    z-index: 3;

    left: 17px;
    bottom: 16px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 41px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255,255,255,.19);

    border-radius: 12px;

    color:
        var(--ul-white);

    background:
        rgba(10,45,22,.48);

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

    backdrop-filter:
        blur(11px);

    font-size: .82rem;

    font-weight: 600;

    opacity: 0;

    transform:
        translateY(8px);

    transition:

        opacity .35s ease,

        transform .45s
        var(--ul-ease-expo);
}


.ul-tree-photo__view svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================
   HOVER
========================================================== */

.ul-tree-photo:hover {
    border-color:
        rgba(167,213,118,.27);

    transform:
        translateY(-4px);

    box-shadow:

        0 30px 64px
        rgba(4,20,10,.25);
}


.ul-tree-photo:hover img {
    transform:
        scale(1.075);

    filter:
        saturate(1.04)
        contrast(1.02);
}


.ul-tree-photo:hover
.ul-tree-photo__shade {
    opacity: .94;
}


.ul-tree-photo:hover
.ul-tree-photo__light {
    opacity: 1;
}


.ul-tree-photo:hover
.ul-tree-photo__view {
    opacity: 1;

    transform:
        translateY(0);
}


/* ==========================================================
   ERROR FALLBACK
========================================================== */

.ul-tree-photo.has-image-error {
    background:

        linear-gradient(
            145deg,

            #294D31,

            #1C3B24
        );
}


.ul-tree-photo.has-image-error img {
    display: none;
}


.ul-tree-photo.has-image-error
.ul-tree-photo__link {
    pointer-events: none;
}


/* ==========================================================
   LOAD MORE
========================================================== */

.ul-gallery-tree__more {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(230px, .82fr)
        minmax(210px, 1fr)
        auto;

    align-items: center;

    gap:
        clamp(26px, 4vw, 55px);

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

    padding:
        24px 0;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.11);
}


/* ==========================================================
   MORE COPY
========================================================== */

.ul-gallery-tree__more-copy {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.ul-gallery-tree__more-copy small {
    color:
        var(--ul-logo-yellow);

    font-size: .74rem;

    font-weight: 600;

    letter-spacing: .075em;

    text-transform: uppercase;
}


.ul-gallery-tree__more-copy strong {
    max-width: 360px;

    color:
        rgba(255,255,255,.91);

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

    font-size: 1.07rem;

    font-weight: 500;

    line-height: 1.36;
}


/* ==========================================================
   PROGRESS
========================================================== */

.ul-gallery-tree__progress {
    width: 100%;
}


.ul-gallery-tree__progress-track {
    width: 100%;
    height: 4px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,.10);
}


.ul-gallery-tree__progress-fill {
    display: block;

    width: 100%;
    height: 100%;

    transform:
        scaleX(.5);

    transform-origin:
        left center;

    border-radius: inherit;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-400),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red),

            var(--ul-logo-cyan)
        );

    transition:
        transform .70s
        var(--ul-ease-expo);
}


/* ==========================================================
   LOAD BUTTON
========================================================== */

.ul-gallery-tree__more-button {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 17px;

    min-height: 56px;

    padding:
        6px 7px
        6px 18px;

    border:
        1px solid
        rgba(167,213,118,.25);

    border-radius: 15px;

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

    background:
        var(--ul-logo-yellow);

    box-shadow:

        0 18px 38px
        rgba(4,22,11,.18);

    font-size: .88rem;

    font-weight: 600;

    letter-spacing: .025em;

    text-transform: uppercase;

    transition:

        color .35s ease,

        background-color .35s ease,

        transform .45s
        var(--ul-ease-expo),

        box-shadow .40s ease;
}


/* ==========================================================
   MORE ICON
========================================================== */

.ul-gallery-tree__more-icon {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

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

    transition:

        transform .40s
        var(--ul-ease-expo),

        background-color .35s ease;
}


.ul-gallery-tree__more-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   MORE HOVER
========================================================== */

.ul-gallery-tree__more-button:hover {
    color:
        var(--ul-white);

    background:
        var(--ul-logo-orange);

    transform:
        translateY(-3px);

    box-shadow:

        0 22px 44px
        rgba(4,20,10,.24);
}


.ul-gallery-tree__more-button:hover
.ul-gallery-tree__more-icon {
    background:
        var(--ul-logo-red);

    transform:
        translateY(3px);
}


/* ==========================================================
   COMPLETE
========================================================== */

.ul-gallery-tree__more.is-complete {
    grid-template-columns:
        minmax(0,1fr)
        minmax(210px,1fr);
}


.ul-gallery-tree__more.is-complete
.ul-gallery-tree__more-button {
    display: none;
}


.ul-gallery-tree__more.is-complete
.ul-gallery-tree__progress-fill {
    transform:
        scaleX(1);
}


/* ==========================================================
   FINAL FOOTER
========================================================== */

.ul-gallery-tree__footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    margin-top:
        clamp(57px, 6vw, 88px);

    padding-top:
        clamp(28px, 3vw, 39px);

    border-top:
        1px solid
        rgba(255,255,255,.11);
}


/* ==========================================================
   FOOTER COPY
========================================================== */

.ul-gallery-tree__footer-copy {
    display: flex;

    align-items: center;

    gap: 12px;
}


.ul-gallery-tree__footer-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-green-400);

    box-shadow:

        0 0 0 5px
        rgba(167,213,118,.10);
}


.ul-gallery-tree__footer-copy > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-tree__footer-copy small {
    color:
        rgba(255,255,255,.49);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-tree__footer-copy strong {
    color:
        rgba(255,255,255,.93);

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

    font-size: 1.05rem;

    font-weight: 500;
}


/* ==========================================================
   NEXT
========================================================== */

.ul-gallery-tree__next {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    min-height: 58px;

    padding:
        7px 7px
        7px 18px;

    border:
        1px solid
        rgba(241,215,55,.20);

    border-radius: 15px;

    color:
        var(--ul-white);

    background:
        rgba(255,255,255,.055);

    transition:

        transform .42s
        var(--ul-ease-expo),

        background-color .35s ease,

        border-color .35s ease;
}


.ul-gallery-tree__next-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-tree__next-copy small {
    color:
        rgba(255,255,255,.49);

    font-size: .70rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-tree__next-copy strong {
    color:
        var(--ul-white);

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

    font-size: 1rem;

    font-weight: 500;
}


/* ==========================================================
   NEXT ICON
========================================================== */

.ul-gallery-tree__next-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

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

    background:

        linear-gradient(
            135deg,

            var(--ul-logo-yellow),

            var(--ul-logo-orange)
        );

    transition:
        transform .40s
        var(--ul-ease-expo);
}


.ul-gallery-tree__next-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   NEXT HOVER
========================================================== */

.ul-gallery-tree__next:hover {
    border-color:
        rgba(241,215,55,.36);

    background:
        rgba(241,215,55,.08);

    transform:
        translateY(-3px);
}


.ul-gallery-tree__next:hover
.ul-gallery-tree__next-icon {
    transform:
        translateX(3px);
}


/* ==========================================================
   SPECTRUM
========================================================== */

.ul-gallery-tree__spectrum {
    position: absolute;

    z-index: 5;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-500),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red),

            var(--ul-logo-blue)
        );
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-tree__header {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(360px, .60fr);
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-tree {
        padding:
            94px 0
            88px;
    }


    .ul-gallery-tree__word {
        right: -13%;

        font-size:
            clamp(9rem, 23vw, 15rem);
    }


    .ul-gallery-tree__header {
        grid-template-columns: 1fr;

        gap: 37px;

        margin-bottom: 43px;
    }


    .ul-gallery-tree__intro {
        max-width: 680px;

        justify-self: start;
    }


    .ul-gallery-tree__title {
        max-width: 750px;

        font-size:
            clamp(3.2rem, 6.8vw, 4.8rem);
    }


    .ul-gallery-tree__service-strip {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }


    .ul-gallery-tree__grid {
        grid-template-columns:
            repeat(6, minmax(0,1fr));

        grid-auto-rows:
            88px;

        gap: 13px;
    }


    .ul-tree-photo:nth-child(8n + 1) {
        grid-column:
            span 3;

        grid-row:
            span 6;
    }


    .ul-tree-photo:nth-child(8n + 2) {
        grid-column:
            span 3;

        grid-row:
            span 3;
    }


    .ul-tree-photo:nth-child(8n + 3) {
        grid-column:
            span 3;

        grid-row:
            span 3;
    }


    .ul-tree-photo:nth-child(8n + 4),
    .ul-tree-photo:nth-child(8n + 5),
    .ul-tree-photo:nth-child(8n + 6),
    .ul-tree-photo:nth-child(8n + 7) {
        grid-column:
            span 2;

        grid-row:
            span 3;
    }


    .ul-tree-photo:nth-child(8n + 8) {
        grid-column:
            span 4;

        grid-row:
            span 3;
    }


    .ul-gallery-tree__more {
        grid-template-columns:
            minmax(210px,.8fr)
            minmax(170px,1fr)
            auto;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-tree {
        padding:
            78px 0
            72px;
    }


    .ul-gallery-tree__word {
        top: 68px;
        right: -16%;

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


    .ul-gallery-tree__header {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 37px;
    }


    .ul-gallery-tree__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-tree__title {
        max-width: 620px;

        font-size:
            clamp(2.8rem, 8.7vw, 3.8rem);
    }


    .ul-gallery-tree__intro {
        max-width: 600px;

        justify-self: start;
    }


    .ul-gallery-tree__intro > p {
        font-size: 1rem;

        line-height: 1.64;
    }


    .ul-gallery-tree__service-strip {
        grid-template-columns: 1fr;

        padding: 10px;
    }


    .ul-gallery-tree__service {
        min-height: 72px;
    }


    .ul-gallery-tree__bar {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;
    }


    .ul-gallery-tree__bar-right {
        font-size: .87rem;
    }


    .ul-gallery-tree__grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        grid-auto-rows: auto;

        gap: 11px;
    }


    .ul-tree-photo,
    .ul-tree-photo:nth-child(8n + 1),
    .ul-tree-photo:nth-child(8n + 2),
    .ul-tree-photo:nth-child(8n + 3),
    .ul-tree-photo:nth-child(8n + 4),
    .ul-tree-photo:nth-child(8n + 5),
    .ul-tree-photo:nth-child(8n + 6),
    .ul-tree-photo:nth-child(8n + 7),
    .ul-tree-photo:nth-child(8n + 8) {
        grid-column: auto;
        grid-row: auto;

        height:
            clamp(265px, 45vw, 340px);
    }


    .ul-tree-photo:nth-child(4n + 1) {
        grid-column:
            1 / -1;

        height:
            clamp(350px, 64vw, 470px);
    }


    .ul-tree-photo__view {
        opacity: 1;

        transform: none;
    }


    .ul-gallery-tree__more {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .ul-gallery-tree__progress {
        order: 3;
    }


    .ul-gallery-tree__more-button {
        width: fit-content;
    }


    .ul-gallery-tree__more.is-complete {
        grid-template-columns: 1fr;
    }


    .ul-gallery-tree__footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-tree {
        padding:
            66px 0
            61px;
    }


    .ul-gallery-tree__topography {
        left: -600px;

        opacity: .32;
    }


    .ul-gallery-tree__word {
        top: 54px;
        right: -17%;

        font-size:
            clamp(6.2rem, 31vw, 8.8rem);
    }


    .ul-gallery-tree__header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 32px;
    }


    .ul-gallery-tree__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-tree__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-tree__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-tree__title {
        font-size:
            clamp(2.4rem, 10.6vw, 3.1rem);

        line-height: .95;
    }


    .ul-gallery-tree__intro {
        justify-self: start;
    }


    .ul-gallery-tree__intro > p {
        margin-bottom: 21px;

        font-size: .95rem;

        line-height: 1.60;
    }


    .ul-gallery-tree__services {
        gap: 7px;
    }


    .ul-gallery-tree__services span {
        min-height: 34px;

        padding:
            0 10px;

        font-size: .78rem;
    }


    .ul-gallery-tree__service-strip {
        grid-template-columns: 1fr;

        gap: 7px;

        margin-bottom: 32px;

        padding: 8px;

        border-radius: 17px;
    }


    .ul-gallery-tree__service {
        min-height: 67px;

        padding:
            10px 11px;
    }


    .ul-gallery-tree__service-icon {
        width: 43px;
        height: 43px;

        border-radius: 12px;
    }


    .ul-gallery-tree__service strong {
        font-size: .98rem;
    }


    .ul-gallery-tree__bar {
        align-items: flex-start;

        flex-direction: column;

        gap: 13px;

        margin-bottom: 20px;

        padding:
            15px 0;
    }


    .ul-gallery-tree__bar-icon {
        width: 41px;
        height: 41px;

        border-radius: 12px;
    }


    .ul-gallery-tree__bar-left strong {
        font-size: .98rem;
    }


    .ul-gallery-tree__bar-right {
        align-items: flex-start;

        font-size: .84rem;
    }


    .ul-gallery-tree__grid {
        grid-template-columns: 1fr;

        grid-auto-rows: auto;

        gap: 10px;
    }


    .ul-tree-photo,
    .ul-tree-photo:nth-child(8n + 1),
    .ul-tree-photo:nth-child(8n + 2),
    .ul-tree-photo:nth-child(8n + 3),
    .ul-tree-photo:nth-child(8n + 4),
    .ul-tree-photo:nth-child(8n + 5),
    .ul-tree-photo:nth-child(8n + 6),
    .ul-tree-photo:nth-child(8n + 7),
    .ul-tree-photo:nth-child(8n + 8),
    .ul-tree-photo:nth-child(4n + 1) {
        grid-column: auto;
        grid-row: auto;

        height:
            clamp(275px, 79vw, 355px);

        border-radius: 17px;
    }


    .ul-tree-photo:nth-child(4n + 1) {
        height:
            clamp(320px, 91vw, 405px);
    }


    .ul-tree-photo__view {
        left: 13px;
        bottom: 13px;

        min-height: 38px;

        padding:
            0 11px;

        font-size: .77rem;

        opacity: 1;

        transform: none;
    }


    .ul-gallery-tree__more {
        grid-template-columns: 1fr;

        gap: 17px;

        margin-top: 35px;

        padding:
            20px 0;
    }


    .ul-gallery-tree__more-copy strong {
        font-size: 1rem;
    }


    .ul-gallery-tree__progress {
        order: 3;
    }


    .ul-gallery-tree__more-button {
        width: 100%;

        min-height: 53px;

        font-size: .78rem;
    }


    .ul-gallery-tree__more.is-complete {
        grid-template-columns: 1fr;
    }


    .ul-gallery-tree__footer {
        align-items: stretch;

        flex-direction: column;

        gap: 18px;

        margin-top: 48px;
    }


    .ul-gallery-tree__next {
        justify-content: space-between;

        width: 100%;
    }


    .ul-gallery-tree__spectrum {
        height: 3px;
    }

}


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

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

    .ul-tree-photo,
    .ul-tree-photo img,
    .ul-tree-photo__shade,
    .ul-tree-photo__light,
    .ul-tree-photo__view,
    .ul-gallery-tree__progress-fill,
    .ul-gallery-tree__more-button,
    .ul-gallery-tree__more-icon,
    .ul-gallery-tree__next,
    .ul-gallery-tree__next-icon {
        animation: none !important;

        transition: none !important;
    }


    .ul-tree-photo.is-revealing {
        animation: none !important;
    }

}













































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   10. PROJECT CTA — 2026 REDESIGN

   • Original CTA content preserved
   • No decorative counters
   • Light closing editorial section
   • Deep green action panel
   • No images / no invented routes
========================================================== */


/* ==========================================================
   01. ROOT
========================================================== */

.ul-gallery-cta {
    position: relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(92px, 8vw, 130px);

    overflow: hidden;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            145deg,

            #FCFDF9 0%,

            #F7FAF3 48%,

            #F1F6EC 100%
        );

    isolation: isolate;

    scroll-margin-top:
        calc(
            var(--ul-header-height) + 20px
        );
}


/* ==========================================================
   02. TOP BRAND TRANSITION
========================================================== */

.ul-gallery-cta::before {
    content: "";

    position: absolute;

    z-index: 5;

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

    height: 4px;

    pointer-events: none;

    background:
        var(--ul-gradient-brand);
}


/* ==========================================================
   03. LEFT SURFACE
========================================================== */

.ul-gallery-cta::after {
    content: "";

    position: absolute;

    z-index: -5;

    top: 0;
    left: 0;

    width: 47%;
    height: 100%;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(126, 187, 80, .055),

            transparent
        );
}


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

.ul-gallery-cta__topography {
    position: absolute;

    z-index: -4;

    top: -320px;
    left: -360px;

    width: 900px;
    height: 900px;

    pointer-events: none;

    opacity: .47;

    transform:
        rotate(8deg);

    background:

        repeating-radial-gradient(
            ellipse at 44% 44%,

            transparent 0,

            transparent 38px,

            rgba(57, 101, 63, .033) 39px,

            rgba(57, 101, 63, .033) 40px,

            transparent 41px,

            transparent 76px
        ),

        repeating-radial-gradient(
            ellipse at 69% 68%,

            transparent 0,

            transparent 55px,

            rgba(126, 187, 80, .026) 56px,

            rgba(126, 187, 80, .026) 57px,

            transparent 58px,

            transparent 102px
        );
}


/* ==========================================================
   05. AMBIENT
========================================================== */

.ul-gallery-cta__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-gallery-cta__ambient--green {
    top: -330px;
    right: -280px;

    width: 760px;
    height: 760px;

    background:

        radial-gradient(
            circle,

            rgba(167, 213, 118, .17),

            rgba(126, 187, 80, .042) 46%,

            transparent 72%
        );
}


.ul-gallery-cta__ambient--yellow {
    left: 35%;
    bottom: -500px;

    width: 740px;
    height: 740px;

    background:

        radial-gradient(
            circle,

            rgba(241, 215, 55, .10),

            rgba(233, 145, 41, .018) 46%,

            transparent 72%
        );
}


/* ==========================================================
   06. EDITORIAL WORD
========================================================== */

.ul-gallery-cta__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(40px, 5vw, 72px);

    right: -2%;

    pointer-events: none;

    user-select: none;

    color:
        rgba(43, 87, 56, .034);

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

    font-size:
        clamp(11rem, 22vw, 24rem);

    font-weight: 500;

    line-height: .74;

    letter-spacing: -.075em;

    white-space: nowrap;
}


/* ==========================================================
   07. TOP META
========================================================== */

.ul-gallery-cta__top {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap:
        clamp(18px, 3vw, 40px);

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

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

    font-size:
        clamp(.79rem, .78vw, .87rem);

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: .07em;

    text-transform: uppercase;
}


/* ==========================================================
   08. TOP LINE
========================================================== */

.ul-gallery-cta__top-line {
    position: relative;

    display: block;

    width: 100%;
    height: 1px;

    overflow: hidden;

    background:
        var(--ul-border);
}


.ul-gallery-cta__top-line::after {
    content: "";

    position: absolute;

    inset: 0 auto 0 0;

    width: 36%;

    background:
        var(--ul-gradient-brand);
}


/* ==========================================================
   09. MAIN LAYOUT
========================================================== */

.ul-gallery-cta__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, .62fr);

    align-items: center;

    gap:
        clamp(70px, 8vw, 135px);
}


/* ==========================================================
   10. CONTENT
========================================================== */

.ul-gallery-cta__content {
    min-width: 0;

    max-width: 820px;
}


/* ==========================================================
   11. EYEBROW
========================================================== */

.ul-gallery-cta__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 21px;

    color:
        var(--ul-logo-red);

    font-size:
        clamp(.82rem, .80vw, .90rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .10em;

    text-transform: uppercase;
}


/* ==========================================================
   12. EYEBROW DOT
========================================================== */

.ul-gallery-cta__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-red);

    box-shadow:

        0 0 0 5px
        rgba(189, 60, 53, .10);
}


/* ==========================================================
   13. EYEBROW LINE
========================================================== */

.ul-gallery-cta__eyebrow-line {
    width: 54px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

            var(--ul-logo-yellow)
        );
}


/* ==========================================================
   14. TITLE
========================================================== */

.ul-gallery-cta__title {
    max-width: 810px;

    margin:
        0 0
        clamp(27px, 3vw, 38px);

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

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

    font-size:
        clamp(3.75rem, 5.3vw, 6.1rem);

    font-weight: 500;

    line-height: .92;

    letter-spacing: -.052em;
}


/* ==========================================================
   15. TITLE ACCENT
========================================================== */

.ul-gallery-cta__title span {
    display: block;

    margin-top: .07em;

    color:
        var(--ul-green-600);
}


/* ==========================================================
   16. DESCRIPTION
========================================================== */

.ul-gallery-cta__description {
    max-width: 690px;

    margin: 0;

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

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

    line-height: 1.72;
}


/* ==========================================================
   17. SUPPORT
========================================================== */

.ul-gallery-cta__support {
    display: flex;

    align-items: center;

    gap: 13px;

    width: fit-content;

    max-width: 520px;

    margin-top:
        clamp(32px, 4vw, 49px);

    padding-top: 21px;

    border-top:
        1px solid
        var(--ul-border);
}


/* ==========================================================
   18. SUPPORT ICON
========================================================== */

.ul-gallery-cta__support-icon {
    display: grid;

    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(126, 187, 80, .18);

    border-radius: 13px;

    color:
        var(--ul-green-700);

    background:
        var(--ul-surface-green);
}


.ul-gallery-cta__support-icon svg {
    width: 21px;
    height: 21px;
}


/* ==========================================================
   19. SUPPORT COPY
========================================================== */

.ul-gallery-cta__support p {
    margin: 0;

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

    font-size:
        clamp(.96rem, .94vw, 1.04rem);

    line-height: 1.48;
}


/* ==========================================================
   20. ACTION PANEL
========================================================== */

.ul-gallery-cta__action {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        clamp(31px, 3.3vw, 46px);

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius:
        var(--ul-radius-xl);

    color:
        var(--ul-white);

    background:

        linear-gradient(
            145deg,

            #254E32 0%,

            #2F623D 54%,

            #3E7548 100%
        );

    box-shadow:
        var(--ul-shadow-dark);

    isolation: isolate;
}


/* ==========================================================
   21. ACTION PANEL TEXTURE
========================================================== */

.ul-gallery-cta__action::before {
    content: "";

    position: absolute;

    z-index: -2;

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

    width: 560px;
    height: 560px;

    border-radius: 50%;

    pointer-events: none;

    background:

        radial-gradient(
            circle,

            rgba(167, 213, 118, .20),

            rgba(167, 213, 118, .04) 44%,

            transparent 70%
        );
}


/* ==========================================================
   22. PANEL TOPOGRAPHY
========================================================== */

.ul-gallery-cta__action::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -230px;
    bottom: -260px;

    width: 600px;
    height: 600px;

    pointer-events: none;

    opacity: .46;

    background:

        repeating-radial-gradient(
            ellipse at 45% 45%,

            transparent 0,

            transparent 32px,

            rgba(255, 255, 255, .033) 33px,

            rgba(255, 255, 255, .033) 34px,

            transparent 35px,

            transparent 65px
        );
}


/* ==========================================================
   23. ACTION SPECTRUM
========================================================== */

.ul-gallery-cta__action-spectrum {
    position: absolute;

    top: 0;
    left: 30px;

    width: 105px;
    height: 4px;

    border-radius:
        0 0 999px 999px;

    background:
        var(--ul-gradient-brand);
}


/* ==========================================================
   24. ACTION HEADING
========================================================== */

.ul-gallery-cta__action-heading {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom:
        clamp(28px, 3vw, 38px);
}


.ul-gallery-cta__action-heading > span {
    color:
        var(--ul-logo-yellow);

    font-size: .78rem;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.ul-gallery-cta__action-heading strong {
    max-width: 390px;

    color:
        var(--ul-white);

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

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

    font-weight: 500;

    line-height: 1.22;

    letter-spacing: -.025em;
}


/* ==========================================================
   25. PRIMARY BUTTON
========================================================== */

.ul-gallery-cta__button {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    width: 100%;

    min-height: 62px;

    padding:
        7px 7px
        7px 20px;

    border:
        1px solid
        rgba(241, 215, 55, .34);

    border-radius: 16px;

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

    background:
        var(--ul-logo-yellow);

    box-shadow:

        0 18px 36px
        rgba(12, 36, 20, .19);

    font-size: .91rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

    transition:

        color .35s ease,

        background-color .35s ease,

        transform .44s
        var(--ul-ease-expo),

        box-shadow .40s ease;
}


/* ==========================================================
   26. BUTTON ICON
========================================================== */

.ul-gallery-cta__button-icon {
    display: grid;

    place-items: center;

    width: 47px;
    height: 47px;

    flex: 0 0 auto;

    border-radius: 12px;

    color:
        var(--ul-white);

    background:
        var(--ul-logo-blue);

    transition:

        background-color .35s ease,

        transform .40s
        var(--ul-ease-expo);
}


.ul-gallery-cta__button-icon svg {
    width: 19px;
    height: 19px;
}


/* ==========================================================
   27. BUTTON HOVER
========================================================== */

.ul-gallery-cta__button:hover {
    color:
        var(--ul-white);

    background:
        var(--ul-logo-red);

    transform:
        translateY(-3px);

    box-shadow:

        0 24px 45px
        rgba(12, 36, 20, .25);
}


.ul-gallery-cta__button:hover
.ul-gallery-cta__button-icon {
    background:
        var(--ul-logo-orange);

    transform:
        translateX(3px);
}


/* ==========================================================
   28. PHONE
========================================================== */

.ul-gallery-cta__phone {
    display: grid;

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

    align-items: center;

    gap: 13px;

    min-height: 68px;

    margin-top: 12px;

    padding:
        10px 11px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius: 15px;

    color:
        var(--ul-white);

    background:
        rgba(255, 255, 255, .055);

    transition:

        background-color .35s ease,

        border-color .35s ease,

        transform .42s
        var(--ul-ease-expo);
}


/* ==========================================================
   29. PHONE ICON
========================================================== */

.ul-gallery-cta__phone-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    color:
        var(--ul-logo-cyan);

    background:
        rgba(112, 186, 202, .10);
}


.ul-gallery-cta__phone-icon svg {
    width: 20px;
    height: 20px;
}


/* ==========================================================
   30. PHONE COPY
========================================================== */

.ul-gallery-cta__phone-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-cta__phone-copy small {
    color:
        rgba(255, 255, 255, .58);

    font-size: .73rem;

    font-weight: 600;

    letter-spacing: .05em;

    text-transform: uppercase;
}


.ul-gallery-cta__phone-copy strong {
    color:
        var(--ul-white);

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

    font-size: 1.08rem;

    font-weight: 500;
}


/* ==========================================================
   31. PHONE ARROW
========================================================== */

.ul-gallery-cta__phone-arrow {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 10px;

    color:
        rgba(255, 255, 255, .72);

    background:
        rgba(255, 255, 255, .065);

    transition:
        transform .40s
        var(--ul-ease-expo);
}


.ul-gallery-cta__phone-arrow svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================
   32. PHONE HOVER
========================================================== */

.ul-gallery-cta__phone:hover {
    border-color:
        rgba(112, 186, 202, .28);

    background:
        rgba(112, 186, 202, .09);

    transform:
        translateY(-2px);
}


.ul-gallery-cta__phone:hover
.ul-gallery-cta__phone-arrow {
    transform:
        translateX(3px);
}


/* ==========================================================
   33. ACTION FOOT
========================================================== */

.ul-gallery-cta__action-foot {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top:
        clamp(28px, 3vw, 38px);

    padding-top: 20px;

    border-top:
        1px solid
        rgba(255, 255, 255, .11);
}


.ul-gallery-cta__action-foot > span {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-green-400);

    box-shadow:

        0 0 0 4px
        rgba(167, 213, 118, .09);
}


.ul-gallery-cta__action-foot p {
    margin: 0;

    color:
        rgba(255, 255, 255, .59);

    font-size: .84rem;

    font-weight: 500;
}


/* ==========================================================
   34. BOTTOM INFORMATION
========================================================== */

.ul-gallery-cta__bottom {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 12px;

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

    padding-top:
        clamp(27px, 3vw, 38px);

    border-top:
        1px solid
        var(--ul-border);
}


/* ==========================================================
   35. BOTTOM ITEM
========================================================== */

.ul-gallery-cta__bottom-item {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 96px;

    padding:
        17px 18px;

    border:
        1px solid
        rgba(75, 113, 77, .11);

    border-radius: 17px;

    background:
        rgba(255, 255, 255, .63);

    box-shadow:
        var(--ul-shadow-xs);

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

    backdrop-filter:
        blur(10px);
}


/* ==========================================================
   36. BOTTOM ICON
========================================================== */

.ul-gallery-cta__bottom-icon {
    display: grid;

    place-items: center;

    width: 47px;
    height: 47px;

    flex: 0 0 auto;

    border-radius: 14px;
}


.ul-gallery-cta__bottom-icon svg {
    width: 22px;
    height: 22px;
}


/* ==========================================================
   37. ICON COLORS
========================================================== */

.ul-gallery-cta__bottom-icon--green {
    color:
        var(--ul-green-700);

    background:
        var(--ul-surface-green);
}


.ul-gallery-cta__bottom-icon--blue {
    color:
        var(--ul-logo-blue);

    background:
        var(--ul-surface-blue);
}


.ul-gallery-cta__bottom-icon--orange {
    color:
        var(--ul-logo-orange);

    background:
        var(--ul-surface-orange);
}


/* ==========================================================
   38. BOTTOM COPY
========================================================== */

.ul-gallery-cta__bottom-item > div {
    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 0;
}


.ul-gallery-cta__bottom-item small {
    color:
        var(--ul-text-muted);

    font-size: .73rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-gallery-cta__bottom-item strong {
    color:
        var(--ul-forest-950);

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

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

    font-weight: 500;

    line-height: 1.3;
}


/* ==========================================================
   39. FOOTER HANDOFF
========================================================== */

.ul-gallery-cta__bottom-shape {
    position: absolute;

    z-index: -1;

    left: -4%;
    right: -4%;
    bottom: -1px;

    height:
        clamp(38px, 4vw, 65px);

    pointer-events: none;

    background:
        rgba(126, 187, 80, .035);

    clip-path:

        polygon(
            0 62%,
            12% 41%,
            27% 64%,
            43% 35%,
            59% 59%,
            76% 31%,
            100% 56%,
            100% 100%,
            0 100%
        );
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-cta__layout {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(360px, .62fr);
    }


    .ul-gallery-cta__action {
        max-width: 540px;

        justify-self: end;
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-cta {
        padding:
            94px 0
            102px;
    }


    .ul-gallery-cta__word {
        right: -13%;

        font-size:
            clamp(9rem, 23vw, 15rem);
    }


    .ul-gallery-cta__top {
        margin-bottom: 60px;
    }


    .ul-gallery-cta__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .65fr);

        gap: 48px;
    }


    .ul-gallery-cta__title {
        font-size:
            clamp(3.2rem, 6vw, 4.8rem);
    }


    .ul-gallery-cta__action {
        padding: 30px;
    }


    .ul-gallery-cta__bottom {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 9px;
    }


    .ul-gallery-cta__bottom-item {
        align-items: flex-start;

        min-height: 120px;

        padding: 15px;

        flex-direction: column;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-cta {
        padding:
            78px 0
            85px;
    }


    .ul-gallery-cta__word {
        top: 56px;
        right: -17%;

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


    .ul-gallery-cta__top {
        grid-template-columns:
            auto
            minmax(35px, 1fr);

        gap: 14px;

        margin-bottom: 48px;
    }


    .ul-gallery-cta__top > span:last-child {
        display: none;
    }


    .ul-gallery-cta__layout {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .ul-gallery-cta__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-cta__title {
        max-width: 620px;

        font-size:
            clamp(2.9rem, 8.8vw, 3.9rem);
    }


    .ul-gallery-cta__description {
        max-width: 610px;

        font-size: 1rem;

        line-height: 1.66;
    }


    .ul-gallery-cta__support p {
        font-size: .94rem;
    }


    .ul-gallery-cta__action {
        width: 100%;

        max-width: 620px;

        padding: 30px;
    }


    .ul-gallery-cta__bottom {
        grid-template-columns: 1fr;

        margin-top: 58px;
    }


    .ul-gallery-cta__bottom-item {
        min-height: 88px;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-cta {
        padding:
            66px 0
            72px;
    }


    .ul-gallery-cta__topography {
        left: -610px;

        opacity: .32;
    }


    .ul-gallery-cta__word {
        top: 52px;
        right: -18%;

        font-size:
            clamp(6.2rem, 31vw, 8.8rem);
    }


    .ul-gallery-cta__top {
        grid-template-columns:
            auto
            minmax(25px, 1fr);

        gap: 11px;

        margin-bottom: 39px;

        font-size: .69rem;
    }


    .ul-gallery-cta__top > span:last-child {
        display: none;
    }


    .ul-gallery-cta__layout {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .ul-gallery-cta__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-cta__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-cta__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-cta__title {
        margin-bottom: 23px;

        font-size:
            clamp(2.45rem, 10.8vw, 3.15rem);

        line-height: .94;
    }


    .ul-gallery-cta__description {
        font-size: .95rem;

        line-height: 1.61;
    }


    .ul-gallery-cta__support {
        margin-top: 29px;

        padding-top: 18px;
    }


    .ul-gallery-cta__support-icon {
        width: 42px;
        height: 42px;

        border-radius: 12px;
    }


    .ul-gallery-cta__support p {
        font-size: .90rem;
    }


    .ul-gallery-cta__action {
        padding:
            27px 18px;

        border-radius: 19px;
    }


    .ul-gallery-cta__action-spectrum {
        left: 18px;

        width: 74px;
    }


    .ul-gallery-cta__action-heading {
        margin-bottom: 24px;
    }


    .ul-gallery-cta__action-heading > span {
        font-size: .70rem;
    }


    .ul-gallery-cta__action-heading strong {
        font-size: 1.42rem;
    }


    .ul-gallery-cta__button {
        min-height: 56px;

        padding:
            6px 6px
            6px 15px;

        font-size: .78rem;
    }


    .ul-gallery-cta__button-icon {
        width: 43px;
        height: 43px;

        border-radius: 11px;
    }


    .ul-gallery-cta__phone {
        grid-template-columns:
            41px
            minmax(0, 1fr)
            31px;

        min-height: 64px;

        padding:
            9px;
    }


    .ul-gallery-cta__phone-icon {
        width: 41px;
        height: 41px;
    }


    .ul-gallery-cta__phone-copy small {
        font-size: .68rem;
    }


    .ul-gallery-cta__phone-copy strong {
        font-size: 1rem;
    }


    .ul-gallery-cta__action-foot {
        margin-top: 23px;

        padding-top: 17px;
    }


    .ul-gallery-cta__action-foot p {
        font-size: .80rem;
    }


    .ul-gallery-cta__bottom {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 48px;

        padding-top: 24px;
    }


    .ul-gallery-cta__bottom-item {
        min-height: 82px;

        padding:
            14px;

        border-radius: 15px;
    }


    .ul-gallery-cta__bottom-icon {
        width: 43px;
        height: 43px;

        border-radius: 12px;
    }


    .ul-gallery-cta__bottom-icon svg {
        width: 20px;
        height: 20px;
    }


    .ul-gallery-cta__bottom-item small {
        font-size: .68rem;
    }


    .ul-gallery-cta__bottom-item strong {
        font-size: .96rem;
    }

}


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

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

    .ul-gallery-cta__button,
    .ul-gallery-cta__button-icon,
    .ul-gallery-cta__phone,
    .ul-gallery-cta__phone-arrow {
        animation: none !important;

        transition: none !important;
    }

}









































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   SOD INSTALLATION — 2026

   6-image editorial bento
   Fullscreen Viewer compatible
   No decorative counters
   Content visible without JavaScript
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-gallery-sod {
    position: relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(95px, 7.5vw, 130px);

    overflow: hidden;

    color:
        var(--ul-text);

    background:
        linear-gradient(
            145deg,
            #F8FAF3 0%,
            #F1F6E9 44%,
            #F8FAF5 72%,
            #EEF5E6 100%
        );

    isolation: isolate;

    scroll-margin-top:
        var(--ul-scroll-offset);
}


/* ==========================================================
   TOP LINE
========================================================== */

.ul-gallery-sod::before {
    content: "";

    position: absolute;

    z-index: 6;

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

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--ul-green-700),
            var(--ul-green-400),
            var(--ul-logo-yellow),
            var(--ul-logo-cyan)
        );

    pointer-events: none;
}


/* ==========================================================
   BACKGROUND DEPTH
========================================================== */

.ul-gallery-sod::after {
    content: "";

    position: absolute;

    z-index: -5;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(126,187,80,.055),
            transparent 42%,
            rgba(112,186,202,.028)
        );

    pointer-events: none;
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-gallery-sod__topography {
    position: absolute;

    z-index: -4;

    top: -350px;
    right: -320px;

    width: 870px;
    height: 870px;

    opacity: .48;

    transform:
        rotate(-8deg);

    pointer-events: none;

    background:
        repeating-radial-gradient(
            ellipse at 45% 45%,
            transparent 0,
            transparent 38px,
            rgba(53,101,64,.030) 39px,
            rgba(53,101,64,.030) 40px,
            transparent 41px,
            transparent 76px
        ),
        repeating-radial-gradient(
            ellipse at 68% 69%,
            transparent 0,
            transparent 55px,
            rgba(112,186,202,.025) 56px,
            rgba(112,186,202,.025) 57px,
            transparent 58px,
            transparent 102px
        );
}


/* ==========================================================
   AMBIENTS
========================================================== */

.ul-gallery-sod__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-gallery-sod__ambient--green {
    left: -400px;
    bottom: -440px;

    width: 820px;
    height: 820px;

    background:
        radial-gradient(
            circle,
            rgba(167,213,118,.18),
            rgba(126,187,80,.035) 46%,
            transparent 72%
        );
}


.ul-gallery-sod__ambient--yellow {
    top: -340px;
    right: -350px;

    width: 760px;
    height: 760px;

    background:
        radial-gradient(
            circle,
            rgba(241,215,55,.12),
            rgba(233,145,41,.018) 47%,
            transparent 72%
        );
}


/* ==========================================================
   EDITORIAL WORD
========================================================== */

.ul-gallery-sod__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(40px, 5vw, 72px);

    right: -1%;

    color:
        rgba(43,87,56,.032);

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

    font-size:
        clamp(11rem, 22vw, 24rem);

    font-weight: 500;

    line-height: .75;

    letter-spacing: -.075em;

    white-space: nowrap;

    user-select: none;

    pointer-events: none;
}


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

.ul-gallery-sod__header {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: end;

    gap:
        clamp(60px,7vw,115px);

    margin-bottom:
        clamp(48px,5.3vw,76px);
}


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

.ul-gallery-sod__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--ul-green-700);

    font-size:
        clamp(.82rem,.80vw,.90rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


.ul-gallery-sod__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-red);

    box-shadow:
        0 0 0 5px
        rgba(189,60,53,.09);
}


.ul-gallery-sod__eyebrow-line {
    width: 58px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--ul-green-500),
            var(--ul-logo-yellow),
            var(--ul-logo-orange)
        );
}


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

.ul-gallery-sod__title {
    max-width: 790px;

    margin: 0;

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

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

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

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.052em;
}


.ul-gallery-sod__title span {
    display: block;

    margin-top: .06em;

    color:
        var(--ul-green-600);
}


/* ==========================================================
   INTRO
========================================================== */

.ul-gallery-sod__intro {
    max-width: 530px;

    justify-self: end;
}


.ul-gallery-sod__intro p {
    margin:
        0 0 25px;

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

    font-size:
        clamp(1.04rem,1.03vw,1.14rem);

    line-height: 1.68;
}


/* ==========================================================
   TAGS
========================================================== */

.ul-gallery-sod__tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.ul-gallery-sod__tags span {
    display: inline-flex;

    align-items: center;

    min-height: 35px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(75,113,77,.14);

    border-radius: 999px;

    color:
        var(--ul-forest-900);

    background:
        rgba(255,255,255,.67);

    font-size: .78rem;

    font-weight: 600;
}


.ul-gallery-sod__tags span:nth-child(2) {
    color:
        var(--ul-yellow-800);

    border-color:
        rgba(212,173,40,.17);

    background:
        var(--ul-surface-yellow);
}


.ul-gallery-sod__tags span:nth-child(3) {
    color:
        var(--ul-cyan-700);

    border-color:
        rgba(90,167,182,.17);

    background:
        var(--ul-surface-cyan);
}


/* ==========================================================
   INFO BAR
========================================================== */

.ul-gallery-sod__info {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        clamp(25px,5vw,65px);

    margin-bottom:
        clamp(22px,2.5vw,34px);

    padding:
        15px 17px;

    border:
        1px solid
        var(--ul-border);

    border-radius: 17px;

    background:
        rgba(255,255,255,.68);

    box-shadow:
        var(--ul-shadow-xs);

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

    backdrop-filter:
        blur(12px);
}


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

.ul-gallery-sod__info-title {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


.ul-gallery-sod__info-icon {
    display: grid;

    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    border-radius: 13px;

    color:
        var(--ul-green-700);

    background:
        var(--ul-surface-green);
}


.ul-gallery-sod__info-icon svg {
    width: 22px;
    height: 22px;
}


.ul-gallery-sod__info-title > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ul-gallery-sod__info-title span {
    color:
        var(--ul-text-muted);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .07em;

    text-transform: uppercase;
}


.ul-gallery-sod__info-title strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1.08rem;

    font-weight: 500;
}


/* ==========================================================
   INFO NOTE
========================================================== */

.ul-gallery-sod__info-note {
    display: flex;

    align-items: center;

    gap: 9px;

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


.ul-gallery-sod__info-note > span {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-cyan);

    box-shadow:
        0 0 0 4px
        rgba(112,186,202,.10);
}


.ul-gallery-sod__info-note p {
    margin: 0;

    font-size: .90rem;

    line-height: 1.45;
}


/* ==========================================================
   GALLERY GRID
========================================================== */

.ul-gallery-sod__grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    grid-auto-rows:
        clamp(210px,19vw,300px);

    gap:
        clamp(11px,1.2vw,17px);
}


/* ==========================================================
   PHOTO BASE
========================================================== */

.ul-gallery-sod__photo {
    --ul-sod-pointer-x: 50%;
    --ul-sod-pointer-y: 50%;

    --ul-sod-shift-x: 0px;
    --ul-sod-shift-y: 0px;

    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.78);

    border-radius:
        clamp(20px,2vw,28px);

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

    box-shadow:
        var(--ul-shadow-md);

    isolation: isolate;
}


/* ==========================================================
   BENTO POSITIONS
========================================================== */

.ul-gallery-sod__photo--primary {
    grid-column:
        span 7;

    grid-row:
        span 2;
}


.ul-gallery-sod__photo--secondary-a {
    grid-column:
        span 5;
}


.ul-gallery-sod__photo--secondary-b {
    grid-column:
        span 5;
}


.ul-gallery-sod__photo--secondary-c,
.ul-gallery-sod__photo--secondary-d,
.ul-gallery-sod__photo--secondary-e {
    grid-column:
        span 4;
}


/* ==========================================================
   PHOTO LINK
========================================================== */

.ul-gallery-sod__photo-link {
    position: absolute;

    inset: 0;

    display: block;

    overflow: hidden;

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


/* ==========================================================
   IMAGE
========================================================== */

.ul-gallery-sod__photo img {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    transform:
        translate3d(
            var(--ul-sod-shift-x),
            var(--ul-sod-shift-y),
            0
        )
        scale(1.035);

    transition:
        transform .90s
        var(--ul-ease-expo),
        filter .45s ease;

    backface-visibility: hidden;

    will-change: transform;
}


/* ==========================================================
   SHADE
========================================================== */

.ul-gallery-sod__photo-shade {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(12,37,20,.01) 0%,
            rgba(12,37,20,.02) 45%,
            rgba(8,28,15,.50) 100%
        ),
        linear-gradient(
            90deg,
            rgba(20,58,31,.08),
            transparent 55%
        );
}


/* ==========================================================
   POINTER LIGHT
========================================================== */

.ul-gallery-sod__photo-light {
    position: absolute;

    z-index: 3;

    inset: 0;

    opacity: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle 230px
            at
            var(--ul-sod-pointer-x)
            var(--ul-sod-pointer-y),

            rgba(255,255,255,.19),
            rgba(167,213,118,.055) 34%,
            transparent 70%
        );

    transition:
        opacity .35s ease;
}


/* ==========================================================
   VIEW WORK
========================================================== */

.ul-gallery-sod__view {
    position: absolute;

    z-index: 4;

    right:
        clamp(16px,1.6vw,23px);

    bottom:
        clamp(16px,1.6vw,23px);

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 43px;

    padding:
        0 8px
        0 15px;

    border:
        1px solid
        rgba(255,255,255,.21);

    border-radius: 12px;

    color:
        var(--ul-white);

    background:
        rgba(20,52,29,.50);

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

    backdrop-filter:
        blur(11px);

    font-size: .78rem;

    font-weight: 600;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity .35s ease,
        transform .42s
        var(--ul-ease-expo);
}


.ul-gallery-sod__view svg {
    width: 29px;
    height: 29px;

    padding: 7px;

    border-radius: 8px;

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

    background:
        var(--ul-logo-yellow);

    transition:
        color .30s ease,
        background-color .30s ease,
        transform .40s
        var(--ul-ease-expo);
}


/* ==========================================================
   HOVER
========================================================== */

.ul-gallery-sod__photo:hover img {
    transform:
        translate3d(
            var(--ul-sod-shift-x),
            var(--ul-sod-shift-y),
            0
        )
        scale(1.075);

    filter:
        saturate(1.04)
        contrast(1.02);
}


.ul-gallery-sod__photo:hover
.ul-gallery-sod__photo-light {
    opacity: 1;
}


.ul-gallery-sod__photo:hover
.ul-gallery-sod__view {
    opacity: 1;

    transform:
        translateY(0);
}


.ul-gallery-sod__photo:hover
.ul-gallery-sod__view svg {
    color:
        var(--ul-white);

    background:
        var(--ul-green-600);

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


/* ==========================================================
   IMAGE FALLBACK
========================================================== */

.ul-gallery-sod__photo.has-image-error {
    background:
        linear-gradient(
            145deg,
            var(--ul-forest-900),
            var(--ul-green-700)
        );
}


.ul-gallery-sod__photo.has-image-error img {
    display: none;
}


/* ==========================================================
   FOOTER
========================================================== */

.ul-gallery-sod__footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    margin-top:
        clamp(38px,4.5vw,62px);

    padding-top:
        clamp(21px,2.4vw,28px);

    border-top:
        1px solid
        var(--ul-border);
}


/* ==========================================================
   FOOTER COPY
========================================================== */

.ul-gallery-sod__footer-copy {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

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

    font-size: .84rem;

    font-weight: 500;
}


.ul-gallery-sod__footer-copy strong {
    color:
        var(--ul-forest-950);

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

    font-size: .98rem;

    font-weight: 500;
}


/* ==========================================================
   NEXT SERVICE
========================================================== */

.ul-gallery-sod__next {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    color:
        var(--ul-text);

    transition:
        transform .42s
        var(--ul-ease-expo);
}


.ul-gallery-sod__next-copy {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 4px;
}


.ul-gallery-sod__next-copy small {
    color:
        var(--ul-text-muted);

    font-size: .70rem;

    font-weight: 600;

    letter-spacing: .07em;

    text-transform: uppercase;
}


.ul-gallery-sod__next-copy strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1.08rem;

    font-weight: 500;
}


/* ==========================================================
   NEXT ICON
========================================================== */

.ul-gallery-sod__next-icon {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    border:
        1px solid
        rgba(126,187,80,.20);

    border-radius: 13px;

    color:
        var(--ul-white);

    background:
        var(--ul-green-600);

    box-shadow:
        var(--ul-shadow-green);

    transition:
        color .30s ease,
        background-color .30s ease,
        transform .42s
        var(--ul-ease-expo);
}


.ul-gallery-sod__next-icon svg {
    width: 18px;
    height: 18px;
}


.ul-gallery-sod__next:hover {
    transform:
        translateX(3px);
}


.ul-gallery-sod__next:hover
.ul-gallery-sod__next-icon {
    color:
        var(--ul-forest-950);

    background:
        var(--ul-logo-yellow);

    transform:
        translateX(3px);
}


/* ==========================================================
   BOTTOM BRAND LINE
========================================================== */

.ul-gallery-sod__bottom-line {
    position: absolute;

    z-index: 5;

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

    height: 3px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--ul-green-600),
            var(--ul-green-400),
            var(--ul-logo-yellow),
            var(--ul-logo-cyan)
        );
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-sod__header {
        grid-template-columns:
            minmax(0,1.08fr)
            minmax(350px,.60fr);
    }


    .ul-gallery-sod__grid {
        grid-template-columns:
            repeat(12,minmax(0,1fr));
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-sod {
        padding:
            94px 0
            95px;
    }


    .ul-gallery-sod__word {
        right: -10%;

        font-size:
            clamp(9rem,23vw,15rem);
    }


    .ul-gallery-sod__header {
        grid-template-columns: 1fr;

        gap: 32px;

        margin-bottom: 47px;
    }


    .ul-gallery-sod__intro {
        max-width: 690px;

        justify-self: start;
    }


    .ul-gallery-sod__title {
        max-width: 740px;

        font-size:
            clamp(3.1rem,6.5vw,4.7rem);
    }


    .ul-gallery-sod__grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        grid-auto-rows:
            clamp(290px,43vw,410px);
    }


    .ul-gallery-sod__photo--primary,
    .ul-gallery-sod__photo--secondary-a,
    .ul-gallery-sod__photo--secondary-b,
    .ul-gallery-sod__photo--secondary-c,
    .ul-gallery-sod__photo--secondary-d,
    .ul-gallery-sod__photo--secondary-e {
        grid-column: auto;

        grid-row: auto;
    }


    .ul-gallery-sod__photo--primary {
        grid-column:
            1 / -1;

        min-height: 430px;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-sod {
        padding:
            78px 0
            80px;
    }


    .ul-gallery-sod__word {
        top: 55px;
        right: -14%;

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


    .ul-gallery-sod__header {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 38px;
    }


    .ul-gallery-sod__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-sod__title {
        font-size:
            clamp(2.8rem,8.6vw,3.8rem);
    }


    .ul-gallery-sod__intro {
        max-width: 590px;

        justify-self: start;
    }


    .ul-gallery-sod__intro p {
        font-size: 1rem;

        line-height: 1.62;
    }


    .ul-gallery-sod__info {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .ul-gallery-sod__grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        grid-auto-rows:
            clamp(270px,56vw,360px);

        gap: 9px;
    }


    .ul-gallery-sod__photo--primary,
    .ul-gallery-sod__photo--secondary-a,
    .ul-gallery-sod__photo--secondary-b,
    .ul-gallery-sod__photo--secondary-c,
    .ul-gallery-sod__photo--secondary-d,
    .ul-gallery-sod__photo--secondary-e {
        grid-column: auto;

        grid-row: auto;
    }


    .ul-gallery-sod__photo--primary,
    .ul-gallery-sod__photo--secondary-e {
        grid-column:
            1 / -1;
    }


    .ul-gallery-sod__photo {
        border-radius: 18px;
    }


    .ul-gallery-sod__view {
        opacity: 1;

        transform: none;
    }


    .ul-gallery-sod__footer {
        align-items: flex-start;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-sod {
        padding:
            66px 0
            69px;
    }


    .ul-gallery-sod__topography {
        right: -620px;

        opacity: .32;
    }


    .ul-gallery-sod__word {
        top: 51px;
        right: -14%;

        font-size:
            clamp(6.2rem,31vw,8.8rem);
    }


    .ul-gallery-sod__header {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 32px;
    }


    .ul-gallery-sod__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-sod__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-sod__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-sod__title {
        font-size:
            clamp(2.4rem,10.6vw,3.08rem);

        line-height: .95;
    }


    .ul-gallery-sod__intro {
        justify-self: start;
    }


    .ul-gallery-sod__intro p {
        margin-bottom: 20px;

        font-size: .94rem;

        line-height: 1.58;
    }


    .ul-gallery-sod__tags {
        gap: 6px;
    }


    .ul-gallery-sod__tags span {
        min-height: 32px;

        padding:
            0 10px;

        font-size: .70rem;
    }


    .ul-gallery-sod__info {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;

        padding: 13px;

        border-radius: 14px;
    }


    .ul-gallery-sod__info-icon {
        width: 41px;
        height: 41px;

        border-radius: 11px;
    }


    .ul-gallery-sod__info-title span {
        font-size: .66rem;
    }


    .ul-gallery-sod__info-title strong {
        font-size: .98rem;
    }


    .ul-gallery-sod__info-note p {
        font-size: .85rem;
    }


    .ul-gallery-sod__grid {
        grid-template-columns: 1fr;

        grid-auto-rows:
            clamp(300px,98vw,410px);

        gap: 8px;
    }


    .ul-gallery-sod__photo--primary,
    .ul-gallery-sod__photo--secondary-a,
    .ul-gallery-sod__photo--secondary-b,
    .ul-gallery-sod__photo--secondary-c,
    .ul-gallery-sod__photo--secondary-d,
    .ul-gallery-sod__photo--secondary-e {
        grid-column: auto;

        grid-row: auto;

        min-height: 0;
    }


    .ul-gallery-sod__photo {
        border-radius: 17px;
    }


    .ul-gallery-sod__view {
        right: 13px;
        bottom: 13px;

        min-height: 39px;

        padding:
            0 6px
            0 12px;

        font-size: .72rem;

        opacity: 1;

        transform: none;
    }


    .ul-gallery-sod__view svg {
        width: 27px;
        height: 27px;

        padding: 6px;
    }


    .ul-gallery-sod__footer {
        align-items: stretch;

        flex-direction: column;

        gap: 20px;

        margin-top: 32px;
    }


    .ul-gallery-sod__footer-copy {
        font-size: .77rem;
    }


    .ul-gallery-sod__next {
        justify-content: space-between;

        width: 100%;
    }


    .ul-gallery-sod__next-copy {
        align-items: flex-start;
    }


    .ul-gallery-sod__next-copy small {
        font-size: .65rem;
    }


    .ul-gallery-sod__next-copy strong {
        font-size: 1rem;
    }


    .ul-gallery-sod__next-icon {
        width: 42px;
        height: 42px;

        border-radius: 11px;
    }

}


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

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

    .ul-gallery-sod__photo,
    .ul-gallery-sod__photo img,
    .ul-gallery-sod__photo-light,
    .ul-gallery-sod__view,
    .ul-gallery-sod__view svg,
    .ul-gallery-sod__next,
    .ul-gallery-sod__next-icon {
        animation: none !important;

        transition: none !important;
    }


    .ul-gallery-sod__photo img {
        transform:
            scale(1.035) !important;
    }


    .ul-gallery-sod__photo-light {
        display: none;
    }

}














































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   WELDING REPAIRS — 2026

   • 4-image editorial bento
   • Dark technical visual direction
   • Fullscreen Viewer compatible
   • No decorative counters
   • Critical imagery visible without JS
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-gallery-welding {
    position: relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(95px, 7.5vw, 130px);

    overflow: hidden;

    color:
        var(--ul-white);

    background:
        linear-gradient(
            145deg,
            #151A16 0%,
            #19231C 36%,
            #203126 70%,
            #18221B 100%
        );

    isolation: isolate;

    scroll-margin-top:
        var(--ul-scroll-offset);
}


/* ==========================================================
   TOP TRANSITION
========================================================== */

.ul-gallery-welding::before {
    content: "";

    position: absolute;

    z-index: 6;

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

    height: 4px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--ul-logo-purple),
            var(--ul-logo-red),
            var(--ul-logo-orange),
            var(--ul-logo-yellow)
        );
}


/* ==========================================================
   BACKGROUND DEPTH
========================================================== */

.ul-gallery-welding::after {
    content: "";

    position: absolute;

    z-index: -5;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(152,91,148,.050),
            transparent 43%,
            rgba(233,145,41,.025)
        );
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-gallery-welding__topography {
    position: absolute;

    z-index: -4;

    top: -350px;
    right: -320px;

    width: 870px;
    height: 870px;

    opacity: .46;

    transform:
        rotate(-8deg);

    pointer-events: none;

    background:
        repeating-radial-gradient(
            ellipse at 45% 45%,
            transparent 0,
            transparent 38px,
            rgba(255,255,255,.025) 39px,
            rgba(255,255,255,.025) 40px,
            transparent 41px,
            transparent 76px
        ),
        repeating-radial-gradient(
            ellipse at 68% 69%,
            transparent 0,
            transparent 55px,
            rgba(233,145,41,.026) 56px,
            rgba(233,145,41,.026) 57px,
            transparent 58px,
            transparent 102px
        );
}


/* ==========================================================
   AMBIENTS
========================================================== */

.ul-gallery-welding__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-gallery-welding__ambient--purple {
    left: -400px;
    bottom: -440px;

    width: 820px;
    height: 820px;

    background:
        radial-gradient(
            circle,
            rgba(152,91,148,.15),
            rgba(116,70,111,.025) 46%,
            transparent 72%
        );
}


.ul-gallery-welding__ambient--orange {
    top: -350px;
    right: -350px;

    width: 780px;
    height: 780px;

    background:
        radial-gradient(
            circle,
            rgba(233,145,41,.13),
            rgba(189,60,53,.018) 46%,
            transparent 72%
        );
}


/* ==========================================================
   EDITORIAL WORD
========================================================== */

.ul-gallery-welding__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(40px, 5vw, 72px);

    right: -2%;

    color:
        rgba(255,255,255,.023);

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

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

    font-weight: 500;

    line-height: .75;

    letter-spacing: -.075em;

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


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

.ul-gallery-welding__header {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: end;

    gap:
        clamp(60px,7vw,115px);

    margin-bottom:
        clamp(48px,5.3vw,76px);
}


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

.ul-gallery-welding__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--ul-purple-400);

    font-size:
        clamp(.82rem,.80vw,.90rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


.ul-gallery-welding__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-orange);

    box-shadow:
        0 0 0 5px
        rgba(233,145,41,.10);
}


.ul-gallery-welding__eyebrow-line {
    width: 58px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--ul-logo-purple),
            var(--ul-logo-red),
            var(--ul-logo-orange)
        );
}


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

.ul-gallery-welding__title {
    max-width: 790px;

    margin: 0;

    color:
        var(--ul-white);

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

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

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.052em;
}


.ul-gallery-welding__title span {
    display: block;

    margin-top: .06em;

    color:
        var(--ul-logo-orange);
}


/* ==========================================================
   INTRO
========================================================== */

.ul-gallery-welding__intro {
    max-width: 530px;

    justify-self: end;
}


.ul-gallery-welding__intro p {
    margin:
        0 0 25px;

    color:
        rgba(255,255,255,.71);

    font-size:
        clamp(1.04rem,1.03vw,1.14rem);

    line-height: 1.68;
}


/* ==========================================================
   TAGS
========================================================== */

.ul-gallery-welding__tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.ul-gallery-welding__tags span {
    display: inline-flex;

    align-items: center;

    min-height: 35px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 999px;

    color:
        rgba(255,255,255,.84);

    background:
        rgba(255,255,255,.055);

    font-size: .78rem;

    font-weight: 600;
}


.ul-gallery-welding__tags span:nth-child(1) {
    color:
        var(--ul-purple-300);

    border-color:
        rgba(152,91,148,.18);

    background:
        rgba(152,91,148,.085);
}


.ul-gallery-welding__tags span:nth-child(2) {
    color:
        var(--ul-orange-400);

    border-color:
        rgba(233,145,41,.18);

    background:
        rgba(233,145,41,.075);
}


.ul-gallery-welding__tags span:nth-child(3) {
    color:
        var(--ul-red-300);

    border-color:
        rgba(189,60,53,.18);

    background:
        rgba(189,60,53,.075);
}


/* ==========================================================
   INFO BAR
========================================================== */

.ul-gallery-welding__info {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        clamp(25px,5vw,65px);

    margin-bottom:
        clamp(22px,2.5vw,34px);

    padding:
        15px 17px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 17px;

    background:
        rgba(255,255,255,.045);

    box-shadow:
        0 18px 44px
        rgba(0,0,0,.12);

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

    backdrop-filter:
        blur(12px);
}


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

.ul-gallery-welding__info-title {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


.ul-gallery-welding__info-icon {
    display: grid;

    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(233,145,41,.16);

    border-radius: 13px;

    color:
        var(--ul-logo-orange);

    background:
        rgba(233,145,41,.075);
}


.ul-gallery-welding__info-icon svg {
    width: 22px;
    height: 22px;
}


.ul-gallery-welding__info-title > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ul-gallery-welding__info-title span {
    color:
        rgba(255,255,255,.47);

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .07em;

    text-transform: uppercase;
}


.ul-gallery-welding__info-title strong {
    color:
        var(--ul-white);

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

    font-size: 1.08rem;

    font-weight: 500;
}


/* ==========================================================
   INFO NOTE
========================================================== */

.ul-gallery-welding__info-note {
    display: flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255,255,255,.60);
}


.ul-gallery-welding__info-note > span {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-logo-purple);

    box-shadow:
        0 0 0 4px
        rgba(152,91,148,.10);
}


.ul-gallery-welding__info-note p {
    margin: 0;

    font-size: .90rem;

    line-height: 1.45;
}


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

.ul-gallery-welding__grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    grid-auto-rows:
        clamp(270px,24vw,370px);

    gap:
        clamp(11px,1.2vw,17px);
}


/* ==========================================================
   PHOTO
========================================================== */

.ul-gallery-welding__photo {
    --ul-welding-pointer-x: 50%;
    --ul-welding-pointer-y: 50%;

    --ul-welding-shift-x: 0px;
    --ul-welding-shift-y: 0px;

    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        clamp(20px,2vw,28px);

    background:
        var(--ul-charcoal-950);

    box-shadow:
        0 24px 58px
        rgba(0,0,0,.20);

    isolation: isolate;
}


/* ==========================================================
   BENTO POSITIONS
========================================================== */

.ul-gallery-welding__photo--primary {
    grid-column:
        span 7;
}


.ul-gallery-welding__photo--secondary-a {
    grid-column:
        span 5;
}


.ul-gallery-welding__photo--secondary-b {
    grid-column:
        span 5;
}


.ul-gallery-welding__photo--secondary-c {
    grid-column:
        span 7;
}


/* ==========================================================
   LINK
========================================================== */

.ul-gallery-welding__photo-link {
    position: absolute;

    inset: 0;

    display: block;

    overflow: hidden;

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


/* ==========================================================
   IMAGE
========================================================== */

.ul-gallery-welding__photo img {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    transform:
        translate3d(
            var(--ul-welding-shift-x),
            var(--ul-welding-shift-y),
            0
        )
        scale(1.035);

    transition:
        transform .90s
        var(--ul-ease-expo),
        filter .45s ease;

    backface-visibility: hidden;

    will-change: transform;
}


/* ==========================================================
   SHADE
========================================================== */

.ul-gallery-welding__photo-shade {
    position: absolute;

    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(12,12,12,.02) 0%,
            rgba(15,16,15,.02) 46%,
            rgba(10,12,10,.62) 100%
        ),
        linear-gradient(
            90deg,
            rgba(67,34,64,.10),
            transparent 55%
        );
}


/* ==========================================================
   POINTER LIGHT
========================================================== */

.ul-gallery-welding__photo-light {
    position: absolute;

    z-index: 3;

    inset: 0;

    opacity: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle 230px
            at
            var(--ul-welding-pointer-x)
            var(--ul-welding-pointer-y),

            rgba(255,255,255,.18),
            rgba(233,145,41,.055) 30%,
            rgba(152,91,148,.035) 48%,
            transparent 70%
        );

    transition:
        opacity .35s ease;
}


/* ==========================================================
   VIEW WORK
========================================================== */

.ul-gallery-welding__view {
    position: absolute;

    z-index: 4;

    right:
        clamp(16px,1.6vw,23px);

    bottom:
        clamp(16px,1.6vw,23px);

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 43px;

    padding:
        0 8px
        0 15px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 12px;

    color:
        var(--ul-white);

    background:
        rgba(18,18,18,.52);

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

    backdrop-filter:
        blur(11px);

    font-size: .78rem;

    font-weight: 600;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity .35s ease,
        transform .42s
        var(--ul-ease-expo);
}


.ul-gallery-welding__view svg {
    width: 29px;
    height: 29px;

    padding: 7px;

    border-radius: 8px;

    color:
        var(--ul-white);

    background:
        var(--ul-logo-purple);

    transition:
        color .30s ease,
        background-color .30s ease,
        transform .40s
        var(--ul-ease-expo);
}


/* ==========================================================
   PHOTO HOVER
========================================================== */

.ul-gallery-welding__photo:hover img {
    transform:
        translate3d(
            var(--ul-welding-shift-x),
            var(--ul-welding-shift-y),
            0
        )
        scale(1.075);

    filter:
        saturate(1.04)
        contrast(1.04);
}


.ul-gallery-welding__photo:hover
.ul-gallery-welding__photo-light {
    opacity: 1;
}


.ul-gallery-welding__photo:hover
.ul-gallery-welding__view {
    opacity: 1;

    transform:
        translateY(0);
}


.ul-gallery-welding__photo:hover
.ul-gallery-welding__view svg {
    background:
        var(--ul-logo-orange);

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


/* ==========================================================
   IMAGE ERROR
========================================================== */

.ul-gallery-welding__photo.has-image-error {
    background:
        linear-gradient(
            145deg,
            #1E2420,
            #3A2637
        );
}


.ul-gallery-welding__photo.has-image-error img {
    display: none;
}


/* ==========================================================
   FOOTER
========================================================== */

.ul-gallery-welding__footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    margin-top:
        clamp(38px,4.5vw,62px);

    padding-top:
        clamp(21px,2.4vw,28px);

    border-top:
        1px solid
        rgba(255,255,255,.10);
}


/* ==========================================================
   FOOTER COPY
========================================================== */

.ul-gallery-welding__footer-copy {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    color:
        rgba(255,255,255,.47);

    font-size: .84rem;

    font-weight: 500;
}


.ul-gallery-welding__footer-copy strong {
    color:
        var(--ul-white);

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

    font-size: .98rem;

    font-weight: 500;
}


/* ==========================================================
   NEXT CTA
========================================================== */

.ul-gallery-welding__next {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    color:
        var(--ul-white);

    transition:
        transform .42s
        var(--ul-ease-expo);
}


.ul-gallery-welding__next-copy {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 4px;
}


.ul-gallery-welding__next-copy small {
    color:
        rgba(255,255,255,.46);

    font-size: .70rem;

    font-weight: 600;

    letter-spacing: .07em;

    text-transform: uppercase;
}


.ul-gallery-welding__next-copy strong {
    color:
        var(--ul-white);

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

    font-size: 1.08rem;

    font-weight: 500;
}


/* ==========================================================
   NEXT ICON
========================================================== */

.ul-gallery-welding__next-icon {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    border:
        1px solid
        rgba(233,145,41,.20);

    border-radius: 13px;

    color:
        var(--ul-white);

    background:
        var(--ul-logo-orange);

    box-shadow:
        var(--ul-shadow-red);

    transition:
        color .30s ease,
        background-color .30s ease,
        transform .42s
        var(--ul-ease-expo);
}


.ul-gallery-welding__next-icon svg {
    width: 18px;
    height: 18px;
}


.ul-gallery-welding__next:hover {
    transform:
        translateX(3px);
}


.ul-gallery-welding__next:hover
.ul-gallery-welding__next-icon {
    background:
        var(--ul-logo-red);

    transform:
        translateX(3px);
}


/* ==========================================================
   BOTTOM LINE
========================================================== */

.ul-gallery-welding__bottom-line {
    position: absolute;

    z-index: 5;

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

    height: 3px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            var(--ul-logo-purple),
            var(--ul-logo-red),
            var(--ul-logo-orange),
            var(--ul-logo-yellow)
        );
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-welding__header {
        grid-template-columns:
            minmax(0,1.08fr)
            minmax(350px,.60fr);
    }


    .ul-gallery-welding__grid {
        grid-template-columns:
            repeat(12,minmax(0,1fr));
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-welding {
        padding:
            94px 0
            95px;
    }


    .ul-gallery-welding__word {
        right: -11%;

        font-size:
            clamp(9rem,23vw,15rem);
    }


    .ul-gallery-welding__header {
        grid-template-columns: 1fr;

        gap: 32px;

        margin-bottom: 47px;
    }


    .ul-gallery-welding__intro {
        max-width: 690px;

        justify-self: start;
    }


    .ul-gallery-welding__title {
        max-width: 740px;

        font-size:
            clamp(3.1rem,6.5vw,4.7rem);
    }


    .ul-gallery-welding__grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        grid-auto-rows:
            clamp(300px,47vw,430px);
    }


    .ul-gallery-welding__photo--primary,
    .ul-gallery-welding__photo--secondary-a,
    .ul-gallery-welding__photo--secondary-b,
    .ul-gallery-welding__photo--secondary-c {
        grid-column: auto;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-welding {
        padding:
            78px 0
            80px;
    }


    .ul-gallery-welding__word {
        top: 55px;
        right: -18%;

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


    .ul-gallery-welding__header {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 38px;
    }


    .ul-gallery-welding__eyebrow {
        font-size: .75rem;
    }


    .ul-gallery-welding__title {
        font-size:
            clamp(2.8rem,8.6vw,3.8rem);
    }


    .ul-gallery-welding__intro {
        max-width: 590px;

        justify-self: start;
    }


    .ul-gallery-welding__intro p {
        font-size: 1rem;

        line-height: 1.62;
    }


    .ul-gallery-welding__info {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }


    .ul-gallery-welding__grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        grid-auto-rows:
            clamp(270px,56vw,360px);

        gap: 9px;
    }


    .ul-gallery-welding__photo--primary,
    .ul-gallery-welding__photo--secondary-a,
    .ul-gallery-welding__photo--secondary-b,
    .ul-gallery-welding__photo--secondary-c {
        grid-column: auto;
    }


    .ul-gallery-welding__photo {
        border-radius: 18px;
    }


    .ul-gallery-welding__view {
        opacity: 1;

        transform: none;
    }


    .ul-gallery-welding__footer {
        align-items: flex-start;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-welding {
        padding:
            66px 0
            69px;
    }


    .ul-gallery-welding__topography {
        right: -620px;

        opacity: .30;
    }


    .ul-gallery-welding__word {
        top: 51px;
        right: -24%;

        font-size:
            clamp(6rem,29vw,8.5rem);
    }


    .ul-gallery-welding__header {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 32px;
    }


    .ul-gallery-welding__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-gallery-welding__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-gallery-welding__eyebrow-line {
        width: 39px;
    }


    .ul-gallery-welding__title {
        font-size:
            clamp(2.4rem,10.6vw,3.08rem);

        line-height: .95;
    }


    .ul-gallery-welding__intro {
        justify-self: start;
    }


    .ul-gallery-welding__intro p {
        margin-bottom: 20px;

        font-size: .94rem;

        line-height: 1.58;
    }


    .ul-gallery-welding__tags {
        gap: 6px;
    }


    .ul-gallery-welding__tags span {
        min-height: 32px;

        padding:
            0 10px;

        font-size: .70rem;
    }


    .ul-gallery-welding__info {
        align-items: flex-start;

        flex-direction: column;

        gap: 14px;

        padding: 13px;

        border-radius: 14px;
    }


    .ul-gallery-welding__info-icon {
        width: 41px;
        height: 41px;

        border-radius: 11px;
    }


    .ul-gallery-welding__info-title span {
        font-size: .66rem;
    }


    .ul-gallery-welding__info-title strong {
        font-size: .98rem;
    }


    .ul-gallery-welding__info-note p {
        font-size: .85rem;
    }


    .ul-gallery-welding__grid {
        grid-template-columns: 1fr;

        grid-auto-rows:
            clamp(300px,98vw,410px);

        gap: 8px;
    }


    .ul-gallery-welding__photo--primary,
    .ul-gallery-welding__photo--secondary-a,
    .ul-gallery-welding__photo--secondary-b,
    .ul-gallery-welding__photo--secondary-c {
        grid-column: auto;
    }


    .ul-gallery-welding__photo {
        border-radius: 17px;
    }


    .ul-gallery-welding__view {
        right: 13px;
        bottom: 13px;

        min-height: 39px;

        padding:
            0 6px
            0 12px;

        font-size: .72rem;

        opacity: 1;

        transform: none;
    }


    .ul-gallery-welding__view svg {
        width: 27px;
        height: 27px;

        padding: 6px;
    }


    .ul-gallery-welding__footer {
        align-items: stretch;

        flex-direction: column;

        gap: 20px;

        margin-top: 32px;
    }


    .ul-gallery-welding__footer-copy {
        font-size: .77rem;
    }


    .ul-gallery-welding__next {
        justify-content: space-between;

        width: 100%;
    }


    .ul-gallery-welding__next-copy {
        align-items: flex-start;
    }


    .ul-gallery-welding__next-copy small {
        font-size: .65rem;
    }


    .ul-gallery-welding__next-copy strong {
        font-size: 1rem;
    }


    .ul-gallery-welding__next-icon {
        width: 42px;
        height: 42px;

        border-radius: 11px;
    }

}


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

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

    .ul-gallery-welding__photo,
    .ul-gallery-welding__photo img,
    .ul-gallery-welding__photo-light,
    .ul-gallery-welding__view,
    .ul-gallery-welding__view svg,
    .ul-gallery-welding__next,
    .ul-gallery-welding__next-icon {
        animation: none !important;

        transition: none !important;
    }


    .ul-gallery-welding__photo img {
        transform:
            scale(1.035) !important;
    }


    .ul-gallery-welding__photo-light {
        display: none;
    }

}










































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GALLERY.HTML
   11. FULLSCREEN IMAGE VIEWER — 2026

   • Direct body overlay
   • Above header / nav / page UI
   • No visible numeric counters
   • Full viewport
   • Touch + keyboard friendly
   • Single-image mode supported
========================================================== */


/* ==========================================================
   01. VIEWER ROOT
========================================================== */

.ul-gallery-viewer {
    position: fixed;

    z-index: 10050;

    inset: 0;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    color:
        var(--ul-white);

    background:
        #0C1710;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    overflow: hidden;

    isolation: isolate;

    overscroll-behavior:
        contain;

    transition:
        opacity .38s ease,
        visibility 0s linear .38s;
}


/* ==========================================================
   02. OPEN
========================================================== */

.ul-gallery-viewer.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transition:
        opacity .38s ease,
        visibility 0s linear 0s;
}


/* ==========================================================
   03. BACKDROP
========================================================== */

.ul-gallery-viewer__backdrop {
    position: absolute;

    z-index: -6;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    cursor: default;

    background:

        linear-gradient(
            145deg,
            rgba(7, 15, 10, .985),
            rgba(10, 24, 16, .985) 48%,
            rgba(11, 20, 15, .985)
        );
}


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

.ul-gallery-viewer__topography {
    position: absolute;

    z-index: -5;

    top: -390px;
    right: -320px;

    width: 900px;
    height: 900px;

    pointer-events: none;

    opacity: .50;

    transform:
        rotate(-10deg);

    background:

        repeating-radial-gradient(
            ellipse at 45% 43%,

            transparent 0,

            transparent 37px,

            rgba(167, 213, 118, .025) 38px,

            rgba(167, 213, 118, .025) 39px,

            transparent 40px,

            transparent 74px
        ),

        repeating-radial-gradient(
            ellipse at 67% 69%,

            transparent 0,

            transparent 53px,

            rgba(112, 186, 202, .024) 54px,

            rgba(112, 186, 202, .024) 55px,

            transparent 56px,

            transparent 99px
        );
}


/* ==========================================================
   05. AMBIENTS
========================================================== */

.ul-gallery-viewer__ambient {
    position: absolute;

    z-index: -5;

    border-radius: 50%;

    pointer-events: none;
}


.ul-gallery-viewer__ambient--green {
    left: -390px;
    bottom: -490px;

    width: 850px;
    height: 850px;

    background:

        radial-gradient(
            circle,

            rgba(126, 187, 80, .11),

            rgba(126, 187, 80, .025) 45%,

            transparent 72%
        );
}


.ul-gallery-viewer__ambient--blue {
    top: -390px;
    right: -360px;

    width: 830px;
    height: 830px;

    background:

        radial-gradient(
            circle,

            rgba(112, 186, 202, .09),

            rgba(49, 90, 152, .02) 46%,

            transparent 72%
        );
}


/* ==========================================================
   06. SHELL
========================================================== */

.ul-gallery-viewer__shell {
    position: relative;

    z-index: 2;

    display: grid;

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

    width: 100%;
    height: 100%;

    padding:
        0
        clamp(28px, 4vw, 72px);
}


/* ==========================================================
   07. TOP BAR
========================================================== */

.ul-gallery-viewer__top {
    position: relative;

    display: grid;

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

    align-items: center;

    gap:
        clamp(24px, 4vw, 60px);

    min-height:
        clamp(84px, 10vh, 108px);

    border-bottom:
        1px solid
        rgba(255, 255, 255, .09);
}


/* ==========================================================
   08. TOP SPECTRUM
========================================================== */

.ul-gallery-viewer__top::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width:
        clamp(80px, 9vw, 140px);

    height: 3px;

    border-radius:
        0 0 999px 999px;

    background:
        var(--ul-gradient-brand);
}


/* ==========================================================
   09. BRAND
========================================================== */

.ul-gallery-viewer__brand {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

    justify-self: start;
}


/* ==========================================================
   10. BRAND MARK
========================================================== */

.ul-gallery-viewer__brand-mark {
    display: grid;

    place-items: center;

    width: 45px;
    height: 45px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(167, 213, 118, .21);

    border-radius: 13px;

    color:
        var(--ul-green-400);

    background:
        rgba(167, 213, 118, .075);

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

    font-size: .90rem;

    font-weight: 500;

    letter-spacing: -.02em;
}


/* ==========================================================
   11. BRAND COPY
========================================================== */

.ul-gallery-viewer__brand-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.ul-gallery-viewer__brand-copy span {
    color:
        rgba(255, 255, 255, .47);

    font-size: .74rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .055em;

    text-transform: uppercase;
}


.ul-gallery-viewer__brand-copy strong {
    overflow: hidden;

    color:
        rgba(255, 255, 255, .92);

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

    font-size: 1.03rem;

    font-weight: 500;

    line-height: 1.15;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================
   12. CATEGORY
========================================================== */

.ul-gallery-viewer__category {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    min-width: 220px;

    text-align: center;
}


.ul-gallery-viewer__category > span {
    color:
        var(--ul-logo-cyan);

    font-size: .72rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.ul-gallery-viewer__category strong {
    max-width: 420px;

    overflow: hidden;

    color:
        var(--ul-white);

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

    font-size:
        clamp(1.05rem, 1.2vw, 1.24rem);

    font-weight: 500;

    line-height: 1.2;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================
   13. CLOSE
========================================================== */

.ul-gallery-viewer__close {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    justify-self: end;

    min-height: 48px;

    padding:
        5px 5px
        5px 15px;

    border:
        1px solid
        rgba(255, 255, 255, .13);

    border-radius: 14px;

    color:
        rgba(255, 255, 255, .78);

    background:
        rgba(255, 255, 255, .05);

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

    font-size: .82rem;

    font-weight: 600;

    cursor: pointer;

    transition:

        color .3s ease,

        background-color .3s ease,

        border-color .3s ease,

        transform .4s
        var(--ul-ease-expo);
}


/* ==========================================================
   14. CLOSE ICON
========================================================== */

.ul-gallery-viewer__close-icon {
    position: relative;

    display: block;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .075);

    transition:

        background-color .3s ease,

        transform .45s
        var(--ul-ease-expo);
}


.ul-gallery-viewer__close-icon i {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 15px;
    height: 1.5px;

    border-radius: 999px;

    background:
        currentColor;
}


.ul-gallery-viewer__close-icon i:first-child {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.ul-gallery-viewer__close-icon i:last-child {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* ==========================================================
   15. CLOSE HOVER
========================================================== */

.ul-gallery-viewer__close:hover {
    color:
        var(--ul-white);

    border-color:
        rgba(189, 60, 53, .35);

    background:
        rgba(189, 60, 53, .12);

    transform:
        translateY(-2px);
}


.ul-gallery-viewer__close:hover
.ul-gallery-viewer__close-icon {
    color:
        var(--ul-white);

    background:
        var(--ul-logo-red);

    transform:
        rotate(90deg);
}


/* ==========================================================
   16. STAGE
========================================================== */

.ul-gallery-viewer__stage {
    position: relative;

    display: grid;

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

    align-items: center;

    gap:
        clamp(16px, 2.2vw, 34px);

    min-height: 0;

    padding:
        clamp(18px, 2.5vh, 30px)
        0;
}


/* ==========================================================
   17. NAV BUTTONS
========================================================== */

.ul-gallery-viewer__nav {
    display: grid;

    place-items: center;

    width: 58px;
    height: 58px;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 16px;

    color:
        rgba(255, 255, 255, .85);

    background:
        rgba(255, 255, 255, .055);

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

    backdrop-filter:
        blur(10px);

    cursor: pointer;

    transition:

        color .3s ease,

        background-color .3s ease,

        border-color .3s ease,

        transform .42s
        var(--ul-ease-expo);
}


.ul-gallery-viewer__nav svg {
    width: 21px;
    height: 21px;
}


.ul-gallery-viewer__nav--prev {
    justify-self: start;
}


.ul-gallery-viewer__nav--next {
    justify-self: end;
}


/* ==========================================================
   18. NAV HOVER
========================================================== */

.ul-gallery-viewer__nav:hover {
    color:
        var(--ul-forest-950);

    border-color:
        var(--ul-green-400);

    background:
        var(--ul-green-400);
}


.ul-gallery-viewer__nav--prev:hover {
    transform:
        translateX(-4px);
}


.ul-gallery-viewer__nav--next:hover {
    transform:
        translateX(4px);
}


/* ==========================================================
   19. SINGLE IMAGE
========================================================== */

.ul-gallery-viewer.has-single-image
.ul-gallery-viewer__nav {
    visibility: hidden;

    pointer-events: none;
}


/* ==========================================================
   20. IMAGE WRAP
========================================================== */

.ul-gallery-viewer__image-wrap {
    position: relative;

    display: grid;

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

    gap: 11px;

    width: 100%;
    height: 100%;

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


/* ==========================================================
   21. IMAGE SURFACE
========================================================== */

.ul-gallery-viewer__image-surface {
    position: relative;

    display: grid;

    place-items: center;

    width: 100%;
    height: 100%;

    min-height: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius:
        clamp(18px, 2vw, 28px);

    background:

        linear-gradient(
            145deg,

            rgba(255, 255, 255, .035),

            rgba(255, 255, 255, .015)
        );

    box-shadow:

        0 28px 78px
        rgba(0, 0, 0, .26),

        inset 0 1px 0
        rgba(255, 255, 255, .04);

    isolation: isolate;
}


/* ==========================================================
   22. IMAGE SURFACE ACCENT
========================================================== */

.ul-gallery-viewer__image-surface::before {
    content: "";

    position: absolute;

    z-index: 3;

    top: 0;
    left: 50%;

    width:
        min(200px, 28%);

    height: 3px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 999px 999px;

    pointer-events: none;

    background:
        var(--ul-gradient-brand);

    opacity: .72;
}


/* ==========================================================
   23. IMAGE
========================================================== */

.ul-gallery-viewer__image {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: contain;

    object-position: center;

    opacity: 0;

    transform:
        scale(.988);

    user-select: none;

    -webkit-user-drag: none;

    transition:

        opacity .36s ease,

        transform .6s
        var(--ul-ease-expo);
}


/* ==========================================================
   24. IMAGE LOADED
========================================================== */

.ul-gallery-viewer__image.is-loaded {
    opacity: 1;

    transform:
        scale(1);
}


/* ==========================================================
   25. IMAGE CHANGING
========================================================== */

.ul-gallery-viewer.is-changing
.ul-gallery-viewer__image {
    opacity: 0;

    transform:
        scale(.992);
}


/* ==========================================================
   26. LOADER
========================================================== */

.ul-gallery-viewer__loader {
    position: absolute;

    z-index: 5;

    inset: 0;

    display: grid;

    place-items: center;

    pointer-events: none;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity .22s ease,
        visibility 0s linear .22s;
}


/* ==========================================================
   27. LOADER VISIBLE
========================================================== */

.ul-gallery-viewer__loader.is-visible {
    visibility: visible;

    opacity: 1;

    transition:
        opacity .22s ease,
        visibility 0s linear 0s;
}


/* ==========================================================
   28. LOADER INDICATOR
========================================================== */

.ul-gallery-viewer__loader span {
    position: relative;

    width: 47px;
    height: 47px;

    border:
        2px solid
        rgba(255, 255, 255, .11);

    border-top-color:
        var(--ul-green-400);

    border-right-color:
        var(--ul-logo-cyan);

    border-radius: 50%;

    animation:
        ulGalleryViewerSpin
        .8s linear infinite;
}


@keyframes ulGalleryViewerSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* ==========================================================
   29. ERROR
========================================================== */

.ul-gallery-viewer__error {
    position: absolute;

    z-index: 6;

    top: 50%;
    left: 50%;

    display: flex;

    align-items: center;

    gap: 14px;

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

    margin: 0;

    padding:
        18px;

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

    border:
        1px solid
        rgba(189, 60, 53, .22);

    border-radius: 17px;

    color:
        var(--ul-white);

    background:
        rgba(54, 22, 20, .83);

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

    backdrop-filter:
        blur(14px);
}


.ul-gallery-viewer__error[hidden] {
    display: none;
}


/* ==========================================================
   30. ERROR ICON
========================================================== */

.ul-gallery-viewer__error-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 13px;

    color:
        var(--ul-red-400);

    background:
        rgba(189, 60, 53, .12);
}


.ul-gallery-viewer__error-icon svg {
    width: 21px;
    height: 21px;
}


/* ==========================================================
   31. ERROR COPY
========================================================== */

.ul-gallery-viewer__error > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-gallery-viewer__error strong {
    font-family:
        var(--ul-font-display);

    font-size: 1rem;

    font-weight: 500;
}


.ul-gallery-viewer__error p {
    margin: 0;

    color:
        rgba(255, 255, 255, .65);

    font-size: .88rem;

    line-height: 1.4;
}


/* ==========================================================
   32. DESCRIPTION
========================================================== */

.ul-gallery-viewer__description {
    max-width: 740px;

    min-height: 20px;

    margin: 0 auto;

    overflow: hidden;

    color:
        rgba(255, 255, 255, .47);

    font-size: .81rem;

    line-height: 1.4;

    text-align: center;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ==========================================================
   33. BOTTOM
========================================================== */

.ul-gallery-viewer__bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    min-height:
        clamp(72px, 9vh, 96px);

    border-top:
        1px solid
        rgba(255, 255, 255, .09);
}


/* ==========================================================
   34. META
========================================================== */

.ul-gallery-viewer__meta {
    display: flex;

    align-items: center;

    gap: 17px;

    width:
        min(520px, 48%);

    min-width: 0;
}


/* ==========================================================
   35. META COPY
========================================================== */

.ul-gallery-viewer__meta-copy {
    display: flex;

    align-items: center;

    gap: 9px;

    flex: 0 0 auto;

    color:
        rgba(255, 255, 255, .54);

    font-size: .79rem;

    font-weight: 600;
}


/* ==========================================================
   36. META DOT
========================================================== */

.ul-gallery-viewer__meta-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        var(--ul-green-400);

    box-shadow:

        0 0 0 4px
        rgba(167, 213, 118, .08);
}


/* ==========================================================
   37. ACCESSIBLE COUNTER

   Functional / assistive only.
   Not visually displayed.
========================================================== */

.ul-gallery-viewer__sr-counter {
    position: absolute !important;

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

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

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

    white-space: nowrap !important;

    border: 0 !important;
}


/* ==========================================================
   38. PROGRESS
========================================================== */

.ul-gallery-viewer__progress {
    position: relative;

    width: 100%;
    height: 4px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .10);
}


/* ==========================================================
   39. PROGRESS FILL
========================================================== */

.ul-gallery-viewer__progress-fill {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-400),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red),

            var(--ul-logo-blue),

            var(--ul-logo-cyan)
        );

    transition:
        transform .52s
        var(--ul-ease-expo);
}


/* ==========================================================
   40. HINT
========================================================== */

.ul-gallery-viewer__hint {
    display: flex;

    align-items: center;

    gap: 10px;

    flex: 0 0 auto;

    color:
        rgba(255, 255, 255, .42);

    font-size: .76rem;

    font-weight: 500;
}


/* ==========================================================
   41. HINT SEPARATOR
========================================================== */

.ul-gallery-viewer__hint i {
    width: 1px;
    height: 18px;

    margin:
        0 4px;

    background:
        rgba(255, 255, 255, .11);
}


.ul-gallery-viewer__hint-mobile {
    display: none;
}


/* ==========================================================
   42. FOCUS
========================================================== */

.ul-gallery-viewer button:focus-visible {
    outline:
        2px solid
        var(--ul-green-400);

    outline-offset: 4px;
}


/* ==========================================================
   43. SINGLE IMAGE PROGRESS
========================================================== */

.ul-gallery-viewer.has-single-image
.ul-gallery-viewer__progress-fill {
    transform:
        scaleX(1) !important;
}


/* ==========================================================
   01 — COMPUTER
========================================================== */

@media (min-width: 1200px) {

    .ul-gallery-viewer__shell {
        padding:
            0
            clamp(45px, 4vw, 72px);
    }


    .ul-gallery-viewer__stage {
        grid-template-columns:
            64px
            minmax(0, 1fr)
            64px;
    }

}


/* ==========================================================
   02 — TABLET
========================================================== */

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

    .ul-gallery-viewer__shell {
        padding:
            0 30px;
    }


    .ul-gallery-viewer__top {
        grid-template-columns:
            minmax(180px, 1fr)
            auto
            minmax(150px, 1fr);

        gap: 20px;

        min-height: 88px;
    }


    .ul-gallery-viewer__brand-mark {
        width: 42px;
        height: 42px;
    }


    .ul-gallery-viewer__category {
        min-width: 180px;
    }


    .ul-gallery-viewer__stage {
        grid-template-columns:
            54px
            minmax(0, 1fr)
            54px;

        gap: 16px;
    }


    .ul-gallery-viewer__nav {
        width: 50px;
        height: 50px;

        border-radius: 14px;
    }


    .ul-gallery-viewer__bottom {
        min-height: 78px;
    }


    .ul-gallery-viewer__hint {
        font-size: .72rem;
    }

}


/* ==========================================================
   03 — MOBILE
========================================================== */

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

    .ul-gallery-viewer__shell {
        padding:
            0 18px;
    }


    .ul-gallery-viewer__top {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 16px;

        min-height: 76px;
    }


    .ul-gallery-viewer__brand {
        display: none;
    }


    .ul-gallery-viewer__category {
        align-items: flex-start;

        min-width: 0;

        text-align: left;
    }


    .ul-gallery-viewer__category strong {
        max-width:
            calc(100vw - 110px);

        font-size: 1.05rem;
    }


    .ul-gallery-viewer__close {
        min-height: 44px;

        padding: 3px;
    }


    .ul-gallery-viewer__close > span:first-child {
        display: none;
    }


    .ul-gallery-viewer__close-icon {
        width: 39px;
        height: 39px;
    }


    .ul-gallery-viewer__stage {
        display: block;

        padding:
            14px 0
            10px;
    }


    .ul-gallery-viewer__image-wrap {
        height: 100%;
    }


    .ul-gallery-viewer__image-surface {
        border-radius: 18px;
    }


    .ul-gallery-viewer__nav {
        position: absolute;

        z-index: 8;

        top: 50%;

        width: 46px;
        height: 46px;

        border-radius: 14px;

        background:
            rgba(8, 22, 14, .70);

        transform:
            translateY(-50%);
    }


    .ul-gallery-viewer__nav--prev {
        left: 5px;
    }


    .ul-gallery-viewer__nav--next {
        right: 5px;
    }


    .ul-gallery-viewer__nav--prev:hover,
    .ul-gallery-viewer__nav--next:hover {
        transform:
            translateY(-50%);
    }


    .ul-gallery-viewer__description {
        font-size: .76rem;
    }


    .ul-gallery-viewer__bottom {
        min-height: 68px;

        gap: 15px;
    }


    .ul-gallery-viewer__meta {
        width: 100%;
    }


    .ul-gallery-viewer__meta-copy {
        font-size: .75rem;
    }


    .ul-gallery-viewer__hint-desktop {
        display: none;
    }


    .ul-gallery-viewer__hint-mobile {
        display: inline;
    }


    .ul-gallery-viewer__hint {
        display: none;
    }

}


/* ==========================================================
   04 — SMALL MOBILE
========================================================== */

@media (max-width: 479px) {

    .ul-gallery-viewer__shell {
        padding:
            0 12px;
    }


    .ul-gallery-viewer__top {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 11px;

        min-height: 68px;
    }


    .ul-gallery-viewer__brand {
        display: none;
    }


    .ul-gallery-viewer__category {
        align-items: flex-start;

        min-width: 0;

        text-align: left;
    }


    .ul-gallery-viewer__category > span {
        font-size: .68rem;
    }


    .ul-gallery-viewer__category strong {
        max-width:
            calc(100vw - 88px);

        font-size: .96rem;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    .ul-gallery-viewer__close {
        min-height: 40px;

        padding: 2px;

        border-radius: 12px;
    }


    .ul-gallery-viewer__close > span:first-child {
        display: none;
    }


    .ul-gallery-viewer__close-icon {
        width: 37px;
        height: 37px;

        border-radius: 10px;
    }


    .ul-gallery-viewer__stage {
        display: block;

        padding:
            10px 0
            8px;
    }


    .ul-gallery-viewer__image-wrap {
        height: 100%;
    }


    .ul-gallery-viewer__image-surface {
        border-radius: 15px;
    }


    .ul-gallery-viewer__nav {
        position: absolute;

        z-index: 8;

        top: 50%;

        width: 43px;
        height: 43px;

        border-radius: 13px;

        background:
            rgba(7, 19, 12, .74);

        transform:
            translateY(-50%);
    }


    .ul-gallery-viewer__nav svg {
        width: 18px;
        height: 18px;
    }


    .ul-gallery-viewer__nav--prev {
        left: 3px;
    }


    .ul-gallery-viewer__nav--next {
        right: 3px;
    }


    .ul-gallery-viewer__nav--prev:hover,
    .ul-gallery-viewer__nav--next:hover {
        transform:
            translateY(-50%);
    }


    .ul-gallery-viewer__description {
        min-height: 18px;

        font-size: .70rem;
    }


    .ul-gallery-viewer__bottom {
        min-height: 62px;

        padding:
            9px 0;
    }


    .ul-gallery-viewer__meta {
        width: 100%;

        gap: 12px;
    }


    .ul-gallery-viewer__meta-copy {
        font-size: .70rem;
    }


    .ul-gallery-viewer__progress {
        height: 3px;
    }


    .ul-gallery-viewer__hint {
        display: none;
    }


    .ul-gallery-viewer__error {
        min-width:
            calc(100% - 24px);

        padding: 14px;

        border-radius: 14px;
    }


    .ul-gallery-viewer__error-icon {
        width: 39px;
        height: 39px;
    }


    .ul-gallery-viewer__error p {
        font-size: .82rem;
    }

}


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

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

    .ul-gallery-viewer,
    .ul-gallery-viewer__image,
    .ul-gallery-viewer__close,
    .ul-gallery-viewer__close-icon,
    .ul-gallery-viewer__nav,
    .ul-gallery-viewer__progress-fill {
        animation: none !important;

        transition: none !important;
    }


    .ul-gallery-viewer__loader span {
        animation: none !important;
    }

}