/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   CONTACT.HTML
   02. CONTACT HERO — 2026 REDESIGN

   • Full viewport
   • Fixed header overlays Hero
   • No negative margins
   • Existing background image route
   • Original two-column structure retained
   • No decorative counters
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-contact-hero {
    position: relative;

    width: 100%;

    height: 100vh;
    height: 100svh;

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

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

    margin: 0;
    padding: 0;

    overflow: hidden;

    color:
        var(--ul-white);

    background:
        #173923;

    isolation: isolate;
}


/* ==========================================================
   MEDIA
========================================================== */

.ul-contact-hero__media {
    position: absolute;

    z-index: -8;

    inset: -2%;

    width: 104%;
    height: 104%;

    pointer-events: none;

    background-image:
        url("/img/concrete/c\ \(11\).jpg");

    background-repeat:
        no-repeat;

    background-position:
        62% center;

    background-size:
        cover;

    transform:
        translate3d(
            var(--ul-contact-media-x, 0px),
            var(--ul-contact-media-y, 0px),
            0
        )
        scale(1.045);

    will-change:
        transform;
}


/* ==========================================================
   PRIMARY SHADE
========================================================== */

.ul-contact-hero__shade {
    position: absolute;

    z-index: -7;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(14, 42, 23, .94) 0%,

            rgba(17, 49, 28, .89) 29%,

            rgba(18, 52, 30, .72) 50%,

            rgba(15, 43, 26, .48) 69%,

            rgba(10, 29, 18, .55) 100%
        ),

        linear-gradient(
            180deg,

            rgba(4, 18, 10, .32) 0%,

            rgba(4, 18, 10, .04) 37%,

            rgba(5, 19, 11, .15) 67%,

            rgba(4, 16, 9, .67) 100%
        );
}


/* ==========================================================
   COLOR WASH
========================================================== */

.ul-contact-hero__color {
    position: absolute;

    z-index: -6;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 13% 43%,

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

            transparent 31%
        ),

        radial-gradient(
            circle at 86% 38%,

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

            transparent 29%
        );
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-contact-hero__topography {
    position: absolute;

    z-index: -5;

    top: -320px;
    right: -320px;

    width: 820px;
    height: 820px;

    pointer-events: none;

    opacity: .42;

    transform:
        rotate(-7deg);

    background:

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

            transparent 0,

            transparent 36px,

            rgba(255, 255, 255, .027) 37px,

            rgba(255, 255, 255, .027) 38px,

            transparent 39px,

            transparent 72px
        ),

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

            transparent 0,

            transparent 52px,

            rgba(167, 213, 118, .030) 53px,

            rgba(167, 213, 118, .030) 54px,

            transparent 55px,

            transparent 97px
        );
}


/* ==========================================================
   AMBIENT
========================================================== */

.ul-contact-hero__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-contact-hero__ambient--green {
    left: -330px;
    bottom: -420px;

    width: 740px;
    height: 740px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 72%
        );
}


.ul-contact-hero__ambient--cyan {
    top: -350px;
    right: -320px;

    width: 760px;
    height: 760px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 72%
        );
}


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

   Header floats over Hero, so top padding reserves visual
   breathing space without moving the entire Hero.
========================================================== */

.ul-contact-hero__layout {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(340px, .48fr);

    align-items: center;

    gap:
        clamp(60px, 7vw, 115px);

    width:
        var(--ul-container);

    height: 100%;

    margin-inline: auto;

    padding-top:
        calc(
            var(--ul-header-height) +
            clamp(24px, 4vh, 44px)
        );

    padding-bottom:
        clamp(96px, 11vh, 126px);
}


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

.ul-contact-hero__content {
    position: relative;

    max-width: 800px;

    align-self: center;
}


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

.ul-contact-hero__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom:
        clamp(18px, 2.4vh, 25px);

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

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: .11em;

    text-transform: uppercase;
}


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

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

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 5px
        rgba(241, 215, 55, .10);
}


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

.ul-contact-hero__eyebrow-line {
    width:
        clamp(45px, 5vw, 70px);

    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-400),

            var(--ul-logo-yellow),

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


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

.ul-contact-hero__title {
    max-width: 800px;

    margin:
        0 0
        clamp(24px, 3vh, 34px);

    color:
        var(--ul-white);

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

    font-size:
        clamp(3.9rem, 6vw, 6.75rem);

    font-weight: 500;

    line-height: .90;

    letter-spacing: -.055em;
}


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

.ul-contact-hero__title > span {
    display: block;
}


.ul-contact-hero__title-accent {
    margin-top: .07em;

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


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

.ul-contact-hero__description {
    max-width: 650px;

    margin:
        0 0
        clamp(28px, 4vh, 40px);

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

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

    font-size:
        clamp(1.05rem, 1.07vw, 1.18rem);

    line-height: 1.66;
}


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

.ul-contact-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;
}


/* ==========================================================
   PRIMARY CTA
========================================================== */

.ul-contact-hero__primary {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 17px;

    min-height: 58px;

    padding:
        6px 7px
        6px 19px;

    border:
        1px solid
        rgba(241, 215, 55, .32);

    border-radius: 15px;

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

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

    box-shadow:

        0 18px 38px
        rgba(4, 25, 12, .23);

    font-size: .90rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

    transition:

        color .35s ease,

        background-color .35s ease,

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

        box-shadow .35s ease;
}


/* ==========================================================
   PRIMARY ICON
========================================================== */

.ul-contact-hero__primary-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

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

    transition:

        background-color .35s ease,

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


.ul-contact-hero__primary-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   PRIMARY HOVER
========================================================== */

