/* =====================================================
   RAINLANDSCAPING — CONTACT HERO
===================================================== */

.rl-contact-hero {
    --rl-contact-pointer-x: 74%;
    --rl-contact-pointer-y: 42%;

    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(82px, 10vh, 112px);

    overflow: hidden;

    color: var(--rl-white);

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


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

.rl-contact-hero__media {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    z-index: -3;

    width: 48%;

    overflow: hidden;

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

    border-radius:
        32px 32px 32px 110px;

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

.rl-contact-hero__media img {
    width: 100%;
    height: 100%;

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

    opacity: 0;

    transform: scale(1.045);

    filter:
        saturate(0.94)
        contrast(1.03);

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

.rl-contact-hero.is-image-loaded
.rl-contact-hero__media img {
    opacity: 1;
    transform: scale(1);
}

.rl-contact-hero__image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 26, 51, 0.94) 0%,
            rgba(2, 26, 51, 0.56) 31%,
            rgba(2, 26, 51, 0.15) 72%,
            rgba(2, 26, 51, 0.07) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2, 26, 51, 0.22),
            transparent 42%,
            rgba(2, 20, 34, 0.5)
        );
}

.rl-contact-hero__image-light {
    position: absolute;
    inset: 0;

    opacity: 0.85;

    background:
        radial-gradient(
            circle 320px
            at
            var(--rl-contact-pointer-x)
            var(--rl-contact-pointer-y),
            rgba(133, 213, 241, 0.2),
            transparent 68%
        );

    pointer-events: none;
}


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

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

    overflow: hidden;

    pointer-events: none;
}

.rl-contact-hero__background::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.17;

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

    mask-image:
        linear-gradient(
            90deg,
            #000,
            rgba(0, 0, 0, 0.6) 48%,
            transparent 78%
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000,
            rgba(0, 0, 0, 0.6) 48%,
            transparent 78%
        );
}

.rl-contact-hero__water-shape {
    position: absolute;
    top: -270px;
    left: -190px;

    width: 570px;
    height: 630px;

    opacity: 0.16;

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

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

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

    transform: rotate(41deg);
}

.rl-contact-hero__lawn-lines {
    position: absolute;
    bottom: -270px;
    left: 14%;

    width: 850px;
    height: 430px;

    opacity: 0.09;

    border-radius: 50%;

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

    transform: rotate(-13deg);
}

.rl-contact-hero__leaf {
    position: absolute;

    width: 98px;
    height: 46px;

    opacity: 0.13;

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

    border-radius:
        100% 0 100% 0;

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

.rl-contact-hero__leaf--one {
    top: 31%;
    left: 4%;

    transform: rotate(23deg);
}

.rl-contact-hero__leaf--two {
    right: 5%;
    bottom: 17%;

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


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

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

    display: grid;

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

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

    width: 100%;
    height: 100%;
}


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

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

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

    min-height: 38px;

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

    padding: 6px 13px 6px 7px;

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

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

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

    border-radius: 13px;

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

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

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

    width: 26px;
    height: 26px;

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

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

    border-radius: 9px;
}

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

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

.rl-contact-hero__title {
    max-width: 750px;

    margin: 0;

    color: var(--rl-white);

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

    text-wrap: balance;
}

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

    color: transparent;

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

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

.rl-contact-hero__description {
    max-width: 620px;

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

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

    font-size:
        clamp(0.92rem, 1.25vw, 1.04rem);
    line-height: 1.68;

    text-wrap: pretty;
}


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

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

    margin-top:
        clamp(22px, 3.3vh, 32px);
}

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

    padding-inline: 24px;

    color: var(--rl-white);

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

    border: 0;
    border-radius: 17px;

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

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

.rl-contact-hero__call {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 57px;

    padding: 7px 14px 7px 8px;

    color: var(--rl-white);

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

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

    border-radius: 17px;

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

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

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

    transform: translateY(-3px);
}

.rl-contact-hero__call-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    color: var(--rl-white);

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

    border-radius: 13px;
}

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

    fill: currentColor;
}

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

.rl-contact-hero__call-copy small {
    color:
        rgba(255, 255, 255, 0.53);

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

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

.rl-contact-hero__call-copy strong {
    font-size: 0.78rem;
    line-height: 1;
}


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

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

    margin-top:
        clamp(21px, 3vh, 30px);
}

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

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

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

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

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

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

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


/* =====================================================
   ESTIMATE PREVIEW CARD
===================================================== */

.rl-contact-hero__estimate-card {
    position: relative;
    z-index: 3;

    width: min(100%, 410px);

    margin-left: auto;
    padding: 23px;

    color: var(--rl-white);

    background:
        linear-gradient(
            145deg,
            rgba(3, 27, 42, 0.78),
            rgba(8, 48, 41, 0.64)
        );

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

    border-radius: 25px;

    box-shadow:
        0 28px 75px
        rgba(0, 11, 21, 0.3),
        inset 0 1px 0
        rgba(255, 255, 255, 0.08);

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

.rl-contact-hero__estimate-card::before {
    content: "";

    position: absolute;
    top: -75px;
    right: -65px;

    width: 180px;
    height: 180px;

    opacity: 0.32;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(133, 213, 241, 0.24),
            transparent 68%
        );

    pointer-events: none;
}

