/* =====================================================
   RAINLANDSCAPING
   GLOBAL DESIGN SYSTEM
===================================================== */

:root {

    /* =================================
       COLORES PRINCIPALES DEL LOGO
    ================================= */

    --rl-blue-950: #021a33;
    --rl-blue-900: #063c88;
    --rl-blue-700: #0663ac;
    --rl-blue-500: #078cd5;
    --rl-blue-300: #48b7e5;
    --rl-blue-200: #85d5f1;

    --rl-green-950: #082c18;
    --rl-green-900: #124b26;
    --rl-green-700: #246733;
    --rl-green-600: #357a3a;
    --rl-green-400: #75aa4b;
    --rl-green-300: #9acb68;

    /* =================================
       COLORES DE CONTRASTE
    ================================= */

    --rl-amber: #e5a63c;
    --rl-amber-soft: #f4d89d;

    --rl-clay: #c87347;
    --rl-clay-soft: #edc1a7;

    --rl-sand: #ded2ba;
    --rl-sand-light: #eee7d9;

    /* =================================
       FONDOS Y SUPERFICIES
    ================================= */

    --rl-page-bg: #f3f7f4;
    --rl-page-bg-alt: #eaf1f0;

    --rl-cream: #f8f5ed;
    --rl-white: #ffffff;

    --rl-surface:
        rgba(255, 255, 255, 0.88);

    --rl-surface-solid:
        #ffffff;

    --rl-surface-dark:
        #071d27;

    --rl-surface-green:
        #0c351f;

    /* =================================
       TEXTOS
    ================================= */

    --rl-ink: #102029;
    --rl-heading: #071c26;
    --rl-text: #34474e;
    --rl-muted: #66777d;
    --rl-light-text: #e9f2ef;
    --rl-white-text: #ffffff;

    /* =================================
       BORDES
    ================================= */

    --rl-border:
        rgba(6, 99, 172, 0.14);

    --rl-border-green:
        rgba(53, 122, 58, 0.16);

    --rl-border-light:
        rgba(255, 255, 255, 0.18);

    /* =================================
       GRADIENTES
    ================================= */

    --rl-gradient-brand:
        linear-gradient(
            135deg,
            var(--rl-blue-700) 0%,
            var(--rl-blue-500) 48%,
            var(--rl-green-600) 100%
        );

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

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

    --rl-gradient-dark:
        linear-gradient(
            145deg,
            var(--rl-blue-950),
            var(--rl-green-950)
        );

    --rl-gradient-soft:
        linear-gradient(
            135deg,
            rgba(133, 213, 241, 0.16),
            rgba(117, 170, 75, 0.13)
        );

    /* =================================
       SOMBRAS
    ================================= */

    --rl-shadow-xs:
        0 4px 12px rgba(3, 39, 60, 0.06);

    --rl-shadow-sm:
        0 8px 24px rgba(3, 39, 60, 0.08);

    --rl-shadow-md:
        0 18px 45px rgba(3, 39, 60, 0.11),
        0 5px 15px rgba(18, 75, 38, 0.06);

    --rl-shadow-lg:
        0 30px 80px rgba(3, 39, 60, 0.15),
        0 10px 30px rgba(18, 75, 38, 0.08);

    --rl-shadow-blue:
        0 18px 45px rgba(7, 140, 213, 0.22);

    --rl-shadow-green:
        0 18px 45px rgba(53, 122, 58, 0.2);

    /* =================================
       BORDES REDONDEADOS
    ================================= */

    --rl-radius-xs: 10px;
    --rl-radius-sm: 14px;
    --rl-radius-md: 18px;
    --rl-radius-lg: 24px;
    --rl-radius-xl: 32px;
    --rl-radius-2xl: 42px;
    --rl-radius-round: 999px;

    /* =================================
       ESTRUCTURA
    ================================= */

    --rl-container: 1240px;
    --rl-container-wide: 1380px;

    --rl-header-offset: 96px;

    --rl-section-space:
        clamp(88px, 9vw, 140px);

    --rl-side-space:
        clamp(20px, 5vw, 72px);

    /* =================================
       TIPOGRAFÍA
    ================================= */

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

    --rl-font-heading:
        "Outfit",
        "Manrope",
        Arial,
        sans-serif;

    /* =================================
       TRANSICIONES
    ================================= */

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

    --rl-ease-smooth:
        cubic-bezier(0.16, 1, 0.3, 1);

    --rl-transition-fast:
        220ms var(--rl-ease-standard);

    --rl-transition-normal:
        420ms var(--rl-ease-standard);

    --rl-transition-slow:
        700ms var(--rl-ease-smooth);
}


/* =====================================================
   RESET
===================================================== */

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

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: auto;
    scroll-padding-top:
        calc(var(--rl-header-offset) + 24px);
    background: var(--rl-page-bg);
}

body {
    position: relative;
    isolation: isolate;

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

    margin: 0;

    overflow-x: hidden;

    font-family: var(--rl-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;

    color: var(--rl-text);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.76) 0%,
            rgba(243, 247, 244, 0.94) 32%,
            rgba(234, 241, 240, 0.9) 68%,
            rgba(248, 245, 237, 0.95) 100%
        );

    text-rendering: optimizeLegibility;

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

body.rl-page-is-leaving {
    overflow: hidden;
    cursor: progress;
}

main {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

header,
main,
footer {
    position: relative;
    z-index: 1;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

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

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

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

ul,
ol {
    margin-top: 0;
}

::selection {
    color: var(--rl-white);
    background: var(--rl-blue-700);
}


/* =====================================================
   ACCESSIBILITY
===================================================== */

:focus-visible {
    outline: 3px solid var(--rl-blue-300);
    outline-offset: 4px;
}

html.rl-reduced-motion *,
html.rl-reduced-motion *::before,
html.rl-reduced-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}


/* =====================================================
   GLOBAL LAYOUT
===================================================== */

.rl-container {
    width:
        min(
            calc(100% - (var(--rl-side-space) * 2)),
            var(--rl-container)
        );

    margin-inline: auto;
}

.rl-container--wide {
    width:
        min(
            calc(100% - (var(--rl-side-space) * 2)),
            var(--rl-container-wide)
        );

    margin-inline: auto;
}

.rl-section {
    position: relative;
    padding-block: var(--rl-section-space);
}

.rl-section[id] {
    scroll-margin-top:
        calc(var(--rl-header-offset) + 24px);
}

.rl-section--light {
    color: var(--rl-text);
}

.rl-section--dark {
    color: var(--rl-light-text);
    background: var(--rl-gradient-dark);
}

.rl-surface {
    position: relative;

    background: var(--rl-surface);

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

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

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

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

.rl-surface--solid {
    background: var(--rl-surface-solid);
    border: 1px solid var(--rl-border);
}

.rl-surface--dark {
    color: var(--rl-light-text);
    background: var(--rl-gradient-dark);
    border: 1px solid var(--rl-border-light);
}


/* =====================================================
   GLOBAL TYPOGRAPHY
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--rl-heading);
    font-family: var(--rl-font-heading);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

h1 {
    font-size:
        clamp(2.8rem, 6vw, 6.2rem);
}

h2 {
    font-size:
        clamp(2.2rem, 4.4vw, 4.6rem);
}

h3 {
    font-size:
        clamp(1.35rem, 2vw, 2rem);
}

.rl-section--dark h1,
.rl-section--dark h2,
.rl-section--dark h3,
.rl-section--dark h4,
.rl-surface--dark h1,
.rl-surface--dark h2,
.rl-surface--dark h3,
.rl-surface--dark h4 {
    color: var(--rl-white);
}

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

    margin-bottom: 18px;

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

    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

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

    width: 32px;
    height: 3px;

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

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

.rl-text-gradient {
    color: transparent;

    background: var(--rl-gradient-brand);
    background-clip: text;
    -webkit-background-clip: text;
}


/* =====================================================
   GLOBAL BUTTONS
===================================================== */

.rl-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 56px;

    padding: 14px 26px;

    overflow: hidden;

    border: 1px solid transparent;
    border-radius: var(--rl-radius-md);

    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

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

.rl-btn::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.34) 48%,
            transparent 76%
        );

    transform: translateX(-120%);

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

.rl-btn:hover::before {
    opacity: 1;
    transform: translateX(120%);
}

.rl-btn:hover {
    transform: translateY(-3px);
}

.rl-btn:active {
    transform: translateY(-1px) scale(0.985);
}

.rl-btn--primary {
    color: var(--rl-white);
    background: var(--rl-gradient-brand);
    box-shadow: var(--rl-shadow-blue);
}

.rl-btn--primary:hover {
    box-shadow:
        0 22px 50px rgba(7, 140, 213, 0.28),
        0 8px 24px rgba(53, 122, 58, 0.16);
}

.rl-btn--secondary {
    color: var(--rl-blue-900);

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

    border-color: var(--rl-border);

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

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

.rl-btn--secondary:hover {
    color: var(--rl-white);
    background: var(--rl-blue-900);
    border-color: var(--rl-blue-900);
    box-shadow: var(--rl-shadow-blue);
}

.rl-btn--dark {
    color: var(--rl-white);

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

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

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

.rl-btn--dark:hover {
    color: var(--rl-blue-950);
    background: var(--rl-white);
}


/* =====================================================
   FORM ELEMENTS
===================================================== */

.rl-field {
    width: 100%;
    min-height: 56px;

    padding: 15px 17px;

    color: var(--rl-ink);

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

    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-sm);

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

    outline: none;

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

textarea.rl-field {
    min-height: 150px;
    resize: vertical;
}

.rl-field::placeholder {
    color: #7b8a8f;
}

.rl-field:focus {
    background: var(--rl-white);
    border-color: var(--rl-blue-500);

    box-shadow:
        0 0 0 4px rgba(7, 140, 213, 0.12),
        var(--rl-shadow-sm);
}


/* =====================================================
   UNIQUE GLOBAL BACKGROUND
===================================================== */

.rl-site-background {
    position: fixed;
    inset: 0;
    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}

.rl-site-background::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(133, 213, 241, 0.2),
            transparent 27%
        ),
        radial-gradient(
            circle at 86% 29%,
            rgba(117, 170, 75, 0.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 72% 86%,
            rgba(229, 166, 60, 0.08),
            transparent 25%
        );
}

.rl-site-background::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.32;

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

    background-size: 64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 16%,
            black 84%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 16%,
            black 84%,
            transparent
        );
}

.rl-bg-figure {
    position: absolute;
    display: block;
}


/* GOTA DE AGUA */

.rl-bg-water {
    top: -170px;
    right: -110px;

    width: 440px;
    height: 500px;

    opacity: 0.26;

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

    border-radius:
        68% 32% 65% 35% /
        72% 36% 64% 28%;

    background:
        linear-gradient(
            145deg,
            rgba(133, 213, 241, 0.38),
            rgba(7, 140, 213, 0.11) 48%,
            rgba(6, 99, 172, 0.03)
        );

    box-shadow:
        inset 30px 30px 80px
        rgba(255, 255, 255, 0.34);

    transform: rotate(37deg);
}


/* CÉSPED RECIÉN CORTADO */

.rl-bg-mowing {
    top: 31%;
    left: -270px;

    width: 820px;
    height: 370px;

    opacity: 0.46;

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

    border-radius: 50%;

    background:
        repeating-linear-gradient(
            112deg,
            rgba(53, 122, 58, 0.085) 0,
            rgba(53, 122, 58, 0.085) 18px,
            rgba(117, 170, 75, 0.025) 18px,
            rgba(117, 170, 75, 0.025) 38px
        );

    transform: rotate(-12deg);

    filter: blur(0.2px);
}


/* ARBUSTOS Y HEDGES */

.rl-bg-hedges {
    right: -190px;
    bottom: 7%;

    width: 620px;
    height: 340px;

    opacity: 0.34;

    background:
        radial-gradient(
            circle at 18% 73%,
            rgba(18, 75, 38, 0.22) 0 23%,
            transparent 24%
        ),
        radial-gradient(
            circle at 43% 52%,
            rgba(53, 122, 58, 0.18) 0 27%,
            transparent 28%
        ),
        radial-gradient(
            circle at 70% 68%,
            rgba(117, 170, 75, 0.2) 0 25%,
            transparent 26%
        ),
        radial-gradient(
            circle at 88% 44%,
            rgba(53, 122, 58, 0.14) 0 20%,
            transparent 21%
        );
}


/* MULCH */

.rl-bg-mulch {
    left: 16%;
    bottom: 4%;

    width: 290px;
    height: 180px;

    opacity: 0.4;

    border-radius:
        58% 42% 62% 38% /
        52% 63% 37% 48%;

    background-image:
        radial-gradient(
            ellipse at 12% 18%,
            rgba(200, 115, 71, 0.22) 0 7px,
            transparent 8px
        ),
        radial-gradient(
            ellipse at 55% 35%,
            rgba(229, 166, 60, 0.2) 0 6px,
            transparent 7px
        ),
        radial-gradient(
            ellipse at 78% 72%,
            rgba(18, 75, 38, 0.15) 0 7px,
            transparent 8px
        );

    background-size:
        45px 34px,
        56px 42px,
        52px 38px;

    transform: rotate(-8deg);
}


/* HOJAS DE CLEANUP Y TRIMMING */

.rl-bg-leaves {
    top: 65%;
    right: 18%;

    width: 170px;
    height: 170px;

    opacity: 0.23;

    transform: rotate(14deg);
}

.rl-bg-leaves i {
    position: absolute;

    width: 88px;
    height: 43px;

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

    border-radius:
        100% 0 100% 0;

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

.rl-bg-leaves i:nth-child(1) {
    top: 10px;
    left: 15px;

    transform: rotate(22deg);
}

.rl-bg-leaves i:nth-child(2) {
    top: 64px;
    right: 0;

    transform: rotate(112deg);
}

.rl-bg-leaves i:nth-child(3) {
    bottom: 0;
    left: 18px;

    transform: rotate(48deg) scale(0.75);
}


/* =====================================================
   PAGE TRANSITION
===================================================== */

.rl-page-transition {
    --rl-transition-x: 50%;
    --rl-transition-y: 50%;

    position: fixed;
    inset: 0;
    z-index: 999999;

    visibility: hidden;

    overflow: hidden;

    pointer-events: none;
}

.rl-page-transition.is-leaving {
    visibility: visible;
    pointer-events: auto;
}

.rl-page-transition__panel {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            145deg,
            var(--rl-blue-950) 0%,
            var(--rl-blue-900) 44%,
            var(--rl-green-900) 100%
        );

    clip-path:
        circle(
            0
            at
            var(--rl-transition-x)
            var(--rl-transition-y)
        );

    transition:
        clip-path
        620ms
        var(--rl-ease-smooth);
}

.rl-page-transition.is-leaving
.rl-page-transition__panel {
    clip-path:
        circle(
            160vmax
            at
            var(--rl-transition-x)
            var(--rl-transition-y)
        );
}

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

    position: absolute;
    inset: -15%;

    opacity: 0.24;

    background:
        repeating-radial-gradient(
            circle at
            var(--rl-transition-x)
            var(--rl-transition-y),
            transparent 0 34px,
            rgba(255, 255, 255, 0.15) 35px 36px,
            transparent 37px 72px
        );

    transform: scale(0.85);

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

.rl-page-transition.is-leaving
.rl-page-transition__panel::before {
    transform: scale(1.15);
}

.rl-page-transition__brand {
    position: absolute;
    top: 50%;
    left: 50%;

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

    color: var(--rl-white);

    opacity: 0;

    transform:
        translate(-50%, -42%)
        scale(0.94);

    transition:
        opacity 300ms ease 260ms,
        transform 500ms var(--rl-ease-smooth) 230ms;
}