.ul-contact-hero__primary:hover {
    color:
        var(--ul-white);

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

    transform:
        translateY(-3px);

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


.ul-contact-hero__primary:hover
.ul-contact-hero__primary-icon {
    background:
        var(--ul-logo-orange);

    transform:
        translateY(3px);
}


/* ==========================================================
   PHONE
========================================================== */

.ul-contact-hero__call {
    display: grid;

    grid-template-columns:
        43px
        auto
        33px;

    align-items: center;

    gap: 11px;

    min-height: 58px;

    padding:
        6px 7px
        6px 8px;

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

    border-radius: 15px;

    color:
        var(--ul-white);

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

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

    backdrop-filter:
        blur(12px);

    transition:

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

        background-color .35s ease,

        border-color .35s ease;
}


/* ==========================================================
   CALL ICON
========================================================== */

.ul-contact-hero__call-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    border-radius: 11px;

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

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


.ul-contact-hero__call-icon svg {
    width: 19px;
    height: 19px;
}


/* ==========================================================
   CALL COPY
========================================================== */

.ul-contact-hero__call-copy {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ul-contact-hero__call-copy small {
    color:
        rgba(255, 255, 255, .55);

    font-size: .72rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .04em;
}


.ul-contact-hero__call-copy strong {
    color:
        var(--ul-white);

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

    font-size: 1rem;

    font-weight: 500;

    line-height: 1;
}


/* ==========================================================
   CALL ARROW
========================================================== */

.ul-contact-hero__call-arrow {
    display: grid;

    place-items: center;

    width: 33px;
    height: 33px;

    border-radius: 9px;

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

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

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


.ul-contact-hero__call-arrow svg {
    width: 15px;
    height: 15px;
}


/* ==========================================================
   CALL HOVER
========================================================== */

.ul-contact-hero__call:hover {
    border-color:
        rgba(112, 186, 202, .30);

    background:
        rgba(112, 186, 202, .11);

    transform:
        translateY(-3px);
}


.ul-contact-hero__call:hover
.ul-contact-hero__call-arrow {
    transform:
        translateX(3px);
}


/* ==========================================================
   SUPPORT STRIP
========================================================== */

.ul-contact-hero__support {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top:
        clamp(26px, 3.5vh, 38px);

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

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

    font-weight: 500;

    line-height: 1.4;
}


/* ==========================================================
   SUPPORT DOT
========================================================== */

.ul-contact-hero__support-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 4px
        rgba(167, 213, 118, .09);
}


/* ==========================================================
   SUPPORT SEPARATOR
========================================================== */

.ul-contact-hero__support i {
    width: 1px;
    height: 15px;

    margin:
        0 3px;

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


/* ==========================================================
   RIGHT PANEL
========================================================== */

.ul-contact-hero__panel {
    position: relative;

    align-self: center;

    width: 100%;

    max-width: 440px;

    justify-self: end;

    padding:
        clamp(26px, 2.8vw, 38px);

    overflow: hidden;

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

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

    color:
        var(--ul-white);

    background:

        linear-gradient(
            145deg,

            rgba(27, 66, 38, .74),

            rgba(21, 54, 32, .57)
        );

    box-shadow:

        0 28px 75px
        rgba(3, 18, 9, .29),

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

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

    backdrop-filter:
        blur(17px);

    isolation: isolate;
}


/* ==========================================================
   PANEL DEPTH
========================================================== */

.ul-contact-hero__panel::before {
    content: "";

    position: absolute;

    z-index: -2;

    top: -220px;
    right: -180px;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    pointer-events: none;

    background:

        radial-gradient(
            circle,

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

            rgba(167, 213, 118, .025) 48%,

            transparent 72%
        );
}


/* ==========================================================
   PANEL TOPOGRAPHY
========================================================== */

.ul-contact-hero__panel::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -220px;
    bottom: -240px;

    width: 520px;
    height: 520px;

    pointer-events: none;

    opacity: .48;

    background:

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

            transparent 0,

            transparent 30px,

            rgba(255, 255, 255, .031) 31px,

            rgba(255, 255, 255, .031) 32px,

            transparent 33px,

            transparent 61px
        );
}


/* ==========================================================
   PANEL SPECTRUM
========================================================== */

.ul-contact-hero__panel-spectrum {
    position: absolute;

    top: 0;
    left: 28px;

    width: 95px;
    height: 4px;

    border-radius:
        0 0 999px 999px;

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


/* ==========================================================
   PANEL TOP
========================================================== */

.ul-contact-hero__panel-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

    padding-bottom: 20px;

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


/* ==========================================================
   PANEL HEADING COPY
========================================================== */

.ul-contact-hero__panel-top > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.ul-contact-hero__panel-top span {
    color:
        var(--ul-logo-yellow);

    font-size: .76rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.ul-contact-hero__panel-top strong {
    color:
        var(--ul-white);

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

    font-size:
        1.16rem;

    font-weight: 500;

    line-height: 1.2;
}


/* ==========================================================
   PANEL MARK
========================================================== */

.ul-contact-hero__panel-mark {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    flex: 0 0 auto;

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

    border-radius: 13px;

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

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


.ul-contact-hero__panel-mark svg {
    width: 22px;
    height: 22px;
}


/* ==========================================================
   PANEL INTRO
========================================================== */

.ul-contact-hero__panel-intro {
    margin:
        20px 0;

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

    font-size:
        clamp(.94rem, .92vw, 1.02rem);

    line-height: 1.57;
}


/* ==========================================================
   PANEL ITEMS
========================================================== */

.ul-contact-hero__panel-items {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


/* ==========================================================
   PANEL ITEM
========================================================== */

.ul-contact-hero__panel-item {
    display: grid;

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

    align-items: center;

    gap: 12px;

    min-height: 67px;

    padding:
        9px 10px;

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

    border-radius: 13px;

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


/* ==========================================================
   PANEL ICON
========================================================== */

.ul-contact-hero__panel-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    border-radius: 11px;
}


.ul-contact-hero__panel-icon svg {
    width: 20px;
    height: 20px;
}


.ul-contact-hero__panel-icon--green {
    color:
        var(--ul-green-400);

    background:
        rgba(167, 213, 118, .09);
}


.ul-contact-hero__panel-icon--blue {
    color:
        var(--ul-logo-cyan);

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


.ul-contact-hero__panel-icon--orange {
    color:
        var(--ul-logo-orange);

    background:
        rgba(233, 145, 41, .09);
}


/* ==========================================================
   PANEL ITEM COPY
========================================================== */

.ul-contact-hero__panel-item > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ul-contact-hero__panel-item strong {
    color:
        rgba(255, 255, 255, .93);

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

    font-size: .99rem;

    font-weight: 500;

    line-height: 1.2;
}


.ul-contact-hero__panel-item span {
    color:
        rgba(255, 255, 255, .54);

    font-size: .80rem;

    line-height: 1.42;
}


/* ==========================================================
   PANEL BOTTOM
========================================================== */

.ul-contact-hero__panel-bottom {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 20px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(255, 255, 255, .10);

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

    font-size: .80rem;

    font-weight: 500;
}


/* ==========================================================
   PANEL STATUS
========================================================== */

.ul-contact-hero__panel-status {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 4px
        rgba(167, 213, 118, .09);
}


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

.ul-contact-hero__bottom {
    position: absolute;

    z-index: 4;

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

    height:
        clamp(72px, 9vh, 94px);

    border-top:
        1px solid
        rgba(255, 255, 255, .10);

    background:

        linear-gradient(
            180deg,

            rgba(9, 26, 15, .13),

            rgba(8, 24, 14, .34)
        );

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

    backdrop-filter:
        blur(8px);
}


/* ==========================================================
   BOTTOM INNER
========================================================== */

.ul-contact-hero__bottom-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width:
        var(--ul-container);

    height: 100%;

    margin-inline: auto;
}


/* ==========================================================
   SCROLL LINK
========================================================== */

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

    align-items: center;

    gap: 12px;

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

    font-size: .83rem;

    font-weight: 600;

    letter-spacing: .04em;

    text-transform: uppercase;

    transition:
        color .30s ease;
}


/* ==========================================================
   SCROLL ICON
========================================================== */

.ul-contact-hero__scroll-icon {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

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

    border-radius: 10px;

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

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

    transition:

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

        background-color .30s ease;
}


.ul-contact-hero__scroll-icon svg {
    width: 15px;
    height: 15px;
}


/* ==========================================================
   SCROLL HOVER
========================================================== */

.ul-contact-hero__scroll:hover {
    color:
        var(--ul-white);
}


.ul-contact-hero__scroll:hover
.ul-contact-hero__scroll-icon {
    background:
        rgba(167, 213, 118, .10);

    transform:
        translateY(3px);
}


/* ==========================================================
   COMPANY
========================================================== */

.ul-contact-hero__bottom-company {
    color:
        rgba(255, 255, 255, .42);

    font-size: .77rem;

    font-weight: 600;

    letter-spacing: .06em;

    text-transform: uppercase;
}


/* ==========================================================
   BOTTOM BRAND LINE
========================================================== */

.ul-contact-hero__bottom-line {
    position: absolute;

    z-index: 5;

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

    height: 3px;

    pointer-events: none;

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


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

@media (min-width: 1200px) {

    .ul-contact-hero__layout {
        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(340px, .48fr);
    }


    .ul-contact-hero__panel {
        max-width: 440px;
    }

}


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

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

    .ul-contact-hero__media {
        background-position:
            60% center;
    }


    .ul-contact-hero__shade {
        background:

            linear-gradient(
                90deg,

                rgba(14, 42, 23, .94) 0%,

                rgba(17, 49, 28, .88) 36%,

                rgba(16, 47, 28, .67) 66%,

                rgba(9, 29, 17, .55) 100%
            ),

            linear-gradient(
                180deg,

                rgba(4, 18, 10, .27),

                rgba(4, 18, 10, .06) 45%,

                rgba(4, 16, 9, .66)
            );
    }


    .ul-contact-hero__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(285px, .47fr);

        gap:
            clamp(35px, 5vw, 55px);

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

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


    .ul-contact-hero__title {
        font-size:
            clamp(3.35rem, 6.8vw, 5.1rem);
    }


    .ul-contact-hero__description {
        max-width: 570px;

        font-size: 1rem;
    }


    .ul-contact-hero__panel {
        max-width: 350px;

        padding: 23px;
    }


    .ul-contact-hero__panel-intro {
        margin:
            16px 0;

        font-size: .90rem;
    }


    .ul-contact-hero__panel-item {
        min-height: 60px;
    }


    .ul-contact-hero__panel-item span {
        font-size: .75rem;
    }


    .ul-contact-hero__panel-bottom {
        margin-top: 15px;

        padding-top: 14px;
    }

}


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

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

    .ul-contact-hero__media {
        background-position:
            65% center;
    }


    .ul-contact-hero__shade {
        background:

            linear-gradient(
                180deg,

                rgba(12, 37, 21, .84) 0%,

                rgba(13, 41, 23, .88) 36%,

                rgba(11, 34, 20, .83) 67%,

                rgba(7, 22, 13, .93) 100%
            );
    }


    .ul-contact-hero__layout {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            auto
            auto;

        align-content: center;

        gap:
            clamp(18px, 2.5vh, 25px);

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

        padding-bottom:
            clamp(72px, 9vh, 82px);
    }


    .ul-contact-hero__content {
        max-width: 640px;
    }


    .ul-contact-hero__eyebrow {
        margin-bottom: 14px;

        font-size: .74rem;
    }


    .ul-contact-hero__title {
        max-width: 600px;

        margin-bottom: 18px;

        font-size:
            clamp(2.85rem, 8.5vw, 3.9rem);

        line-height: .92;
    }


    .ul-contact-hero__description {
        max-width: 580px;

        margin-bottom: 20px;

        font-size: .94rem;

        line-height: 1.55;
    }


    .ul-contact-hero__actions {
        gap: 8px;
    }


    .ul-contact-hero__primary {
        min-height: 50px;

        font-size: .78rem;
    }


    .ul-contact-hero__primary-icon {
        width: 38px;
        height: 38px;
    }


    .ul-contact-hero__call {
        min-height: 50px;

        grid-template-columns:
            38px
            auto
            29px;
    }


    .ul-contact-hero__call-icon {
        width: 38px;
        height: 38px;
    }


    .ul-contact-hero__call-arrow {
        width: 29px;
        height: 29px;
    }


    .ul-contact-hero__support {
        margin-top: 17px;

        font-size: .76rem;
    }


    .ul-contact-hero__panel {
        display: grid;

        grid-template-columns:
            auto
            1fr;

        max-width: none;

        padding:
            16px;

        border-radius: 18px;
    }


    .ul-contact-hero__panel-spectrum {
        left: 16px;

        width: 70px;
    }


    .ul-contact-hero__panel-top {
        grid-column:
            1 / -1;

        padding-bottom: 12px;
    }


    .ul-contact-hero__panel-top strong {
        font-size: 1rem;
    }


    .ul-contact-hero__panel-mark {
        width: 40px;
        height: 40px;
    }


    .ul-contact-hero__panel-intro {
        display: none;
    }


    .ul-contact-hero__panel-items {
        grid-column:
            1 / -1;

        display: grid;

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

        gap: 7px;

        margin-top: 12px;
    }


    .ul-contact-hero__panel-item {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        min-height: 94px;

        gap: 7px;

        padding:
            9px;
    }


    .ul-contact-hero__panel-icon {
        width: 36px;
        height: 36px;
    }


    .ul-contact-hero__panel-item strong {
        font-size: .84rem;
    }


    .ul-contact-hero__panel-item span {
        font-size: .70rem;

        line-height: 1.32;
    }


    .ul-contact-hero__panel-bottom {
        display: none;
    }


    .ul-contact-hero__bottom-company {
        display: none;
    }

}


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

@media (max-width: 479px) {

    .ul-contact-hero__media {
        background-position:
            66% center;
    }


    .ul-contact-hero__shade {
        background:

            linear-gradient(
                180deg,

                rgba(11, 35, 20, .86) 0%,

                rgba(12, 39, 22, .90) 37%,

                rgba(10, 31, 18, .89) 68%,

                rgba(6, 21, 12, .95) 100%
            );
    }


    .ul-contact-hero__layout {
        display: grid;

        grid-template-columns: 1fr;

        align-content: center;

        gap:
            clamp(14px, 2vh, 19px);

        padding-top:
            calc(
                var(--ul-header-height) +
                7px
            );

        padding-bottom:
            68px;
    }


    .ul-contact-hero__eyebrow {
        gap: 8px;

        margin-bottom: 11px;

        font-size: .68rem;

        letter-spacing: .085em;
    }


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


    .ul-contact-hero__eyebrow-line {
        width: 37px;
    }


    .ul-contact-hero__title {
        max-width: 460px;

        margin-bottom: 14px;

        font-size:
            clamp(2.35rem, 10.4vw, 3.05rem);

        line-height: .94;
    }


    .ul-contact-hero__description {
        max-width: 450px;

        margin-bottom: 15px;

        font-size: .88rem;

        line-height: 1.50;
    }


    .ul-contact-hero__actions {
        gap: 7px;
    }


    .ul-contact-hero__primary {
        min-height: 46px;

        padding:
            4px 5px
            4px 13px;

        font-size: .73rem;
    }


    .ul-contact-hero__primary-icon {
        width: 36px;
        height: 36px;

        border-radius: 9px;
    }


    .ul-contact-hero__call {
        grid-template-columns:
            36px
            minmax(0, 1fr);

        min-height: 46px;

        padding:
            4px 9px
            4px 5px;
    }


    .ul-contact-hero__call-icon {
        width: 36px;
        height: 36px;

        border-radius: 9px;
    }


    .ul-contact-hero__call-copy small {
        font-size: .66rem;
    }


    .ul-contact-hero__call-copy strong {
        font-size: .90rem;
    }


    .ul-contact-hero__call-arrow {
        display: none;
    }


    .ul-contact-hero__support {
        display: none;
    }


    .ul-contact-hero__panel {
        display: block;

        max-width: none;

        padding:
            14px;

        border-radius: 16px;
    }


    .ul-contact-hero__panel-spectrum {
        left: 14px;

        width: 61px;

        height: 3px;
    }


    .ul-contact-hero__panel-top {
        padding-bottom: 10px;
    }


    .ul-contact-hero__panel-top span {
        font-size: .66rem;
    }


    .ul-contact-hero__panel-top strong {
        font-size: .92rem;
    }


    .ul-contact-hero__panel-mark {
        width: 35px;
        height: 35px;

        border-radius: 10px;
    }


    .ul-contact-hero__panel-mark svg {
        width: 18px;
        height: 18px;
    }


    .ul-contact-hero__panel-intro {
        display: none;
    }


    .ul-contact-hero__panel-items {
        display: grid;

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

        gap: 6px;

        margin-top: 10px;
    }


    .ul-contact-hero__panel-item {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        min-height: 83px;

        gap: 6px;

        padding:
            7px;

        border-radius: 10px;
    }


    .ul-contact-hero__panel-icon {
        width: 31px;
        height: 31px;

        border-radius: 8px;
    }


    .ul-contact-hero__panel-icon svg {
        width: 16px;
        height: 16px;
    }


    .ul-contact-hero__panel-item strong {
        font-size: .72rem;

        line-height: 1.15;
    }


    .ul-contact-hero__panel-item span {
        display: none;
    }


    .ul-contact-hero__panel-bottom {
        display: none;
    }


    .ul-contact-hero__bottom {
        height: 58px;
    }


    .ul-contact-hero__scroll {
        font-size: .69rem;
    }


    .ul-contact-hero__scroll-icon {
        width: 30px;
        height: 30px;
    }


    .ul-contact-hero__bottom-company {
        display: none;
    }

}


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

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

    .ul-contact-hero__media,
    .ul-contact-hero__primary,
    .ul-contact-hero__primary-icon,
    .ul-contact-hero__call,
    .ul-contact-hero__call-arrow,
    .ul-contact-hero__scroll-icon {
        animation: none !important;

        transition: none !important;
    }

}












































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   CONTACT.HTML
   03. CONTACT INFORMATION — 2026 REDESIGN

   • Light editorial transition after Contact Hero
   • Existing information preserved
   • 2 × 2 contact panel
   • Controlled brand spectrum
   • No decorative counters
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-contact-info {
    position: relative;

    padding:
        clamp(105px, 8.5vw, 145px)
        0
        clamp(92px, 7.5vw, 125px);

    overflow: hidden;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            145deg,

            #FBFCF8 0%,

            #F6F9F2 47%,

            #EEF4E9 100%
        );

    isolation: isolate;

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


/* ==========================================================
   TOP TRANSITION
========================================================== */

.ul-contact-info::before {
    content: "";

    position: absolute;

    z-index: 5;

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

    height: 4px;

    pointer-events: none;

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


/* ==========================================================
   SOFT LEFT DEPTH
========================================================== */

.ul-contact-info::after {
    content: "";

    position: absolute;

    z-index: -5;

    top: 0;
    left: 0;

    width: 46%;
    height: 100%;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

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

            transparent
        );
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-contact-info__topography {
    position: absolute;

    z-index: -4;

    top: -340px;
    right: -300px;

    width: 850px;
    height: 850px;

    pointer-events: none;

    opacity: .47;

    transform:
        rotate(-8deg);

    background:

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

            transparent 0,

            transparent 38px,

            rgba(53, 101, 64, .030) 39px,

            rgba(53, 101, 64, .030) 40px,

            transparent 41px,

            transparent 76px
        ),

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

            transparent 0,

            transparent 54px,

            rgba(112, 186, 202, .026) 55px,

            rgba(112, 186, 202, .026) 56px,

            transparent 57px,

            transparent 101px
        );
}


/* ==========================================================
   AMBIENTS
========================================================== */

.ul-contact-info__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-contact-info__ambient--green {
    left: -390px;
    bottom: -430px;

    width: 780px;
    height: 780px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 72%
        );
}


.ul-contact-info__ambient--blue {
    top: -350px;
    right: -310px;

    width: 740px;
    height: 740px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 72%
        );
}


/* ==========================================================
   EDITORIAL WORD
========================================================== */

.ul-contact-info__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(36px, 4.5vw, 66px);

    right: -2%;

    pointer-events: none;

    user-select: none;

    color:
        rgba(43, 87, 56, .032);

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

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

    font-weight: 500;

    line-height: .75;

    letter-spacing: -.075em;

    white-space: nowrap;
}


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

.ul-contact-info__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(350px, .58fr);

    align-items: end;

    gap:
        clamp(60px, 7vw, 110px);

    margin-bottom:
        clamp(50px, 5vw, 74px);
}


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

.ul-contact-info__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


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

.ul-contact-info__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

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


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

.ul-contact-info__eyebrow-line {
    width: 55px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-500),

            var(--ul-logo-yellow),

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


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