.rl-contact-hero__estimate-header {
    position: relative;

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

    padding-bottom: 18px;

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

.rl-contact-hero__estimate-icon {
    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 12px 28px
        rgba(7, 140, 213, 0.22);
}

.rl-contact-hero__estimate-icon svg {
    width: 21px;
    height: 21px;

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

.rl-contact-hero__estimate-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rl-contact-hero__estimate-header small {
    color: var(--rl-blue-200);

    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.rl-contact-hero__estimate-header strong {
    color: var(--rl-white);

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


/* =====================================================
   SERVICE LIST
===================================================== */

.rl-contact-hero__service-list {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding-block: 16px;
}

.rl-contact-hero__service {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 54px;

    padding: 8px 10px;

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

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

    border-radius: 14px;

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

.rl-contact-hero__service:hover {
    background:
        rgba(255, 255, 255, 0.095);

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

    transform: translateX(4px);
}

.rl-contact-hero__service-check {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 31px;
    height: 31px;

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

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

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

    border-radius: 10px;
}

.rl-contact-hero__service-check svg {
    width: 15px;
    height: 15px;

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

.rl-contact-hero__service > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-contact-hero__service strong {
    color:
        rgba(255, 255, 255, 0.88);

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

.rl-contact-hero__service small {
    color:
        rgba(255, 255, 255, 0.45);

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


/* =====================================================
   ESTIMATE CARD FOOTER
===================================================== */

.rl-contact-hero__estimate-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding-top: 16px;

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

.rl-contact-hero__estimate-footer > div {
    display: flex;
    align-items: center;
    gap: 7px;

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

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

.rl-contact-hero__status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

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

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

.rl-contact-hero__estimate-footer > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;

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

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

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

.rl-contact-hero__estimate-footer > a:hover {
    gap: 11px;

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

.rl-contact-hero__estimate-footer > a svg {
    width: 15px;
    height: 15px;

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


/* =====================================================
   BOTTOM STRIP
===================================================== */

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

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

    min-height: 51px;

    padding: 8px 11px 8px 16px;

    color: var(--rl-white);

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

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

    border-radius: 16px;

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

.rl-contact-hero__email,
.rl-contact-hero__service-area {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

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

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

.rl-contact-hero__email:hover,
.rl-contact-hero__service-area:hover {
    color: var(--rl-white);
}

.rl-contact-hero__email svg,
.rl-contact-hero__service-area svg {
    width: 16px;
    height: 16px;

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

.rl-contact-hero__service-area svg {
    transition:
        transform var(--rl-transition-normal);
}

.rl-contact-hero__service-area:hover svg {
    transform: translateX(4px);
}


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

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

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

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

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

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

.rl-contact-hero.is-ready
[data-rl-contact-hero-card] {
    animation:
        rl-contact-card-enter
        850ms
        var(--rl-ease-smooth)
        170ms
        both;
}

@keyframes rl-contact-hero-enter {

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

    to {
        opacity: 1;
        transform: none;
    }

}

@keyframes rl-contact-card-enter {

    from {
        opacity: 0;
        transform:
            translateX(26px)
            scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }

}


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

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

html.rl-reduced-motion
.rl-contact-hero__media img,
html.rl-reduced-motion
.rl-contact-hero__service,
html.rl-reduced-motion
.rl-contact-hero__primary svg {
    transition-duration: 0.01ms !important;
}







































/* =====================================================
   RAINLANDSCAPING — MAIN CONTACT SECTION
===================================================== */

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 91% 8%,
            rgba(133, 213, 241, 0.18),
            transparent 26%
        ),
        radial-gradient(
            circle at 6% 88%,
            rgba(117, 170, 75, 0.14),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(248, 245, 237, 0.98),
            rgba(243, 247, 244, 0.98) 51%,
            rgba(234, 241, 240, 0.96)
        );
}


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

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

    overflow: hidden;

    pointer-events: none;
}

.rl-contact-main__background::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.22;

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

    background-size: 72px 72px;

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

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

.rl-contact-main__water-shape {
    position: absolute;
    top: -220px;
    right: -190px;

    width: 540px;
    height: 600px;

    opacity: 0.18;

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

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

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

    transform: rotate(39deg);
}

.rl-contact-main__water-ring {
    position: absolute;
    top: 44%;
    left: -190px;

    width: 430px;
    height: 430px;

    opacity: 0.54;

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

    border-radius: 50%;
}

.rl-contact-main__water-ring::before,
.rl-contact-main__water-ring::after {
    content: "";

    position: absolute;

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

    border-radius: inherit;
}

.rl-contact-main__water-ring::before {
    inset: 42px;
}

.rl-contact-main__water-ring::after {
    inset: 88px;
}

.rl-contact-main__lawn-lines {
    position: absolute;
    right: -410px;
    bottom: -220px;

    width: 940px;
    height: 480px;

    opacity: 0.14;

    border-radius: 50%;

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

    transform: rotate(-14deg);
}

.rl-contact-main__leaf {
    position: absolute;

    width: 112px;
    height: 53px;

    opacity: 0.18;

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

    border-radius:
        100% 0 100% 0;

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

.rl-contact-main__leaf::after {
    content: "";

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

    width: 83%;
    height: 1px;

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

    transform: rotate(-16deg);
}

.rl-contact-main__leaf--one {
    top: 18%;
    left: 4%;

    transform: rotate(18deg);
}

.rl-contact-main__leaf--two {
    right: 5%;
    bottom: 28%;

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

.rl-contact-main__mulch {
    position: absolute;
    bottom: 7%;
    left: 8%;

    width: 230px;
    height: 145px;

    opacity: 0.2;

    border-radius:
        58% 42% 65% 35% /
        54% 61% 39% 46%;

    background-image:
        radial-gradient(
            ellipse at 16% 22%,
            rgba(200, 115, 71, 0.24) 0 6px,
            transparent 7px
        ),
        radial-gradient(
            ellipse at 62% 44%,
            rgba(229, 166, 60, 0.21) 0 5px,
            transparent 6px
        ),
        radial-gradient(
            ellipse at 82% 76%,
            rgba(53, 122, 58, 0.16) 0 6px,
            transparent 7px
        );

    background-size:
        43px 34px,
        54px 42px,
        49px 37px;

    transform: rotate(-7deg);
}

.rl-contact-main__route {
    position: absolute;
    top: 34%;
    right: 7%;

    width: 31%;
    height: 170px;

    opacity: 0.13;

    border-top:
        2px dashed
        var(--rl-blue-500);

    border-radius: 50%;

    transform: rotate(9deg);
}


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

.rl-contact-main__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(44px, 5vw, 68px);
}

.rl-contact-main__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-contact-main__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-contact-main__introduction {
    padding-bottom: 6px;
}

.rl-contact-main__introduction > p {
    margin: 0 0 20px;

    color: var(--rl-text);

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

.rl-contact-main__intro-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;

    padding: 10px 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.64rem;
    font-weight: 700;
    line-height: 1.45;
}

.rl-contact-main__intro-note svg {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

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


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

.rl-contact-main__layout {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.68fr)
        minmax(0, 1.32fr);

    align-items: start;
    gap: 22px;
}


/* =====================================================
   SIDEBAR
===================================================== */

.rl-contact-main__sidebar {
    position: sticky;
    top:
        calc(
            var(--rl-nav-height) +
            var(--rl-nav-top) +
            24px
        );

    padding: 27px;

    overflow: hidden;

    color: var(--rl-white);

    background:
        radial-gradient(
            circle at 8% 7%,
            rgba(72, 183, 229, 0.2),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            var(--rl-blue-950),
            #063448 52%,
            var(--rl-green-950)
        );

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

    border-radius: 28px;

    box-shadow:
        0 27px 70px
        rgba(3, 39, 60, 0.2);

    /*
     * Este sticky solo se utiliza en escritorio.
     * Se elimina completamente en tablet y móvil.
     */
}

.rl-contact-main__sidebar::before {
    content: "";

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

    width: 280px;
    height: 280px;

    opacity: 0.35;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(133, 213, 241, 0.25),
            transparent 67%
        );

    pointer-events: none;
}

.rl-contact-main__sidebar-top {
    position: relative;

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

    padding-bottom: 21px;

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

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

    width: 49px;
    height: 49px;

    color: var(--rl-white);

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

    border-radius: 16px;

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

.rl-contact-main__sidebar-icon svg {
    width: 22px;
    height: 22px;

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

.rl-contact-main__sidebar-top > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rl-contact-main__sidebar-top small {
    color: var(--rl-blue-200);

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

.rl-contact-main__sidebar-top h3 {
    margin: 0;

    color: var(--rl-white);

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

.rl-contact-main__sidebar-description {
    margin: 20px 0;

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

    font-size: 0.72rem;
    line-height: 1.6;
}


/* =====================================================
   LIVE SUMMARY
===================================================== */

.rl-contact-main__summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rl-contact-main__summary-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    min-height: 58px;

    padding: 12px;

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

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

    border-radius: 14px;
}

.rl-contact-main__summary-label {
    flex: 0 0 auto;

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

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

.rl-contact-main__summary-item strong {
    color:
        rgba(255, 255, 255, 0.83);

    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: right;
}


/* =====================================================
   SIDEBAR TIPS
===================================================== */

.rl-contact-main__tips {
    margin-top: 19px;
    padding: 18px;

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

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

    border-radius: 17px;
}

.rl-contact-main__tips > span {
    display: block;

    margin-bottom: 12px;

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

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

.rl-contact-main__tips ul {
    display: flex;
    flex-direction: column;
    gap: 9px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.rl-contact-main__tips li {
    position: relative;

    padding-left: 18px;

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

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

.rl-contact-main__tips li::before {
    content: "";

    position: absolute;
    top: 0.45em;
    left: 0;

    width: 7px;
    height: 7px;

    border-radius: 50%;

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

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


/* =====================================================
   DIRECT CONTACT
===================================================== */

.rl-contact-main__direct {
    margin-top: 18px;
    padding-top: 18px;

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

.rl-contact-main__direct > span {
    display: block;

    margin-bottom: 10px;

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

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

.rl-contact-main__direct > a {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 57px;

    padding: 9px 11px;

    color: var(--rl-white);

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

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

    border-radius: 15px;

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

.rl-contact-main__direct > a:hover {
    background:
        rgba(255, 255, 255, 0.11);

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

    transform: translateY(-3px);
}

.rl-contact-main__direct > a > svg {
    width: 20px;
    height: 20px;

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

.rl-contact-main__direct > a > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-contact-main__direct small {
    color:
        rgba(255, 255, 255, 0.44);

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

.rl-contact-main__direct strong {
    color: var(--rl-white);

    font-size: 0.75rem;
}


/* =====================================================
   FORM CARD
===================================================== */

.rl-contact-main__form-card {
    min-width: 0;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.95),
            rgba(247, 251, 249, 0.9)
        );

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

    border-radius: 30px;

    box-shadow:
        0 30px 80px
        rgba(3, 39, 60, 0.13),
        0 8px 24px
        rgba(18, 75, 38, 0.055);

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


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

.rl-contact-main__progress {
    margin-bottom: 29px;
    padding: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(133, 213, 241, 0.13),
            rgba(117, 170, 75, 0.09)
        );

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

    border-radius: 18px;
}

.rl-contact-main__progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 12px;
}

.rl-contact-main__progress-copy > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-contact-main__progress-copy > div span {
    color: var(--rl-blue-700);

    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rl-contact-main__progress-copy strong {
    color: var(--rl-heading);

    font-size: 0.83rem;
}

.rl-contact-main__progress-copy > span {
    color: var(--rl-green-700);

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

.rl-contact-main__progress-track {
    height: 8px;

    overflow: hidden;

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

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

.rl-contact-main__progress-track > span {
    display: block;

    width: 0%;
    height: 100%;

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

    border-radius: inherit;

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


/* =====================================================
   FORM GROUPS
===================================================== */

.rl-estimate-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.rl-estimate-form__group {
    min-width: 0;

    margin: 0;
    padding: 0 0 28px;

    border: 0;
    border-bottom:
        1px solid
        rgba(6, 99, 172, 0.1);
}

.rl-estimate-form__group:last-of-type {
    padding-bottom: 0;

    border-bottom: 0;
}

.rl-estimate-form__group legend {
    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;
    margin-bottom: 20px;
    padding: 0;

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

.rl-estimate-form__group legend > span:first-child {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    color: var(--rl-white);

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

    border-radius: 12px;

    box-shadow:
        0 10px 24px
        rgba(7, 140, 213, 0.18);

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

.rl-estimate-form__group legend > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;

    font-family: var(--rl-font-heading);
    font-size: 1.07rem;
    font-weight: 700;
    line-height: 1.1;
}

.rl-estimate-form__group legend small {
    color: var(--rl-blue-700);

    font-family: var(--rl-font-body);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rl-estimate-form__group-description {
    margin: -10px 0 16px 49px;

    color: var(--rl-muted);

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

.rl-estimate-form__fields {
    display: grid;

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

    gap: 17px;
}


/* =====================================================
   FORM FIELDS
===================================================== */

.rl-estimate-field {
    min-width: 0;
}

.rl-estimate-field--full {
    grid-column: 1 / -1;
}

.rl-estimate-field > label,
.rl-estimate-field__label-row label {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 8px;

    color: var(--rl-heading);

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

.rl-estimate-field > label > span,
.rl-estimate-field__label-row label > span {
    color: var(--rl-clay);
}

.rl-estimate-field > label small {
    margin-left: auto;

    color: var(--rl-muted);

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

.rl-estimate-field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.rl-estimate-field__label-row > span {
    color: var(--rl-muted);

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

.rl-estimate-field__control {
    position: relative;

    display: flex;
    align-items: center;
}

.rl-estimate-field__control > svg {
    position: absolute;
    left: 15px;
    z-index: 2;

    width: 18px;
    height: 18px;

    fill: none;
    stroke: var(--rl-blue-700);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.rl-estimate-field__control input,
.rl-estimate-field__control select,
.rl-estimate-field__control textarea {
    width: 100%;

    color: var(--rl-ink);
    background: var(--rl-white);

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

    border-radius: 15px;

    box-shadow:
        inset 0 1px 2px
        rgba(3, 39, 60, 0.025);

    font-family: var(--rl-font-body);
    font-size: 0.76rem;
    font-weight: 600;

    outline: none;

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

.rl-estimate-field__control input,
.rl-estimate-field__control select {
    min-height: 53px;

    padding:
        12px 41px 12px 45px;
}

.rl-estimate-field__control textarea {
    min-height: 132px;

    padding:
        15px 17px 15px 45px;

    line-height: 1.55;

    resize: vertical;
}

.rl-estimate-field__control--textarea {
    align-items: flex-start;
}

.rl-estimate-field__control--textarea > svg {
    top: 16px;
}

.rl-estimate-field__control input::placeholder,
.rl-estimate-field__control textarea::placeholder {
    color: #87969b;

    font-weight: 500;
}

.rl-estimate-field__control select {
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--rl-blue-700) 50%
        ),
        linear-gradient(
            135deg,
            var(--rl-blue-700) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 19px) 22px,
        calc(100% - 14px) 22px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}

.rl-estimate-field__control input:focus,
.rl-estimate-field__control select:focus,
.rl-estimate-field__control textarea:focus {
    border-color: var(--rl-blue-500);

    box-shadow:
        0 0 0 4px
        rgba(7, 140, 213, 0.11),
        0 10px 25px
        rgba(3, 39, 60, 0.06);
}

.rl-estimate-field.is-invalid
.rl-estimate-field__control input,
.rl-estimate-field.is-invalid
.rl-estimate-field__control select,
.rl-estimate-field.is-invalid
.rl-estimate-field__control textarea {
    border-color: var(--rl-clay);

    box-shadow:
        0 0 0 4px
        rgba(200, 115, 71, 0.1);
}

.rl-estimate-field__error {
    display: block;

    min-height: 16px;

    margin-top: 5px;

    color: #a3432d;

    font-size: 0.54rem;
    font-weight: 700;
    line-height: 1.35;
}


/* =====================================================
   SERVICE CARDS
===================================================== */

.rl-estimate-services {
    display: grid;

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

    gap: 12px;
}

.rl-estimate-service {
    position: relative;

    display: grid;

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

    align-items: center;
    gap: 11px;

    min-height: 94px;

    padding: 14px;

    color: var(--rl-text);

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

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

    border-radius: 17px;

    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-estimate-service:hover {
    background: var(--rl-white);

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

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

    transform: translateY(-3px);
}

.rl-estimate-service.is-selected {
    color: var(--rl-white);

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(72, 183, 229, 0.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--rl-blue-950),
            var(--rl-blue-900) 56%,
            var(--rl-green-900)
        );

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

    box-shadow:
        0 16px 36px
        rgba(3, 39, 60, 0.18);
}

.rl-estimate-service > input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}

.rl-estimate-service__icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

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

    background:
        linear-gradient(
            145deg,
            rgba(133, 213, 241, 0.18),
            rgba(117, 170, 75, 0.1)
        );

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

    border-radius: 13px;

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

.rl-estimate-service.is-selected
.rl-estimate-service__icon {
    color: var(--rl-white);

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

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

.rl-estimate-service__icon svg {
    width: 20px;
    height: 20px;

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

.rl-estimate-service__content {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.rl-estimate-service__content strong {
    color: var(--rl-heading);

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

.rl-estimate-service__content small {
    color: var(--rl-muted);

    font-size: 0.54rem;
    line-height: 1.4;
}

.rl-estimate-service.is-selected
.rl-estimate-service__content strong,
.rl-estimate-service.is-selected
.rl-estimate-service__content small {
    color: var(--rl-white);
}

.rl-estimate-service.is-selected
.rl-estimate-service__content small {
    opacity: 0.58;
}

.rl-estimate-service__check {
    grid-column: 3;

    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    color: transparent;

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

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

    border-radius: 8px;

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

.rl-estimate-service.is-selected
.rl-estimate-service__check {
    color: var(--rl-white);

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

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

    transform: scale(1.06);
}

.rl-estimate-service__check svg {
    width: 14px;
    height: 14px;

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

.rl-estimate-services.has-error
.rl-estimate-service {
    border-color:
        rgba(200, 115, 71, 0.45);
}

.rl-estimate-services__error {
    display: block;

    min-height: 16px;

    margin-top: 6px;

    color: #a3432d;

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


/* =====================================================
   CONSENT / FORM FOOTER
===================================================== */

.rl-estimate-form__footer {
    padding-top: 2px;
}

.rl-estimate-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    width: fit-content;

    color: var(--rl-text);

    font-size: 0.63rem;
    font-weight: 600;
    line-height: 1.5;

    cursor: pointer;
}

.rl-estimate-form__consent > input {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;
}

.rl-estimate-form__consent-box {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 22px;
    height: 22px;

    color: transparent;

    background: var(--rl-white);

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

    border-radius: 7px;

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

.rl-estimate-form__consent
input:checked
+
.rl-estimate-form__consent-box {
    color: var(--rl-white);

    background: var(--rl-green-600);
    border-color: var(--rl-green-600);
}

.rl-estimate-form__consent
input:focus-visible
+
.rl-estimate-form__consent-box {
    box-shadow:
        0 0 0 4px
        rgba(7, 140, 213, 0.12);
}

.rl-estimate-form__consent-box svg {
    width: 13px;
    height: 13px;

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

.rl-estimate-form__consent-error {
    display: block;

    min-height: 16px;

    margin-top: 5px;

    color: #a3432d;

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

.rl-estimate-form__submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top: 14px;
    padding-top: 18px;

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

.rl-estimate-form__submit-row > p {
    margin: 0;

    color: var(--rl-muted);

    font-size: 0.56rem;
    line-height: 1.4;
}

.rl-estimate-form__submit-row > p strong {
    color: var(--rl-clay);
}

.rl-estimate-form__submit {
    position: relative;

    flex: 0 0 auto;

    min-width: 245px;
    min-height: 56px;

    color: var(--rl-white);

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

    border: 0;

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

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

.rl-estimate-form__submit.is-loading {
    cursor: wait;
    opacity: 0.82;
}

.rl-estimate-form__submit.is-loading svg {
    display: none;
}

.rl-estimate-form__spinner {
    display: none;

    width: 18px;
    height: 18px;

    border:
        2px solid
        rgba(255, 255, 255, 0.38);

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

    animation:
        rl-estimate-spinner
        700ms linear infinite;
}

.rl-estimate-form__submit.is-loading
.rl-estimate-form__spinner {
    display: block;
}

.rl-estimate-form__status {
    min-height: 18px;

    margin-top: 9px;

    color: var(--rl-text);

    font-size: 0.59rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: right;
}


/* =====================================================
   ANTISPAM
===================================================== */

.rl-estimate-form__website {
    position: absolute !important;
    left: -9999px !important;

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

    overflow: hidden !important;
}


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

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

    transform:
        translateY(30px)
        scale(0.99);

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

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

.rl-contact-main.is-enhanced
.rl-contact-main__sidebar {
    transition-delay: 80ms;
}

.rl-contact-main.is-enhanced
.rl-contact-main__form-card {
    transition-delay: 140ms;
}

@keyframes rl-estimate-spinner {

    to {
        transform: rotate(360deg);
    }

}

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

html.rl-reduced-motion
.rl-contact-main__progress-track > span,
html.rl-reduced-motion
.rl-estimate-service,
html.rl-reduced-motion
.rl-estimate-form__submit svg {
    transition-duration: 0.01ms !important;
}

html.rl-reduced-motion
.rl-estimate-form__spinner {
    animation: none;
}


































/* =====================================================
   FORM SUBMISSION NOTICE
===================================================== */

.rl-form-notice {
    position: fixed;
    top:
        calc(
            var(--rl-nav-top) +
            var(--rl-nav-height) +
            14px
        );
    left: 50%;
    z-index: 9998;

    display: grid;
    grid-template-columns:
        46px minmax(0, 1fr) 38px;

    align-items: center;
    gap: 13px;

    width: min(
        calc(100% - 40px),
        720px
    );

    padding: 14px;

    color: var(--rl-heading);

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

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

    border-radius: 18px;

    box-shadow:
        0 22px 60px
        rgba(3, 39, 60, 0.18),
        0 6px 20px
        rgba(18, 75, 38, 0.07);

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

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

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

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

.rl-form-notice[hidden] {
    display: none;
}

.rl-form-notice.is-visible {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

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

.rl-form-notice.is-success {
    border-color:
        rgba(53, 122, 58, 0.25);
}

.rl-form-notice.is-error {
    border-color:
        rgba(200, 115, 71, 0.32);
}

.rl-form-notice__icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    color: var(--rl-white);

    border-radius: 14px;
}

.rl-form-notice.is-success
.rl-form-notice__icon {
    background:
        linear-gradient(
            135deg,
            var(--rl-green-700),
            var(--rl-green-400)
        );

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

.rl-form-notice.is-error
.rl-form-notice__icon {
    background:
        linear-gradient(
            135deg,
            #a9472f,
            var(--rl-clay)
        );

    box-shadow:
        0 10px 24px
        rgba(200, 115, 71, 0.22);
}

.rl-form-notice__icon svg {
    width: 23px;
    height: 23px;

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

.rl-form-notice__icon-error,
.rl-form-notice.is-error
.rl-form-notice__icon-success {
    display: none;
}

.rl-form-notice.is-error
.rl-form-notice__icon-error {
    display: block;
}

.rl-form-notice__content {
    min-width: 0;
}

.rl-form-notice__content strong {
    display: block;

    margin-bottom: 4px;

    color: var(--rl-heading);

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

.rl-form-notice__content p {
    margin: 0;

    color: var(--rl-muted);

    font-size: 0.68rem;
    line-height: 1.5;
}

.rl-form-notice__close {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    padding: 0;

    color: var(--rl-muted);

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

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

    border-radius: 12px;

    cursor: pointer;

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

.rl-form-notice__close:hover {
    color: var(--rl-white);
    background: var(--rl-blue-900);

    transform: rotate(5deg);
}

.rl-form-notice__close svg {
    width: 17px;
    height: 17px;

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






































/* =====================================================
   RAINLANDSCAPING — WHAT HAPPENS NEXT
===================================================== */

.rl-next-steps {
    position: relative;
    isolation: isolate;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(7, 140, 213, 0.2),
            transparent 28%
        ),
        radial-gradient(
            circle at 7% 87%,
            rgba(117, 170, 75, 0.16),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            var(--rl-blue-950) 0%,
            #063247 51%,
            var(--rl-green-950) 100%
        );
}


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

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

    overflow: hidden;

    pointer-events: none;
}

.rl-next-steps__background::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.17;

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

    background-size: 74px 74px;

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

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

.rl-next-steps__water-shape {
    position: absolute;
    top: -250px;
    right: -170px;

    width: 560px;
    height: 620px;

    opacity: 0.19;

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

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

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

    transform: rotate(39deg);
}

.rl-next-steps__water-ring {
    position: absolute;
    bottom: -210px;
    left: -180px;

    width: 450px;
    height: 450px;

    opacity: 0.65;

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

    border-radius: 50%;
}

.rl-next-steps__water-ring::before,
.rl-next-steps__water-ring::after {
    content: "";

    position: absolute;

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

    border-radius: inherit;
}

.rl-next-steps__water-ring::before {
    inset: 44px;
}

.rl-next-steps__water-ring::after {
    inset: 92px;
}

.rl-next-steps__lawn-lines {
    position: absolute;
    right: -390px;
    bottom: -210px;

    width: 940px;
    height: 470px;

    opacity: 0.11;

    border-radius: 50%;

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

    transform: rotate(-14deg);
}

.rl-next-steps__leaf {
    position: absolute;

    width: 110px;
    height: 52px;

    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-next-steps__leaf::after {
    content: "";

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

    width: 83%;
    height: 1px;

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

    transform: rotate(-16deg);
}

.rl-next-steps__leaf--one {
    top: 27%;
    left: 4%;

    transform: rotate(20deg);
}

.rl-next-steps__leaf--two {
    right: 6%;
    bottom: 26%;

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

.rl-next-steps__route {
    position: absolute;
    top: 37%;
    right: -4%;

    width: 57%;
    height: 280px;

    opacity: 0.14;

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


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

.rl-next-steps__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(44px, 5vw, 68px);
}

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

    margin-bottom: 18px;

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

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

.rl-next-steps__eyebrow::before {
    content: "";

    width: 33px;
    height: 3px;

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

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

.rl-next-steps__heading h2 {
    max-width: 850px;

    margin: 0;

    color: var(--rl-white);

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

.rl-next-steps__heading h2 span {
    display: block;

    color: transparent;

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

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

.rl-next-steps__introduction {
    padding-bottom: 6px;
}

.rl-next-steps__introduction > p {
    margin: 0 0 20px;

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

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

.rl-next-steps__intro-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 12px;

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

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

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

    border-radius: 12px;

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

.rl-next-steps__intro-note > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

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

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

.rl-next-steps__intro-note p {
    margin: 0;

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


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

.rl-next-steps__layout {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.76fr)
        minmax(0, 1.24fr);

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


/* =====================================================
   DYNAMIC PREVIEW
===================================================== */

.rl-next-steps__preview {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-height: 590px;

    padding: 31px;

    overflow: hidden;

    color: var(--rl-white);

    background:
        radial-gradient(
            circle at 7% 8%,
            rgba(72, 183, 229, 0.2),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.045)
        );

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

    border-radius: 30px;

    box-shadow:
        0 28px 75px
        rgba(0, 12, 23, 0.28),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

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

.rl-next-steps__preview-decoration {
    position: absolute;
    inset: 0;
    z-index: -1;

    pointer-events: none;
}

.rl-next-steps__preview-decoration span {
    position: absolute;

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

    border-radius: 50%;
}

.rl-next-steps__preview-decoration span:nth-child(1) {
    top: -95px;
    right: -70px;

    width: 250px;
    height: 250px;
}

.rl-next-steps__preview-decoration span:nth-child(2) {
    top: -48px;
    right: -23px;

    width: 155px;
    height: 155px;
}

.rl-next-steps__preview-decoration span:nth-child(3) {
    right: 24%;
    bottom: -100px;

    width: 190px;
    height: 190px;
}

.rl-next-steps__preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: auto;
}

.rl-next-steps__preview-label {
    color:
        rgba(255, 255, 255, 0.5);

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

.rl-next-steps__preview-number {
    color:
        rgba(255, 255, 255, 0.18);

    font-family: var(--rl-font-heading);
    font-size:
        clamp(3.5rem, 7vw, 6.4rem);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.08em;
}

.rl-next-steps__preview-icon {
    display: grid;
    place-items: center;

    width: 70px;
    height: 70px;

    margin: 34px 0 29px;

    color: var(--rl-white);

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

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

    border-radius: 22px;

    box-shadow:
        0 18px 42px
        rgba(7, 140, 213, 0.24);

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

.rl-next-steps__preview-icon.is-changing {
    transform:
        rotate(-7deg)
        scale(0.92);
}

.rl-next-steps__preview-icon svg {
    width: 31px;
    height: 31px;

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

.rl-next-steps__preview-kicker {
    display: block;

    margin-bottom: 9px;

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

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

.rl-next-steps__preview h3 {
    max-width: 470px;

    margin: 0;

    color: var(--rl-white);

    font-size:
        clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.rl-next-steps__preview > p {
    max-width: 520px;

    margin: 17px 0 0;

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

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

.rl-next-steps__preview-progress {
    margin-top: auto;
    padding-top: 35px;
}

.rl-next-steps__preview-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 11px;
}

.rl-next-steps__preview-progress-copy span {
    color:
        rgba(255, 255, 255, 0.43);

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

.rl-next-steps__preview-progress-copy strong {
    color: var(--rl-green-300);

    font-size: 0.62rem;
}

.rl-next-steps__preview-track {
    height: 8px;

    overflow: hidden;

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

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

.rl-next-steps__preview-track > span {
    display: block;

    width: 33.333%;
    height: 100%;

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

    border-radius: inherit;

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

.rl-next-steps__preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

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

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

.rl-next-steps__preview-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

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

.rl-next-steps__preview-status i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

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

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

.rl-next-steps__preview-footer > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

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

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

.rl-next-steps__preview-footer > a:hover {
    gap: 13px;

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

.rl-next-steps__preview-footer > a svg {
    width: 16px;
    height: 16px;

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


/* =====================================================
   PROCESS LIST
===================================================== */

.rl-next-steps__list {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;

    min-width: 0;
}

.rl-next-steps__connector {
    position: absolute;
    top: 70px;
    bottom: 70px;
    left: 38px;
    z-index: 0;

    width: 2px;

    overflow: hidden;

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

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

.rl-next-steps__connector > i {
    display: block;

    width: 100%;
    height: 0%;

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

    border-radius: inherit;

    transition:
        height 550ms var(--rl-ease-smooth);
}

.rl-next-step {
    position: relative;
    z-index: 1;

    display: grid;

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

    align-items: center;
    gap: 17px;

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

    padding: 22px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        );

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

    border-radius: 25px;

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

    cursor: pointer;

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

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

.rl-next-step:hover,
.rl-next-step:focus-visible,
.rl-next-step.is-active {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.06)
        );

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

    box-shadow:
        0 23px 55px
        rgba(0, 12, 23, 0.21),
        inset 0 1px 0
        rgba(255, 255, 255, 0.075);

    transform: translateX(7px);
}

.rl-next-step:focus-visible {
    outline:
        3px solid
        rgba(133, 213, 241, 0.4);

    outline-offset: 3px;
}

.rl-next-step__number {
    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;

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

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

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

    border-radius: 15px;

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

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

.rl-next-step.is-active
.rl-next-step__number {
    color: var(--rl-white);

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

    box-shadow:
        0 12px 28px
        rgba(7, 140, 213, 0.22);
}

.rl-next-step__icon {
    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

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

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

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

    border-radius: 18px;

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

.rl-next-step.is-active
.rl-next-step__icon {
    color: var(--rl-white);

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

    transform:
        rotate(-5deg)
        scale(1.03);
}

.rl-next-step__icon svg {
    width: 25px;
    height: 25px;

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

.rl-next-step__content {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}

.rl-next-step__content small {
    color: var(--rl-blue-200);

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

.rl-next-step__content strong {
    color: var(--rl-white);

    font-family: var(--rl-font-heading);
    font-size:
        clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.1;
}

.rl-next-step__content > span {
    max-width: 560px;

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

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

.rl-next-step__action {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

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

    background: var(--rl-white);

    border-radius: 14px;

    box-shadow:
        0 10px 25px
        rgba(0, 12, 23, 0.19);

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

.rl-next-step.is-active
.rl-next-step__action {
    color: var(--rl-white);

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

    border-radius: 50%;

    transform: rotate(-6deg);
}

.rl-next-step__action svg {
    width: 18px;
    height: 18px;

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


/* =====================================================
   LOWER FOOTER
===================================================== */

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

    margin-top: 24px;
    padding: 24px 27px;

    background:
        linear-gradient(
            105deg,
            rgba(7, 140, 213, 0.13),
            rgba(255, 255, 255, 0.065),
            rgba(117, 170, 75, 0.11)
        );

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

    border-radius: 23px;

    box-shadow:
        0 19px 48px
        rgba(0, 12, 23, 0.18);

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

.rl-next-steps__footer-copy {
    display: flex;
    align-items: center;
    gap: 14px;

    max-width: 730px;
}

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

    width: 48px;
    height: 48px;

    color: var(--rl-white);

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

    border-radius: 15px;

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

.rl-next-steps__footer-icon svg {
    width: 21px;
    height: 21px;

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

.rl-next-steps__footer-copy > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rl-next-steps__footer-copy strong {
    color: var(--rl-white);

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

.rl-next-steps__footer-copy p {
    margin: 0;

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

    font-size: 0.67rem;
    line-height: 1.5;
}

.rl-next-steps__footer-actions {
    display: flex;
    align-items: center;
    gap: 11px;

    flex: 0 0 auto;
}

.rl-next-steps__email {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 12px 17px;

    color: var(--rl-white);

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

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

    border-radius: 15px;

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

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

.rl-next-steps__email:hover {
    color: var(--rl-blue-950);
    background: var(--rl-white);

    transform: translateY(-3px);
}

.rl-next-steps__estimate {
    min-height: 52px;

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

    border: 0;

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

.rl-next-steps__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-next-steps__estimate:hover svg {
    transform: translateY(-4px);
}


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

.rl-next-steps.is-enhanced
[data-rl-next-reveal] {
    opacity: 0;

    transform:
        translateY(30px)
        scale(0.99);

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

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

.rl-next-steps.is-enhanced
.rl-next-steps__preview {
    transition-delay: 70ms;
}

.rl-next-steps.is-enhanced
.rl-next-steps__list {
    transition-delay: 130ms;
}

.rl-next-steps.is-enhanced
.rl-next-steps__footer {
    transition-delay: 190ms;
}


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

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

html.rl-reduced-motion
.rl-next-step,
html.rl-reduced-motion
.rl-next-steps__preview-icon,
html.rl-reduced-motion
.rl-next-steps__preview-track > span,
html.rl-reduced-motion
.rl-next-steps__connector > i {
    transition-duration: 0.01ms !important;
}








































/* =====================================================
   RAINLANDSCAPING — SERVICE AREA CONFIRMATION
===================================================== */

.rl-area-confirmation {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(133, 213, 241, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 7% 86%,
            rgba(117, 170, 75, 0.14),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            rgba(248, 245, 237, 0.98),
            rgba(243, 247, 244, 0.98) 52%,
            rgba(234, 241, 240, 0.96)
        );
}


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

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

    overflow: hidden;

    pointer-events: none;
}

.rl-area-confirmation__background::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.22;

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

    background-size: 72px 72px;

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

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

.rl-area-confirmation__water-shape {
    position: absolute;
    top: -240px;
    right: -180px;

    width: 550px;
    height: 610px;

    opacity: 0.18;

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

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

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

    transform: rotate(39deg);
}

.rl-area-confirmation__water-ring {
    position: absolute;
    bottom: -220px;
    left: -190px;

    width: 460px;
    height: 460px;

    opacity: 0.58;

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

    border-radius: 50%;
}

.rl-area-confirmation__water-ring::before,
.rl-area-confirmation__water-ring::after {
    content: "";

    position: absolute;

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

    border-radius: inherit;
}

.rl-area-confirmation__water-ring::before {
    inset: 45px;
}

.rl-area-confirmation__water-ring::after {
    inset: 94px;
}

.rl-area-confirmation__lawn-lines {
    position: absolute;
    right: -410px;
    bottom: -220px;

    width: 950px;
    height: 480px;

    opacity: 0.13;

    border-radius: 50%;

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

    transform: rotate(-14deg);
}

.rl-area-confirmation__leaf {
    position: absolute;

    width: 110px;
    height: 52px;

    opacity: 0.17;

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

    border-radius:
        100% 0 100% 0;

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

.rl-area-confirmation__leaf::after {
    content: "";

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

    width: 83%;
    height: 1px;

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

    transform: rotate(-16deg);
}

.rl-area-confirmation__leaf--one {
    top: 22%;
    left: 4%;

    transform: rotate(19deg);
}

.rl-area-confirmation__leaf--two {
    right: 6%;
    bottom: 25%;

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

.rl-area-confirmation__route {
    position: absolute;
    top: 37%;
    right: -4%;

    width: 57%;
    height: 280px;

    opacity: 0.13;

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


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

.rl-area-confirmation__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(44px, 5vw, 68px);
}

.rl-area-confirmation__heading h2 {
    max-width: 840px;

    margin: 0;

    color: var(--rl-heading);

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

.rl-area-confirmation__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-area-confirmation__introduction {
    padding-bottom: 6px;
}

.rl-area-confirmation__introduction > p {
    margin: 0 0 20px;

    color: var(--rl-text);

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

.rl-area-confirmation__intro-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;

    padding: 10px 12px;

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

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

    border:
        1px solid
        var(--rl-border-green);

    border-radius: 12px;

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

    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.45;
}

.rl-area-confirmation__intro-note svg {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

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


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

.rl-area-confirmation__layout {
    display: grid;

    grid-template-columns:
        minmax(310px, 0.78fr)
        minmax(0, 1.22fr);

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


/* =====================================================
   INFORMATION CARD
===================================================== */

.rl-area-confirmation__information {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    padding: 28px;

    overflow: hidden;

    color: var(--rl-white);

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(72, 183, 229, 0.21),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--rl-blue-950),
            #063448 53%,
            var(--rl-green-950)
        );

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

    border-radius: 29px;

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

.rl-area-confirmation__information::before {
    content: "";

    position: absolute;
    top: -115px;
    right: -90px;
    z-index: -1;

    width: 285px;
    height: 285px;

    opacity: 0.34;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(133, 213, 241, 0.26),
            transparent 68%
        );
}

.rl-area-confirmation__information-top {
    display: flex;
    align-items: center;
    gap: 13px;

    padding-bottom: 21px;

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

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

    width: 50px;
    height: 50px;

    color: var(--rl-white);

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

    border-radius: 16px;

    box-shadow:
        0 12px 28px
        rgba(7, 140, 213, 0.24);
}

.rl-area-confirmation__information-icon svg {
    width: 22px;
    height: 22px;

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

.rl-area-confirmation__information-top > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rl-area-confirmation__information-top small {
    color: var(--rl-blue-200);

    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.rl-area-confirmation__information-top h3 {
    margin: 0;

    color: var(--rl-white);

    font-size: 1.27rem;
    line-height: 1.12;
}

.rl-area-confirmation__information-copy {
    margin: 21px 0;

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

    font-size: 0.72rem;
    line-height: 1.62;
}


/* =====================================================
   AREA CHIPS
===================================================== */

.rl-area-confirmation__areas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rl-area-confirmation__areas button {
    min-height: 36px;

    padding: 8px 11px;

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

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

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

    border-radius: 11px;

    font-family: var(--rl-font-body);
    font-size: 0.59rem;
    font-weight: 700;

    cursor: pointer;

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

.rl-area-confirmation__areas button:hover,
.rl-area-confirmation__areas button:focus-visible,
.rl-area-confirmation__areas button.is-selected {
    color: var(--rl-white);

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

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

    transform: translateY(-2px);
}

.rl-area-confirmation__areas button:focus-visible {
    outline:
        3px solid
        rgba(133, 213, 241, 0.28);

    outline-offset: 2px;
}


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

.rl-area-confirmation__benefits {
    display: flex;
    flex-direction: column;
    gap: 9px;

    margin-top: 22px;
    padding-top: 20px;

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

.rl-area-confirmation__benefit {
    display: flex;
    align-items: center;
    gap: 9px;

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

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

.rl-area-confirmation__benefit svg {
    width: 16px;
    height: 16px;

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


/* =====================================================
   MAP LINK
===================================================== */

.rl-area-confirmation__map-link {
    display: grid;

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

    align-items: center;
    gap: 11px;

    min-height: 65px;

    margin-top: auto;
    padding: 10px 12px 10px 10px;

    color: var(--rl-white);

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

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

    border-radius: 16px;

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

.rl-area-confirmation__map-link:hover {
    background:
        rgba(255, 255, 255, 0.11);

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

    transform: translateY(-3px);
}

.rl-area-confirmation__map-link-icon {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    color: var(--rl-white);

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

    border-radius: 13px;
}

.rl-area-confirmation__map-link-icon svg {
    width: 20px;
    height: 20px;

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

.rl-area-confirmation__map-link > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rl-area-confirmation__map-link small {
    color:
        rgba(255, 255, 255, 0.45);

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

.rl-area-confirmation__map-link strong {
    color: var(--rl-white);

    font-size: 0.72rem;
}

.rl-area-confirmation__map-arrow {
    width: 18px;
    height: 18px;

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

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

.rl-area-confirmation__map-link:hover
.rl-area-confirmation__map-arrow {
    transform: translateX(4px);
}


/* =====================================================
   CHECKER CARD
===================================================== */

.rl-area-confirmation__checker {
    min-width: 0;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.95),
            rgba(247, 251, 249, 0.9)
        );

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

    border-radius: 30px;

    box-shadow:
        0 30px 80px
        rgba(3, 39, 60, 0.13),
        0 8px 24px
        rgba(18, 75, 38, 0.055);

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


/* =====================================================
   DECORATIVE MAP
===================================================== */

.rl-area-confirmation__map-visual {
    position: relative;
    isolation: isolate;

    height: 245px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #dbecee,
            #eef4ee 55%,
            #e8eee1
        );

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

.rl-area-confirmation__map-grid {
    position: absolute;
    inset: 0;
    z-index: -1;

    opacity: 0.48;

    background-image:
        linear-gradient(
            rgba(6, 99, 172, 0.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(6, 99, 172, 0.09) 1px,
            transparent 1px
        );

    background-size: 44px 44px;

    transform:
        rotate(-8deg)
        scale(1.3);
}

.rl-area-confirmation__map-visual > svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    fill: none;
}

.rl-area-confirmation__map-road {
    stroke:
        rgba(6, 99, 172, 0.38);

    stroke-width: 6;
    stroke-linecap: round;
}

.rl-area-confirmation__map-road--secondary {
    stroke:
        rgba(53, 122, 58, 0.25);

    stroke-width: 4;
    stroke-dasharray: 9 10;
}

.rl-area-confirmation__map-pin {
    position: absolute;

    width: 22px;
    height: 22px;

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

    border:
        4px solid
        var(--rl-white);

    border-radius:
        50% 50% 50% 0;

    box-shadow:
        0 9px 20px
        rgba(3, 39, 60, 0.25);

    transform: rotate(-45deg);
}

.rl-area-confirmation__map-pin::after {
    content: "";

    position: absolute;
    inset: 5px;

    background: var(--rl-white);

    border-radius: 50%;
}

.rl-area-confirmation__map-pin--one {
    top: 29%;
    left: 23%;
}

.rl-area-confirmation__map-pin--two {
    top: 52%;
    left: 43%;

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

.rl-area-confirmation__map-pin--three {
    top: 25%;
    right: 25%;
}

.rl-area-confirmation__map-pin--four {
    right: 13%;
    bottom: 18%;

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

.rl-area-confirmation__map-label {
    position: absolute;
    bottom: 16px;
    left: 17px;

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

    min-height: 39px;

    padding: 8px 12px;

    color: var(--rl-white);

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

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

    border-radius: 12px;

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

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

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

.rl-area-confirmation__map-label svg {
    width: 16px;
    height: 16px;

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


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

.rl-area-confirmation__checker-content {
    padding: 29px;
}

.rl-area-confirmation__checker-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

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

    width: 49px;
    height: 49px;

    color: var(--rl-white);

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

    border-radius: 16px;

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

.rl-area-confirmation__checker-icon svg {
    width: 22px;
    height: 22px;

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

.rl-area-confirmation__checker-heading > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rl-area-confirmation__checker-heading small {
    color: var(--rl-blue-700);

    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.rl-area-confirmation__checker-heading h3 {
    margin: 0;

    color: var(--rl-heading);

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

.rl-area-confirmation__checker-description {
    margin: 18px 0 21px;

    color: var(--rl-text);

    font-size: 0.73rem;
    line-height: 1.62;
}


/* =====================================================
   SEARCH
===================================================== */

.rl-area-confirmation__search > label {
    display: block;

    margin-bottom: 8px;

    color: var(--rl-heading);

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

.rl-area-confirmation__search-control {
    position: relative;

    display: grid;

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

    align-items: center;

    overflow: hidden;

    background: var(--rl-white);

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

    border-radius: 16px;

    box-shadow:
        0 10px 25px
        rgba(3, 39, 60, 0.055);

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

.rl-area-confirmation__search-control:focus-within {
    border-color: var(--rl-blue-500);

    box-shadow:
        0 0 0 4px
        rgba(7, 140, 213, 0.11),
        0 12px 28px
        rgba(3, 39, 60, 0.07);
}

.rl-area-confirmation__search-control > svg {
    position: absolute;
    left: 15px;
    z-index: 2;

    width: 18px;
    height: 18px;

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

    pointer-events: none;
}

.rl-area-confirmation__search-control input {
    min-width: 0;
    min-height: 55px;

    padding:
        12px 16px 12px 45px;

    color: var(--rl-ink);
    background: transparent;

    border: 0;
    outline: none;

    font-family: var(--rl-font-body);
    font-size: 0.76rem;
    font-weight: 600;
}

.rl-area-confirmation__search-control input::placeholder {
    color: #87969b;

    font-weight: 500;
}

.rl-area-confirmation__search-control button {
    min-height: 43px;

    margin-right: 6px;
    padding: 10px 17px;

    color: var(--rl-white);

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

    border: 0;
    border-radius: 12px;

    box-shadow:
        0 10px 24px
        rgba(7, 140, 213, 0.19);

    font-family: var(--rl-font-body);
    font-size: 0.67rem;
    font-weight: 800;

    cursor: pointer;

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

.rl-area-confirmation__search-control button:hover {
    box-shadow:
        0 14px 30px
        rgba(7, 140, 213, 0.25);

    transform: translateY(-2px);
}


/* =====================================================
   RESULT
===================================================== */

.rl-area-confirmation__result {
    display: grid;

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

    align-items: center;
    gap: 12px;

    min-height: 79px;

    margin-top: 15px;
    padding: 13px;

    color: var(--rl-text);

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

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

    border-radius: 16px;

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

.rl-area-confirmation__result.is-success {
    background:
        rgba(117, 170, 75, 0.1);

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

.rl-area-confirmation__result.is-review {
    background:
        rgba(229, 166, 60, 0.1);

    border-color:
        rgba(229, 166, 60, 0.23);
}

.rl-area-confirmation__result.is-updated {
    transform: translateY(-3px);
}

.rl-area-confirmation__result-icon {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

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

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

    border-radius: 13px;
}

.rl-area-confirmation__result.is-success
.rl-area-confirmation__result-icon {
    color: var(--rl-white);
    background: var(--rl-green-600);
}

.rl-area-confirmation__result.is-review
.rl-area-confirmation__result-icon {
    color: var(--rl-white);
    background: var(--rl-amber);
}

.rl-area-confirmation__result-icon svg {
    width: 21px;
    height: 21px;

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

.rl-area-confirmation__result-icon-success,
.rl-area-confirmation__result-icon-review,
.rl-area-confirmation__result.is-success
.rl-area-confirmation__result-icon-default,
.rl-area-confirmation__result.is-review
.rl-area-confirmation__result-icon-default {
    display: none;
}

.rl-area-confirmation__result.is-success
.rl-area-confirmation__result-icon-success,
.rl-area-confirmation__result.is-review
.rl-area-confirmation__result-icon-review {
    display: block;
}

.rl-area-confirmation__result-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rl-area-confirmation__result-copy strong {
    color: var(--rl-heading);

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

.rl-area-confirmation__result-copy > span {
    color: var(--rl-muted);

    font-size: 0.61rem;
    line-height: 1.47;
}


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

.rl-area-confirmation__actions {
    display: grid;

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

    gap: 10px;

    margin-top: 17px;
}

.rl-area-confirmation__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 53px;

    padding: 11px 15px;

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

    background: var(--rl-white);

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

    border-radius: 15px;

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

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

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

.rl-area-confirmation__call:hover {
    color: var(--rl-white);
    background: var(--rl-blue-900);

    transform: translateY(-3px);
}

.rl-area-confirmation__call svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}

.rl-area-confirmation__estimate {
    width: 100%;
    min-height: 53px;

    color: var(--rl-white);

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

    border: 0;

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

.rl-area-confirmation__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-area-confirmation__estimate:hover svg {
    transform: translateY(4px);
}


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

.rl-area-confirmation.is-enhanced
[data-rl-area-confirmation-reveal] {
    opacity: 0;

    transform:
        translateY(30px)
        scale(0.99);

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

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

.rl-area-confirmation.is-enhanced
.rl-area-confirmation__information {
    transition-delay: 70ms;
}

.rl-area-confirmation.is-enhanced
.rl-area-confirmation__checker {
    transition-delay: 130ms;
}


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

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

html.rl-reduced-motion
.rl-area-confirmation__areas button,
html.rl-reduced-motion
.rl-area-confirmation__result,
html.rl-reduced-motion
.rl-area-confirmation__search-control button {
    transition-duration: 0.01ms !important;
}
















































/* =====================================================
   RESPONSIVE 1 — COMPUTERS / LAPTOPS
===================================================== */

@media (max-width: 1399px) {

     .rl-area-confirmation__header {
        gap: 70px;
    }

    .rl-area-confirmation__layout {
        grid-template-columns:
            minmax(295px, 0.75fr)
            minmax(0, 1.25fr);

        gap: 19px;
    }

    .rl-area-confirmation__information {
        padding: 25px;
    }

    .rl-area-confirmation__checker-content {
        padding: 26px;
    }

    .rl-area-confirmation__map-visual {
        height: 230px;
    }
     .rl-next-steps__header {
        gap: 70px;
    }

    .rl-next-steps__layout {
        grid-template-columns:
            minmax(300px, 0.73fr)
            minmax(0, 1.27fr);

        gap: 19px;
    }

    .rl-next-steps__preview {
        min-height: 565px;

        padding: 28px;
    }

    .rl-next-step {
        grid-template-columns:
            45px 52px minmax(0, 1fr) 42px;

        gap: 14px;

        min-height: 160px;
        padding: 20px;
    }

    .rl-next-step__number {
        width: 45px;
        height: 45px;
    }

    .rl-next-step__icon {
        width: 52px;
        height: 52px;
    }
      .rl-form-notice {
        width: min(
            calc(100% - 36px),
            690px
        );
    }
     .rl-contact-main__header {
        gap: 70px;
    }

    .rl-contact-main__layout {
        grid-template-columns:
            minmax(285px, 0.65fr)
            minmax(0, 1.35fr);

        gap: 19px;
    }

    .rl-contact-main__sidebar {
        padding: 24px;
    }

    .rl-contact-main__form-card {
        padding: 27px;
    }

    .rl-estimate-service {
        min-height: 90px;
    }
    .rl-contact-bar__shell {
        padding: 28px;
    }

    .rl-contact-bar__header {
        gap: 60px;
    }

    .rl-contact-card__link {
        grid-template-columns:
            48px minmax(0, 1fr) 38px;

        gap: 12px;

        min-height: 148px;
        padding: 17px;
    }

    .rl-contact-card__icon {
        width: 48px;
        height: 48px;
    }

    .rl-contact-card__action {
        width: 38px;
        height: 38px;
    }

    .rl-contact-hero {
        padding-right:
            clamp(26px, 4vw, 58px);

        padding-left:
            clamp(26px, 4vw, 58px);
    }

    .rl-contact-hero__container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.58fr);

        gap: 60px;
    }

    .rl-contact-hero__title {
        font-size:
            clamp(3rem, 5.7vw, 5.7rem);
    }

    .rl-contact-hero__estimate-card {
        width: min(100%, 380px);
        padding: 20px;
    }

    .rl-contact-hero__bottom {
        right: clamp(30px, 4vw, 58px);
        left: clamp(30px, 4vw, 58px);
    }

}


/* =====================================================
   RESPONSIVE 2 — TABLETS
===================================================== */

@media (max-width: 1024px) {
    .rl-area-confirmation__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 25px;
    }

    .rl-area-confirmation__introduction {
        display: grid;

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

        align-items: end;
        gap: 28px;
    }

    .rl-area-confirmation__introduction > p {
        max-width: 650px;
        margin-bottom: 0;
    }

    .rl-area-confirmation__layout {
        grid-template-columns: 1fr;
    }

    .rl-area-confirmation__information {
        min-height: auto;
    }

    .rl-area-confirmation__map-link {
        margin-top: 24px;
    }

    .rl-area-confirmation__checker {
        display: grid;

        grid-template-columns:
            minmax(280px, 0.78fr)
            minmax(0, 1.22fr);
    }

    .rl-area-confirmation__map-visual {
        height: 100%;
        min-height: 440px;

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

        border-bottom: 0;
    }
    .rl-next-steps__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 25px;
    }

    .rl-next-steps__introduction {
        display: grid;

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

        align-items: end;
        gap: 28px;
    }

    .rl-next-steps__introduction > p {
        max-width: 650px;
        margin-bottom: 0;
    }

    .rl-next-steps__layout {
        grid-template-columns: 1fr;
    }

    .rl-next-steps__preview {
        min-height: 465px;
    }

    .rl-next-steps__list {
        display: grid;

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

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

    .rl-next-steps__connector {
        display: none;
    }

    .rl-next-step {
        grid-template-columns:
            43px minmax(0, 1fr);

        align-content: start;
        align-items: center;

        min-height: 245px;

        padding: 19px;
    }

    .rl-next-step:hover,
    .rl-next-step:focus-visible,
    .rl-next-step.is-active {
        transform: translateY(-6px);
    }

    .rl-next-step__number {
        width: 43px;
        height: 43px;
    }

    .rl-next-step__icon {
        justify-self: end;

        width: 48px;
        height: 48px;
    }

    .rl-next-step__content {
        grid-column: 1 / -1;

        margin-top: 13px;
    }

    .rl-next-step__action {
        grid-column: 1 / -1;

        width: 100%;
        height: 39px;

        margin-top: auto;

        border-radius: 12px;
    }

    .rl-next-steps__footer {
        align-items: flex-start;
    }

    .rl-form-notice {
        top:
            calc(
                var(--rl-nav-top) +
                var(--rl-nav-height) +
                10px
            );
    }
    .rl-contact-main__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 25px;
    }

    .rl-contact-main__introduction {
        display: grid;

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

        align-items: end;
        gap: 28px;
    }

    .rl-contact-main__introduction > p {
        max-width: 650px;
        margin-bottom: 0;
    }

    .rl-contact-main__layout {
        grid-template-columns: 1fr;
    }

    .rl-contact-main__sidebar {
        position: static;

        display: grid;

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

        gap: 20px;
    }

    .rl-contact-main__sidebar-top,
    .rl-contact-main__sidebar-description,
    .rl-contact-main__tips,
    .rl-contact-main__direct {
        grid-column: 1;
    }

    .rl-contact-main__summary {
        grid-column: 2;
        grid-row: 1 / span 4;
    }

    .rl-contact-main__summary-item {
        min-height: 64px;
    }
     .rl-contact-bar {
        margin-top: -34px;
    }

    .rl-contact-bar__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 17px;
    }

    .rl-contact-bar__header > p {
        max-width: 650px;
    }

    .rl-contact-bar__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .rl-contact-card:last-child {
        grid-column: 1 / -1;
    }

    .rl-contact-card:last-child
    .rl-contact-card__link {
        grid-template-columns:
            52px minmax(0, 1fr) 42px;

        min-height: 125px;
    }

    .rl-contact-bar__footer {
        align-items: flex-start;
    }

    .rl-contact-bar__footer-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .rl-contact-hero {
        padding:
            calc(
                var(--rl-nav-safe-area) + 13px
            )
            34px
            82px;
    }

    .rl-contact-hero__media {
        width: 51%;

        border-radius:
            27px 27px 27px 85px;
    }

    .rl-contact-hero__container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(285px, 0.52fr);

        gap: 34px;
    }

    .rl-contact-hero__title {
        font-size:
            clamp(2.9rem, 7.1vw, 4.8rem);
    }

    .rl-contact-hero__description {
        max-width: 550px;

        font-size: 0.91rem;
    }

    .rl-contact-hero__estimate-card {
        width: min(100%, 340px);
        padding: 17px;

        border-radius: 22px;
    }

    .rl-contact-hero__service {
        min-height: 49px;
    }

    .rl-contact-hero__service-list {
        gap: 6px;
        padding-block: 13px;
    }

    .rl-contact-hero__service small {
        display: none;
    }

    .rl-contact-hero__estimate-footer > div {
        display: none;
    }

    .rl-contact-hero__estimate-footer {
        justify-content: flex-end;
    }

    .rl-contact-hero__bottom {
        right: 34px;
        left: 34px;
    }

}


/* =====================================================
   RESPONSIVE 3 — PHONES
===================================================== */

@media (max-width: 767px) {
    .rl-area-confirmation__water-shape {
        right: -360px;

        opacity: 0.13;
    }

    .rl-area-confirmation__water-ring {
        left: -330px;

        opacity: 0.4;
    }

    .rl-area-confirmation__lawn-lines {
        right: -680px;

        opacity: 0.09;
    }

    .rl-area-confirmation__leaf,
    .rl-area-confirmation__route {
        display: none;
    }

    .rl-area-confirmation__header {
        margin-bottom: 36px;
    }

    .rl-area-confirmation__heading h2 {
        font-size:
            clamp(2.45rem, 10vw, 3.8rem);
    }

    .rl-area-confirmation__introduction {
        display: block;
    }

    .rl-area-confirmation__introduction > p {
        margin-bottom: 17px;

        font-size: 0.89rem;
        line-height: 1.67;
    }

    .rl-area-confirmation__layout {
        display: flex;
        flex-direction: column;
    }

    .rl-area-confirmation__checker {
        order: 1;

        display: block;

        border-radius: 25px;
    }

    .rl-area-confirmation__information {
        order: 2;

        padding: 22px;

        border-radius: 24px;
    }

    .rl-area-confirmation__map-visual {
        height: 210px;
        min-height: 0;

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

    .rl-area-confirmation__checker-content {
        padding: 22px;
    }

    .rl-area-confirmation__actions {
        grid-template-columns: 1fr 1fr;
    }
      .rl-next-steps__water-shape {
        right: -350px;

        opacity: 0.14;
    }

    .rl-next-steps__water-ring {
        left: -330px;

        opacity: 0.45;
    }

    .rl-next-steps__lawn-lines {
        right: -680px;

        opacity: 0.08;
    }

    .rl-next-steps__leaf,
    .rl-next-steps__route {
        display: none;
    }

    .rl-next-steps__header {
        margin-bottom: 36px;
    }

    .rl-next-steps__heading h2 {
        font-size:
            clamp(2.45rem, 10vw, 3.8rem);
    }

    .rl-next-steps__introduction {
        display: block;
    }

    .rl-next-steps__introduction > p {
        margin-bottom: 17px;

        font-size: 0.89rem;
        line-height: 1.67;
    }

    .rl-next-steps__layout {
        display: flex;
        flex-direction: column;
    }

    .rl-next-steps__list {
        order: 1;

        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rl-next-steps__preview {
        order: 2;

        min-height: 440px;

        padding: 24px;

        border-radius: 25px;
    }

    .rl-next-step {
        grid-template-columns:
            42px 48px minmax(0, 1fr) 39px;

        min-height: 135px;

        padding: 17px;

        border-radius: 21px;
    }

    .rl-next-step:hover,
    .rl-next-step:focus-visible,
    .rl-next-step.is-active {
        transform: translateX(5px);
    }

    .rl-next-step__number {
        width: 42px;
        height: 42px;
    }

    .rl-next-step__icon {
        justify-self: auto;

        width: 48px;
        height: 48px;
    }

    .rl-next-step__content {
        grid-column: auto;

        margin-top: 0;
    }

    .rl-next-step__content > span {
        font-size: 0.63rem;
    }

    .rl-next-step__action {
        grid-column: auto;

        width: 39px;
        height: 39px;

        margin-top: 0;
    }

    .rl-next-steps__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 19px;

        padding: 22px;

        border-radius: 20px;
    }

    .rl-next-steps__footer-actions {
        width: 100%;
    }

    .rl-next-steps__email,
    .rl-next-steps__estimate {
        flex: 1 1 0;
    }
     .rl-form-notice {
        grid-template-columns:
            42px minmax(0, 1fr) 34px;

        width:
            calc(100% - 24px);

        padding: 12px;
        gap: 10px;

        border-radius: 16px;
    }

    .rl-form-notice__icon {
        width: 42px;
        height: 42px;

        border-radius: 13px;
    }

    .rl-form-notice__close {
        width: 34px;
        height: 34px;
    }
    .rl-contact-main__water-shape {
        right: -360px;

        opacity: 0.13;
    }

    .rl-contact-main__water-ring {
        left: -330px;

        opacity: 0.4;
    }

    .rl-contact-main__lawn-lines {
        right: -680px;

        opacity: 0.1;
    }

    .rl-contact-main__leaf,
    .rl-contact-main__mulch,
    .rl-contact-main__route {
        display: none;
    }

    .rl-contact-main__header {
        margin-bottom: 36px;
    }

    .rl-contact-main__heading h2 {
        font-size:
            clamp(2.45rem, 10vw, 3.8rem);
    }

    .rl-contact-main__introduction {
        display: block;
    }

    .rl-contact-main__introduction > p {
        margin-bottom: 17px;

        font-size: 0.89rem;
        line-height: 1.67;
    }

    .rl-contact-main__layout {
        display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    min-width: 0;
    }

    .rl-contact-main__form-card {
         order: 1;

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

    padding: 22px;

    border-radius: 25px;
    box-sizing: border-box;
    }

    .rl-contact-main__sidebar {
        order: 2;

    display: block;

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

    padding: 22px;

    border-radius: 24px;
    box-sizing: border-box;
    }

    .rl-contact-main__summary {
        margin-top: 18px;
    }

    .rl-contact-main__progress {
        margin-bottom: 25px;
        padding: 16px;
    }

    .rl-estimate-form__fields,
    .rl-estimate-services {
        grid-template-columns: 1fr;
    }

    .rl-estimate-form__group-description {
        margin-left: 0;
    }

    .rl-estimate-service {
        min-height: 88px;
    }

    .rl-estimate-form__submit-row {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .rl-estimate-form__submit {
        width: 100%;
        min-width: 0;
    }

    .rl-estimate-form__status {
        text-align: left;
    }
     .rl-contact-bar {
        margin-top: -24px;

        padding-right: 18px;
        padding-left: 18px;
    }

    .rl-contact-bar__background {
        inset: 24px 0 0;
    }

    .rl-contact-bar__water-ring {
        right: -280px;

        opacity: 0.37;
    }

    .rl-contact-bar__leaf {
        display: none;
    }

    .rl-contact-bar__lawn-lines {
        right: -330px;

        opacity: 0.08;
    }

    .rl-contact-bar__shell {
        padding: 22px;

        border-radius: 25px;
    }

    .rl-contact-bar__header {
        margin-bottom: 23px;
    }

    .rl-contact-bar__header h2 {
        font-size:
            clamp(1.9rem, 8vw, 2.8rem);
    }

    .rl-contact-bar__header > p {
        font-size: 0.78rem;
        line-height: 1.6;
    }

    .rl-contact-bar__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rl-contact-card:last-child {
        grid-column: auto;
    }

    .rl-contact-card__link,
    .rl-contact-card:last-child
    .rl-contact-card__link {
        grid-template-columns:
            48px minmax(0, 1fr) 38px;

        min-height: 125px;

        padding: 15px;

        border-radius: 19px;
    }

    .rl-contact-card__icon {
        width: 48px;
        height: 48px;

        border-radius: 14px;
    }

    .rl-contact-card__content > strong {
        font-size: 0.94rem;
    }

    .rl-contact-card__content > span {
        font-size: 0.59rem;
    }

    .rl-contact-bar__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;

        padding: 17px;
    }

    .rl-contact-bar__estimate {
        width: 100%;
    }

    .rl-contact-hero {
        align-items: center;

        padding:
            calc(
                var(--rl-nav-safe-area) + 14px
            )
            24px
            78px;
    }

    .rl-contact-hero__media {
        inset: 5px;
        width: auto;

        border-radius: 25px;
    }

    .rl-contact-hero__media img {
        object-position: 62% center;
    }

    .rl-contact-hero__image-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2, 18, 32, 0.91) 0%,
                rgba(2, 26, 51, 0.73) 64%,
                rgba(2, 26, 51, 0.43) 100%
            ),
            linear-gradient(
                180deg,
                rgba(2, 26, 51, 0.26),
                rgba(2, 20, 34, 0.28) 48%,
                rgba(2, 18, 30, 0.76)
            );
    }

    .rl-contact-hero__container {
        display: flex;
        align-items: center;

        height: 100%;
    }

    .rl-contact-hero__content {
        width: 100%;
        max-width: 610px;
    }

    .rl-contact-hero__eyebrow {
        margin-bottom: 16px;

        font-size: 0.58rem;
    }

    .rl-contact-hero__title {
        max-width: 590px;

        font-size:
            clamp(2.75rem, 11vw, 4.3rem);
        line-height: 0.94;
    }

    .rl-contact-hero__description {
        max-width: 530px;

        margin-top: 17px;

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

    .rl-contact-hero__actions {
        margin-top: 21px;
    }

    .rl-contact-hero__primary {
        min-height: 52px;

        padding-inline: 18px;

        font-size: 0.76rem;
    }

    .rl-contact-hero__call {
        min-height: 52px;
    }

    .rl-contact-hero__trust {
        gap: 9px;

        margin-top: 18px;
    }

    .rl-contact-hero__trust-item {
        font-size: 0.61rem;
    }

    .rl-contact-hero__trust-item:last-child,
    .rl-contact-hero__trust-divider:last-of-type {
        display: none;
    }

    .rl-contact-hero__estimate-card {
        display: none;
    }

    .rl-contact-hero__bottom {
        right: 19px;
        bottom: 13px;
        left: 19px;

        min-height: 46px;

        padding-inline: 12px;
    }

    .rl-contact-hero__email {
        max-width: 55%;
    }

    .rl-contact-hero__email span {
        overflow: hidden;

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

    .rl-contact-hero__service-area span {
        display: none;
    }

    .rl-contact-hero__service-area::before {
        content: "Service areas";

        white-space: nowrap;
    }
    .rl-contact-main__form-card,
.rl-contact-main__sidebar {
    width: 100%;
    max-width: none;
    min-width: 0;

    box-sizing: border-box;
}

}


/* =====================================================
   RESPONSIVE 4 — SMALL PHONES
===================================================== */

@media (max-width: 479px) {
    .rl-area-confirmation__header {
        margin-bottom: 29px;
    }

    .rl-area-confirmation__heading h2 {
        font-size:
            clamp(2.15rem, 11.5vw, 3rem);
    }

    .rl-area-confirmation__introduction > p {
        font-size: 0.82rem;
    }

    .rl-area-confirmation__intro-note {
        font-size: 0.58rem;
    }

    .rl-area-confirmation__checker {
        border-radius: 21px;
    }

    .rl-area-confirmation__map-visual {
        height: 180px;
    }

    .rl-area-confirmation__checker-content {
        padding: 17px;
    }

    .rl-area-confirmation__information {
        padding: 19px;

        border-radius: 21px;
    }

    .rl-area-confirmation__search-control {
        grid-template-columns: 1fr;

        padding: 5px;
    }

    .rl-area-confirmation__search-control > svg {
        left: 15px;
    }

    .rl-area-confirmation__search-control input {
        min-height: 48px;

        padding-right: 12px;
    }

    .rl-area-confirmation__search-control button {
        width: 100%;
        min-height: 44px;

        margin: 0;
    }

    .rl-area-confirmation__result {
        grid-template-columns:
            39px minmax(0, 1fr);

        padding: 11px;
    }

    .rl-area-confirmation__result-icon {
        width: 39px;
        height: 39px;
    }

    .rl-area-confirmation__actions {
        grid-template-columns: 1fr;
    }

    .rl-area-confirmation__call,
    .rl-area-confirmation__estimate {
        width: 100%;
    }

    .rl-area-confirmation__areas {
        gap: 6px;
    }

    .rl-area-confirmation__areas button {
        min-height: 33px;

        padding: 7px 9px;

        font-size: 0.54rem;
    }
     .rl-next-steps__header {
        margin-bottom: 29px;
    }

    .rl-next-steps__heading h2 {
        font-size:
            clamp(2.15rem, 11.5vw, 3rem);
    }

    .rl-next-steps__introduction > p {
        font-size: 0.82rem;
    }

    .rl-next-steps__intro-note p {
        font-size: 0.57rem;
    }

    .rl-next-step {
        grid-template-columns:
            38px minmax(0, 1fr) 35px;

        gap: 11px;

        min-height: 125px;

        padding: 14px;

        border-radius: 18px;
    }

    .rl-next-step__number {
        width: 38px;
        height: 38px;

        border-radius: 12px;
    }

    .rl-next-step__icon {
        display: none;
    }

    .rl-next-step__content strong {
        font-size: 1.04rem;
    }

    .rl-next-step__content > span {
        display: -webkit-box;

        overflow: hidden;

        font-size: 0.58rem;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .rl-next-step__action {
        width: 35px;
        height: 35px;

        border-radius: 11px;
    }

    .rl-next-steps__preview {
        min-height: 410px;

        padding: 20px;

        border-radius: 21px;
    }

    .rl-next-steps__preview-icon {
        width: 60px;
        height: 60px;

        margin-block: 27px 23px;

        border-radius: 19px;
    }

    .rl-next-steps__preview-icon svg {
        width: 27px;
        height: 27px;
    }

    .rl-next-steps__preview h3 {
        font-size: 1.65rem;
    }

    .rl-next-steps__preview > p {
        font-size: 0.71rem;
        line-height: 1.58;
    }

    .rl-next-steps__footer {
        padding: 18px;
    }

    .rl-next-steps__footer-copy {
        align-items: flex-start;
    }

    .rl-next-steps__footer-icon {
        width: 43px;
        height: 43px;

        border-radius: 13px;
    }

    .rl-next-steps__footer-copy strong {
        font-size: 0.88rem;
    }

    .rl-next-steps__footer-copy p {
        font-size: 0.59rem;
    }

    .rl-next-steps__footer-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .rl-next-steps__email,
    .rl-next-steps__estimate {
        width: 100%;
    }
      .rl-form-notice {
        top:
            calc(
                var(--rl-nav-top) +
                var(--rl-nav-height) +
                7px
            );

        width:
            calc(100% - 16px);

        padding: 10px;

        border-radius: 14px;
    }

    .rl-form-notice__content strong {
        font-size: 0.82rem;
    }

    .rl-form-notice__content p {
        font-size: 0.6rem;
        line-height: 1.4;
    }
    .rl-contact-main__header {
        margin-bottom: 29px;
    }

    .rl-contact-main__heading h2 {
        font-size:
            clamp(2.15rem, 11.5vw, 3rem);
    }

    .rl-contact-main__introduction > p {
        font-size: 0.82rem;
    }

    .rl-contact-main__intro-note {
        font-size: 0.58rem;
    }

    .rl-contact-main__form-card {
        width: 100%;

    padding: 15px;

    border-radius: 21px;
    box-sizing: border-box;
    }

    .rl-contact-main__sidebar {
        padding: 19px;

        border-radius: 21px;
    }

    .rl-contact-main__progress {
        padding: 14px;

        border-radius: 15px;
    }

    .rl-estimate-form {
        gap: 23px;
    }

    .rl-estimate-form__group {
        padding-bottom: 23px;
    }

    .rl-estimate-form__group legend {
        margin-bottom: 17px;
    }

    .rl-estimate-form__group legend > span:first-child {
        width: 35px;
        height: 35px;
    }

    .rl-estimate-form__group legend > span:last-child {
        font-size: 0.96rem;
    }

    .rl-estimate-field__control input,
    .rl-estimate-field__control select {
        min-height: 50px;

        font-size: 0.7rem;
    }

    .rl-estimate-field__control textarea {
        min-height: 125px;

        font-size: 0.7rem;
    }

    .rl-estimate-service {
        grid-template-columns:
            39px minmax(0, 1fr) 23px;

        min-height: 83px;

        padding: 12px;

        border-radius: 15px;
    }

    .rl-estimate-service__icon {
        width: 39px;
        height: 39px;

        border-radius: 12px;
    }

    .rl-estimate-service__content strong {
        font-size: 0.67rem;
    }

    .rl-estimate-service__content small {
        font-size: 0.5rem;
    }

    .rl-estimate-service__check {
        width: 23px;
        height: 23px;
    }

    .rl-estimate-form__consent {
        font-size: 0.58rem;
    }

    .rl-estimate-form__submit {
        min-height: 53px;

        font-size: 0.72rem;
    }
       .rl-contact-bar {
        margin-top: -18px;

        padding-right: 12px;
        padding-left: 12px;
    }

    .rl-contact-bar__shell {
        padding: 17px;

        border-radius: 21px;
    }

    .rl-contact-bar__eyebrow {
        font-size: 0.55rem;
    }

    .rl-contact-bar__header h2 {
        font-size:
            clamp(1.7rem, 9.4vw, 2.3rem);
    }

    .rl-contact-bar__header > p {
        font-size: 0.72rem;
    }

    .rl-contact-card__link,
    .rl-contact-card:last-child
    .rl-contact-card__link {
        grid-template-columns:
            42px minmax(0, 1fr) 34px;

        gap: 10px;

        min-height: 112px;

        padding: 13px;

        border-radius: 17px;
    }

    .rl-contact-card__icon {
        width: 42px;
        height: 42px;

        border-radius: 13px;
    }

    .rl-contact-card__icon svg {
        width: 19px;
        height: 19px;
    }

    .rl-contact-card__content > small {
        margin-bottom: 4px;

        font-size: 0.5rem;
    }

    .rl-contact-card__content > strong {
        font-size: 0.82rem;
    }

    .rl-contact-card__content > span {
        display: -webkit-box;

        overflow: hidden;

        font-size: 0.54rem;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .rl-contact-card__action {
        width: 34px;
        height: 34px;

        border-radius: 11px;
    }

    .rl-contact-card__action svg {
        width: 15px;
        height: 15px;
    }

    .rl-contact-bar__footer {
        padding: 15px;
    }

    .rl-contact-bar__footer-copy p {
        font-size: 0.59rem;
    }

    .rl-contact-bar__estimate {
        min-height: 48px;
    }

    .rl-contact-hero {
        padding:
            calc(
                var(--rl-nav-safe-area) + 9px
            )
            18px
            71px;
    }

    .rl-contact-hero__media {
        inset: 4px;

        border-radius: 22px;
    }

    .rl-contact-hero__eyebrow {
        min-height: 34px;

        margin-bottom: 13px;
        padding-right: 10px;

        font-size: 0.51rem;
        letter-spacing: 0.08em;
    }

    .rl-contact-hero__eyebrow-icon {
        width: 23px;
        height: 23px;
    }

    .rl-contact-hero__title {
        font-size:
            clamp(2.25rem, 12.2vw, 3.25rem);
        line-height: 0.96;
    }

    .rl-contact-hero__description {
        display: -webkit-box;

        max-width: 410px;

        margin-top: 13px;
        overflow: hidden;

        font-size: 0.77rem;
        line-height: 1.48;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .rl-contact-hero__actions {
        display: grid;

        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 0.8fr);

        gap: 8px;

        margin-top: 17px;
    }

    .rl-contact-hero__primary {
        width: 100%;
        min-height: 48px;

        padding-inline: 11px;

        border-radius: 14px;

        font-size: 0.65rem;
    }

    .rl-contact-hero__primary svg {
        width: 15px;
        height: 15px;
    }

    .rl-contact-hero__call {
        justify-content: center;

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

        padding: 6px;

        border-radius: 14px;
    }

    .rl-contact-hero__call-icon {
        width: 35px;
        height: 35px;
    }

    .rl-contact-hero__call-copy {
        display: none;
    }

    .rl-contact-hero__trust {
        margin-top: 14px;
    }

    .rl-contact-hero__trust-item {
        font-size: 0.55rem;
    }

    .rl-contact-hero__trust-divider {
        height: 12px;
    }

    .rl-contact-hero__bottom {
        right: 14px;
        bottom: 9px;
        left: 14px;

        min-height: 43px;

        border-radius: 13px;
    }

    .rl-contact-hero__email {
        max-width: calc(100% - 94px);

        font-size: 0.56rem;
    }

    .rl-contact-hero__service-area {
        font-size: 0.56rem;
    }

}