/* =====================================================
   RAINLANDSCAPING — GALLERY HERO
===================================================== */

.rl-gallery-hero {
    --rl-gallery-pointer-x: 72%;
    --rl-gallery-pointer-y: 40%;
    --rl-gallery-move-x: 0px;
    --rl-gallery-move-y: 0px;

    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 0;

    padding:
        calc(
            var(--rl-nav-safe-area) +
            clamp(20px, 3vh, 34px)
        )
        var(--rl-side-space)
        clamp(82px, 10vh, 112px);

    overflow: hidden;

    color: var(--rl-white);

    background:
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            #063246 52%,
            var(--rl-green-950)
        );
}


/* =====================================================
   BACKGROUND IMAGE
===================================================== */

.rl-gallery-hero__background-image {
    position: absolute;
    inset: 0;
    z-index: -4;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            var(--rl-green-950)
        );
}

.rl-gallery-hero__background-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transform: scale(1.07);

    filter:
        saturate(0.82)
        contrast(1.03);

    transition:
        opacity 900ms ease,
        transform 1600ms var(--rl-ease-smooth);
}

.rl-gallery-hero.is-background-loaded
.rl-gallery-hero__background-image img {
    opacity: 0.24;
    transform: scale(1.02);
}

.rl-gallery-hero__background-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 26, 51, 0.96) 0%,
            rgba(2, 26, 51, 0.92) 38%,
            rgba(2, 26, 51, 0.69) 64%,
            rgba(8, 44, 24, 0.72) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2, 26, 51, 0.14),
            rgba(2, 20, 34, 0.34)
        ),
        radial-gradient(
            circle 420px
            at
            var(--rl-gallery-pointer-x)
            var(--rl-gallery-pointer-y),
            rgba(72, 183, 229, 0.13),
            transparent 72%
        );
}


/* =====================================================
   DECORATIVE BACKGROUND
===================================================== */

.rl-gallery-hero__decoration {
    position: absolute;
    inset: 0;
    z-index: -3;

    overflow: hidden;

    pointer-events: none;
}

.rl-gallery-hero__decoration::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.16;

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

    background-size: 74px 74px;

    mask-image:
        linear-gradient(
            90deg,
            #000,
            rgba(0, 0, 0, 0.65) 54%,
            transparent 88%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000,
            rgba(0, 0, 0, 0.65) 54%,
            transparent 88%
        );
}

.rl-gallery-hero__water-shape {
    position: absolute;
    top: -265px;
    left: -180px;

    width: 570px;
    height: 630px;

    opacity: 0.16;

    border:
        1px solid
        rgba(133, 213, 241, 0.2);

    border-radius:
        68% 32% 65% 35% /
        73% 38% 62% 27%;

    background:
        linear-gradient(
            145deg,
            rgba(133, 213, 241, 0.24),
            transparent 72%
        );

    transform: rotate(40deg);
}

.rl-gallery-hero__water-ring {
    position: absolute;
    right: -150px;
    bottom: -170px;

    width: 400px;
    height: 400px;

    opacity: 0.55;

    border:
        1px solid
        rgba(133, 213, 241, 0.1);

    border-radius: 50%;
}

.rl-gallery-hero__water-ring::before,
.rl-gallery-hero__water-ring::after {
    content: "";

    position: absolute;

    border:
        1px solid
        rgba(133, 213, 241, 0.075);

    border-radius: inherit;
}

.rl-gallery-hero__water-ring::before {
    inset: 40px;
}

.rl-gallery-hero__water-ring::after {
    inset: 84px;
}

.rl-gallery-hero__lawn-lines {
    position: absolute;
    bottom: -280px;
    left: 10%;

    width: 850px;
    height: 440px;

    opacity: 0.1;

    border-radius: 50%;

    background:
        repeating-linear-gradient(
            112deg,
            rgba(154, 203, 104, 0.24) 0,
            rgba(154, 203, 104, 0.24) 15px,
            transparent 15px,
            transparent 40px
        );

    transform: rotate(-13deg);
}

.rl-gallery-hero__leaf {
    position: absolute;

    width: 105px;
    height: 50px;

    opacity: 0.13;

    border:
        1px solid
        rgba(154, 203, 104, 0.43);

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            rgba(117, 170, 75, 0.18),
            transparent
        );
}

.rl-gallery-hero__leaf::after {
    content: "";

    position: absolute;
    top: 51%;
    left: 8%;

    width: 83%;
    height: 1px;

    background:
        rgba(154, 203, 104, 0.28);

    transform: rotate(-16deg);
}

.rl-gallery-hero__leaf--one {
    top: 29%;
    left: 4%;

    transform: rotate(20deg);
}

.rl-gallery-hero__leaf--two {
    right: 5%;
    bottom: 19%;

    transform:
        rotate(128deg)
        scale(0.72);
}

.rl-gallery-hero__route {
    position: absolute;
    top: 38%;
    right: -7%;

    width: 56%;
    height: 270px;

    opacity: 0.13;

    fill: none;
    stroke: var(--rl-blue-300);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 8 13;
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.rl-gallery-hero__container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 0.88fr);

    align-items: center;
    gap: clamp(55px, 8vw, 125px);

    width: 100%;
    height: 100%;
}


/* =====================================================
   CONTENT
===================================================== */

.rl-gallery-hero__content {
    width: min(100%, 760px);
}

.rl-gallery-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 38px;

    margin-bottom:
        clamp(17px, 2.5vh, 25px);

    padding: 6px 13px 6px 7px;

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

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

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

    border-radius: 13px;

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

    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rl-gallery-hero__eyebrow-icon {
    display: grid;
    place-items: center;

    width: 26px;
    height: 26px;

    color: var(--rl-blue-200);

    background:
        linear-gradient(
            145deg,
            rgba(7, 140, 213, 0.28),
            rgba(117, 170, 75, 0.15)
        );

    border-radius: 9px;
}

.rl-gallery-hero__eyebrow-icon svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

    margin: 0;

    color: var(--rl-white);

    font-size:
        clamp(3.2rem, 6vw, 6.25rem);
    line-height: 0.92;
    letter-spacing: -0.06em;

    text-wrap: balance;
}

.rl-gallery-hero__title span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--rl-blue-200),
            #dff4ee 48%,
            var(--rl-green-300)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-gallery-hero__description {
    max-width: 590px;

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

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

    font-size:
        clamp(0.92rem, 1.22vw, 1.03rem);
    line-height: 1.68;

    text-wrap: pretty;
}


/* =====================================================
   ACTIONS
===================================================== */

.rl-gallery-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top:
        clamp(23px, 3.3vh, 33px);
}

.rl-gallery-hero__primary {
    min-height: 57px;

    padding-inline: 24px;

    color: var(--rl-white);

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

    border: 0;
    border-radius: 17px;

    box-shadow:
        0 16px 37px
        rgba(7, 140, 213, 0.28),
        0 7px 20px
        rgba(18, 75, 38, 0.14);
}

.rl-gallery-hero__primary svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform var(--rl-transition-normal);
}

.rl-gallery-hero__primary:hover svg {
    transform: translateY(4px);
}

.rl-gallery-hero__estimate {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 57px;

    padding: 7px 14px 7px 8px;

    color: var(--rl-white);

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

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

    border-radius: 17px;

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

    transition:
        color var(--rl-transition-normal),
        background var(--rl-transition-normal),
        transform var(--rl-transition-normal);
}

.rl-gallery-hero__estimate:hover {
    color: var(--rl-blue-950);
    background: var(--rl-white);

    transform: translateY(-3px);
}

.rl-gallery-hero__estimate-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    color: var(--rl-white);

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

    border-radius: 13px;
}

.rl-gallery-hero__estimate-icon svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rl-gallery-hero__estimate-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rl-gallery-hero__estimate-copy small {
    color:
        rgba(255, 255, 255, 0.52);

    font-size: 0.55rem;
    font-weight: 700;
}

.rl-gallery-hero__estimate:hover
.rl-gallery-hero__estimate-copy small {
    color: var(--rl-muted);
}

.rl-gallery-hero__estimate-copy strong {
    font-size: 0.72rem;
    line-height: 1;
}


/* =====================================================
   HERO INFORMATION
===================================================== */

.rl-gallery-hero__information {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;

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

.rl-gallery-hero__information-item {
    display: flex;
    align-items: center;
    gap: 9px;

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

.rl-gallery-hero__information-item > strong {
    color: var(--rl-blue-200);

    font-family: var(--rl-font-heading);
    font-size: 1.25rem;
    line-height: 1;
}

.rl-gallery-hero__information-item > svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: var(--rl-green-300);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rl-gallery-hero__information-item > span {
    display: flex;
    flex-direction: column;
    gap: 2px;

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

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

.rl-gallery-hero__information-item small {
    color:
        rgba(255, 255, 255, 0.42);

    font-size: 0.51rem;
    font-weight: 600;
}

.rl-gallery-hero__information-divider {
    width: 1px;
    height: 25px;

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


/* =====================================================
   VISUAL COLLAGE
===================================================== */

.rl-gallery-hero__visual {
    position: relative;

    width: min(100%, 570px);
    height: min(64vh, 660px);
    min-height: 500px;

    margin-left: auto;

    transform:
        translate3d(
            var(--rl-gallery-move-x),
            var(--rl-gallery-move-y),
            0
        );

    transition:
        transform 600ms var(--rl-ease-smooth);
}

.rl-gallery-hero__collage {
    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(0, 0.94fr);

    grid-template-rows:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: 12px;

    width: 100%;
    height: 100%;

    padding: 8px;

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

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

    border-radius: 31px;

    box-shadow:
        0 32px 90px
        rgba(0, 11, 21, 0.32),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

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

.rl-gallery-hero__image {
    position: relative;

    display: block;

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

    overflow: hidden;

    background: var(--rl-blue-950);

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

    border-radius: 20px;

    outline: none;

    box-shadow:
        0 12px 30px
        rgba(0, 12, 23, 0.17);

    transition:
        border-color var(--rl-transition-normal),
        box-shadow var(--rl-transition-normal),
        transform var(--rl-transition-slow);
}

.rl-gallery-hero__image--main {
    grid-row: 1 / 3;

    border-radius:
        23px 17px 17px 23px;
}

.rl-gallery-hero__image--top {
    grid-column: 2;
    grid-row: 1;
}

.rl-gallery-hero__image--bottom-left,
.rl-gallery-hero__image--bottom-right {
    grid-row: 2;
}

.rl-gallery-hero__image--bottom-left {
    grid-column: 2;

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

.rl-gallery-hero__image--bottom-right {
    grid-column: 2;

    margin-left: calc(50% + 6px);
}

.rl-gallery-hero__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transform: scale(1.08);

    filter:
        saturate(0.93)
        contrast(1.02);

    transition:
        opacity 700ms ease,
        filter var(--rl-transition-slow),
        transform 1100ms var(--rl-ease-smooth);
}

.rl-gallery-hero__image.is-loaded img {
    opacity: 1;
    transform: scale(1.01);
}

.rl-gallery-hero__image:hover,
.rl-gallery-hero__image:focus-visible {
    z-index: 3;

    border-color:
        rgba(133, 213, 241, 0.35);

    box-shadow:
        0 25px 60px
        rgba(0, 12, 23, 0.3);

    transform: translateY(-6px);
}

.rl-gallery-hero__image:hover img,
.rl-gallery-hero__image:focus-visible img {
    filter:
        saturate(1.06)
        contrast(1.04);

    transform: scale(1.07);
}

.rl-gallery-hero__image:focus-visible {
    outline:
        3px solid
        rgba(133, 213, 241, 0.42);

    outline-offset: 3px;
}

.rl-gallery-hero__image-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(2, 26, 51, 0.52)
        );

    transition:
        opacity var(--rl-transition-normal);
}

.rl-gallery-hero__image:hover
.rl-gallery-hero__image-shade {
    opacity: 0.65;
}

.rl-gallery-hero__image-arrow {
    position: absolute;
    right: 11px;
    bottom: 11px;

    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    color: var(--rl-blue-950);

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

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

    border-radius: 12px;

    box-shadow:
        0 10px 24px
        rgba(0, 12, 23, 0.2);

    opacity: 0;

    transform:
        translateY(8px)
        rotate(-6deg);

    transition:
        color var(--rl-transition-normal),
        background var(--rl-transition-normal),
        border-radius var(--rl-transition-normal),
        opacity var(--rl-transition-normal),
        transform var(--rl-transition-normal);
}

.rl-gallery-hero__image:hover
.rl-gallery-hero__image-arrow,
.rl-gallery-hero__image:focus-visible
.rl-gallery-hero__image-arrow {
    opacity: 1;

    transform:
        translateY(0)
        rotate(0);
}

.rl-gallery-hero__image-arrow svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =====================================================
   FLOATING ELEMENTS
===================================================== */

.rl-gallery-hero__floating-card {
    position: absolute;
    top: 11%;
    left: -48px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 67px;

    padding: 9px 14px 9px 9px;

    color: var(--rl-white);

    background:
        rgba(2, 26, 51, 0.76);

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

    border-radius: 17px;

    box-shadow:
        0 18px 45px
        rgba(0, 12, 23, 0.27);

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

.rl-gallery-hero__floating-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    color: var(--rl-white);

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

    border-radius: 14px;
}

.rl-gallery-hero__floating-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rl-gallery-hero__floating-card > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-gallery-hero__floating-card small {
    color: var(--rl-blue-200);

    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.rl-gallery-hero__floating-card strong {
    font-size: 0.66rem;
    line-height: 1.25;
}

.rl-gallery-hero__collage-counter {
    position: absolute;
    right: -23px;
    bottom: 9%;
    z-index: 5;

    display: flex;
    flex-direction: column;
    gap: 6px;

    min-width: 116px;

    padding: 13px 15px;

    color: var(--rl-white);

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

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

    border-radius: 16px;

    box-shadow:
        0 17px 40px
        rgba(0, 12, 23, 0.23);

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

.rl-gallery-hero__collage-counter > span {
    color:
        rgba(255, 255, 255, 0.53);

    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rl-gallery-hero__collage-counter strong {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--rl-white);

    font-size: 0.72rem;
}

.rl-gallery-hero__collage-counter i {
    width: 25px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--rl-blue-300),
            var(--rl-green-300)
        );
}


/* =====================================================
   BOTTOM BAR
===================================================== */

.rl-gallery-hero__bottom {
    position: absolute;
    right: max(
        var(--rl-side-space),
        calc((100vw - var(--rl-container)) / 2)
    );
    bottom: 17px;
    left: max(
        var(--rl-side-space),
        calc((100vw - var(--rl-container)) / 2)
    );
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    min-height: 51px;

    padding: 8px 10px 8px 16px;

    color: var(--rl-white);

    background:
        rgba(2, 26, 51, 0.38);

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

    border-radius: 16px;

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

.rl-gallery-hero__bottom-copy {
    display: flex;
    align-items: center;
    gap: 9px;
}

.rl-gallery-hero__bottom-copy > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--rl-green-300);

    box-shadow:
        0 0 0 4px
        rgba(154, 203, 104, 0.11);
}

.rl-gallery-hero__bottom-copy p {
    margin: 0;

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

    font-size: 0.62rem;
    font-weight: 700;
}

.rl-gallery-hero__bottom > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 37px;

    padding: 8px 13px;

    color: var(--rl-white);

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

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

    border-radius: 11px;

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

    transition:
        background var(--rl-transition-normal),
        gap var(--rl-transition-normal);
}

.rl-gallery-hero__bottom > a:hover {
    gap: 12px;

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

.rl-gallery-hero__bottom > a svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: var(--rl-blue-200);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =====================================================
   ENTRY ANIMATION
===================================================== */

.rl-gallery-hero.is-ready
[data-rl-gallery-hero-item] {
    animation:
        rl-gallery-hero-enter
        760ms
        var(--rl-ease-smooth)
        both;
}

.rl-gallery-hero.is-ready
[data-rl-gallery-hero-item]:nth-child(2) {
    animation-delay: 70ms;
}

.rl-gallery-hero.is-ready
[data-rl-gallery-hero-item]:nth-child(3) {
    animation-delay: 130ms;
}

.rl-gallery-hero.is-ready
[data-rl-gallery-hero-item]:nth-child(4) {
    animation-delay: 190ms;
}

.rl-gallery-hero.is-ready
[data-rl-gallery-hero-item]:nth-child(5) {
    animation-delay: 240ms;
}

.rl-gallery-hero.is-ready
[data-rl-gallery-hero-visual] {
    animation:
        rl-gallery-visual-enter
        900ms
        var(--rl-ease-smooth)
        150ms
        both;
}

@keyframes rl-gallery-hero-enter {

    from {
        opacity: 0;
        transform: translateY(23px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}

@keyframes rl-gallery-visual-enter {

    from {
        opacity: 0;
        transform:
            translateX(34px)
            scale(0.975);
    }

    to {
        opacity: 1;
        transform:
            translate3d(
                var(--rl-gallery-move-x),
                var(--rl-gallery-move-y),
                0
            );
    }

}


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

html.rl-reduced-motion
.rl-gallery-hero.is-ready
[data-rl-gallery-hero-item],
html.rl-reduced-motion
.rl-gallery-hero.is-ready
[data-rl-gallery-hero-visual] {
    animation: none !important;
}

html.rl-reduced-motion
.rl-gallery-hero__visual,
html.rl-reduced-motion
.rl-gallery-hero__image,
html.rl-reduced-motion
.rl-gallery-hero__image img,
html.rl-reduced-motion
.rl-gallery-hero__background-image img {
    transition-duration: 0.01ms !important;
}




































/* =====================================================
   RAINLANDSCAPING — STICKY GALLERY SERVICE NAVIGATION
===================================================== */

.rl-gallery-nav-sentinel {
    position: relative;

    width: 100%;
    height: 1px;

    margin-top: -1px;

    pointer-events: none;
}


.rl-gallery-nav {
    --rl-gallery-nav-progress-width: 0%;

    position: sticky;
    top:
        calc(
            var(--rl-nav-top, 12px) +
            var(--rl-nav-height, 76px) +
            10px
        );
    z-index: 80;
    isolation: isolate;

    width: 100%;

    padding:
        13px
        var(--rl-side-space);

    background:
        linear-gradient(
            180deg,
            rgba(243, 247, 244, 0.98),
            rgba(243, 247, 244, 0.92)
        );

    border-bottom:
        1px solid
        rgba(6, 99, 172, 0.08);

    transition:
        padding var(--rl-transition-normal),
        background var(--rl-transition-normal),
        box-shadow var(--rl-transition-normal);
}


/* =====================================================
   STICKY STATE
===================================================== */

.rl-gallery-nav.is-stuck {
    padding-top: 8px;
    padding-bottom: 8px;

    background:
        rgba(243, 247, 244, 0.88);

    box-shadow:
        0 20px 50px
        rgba(3, 39, 60, 0.13),
        0 4px 14px
        rgba(18, 75, 38, 0.045);

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


/* =====================================================
   DECORATIVE BACKGROUND
===================================================== */

.rl-gallery-nav__background {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}

.rl-gallery-nav__background::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.15;

    background-image:
        linear-gradient(
            rgba(6, 99, 172, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(53, 122, 58, 0.03) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}

.rl-gallery-nav__water-line {
    position: absolute;
    top: -105px;
    right: 4%;

    width: 290px;
    height: 190px;

    opacity: 0.22;

    border:
        1px solid
        rgba(7, 140, 213, 0.18);

    border-radius: 50%;
}

.rl-gallery-nav__water-line::before {
    content: "";

    position: absolute;
    inset: 31px;

    border:
        1px solid
        rgba(7, 140, 213, 0.12);

    border-radius: inherit;
}

.rl-gallery-nav__leaf {
    position: absolute;
    bottom: -29px;
    left: 6%;

    width: 87px;
    height: 41px;

    opacity: 0.14;

    border:
        1px solid
        rgba(53, 122, 58, 0.43);

    border-radius:
        100% 0 100% 0;

    transform: rotate(18deg);
}


/* =====================================================
   CONTAINER
===================================================== */

.rl-gallery-nav__container {
    position: relative;

    width: 100%;
}


/* =====================================================
   MAIN SHELL
===================================================== */

.rl-gallery-nav__shell {
    display: grid;

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

    align-items: center;
    gap: 16px;

    width: 100%;
    min-height: 72px;

    padding: 8px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(248, 252, 249, 0.9)
        );

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

    border-radius: 21px;

    box-shadow:
        0 13px 38px
        rgba(3, 39, 60, 0.09),
        0 4px 12px
        rgba(18, 75, 38, 0.035);

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

    transition:
        min-height var(--rl-transition-normal),
        border-radius var(--rl-transition-normal),
        box-shadow var(--rl-transition-normal);
}

.rl-gallery-nav.is-stuck
.rl-gallery-nav__shell {
    min-height: 64px;

    border-radius: 18px;

    box-shadow:
        0 14px 38px
        rgba(3, 39, 60, 0.11);
}


/* =====================================================
   IDENTITY
===================================================== */

.rl-gallery-nav__identity {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 174px;

    padding:
        6px
        12px
        6px
        6px;

    border-right:
        1px solid
        rgba(6, 99, 172, 0.09);
}

.rl-gallery-nav__identity-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 43px;
    height: 43px;

    color: var(--rl-white);

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

    border-radius: 13px;

    box-shadow:
        0 11px 26px
        rgba(7, 140, 213, 0.2);
}

.rl-gallery-nav__identity-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rl-gallery-nav__identity-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.rl-gallery-nav__identity-copy small {
    color: var(--rl-blue-700);

    font-size: 0.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rl-gallery-nav__identity-copy strong {
    max-width: 130px;

    overflow: hidden;

    color: var(--rl-heading);

    font-family: var(--rl-font-heading);
    font-size: 0.76rem;
    line-height: 1.15;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================
   LINKS WRAPPER
===================================================== */

.rl-gallery-nav__links-wrapper {
    min-width: 0;
    overflow: hidden;
}

.rl-gallery-nav__links {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;

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

    padding:
        3px
        2px
        7px;

    scrollbar-width: none;

    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
}

.rl-gallery-nav__links::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   NAVIGATION LINK
===================================================== */

.rl-gallery-nav__link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;

    min-height: 43px;

    padding:
        9px
        12px;

    color: var(--rl-text);

    background:
        rgba(6, 99, 172, 0.04);

    border:
        1px solid
        rgba(6, 99, 172, 0.07);

    border-radius: 13px;

    font-size: 0.61rem;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;

    scroll-snap-align: center;

    outline: none;

    transition:
        color var(--rl-transition-normal),
        background var(--rl-transition-normal),
        border-color var(--rl-transition-normal),
        box-shadow var(--rl-transition-normal),
        transform var(--rl-transition-normal);
}

.rl-gallery-nav__link:hover,
.rl-gallery-nav__link:focus-visible {
    color: var(--rl-blue-900);

    background:
        rgba(133, 213, 241, 0.12);

    border-color:
        rgba(7, 140, 213, 0.18);

    transform: translateY(-2px);
}

.rl-gallery-nav__link:focus-visible {
    box-shadow:
        0 0 0 3px
        rgba(7, 140, 213, 0.13);
}

.rl-gallery-nav__link.is-active {
    color: var(--rl-white);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(72, 183, 229, 0.24),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            var(--rl-blue-900) 54%,
            var(--rl-green-900)
        );

    border-color:
        rgba(7, 140, 213, 0.22);

    box-shadow:
        0 11px 26px
        rgba(3, 39, 60, 0.17);

    transform: translateY(-2px);
}

.rl-gallery-nav__link-number {
    display: grid;
    place-items: center;

    min-width: 23px;
    height: 23px;

    padding-inline: 5px;

    color: var(--rl-blue-700);

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

    border:
        1px solid
        rgba(6, 99, 172, 0.08);

    border-radius: 8px;

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

    transition:
        color var(--rl-transition-normal),
        background var(--rl-transition-normal);
}

.rl-gallery-nav__link.is-active
.rl-gallery-nav__link-number {
    color: var(--rl-white);

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

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


/* =====================================================
   ESTIMATE BUTTON
===================================================== */

.rl-gallery-nav__estimate {
    display: grid;

    grid-template-columns:
        38px auto 17px;

    align-items: center;
    gap: 9px;
    flex: 0 0 auto;

    min-height: 54px;

    padding:
        7px
        12px
        7px
        7px;

    color: var(--rl-white);

    background:
        linear-gradient(
            135deg,
            var(--rl-blue-900),
            var(--rl-green-900)
        );

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

    border-radius: 16px;

    box-shadow:
        0 13px 30px
        rgba(3, 39, 60, 0.18);

    transition:
        box-shadow var(--rl-transition-normal),
        transform var(--rl-transition-normal);
}

.rl-gallery-nav__estimate:hover {
    box-shadow:
        0 18px 39px
        rgba(3, 39, 60, 0.24);

    transform: translateY(-3px);
}

.rl-gallery-nav__estimate-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    color: var(--rl-white);

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

    border-radius: 12px;
}

.rl-gallery-nav__estimate-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rl-gallery-nav__estimate-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-gallery-nav__estimate-copy small {
    color:
        rgba(255, 255, 255, 0.48);

    font-size: 0.48rem;
    font-weight: 700;
}

.rl-gallery-nav__estimate-copy strong {
    color: var(--rl-white);

    font-size: 0.65rem;
    line-height: 1;
}

.rl-gallery-nav__estimate-arrow {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: var(--rl-blue-200);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform var(--rl-transition-normal);
}

.rl-gallery-nav__estimate:hover
.rl-gallery-nav__estimate-arrow {
    transform: translateX(4px);
}


/* =====================================================
   PROGRESS INDICATOR
===================================================== */

.rl-gallery-nav__progress {
    position: relative;

    width:
        calc(100% - 38px);
    height: 3px;

    margin:
        -1px
        auto
        0;

    overflow: hidden;

    background:
        rgba(6, 99, 172, 0.07);

    border-radius: var(--rl-radius-round);
}

.rl-gallery-nav__progress > span {
    display: block;

    width:
        var(--rl-gallery-nav-progress-width);
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--rl-blue-500),
            var(--rl-green-400)
        );

    border-radius: inherit;

    box-shadow:
        0 0 12px
        rgba(7, 140, 213, 0.25);

    transition:
        width 520ms var(--rl-ease-smooth);
}


/* =====================================================
   OFFSET FOR LINKED SECTIONS
===================================================== */

#gallery-introduction,
#lawn-maintenance,
#artificial-turf-installation,
#sod-installation,
#mulch-installation,
#stone-landscaping,
#walkway-landscaping,
#plant-flower-tree-planting,
#yard-drainage-irrigation-winterization,
#landscape-lighting,
#shrub-hedge-trimming {
    scroll-margin-top:
        calc(
            var(--rl-nav-top, 12px) +
            var(--rl-nav-height, 76px) +
            112px
        );
}


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

html.rl-reduced-motion
.rl-gallery-nav,
html.rl-reduced-motion
.rl-gallery-nav__shell,
html.rl-reduced-motion
.rl-gallery-nav__link,
html.rl-reduced-motion
.rl-gallery-nav__estimate,
html.rl-reduced-motion
.rl-gallery-nav__progress > span,
html.rl-reduced-motion
.rl-gallery-nav__links {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
}








































/* =====================================================
   RAINLANDSCAPING — SERVICE GALLERY
===================================================== */

.rl-service-gallery {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(133, 213, 241, 0.17),
            transparent 27%
        ),
        radial-gradient(
            circle at 7% 86%,
            rgba(117, 170, 75, 0.13),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            var(--rl-cream),
            var(--rl-page-bg) 55%,
            var(--rl-page-bg-alt)
        );
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

.rl-service-gallery__background {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}

.rl-service-gallery__background::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(6, 99, 172, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(53, 122, 58, 0.03) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
}

.rl-service-gallery__water-ring {
    position: absolute;
    top: -190px;
    right: -170px;

    width: 440px;
    height: 440px;

    opacity: 0.55;

    border:
        1px solid
        rgba(7, 140, 213, 0.1);

    border-radius: 50%;
}

.rl-service-gallery__water-ring::before,
.rl-service-gallery__water-ring::after {
    content: "";

    position: absolute;

    border:
        1px solid
        rgba(7, 140, 213, 0.075);

    border-radius: inherit;
}

.rl-service-gallery__water-ring::before {
    inset: 43px;
}

.rl-service-gallery__water-ring::after {
    inset: 91px;
}

.rl-service-gallery__lawn-lines {
    position: absolute;
    right: -420px;
    bottom: -220px;

    width: 960px;
    height: 490px;

    opacity: 0.13;

    border-radius: 50%;

    background:
        repeating-linear-gradient(
            112deg,
            rgba(53, 122, 58, 0.13) 0,
            rgba(53, 122, 58, 0.13) 15px,
            transparent 15px,
            transparent 39px
        );

    transform: rotate(-14deg);
}

.rl-service-gallery__leaf {
    position: absolute;

    width: 112px;
    height: 53px;

    opacity: 0.16;

    border:
        1px solid
        rgba(53, 122, 58, 0.42);

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            rgba(117, 170, 75, 0.2),
            transparent
        );
}