.rl-page-transition.is-leaving
.rl-page-transition__brand {
    opacity: 1;

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

.rl-page-transition__brand div {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.rl-page-transition__brand strong {
    font-family: var(--rl-font-heading);
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.05em;
}

.rl-page-transition__brand div span {
    color: var(--rl-green-300);

    font-size: clamp(0.72rem, 1.5vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.rl-page-transition__drop {
    width: 29px;
    height: 38px;

    border-radius:
        65% 35% 68% 32% /
        72% 42% 58% 28%;

    background:
        linear-gradient(
            145deg,
            var(--rl-blue-200),
            var(--rl-blue-500) 55%,
            var(--rl-blue-900)
        );

    box-shadow:
        inset 5px 5px 10px
        rgba(255, 255, 255, 0.45),
        0 10px 25px
        rgba(0, 0, 0, 0.22);

    transform: rotate(42deg);
}

.rl-page-transition__ripples {
    position: absolute;
    top: var(--rl-transition-y);
    left: var(--rl-transition-x);

    width: 30px;
    height: 30px;

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

.rl-page-transition__ripples span {
    position: absolute;
    inset: 0;

    opacity: 0;

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

    border-radius: 50%;
}

.rl-page-transition.is-leaving
.rl-page-transition__ripples span {
    animation:
        rl-water-ripple
        900ms
        var(--rl-ease-smooth)
        forwards;
}

.rl-page-transition.is-leaving
.rl-page-transition__ripples span:nth-child(2) {
    animation-delay: 90ms;
}

.rl-page-transition.is-leaving
.rl-page-transition__ripples span:nth-child(3) {
    animation-delay: 180ms;
}


/* =====================================================
   PAGE ENTRY
===================================================== */

body.rl-page-entering
> *:not(.rl-site-background):not(.rl-page-transition) {
    animation:
        rl-page-content-enter
        700ms
        var(--rl-ease-smooth)
        both;
}


/* =====================================================
   SECTION LINK ARRIVAL
===================================================== */

.rl-anchor-focus {
    animation:
        rl-anchor-arrival
        800ms
        var(--rl-ease-smooth);
}


/* =====================================================
   KEYFRAMES
===================================================== */

@keyframes rl-water-ripple {

    0% {
        opacity: 0.6;
        transform: scale(0.2);
    }

    100% {
        opacity: 0;
        transform: scale(16);
    }

}

@keyframes rl-page-content-enter {

    0% {
        opacity: 0.72;
        filter: blur(7px);
        transform: translateY(14px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }

}

@keyframes rl-anchor-arrival {

    0% {
        filter:
            brightness(0.96)
            saturate(0.8);
    }

    45% {
        filter:
            brightness(1.045)
            saturate(1.12);
    }

    100% {
        filter:
            brightness(1)
            saturate(1);
    }

}











































/* =====================================================
   RAINLANDSCAPING NAVIGATION
===================================================== */

:root {
    --rl-nav-height: 82px;
    --rl-nav-top: 16px;

    /*
     * El hero utilizará este valor como espacio
     * interno, sin aumentar su altura total.
     */
    --rl-nav-safe-area:
        calc(
            var(--rl-nav-height) +
            var(--rl-nav-top)
        );
}


/* =====================================================
   HERO HEIGHT CONTRACT
===================================================== */

/*
 * El header es fixed y no ocupa espacio en el flujo.
 * El futuro hero seguirá midiendo solamente 100svh.
 *
 * No agregues padding-top al body.
 */

.rl-hero {
    min-height: 100vh;
    min-height: 100svh;

    padding-top:
        calc(
            var(--rl-nav-safe-area) +
            24px
        );

    box-sizing: border-box;
}


/* =====================================================
   SKIP LINK
===================================================== */

.rl-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999999;

    padding: 12px 18px;

    color: var(--rl-white);
    background: var(--rl-blue-900);

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

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

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

    transform: translateY(-150%);

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

.rl-skip-link:focus {
    transform: translateY(0);
}


/* =====================================================
   FIXED HEADER
===================================================== */

.rl-site-header {
    position: fixed;
    top: var(--rl-nav-top);
    right: 0;
    left: 0;
    z-index: 5000;

    height: var(--rl-nav-height);

    pointer-events: none;

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


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

.rl-nav {
    position: relative;
    z-index: 3;

    display: grid;

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

    align-items: center;
    gap: 30px;

    width:
        min(
            calc(100% - 36px),
            var(--rl-container-wide)
        );

    height: 100%;

    margin-inline: auto;
    padding: 10px 12px 10px 20px;

    overflow: hidden;

    pointer-events: auto;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.9),
            rgba(244, 249, 247, 0.78)
        );

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

    border-radius: 24px;

    box-shadow:
        0 12px 35px rgba(3, 39, 60, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);

    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);

    transition:
        height 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-nav::before {
    content: "";

    position: absolute;
    top: 0;
    right: 12%;
    left: 12%;

    height: 1px;

    opacity: 0.8;

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

.rl-site-header.is-scrolled .rl-nav {
    background:
        rgba(255, 255, 255, 0.95);

    border-color:
        rgba(6, 99, 172, 0.14);

    box-shadow:
        0 16px 44px rgba(3, 39, 60, 0.14),
        0 5px 18px rgba(18, 75, 38, 0.06);
}


/* =====================================================
   LOGO
===================================================== */

.rl-nav__brand {
    position: relative;

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

    width: 188px;
    min-width: 188px;
    height: 58px;

    overflow: hidden;

    border-radius: 15px;

    isolation: isolate;

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

.rl-nav__brand::before {
    content: "";

    position: absolute;
    inset: 4px;
    z-index: -1;

    opacity: 0.06;

    border-radius: inherit;

    background: var(--rl-gradient-soft);
}

.rl-nav__brand:hover {
    transform: translateY(-2px);
}

.rl-nav__logo {
    width: 100%;
    height: 100%;

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


/* =====================================================
   DESKTOP LINKS
===================================================== */

.rl-nav__desktop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.1vw, 34px);

    min-width: 0;
}

.rl-nav__link {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 44px;

    color: var(--rl-text);

    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

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

.rl-nav__link::before {
    content: "";

    position: absolute;
    right: 0;
    bottom: 5px;
    left: 0;

    height: 3px;

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

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

    transform: scaleX(0);
    transform-origin: right center;

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

.rl-nav__link:hover,
.rl-nav__link.is-active {
    color: var(--rl-blue-900);
}

.rl-nav__link:hover {
    transform: translateY(-1px);
}

.rl-nav__link:hover::before,
.rl-nav__link.is-active::before {
    transform: scaleX(1);
    transform-origin: left center;
}


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

.rl-nav__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;

    min-width: 0;
}

.rl-nav__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 44px;

    padding-inline: 10px;

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

    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;

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

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

.rl-nav__phone svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.rl-nav__phone:hover {
    color: var(--rl-green-900);

    background:
        rgba(117, 170, 75, 0.1);

    transform: translateY(-1px);
}

.rl-nav__estimate {
    min-width: 154px;
    min-height: 52px;

    padding: 13px 21px;

    color: var(--rl-white);

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

    border: 0;
    border-radius: 16px;

    box-shadow:
        0 10px 25px rgba(7, 140, 213, 0.22),
        0 5px 15px rgba(53, 122, 58, 0.12);
}

.rl-nav__estimate svg {
    width: 18px;
    height: 18px;

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

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

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


/* =====================================================
   HAMBURGER
===================================================== */

.rl-nav__toggle {
    display: none;

    width: 48px;
    height: 48px;

    padding: 0;

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

    background:
        linear-gradient(
            145deg,
            rgba(133, 213, 241, 0.2),
            rgba(255, 255, 255, 0.82)
        );

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

    border-radius: 15px;

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

    cursor: pointer;

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

.rl-nav__toggle:hover {
    color: var(--rl-white);
    background: var(--rl-blue-900);
    box-shadow: var(--rl-shadow-blue);
}

.rl-nav__toggle:active {
    transform: scale(0.96);
}

.rl-nav__toggle-box {
    position: relative;

    display: block;

    width: 21px;
    height: 16px;

    margin-inline: auto;
}

.rl-nav__toggle-box span {
    position: absolute;
    left: 0;

    display: block;

    width: 100%;
    height: 2px;

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

    background: currentColor;

    transition:
        top var(--rl-transition-normal),
        transform var(--rl-transition-normal),
        opacity var(--rl-transition-fast),
        width var(--rl-transition-normal);
}

.rl-nav__toggle-box span:nth-child(1) {
    top: 0;
}

.rl-nav__toggle-box span:nth-child(2) {
    top: 7px;
    width: 72%;
}

.rl-nav__toggle-box span:nth-child(3) {
    top: 14px;
}

.rl-nav__toggle[aria-expanded="true"]
.rl-nav__toggle-box span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.rl-nav__toggle[aria-expanded="true"]
.rl-nav__toggle-box span:nth-child(2) {
    opacity: 0;
    width: 0;
}

.rl-nav__toggle[aria-expanded="true"]
.rl-nav__toggle-box span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}


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

.rl-nav__overlay {
    position: fixed;
    inset: 0;
    z-index: 1;

    display: none;

    width: 100%;
    height: 100%;

    padding: 0;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

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

    border: 0;

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

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

.rl-site-header.is-menu-open
.rl-nav__overlay {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


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

.rl-mobile-menu {
    position: fixed;

    top:
        calc(
            var(--rl-nav-top) +
            var(--rl-nav-height) +
            10px
        );

    right: 12px;
    left: 12px;
    z-index: 2;

    display: none;
    flex-direction: column;

    max-height:
        calc(
            100vh -
            var(--rl-nav-top) -
            var(--rl-nav-height) -
            22px
        );

    max-height:
        calc(
            100dvh -
            var(--rl-nav-top) -
            var(--rl-nav-height) -
            22px
        );

    padding: 22px;

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

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    color: var(--rl-light-text);

    background:
        radial-gradient(
            circle at 88% 4%,
            rgba(72, 183, 229, 0.25),
            transparent 28%
        ),
        radial-gradient(
            circle at 4% 94%,
            rgba(117, 170, 75, 0.2),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(2, 26, 51, 0.985),
            rgba(8, 44, 24, 0.975)
        );

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

    border-radius: 28px;

    box-shadow:
        0 30px 80px rgba(2, 26, 51, 0.38);

    clip-path:
        inset(
            0 0 100% 0
            round 28px
        );

    transform:
        translateY(-14px)
        scale(0.985);

    transform-origin: top center;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;

    transition:
        opacity 260ms ease,
        visibility 260ms ease,
        transform 480ms var(--rl-ease-smooth),
        clip-path 520ms var(--rl-ease-smooth);
}

.rl-site-header.is-menu-open
.rl-mobile-menu {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    clip-path:
        inset(
            0 0 0 0
            round 28px
        );

    transform:
        translateY(0)
        scale(1);
}

.rl-mobile-menu::before {
    content: "";

    position: absolute;
    top: -80px;
    right: -70px;

    width: 220px;
    height: 250px;

    opacity: 0.45;

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

    border-radius:
        66% 34% 64% 36% /
        71% 41% 59% 29%;

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

    transform: rotate(38deg);

    pointer-events: none;
}


/* =====================================================
   MOBILE MENU HEADER
===================================================== */

.rl-mobile-menu__header {
    position: relative;
    z-index: 1;

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

    padding-bottom: 19px;

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

.rl-mobile-menu__header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rl-mobile-menu__eyebrow {
    color: var(--rl-blue-200);

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

.rl-mobile-menu__header strong {
    color: var(--rl-white);

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

.rl-mobile-menu__close {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    color: var(--rl-white);

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

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

    border-radius: 13px;

    cursor: pointer;

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

.rl-mobile-menu__close:hover {
    color: var(--rl-blue-950);
    background: var(--rl-white);
}

.rl-mobile-menu__close:active {
    transform: scale(0.94);
}

.rl-mobile-menu__close svg {
    width: 19px;
    height: 19px;

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


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

.rl-mobile-menu__links {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    padding-block: 10px;
}

.rl-mobile-menu__link {
    display: grid;

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

    align-items: center;
    gap: 12px;

    min-height: 56px;

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

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

    font-family: var(--rl-font-heading);
    font-size: 1rem;
    font-weight: 600;

    transition:
        color var(--rl-transition-fast),
        padding var(--rl-transition-normal),
        border-color var(--rl-transition-fast);
}

.rl-mobile-menu__number {
    color: var(--rl-blue-300);

    font-family: var(--rl-font-body);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.rl-mobile-menu__link i {
    color: var(--rl-green-300);

    font-family: var(--rl-font-body);
    font-size: 1.15rem;
    font-style: normal;

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

.rl-mobile-menu__link:hover,
.rl-mobile-menu__link.is-active {
    color: var(--rl-white);

    padding-left: 7px;

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

.rl-mobile-menu__link:hover i {
    transform: translateX(5px);
}


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

.rl-mobile-menu__services {
    position: relative;
    z-index: 1;

    padding: 16px;

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

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

    border-radius: 18px;
}

.rl-mobile-menu__services > span {
    display: block;

    margin-bottom: 11px;

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

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.rl-mobile-menu__services > div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.rl-mobile-menu__services > div span {
    padding: 7px 10px;

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

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

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

    border-radius: 10px;

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


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

.rl-mobile-menu__footer {
    position: relative;
    z-index: 1;

    display: grid;

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

    align-items: center;
    gap: 14px;

    margin-top: 14px;
}

.rl-mobile-menu__call {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 58px;

    padding: 10px 13px;

    color: var(--rl-white);

    background:
        linear-gradient(
            135deg,
            rgba(7, 140, 213, 0.24),
            rgba(117, 170, 75, 0.14)
        );

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

    border-radius: 16px;

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

.rl-mobile-menu__call:hover {
    background:
        linear-gradient(
            135deg,
            rgba(7, 140, 213, 0.36),
            rgba(117, 170, 75, 0.23)
        );

    transform: translateY(-2px);
}

.rl-mobile-menu__call svg {
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    fill: var(--rl-blue-200);
}

.rl-mobile-menu__call > span {
    display: flex;
    flex-direction: column;
}

.rl-mobile-menu__call small {
    color:
        rgba(255, 255, 255, 0.61);

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

.rl-mobile-menu__call strong {
    color: var(--rl-white);

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

.rl-mobile-menu__socials {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rl-mobile-menu__socials a {
    color:
        rgba(255, 255, 255, 0.67);

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

    transition:
        color var(--rl-transition-fast);
}

.rl-mobile-menu__socials a:hover {
    color: var(--rl-blue-200);
}


/* =====================================================
   OPEN MENU STATES
===================================================== */

body.rl-mobile-nav-open {
    overscroll-behavior: none;
}

body.rl-mobile-nav-open
.rl-site-background {
    animation-play-state: paused;
}


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

html.rl-reduced-motion
.rl-mobile-menu,
html.rl-reduced-motion
.rl-nav__overlay,
html.rl-reduced-motion
.rl-nav__toggle-box span {
    transition-duration: 0.01ms !important;
}











































/* =====================================================
   RAINLANDSCAPING HERO
===================================================== */

.rl-hero {
    --rl-hero-duration: 6500ms;

    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) + 18px
        )
        var(--rl-side-space)
        clamp(94px, 11vh, 128px);

    overflow: hidden;

    color: var(--rl-white);

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


/* =====================================================
   ACCESSIBILITY
===================================================== */

.rl-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =====================================================
   BACKGROUND CAROUSEL
===================================================== */

.rl-hero__media {
    position: absolute;
    inset: 8px;
    z-index: -2;

    overflow: hidden;

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

    border-radius: 34px;

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

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

.rl-hero__slide {
    position: absolute;
    inset: 0;

    margin: 0;

    visibility: hidden;
    opacity: 0;

    transform: scale(1.055);

    transition:
        opacity 1100ms var(--rl-ease-smooth),
        visibility 1100ms var(--rl-ease-smooth),
        transform 7800ms linear;

    pointer-events: none;
}

.rl-hero__slide.is-active {
    visibility: visible;
    opacity: 1;

    transform: scale(1);

    pointer-events: auto;
}

.rl-hero__slide img {
    width: 100%;
    height: 100%;

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

    filter:
        saturate(0.94)
        contrast(1.02);

    user-select: none;
    -webkit-user-drag: none;
}


/* =====================================================
   BACKGROUND OVERLAYS
===================================================== */

.rl-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(2, 18, 32, 0.91) 0%,
            rgba(2, 26, 51, 0.78) 36%,
            rgba(2, 26, 51, 0.41) 67%,
            rgba(2, 26, 51, 0.23) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2, 26, 51, 0.34) 0%,
            transparent 38%,
            rgba(2, 20, 34, 0.46) 100%
        );

    pointer-events: none;
}

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

    background:
        radial-gradient(
            circle at 10% 25%,
            rgba(72, 183, 229, 0.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 76% 92%,
            rgba(117, 170, 75, 0.13),
            transparent 29%
        );

    pointer-events: none;
}

.rl-hero__texture {
    position: absolute;
    inset: 0;
    z-index: 4;

    opacity: 0.18;

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

    background-size: 76px 76px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.55),
            transparent 72%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.55),
            transparent 72%
        );

    pointer-events: none;
}


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

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

    display: flex;
    align-items: center;

    width: 100%;
    height: 100%;
}

.rl-hero__content {
    width: min(100%, 780px);

    padding-top: clamp(0px, 2vh, 24px);

    text-shadow:
        0 4px 24px
        rgba(1, 16, 29, 0.18);
}


/* =====================================================
   EYEBROW
===================================================== */

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

    min-height: 39px;

    margin-bottom: clamp(18px, 2.8vh, 27px);
    padding: 7px 14px 7px 8px;

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

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

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

    border-radius: 14px;

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

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

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

.rl-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.3),
            rgba(117, 170, 75, 0.18)
        );

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

    border-radius: 9px;
}

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

    fill: currentColor;
}


/* =====================================================
   TITLE
===================================================== */

.rl-hero__title {
    max-width: 780px;

    margin: 0;

    color: var(--rl-white);

    font-family: var(--rl-font-heading);
    font-size:
        clamp(3.2rem, 6.2vw, 6.75rem);
    font-weight: 700;
    line-height: 0.91;
    letter-spacing: -0.058em;

    text-wrap: balance;
}

.rl-hero__title span {
    display: block;

    color: transparent;

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

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


/* =====================================================
   DESCRIPTION
===================================================== */

.rl-hero__description {
    max-width: 650px;

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

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

    font-size:
        clamp(0.96rem, 1.35vw, 1.08rem);
    font-weight: 500;
    line-height: 1.72;

    text-wrap: pretty;
}


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

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

    margin-top:
        clamp(24px, 3.5vh, 35px);
}

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

    padding-inline: 25px;

    color: var(--rl-white);

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

    border: 0;
    border-radius: 17px;

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

.rl-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-hero__primary:hover svg {
    transform: translateX(5px);
}

.rl-hero__call {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    min-height: 57px;

    padding: 8px 15px 8px 9px;

    color: var(--rl-white);

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

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

    border-radius: 17px;

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

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

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

.rl-hero__call:hover {
    color: var(--rl-blue-950);

    background: var(--rl-white);

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

    transform: translateY(-3px);
}

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

    width: 39px;
    height: 39px;

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

    background:
        rgba(7, 140, 213, 0.18);

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

    border-radius: 12px;
}

.rl-hero__call:hover
.rl-hero__call-icon {
    color: var(--rl-white);
    background: var(--rl-blue-700);
}

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

    fill: currentColor;
}

.rl-hero__call-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rl-hero__call-text small {
    color:
        rgba(255, 255, 255, 0.61);

    font-size: 0.61rem;
    font-weight: 700;
    line-height: 1;
}

.rl-hero__call:hover
.rl-hero__call-text small {
    color: var(--rl-muted);
}

.rl-hero__call-text strong {
    color: inherit;

    font-size: 0.84rem;
    line-height: 1.1;
}


/* =====================================================
   TRUST INFORMATION
===================================================== */

.rl-hero__trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

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

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

.rl-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1.2;
}

.rl-hero__trust-item svg {
    width: 16px;
    height: 16px;

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

.rl-hero__trust-divider {
    width: 1px;
    height: 16px;

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


/* =====================================================
   SERVICES LINE
===================================================== */

.rl-hero__services {
    position: absolute;
    bottom: 28px;
    left: max(
        var(--rl-side-space),
        calc(
            (100vw - var(--rl-container)) / 2
        )
    );
    z-index: 3;

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

    max-width:
        calc(100% - 430px);

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

.rl-hero__services-label {
    flex: 0 0 auto;

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

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

.rl-hero__services-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
}

.rl-hero__services-list span {
    color:
        rgba(255, 255, 255, 0.67);

    font-size: 0.69rem;
    font-weight: 700;
    white-space: nowrap;
}

.rl-hero__services-list i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

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


/* =====================================================
   CAROUSEL CONTROLS
===================================================== */

.rl-hero__carousel-controls {
    position: absolute;
    right: max(
        var(--rl-side-space),
        calc(
            (100vw - var(--rl-container)) / 2
        )
    );
    bottom: 20px;
    z-index: 5;

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

    padding: 7px;

    color: var(--rl-white);

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

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

    border-radius: 16px;

    box-shadow:
        0 15px 35px
        rgba(2, 18, 32, 0.19);

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

.rl-hero__arrow {
    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    padding: 0;

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

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

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

    border-radius: 11px;

    cursor: pointer;

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

.rl-hero__arrow:hover {
    color: var(--rl-blue-950);

    background: var(--rl-white);

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

    transform: translateY(-2px);
}

.rl-hero__arrow:active {
    transform: scale(0.94);
}

.rl-hero__arrow svg {
    width: 17px;
    height: 17px;

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

.rl-hero__pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rl-hero__dot {
    position: relative;

    width: 31px;
    height: 8px;

    padding: 0;

    overflow: hidden;

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

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

    cursor: pointer;
}

.rl-hero__dot span {
    position: absolute;
    inset: 0;

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

    border-radius: inherit;

    transform: scaleX(0);
    transform-origin: left center;
}

.rl-hero__dot.is-active {
    background:
        rgba(255, 255, 255, 0.28);
}

.rl-hero__dot.is-active.is-running span {
    animation:
        rl-hero-progress
        var(--rl-hero-duration)
        linear
        forwards;
}

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

    min-width: 51px;

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

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

.rl-hero__counter span:first-child {
    color: var(--rl-white);
}

.rl-hero__counter i {
    width: 13px;
    height: 1px;

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


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes rl-hero-progress {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}


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

html.rl-reduced-motion
.rl-hero__slide {
    transform: none;

    transition:
        opacity 0.01ms linear,
        visibility 0.01ms linear;
}

html.rl-reduced-motion
.rl-hero__dot span {
    animation: none !important;
}









































/* =====================================================
   RAINLANDSCAPING — MAIN SERVICES
===================================================== */

.rl-main-services {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(248, 245, 237, 0.82) 0%,
            rgba(243, 247, 244, 0.96) 46%,
            rgba(234, 241, 240, 0.9) 100%
        );
}


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

.rl-main-services__decor {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}

.rl-main-services__drop {
    position: absolute;
    top: 5%;
    right: -150px;

    width: 410px;
    height: 470px;

    opacity: 0.19;

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

    border-radius:
        68% 32% 64% 36% /
        74% 38% 62% 26%;

    background:
        linear-gradient(
            145deg,
            rgba(133, 213, 241, 0.35),
            rgba(7, 140, 213, 0.06)
        );

    box-shadow:
        inset 30px 30px 80px
        rgba(255, 255, 255, 0.28);

    transform: rotate(39deg);
}

.rl-main-services__leaf {
    position: absolute;
    bottom: -120px;
    left: -110px;

    width: 350px;
    height: 220px;

    opacity: 0.12;

    border:
        2px solid
        var(--rl-green-600);

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            rgba(117, 170, 75, 0.25),
            transparent 68%
        );

    transform: rotate(-22deg);
}

.rl-main-services__leaf::before {
    content: "";

    position: absolute;
    top: 52%;
    left: 7%;

    width: 88%;
    height: 2px;

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

    transform: rotate(-18deg);
    transform-origin: left center;
}

.rl-main-services__lines {
    position: absolute;
    top: 31%;
    right: -310px;

    width: 820px;
    height: 360px;

    opacity: 0.21;

    border-radius: 50%;

    background:
        repeating-linear-gradient(
            115deg,
            rgba(53, 122, 58, 0.08) 0,
            rgba(53, 122, 58, 0.08) 14px,
            transparent 14px,
            transparent 35px
        );

    transform: rotate(-13deg);
}


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

.rl-main-services__header {
    display: grid;

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

    align-items: end;
    gap: clamp(42px, 7vw, 100px);

    margin-bottom:
        clamp(45px, 6vw, 76px);
}

.rl-main-services__heading h2 {
    max-width: 790px;

    margin: 0;

    color: var(--rl-heading);

    font-size:
        clamp(2.7rem, 5.2vw, 5.3rem);
    line-height: 0.98;
    letter-spacing: -0.052em;
}

.rl-main-services__heading h2 span {
    display: block;

    color: transparent;

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

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

.rl-main-services__intro {
    padding-bottom: 6px;
}

.rl-main-services__intro p {
    margin: 0 0 23px;

    color: var(--rl-text);

    font-size: 0.98rem;
    line-height: 1.75;
}

.rl-main-services__gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

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

    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;

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

.rl-main-services__gallery-link svg {
    width: 17px;
    height: 17px;

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

.rl-main-services__gallery-link:hover {
    gap: 16px;

    color: var(--rl-green-700);
}


/* =====================================================
   SERVICES GRID
===================================================== */

.rl-main-services__grid {
    display: grid;

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

    gap: 24px;
}

.rl-service-card {
    position: relative;

    min-width: 0;

    opacity: 1;
    transform: none;
}

.rl-service-card--wide {
    grid-column: span 7;
}

.rl-service-card--compact {
    grid-column: span 5;
}

.rl-service-card__link {
    --rl-card-x: 50%;
    --rl-card-y: 50%;

    position: relative;
    isolation: isolate;

    display: flex;
    align-items: flex-end;

    min-height: 470px;

    overflow: hidden;

    color: var(--rl-white);

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

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

    border-radius: 30px;

    box-shadow:
        0 24px 60px
        rgba(3, 39, 60, 0.14),
        0 7px 22px
        rgba(18, 75, 38, 0.07);

    outline: none;

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

.rl-service-card--compact
.rl-service-card__link {
    min-height: 435px;
}

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

    position: absolute;
    inset: 0;
    z-index: 4;

    opacity: 0;

    background:
        radial-gradient(
            circle 240px
            at
            var(--rl-card-x)
            var(--rl-card-y),
            rgba(255, 255, 255, 0.18),
            transparent 68%
        );

    pointer-events: none;

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

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

    position: absolute;
    inset: 0;
    z-index: 5;

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

    border-radius: inherit;

    pointer-events: none;

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

.rl-service-card__link:hover,
.rl-service-card__link:focus-visible {
    transform:
        translateY(-8px)
        scale(1.008);

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

    box-shadow:
        0 34px 85px
        rgba(3, 39, 60, 0.2),
        0 14px 36px
        rgba(18, 75, 38, 0.1);
}

.rl-service-card__link:hover::before,
.rl-service-card__link:focus-visible::before {
    opacity: 1;
}

.rl-service-card__link:hover::after,
.rl-service-card__link:focus-visible::after {
    border-color:
        rgba(255, 255, 255, 0.2);
}


/* =====================================================
   SERVICE IMAGE
===================================================== */

.rl-service-card__media {
    position: absolute;
    inset: 0;
    z-index: -3;

    overflow: hidden;
}

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

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

    transform: scale(1.015);

    filter:
        saturate(0.94)
        contrast(1.01);

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

.rl-service-card__link:hover
.rl-service-card__media img,
.rl-service-card__link:focus-visible
.rl-service-card__media img {
    transform: scale(1.075);

    filter:
        saturate(1.04)
        contrast(1.04);
}


/* =====================================================
   IMAGE GRADIENT
===================================================== */

.rl-service-card__gradient {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(2, 26, 51, 0.38) 0%,
            rgba(2, 26, 51, 0.08) 37%,
            rgba(2, 23, 38, 0.52) 65%,
            rgba(2, 19, 31, 0.96) 100%
        ),
        linear-gradient(
            90deg,
            rgba(2, 26, 51, 0.18),
            transparent 65%
        );

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

.rl-service-card__link:hover
.rl-service-card__gradient {
    opacity: 0.93;
}


/* =====================================================
   CARD TOP
===================================================== */

.rl-service-card__top {
    position: absolute;
    top: 22px;
    right: 22px;
    left: 22px;
    z-index: 2;

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

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

    width: 46px;
    height: 46px;

    color: var(--rl-white);

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

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

    border-radius: 14px;

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

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

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.rl-service-card__category {
    padding: 9px 12px;

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

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

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

    border-radius: 12px;

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

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


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

.rl-service-card__content {
    position: relative;
    z-index: 2;

    display: grid;

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

    align-items: end;
    gap: 25px;

    width: 100%;

    padding: 34px;
}

.rl-service-card__text {
    max-width: 650px;
}

.rl-service-card__text h3 {
    margin: 0 0 12px;

    color: var(--rl-white);

    font-size:
        clamp(1.75rem, 3vw, 2.7rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.rl-service-card--compact
.rl-service-card__text h3 {
    font-size:
        clamp(1.65rem, 2.4vw, 2.25rem);
}
.rl-service-card--long-title
.rl-service-card__text h3 {
    max-width: 620px;

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

    line-height: 1.06;
}

.rl-service-card__text p {
    max-width: 580px;

    margin: 0;

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

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

.rl-service-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 17px;
}

.rl-service-card__tags span {
    padding: 7px 10px;

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

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

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

    border-radius: 9px;

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


/* =====================================================
   CARD ARROW
===================================================== */

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

    width: 58px;
    height: 58px;

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

    background: var(--rl-white);

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

    border-radius: 18px;

    box-shadow:
        0 12px 28px
        rgba(1, 17, 29, 0.22);

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

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

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

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

.rl-service-card__link:hover
.rl-service-card__arrow,
.rl-service-card__link:focus-visible
.rl-service-card__arrow {
    color: var(--rl-white);

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

    border-radius: 50%;

    transform: rotate(-7deg);
}

.rl-service-card__link:hover
.rl-service-card__arrow svg,
.rl-service-card__link:focus-visible
.rl-service-card__arrow svg {
    transform: translateX(4px);
}


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

.rl-main-services__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    margin-top: 34px;
    padding: 25px 28px;

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

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

    border-radius: 22px;

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

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

.rl-main-services__footer-text {
    max-width: 690px;
}

.rl-main-services__footer-text > span {
    display: block;

    margin-bottom: 4px;

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

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

.rl-main-services__footer-text p {
    margin: 0;

    color: var(--rl-muted);

    font-size: 0.78rem;
    line-height: 1.55;
}

.rl-main-services__estimate {
    flex: 0 0 auto;

    min-height: 54px;

    color: var(--rl-white);

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

    border: 0;

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

.rl-main-services__estimate svg {
    width: 17px;
    height: 17px;

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

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

.rl-main-services__estimate:hover svg {
    transform: translateX(5px);
}


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

.rl-main-services.is-enhanced
[data-rl-reveal] {
    opacity: 0;

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

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

    transition-delay:
        var(--rl-card-delay, 0ms);
}

.rl-main-services.is-enhanced
[data-rl-reveal].is-visible {
    opacity: 1;
    transform: none;
}



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

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

html.rl-reduced-motion
.rl-service-card__link,
html.rl-reduced-motion
.rl-service-card__media img,
html.rl-reduced-motion
.rl-service-card__arrow,
html.rl-reduced-motion
.rl-service-card__arrow svg {
    transition-duration: 0.01ms !important;
}







































/* =====================================================
   RAINLANDSCAPING — WHY CHOOSE US
===================================================== */

.rl-why {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    color: var(--rl-light-text);

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(7, 140, 213, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(117, 170, 75, 0.16),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--rl-blue-950) 0%,
            #05293a 48%,
            var(--rl-green-950) 100%
        );
}


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

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

    overflow: hidden;

    pointer-events: none;
}

.rl-why__background::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.18;

    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: 76px 76px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );
}

.rl-why__water-shape {
    position: absolute;
    top: -230px;
    right: -150px;

    width: 560px;
    height: 620px;

    opacity: 0.22;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(133, 213, 241, 0.28),
            rgba(7, 140, 213, 0.07) 55%,
            transparent
        );

    box-shadow:
        inset 35px 35px 100px
        rgba(255, 255, 255, 0.08);

    transform: rotate(38deg);
}

.rl-why__lawn-lines {
    position: absolute;
    bottom: -190px;
    left: -300px;

    width: 900px;
    height: 470px;

    opacity: 0.15;

    border-radius: 50%;

    background:
        repeating-linear-gradient(
            112deg,
            rgba(117, 170, 75, 0.22) 0,
            rgba(117, 170, 75, 0.22) 15px,
            transparent 15px,
            transparent 39px
        );

    transform: rotate(-14deg);
}

.rl-why__floating-leaf {
    position: absolute;

    width: 100px;
    height: 48px;

    opacity: 0.15;

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

    border-radius:
        100% 0 100% 0;

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

.rl-why__floating-leaf--one {
    top: 29%;
    left: 5%;

    transform: rotate(24deg);
}

.rl-why__floating-leaf--two {
    right: 7%;
    bottom: 24%;

    transform:
        rotate(126deg)
        scale(0.76);
}


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

.rl-why__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, 0.58fr);

    align-items: end;
    gap: clamp(45px, 8vw, 120px);

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

.rl-why__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 19px;

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

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

.rl-why__eyebrow::before {
    content: "";

    width: 34px;
    height: 3px;

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

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

.rl-why__heading h2 {
    max-width: 800px;

    margin: 0;

    color: var(--rl-white);

    font-size:
        clamp(2.8rem, 5.3vw, 5.5rem);
    line-height: 0.97;
    letter-spacing: -0.055em;
}

.rl-why__heading h2 span {
    display: block;

    color: transparent;

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

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

.rl-why__introduction {
    padding-bottom: 6px;
}

.rl-why__introduction p {
    margin: 0 0 22px;

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

    font-size: 0.96rem;
    line-height: 1.75;
}

.rl-why__location {
    display: inline-flex;
    align-items: center;
    gap: 9px;

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

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

.rl-why__location svg {
    width: 18px;
    height: 18px;

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


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

.rl-why__layout {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.84fr)
        minmax(0, 1.16fr);

    align-items: stretch;
    gap: 24px;
}


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

.rl-why__visual {
    --rl-why-image-x: 50%;
    --rl-why-image-y: 50%;

    position: relative;
    isolation: isolate;

    min-height: 640px;

    overflow: hidden;

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

    border-radius: 32px;

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

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

.rl-why__visual::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 3;

    opacity: 0;

    background:
        radial-gradient(
            circle 280px
            at
            var(--rl-why-image-x)
            var(--rl-why-image-y),
            rgba(255, 255, 255, 0.16),
            transparent 70%
        );

    pointer-events: none;

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

.rl-why__visual:hover::before {
    opacity: 1;
}

.rl-why__image {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.rl-why__image img {
    width: 100%;
    height: 100%;

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

    transform: scale(1.025);

    filter:
        saturate(0.91)
        contrast(1.02);

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

.rl-why__visual:hover
.rl-why__image img {
    transform: scale(1.07);

    filter:
        saturate(1)
        contrast(1.04);
}

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

    background:
        linear-gradient(
            180deg,
            rgba(2, 26, 51, 0.15) 0%,
            rgba(2, 26, 51, 0.12) 35%,
            rgba(2, 20, 34, 0.72) 73%,
            rgba(2, 18, 30, 0.95) 100%
        );
}

.rl-why__visual-label {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-height: 43px;

    padding: 7px 13px 7px 7px;

    color: var(--rl-white);

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

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

    border-radius: 14px;

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

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

.rl-why__visual-label-icon {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    color: var(--rl-white);

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

    border-radius: 10px;
}

.rl-why__visual-label-icon svg {
    width: 15px;
    height: 15px;

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

.rl-why__visual-card {
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    z-index: 4;

    padding: 23px;

    color: var(--rl-white);

    background:
        rgba(4, 30, 42, 0.72);

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

    border-radius: 22px;

    box-shadow:
        0 18px 45px
        rgba(0, 11, 21, 0.25);

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

.rl-why__visual-card > span {
    display: block;

    margin-bottom: 7px;

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

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

.rl-why__visual-card strong {
    display: block;

    max-width: 410px;

    color: var(--rl-white);

    font-family: var(--rl-font-heading);
    font-size:
        clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.16;
}

.rl-why__visual-services {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 17px;
}

.rl-why__visual-services span {
    padding: 7px 10px;

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

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

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

    border-radius: 9px;

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


/* =====================================================
   BENEFITS GRID
===================================================== */

.rl-why__benefits {
    display: grid;

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

    gap: 18px;
}

.rl-why-card {
    --rl-why-card-x: 50%;
    --rl-why-card-y: 50%;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-height: 305px;

    padding: 27px;

    overflow: hidden;

    color: var(--rl-light-text);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.045)
        );

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

    border-radius: 25px;

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

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

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

.rl-why-card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    opacity: 0;

    background:
        radial-gradient(
            circle 220px
            at
            var(--rl-why-card-x)
            var(--rl-why-card-y),
            rgba(133, 213, 241, 0.15),
            transparent 68%
        );

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

.rl-why-card:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.065)
        );

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

    box-shadow:
        0 25px 58px
        rgba(0, 14, 26, 0.22),
        inset 0 1px 0
        rgba(255, 255, 255, 0.09);

    transform: translateY(-7px);
}

.rl-why-card:hover::before {
    opacity: 1;
}

.rl-why-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: auto;
}

.rl-why-card__number {
    color:
        rgba(255, 255, 255, 0.41);

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.rl-why-card__icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

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

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

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

    border-radius: 15px;

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

.rl-why-card:hover
.rl-why-card__icon {
    color: var(--rl-white);

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

    transform:
        rotate(-6deg)
        scale(1.04);
}

.rl-why-card__icon svg {
    width: 22px;
    height: 22px;

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

.rl-why-card h3 {
    margin: 30px 0 12px;

    color: var(--rl-white);

    font-size:
        clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.rl-why-card p {
    margin: 0 0 23px;

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

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

.rl-why-card__line {
    display: block;

    width: 45px;
    height: 3px;

    margin-top: auto;

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

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

    transition:
        width var(--rl-transition-slow);
}

.rl-why-card:hover
.rl-why-card__line {
    width: 100%;
}


/* =====================================================
   CTA
===================================================== */

.rl-why__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 38px;

    margin-top: 26px;
    padding: 25px 28px;

    color: var(--rl-white);

    background:
        linear-gradient(
            105deg,
            rgba(7, 140, 213, 0.16),
            rgba(255, 255, 255, 0.075),
            rgba(117, 170, 75, 0.13)
        );

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

    border-radius: 23px;

    box-shadow:
        0 20px 50px
        rgba(0, 14, 27, 0.2);

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

.rl-why__cta-copy > span {
    display: block;

    margin-bottom: 5px;

    color: var(--rl-white);

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

.rl-why__cta-copy p {
    margin: 0;

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

    font-size: 0.76rem;
    line-height: 1.55;
}

.rl-why__cta-actions {
    display: flex;
    align-items: center;
    gap: 11px;

    flex: 0 0 auto;
}

.rl-why__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 54px;

    padding: 12px 17px;

    color: var(--rl-white);

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

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

    border-radius: 16px;

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

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

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

    transform: translateY(-3px);
}

.rl-why__call svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.rl-why__estimate {
    min-height: 54px;

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

    border: 0;

    box-shadow:
        0 14px 33px
        rgba(7, 140, 213, 0.22);
}

.rl-why__estimate svg {
    width: 17px;
    height: 17px;

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

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

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


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

.rl-why.is-enhanced
[data-rl-why-reveal] {
    opacity: 0;

    transform:
        translateY(30px)
        scale(0.99);

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

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

.rl-why.is-enhanced
.rl-why-card:nth-child(2) {
    transition-delay: 80ms;
}

.rl-why.is-enhanced
.rl-why-card:nth-child(3) {
    transition-delay: 140ms;
}

.rl-why.is-enhanced
.rl-why-card:nth-child(4) {
    transition-delay: 200ms;
}


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

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

html.rl-reduced-motion
.rl-why__image img,
html.rl-reduced-motion
.rl-why-card,
html.rl-reduced-motion
.rl-why-card__icon,
html.rl-reduced-motion
.rl-why-card__line {
    transition-duration: 0.01ms !important;
}











































/* =====================================================
   RAINLANDSCAPING — CUSTOMER REVIEWS
===================================================== */

.rl-reviews {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(248, 245, 237, 0.94) 0%,
            rgba(243, 247, 244, 0.98) 48%,
            rgba(234, 241, 240, 0.94) 100%
        );
}


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

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

    overflow: hidden;

    pointer-events: none;
}

.rl-reviews__background::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.26;

    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 16%,
            #000 84%,
            transparent
        );

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

.rl-reviews__water-ring {
    position: absolute;

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

    border-radius: 50%;
}

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

    position: absolute;

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

    border-radius: inherit;
}

.rl-reviews__water-ring::before {
    inset: 38px;
}

.rl-reviews__water-ring::after {
    inset: 78px;
}

.rl-reviews__water-ring--one {
    top: 7%;
    right: -210px;

    width: 520px;
    height: 520px;

    opacity: 0.85;

    transform: rotate(-12deg);
}

.rl-reviews__water-ring--two {
    bottom: -240px;
    left: -190px;

    width: 460px;
    height: 460px;

    opacity: 0.62;
}

.rl-reviews__leaf {
    position: absolute;

    width: 112px;
    height: 52px;

    opacity: 0.19;

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

    border-radius:
        100% 0 100% 0;

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

.rl-reviews__leaf::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 7%;

    width: 84%;
    height: 1px;

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

    transform: rotate(-16deg);
    transform-origin: left center;
}

.rl-reviews__leaf--one {
    top: 18%;
    left: 4%;

    transform: rotate(18deg);
}

.rl-reviews__leaf--two {
    right: 6%;
    bottom: 28%;

    transform:
        rotate(127deg)
        scale(0.76);
}

.rl-reviews__leaf--three {
    bottom: 8%;
    left: 19%;

    transform:
        rotate(-34deg)
        scale(0.62);
}

.rl-reviews__lawn-lines {
    position: absolute;
    top: 38%;
    right: -390px;

    width: 920px;
    height: 400px;

    opacity: 0.17;

    border-radius: 50%;

    background:
        repeating-linear-gradient(
            114deg,
            rgba(53, 122, 58, 0.09) 0,
            rgba(53, 122, 58, 0.09) 15px,
            transparent 15px,
            transparent 38px
        );

    transform: rotate(-14deg);
}

.rl-reviews__mulch-texture {
    position: absolute;
    bottom: 5%;
    left: 7%;

    width: 240px;
    height: 160px;

    opacity: 0.25;

    border-radius:
        56% 44% 63% 37% /
        53% 62% 38% 47%;

    background-image:
        radial-gradient(
            ellipse at 15% 20%,
            rgba(200, 115, 71, 0.25) 0 6px,
            transparent 7px
        ),
        radial-gradient(
            ellipse at 61% 45%,
            rgba(229, 166, 60, 0.22) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            ellipse at 80% 76%,
            rgba(53, 122, 58, 0.18) 0 6px,
            transparent 7px
        );

    background-size:
        43px 34px,
        54px 42px,
        49px 37px;

    transform: rotate(-7deg);
}

.rl-reviews__path {
    position: absolute;
    right: -4%;
    bottom: 5%;

    width: 55%;
    height: 300px;

    opacity: 0.16;

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


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

.rl-reviews__header {
    display: grid;

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

    align-items: end;
    gap: clamp(44px, 8vw, 112px);

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

.rl-reviews__heading h2 {
    max-width: 810px;

    margin: 0;

    color: var(--rl-heading);

    font-size:
        clamp(2.8rem, 5.3vw, 5.5rem);
    line-height: 0.97;
    letter-spacing: -0.055em;
}

.rl-reviews__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-reviews__introduction {
    padding-bottom: 6px;
}

.rl-reviews__introduction p {
    margin: 0 0 20px;

    color: var(--rl-text);

    font-size: 0.95rem;
    line-height: 1.75;
}

.rl-reviews__live-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 12px;

    color: var(--rl-green-900);

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

    border:
        1px solid
        var(--rl-border-green);

    border-radius: 12px;

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

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

.rl-reviews__live-dot {
    position: relative;

    width: 8px;
    height: 8px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 4px
        rgba(117, 170, 75, 0.13);
}

.rl-reviews__live-dot::after {
    content: "";

    position: absolute;
    inset: -4px;

    border:
        1px solid
        rgba(117, 170, 75, 0.38);

    border-radius: 50%;

    animation:
        rl-reviews-live-pulse
        2.2s ease-out infinite;
}


/* =====================================================
   TRUST CARDS
===================================================== */

.rl-reviews__trust {
    display: grid;

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

    gap: 16px;

    margin-bottom: 22px;
}

.rl-reviews__trust-card {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 105px;

    padding: 18px;

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

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

    border-radius: 20px;

    box-shadow:
        0 12px 34px
        rgba(3, 39, 60, 0.075);

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

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

.rl-reviews__trust-card:hover {
    border-color:
        rgba(7, 140, 213, 0.22);

    box-shadow:
        0 18px 44px
        rgba(3, 39, 60, 0.11);

    transform: translateY(-5px);
}

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

    width: 47px;
    height: 47px;

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

    background:
        linear-gradient(
            145deg,
            rgba(133, 213, 241, 0.22),
            rgba(117, 170, 75, 0.12)
        );

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

    border-radius: 15px;
}

.rl-reviews__trust-icon svg {
    width: 22px;
    height: 22px;

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

.rl-reviews__trust-card div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rl-reviews__trust-card strong {
    color: var(--rl-heading);

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

.rl-reviews__trust-card div span {
    color: var(--rl-muted);

    font-size: 0.67rem;
    line-height: 1.45;
}


/* =====================================================
   ELFSIGHT WIDGET SHELL
===================================================== */

.rl-reviews__widget-shell {
    position: relative;
    isolation: isolate;

    padding: 26px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(248, 252, 250, 0.82)
        );

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

    border-radius: 30px;

    box-shadow:
        0 28px 75px
        rgba(3, 39, 60, 0.13),
        0 8px 24px
        rgba(18, 75, 38, 0.06);

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

.rl-reviews__widget-shell::before {
    content: "";

    position: absolute;
    top: -130px;
    right: -110px;
    z-index: -1;

    width: 350px;
    height: 350px;

    opacity: 0.42;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(133, 213, 241, 0.28),
            transparent 67%
        );
}

.rl-reviews__widget-shell::after {
    content: "";

    position: absolute;
    bottom: -170px;
    left: -120px;
    z-index: -1;

    width: 390px;
    height: 390px;

    opacity: 0.34;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(117, 170, 75, 0.25),
            transparent 67%
        );
}

.rl-reviews__quote {
    position: absolute;
    top: 11px;
    right: 29px;
    z-index: 0;

    color:
        rgba(7, 140, 213, 0.07);

    font-family: Georgia, serif;
    font-size: 10rem;
    font-weight: 700;
    line-height: 1;

    pointer-events: none;
}


/* =====================================================
   WIDGET HEADER
===================================================== */

.rl-reviews__widget-header {
    position: relative;
    z-index: 2;

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

    margin-bottom: 22px;
    padding-bottom: 21px;

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

.rl-reviews__widget-title {
    display: flex;
    align-items: center;
    gap: 13px;
}

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

    width: 48px;
    height: 48px;

    color: var(--rl-white);

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

    border-radius: 15px;

    box-shadow:
        0 12px 28px
        rgba(7, 140, 213, 0.22);
}

.rl-reviews__widget-icon svg {
    width: 22px;
    height: 22px;

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

.rl-reviews__widget-title div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-reviews__widget-title div span {
    color: var(--rl-blue-700);

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

.rl-reviews__widget-title strong {
    color: var(--rl-heading);

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

.rl-reviews__widget-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 12px;

    background:
        rgba(117, 170, 75, 0.09);

    border:
        1px solid
        rgba(117, 170, 75, 0.14);

    border-radius: 12px;
}

.rl-reviews__widget-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--rl-green-400);
}

.rl-reviews__widget-status p {
    margin: 0;

    color: var(--rl-green-900);

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


/* =====================================================
   WIDGET AREA
===================================================== */

.rl-reviews__widget-area {
    position: relative;

    min-height: 330px;
}

.rl-reviews__widget-area
[data-rl-elfsight-widget] {
    position: relative;
    z-index: 2;

    min-height: 280px;
}


/* =====================================================
   LOADING SKELETON
===================================================== */

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

    display: grid;

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

    gap: 15px;

    transition:
        opacity 400ms ease,
        visibility 400ms ease;
}

.rl-reviews__widget-shell.is-loaded
.rl-reviews__loader {
    visibility: hidden;
    opacity: 0;

    pointer-events: none;
}

.rl-reviews__loader-card {
    display: grid;

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

    align-content: start;
    gap: 12px;

    min-height: 260px;

    padding: 20px;

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

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

    border-radius: 19px;
}

.rl-reviews__loader-circle {
    grid-row: span 2;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            #e3ebe8 25%,
            #f4f8f6 50%,
            #e3ebe8 75%
        );

    background-size: 220% 100%;

    animation:
        rl-reviews-skeleton
        1.5s linear infinite;
}

.rl-reviews__loader-card > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rl-reviews__loader-card > div span {
    height: 8px;

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

    background:
        linear-gradient(
            90deg,
            #e3ebe8 25%,
            #f4f8f6 50%,
            #e3ebe8 75%
        );

    background-size: 220% 100%;

    animation:
        rl-reviews-skeleton
        1.5s linear infinite;
}

.rl-reviews__loader-card > div span:last-child {
    width: 58%;
}

.rl-reviews__loader-stars {
    grid-column: 1 / -1;

    width: 112px;
    height: 10px;

    margin-top: 19px;

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

    background:
        linear-gradient(
            90deg,
            #e3ebe8 25%,
            #f4f8f6 50%,
            #e3ebe8 75%
        );

    background-size: 220% 100%;

    animation:
        rl-reviews-skeleton
        1.5s linear infinite;
}

.rl-reviews__loader-text {
    grid-column: 1 / -1;

    display: block;

    height: 9px;

    margin-top: 10px;

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

    background:
        linear-gradient(
            90deg,
            #e3ebe8 25%,
            #f4f8f6 50%,
            #e3ebe8 75%
        );

    background-size: 220% 100%;

    animation:
        rl-reviews-skeleton
        1.5s linear infinite;
}

.rl-reviews__loader-text--short {
    width: 72%;
}


/* =====================================================
   DELAY MESSAGE
===================================================== */

.rl-reviews__delay-message {
    position: absolute;
    right: 50%;
    bottom: 10px;
    z-index: 3;

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

    visibility: hidden;
    opacity: 0;

    padding: 9px 12px;

    color: var(--rl-muted);

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

    border:
        1px solid
        var(--rl-border);

    border-radius: 11px;

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

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

    transform: translateX(50%);

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

.rl-reviews__widget-shell.has-delay:not(.is-loaded)
.rl-reviews__delay-message {
    visibility: visible;
    opacity: 1;
}

.rl-reviews__delay-message svg {
    width: 16px;
    height: 16px;

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


/* =====================================================
   WIDGET FOOTER
===================================================== */

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

    margin-top: 23px;
    padding-top: 20px;

    border-top:
        1px solid
        rgba(6, 99, 172, 0.1);
}

.rl-reviews__widget-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--rl-muted);

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

.rl-reviews__widget-note svg {
    width: 17px;
    height: 17px;

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

.rl-reviews__gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

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

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

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

.rl-reviews__gallery-link:hover {
    gap: 14px;

    color: var(--rl-green-700);
}

.rl-reviews__gallery-link svg {
    width: 17px;
    height: 17px;

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


/* =====================================================
   LOWER CTA
===================================================== */

.rl-reviews__cta {
    position: relative;
    isolation: isolate;

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

    margin-top: 24px;
    padding: 30px;

    overflow: hidden;

    color: var(--rl-white);

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(72, 183, 229, 0.22),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            #073649 52%,
            var(--rl-green-950)
        );

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

    border-radius: 25px;

    box-shadow:
        0 22px 55px
        rgba(3, 39, 60, 0.18);
}

.rl-reviews__cta-decoration {
    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;
}

.rl-reviews__cta-decoration span {
    position: absolute;

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

    border-radius: 50%;
}

.rl-reviews__cta-decoration span:nth-child(1) {
    top: -120px;
    right: 19%;

    width: 260px;
    height: 260px;
}

.rl-reviews__cta-decoration span:nth-child(2) {
    top: -76px;
    right: 22%;

    width: 180px;
    height: 180px;
}

.rl-reviews__cta-decoration span:nth-child(3) {
    right: 27%;
    bottom: -70px;

    width: 130px;
    height: 130px;
}

.rl-reviews__cta-copy {
    max-width: 650px;
}

.rl-reviews__cta-copy > span {
    display: block;

    margin-bottom: 7px;

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

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

.rl-reviews__cta-copy h3 {
    margin: 0;

    color: var(--rl-white);

    font-size:
        clamp(1.45rem, 2.6vw, 2.25rem);
    line-height: 1.1;
}

.rl-reviews__cta-actions {
    display: flex;
    align-items: center;
    gap: 11px;

    flex: 0 0 auto;
}

.rl-reviews__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 54px;

    padding: 12px 17px;

    color: var(--rl-white);

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

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

    border-radius: 16px;

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

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

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

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

    transform: translateY(-3px);
}

.rl-reviews__call svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.rl-reviews__estimate {
    min-height: 54px;

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

    border: 0;

    box-shadow:
        0 14px 32px
        rgba(7, 140, 213, 0.24);
}

.rl-reviews__estimate svg {
    width: 17px;
    height: 17px;

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

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

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


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

.rl-reviews.is-enhanced
[data-rl-reviews-reveal] {
    opacity: 0;

    transform:
        translateY(30px)
        scale(0.99);

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

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

.rl-reviews.is-enhanced
[data-rl-reviews-reveal="trust"] {
    transition-delay: 80ms;
}

.rl-reviews.is-enhanced
[data-rl-reviews-reveal="widget"] {
    transition-delay: 140ms;
}

.rl-reviews.is-enhanced
[data-rl-reviews-reveal="cta"] {
    transition-delay: 190ms;
}


/* =====================================================
   KEYFRAMES
===================================================== */

@keyframes rl-reviews-live-pulse {

    0% {
        opacity: 0.8;
        transform: scale(0.65);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.75);
    }

}

@keyframes rl-reviews-skeleton {

    from {
        background-position: 220% 0;
    }

    to {
        background-position: -220% 0;
    }

}


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

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

html.rl-reduced-motion
.rl-reviews__live-dot::after,
html.rl-reduced-motion
.rl-reviews__loader-circle,
html.rl-reduced-motion
.rl-reviews__loader-card > div span,
html.rl-reduced-motion
.rl-reviews__loader-stars,
html.rl-reduced-motion
.rl-reviews__loader-text {
    animation: none !important;
}

html.rl-reduced-motion
.rl-reviews__trust-card,
html.rl-reduced-motion
.rl-reviews__gallery-link,
html.rl-reduced-motion
.rl-reviews__call {
    transition-duration: 0.01ms !important;
}









































/* =====================================================
   RAINLANDSCAPING — SERVICE AREAS
===================================================== */

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 13%,
            rgba(133, 213, 241, 0.17),
            transparent 27%
        ),
        radial-gradient(
            circle at 7% 83%,
            rgba(117, 170, 75, 0.13),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(248, 245, 237, 0.97),
            rgba(243, 247, 244, 0.98) 52%,
            rgba(234, 241, 240, 0.95)
        );
}


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

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

    overflow: hidden;

    pointer-events: none;
}

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

    position: absolute;
    inset: 0;

    opacity: 0.24;

    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 14%,
            #000 86%,
            transparent
        );

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

.rl-service-areas__water-shape {
    position: absolute;
    top: -220px;
    right: -170px;

    width: 530px;
    height: 590px;

    opacity: 0.18;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(133, 213, 241, 0.31),
            rgba(7, 140, 213, 0.05)
        );

    transform: rotate(39deg);
}

.rl-service-areas__lawn-lines {
    position: absolute;
    bottom: -210px;
    left: -350px;

    width: 920px;
    height: 470px;

    opacity: 0.16;

    border-radius: 50%;

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

    transform: rotate(-15deg);
}

.rl-service-areas__leaf {
    position: absolute;

    width: 108px;
    height: 51px;

    opacity: 0.2;

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

    border-radius:
        100% 0 100% 0;

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

.rl-service-areas__leaf--one {
    top: 23%;
    left: 4%;

    transform: rotate(19deg);
}

.rl-service-areas__leaf--two {
    right: 7%;
    bottom: 20%;

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

.rl-service-areas__route-line {
    position: absolute;
    top: 39%;
    left: 10%;

    width: 38%;
    height: 210px;

    opacity: 0.14;

    border-top:
        2px dashed
        var(--rl-blue-500);

    border-radius: 50%;

    transform: rotate(9deg);
}


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

.rl-service-areas__header {
    display: grid;

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

    align-items: end;
    gap: clamp(44px, 8vw, 112px);

    margin-bottom:
        clamp(43px, 5vw, 68px);
}

.rl-service-areas__heading h2 {
    max-width: 820px;

    margin: 0;

    color: var(--rl-heading);

    font-size:
        clamp(2.8rem, 5.3vw, 5.5rem);
    line-height: 0.97;
    letter-spacing: -0.055em;
}

.rl-service-areas__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-areas__introduction {
    padding-bottom: 6px;
}

.rl-service-areas__introduction > p {
    margin: 0 0 20px;

    color: var(--rl-text);

    font-size: 0.95rem;
    line-height: 1.75;
}

.rl-service-areas__availability {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 12px;

    color: var(--rl-green-900);

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

    border:
        1px solid
        var(--rl-border-green);

    border-radius: 12px;

    box-shadow: var(--rl-shadow-xs);
}

.rl-service-areas__availability > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 4px
        rgba(117, 170, 75, 0.13);
}

.rl-service-areas__availability p {
    margin: 0;

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


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

.rl-service-areas__layout {
    display: grid;

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

    align-items: stretch;
    gap: 22px;
}


/* =====================================================
   AREA PANEL
===================================================== */

.rl-service-areas__panel {
    display: flex;
    flex-direction: column;

    min-height: 650px;

    padding: 24px;

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

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

    border-radius: 28px;

    box-shadow:
        0 24px 65px
        rgba(3, 39, 60, 0.11),
        0 7px 22px
        rgba(18, 75, 38, 0.05);

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

.rl-service-areas__panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;

    margin-bottom: 19px;
    padding-bottom: 19px;

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

.rl-service-areas__panel-header > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rl-service-areas__panel-header > div > span {
    color: var(--rl-blue-700);

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

.rl-service-areas__panel-header h3 {
    max-width: 320px;

    margin: 0;

    color: var(--rl-heading);

    font-size: 1.28rem;
    line-height: 1.15;
}

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

    width: 46px;
    height: 46px;

    color: var(--rl-white);

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

    border-radius: 15px;

    box-shadow:
        0 11px 28px
        rgba(7, 140, 213, 0.22);

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


/* =====================================================
   AREA LIST
===================================================== */

.rl-service-areas__list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;

    min-height: 0;
    max-height: 450px;

    padding-right: 7px;

    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(6, 99, 172, 0.25)
        transparent;
}

.rl-service-areas__list::-webkit-scrollbar {
    width: 6px;
}

.rl-service-areas__list::-webkit-scrollbar-track {
    background: transparent;
}

.rl-service-areas__list::-webkit-scrollbar-thumb {
    background:
        rgba(6, 99, 172, 0.22);

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

.rl-area-item {
    display: grid;

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

    align-items: center;
    gap: 11px;

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

    padding: 9px 11px;

    color: var(--rl-text);

    text-align: left;

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

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

    border-radius: 15px;

    cursor: pointer;

    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-area-item:hover {
    background: var(--rl-white);

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

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

    transform: translateX(4px);
}

.rl-area-item.is-active {
    color: var(--rl-white);

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

    border-color: transparent;

    box-shadow:
        0 13px 30px
        rgba(6, 99, 172, 0.2);
}

.rl-area-item__number {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

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

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

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

    border-radius: 11px;

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

.rl-area-item.is-active
.rl-area-item__number {
    color: var(--rl-white);

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

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

.rl-area-item__content {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.rl-area-item__content strong {
    overflow: hidden;

    color: var(--rl-heading);

    font-family: var(--rl-font-heading);
    font-size: 0.82rem;
    line-height: 1.1;

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

.rl-area-item__content small {
    overflow: hidden;

    color: var(--rl-muted);

    font-size: 0.59rem;
    font-weight: 600;
    line-height: 1.1;

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

.rl-area-item.is-active
.rl-area-item__content strong,
.rl-area-item.is-active
.rl-area-item__content small {
    color: var(--rl-white);
}

.rl-area-item.is-active
.rl-area-item__content small {
    opacity: 0.68;
}

.rl-area-item__arrow {
    color: var(--rl-green-600);

    font-size: 1rem;

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

.rl-area-item:hover
.rl-area-item__arrow {
    transform: translateX(4px);
}

.rl-area-item.is-active
.rl-area-item__arrow {
    color: var(--rl-green-300);
}


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

.rl-service-areas__panel-actions {
    display: grid;

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

    gap: 9px;

    margin-top: 18px;
    padding-top: 18px;

    border-top:
        1px solid
        rgba(6, 99, 172, 0.1);
}

.rl-service-areas__location-button,
.rl-service-areas__reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 48px;

    padding: 11px 15px;

    border-radius: 14px;

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

    cursor: pointer;

    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-service-areas__location-button {
    color: var(--rl-white);

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

    border: 0;

    box-shadow:
        0 12px 28px
        rgba(7, 140, 213, 0.19);
}

.rl-service-areas__location-button:hover {
    box-shadow:
        0 17px 35px
        rgba(7, 140, 213, 0.26);

    transform: translateY(-2px);
}

.rl-service-areas__location-button.is-loading {
    cursor: wait;
    opacity: 0.75;
}

.rl-service-areas__location-button svg {
    width: 17px;
    height: 17px;

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

.rl-service-areas__reset-button {
    color: var(--rl-blue-900);

    background: var(--rl-white);

    border:
        1px solid
        var(--rl-border);

    box-shadow: var(--rl-shadow-xs);
}

.rl-service-areas__reset-button:hover {
    color: var(--rl-white);
    background: var(--rl-blue-900);
    border-color: var(--rl-blue-900);

    transform: translateY(-2px);
}

.rl-service-areas__panel-note {
    min-height: 32px;

    margin: 11px 2px 0;

    color: var(--rl-muted);

    font-size: 0.59rem;
    line-height: 1.45;
}


/* =====================================================
   MAP CARD
===================================================== */

.rl-service-areas__map-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 650px;

    padding: 18px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.93),
            rgba(245, 250, 248, 0.84)
        );

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

    border-radius: 29px;

    box-shadow:
        0 27px 72px
        rgba(3, 39, 60, 0.13),
        0 8px 25px
        rgba(18, 75, 38, 0.06);
}

.rl-service-areas__map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 4px 4px 17px;
}

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

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

    width: 46px;
    height: 46px;

    color: var(--rl-white);

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

    border-radius: 15px;

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

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

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

.rl-service-areas__map-title > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-service-areas__map-title small {
    color: var(--rl-blue-700);

    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.rl-service-areas__map-title strong {
    color: var(--rl-heading);

    font-family: var(--rl-font-heading);
    font-size: 1.09rem;
    line-height: 1.1;
}

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

    color: var(--rl-muted);

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

.rl-service-areas__map-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rl-service-areas__legend-marker,
.rl-service-areas__legend-location {
    display: block;

    width: 10px;
    height: 10px;

    border-radius: 50%;
}

.rl-service-areas__legend-marker {
    background: var(--rl-blue-700);

    box-shadow:
        0 0 0 4px
        rgba(7, 140, 213, 0.12);
}

.rl-service-areas__legend-location {
    background: var(--rl-amber);

    box-shadow:
        0 0 0 4px
        rgba(229, 166, 60, 0.14);
}


/* =====================================================
   MAP
===================================================== */

.rl-service-areas__map-wrapper {
    position: relative;

    flex: 1 1 auto;

    min-height: 515px;

    overflow: hidden;

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

    border-radius: 22px;

    background: var(--rl-page-bg-alt);

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

.rl-service-areas__map {
    width: 100%;
    height: 100%;
    min-height: 515px;

    background: #dce9e5;
}

.rl-service-areas__map:focus-visible {
    outline:
        3px solid
        var(--rl-blue-300);

    outline-offset: -3px;
}

.rl-service-areas__map-hint {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 500;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 38px;

    padding: 8px 12px;

    color: var(--rl-white);

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

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

    border-radius: 12px;

    box-shadow:
        0 12px 30px
        rgba(2, 26, 51, 0.2);

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

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

    cursor: pointer;

    transform: translateX(-50%);

    transition:
        visibility var(--rl-transition-normal),
        opacity var(--rl-transition-normal),
        transform var(--rl-transition-normal);
}

.rl-service-areas__map-hint.is-hidden {
    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(-8px);
}

.rl-service-areas__map-hint svg {
    width: 16px;
    height: 16px;

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


/* =====================================================
   MAP FOOTER
===================================================== */

.rl-service-areas__map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 15px 4px 3px;
}

.rl-service-areas__map-footer p {
    margin: 0;

    color: var(--rl-muted);

    font-size: 0.58rem;
    line-height: 1.45;
}

.rl-service-areas__map-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;

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

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

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

.rl-service-areas__map-footer a:hover {
    gap: 13px;

    color: var(--rl-green-700);
}

.rl-service-areas__map-footer a svg {
    width: 16px;
    height: 16px;

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


/* =====================================================
   LEAFLET CUSTOMIZATION
===================================================== */

.rl-service-areas
.leaflet-container {
    font-family: var(--rl-font-body);
}

.rl-service-areas
.leaflet-control-zoom {
    overflow: hidden;

    border: 0;

    border-radius: 14px;

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

.rl-service-areas
.leaflet-control-zoom a {
    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

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

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

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

    font-family: var(--rl-font-body);
    font-size: 1.15rem;
    line-height: 1;

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

.rl-service-areas
.leaflet-control-zoom a:hover {
    color: var(--rl-white);
    background: var(--rl-blue-900);
}

.rl-service-areas
.leaflet-control-attribution {
    padding: 4px 7px;

    color: var(--rl-muted);

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

    border-radius: 7px;

    font-size: 9px;

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

.rl-service-areas
.leaflet-control-attribution a {
    color: var(--rl-blue-700);
}

.rl-service-areas
.leaflet-popup-content-wrapper {
    overflow: hidden;

    padding: 0;

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

    border-radius: 18px;

    box-shadow:
        0 20px 55px
        rgba(3, 39, 60, 0.22);
}

.rl-service-areas
.leaflet-popup-content {
    width: 250px !important;

    margin: 0;
}

.rl-service-areas
.leaflet-popup-tip {
    background: var(--rl-white);
}

.rl-map-popup {
    overflow: hidden;

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

.rl-map-popup__header {
    padding: 16px;

    color: var(--rl-white);

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

.rl-map-popup__header span {
    display: block;

    margin-bottom: 5px;

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

    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.rl-map-popup__header strong {
    color: var(--rl-white);

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

.rl-map-popup__body {
    padding: 14px 16px 16px;
}

.rl-map-popup__body p {
    margin: 0 0 13px;

    color: var(--rl-text);

    font-size: 0.68rem;
    line-height: 1.5;
}

.rl-map-popup__actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 7px;
}

.rl-map-popup__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 10px;

    border-radius: 10px;

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

.rl-map-popup__actions a:first-child {
    color: var(--rl-blue-900);

    background: var(--rl-page-bg-alt);

    border:
        1px solid
        var(--rl-border);
}

.rl-map-popup__actions a:last-child {
    color: var(--rl-white);
    background: var(--rl-gradient-brand);
}


/* =====================================================
   CUSTOM MAP MARKERS
===================================================== */

.rl-map-marker {
    position: relative;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
}

.rl-map-marker__pulse {
    position: absolute;
    inset: 4px;

    opacity: 0;

    border:
        2px solid
        rgba(7, 140, 213, 0.45);

    border-radius: 50%;
}

.rl-map-marker__pin {
    position: relative;

    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    color: var(--rl-white);

    background:
        linear-gradient(
            145deg,
            var(--rl-blue-500),
            var(--rl-blue-900) 66%,
            var(--rl-green-700)
        );

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

    border-radius: 50%;

    box-shadow:
        0 10px 22px
        rgba(3, 39, 60, 0.32);

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

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

.rl-map-marker:hover
.rl-map-marker__pin,
.rl-map-marker.is-active
.rl-map-marker__pin {
    transform: scale(1.16);

    box-shadow:
        0 13px 28px
        rgba(3, 39, 60, 0.38),
        0 0 0 7px
        rgba(133, 213, 241, 0.18);
}

.rl-map-marker.is-active
.rl-map-marker__pulse {
    animation:
        rl-map-marker-pulse
        1.8s ease-out infinite;
}

.rl-map-user-marker {
    position: relative;

    width: 22px;
    height: 22px;

    background: var(--rl-amber);

    border:
        4px solid
        var(--rl-white);

    border-radius: 50%;

    box-shadow:
        0 0 0 6px
        rgba(229, 166, 60, 0.2),
        0 9px 22px
        rgba(3, 39, 60, 0.28);
}


/* =====================================================
   LOWER CTA
===================================================== */

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

    margin-top: 24px;
    padding: 25px 28px;

    color: var(--rl-white);

    background:
        radial-gradient(
            circle at 9% 15%,
            rgba(72, 183, 229, 0.21),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            #073649 52%,
            var(--rl-green-950)
        );

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

    border-radius: 23px;

    box-shadow:
        0 21px 53px
        rgba(3, 39, 60, 0.18);
}

.rl-service-areas__cta-copy > span {
    display: block;

    margin-bottom: 5px;

    color: var(--rl-white);

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

.rl-service-areas__cta-copy p {
    margin: 0;

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

    font-size: 0.75rem;
    line-height: 1.55;
}

.rl-service-areas__cta-actions {
    display: flex;
    align-items: center;
    gap: 11px;

    flex: 0 0 auto;
}

.rl-service-areas__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 54px;

    padding: 12px 17px;

    color: var(--rl-white);

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

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

    border-radius: 16px;

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

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

.rl-service-areas__call:hover {
    color: var(--rl-blue-950);
    background: var(--rl-white);

    transform: translateY(-3px);
}

.rl-service-areas__call svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.rl-service-areas__estimate {
    min-height: 54px;

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

    border: 0;

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

.rl-service-areas__estimate svg {
    width: 17px;
    height: 17px;

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

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

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


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

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

    transform:
        translateY(30px)
        scale(0.99);

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

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

.rl-service-areas.is-enhanced
[data-rl-areas-reveal="panel"] {
    transition-delay: 80ms;
}

.rl-service-areas.is-enhanced
[data-rl-areas-reveal="map"] {
    transition-delay: 140ms;
}

.rl-service-areas.is-enhanced
[data-rl-areas-reveal="cta"] {
    transition-delay: 190ms;
}


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

@keyframes rl-map-marker-pulse {

    0% {
        opacity: 0.65;
        transform: scale(0.6);
    }

    100% {
        opacity: 0;
        transform: scale(1.8);
    }

}

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

html.rl-reduced-motion
.rl-map-marker.is-active
.rl-map-marker__pulse {
    animation: none;
}

html.rl-reduced-motion
.rl-area-item,
html.rl-reduced-motion
.rl-map-marker__pin,
html.rl-reduced-motion
.rl-service-areas__location-button,
html.rl-reduced-motion
.rl-service-areas__reset-button {
    transition-duration: 0.01ms !important;
}








































/* =====================================================
   RAINLANDSCAPING — FOOTER
===================================================== */

.rl-footer {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    color: var(--rl-light-text);

    background:
        radial-gradient(
            circle at 88% 5%,
            rgba(7, 140, 213, 0.18),
            transparent 26%
        ),
        radial-gradient(
            circle at 8% 78%,
            rgba(117, 170, 75, 0.15),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #021523 0%,
            var(--rl-blue-950) 42%,
            var(--rl-green-950) 100%
        );
}


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

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

    overflow: hidden;

    pointer-events: none;
}

.rl-footer__background::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.024) 1px,
            transparent 1px
        );

    background-size: 74px 74px;

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

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

.rl-footer__water-shape {
    position: absolute;
    top: -250px;
    right: -180px;

    width: 570px;
    height: 640px;

    opacity: 0.19;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(133, 213, 241, 0.27),
            rgba(7, 140, 213, 0.04)
        );

    transform: rotate(39deg);
}

.rl-footer__lawn-lines {
    position: absolute;
    bottom: -260px;
    left: -390px;

    width: 990px;
    height: 520px;

    opacity: 0.11;

    border-radius: 50%;

    background:
        repeating-linear-gradient(
            112deg,
            rgba(154, 203, 104, 0.23) 0,
            rgba(154, 203, 104, 0.23) 16px,
            transparent 16px,
            transparent 42px
        );

    transform: rotate(-15deg);
}

.rl-footer__leaf {
    position: absolute;

    width: 112px;
    height: 53px;

    opacity: 0.14;

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

    border-radius:
        100% 0 100% 0;

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

.rl-footer__leaf::after {
    content: "";

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

    width: 83%;
    height: 1px;

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

    transform: rotate(-16deg);
}

.rl-footer__leaf--one {
    top: 46%;
    left: 4%;

    transform: rotate(18deg);
}

.rl-footer__leaf--two {
    right: 7%;
    bottom: 20%;

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

.rl-footer__water-ring {
    position: absolute;

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

    border-radius: 50%;
}

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

    position: absolute;

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

    border-radius: inherit;
}

.rl-footer__water-ring::before {
    inset: 33px;
}

.rl-footer__water-ring::after {
    inset: 70px;
}

.rl-footer__water-ring--one {
    top: 33%;
    right: -210px;

    width: 430px;
    height: 430px;
}

.rl-footer__water-ring--two {
    bottom: -230px;
    left: 24%;

    width: 390px;
    height: 390px;
}


/* =====================================================
   TOP CTA
===================================================== */

.rl-footer__cta {
    display: grid;

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

    align-items: center;
    gap: clamp(40px, 7vw, 105px);

    margin-bottom: 68px;
    padding: 38px;

    overflow: hidden;

    color: var(--rl-white);

    background:
        radial-gradient(
            circle at 7% 12%,
            rgba(72, 183, 229, 0.2),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.095),
            rgba(255, 255, 255, 0.04)
        );

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

    border-radius: 30px;

    box-shadow:
        0 28px 75px
        rgba(0, 10, 20, 0.27),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

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

.rl-footer__cta-copy {
    max-width: 740px;
}

.rl-footer__cta-copy > span {
    display: block;

    margin-bottom: 10px;

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

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

.rl-footer__cta-copy h2 {
    margin: 0;

    color: var(--rl-white);

    font-size:
        clamp(2rem, 3.8vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.rl-footer__cta-copy p {
    max-width: 650px;

    margin: 17px 0 0;

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

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

.rl-footer__cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    flex: 0 0 auto;
}

.rl-footer__call-button {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 58px;

    padding: 8px 15px 8px 8px;

    color: var(--rl-white);

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

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

    border-radius: 17px;

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

.rl-footer__call-button:hover {
    color: var(--rl-blue-950);
    background: var(--rl-white);

    transform: translateY(-3px);
}

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

    width: 41px;
    height: 41px;

    color: var(--rl-white);

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

    border-radius: 13px;
}

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

    fill: currentColor;
}

.rl-footer__call-button > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rl-footer__call-button small {
    color:
        rgba(255, 255, 255, 0.56);

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

.rl-footer__call-button:hover small {
    color: var(--rl-muted);
}

.rl-footer__call-button strong {
    font-size: 0.8rem;
    line-height: 1;
}

.rl-footer__estimate-button {
    min-height: 58px;

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

    border: 0;

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

.rl-footer__estimate-button svg {
    width: 17px;
    height: 17px;

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

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

.rl-footer__estimate-button:hover svg {
    transform: translateX(5px);
}


/* =====================================================
   FOOTER STRUCTURE
===================================================== */

.rl-footer > .rl-container {
    padding-top:
        clamp(75px, 8vw, 115px);
    padding-bottom:
        clamp(65px, 7vw, 95px);
}

.rl-footer__content {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.25fr)
        minmax(170px, 0.67fr)
        minmax(205px, 0.85fr)
        minmax(230px, 0.9fr);

    align-items: start;
    gap: clamp(35px, 5vw, 74px);
}


/* =====================================================
   BRAND COLUMN
===================================================== */

.rl-footer__brand-column {
    max-width: 380px;
}

.rl-footer__brand {
    display: flex;
    align-items: center;

    width: 230px;
    height: 88px;

    margin-bottom: 22px;
    overflow: hidden;

    border-radius: 17px;

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

.rl-footer__brand:hover {
    transform: translateY(-3px);
}

.rl-footer__brand img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: left center;
}

.rl-footer__description {
    margin: 0 0 27px;

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

    font-size: 0.78rem;
    line-height: 1.72;
}

.rl-footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rl-footer__contact-list > a,
.rl-footer__contact-item {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 54px;

    padding: 8px 11px;

    color: var(--rl-white);

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

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

    border-radius: 14px;

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

.rl-footer__contact-list > a:hover {
    background:
        rgba(255, 255, 255, 0.085);

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

    transform: translateX(4px);
}

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

    width: 35px;
    height: 35px;

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

    background:
        rgba(7, 140, 213, 0.12);

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

    border-radius: 11px;
}

.rl-footer__contact-icon svg {
    width: 16px;
    height: 16px;

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

.rl-footer__contact-list > a > span:last-child,
.rl-footer__contact-item > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.rl-footer__contact-list small {
    color:
        rgba(255, 255, 255, 0.43);

    font-size: 0.54rem;
    font-weight: 700;
    line-height: 1;
}

.rl-footer__contact-list strong {
    overflow-wrap: anywhere;

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

    font-size: 0.67rem;
    line-height: 1.25;
}


/* =====================================================
   COLUMN HEADINGS
===================================================== */

.rl-footer__column-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 24px;
}

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

    width: 37px;
    height: 37px;

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

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

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

    border-radius: 12px;
}

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

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

.rl-footer__column-heading h3 {
    margin: 0;

    color: var(--rl-white);

    font-size: 1rem;
    line-height: 1;
    letter-spacing: -0.02em;
}


/* =====================================================
   FOOTER LINKS
===================================================== */

.rl-footer__links {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.rl-footer__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    min-height: 38px;

    padding: 5px 0;

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

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

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

    transition:
        color var(--rl-transition-fast),
        padding var(--rl-transition-normal),
        border-color var(--rl-transition-fast);
}

.rl-footer__links a:hover {
    padding-left: 7px;

    color: var(--rl-white);

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

.rl-footer__links i {
    color: var(--rl-green-300);

    font-size: 0.9rem;
    font-style: normal;

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

.rl-footer__links a:hover i {
    transform: translateX(4px);
}

.rl-footer__service-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-top: 20px;
    padding: 12px;

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

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

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

    border-radius: 12px;

    font-size: 0.59rem;
    line-height: 1.5;
}

.rl-footer__service-note svg {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;

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


/* =====================================================
   SOCIAL MEDIA
===================================================== */

.rl-footer__social-description {
    margin: 0 0 18px;

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

    font-size: 0.69rem;
    line-height: 1.6;
}

.rl-footer__social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rl-footer__social-links > a {
    display: grid;

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

    align-items: center;
    gap: 11px;

    min-height: 63px;

    padding: 9px 12px 9px 9px;

    color: var(--rl-white);

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

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

    border-radius: 15px;

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

.rl-footer__social-links > a:hover {
    background:
        rgba(255, 255, 255, 0.095);

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

    box-shadow:
        0 14px 30px
        rgba(0, 11, 21, 0.16);

    transform: translateY(-4px);
}

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

    width: 43px;
    height: 43px;

    color: var(--rl-white);

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

    border-radius: 13px;

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

.rl-footer__social-icon svg {
    width: 20px;
    height: 20px;

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

.rl-footer__social-icon
.rl-footer__social-fill {
    fill: currentColor;
    stroke: none;
}

.rl-footer__social-links > a:nth-child(2)
.rl-footer__social-icon svg {
    fill: currentColor;
    stroke: none;
}

.rl-footer__social-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-footer__social-name small {
    color:
        rgba(255, 255, 255, 0.42);

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

.rl-footer__social-name strong {
    font-size: 0.76rem;
    line-height: 1;
}

.rl-footer__social-links i {
    color: var(--rl-green-300);

    font-size: 0.95rem;
    font-style: normal;

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

.rl-footer__social-links > a:hover i {
    transform:
        translate(3px, -3px);
}


/* =====================================================
   BACK TO TOP
===================================================== */

.rl-footer__back-to-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

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

    margin-top: 18px;
    padding: 11px 13px;

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

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

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

    border-radius: 14px;

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

    cursor: pointer;

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

.rl-footer__back-to-top:hover {
    color: var(--rl-blue-950);
    background: var(--rl-white);
    border-color: var(--rl-white);

    transform: translateY(-3px);
}

.rl-footer__back-to-top svg {
    width: 17px;
    height: 17px;

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

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

.rl-footer__back-to-top:hover svg {
    transform: translateY(-4px);
}


/* =====================================================
   FOOTER BOTTOM
===================================================== */

.rl-footer__bottom {
    position: relative;

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

    background:
        rgba(0, 8, 15, 0.28);

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

.rl-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    min-height: 74px;

    padding-block: 15px;
}

.rl-footer__copyright {
    margin: 0;

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

    font-size: 0.64rem;
    line-height: 1.4;
}

.rl-footer__powered {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 11px;

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

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

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

    border-radius: 10px;

    font-size: 0.61rem;
    line-height: 1;

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

.rl-footer__powered strong {
    color: var(--rl-blue-200);

    font-weight: 800;
}

.rl-footer__powered svg {
    width: 14px;
    height: 14px;

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

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

.rl-footer__powered:hover {
    color: var(--rl-white);

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

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

    transform: translateY(-2px);
}

.rl-footer__powered:hover svg {
    transform:
        translate(2px, -2px);
}


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

.rl-footer.is-enhanced
[data-rl-footer-reveal] {
    opacity: 0;

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

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

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

.rl-footer.is-enhanced
.rl-footer__content
[data-rl-footer-reveal]:nth-child(2) {
    transition-delay: 70ms;
}

.rl-footer.is-enhanced
.rl-footer__content
[data-rl-footer-reveal]:nth-child(3) {
    transition-delay: 130ms;
}

.rl-footer.is-enhanced
.rl-footer__content
[data-rl-footer-reveal]:nth-child(4) {
    transition-delay: 190ms;
}


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

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

html.rl-reduced-motion
.rl-footer__social-links > a,
html.rl-reduced-motion
.rl-footer__links a,
html.rl-reduced-motion
.rl-footer__back-to-top,
html.rl-reduced-motion
.rl-footer__powered {
    transition-duration: 0.01ms !important;
}













































/* =====================================================
   RESPONSIVE 1 — COMPUTADORAS
===================================================== */

@media (max-width: 1399px) {
      .rl-footer__cta {
        gap: 55px;

        padding: 34px;
    }

    .rl-footer__content {
        grid-template-columns:
            minmax(260px, 1.16fr)
            minmax(155px, 0.65fr)
            minmax(190px, 0.82fr)
            minmax(215px, 0.88fr);

        gap: 44px;
    }

    .rl-footer__brand {
        width: 215px;
    }

       .rl-service-areas__header {
        gap: 70px;
    }

    .rl-service-areas__layout {
        grid-template-columns:
            minmax(300px, 0.7fr)
            minmax(0, 1.3fr);

        gap: 19px;
    }

    .rl-service-areas__panel,
    .rl-service-areas__map-card {
        min-height: 625px;
    }

    .rl-service-areas__list {
        max-height: 430px;
    }

    .rl-service-areas__map-wrapper,
    .rl-service-areas__map {
        min-height: 492px;
    }
     .rl-reviews__header {
        gap: 70px;
    }

    .rl-reviews__widget-shell {
        padding: 24px;
    }

    .rl-reviews__quote {
        right: 24px;

        font-size: 8.5rem;
    }

    .rl-reviews__cta {
        gap: 35px;
    }
     .rl-why__header {
        gap: 70px;
    }

    .rl-why__layout {
        grid-template-columns:
            minmax(330px, 0.82fr)
            minmax(0, 1.18fr);

        gap: 20px;
    }

    .rl-why__visual {
        min-height: 610px;
    }

    .rl-why__benefits {
        gap: 16px;
    }

    .rl-why-card {
        min-height: 295px;

        padding: 24px;
    }
     .rl-main-services__header {
        gap: 65px;
    }

    .rl-main-services__grid {
        gap: 20px;
    }

    .rl-service-card__link {
        min-height: 445px;
    }

    .rl-service-card--compact
    .rl-service-card__link {
        min-height: 415px;
    }

    .rl-service-card__content {
        padding: 29px;
    }

    .rl-service-card__top {
        top: 19px;
        right: 19px;
        left: 19px;
    }

      .rl-hero {
        padding-right:
            clamp(24px, 4vw, 58px);

        padding-left:
            clamp(24px, 4vw, 58px);
    }

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

    .rl-hero__title {
        font-size:
            clamp(3.1rem, 6vw, 5.9rem);
    }

    .rl-hero__services {
        left:
            clamp(32px, 4vw, 58px);

        max-width:
            calc(100% - 420px);
    }

    .rl-hero__carousel-controls {
        right:
            clamp(32px, 4vw, 58px);
    }
     :root {
        --rl-nav-height: 80px;
        --rl-nav-top: 14px;
    }

    .rl-nav {
        gap: 20px;

        width:
            min(
                calc(100% - 30px),
                1260px
            );

        padding-left: 16px;
    }

    .rl-nav__brand {
        width: 174px;
        min-width: 174px;
    }

    .rl-nav__desktop {
        gap: clamp(15px, 1.7vw, 25px);
    }

    .rl-nav__link {
        font-size: 0.84rem;
    }

    .rl-nav__phone {
        font-size: 0.78rem;
    }

    .rl-nav__estimate {
        min-width: 145px;
        padding-inline: 18px;
    }

    :root {
        --rl-container: 1160px;
        --rl-container-wide: 1280px;
    }

    .rl-bg-water {
        right: -150px;
        width: 400px;
        height: 460px;
    }

    .rl-bg-mowing {
        left: -330px;
    }

}


/* =====================================================
   RESPONSIVE 2 — TABLETS
===================================================== */

@media (max-width: 1024px) {
      .rl-footer__cta {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 28px;

        margin-bottom: 55px;
    }

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

        gap: 52px 42px;
    }

    .rl-footer__brand-column {
        max-width: none;
    }

    .rl-footer__cta-actions {
        width: 100%;
    }

    .rl-footer__call-button,
    .rl-footer__estimate-button {
        flex: 1 1 0;
    }
      .rl-service-areas__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 25px;
    }

    .rl-service-areas__introduction {
        display: grid;

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

        align-items: end;
        gap: 28px;
    }

    .rl-service-areas__introduction > p {
        max-width: 650px;
        margin-bottom: 0;
    }

    .rl-service-areas__layout {
        grid-template-columns: 1fr;
    }

    .rl-service-areas__panel {
        min-height: auto;
    }

    .rl-service-areas__list {
        display: grid;

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

        max-height: 380px;
    }

    .rl-service-areas__map-card {
        min-height: 580px;
    }

    .rl-service-areas__map-wrapper,
    .rl-service-areas__map {
        min-height: 450px;
    }

     .rl-reviews__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 25px;
    }

    .rl-reviews__introduction {
        display: grid;

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

        align-items: end;
        gap: 28px;
    }

    .rl-reviews__introduction p {
        max-width: 650px;
        margin-bottom: 0;
    }

    .rl-reviews__trust {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .rl-reviews__trust-card:last-child {
        grid-column: 1 / -1;
    }

    .rl-reviews__loader {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .rl-reviews__loader-card:last-child {
        display: none;
    }

    .rl-reviews__cta {
        align-items: flex-start;
        flex-direction: column;
    }
     .rl-why__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 25px;
    }

    .rl-why__introduction {
        display: grid;

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

        align-items: end;
        gap: 30px;
    }

    .rl-why__introduction p {
        max-width: 650px;
        margin-bottom: 0;
    }

    .rl-why__layout {
        grid-template-columns: 1fr;
    }

    .rl-why__visual {
        min-height: 520px;

        border-radius: 28px;
    }

    .rl-why__image img {
        object-position: center 60%;
    }

    .rl-why__benefits {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .rl-why-card {
        min-height: 280px;
    }

    .rl-why__cta {
        align-items: flex-start;
    }
        .rl-main-services__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 26px;
    }

    .rl-main-services__intro {
        display: grid;

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

        align-items: end;
        gap: 30px;

        max-width: none;
    }

    .rl-main-services__intro p {
        max-width: 650px;
        margin-bottom: 0;
    }

    .rl-service-card--wide,
    .rl-service-card--compact {
        grid-column: span 6;
    }

    .rl-service-card__link,
    .rl-service-card--compact
    .rl-service-card__link {
        min-height: 420px;

        border-radius: 26px;
    }

    .rl-service-card__content {
        grid-template-columns: 1fr;
        gap: 20px;

        padding: 27px;
    }

    .rl-service-card__arrow {
        position: absolute;
        right: 27px;
        bottom: 27px;

        width: 52px;
        height: 52px;

        border-radius: 16px;
    }

    .rl-service-card__text {
        padding-right: 66px;
    }

    .rl-service-card__text h3,
    .rl-service-card--compact
    .rl-service-card__text h3 {
        font-size:
            clamp(1.65rem, 3.5vw, 2.15rem);
    }
      .rl-hero {
        padding:
            calc(
                var(--rl-nav-safe-area) + 13px
            )
            34px
            106px;
    }

    .rl-hero__media {
        inset: 6px;

        border-radius: 29px;
    }

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

    .rl-hero__title {
        font-size:
            clamp(3.1rem, 7.8vw, 5.2rem);
    }

    .rl-hero__description {
        max-width: 580px;
    }

    .rl-hero__services {
        bottom: 25px;
        left: 34px;

        display: block;

        max-width:
            calc(100% - 395px);
    }

    .rl-hero__services-label {
        display: block;

        margin-bottom: 8px;
    }

    .rl-hero__services-list {
        gap: 8px;
    }

    .rl-hero__services-list span {
        font-size: 0.64rem;
    }

    .rl-hero__carousel-controls {
        right: 34px;
        bottom: 22px;
    }

    :root {
        --rl-nav-height: 76px;
        --rl-nav-top: 12px;
    }

    .rl-nav {
        gap: 14px;

        width:
            calc(100% - 24px);

        padding:
            8px 10px 8px 15px;

        border-radius: 21px;
    }

    .rl-nav__brand {
        width: 150px;
        min-width: 150px;
        height: 54px;
    }

    .rl-nav__desktop {
        gap: 15px;
    }

    .rl-nav__link {
        font-size: 0.76rem;
    }

    .rl-nav__phone {
        display: none;
    }

    .rl-nav__estimate {
        min-width: 137px;
        min-height: 49px;

        padding-inline: 16px;

        font-size: 0.82rem;
    }


    :root {
        --rl-header-offset: 86px;

        --rl-section-space:
            clamp(74px, 10vw, 104px);

        --rl-side-space:
            clamp(20px, 4vw, 42px);

        --rl-radius-xl: 28px;
        --rl-radius-2xl: 36px;
    }

    body {
        font-size: 15.5px;
    }

    .rl-bg-water {
        top: -160px;
        right: -180px;

        opacity: 0.21;
    }

    .rl-bg-mowing {
        left: -460px;

        opacity: 0.35;
    }

    .rl-bg-hedges {
        right: -300px;

        opacity: 0.28;
    }

    .rl-bg-leaves {
        right: 8%;
    }

}


/* =====================================================
   RESPONSIVE 3 — CELULARES
===================================================== */

@media (max-width: 767px) {
     .rl-footer__water-shape {
        right: -370px;

        opacity: 0.14;
    }

    .rl-footer__lawn-lines {
        left: -690px;

        opacity: 0.08;
    }

    .rl-footer__leaf,
    .rl-footer__water-ring {
        display: none;
    }

    .rl-footer > .rl-container {
        padding-top: 70px;
        padding-bottom: 65px;
    }

    .rl-footer__cta {
        gap: 24px;

        margin-bottom: 48px;
        padding: 27px;

        border-radius: 25px;
    }

    .rl-footer__cta-copy h2 {
        font-size:
            clamp(1.85rem, 7vw, 2.8rem);
    }

    .rl-footer__cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .rl-footer__call-button,
    .rl-footer__estimate-button {
        width: 100%;
    }

    .rl-footer__content {
        grid-template-columns: 1fr;
        gap: 43px;
    }

    .rl-footer__brand-column {
        max-width: 500px;
    }

    .rl-footer__brand {
        width: 210px;
    }

    .rl-footer__column-heading {
        margin-bottom: 18px;
    }

    .rl-footer__social-links {
        display: grid;

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

    .rl-footer__back-to-top {
        max-width: 330px;
    }

    .rl-footer__bottom-inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 12px;

        min-height: 94px;

        padding-block: 19px;
    }
     .rl-service-areas__water-shape {
        right: -340px;

        opacity: 0.14;
    }

    .rl-service-areas__lawn-lines {
        left: -610px;

        opacity: 0.11;
    }

    .rl-service-areas__leaf,
    .rl-service-areas__route-line {
        display: none;
    }

    .rl-service-areas__header {
        margin-bottom: 36px;
    }

    .rl-service-areas__heading h2 {
        font-size:
            clamp(2.45rem, 10vw, 3.8rem);
    }

    .rl-service-areas__introduction {
        display: block;
    }

    .rl-service-areas__introduction > p {
        margin-bottom: 17px;

        font-size: 0.89rem;
        line-height: 1.67;
    }

    .rl-service-areas__panel {
        padding: 19px;

        border-radius: 23px;
    }

    .rl-service-areas__list {
        grid-template-columns: 1fr;

        max-height: 420px;
    }

    .rl-area-item {
        min-height: 58px;
    }

    .rl-service-areas__map-card {
        min-height: 535px;

        padding: 14px;

        border-radius: 24px;
    }

    .rl-service-areas__map-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .rl-service-areas__map-wrapper,
    .rl-service-areas__map {
        min-height: 390px;
    }

    .rl-service-areas__map-legend {
        width: 100%;
    }

    .rl-service-areas__map-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .rl-service-areas__map-hint {
        display: none;
    }

    .rl-service-areas__cta {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;

        padding: 22px;

        border-radius: 20px;
    }

    .rl-service-areas__cta-actions {
        width: 100%;
    }

    .rl-service-areas__call,
    .rl-service-areas__estimate {
        flex: 1 1 0;
    }

     .rl-reviews__water-ring--one {
        right: -360px;

        opacity: 0.58;
    }

    .rl-reviews__water-ring--two {
        left: -320px;

        opacity: 0.46;
    }

    .rl-reviews__leaf {
        display: none;
    }

    .rl-reviews__lawn-lines {
        right: -650px;

        opacity: 0.12;
    }

    .rl-reviews__mulch-texture {
        left: -90px;

        opacity: 0.19;
    }

    .rl-reviews__path {
        width: 90%;

        opacity: 0.11;
    }

    .rl-reviews__header {
        margin-bottom: 36px;
    }

    .rl-reviews__heading h2 {
        font-size:
            clamp(2.45rem, 10vw, 3.8rem);
    }

    .rl-reviews__introduction {
        display: block;
    }

    .rl-reviews__introduction p {
        margin-bottom: 17px;

        font-size: 0.89rem;
        line-height: 1.67;
    }

    .rl-reviews__trust {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rl-reviews__trust-card:last-child {
        grid-column: auto;
    }

    .rl-reviews__trust-card {
        min-height: 96px;

        border-radius: 18px;
    }

    .rl-reviews__widget-shell {
        padding: 19px;

        border-radius: 25px;
    }

    .rl-reviews__quote {
        top: 5px;
        right: 15px;

        font-size: 6.8rem;
    }

    .rl-reviews__widget-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .rl-reviews__widget-status {
        padding: 8px 10px;
    }

    .rl-reviews__loader {
        grid-template-columns: 1fr;
    }

    .rl-reviews__loader-card {
        min-height: 240px;
    }

    .rl-reviews__loader-card:nth-child(2),
    .rl-reviews__loader-card:nth-child(3) {
        display: none;
    }

    .rl-reviews__widget-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .rl-reviews__cta {
        gap: 22px;

        padding: 23px;

        border-radius: 22px;
    }

    .rl-reviews__cta-actions {
        width: 100%;
    }

    .rl-reviews__call,
    .rl-reviews__estimate {
        flex: 1 1 0;
    }
     .rl-why__water-shape {
        right: -340px;

        opacity: 0.16;
    }

    .rl-why__lawn-lines {
        left: -580px;

        opacity: 0.11;
    }

    .rl-why__floating-leaf {
        display: none;
    }

    .rl-why__header {
        margin-bottom: 38px;
    }

    .rl-why__heading h2 {
        font-size:
            clamp(2.45rem, 10vw, 3.8rem);
    }

    .rl-why__introduction {
        display: block;
    }

    .rl-why__introduction p {
        margin-bottom: 18px;

        font-size: 0.89rem;
        line-height: 1.68;
    }

    .rl-why__visual {
        min-height: 500px;

        border-radius: 25px;
    }

    .rl-why__visual-label {
        top: 16px;
        left: 16px;
    }

    .rl-why__visual-card {
        right: 16px;
        bottom: 16px;
        left: 16px;

        padding: 20px;

        border-radius: 19px;
    }

    .rl-why__benefits {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .rl-why-card {
        min-height: auto;

        padding: 23px;

        border-radius: 22px;
    }

    .rl-why-card__top {
        margin-bottom: 24px;
    }

    .rl-why-card h3 {
        margin-top: 0;
    }

    .rl-why__cta {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;

        padding: 22px;

        border-radius: 20px;
    }

    .rl-why__cta-actions {
        width: 100%;
    }

    .rl-why__call,
    .rl-why__estimate {
        flex: 1 1 0;
    }

     .rl-main-services__drop {
        top: 4%;
        right: -250px;

        opacity: 0.14;
    }

    .rl-main-services__lines {
        right: -520px;

        opacity: 0.15;
    }

    .rl-main-services__header {
        margin-bottom: 37px;
    }

    .rl-main-services__heading h2 {
        font-size:
            clamp(2.45rem, 10vw, 3.8rem);
    }

    .rl-main-services__intro {
        display: block;
    }

    .rl-main-services__intro p {
        margin-bottom: 18px;

        font-size: 0.9rem;
        line-height: 1.68;
    }

    .rl-main-services__grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .rl-service-card--wide,
    .rl-service-card--compact {
        grid-column: auto;
    }

    .rl-service-card__link,
    .rl-service-card--compact
    .rl-service-card__link {
        min-height: 430px;

        border-radius: 24px;
    }

    .rl-service-card__top {
        top: 16px;
        right: 16px;
        left: 16px;
    }

    .rl-service-card__number {
        width: 42px;
        height: 42px;

        border-radius: 13px;
    }

    .rl-service-card__category {
        padding: 8px 10px;

        font-size: 0.57rem;
    }

    .rl-service-card__content {
        padding: 24px;
    }

    .rl-service-card__text {
        padding-right: 57px;
    }

    .rl-service-card__text h3,
    .rl-service-card--compact
    .rl-service-card__text h3 {
        font-size:
            clamp(1.75rem, 7vw, 2.25rem);
    }

    .rl-service-card__text p {
        font-size: 0.79rem;
        line-height: 1.57;
    }

    .rl-service-card__tags {
        gap: 5px;

        margin-top: 14px;
    }

    .rl-service-card__tags span {
        padding: 6px 8px;

        font-size: 0.56rem;
    }

    .rl-service-card__arrow {
        right: 23px;
        bottom: 23px;

        width: 48px;
        height: 48px;
    }

    .rl-main-services__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;

        margin-top: 25px;
        padding: 22px;

        border-radius: 20px;
    }

    .rl-main-services__estimate {
        width: 100%;
    }
      .rl-hero {
        align-items: flex-start;

        padding:
            calc(
                var(--rl-nav-safe-area) + 17px
            )
            24px
            91px;
    }

    .rl-hero__media {
        inset: 5px;

        border-radius: 25px;
    }

    .rl-hero__slide img {
        object-position: 62% center;
    }

    .rl-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2, 18, 32, 0.91) 0%,
                rgba(2, 26, 51, 0.72) 65%,
                rgba(2, 26, 51, 0.41) 100%
            ),
            linear-gradient(
                180deg,
                rgba(2, 26, 51, 0.32) 0%,
                rgba(2, 20, 34, 0.18) 45%,
                rgba(2, 20, 34, 0.72) 100%
            );
    }

    .rl-hero__container {
        align-items: center;
    }

    .rl-hero__content {
        width: 100%;
        padding-top: 0;
    }

    .rl-hero__eyebrow {
        min-height: 36px;

        margin-bottom:
            clamp(15px, 2.5vh, 21px);

        padding:
            6px 11px 6px 7px;

        font-size: 0.61rem;
        letter-spacing: 0.075em;
    }

    .rl-hero__eyebrow-icon {
        width: 24px;
        height: 24px;
    }

    .rl-hero__title {
        max-width: 590px;

        font-size:
            clamp(2.85rem, 11.5vw, 4.6rem);
        line-height: 0.94;
        letter-spacing: -0.052em;
    }

    .rl-hero__description {
        max-width: 540px;

        margin-top:
            clamp(16px, 2.8vh, 23px);

        font-size: 0.91rem;
        line-height: 1.58;
    }

    .rl-hero__actions {
        gap: 10px;

        margin-top:
            clamp(19px, 3vh, 27px);
    }

    .rl-hero__primary {
        min-height: 52px;

        padding-inline: 19px;

        border-radius: 15px;

        font-size: 0.8rem;
    }

    .rl-hero__call {
        min-height: 52px;

        padding:
            6px 12px 6px 7px;

        border-radius: 15px;
    }

    .rl-hero__call-icon {
        width: 37px;
        height: 37px;

        border-radius: 11px;
    }

    .rl-hero__call-text small {
        font-size: 0.56rem;
    }

    .rl-hero__call-text strong {
        font-size: 0.76rem;
    }

    .rl-hero__trust {
        gap: 10px;

        margin-top:
            clamp(17px, 2.7vh, 24px);
    }

    .rl-hero__trust-item {
        font-size: 0.65rem;
    }

    .rl-hero__trust-divider {
        height: 13px;
    }

    .rl-hero__trust-item:last-child,
    .rl-hero__trust-divider:last-of-type {
        display: none;
    }

    .rl-hero__services {
        right: 19px;
        bottom: 61px;
        left: 19px;

        max-width: none;
    }

    .rl-hero__services-label {
        display: none;
    }

    .rl-hero__services-list {
        justify-content: center;
        gap: 7px;
    }

    .rl-hero__services-list span {
        font-size: 0.58rem;
    }

    .rl-hero__services-list i {
        width: 3px;
        height: 3px;
    }

    .rl-hero__carousel-controls {
        right: 50%;
        bottom: 13px;

        padding: 5px;

        transform: translateX(50%);
    }

    .rl-hero__arrow {
        width: 35px;
        height: 35px;

        border-radius: 10px;
    }

    .rl-hero__counter {
        display: none;
    }

       :root {
        --rl-nav-height: 70px;
        --rl-nav-top: 8px;
    }

    .rl-hero {
        padding-top:
            calc(
                var(--rl-nav-safe-area) +
                16px
            );
    }

    .rl-site-header {
        /*
         * Se mantiene fixed.
         * Nunca cambia a sticky.
         */
        position: fixed;
    }

    .rl-nav {
        grid-template-columns:
            48px minmax(0, 1fr) auto;

        gap: 8px;

        width:
            calc(100% - 16px);

        padding: 7px 8px;

        overflow: visible;

        border-radius: 20px;
    }

    .rl-nav__toggle {
        display: block;
        justify-self: start;
    }

    .rl-nav__brand {
        grid-column: 2;

        justify-self: center;

        width: 132px;
        min-width: 0;
        height: 56px;

        border-radius: 13px;
    }

    .rl-nav__desktop {
        display: none;
    }

    .rl-nav__actions {
        grid-column: 3;

        justify-self: end;
    }

    .rl-nav__phone {
        display: none;
    }

    .rl-nav__estimate {
        min-width: 116px;
        min-height: 48px;

        padding: 11px 14px;

        border-radius: 14px;

        font-size: 0.75rem;
        white-space: nowrap;
    }

    .rl-nav__estimate svg {
        width: 16px;
        height: 16px;
    }

    .rl-nav__overlay {
        display: block;
    }

    .rl-mobile-menu {
        display: flex;
    }

    :root {
        --rl-header-offset: 76px;

        --rl-section-space:
            clamp(64px, 15vw, 84px);

        --rl-side-space: 20px;

        --rl-radius-sm: 12px;
        --rl-radius-md: 16px;
        --rl-radius-lg: 20px;
        --rl-radius-xl: 24px;
        --rl-radius-2xl: 30px;
    }

    body {
        font-size: 15px;
        line-height: 1.65;
    }

    .rl-btn {
        min-height: 54px;
        padding-inline: 22px;
    }

    .rl-site-background::after {
        background-size: 42px 42px;
        opacity: 0.22;
    }

    .rl-bg-water {
        top: -170px;
        right: -210px;

        width: 350px;
        height: 410px;

        opacity: 0.2;
    }

    .rl-bg-mowing {
        top: 37%;
        left: -520px;

        width: 730px;
        height: 320px;

        opacity: 0.28;
    }

    .rl-bg-hedges {
        right: -350px;
        bottom: 4%;

        opacity: 0.22;
    }

    .rl-bg-mulch {
        left: -50px;
        bottom: 15%;

        opacity: 0.25;
    }

    .rl-bg-leaves {
        display: none;
    }

    .rl-page-transition__brand {
        flex-direction: column;
        gap: 12px;

        text-align: center;
    }

    .rl-page-transition__brand div {
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }

}


/* =====================================================
   RESPONSIVE 4 — CELULARES PEQUEÑOS
===================================================== */

@media (max-width: 479px) {
     .rl-footer > .rl-container {
        padding-top: 58px;
        padding-bottom: 54px;
    }

    .rl-footer__cta {
        padding: 21px;

        border-radius: 21px;
    }

    .rl-footer__cta-copy > span {
        font-size: 0.58rem;
    }

    .rl-footer__cta-copy h2 {
        font-size:
            clamp(1.65rem, 8.8vw, 2.25rem);
    }

    .rl-footer__cta-copy p {
        font-size: 0.75rem;
    }

    .rl-footer__call-button,
    .rl-footer__estimate-button {
        min-height: 54px;
    }

    .rl-footer__brand {
        width: 190px;
        height: 76px;
    }

    .rl-footer__description {
        font-size: 0.71rem;
    }

    .rl-footer__contact-list > a,
    .rl-footer__contact-item {
        min-height: 51px;
    }

    .rl-footer__links a {
        min-height: 37px;

        font-size: 0.67rem;
    }

    .rl-footer__social-links {
        grid-template-columns: 1fr;
    }

    .rl-footer__social-links > a {
        min-height: 59px;
    }

    .rl-footer__back-to-top {
        max-width: none;
    }

    .rl-footer__bottom-inner {
        align-items: stretch;
    }

    .rl-footer__copyright {
        font-size: 0.58rem;
        text-align: center;
    }

    .rl-footer__powered {
        justify-content: center;

        width: 100%;

        padding: 10px;

        font-size: 0.56rem;
    }
     .rl-service-areas__header {
        margin-bottom: 29px;
    }

    .rl-service-areas__heading h2 {
        font-size:
            clamp(2.15rem, 11.5vw, 3rem);
    }

    .rl-service-areas__introduction > p {
        font-size: 0.82rem;
    }

    .rl-service-areas__availability {
        font-size: 0.6rem;
    }

    .rl-service-areas__panel {
        padding: 15px;

        border-radius: 20px;
    }

    .rl-service-areas__panel-header h3 {
        font-size: 1.08rem;
    }

    .rl-service-areas__count {
        width: 42px;
        height: 42px;

        border-radius: 13px;
    }

    .rl-area-item {
        grid-template-columns:
            31px minmax(0, 1fr) auto;

        min-height: 55px;

        padding: 8px 9px;

        border-radius: 13px;
    }

    .rl-area-item__number {
        width: 31px;
        height: 31px;

        border-radius: 10px;
    }

    .rl-area-item__content strong {
        font-size: 0.76rem;
    }

    .rl-area-item__content small {
        font-size: 0.54rem;
    }

    .rl-service-areas__panel-actions {
        grid-template-columns: 1fr;
    }

    .rl-service-areas__map-card {
        min-height: 490px;

        padding: 11px;

        border-radius: 20px;
    }

    .rl-service-areas__map-title strong {
        font-size: 0.96rem;
    }

    .rl-service-areas__map-legend {
        flex-wrap: wrap;
    }

    .rl-service-areas__map-wrapper,
    .rl-service-areas__map {
        min-height: 350px;

        border-radius: 17px;
    }

    .rl-service-areas__map-footer p {
        font-size: 0.53rem;
    }

    .rl-service-areas__cta {
        padding: 19px;
    }

    .rl-service-areas__cta-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .rl-service-areas__call,
    .rl-service-areas__estimate {
        width: 100%;
    }

    .rl-reviews__header {
        margin-bottom: 29px;
    }

    .rl-reviews__heading h2 {
        font-size:
            clamp(2.15rem, 11.5vw, 3rem);
    }

    .rl-reviews__introduction p {
        font-size: 0.82rem;
    }

    .rl-reviews__live-label {
        font-size: 0.6rem;
    }

    .rl-reviews__trust-card {
        gap: 12px;

        min-height: 90px;

        padding: 15px;

        border-radius: 16px;
    }

    .rl-reviews__trust-icon {
        width: 42px;
        height: 42px;

        border-radius: 13px;
    }

    .rl-reviews__trust-card strong {
        font-size: 0.84rem;
    }

    .rl-reviews__trust-card div span {
        font-size: 0.61rem;
    }

    .rl-reviews__widget-shell {
        padding: 15px;

        border-radius: 21px;
    }

    .rl-reviews__widget-title {
        gap: 10px;
    }

    .rl-reviews__widget-icon {
        width: 43px;
        height: 43px;

        border-radius: 13px;
    }

    .rl-reviews__widget-title strong {
        font-size: 1rem;
    }

    .rl-reviews__widget-title div span {
        font-size: 0.55rem;
    }

    .rl-reviews__widget-area {
        min-height: 300px;
    }

    .rl-reviews__widget-note {
        align-items: flex-start;

        font-size: 0.58rem;
        line-height: 1.4;
    }

    .rl-reviews__gallery-link {
        font-size: 0.65rem;
    }

    .rl-reviews__cta {
        padding: 19px;
    }

    .rl-reviews__cta-copy h3 {
        font-size: 1.35rem;
    }

    .rl-reviews__cta-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .rl-reviews__call,
    .rl-reviews__estimate {
        width: 100%;
    }
      .rl-why__header {
        margin-bottom: 30px;
    }

    .rl-why__heading h2 {
        font-size:
            clamp(2.15rem, 11.5vw, 3rem);
    }

    .rl-why__introduction p {
        font-size: 0.82rem;
    }

    .rl-why__location {
        align-items: flex-start;

        font-size: 0.67rem;
        line-height: 1.4;
    }

    .rl-why__visual {
        min-height: 440px;

        border-radius: 22px;
    }

    .rl-why__visual-label {
        right: 13px;
        left: 13px;

        width: fit-content;
        max-width:
            calc(100% - 26px);

        font-size: 0.61rem;
    }

    .rl-why__visual-card {
        right: 13px;
        bottom: 13px;
        left: 13px;

        padding: 17px;

        border-radius: 17px;
    }

    .rl-why__visual-card strong {
        font-size: 1.14rem;
    }

    .rl-why__visual-services {
        gap: 5px;

        margin-top: 13px;
    }

    .rl-why__visual-services span {
        padding: 6px 8px;

        font-size: 0.52rem;
    }

    .rl-why-card {
        padding: 20px;

        border-radius: 20px;
    }

    .rl-why-card__icon {
        width: 43px;
        height: 43px;

        border-radius: 13px;
    }

    .rl-why-card h3 {
        font-size: 1.32rem;
    }

    .rl-why-card p {
        font-size: 0.73rem;
        line-height: 1.58;
    }

    .rl-why__cta {
        padding: 19px;
    }

    .rl-why__cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .rl-why__call,
    .rl-why__estimate {
        width: 100%;
    }

      .rl-main-services__header {
        margin-bottom: 30px;
    }

    .rl-main-services__heading h2 {
        font-size:
            clamp(2.15rem, 11.5vw, 3rem);
    }

    .rl-main-services__intro p {
        font-size: 0.83rem;
    }

    .rl-service-card__link,
    .rl-service-card--compact
    .rl-service-card__link {
        min-height: 400px;

        border-radius: 21px;
    }

    .rl-service-card__top {
        top: 13px;
        right: 13px;
        left: 13px;
    }

    .rl-service-card__number {
        width: 39px;
        height: 39px;

        font-size: 0.65rem;
    }

    .rl-service-card__category {
        max-width: 165px;

        overflow: hidden;

        font-size: 0.52rem;

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

    .rl-service-card__content {
        padding: 20px;
    }

    .rl-service-card__text {
        padding-right: 49px;
    }

    .rl-service-card__text h3,
    .rl-service-card--compact
    .rl-service-card__text h3 {
        margin-bottom: 9px;

        font-size:
            clamp(1.55rem, 8.2vw, 2rem);
    }

    .rl-service-card__text p {
        display: -webkit-box;

        overflow: hidden;

        font-size: 0.73rem;
        line-height: 1.5;

        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .rl-service-card__tags span:nth-child(3) {
        display: none;
    }

    .rl-service-card__arrow {
        right: 18px;
        bottom: 18px;

        width: 44px;
        height: 44px;

        border-radius: 14px;
    }

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

    .rl-main-services__footer {
        padding: 19px;
    }

    .rl-main-services__footer-text > span {
        font-size: 0.93rem;
    }

    .rl-main-services__footer-text p {
        font-size: 0.71rem;
    }

     .rl-hero {
        padding:
            calc(
                var(--rl-nav-safe-area) + 10px
            )
            18px
            83px;
    }

    .rl-hero__media {
        inset: 4px;

        border-radius: 22px;
    }

    .rl-hero__eyebrow {
        max-width: 100%;

        margin-bottom: 14px;

        font-size: 0.55rem;
    }

    .rl-hero__eyebrow > span:last-child {
        overflow: hidden;

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

    .rl-hero__title {
        font-size:
            clamp(2.38rem, 12.4vw, 3.3rem);
        line-height: 0.96;
    }

    .rl-hero__description {
        margin-top: 14px;

        font-size: 0.82rem;
        line-height: 1.5;
    }

    .rl-hero__actions {
        display: grid;

        grid-template-columns:
            minmax(0, 1.22fr)
            minmax(0, 0.78fr);

        gap: 8px;

        margin-top: 18px;
    }

    .rl-hero__primary {
        width: 100%;
        min-height: 49px;

        padding-inline: 13px;

        font-size: 0.7rem;
    }

    .rl-hero__primary svg {
        width: 15px;
        height: 15px;
    }

    .rl-hero__call {
        justify-content: center;

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

        padding: 6px;
    }

    .rl-hero__call-icon {
        width: 35px;
        height: 35px;
    }

    .rl-hero__call-text {
        display: none;
    }

    .rl-hero__trust {
        gap: 8px;

        margin-top: 15px;
    }

    .rl-hero__trust-item {
        font-size: 0.58rem;
    }

    .rl-hero__trust-item svg {
        width: 14px;
        height: 14px;
    }

    .rl-hero__trust-divider {
        height: 12px;
    }

    .rl-hero__services {
        bottom: 55px;
    }

    .rl-hero__services-list {
        row-gap: 4px;
    }

    .rl-hero__services-list span {
        font-size: 0.52rem;
    }

    .rl-hero__services-list span:nth-of-type(4),
    .rl-hero__services-list i:nth-of-type(3) {
        display: none;
    }

    .rl-hero__carousel-controls {
        bottom: 10px;

        gap: 7px;
    }

    .rl-hero__arrow {
        width: 32px;
        height: 32px;
    }

    .rl-hero__dot {
        width: 26px;
        height: 7px;
    }
      :root {
        --rl-nav-height: 66px;
        --rl-nav-top: 7px;
    }

    .rl-nav {
        grid-template-columns:
            44px minmax(0, 1fr) auto;

        gap: 5px;

        width:
            calc(100% - 12px);

        padding: 6px;

        border-radius: 18px;
    }

    .rl-nav__toggle {
        width: 44px;
        height: 44px;

        border-radius: 13px;
    }

    .rl-nav__brand {
        width: 196px;
        height: 52px;
    }

    .rl-nav__estimate {
        min-width: 103px;
        min-height: 44px;

        padding: 10px 11px;

        border-radius: 13px;

        font-size: 0.68rem;
    }

    .rl-nav__estimate svg {
        display: none;
    }

    .rl-mobile-menu {
        top:
            calc(
                var(--rl-nav-top) +
                var(--rl-nav-height) +
                7px
            );

        right: 6px;
        left: 6px;

        max-height:
            calc(
                100dvh -
                var(--rl-nav-top) -
                var(--rl-nav-height) -
                14px
            );

        padding: 18px;

        border-radius: 23px;

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

    .rl-site-header.is-menu-open
    .rl-mobile-menu {
        clip-path:
            inset(
                0 0 0 0
                round 23px
            );
    }

    .rl-mobile-menu__header {
        padding-bottom: 15px;
    }

    .rl-mobile-menu__header strong {
        font-size: 1rem;
    }

    .rl-mobile-menu__link {
        min-height: 51px;

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

        font-size: 0.9rem;
    }

    .rl-mobile-menu__services {
        padding: 13px;
    }

    .rl-mobile-menu__footer {
        grid-template-columns: 1fr;
    }

    .rl-mobile-menu__socials {
        flex-direction: row;
        gap: 18px;

        padding-left: 3px;
    }

    :root {
        --rl-header-offset: 70px;
        --rl-side-space: 16px;

        --rl-radius-lg: 18px;
        --rl-radius-xl: 22px;
        --rl-radius-2xl: 26px;
    }

    body {
        font-size: 14.5px;
    }

    h1 {
        font-size:
            clamp(2.35rem, 13vw, 3.4rem);
    }

    h2 {
        font-size:
            clamp(2rem, 10vw, 2.8rem);
    }

    .rl-btn {
        min-height: 52px;
        padding: 13px 19px;
        border-radius: 15px;
    }

    .rl-bg-water {
        right: -235px;

        opacity: 0.17;
    }

    .rl-bg-mowing {
        left: -570px;

        opacity: 0.22;
    }

    .rl-bg-mulch {
        left: -100px;

        opacity: 0.2;
    }

    .rl-page-transition__drop {
        width: 25px;
        height: 33px;
    }

}



















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

    .rl-main-services__header {
        gap: 48px;
    }

    .rl-main-services__grid {
        gap: 20px;
    }

    .rl-service-card__link {
        min-height: 445px;
    }

    .rl-service-card--compact
    .rl-service-card__link {
        min-height: 425px;
    }

    .rl-service-card__content {
        padding: 30px;
    }

    .rl-service-card--long-title
    .rl-service-card__text h3 {
        font-size:
            clamp(1.4rem, 2vw, 1.95rem);
    }

}


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

    .rl-main-services__header {
        grid-template-columns: 1fr;

        align-items: start;
        gap: 25px;
    }

    .rl-main-services__intro {
        max-width: 720px;
    }

    .rl-service-card--wide,
    .rl-service-card--compact {
        grid-column: span 6;
    }

    .rl-service-card__link,
    .rl-service-card--compact
    .rl-service-card__link {
        min-height: 430px;
    }

    .rl-service-card__content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .rl-service-card__arrow {
        width: 52px;
        height: 52px;
    }

    .rl-service-card--long-title
    .rl-service-card__text h3 {
        font-size:
            clamp(1.35rem, 2.7vw, 1.85rem);
    }

    .rl-main-services__footer {
        align-items: flex-start;
    }

}


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

    .rl-main-services__header {
        margin-bottom: 38px;
    }

    .rl-main-services__heading h2 {
        font-size:
            clamp(2.45rem, 11vw, 3.8rem);
    }

    .rl-main-services__intro p {
        font-size: 0.86rem;
    }

    .rl-main-services__grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .rl-service-card--wide,
    .rl-service-card--compact {
        grid-column: 1 / -1;
    }

    .rl-service-card__link,
    .rl-service-card--compact
    .rl-service-card__link {
        min-height: 430px;

        border-radius: 24px;
    }

    .rl-service-card__top {
        top: 17px;
        right: 17px;
        left: 17px;
    }

    .rl-service-card__content {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 17px;

        padding: 25px;
    }

    .rl-service-card__text h3,
    .rl-service-card--compact
    .rl-service-card__text h3,
    .rl-service-card--long-title
    .rl-service-card__text h3 {
        font-size:
            clamp(1.65rem, 7.5vw, 2.3rem);
    }

    .rl-service-card__text p {
        font-size: 0.78rem;
    }

    .rl-service-card__arrow {
        width: 49px;
        height: 49px;

        border-radius: 15px;
    }

    .rl-main-services__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }

    .rl-main-services__estimate {
        width: 100%;
    }

}


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

    .rl-main-services__heading h2 {
        font-size:
            clamp(2.15rem, 12vw, 3rem);
    }

    .rl-service-card__link,
    .rl-service-card--compact
    .rl-service-card__link {
        min-height: 400px;

        border-radius: 21px;
    }

    .rl-service-card__category {
        max-width: 190px;

        overflow: hidden;

        font-size: 0.52rem;

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

    .rl-service-card__number {
        width: 41px;
        height: 41px;

        border-radius: 12px;
    }

    .rl-service-card__content {
        grid-template-columns: 1fr;
        gap: 17px;

        padding: 22px;
    }

    .rl-service-card__text h3,
    .rl-service-card--compact
    .rl-service-card__text h3,
    .rl-service-card--long-title
    .rl-service-card__text h3 {
        font-size:
            clamp(1.45rem, 8.2vw, 2rem);

        line-height: 1.04;
    }

    .rl-service-card__text p {
        font-size: 0.73rem;
        line-height: 1.55;
    }

    .rl-service-card__tags {
        margin-top: 13px;
    }

    .rl-service-card__tags span {
        padding: 6px 8px;

        font-size: 0.54rem;
    }

    .rl-service-card__arrow {
        width: 45px;
        height: 45px;
    }

    .rl-main-services__footer {
        padding: 20px;

        border-radius: 19px;
    }

}