.ul-contact-info__title {
    max-width: 750px;

    margin: 0;

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

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

    font-size:
        clamp(3.35rem, 4.8vw, 5.45rem);

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


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

.ul-contact-info__title span {
    display: block;

    margin-top: .07em;

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


/* ==========================================================
   INTRO
========================================================== */

.ul-contact-info__intro {
    max-width: 500px;

    justify-self: end;
}


/* ==========================================================
   INTRO COPY
========================================================== */

.ul-contact-info__intro p {
    margin:
        0 0 24px;

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

    font-size:
        clamp(1.04rem, 1.04vw, 1.14rem);

    line-height: 1.68;
}


/* ==========================================================
   INTRO LINK
========================================================== */

.ul-contact-info__intro-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

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

    font-size: .89rem;

    font-weight: 600;

    line-height: 1;

    transition:
        color .30s ease;
}


.ul-contact-info__intro-link svg {
    width: 18px;
    height: 18px;

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


.ul-contact-info__intro-link:hover {
    color:
        var(--ul-logo-red);
}


.ul-contact-info__intro-link:hover svg {
    transform:
        translateY(3px);
}


/* ==========================================================
   INFORMATION PANEL
========================================================== */

.ul-contact-info__panel {
    --ul-contact-x: 50%;
    --ul-contact-y: 50%;

    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 1px;

    overflow: hidden;

    padding: 1px;

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

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

    background:
        rgba(75, 113, 77, .12);

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

    isolation: isolate;
}


/* ==========================================================
   PANEL TOP ACCENT
========================================================== */

.ul-contact-info__panel::before {
    content: "";

    position: absolute;

    z-index: 5;

    top: 0;
    left: 6%;

    width: 88%;
    height: 3px;

    border-radius:
        0 0 999px 999px;

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

    opacity: .72;

    pointer-events: none;
}


/* ==========================================================
   ITEM BASE
========================================================== */

.ul-contact-info__item {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-width: 0;

    min-height:
        clamp(245px, 21vw, 315px);

    padding:
        clamp(26px, 3vw, 42px);

    overflow: hidden;

    color:
        var(--ul-text);

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

    transition:

        background-color .35s ease,

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

        box-shadow .40s ease;
}


/* ==========================================================
   INTERNAL TINT
========================================================== */

.ul-contact-info__item::before {
    content: "";

    position: absolute;

    z-index: -1;

    top: -130px;
    right: -130px;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    pointer-events: none;

    opacity: .65;

    transition:

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

        opacity .35s ease;
}


/* ==========================================================
   ITEM TINTS
========================================================== */

.ul-contact-info__item--phone::before {
    background:

        radial-gradient(
            circle,

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

            transparent 68%
        );
}


.ul-contact-info__item--email::before {
    background:

        radial-gradient(
            circle,

            rgba(49, 90, 152, .12),

            transparent 68%
        );
}


.ul-contact-info__item--area::before {
    background:

        radial-gradient(
            circle,

            rgba(233, 145, 41, .13),

            transparent 68%
        );
}


.ul-contact-info__item--hours::before {
    background:

        radial-gradient(
            circle,

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

            transparent 68%
        );
}


/* ==========================================================
   ITEM TOP
========================================================== */

.ul-contact-info__item-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;
}


/* ==========================================================
   ICON
========================================================== */

.ul-contact-info__icon {
    display: grid;

    place-items: center;

    width: 56px;
    height: 56px;

    flex: 0 0 auto;

    border-radius: 17px;

    transition:

        color .35s ease,

        background-color .35s ease,

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


.ul-contact-info__icon svg {
    width: 27px;
    height: 27px;
}


/* ==========================================================
   ICON COLORS
========================================================== */

.ul-contact-info__icon--green {
    color:
        var(--ul-green-700);

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


.ul-contact-info__icon--blue {
    color:
        var(--ul-logo-blue);

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


.ul-contact-info__icon--orange {
    color:
        var(--ul-logo-orange);

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


.ul-contact-info__icon--yellow {
    color:
        var(--ul-yellow-700);

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


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

.ul-contact-info__arrow {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

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

    border-radius: 12px;

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

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

    transition:

        color .30s ease,

        background-color .30s ease,

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


.ul-contact-info__arrow svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   ITEM COPY
========================================================== */

.ul-contact-info__item-copy {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    min-width: 0;

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


/* ==========================================================
   LABEL
========================================================== */

.ul-contact-info__label {
    margin-bottom: 9px;

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

    font-size:
        clamp(.76rem, .73vw, .82rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .075em;

    text-transform: uppercase;
}


/* ==========================================================
   MAIN VALUE
========================================================== */

.ul-contact-info__item-copy strong {
    max-width: 100%;

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

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

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

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -.025em;
}


/* ==========================================================
   EMAIL SPECIAL
========================================================== */

.ul-contact-info__email {
    font-family:
        var(--ul-font-body) !important;

    font-size:
        clamp(1.01rem, 1.3vw, 1.42rem) !important;

    font-weight: 600 !important;

    line-height: 1.34 !important;

    overflow-wrap: anywhere;

    letter-spacing: -.018em !important;
}


/* ==========================================================
   DETAIL
========================================================== */

.ul-contact-info__detail {
    margin-top: 9px;

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

    font-size:
        clamp(.91rem, .88vw, .99rem);

    line-height: 1.45;
}


/* ==========================================================
   ITEM ACCENT
========================================================== */

.ul-contact-info__item-accent {
    position: absolute;

    left:
        clamp(26px, 3vw, 42px);

    right:
        clamp(26px, 3vw, 42px);

    bottom: 0;

    height: 3px;

    border-radius:
        999px 999px 0 0;

    transform:
        scaleX(.22);

    transform-origin:
        left center;

    opacity: .58;

    transition:

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

        opacity .35s ease;
}


.ul-contact-info__item--phone
.ul-contact-info__item-accent {
    background:
        var(--ul-green-500);
}


.ul-contact-info__item--email
.ul-contact-info__item-accent {
    background:
        var(--ul-logo-blue);
}


.ul-contact-info__item--area
.ul-contact-info__item-accent {
    background:
        var(--ul-logo-orange);
}


.ul-contact-info__item--hours
.ul-contact-info__item-accent {
    background:
        var(--ul-logo-yellow);
}


/* ==========================================================
   HOURS STATUS
========================================================== */

.ul-contact-info__status-wrap {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 35px;

    padding:
        0 11px;

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

    border-radius: 999px;

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

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

    font-size: .78rem;

    font-weight: 600;
}


/* ==========================================================
   STATUS DOT
========================================================== */

.ul-contact-info__status {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

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


/* ==========================================================
   POINTER LIGHT
========================================================== */

.ul-contact-info__pointer-light {
    position: absolute;

    z-index: 6;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(
            circle 230px
            at
            var(--ul-contact-x)
            var(--ul-contact-y),

            rgba(255, 255, 255, .18),

            rgba(167, 213, 118, .045) 34%,

            transparent 70%
        );

    transition:
        opacity .30s ease;
}


/* ==========================================================
   PANEL POINTER
========================================================== */

.ul-contact-info__panel:hover
.ul-contact-info__pointer-light {
    opacity: 1;
}


/* ==========================================================
   INTERACTIVE ITEM HOVER
========================================================== */

a.ul-contact-info__item:hover {
    z-index: 3;

    background:
        var(--ul-white);

    box-shadow:
        0 22px 52px
        rgba(43, 87, 56, .10);
}


a.ul-contact-info__item:hover::before {
    opacity: 1;

    transform:
        scale(1.12);
}


a.ul-contact-info__item:hover
.ul-contact-info__arrow {
    color:
        var(--ul-white);

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

    transform:
        translate(2px, -2px);
}


a.ul-contact-info__item:hover
.ul-contact-info__icon {
    transform:
        translateY(-3px)
        scale(1.04);
}


a.ul-contact-info__item:hover
.ul-contact-info__item-accent {
    transform:
        scaleX(1);

    opacity: 1;
}


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

.ul-contact-info__bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        clamp(28px, 5vw, 70px);

    margin-top:
        clamp(38px, 4.5vw, 64px);

    padding:
        clamp(20px, 2vw, 27px)
        0;

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

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


/* ==========================================================
   BOTTOM COPY
========================================================== */

.ul-contact-info__bottom-copy {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


/* ==========================================================
   BOTTOM ICON
========================================================== */

.ul-contact-info__bottom-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

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

    border-radius: 12px;

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

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


.ul-contact-info__bottom-icon svg {
    width: 19px;
    height: 19px;
}


/* ==========================================================
   BOTTOM TEXT
========================================================== */

.ul-contact-info__bottom-copy p {
    max-width: 610px;

    margin: 0;

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

    font-size:
        clamp(.96rem, .94vw, 1.04rem);

    line-height: 1.52;
}


/* ==========================================================
   ESTIMATE CTA
========================================================== */

.ul-contact-info__estimate {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    min-height: 57px;

    padding:
        6px 7px
        6px 18px;

    flex: 0 0 auto;

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

    border-radius: 15px;

    color:
        var(--ul-white);

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

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

    font-size: .88rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

    transition:

        color .35s ease,

        background-color .35s ease,

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

        box-shadow .35s ease;
}


/* ==========================================================
   ESTIMATE ICON
========================================================== */

.ul-contact-info__estimate-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

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

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

    transition:

        background-color .35s ease,

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


.ul-contact-info__estimate-icon svg {
    width: 18px;
    height: 18px;
}


/* ==========================================================
   ESTIMATE HOVER
========================================================== */

.ul-contact-info__estimate:hover {
    background:
        var(--ul-logo-red);

    transform:
        translateY(-3px);

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


.ul-contact-info__estimate:hover
.ul-contact-info__estimate-icon {
    color:
        var(--ul-white);

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

    transform:
        translateX(3px);
}


/* ==========================================================
   BOTTOM SHAPE
========================================================== */

.ul-contact-info__bottom-shape {
    position: absolute;

    z-index: -1;

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

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

    pointer-events: none;

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

    clip-path:

        polygon(
            0 67%,
            12% 42%,
            26% 61%,
            41% 34%,
            56% 58%,
            72% 37%,
            87% 59%,
            100% 39%,
            100% 100%,
            0 100%
        );
}


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

@media (min-width: 1200px) {

    .ul-contact-info__header {
        grid-template-columns:
            minmax(0, 1.06fr)
            minmax(350px, .58fr);
    }


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

}


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

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

    .ul-contact-info {
        padding:
            92px 0
            91px;
    }


    .ul-contact-info__word {
        right: -12%;

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


    .ul-contact-info__header {
        grid-template-columns: 1fr;

        gap: 34px;

        margin-bottom: 47px;
    }


    .ul-contact-info__intro {
        max-width: 650px;

        justify-self: start;
    }


    .ul-contact-info__title {
        max-width: 700px;

        font-size:
            clamp(3.15rem, 6.5vw, 4.65rem);
    }


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


    .ul-contact-info__item {
        min-height: 240px;

        padding: 28px;
    }


    .ul-contact-info__item-copy {
        margin-top: 45px;
    }


    .ul-contact-info__email {
        font-size:
            clamp(.96rem, 1.65vw, 1.20rem) !important;
    }

}


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

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

    .ul-contact-info {
        padding:
            77px 0
            76px;
    }


    .ul-contact-info__word {
        top: 56px;
        right: -17%;

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


    .ul-contact-info__header {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 38px;
    }


    .ul-contact-info__eyebrow {
        font-size: .75rem;
    }


    .ul-contact-info__title {
        max-width: 610px;

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


    .ul-contact-info__intro {
        max-width: 590px;

        justify-self: start;
    }


    .ul-contact-info__intro p {
        font-size: .98rem;

        line-height: 1.62;
    }


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

        border-radius: 20px;
    }


    .ul-contact-info__item {
        min-height: 215px;

        padding: 22px;
    }


    .ul-contact-info__icon {
        width: 49px;
        height: 49px;

        border-radius: 14px;
    }


    .ul-contact-info__icon svg {
        width: 23px;
        height: 23px;
    }


    .ul-contact-info__arrow {
        width: 37px;
        height: 37px;
    }


    .ul-contact-info__item-copy {
        margin-top: 34px;
    }


    .ul-contact-info__item-copy strong {
        font-size:
            clamp(1.35rem, 4vw, 1.7rem);
    }


    .ul-contact-info__email {
        font-size:
            clamp(.86rem, 2.5vw, 1.03rem) !important;
    }


    .ul-contact-info__detail {
        font-size: .90rem;
    }


    .ul-contact-info__status-wrap {
        padding:
            0 9px;

        font-size: .72rem;
    }


    .ul-contact-info__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 22px;
    }

}


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

@media (max-width: 479px) {

    .ul-contact-info {
        padding:
            66px 0
            66px;
    }


    .ul-contact-info__topography {
        right: -590px;

        opacity: .32;
    }


    .ul-contact-info__word {
        top: 50px;
        right: -20%;

        font-size:
            clamp(6.2rem, 31vw, 8.7rem);
    }


    .ul-contact-info__header {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 32px;
    }


    .ul-contact-info__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


    .ul-contact-info__eyebrow-dot {
        width: 7px;
        height: 7px;
    }


    .ul-contact-info__eyebrow-line {
        width: 38px;
    }


    .ul-contact-info__title {
        font-size:
            clamp(2.4rem, 10.5vw, 3.05rem);

        line-height: .95;
    }


    .ul-contact-info__intro {
        justify-self: start;
    }


    .ul-contact-info__intro p {
        margin-bottom: 19px;

        font-size: .94rem;

        line-height: 1.58;
    }


    .ul-contact-info__intro-link {
        font-size: .80rem;
    }


    .ul-contact-info__panel {
        grid-template-columns: 1fr;

        gap: 1px;

        border-radius: 18px;
    }


    .ul-contact-info__item {
        min-height: 184px;

        padding:
            20px 18px;
    }


    .ul-contact-info__icon {
        width: 46px;
        height: 46px;

        border-radius: 13px;
    }


    .ul-contact-info__icon svg {
        width: 22px;
        height: 22px;
    }


    .ul-contact-info__arrow {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }


    .ul-contact-info__item-copy {
        margin-top: 28px;
    }


    .ul-contact-info__label {
        margin-bottom: 7px;

        font-size: .68rem;
    }


    .ul-contact-info__item-copy strong {
        font-size:
            clamp(1.34rem, 6vw, 1.65rem);
    }


    .ul-contact-info__email {
        font-size:
            clamp(.84rem, 3.8vw, .98rem) !important;

        line-height: 1.35 !important;
    }


    .ul-contact-info__detail {
        margin-top: 7px;

        font-size: .88rem;
    }


    .ul-contact-info__item-accent {
        left: 18px;
        right: 18px;
    }


    .ul-contact-info__status-wrap {
        min-height: 32px;

        padding:
            0 9px;

        font-size: .70rem;
    }


    .ul-contact-info__bottom {
        align-items: stretch;

        flex-direction: column;

        gap: 18px;

        margin-top: 34px;

        padding:
            20px 0;
    }


    .ul-contact-info__bottom-copy {
        align-items: flex-start;
    }


    .ul-contact-info__bottom-icon {
        width: 40px;
        height: 40px;

        border-radius: 11px;
    }


    .ul-contact-info__bottom-copy p {
        font-size: .90rem;

        line-height: 1.50;
    }


    .ul-contact-info__estimate {
        width: 100%;

        min-height: 53px;

        font-size: .79rem;
    }


    .ul-contact-info__estimate-icon {
        width: 40px;
        height: 40px;
    }

}


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

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

    .ul-contact-info__item,
    .ul-contact-info__item::before,
    .ul-contact-info__icon,
    .ul-contact-info__arrow,
    .ul-contact-info__item-accent,
    .ul-contact-info__pointer-light,
    .ul-contact-info__intro-link svg,
    .ul-contact-info__estimate,
    .ul-contact-info__estimate-icon {
        animation: none !important;

        transition: none !important;
    }

}















































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   CONTACT.HTML
   05. WHAT HAPPENS NEXT — 2026 REDESIGN

   • Existing 3-step structure preserved
   • Scroll progress preserved
   • No decorative counters
   • Horizontal process desktop
   • Vertical process mobile
   • No images / no invented routes
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-next {
    position: relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(92px, 7vw, 125px);

    overflow: hidden;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            145deg,

            #16351F 0%,

            #1D4529 37%,

            #275735 70%,

            #183B25 100%
        );

    isolation: isolate;

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


/* ==========================================================
   TOP TRANSITION
========================================================== */

.ul-next::before {
    content: "";

    position: absolute;

    z-index: 6;

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

    height: 4px;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-500),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red),

            var(--ul-logo-blue),

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


/* ==========================================================
   BOTTOM DEPTH
========================================================== */

.ul-next::after {
    content: "";

    position: absolute;

    z-index: -5;

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

    height: 48%;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            transparent,

            rgba(5, 22, 12, .32)
        );
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-next__topography {
    position: absolute;

    z-index: -4;

    top: -300px;
    right: -310px;

    width: 860px;
    height: 860px;

    pointer-events: none;

    opacity: .46;

    transform:
        rotate(-9deg);

    background:

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

            transparent 0,

            transparent 38px,

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

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

            transparent 41px,

            transparent 76px
        ),

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

            transparent 0,

            transparent 54px,

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

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

            transparent 57px,

            transparent 101px
        );
}


/* ==========================================================
   AMBIENTS
========================================================== */

.ul-next__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-next__ambient--green {
    left: -400px;
    bottom: -460px;

    width: 820px;
    height: 820px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 72%
        );
}


.ul-next__ambient--blue {
    top: -370px;
    right: -350px;

    width: 790px;
    height: 790px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 72%
        );
}


/* ==========================================================
   EDITORIAL WORD
========================================================== */

.ul-next__word {
    position: absolute;

    z-index: -2;

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

    right: -2%;

    pointer-events: none;

    user-select: none;

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

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

    font-size:
        clamp(11rem, 22vw, 24rem);

    font-weight: 500;

    line-height: .75;

    letter-spacing: -.075em;

    white-space: nowrap;
}


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

.ul-next__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.07fr)
        minmax(360px, .58fr);

    align-items: end;

    gap:
        clamp(60px, 7vw, 115px);

    margin-bottom:
        clamp(68px, 7vw, 105px);
}


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

.ul-next__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


.ul-next__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 5px
        rgba(241, 215, 55, .10);
}


.ul-next__eyebrow-line {
    width: 55px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-400),

            var(--ul-logo-yellow),

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


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

.ul-next__title {
    max-width: 780px;

    margin: 0;

    color:
        var(--ul-white);

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

    font-size:
        clamp(3.55rem, 5vw, 5.75rem);

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


.ul-next__title span {
    display: block;

    margin-top: .07em;

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


/* ==========================================================
   INTRO
========================================================== */

.ul-next__intro {
    max-width: 530px;

    justify-self: end;
}


.ul-next__intro > p {
    margin:
        0 0 25px;

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

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

    line-height: 1.68;
}


/* ==========================================================
   INTRO NOTE
========================================================== */

.ul-next__intro-note {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-top: 19px;

    border-top:
        1px solid
        rgba(255, 255, 255, .10);

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

    font-size: .91rem;

    line-height: 1.45;
}


/* ==========================================================
   INTRO NOTE ICON
========================================================== */

.ul-next__intro-note-icon {
    display: grid;

    place-items: center;

    width: 39px;
    height: 39px;

    flex: 0 0 auto;

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

    border-radius: 11px;

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

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


.ul-next__intro-note-icon svg {
    width: 18px;
    height: 18px;
}


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

.ul-next__process {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: stretch;

    gap:
        clamp(14px, 1.5vw, 22px);

    padding-top: 53px;
}


/* ==========================================================
   TRACK
========================================================== */

.ul-next__track {
    position: absolute;

    z-index: 0;

    top: 24px;
    left: calc(16.666% + 4px);
    right: calc(16.666% + 4px);

    height: 3px;

    overflow: visible;

    pointer-events: none;
}


/* ==========================================================
   TRACK BASE
========================================================== */

.ul-next__track-base,
.ul-next__track-progress {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border-radius: 999px;
}


.ul-next__track-base {
    background:
        rgba(255, 255, 255, .11);
}


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

.ul-next__track-progress {
    transform:
        scaleX(0);

    transform-origin:
        left center;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-400),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

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

    box-shadow:

        0 0 24px
        rgba(167, 213, 118, .20);

    transition:
        transform .10s linear;
}


/* ==========================================================
   STEP
========================================================== */

.ul-next-step {
    --ul-next-accent:
        var(--ul-green-400);

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height:
        clamp(330px, 28vw, 410px);

    padding:
        clamp(28px, 3vw, 42px);

    overflow: hidden;

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

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

    color:
        var(--ul-white);

    background:

        linear-gradient(
            150deg,

            rgba(255, 255, 255, .085),

            rgba(255, 255, 255, .035)
        );

    box-shadow:

        0 22px 55px
        rgba(4, 21, 10, .16);

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

    backdrop-filter:
        blur(12px);

    transition:

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

        border-color .35s ease,

        background-color .35s ease,

        box-shadow .40s ease;
}


/* ==========================================================
   STEP COLORS
========================================================== */

.ul-next-step:nth-of-type(2) {
    --ul-next-accent:
        var(--ul-green-400);
}


.ul-next-step:nth-of-type(3) {
    --ul-next-accent:
        var(--ul-logo-cyan);
}


.ul-next-step:nth-of-type(4) {
    --ul-next-accent:
        var(--ul-logo-orange);
}


/* ==========================================================
   STEP AMBIENT
========================================================== */

.ul-next-step::before {
    content: "";

    position: absolute;

    z-index: -1;

    top: -150px;
    right: -150px;

    width: 340px;
    height: 340px;

    border-radius: 50%;

    pointer-events: none;

    opacity: .32;

    background:

        radial-gradient(
            circle,

            color-mix(
                in srgb,
                var(--ul-next-accent) 28%,
                transparent
            ),

            transparent 68%
        );

    transform:
        scale(.90);

    transition:

        opacity .40s ease,

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


/* ==========================================================
   MARKER
========================================================== */

.ul-next-step__marker {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom:
        clamp(52px, 5vw, 76px);
}


/* ==========================================================
   ICON
========================================================== */

.ul-next-step__icon {
    display: grid;

    place-items: center;

    width: 58px;
    height: 58px;

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

    border-radius: 17px;

    transition:

        color .35s ease,

        background-color .35s ease,

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

        box-shadow .35s ease;
}


.ul-next-step__icon svg {
    width: 27px;
    height: 27px;
}


.ul-next-step__icon--green {
    color:
        var(--ul-green-400);

    background:
        rgba(167, 213, 118, .085);
}


.ul-next-step__icon--blue {
    color:
        var(--ul-logo-cyan);

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


.ul-next-step__icon--orange {
    color:
        var(--ul-logo-orange);

    background:
        rgba(233, 145, 41, .085);
}


/* ==========================================================
   STEP DOT

   This visually connects card with progress track.
========================================================== */

.ul-next-step__dot {
    position: absolute;

    top: -67px;
    left: 50%;

    width: 12px;
    height: 12px;

    transform:
        translateX(-50%);

    border:
        3px solid
        #214A2D;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 4px
        rgba(255, 255, 255, .035);

    transition:

        background-color .35s ease,

        box-shadow .35s ease,

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


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

.ul-next-step__content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin-top: auto;
}


/* ==========================================================
   LABEL
========================================================== */

.ul-next-step__label {
    margin-bottom: 10px;

    color:
        var(--ul-next-accent);

    font-size:
        clamp(.76rem, .73vw, .82rem);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ==========================================================
   HEADING
========================================================== */

.ul-next-step__content h3 {
    max-width: 330px;

    margin:
        0 0 14px;

    color:
        var(--ul-white);

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

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

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -.03em;
}


/* ==========================================================
   COPY
========================================================== */

.ul-next-step__content p {
    max-width: 350px;

    margin: 0;

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

    font-size:
        clamp(.96rem, .93vw, 1.03rem);

    line-height: 1.60;
}


/* ==========================================================
   BOTTOM ACCENT
========================================================== */

.ul-next-step__accent {
    position: absolute;

    left:
        clamp(28px, 3vw, 42px);

    right:
        clamp(28px, 3vw, 42px);

    bottom: 0;

    height: 3px;

    border-radius:
        999px 999px 0 0;

    background:
        var(--ul-next-accent);

    opacity: .38;

    transform:
        scaleX(.18);

    transform-origin:
        left center;

    transition:

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

        opacity .35s ease;
}


/* ==========================================================
   ACTIVE STEP
========================================================== */

.ul-next-step.is-active {
    border-color:
        color-mix(
            in srgb,
            var(--ul-next-accent) 32%,
            rgba(255, 255, 255, .10)
        );

    background:

        linear-gradient(
            150deg,

            rgba(255, 255, 255, .105),

            rgba(255, 255, 255, .045)
        );

    transform:
        translateY(-5px);

    box-shadow:

        0 29px 68px
        rgba(3, 18, 9, .23);
}


.ul-next-step.is-active::before {
    opacity: .72;

    transform:
        scale(1.08);
}


.ul-next-step.is-active
.ul-next-step__icon {
    transform:
        translateY(-3px);

    box-shadow:

        0 14px 31px
        rgba(3, 20, 10, .18);
}


.ul-next-step.is-active
.ul-next-step__dot {
    background:
        var(--ul-next-accent);

    box-shadow:

        0 0 0 5px
        color-mix(
            in srgb,
            var(--ul-next-accent) 14%,
            transparent
        );

    transform:
        translateX(-50%)
        scale(1.08);
}


.ul-next-step.is-active
.ul-next-step__accent {
    opacity: 1;

    transform:
        scaleX(1);
}


/* ==========================================================
   POINTER HOVER
========================================================== */

.ul-next-step:hover {
    border-color:
        rgba(255, 255, 255, .18);

    transform:
        translateY(-5px);
}


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

.ul-next__bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        clamp(30px, 5vw, 70px);

    margin-top:
        clamp(60px, 6vw, 90px);

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

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

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

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

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

    backdrop-filter:
        blur(12px);
}


/* ==========================================================
   BOTTOM COPY
========================================================== */

.ul-next__bottom-copy {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;
}


/* ==========================================================
   BOTTOM ICON
========================================================== */

.ul-next__bottom-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 auto;

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

    border-radius: 14px;

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

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


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


/* ==========================================================
   BOTTOM COPY TEXT
========================================================== */

.ul-next__bottom-copy > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-next__bottom-copy span {
    color:
        rgba(255, 255, 255, .52);

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

    line-height: 1.35;
}


.ul-next__bottom-copy strong {
    color:
        rgba(255, 255, 255, .94);

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

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

    font-weight: 500;

    line-height: 1.25;
}


/* ==========================================================
   PHONE CTA
========================================================== */

.ul-next__call {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    min-width:
        clamp(250px, 22vw, 305px);

    min-height: 59px;

    padding:
        7px 7px
        7px 18px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(241, 215, 55, .22);

    border-radius: 15px;

    color:
        var(--ul-white);

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

    transition:

        border-color .35s ease,

        background-color .35s ease,

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

        box-shadow .35s ease;
}


/* ==========================================================
   CALL COPY
========================================================== */

.ul-next__call-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-next__call-copy small {
    color:
        rgba(255, 255, 255, .49);

    font-size: .69rem;

    font-weight: 600;

    letter-spacing: .055em;

    text-transform: uppercase;
}


.ul-next__call-copy strong {
    color:
        var(--ul-white);

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

    font-size: 1.04rem;

    font-weight: 500;
}


/* ==========================================================
   CALL ICON
========================================================== */

.ul-next__call-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 11px;

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

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

    transition:

        color .35s ease,

        background-color .35s ease,

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


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


/* ==========================================================
   CALL HOVER
========================================================== */

.ul-next__call:hover {
    border-color:
        rgba(241, 215, 55, .35);

    background:
        rgba(241, 215, 55, .085);

    transform:
        translateY(-3px);

    box-shadow:

        0 20px 42px
        rgba(3, 18, 9, .20);
}


.ul-next__call:hover
.ul-next__call-icon {
    color:
        var(--ul-white);

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

    transform:
        translateX(3px);
}


/* ==========================================================
   BOTTOM SHAPE
========================================================== */

.ul-next__bottom-shape {
    position: absolute;

    z-index: -1;

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

    height:
        clamp(42px, 4.2vw, 68px);

    pointer-events: none;

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

    clip-path:

        polygon(
            0 62%,
            13% 40%,
            27% 61%,
            43% 34%,
            58% 60%,
            73% 36%,
            88% 58%,
            100% 39%,
            100% 100%,
            0 100%
        );
}


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

@media (min-width: 1200px) {

    .ul-next__header {
        grid-template-columns:
            minmax(0, 1.07fr)
            minmax(360px, .58fr);
    }


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

}


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

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

    .ul-next {
        padding:
            93px 0
            94px;
    }


    .ul-next__word {
        right: -13%;

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


    .ul-next__header {
        grid-template-columns: 1fr;

        gap: 35px;

        margin-bottom: 72px;
    }


    .ul-next__intro {
        max-width: 680px;

        justify-self: start;
    }


    .ul-next__title {
        max-width: 720px;

        font-size:
            clamp(3.2rem, 6.7vw, 4.75rem);
    }


    .ul-next__process {
        gap: 11px;

        padding-top: 49px;
    }


    .ul-next-step {
        min-height: 340px;

        padding: 25px;
    }


    .ul-next-step__marker {
        margin-bottom: 45px;
    }


    .ul-next-step__icon {
        width: 52px;
        height: 52px;

        border-radius: 15px;
    }


    .ul-next-step__content h3 {
        font-size:
            clamp(1.45rem, 2.2vw, 1.8rem);
    }


    .ul-next-step__content p {
        font-size: .92rem;
    }


    .ul-next__bottom {
        padding: 18px;
    }

}


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

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

    .ul-next {
        padding:
            78px 0
            78px;
    }


    .ul-next__word {
        top: 58px;
        right: -17%;

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


    .ul-next__header {
        grid-template-columns: 1fr;

        gap: 28px;

        margin-bottom: 48px;
    }


    .ul-next__eyebrow {
        font-size: .75rem;
    }


    .ul-next__title {
        max-width: 610px;

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


    .ul-next__intro {
        max-width: 600px;

        justify-self: start;
    }


    .ul-next__intro > p {
        font-size: 1rem;

        line-height: 1.63;
    }


    /* ===============================================
       VERTICAL PROCESS
    ================================================ */

    .ul-next__process {
        display: flex;

        flex-direction: column;

        gap: 12px;

        padding:
            0 0
            0 58px;
    }


    .ul-next__track {
        top: 27px;
        bottom: 27px;

        left: 24px;
        right: auto;

        width: 3px;
        height: auto;
    }


    .ul-next__track-base,
    .ul-next__track-progress {
        width: 3px;
        height: 100%;
    }


    .ul-next__track-progress {
        transform:
            scaleY(0);

        transform-origin:
            center top;
    }


    .ul-next-step {
        min-height: 0;

        padding:
            26px;
    }


    .ul-next-step__marker {
        margin-bottom: 29px;
    }


    .ul-next-step__dot {
        top: 21px;
        left: -61px;

        transform: none;
    }


    .ul-next-step.is-active
    .ul-next-step__dot {
        transform:
            scale(1.08);
    }


    .ul-next-step__content h3 {
        max-width: 500px;
    }


    .ul-next-step__content p {
        max-width: 520px;

        font-size: .96rem;
    }


    .ul-next__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        margin-top: 48px;
    }


    .ul-next__call {
        width: 100%;

        min-width: 0;
    }

}


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

@media (max-width: 479px) {

    .ul-next {
        padding:
            66px 0
            67px;
    }


    .ul-next__topography {
        right: -610px;

        opacity: .31;
    }


    .ul-next__word {
        top: 51px;
        right: -18%;

        font-size:
            clamp(6.2rem, 31vw, 8.8rem);
    }


    .ul-next__header {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 40px;
    }


    .ul-next__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


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


    .ul-next__eyebrow-line {
        width: 39px;
    }


    .ul-next__title {
        font-size:
            clamp(2.4rem, 10.6vw, 3.08rem);

        line-height: .95;
    }


    .ul-next__intro {
        justify-self: start;
    }


    .ul-next__intro > p {
        margin-bottom: 19px;

        font-size: .94rem;

        line-height: 1.58;
    }


    .ul-next__intro-note {
        align-items: flex-start;

        font-size: .86rem;
    }


    .ul-next__intro-note-icon {
        width: 36px;
        height: 36px;

        border-radius: 10px;
    }


    /* ===============================================
       VERTICAL PROCESS
    ================================================ */

    .ul-next__process {
        display: flex;

        flex-direction: column;

        gap: 9px;

        padding-left: 45px;
    }


    .ul-next__track {
        top: 24px;
        bottom: 24px;

        left: 18px;
        right: auto;

        width: 3px;
        height: auto;
    }


    .ul-next__track-base,
    .ul-next__track-progress {
        width: 3px;
        height: 100%;
    }


    .ul-next__track-progress {
        transform:
            scaleY(0);

        transform-origin:
            center top;
    }


    .ul-next-step {
        min-height: 0;

        padding:
            22px 18px;

        border-radius: 17px;
    }


    .ul-next-step__marker {
        margin-bottom: 24px;
    }


    .ul-next-step__icon {
        width: 47px;
        height: 47px;

        border-radius: 13px;
    }


    .ul-next-step__icon svg {
        width: 22px;
        height: 22px;
    }


    .ul-next-step__dot {
        top: 18px;
        left: -52px;

        width: 11px;
        height: 11px;

        transform: none;
    }


    .ul-next-step.is-active
    .ul-next-step__dot {
        transform:
            scale(1.08);
    }


    .ul-next-step__label {
        font-size: .68rem;
    }


    .ul-next-step__content h3 {
        margin-bottom: 11px;

        font-size:
            clamp(1.42rem, 6vw, 1.68rem);
    }


    .ul-next-step__content p {
        font-size: .90rem;

        line-height: 1.56;
    }


    .ul-next-step__accent {
        left: 18px;
        right: 18px;
    }


    .ul-next__bottom {
        align-items: stretch;

        flex-direction: column;

        gap: 17px;

        margin-top: 40px;

        padding:
            17px;

        border-radius: 17px;
    }


    .ul-next__bottom-copy {
        align-items: flex-start;
    }


    .ul-next__bottom-icon {
        width: 43px;
        height: 43px;

        border-radius: 12px;
    }


    .ul-next__bottom-copy span {
        font-size: .80rem;
    }


    .ul-next__bottom-copy strong {
        font-size: 1rem;
    }


    .ul-next__call {
        width: 100%;

        min-width: 0;

        min-height: 55px;

        padding:
            6px 6px
            6px 15px;
    }


    .ul-next__call-copy small {
        font-size: .65rem;
    }


    .ul-next__call-copy strong {
        font-size: .97rem;
    }


    .ul-next__call-icon {
        width: 41px;
        height: 41px;

        border-radius: 10px;
    }

}


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

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

    .ul-next__track-progress,
    .ul-next-step,
    .ul-next-step::before,
    .ul-next-step__icon,
    .ul-next-step__dot,
    .ul-next-step__accent,
    .ul-next__call,
    .ul-next__call-icon {
        animation: none !important;

        transition: none !important;
    }

}











































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   CONTACT.HTML
   06. FAQ — 2026 REDESIGN

   • Existing 5-question accordion preserved
   • First question open by default
   • No visible counters
   • Light editorial section
   • Accessible accordion
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-faq {
    position: relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(105px, 8vw, 140px);

    overflow: hidden;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            145deg,

            #FCFDF9 0%,

            #F7F9F3 46%,

            #EFF5EA 100%
        );

    isolation: isolate;

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


/* ==========================================================
   TOP TRANSITION
========================================================== */

.ul-faq::before {
    content: "";

    position: absolute;

    z-index: 5;

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

    height: 4px;

    pointer-events: none;

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


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

.ul-faq::after {
    content: "";

    position: absolute;

    z-index: -5;

    top: 0;
    left: 0;

    width: 46%;
    height: 100%;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

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

            transparent
        );
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-faq__topography {
    position: absolute;

    z-index: -4;

    top: -330px;
    left: -340px;

    width: 870px;
    height: 870px;

    pointer-events: none;

    opacity: .46;

    transform:
        rotate(8deg);

    background:

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

            transparent 0,

            transparent 38px,

            rgba(53, 101, 64, .030) 39px,

            rgba(53, 101, 64, .030) 40px,

            transparent 41px,

            transparent 76px
        ),

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

            transparent 0,

            transparent 54px,

            rgba(112, 186, 202, .026) 55px,

            rgba(112, 186, 202, .026) 56px,

            transparent 57px,

            transparent 101px
        );
}


/* ==========================================================
   AMBIENTS
========================================================== */

.ul-faq__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;
}


.ul-faq__ambient--green {
    left: -400px;
    bottom: -430px;

    width: 790px;
    height: 790px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 72%
        );
}


.ul-faq__ambient--blue {
    top: -350px;
    right: -330px;

    width: 760px;
    height: 760px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 72%
        );
}


/* ==========================================================
   EDITORIAL WORD
========================================================== */

.ul-faq__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(40px, 5vw, 72px);

    right: -1%;

    pointer-events: none;

    user-select: none;

    color:
        rgba(43, 87, 56, .032);

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

    font-size:
        clamp(12rem, 23vw, 25rem);

    font-weight: 500;

    line-height: .74;

    letter-spacing: -.075em;

    white-space: nowrap;
}


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