.rl-service-gallery__leaf::after {
    content: "";

    position: absolute;
    top: 51%;
    left: 8%;

    width: 83%;
    height: 1px;

    background:
        rgba(53, 122, 58, 0.29);

    transform: rotate(-16deg);
}

.rl-service-gallery__leaf--one {
    top: 24%;
    left: 4%;

    transform: rotate(19deg);
}

.rl-service-gallery__leaf--two {
    right: 5%;
    bottom: 24%;

    transform:
        rotate(128deg)
        scale(0.72);
}

.rl-service-gallery__route {
    position: absolute;
    top: 39%;
    right: -5%;

    width: 58%;
    height: 290px;

    opacity: 0.12;

    fill: none;
    stroke: var(--rl-blue-500);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 8 13;
}


/* =====================================================
   SECTION HEADER
===================================================== */

.rl-service-gallery__header {
    display: grid;

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

    align-items: end;
    gap: 50px;

    margin-bottom:
        clamp(39px, 5vw, 66px);
}

.rl-service-gallery__heading-group {
    display: flex;
    align-items: flex-start;
    gap: clamp(19px, 3vw, 38px);
}

.rl-service-gallery__number {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width:
        clamp(66px, 7vw, 94px);
    height:
        clamp(66px, 7vw, 94px);

    color: var(--rl-white);

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(72, 183, 229, 0.24),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            var(--rl-blue-900) 55%,
            var(--rl-green-900)
        );

    border:
        1px solid
        rgba(7, 140, 213, 0.16);

    border-radius:
        clamp(19px, 2vw, 27px);

    box-shadow:
        0 18px 45px
        rgba(3, 39, 60, 0.19);

    font-family: var(--rl-font-heading);
    font-size:
        clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 800;
}

.rl-service-gallery__heading h2 {
    margin: 0;

    color: var(--rl-heading);

    font-size:
        clamp(2.8rem, 5.2vw, 5.35rem);
    line-height: 0.93;
    letter-spacing: -0.055em;
}

.rl-service-gallery__heading h2 span {
    display: block;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--rl-blue-700),
            var(--rl-blue-500) 48%,
            var(--rl-green-600)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery__heading p {
    max-width: 590px;

    margin: 17px 0 0;

    color: var(--rl-text);

    font-size: 0.86rem;
    line-height: 1.65;
}

.rl-service-gallery__header-side {
    display: flex;
    align-items: center;
    gap: 19px;
}

.rl-service-gallery__details {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 11px 15px;

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

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

    border-radius: 17px;

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

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

.rl-service-gallery__detail {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rl-service-gallery__detail strong {
    color: var(--rl-blue-700);

    font-family: var(--rl-font-heading);
    font-size: 1.2rem;
}

.rl-service-gallery__detail > svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: var(--rl-green-600);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rl-service-gallery__detail > span {
    display: flex;
    flex-direction: column;
    gap: 2px;

    color: var(--rl-heading);

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

.rl-service-gallery__detail small {
    color: var(--rl-muted);

    font-size: 0.49rem;
    font-weight: 600;
}

.rl-service-gallery__detail-divider {
    width: 1px;
    height: 28px;

    background:
        rgba(6, 99, 172, 0.11);
}

.rl-service-gallery__estimate {
    min-height: 55px;

    color: var(--rl-white);

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

    border: 0;
    border-radius: 16px;

    box-shadow:
        0 15px 35px
        rgba(7, 140, 213, 0.23);
}

.rl-service-gallery__estimate svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform var(--rl-transition-normal);
}

.rl-service-gallery__estimate:hover svg {
    transform: translateX(5px);
}


/* =====================================================
   GALLERY GRID
===================================================== */

.rl-service-gallery__grid {
    display: grid;

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

    grid-auto-rows:
        clamp(105px, 9.4vw, 145px);

    gap: 13px;

    width: 100%;
}

.rl-service-gallery__image {
    position: relative;
    isolation: isolate;

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

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--rl-page-bg-alt),
            var(--rl-sand-light)
        );

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

    border-radius: 22px;

    box-shadow:
        0 16px 40px
        rgba(3, 39, 60, 0.11),
        0 4px 13px
        rgba(18, 75, 38, 0.045);

    cursor: zoom-in;

    outline: none;

    transition:
        border-color var(--rl-transition-normal),
        box-shadow var(--rl-transition-normal),
        transform var(--rl-transition-slow);
}

.rl-service-gallery__image--featured {
    grid-column: 1 / 8;
    grid-row: span 4;

    border-radius: 29px;
}

.rl-service-gallery__image--wide-top {
    grid-column: 8 / 13;
    grid-row: span 2;
}

.rl-service-gallery__image--small-one {
    grid-column: 8 / 11;
    grid-row: span 2;
}

.rl-service-gallery__image--small-two {
    grid-column: 11 / 13;
    grid-row: span 2;
}

.rl-service-gallery__image--lower-left {
    grid-column: 1 / 5;
    grid-row: span 2;
}

.rl-service-gallery__image--lower-center {
    grid-column: 5 / 8;
    grid-row: span 2;
}

.rl-service-gallery__image--bottom-feature {
    grid-column: 8 / 13;
    grid-row: span 3;

    border-radius: 24px;
}

.rl-service-gallery__image--bottom-wide {
    grid-column: 1 / 8;
    grid-row: span 3;

    border-radius: 24px;
}

.rl-service-gallery__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transform: scale(1.07);

    filter:
        saturate(0.93)
        contrast(1.02);

    transition:
        opacity 620ms ease,
        filter var(--rl-transition-slow),
        transform 1050ms var(--rl-ease-smooth);
}

.rl-service-gallery__image.is-loaded img {
    opacity: 1;
    transform: scale(1.01);
}

.rl-service-gallery__image:hover,
.rl-service-gallery__image:focus-visible {
    z-index: 3;

    border-color:
        rgba(7, 140, 213, 0.28);

    box-shadow:
        0 28px 65px
        rgba(3, 39, 60, 0.19);

    transform:
        translateY(-7px)
        scale(1.012);
}

.rl-service-gallery__image:focus-visible {
    outline:
        3px solid
        rgba(7, 140, 213, 0.3);

    outline-offset: 4px;
}

.rl-service-gallery__image:hover img,
.rl-service-gallery__image:focus-visible img {
    filter:
        saturate(1.06)
        contrast(1.04);

    transform: scale(1.075);
}

.rl-service-gallery__image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(2, 26, 51, 0.38)
        );

    opacity: 0.55;

    transition:
        opacity var(--rl-transition-normal);
}

.rl-service-gallery__image:hover
.rl-service-gallery__image-overlay,
.rl-service-gallery__image:focus-visible
.rl-service-gallery__image-overlay {
    opacity: 0.78;
}

.rl-service-gallery__expand {
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    color: var(--rl-blue-950);

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

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

    border-radius: 14px;

    box-shadow:
        0 12px 28px
        rgba(3, 39, 60, 0.2);

    opacity: 0;

    transform:
        translateY(9px)
        rotate(-7deg);

    transition:
        color var(--rl-transition-normal),
        background var(--rl-transition-normal),
        border-radius var(--rl-transition-normal),
        opacity var(--rl-transition-normal),
        transform var(--rl-transition-normal);
}

.rl-service-gallery__image:hover
.rl-service-gallery__expand,
.rl-service-gallery__image:focus-visible
.rl-service-gallery__expand {
    opacity: 1;

    transform:
        translateY(0)
        rotate(0);
}

.rl-service-gallery__expand svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =====================================================
   SECTION FOOTER
===================================================== */

.rl-service-gallery__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;

    margin-top: 23px;
    padding: 19px 21px;

    background:
        linear-gradient(
            105deg,
            rgba(133, 213, 241, 0.13),
            rgba(255, 255, 255, 0.72),
            rgba(117, 170, 75, 0.1)
        );

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

    border-radius: 21px;

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

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

.rl-service-gallery__footer-copy {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rl-service-gallery__footer-icon {
    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;

    color: var(--rl-white);

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

    border-radius: 14px;

    box-shadow:
        0 11px 27px
        rgba(7, 140, 213, 0.21);
}

.rl-service-gallery__footer-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rl-service-gallery__footer-copy > div,
.rl-service-gallery__next > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-service-gallery__footer-copy small,
.rl-service-gallery__next small {
    color: var(--rl-blue-700);

    font-size: 0.51rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.rl-service-gallery__footer-copy strong {
    color: var(--rl-heading);

    font-size: 0.76rem;
}

.rl-service-gallery__next {
    display: flex;
    align-items: center;
    gap: 16px;

    min-height: 51px;

    padding:
        8px
        10px
        8px
        16px;

    color: var(--rl-white);

    background:
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            var(--rl-green-900)
        );

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

    border-radius: 15px;

    box-shadow:
        0 13px 29px
        rgba(3, 39, 60, 0.16);

    transition:
        box-shadow var(--rl-transition-normal),
        transform var(--rl-transition-normal);
}

.rl-service-gallery__next:hover {
    box-shadow:
        0 18px 39px
        rgba(3, 39, 60, 0.22);

    transform: translateY(-3px);
}

.rl-service-gallery__next small {
    color: var(--rl-blue-200);
}

.rl-service-gallery__next strong {
    color: var(--rl-white);

    font-size: 0.7rem;
}

.rl-service-gallery__next > svg {
    width: 37px;
    height: 37px;

    padding: 9px;

    fill: none;
    stroke: var(--rl-white);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

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

    border-radius: 11px;

    transition:
        transform var(--rl-transition-normal);
}

.rl-service-gallery__next:hover > svg {
    transform: translateX(4px);
}


/* =====================================================
   GLOBAL LIGHTBOX
===================================================== */

.rl-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;
    padding: 20px;

    visibility: hidden;
    opacity: 0;

    transition:
        visibility 360ms var(--rl-ease-standard),
        opacity 360ms var(--rl-ease-standard);
}

.rl-gallery-lightbox[hidden] {
    display: none;
}

.rl-gallery-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}

.rl-gallery-lightbox__backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(1, 14, 26, 0.92);

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

.rl-gallery-lightbox__viewer {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    width: min(100%, 1450px);
    height: min(100%, 920px);

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(6, 35, 50, 0.96),
            rgba(5, 25, 32, 0.97)
        );

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

    border-radius: 27px;

    box-shadow:
        0 40px 120px
        rgba(0, 0, 0, 0.48);

    transform:
        translateY(22px)
        scale(0.985);

    transition:
        transform 480ms var(--rl-ease-smooth);
}

.rl-gallery-lightbox.is-open
.rl-gallery-lightbox__viewer {
    transform: none;
}

.rl-gallery-lightbox__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    min-height: 76px;

    padding:
        13px
        15px
        13px
        23px;

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

.rl-gallery-lightbox__information {
    display: flex;
    align-items: center;
    gap: 17px;

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

.rl-gallery-lightbox__information > span {
    color: var(--rl-white);

    font-family: var(--rl-font-heading);
    font-size: 0.86rem;
    font-weight: 700;
}

.rl-gallery-lightbox__information > strong {
    padding-left: 17px;

    color: var(--rl-blue-200);

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

    font-size: 0.64rem;
}

.rl-gallery-lightbox__close,
.rl-gallery-lightbox__navigation {
    display: grid;
    place-items: center;

    padding: 0;

    color: var(--rl-white);

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

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

    cursor: pointer;

    transition:
        background var(--rl-transition-normal),
        border-color var(--rl-transition-normal),
        transform var(--rl-transition-normal);
}

.rl-gallery-lightbox__close {
    width: 47px;
    height: 47px;

    border-radius: 14px;
}

.rl-gallery-lightbox__close:hover {
    background: var(--rl-gradient-brand);

    border-color:
        rgba(133, 213, 241, 0.25);

    transform: rotate(6deg);
}

.rl-gallery-lightbox__close svg,
.rl-gallery-lightbox__navigation svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rl-gallery-lightbox__stage {
    position: relative;

    display: grid;

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

    align-items: center;
    gap: 17px;
    flex: 1;

    min-height: 0;
    padding: 19px;
}

.rl-gallery-lightbox__figure {
    position: relative;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;

    overflow: hidden;

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

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

    border-radius: 20px;
}

.rl-gallery-lightbox__figure img {
    position: relative;
    z-index: 2;

    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    opacity: 0;

    transform: scale(0.985);

    transition:
        opacity 320ms ease,
        transform 420ms var(--rl-ease-smooth);
}

.rl-gallery-lightbox__figure.is-loaded img {
    opacity: 1;
    transform: none;
}

.rl-gallery-lightbox__loader {
    position: absolute;
    z-index: 1;

    width: 37px;
    height: 37px;

    border:
        3px solid
        rgba(255, 255, 255, 0.17);

    border-top-color: var(--rl-blue-300);
    border-radius: 50%;

    animation:
        rl-gallery-lightbox-loading
        750ms linear infinite;
}

.rl-gallery-lightbox__figure.is-loaded
.rl-gallery-lightbox__loader {
    display: none;
}

.rl-gallery-lightbox__navigation {
    width: 56px;
    height: 56px;

    border-radius: 17px;
}

.rl-gallery-lightbox__navigation:hover {
    background: var(--rl-gradient-brand);

    border-color:
        rgba(133, 213, 241, 0.24);

    transform: scale(1.06);
}

@keyframes rl-gallery-lightbox-loading {

    to {
        transform: rotate(360deg);
    }

}


/* =====================================================
   REVEAL
===================================================== */

.rl-service-gallery.is-enhanced
[data-rl-lawn-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery.is-enhanced
[data-rl-lawn-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery.is-enhanced
.rl-service-gallery__grid {
    transition-delay: 80ms;
}

.rl-service-gallery.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery.is-enhanced
[data-rl-lawn-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery__image img,
html.rl-reduced-motion
.rl-gallery-lightbox,
html.rl-reduced-motion
.rl-gallery-lightbox__viewer,
html.rl-reduced-motion
.rl-gallery-lightbox__figure img {
    transition-duration: 0.01ms !important;
}

html.rl-reduced-motion
.rl-gallery-lightbox__loader {
    animation: none;
}


/* =====================================================
   LAWN GALLERY — NINTH IMAGE
===================================================== */

.rl-service-gallery--lawn
.rl-service-gallery__image--lawn-final {
    grid-column: 1 / -1;
    grid-row: auto / span 3;

    min-height:
        clamp(300px, 34vw, 520px);

    border-radius: 26px;
}

.rl-service-gallery--lawn
.rl-service-gallery__image--lawn-final img {
    object-position: center;
}


/* Computers/laptops */
@media (max-width: 1399px) {

    .rl-service-gallery--lawn
    .rl-service-gallery__image--lawn-final {
        grid-row: auto / span 3;

        min-height: 390px;
    }

}


/* Tablets */
@media (max-width: 1024px) {

    .rl-service-gallery--lawn
    .rl-service-gallery__image--lawn-final {
        grid-column: 1 / -1;
        grid-row: auto / span 2;

        min-height: 430px;

        border-radius: 22px;
    }

}


/* Phones */
@media (max-width: 767px) {

    .rl-service-gallery--lawn
    .rl-service-gallery__image--lawn-final {
        grid-column: 1;
        grid-row: auto;

        width: 100%;
        height: clamp(320px, 86vw, 520px);
        min-height: 0;

        border-radius: 21px;
    }

}


/* Small phones */
@media (max-width: 479px) {

    .rl-service-gallery--lawn
    .rl-service-gallery__image--lawn-final {
        height: clamp(280px, 88vw, 410px);

        border-radius: 18px;
    }

}

















/* =====================================================
   RAINLANDSCAPING — ARTIFICIAL TURF GALLERY
===================================================== */

.rl-service-gallery--artificial {
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(7, 140, 213, 0.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 6% 82%,
            rgba(117, 170, 75, 0.18),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #eff7f0 0%,
            var(--rl-page-bg) 51%,
            #e5f0e9 100%
        );
}


/* =====================================================
   BACKGROUND DETAILS
===================================================== */

.rl-service-gallery--artificial
.rl-service-gallery__number {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(133, 213, 241, 0.3),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-700) 52%,
            var(--rl-blue-700)
        );

    border-color:
        rgba(53, 122, 58, 0.2);

    box-shadow:
        0 18px 45px
        rgba(18, 75, 38, 0.2);
}

.rl-service-gallery--artificial
.rl-service-gallery__heading h2 span {
    background:
        linear-gradient(
            90deg,
            var(--rl-green-700),
            var(--rl-green-400) 48%,
            var(--rl-blue-500)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery--artificial
.rl-service-gallery__detail strong {
    color: var(--rl-green-700);
}

.rl-service-gallery--artificial
.rl-service-gallery__estimate {
    background:
        linear-gradient(
            135deg,
            var(--rl-green-900),
            var(--rl-green-600) 52%,
            var(--rl-blue-700)
        );

    box-shadow:
        0 15px 35px
        rgba(53, 122, 58, 0.22);
}

.rl-service-gallery--artificial
.rl-service-gallery__route {
    stroke: var(--rl-green-600);
}


/* =====================================================
   SYNTHETIC TURF DECORATION
===================================================== */

.rl-service-gallery__synthetic-lines {
    position: absolute;
    right: -120px;
    bottom: 7%;

    width: 560px;
    height: 280px;

    opacity: 0.12;

    background:
        repeating-linear-gradient(
            102deg,
            rgba(53, 122, 58, 0.48) 0,
            rgba(53, 122, 58, 0.48) 2px,
            transparent 2px,
            transparent 19px
        );

    border-radius: 50%;

    transform: rotate(-13deg);
}


/* =====================================================
   ARTIFICIAL TURF GRID
===================================================== */

.rl-service-gallery__grid--artificial {
    display: grid;

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

    grid-auto-rows:
        clamp(165px, 14vw, 215px);

    grid-auto-flow: dense;

    gap: 15px;
}

.rl-service-gallery__grid--artificial
.rl-service-gallery__image {
    grid-column: span 1;
    grid-row: span 1;

    min-height: 0;

    border-radius: 22px;
}

.rl-service-gallery__grid--artificial
.rl-service-gallery__image--artificial-featured {
    grid-column: span 2;
    grid-row: span 2;

    border-radius: 29px;
}

.rl-service-gallery__grid--artificial
.rl-service-gallery__image--artificial-wide {
    grid-column: span 2;
}

.rl-service-gallery__grid--artificial
.rl-service-gallery__image--artificial-tall {
    grid-row: span 2;
}

.rl-service-gallery__grid--artificial
.rl-service-gallery__image--artificial-final {
    grid-column: span 2;
    grid-row: span 2;

    border-radius: 27px;
}


/* =====================================================
   IMAGE CARD VARIATION
===================================================== */

.rl-service-gallery--artificial
.rl-service-gallery__image {
    background:
        linear-gradient(
            145deg,
            rgba(211, 231, 208, 0.96),
            rgba(190, 221, 201, 0.92)
        );

    border-color:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 18px 45px
        rgba(18, 75, 38, 0.12),
        0 4px 14px
        rgba(3, 39, 60, 0.05);
}

.rl-service-gallery--artificial
.rl-service-gallery__image:hover,
.rl-service-gallery--artificial
.rl-service-gallery__image:focus-visible {
    border-color:
        rgba(53, 122, 58, 0.34);

    box-shadow:
        0 30px 70px
        rgba(18, 75, 38, 0.2);
}

.rl-service-gallery--artificial
.rl-service-gallery__image-overlay {
    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(5, 42, 23, 0.5)
        );
}


/* =====================================================
   SECTION FOOTER
===================================================== */

.rl-service-gallery--artificial
.rl-service-gallery__footer {
    background:
        linear-gradient(
            105deg,
            rgba(117, 170, 75, 0.14),
            rgba(255, 255, 255, 0.78),
            rgba(133, 213, 241, 0.11)
        );
}

.rl-service-gallery--artificial
.rl-service-gallery__footer-icon {
    background:
        linear-gradient(
            135deg,
            var(--rl-green-900),
            var(--rl-green-600) 55%,
            var(--rl-blue-700)
        );

    box-shadow:
        0 11px 27px
        rgba(53, 122, 58, 0.22);
}


/* =====================================================
   REVEAL
===================================================== */

.rl-service-gallery--artificial.is-enhanced
[data-rl-artificial-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery--artificial.is-enhanced
[data-rl-artificial-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery--artificial.is-enhanced
.rl-service-gallery__grid--artificial {
    transition-delay: 80ms;
}

.rl-service-gallery--artificial.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery--artificial.is-enhanced
[data-rl-artificial-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery--artificial
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery--artificial
.rl-service-gallery__image img {
    transition-duration: 0.01ms !important;
}


/* Computers/laptops */
@media (max-width: 1399px) {

    .rl-service-gallery__grid--artificial {
        grid-auto-rows:
            clamp(155px, 13.5vw, 200px);

        gap: 13px;
    }

    .rl-service-gallery__synthetic-lines {
        width: 480px;
        height: 240px;
    }

}


/* Tablets */
@media (max-width: 1024px) {

    .rl-service-gallery__grid--artificial {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 245px;

        gap: 13px;
    }

    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image {
        grid-column: span 1;
        grid-row: span 1;

        border-radius: 22px;
    }

    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-featured,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-final {
        grid-column: span 2;
        grid-row: span 2;
    }

    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-wide {
        grid-column: span 2;
    }

    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-tall {
        grid-row: span 2;
    }

}


/* Phones */
@media (max-width: 767px) {

    .rl-service-gallery__synthetic-lines {
        display: none;
    }

    .rl-service-gallery__grid--artificial {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-featured,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-wide,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-tall,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-final {
        grid-column: 1;
        grid-row: auto;

        height: clamp(260px, 72vw, 440px);

        border-radius: 21px;
    }

    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-featured,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-tall,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-final {
        height: clamp(330px, 88vw, 550px);
    }

}


/* Small phones */
@media (max-width: 479px) {

    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-featured,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-wide,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-tall,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-final {
        height: clamp(240px, 76vw, 360px);

        border-radius: 18px;
    }

    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-featured,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-tall,
    .rl-service-gallery__grid--artificial
    .rl-service-gallery__image--artificial-final {
        height: clamp(290px, 90vw, 430px);
    }

}

























/* =====================================================
   RAINLANDSCAPING — SOD INSTALLATION GALLERY
===================================================== */

.rl-service-gallery--sod {
    background:
        radial-gradient(
            circle at 8% 13%,
            rgba(117, 170, 75, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 81%,
            rgba(180, 137, 81, 0.12),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #f4f6e9 0%,
            var(--rl-page-bg) 50%,
            #e6efe2 100%
        );
}


/* =====================================================
   HEADER VARIATION
===================================================== */

.rl-service-gallery--sod
.rl-service-gallery__number {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(186, 225, 123, 0.32),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-700) 57%,
            #7b6a35
        );

    border-color:
        rgba(53, 122, 58, 0.2);

    box-shadow:
        0 18px 45px
        rgba(18, 75, 38, 0.2);
}

.rl-service-gallery--sod
.rl-service-gallery__heading h2 span {
    background:
        linear-gradient(
            90deg,
            var(--rl-green-700),
            var(--rl-green-400) 48%,
            #9a7a3c
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery--sod
.rl-service-gallery__detail strong {
    color: var(--rl-green-700);
}

.rl-service-gallery--sod
.rl-service-gallery__estimate {
    background:
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-600) 56%,
            #7b6a35
        );

    box-shadow:
        0 15px 35px
        rgba(53, 122, 58, 0.22);
}

.rl-service-gallery--sod
.rl-service-gallery__route {
    stroke: var(--rl-green-600);
}


/* =====================================================
   SOD DECORATION
===================================================== */

.rl-service-gallery__sod-pattern {
    position: absolute;
    top: 17%;
    right: -80px;

    width: 390px;
    height: 230px;

    opacity: 0.1;

    background:
        linear-gradient(
            rgba(53, 122, 58, 0.7) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(53, 122, 58, 0.7) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    border:
        1px solid
        rgba(53, 122, 58, 0.28);

    border-radius: 36px;

    transform: rotate(12deg);
}

.rl-service-gallery__sod-circle {
    position: absolute;
    bottom: 8%;
    left: 3%;

    width: 190px;
    height: 190px;

    opacity: 0.11;

    border:
        1px dashed
        rgba(117, 170, 75, 0.7);

    border-radius: 50%;
}

.rl-service-gallery__sod-circle::before {
    content: "";

    position: absolute;
    inset: 31px;

    border:
        1px solid
        rgba(154, 122, 60, 0.38);

    border-radius: inherit;
}


/* =====================================================
   SOD GRID
===================================================== */

.rl-service-gallery__grid--sod {
    display: grid;

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

    grid-auto-rows:
        clamp(105px, 8.8vw, 138px);

    grid-auto-flow: dense;

    gap: 15px;
}

.rl-service-gallery__image--sod-featured {
    grid-column: 1 / 7;
    grid-row: 1 / 5;

    border-radius: 29px;
}

.rl-service-gallery__image--sod-top-wide {
    grid-column: 7 / 13;
    grid-row: 1 / 3;

    border-radius: 24px;
}

.rl-service-gallery__image--sod-top-small {
    grid-column: 7 / 10;
    grid-row: 3 / 5;

    border-radius: 22px;
}

.rl-service-gallery__image--sod-right-tall {
    grid-column: 10 / 13;
    grid-row: 3 / 7;

    border-radius: 25px;
}

.rl-service-gallery__image--sod-middle-left {
    grid-column: 1 / 6;
    grid-row: 5 / 8;

    border-radius: 25px;
}

.rl-service-gallery__image--sod-middle-center {
    grid-column: 6 / 10;
    grid-row: 5 / 7;

    border-radius: 22px;
}

.rl-service-gallery__image--sod-bottom-left {
    grid-column: 1 / 5;
    grid-row: 8 / 10;

    border-radius: 22px;
}

.rl-service-gallery__image--sod-bottom-wide {
    grid-column: 5 / 10;
    grid-row: 7 / 10;

    border-radius: 25px;
}

.rl-service-gallery__image--sod-final {
    grid-column: 10 / 13;
    grid-row: 7 / 10;

    border-radius: 24px;
}


/* =====================================================
   IMAGE CARD VARIATION
===================================================== */

.rl-service-gallery--sod
.rl-service-gallery__image {
    background:
        linear-gradient(
            145deg,
            rgba(224, 235, 205, 0.96),
            rgba(199, 219, 183, 0.92)
        );

    border-color:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 18px 45px
        rgba(18, 75, 38, 0.12),
        0 4px 14px
        rgba(93, 69, 27, 0.05);
}

.rl-service-gallery--sod
.rl-service-gallery__image:hover,
.rl-service-gallery--sod
.rl-service-gallery__image:focus-visible {
    border-color:
        rgba(53, 122, 58, 0.34);

    box-shadow:
        0 30px 70px
        rgba(18, 75, 38, 0.2);
}

.rl-service-gallery--sod
.rl-service-gallery__image:focus-visible {
    outline-color:
        rgba(53, 122, 58, 0.34);
}

.rl-service-gallery--sod
.rl-service-gallery__image-overlay {
    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(16, 48, 22, 0.51)
        );
}


/* =====================================================
   SECTION FOOTER
===================================================== */

.rl-service-gallery--sod
.rl-service-gallery__footer {
    background:
        linear-gradient(
            105deg,
            rgba(117, 170, 75, 0.15),
            rgba(255, 255, 255, 0.78),
            rgba(180, 137, 81, 0.1)
        );
}

.rl-service-gallery--sod
.rl-service-gallery__footer-icon {
    background:
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-600) 57%,
            #7b6a35
        );

    box-shadow:
        0 11px 27px
        rgba(53, 122, 58, 0.22);
}


/* =====================================================
   REVEAL
===================================================== */

.rl-service-gallery--sod.is-enhanced
[data-rl-sod-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery--sod.is-enhanced
[data-rl-sod-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery--sod.is-enhanced
.rl-service-gallery__grid--sod {
    transition-delay: 80ms;
}

.rl-service-gallery--sod.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery--sod.is-enhanced
[data-rl-sod-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery--sod
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery--sod
.rl-service-gallery__image img {
    transition-duration: 0.01ms !important;
}


/* Computers/laptops */
@media (max-width: 1399px) {

    .rl-service-gallery__grid--sod {
        grid-auto-rows:
            clamp(98px, 8.4vw, 128px);

        gap: 13px;
    }

    .rl-service-gallery__sod-pattern {
        width: 330px;
        height: 200px;
    }

}


/* Tablets */
@media (max-width: 1024px) {

    .rl-service-gallery__grid--sod {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 245px;
        grid-auto-flow: row;

        gap: 13px;
    }

    .rl-service-gallery__image--sod-featured,
    .rl-service-gallery__image--sod-top-wide,
    .rl-service-gallery__image--sod-top-small,
    .rl-service-gallery__image--sod-right-tall,
    .rl-service-gallery__image--sod-middle-left,
    .rl-service-gallery__image--sod-middle-center,
    .rl-service-gallery__image--sod-bottom-left,
    .rl-service-gallery__image--sod-bottom-wide,
    .rl-service-gallery__image--sod-final {
        grid-column: auto;
        grid-row: auto;

        border-radius: 22px;
    }

    .rl-service-gallery__image--sod-featured,
    .rl-service-gallery__image--sod-top-wide,
    .rl-service-gallery__image--sod-bottom-wide {
        grid-column: 1 / -1;
    }

    .rl-service-gallery__image--sod-featured,
    .rl-service-gallery__image--sod-right-tall {
        grid-row: span 2;
    }

}


/* Phones */
@media (max-width: 767px) {

    .rl-service-gallery__sod-pattern,
    .rl-service-gallery__sod-circle {
        display: none;
    }

    .rl-service-gallery__grid--sod {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__image--sod-featured,
    .rl-service-gallery__image--sod-top-wide,
    .rl-service-gallery__image--sod-top-small,
    .rl-service-gallery__image--sod-right-tall,
    .rl-service-gallery__image--sod-middle-left,
    .rl-service-gallery__image--sod-middle-center,
    .rl-service-gallery__image--sod-bottom-left,
    .rl-service-gallery__image--sod-bottom-wide,
    .rl-service-gallery__image--sod-final {
        grid-column: 1;
        grid-row: auto;

        height: clamp(255px, 70vw, 430px);

        border-radius: 21px;
    }

    .rl-service-gallery__image--sod-featured,
    .rl-service-gallery__image--sod-right-tall,
    .rl-service-gallery__image--sod-middle-left,
    .rl-service-gallery__image--sod-bottom-wide {
        height: clamp(320px, 87vw, 540px);
    }

}


/* Small phones */
@media (max-width: 479px) {

    .rl-service-gallery__image--sod-featured,
    .rl-service-gallery__image--sod-top-wide,
    .rl-service-gallery__image--sod-top-small,
    .rl-service-gallery__image--sod-right-tall,
    .rl-service-gallery__image--sod-middle-left,
    .rl-service-gallery__image--sod-middle-center,
    .rl-service-gallery__image--sod-bottom-left,
    .rl-service-gallery__image--sod-bottom-wide,
    .rl-service-gallery__image--sod-final {
        height: clamp(235px, 75vw, 360px);

        border-radius: 18px;
    }

    .rl-service-gallery__image--sod-featured,
    .rl-service-gallery__image--sod-right-tall,
    .rl-service-gallery__image--sod-middle-left,
    .rl-service-gallery__image--sod-bottom-wide {
        height: clamp(285px, 89vw, 430px);
    }

}







































/* =====================================================
   RAINLANDSCAPING — STONE LANDSCAPING GALLERY
===================================================== */

.rl-service-gallery--stone {
    background:
        radial-gradient(
            circle at 91% 15%,
            rgba(173, 145, 111, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 7% 83%,
            rgba(84, 116, 92, 0.13),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f2efe8 0%,
            var(--rl-page-bg) 50%,
            #e9ece4 100%
        );
}


/* =====================================================
   HEADER VARIATION
===================================================== */

.rl-service-gallery--stone
.rl-service-gallery__number {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(232, 214, 188, 0.28),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #2c3632,
            #5e675f 54%,
            #887055
        );

    border-color:
        rgba(112, 92, 68, 0.23);

    box-shadow:
        0 18px 45px
        rgba(56, 49, 40, 0.2);
}

.rl-service-gallery--stone
.rl-service-gallery__heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #5f5142,
            #9b7d5d 48%,
            var(--rl-green-700)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery--stone
.rl-service-gallery__detail strong {
    color: #826747;
}

.rl-service-gallery--stone
.rl-service-gallery__estimate {
    background:
        linear-gradient(
            135deg,
            #29352f,
            #526656 54%,
            #8a7051
        );

    box-shadow:
        0 15px 35px
        rgba(72, 64, 50, 0.22);
}

.rl-service-gallery--stone
.rl-service-gallery__route {
    stroke: #917657;
}


/* =====================================================
   STONE DECORATIONS
===================================================== */

.rl-service-gallery__stone-shape {
    position: absolute;
    top: 12%;
    right: -80px;

    width: 240px;
    height: 190px;

    opacity: 0.12;

    background:
        linear-gradient(
            145deg,
            rgba(119, 101, 78, 0.54),
            rgba(174, 151, 119, 0.22)
        );

    border:
        1px solid
        rgba(101, 84, 65, 0.38);

    border-radius:
        47% 53% 39% 61% /
        55% 42% 58% 45%;

    transform: rotate(17deg);
}

.rl-service-gallery__stone-shape-secondary {
    position: absolute;
    bottom: 8%;
    left: -70px;

    width: 210px;
    height: 145px;

    opacity: 0.1;

    background:
        rgba(95, 111, 96, 0.4);

    border:
        1px solid
        rgba(53, 89, 61, 0.34);

    border-radius:
        62% 38% 57% 43% /
        44% 61% 39% 56%;

    transform: rotate(-16deg);
}

.rl-service-gallery__stone-texture {
    position: absolute;
    top: 38%;
    right: 4%;

    width: 310px;
    height: 210px;

    opacity: 0.09;

    background-image:
        radial-gradient(
            circle,
            rgba(104, 86, 65, 0.8) 0 2px,
            transparent 2.8px
        );

    background-size: 24px 24px;

    border-radius: 45%;
    transform: rotate(-9deg);
}


/* =====================================================
   STONE IMAGE GRID
===================================================== */

.rl-service-gallery__grid--stone {
    display: grid;

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

    grid-auto-rows:
        clamp(102px, 8.6vw, 136px);

    grid-auto-flow: dense;

    gap: 15px;
}

.rl-service-gallery__image--stone-featured {
    grid-column: 1 / 7;
    grid-row: 1 / 5;

    border-radius: 29px;
}

.rl-service-gallery__image--stone-top-wide {
    grid-column: 7 / 13;
    grid-row: 1 / 3;

    border-radius: 24px;
}

.rl-service-gallery__image--stone-top-small {
    grid-column: 7 / 10;
    grid-row: 3 / 5;

    border-radius: 22px;
}

.rl-service-gallery__image--stone-right-tall {
    grid-column: 10 / 13;
    grid-row: 3 / 7;

    border-radius: 25px;
}

.rl-service-gallery__image--stone-middle-wide {
    grid-column: 1 / 7;
    grid-row: 5 / 8;

    border-radius: 25px;
}

.rl-service-gallery__image--stone-middle-small {
    grid-column: 7 / 10;
    grid-row: 5 / 7;

    border-radius: 22px;
}

.rl-service-gallery__image--stone-bottom-left {
    grid-column: 1 / 5;
    grid-row: 8 / 10;

    border-radius: 22px;
}

.rl-service-gallery__image--stone-bottom-featured {
    grid-column: 5 / 13;
    grid-row: 7 / 10;

    border-radius: 27px;
}


/* =====================================================
   IMAGE CARD VARIATION
===================================================== */

.rl-service-gallery--stone
.rl-service-gallery__image {
    min-height: 0;

    background:
        linear-gradient(
            145deg,
            rgba(224, 218, 207, 0.96),
            rgba(196, 188, 174, 0.92)
        );

    border-color:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 18px 45px
        rgba(68, 58, 46, 0.13),
        0 4px 14px
        rgba(35, 52, 42, 0.05);
}

.rl-service-gallery--stone
.rl-service-gallery__image:hover,
.rl-service-gallery--stone
.rl-service-gallery__image:focus-visible {
    border-color:
        rgba(137, 108, 74, 0.38);

    box-shadow:
        0 30px 70px
        rgba(66, 55, 42, 0.21);
}

.rl-service-gallery--stone
.rl-service-gallery__image-overlay {
    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(37, 31, 25, 0.55)
        );
}


/* =====================================================
   SECTION FOOTER
===================================================== */

.rl-service-gallery--stone
.rl-service-gallery__footer {
    background:
        linear-gradient(
            105deg,
            rgba(159, 131, 97, 0.14),
            rgba(255, 255, 255, 0.78),
            rgba(79, 115, 87, 0.1)
        );
}

.rl-service-gallery--stone
.rl-service-gallery__footer-icon {
    background:
        linear-gradient(
            135deg,
            #2d3832,
            #59675b 55%,
            #8a7051
        );

    box-shadow:
        0 11px 27px
        rgba(73, 61, 48, 0.22);
}


/* =====================================================
   REVEAL
===================================================== */

.rl-service-gallery--stone.is-enhanced
[data-rl-stone-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery--stone.is-enhanced
[data-rl-stone-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery--stone.is-enhanced
.rl-service-gallery__grid--stone {
    transition-delay: 80ms;
}

.rl-service-gallery--stone.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery--stone.is-enhanced
[data-rl-stone-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery--stone
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery--stone
.rl-service-gallery__image img {
    transition-duration: 0.01ms !important;
}


/* Computers/laptops */
@media (max-width: 1399px) {

    .rl-service-gallery__grid--stone {
        grid-auto-rows:
            clamp(96px, 8.2vw, 126px);

        gap: 13px;
    }

    .rl-service-gallery__stone-shape {
        width: 210px;
        height: 165px;
    }

    .rl-service-gallery__stone-texture {
        width: 270px;
        height: 185px;
    }

}


/* Tablets */
@media (max-width: 1024px) {

    .rl-service-gallery__grid--stone {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 245px;
        grid-auto-flow: row;

        gap: 13px;
    }

    .rl-service-gallery__image--stone-featured,
    .rl-service-gallery__image--stone-top-wide,
    .rl-service-gallery__image--stone-top-small,
    .rl-service-gallery__image--stone-right-tall,
    .rl-service-gallery__image--stone-middle-wide,
    .rl-service-gallery__image--stone-middle-small,
    .rl-service-gallery__image--stone-bottom-left,
    .rl-service-gallery__image--stone-bottom-featured {
        grid-column: auto;
        grid-row: auto;

        border-radius: 22px;
    }

    .rl-service-gallery__image--stone-featured,
    .rl-service-gallery__image--stone-top-wide,
    .rl-service-gallery__image--stone-middle-wide,
    .rl-service-gallery__image--stone-bottom-featured {
        grid-column: 1 / -1;
    }

    .rl-service-gallery__image--stone-featured,
    .rl-service-gallery__image--stone-right-tall {
        grid-row: span 2;
    }

}


/* Phones */
@media (max-width: 767px) {

    .rl-service-gallery__stone-shape,
    .rl-service-gallery__stone-shape-secondary,
    .rl-service-gallery__stone-texture {
        display: none;
    }

    .rl-service-gallery__grid--stone {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__image--stone-featured,
    .rl-service-gallery__image--stone-top-wide,
    .rl-service-gallery__image--stone-top-small,
    .rl-service-gallery__image--stone-right-tall,
    .rl-service-gallery__image--stone-middle-wide,
    .rl-service-gallery__image--stone-middle-small,
    .rl-service-gallery__image--stone-bottom-left,
    .rl-service-gallery__image--stone-bottom-featured {
        grid-column: 1;
        grid-row: auto;

        height: clamp(255px, 70vw, 430px);

        border-radius: 21px;
    }

    .rl-service-gallery__image--stone-featured,
    .rl-service-gallery__image--stone-right-tall,
    .rl-service-gallery__image--stone-middle-wide,
    .rl-service-gallery__image--stone-bottom-featured {
        height: clamp(320px, 87vw, 540px);
    }

}


/* Small phones */
@media (max-width: 479px) {

    .rl-service-gallery__image--stone-featured,
    .rl-service-gallery__image--stone-top-wide,
    .rl-service-gallery__image--stone-top-small,
    .rl-service-gallery__image--stone-right-tall,
    .rl-service-gallery__image--stone-middle-wide,
    .rl-service-gallery__image--stone-middle-small,
    .rl-service-gallery__image--stone-bottom-left,
    .rl-service-gallery__image--stone-bottom-featured {
        height: clamp(235px, 75vw, 360px);

        border-radius: 18px;
    }

    .rl-service-gallery__image--stone-featured,
    .rl-service-gallery__image--stone-right-tall,
    .rl-service-gallery__image--stone-middle-wide,
    .rl-service-gallery__image--stone-bottom-featured {
        height: clamp(285px, 89vw, 430px);
    }

}



























/* =====================================================
   RAINLANDSCAPING — WALKWAY LANDSCAPING GALLERY
===================================================== */

.rl-service-gallery--walkway {
    background:
        radial-gradient(
            circle at 92% 16%,
            rgba(154, 127, 91, 0.15),
            transparent 29%
        ),
        radial-gradient(
            circle at 6% 82%,
            rgba(53, 122, 58, 0.13),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f3f1eb 0%,
            var(--rl-page-bg) 50%,
            #e8eee8 100%
        );
}


/* =====================================================
   HEADER VARIATION
===================================================== */

.rl-service-gallery--walkway
.rl-service-gallery__number {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(229, 210, 181, 0.3),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #2a3531,
            #58665b 53%,
            #967956
        );

    border-color:
        rgba(123, 99, 70, 0.22);

    box-shadow:
        0 18px 45px
        rgba(54, 48, 39, 0.2);
}

.rl-service-gallery--walkway
.rl-service-gallery__heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #725d45,
            #aa865c 48%,
            var(--rl-green-700)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery--walkway
.rl-service-gallery__detail strong {
    color: #886b48;
}

.rl-service-gallery--walkway
.rl-service-gallery__estimate {
    background:
        linear-gradient(
            135deg,
            #29352f,
            #576a59 54%,
            #927450
        );

    box-shadow:
        0 15px 35px
        rgba(67, 57, 44, 0.22);
}

.rl-service-gallery--walkway
.rl-service-gallery__route {
    stroke: #947554;
}


/* =====================================================
   WALKWAY DECORATION
===================================================== */

.rl-service-gallery__walkway-pattern {
    position: absolute;
    top: 13%;
    right: -75px;

    width: 330px;
    height: 230px;

    opacity: 0.1;

    background:
        linear-gradient(
            90deg,
            transparent 0 14px,
            rgba(123, 100, 72, 0.6) 14px 16px,
            transparent 16px 44px
        ),
        linear-gradient(
            transparent 0 24px,
            rgba(123, 100, 72, 0.55) 24px 26px,
            transparent 26px 54px
        );

    background-size:
        44px 54px;

    border-radius: 42px;

    transform: rotate(13deg);
}

.rl-service-gallery__walkway-stone {
    position: absolute;
    bottom: 7%;
    left: -60px;

    width: 210px;
    height: 145px;

    opacity: 0.1;

    background:
        linear-gradient(
            145deg,
            rgba(135, 113, 85, 0.5),
            rgba(174, 151, 119, 0.18)
        );

    border:
        1px solid
        rgba(111, 89, 65, 0.34);

    border-radius:
        59% 41% 50% 50% /
        44% 58% 42% 56%;

    transform: rotate(-14deg);
}


/* =====================================================
   WALKWAY IMAGE GRID
===================================================== */

.rl-service-gallery__grid--walkway {
    display: grid;

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

    grid-template-areas:
        "walkway-a walkway-a walkway-b walkway-b"
        "walkway-a walkway-a walkway-c walkway-d"
        "walkway-e walkway-e walkway-c walkway-d"
        "walkway-e walkway-e walkway-f walkway-f"
        "walkway-g walkway-g walkway-g walkway-g";

    grid-auto-rows:
        clamp(145px, 11.5vw, 185px);

    gap: 15px;

    width: 100%;
}

.rl-service-gallery__grid--walkway
.rl-service-gallery__image {
    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    border-radius: 23px;
}

.rl-service-gallery__image--walkway-a {
    grid-area: walkway-a;

    border-radius: 29px !important;
}

.rl-service-gallery__image--walkway-b {
    grid-area: walkway-b;
}

.rl-service-gallery__image--walkway-c {
    grid-area: walkway-c;

    border-radius: 25px !important;
}

.rl-service-gallery__image--walkway-d {
    grid-area: walkway-d;

    border-radius: 25px !important;
}

.rl-service-gallery__image--walkway-e {
    grid-area: walkway-e;

    border-radius: 27px !important;
}

.rl-service-gallery__image--walkway-f {
    grid-area: walkway-f;
}

.rl-service-gallery__image--walkway-g {
    grid-area: walkway-g;

    border-radius: 27px !important;
}


/* =====================================================
   IMAGE CARD VARIATION
===================================================== */

.rl-service-gallery--walkway
.rl-service-gallery__image {
    background:
        linear-gradient(
            145deg,
            rgba(224, 217, 205, 0.96),
            rgba(198, 193, 181, 0.92)
        );

    border-color:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0 18px 45px
        rgba(67, 57, 45, 0.13),
        0 4px 14px
        rgba(40, 57, 47, 0.05);
}

.rl-service-gallery--walkway
.rl-service-gallery__image:hover,
.rl-service-gallery--walkway
.rl-service-gallery__image:focus-visible {
    border-color:
        rgba(146, 113, 75, 0.38);

    box-shadow:
        0 30px 70px
        rgba(66, 54, 40, 0.21);
}

.rl-service-gallery--walkway
.rl-service-gallery__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.rl-service-gallery--walkway
.rl-service-gallery__image-overlay {
    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(38, 31, 24, 0.54)
        );
}


/* =====================================================
   SECTION FOOTER
===================================================== */

.rl-service-gallery--walkway
.rl-service-gallery__footer {
    background:
        linear-gradient(
            105deg,
            rgba(154, 126, 91, 0.14),
            rgba(255, 255, 255, 0.78),
            rgba(69, 112, 79, 0.1)
        );
}

.rl-service-gallery--walkway
.rl-service-gallery__footer-icon {
    background:
        linear-gradient(
            135deg,
            #2b3731,
            #5a685c 55%,
            #927450
        );

    box-shadow:
        0 11px 27px
        rgba(67, 56, 43, 0.22);
}


/* =====================================================
   REVEAL
===================================================== */

.rl-service-gallery--walkway.is-enhanced
[data-rl-walkway-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery--walkway.is-enhanced
[data-rl-walkway-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery--walkway.is-enhanced
.rl-service-gallery__grid--walkway {
    transition-delay: 80ms;
}

.rl-service-gallery--walkway.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery--walkway.is-enhanced
[data-rl-walkway-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery--walkway
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery--walkway
.rl-service-gallery__image img {
    transition-duration: 0.01ms !important;
}


/* Computers/laptops */
@media (max-width: 1399px) {

    .rl-service-gallery__grid--walkway {
        grid-auto-rows:
            clamp(135px, 11vw, 174px);

        gap: 13px;
    }

    .rl-service-gallery__walkway-pattern {
        width: 285px;
        height: 205px;
    }

}


/* Tablets */
@media (max-width: 1024px) {

    .rl-service-gallery__grid--walkway {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-areas:
            "walkway-a walkway-a"
            "walkway-a walkway-a"
            "walkway-b walkway-c"
            "walkway-d walkway-e"
            "walkway-f walkway-f"
            "walkway-g walkway-g";

        grid-auto-rows: 230px;

        gap: 13px;
    }

    .rl-service-gallery__grid--walkway
    .rl-service-gallery__image {
        border-radius: 22px !important;
    }

    .rl-service-gallery__image--walkway-a,
    .rl-service-gallery__image--walkway-g {
        border-radius: 25px !important;
    }

}


/* Phones */
@media (max-width: 767px) {

    .rl-service-gallery__walkway-pattern,
    .rl-service-gallery__walkway-stone {
        display: none;
    }

    .rl-service-gallery__grid--walkway {
        grid-template-columns: 1fr;

        grid-template-areas:
            "walkway-a"
            "walkway-b"
            "walkway-c"
            "walkway-d"
            "walkway-e"
            "walkway-f"
            "walkway-g";

        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__grid--walkway
    .rl-service-gallery__image {
        width: 100%;
        height: clamp(260px, 72vw, 440px);

        border-radius: 21px !important;
    }

    .rl-service-gallery__grid--walkway
    .rl-service-gallery__image--walkway-a,
    .rl-service-gallery__grid--walkway
    .rl-service-gallery__image--walkway-e,
    .rl-service-gallery__grid--walkway
    .rl-service-gallery__image--walkway-g {
        height: clamp(325px, 88vw, 540px);
    }

}


/* Small phones */
@media (max-width: 479px) {

    .rl-service-gallery__grid--walkway
    .rl-service-gallery__image {
        height: clamp(235px, 76vw, 365px);

        border-radius: 18px !important;
    }

    .rl-service-gallery__grid--walkway
    .rl-service-gallery__image--walkway-a,
    .rl-service-gallery__grid--walkway
    .rl-service-gallery__image--walkway-e,
    .rl-service-gallery__grid--walkway
    .rl-service-gallery__image--walkway-g {
        height: clamp(285px, 90vw, 430px);
    }

}


























/* =====================================================
   RAINLANDSCAPING — PLANT, FLOWER & TREE PLANTING
===================================================== */

.rl-service-gallery--planting {
    background:
        radial-gradient(
            circle at 91% 14%,
            rgba(195, 118, 151, 0.13),
            transparent 29%
        ),
        radial-gradient(
            circle at 7% 84%,
            rgba(73, 138, 74, 0.15),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7f3ef 0%,
            var(--rl-page-bg) 50%,
            #eaf1e7 100%
        );
}


/* =====================================================
   HEADER VARIATION
===================================================== */

.rl-service-gallery--planting
.rl-service-gallery__number {
    background:
        radial-gradient(
            circle at 16% 15%,
            rgba(255, 213, 226, 0.3),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-700) 54%,
            #a95e79
        );

    border-color:
        rgba(72, 129, 69, 0.23);

    box-shadow:
        0 18px 45px
        rgba(37, 80, 40, 0.2);
}

.rl-service-gallery--planting
.rl-service-gallery__heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--rl-green-700),
            var(--rl-green-400) 46%,
            #bd6685
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery--planting
.rl-service-gallery__detail strong {
    color: var(--rl-green-700);
}

.rl-service-gallery--planting
.rl-service-gallery__estimate {
    background:
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-600) 55%,
            #a55774
        );

    box-shadow:
        0 15px 35px
        rgba(54, 116, 57, 0.22);
}

.rl-service-gallery--planting
.rl-service-gallery__route {
    stroke: var(--rl-green-600);
}


/* =====================================================
   DECORATIVE ELEMENTS
===================================================== */

.rl-service-gallery__plant-bloom {
    position: absolute;
    top: 10%;
    right: -45px;

    width: 210px;
    height: 210px;

    opacity: 0.1;

    border:
        28px solid
        rgba(187, 95, 130, 0.42);

    border-radius:
        50% 42% 52% 46%;

    transform: rotate(24deg);
}

.rl-service-gallery__plant-bloom::before,
.rl-service-gallery__plant-bloom::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    background:
        rgba(193, 104, 136, 0.38);

    border-radius:
        60% 40% 55% 45%;
}

.rl-service-gallery__plant-bloom::before {
    top: -68px;
    left: 27px;

    transform: rotate(48deg);
}

.rl-service-gallery__plant-bloom::after {
    right: -64px;
    bottom: 25px;

    transform: rotate(-36deg);
}

.rl-service-gallery__plant-branch {
    position: absolute;
    bottom: 7%;
    left: -85px;

    width: 310px;
    height: 170px;

    opacity: 0.12;

    border-top:
        2px solid
        rgba(53, 122, 58, 0.62);

    border-radius: 50%;

    transform: rotate(-22deg);
}

.rl-service-gallery__plant-branch::before,
.rl-service-gallery__plant-branch::after {
    content: "";

    position: absolute;

    width: 95px;
    height: 45px;

    border:
        1px solid
        rgba(53, 122, 58, 0.6);

    border-radius:
        100% 0 100% 0;
}

.rl-service-gallery__plant-branch::before {
    top: -20px;
    left: 85px;

    transform: rotate(25deg);
}

.rl-service-gallery__plant-branch::after {
    top: 16px;
    left: 160px;

    transform: rotate(-152deg);
}

.rl-service-gallery__plant-dots {
    position: absolute;
    top: 42%;
    right: 3%;

    width: 280px;
    height: 210px;

    opacity: 0.075;

    background-image:
        radial-gradient(
            circle,
            rgba(53, 122, 58, 0.9) 0 2px,
            transparent 3px
        );

    background-size:
        25px 25px;

    border-radius: 45%;

    transform: rotate(9deg);
}


/* =====================================================
   PLANTING IMAGE GRID
===================================================== */

.rl-service-gallery__grid--planting {
    display: grid;

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

    grid-auto-rows:
        clamp(135px, 10.5vw, 175px);

    grid-auto-flow: dense;

    gap: 15px;

    width: 100%;
}

.rl-service-gallery__grid--planting
.rl-service-gallery__image {
    grid-column: span 1;
    grid-row: span 1;

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

    width: 100%;
    height: 100%;

    margin: 0;

    overflow: hidden;

    border-radius: 22px;
}

.rl-service-gallery__grid--planting
.rl-service-gallery__image--plant-wide {
    grid-column: span 2;
}

.rl-service-gallery__grid--planting
.rl-service-gallery__image--plant-tall {
    grid-row: span 2;

    border-radius: 25px;
}

.rl-service-gallery__grid--planting
.rl-service-gallery__image--plant-featured {
    grid-column: span 2;
    grid-row: span 2;

    border-radius: 29px;
}


/* =====================================================
   IMAGE VARIATION
===================================================== */

.rl-service-gallery--planting
.rl-service-gallery__image {
    background:
        linear-gradient(
            145deg,
            rgba(219, 234, 214, 0.96),
            rgba(204, 221, 197, 0.92)
        );

    border-color:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 18px 45px
        rgba(33, 79, 39, 0.12),
        0 4px 14px
        rgba(122, 60, 87, 0.04);
}

.rl-service-gallery--planting
.rl-service-gallery__image:hover,
.rl-service-gallery--planting
.rl-service-gallery__image:focus-visible {
    border-color:
        rgba(81, 144, 76, 0.38);

    box-shadow:
        0 30px 70px
        rgba(38, 91, 43, 0.2);
}

.rl-service-gallery--planting
.rl-service-gallery__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.rl-service-gallery--planting
.rl-service-gallery__image-overlay {
    background:
        linear-gradient(
            180deg,
            transparent 46%,
            rgba(19, 55, 25, 0.54)
        );
}


/* =====================================================
   SECTION FOOTER
===================================================== */

.rl-service-gallery--planting
.rl-service-gallery__footer {
    background:
        linear-gradient(
            105deg,
            rgba(91, 151, 83, 0.14),
            rgba(255, 255, 255, 0.79),
            rgba(191, 97, 132, 0.1)
        );
}

.rl-service-gallery--planting
.rl-service-gallery__footer-icon {
    background:
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-600) 56%,
            #a75674
        );

    box-shadow:
        0 11px 27px
        rgba(48, 105, 53, 0.22);
}


/* =====================================================
   REVEAL
===================================================== */

.rl-service-gallery--planting.is-enhanced
[data-rl-planting-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery--planting.is-enhanced
[data-rl-planting-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery--planting.is-enhanced
.rl-service-gallery__grid--planting {
    transition-delay: 80ms;
}

.rl-service-gallery--planting.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery--planting.is-enhanced
[data-rl-planting-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery--planting
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery--planting
.rl-service-gallery__image img {
    transition-duration: 0.01ms !important;
}


/* Computers/laptops */
@media (max-width: 1399px) {

    .rl-service-gallery__grid--planting {
        grid-auto-rows:
            clamp(125px, 10vw, 165px);

        gap: 13px;
    }

    .rl-service-gallery__plant-bloom {
        width: 180px;
        height: 180px;
    }

    .rl-service-gallery__plant-dots {
        width: 240px;
        height: 180px;
    }

}


/* Tablets */
@media (max-width: 1024px) {

    .rl-service-gallery__grid--planting {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        grid-auto-rows: 220px;

        gap: 13px;
    }

    .rl-service-gallery__grid--planting
    .rl-service-gallery__image {
        grid-column: span 1;
        grid-row: span 1;

        border-radius: 21px;
    }

    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-wide {
        grid-column: span 2;
    }

    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-tall {
        grid-row: span 2;
    }

    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-featured {
        grid-column: span 2;
        grid-row: span 2;

        border-radius: 25px;
    }

}


/* Phones */
@media (max-width: 767px) {

    .rl-service-gallery__plant-bloom,
    .rl-service-gallery__plant-branch,
    .rl-service-gallery__plant-dots {
        display: none;
    }

    .rl-service-gallery__grid--planting {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 235px;

        gap: 11px;
    }

    .rl-service-gallery__grid--planting
    .rl-service-gallery__image,
    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-wide,
    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-tall {
        grid-column: span 1;
        grid-row: span 1;

        border-radius: 19px;
    }

    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-featured {
        grid-column: 1 / -1;
        grid-row: span 2;

        border-radius: 22px;
    }

}


/* Small phones */
@media (max-width: 479px) {

    .rl-service-gallery__grid--planting {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

        gap: 10px;
    }

    .rl-service-gallery__grid--planting
    .rl-service-gallery__image,
    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-wide,
    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-tall,
    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-featured {
        grid-column: 1;
        grid-row: auto;

        height: clamp(245px, 77vw, 370px);

        border-radius: 18px;
    }

    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-featured,
    .rl-service-gallery__grid--planting
    .rl-service-gallery__image--plant-tall {
        height: clamp(295px, 91vw, 440px);
    }

}

























/* =====================================================
   RAINLANDSCAPING — DRAINAGE, IRRIGATION & WINTERIZATION
===================================================== */

.rl-service-gallery--drainage {
    background:
        radial-gradient(
            circle at 92% 14%,
            rgba(28, 142, 201, 0.15),
            transparent 29%
        ),
        radial-gradient(
            circle at 6% 84%,
            rgba(53, 122, 58, 0.13),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #eef5f6 0%,
            var(--rl-page-bg) 50%,
            #e6efea 100%
        );
}


/* =====================================================
   HEADER VARIATION
===================================================== */

.rl-service-gallery--drainage
.rl-service-gallery__number {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(143, 222, 246, 0.3),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            var(--rl-blue-700) 54%,
            var(--rl-green-700)
        );

    border-color:
        rgba(7, 140, 213, 0.23);

    box-shadow:
        0 18px 45px
        rgba(3, 73, 112, 0.21);
}

.rl-service-gallery--drainage
.rl-service-gallery__heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--rl-blue-700),
            var(--rl-blue-500) 48%,
            var(--rl-green-600)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery--drainage
.rl-service-gallery__detail strong {
    color: var(--rl-blue-700);
}

.rl-service-gallery--drainage
.rl-service-gallery__estimate {
    background:
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            var(--rl-blue-700) 55%,
            var(--rl-green-700)
        );

    box-shadow:
        0 15px 35px
        rgba(7, 113, 169, 0.23);
}

.rl-service-gallery--drainage
.rl-service-gallery__route {
    stroke: var(--rl-blue-500);
}


/* =====================================================
   DECORATIVE ELEMENTS
===================================================== */

.rl-service-gallery__drainage-rings {
    position: absolute;
    top: 10%;
    right: -85px;

    width: 280px;
    height: 280px;

    opacity: 0.12;

    border:
        1px solid
        rgba(7, 140, 213, 0.6);

    border-radius: 50%;
}

.rl-service-gallery__drainage-rings::before,
.rl-service-gallery__drainage-rings::after {
    content: "";

    position: absolute;

    border:
        1px solid
        rgba(7, 140, 213, 0.48);

    border-radius: inherit;
}

.rl-service-gallery__drainage-rings::before {
    inset: 43px;
}

.rl-service-gallery__drainage-rings::after {
    inset: 86px;
}

.rl-service-gallery__drainage-lines {
    position: absolute;
    right: 4%;
    bottom: 12%;

    width: 350px;
    height: 210px;

    opacity: 0.09;

    background:
        repeating-linear-gradient(
            112deg,
            rgba(7, 140, 213, 0.7) 0,
            rgba(7, 140, 213, 0.7) 2px,
            transparent 2px,
            transparent 23px
        );

    border-radius: 50%;

    transform: rotate(-11deg);
}

.rl-service-gallery__drainage-drop {
    position: absolute;
    bottom: 6%;
    left: -55px;

    width: 180px;
    height: 215px;

    opacity: 0.1;

    background:
        linear-gradient(
            145deg,
            rgba(7, 140, 213, 0.45),
            rgba(83, 172, 115, 0.18)
        );

    border:
        1px solid
        rgba(7, 140, 213, 0.36);

    border-radius:
        70% 30% 68% 32% /
        76% 40% 60% 24%;

    transform: rotate(38deg);
}


/* =====================================================
   DRAINAGE IMAGE GRID
===================================================== */

.rl-service-gallery__grid--drainage {
    display: grid;

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

    grid-template-areas:
        "drainage-a drainage-a drainage-b drainage-b"
        "drainage-a drainage-a drainage-c drainage-d"
        "drainage-e drainage-e drainage-c drainage-d"
        "drainage-e drainage-e drainage-f drainage-f"
        "drainage-g drainage-h drainage-i drainage-i"
        "drainage-g drainage-h drainage-i drainage-i";

    grid-auto-rows:
        clamp(132px, 10.5vw, 172px);

    gap: 15px;

    width: 100%;
}

.rl-service-gallery__grid--drainage
.rl-service-gallery__image {
    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    overflow: hidden;

    border-radius: 23px;
}

.rl-service-gallery__image--drainage-a {
    grid-area: drainage-a;

    border-radius: 29px !important;
}

.rl-service-gallery__image--drainage-b {
    grid-area: drainage-b;
}

.rl-service-gallery__image--drainage-c {
    grid-area: drainage-c;

    border-radius: 25px !important;
}

.rl-service-gallery__image--drainage-d {
    grid-area: drainage-d;

    border-radius: 25px !important;
}

.rl-service-gallery__image--drainage-e {
    grid-area: drainage-e;

    border-radius: 27px !important;
}

.rl-service-gallery__image--drainage-f {
    grid-area: drainage-f;
}

.rl-service-gallery__image--drainage-g {
    grid-area: drainage-g;

    border-radius: 25px !important;
}

.rl-service-gallery__image--drainage-h {
    grid-area: drainage-h;

    border-radius: 25px !important;
}

.rl-service-gallery__image--drainage-i {
    grid-area: drainage-i;

    border-radius: 28px !important;
}


/* =====================================================
   IMAGE VARIATION
===================================================== */

.rl-service-gallery--drainage
.rl-service-gallery__image {
    background:
        linear-gradient(
            145deg,
            rgba(205, 229, 235, 0.96),
            rgba(186, 216, 216, 0.92)
        );

    border-color:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 18px 45px
        rgba(4, 72, 105, 0.13),
        0 4px 14px
        rgba(32, 87, 51, 0.05);
}

.rl-service-gallery--drainage
.rl-service-gallery__image:hover,
.rl-service-gallery--drainage
.rl-service-gallery__image:focus-visible {
    border-color:
        rgba(7, 140, 213, 0.38);

    box-shadow:
        0 30px 70px
        rgba(4, 75, 111, 0.21);
}

.rl-service-gallery--drainage
.rl-service-gallery__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.rl-service-gallery--drainage
.rl-service-gallery__image-overlay {
    background:
        linear-gradient(
            180deg,
            transparent 47%,
            rgba(2, 40, 59, 0.57)
        );
}


/* =====================================================
   SECTION FOOTER
===================================================== */

.rl-service-gallery--drainage
.rl-service-gallery__footer {
    background:
        linear-gradient(
            105deg,
            rgba(7, 140, 213, 0.13),
            rgba(255, 255, 255, 0.79),
            rgba(53, 122, 58, 0.1)
        );
}

.rl-service-gallery--drainage
.rl-service-gallery__footer-icon {
    background:
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            var(--rl-blue-700) 55%,
            var(--rl-green-700)
        );

    box-shadow:
        0 11px 27px
        rgba(7, 110, 164, 0.23);
}


/* =====================================================
   REVEAL
===================================================== */

.rl-service-gallery--drainage.is-enhanced
[data-rl-drainage-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery--drainage.is-enhanced
[data-rl-drainage-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery--drainage.is-enhanced
.rl-service-gallery__grid--drainage {
    transition-delay: 80ms;
}

.rl-service-gallery--drainage.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery--drainage.is-enhanced
[data-rl-drainage-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery--drainage
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery--drainage
.rl-service-gallery__image img {
    transition-duration: 0.01ms !important;
}


/* Computers/laptops */
@media (max-width: 1399px) {

    .rl-service-gallery__grid--drainage {
        grid-auto-rows:
            clamp(122px, 10vw, 160px);

        gap: 13px;
    }

    .rl-service-gallery__drainage-rings {
        width: 235px;
        height: 235px;
    }

    .rl-service-gallery__drainage-lines {
        width: 300px;
        height: 185px;
    }

}


/* Tablets */
@media (max-width: 1024px) {

    .rl-service-gallery__grid--drainage {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-areas:
            "drainage-a drainage-a"
            "drainage-a drainage-a"
            "drainage-b drainage-c"
            "drainage-d drainage-e"
            "drainage-f drainage-f"
            "drainage-g drainage-h"
            "drainage-i drainage-i"
            "drainage-i drainage-i";

        grid-auto-rows: 225px;

        gap: 13px;
    }

    .rl-service-gallery__grid--drainage
    .rl-service-gallery__image {
        border-radius: 22px !important;
    }

    .rl-service-gallery__image--drainage-a,
    .rl-service-gallery__image--drainage-i {
        border-radius: 26px !important;
    }

}


/* Phones */
@media (max-width: 767px) {

    .rl-service-gallery__drainage-rings,
    .rl-service-gallery__drainage-lines,
    .rl-service-gallery__drainage-drop {
        display: none;
    }

    .rl-service-gallery__grid--drainage {
        grid-template-columns: 1fr;

        grid-template-areas:
            "drainage-a"
            "drainage-b"
            "drainage-c"
            "drainage-d"
            "drainage-e"
            "drainage-f"
            "drainage-g"
            "drainage-h"
            "drainage-i";

        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__grid--drainage
    .rl-service-gallery__image {
        width: 100%;
        height: clamp(260px, 72vw, 440px);

        border-radius: 21px !important;
    }

    .rl-service-gallery__grid--drainage
    .rl-service-gallery__image--drainage-a,
    .rl-service-gallery__grid--drainage
    .rl-service-gallery__image--drainage-e,
    .rl-service-gallery__grid--drainage
    .rl-service-gallery__image--drainage-i {
        height: clamp(325px, 88vw, 540px);
    }

}


/* Small phones */
@media (max-width: 479px) {

    .rl-service-gallery__grid--drainage
    .rl-service-gallery__image {
        height: clamp(235px, 76vw, 365px);

        border-radius: 18px !important;
    }

    .rl-service-gallery__grid--drainage
    .rl-service-gallery__image--drainage-a,
    .rl-service-gallery__grid--drainage
    .rl-service-gallery__image--drainage-e,
    .rl-service-gallery__grid--drainage
    .rl-service-gallery__image--drainage-i {
        height: clamp(285px, 90vw, 430px);
    }

}



























/* =====================================================
   RAINLANDSCAPING — LANDSCAPE LIGHTING GALLERY
===================================================== */

.rl-service-gallery--lighting {
    background:
        radial-gradient(
            circle at 88% 13%,
            rgba(255, 197, 89, 0.17),
            transparent 29%
        ),
        radial-gradient(
            circle at 7% 83%,
            rgba(7, 140, 213, 0.11),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #f4f2e9 0%,
            var(--rl-page-bg) 48%,
            #e8ece8 100%
        );
}


/* =====================================================
   HEADER VARIATION
===================================================== */

.rl-service-gallery--lighting
.rl-service-gallery__number {
    background:
        radial-gradient(
            circle at 17% 14%,
            rgba(255, 219, 126, 0.34),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #172b31,
            #294c50 52%,
            #a9792e
        );

    border-color:
        rgba(218, 162, 58, 0.23);

    box-shadow:
        0 18px 45px
        rgba(40, 46, 38, 0.22);
}

.rl-service-gallery--lighting
.rl-service-gallery__heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            #ae7725,
            #d89b3d 48%,
            var(--rl-green-600)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery--lighting
.rl-service-gallery__detail strong {
    color: #b57c27;
}

.rl-service-gallery--lighting
.rl-service-gallery__estimate {
    background:
        linear-gradient(
            135deg,
            #162a30,
            #315459 55%,
            #a8772c
        );

    box-shadow:
        0 15px 35px
        rgba(57, 58, 42, 0.24);
}

.rl-service-gallery--lighting
.rl-service-gallery__route {
    stroke: #d39a3f;
}


/* =====================================================
   DECORATIVE ELEMENTS
===================================================== */

.rl-service-gallery__lighting-glow {
    position: absolute;
    top: 7%;
    right: -65px;

    width: 280px;
    height: 280px;

    opacity: 0.16;

    background:
        radial-gradient(
            circle,
            rgba(255, 203, 93, 0.72) 0,
            rgba(255, 203, 93, 0.24) 35%,
            transparent 70%
        );

    border-radius: 50%;
}

.rl-service-gallery__lighting-glow::before {
    content: "";

    position: absolute;
    inset: 69px;

    border:
        1px solid
        rgba(224, 162, 49, 0.55);

    border-radius: inherit;

    box-shadow:
        0 0 40px
        rgba(255, 196, 72, 0.28);
}

.rl-service-gallery__lighting-rays {
    position: absolute;
    top: 15%;
    right: 2%;

    width: 210px;
    height: 210px;

    opacity: 0.1;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(217, 160, 53, 0.75) 0deg 2deg,
            transparent 2deg 20deg
        );

    border-radius: 50%;
}

.rl-service-gallery__lighting-dots {
    position: absolute;
    bottom: 8%;
    left: -30px;

    width: 290px;
    height: 190px;

    opacity: 0.075;

    background-image:
        radial-gradient(
            circle,
            rgba(211, 154, 57, 0.9) 0 2px,
            transparent 3px
        );

    background-size: 25px 25px;

    border-radius: 44%;

    transform: rotate(-11deg);
}


/* =====================================================
   LANDSCAPE LIGHTING IMAGE GRID
===================================================== */

.rl-service-gallery__grid--lighting {
    display: grid;

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

    grid-template-areas:
        "lighting-a lighting-a lighting-b lighting-b"
        "lighting-a lighting-a lighting-c lighting-d"
        "lighting-e lighting-e lighting-c lighting-d"
        "lighting-e lighting-e lighting-c lighting-d";

    grid-auto-rows:
        clamp(145px, 11.5vw, 188px);

    gap: 15px;

    width: 100%;
}

.rl-service-gallery__grid--lighting
.rl-service-gallery__image {
    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    overflow: hidden;

    border-radius: 23px;
}

.rl-service-gallery__image--lighting-a {
    grid-area: lighting-a;

    border-radius: 29px !important;
}

.rl-service-gallery__image--lighting-b {
    grid-area: lighting-b;
}

.rl-service-gallery__image--lighting-c {
    grid-area: lighting-c;

    border-radius: 25px !important;
}

.rl-service-gallery__image--lighting-d {
    grid-area: lighting-d;

    border-radius: 25px !important;
}

.rl-service-gallery__image--lighting-e {
    grid-area: lighting-e;

    border-radius: 28px !important;
}


/* =====================================================
   IMAGE VARIATION
===================================================== */

.rl-service-gallery--lighting
.rl-service-gallery__image {
    background:
        linear-gradient(
            145deg,
            rgba(49, 62, 61, 0.96),
            rgba(90, 89, 66, 0.92)
        );

    border-color:
        rgba(255, 255, 255, 0.19);

    box-shadow:
        0 20px 50px
        rgba(20, 32, 34, 0.2),
        0 5px 16px
        rgba(166, 116, 38, 0.08);
}

.rl-service-gallery--lighting
.rl-service-gallery__image:hover,
.rl-service-gallery--lighting
.rl-service-gallery__image:focus-visible {
    border-color:
        rgba(231, 174, 68, 0.48);

    box-shadow:
        0 32px 74px
        rgba(20, 31, 32, 0.27),
        0 0 28px
        rgba(224, 164, 53, 0.1);
}

.rl-service-gallery--lighting
.rl-service-gallery__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.rl-service-gallery--lighting
.rl-service-gallery__image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(7, 20, 25, 0.03) 30%,
            rgba(5, 19, 24, 0.62) 100%
        );
}

.rl-service-gallery--lighting
.rl-service-gallery__expand {
    color: #fff8e6;

    background:
        rgba(28, 34, 32, 0.72);

    border-color:
        rgba(255, 210, 116, 0.3);

    box-shadow:
        0 10px 25px
        rgba(5, 15, 18, 0.27);
}


/* =====================================================
   SECTION FOOTER
===================================================== */

.rl-service-gallery--lighting
.rl-service-gallery__footer {
    background:
        linear-gradient(
            105deg,
            rgba(210, 153, 54, 0.14),
            rgba(255, 255, 255, 0.79),
            rgba(38, 91, 76, 0.1)
        );
}

.rl-service-gallery--lighting
.rl-service-gallery__footer-icon {
    background:
        linear-gradient(
            135deg,
            #172b31,
            #315358 55%,
            #a9782c
        );

    box-shadow:
        0 11px 27px
        rgba(71, 67, 42, 0.24);
}


/* =====================================================
   REVEAL
===================================================== */

.rl-service-gallery--lighting.is-enhanced
[data-rl-lighting-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery--lighting.is-enhanced
[data-rl-lighting-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery--lighting.is-enhanced
.rl-service-gallery__grid--lighting {
    transition-delay: 80ms;
}

.rl-service-gallery--lighting.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery--lighting.is-enhanced
[data-rl-lighting-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery--lighting
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery--lighting
.rl-service-gallery__image img {
    transition-duration: 0.01ms !important;
}


/* Computers/laptops */
@media (max-width: 1399px) {

    .rl-service-gallery__grid--lighting {
        grid-auto-rows:
            clamp(135px, 11vw, 175px);

        gap: 13px;
    }

    .rl-service-gallery__lighting-glow {
        width: 235px;
        height: 235px;
    }

    .rl-service-gallery__lighting-rays {
        width: 175px;
        height: 175px;
    }

}


/* Tablets */
@media (max-width: 1024px) {

    .rl-service-gallery__grid--lighting {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-areas:
            "lighting-a lighting-a"
            "lighting-a lighting-a"
            "lighting-b lighting-b"
            "lighting-c lighting-d"
            "lighting-c lighting-d"
            "lighting-e lighting-e"
            "lighting-e lighting-e";

        grid-auto-rows: 220px;

        gap: 13px;
    }

    .rl-service-gallery__grid--lighting
    .rl-service-gallery__image {
        border-radius: 22px !important;
    }

    .rl-service-gallery__image--lighting-a,
    .rl-service-gallery__image--lighting-e {
        border-radius: 26px !important;
    }

}


/* Phones */
@media (max-width: 767px) {

    .rl-service-gallery__lighting-glow,
    .rl-service-gallery__lighting-rays,
    .rl-service-gallery__lighting-dots {
        display: none;
    }

    .rl-service-gallery__grid--lighting {
        grid-template-columns: 1fr;

        grid-template-areas:
            "lighting-a"
            "lighting-b"
            "lighting-c"
            "lighting-d"
            "lighting-e";

        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__grid--lighting
    .rl-service-gallery__image {
        width: 100%;
        height: clamp(265px, 73vw, 445px);

        border-radius: 21px !important;
    }

    .rl-service-gallery__grid--lighting
    .rl-service-gallery__image--lighting-a,
    .rl-service-gallery__grid--lighting
    .rl-service-gallery__image--lighting-e {
        height: clamp(330px, 88vw, 545px);
    }

}


/* Small phones */
@media (max-width: 479px) {

    .rl-service-gallery__grid--lighting
    .rl-service-gallery__image {
        height: clamp(235px, 76vw, 365px);

        border-radius: 18px !important;
    }

    .rl-service-gallery__grid--lighting
    .rl-service-gallery__image--lighting-a,
    .rl-service-gallery__grid--lighting
    .rl-service-gallery__image--lighting-e {
        height: clamp(285px, 90vw, 430px);
    }

}













/* =====================================================
   RAINLANDSCAPING — MULCH INSTALLATION GALLERY
===================================================== */

.rl-service-gallery--mulch {
    background:
        radial-gradient(
            circle at 89% 8%,
            rgba(229, 166, 60, 0.16),
            transparent 26%
        ),
        radial-gradient(
            circle at 7% 86%,
            rgba(200, 115, 71, 0.13),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #f8f3e9,
            var(--rl-cream) 52%,
            #eee6d7
        );
}


/* =====================================================
   MULCH DECORATION
===================================================== */

.rl-service-gallery--mulch
.rl-service-gallery__water-ring {
    border-color:
        rgba(200, 115, 71, 0.11);
}

.rl-service-gallery--mulch
.rl-service-gallery__water-ring::before,
.rl-service-gallery--mulch
.rl-service-gallery__water-ring::after {
    border-color:
        rgba(229, 166, 60, 0.09);
}

.rl-service-gallery--mulch
.rl-service-gallery__lawn-lines {
    opacity: 0.1;

    background:
        repeating-linear-gradient(
            112deg,
            rgba(200, 115, 71, 0.13) 0,
            rgba(200, 115, 71, 0.13) 15px,
            transparent 15px,
            transparent 39px
        );
}

.rl-service-gallery--mulch
.rl-service-gallery__route {
    stroke: var(--rl-clay);
}

.rl-service-gallery__mulch-texture {
    position: absolute;
    bottom: 5%;
    left: 4%;

    width: 320px;
    height: 210px;

    opacity: 0.22;

    border-radius:
        58% 42% 65% 35% /
        54% 61% 39% 46%;

    background-image:
        radial-gradient(
            ellipse at 16% 22%,
            rgba(200, 115, 71, 0.34) 0 7px,
            transparent 8px
        ),
        radial-gradient(
            ellipse at 62% 44%,
            rgba(229, 166, 60, 0.28) 0 6px,
            transparent 7px
        ),
        radial-gradient(
            ellipse at 82% 76%,
            rgba(18, 75, 38, 0.18) 0 7px,
            transparent 8px
        );

    background-size:
        45px 36px,
        55px 43px,
        50px 38px;

    transform: rotate(-7deg);
}


/* =====================================================
   MULCH HEADER ACCENTS
===================================================== */

.rl-service-gallery--mulch
.rl-service-gallery__number {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(244, 216, 157, 0.28),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-clay) 58%,
            var(--rl-amber)
        );

    border-color:
        rgba(200, 115, 71, 0.22);

    box-shadow:
        0 18px 45px
        rgba(125, 69, 37, 0.2);
}

.rl-service-gallery--mulch
.rl-service-gallery__heading h2 span {
    background:
        linear-gradient(
            90deg,
            var(--rl-clay),
            var(--rl-amber) 50%,
            var(--rl-green-600)
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery--mulch
.rl-service-gallery__estimate {
    background:
        linear-gradient(
            135deg,
            var(--rl-blue-700),
            var(--rl-clay) 54%,
            var(--rl-green-600)
        );

    box-shadow:
        0 15px 35px
        rgba(200, 115, 71, 0.22);
}

.rl-service-gallery--mulch
.rl-service-gallery__detail strong {
    color: var(--rl-clay);
}

.rl-service-gallery--mulch
.rl-service-gallery__footer-icon {
    background:
        linear-gradient(
            135deg,
            var(--rl-clay),
            var(--rl-amber) 55%,
            var(--rl-green-600)
        );

    box-shadow:
        0 11px 27px
        rgba(200, 115, 71, 0.21);
}


/* =====================================================
   MULCH GRID
===================================================== */

.rl-service-gallery__grid--mulch {
    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-auto-rows:
        clamp(105px, 9.2vw, 142px);

    grid-auto-flow: dense;
}

.rl-service-gallery__image--mulch-tall {
    grid-column: 1 / 4;
    grid-row: 1 / 4;

    border-radius: 28px;
}

.rl-service-gallery__image--mulch-top {
    grid-column: 4 / 7;
    grid-row: 1 / 3;
}

.rl-service-gallery__image--mulch-featured {
    grid-column: 7 / 13;
    grid-row: 1 / 5;

    border-radius: 29px;
}

.rl-service-gallery__image--mulch-center {
    grid-column: 4 / 7;
    grid-row: 3 / 5;
}

.rl-service-gallery__image--mulch-lower-wide {
    grid-column: 1 / 7;
    grid-row: 4 / 7;

    border-radius: 25px;
}

.rl-service-gallery__image--mulch-lower-small {
    grid-column: 7 / 10;
    grid-row: 5 / 7;
}

.rl-service-gallery__image--mulch-lower-tall {
    grid-column: 10 / 13;
    grid-row: 5 / 8;

    border-radius: 24px;
}

.rl-service-gallery__image--mulch-bottom {
    grid-column: 1 / 10;
    grid-row: 7 / 9;

    border-radius: 25px;
}

.rl-service-gallery--mulch
.rl-service-gallery__image {
    background:
        linear-gradient(
            135deg,
            var(--rl-sand-light),
            #e7d3bf
        );
}

.rl-service-gallery--mulch
.rl-service-gallery__image:hover,
.rl-service-gallery--mulch
.rl-service-gallery__image:focus-visible {
    border-color:
        rgba(200, 115, 71, 0.32);

    box-shadow:
        0 28px 65px
        rgba(102, 58, 32, 0.19);
}

.rl-service-gallery--mulch
.rl-service-gallery__image:focus-visible {
    outline-color:
        rgba(200, 115, 71, 0.32);
}


/* =====================================================
   MULCH REVEAL
===================================================== */

.rl-service-gallery--mulch.is-enhanced
[data-rl-mulch-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery--mulch.is-enhanced
[data-rl-mulch-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery--mulch.is-enhanced
.rl-service-gallery__grid--mulch {
    transition-delay: 80ms;
}

.rl-service-gallery--mulch.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery--mulch.is-enhanced
[data-rl-mulch-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery--mulch
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery--mulch
.rl-service-gallery__image img {
    transition-duration: 0.01ms !important;
}
































/* Computers/laptops */
@media (max-width: 1399px) {
     .rl-service-gallery__grid--trimming {
        grid-auto-rows:
            clamp(98px, 9vw, 130px);
    }

    .rl-service-gallery__trimming-branch {
        width: 230px;
    }

    .rl-service-gallery__final-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .rl-service-gallery__back,
    .rl-service-gallery__footer--final
    .rl-service-gallery__next {
        width: 100%;
    }
      .rl-service-gallery__grid--cleanup {
        grid-auto-rows:
            clamp(98px, 9vw, 130px);
    }

    .rl-service-gallery__cleanup-texture {
        width: 260px;
        height: 185px;
    }
     .rl-service-gallery__grid--mulch {
        grid-auto-rows:
            clamp(98px, 9vw, 130px);
    }

    .rl-service-gallery__mulch-texture {
        width: 270px;
        height: 180px;
    }
      .rl-service-gallery__header {
        gap: 35px;
    }

    .rl-service-gallery__header-side {
        align-items: flex-end;
        flex-direction: column;
        gap: 11px;
    }

    .rl-service-gallery__grid {
        grid-auto-rows:
            clamp(98px, 9.2vw, 132px);
    }

    .rl-gallery-lightbox__viewer {
        width: min(100%, 1250px);
        height: min(100%, 820px);
    }
     .rl-gallery-nav__shell {
        gap: 12px;
    }

    .rl-gallery-nav__identity {
        min-width: 155px;

        padding-right: 10px;
    }

    .rl-gallery-nav__identity-icon {
        width: 40px;
        height: 40px;
    }

    .rl-gallery-nav__link {
        padding-inline: 10px;

        font-size: 0.57rem;
    }

    .rl-gallery-nav__estimate {
        grid-template-columns:
            37px auto 16px;

        gap: 7px;
    }

    .rl-gallery-hero {
        padding-right:
            clamp(26px, 4vw, 58px);

        padding-left:
            clamp(26px, 4vw, 58px);
    }

    .rl-gallery-hero__container {
        grid-template-columns:
            minmax(0, 0.93fr)
            minmax(390px, 0.8fr);

        gap: 70px;
    }

    .rl-gallery-hero__title {
        font-size:
            clamp(3rem, 5.6vw, 5.6rem);
    }

    .rl-gallery-hero__visual {
        width: min(100%, 520px);
        min-height: 470px;
    }

    .rl-gallery-hero__floating-card {
        left: -35px;
    }

    .rl-gallery-hero__bottom {
        right: clamp(30px, 4vw, 58px);
        left: clamp(30px, 4vw, 58px);
    }

}


/* Tablets */
@media (max-width: 1024px) {
    .rl-service-gallery__grid--trimming {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 245px;
        grid-auto-flow: row;
    }

    .rl-service-gallery__image--trimming-featured,
    .rl-service-gallery__image--trimming-top,
    .rl-service-gallery__image--trimming-middle-one,
    .rl-service-gallery__image--trimming-middle-two,
    .rl-service-gallery__image--trimming-bottom-left,
    .rl-service-gallery__image--trimming-bottom-center,
    .rl-service-gallery__image--trimming-bottom-right,
    .rl-service-gallery__image--trimming-wide {
        grid-column: auto;
        grid-row: auto;

        border-radius: 22px;
    }

    .rl-service-gallery__image--trimming-featured,
    .rl-service-gallery__image--trimming-wide {
        grid-column: 1 / -1;
        grid-row: span 2;
    }

    .rl-service-gallery__image--trimming-bottom-left,
    .rl-service-gallery__image--trimming-bottom-right {
        grid-row: span 2;
    }

    .rl-service-gallery__footer--final {
        align-items: stretch;
        flex-direction: column;
    }

    .rl-service-gallery__final-actions {
        align-items: center;
        flex-direction: row;

        width: 100%;
    }

    .rl-service-gallery__back,
    .rl-service-gallery__footer--final
    .rl-service-gallery__next {
        flex: 1 1 0;
        width: auto;
    }
     .rl-service-gallery__grid--cleanup {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 245px;
        grid-auto-flow: row;
    }

    .rl-service-gallery__image--cleanup-featured,
    .rl-service-gallery__image--cleanup-top-right,
    .rl-service-gallery__image--cleanup-right-tall,
    .rl-service-gallery__image--cleanup-middle-left,
    .rl-service-gallery__image--cleanup-middle-center,
    .rl-service-gallery__image--cleanup-bottom-left,
    .rl-service-gallery__image--cleanup-bottom-wide,
    .rl-service-gallery__image--cleanup-bottom-right {
        grid-column: auto;
        grid-row: auto;

        border-radius: 22px;
    }

    .rl-service-gallery__image--cleanup-featured,
    .rl-service-gallery__image--cleanup-bottom-wide {
        grid-column: 1 / -1;
        grid-row: span 2;
    }

    .rl-service-gallery__image--cleanup-right-tall,
    .rl-service-gallery__image--cleanup-bottom-left,
    .rl-service-gallery__image--cleanup-bottom-right {
        grid-row: span 2;
    }

     .rl-service-gallery__grid--mulch {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 245px;
        grid-auto-flow: row;
    }

    .rl-service-gallery__image--mulch-tall,
    .rl-service-gallery__image--mulch-top,
    .rl-service-gallery__image--mulch-featured,
    .rl-service-gallery__image--mulch-center,
    .rl-service-gallery__image--mulch-lower-wide,
    .rl-service-gallery__image--mulch-lower-small,
    .rl-service-gallery__image--mulch-lower-tall,
    .rl-service-gallery__image--mulch-bottom {
        grid-column: auto;
        grid-row: auto;

        border-radius: 22px;
    }

    .rl-service-gallery__image--mulch-featured,
    .rl-service-gallery__image--mulch-lower-wide,
    .rl-service-gallery__image--mulch-bottom {
        grid-column: 1 / -1;
        grid-row: span 2;
    }

    .rl-service-gallery__image--mulch-tall,
    .rl-service-gallery__image--mulch-lower-tall {
        grid-row: span 2;
    }
      .rl-service-gallery__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 28px;
    }

    .rl-service-gallery__header-side {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;

        width: 100%;
    }

    .rl-service-gallery__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows: 245px;
    }

    .rl-service-gallery__image--featured {
        grid-column: 1 / -1;
        grid-row: span 2;
    }

    .rl-service-gallery__image--wide-top,
    .rl-service-gallery__image--small-one,
    .rl-service-gallery__image--small-two,
    .rl-service-gallery__image--lower-left,
    .rl-service-gallery__image--lower-center,
    .rl-service-gallery__image--bottom-wide,
    .rl-service-gallery__image--bottom-feature {
        grid-column: auto;
        grid-row: span 1;
    }

    .rl-service-gallery__image--bottom-wide,
    .rl-service-gallery__image--bottom-feature {
        grid-row: span 2;
    }

    .rl-gallery-lightbox__stage {
        grid-template-columns:
            54px minmax(0, 1fr) 54px;

        gap: 11px;
    }

    .rl-gallery-lightbox__navigation {
        width: 49px;
        height: 49px;
    }
     .rl-gallery-nav {
        top:
            calc(
                var(--rl-nav-top, 10px) +
                var(--rl-nav-height, 72px) +
                7px
            );

        padding-right: 25px;
        padding-left: 25px;
    }

    .rl-gallery-nav__shell {
        grid-template-columns:
            auto minmax(0, 1fr) 48px;

        min-height: 68px;
    }

    .rl-gallery-nav__identity {
        min-width: auto;

        padding-right: 9px;
    }

    .rl-gallery-nav__identity-copy small {
        display: none;
    }

    .rl-gallery-nav__identity-copy strong {
        max-width: 110px;

        font-size: 0.68rem;
    }

    .rl-gallery-nav__estimate {
        display: grid;
        grid-template-columns: 1fr;
        place-items: center;

        width: 48px;
        min-height: 48px;

        padding: 5px;

        border-radius: 14px;
    }

    .rl-gallery-nav__estimate-icon {
        width: 37px;
        height: 37px;
    }

    .rl-gallery-nav__estimate-copy,
    .rl-gallery-nav__estimate-arrow {
        display: none;
    }

    #gallery-introduction,
    #lawn-maintenance,
    #mulch-installation,
    #landscape-cleanup,
    #shrub-hedge-trimming {
        scroll-margin-top:
            calc(
                var(--rl-nav-top, 10px) +
                var(--rl-nav-height, 72px) +
                104px
            );
    }

    .rl-gallery-hero {
        padding:
            calc(
                var(--rl-nav-safe-area) +
                15px
            )
            34px
            80px;
    }

    .rl-gallery-hero__container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(310px, 0.63fr);

        gap: 35px;
    }

    .rl-gallery-hero__title {
        font-size:
            clamp(2.85rem, 7.2vw, 4.8rem);
    }

    .rl-gallery-hero__description {
        font-size: 0.9rem;
    }

    .rl-gallery-hero__visual {
        height: min(58vh, 570px);
        min-height: 430px;
    }

    .rl-gallery-hero__collage {
        gap: 8px;
        padding: 6px;

        border-radius: 25px;
    }

    .rl-gallery-hero__image {
        border-radius: 16px;
    }

    .rl-gallery-hero__floating-card {
        top: 7%;
        left: -27px;

        padding-right: 11px;
    }

    .rl-gallery-hero__floating-card strong {
        max-width: 130px;
    }

    .rl-gallery-hero__collage-counter {
        right: -15px;
    }

    .rl-gallery-hero__bottom {
        right: 34px;
        left: 34px;
    }

}


/* Phones */
@media (max-width: 767px) {
    .rl-service-gallery__trimming-branch,
    .rl-service-gallery__trimming-circle {
        display: none;
    }

    .rl-service-gallery__grid--trimming {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__image--trimming-featured,
    .rl-service-gallery__image--trimming-top,
    .rl-service-gallery__image--trimming-middle-one,
    .rl-service-gallery__image--trimming-middle-two,
    .rl-service-gallery__image--trimming-bottom-left,
    .rl-service-gallery__image--trimming-bottom-center,
    .rl-service-gallery__image--trimming-bottom-right,
    .rl-service-gallery__image--trimming-wide {
        grid-column: 1;
        grid-row: auto;

        height: clamp(250px, 68vw, 430px);

        border-radius: 21px;
    }

    .rl-service-gallery__image--trimming-featured,
    .rl-service-gallery__image--trimming-bottom-left,
    .rl-service-gallery__image--trimming-bottom-right,
    .rl-service-gallery__image--trimming-wide {
        height: clamp(320px, 87vw, 540px);
    }

    .rl-service-gallery__final-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .rl-service-gallery__back,
    .rl-service-gallery__footer--final
    .rl-service-gallery__next {
        width: 100%;
    }
       .rl-service-gallery__cleanup-texture {
        display: none;
    }

    .rl-service-gallery__grid--cleanup {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__image--cleanup-featured,
    .rl-service-gallery__image--cleanup-top-right,
    .rl-service-gallery__image--cleanup-right-tall,
    .rl-service-gallery__image--cleanup-middle-left,
    .rl-service-gallery__image--cleanup-middle-center,
    .rl-service-gallery__image--cleanup-bottom-left,
    .rl-service-gallery__image--cleanup-bottom-wide,
    .rl-service-gallery__image--cleanup-bottom-right {
        grid-column: 1;
        grid-row: auto;

        height: clamp(250px, 68vw, 430px);

        border-radius: 21px;
    }

    .rl-service-gallery__image--cleanup-featured,
    .rl-service-gallery__image--cleanup-right-tall,
    .rl-service-gallery__image--cleanup-bottom-left,
    .rl-service-gallery__image--cleanup-bottom-wide,
    .rl-service-gallery__image--cleanup-bottom-right {
        height: clamp(320px, 87vw, 540px);
    }
    .rl-service-gallery__mulch-texture {
        display: none;
    }

    .rl-service-gallery__grid--mulch {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__image--mulch-tall,
    .rl-service-gallery__image--mulch-top,
    .rl-service-gallery__image--mulch-featured,
    .rl-service-gallery__image--mulch-center,
    .rl-service-gallery__image--mulch-lower-wide,
    .rl-service-gallery__image--mulch-lower-small,
    .rl-service-gallery__image--mulch-lower-tall,
    .rl-service-gallery__image--mulch-bottom {
        grid-column: 1;
        grid-row: auto;

        height: clamp(250px, 68vw, 430px);

        border-radius: 21px;
    }

    .rl-service-gallery__image--mulch-tall,
    .rl-service-gallery__image--mulch-featured,
    .rl-service-gallery__image--mulch-lower-wide,
    .rl-service-gallery__image--mulch-lower-tall,
    .rl-service-gallery__image--mulch-bottom {
        height: clamp(320px, 87vw, 540px);
    }
     .rl-service-gallery__water-ring {
        right: -330px;

        opacity: 0.4;
    }

    .rl-service-gallery__lawn-lines {
        right: -690px;

        opacity: 0.09;
    }

    .rl-service-gallery__leaf,
    .rl-service-gallery__route {
        display: none;
    }

    .rl-service-gallery__header {
        margin-bottom: 34px;
    }

    .rl-service-gallery__heading-group {
        align-items: center;
    }

    .rl-service-gallery__number {
        width: 59px;
        height: 59px;

        border-radius: 18px;
    }

    .rl-service-gallery__heading h2 {
        font-size:
            clamp(2.45rem, 10vw, 3.8rem);
    }

    .rl-service-gallery__heading p {
        font-size: 0.79rem;
    }

    .rl-service-gallery__header-side {
        align-items: stretch;
        flex-direction: column;
    }

    .rl-service-gallery__details {
        justify-content: space-between;

        width: 100%;
    }

    .rl-service-gallery__estimate {
        width: 100%;
    }

    .rl-service-gallery__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__image,
    .rl-service-gallery__image--featured,
    .rl-service-gallery__image--wide-top,
    .rl-service-gallery__image--small-one,
    .rl-service-gallery__image--small-two,
    .rl-service-gallery__image--lower-left,
    .rl-service-gallery__image--lower-center,
    .rl-service-gallery__image--bottom-wide,
    .rl-service-gallery__image--bottom-feature {
        grid-column: 1;
        grid-row: auto;

        height: clamp(250px, 68vw, 430px);

        border-radius: 21px;
    }

    .rl-service-gallery__image--featured,
    .rl-service-gallery__image--bottom-wide,
    .rl-service-gallery__image--bottom-feature {
        height: clamp(320px, 87vw, 540px);
    }

    .rl-service-gallery__expand {
        right: 12px;
        bottom: 12px;

        width: 41px;
        height: 41px;

        opacity: 1;
        transform: none;
    }

    .rl-service-gallery__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .rl-service-gallery__next {
        justify-content: space-between;

        width: 100%;
    }

    .rl-gallery-lightbox {
        padding: 10px;
    }

    .rl-gallery-lightbox__viewer {
        height: min(100%, 780px);

        border-radius: 22px;
    }

    .rl-gallery-lightbox__topbar {
        min-height: 66px;

        padding:
            10px
            11px
            10px
            17px;
    }

    .rl-gallery-lightbox__stage {
        display: block;

        padding: 10px;
    }

    .rl-gallery-lightbox__figure {
        height: 100%;

        border-radius: 16px;
    }

    .rl-gallery-lightbox__navigation {
        position: absolute;
        top: 50%;
        z-index: 4;

        width: 45px;
        height: 45px;

        background:
            rgba(2, 26, 51, 0.72);

        transform: translateY(-50%);
    }

    .rl-gallery-lightbox__navigation:hover {
        transform:
            translateY(-50%)
            scale(1.04);
    }

    .rl-gallery-lightbox__navigation--previous {
        left: 19px;
    }

    .rl-gallery-lightbox__navigation--next {
        right: 19px;
    }
     .rl-gallery-nav {
        top:
            calc(
                var(--rl-nav-top, 8px) +
                var(--rl-nav-height, 68px) +
                5px
            );

        padding:
            8px
            14px;
    }

    .rl-gallery-nav.is-stuck {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .rl-gallery-nav__shell {
        grid-template-columns:
            minmax(0, 1fr) 45px;

        grid-template-rows:
            auto auto;

        gap: 7px;

        min-height: 0;

        padding: 7px;

        border-radius: 18px;
    }

    .rl-gallery-nav__identity {
        min-width: 0;

        padding:
            2px
            4px;

        border-right: 0;
    }

    .rl-gallery-nav__identity-icon {
        width: 37px;
        height: 37px;

        border-radius: 11px;
    }

    .rl-gallery-nav__identity-copy small {
        display: block;

        font-size: 0.44rem;
    }

    .rl-gallery-nav__identity-copy strong {
        max-width: 190px;

        font-size: 0.69rem;
    }

    .rl-gallery-nav__links-wrapper {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .rl-gallery-nav__links {
        gap: 6px;

        padding-bottom: 3px;
    }

    .rl-gallery-nav__link {
        min-height: 39px;

        padding:
            7px
            10px;

        border-radius: 11px;

        font-size: 0.56rem;
    }

    .rl-gallery-nav__link-number {
        min-width: 21px;
        height: 21px;

        border-radius: 7px;
    }

    .rl-gallery-nav__estimate {
        grid-column: 2;
        grid-row: 1;

        width: 43px;
        min-height: 43px;
    }

    .rl-gallery-nav__estimate-icon {
        width: 34px;
        height: 34px;

        border-radius: 10px;
    }

    .rl-gallery-nav__progress {
        width:
            calc(100% - 25px);
    }

    #gallery-introduction,
    #lawn-maintenance,
    #mulch-installation,
    #landscape-cleanup,
    #shrub-hedge-trimming {
        scroll-margin-top:
            calc(
                var(--rl-nav-top, 8px) +
                var(--rl-nav-height, 68px) +
                145px
            );
    }

    .rl-gallery-hero {
        align-items: center;

        padding:
            calc(
                var(--rl-nav-safe-area) +
                13px
            )
            22px
            73px;
    }

    .rl-gallery-hero__background-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2, 20, 36, 0.92),
                rgba(2, 26, 51, 0.76)
            ),
            linear-gradient(
                180deg,
                rgba(2, 26, 51, 0.21),
                rgba(2, 18, 31, 0.72)
            );
    }

    .rl-gallery-hero__water-ring,
    .rl-gallery-hero__route,
    .rl-gallery-hero__leaf {
        display: none;
    }

    .rl-gallery-hero__container {
        display: flex;
        align-items: center;

        height: 100%;
    }

    .rl-gallery-hero__content {
        position: relative;
        z-index: 3;

        width: 100%;
        max-width: 610px;
    }

    .rl-gallery-hero__eyebrow {
        margin-bottom: 16px;

        font-size: 0.58rem;
    }

    .rl-gallery-hero__title {
        max-width: 600px;

        font-size:
            clamp(2.75rem, 11vw, 4.25rem);
        line-height: 0.94;
    }

    .rl-gallery-hero__description {
        max-width: 520px;

        margin-top: 17px;

        font-size: 0.86rem;
        line-height: 1.58;
    }

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

    .rl-gallery-hero__primary {
        min-height: 52px;

        padding-inline: 18px;

        font-size: 0.75rem;
    }

    .rl-gallery-hero__estimate {
        min-height: 52px;
    }

    .rl-gallery-hero__information {
        gap: 10px;

        margin-top: 19px;
    }

    .rl-gallery-hero__information-item:last-child,
    .rl-gallery-hero__information-divider:last-of-type {
        display: none;
    }

    .rl-gallery-hero__visual {
        position: absolute;
        inset: 5px;
        z-index: 1;

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

        margin: 0;

        opacity: 0.31;

        pointer-events: none;
    }

    .rl-gallery-hero__collage {
        gap: 5px;

        border-radius: 25px;
    }

    .rl-gallery-hero__floating-card,
    .rl-gallery-hero__collage-counter,
    .rl-gallery-hero__image-arrow {
        display: none;
    }

    .rl-gallery-hero__bottom {
        right: 17px;
        bottom: 12px;
        left: 17px;

        min-height: 46px;
    }

    .rl-gallery-hero__bottom-copy p {
        font-size: 0.57rem;
    }

}


/* Small phones */
@media (max-width: 479px) {
     .rl-service-gallery__image--trimming-featured,
    .rl-service-gallery__image--trimming-top,
    .rl-service-gallery__image--trimming-middle-one,
    .rl-service-gallery__image--trimming-middle-two,
    .rl-service-gallery__image--trimming-bottom-left,
    .rl-service-gallery__image--trimming-bottom-center,
    .rl-service-gallery__image--trimming-bottom-right,
    .rl-service-gallery__image--trimming-wide {
        height: clamp(235px, 73vw, 350px);

        border-radius: 18px;
    }

    .rl-service-gallery__image--trimming-featured,
    .rl-service-gallery__image--trimming-bottom-left,
    .rl-service-gallery__image--trimming-bottom-right,
    .rl-service-gallery__image--trimming-wide {
        height: clamp(285px, 88vw, 430px);
    }

    .rl-service-gallery__back {
        min-height: 49px;

        padding-inline: 12px;

        font-size: 0.59rem;
    }
     .rl-service-gallery__image--cleanup-featured,
    .rl-service-gallery__image--cleanup-top-right,
    .rl-service-gallery__image--cleanup-right-tall,
    .rl-service-gallery__image--cleanup-middle-left,
    .rl-service-gallery__image--cleanup-middle-center,
    .rl-service-gallery__image--cleanup-bottom-left,
    .rl-service-gallery__image--cleanup-bottom-wide,
    .rl-service-gallery__image--cleanup-bottom-right {
        height: clamp(235px, 73vw, 350px);

        border-radius: 18px;
    }

    .rl-service-gallery__image--cleanup-featured,
    .rl-service-gallery__image--cleanup-right-tall,
    .rl-service-gallery__image--cleanup-bottom-left,
    .rl-service-gallery__image--cleanup-bottom-wide,
    .rl-service-gallery__image--cleanup-bottom-right {
        height: clamp(285px, 88vw, 430px);
    }
      .rl-service-gallery__image--mulch-tall,
    .rl-service-gallery__image--mulch-top,
    .rl-service-gallery__image--mulch-featured,
    .rl-service-gallery__image--mulch-center,
    .rl-service-gallery__image--mulch-lower-wide,
    .rl-service-gallery__image--mulch-lower-small,
    .rl-service-gallery__image--mulch-lower-tall,
    .rl-service-gallery__image--mulch-bottom {
        height: clamp(235px, 73vw, 350px);

        border-radius: 18px;
    }

    .rl-service-gallery__image--mulch-tall,
    .rl-service-gallery__image--mulch-featured,
    .rl-service-gallery__image--mulch-lower-wide,
    .rl-service-gallery__image--mulch-lower-tall,
    .rl-service-gallery__image--mulch-bottom {
        height: clamp(285px, 88vw, 430px);
    }
       .rl-service-gallery__heading-group {
        align-items: flex-start;
        gap: 13px;
    }

    .rl-service-gallery__number {
        width: 48px;
        height: 48px;

        border-radius: 15px;

        font-size: 1rem;
    }

    .rl-service-gallery__heading h2 {
        font-size:
            clamp(2.15rem, 11.5vw, 3rem);
    }

    .rl-service-gallery__heading p {
        font-size: 0.72rem;
        line-height: 1.55;
    }

    .rl-service-gallery__details {
        padding: 10px 12px;
    }

    .rl-service-gallery__detail:last-child {
        display: none;
    }

    .rl-service-gallery__detail-divider {
        display: none;
    }

    .rl-service-gallery__image,
    .rl-service-gallery__image--featured,
    .rl-service-gallery__image--wide-top,
    .rl-service-gallery__image--small-one,
    .rl-service-gallery__image--small-two,
    .rl-service-gallery__image--lower-left,
    .rl-service-gallery__image--lower-center,
    .rl-service-gallery__image--bottom-wide,
    .rl-service-gallery__image--bottom-feature {
        height: clamp(235px, 73vw, 350px);

        border-radius: 18px;
    }

    .rl-service-gallery__image--featured,
    .rl-service-gallery__image--bottom-wide,
    .rl-service-gallery__image--bottom-feature {
        height: clamp(285px, 88vw, 430px);
    }

    .rl-service-gallery__footer {
        padding: 16px;

        border-radius: 18px;
    }

    .rl-service-gallery__footer-copy strong {
        font-size: 0.68rem;
    }

    .rl-gallery-lightbox {
        padding: 5px;
    }

    .rl-gallery-lightbox__viewer {
        border-radius: 18px;
    }

    .rl-gallery-lightbox__information {
        gap: 10px;
    }

    .rl-gallery-lightbox__information > span {
        max-width: 170px;

        overflow: hidden;

        font-size: 0.74rem;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rl-gallery-lightbox__information > strong {
        padding-left: 10px;

        font-size: 0.56rem;
    }

    .rl-gallery-lightbox__close {
        width: 42px;
        height: 42px;

        border-radius: 12px;
    }

    .rl-gallery-lightbox__navigation {
        width: 41px;
        height: 41px;
    }

    .rl-gallery-lightbox__navigation--previous {
        left: 12px;
    }

    .rl-gallery-lightbox__navigation--next {
        right: 12px;
    }
     .rl-gallery-nav {
        padding-right: 8px;
        padding-left: 8px;
    }

    .rl-gallery-nav__shell {
        border-radius: 16px;
    }

    .rl-gallery-nav__identity {
        gap: 8px;
    }

    .rl-gallery-nav__identity-icon {
        width: 34px;
        height: 34px;
    }

    .rl-gallery-nav__identity-icon svg {
        width: 16px;
        height: 16px;
    }

    .rl-gallery-nav__identity-copy strong {
        max-width: 150px;

        font-size: 0.63rem;
    }

    .rl-gallery-nav__link {
        min-height: 37px;

        padding:
            7px
            9px;

        font-size: 0.52rem;
    }

    .rl-gallery-nav__link-number {
        min-width: 20px;
        height: 20px;

        font-size: 0.42rem;
    }

    .rl-gallery-nav__estimate {
        width: 40px;
        min-height: 40px;
    }

    .rl-gallery-nav__estimate-icon {
        width: 32px;
        height: 32px;
    }

    #gallery-introduction,
    #lawn-maintenance,
    #mulch-installation,
    #landscape-cleanup,
    #shrub-hedge-trimming {
        scroll-margin-top:
            calc(
                var(--rl-nav-top, 8px) +
                var(--rl-nav-height, 64px) +
                138px
            );
    }


    .rl-gallery-hero {
        padding:
            calc(
                var(--rl-nav-safe-area) +
                9px
            )
            17px
            66px;
    }

    .rl-gallery-hero__eyebrow {
        min-height: 34px;

        margin-bottom: 13px;
        padding-right: 10px;

        font-size: 0.51rem;
        letter-spacing: 0.08em;
    }

    .rl-gallery-hero__eyebrow-icon {
        width: 23px;
        height: 23px;
    }

    .rl-gallery-hero__title {
        font-size:
            clamp(2.25rem, 12.2vw, 3.25rem);
        line-height: 0.96;
    }

    .rl-gallery-hero__description {
        display: -webkit-box;

        max-width: 420px;

        margin-top: 13px;
        overflow: hidden;

        font-size: 0.76rem;
        line-height: 1.48;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .rl-gallery-hero__actions {
        display: grid;

        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(0, 0.82fr);

        gap: 8px;

        margin-top: 17px;
    }

    .rl-gallery-hero__primary {
        width: 100%;
        min-height: 48px;

        padding-inline: 11px;

        border-radius: 14px;

        font-size: 0.64rem;
    }

    .rl-gallery-hero__primary svg {
        width: 15px;
        height: 15px;
    }

    .rl-gallery-hero__estimate {
        justify-content: center;

        width: 100%;
        min-height: 48px;

        padding: 6px;

        border-radius: 14px;
    }

    .rl-gallery-hero__estimate-icon {
        width: 35px;
        height: 35px;
    }

    .rl-gallery-hero__estimate-copy {
        display: none;
    }

    .rl-gallery-hero__information {
        margin-top: 14px;
    }

    .rl-gallery-hero__information-item {
        gap: 6px;
    }

    .rl-gallery-hero__information-item > strong {
        font-size: 1.03rem;
    }

    .rl-gallery-hero__information-item > span {
        font-size: 0.55rem;
    }

    .rl-gallery-hero__information-item small {
        font-size: 0.47rem;
    }

    .rl-gallery-hero__information-divider {
        height: 19px;
    }

    .rl-gallery-hero__bottom {
        right: 12px;
        bottom: 8px;
        left: 12px;

        min-height: 43px;

        padding-left: 12px;

        border-radius: 13px;
    }

    .rl-gallery-hero__bottom-copy p {
        max-width: 180px;

        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 0.53rem;
    }

    .rl-gallery-hero__bottom > a {
        min-height: 34px;

        padding-inline: 10px;

        font-size: 0.54rem;
    }

}






































/* =====================================================
   RAINLANDSCAPING — SHRUB & HEDGE TRIMMING GALLERY
===================================================== */

.rl-service-gallery--trimming {
    background:
        radial-gradient(
            circle at 91% 14%,
            rgba(77, 143, 69, 0.16),
            transparent 29%
        ),
        radial-gradient(
            circle at 7% 84%,
            rgba(163, 190, 91, 0.14),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f0f5eb 0%,
            var(--rl-page-bg) 50%,
            #e5eee2 100%
        );
}


/* =====================================================
   HEADER VARIATION
===================================================== */

.rl-service-gallery--trimming
.rl-service-gallery__number {
    background:
        radial-gradient(
            circle at 16% 15%,
            rgba(191, 224, 132, 0.32),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-700) 55%,
            #768d3b
        );

    border-color:
        rgba(53, 122, 58, 0.23);

    box-shadow:
        0 18px 45px
        rgba(30, 78, 35, 0.21);
}

.rl-service-gallery--trimming
.rl-service-gallery__heading h2 span {
    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--rl-green-700),
            var(--rl-green-400) 48%,
            #829b43
        );

    background-clip: text;
    -webkit-background-clip: text;
}

.rl-service-gallery--trimming
.rl-service-gallery__detail strong {
    color: var(--rl-green-700);
}

.rl-service-gallery--trimming
.rl-service-gallery__estimate {
    background:
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-600) 56%,
            #778e3d
        );

    box-shadow:
        0 15px 35px
        rgba(47, 105, 48, 0.23);
}

.rl-service-gallery--trimming
.rl-service-gallery__route {
    stroke: var(--rl-green-600);
}


/* =====================================================
   DECORATIVE ELEMENTS
===================================================== */

.rl-service-gallery__trimming-hedge {
    position: absolute;
    top: 11%;
    right: -65px;

    width: 290px;
    height: 195px;

    opacity: 0.11;

    background:
        repeating-radial-gradient(
            circle at 30% 50%,
            rgba(53, 122, 58, 0.64) 0 7px,
            rgba(92, 147, 76, 0.4) 8px 15px,
            transparent 16px 30px
        );

    border:
        1px solid
        rgba(53, 122, 58, 0.32);

    border-radius:
        52% 48% 43% 57% /
        54% 43% 57% 46%;

    transform: rotate(11deg);
}

.rl-service-gallery__trimming-cut-lines {
    position: absolute;
    right: 3%;
    bottom: 10%;

    width: 330px;
    height: 190px;

    opacity: 0.08;

    background:
        repeating-linear-gradient(
            102deg,
            rgba(74, 126, 53, 0.8) 0,
            rgba(74, 126, 53, 0.8) 2px,
            transparent 2px,
            transparent 22px
        );

    border-radius: 50%;

    transform: rotate(-12deg);
}

.rl-service-gallery__trimming-leaves {
    position: absolute;
    bottom: 7%;
    left: -45px;

    width: 245px;
    height: 165px;

    opacity: 0.1;

    border-top:
        2px solid
        rgba(53, 122, 58, 0.62);

    border-radius: 50%;

    transform: rotate(-18deg);
}

.rl-service-gallery__trimming-leaves::before,
.rl-service-gallery__trimming-leaves::after {
    content: "";

    position: absolute;

    width: 80px;
    height: 40px;

    border:
        1px solid
        rgba(53, 122, 58, 0.58);

    border-radius:
        100% 0 100% 0;
}

.rl-service-gallery__trimming-leaves::before {
    top: -16px;
    left: 64px;

    transform: rotate(26deg);
}

.rl-service-gallery__trimming-leaves::after {
    top: 13px;
    left: 135px;

    transform: rotate(-151deg);
}


/* =====================================================
   TRIMMING IMAGE GRID
===================================================== */

.rl-service-gallery__grid--trimming {
    display: grid;

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

    grid-template-areas:
        "trimming-a trimming-a trimming-b trimming-b"
        "trimming-a trimming-a trimming-c trimming-d"
        "trimming-e trimming-e trimming-c trimming-d"
        "trimming-e trimming-e trimming-f trimming-f"
        "trimming-g trimming-g trimming-g trimming-g";

    grid-auto-rows:
        clamp(140px, 11vw, 180px);

    gap: 15px;

    width: 100%;
}

.rl-service-gallery__grid--trimming
.rl-service-gallery__image {
    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    overflow: hidden;

    border-radius: 23px;
}

.rl-service-gallery__image--trimming-a {
    grid-area: trimming-a;

    border-radius: 29px !important;
}

.rl-service-gallery__image--trimming-b {
    grid-area: trimming-b;
}

.rl-service-gallery__image--trimming-c {
    grid-area: trimming-c;

    border-radius: 25px !important;
}

.rl-service-gallery__image--trimming-d {
    grid-area: trimming-d;

    border-radius: 25px !important;
}

.rl-service-gallery__image--trimming-e {
    grid-area: trimming-e;

    border-radius: 27px !important;
}

.rl-service-gallery__image--trimming-f {
    grid-area: trimming-f;
}

.rl-service-gallery__image--trimming-g {
    grid-area: trimming-g;

    border-radius: 28px !important;
}


/* =====================================================
   IMAGE VARIATION
===================================================== */

.rl-service-gallery--trimming
.rl-service-gallery__image {
    background:
        linear-gradient(
            145deg,
            rgba(214, 232, 204, 0.96),
            rgba(192, 218, 183, 0.92)
        );

    border-color:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 18px 45px
        rgba(32, 78, 35, 0.13),
        0 4px 14px
        rgba(74, 98, 44, 0.05);
}

.rl-service-gallery--trimming
.rl-service-gallery__image:hover,
.rl-service-gallery--trimming
.rl-service-gallery__image:focus-visible {
    border-color:
        rgba(74, 139, 68, 0.4);

    box-shadow:
        0 30px 70px
        rgba(32, 83, 36, 0.21);
}

.rl-service-gallery--trimming
.rl-service-gallery__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.rl-service-gallery--trimming
.rl-service-gallery__image-overlay {
    background:
        linear-gradient(
            180deg,
            transparent 47%,
            rgba(16, 51, 20, 0.56)
        );
}


/* =====================================================
   SECTION FOOTER
===================================================== */

.rl-service-gallery--trimming
.rl-service-gallery__footer {
    background:
        linear-gradient(
            105deg,
            rgba(91, 151, 78, 0.14),
            rgba(255, 255, 255, 0.79),
            rgba(144, 169, 68, 0.1)
        );
}

.rl-service-gallery--trimming
.rl-service-gallery__footer-icon {
    background:
        linear-gradient(
            135deg,
            var(--rl-green-950),
            var(--rl-green-600) 56%,
            #778e3d
        );

    box-shadow:
        0 11px 27px
        rgba(44, 101, 45, 0.23);
}


/* =====================================================
   REVEAL
===================================================== */

.rl-service-gallery--trimming.is-enhanced
[data-rl-trimming-reveal] {
    opacity: 0;

    transform:
        translateY(31px)
        scale(0.992);

    transition:
        opacity 760ms var(--rl-ease-smooth),
        transform 850ms var(--rl-ease-smooth);
}

.rl-service-gallery--trimming.is-enhanced
[data-rl-trimming-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.rl-service-gallery--trimming.is-enhanced
.rl-service-gallery__grid--trimming {
    transition-delay: 80ms;
}

.rl-service-gallery--trimming.is-enhanced
.rl-service-gallery__footer {
    transition-delay: 150ms;
}

html.rl-reduced-motion
.rl-service-gallery--trimming.is-enhanced
[data-rl-trimming-reveal] {
    opacity: 1;
    transform: none;
}

html.rl-reduced-motion
.rl-service-gallery--trimming
.rl-service-gallery__image,
html.rl-reduced-motion
.rl-service-gallery--trimming
.rl-service-gallery__image img {
    transition-duration: 0.01ms !important;
}


/* Computers/laptops */
@media (max-width: 1399px) {

    .rl-service-gallery__grid--trimming {
        grid-auto-rows:
            clamp(130px, 10.5vw, 168px);

        gap: 13px;
    }

    .rl-service-gallery__trimming-hedge {
        width: 250px;
        height: 170px;
    }

    .rl-service-gallery__trimming-cut-lines {
        width: 285px;
        height: 165px;
    }

}


/* Tablets */
@media (max-width: 1024px) {

    .rl-service-gallery__grid--trimming {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-areas:
            "trimming-a trimming-a"
            "trimming-a trimming-a"
            "trimming-b trimming-c"
            "trimming-d trimming-e"
            "trimming-f trimming-f"
            "trimming-g trimming-g";

        grid-auto-rows: 225px;

        gap: 13px;
    }

    .rl-service-gallery__grid--trimming
    .rl-service-gallery__image {
        border-radius: 22px !important;
    }

    .rl-service-gallery__image--trimming-a,
    .rl-service-gallery__image--trimming-g {
        border-radius: 26px !important;
    }

}


/* Phones */
@media (max-width: 767px) {

    .rl-service-gallery__trimming-hedge,
    .rl-service-gallery__trimming-cut-lines,
    .rl-service-gallery__trimming-leaves {
        display: none;
    }

    .rl-service-gallery__grid--trimming {
        grid-template-columns: 1fr;

        grid-template-areas:
            "trimming-a"
            "trimming-b"
            "trimming-c"
            "trimming-d"
            "trimming-e"
            "trimming-f"
            "trimming-g";

        grid-auto-rows: auto;

        gap: 11px;
    }

    .rl-service-gallery__grid--trimming
    .rl-service-gallery__image {
        width: 100%;
        height: clamp(260px, 72vw, 440px);

        border-radius: 21px !important;
    }

    .rl-service-gallery__grid--trimming
    .rl-service-gallery__image--trimming-a,
    .rl-service-gallery__grid--trimming
    .rl-service-gallery__image--trimming-e,
    .rl-service-gallery__grid--trimming
    .rl-service-gallery__image--trimming-g {
        height: clamp(325px, 88vw, 540px);
    }

}


/* Small phones */
@media (max-width: 479px) {

    .rl-service-gallery__grid--trimming
    .rl-service-gallery__image {
        height: clamp(235px, 76vw, 365px);

        border-radius: 18px !important;
    }

    .rl-service-gallery__grid--trimming
    .rl-service-gallery__image--trimming-a,
    .rl-service-gallery__grid--trimming
    .rl-service-gallery__image--trimming-e,
    .rl-service-gallery__grid--trimming
    .rl-service-gallery__image--trimming-g {
        height: clamp(285px, 90vw, 430px);
    }

}