.ul-faq__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(310px, .56fr)
        minmax(0, 1.04fr);

    align-items: start;

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


/* ==========================================================
   LEFT INTRO
========================================================== */

.ul-faq__intro {
    min-width: 0;

    max-width: 560px;
}


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

.ul-faq__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


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

.ul-faq__eyebrow-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

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


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

.ul-faq__eyebrow-line {
    width: 55px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-500),

            var(--ul-logo-yellow),

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


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

.ul-faq__title {
    max-width: 570px;

    margin:
        0 0
        clamp(25px, 3vw, 35px);

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

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

    font-size:
        clamp(3.45rem, 4.8vw, 5.55rem);

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


.ul-faq__title span {
    display: block;

    margin-top: .07em;

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


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

.ul-faq__description {
    max-width: 505px;

    margin:
        0 0
        clamp(35px, 4vw, 50px);

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

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

    line-height: 1.68;
}


/* ==========================================================
   NOTE
========================================================== */

.ul-faq__note {
    display: grid;

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

    align-items: center;

    gap: 13px;

    padding:
        13px;

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

    border-radius: 15px;

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

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


/* ==========================================================
   NOTE ICON
========================================================== */

.ul-faq__note-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 13px;

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

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


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


/* ==========================================================
   NOTE COPY
========================================================== */

.ul-faq__note > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-faq__note > div > span {
    color:
        var(--ul-text-muted);

    font-size: .83rem;

    font-weight: 500;
}


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

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

    font-size: 1.03rem;

    font-weight: 500;
}


/* ==========================================================
   PHONE
========================================================== */

.ul-faq__phone {
    display: grid;

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

    align-items: center;

    gap: 12px;

    min-height: 65px;

    margin-top: 11px;

    padding:
        9px 9px;

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

    border-radius: 15px;

    color:
        var(--ul-text);

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

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

    transition:

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

        border-color .30s ease,

        background-color .30s ease,

        box-shadow .35s ease;
}


/* ==========================================================
   PHONE ICON
========================================================== */

.ul-faq__phone-icon {
    display: grid;

    place-items: center;

    width: 45px;
    height: 45px;

    border-radius: 12px;

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

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


.ul-faq__phone-icon svg {
    width: 20px;
    height: 20px;
}


/* ==========================================================
   PHONE COPY
========================================================== */

.ul-faq__phone-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


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

    font-size: .72rem;

    font-weight: 600;

    letter-spacing: .055em;

    text-transform: uppercase;
}


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

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

    font-size: 1.07rem;

    font-weight: 500;
}


/* ==========================================================
   PHONE ARROW
========================================================== */

.ul-faq__phone-arrow {
    display: grid;

    place-items: center;

    width: 37px;
    height: 37px;

    border-radius: 10px;

    color:
        var(--ul-white);

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

    transition:

        background-color .30s ease,

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


.ul-faq__phone-arrow svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================
   PHONE HOVER
========================================================== */

.ul-faq__phone:hover {
    border-color:
        rgba(126, 187, 80, .30);

    background:
        var(--ul-white);

    transform:
        translateY(-3px);

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


.ul-faq__phone:hover
.ul-faq__phone-arrow {
    background:
        var(--ul-logo-red);

    transform:
        translateX(3px);
}


/* ==========================================================
   ACCORDION
========================================================== */

.ul-faq__accordion {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 10px;

    min-width: 0;

    padding:
        clamp(13px, 1.4vw, 18px);

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

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

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

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

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

    backdrop-filter:
        blur(13px);
}


/* ==========================================================
   ACCORDION TOP ACCENT
========================================================== */

.ul-faq__accordion::before {
    content: "";

    position: absolute;

    z-index: 4;

    top: 0;
    left: 7%;

    width: 86%;
    height: 3px;

    border-radius:
        0 0 999px 999px;

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

    opacity: .72;
}


/* ==========================================================
   ITEM
========================================================== */

.ul-faq-item {
    --ul-faq-accent:
        var(--ul-green-600);

    position: relative;

    overflow: hidden;

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

    border-radius: 17px;

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

    transition:

        border-color .35s ease,

        background-color .35s ease,

        box-shadow .40s ease,

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


/* ==========================================================
   INDIVIDUAL BRAND ACCENTS
========================================================== */

.ul-faq-item:nth-child(1) {
    --ul-faq-accent:
        var(--ul-green-600);
}


.ul-faq-item:nth-child(2) {
    --ul-faq-accent:
        var(--ul-logo-blue);
}


.ul-faq-item:nth-child(3) {
    --ul-faq-accent:
        var(--ul-logo-orange);
}


.ul-faq-item:nth-child(4) {
    --ul-faq-accent:
        var(--ul-logo-red);
}


.ul-faq-item:nth-child(5) {
    --ul-faq-accent:
        var(--ul-yellow-700);
}


/* ==========================================================
   HEADING
========================================================== */

.ul-faq-item__heading {
    margin: 0;
}


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

.ul-faq-item__button {
    display: grid;

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

    align-items: center;

    gap:
        clamp(14px, 1.6vw, 20px);

    width: 100%;

    min-height:
        clamp(86px, 7vw, 104px);

    margin: 0;

    padding:
        clamp(15px, 1.8vw, 22px);

    border: 0;

    color:
        var(--ul-text);

    background:
        transparent;

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

    text-align: left;

    cursor: pointer;
}


/* ==========================================================
   MARKER
========================================================== */

.ul-faq-item__marker {
    display: grid;

    place-items: center;

    width: 52px;
    height: 52px;

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

    border-radius: 15px;

    color:
        var(--ul-faq-accent);

    background:
        var(--ul-bg-soft);

    transition:

        color .30s ease,

        background-color .30s ease,

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

        box-shadow .35s ease;
}


.ul-faq-item__marker svg {
    width: 23px;
    height: 23px;
}


/* ==========================================================
   QUESTION
========================================================== */

.ul-faq-item__question {
    max-width: 650px;

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

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

    font-size:
        clamp(1.20rem, 1.4vw, 1.48rem);

    font-weight: 500;

    line-height: 1.25;

    letter-spacing: -.018em;
}


/* ==========================================================
   TOGGLE
========================================================== */

.ul-faq-item__toggle {
    position: relative;

    display: block;

    width: 44px;
    height: 44px;

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

    border-radius: 13px;

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

    background:
        var(--ul-bg-soft);

    transition:

        color .30s ease,

        background-color .30s ease,

        border-color .30s ease,

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


/* ==========================================================
   PLUS
========================================================== */

.ul-faq-item__toggle span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 15px;
    height: 1.5px;

    border-radius: 999px;

    background:
        currentColor;

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


.ul-faq-item__toggle span:first-child {
    transform:
        translate(-50%, -50%);
}


.ul-faq-item__toggle span:last-child {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* ==========================================================
   ANSWER WRAP

   Grid allows smooth height animation.
========================================================== */

.ul-faq-item__answer-wrap {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:

        grid-template-rows .48s
        var(--ul-ease-expo),

        opacity .32s ease;
}


.ul-faq-item__answer-wrap[hidden] {
    display: none;
}


/* ==========================================================
   ANSWER INNER
========================================================== */

.ul-faq-item__answer-inner {
    min-height: 0;

    overflow: hidden;
}


/* ==========================================================
   ANSWER COPY
========================================================== */

.ul-faq-item__answer-inner p {
    max-width: 720px;

    margin:
        0
        clamp(70px, 7vw, 92px)
        clamp(24px, 2.6vw, 34px)
        clamp(86px, 8.5vw, 113px);

    padding-top:
        clamp(2px, .4vw, 6px);

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

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

    line-height: 1.67;
}


/* ==========================================================
   ANSWER LINK
========================================================== */

.ul-faq-item__answer-inner a {
    color:
        var(--ul-green-700);

    font-weight: 600;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}


/* ==========================================================
   ITEM ACCENT
========================================================== */

.ul-faq-item__accent {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 0;

    height: 3px;

    border-radius:
        999px 999px 0 0;

    background:
        var(--ul-faq-accent);

    opacity: .25;

    transform:
        scaleX(.12);

    transform-origin:
        left center;

    transition:

        opacity .35s ease,

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


/* ==========================================================
   OPEN STATE
========================================================== */

.ul-faq-item.is-open {
    border-color:
        rgba(75, 113, 77, .18);

    background:
        var(--ul-white);

    box-shadow:

        0 18px 45px
        rgba(43, 87, 56, .075);

    transform:
        translateY(-2px);
}


.ul-faq-item.is-open
.ul-faq-item__marker {
    color:
        var(--ul-white);

    background:
        var(--ul-faq-accent);

    transform:
        translateY(-2px);

    box-shadow:

        0 12px 26px
        rgba(43, 87, 56, .10);
}


.ul-faq-item.is-open
.ul-faq-item__toggle {
    color:
        var(--ul-white);

    border-color:
        transparent;

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

    transform:
        rotate(45deg);
}


.ul-faq-item.is-open
.ul-faq-item__answer-wrap {
    grid-template-rows: 1fr;

    opacity: 1;
}


.ul-faq-item.is-open
.ul-faq-item__accent {
    opacity: 1;

    transform:
        scaleX(1);
}


/* ==========================================================
   HOVER
========================================================== */

.ul-faq-item:not(.is-open):hover {
    border-color:
        rgba(75, 113, 77, .18);

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

    transform:
        translateY(-2px);
}


.ul-faq-item:not(.is-open):hover
.ul-faq-item__marker {
    transform:
        translateY(-2px);
}


.ul-faq-item:not(.is-open):hover
.ul-faq-item__toggle {
    border-color:
        rgba(126, 187, 80, .25);

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


/* ==========================================================
   FOCUS
========================================================== */

.ul-faq-item__button:focus-visible {
    position: relative;

    z-index: 3;

    outline:
        2px solid
        var(--ul-green-600);

    outline-offset:
        -3px;

    border-radius: 15px;
}


/* ==========================================================
   BOTTOM SHAPE
========================================================== */

.ul-faq__bottom-shape {
    position: absolute;

    z-index: -1;

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

    height:
        clamp(42px, 4vw, 68px);

    pointer-events: none;

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

    clip-path:

        polygon(
            0 65%,
            12% 41%,
            27% 62%,
            43% 34%,
            58% 58%,
            74% 36%,
            88% 59%,
            100% 40%,
            100% 100%,
            0 100%
        );
}


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

@media (min-width: 1200px) {

    .ul-faq__layout {
        grid-template-columns:
            minmax(310px, .56fr)
            minmax(0, 1.04fr);
    }

}


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

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

    .ul-faq {
        padding:
            92px 0
            94px;
    }


    .ul-faq__word {
        right: -10%;

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


    .ul-faq__layout {
        grid-template-columns:
            minmax(245px, .47fr)
            minmax(0, 1fr);

        gap: 38px;
    }


    .ul-faq__title {
        font-size:
            clamp(3rem, 5.7vw, 4.35rem);
    }


    .ul-faq__description {
        font-size: .99rem;
    }


    .ul-faq__note {
        grid-template-columns:
            43px
            minmax(0, 1fr);

        padding: 11px;
    }


    .ul-faq__note-icon {
        width: 43px;
        height: 43px;
    }


    .ul-faq__phone {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            35px;
    }


    .ul-faq__phone-icon {
        width: 42px;
        height: 42px;
    }


    .ul-faq__accordion {
        padding: 12px;
    }


    .ul-faq-item__button {
        grid-template-columns:
            47px
            minmax(0, 1fr)
            40px;

        gap: 13px;

        min-height: 86px;

        padding: 16px;
    }


    .ul-faq-item__marker {
        width: 47px;
        height: 47px;

        border-radius: 13px;
    }


    .ul-faq-item__toggle {
        width: 40px;
        height: 40px;
    }


    .ul-faq-item__answer-inner p {
        margin-left: 76px;
        margin-right: 60px;

        font-size: .96rem;
    }

}


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

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

    .ul-faq {
        padding:
            78px 0
            80px;
    }


    .ul-faq__word {
        top: 55px;
        right: -12%;

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


    .ul-faq__layout {
        grid-template-columns: 1fr;

        gap: 41px;
    }


    .ul-faq__intro {
        max-width: 620px;
    }


    .ul-faq__eyebrow {
        font-size: .75rem;
    }


    .ul-faq__title {
        max-width: 610px;

        font-size:
            clamp(2.8rem, 8.5vw, 3.8rem);
    }


    .ul-faq__description {
        max-width: 590px;

        font-size: 1rem;
    }


    .ul-faq__note,
    .ul-faq__phone {
        max-width: 560px;
    }


    .ul-faq__accordion {
        border-radius: 21px;
    }


    .ul-faq-item__button {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            41px;

        min-height: 82px;

        padding: 15px;
    }


    .ul-faq-item__marker {
        width: 48px;
        height: 48px;

        border-radius: 14px;
    }


    .ul-faq-item__question {
        font-size:
            clamp(1.10rem, 3.1vw, 1.32rem);
    }


    .ul-faq-item__toggle {
        width: 41px;
        height: 41px;
    }


    .ul-faq-item__answer-inner p {
        margin:
            0 56px
            27px 77px;

        font-size: .95rem;
    }

}


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

@media (max-width: 479px) {

    .ul-faq {
        padding:
            66px 0
            70px;
    }


    .ul-faq__topography {
        left: -610px;

        opacity: .31;
    }


    .ul-faq__word {
        top: 50px;
        right: -11%;

        font-size:
            clamp(6.2rem, 31vw, 8.8rem);
    }


    .ul-faq__layout {
        grid-template-columns: 1fr;

        gap: 32px;
    }


    .ul-faq__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


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


    .ul-faq__eyebrow-line {
        width: 39px;
    }


    .ul-faq__title {
        margin-bottom: 21px;

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

        line-height: .95;
    }


    .ul-faq__description {
        margin-bottom: 27px;

        font-size: .94rem;

        line-height: 1.58;
    }


    .ul-faq__note {
        grid-template-columns:
            41px
            minmax(0, 1fr);

        padding: 10px;

        border-radius: 13px;
    }


    .ul-faq__note-icon {
        width: 41px;
        height: 41px;

        border-radius: 11px;
    }


    .ul-faq__note > div > span {
        font-size: .76rem;
    }


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


    .ul-faq__phone {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            34px;

        min-height: 59px;

        margin-top: 8px;

        padding: 8px;

        border-radius: 13px;
    }


    .ul-faq__phone-icon {
        width: 40px;
        height: 40px;

        border-radius: 10px;
    }


    .ul-faq__phone-copy small {
        font-size: .66rem;
    }


    .ul-faq__phone-copy strong {
        font-size: .97rem;
    }


    .ul-faq__phone-arrow {
        width: 34px;
        height: 34px;
    }


    .ul-faq__accordion {
        gap: 7px;

        padding: 8px;

        border-radius: 18px;
    }


    .ul-faq-item {
        border-radius: 14px;
    }


    .ul-faq-item__button {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            35px;

        gap: 10px;

        min-height: 72px;

        padding:
            13px 11px;
    }


    .ul-faq-item__marker {
        width: 40px;
        height: 40px;

        border-radius: 11px;
    }


    .ul-faq-item__marker svg {
        width: 19px;
        height: 19px;
    }


    .ul-faq-item__question {
        font-size:
            clamp(1rem, 4.4vw, 1.15rem);

        line-height: 1.25;
    }


    .ul-faq-item__toggle {
        width: 35px;
        height: 35px;

        border-radius: 10px;
    }


    .ul-faq-item__toggle span {
        width: 13px;
    }


    .ul-faq-item__answer-inner p {
        margin:
            0 44px
            22px 62px;

        font-size: .90rem;

        line-height: 1.57;
    }


    .ul-faq-item__accent {
        left: 12px;
        right: 12px;
    }

}


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

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

    .ul-faq__phone,
    .ul-faq__phone-arrow,
    .ul-faq-item,
    .ul-faq-item__marker,
    .ul-faq-item__toggle,
    .ul-faq-item__toggle span,
    .ul-faq-item__answer-wrap,
    .ul-faq-item__accent {
        animation: none !important;

        transition: none !important;
    }

}



















































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   CONTACT.HTML
   04. FREE ESTIMATE FORM — 2026 REDESIGN

   IMPORTANT:
   • HTML/PHP contract untouched
   • Same form fields
   • Same names / ids / options
   • Same validation classes
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.ul-estimate {
    position: relative;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(105px, 8vw, 140px);

    overflow: hidden;

    color:
        var(--ul-text);

    background:
        linear-gradient(
            145deg,
            #F1F5EC 0%,
            #F7F9F3 46%,
            #EEF3E8 100%
        );

    isolation: isolate;

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


/* ==========================================================
   TOP BRAND LINE
========================================================== */

.ul-estimate::before {
    content: "";

    position: absolute;

    z-index: 5;

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

    height: 4px;

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

    pointer-events: none;
}


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

.ul-estimate::after {
    content: "";

    position: absolute;

    z-index: -5;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(43, 87, 56, .045),
            transparent 40%,
            rgba(112, 186, 202, .025)
        );
}


/* ==========================================================
   TOPOGRAPHY
========================================================== */

.ul-estimate__topography {
    position: absolute;

    z-index: -4;

    top: -310px;
    left: -330px;

    width: 850px;
    height: 850px;

    opacity: .48;

    pointer-events: none;

    transform:
        rotate(8deg);

    background:

        repeating-radial-gradient(
            ellipse at 44% 44%,
            transparent 0,
            transparent 38px,
            rgba(53, 101, 64, .029) 39px,
            rgba(53, 101, 64, .029) 40px,
            transparent 41px,
            transparent 76px
        ),

        repeating-radial-gradient(
            ellipse at 70% 68%,
            transparent 0,
            transparent 54px,
            rgba(126, 187, 80, .025) 55px,
            rgba(126, 187, 80, .025) 56px,
            transparent 57px,
            transparent 101px
        );
}


/* ==========================================================
   AMBIENT
========================================================== */

.ul-estimate__ambient {
    position: absolute;

    z-index: -4;

    right: -390px;
    bottom: -450px;

    width: 800px;
    height: 800px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(112, 186, 202, .11),
            rgba(49, 90, 152, .02) 45%,
            transparent 72%
        );
}


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

.ul-estimate__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(330px, .63fr)
        minmax(0, 1.20fr);

    align-items: stretch;

    gap:
        clamp(22px, 2.6vw, 38px);
}


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

.ul-estimate__content {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        clamp(38px, 4.3vw, 62px);

    overflow: hidden;

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

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

    color:
        var(--ul-white);

    background:
        linear-gradient(
            145deg,
            #254E32 0%,
            #2F623D 54%,
            #3D7548 100%
        );

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

    isolation: isolate;
}


/* ==========================================================
   LEFT AMBIENT
========================================================== */

.ul-estimate__content::before {
    content: "";

    position: absolute;

    z-index: -2;

    top: -240px;
    right: -220px;

    width: 570px;
    height: 570px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(167,213,118,.22),
            rgba(167,213,118,.04) 44%,
            transparent 70%
        );
}


/* ==========================================================
   LEFT TEXTURE
========================================================== */

.ul-estimate__content::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -260px;
    bottom: -290px;

    width: 620px;
    height: 620px;

    opacity: .44;

    pointer-events: none;

    background:
        repeating-radial-gradient(
            ellipse at 45% 45%,
            transparent 0,
            transparent 31px,
            rgba(255,255,255,.033) 32px,
            rgba(255,255,255,.033) 33px,
            transparent 34px,
            transparent 62px
        );
}


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

.ul-estimate__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom:
        clamp(20px, 2vw, 27px);

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: .10em;

    text-transform: uppercase;
}


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

.ul-estimate__eyebrow-line {
    width: 58px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--ul-logo-yellow),
            var(--ul-logo-orange),
            var(--ul-logo-red)
        );
}


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

.ul-estimate__title {
    max-width: 600px;

    margin:
        0 0
        clamp(24px, 3vw, 34px);

    color:
        var(--ul-white);

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

    font-size:
        clamp(3.35rem, 4.6vw, 5.35rem);

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;

    opacity: 1;
    visibility: visible;
}


/* Important:
   Critical title stays visible even if reveal JS fails.
*/

.ul-estimate__title span {
    display: block;

    margin-top: .07em;

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


/* ==========================================================
   INTRO
========================================================== */

.ul-estimate__intro {
    max-width: 550px;

    margin:
        0 0
        clamp(35px, 4vw, 50px);

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

    font-size:
        clamp(1.02rem, 1vw, 1.12rem);

    line-height: 1.68;
}


/* ==========================================================
   CONTEXT
========================================================== */

.ul-estimate__context {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


/* ==========================================================
   CONTEXT ITEM
========================================================== */

.ul-estimate__context-item {
    display: grid;

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

    align-items: center;

    gap: 13px;

    min-height: 72px;

    padding:
        10px 11px;

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

    border-radius: 14px;

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

    transition:
        background-color .30s ease,
        border-color .30s ease,
        transform .40s var(--ul-ease-expo);
}


.ul-estimate__context-item:hover {
    border-color:
        rgba(167,213,118,.20);

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

    transform:
        translateX(3px);
}


/* ==========================================================
   CONTEXT ICON
========================================================== */

.ul-estimate__context-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 13px;

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

    background:
        rgba(167,213,118,.09);
}


.ul-estimate__context-item:nth-child(2)
.ul-estimate__context-icon {
    color:
        var(--ul-logo-cyan);

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


.ul-estimate__context-item:nth-child(3)
.ul-estimate__context-icon {
    color:
        var(--ul-logo-yellow);

    background:
        rgba(241,215,55,.09);
}


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


/* ==========================================================
   CONTEXT COPY
========================================================== */

.ul-estimate__context-item > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-estimate__context-item strong {
    color:
        rgba(255,255,255,.94);

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

    font-size: 1.02rem;

    font-weight: 500;

    line-height: 1.25;
}


.ul-estimate__context-item span {
    color:
        rgba(255,255,255,.57);

    font-size: .86rem;

    line-height: 1.42;
}


/* ==========================================================
   CALL LINK
========================================================== */

.ul-estimate__call {
    display: grid;

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

    align-items: center;

    gap: 13px;

    min-height: 65px;

    margin-top: auto;

    padding:
        11px 11px
        11px 15px;

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

    border-radius: 15px;

    color:
        var(--ul-white);

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

    transition:
        transform .42s var(--ul-ease-expo),
        border-color .30s ease,
        background-color .30s ease;
}


.ul-estimate__call > span:first-child {
    color:
        rgba(255,255,255,.59);

    font-size: .84rem;

    font-weight: 500;
}


.ul-estimate__call strong {
    color:
        var(--ul-white);

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

    font-size: 1.02rem;

    font-weight: 500;
}


.ul-estimate__call > span:last-child {
    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    border-radius: 10px;

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

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

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


.ul-estimate__call:hover {
    border-color:
        rgba(241,215,55,.28);

    background:
        rgba(241,215,55,.08);

    transform:
        translateY(-3px);
}


.ul-estimate__call:hover > span:last-child {
    transform:
        translate(2px,-2px);
}


/* ==========================================================
   FORM SHELL
========================================================== */

.ul-estimate__form-shell {
    position: relative;

    min-width: 0;

    padding:
        clamp(30px, 3.4vw, 48px);

    overflow: hidden;

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

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

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

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

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

    backdrop-filter:
        blur(14px);

    isolation: isolate;
}


/* ==========================================================
   FORM SHELL BRAND LINE
========================================================== */

.ul-estimate__form-shell::before {
    content: "";

    position: absolute;

    z-index: 3;

    top: 0;
    left: 7%;

    width: 86%;
    height: 3px;

    border-radius:
        0 0 999px 999px;

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

    opacity: .78;
}


/* ==========================================================
   FORM TOP
========================================================== */

.ul-estimate__form-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-bottom:
        clamp(27px, 3vw, 38px);

    padding-bottom:
        clamp(20px, 2.3vw, 28px);

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


/* ==========================================================
   FORM TOP COPY
========================================================== */

.ul-estimate__form-top > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.ul-estimate__form-top span {
    color:
        var(--ul-green-700);

    font-size: .78rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .075em;

    text-transform: uppercase;
}


.ul-estimate__form-top strong {
    color:
        var(--ul-forest-950);

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

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

    font-weight: 500;

    line-height: 1.1;
}


/* ==========================================================
   FORM MARK
========================================================== */

.ul-estimate__form-mark {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    flex: 0 0 auto;

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

    border-radius: 14px;

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

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

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

    font-size: 1.55rem !important;

    font-weight: 400 !important;

    line-height: 1 !important;
}


/* ==========================================================
   STATUS
========================================================== */

.ul-estimate__status {
    position: relative;

    margin-bottom: 24px;

    padding:
        15px 17px;

    border-radius: 13px;

    font-size: .94rem;

    font-weight: 500;

    line-height: 1.50;
}


.ul-estimate__status[hidden] {
    display: none !important;
}


.ul-estimate__status.is-success {
    border:
        1px solid
        rgba(126,187,80,.25);

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

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


.ul-estimate__status.is-error {
    border:
        1px solid
        rgba(189,60,53,.24);

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

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


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

.ul-estimate__form {
    position: relative;

    display: flex;

    flex-direction: column;

    gap:
        clamp(21px, 2vw, 27px);
}


/* ==========================================================
   HONEYPOT

   Existing input retained but kept outside visual viewport.
========================================================== */

.ul-estimate__honeypot {
    position: absolute !important;

    left: -9999px !important;
    top: auto !important;

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

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ==========================================================
   ROW
========================================================== */

.ul-estimate__row {
    display: grid;

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

    gap:
        clamp(14px, 1.6vw, 20px);
}


/* ==========================================================
   FIELD
========================================================== */

.ul-estimate-field {
    position: relative;

    min-width: 0;
}


/* ==========================================================
   LABEL
========================================================== */

.ul-estimate-field > label,
.ul-estimate-field__label-row label {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-bottom: 9px;

    color:
        var(--ul-text);

    font-size:
        clamp(.89rem, .87vw, .97rem);

    font-weight: 600;

    line-height: 1.25;
}


.ul-estimate-field label span {
    color:
        var(--ul-logo-red);
}


/* ==========================================================
   LABEL ROW
========================================================== */

.ul-estimate-field__label-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/* ==========================================================
   CHARACTER COUNTER

   Functional counter — intentionally retained.
========================================================== */

.ul-estimate-field__counter {
    color:
        var(--ul-text-muted);

    font-size: .77rem;

    font-weight: 500;

    font-variant-numeric:
        tabular-nums;

    transition:
        color .25s ease;
}


.ul-estimate-field__counter.is-near-limit {
    color:
        var(--ul-logo-orange);
}


/* ==========================================================
   CONTROL
========================================================== */

.ul-estimate-field__control {
    position: relative;

    width: 100%;
}


/* ==========================================================
   INPUT / SELECT / TEXTAREA
========================================================== */

.ul-estimate-field input,
.ul-estimate-field select,
.ul-estimate-field textarea {
    display: block;

    width: 100%;

    margin: 0;

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

    border-radius: 13px;

    outline: none;

    color:
        var(--ul-text);

    background:
        #F8FAF6;

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

    font-size:
        clamp(.95rem, .93vw, 1.01rem);

    font-weight: 500;

    line-height: 1.4;

    transition:
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .30s var(--ul-ease-expo);
}


/* ==========================================================
   INPUT
========================================================== */

.ul-estimate-field input {
    height: 57px;

    padding:
        0 49px
        0 16px;
}


/* ==========================================================
   SELECT
========================================================== */

.ul-estimate-field select {
    height: 57px;

    padding:
        0 48px
        0 16px;

    appearance: none;

    -webkit-appearance: none;

    cursor: pointer;
}


/* ==========================================================
   TEXTAREA
========================================================== */

.ul-estimate-field textarea {
    min-height: 162px;

    padding:
        15px 16px;

    resize: vertical;
}


/* ==========================================================
   PLACEHOLDERS
========================================================== */

.ul-estimate-field input::placeholder,
.ul-estimate-field textarea::placeholder {
    color:
        #88948C;

    opacity: 1;
}


/* ==========================================================
   FIELD ICON
========================================================== */

.ul-estimate-field__icon,
.ul-estimate-field__select-arrow {
    position: absolute;

    z-index: 2;

    top: 50%;
    right: 14px;

    display: grid;

    place-items: center;

    width: 27px;
    height: 27px;

    transform:
        translateY(-50%);

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

    pointer-events: none;

    transition:
        color .25s ease,
        transform .30s var(--ul-ease-expo);
}


.ul-estimate-field__icon svg,
.ul-estimate-field__select-arrow svg {
    width: 19px;
    height: 19px;
}


/* ==========================================================
   FOCUS
========================================================== */

.ul-estimate-field input:focus,
.ul-estimate-field select:focus,
.ul-estimate-field textarea:focus {
    border-color:
        rgba(86,141,87,.55);

    background:
        var(--ul-white);

    box-shadow:
        0 0 0 4px
        rgba(126,187,80,.10);
}


.ul-estimate-field__control:focus-within
.ul-estimate-field__icon,
.ul-estimate-field__control:focus-within
.ul-estimate-field__select-arrow {
    color:
        var(--ul-green-700);
}


/* ==========================================================
   INVALID
========================================================== */

.ul-estimate-field.is-invalid input,
.ul-estimate-field.is-invalid select,
.ul-estimate-field.is-invalid textarea {
    border-color:
        rgba(189,60,53,.55);

    background:
        #FFF9F8;

    box-shadow:
        0 0 0 4px
        rgba(189,60,53,.075);
}


.ul-estimate-field.is-invalid
.ul-estimate-field__icon,
.ul-estimate-field.is-invalid
.ul-estimate-field__select-arrow {
    color:
        var(--ul-logo-red);
}


/* ==========================================================
   ERROR MESSAGE
========================================================== */

.ul-estimate-field__error {
    display: block;

    min-height: 18px;

    margin-top: 6px;

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

    font-size: .78rem;

    font-weight: 500;

    line-height: 1.35;
}


/* ==========================================================
   SUBMIT ROW
========================================================== */

.ul-estimate__submit-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        clamp(25px, 4vw, 50px);

    margin-top: 2px;

    padding-top:
        clamp(20px, 2.3vw, 28px);

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


/* ==========================================================
   SUBMIT NOTE
========================================================== */

.ul-estimate__submit-row p {
    max-width: 370px;

    margin: 0;

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

    font-size: .88rem;

    line-height: 1.48;
}


/* ==========================================================
   SUBMIT BUTTON
========================================================== */

.ul-estimate__submit {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

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

    padding:
        7px 8px
        7px 19px;

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

    border-radius: 15px;

    color:
        var(--ul-white);

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

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

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

    font-size: .88rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color .30s ease,
        color .30s ease,
        border-color .30s ease,
        transform .42s var(--ul-ease-expo),
        box-shadow .35s ease;
}


/* ==========================================================
   SUBMIT ICON
========================================================== */

.ul-estimate__submit svg {
    width: 42px;
    height: 42px;

    padding: 11px;

    flex: 0 0 auto;

    border-radius: 11px;

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

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

    transition:
        color .30s ease,
        background-color .30s ease,
        transform .40s var(--ul-ease-expo);
}


/* ==========================================================
   SUBMIT HOVER
========================================================== */

.ul-estimate__submit:hover:not(:disabled) {
    border-color:
        rgba(189,60,53,.28);

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

    transform:
        translateY(-3px);

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


.ul-estimate__submit:hover:not(:disabled) svg {
    color:
        var(--ul-white);

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

    transform:
        translateX(3px);
}


/* ==========================================================
   SUBMITTING
========================================================== */

.ul-estimate__submit:disabled,
.ul-estimate__submit.is-submitting {
    cursor: wait;

    opacity: .72;

    transform: none;
}


/* ==========================================================
   ACCESSIBLE FOCUS
========================================================== */

.ul-estimate__submit:focus-visible,
.ul-estimate__call:focus-visible {
    outline:
        2px solid
        var(--ul-logo-yellow);

    outline-offset: 4px;
}


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

@media (min-width: 1200px) {

    .ul-estimate__layout {
        grid-template-columns:
            minmax(330px, .63fr)
            minmax(0, 1.20fr);
    }

}


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

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

    .ul-estimate {
        padding:
            92px 0
            94px;
    }


    .ul-estimate__layout {
        grid-template-columns:
            minmax(260px, .52fr)
            minmax(0, 1fr);

        gap: 18px;
    }


    .ul-estimate__content {
        padding:
            31px 26px;
    }


    .ul-estimate__title {
        font-size:
            clamp(3rem, 5.7vw, 4.2rem);
    }


    .ul-estimate__intro {
        font-size: .98rem;
    }


    .ul-estimate__context-item {
        grid-template-columns:
            43px
            minmax(0,1fr);

        min-height: 67px;

        padding: 9px;
    }


    .ul-estimate__context-icon {
        width: 43px;
        height: 43px;
    }


    .ul-estimate__context-item span {
        font-size: .79rem;
    }


    .ul-estimate__call {
        grid-template-columns:
            1fr
            35px;

        margin-top: 30px;
    }


    .ul-estimate__call strong {
        grid-column: 1;
    }


    .ul-estimate__call > span:last-child {
        grid-column: 2;
        grid-row: 1 / span 2;
    }


    .ul-estimate__form-shell {
        padding:
            31px 27px;
    }


    .ul-estimate-field input,
    .ul-estimate-field select {
        height: 55px;
    }


    .ul-estimate__submit-row {
        align-items: flex-start;

        flex-direction: column;
    }

}


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

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

    .ul-estimate {
        padding:
            78px 0
            80px;
    }


    .ul-estimate__layout {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .ul-estimate__content {
        padding:
            31px;

        border-radius: 21px;
    }


    .ul-estimate__title {
        font-size:
            clamp(2.8rem, 8.5vw, 3.8rem);
    }


    .ul-estimate__intro {
        max-width: 610px;

        font-size: 1rem;
    }


    .ul-estimate__context {
        display: grid;

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

        gap: 7px;
    }


    .ul-estimate__context-item {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        min-height: 126px;

        padding: 13px;
    }


    .ul-estimate__context-icon {
        width: 42px;
        height: 42px;
    }


    .ul-estimate__context-item strong {
        font-size: .92rem;
    }


    .ul-estimate__context-item span {
        font-size: .79rem;
    }


    .ul-estimate__call {
        margin-top: 22px;
    }


    .ul-estimate__form-shell {
        padding: 29px;

        border-radius: 21px;
    }


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

        gap: 12px;
    }


    .ul-estimate-field input,
    .ul-estimate-field select {
        height: 54px;

        font-size: .94rem;
    }


    .ul-estimate-field textarea {
        min-height: 150px;

        font-size: .94rem;
    }


    .ul-estimate__submit-row {
        align-items: flex-start;

        flex-direction: column;

        gap: 17px;
    }

}


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

@media (max-width: 479px) {

    .ul-estimate {
        padding:
            66px 0
            69px;
    }


    .ul-estimate__topography {
        left: -620px;

        opacity: .32;
    }


    .ul-estimate__layout {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .ul-estimate__content {
        padding:
            26px 18px;

        border-radius: 18px;
    }


    .ul-estimate__eyebrow {
        margin-bottom: 15px;

        font-size: .70rem;
    }


    .ul-estimate__eyebrow-line {
        width: 39px;
    }


    .ul-estimate__title {
        margin-bottom: 21px;

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

        line-height: .95;
    }


    .ul-estimate__intro {
        margin-bottom: 27px;

        font-size: .94rem;

        line-height: 1.58;
    }


    .ul-estimate__context {
        gap: 7px;
    }


    .ul-estimate__context-item {
        grid-template-columns:
            42px
            minmax(0,1fr);

        min-height: 63px;

        padding: 8px 9px;
    }


    .ul-estimate__context-icon {
        width: 42px;
        height: 42px;

        border-radius: 11px;
    }


    .ul-estimate__context-item strong {
        font-size: .90rem;
    }


    .ul-estimate__context-item span {
        font-size: .78rem;
    }


    .ul-estimate__call {
        grid-template-columns:
            minmax(0,1fr)
            34px;

        gap: 8px;

        min-height: 59px;

        margin-top: 24px;
    }


    .ul-estimate__call > span:first-child {
        font-size: .78rem;
    }


    .ul-estimate__call strong {
        grid-column: 1;

        font-size: .94rem;
    }


    .ul-estimate__call > span:last-child {
        grid-column: 2;
        grid-row: 1 / span 2;

        width: 34px;
        height: 34px;
    }


    .ul-estimate__form-shell {
        padding:
            25px 16px;

        border-radius: 18px;
    }


    .ul-estimate__form-top {
        margin-bottom: 25px;

        padding-bottom: 18px;
    }


    .ul-estimate__form-top > div > span {
        font-size: .70rem;
    }


    .ul-estimate__form-top strong {
        font-size: 1.45rem;
    }


    .ul-estimate__form-mark {
        width: 41px;
        height: 41px;

        border-radius: 12px;
    }


    .ul-estimate__status {
        margin-bottom: 20px;

        padding:
            13px 14px;

        font-size: .88rem;
    }


    .ul-estimate__form {
        gap: 18px;
    }


    .ul-estimate__row {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .ul-estimate-field > label,
    .ul-estimate-field__label-row label {
        margin-bottom: 8px;

        font-size: .88rem;
    }


    .ul-estimate-field input,
    .ul-estimate-field select {
        height: 53px;

        padding-left: 14px;

        font-size: .92rem;
    }


    .ul-estimate-field textarea {
        min-height: 145px;

        padding:
            13px 14px;

        font-size: .92rem;

        line-height: 1.48;
    }


    .ul-estimate-field__error {
        min-height: 16px;

        font-size: .74rem;
    }


    .ul-estimate-field__counter {
        font-size: .72rem;
    }


    .ul-estimate__submit-row {
        align-items: stretch;

        flex-direction: column;

        gap: 16px;

        padding-top: 20px;
    }


    .ul-estimate__submit-row p {
        font-size: .84rem;
    }


    .ul-estimate__submit {
        width: 100%;
        min-width: 0;

        min-height: 55px;

        font-size: .79rem;
    }


    .ul-estimate__submit svg {
        width: 41px;
        height: 41px;

        padding: 11px;
    }

}


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

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

    .ul-estimate__context-item,
    .ul-estimate__call,
    .ul-estimate__call > span:last-child,
    .ul-estimate-field input,
    .ul-estimate-field select,
    .ul-estimate-field textarea,
    .ul-estimate-field__icon,
    .ul-estimate-field__select-arrow,
    .ul-estimate__submit,
    .ul-estimate__submit svg {
        animation: none !important;

        transition: none !important;
    }

}




















































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   FREE ESTIMATE — PROJECT PHOTO UPLOAD

   ADD AT END OF CONTACT.CSS
========================================================== */


/* ==========================================================
   PHOTO FIELD
========================================================== */

.ul-estimate-photo {
    position: relative;

    min-width: 0;

    padding-top:
        clamp(4px, .5vw, 8px);
}


/* ==========================================================
   HEADING
========================================================== */

.ul-estimate-photo__heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap:
        clamp(18px, 3vw, 35px);

    margin-bottom: 11px;
}


/* ==========================================================
   HEADING COPY
========================================================== */

.ul-estimate-photo__heading-copy {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 0;
}


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

.ul-estimate-photo__title-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;
}


/* ==========================================================
   LABEL
========================================================== */

.ul-estimate-photo__label {
    color:
        var(--ul-text);

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

    font-size:
        clamp(.89rem, .87vw, .97rem);

    font-weight: 600;

    line-height: 1.25;
}


/* ==========================================================
   OPTIONAL BADGE
========================================================== */

.ul-estimate-photo__optional {
    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding:
        0 8px;

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

    border-radius: 999px;

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

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

    font-size: .67rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .055em;

    text-transform: uppercase;
}


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

.ul-estimate-photo__summary {
    color:
        var(--ul-text-muted);

    font-size: .80rem;

    font-weight: 500;

    line-height: 1.35;
}


/* ==========================================================
   REQUIREMENTS
========================================================== */

.ul-estimate-photo__requirements {
    flex: 0 1 auto;

    max-width: 310px;

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

    font-size: .77rem;

    font-weight: 500;

    line-height: 1.45;

    text-align: right;
}


/* ==========================================================
   REAL FILE INPUT

   Remains accessible but visually hidden.
========================================================== */

.ul-estimate-photo__input {
    position: absolute !important;

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

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

    overflow: hidden !important;

    clip:
        rect(0 0 0 0) !important;

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

    border: 0 !important;

    white-space: nowrap !important;

    opacity: 0 !important;
}


/* ==========================================================
   DROPZONE
========================================================== */

.ul-estimate-photo__dropzone {
    position: relative;

    overflow: hidden;

    border:
        1px dashed
        rgba(75, 113, 77, .26);

    border-radius:
        17px;

    background:

        linear-gradient(
            145deg,
            rgba(247, 250, 244, .96),
            rgba(240, 246, 235, .82)
        );

    transition:

        border-color .30s ease,

        background-color .30s ease,

        box-shadow .30s ease,

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


/* ==========================================================
   DROPZONE AMBIENT
========================================================== */

.ul-estimate-photo__dropzone::before {
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    pointer-events: none;

    background:

        radial-gradient(
            circle,
            rgba(112, 186, 202, .11),
            rgba(112, 186, 202, .025) 48%,
            transparent 70%
        );
}


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

.ul-estimate-photo__dropzone-content {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap:
        clamp(13px, 1.6vw, 19px);

    min-height: 108px;

    padding:
        clamp(17px, 2vw, 23px);
}


/* ==========================================================
   UPLOAD ICON
========================================================== */

.ul-estimate-photo__icon {
    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    flex: 0 0 auto;

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

    border-radius: 15px;

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

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

    transition:

        color .30s ease,

        background-color .30s ease,

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


.ul-estimate-photo__icon svg {
    width: 25px;
    height: 25px;
}


/* ==========================================================
   DROPZONE COPY
========================================================== */

.ul-estimate-photo__dropzone-copy {
    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 0;
}


.ul-estimate-photo__dropzone-copy strong {
    color:
        var(--ul-forest-950);

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

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

    font-weight: 500;

    line-height: 1.25;
}


.ul-estimate-photo__dropzone-copy span {
    max-width: 450px;

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

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

    line-height: 1.48;
}


/* ==========================================================
   CHOOSE BUTTON
========================================================== */

.ul-estimate-photo__choose {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding:
        0 13px
        0 15px;

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

    border-radius: 12px;

    color:
        var(--ul-white);

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

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

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

    font-size: .78rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .02em;

    cursor: pointer;

    white-space: nowrap;

    transition:

        background-color .30s ease,

        border-color .30s ease,

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

        box-shadow .30s ease;
}


.ul-estimate-photo__choose svg {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

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


/* ==========================================================
   CHOOSE HOVER
========================================================== */

.ul-estimate-photo__choose:hover {
    border-color:
        rgba(189, 60, 53, .24);

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

    transform:
        translateY(-2px);

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


.ul-estimate-photo__choose:hover svg {
    transform:
        rotate(90deg);
}


/* ==========================================================
   DROPZONE HOVER
========================================================== */

.ul-estimate-photo__dropzone:hover {
    border-color:
        rgba(126, 187, 80, .45);

    background:
        var(--ul-white);

    box-shadow:
        0 14px 35px
        rgba(43, 87, 56, .07);
}


.ul-estimate-photo__dropzone:hover
.ul-estimate-photo__icon {
    transform:
        translateY(-2px);

    color:
        var(--ul-white);

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


/* ==========================================================
   DRAGGING
========================================================== */

.ul-estimate-photo__dropzone.is-dragging {
    border-style: solid;

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

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

    box-shadow:

        0 0 0 4px
        rgba(126, 187, 80, .10),

        var(--ul-shadow-sm);

    transform:
        translateY(-2px);
}


/* ==========================================================
   INVALID
========================================================== */

.ul-estimate-photo__dropzone.is-invalid {
    border-style: solid;

    border-color:
        rgba(189, 60, 53, .52);

    background:
        #FFF9F8;

    box-shadow:

        0 0 0 4px
        rgba(189, 60, 53, .07);
}


/* ==========================================================
   ERROR
========================================================== */

.ul-estimate-photo__error {
    margin-top: 8px;

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

    font-size: .79rem;

    font-weight: 500;

    line-height: 1.4;
}


.ul-estimate-photo__error[hidden] {
    display: none !important;
}


/* ==========================================================
   FILE LIST
========================================================== */

.ul-estimate-photo__list {
    display: grid;

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

    gap: 9px;

    margin-top: 11px;
}


.ul-estimate-photo__list[hidden] {
    display: none !important;
}


/* ==========================================================
   FILE ITEM
========================================================== */

.ul-estimate-photo__item {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 11px;

    min-width: 0;

    min-height: 70px;

    padding:
        8px;

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

    border-radius: 14px;

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

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

    transition:

        border-color .30s ease,

        background-color .30s ease,

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


.ul-estimate-photo__item:hover {
    border-color:
        rgba(126, 187, 80, .26);

    background:
        var(--ul-white);

    transform:
        translateY(-2px);
}


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

.ul-estimate-photo__preview {
    position: relative;

    width: 52px;
    height: 52px;

    overflow: hidden;

    border-radius: 11px;

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


.ul-estimate-photo__preview img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   ITEM COPY
========================================================== */

.ul-estimate-photo__item-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.ul-estimate-photo__item-copy strong {
    display: block;

    overflow: hidden;

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

    font-size: .83rem;

    font-weight: 600;

    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.ul-estimate-photo__item-copy span {
    color:
        var(--ul-text-muted);

    font-size: .72rem;

    font-weight: 500;
}


/* ==========================================================
   REMOVE
========================================================== */

.ul-estimate-photo__remove {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    padding: 0;

    border:
        1px solid
        rgba(189, 60, 53, .13);

    border-radius: 10px;

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

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

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

    font-size: 1.23rem;

    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    transition:

        color .25s ease,

        background-color .25s ease,

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


.ul-estimate-photo__remove:hover {
    color:
        var(--ul-white);

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

    transform:
        rotate(5deg)
        scale(1.04);
}


/* ==========================================================
   FOCUS
========================================================== */

.ul-estimate-photo__choose:focus-visible,
.ul-estimate-photo__remove:focus-visible {
    outline:
        2px solid
        var(--ul-green-600);

    outline-offset: 3px;
}


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

@media (min-width: 1200px) {

    .ul-estimate-photo__dropzone-content {
        grid-template-columns:
            54px
            minmax(0, 1fr)
            auto;
    }


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

}


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

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

    .ul-estimate-photo__heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }


    .ul-estimate-photo__requirements {
        max-width: none;

        text-align: left;
    }


    .ul-estimate-photo__dropzone-content {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        min-height: 112px;
    }


    .ul-estimate-photo__icon {
        width: 48px;
        height: 48px;
    }


    .ul-estimate-photo__choose {
        grid-column:
            1 / -1;

        width: 100%;

        margin-top: 2px;
    }


    .ul-estimate-photo__list {
        grid-template-columns: 1fr;
    }

}


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

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

    .ul-estimate-photo__heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }


    .ul-estimate-photo__requirements {
        max-width: none;

        font-size: .73rem;

        text-align: left;
    }


    .ul-estimate-photo__dropzone {
        border-radius: 15px;
    }


    .ul-estimate-photo__dropzone-content {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 12px;

        min-height: 0;

        padding: 16px;
    }


    .ul-estimate-photo__icon {
        width: 48px;
        height: 48px;

        border-radius: 13px;
    }


    .ul-estimate-photo__dropzone-copy strong {
        font-size: 1rem;
    }


    .ul-estimate-photo__dropzone-copy span {
        font-size: .84rem;
    }


    .ul-estimate-photo__choose {
        grid-column:
            1 / -1;

        width: 100%;

        min-height: 45px;

        margin-top: 3px;
    }


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

        gap: 8px;
    }


    .ul-estimate-photo__item {
        grid-template-columns:
            46px
            minmax(0, 1fr)
            32px;

        min-height: 64px;

        gap: 9px;

        padding: 7px;
    }


    .ul-estimate-photo__preview {
        width: 46px;
        height: 46px;

        border-radius: 9px;
    }


    .ul-estimate-photo__remove {
        width: 32px;
        height: 32px;

        border-radius: 9px;
    }

}


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

@media (max-width: 479px) {

    .ul-estimate-photo__heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;

        margin-bottom: 9px;
    }


    .ul-estimate-photo__title-row {
        gap: 7px;
    }


    .ul-estimate-photo__label {
        font-size: .88rem;
    }


    .ul-estimate-photo__optional {
        min-height: 22px;

        padding:
            0 7px;

        font-size: .62rem;
    }


    .ul-estimate-photo__summary {
        font-size: .75rem;
    }


    .ul-estimate-photo__requirements {
        max-width: none;

        font-size: .70rem;

        line-height: 1.4;

        text-align: left;
    }


    .ul-estimate-photo__dropzone {
        border-radius: 14px;
    }


    .ul-estimate-photo__dropzone-content {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        min-height: 0;

        gap: 12px;

        padding:
            16px 14px;
    }


    .ul-estimate-photo__icon {
        width: 45px;
        height: 45px;

        border-radius: 12px;
    }


    .ul-estimate-photo__icon svg {
        width: 22px;
        height: 22px;
    }


    .ul-estimate-photo__dropzone-copy strong {
        font-size: .97rem;
    }


    .ul-estimate-photo__dropzone-copy span {
        font-size: .82rem;

        line-height: 1.46;
    }


    .ul-estimate-photo__choose {
        width: 100%;

        min-height: 45px;

        padding:
            0 13px;

        font-size: .75rem;
    }


    .ul-estimate-photo__error {
        font-size: .74rem;
    }


    .ul-estimate-photo__list {
        grid-template-columns: 1fr;

        gap: 7px;

        margin-top: 9px;
    }


    .ul-estimate-photo__item {
        grid-template-columns:
            45px
            minmax(0, 1fr)
            32px;

        min-height: 61px;

        gap: 9px;

        padding: 7px;
    }


    .ul-estimate-photo__preview {
        width: 45px;
        height: 45px;

        border-radius: 9px;
    }


    .ul-estimate-photo__item-copy strong {
        font-size: .79rem;
    }


    .ul-estimate-photo__item-copy span {
        font-size: .68rem;
    }


    .ul-estimate-photo__remove {
        width: 32px;
        height: 32px;

        border-radius: 9px;
    }

}


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

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

    .ul-estimate-photo__dropzone,
    .ul-estimate-photo__icon,
    .ul-estimate-photo__choose,
    .ul-estimate-photo__choose svg,
    .ul-estimate-photo__item,
    .ul-estimate-photo__remove {
        animation: none !important;

        transition: none !important;
    }

}