/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   GLOBAL DESIGN SYSTEM — 2026

   Direction:
   Modern Landscape Spectrum

   PRIMARY:
   Light botanical green

   SUPPORTING BRAND COLORS:
   Red
   Blue
   Yellow
   Orange
   Cyan
   Purple

   DISPLAY:
   Outfit

   BODY:
   DM Sans

   Prefix:
   --ul-*
   .ul-*
========================================================== */


/* ==========================================================
   01. DESIGN TOKENS
========================================================== */

:root {

    /* ======================================================
       GREEN — DEEP SUPPORT

       These are no longer near-black forest greens.

       They provide depth while remaining visibly green.
    ====================================================== */

    --ul-forest-950: #2B5738;
    --ul-forest-900: #356540;
    --ul-forest-850: #3E7146;
    --ul-forest-800: #487D4D;
    --ul-forest-700: #568D57;
    --ul-forest-600: #68A064;


    /* ======================================================
       GREEN — PRIMARY BRAND FAMILY

       Main identity of the website.
    ====================================================== */

    --ul-green-700: #6EAB46;
    --ul-green-600: #7EBB50;
    --ul-green-500: #8FC85F;
    --ul-green-400: #A7D576;


    /* ======================================================
       LOGO COLORS
       Original-color references
    ====================================================== */

    --ul-logo-red: #BD3C35;
    --ul-logo-blue: #315A98;
    --ul-logo-cyan: #70BACA;
    --ul-logo-purple: #985B94;
    --ul-logo-yellow: #F1D737;
    --ul-logo-orange: #E99129;


    /* ======================================================
       RED FAMILY

       More present than in the old site, but controlled.
    ====================================================== */

    --ul-red-800: #8F302C;
    --ul-red-700: #A93A34;
    --ul-red-600: #BD463F;
    --ul-red-500: #CF574F;
    --ul-red-400: #DF746D;
    --ul-red-300: #EFA49F;


    /* ======================================================
       BLUE FAMILY

       Gives contrast against warm green/yellow/red.
    ====================================================== */

    --ul-blue-800: #294A7D;
    --ul-blue-700: #315A98;
    --ul-blue-600: #416CA7;
    --ul-blue-500: #557FB6;
    --ul-blue-400: #789CC8;
    --ul-blue-300: #A7BFDD;


    /* ======================================================
       YELLOW FAMILY
    ====================================================== */

    --ul-yellow-800: #A47C16;
    --ul-yellow-700: #BA921D;
    --ul-yellow-600: #D4AD28;
    --ul-yellow-500: #EBC83B;
    --ul-yellow-400: #F2D95B;
    --ul-yellow-300: #F7E889;


    /* ======================================================
       ORANGE FAMILY
    ====================================================== */

    --ul-orange-700: #BB6A20;
    --ul-orange-600: #D17A24;
    --ul-orange-500: #E99129;
    --ul-orange-400: #F0AD52;
    --ul-orange-300: #F5CC8A;


    /* ======================================================
       CYAN FAMILY
    ====================================================== */

    --ul-cyan-700: #4A919F;
    --ul-cyan-600: #5AA7B6;
    --ul-cyan-500: #70BACA;
    --ul-cyan-400: #92CAD5;
    --ul-cyan-300: #B8DEE5;


    /* ======================================================
       PURPLE FAMILY
    ====================================================== */

    --ul-purple-700: #74466F;
    --ul-purple-600: #865080;
    --ul-purple-500: #985B94;
    --ul-purple-400: #B07CAC;
    --ul-purple-300: #CDA8C9;


    /* ======================================================
       LEGACY GOLD TOKENS

       Keep these names because existing / future code
       can still reference them.

       They now form a premium warm range rather than
       the old muted brown-gold.
    ====================================================== */

    --ul-gold-700: #B47A21;
    --ul-gold-600: #CE9328;
    --ul-gold-500: #E5AD32;
    --ul-gold-400: #EFCB50;
    --ul-gold-300: #F5DF81;


    /* ======================================================
       CHARCOAL
    ====================================================== */

    --ul-charcoal-950: #151B16;
    --ul-charcoal-900: #1F2821;
    --ul-charcoal-800: #303A32;
    --ul-charcoal-700: #465149;


    /* ======================================================
       LIGHT NEUTRALS

       Slight green warmth instead of heavy beige.
    ====================================================== */

    --ul-white: #FFFFFF;

    --ul-ivory-100: #FCFDF9;
    --ul-ivory-200: #F7F9F3;
    --ul-ivory-300: #EDF1E8;

    --ul-cream: #F7F8F2;
    --ul-sand: #DCE1D6;


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

    --ul-text: #1A241D;
    --ul-text-soft: #4A5850;
    --ul-text-muted: #69766E;

    --ul-text-light: #FFFFFF;

    --ul-text-light-soft:
        rgba(255, 255, 255, .82);

    --ul-text-light-muted:
        rgba(255, 255, 255, .62);


    /* ======================================================
       BACKGROUNDS
    ====================================================== */

    --ul-bg: #F4F7F0;

    --ul-bg-soft: #FAFCF8;

    --ul-bg-dark: #2B5738;

    --ul-bg-dark-soft: #356540;

    --ul-surface:
        rgba(255, 255, 255, .82);

    --ul-surface-solid:
        #FFFFFF;

    --ul-surface-soft:
        #F7F9F4;

    --ul-surface-dark:
        rgba(43, 87, 56, .90);


    /* ======================================================
       COLORED SOFT SURFACES

       Used sparingly to introduce logo colors without
       making entire sections aggressively saturated.
    ====================================================== */

    --ul-surface-green:
        #F0F6E9;

    --ul-surface-red:
        #FAEFED;

    --ul-surface-blue:
        #EEF3F9;

    --ul-surface-yellow:
        #FCF8E7;

    --ul-surface-orange:
        #FBF2E9;

    --ul-surface-cyan:
        #EDF7F8;

    --ul-surface-purple:
        #F7F0F6;


    /* ======================================================
       BORDERS
    ====================================================== */

    --ul-border:
        rgba(75, 113, 77, .15);

    --ul-border-medium:
        rgba(75, 113, 77, .23);

    --ul-border-strong:
        rgba(75, 113, 77, .34);

    --ul-border-dark:
        rgba(255, 255, 255, .17);

    --ul-border-gold:
        rgba(229, 173, 50, .48);


    /* ======================================================
       BRAND GRADIENTS

       Large surfaces:
       mostly green.

       Spectrum:
       restricted to small visual details.
    ====================================================== */

    --ul-gradient-green:
        linear-gradient(
            135deg,
            #6EAB46 0%,
            #8FC85F 48%,
            #A7D576 100%
        );


    --ul-gradient-green-deep:
        linear-gradient(
            135deg,
            #356540 0%,
            #568D57 55%,
            #7EBB50 100%
        );


    --ul-gradient-warm:
        linear-gradient(
            110deg,
            #F2D95B 0%,
            #E99129 48%,
            #BD463F 100%
        );


    --ul-gradient-cool:
        linear-gradient(
            110deg,
            #7EBB50 0%,
            #70BACA 52%,
            #315A98 100%
        );


    --ul-gradient-red:
        linear-gradient(
            135deg,
            #A93A34,
            #CF574F
        );


    --ul-gradient-blue:
        linear-gradient(
            135deg,
            #315A98,
            #557FB6
        );


    --ul-gradient-brand:
        linear-gradient(
            100deg,
            #7EBB50 0%,
            #A7D576 18%,
            #F2D95B 35%,
            #E99129 51%,
            #BD463F 68%,
            #315A98 84%,
            #70BACA 100%
        );


    /* ======================================================
       SHADOW SYSTEM

       Softer and wider than old shadows.
       No heavy black floating cards.
    ====================================================== */

    --ul-shadow-xs:
        0 4px 16px
        rgba(35, 72, 46, .055);


    --ul-shadow-sm:
        0 12px 32px
        rgba(35, 72, 46, .085);


    --ul-shadow-md:
        0 20px 52px
        rgba(35, 72, 46, .12);


    --ul-shadow-lg:
        0 32px 84px
        rgba(35, 72, 46, .16);


    --ul-shadow-dark:
        0 28px 76px
        rgba(21, 44, 28, .26);


    --ul-shadow-gold:
        0 16px 38px
        rgba(229, 173, 50, .18);


    --ul-shadow-green:
        0 18px 42px
        rgba(126, 187, 80, .20);


    --ul-shadow-red:
        0 18px 42px
        rgba(189, 70, 63, .17);


    --ul-shadow-blue:
        0 18px 42px
        rgba(49, 90, 152, .17);


    /* ======================================================
       RADII

       More contemporary than previous system.

       Still controlled:
       buttons do not become giant pills by default.
    ====================================================== */

    --ul-radius-xs: 8px;
    --ul-radius-sm: 12px;
    --ul-radius-md: 18px;
    --ul-radius-lg: 24px;
    --ul-radius-xl: 30px;


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

    --ul-font-display:
        "Outfit",
        Arial,
        sans-serif;

    --ul-font-body:
        "DM Sans",
        Arial,
        sans-serif;


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

    --ul-ease-out:
        cubic-bezier(.16, 1, .3, 1);

    --ul-ease-soft:
        cubic-bezier(.22, .61, .36, 1);

    --ul-ease-expo:
        cubic-bezier(.19, 1, .22, 1);

    --ul-ease-in-out:
        cubic-bezier(.76, 0, .24, 1);


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

    --ul-container:
        min(
            1400px,
            calc(100% - 96px)
        );

    --ul-section-space:
        clamp(
            100px,
            8vw,
            150px
        );

    --ul-scroll-offset:
        120px;

    --ul-header-height:
        92px;


    /* ======================================================
       Z INDEX
    ====================================================== */

    --ul-z-content: 1;
    --ul-z-floating: 20;
    --ul-z-header: 100;
    --ul-z-overlay: 500;
    --ul-z-transition: 9999;
}


/* ==========================================================
   02. RESET
========================================================== */

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


html {
    margin: 0;
    padding: 0;

    scroll-behavior:
        smooth;

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--ul-green-600)
        var(--ul-ivory-300);
}


body {
    margin: 0;
    padding: 0;

    min-width: 320px;

    min-height:
        100vh;

    color:
        var(--ul-text);

    background:
        var(--ul-bg);

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

    font-size:
        17px;

    font-weight:
        400;

    line-height:
        1.65;

    letter-spacing:
        -.012em;

    overflow-x:
        hidden;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

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


body,
button,
input,
textarea,
select {
    font-family:
        var(--ul-font-body);
}


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


button {
    border: 0;

    padding: 0;

    color:
        inherit;

    background:
        none;

    cursor:
        pointer;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


img,
picture,
video,
svg,
canvas {
    display:
        block;

    max-width:
        100%;
}


img {
    height:
        auto;
}


ul,
ol {
    margin: 0;

    padding: 0;
}


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


::selection {
    color:
        var(--ul-charcoal-950);

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


/* ==========================================================
   03. BODY ATMOSPHERE

   No grid.

   Large blurred organic color fields provide depth.
========================================================== */

body::before {
    content: "";

    position: fixed;

    z-index: -2;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 5% 18%,
            rgba(126, 187, 80, .075),
            transparent 25%
        ),

        radial-gradient(
            circle at 94% 15%,
            rgba(112, 186, 202, .045),
            transparent 26%
        ),

        radial-gradient(
            circle at 86% 83%,
            rgba(189, 70, 63, .037),
            transparent 25%
        );
}


/* ==========================================================
   04. GLOBAL PAGE
========================================================== */

.ul-page {
    position:
        relative;

    min-height:
        100vh;
}


/*
IMPORTANT:
No transform/filter/perspective on .ul-page.

Fixed Header and overlays must remain attached
to the viewport.
*/


/* ==========================================================
   05. CONTAINER
========================================================== */

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

    margin-inline:
        auto;
}


/* ==========================================================
   06. SECTION FOUNDATION
========================================================== */

.ul-section {
    position:
        relative;

    padding-block:
        var(--ul-section-space);

    isolation:
        isolate;
}


[id] {
    scroll-margin-top:
        var(--ul-scroll-offset);
}


/* ==========================================================
   07. SECTION BACKGROUND UTILITIES
========================================================== */

.ul-section--white {
    background:
        var(--ul-white);
}


.ul-section--soft {
    background:
        var(--ul-bg-soft);
}


.ul-section--green {
    background:
        var(--ul-surface-green);
}


.ul-section--dark {
    color:
        var(--ul-text-light);

    background:
        var(--ul-bg-dark);
}


/* ==========================================================
   08. GLOBAL TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        inherit;

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

    text-wrap:
        balance;
}


/* ==========================================================
   DISPLAY XL
========================================================== */

.ul-display-xl,
h1 {
    font-size:
        clamp(
            3.7rem,
            5.7vw,
            6.7rem
        );

    font-weight:
        500;

    line-height:
        .94;

    letter-spacing:
        -.05em;
}


/* ==========================================================
   DISPLAY LG
========================================================== */

.ul-display-lg,
h2 {
    font-size:
        clamp(
            2.9rem,
            4.6vw,
            5.1rem
        );

    font-weight:
        500;

    line-height:
        .97;

    letter-spacing:
        -.045em;
}


/* ==========================================================
   DISPLAY MD
========================================================== */

.ul-display-md,
h3 {
    font-size:
        clamp(
            1.45rem,
            1.9vw,
            2.15rem
        );

    font-weight:
        500;

    line-height:
        1.1;

    letter-spacing:
        -.03em;
}


h4 {
    font-weight:
        500;
}


/* ==========================================================
   PARAGRAPHS
========================================================== */

p {
    color:
        var(--ul-text-soft);
}


.ul-copy-lg {
    font-size:
        clamp(
            1.07rem,
            1.15vw,
            1.2rem
        );

    line-height:
        1.72;
}


.ul-copy {
    font-size:
        1rem;

    line-height:
        1.67;
}


/* ==========================================================
   09. GLOBAL EYEBROW SYSTEM

   Each section can override --ul-accent.
========================================================== */

.ul-eyebrow {
    --ul-accent:
        var(--ul-logo-red);

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--ul-accent);

    font-size:
        .78rem;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


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

    width: 48px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--ul-accent),
            transparent
        );
}


/* ==========================================================
   10. GLOBAL SURFACE
========================================================== */

.ul-surface {
    border:
        1px solid
        var(--ul-border);

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

    background:
        var(--ul-surface);

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


.ul-surface--solid {
    background:
        var(--ul-surface-solid);
}


.ul-surface--glass {
    background:
        rgba(255, 255, 255, .68);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(120%);

    backdrop-filter:
        blur(18px)
        saturate(120%);
}


/* ==========================================================
   11. BUTTON FOUNDATION
========================================================== */

.ul-btn {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 12px;

    min-height:
        54px;

    padding:
        0 23px;

    overflow:
        hidden;

    border:
        1px solid transparent;

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

    isolation:
        isolate;

    font-size:
        .9rem;

    font-weight:
        600;

    line-height:
        1;

    transition:
        transform .4s
        var(--ul-ease-out),

        color .35s ease,

        background-color .35s ease,

        border-color .35s ease,

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


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


/* ==========================================================
   PRIMARY GREEN
========================================================== */

.ul-btn--primary {
    color:
        var(--ul-white);

    background:
        var(--ul-gradient-green-deep);

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


.ul-btn--primary:hover {
    box-shadow:
        0 20px 46px
        rgba(126, 187, 80, .28);
}


/* ==========================================================
   YELLOW CTA
========================================================== */

.ul-btn--yellow {
    color:
        var(--ul-charcoal-950);

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

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


/* ==========================================================
   RED
========================================================== */

.ul-btn--red {
    color:
        var(--ul-white);

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

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


/* ==========================================================
   BLUE
========================================================== */

.ul-btn--blue {
    color:
        var(--ul-white);

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

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


/* ==========================================================
   OUTLINE
========================================================== */

.ul-btn--outline {
    color:
        var(--ul-forest-950);

    border-color:
        var(--ul-border-medium);

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


.ul-btn--outline:hover {
    border-color:
        var(--ul-green-600);

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


/* ==========================================================
   12. CHIPS / MICRO LABELS
========================================================== */

.ul-chip {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        31px;

    padding:
        0 11px;

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

    border-radius:
        8px;

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

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

    font-size:
        .72rem;

    font-weight:
        500;
}


/* ==========================================================
   13. BRAND SPECTRUM LINE

   Full logo palette is intentionally restricted
   to small features like this.
========================================================== */

.ul-spectrum-line {
    width:
        100%;

    height:
        3px;

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


/* ==========================================================
   14. COLOR DOT UTILITIES
========================================================== */

.ul-dot {
    display:
        block;

    width: 8px;
    height: 8px;

    border-radius:
        50%;
}


.ul-dot--green {
    background:
        var(--ul-green-500);
}


.ul-dot--red {
    background:
        var(--ul-red-500);
}


.ul-dot--blue {
    background:
        var(--ul-blue-500);
}


.ul-dot--yellow {
    background:
        var(--ul-yellow-500);
}


.ul-dot--orange {
    background:
        var(--ul-orange-500);
}


.ul-dot--cyan {
    background:
        var(--ul-cyan-500);
}


.ul-dot--purple {
    background:
        var(--ul-purple-500);
}


/* ==========================================================
   15. FOCUS SYSTEM
========================================================== */

:focus-visible {
    outline:
        3px solid
        rgba(49, 90, 152, .72);

    outline-offset:
        4px;
}


/* ==========================================================
   16. SCROLLBAR
========================================================== */

::-webkit-scrollbar {
    width:
        11px;
}


::-webkit-scrollbar-track {
    background:
        var(--ul-ivory-300);
}


::-webkit-scrollbar-thumb {
    border:
        3px solid
        var(--ul-ivory-300);

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            var(--ul-green-500),
            var(--ul-green-700)
        );
}


::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            var(--ul-logo-blue),
            var(--ul-logo-red)
        );
}


/* ==========================================================
   17. PAGE TRANSITION
========================================================== */

.ul-page-transition {
    position:
        fixed;

    z-index:
        var(--ul-z-transition);

    inset: 0;

    display:
        grid;

    place-items:
        center;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    overflow:
        hidden;

    background:
        var(--ul-bg-dark);

    transform:
        translateY(101%);

    transition:
        transform .58s
        var(--ul-ease-in-out),

        opacity .2s ease,

        visibility 0s linear .58s;
}


/* ==========================================================
   TRANSITION TEXTURE
========================================================== */

.ul-page-transition__texture {
    position:
        absolute;

    inset: 0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 15% 22%,
            rgba(167, 213, 118, .18),
            transparent 25%
        ),

        radial-gradient(
            circle at 83% 23%,
            rgba(112, 186, 202, .12),
            transparent 27%
        ),

        radial-gradient(
            circle at 76% 82%,
            rgba(189, 70, 63, .12),
            transparent 24%
        );
}


/* ==========================================================
   TRANSITION SPECTRUM
========================================================== */

.ul-page-transition__spectrum {
    position:
        absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 5px;

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


/* ==========================================================
   TRANSITION LINE
========================================================== */

.ul-page-transition__line {
    position:
        relative;

    width:
        min(
            260px,
            44vw
        );

    height:
        4px;

    overflow:
        hidden;

    border-radius:
        999px;

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


.ul-page-transition__line::after {
    content: "";

    position:
        absolute;

    inset: 0;

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

    transform:
        translateX(-105%);
}


/* ==========================================================
   LEAVING
========================================================== */

body.ul-is-leaving
.ul-page-transition {
    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        all;

    transform:
        translateY(0);

    transition:
        transform .58s
        var(--ul-ease-in-out),

        opacity .2s ease;
}


body.ul-is-leaving
.ul-page-transition__line::after {
    animation:
        ulTransitionLine
        .58s
        var(--ul-ease-in-out)
        forwards;
}


@keyframes ulTransitionLine {

    0% {
        transform:
            translateX(-105%);
    }

    55% {
        transform:
            translateX(0);
    }

    100% {
        transform:
            translateX(105%);
    }

}


/* ==========================================================
   18. SAME-PAGE SECTION TRANSITION
========================================================== */

.ul-section-transition {
    position:
        fixed;

    z-index:
        calc(
            var(--ul-z-header) + 5
        );

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    opacity: 0;

    pointer-events:
        none;

    transform:
        scaleX(0);

    transform-origin:
        left center;

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


.ul-section-transition.is-active {
    animation:
        ulSectionTravel
        .78s
        var(--ul-ease-expo);
}


@keyframes ulSectionTravel {

    0% {
        opacity: 0;

        transform:
            scaleX(0);
    }

    18% {
        opacity: 1;
    }

    68% {
        opacity: 1;

        transform:
            scaleX(1);
    }

    100% {
        opacity: 0;

        transform:
            scaleX(1);
    }

}


/* ==========================================================
   19. GLOBAL REVEALS

   Future section scripts may use custom animation systems,
   but these remain available for general content.
========================================================== */

[data-ul-reveal] {
    --ul-reveal-delay:
        0ms;
}


/* ==========================================================
   SOFT
========================================================== */

[data-ul-reveal="soft"] {
    opacity: 0;

    transform:
        translate3d(
            0,
            26px,
            0
        );

    transition:
        opacity .68s ease
        var(--ul-reveal-delay),

        transform .9s
        var(--ul-ease-out)
        var(--ul-reveal-delay);
}


[data-ul-reveal="soft"].is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* ==========================================================
   CLIP
========================================================== */

[data-ul-reveal="clip"] {
    opacity: 0;

    clip-path:
        inset(
            0 0 100% 0
        );

    transform:
        translateY(18px);

    transition:
        opacity .4s ease
        var(--ul-reveal-delay),

        clip-path 1s
        var(--ul-ease-expo)
        var(--ul-reveal-delay),

        transform 1s
        var(--ul-ease-expo)
        var(--ul-reveal-delay);
}


[data-ul-reveal="clip"].is-visible {
    opacity: 1;

    clip-path:
        inset(
            0 0 0 0
        );

    transform:
        translateY(0);
}


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

[data-ul-reveal="line"] {
    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform 1s
        var(--ul-ease-expo)
        var(--ul-reveal-delay);
}


[data-ul-reveal="line"].is-visible {
    transform:
        scaleX(1);
}


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

[data-ul-reveal="image"] {
    overflow:
        hidden;

    clip-path:
        inset(
            0 100% 0 0
        );

    transition:
        clip-path 1.05s
        var(--ul-ease-expo)
        var(--ul-reveal-delay);
}


[data-ul-reveal="image"] img {
    transform:
        scale(1.07);

    transition:
        transform 1.35s
        var(--ul-ease-expo)
        var(--ul-reveal-delay);
}


[data-ul-reveal="image"].is-visible {
    clip-path:
        inset(
            0 0 0 0
        );
}


[data-ul-reveal="image"].is-visible img {
    transform:
        scale(1);
}


/* ==========================================================
   SCALE
========================================================== */

[data-ul-reveal="scale"] {
    opacity: 0;

    transform:
        scale(.965);

    transition:
        opacity .68s ease
        var(--ul-reveal-delay),

        transform .9s
        var(--ul-ease-expo)
        var(--ul-reveal-delay);
}


[data-ul-reveal="scale"].is-visible {
    opacity: 1;

    transform:
        scale(1);
}


/* ==========================================================
   20. STAGGER UTILITIES
========================================================== */

.ul-delay-1 {
    --ul-reveal-delay:
        80ms;
}


.ul-delay-2 {
    --ul-reveal-delay:
        160ms;
}


.ul-delay-3 {
    --ul-reveal-delay:
        240ms;
}


.ul-delay-4 {
    --ul-reveal-delay:
        320ms;
}


.ul-delay-5 {
    --ul-reveal-delay:
        400ms;
}


/* ==========================================================
   21. VISUALLY HIDDEN
========================================================== */

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

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

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

    overflow: hidden !important;

    clip:
        rect(
            0,
            0,
            0,
            0
        ) !important;

    white-space:
        nowrap !important;

    border: 0 !important;
}


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

@media (min-width: 1200px) {

    :root {

        --ul-container:
            min(
                1400px,
                calc(100% - 96px)
            );

        --ul-header-height:
            92px;

    }

}


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

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

    :root {

        --ul-container:
            calc(
                100% - 64px
            );

        --ul-section-space:
            96px;

        --ul-scroll-offset:
            104px;

        --ul-header-height:
            82px;

    }


    body {
        font-size:
            16.5px;
    }


    .ul-display-xl,
    h1 {
        font-size:
            clamp(
                3.1rem,
                7vw,
                5.2rem
            );
    }


    .ul-display-lg,
    h2 {
        font-size:
            clamp(
                2.55rem,
                5.6vw,
                4rem
            );
    }

}


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

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

    :root {

        --ul-container:
            calc(
                100% - 40px
            );

        --ul-section-space:
            78px;

        --ul-scroll-offset:
            92px;

        --ul-header-height:
            78px;

    }


    body {
        font-size:
            16px;

        line-height:
            1.62;
    }


    .ul-display-xl,
    h1 {
        font-size:
            clamp(
                2.75rem,
                10.4vw,
                4rem
            );
    }


    .ul-display-lg,
    h2 {
        font-size:
            clamp(
                2.3rem,
                9vw,
                3.4rem
            );
    }


    .ul-btn {
        min-height:
            52px;
    }

}


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

@media (max-width: 479px) {

    :root {

        --ul-container:
            calc(
                100% - 30px
            );

        --ul-section-space:
            68px;

        --ul-scroll-offset:
            84px;

        --ul-header-height:
            72px;

    }


    body {
        font-size:
            16px;

        line-height:
            1.6;
    }


    .ul-display-xl,
    h1 {
        font-size:
            clamp(
                2.45rem,
                11.7vw,
                3.35rem
            );

        letter-spacing:
            -.042em;
    }


    .ul-display-lg,
    h2 {
        font-size:
            clamp(
                2.15rem,
                10vw,
                2.9rem
            );

        letter-spacing:
            -.038em;
    }


    .ul-btn {
        min-height:
            50px;

        padding-inline:
            19px;
    }

}


/* ==========================================================
   ACCESSIBILITY — REDUCED MOTION

   Not a responsive breakpoint.
========================================================== */

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

    html {
        scroll-behavior:
            auto;
    }


    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;
    }


    [data-ul-reveal] {
        opacity:
            1 !important;

        transform:
            none !important;

        clip-path:
            none !important;
    }


    [data-ul-reveal="image"] img {
        transform:
            none !important;
    }

}

















































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   HEADER — MODERN WHITE TREE GLASS

   Concept:
   • Floating header over Hero
   • White translucent premium shell
   • Subtle tree / wood texture
   • Larger logo
   • Medium modern height
   • More visible navigation capsule
   • Green dominant accent
   • Red / yellow / orange / blue / cyan integrated
   • No layout space above Hero
========================================================== */


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

   IMPORTANT:
   Header now floats over the Hero.
   It no longer reserves physical page space.

   In the next Hero iteration:
   Hero height will become 100svh.
========================================================== */

.ul-header-slot {
    height: 0 !important;

    min-height: 0;

    margin: 0;

    padding: 0;

    flex: 0 0 0;

    pointer-events: none;
}


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

.ul-site-header {
    position: fixed;

    top: 0;
    left: 0;

    z-index:
        var(--ul-z-header);

    width: 100%;

    padding-top: 12px;

    pointer-events: none;

    transition:
        padding-top .4s
        var(--ul-ease-out);
}


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

.ul-site-header__shell {
    position: relative;

    width: 100%;

    pointer-events: auto;
}


/* ==========================================================
   MAIN FLOATING WHITE SURFACE
========================================================== */

.ul-site-header__shell::before {
    content: "";

    position: absolute;

    inset: 0;

    width:
        min(
            var(--ul-container),
            calc(100% - 96px)
        );

    margin-inline: auto;

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

    border-radius: 21px;

    background:

        linear-gradient(
            135deg,

            rgba(255, 255, 255, .94) 0%,

            rgba(255, 255, 255, .88) 42%,

            rgba(250, 252, 247, .88) 72%,

            rgba(255, 255, 255, .92) 100%
        );

    -webkit-backdrop-filter:
        blur(22px)
        saturate(135%);

    backdrop-filter:
        blur(22px)
        saturate(135%);

    box-shadow:

        0 18px 42px
        rgba(42, 77, 48, .13),

        0 5px 15px
        rgba(28, 38, 31, .055),

        inset 0 1px 0
        rgba(255, 255, 255, .96),

        inset 0 -1px 0
        rgba(73, 103, 77, .055);

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


/* ==========================================================
   TREE / WOOD TEXTURE

   Very subtle.

   Instead of brown wood filling the entire Header,
   these fine organic lines suggest tree bark.
========================================================== */

.ul-site-header__grain {
    position: absolute;

    inset: 0;

    width:
        min(
            var(--ul-container),
            calc(100% - 96px)
        );

    margin-inline: auto;

    overflow: hidden;

    border-radius: 21px;

    pointer-events: none;

    opacity: .60;
}


/* ==========================================================
   LONG ORGANIC VEINS
========================================================== */

.ul-site-header__grain::before {
    content: "";

    position: absolute;

    inset:
        -30% -3%;

    background:

        repeating-linear-gradient(
            99deg,

            transparent 0px,

            transparent 11px,

            rgba(116, 91, 67, .030) 12px,

            rgba(116, 91, 67, .030) 13px,

            transparent 14px,

            transparent 35px
        ),

        repeating-linear-gradient(
            103deg,

            transparent 0,

            transparent 28px,

            rgba(87, 128, 91, .025) 29px,

            rgba(87, 128, 91, .025) 31px,

            transparent 32px,

            transparent 57px
        );

    transform:
        rotate(-1.2deg)
        scale(1.08);
}


/* ==========================================================
   ORGANIC TREE RINGS
========================================================== */

.ul-site-header__grain::after {
    content: "";

    position: absolute;

    inset: 0;

    background:

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

            transparent 0,

            transparent 18px,

            rgba(121, 94, 70, .027) 19px,

            rgba(121, 94, 70, .027) 20px,

            transparent 21px,

            transparent 39px
        ),

        repeating-radial-gradient(
            ellipse at 78% 58%,

            transparent 0,

            transparent 24px,

            rgba(93, 137, 96, .024) 25px,

            rgba(93, 137, 96, .024) 26px,

            transparent 27px,

            transparent 49px
        );
}


/* ==========================================================
   BRAND SPECTRUM LINE

   The full logo palette appears only as a thin accent.
========================================================== */

.ul-site-header__spectrum {
    position: absolute;

    z-index: 5;

    left: 50%;

    bottom: -1px;

    width:
        min(
            calc(var(--ul-container) - 70px),
            calc(100% - 150px)
        );

    height: 2px;

    transform:
        translateX(-50%);

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-500) 0%,

            var(--ul-green-400) 15%,

            var(--ul-logo-yellow) 29%,

            var(--ul-logo-orange) 44%,

            var(--ul-logo-red) 60%,

            var(--ul-logo-purple) 72%,

            var(--ul-logo-blue) 85%,

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

    opacity: .92;

    box-shadow:
        0 5px 14px
        rgba(126, 187, 80, .13);
}


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

.ul-site-header__inner {
    position: relative;

    z-index: 6;

    display: grid;

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

    align-items: center;

    gap: 17px;

    min-height: 76px;

    padding:
        0 20px;
}


/* ==========================================================
   BRAND
========================================================== */

.ul-header-brand {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


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

.ul-header-brand__badge {
    position: absolute;

    top: 50%;

    left: -9px;

    width: 60px;
    height: 60px;

    transform:
        translateY(-50%);

    pointer-events: none;

    border-radius: 50%;

    opacity: .53;

    filter:
        blur(10px);

    background:

        radial-gradient(
            circle,

            rgba(241, 215, 55, .28) 0%,

            rgba(126, 187, 80, .15) 40%,

            rgba(112, 186, 202, .08) 57%,

            transparent 73%
        );
}


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

   Larger than previous versions.
========================================================== */

.ul-header-brand__logo {
    position: relative;

    width: 94px;

    flex: 0 0 auto;

    filter:

        drop-shadow(
            0 8px 15px
            rgba(43, 74, 48, .11)
        );

    transition:
        transform .45s
        var(--ul-ease-out);
}


.ul-header-brand:hover
.ul-header-brand__logo {
    transform:
        scale(1.035);
}


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

.ul-header-brand__copy {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.ul-header-brand__copy strong {
    color:
        var(--ul-charcoal-950);

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

    font-size: .98rem;

    font-weight: 500;

    line-height: 1;

    letter-spacing:
        -.027em;

    white-space: nowrap;
}


.ul-header-brand__copy small {
    color:
        var(--ul-text-muted);

    font-size: .66rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        .09em;

    text-transform: uppercase;
}


/* ==========================================================
   DESKTOP NAVIGATION

   More opaque than the first white version so the nav
   remains visually distinct inside the Header.
========================================================== */

.ul-header-nav {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    justify-self: center;

    gap: 3px;

    min-width: 0;

    padding: 4px;

    border:
        1px solid
        rgba(65, 95, 70, .11);

    border-radius: 13px;

    background:

        linear-gradient(
            180deg,

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

            rgba(247, 250, 245, .89)
        );

    box-shadow:

        0 8px 22px
        rgba(48, 84, 54, .075),

        inset 0 1px 0
        rgba(255, 255, 255, 1),

        inset 0 -1px 0
        rgba(57, 89, 63, .04);

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

    backdrop-filter:
        blur(12px);
}


/* ==========================================================
   NAV LINKS
========================================================== */

.ul-header-nav__link {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 39px;

    padding:
        0 13px;

    border-radius: 9px;

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

    font-size: .84rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        -.008em;

    transition:

        color .3s ease,

        background-color .3s ease,

        transform .35s
        var(--ul-ease-out),

        box-shadow .35s ease;
}


/* ==========================================================
   LINK ACCENT LINE
========================================================== */

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

    position: absolute;

    left: 13px;

    right: 13px;

    bottom: 5px;

    height: 2px;

    border-radius: 999px;

    transform:
        scaleX(0);

    transform-origin:
        left center;

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

    transition:

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

        background .3s ease;
}


/* ==========================================================
   NAV HOVER
========================================================== */

.ul-header-nav__link:hover,
.ul-header-nav__link:focus-visible {
    color:
        var(--ul-forest-950);

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

    transform:
        translateY(-1px);
}


.ul-header-nav__link:hover::after,
.ul-header-nav__link:focus-visible::after {
    transform:
        scaleX(1);
}


/* ==========================================================
   CURRENT LINK
========================================================== */

.ul-header-nav__link.is-current {
    color:
        var(--ul-forest-950);

    background:

        linear-gradient(
            180deg,

            rgba(240, 246, 233, .98),

            rgba(232, 242, 222, .94)
        );

    box-shadow:

        inset 0 0 0 1px
        rgba(126, 187, 80, .14),

        0 6px 15px
        rgba(72, 125, 77, .07);
}


.ul-header-nav__link.is-current::after {
    transform:
        scaleX(1);

    background:

        linear-gradient(
            90deg,

            var(--ul-green-600),

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


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

.ul-header-actions {
    display: inline-flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;
}


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

.ul-header-phone {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 46px;

    padding:
        0 11px;

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

    border-radius: 13px;

    background:

        linear-gradient(
            180deg,

            rgba(255, 255, 255, .96),

            rgba(245, 249, 250, .91)
        );

    box-shadow:

        0 8px 20px
        rgba(49, 90, 152, .065),

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

    transition:

        transform .35s
        var(--ul-ease-out),

        background .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;
}


.ul-header-phone:hover,
.ul-header-phone:focus-visible {
    transform:
        translateY(-2px);

    border-color:
        rgba(49, 90, 152, .24);

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

    box-shadow:
        0 12px 26px
        rgba(49, 90, 152, .10);
}


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

.ul-header-phone__icon {
    display: grid;

    place-items: center;

    width: 33px;
    height: 33px;

    flex: 0 0 auto;

    border-radius: 10px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            135deg,

            var(--ul-logo-blue),

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

    box-shadow:
        0 7px 16px
        rgba(49, 90, 152, .18);
}


.ul-header-phone__icon svg {
    width: 16px;
    height: 16px;
}


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

.ul-header-phone__copy {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.ul-header-phone__copy small {
    color:
        var(--ul-text-muted);

    font-size: .59rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        .08em;

    text-transform: uppercase;
}


.ul-header-phone__copy strong {
    color:
        var(--ul-charcoal-950);

    font-size: .80rem;

    font-weight: 600;

    line-height: 1;
}


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

.ul-header-estimate {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 47px;

    padding:
        0 16px;

    overflow: hidden;

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

    border-radius: 13px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            120deg,

            var(--ul-green-700) 0%,

            var(--ul-green-500) 66%,

            var(--ul-yellow-500) 100%
        );

    box-shadow:

        0 12px 27px
        rgba(126, 187, 80, .22),

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

    font-size: .81rem;

    font-weight: 600;

    line-height: 1;

    transition:

        transform .4s
        var(--ul-ease-out),

        box-shadow .4s ease;
}


/* ==========================================================
   CTA MULTICOLOR HOVER
========================================================== */

.ul-header-estimate::before {
    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            105deg,

            var(--ul-logo-red),

            var(--ul-logo-orange) 45%,

            var(--ul-logo-yellow) 100%
        );

    transform:
        translateX(-104%);

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


.ul-header-estimate span,
.ul-header-estimate svg {
    position: relative;

    z-index: 1;
}


.ul-header-estimate:hover,
.ul-header-estimate:focus-visible {
    transform:
        translateY(-2px);

    box-shadow:

        0 16px 34px
        rgba(126, 187, 80, .23),

        0 9px 23px
        rgba(189, 70, 63, .13);
}


.ul-header-estimate:hover::before,
.ul-header-estimate:focus-visible::before {
    transform:
        translateX(0);
}


.ul-header-estimate svg {
    width: 16px;
    height: 16px;
}


.ul-header-estimate--mobile {
    display: none;
}


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

.ul-menu-toggle {
    display: none;

    position: relative;

    align-items: center;

    justify-content: center;

    width: 46px;
    height: 46px;

    flex: 0 0 auto;

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

    border-radius: 13px;

    background:

        linear-gradient(
            180deg,

            rgba(255, 255, 255, .97),

            rgba(245, 249, 243, .91)
        );

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

    transition:

        transform .35s
        var(--ul-ease-out),

        border-color .3s ease,

        background .3s ease;
}


.ul-menu-toggle:hover,
.ul-menu-toggle:focus-visible {
    transform:
        translateY(-2px);

    border-color:
        rgba(189, 70, 63, .20);

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


/* ==========================================================
   MENU LINES
========================================================== */

.ul-menu-toggle__line {
    position: absolute;

    top: 50%;

    left: 50%;

    width: 20px;
    height: 2px;

    border-radius: 999px;

    background:
        var(--ul-charcoal-950);

    transform-origin:
        center;

    transition:

        transform .4s
        var(--ul-ease-out),

        background-color .3s ease;
}


.ul-menu-toggle__line:first-child {
    transform:
        translate(-50%, -5px);
}


.ul-menu-toggle__line:nth-child(2) {
    transform:
        translate(-50%, 5px);
}


.ul-menu-toggle__label {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


body.ul-nav-open
.ul-menu-toggle__line:first-child {
    transform:
        translate(-50%, 0)
        rotate(45deg);

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


body.ul-nav-open
.ul-menu-toggle__line:nth-child(2) {
    transform:
        translate(-50%, 0)
        rotate(-45deg);

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


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

   White stays dominant.
   Slightly more opaque after scrolling.
========================================================== */

.ul-site-header.is-scrolled {
    padding-top: 7px;
}


.ul-site-header.is-scrolled
.ul-site-header__shell::before {
    border-color:
        rgba(255, 255, 255, .80);

    background:

        linear-gradient(
            135deg,

            rgba(255, 255, 255, .975) 0%,

            rgba(252, 253, 250, .955) 48%,

            rgba(247, 250, 244, .95) 100%
        );

    box-shadow:

        0 20px 48px
        rgba(42, 77, 48, .15),

        0 7px 18px
        rgba(28, 38, 31, .06),

        inset 0 1px 0
        rgba(255, 255, 255, 1);
}


.ul-site-header.is-scrolled
.ul-site-header__grain {
    opacity: .42;
}


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

.ul-mobile-menu {
    position: fixed;

    inset: 0;

    z-index:
        calc(
            var(--ul-z-header) + 30
        );

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:

        opacity .35s ease,

        visibility 0s linear .35s;
}


/* ==========================================================
   MOBILE BACKDROP
========================================================== */

.ul-mobile-menu__backdrop {
    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(126, 187, 80, .18),
            transparent 27%
        ),

        radial-gradient(
            circle at 82% 18%,
            rgba(112, 186, 202, .11),
            transparent 25%
        ),

        radial-gradient(
            circle at 84% 84%,
            rgba(189, 70, 63, .10),
            transparent 25%
        ),

        rgba(22, 35, 25, .50);

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

    backdrop-filter:
        blur(11px);
}


/* ==========================================================
   MOBILE PANEL
========================================================== */

.ul-mobile-menu__panel {
    position: absolute;

    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;

    display: flex;

    flex-direction: column;

    gap: 18px;

    overflow: hidden;

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

    border-radius: 24px;

    background:

        linear-gradient(
            145deg,

            rgba(255, 255, 255, .97),

            rgba(248, 250, 245, .96)
        );

    box-shadow:
        0 26px 70px
        rgba(24, 42, 28, .28);

    transform:
        translateY(18px)
        scale(.985);

    transition:
        transform .45s
        var(--ul-ease-out);
}


/* ==========================================================
   MOBILE TREE TEXTURE
========================================================== */

.ul-mobile-menu__grain {
    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .40;

    background:

        repeating-linear-gradient(
            100deg,

            transparent 0,

            transparent 11px,

            rgba(120, 92, 67, .035) 12px,

            rgba(120, 92, 67, .035) 13px,

            transparent 14px,

            transparent 37px
        ),

        repeating-radial-gradient(
            ellipse at 22% 35%,

            transparent 0,

            transparent 24px,

            rgba(102, 132, 100, .03) 25px,

            rgba(102, 132, 100, .03) 26px,

            transparent 27px,

            transparent 48px
        );
}


/* ==========================================================
   MOBILE SPECTRUM
========================================================== */

.ul-mobile-menu__spectrum {
    position: absolute;

    right: 20px;
    bottom: 0;
    left: 20px;

    height: 3px;

    border-radius: 999px;

    pointer-events: none;

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


/* ==========================================================
   MOBILE CONTENT LAYERS
========================================================== */

.ul-mobile-menu__top,
.ul-mobile-menu__brand,
.ul-mobile-menu__links,
.ul-mobile-menu__footer {
    position: relative;

    z-index: 2;
}


/* ==========================================================
   MOBILE TOP
========================================================== */

.ul-mobile-menu__top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding:
        20px 20px 0;
}


.ul-mobile-menu__eyebrow {
    color:
        var(--ul-green-700);

    font-size: .69rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        .12em;

    text-transform: uppercase;
}


/* ==========================================================
   MOBILE CLOSE
========================================================== */

.ul-mobile-menu__close {
    position: relative;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

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

    border-radius: 12px;

    background:
        var(--ul-white);

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


.ul-mobile-menu__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 17px;
    height: 2px;

    border-radius: 999px;

    background:
        var(--ul-charcoal-950);
}


.ul-mobile-menu__close span:first-child {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.ul-mobile-menu__close span:last-child {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


/* ==========================================================
   MOBILE BRAND
========================================================== */

.ul-mobile-menu__brand {
    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        0 20px;
}


.ul-mobile-menu__brand-logo {
    width: 82px;

    flex: 0 0 auto;
}


.ul-mobile-menu__brand-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-mobile-menu__brand-copy strong {
    color:
        var(--ul-charcoal-950);

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

    font-size: 1.05rem;

    font-weight: 500;

    line-height: 1;

    letter-spacing:
        -.025em;
}


.ul-mobile-menu__brand-copy span {
    color:
        var(--ul-text-muted);

    font-size: .78rem;
}


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

.ul-mobile-menu__links {
    display: flex;

    flex-direction: column;

    gap: 8px;

    padding:
        2px 20px 0;

    overflow: auto;
}


/* ==========================================================
   MOBILE LINK
========================================================== */

.ul-mobile-menu__link {
    display: grid;

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

    align-items: center;

    gap: 12px;

    min-height: 57px;

    padding:
        0 14px;

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

    border-radius: 15px;

    background:

        linear-gradient(
            180deg,

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

            rgba(247, 250, 245, .86)
        );

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

    transition:

        transform .35s
        var(--ul-ease-out),

        border-color .3s ease,

        background .3s ease;
}


.ul-mobile-menu__link:hover,
.ul-mobile-menu__link:focus-visible {
    transform:
        translateX(3px);

    border-color:
        rgba(126, 187, 80, .28);

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


/* ==========================================================
   MOBILE NUMBER
========================================================== */

.ul-mobile-menu__number {
    display: grid;

    place-items: center;

    width: 31px;
    height: 31px;

    border-radius: 9px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            135deg,

            var(--ul-green-700),

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

    font-size: .68rem;

    font-weight: 600;
}


/* ==========================================================
   MOBILE LINK TEXT
========================================================== */

.ul-mobile-menu__text {
    color:
        var(--ul-charcoal-950);

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

    font-size: 1.02rem;

    font-weight: 500;

    line-height: 1;

    letter-spacing:
        -.025em;
}


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

.ul-mobile-menu__footer {
    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: auto;

    padding:
        0 20px 20px;
}


/* ==========================================================
   MOBILE ESTIMATE
========================================================== */

.ul-mobile-menu__estimate {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 13px;

    min-height: 54px;

    padding:
        0 17px;

    border-radius: 15px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            110deg,

            var(--ul-green-700),

            var(--ul-green-500) 60%,

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

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

    font-size: .89rem;

    font-weight: 600;
}


/* ==========================================================
   MOBILE META
========================================================== */

.ul-mobile-menu__meta {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.ul-mobile-menu__meta a,
.ul-mobile-menu__meta span {
    color:
        var(--ul-text-soft);

    font-size: .84rem;

    line-height: 1.42;
}


.ul-mobile-menu__meta a {
    font-weight: 600;
}


/* ==========================================================
   MOBILE OPEN STATE
========================================================== */

body.ul-nav-open
.ul-mobile-menu {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transition:

        opacity .35s ease,

        visibility 0s linear 0s;
}


body.ul-nav-open
.ul-mobile-menu__panel {
    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   BODY LOCK
========================================================== */

body.ul-nav-open {
    overflow: hidden;
}


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

@media (min-width: 1200px) {

    .ul-site-header__shell::before,
    .ul-site-header__grain {
        width:
            min(
                var(--ul-container),
                calc(100% - 96px)
            );
    }


    .ul-site-header__inner {
        min-height: 76px;
    }


    .ul-header-brand__logo {
        width: 94px;
    }


    .ul-header-nav__link {
        min-height: 39px;
    }

}


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

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

    .ul-site-header {
        padding-top: 9px;
    }


    .ul-site-header__shell::before,
    .ul-site-header__grain {
        width:
            min(
                var(--ul-container),
                calc(100% - 64px)
            );

        border-radius: 19px;
    }


    .ul-site-header__spectrum {
        width:
            min(
                calc(var(--ul-container) - 44px),
                calc(100% - 108px)
            );
    }


    .ul-site-header__inner {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        min-height: 68px;

        gap: 11px;

        padding:
            0 15px;
    }


    .ul-menu-toggle {
        display: inline-flex;

        order: 1;
    }


    .ul-header-brand {
        order: 2;

        justify-self: center;
    }


    .ul-header-brand__logo {
        width: 88px;
    }


    .ul-header-brand__copy {
        display: none;
    }


    .ul-header-nav,
    .ul-header-actions {
        display: none;
    }


    .ul-header-estimate--mobile {
        display: inline-flex;

        order: 3;

        justify-self: end;

        min-height: 46px;

        padding:
            0 14px;

        font-size: .76rem;
    }

}


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

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

    .ul-site-header {
        padding-top: 8px;
    }


    .ul-site-header__shell::before,
    .ul-site-header__grain {
        width:
            min(
                var(--ul-container),
                calc(100% - 40px)
            );

        border-radius: 18px;
    }


    .ul-site-header__spectrum {
        width:
            min(
                calc(var(--ul-container) - 28px),
                calc(100% - 72px)
            );
    }


    .ul-site-header__inner {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            auto;

        min-height: 63px;

        gap: 8px;

        padding:
            0 12px;
    }


    .ul-menu-toggle {
        display: inline-flex;

        order: 1;

        width: 44px;
        height: 44px;

        border-radius: 11px;
    }


    .ul-header-brand {
        order: 2;

        justify-self: center;
    }


    .ul-header-brand__logo {
        width: 80px;
    }


    .ul-header-brand__copy,
    .ul-header-nav,
    .ul-header-actions {
        display: none;
    }


    .ul-header-estimate--mobile {
        display: inline-flex;

        order: 3;

        justify-self: end;

        min-height: 43px;

        padding:
            0 12px;

        border-radius: 11px;

        font-size: .70rem;
    }


    .ul-header-estimate--mobile svg {
        width: 14px;
        height: 14px;
    }


    .ul-mobile-menu__panel {
        top: 8px;
        right: 8px;
        bottom: 8px;
        left: 8px;

        border-radius: 20px;
    }

}


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

@media (max-width: 479px) {

    .ul-site-header {
        padding-top: 7px;
    }


    .ul-site-header__shell::before,
    .ul-site-header__grain {
        width:
            min(
                var(--ul-container),
                calc(100% - 30px)
            );

        border-radius: 17px;
    }


    .ul-site-header__spectrum {
        width:
            min(
                calc(var(--ul-container) - 20px),
                calc(100% - 52px)
            );
    }


    .ul-site-header__inner {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto;

        min-height: 59px;

        gap: 6px;

        padding:
            0 10px;
    }


    .ul-menu-toggle {
        display: inline-flex;

        order: 1;

        width: 42px;
        height: 42px;

        border-radius: 10px;
    }


    .ul-menu-toggle__line {
        width: 18px;
    }


    .ul-header-brand {
        order: 2;

        justify-self: center;
    }


    .ul-header-brand__logo {
        width: 74px;
    }


    .ul-header-brand__copy,
    .ul-header-nav,
    .ul-header-actions {
        display: none;
    }


    .ul-header-estimate--mobile {
        display: inline-flex;

        order: 3;

        justify-self: end;

        min-height: 41px;

        padding:
            0 10px;

        border-radius: 10px;

        font-size: .65rem;

        gap: 5px;
    }


    .ul-header-estimate--mobile svg {
        width: 13px;
        height: 13px;
    }


    .ul-mobile-menu__panel {
        top: 6px;
        right: 6px;
        bottom: 6px;
        left: 6px;

        gap: 15px;

        border-radius: 18px;
    }


    .ul-mobile-menu__top {
        padding:
            15px 15px 0;
    }


    .ul-mobile-menu__brand {
        padding:
            0 15px;
    }


    .ul-mobile-menu__brand-logo {
        width: 74px;
    }


    .ul-mobile-menu__links {
        padding:
            0 15px;
    }


    .ul-mobile-menu__footer {
        padding:
            0 15px 15px;
    }


    .ul-mobile-menu__link {
        min-height: 52px;

        padding:
            0 12px;

        border-radius: 13px;
    }


    .ul-mobile-menu__number {
        width: 29px;
        height: 29px;
    }


    .ul-mobile-menu__text {
        font-size: .96rem;
    }

}


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

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

    .ul-site-header,
    .ul-site-header *,
    .ul-mobile-menu,
    .ul-mobile-menu * {
        transition:
            none !important;

        animation:
            none !important;
    }

}








































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   HERO — FULLSCREEN CINEMATIC V4

   Improvements:
   • 100svh fullscreen Hero
   • Floating Header support
   • 4-image carousel preserved
   • Visible cinematic transitions
   • Dark green contrast gradient
   • No counters
   • No carousel UI card
   • Improved secondary text readability
   • Slightly larger body / labels / buttons
========================================================== */


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

.ul-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;

    color:
        var(--ul-white);

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

    overflow: hidden;

    isolation: isolate;
}


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

.ul-hero__media {
    --ul-hero-parallax-x: 0px;
    --ul-hero-parallax-y: 0px;
    --ul-hero-scroll-y: 0px;

    position: absolute;

    inset: -3%;

    z-index: -10;

    overflow: hidden;

    transform:

        translate3d(
            var(--ul-hero-parallax-x),
            calc(
                var(--ul-hero-parallax-y) +
                var(--ul-hero-scroll-y)
            ),
            0
        )

        scale(1.045);

    transform-origin:
        center center;

    will-change:
        transform;
}


/* ==========================================================
   03. SLIDE STAGE
========================================================== */

.ul-hero__slides {
    position: absolute;

    inset: 0;

    overflow: hidden;

    background:
        #214E31;
}


/* ==========================================================
   04. INDIVIDUAL SLIDE
========================================================== */

.ul-hero__slide {
    position: absolute;

    inset: 0;

    z-index: 1;

    visibility: hidden;

    opacity: 0;

    overflow: hidden;

    clip-path:
        inset(
            0 0 0 12%
        );

    transition:

        opacity 1.18s
        cubic-bezier(.22, .61, .36, 1),

        clip-path 1.42s
        var(--ul-ease-expo),

        visibility 0s
        linear 1.45s;

    will-change:
        opacity,
        clip-path;
}


/* ==========================================================
   05. ACTIVE SLIDE
========================================================== */

.ul-hero__slide.is-active {
    z-index: 3;

    visibility: visible;

    opacity: 1;

    clip-path:
        inset(
            0 0 0 0
        );

    transition:

        opacity 1.18s
        cubic-bezier(.22, .61, .36, 1),

        clip-path 1.42s
        var(--ul-ease-expo),

        visibility 0s
        linear 0s;
}


/* ==========================================================
   06. LEAVING SLIDE
========================================================== */

.ul-hero__slide.is-leaving {
    z-index: 2;

    visibility: visible;

    opacity: .24;

    clip-path:
        inset(
            0 9% 0 0
        );

    transition:

        opacity 1.2s ease,

        clip-path 1.38s
        var(--ul-ease-expo),

        visibility 0s
        linear 1.42s;
}


/* ==========================================================
   07. SLIDE IMAGE
========================================================== */

.ul-hero__slide img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position:

        var(
            --ul-slide-position-desktop,
            center center
        );

    user-select: none;

    pointer-events: none;

    transform:
        scale(1.10);

    filter:

        saturate(.98)

        contrast(1.035)

        brightness(.985);

    transition:

        transform 7.2s
        cubic-bezier(.18, .7, .22, 1),

        filter 1.15s ease;

    will-change:
        transform;

    backface-visibility:
        hidden;
}


/* ==========================================================
   08. ACTIVE IMAGE
========================================================== */

.ul-hero__slide.is-active img {
    transform:
        scale(1.025);

    filter:

        saturate(1.045)

        contrast(1.035)

        brightness(1);
}


/* ==========================================================
   09. LEAVING IMAGE
========================================================== */

.ul-hero__slide.is-leaving img {
    transform:
        scale(1.06);
}


/* ==========================================================
   10. TRANSITION SWEEP
========================================================== */

.ul-hero__transition-sweep {
    position: absolute;

    z-index: 10;

    top: 0;
    bottom: 0;

    left: -12%;

    width: 7%;

    min-width: 54px;

    pointer-events: none;

    opacity: 0;

    transform:
        translateX(-130%);

    background:

        linear-gradient(
            90deg,

            transparent 0%,

            rgba(126, 187, 80, .12) 8%,

            rgba(167, 213, 118, .36) 22%,

            rgba(241, 215, 55, .52) 39%,

            rgba(233, 145, 41, .48) 54%,

            rgba(189, 70, 63, .44) 69%,

            rgba(49, 90, 152, .38) 84%,

            transparent 100%
        );

    filter:
        blur(1px);

    mix-blend-mode:
        screen;
}


/* ==========================================================
   11. TRANSITION SWEEP ACTIVE
========================================================== */

.ul-hero__transition-sweep.is-active {
    animation:
        ulHeroSweep
        1.3s
        var(--ul-ease-in-out)
        both;
}


/* ==========================================================
   12. SWEEP KEYFRAMES
========================================================== */

@keyframes ulHeroSweep {

    0% {
        left: -13%;

        opacity: 0;

        transform:
            translateX(-100%);
    }


    12% {
        opacity: .82;
    }


    48% {
        opacity: .72;
    }


    84% {
        opacity: .38;
    }


    100% {
        left: 106%;

        opacity: 0;

        transform:
            translateX(0);
    }

}


/* ==========================================================
   13. GENERAL IMAGE SHADE
========================================================== */

.ul-hero__image-shade {
    position: absolute;

    inset: 0;

    z-index: -9;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            rgba(15, 44, 25, .15) 0%,

            rgba(15, 44, 25, .02) 32%,

            rgba(13, 38, 22, .10) 62%,

            rgba(11, 32, 18, .34) 100%
        );
}


/* ==========================================================
   14. DARK GREEN CONTENT GRADIENT
========================================================== */

.ul-hero__content-shade {
    position: absolute;

    inset: 0;

    z-index: -8;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            rgba(18, 57, 31, .99) 0%,

            rgba(21, 64, 35, .98) 17%,

            rgba(25, 72, 39, .95) 31%,

            rgba(28, 78, 42, .84) 43%,

            rgba(32, 84, 46, .62) 54%,

            rgba(35, 88, 48, .35) 64%,

            rgba(38, 91, 50, .12) 75%,

            rgba(38, 91, 50, .015) 87%
        );
}


/* ==========================================================
   15. HEADER CONTRAST AREA
========================================================== */

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

    position: absolute;

    z-index: -7;

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

    height: 180px;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            rgba(13, 38, 21, .22),

            rgba(13, 38, 21, .09) 50%,

            transparent 100%
        );
}


/* ==========================================================
   16. BOTTOM CONTRAST
========================================================== */

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

    position: absolute;

    z-index: -7;

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

    height: 31%;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            transparent 0%,

            rgba(16, 48, 27, .12) 35%,

            rgba(13, 39, 22, .40) 100%
        );
}


/* ==========================================================
   17. WOOD TRACE
========================================================== */

.ul-hero__wood-trace {
    position: absolute;

    z-index: -6;

    top: 0;
    left: 0;

    width: 42%;
    height: 100%;

    pointer-events: none;

    opacity: .20;

    mask-image:

        linear-gradient(
            90deg,

            #000 0%,

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

            transparent 100%
        );

    -webkit-mask-image:

        linear-gradient(
            90deg,

            #000 0%,

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

            transparent 100%
        );

    background:

        repeating-linear-gradient(
            98deg,

            rgba(156, 126, 92, .11) 0,

            rgba(156, 126, 92, .11) 1px,

            transparent 1px,

            transparent 20px
        ),

        repeating-radial-gradient(
            ellipse at 17% 38%,

            transparent 0,

            transparent 31px,

            rgba(226, 199, 162, .07) 32px,

            rgba(226, 199, 162, .07) 33px,

            transparent 34px,

            transparent 58px
        );
}


/* ==========================================================
   18. AMBIENT COLORS
========================================================== */

.ul-hero__ambient {
    position: absolute;

    z-index: -5;

    pointer-events: none;

    border-radius: 50%;

    filter:
        blur(5px);
}


/* ==========================================================
   19. GREEN AMBIENT
========================================================== */

.ul-hero__ambient--green {
    left: -290px;

    top: 18%;

    width: 650px;
    height: 650px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 69%
        );
}


/* ==========================================================
   20. WARM AMBIENT
========================================================== */

.ul-hero__ambient--warm {
    right: 15%;

    top: 15%;

    width: 430px;
    height: 430px;

    opacity: .72;

    background:

        radial-gradient(
            circle,

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

            rgba(233, 145, 41, .052) 42%,

            transparent 70%
        );
}


/* ==========================================================
   21. MAIN LAYOUT
========================================================== */

.ul-hero__layout {
    position: relative;

    z-index: 6;

    display: flex;

    align-items: center;

    height: 100%;

    padding-top:

        calc(
            var(--ul-header-height) +
            clamp(
                26px,
                4vh,
                48px
            )
        );

    padding-bottom:
        clamp(
            126px,
            15vh,
            165px
        );
}


/* ==========================================================
   22. CONTENT
========================================================== */

.ul-hero__content {
    width:
        min(
            735px,
            52%
        );

    max-width:
        735px;

    transform:
        translateY(-1%);
}


/* ==========================================================
   23. EYEBROW

   Increased from ~.75rem to ~.82rem
========================================================== */

.ul-hero__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom:
        clamp(
            18px,
            2vh,
            27px
        );

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


/* ==========================================================
   24. EYEBROW DOT
========================================================== */

.ul-hero__eyebrow-dot {
    position: relative;

    display: block;

    width: 10px;
    height: 10px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 5px
        rgba(189, 70, 63, .13);
}


/* ==========================================================
   25. TITLE

   Intentionally unchanged.
========================================================== */

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

    margin:
        0 0
        clamp(
            21px,
            2.5vh,
            30px
        );

    color:
        var(--ul-white);

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

    font-size:
        clamp(
            3.8rem,
            5vw,
            6.3rem
        );

    font-weight: 500;

    line-height: .91;

    letter-spacing:
        -.052em;
}


/* ==========================================================
   26. TITLE LINE
========================================================== */

.ul-hero__title-line {
    display: block;

    overflow: hidden;

    padding-bottom: .06em;
}


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


/* ==========================================================
   27. TITLE ACCENT
========================================================== */

.ul-hero__title-accent {
    position: relative;

    display: inline-block;

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

    font-style: normal;

    font-weight: 500;
}


/* ==========================================================
   28. TITLE COLOR DETAIL
========================================================== */

.ul-hero__title-accent::after {
    content: "";

    position: absolute;

    left: 2px;
    right: 1px;

    bottom: -.015em;

    height: 3px;

    border-radius: 999px;

    opacity: .88;

    transform:
        scaleX(.74);

    transform-origin:
        left center;

    background:

        linear-gradient(
            90deg,

            var(--ul-green-400),

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

            var(--ul-logo-red),

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


/* ==========================================================
   29. COPY WRAPPER
========================================================== */

.ul-hero__copy-wrap {
    display: flex;

    align-items: stretch;

    max-width: 630px;
}


/* ==========================================================
   30. COPY LINE
========================================================== */

.ul-hero__copy-line {
    display: block;

    width: 3px;

    margin-right: 18px;

    flex: 0 0 auto;

    border-radius: 999px;

    background:

        linear-gradient(
            180deg,

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

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


/* ==========================================================
   31. MAIN DESCRIPTION

   Increased moderately for readability.
========================================================== */

.ul-hero__copy {
    margin: 0;

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

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

    line-height: 1.68;

    letter-spacing:
        -.01em;

    text-shadow:
        0 2px 15px
        rgba(11, 34, 19, .14);
}


/* ==========================================================
   32. ACTIONS
========================================================== */

.ul-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top:
        clamp(
            26px,
            3vh,
            35px
        );
}


/* ==========================================================
   33. FREE ESTIMATE
========================================================== */

.ul-hero__estimate {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    min-height: 57px;

    padding:
        6px 7px
        6px 20px;

    overflow: hidden;

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

    border-radius: 15px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            115deg,

            var(--ul-green-700),

            var(--ul-green-500)
        );

    box-shadow:

        0 18px 38px
        rgba(56, 111, 60, .27),

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

    font-size:
        .93rem;

    font-weight: 600;

    line-height: 1;

    text-transform:
        uppercase;

    letter-spacing:
        .032em;

    transition:

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

        box-shadow .4s ease;
}


/* ==========================================================
   34. ESTIMATE HOVER LAYER
========================================================== */

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

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            110deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

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

    transform:
        translateX(-104%);

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


/* ==========================================================
   35. ESTIMATE CONTENT
========================================================== */

.ul-hero__estimate-text,
.ul-hero__estimate-icon {
    position: relative;

    z-index: 1;
}


/* ==========================================================
   36. ESTIMATE ICON
========================================================== */

.ul-hero__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:

        color .35s ease,

        background-color .35s ease,

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


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


/* ==========================================================
   37. ESTIMATE HOVER
========================================================== */

.ul-hero__estimate:hover {
    transform:
        translateY(-3px);

    box-shadow:

        0 23px 46px
        rgba(56, 111, 60, .31),

        0 12px 28px
        rgba(189, 70, 63, .14);
}


.ul-hero__estimate:hover::before {
    transform:
        translateX(0);
}


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

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

    transform:
        translateX(2px);
}


/* ==========================================================
   38. VIEW OUR WORK
========================================================== */

.ul-hero__work {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 57px;

    padding:
        5px 19px
        5px 5px;

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

    border-radius: 15px;

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

    background:
        rgba(18, 52, 29, .34);

    -webkit-backdrop-filter:
        blur(13px)
        saturate(115%);

    backdrop-filter:
        blur(13px)
        saturate(115%);

    font-size:
        .91rem;

    font-weight: 600;

    line-height: 1;

    text-transform:
        uppercase;

    letter-spacing:
        .03em;

    transition:

        transform .4s
        var(--ul-ease-out),

        background-color .35s ease,

        border-color .35s ease;
}


/* ==========================================================
   39. VIEW WORK ICON
========================================================== */

.ul-hero__work-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 12px;

    color:
        var(--ul-white);

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

    transition:

        background-color .35s ease,

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


.ul-hero__work-icon svg {
    width: 17px;
    height: 17px;
}


/* ==========================================================
   40. VIEW WORK HOVER
========================================================== */

.ul-hero__work:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(112, 186, 202, .54);

    background:
        rgba(21, 60, 34, .48);
}


.ul-hero__work:hover
.ul-hero__work-icon {
    background:
        var(--ul-logo-red);

    transform:
        rotate(5deg);
}


/* ==========================================================
   41. MICRO TRUST

   Increased from ~.75rem.
========================================================== */

.ul-hero__micro-trust {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 21px;

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

    font-size:
        .84rem;

    font-weight: 500;

    line-height: 1.3;
}


/* ==========================================================
   42. MICRO TRUST DOT
========================================================== */

.ul-hero__micro-trust i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

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


/* ==========================================================
   43. REMOVE CAROUSEL COUNTER UI
========================================================== */

.ul-hero__carousel-nav {
    display:
        none !important;
}


/* ==========================================================
   44. SAFETY — REMOVE ALL COUNTER ELEMENTS
========================================================== */

.ul-hero__carousel-top,
.ul-hero__carousel-label,
.ul-hero__carousel-counter,
.ul-hero__carousel-buttons,
.ul-hero__carousel-button,
.ul-hero__progress,
.ul-hero__progress-fill {
    display:
        none !important;
}


/* ==========================================================
   45. BOTTOM INFO WRAPPER
========================================================== */

.ul-hero__info-wrap {
    position: absolute;

    z-index: 7;

    left: 50%;

    bottom: 27px;

    transform:
        translateX(-50%);
}


/* ==========================================================
   46. INFO RAIL
========================================================== */

.ul-hero__info {
    display: grid;

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

    overflow: hidden;

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

    border-radius: 19px;

    background:

        linear-gradient(
            105deg,

            rgba(22, 65, 36, .88),

            rgba(30, 75, 42, .79)
        );

    -webkit-backdrop-filter:
        blur(17px)
        saturate(115%);

    backdrop-filter:
        blur(17px)
        saturate(115%);

    box-shadow:
        0 20px 52px
        rgba(12, 37, 20, .23);
}


/* ==========================================================
   47. INFO ITEM
========================================================== */

.ul-hero__info-item {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 14px;

    min-height: 92px;

    padding:
        17px 22px;
}


/* ==========================================================
   48. INFO DIVIDERS
========================================================== */

.ul-hero__info-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 21%;
    right: 0;
    bottom: 21%;

    width: 1px;

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


/* ==========================================================
   49. INFO ACCENT
========================================================== */

.ul-hero__info-accent {
    width: 4px;

    height: 32px;

    border-radius: 999px;
}


.ul-hero__info-accent--green {
    background:
        var(--ul-green-400);
}


.ul-hero__info-accent--blue {
    background:
        var(--ul-logo-blue);
}


.ul-hero__info-accent--yellow {
    background:
        var(--ul-logo-yellow);
}


.ul-hero__info-accent--red {
    background:
        var(--ul-logo-red);
}


/* ==========================================================
   50. INFO COPY
========================================================== */

.ul-hero__info-item div {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-width: 0;
}


/* ==========================================================
   51. INFO LABELS

   Increased significantly from ~.62rem.
========================================================== */

.ul-hero__info-item small {
    color:
        rgba(255, 255, 255, .60);

    font-size:
        .72rem;

    font-weight: 600;

    line-height: 1.1;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


/* ==========================================================
   52. INFO VALUES

   Increased from ~.82rem.
========================================================== */

.ul-hero__info-item strong {
    color:
        rgba(255, 255, 255, .95);

    font-size:
        .91rem;

    font-weight: 600;

    line-height: 1.38;
}


/* ==========================================================
   53. BOTTOM SPECTRUM
========================================================== */

.ul-hero__spectrum {
    position: absolute;

    z-index: 8;

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

    height: 4px;

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


/* ==========================================================
   54. INITIAL REVEAL
========================================================== */

[data-ul-hero-reveal] {
    visibility: hidden;
}


.ul-hero.is-ready
[data-ul-hero-reveal] {
    visibility: visible;
}


/* ==========================================================
   55. EYEBROW REVEAL
========================================================== */

.ul-hero.is-ready
[data-ul-hero-reveal="eyebrow"] {
    animation:
        ulHeroEyebrowReveal
        .85s
        var(--ul-ease-expo)
        .08s
        both;
}


@keyframes ulHeroEyebrowReveal {

    from {
        opacity: 0;

        transform:
            translateX(-18px);
    }


    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* ==========================================================
   56. TITLE REVEAL
========================================================== */

[data-ul-hero-reveal="title"]
> span {
    opacity: .08;

    transform:
        translateY(110%);
}


.ul-hero.is-ready
[data-ul-hero-reveal="title"]
> span {
    animation:
        ulHeroTitleReveal
        1s
        var(--ul-ease-expo)
        both;
}


.ul-hero.is-ready
[data-ul-hero-reveal="title"]:nth-child(2)
> span {
    animation-delay:
        .11s;
}


@keyframes ulHeroTitleReveal {

    from {
        opacity: .08;

        transform:
            translateY(110%);
    }


    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ==========================================================
   57. COPY REVEAL
========================================================== */

.ul-hero.is-ready
[data-ul-hero-reveal="copy"] {
    animation:
        ulHeroSoftReveal
        .85s
        var(--ul-ease-out)
        .36s
        both;
}


/* ==========================================================
   58. ACTIONS REVEAL
========================================================== */

.ul-hero.is-ready
[data-ul-hero-reveal="actions"] {
    animation:
        ulHeroSoftReveal
        .9s
        var(--ul-ease-out)
        .47s
        both;
}


/* ==========================================================
   59. TRUST REVEAL
========================================================== */

.ul-hero.is-ready
[data-ul-hero-reveal="trust"] {
    animation:
        ulHeroSoftReveal
        .9s
        var(--ul-ease-out)
        .57s
        both;
}


/* ==========================================================
   60. INFO REVEAL
========================================================== */

.ul-hero.is-ready
[data-ul-hero-reveal="info"] {
    animation:
        ulHeroInfoReveal
        1s
        var(--ul-ease-expo)
        .62s
        both;
}


/* ==========================================================
   61. SOFT REVEAL
========================================================== */

@keyframes ulHeroSoftReveal {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }


    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ==========================================================
   62. INFO REVEAL
========================================================== */

@keyframes ulHeroInfoReveal {

    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(28px);
    }


    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }

}


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

@media (min-width: 1200px) {

    .ul-hero {
        height:
            100vh;

        height:
            100svh;

        min-height:
            100svh;

        max-height:
            100svh;
    }


    .ul-hero__layout {
        padding-top:

            calc(
                var(--ul-header-height) +
                clamp(
                    30px,
                    4vh,
                    50px
                )
            );
    }


    .ul-hero__content {
        width:
            min(
                735px,
                52%
            );
    }

}


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

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

    .ul-hero {
        height:
            100svh;

        min-height:
            100svh;

        max-height:
            100svh;
    }


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


    .ul-hero__content-shade {
        background:

            linear-gradient(
                90deg,

                rgba(18, 57, 31, .99) 0%,

                rgba(22, 66, 36, .97) 28%,

                rgba(26, 75, 41, .85) 45%,

                rgba(30, 81, 44, .60) 60%,

                rgba(34, 86, 47, .28) 78%,

                rgba(34, 86, 47, .03) 100%
            );
    }


    .ul-hero__layout {
        padding-top:

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

        padding-bottom:
            128px;
    }


    .ul-hero__content {
        width:
            min(
                640px,
                64%
            );

        max-width:
            640px;
    }


    .ul-hero__title {
        font-size:
            clamp(
                3.15rem,
                6.2vw,
                4.8rem
            );
    }


    .ul-hero__copy {
        font-size:
            clamp(
                1.02rem,
                1.35vw,
                1.12rem
            );
    }


    .ul-hero__eyebrow {
        font-size:
            .78rem;
    }


    .ul-hero__micro-trust {
        font-size:
            .80rem;
    }


    .ul-hero__info-item {
        min-height: 82px;

        padding:
            14px 14px;
    }


    .ul-hero__info-item small {
        font-size:
            .65rem;
    }


    .ul-hero__info-item strong {
        font-size:
            .80rem;
    }

}


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

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

    .ul-hero {
        height:
            100svh;

        min-height:
            100svh;

        max-height:
            100svh;
    }


    .ul-hero__media {
        inset: 0;

        transform:
            none;
    }


    .ul-hero__slide img {
        object-position:

            var(
                --ul-slide-position-mobile,
                center center
            );
    }


    .ul-hero__content-shade {
        background:

            linear-gradient(
                90deg,

                rgba(17, 55, 30, .98) 0%,

                rgba(21, 64, 35, .95) 37%,

                rgba(25, 73, 40, .79) 60%,

                rgba(29, 80, 44, .46) 79%,

                rgba(29, 80, 44, .17) 100%
            ),

            linear-gradient(
                0deg,

                rgba(13, 42, 23, .56),

                transparent 53%
            );
    }


    .ul-hero__layout {
        align-items:
            flex-start;

        padding-top:

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

        padding-bottom:
            178px;
    }


    .ul-hero__content {
        width: 88%;

        max-width:
            560px;

        transform:
            none;
    }


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

        font-size:
            .75rem;

        letter-spacing:
            .105em;
    }


    .ul-hero__title {
        font-size:
            clamp(
                2.75rem,
                9.3vw,
                4rem
            );
    }


    .ul-hero__copy {
        font-size:
            1rem;

        line-height:
            1.61;
    }


    .ul-hero__estimate,
    .ul-hero__work {
        font-size:
            .82rem;
    }


    .ul-hero__micro-trust {
        font-size:
            .76rem;
    }


    .ul-hero__info-wrap {
        bottom:
            18px;
    }


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


    .ul-hero__info-item {
        min-height:
            72px;

        padding:
            12px 14px;
    }


    .ul-hero__info-item::after {
        display:
            none;
    }


    .ul-hero__info-item:nth-child(1),
    .ul-hero__info-item:nth-child(2) {
        border-bottom:
            1px solid
            rgba(255, 255, 255, .11);
    }


    .ul-hero__info-item:nth-child(odd) {
        border-right:
            1px solid
            rgba(255, 255, 255, .11);
    }


    .ul-hero__info-item small {
        font-size:
            .64rem;
    }


    .ul-hero__info-item strong {
        font-size:
            .76rem;

        line-height:
            1.32;
    }

}


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

@media (max-width: 479px) {

    .ul-hero {
        height:
            100svh;

        min-height:
            100svh;

        max-height:
            100svh;
    }


    .ul-hero__media {
        inset: 0;

        transform:
            none;
    }


    .ul-hero__slide {
        clip-path:
            inset(
                0 0 0 6%
            );
    }


    .ul-hero__slide.is-active {
        clip-path:
            inset(
                0 0 0 0
            );
    }


    .ul-hero__slide img {
        object-position:

            var(
                --ul-slide-position-mobile,
                center center
            );
    }


    .ul-hero__content-shade {
        background:

            linear-gradient(
                90deg,

                rgba(16, 53, 29, .99) 0%,

                rgba(20, 62, 34, .97) 40%,

                rgba(24, 71, 39, .83) 65%,

                rgba(28, 78, 43, .52) 82%,

                rgba(28, 78, 43, .23) 100%
            ),

            linear-gradient(
                0deg,

                rgba(12, 39, 21, .67),

                transparent 54%
            );
    }


    .ul-hero__wood-trace {
        width:
            72%;

        opacity:
            .16;
    }


    .ul-hero__layout {
        align-items:
            flex-start;

        padding-top:

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

        padding-bottom:
            164px;
    }


    .ul-hero__content {
        width: 100%;

        max-width: 100%;

        transform:
            none;
    }


    /* ======================================================
       SMALL MOBILE EYEBROW

       Increased considerably from previous .62rem.
    ====================================================== */

    .ul-hero__eyebrow {
        gap: 8px;

        margin-bottom:
            14px;

        font-size:
            .70rem;

        line-height:
            1.15;

        letter-spacing:
            .09em;
    }


    .ul-hero__eyebrow-dot {
        width:
            8px;

        height:
            8px;
    }


    /* ======================================================
       TITLE REMAINS APPROXIMATELY SAME SCALE
    ====================================================== */

    .ul-hero__title {
        max-width:
            390px;

        margin-bottom:
            16px;

        font-size:
            clamp(
                2.35rem,
                11vw,
                3.18rem
            );

        line-height:
            .91;
    }


    .ul-hero__copy-wrap {
        max-width:
            365px;
    }


    .ul-hero__copy-line {
        margin-right:
            12px;
    }


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

       Previous ~.83rem.
       New ~.91rem.
    ====================================================== */

    .ul-hero__copy {
        font-size:
            .91rem;

        line-height:
            1.57;
    }


    .ul-hero__actions {
        gap:
            8px;

        margin-top:
            18px;
    }


    /* ======================================================
       BUTTON TEXT

       Increased from ~.69rem.
    ====================================================== */

    .ul-hero__estimate,
    .ul-hero__work {
        min-height:
            47px;

        font-size:
            .76rem;

        letter-spacing:
            .025em;
    }


    .ul-hero__estimate {
        padding:
            4px 5px
            4px 14px;

        gap:
            10px;
    }


    .ul-hero__estimate-icon {
        width:
            37px;

        height:
            37px;

        border-radius:
            9px;
    }


    .ul-hero__work {
        padding:
            4px 13px
            4px 4px;
    }


    .ul-hero__work-icon {
        width:
            37px;

        height:
            37px;

        border-radius:
            9px;
    }


    /*
    Still hidden here to prevent crowding.
    */

    .ul-hero__micro-trust {
        display:
            none;
    }


    .ul-hero__info-wrap {
        bottom:
            13px;
    }


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

        border-radius:
            15px;
    }


    .ul-hero__info-item {
        grid-template-columns:
            4px
            minmax(0, 1fr);

        min-height:
            66px;

        gap:
            9px;

        padding:
            10px 9px;
    }


    .ul-hero__info-item::after {
        display:
            none;
    }


    .ul-hero__info-item:nth-child(1),
    .ul-hero__info-item:nth-child(2) {
        border-bottom:
            1px solid
            rgba(255, 255, 255, .10);
    }


    .ul-hero__info-item:nth-child(odd) {
        border-right:
            1px solid
            rgba(255, 255, 255, .10);
    }


    .ul-hero__info-accent {
        width:
            3px;

        height:
            26px;
    }


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

       Previous .49rem was too small.
    ====================================================== */

    .ul-hero__info-item small {
        font-size:
            .60rem;

        line-height:
            1.1;

        letter-spacing:
            .055em;
    }


    /* ======================================================
       INFO VALUE

       Previous .61rem.
       New .72rem.
    ====================================================== */

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

        line-height:
            1.28;
    }


    .ul-hero__spectrum {
        height:
            3px;
    }

}


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

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

    .ul-hero__slide,
    .ul-hero__slide img,
    .ul-hero__transition-sweep {
        animation:
            none !important;

        transition:
            none !important;
    }


    .ul-hero__transition-sweep {
        display:
            none;
    }


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


    [data-ul-hero-reveal],
    [data-ul-hero-reveal] > span {
        visibility:
            visible !important;

        opacity:
            1 !important;

        transform:
            none !important;

        animation:
            none !important;
    }

}












































/* ==========================================================
   03. SERVICES
   Unlimited Landscaping LLC
   Full-Bleed Bento Service Grid
========================================================== */

.ul-services {
    position: relative;

    color:
        var(--ul-text);

    background:
        var(--ul-bg-soft);

    overflow: hidden;

    isolation: isolate;
}


/* ==========================================================
   TOP SEPARATOR
========================================================== */

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

    position: absolute;

    top: 0;
    left: 50%;

    z-index: 3;

    width:
        min(
            1380px,
            calc(100% - 96px)
        );

    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ul-green-500) 22%,
            var(--ul-gold-400) 48%,
            var(--ul-logo-red) 72%,
            transparent
        );

    opacity: .58;
}


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

.ul-services__topography {
    position: absolute;

    z-index: -3;

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

    width: 850px;
    height: 850px;

    pointer-events: none;

    opacity: .58;

    background:

        repeating-radial-gradient(
            ellipse at 47% 44%,
            rgba(103, 158, 97, .055) 0,
            rgba(103, 158, 97, .055) 1px,
            transparent 1px,
            transparent 34px
        ),

        repeating-radial-gradient(
            ellipse at 68% 72%,
            rgba(66, 103, 154, .026) 0,
            rgba(66, 103, 154, .026) 1px,
            transparent 1px,
            transparent 50px
        );

    transform:
        rotate(-9deg);
}


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

.ul-services__ambient {
    position: absolute;

    z-index: -4;

    pointer-events: none;

    border-radius: 50%;

    filter:
        blur(4px);
}


.ul-services__ambient--green {
    left: -330px;
    top: 21%;

    width: 690px;
    height: 690px;

    background:
        radial-gradient(
            circle,
            rgba(144, 198, 94, .13),
            transparent 70%
        );
}


.ul-services__ambient--warm {
    right: -260px;
    bottom: -290px;

    width: 620px;
    height: 620px;

    background:
        radial-gradient(
            circle,
            rgba(185, 71, 63, .075),
            rgba(229, 154, 46, .035) 40%,
            transparent 70%
        );
}


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

.ul-services__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(340px, .68fr);

    align-items: end;

    gap:
        clamp(65px, 7vw, 120px);

    margin-bottom:
        clamp(48px, 5vw, 70px);

    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity .8s ease,
        transform 1s
        var(--ul-ease-expo);
}


.ul-services__header.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

.ul-services__eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;

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

    font-size: .79rem;

    line-height: 1;

    font-weight: 600;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.ul-services__eyebrow-line {
    display: block;

    width: 54px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--ul-logo-red),
            var(--ul-gold-400),
            var(--ul-green-500)
        );

    transform-origin:
        left center;

    transform:
        scaleX(0);

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


.ul-services__header.is-visible
.ul-services__eyebrow-line {
    transform:
        scaleX(1);
}


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

.ul-services__title {
    max-width: 800px;

    margin: 0;

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

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

    font-size:
        clamp(3.25rem, 5vw, 5.5rem);

    font-weight: 500;

    line-height: .95;

    letter-spacing:
        -.042em;
}


.ul-services__title span {
    color:
        var(--ul-green-600);
}


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

.ul-services__intro {
    max-width: 510px;

    padding-bottom: 4px;
}


.ul-services__intro p {
    margin:
        0 0 23px;

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

    font-size:
        clamp(1rem, 1vw, 1.08rem);

    line-height: 1.72;
}


/* ==========================================================
   VIEW ALL
========================================================== */

.ul-services__view-all {
    display: inline-flex;

    align-items: center;

    gap: 12px;

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

    font-size: .86rem;

    font-weight: 600;

    letter-spacing: .04em;

    text-transform: uppercase;
}


.ul-services__view-all-arrow {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    color:
        var(--ul-white);

    border-radius: 50%;

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

    box-shadow:
        0 10px 25px
        rgba(103, 158, 97, .19);

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

        background-color .35s ease;
}


.ul-services__view-all-arrow svg {
    width: 16px;
    height: 16px;
}


.ul-services__view-all:hover
.ul-services__view-all-arrow {
    transform:
        translateX(5px)
        rotate(-4deg);

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


/* ==========================================================
   BENTO GRID
========================================================== */

.ul-services__grid {
    display: grid;

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

    grid-auto-flow: dense;

    gap:
        clamp(16px, 1.55vw, 24px);
}


/* ==========================================================
   CARD BASE
========================================================== */

.ul-service-card {
    --ul-card-x: 50%;
    --ul-card-y: 50%;
    --ul-card-shift-x: 0px;
    --ul-card-shift-y: 0px;

    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

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

    border-radius: 22px;

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

    box-shadow:
        0 18px 46px
        rgba(49, 93, 61, .13);

    isolation: isolate;

    opacity: 0;

    transform:
        translateY(32px)
        scale(.985);

    transition:
        opacity .7s ease
        var(--ul-card-delay, 0ms),

        transform .9s
        var(--ul-ease-expo)
        var(--ul-card-delay, 0ms),

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

        border-color .4s ease;
}


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

.ul-service-card.is-visible {
    opacity: 1;

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


/* ==========================================================
   DESKTOP BENTO SIZES
========================================================== */

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

    min-height:
        clamp(470px, 36vw, 565px);
}


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

    min-height:
        clamp(470px, 36vw, 565px);
}


/*
Second row flips the hierarchy.
*/

.ul-service-card:nth-child(3) {
    grid-column:
        span 5;

    min-height:
        clamp(400px, 30vw, 470px);
}


.ul-service-card:nth-child(4) {
    grid-column:
        span 7;

    min-height:
        clamp(400px, 30vw, 470px);
}


/*
Third row.
*/

.ul-service-card:nth-child(5) {
    grid-column:
        span 7;

    min-height:
        clamp(400px, 30vw, 470px);
}


.ul-service-card:nth-child(6) {
    grid-column:
        span 5;

    min-height:
        clamp(400px, 30vw, 470px);
}


/* ==========================================================
   CARD LINK
========================================================== */

.ul-service-card__link {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    min-height: inherit;

    overflow: hidden;

    color:
        var(--ul-white);

    isolation: isolate;
}


/* ==========================================================
   FULL-BLEED IMAGE
========================================================== */

.ul-service-card__image {
    position: absolute;

    z-index: -5;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    pointer-events: none;

    transform:
        translate3d(
            var(--ul-card-shift-x),
            var(--ul-card-shift-y),
            0
        )
        scale(1.025);

    filter:
        saturate(.98)
        contrast(1.02);

    transition:
        transform 1.05s
        var(--ul-ease-expo),

        filter .65s ease;

    will-change:
        transform;
}


/* ==========================================================
   DARK READABILITY SCRIM

   This is what allows image + text to coexist.
========================================================== */

.ul-service-card__scrim {
    position: absolute;

    z-index: -4;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(13, 20, 14, .05) 0%,
            rgba(13, 20, 14, .035) 28%,
            rgba(13, 20, 14, .15) 48%,
            rgba(10, 17, 12, .70) 78%,
            rgba(8, 14, 10, .92) 100%
        ),

        linear-gradient(
            90deg,
            rgba(7, 14, 9, .34) 0%,
            rgba(7, 14, 9, .10) 54%,
            transparent 78%
        );

    transition:
        background .55s ease;
}


/* ==========================================================
   EDGE VIGNETTE
========================================================== */

.ul-service-card__vignette {
    position: absolute;

    z-index: -3;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 90px
        rgba(0, 0, 0, .12);
}


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

.ul-service-card__pointer-light {
    position: absolute;

    z-index: 1;

    left:
        calc(
            var(--ul-card-x) -
            130px
        );

    top:
        calc(
            var(--ul-card-y) -
            130px
        );

    width: 260px;
    height: 260px;

    pointer-events: none;

    border-radius: 50%;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .14),
            rgba(255, 255, 255, .035) 35%,
            transparent 68%
        );

    transition:
        opacity .4s ease;
}


/* ==========================================================
   ACCENT EDGE
========================================================== */

.ul-service-card::after {
    content: "";

    position: absolute;

    z-index: 7;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    box-shadow:
        inset 0 0 0 1px
        transparent;

    transition:
        box-shadow .45s ease;
}


/* ==========================================================
   HOVER CARD
========================================================== */

.ul-service-card:hover {
    border-color:
        rgba(255, 255, 255, .48);

    box-shadow:
        0 28px 70px
        rgba(49, 93, 61, .20);
}


.ul-service-card:hover::after {
    box-shadow:
        inset 0 0 0 1px
        var(--ul-service-accent);
}


.ul-service-card:hover
.ul-service-card__pointer-light {
    opacity: 1;
}


.ul-service-card:hover
.ul-service-card__image {
    transform:
        translate3d(
            var(--ul-card-shift-x),
            var(--ul-card-shift-y),
            0
        )
        scale(1.075);

    filter:
        saturate(1.08)
        contrast(1.025);
}


/* ==========================================================
   TOP META
========================================================== */

.ul-service-card__meta {
    position: absolute;

    z-index: 4;

    top:
        clamp(17px, 1.6vw, 24px);

    left:
        clamp(17px, 1.6vw, 24px);

    right:
        clamp(17px, 1.6vw, 24px);

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    pointer-events: none;
}


/* ==========================================================
   NUMBER BADGE
========================================================== */

.ul-service-card__number {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    color:
        var(--ul-white);

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

    border-radius: 13px;

    background:
        rgba(20, 29, 22, .72);

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

    backdrop-filter:
        blur(13px);

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, .16);

    font-size: .76rem;

    font-weight: 600;

    letter-spacing: .08em;

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


.ul-service-card:hover
.ul-service-card__number {
    color:
        var(--ul-white);

    border-color:
        var(--ul-service-accent);

    background:
        rgba(15, 24, 17, .88);
}


/* ==========================================================
   CATEGORY BADGE
========================================================== */

.ul-service-card__category {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 34px;

    max-width: 58%;

    padding:
        0 14px;

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

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

    border-radius: 999px;

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

    -webkit-backdrop-filter:
        blur(15px)
        saturate(120%);

    backdrop-filter:
        blur(15px)
        saturate(120%);

    font-size: .68rem;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        color .35s ease,
        background-color .35s ease,
        border-color .35s ease,
        transform .4s
        var(--ul-ease-out);
}


.ul-service-card:hover
.ul-service-card__category {
    color:
        var(--ul-white);

    border-color:
        var(--ul-service-accent);

    background:
        color-mix(
            in srgb,
            var(--ul-service-accent) 52%,
            rgba(15, 22, 16, .54)
        );

    transform:
        translateY(-2px);
}


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

.ul-service-card__content {
    position: absolute;

    z-index: 4;

    left:
        clamp(23px, 2.35vw, 38px);

    right:
        clamp(23px, 2.35vw, 38px);

    bottom:
        clamp(23px, 2.35vw, 36px);

    display: grid;

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

    align-items: end;

    gap:
        clamp(22px, 2.3vw, 38px);
}


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

.ul-service-card__copy {
    max-width: 720px;
}


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

.ul-service-card h3 {
    max-width: 620px;

    margin:
        0 0 12px;

    color:
        var(--ul-white);

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

    font-size:
        clamp(2rem, 2.65vw, 3.25rem);

    font-weight: 500;

    line-height: .96;

    letter-spacing:
        -.04em;

    text-shadow:
        0 4px 24px
        rgba(0, 0, 0, .26);

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


.ul-service-card--compact h3 {
    font-size:
        clamp(1.85rem, 2.3vw, 2.75rem);
}


.ul-service-card:hover h3 {
    transform:
        translateY(-3px);
}


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

.ul-service-card__copy > p {
    max-width: 650px;

    margin:
        0 0 18px;

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

    font-size:
        clamp(.9rem, .92vw, 1rem);

    line-height: 1.58;

    text-shadow:
        0 3px 16px
        rgba(0, 0, 0, .28);
}


.ul-service-card--compact
.ul-service-card__copy > p {
    max-width: 440px;
}


/* ==========================================================
   TAGS
========================================================== */

.ul-service-card__tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.ul-service-card__tags span {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 30px;

    padding:
        0 11px;

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

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

    border-radius: 7px;

    background:
        rgba(7, 15, 9, .18);

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

    backdrop-filter:
        blur(10px);

    font-size: .68rem;

    font-weight: 500;

    letter-spacing: .015em;

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


.ul-service-card:hover
.ul-service-card__tags span {
    color:
        var(--ul-white);

    border-color:
        rgba(255, 255, 255, .32);

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


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

.ul-service-card__arrow {
    display: grid;

    place-items: center;

    width:
        clamp(54px, 4.6vw, 68px);

    height:
        clamp(54px, 4.6vw, 68px);

    flex-shrink: 0;

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

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

    border-radius: 50%;

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

    box-shadow:
        0 12px 32px
        rgba(0, 0, 0, .18);

    transition:
        color .4s ease,
        background-color .4s ease,
        border-color .4s ease,
        transform .55s
        var(--ul-ease-expo),

        box-shadow .45s ease;
}


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


.ul-service-card:hover
.ul-service-card__arrow {
    color:
        var(--ul-white);

    border-color:
        var(--ul-service-accent);

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

    transform:
        translateX(4px)
        rotate(-7deg)
        scale(1.05);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, .23);
}


/* ==========================================================
   KEYBOARD FOCUS
========================================================== */

.ul-service-card__link:focus-visible {
    outline:
        3px solid
        var(--ul-gold-400);

    outline-offset:
        -5px;

    border-radius: inherit;
}


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

.ul-services__bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

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

    padding:
        clamp(27px, 3vw, 38px)
        clamp(26px, 3.2vw, 46px);

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

    border-radius: 18px;

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

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

    opacity: 0;

    transform:
        translateY(22px);

    transition:
        opacity .75s ease,
        transform .9s
        var(--ul-ease-expo),

        border-color .4s ease,
        box-shadow .4s ease;
}


.ul-services__bottom.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


.ul-services__bottom:hover {
    border-color:
        var(--ul-border-medium);

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


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

.ul-services__bottom-copy {
    max-width: 720px;
}


.ul-services__bottom-label {
    display: block;

    margin-bottom: 7px;

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

    font-size: .74rem;

    font-weight: 600;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.ul-services__bottom-copy p {
    margin: 0;

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

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

    font-size:
        clamp(1.2rem, 1.7vw, 1.65rem);

    font-weight: 500;

    line-height: 1.25;

    letter-spacing:
        -.02em;
}


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

.ul-services__estimate {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    min-height: 56px;

    padding:
        6px 7px
        6px 20px;

    flex-shrink: 0;

    color:
        var(--ul-white);

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

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

    box-shadow:
        0 14px 30px
        rgba(103, 158, 97, .20);

    font-size: .82rem;

    font-weight: 600;

    letter-spacing: .035em;

    text-transform: uppercase;

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

        background-color .35s ease,

        box-shadow .4s ease;
}


.ul-services__estimate-icon {
    display: grid;

    place-items: center;

    width: 42px;
    height: 42px;

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

    border-radius: 6px;

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

    transition:
        color .35s ease,
        background-color .35s ease,
        transform .45s
        var(--ul-ease-expo);
}


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


.ul-services__estimate:hover {
    transform:
        translateY(-3px);

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

    box-shadow:
        0 18px 40px
        rgba(185, 71, 63, .18);
}


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

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

    transform:
        translateX(3px);
}


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

@media (min-width: 1200px) {

    .ul-services__grid {
        grid-template-columns:
            repeat(12, minmax(0, 1fr));
    }


    /*
    Make the lead card feel slightly more cinematic.
    */

    .ul-service-card:first-child
    .ul-service-card__content {
        right:
            clamp(25px, 2.7vw, 44px);

        bottom:
            clamp(25px, 2.7vw, 42px);
    }


    .ul-service-card:first-child h3 {
        max-width: 700px;

        font-size:
            clamp(2.5rem, 3vw, 3.7rem);
    }

}


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

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

    .ul-services__header {
        grid-template-columns:
            1fr;

        gap: 28px;

        margin-bottom: 48px;
    }


    .ul-services__intro {
        max-width: 670px;
    }


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

        gap: 17px;
    }


    .ul-service-card,
    .ul-service-card--wide,
    .ul-service-card--compact,
    .ul-service-card:nth-child(3),
    .ul-service-card:nth-child(4),
    .ul-service-card:nth-child(5),
    .ul-service-card:nth-child(6) {
        grid-column:
            auto;

        min-height:
            clamp(410px, 53vw, 520px);
    }


    .ul-service-card:nth-child(1),
    .ul-service-card:nth-child(4),
    .ul-service-card:nth-child(5) {
        min-height:
            clamp(445px, 57vw, 555px);
    }


    .ul-service-card__content {
        left: 25px;
        right: 25px;
        bottom: 25px;

        gap: 18px;
    }


    .ul-service-card h3,
    .ul-service-card--compact h3 {
        font-size:
            clamp(1.8rem, 3.3vw, 2.45rem);
    }


    .ul-service-card__copy > p {
        font-size: .88rem;
    }


    .ul-service-card__tags span {
        padding:
            0 9px;

        font-size: .63rem;
    }


    .ul-service-card__arrow {
        width: 54px;
        height: 54px;
    }


    .ul-services__bottom {
        gap: 25px;

        padding: 28px;
    }


    .ul-services__topography {
        right: -45%;
    }

}


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

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

    .ul-services__header {
        grid-template-columns:
            1fr;

        gap: 24px;

        margin-bottom: 39px;
    }


    .ul-services__title {
        max-width: 600px;

        font-size:
            clamp(2.75rem, 9.5vw, 3.8rem);
    }


    .ul-services__intro {
        max-width: 600px;
    }


    .ul-services__grid {
        grid-template-columns:
            1fr;

        gap: 16px;
    }


    .ul-service-card,
    .ul-service-card--wide,
    .ul-service-card--compact,
    .ul-service-card:nth-child(3),
    .ul-service-card:nth-child(4),
    .ul-service-card:nth-child(5),
    .ul-service-card:nth-child(6) {
        grid-column:
            auto;

        min-height:
            clamp(400px, 76vw, 500px);

        border-radius: 19px;
    }


    /*
    Slight rhythm variation without creating
    an awkward masonry layout.
    */

    .ul-service-card:nth-child(odd) {
        min-height:
            clamp(430px, 81vw, 530px);
    }


    .ul-service-card__meta {
        top: 18px;
        left: 18px;
        right: 18px;
    }


    .ul-service-card__number {
        width: 43px;
        height: 43px;

        border-radius: 12px;
    }


    .ul-service-card__category {
        min-height: 31px;

        padding:
            0 12px;

        font-size: .63rem;
    }


    .ul-service-card__content {
        left: 22px;
        right: 22px;
        bottom: 22px;

        gap: 18px;
    }


    .ul-service-card h3,
    .ul-service-card--compact h3 {
        max-width: 500px;

        font-size:
            clamp(2rem, 6.4vw, 2.65rem);
    }


    .ul-service-card__copy > p {
        max-width: 90%;

        font-size: .91rem;

        line-height: 1.55;
    }


    .ul-service-card__arrow {
        width: 56px;
        height: 56px;
    }


    .ul-services__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 23px;

        margin-top: 40px;

        padding: 25px;
    }


    .ul-services__estimate {
        width: 100%;

        justify-content: space-between;
    }


    .ul-services__ambient--warm {
        right: -75%;
    }

}


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

@media (max-width: 479px) {

    .ul-services__header {
        grid-template-columns:
            1fr;

        gap: 21px;

        margin-bottom: 34px;
    }


    .ul-services__eyebrow {
        gap: 11px;

        margin-bottom: 14px;

        font-size: .67rem;
    }


    .ul-services__eyebrow-line {
        width: 40px;
    }


    .ul-services__title {
        font-size:
            clamp(2.4rem, 11.2vw, 3.15rem);
    }


    .ul-services__intro p {
        margin-bottom: 18px;

        font-size: .93rem;

        line-height: 1.62;
    }


    .ul-services__view-all {
        font-size: .76rem;
    }


    .ul-services__view-all-arrow {
        width: 35px;
        height: 35px;
    }


    .ul-services__grid {
        grid-template-columns:
            1fr;

        gap: 13px;
    }


    .ul-service-card,
    .ul-service-card--wide,
    .ul-service-card--compact,
    .ul-service-card:nth-child(3),
    .ul-service-card:nth-child(4),
    .ul-service-card:nth-child(5),
    .ul-service-card:nth-child(6),
    .ul-service-card:nth-child(odd) {
        grid-column:
            auto;

        min-height:
            clamp(390px, 118vw, 475px);

        border-radius: 17px;
    }


    .ul-service-card__meta {
        top: 15px;
        left: 15px;
        right: 15px;
    }


    .ul-service-card__number {
        width: 40px;
        height: 40px;

        border-radius: 11px;

        font-size: .68rem;
    }


    .ul-service-card__category {
        min-height: 29px;

        max-width: 62%;

        padding:
            0 10px;

        font-size: .58rem;

        letter-spacing: .07em;
    }


    .ul-service-card__content {
        left: 18px;
        right: 18px;
        bottom: 18px;

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

        gap: 12px;
    }


    .ul-service-card h3,
    .ul-service-card--compact h3 {
        margin-bottom: 9px;

        font-size:
            clamp(1.85rem, 8.1vw, 2.4rem);
    }


    .ul-service-card__copy > p {
        max-width: 100%;

        margin-bottom: 13px;

        font-size: .84rem;

        line-height: 1.5;
    }


    .ul-service-card__tags {
        gap: 5px;
    }


    .ul-service-card__tags span {
        min-height: 27px;

        padding:
            0 8px;

        font-size: .59rem;
    }


    .ul-service-card__arrow {
        width: 48px;
        height: 48px;
    }


    .ul-service-card__arrow svg {
        width: 18px;
        height: 18px;
    }


    .ul-services__bottom {
        align-items: stretch;

        flex-direction: column;

        gap: 20px;

        margin-top: 35px;

        padding: 22px 18px;

        border-radius: 15px;
    }


    .ul-services__bottom-label {
        font-size: .65rem;
    }


    .ul-services__bottom-copy p {
        font-size:
            clamp(1.12rem, 5vw, 1.4rem);
    }


    .ul-services__estimate {
        justify-content: space-between;

        width: 100%;

        min-height: 52px;

        font-size: .72rem;
    }


    .ul-services__estimate-icon {
        width: 39px;
        height: 39px;
    }


    .ul-services__topography {
        top: -130px;
        right: -125%;

        width: 600px;
        height: 600px;
    }


    .ul-services__ambient--green {
        left: -120%;

        width: 580px;
        height: 580px;
    }

}


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

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

    .ul-services__header,
    .ul-service-card,
    .ul-service-card__image,
    .ul-service-card__pointer-light,
    .ul-service-card__number,
    .ul-service-card__category,
    .ul-service-card h3,
    .ul-service-card__tags span,
    .ul-service-card__arrow,
    .ul-services__view-all-arrow,
    .ul-services__bottom,
    .ul-services__estimate,
    .ul-services__estimate-icon {
        transition-duration:
            .001ms !important;
    }


    .ul-services__header,
    .ul-service-card,
    .ul-services__bottom {
        opacity:
            1 !important;

        transform:
            none !important;
    }


    .ul-service-card__image {
        transform:
            scale(1.02) !important;
    }


    .ul-service-card__pointer-light {
        display: none;
    }

}

/* ==========================================================
   SERVICES — 8 CARD EXPANSION
   ADD AT THE END OF THE EXISTING SERVICES CSS

   New cards:
   • Sod Installation
   • Welding Repairs

   Desktop final row:
   5 columns + 7 columns
========================================================== */


/* ==========================================================
   NO DECORATIVE COUNTERS

   Safety rule in case an old number span remains somewhere
   while integrating the new HTML.
========================================================== */

.ul-services
.ul-service-card__number {
    display: none !important;
}


/* ==========================================================
   META WITHOUT COUNTER
========================================================== */

.ul-services
.ul-service-card__meta {
    justify-content: flex-end;
}


/* ==========================================================
   NEW CARD ACCENT SUPPORT
========================================================== */

.ul-service-card--sod {
    --ul-service-accent:
        var(--ul-green-400);
}


.ul-service-card--welding {
    --ul-service-accent:
        var(--ul-logo-purple);
}


/* ==========================================================
   SAFER BASELINE VISIBILITY

   Critical Services content remains visible by default.

   JavaScript adds .ul-services--motion-ready when motion
   enhancement is available.
========================================================== */

.ul-services__header,
.ul-services .ul-service-card,
.ul-services__bottom {
    opacity: 1;

    transform: none;
}


/* ==========================================================
   MOTION-ENHANCED STATE
========================================================== */

.ul-services.ul-services--motion-ready
.ul-services__header:not(.is-visible) {
    opacity: 0;

    transform:
        translateY(24px);
}


.ul-services.ul-services--motion-ready
.ul-service-card:not(.is-visible) {
    opacity: 0;

    transform:
        translateY(32px)
        scale(.985);
}


.ul-services.ul-services--motion-ready
.ul-services__bottom:not(.is-visible) {
    opacity: 0;

    transform:
        translateY(22px);
}


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

@media (min-width: 1200px) {

    /* ===============================================
       FOURTH ROW
       Sod = 5 columns
       Welding = 7 columns
    ================================================ */

    .ul-services
    .ul-service-card:nth-child(7) {
        grid-column:
            span 5;

        min-height:
            clamp(400px, 30vw, 470px);
    }


    .ul-services
    .ul-service-card:nth-child(8) {
        grid-column:
            span 7;

        min-height:
            clamp(400px, 30vw, 470px);
    }

}


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

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

    .ul-services
    .ul-service-card:nth-child(7),
    .ul-services
    .ul-service-card:nth-child(8) {
        grid-column:
            auto;

        min-height:
            clamp(410px, 53vw, 520px);
    }


    /*
    Slightly taller Welding card to continue
    the existing bento rhythm.
    */

    .ul-services
    .ul-service-card:nth-child(8) {
        min-height:
            clamp(445px, 57vw, 555px);
    }

}


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

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

    .ul-services
    .ul-service-card:nth-child(7),
    .ul-services
    .ul-service-card:nth-child(8) {
        grid-column:
            auto;

        min-height:
            clamp(400px, 76vw, 500px);
    }


    .ul-services
    .ul-service-card:nth-child(7) {
        min-height:
            clamp(430px, 81vw, 530px);
    }

}


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

@media (max-width: 479px) {

    .ul-services
    .ul-service-card:nth-child(7),
    .ul-services
    .ul-service-card:nth-child(8) {
        grid-column:
            auto;

        min-height:
            clamp(390px, 118vw, 475px);
    }

}


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

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

    .ul-services {
        --ul-services-motion:
            none;
    }


    .ul-services__header,
    .ul-services .ul-service-card,
    .ul-services__bottom {
        opacity:
            1 !important;

        transform:
            none !important;
    }

}















































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   04. WHY CHOOSE US — MODERN SPECTRUM

   Important reliability rule:
   The image is NEVER hidden by CSS.

   Animations enhance the section but are not required
   for the section or image to display.
========================================================== */


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

.ul-why {
    position: relative;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            180deg,
            #F8FAF5 0%,
            #F3F7EE 56%,
            #F9FBF7 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* ==========================================================
   TOP BRAND LINE
========================================================== */

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

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            1400px,
            calc(100% - 96px)
        );

    height: 1px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            transparent,

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

            rgba(112, 186, 202, .38) 38%,

            rgba(241, 215, 55, .40) 57%,

            rgba(189, 70, 63, .35) 77%,

            transparent
        );
}


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

.ul-why__ambient {
    position: absolute;

    z-index: -4;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(4px);
}


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

.ul-why__ambient--green {
    top: 6%;

    left: -320px;

    width: 720px;
    height: 720px;

    background:

        radial-gradient(
            circle,

            rgba(143, 200, 95, .16),

            rgba(167, 213, 118, .05) 43%,

            transparent 70%
        );
}


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

.ul-why__ambient--blue {
    right: -300px;

    bottom: -280px;

    width: 660px;
    height: 660px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 70%
        );
}


/* ==========================================================
   TREE-LIKE BACKGROUND LINES
========================================================== */

.ul-why__tree-lines {
    position: absolute;

    z-index: -3;

    top: 0;
    left: 0;

    width: 46%;
    height: 100%;

    pointer-events: none;

    opacity: .55;

    mask-image:

        linear-gradient(
            90deg,
            #000,
            rgba(0, 0, 0, .58) 55%,
            transparent
        );

    -webkit-mask-image:

        linear-gradient(
            90deg,
            #000,
            rgba(0, 0, 0, .58) 55%,
            transparent
        );

    background:

        repeating-radial-gradient(
            ellipse at 4% 38%,

            transparent 0,

            transparent 36px,

            rgba(85, 129, 88, .043) 37px,

            rgba(85, 129, 88, .043) 38px,

            transparent 39px,

            transparent 69px
        ),

        repeating-linear-gradient(
            98deg,

            transparent 0,

            transparent 26px,

            rgba(133, 102, 76, .025) 27px,

            rgba(133, 102, 76, .025) 28px,

            transparent 29px,

            transparent 56px
        );
}


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

.ul-why__layout {
    display: grid;

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

    align-items: center;

    gap:
        clamp(
            58px,
            6vw,
            105px
        );
}


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

.ul-why__visual {
    --ul-why-pointer-x: 50%;
    --ul-why-pointer-y: 50%;

    --ul-why-image-x: 0px;
    --ul-why-image-y: 0px;

    position: relative;

    min-width: 0;
}


/* ==========================================================
   IMAGE WRAPPER

   Important:
   NO opacity:0
   NO visibility:hidden
   NO clip-path hiding state
========================================================== */

.ul-why__image-wrap {
    position: relative;

    width: 100%;

    min-height:
        clamp(
            570px,
            45vw,
            730px
        );

    overflow: hidden;

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

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

    background:

        linear-gradient(
            135deg,

            var(--ul-forest-800),

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

    box-shadow:

        0 32px 80px
        rgba(49, 93, 61, .17),

        0 14px 34px
        rgba(49, 93, 61, .08),

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

    isolation: isolate;
}


/* ==========================================================
   MAIN IMAGE

   ALWAYS VISIBLE.
========================================================== */

.ul-why__image {
    position: absolute;

    z-index: -5;

    inset: -2%;

    width: 104%;
    height: 104%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    opacity: 1;

    visibility: visible;

    pointer-events: none;

    user-select: none;

    transform:

        translate3d(
            var(--ul-why-image-x),
            var(--ul-why-image-y),
            0
        )

        scale(1.045);

    filter:

        saturate(1.02)

        contrast(1.025);

    transition:

        transform 1.05s
        var(--ul-ease-expo),

        filter .6s ease;

    backface-visibility: hidden;

    will-change: transform;
}


/* ==========================================================
   IMAGE LOADED STATE

   This state is enhancement only.
   It does NOT control visibility.
========================================================== */

.ul-why.is-image-ready
.ul-why__image {
    filter:

        saturate(1.055)

        contrast(1.025);
}


/* ==========================================================
   IMAGE ERROR FALLBACK
========================================================== */

.ul-why.has-image-error
.ul-why__image {
    display: none;
}


.ul-why.has-image-error
.ul-why__image-wrap {
    background:

        linear-gradient(
            135deg,

            var(--ul-forest-900) 0%,

            var(--ul-forest-700) 42%,

            var(--ul-green-600) 100%
        );
}


/* ==========================================================
   IMAGE SHADE
========================================================== */

.ul-why__image-shade {
    position: absolute;

    z-index: -3;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            rgba(20, 51, 29, .08) 0%,

            rgba(20, 51, 29, .02) 38%,

            rgba(17, 46, 26, .22) 62%,

            rgba(13, 38, 21, .78) 100%
        ),

        linear-gradient(
            90deg,

            rgba(18, 49, 28, .14),

            transparent 55%
        );
}


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

.ul-why__image-light {
    position: absolute;

    z-index: -2;

    left:
        calc(
            var(--ul-why-pointer-x) -
            180px
        );

    top:
        calc(
            var(--ul-why-pointer-y) -
            180px
        );

    width: 360px;
    height: 360px;

    pointer-events: none;

    border-radius: 50%;

    opacity: 0;

    background:

        radial-gradient(
            circle,

            rgba(255, 255, 255, .17),

            rgba(167, 213, 118, .075) 32%,

            transparent 68%
        );

    transition:
        opacity .4s ease;
}


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

.ul-why__visual:hover
.ul-why__image {
    transform:

        translate3d(
            var(--ul-why-image-x),
            var(--ul-why-image-y),
            0
        )

        scale(1.075);
}


.ul-why__visual:hover
.ul-why__image-light {
    opacity: 1;
}


/* ==========================================================
   IMAGE TOP LABEL
========================================================== */

.ul-why__image-label {
    position: absolute;

    z-index: 4;

    top:
        clamp(
            21px,
            2vw,
            30px
        );

    left:
        clamp(
            21px,
            2vw,
            30px
        );

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 39px;

    padding:
        0 15px;

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

    border-radius: 12px;

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

    background:
        rgba(20, 50, 29, .38);

    -webkit-backdrop-filter:
        blur(13px)
        saturate(115%);

    backdrop-filter:
        blur(13px)
        saturate(115%);

    font-size:
        .82rem;

    font-weight: 600;

    letter-spacing:
        .035em;
}


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

.ul-why__image-label-dot {
    display: block;

    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

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


/* ==========================================================
   IMAGE BOTTOM CONTENT
========================================================== */

.ul-why__image-content {
    position: absolute;

    z-index: 4;

    left:
        clamp(
            22px,
            2.4vw,
            38px
        );

    right:
        clamp(
            22px,
            2.4vw,
            38px
        );

    bottom:
        clamp(
            26px,
            2.6vw,
            42px
        );

    display: flex;

    align-items: center;

    gap:
        clamp(
            15px,
            1.6vw,
            22px
        );
}


/* ==========================================================
   IMAGE MARK
========================================================== */

.ul-why__image-mark {
    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    flex: 0 0 auto;

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

    border-radius: 17px;

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

    background:
        rgba(18, 49, 28, .55);

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

    backdrop-filter:
        blur(12px);

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

    font-size: 1.4rem;

    font-weight: 400;
}


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

.ul-why__image-copy {
    display: flex;

    flex-direction: column;

    gap: 6px;

    max-width: 360px;
}


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

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

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

    font-weight: 500;

    line-height: 1;

    letter-spacing:
        -.025em;
}


.ul-why__image-copy span {
    color:
        rgba(255, 255, 255, .76);

    font-size:
        .94rem;

    line-height: 1.45;
}


/* ==========================================================
   IMAGE BRAND SPECTRUM
========================================================== */

.ul-why__image-spectrum {
    position: absolute;

    z-index: 5;

    left: 30px;
    right: 30px;

    bottom: 0;

    height: 4px;

    border-radius:
        999px 999px 0 0;

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


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

.ul-why__visual-caption {
    display: grid;

    grid-template-columns:
        minmax(140px, .55fr)
        minmax(0, 1fr);

    gap:
        clamp(
            20px,
            2vw,
            32px
        );

    align-items: start;

    margin-top: 22px;

    padding:
        0 8px;
}


/* ==========================================================
   VISUAL CAPTION LABEL
========================================================== */

.ul-why__visual-caption-label {
    color:
        var(--ul-logo-blue);

    font-size:
        .78rem;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing:
        .08em;

    text-transform: uppercase;
}


/* ==========================================================
   VISUAL CAPTION TEXT
========================================================== */

.ul-why__visual-caption p {
    margin: 0;

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

    font-size:
        1rem;

    line-height: 1.62;
}


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

.ul-why__content {
    min-width: 0;
}


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

.ul-why__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        .11em;

    text-transform: uppercase;
}


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

.ul-why__eyebrow-dot {
    display: block;

    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 5px
        rgba(189, 70, 63, .10);
}


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

.ul-why__eyebrow-line {
    display: block;

    width: 54px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

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


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

.ul-why__title {
    max-width: 700px;

    margin:
        0 0 24px;

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

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

    font-size:
        clamp(
            3.1rem,
            4.3vw,
            5rem
        );

    font-weight: 500;

    line-height: .95;

    letter-spacing:
        -.046em;
}


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

.ul-why__title span {
    display: block;

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


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

.ul-why__intro {
    max-width: 650px;

    margin:
        0 0
        clamp(
            34px,
            3.8vw,
            50px
        );

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

    font-size:
        clamp(
            1.08rem,
            1.12vw,
            1.2rem
        );

    line-height: 1.72;

    letter-spacing:
        -.01em;
}


/* ==========================================================
   REASONS GRID
========================================================== */

.ul-why__reasons {
    display: grid;

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

    gap: 14px;
}


/* ==========================================================
   REASON CARD
========================================================== */

.ul-why-card {
    --ul-why-card-accent:
        var(--ul-green-600);

    --ul-why-card-soft:
        var(--ul-surface-green);

    position: relative;

    min-width: 0;

    padding:
        clamp(
            21px,
            2vw,
            28px
        );

    overflow: hidden;

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

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

    background:

        linear-gradient(
            145deg,

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

            rgba(255, 255, 255, .74)
        );

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

    transition:

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

        border-color .35s ease,

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

        background .35s ease;
}


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

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

    position: absolute;

    z-index: 0;

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

    width: 190px;
    height: 190px;

    border-radius: 50%;

    pointer-events: none;

    opacity: .53;

    background:

        radial-gradient(
            circle,

            color-mix(
                in srgb,
                var(--ul-why-card-accent) 18%,
                transparent
            ),

            transparent 68%
        );

    transition:

        opacity .35s ease,

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


/* ==========================================================
   CARD CONTENT ABOVE WASH
========================================================== */

.ul-why-card > * {
    position: relative;

    z-index: 1;
}


/* ==========================================================
   CARD HOVER
========================================================== */

.ul-why-card:hover {
    transform:
        translateY(-6px);

    border-color:

        color-mix(
            in srgb,
            var(--ul-why-card-accent) 32%,
            transparent
        );

    background:
        var(--ul-white);

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


.ul-why-card:hover::before {
    opacity: .90;

    transform:
        scale(1.12);
}


/* ==========================================================
   GREEN CARD
========================================================== */

.ul-why-card--green {
    --ul-why-card-accent:
        var(--ul-green-600);

    --ul-why-card-soft:
        var(--ul-surface-green);
}


/* ==========================================================
   BLUE CARD
========================================================== */

.ul-why-card--blue {
    --ul-why-card-accent:
        var(--ul-logo-blue);

    --ul-why-card-soft:
        var(--ul-surface-blue);
}


/* ==========================================================
   ORANGE CARD
========================================================== */

.ul-why-card--orange {
    --ul-why-card-accent:
        var(--ul-logo-orange);

    --ul-why-card-soft:
        var(--ul-surface-orange);
}


/* ==========================================================
   PURPLE CARD
========================================================== */

.ul-why-card--purple {
    --ul-why-card-accent:
        var(--ul-logo-purple);

    --ul-why-card-soft:
        var(--ul-surface-purple);
}


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

.ul-why-card__top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 19px;
}


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

.ul-why-card__icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 auto;

    border:
        1px solid

        color-mix(
            in srgb,
            var(--ul-why-card-accent) 25%,
            transparent
        );

    border-radius: 15px;

    color:
        var(--ul-why-card-accent);

    background:
        var(--ul-why-card-soft);

    transition:

        color .35s ease,

        background-color .35s ease,

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


.ul-why-card__icon svg {
    width: 23px;
    height: 23px;
}


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

.ul-why-card:hover
.ul-why-card__icon {
    color:
        var(--ul-white);

    background:
        var(--ul-why-card-accent);

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


/* ==========================================================
   CARD ACCENT
========================================================== */

.ul-why-card__accent {
    display: block;

    width: 34px;
    height: 5px;

    border-radius: 999px;

    background:
        var(--ul-why-card-accent);

    opacity: .70;

    transition:

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

        opacity .35s ease;
}


.ul-why-card:hover
.ul-why-card__accent {
    width: 54px;

    opacity: 1;
}


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

.ul-why-card h3 {
    margin:
        0 0 11px;

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

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

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

    font-weight: 500;

    line-height: 1.1;

    letter-spacing:
        -.03em;
}


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

   Intentionally readable.
========================================================== */

.ul-why-card p {
    margin: 0;

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

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

    line-height: 1.62;
}


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

.ul-why__actions {
    display: flex;

    align-items: stretch;

    flex-wrap: wrap;

    gap: 12px;

    margin-top:
        clamp(
            30px,
            3.3vw,
            44px
        );
}


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

.ul-why__estimate {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    min-height: 57px;

    padding:
        6px 7px
        6px 20px;

    overflow: hidden;

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

    border-radius: 15px;

    color:
        var(--ul-white);

    background:
        var(--ul-gradient-green-deep);

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

    font-size: .91rem;

    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing:
        .03em;

    transition:

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

        box-shadow .4s ease;
}


/* ==========================================================
   CTA COLOR HOVER
========================================================== */

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

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            110deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

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

    transform:
        translateX(-103%);

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


.ul-why__estimate > * {
    position: relative;

    z-index: 1;
}


.ul-why__estimate:hover {
    transform:
        translateY(-3px);

    box-shadow:

        0 20px 44px
        rgba(126, 187, 80, .24),

        0 10px 25px
        rgba(189, 70, 63, .13);
}


.ul-why__estimate:hover::before {
    transform:
        translateX(0);
}


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

.ul-why__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:

        color .35s ease,

        background-color .35s ease,

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


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


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

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

    transform:
        translateX(2px);
}


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

.ul-why__phone {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    min-height: 57px;

    padding:
        6px 18px
        6px 7px;

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

    border-radius: 15px;

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

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

    transition:

        transform .4s
        var(--ul-ease-out),

        border-color .35s ease,

        box-shadow .35s ease,

        background-color .35s ease;
}


.ul-why__phone:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(49, 90, 152, .26);

    background:
        var(--ul-white);

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


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

.ul-why__phone-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

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


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


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

.ul-why__phone-copy {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


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

    font-size: .75rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        .04em;
}


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

    font-size: .94rem;

    font-weight: 600;

    line-height: 1;
}


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

@media (min-width: 1200px) {

    .ul-why__layout {
        grid-template-columns:
            minmax(0, .94fr)
            minmax(0, 1.06fr);
    }


    .ul-why__image-wrap {
        min-height:
            clamp(
                590px,
                45vw,
                730px
            );
    }

}


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

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

    .ul-why__layout {
        grid-template-columns:
            1fr;

        gap: 58px;
    }


    .ul-why__visual {
        width: 100%;
    }


    .ul-why__image-wrap {
        min-height:
            clamp(
                480px,
                64vw,
                620px
            );
    }


    .ul-why__visual-caption {
        grid-template-columns:
            .46fr 1fr;
    }


    .ul-why__content {
        max-width: 100%;
    }


    .ul-why__title {
        max-width: 700px;

        font-size:
            clamp(
                3rem,
                6.2vw,
                4.5rem
            );
    }


    .ul-why__intro {
        max-width: 720px;
    }


    .ul-why__reasons {
        gap: 13px;
    }


    .ul-why-card {
        padding: 23px;
    }


    .ul-why-card p {
        font-size: .98rem;
    }

}


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

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

    .ul-why__layout {
        grid-template-columns:
            1fr;

        gap: 46px;
    }


    .ul-why__image-wrap {
        min-height:
            clamp(
                430px,
                85vw,
                540px
            );

        border-radius: 22px;
    }


    .ul-why__image-label {
        top: 18px;
        left: 18px;

        min-height: 37px;

        padding:
            0 13px;

        font-size: .76rem;
    }


    .ul-why__image-content {
        left: 20px;
        right: 20px;
        bottom: 25px;
    }


    .ul-why__image-mark {
        width: 49px;
        height: 49px;

        border-radius: 14px;
    }


    .ul-why__image-copy strong {
        font-size: 1.4rem;
    }


    .ul-why__image-copy span {
        font-size: .90rem;
    }


    .ul-why__visual-caption {
        grid-template-columns:
            1fr;

        gap: 9px;

        margin-top: 18px;
    }


    .ul-why__visual-caption-label {
        font-size: .73rem;
    }


    .ul-why__visual-caption p {
        font-size: .96rem;
    }


    .ul-why__eyebrow {
        font-size: .75rem;
    }


    .ul-why__title {
        font-size:
            clamp(
                2.7rem,
                8.6vw,
                3.7rem
            );
    }


    .ul-why__intro {
        margin-bottom: 32px;

        font-size: 1.02rem;

        line-height: 1.66;
    }


    .ul-why__reasons {
        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .ul-why-card {
        padding: 22px;
    }


    .ul-why-card h3 {
        font-size: 1.38rem;
    }


    .ul-why-card p {
        font-size: .96rem;
    }


    .ul-why__actions {
        margin-top: 29px;
    }


    .ul-why__estimate,
    .ul-why__phone {
        min-height: 55px;
    }

}


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

@media (max-width: 479px) {

    .ul-why__layout {
        grid-template-columns:
            1fr;

        gap: 39px;
    }


    .ul-why__image-wrap {
        min-height:
            clamp(
                390px,
                118vw,
                500px
            );

        border-radius: 19px;
    }


    .ul-why__image-label {
        top: 15px;
        left: 15px;

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

        min-height: 35px;

        padding:
            0 11px;

        font-size: .70rem;

        letter-spacing: .02em;
    }


    .ul-why__image-label-dot {
        width: 7px;
        height: 7px;
    }


    .ul-why__image-content {
        left: 17px;
        right: 17px;
        bottom: 21px;

        gap: 12px;
    }


    .ul-why__image-mark {
        width: 45px;
        height: 45px;

        border-radius: 13px;

        font-size: 1.2rem;
    }


    .ul-why__image-copy {
        max-width: 260px;
    }


    .ul-why__image-copy strong {
        font-size: 1.3rem;
    }


    .ul-why__image-copy span {
        font-size: .85rem;

        line-height: 1.4;
    }


    .ul-why__image-spectrum {
        left: 18px;
        right: 18px;

        height: 3px;
    }


    .ul-why__visual-caption {
        grid-template-columns:
            1fr;

        gap: 8px;

        margin-top: 17px;

        padding: 0 3px;
    }


    .ul-why__visual-caption-label {
        font-size: .70rem;
    }


    .ul-why__visual-caption p {
        font-size: .92rem;

        line-height: 1.58;
    }


    .ul-why__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .09em;
    }


    .ul-why__eyebrow-line {
        width: 40px;
    }


    .ul-why__title {
        margin-bottom: 19px;

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

        line-height: .96;
    }


    .ul-why__intro {
        margin-bottom: 28px;

        font-size: .96rem;

        line-height: 1.62;
    }


    .ul-why__reasons {
        grid-template-columns:
            1fr;

        gap: 11px;
    }


    .ul-why-card {
        padding: 19px;

        border-radius: 17px;
    }


    .ul-why-card__top {
        margin-bottom: 15px;
    }


    .ul-why-card__icon {
        width: 45px;
        height: 45px;

        border-radius: 13px;
    }


    .ul-why-card__icon svg {
        width: 21px;
        height: 21px;
    }


    .ul-why-card h3 {
        margin-bottom: 9px;

        font-size: 1.28rem;
    }


    .ul-why-card p {
        font-size: .92rem;

        line-height: 1.58;
    }


    .ul-why__actions {
        align-items: stretch;

        flex-direction: column;

        gap: 9px;

        margin-top: 27px;
    }


    .ul-why__estimate,
    .ul-why__phone {
        width: 100%;

        min-height: 54px;
    }


    .ul-why__estimate {
        font-size: .79rem;
    }


    .ul-why__phone-copy small {
        font-size: .70rem;
    }


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

}


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

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

    .ul-why__image,
    .ul-why__image-light,
    .ul-why-card,
    .ul-why-card::before,
    .ul-why-card__icon,
    .ul-why-card__accent,
    .ul-why__estimate,
    .ul-why__estimate::before,
    .ul-why__estimate-icon,
    .ul-why__phone {
        animation: none !important;

        transition: none !important;
    }


    .ul-why__image {
        transform:
            scale(1.045) !important;
    }


    .ul-why__image-light {
        display: none;
    }

}

/* ==========================================================
   WHY CHOOSE US + OUR PROCESS
   APPEND TO THE END OF THE CURRENT CSS

   • Fifth Why card = full-width
   • New Our Process section
   • Why stays light
   • Process uses dark forest / charcoal environment
========================================================== */


/* ==========================================================
   WHY — INSURED CARD
========================================================== */

.ul-why-card--insured {
    --ul-why-card-accent:
        var(--ul-logo-cyan);

    --ul-why-card-soft:
        var(--ul-surface-cyan);

    grid-column:
        1 / -1;

    display: grid;

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

    align-items: center;

    gap:
        clamp(20px, 2.5vw, 35px);

    min-height: 155px;
}


.ul-why-card--insured
.ul-why-card__top {
    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-bottom: 0;
}


.ul-why-card--insured
.ul-why-card__accent {
    width: 43px;
}


.ul-why-card--insured:hover
.ul-why-card__accent {
    width: 56px;
}


.ul-why-card__insured-copy {
    max-width: 650px;
}


.ul-why-card__insured-label {
    display: block;

    margin-bottom: 7px;

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

    font-size:
        .78rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.ul-why-card--insured h3 {
    margin-bottom: 8px;
}


.ul-why-card--insured p {
    max-width: 620px;
}



/* ==========================================================
   OUR PROCESS — ROOT
========================================================== */

.ul-process {
    position: relative;

    overflow: hidden;

    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(100px, 8vw, 140px);

    color:
        var(--ul-white);

    background:

        linear-gradient(
            145deg,
            #132B1A 0%,
            #183A24 38%,
            #214B2E 70%,
            #132F1D 100%
        );

    isolation: isolate;
}


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

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

    position: absolute;

    z-index: 7;

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

    height: 4px;

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

    pointer-events: none;
}


/* ==========================================================
   LOWER DEPTH
========================================================== */

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

    position: absolute;

    z-index: -5;

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

    height: 46%;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(5, 18, 9, .34)
        );
}


/* ==========================================================
   DIAGONAL TEXTURE
========================================================== */

.ul-process__texture {
    position: absolute;

    z-index: -4;

    inset: 0;

    pointer-events: none;

    opacity: .42;

    background:

        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.022) 0,
            rgba(255,255,255,.022) 1px,
            transparent 1px,
            transparent 12px
        );
}


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

.ul-process__ambient {
    position: absolute;

    z-index: -3;

    border-radius: 50%;

    pointer-events: none;
}


.ul-process__ambient--green {
    left: -380px;
    bottom: -420px;

    width: 800px;
    height: 800px;

    background:

        radial-gradient(
            circle,
            rgba(167,213,118,.13),
            rgba(126,187,80,.025) 48%,
            transparent 72%
        );
}


.ul-process__ambient--blue {
    top: -390px;
    right: -360px;

    width: 770px;
    height: 770px;

    background:

        radial-gradient(
            circle,
            rgba(112,186,202,.12),
            rgba(49,90,152,.022) 48%,
            transparent 72%
        );
}


.ul-process__ambient--warm {
    right: 13%;
    bottom: -310px;

    width: 530px;
    height: 530px;

    background:

        radial-gradient(
            circle,
            rgba(233,145,41,.07),
            rgba(189,60,53,.018) 46%,
            transparent 70%
        );
}


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

.ul-process__word {
    position: absolute;

    z-index: -2;

    top:
        clamp(40px, 5vw, 72px);

    right: -2%;

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

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

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

    font-weight: 500;

    line-height: .76;

    letter-spacing: -.07em;

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


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

.ul-process__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, .57fr);

    align-items: end;

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

    margin-bottom:
        clamp(62px, 6.5vw, 95px);
}


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

.ul-process__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-process__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-process__eyebrow-line {
    width: 56px;
    height: 2px;

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,
            var(--ul-green-400),
            var(--ul-logo-yellow),
            var(--ul-logo-orange)
        );
}


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

.ul-process__title {
    max-width: 850px;

    margin: 0;

    color:
        var(--ul-white);

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

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

    font-weight: 500;

    line-height: .93;

    letter-spacing: -.05em;
}


.ul-process__title span {
    display: block;

    margin-top: .07em;

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


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

.ul-process__intro {
    max-width: 520px;

    justify-self: end;
}


.ul-process__intro > p {
    margin:
        0 0 23px;

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

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

    line-height: 1.68;
}


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

.ul-process__intro-note {
    display: flex;

    align-items: center;

    gap: 12px;

    padding-top: 18px;

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

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

    font-size: .91rem;

    line-height: 1.45;
}


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

    place-items: center;

    width: 39px;
    height: 39px;

    flex: 0 0 auto;

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

    border-radius: 11px;

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

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


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


/* ==========================================================
   PROCESS STEPS WRAPPER
========================================================== */

.ul-process__steps {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap:
        clamp(12px, 1.4vw, 20px);

    padding-top: 44px;
}


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

.ul-process__track {
    position: absolute;

    z-index: 0;

    top: 73px;

    left:
        calc(12.5% + 28px);

    right:
        calc(12.5% + 28px);

    height: 3px;

    pointer-events: none;
}


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

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border-radius: 999px;
}


.ul-process__track-base {
    background:
        rgba(255,255,255,.13);
}


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

    transform-origin:
        left center;

    background:

        linear-gradient(
            90deg,
            var(--ul-green-400),
            var(--ul-logo-cyan),
            var(--ul-logo-yellow),
            var(--ul-logo-red)
        );

    box-shadow:
        0 0 24px
        rgba(167,213,118,.18);

    transition:
        transform .12s linear;
}


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

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

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height:
        clamp(365px, 27vw, 430px);

    padding:
        clamp(24px, 2.4vw, 32px);

    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,.08),
            rgba(255,255,255,.033)
        );

    box-shadow:
        0 22px 56px
        rgba(3,16,8,.16);

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

    backdrop-filter:
        blur(11px);

    transition:
        transform .48s var(--ul-ease-expo),
        border-color .35s ease,
        background .35s ease,
        box-shadow .40s ease;
}


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

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


.ul-process-step--blue {
    --ul-process-accent:
        var(--ul-logo-cyan);
}


.ul-process-step--yellow {
    --ul-process-accent:
        var(--ul-logo-yellow);
}


.ul-process-step--red {
    --ul-process-accent:
        var(--ul-logo-red);
}


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

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

    position: absolute;

    z-index: -1;

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

    width: 290px;
    height: 290px;

    border-radius: 50%;

    pointer-events: none;

    opacity: .20;

    background:

        radial-gradient(
            circle,
            var(--ul-process-accent),
            transparent 68%
        );

    transform:
        scale(.88);

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


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

.ul-process-step__top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 90px;

    margin-bottom:
        clamp(44px, 4vw, 62px);
}


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

.ul-process-step__icon {
    display: grid;

    place-items: center;

    width: 66px;
    height: 66px;

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

    border-radius: 20px;

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

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

    box-shadow:
        0 12px 30px
        rgba(2,14,7,.15);

    transition:
        color .35s ease,
        background-color .35s ease,
        transform .48s var(--ul-ease-expo);
}


.ul-process-step__icon svg {
    width: 29px;
    height: 29px;
}


/* ==========================================================
   NODE
========================================================== */

.ul-process-step__node {
    position: absolute;

    left: 50%;
    bottom: -15px;

    width: 13px;
    height: 13px;

    transform:
        translateX(-50%);

    border:
        3px solid
        #1B4027;

    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);
}


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

.ul-process-step__content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin-top: auto;
}


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

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

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
}


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

.ul-process-step h3 {
    max-width: 300px;

    margin:
        0 0 14px;

    color:
        var(--ul-white);

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

    font-size:
        clamp(1.65rem, 1.9vw, 2.05rem);

    font-weight: 500;

    line-height: 1.07;

    letter-spacing: -.03em;
}


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

.ul-process-step p {
    margin: 0;

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

    font-size:
        clamp(.96rem, .90vw, 1.02rem);

    line-height: 1.59;
}


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

.ul-process-step__accent {
    position: absolute;

    left:
        clamp(24px, 2.4vw, 32px);

    right:
        clamp(24px, 2.4vw, 32px);

    bottom: 0;

    height: 3px;

    border-radius:
        999px 999px 0 0;

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

    opacity: .30;

    transform:
        scaleX(.18);

    transform-origin:
        left center;

    transition:
        transform .55s var(--ul-ease-expo),
        opacity .35s ease;
}


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

.ul-process-step.is-active {
    transform:
        translateY(-6px);

    border-color:
        rgba(255,255,255,.19);

    background:

        linear-gradient(
            150deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.045)
        );

    box-shadow:
        0 30px 68px
        rgba(2,15,7,.23);
}


.ul-process-step.is-active::before {
    opacity: .48;

    transform:
        scale(1.06);
}


.ul-process-step.is-active
.ul-process-step__icon {
    color:
        #173820;

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

    transform:
        translateY(-3px);
}


.ul-process-step.is-active
.ul-process-step__node {
    background:
        var(--ul-process-accent);

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


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

    transform:
        scaleX(1);
}


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

.ul-process-step:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(255,255,255,.18);
}


.ul-process-step:hover
.ul-process-step__icon {
    transform:
        translateY(-3px);
}


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

.ul-process__bottom {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    margin-top:
        clamp(55px, 6vw, 84px);

    padding:
        clamp(18px, 2vw, 24px);

    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-process__bottom-copy {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;
}


.ul-process__bottom-icon {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 auto;

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

    border-radius: 14px;

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

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


.ul-process__bottom-icon svg {
    width: 21px;
    height: 21px;
}


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

    flex-direction: column;

    gap: 4px;
}


.ul-process__bottom-copy span {
    color:
        rgba(255,255,255,.56);

    font-size: .87rem;
}


.ul-process__bottom-copy strong {
    color:
        rgba(255,255,255,.95);

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

    font-size:
        clamp(1.08rem, 1.15vw, 1.24rem);

    font-weight: 500;
}


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

.ul-process__actions {
    display: flex;

    align-items: center;

    gap: 9px;

    flex: 0 0 auto;
}


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

.ul-process__estimate {
    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 17px;

    min-height: 57px;

    padding:
        6px 7px
        6px 19px;

    border-radius: 14px;

    color:
        var(--ul-white);

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

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

    font-size: .84rem;

    font-weight: 600;

    letter-spacing: .025em;

    text-transform: uppercase;

    transition:
        transform .40s var(--ul-ease-expo),
        background-color .30s ease,
        box-shadow .35s ease;
}


.ul-process__estimate-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    border-radius: 10px;

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

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

    transition:
        color .30s ease,
        background-color .30s ease,
        transform .40s var(--ul-ease-expo);
}


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


.ul-process__estimate:hover {
    transform:
        translateY(-3px);

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

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


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

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

    transform:
        translateX(3px);
}


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

.ul-process__phone {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 57px;

    padding:
        0 19px;

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

    border-radius: 14px;

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

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

    font-size: .91rem;

    font-weight: 600;

    transition:
        transform .40s var(--ul-ease-expo),
        border-color .30s ease,
        background-color .30s ease;
}


.ul-process__phone:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(112,186,202,.30);

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


/* ==========================================================
   FOCUS
========================================================== */

.ul-process__estimate:focus-visible,
.ul-process__phone:focus-visible {
    outline:
        2px solid
        var(--ul-logo-yellow);

    outline-offset: 4px;
}


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

@media (min-width: 1200px) {

    .ul-why-card--insured {
        grid-column:
            1 / -1;
    }


    .ul-process__steps {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


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

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

    .ul-why-card--insured {
        grid-column:
            1 / -1;
    }


    .ul-process {
        padding:
            92px 0
            94px;
    }


    .ul-process__header {
        grid-template-columns: 1fr;

        gap: 31px;

        margin-bottom: 58px;
    }


    .ul-process__intro {
        max-width: 680px;

        justify-self: start;
    }


    .ul-process__title {
        max-width: 760px;

        font-size:
            clamp(3.05rem, 6.4vw, 4.6rem);
    }


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

        gap: 14px;

        padding-top: 0;
    }


    /*
    A single horizontal connector would be misleading
    once cards wrap to two rows.
    */

    .ul-process__track {
        display: none;
    }


    .ul-process-step {
        min-height: 340px;
    }


    .ul-process-step__node {
        display: none;
    }


    .ul-process-step__top {
        justify-content: flex-start;

        min-height: 70px;

        margin-bottom: 35px;
    }


    .ul-process__bottom {
        align-items: flex-start;
    }


    .ul-process__actions {
        flex-direction: column;

        align-items: stretch;
    }

}


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

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

    .ul-why-card--insured {
        grid-column:
            auto;

        display: block;

        min-height: 0;
    }


    .ul-why-card--insured
    .ul-why-card__top {
        flex-direction: row;

        justify-content: space-between;

        margin-bottom: 19px;
    }


    .ul-process {
        padding:
            78px 0
            80px;
    }


    .ul-process__word {
        right: -17%;

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


    .ul-process__header {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 46px;
    }


    .ul-process__title {
        font-size:
            clamp(2.8rem, 8.6vw, 3.8rem);
    }


    .ul-process__intro {
        justify-self: start;

        max-width: 600px;
    }


    .ul-process__intro > p {
        font-size: 1rem;
    }


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

    .ul-process__steps {
        grid-template-columns: 1fr;

        gap: 12px;

        padding:
            0 0
            0 51px;
    }


    .ul-process__track {
        display: block;

        top: 34px;
        bottom: 34px;

        left: 19px;
        right: auto;

        width: 3px;
        height: auto;
    }


    .ul-process__track-base,
    .ul-process__track-progress {
        width: 3px;
        height: 100%;
    }


    .ul-process__track-progress {
        transform:
            scaleY(0);

        transform-origin:
            center top;
    }


    .ul-process-step {
        min-height: 0;

        padding: 26px;
    }


    .ul-process-step__top {
        justify-content: flex-start;

        min-height: 64px;

        margin-bottom: 29px;
    }


    .ul-process-step__node {
        display: block;

        top: 26px;
        bottom: auto;

        left: -61px;

        transform: none;
    }


    .ul-process-step.is-active
    .ul-process-step__node {
        transform:
            scale(1.10);
    }


    .ul-process-step p {
        max-width: 560px;

        font-size: .96rem;
    }


    .ul-process__bottom {
        align-items: stretch;

        flex-direction: column;

        gap: 18px;

        margin-top: 47px;
    }


    .ul-process__actions {
        width: 100%;
    }


    .ul-process__estimate {
        flex: 1;
    }

}


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

@media (max-width: 479px) {

    .ul-why-card--insured {
        grid-column:
            auto;

        display: block;

        min-height: 0;
    }


    .ul-why-card--insured
    .ul-why-card__top {
        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        margin-bottom: 15px;
    }


    .ul-why-card__insured-label {
        font-size: .69rem;
    }


    .ul-process {
        padding:
            66px 0
            69px;
    }


    .ul-process__word {
        top: 52px;
        right: -20%;

        font-size:
            clamp(6rem, 31vw, 8.6rem);
    }


    .ul-process__header {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 39px;
    }


    .ul-process__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .085em;
    }


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


    .ul-process__eyebrow-line {
        width: 39px;
    }


    .ul-process__title {
        font-size:
            clamp(2.4rem, 10.6vw, 3.08rem);

        line-height: .95;
    }


    .ul-process__intro {
        justify-self: start;
    }


    .ul-process__intro > p {
        margin-bottom: 18px;

        font-size: .94rem;

        line-height: 1.58;
    }


    .ul-process__intro-note {
        align-items: flex-start;

        font-size: .84rem;
    }


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

    .ul-process__steps {
        grid-template-columns: 1fr;

        gap: 9px;

        padding-left: 43px;
    }


    .ul-process__track {
        display: block;

        top: 29px;
        bottom: 29px;

        left: 16px;
        right: auto;

        width: 3px;
        height: auto;
    }


    .ul-process__track-base,
    .ul-process__track-progress {
        width: 3px;
        height: 100%;
    }


    .ul-process__track-progress {
        transform:
            scaleY(0);

        transform-origin:
            center top;
    }


    .ul-process-step {
        min-height: 0;

        padding:
            22px 18px;

        border-radius: 17px;
    }


    .ul-process-step__top {
        justify-content: flex-start;

        min-height: 56px;

        margin-bottom: 23px;
    }


    .ul-process-step__icon {
        width: 53px;
        height: 53px;

        border-radius: 15px;
    }


    .ul-process-step__icon svg {
        width: 24px;
        height: 24px;
    }


    .ul-process-step__node {
        display: block;

        top: 21px;
        bottom: auto;

        left: -50px;

        width: 11px;
        height: 11px;

        transform: none;
    }


    .ul-process-step.is-active
    .ul-process-step__node {
        transform:
            scale(1.10);
    }


    .ul-process-step__label {
        font-size: .69rem;
    }


    .ul-process-step h3 {
        margin-bottom: 11px;

        font-size:
            clamp(1.45rem, 6vw, 1.72rem);
    }


    .ul-process-step p {
        font-size: .90rem;

        line-height: 1.56;
    }


    .ul-process-step__accent {
        left: 18px;
        right: 18px;
    }


    .ul-process__bottom {
        align-items: stretch;

        flex-direction: column;

        gap: 17px;

        margin-top: 40px;

        padding: 17px;

        border-radius: 17px;
    }


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


    .ul-process__bottom-icon {
        width: 43px;
        height: 43px;

        border-radius: 12px;
    }


    .ul-process__bottom-copy span {
        font-size: .81rem;
    }


    .ul-process__bottom-copy strong {
        font-size: 1rem;
    }


    .ul-process__actions {
        flex-direction: column;

        align-items: stretch;

        width: 100%;
    }


    .ul-process__estimate,
    .ul-process__phone {
        width: 100%;

        min-height: 54px;
    }


    .ul-process__estimate {
        font-size: .78rem;
    }

}


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

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

    .ul-process__track-progress,
    .ul-process-step,
    .ul-process-step::before,
    .ul-process-step__icon,
    .ul-process-step__node,
    .ul-process-step__accent,
    .ul-process__estimate,
    .ul-process__estimate-icon,
    .ul-process__phone {
        animation: none !important;

        transition: none !important;
    }

}













































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   05. REVIEWS — MODERN EDITORIAL WIDGET

   Goals:
   • Modern premium composition
   • Elfsight isolated from visual shell
   • No fake rating/count/testimonials
   • No counters
   • Improved secondary-text legibility
   • Green dominant
   • Logo colors integrated as controlled accents
========================================================== */


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

.ul-reviews {
    position: relative;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            180deg,

            #FFFFFF 0%,

            #FAFCF8 38%,

            #F5F8F2 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* ==========================================================
   TOP SEPARATOR
========================================================== */

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

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            1400px,
            calc(100% - 96px)
        );

    height: 1px;

    transform:
        translateX(-50%);

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            transparent,

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

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

            rgba(189, 70, 63, .30) 59%,

            rgba(49, 90, 152, .29) 78%,

            transparent
        );
}


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

.ul-reviews__ambient {
    position: absolute;

    z-index: -4;

    pointer-events: none;

    border-radius: 50%;
}


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

.ul-reviews__ambient--green {
    top: -260px;
    left: -310px;

    width: 650px;
    height: 650px;

    background:

        radial-gradient(
            circle,

            rgba(143, 200, 95, .14),

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

            transparent 70%
        );
}


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

.ul-reviews__ambient--cyan {
    right: -300px;
    bottom: -310px;

    width: 680px;
    height: 680px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 70%
        );
}


/* ==========================================================
   ORGANIC TREE LINES
========================================================== */

.ul-reviews__organic-lines {
    position: absolute;

    z-index: -3;

    top: 0;
    right: 0;

    width: 52%;
    height: 100%;

    pointer-events: none;

    opacity: .45;

    -webkit-mask-image:

        linear-gradient(
            90deg,
            transparent,
            rgba(0, 0, 0, .48),
            #000
        );

    mask-image:

        linear-gradient(
            90deg,
            transparent,
            rgba(0, 0, 0, .48),
            #000
        );

    background:

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

            transparent 0,

            transparent 38px,

            rgba(73, 119, 78, .038) 39px,

            rgba(73, 119, 78, .038) 40px,

            transparent 41px,

            transparent 74px
        );
}


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

.ul-reviews__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(320px, .62fr);

    align-items: end;

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

    margin-bottom:
        clamp(
            46px,
            5vw,
            72px
        );
}


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

.ul-reviews__heading {
    min-width: 0;
}


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

.ul-reviews__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 19px;

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: .11em;

    text-transform: uppercase;
}


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

.ul-reviews__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, 70, 63, .10);
}


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

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

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-red),

            var(--ul-logo-orange),

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


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

.ul-reviews__title {
    max-width: 800px;

    margin: 0;

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

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

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

    font-weight: 500;

    line-height: .95;

    letter-spacing:
        -.046em;
}


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

.ul-reviews__title span {
    display: block;

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


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

.ul-reviews__header-copy {
    max-width: 510px;

    padding-bottom: 5px;
}


.ul-reviews__header-copy p {
    margin: 0;

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

    font-size:
        clamp(
            1.06rem,
            1.08vw,
            1.18rem
        );

    line-height: 1.72;
}


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

.ul-reviews__layout {
    display: grid;

    grid-template-columns:
        minmax(300px, .36fr)
        minmax(0, 1fr);

    align-items: stretch;

    gap:
        clamp(
            18px,
            2vw,
            28px
        );
}


/* ==========================================================
   STORY PANEL
========================================================== */

.ul-reviews__story {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 580px;

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

    overflow: hidden;

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

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

    color:
        var(--ul-white);

    background:

        linear-gradient(
            145deg,

            #28563A 0%,

            #356843 46%,

            #487D4D 100%
        );

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

    isolation: isolate;
}


/* ==========================================================
   STORY TEXTURE
========================================================== */

.ul-reviews__story-texture {
    position: absolute;

    z-index: -2;

    inset: 0;

    pointer-events: none;

    opacity: .42;

    background:

        repeating-linear-gradient(
            98deg,

            transparent 0,

            transparent 18px,

            rgba(255, 255, 255, .025) 19px,

            rgba(255, 255, 255, .025) 20px,

            transparent 21px,

            transparent 47px
        ),

        repeating-radial-gradient(
            ellipse at 10% 32%,

            transparent 0,

            transparent 34px,

            rgba(236, 219, 186, .045) 35px,

            rgba(236, 219, 186, .045) 36px,

            transparent 37px,

            transparent 67px
        );
}


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

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

    position: absolute;

    z-index: -1;

    right: -130px;
    bottom: -130px;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,

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

            rgba(241, 215, 55, .05) 44%,

            transparent 69%
        );
}


/* ==========================================================
   LARGE QUOTE
========================================================== */

.ul-reviews__quote-symbol {
    position: absolute;

    top: 5px;
    right: 23px;

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

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            8rem,
            12vw,
            13rem
        );

    font-weight: 700;

    line-height: 1;

    pointer-events: none;

    user-select: none;
}


/* ==========================================================
   STORY MARK
========================================================== */

.ul-reviews__story-mark {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom:
        clamp(
            45px,
            5vw,
            78px
        );

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

    font-size: .81rem;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* ==========================================================
   STORY DOT
========================================================== */

.ul-reviews__story-mark-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

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


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

.ul-reviews__story-copy {
    position: relative;

    z-index: 2;
}


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

.ul-reviews__story-copy h3 {
    max-width: 410px;

    margin:
        0 0 20px;

    color:
        var(--ul-white);

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

    font-size:
        clamp(
            2rem,
            2.5vw,
            2.85rem
        );

    font-weight: 500;

    line-height: 1.02;

    letter-spacing:
        -.04em;
}


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

.ul-reviews__story-copy p {
    max-width: 410px;

    margin: 0;

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

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

    line-height: 1.67;
}


/* ==========================================================
   COLOR STRIPS
========================================================== */

.ul-reviews__color-strips {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 5px;

    width: 100%;

    margin:
        clamp(
            31px,
            4vw,
            48px
        )
        0;

    padding-right: 10%;
}


/* ==========================================================
   INDIVIDUAL STRIP
========================================================== */

.ul-reviews__color-strips span {
    display: block;

    height: 4px;

    flex: 1 1 0;

    border-radius: 999px;
}


.ul-reviews__strip--green {
    background:
        var(--ul-green-400);
}


.ul-reviews__strip--yellow {
    background:
        var(--ul-logo-yellow);
}


.ul-reviews__strip--orange {
    background:
        var(--ul-logo-orange);
}


.ul-reviews__strip--red {
    background:
        var(--ul-logo-red);
}


.ul-reviews__strip--purple {
    background:
        var(--ul-logo-purple);
}


.ul-reviews__strip--blue {
    background:
        var(--ul-logo-blue);
}


.ul-reviews__strip--cyan {
    background:
        var(--ul-logo-cyan);
}


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

.ul-reviews__story-actions {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    margin-top: auto;
}


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

.ul-reviews__estimate {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    min-height: 57px;

    padding:
        6px 7px
        6px 18px;

    overflow: hidden;

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

    border-radius: 15px;

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

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

    box-shadow:

        0 16px 34px
        rgba(17, 42, 23, .15),

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

    font-size: .89rem;

    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: .025em;

    transition:

        color .35s ease,

        background-color .35s ease,

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

        box-shadow .4s ease;
}


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

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

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

    transform:
        translateY(-3px);

    box-shadow:

        0 20px 42px
        rgba(17, 42, 23, .19),

        0 10px 24px
        rgba(189, 70, 63, .18);
}


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

.ul-reviews__estimate-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

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

    transition:

        background-color .35s ease,

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


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


.ul-reviews__estimate:hover
.ul-reviews__estimate-icon {
    background:
        var(--ul-green-700);

    transform:
        translateX(2px);
}


/* ==========================================================
   CALL BUTTON
========================================================== */

.ul-reviews__call {
    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 57px;

    padding:
        6px 16px
        6px 7px;

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

    border-radius: 15px;

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

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

    backdrop-filter:
        blur(10px);

    transition:

        transform .4s
        var(--ul-ease-out),

        background-color .35s ease,

        border-color .35s ease;
}


.ul-reviews__call:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(112, 186, 202, .38);

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


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

.ul-reviews__call-icon {
    display: grid;

    place-items: center;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            135deg,

            var(--ul-logo-blue),

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


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


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

.ul-reviews__call-copy {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ul-reviews__call-copy small {
    color:
        rgba(255, 255, 255, .60);

    font-size: .75rem;

    font-weight: 600;

    line-height: 1;
}


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

    font-size: .94rem;

    font-weight: 600;

    line-height: 1;
}


/* ==========================================================
   REVIEWS STAGE
========================================================== */

.ul-reviews__stage {
    position: relative;

    min-width: 0;

    overflow: hidden;

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

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

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

    box-shadow:

        0 30px 76px
        rgba(49, 93, 61, .12),

        0 12px 30px
        rgba(49, 93, 61, .06);

    isolation: isolate;
}


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

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

    position: absolute;

    z-index: -1;

    top: -210px;
    right: -190px;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    pointer-events: none;

    background:

        radial-gradient(
            circle,

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

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

            transparent 70%
        );
}


/* ==========================================================
   STAGE TOP
========================================================== */

.ul-reviews__stage-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    min-height: 88px;

    padding:
        18px
        clamp(
            20px,
            2.5vw,
            32px
        );

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

    background:

        linear-gradient(
            180deg,

            rgba(250, 252, 248, .94),

            rgba(255, 255, 255, .80)
        );
}


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

.ul-reviews__stage-label {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


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

.ul-reviews__stage-icon {
    display: grid;

    place-items: center;

    width: 46px;
    height: 46px;

    flex: 0 0 auto;

    border-radius: 14px;

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

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

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


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


/* ==========================================================
   STAGE LABEL COPY
========================================================== */

.ul-reviews__stage-label > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-reviews__stage-label strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1.12rem;

    font-weight: 500;

    line-height: 1;
}


.ul-reviews__stage-label span {
    color:
        var(--ul-text-muted);

    font-size: .84rem;

    line-height: 1.35;
}


/* ==========================================================
   DECORATIVE MARKS
========================================================== */

.ul-reviews__stage-marks {
    display: flex;

    align-items: center;

    gap: 7px;
}


.ul-reviews__stage-marks span {
    width: 9px;
    height: 9px;

    border-radius: 50%;
}


.ul-reviews__stage-marks span:nth-child(1) {
    background:
        var(--ul-green-500);
}


.ul-reviews__stage-marks span:nth-child(2) {
    background:
        var(--ul-logo-yellow);
}


.ul-reviews__stage-marks span:nth-child(3) {
    background:
        var(--ul-logo-red);
}


/* ==========================================================
   WIDGET SHELL

   IMPORTANT:
   Do not apply transform/filter animations here.
   This protects third-party iframe rendering.
========================================================== */

.ul-reviews__widget-shell {
    position: relative;

    min-height: 470px;

    padding:
        clamp(
            18px,
            2vw,
            27px
        );

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


/* ==========================================================
   WIDGET
========================================================== */

.ul-reviews__widget {
    position: relative;

    width: 100%;

    min-height: 430px;
}


/* ==========================================================
   ELFSIGHT SAFETY

   We only style the outer placement.
   We do NOT target its internal iframe content.
========================================================== */

.ul-reviews__widget
iframe {
    max-width: 100%;

    border: 0;
}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.ul-reviews__placeholder {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    min-height: 430px;

    padding: 34px;

    border:
        1px dashed
        rgba(73, 113, 77, .20);

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

    background:

        linear-gradient(
            145deg,

            #FAFCF8,

            #F5F8F1
        );

    text-align: left;
}


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

.ul-reviews__placeholder-icon {
    display: grid;

    place-items: center;

    width: 68px;
    height: 68px;

    flex: 0 0 auto;

    border-radius: 20px;

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

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

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

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


.ul-reviews__placeholder-icon svg {
    width: 36px;
    height: 36px;
}


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

.ul-reviews__placeholder-copy {
    display: flex;

    flex-direction: column;

    gap: 7px;

    max-width: 390px;
}


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

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

    font-size:
        clamp(
            1.25rem,
            1.5vw,
            1.5rem
        );

    font-weight: 500;

    line-height: 1.1;
}


.ul-reviews__placeholder-copy span {
    color:
        var(--ul-text-soft);

    font-size: 1rem;

    line-height: 1.55;
}


/* ==========================================================
   REAL WIDGET PRESENT

   JS can add this state if actual Elfsight markup exists
   beside the placeholder.
========================================================== */

.ul-reviews__widget.has-live-widget
.ul-reviews__placeholder {
    display: none;
}


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

.ul-reviews__stage-bottom {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 58px;

    padding:
        13px
        clamp(
            20px,
            2.5vw,
            32px
        );

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

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

    background:
        var(--ul-bg-soft);

    font-size: .79rem;

    font-weight: 500;

    line-height: 1.35;
}


/* ==========================================================
   STAGE BOTTOM LINE
========================================================== */

.ul-reviews__stage-line {
    display: block;

    height: 1px;

    flex: 1;

    background:

        linear-gradient(
            90deg,

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

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

            rgba(189, 70, 63, .18)
        );
}


/* ==========================================================
   SPECTRUM EDGE
========================================================== */

.ul-reviews__stage-spectrum {
    position: absolute;

    z-index: 3;

    left: 28px;
    right: 28px;

    bottom: 0;

    height: 3px;

    border-radius:
        999px 999px 0 0;

    pointer-events: none;

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


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

@media (min-width: 1200px) {

    .ul-reviews__layout {
        grid-template-columns:
            minmax(325px, .36fr)
            minmax(0, 1fr);
    }


    .ul-reviews__story {
        min-height: 590px;
    }


    .ul-reviews__widget-shell {
        min-height: 500px;
    }

}


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

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

    .ul-reviews__header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 48px;
    }


    .ul-reviews__header-copy {
        max-width: 700px;
    }


    .ul-reviews__layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .ul-reviews__story {
        min-height: auto;

        padding: 31px;
    }


    .ul-reviews__story-mark {
        margin-bottom: 38px;
    }


    .ul-reviews__story-copy {
        max-width: 650px;
    }


    .ul-reviews__story-copy h3 {
        max-width: 620px;
    }


    .ul-reviews__story-copy p {
        max-width: 620px;
    }


    .ul-reviews__color-strips {
        max-width: 590px;

        margin:
            30px 0;
    }


    .ul-reviews__story-actions {
        display: grid;

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

        max-width: 610px;

        margin-top: 4px;
    }


    .ul-reviews__widget-shell {
        min-height: 450px;
    }


    .ul-reviews__widget,
    .ul-reviews__placeholder {
        min-height: 410px;
    }

}


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

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

    .ul-reviews__header {
        grid-template-columns: 1fr;

        gap: 21px;

        margin-bottom: 40px;
    }


    .ul-reviews__eyebrow {
        font-size: .75rem;
    }


    .ul-reviews__title {
        font-size:
            clamp(
                2.7rem,
                8.8vw,
                3.75rem
            );
    }


    .ul-reviews__header-copy p {
        font-size: 1rem;

        line-height: 1.65;
    }


    .ul-reviews__layout {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .ul-reviews__story {
        min-height: auto;

        padding: 27px;

        border-radius: 22px;
    }


    .ul-reviews__story-mark {
        margin-bottom: 31px;

        font-size: .76rem;
    }


    .ul-reviews__story-copy h3 {
        font-size:
            clamp(
                1.9rem,
                6.2vw,
                2.4rem
            );
    }


    .ul-reviews__story-copy p {
        font-size: .97rem;
    }


    .ul-reviews__color-strips {
        margin:
            26px 0;
    }


    .ul-reviews__story-actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        margin-top: 0;
    }


    .ul-reviews__estimate {
        font-size: .78rem;
    }


    .ul-reviews__stage {
        border-radius: 22px;
    }


    .ul-reviews__stage-top {
        min-height: 82px;

        padding:
            16px 18px;
    }


    .ul-reviews__stage-label span {
        font-size: .80rem;
    }


    .ul-reviews__widget-shell {
        min-height: 410px;

        padding: 16px;
    }


    .ul-reviews__widget,
    .ul-reviews__placeholder {
        min-height: 380px;
    }


    .ul-reviews__placeholder {
        padding: 27px;
    }


    .ul-reviews__stage-bottom {
        padding:
            13px 18px;

        font-size: .75rem;
    }

}


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

@media (max-width: 479px) {

    .ul-reviews__header {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 34px;
    }


    .ul-reviews__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .09em;
    }


    .ul-reviews__eyebrow-line {
        width: 40px;
    }


    .ul-reviews__title {
        font-size:
            clamp(
                2.35rem,
                10.6vw,
                3rem
            );

        line-height: .96;
    }


    .ul-reviews__header-copy p {
        font-size: .95rem;

        line-height: 1.61;
    }


    .ul-reviews__layout {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .ul-reviews__story {
        min-height: auto;

        padding: 22px 19px;

        border-radius: 19px;
    }


    .ul-reviews__quote-symbol {
        right: 11px;

        font-size: 7.6rem;
    }


    .ul-reviews__story-mark {
        margin-bottom: 28px;

        font-size: .70rem;
    }


    .ul-reviews__story-copy h3 {
        margin-bottom: 14px;

        font-size:
            clamp(
                1.72rem,
                7.9vw,
                2.18rem
            );
    }


    .ul-reviews__story-copy p {
        font-size: .93rem;

        line-height: 1.59;
    }


    .ul-reviews__color-strips {
        gap: 4px;

        margin:
            23px 0;

        padding-right: 0;
    }


    .ul-reviews__story-actions {
        gap: 8px;

        margin-top: 0;
    }


    .ul-reviews__estimate,
    .ul-reviews__call {
        min-height: 54px;
    }


    .ul-reviews__estimate {
        font-size: .77rem;
    }


    .ul-reviews__call-copy small {
        font-size: .70rem;
    }


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


    .ul-reviews__stage {
        border-radius: 19px;
    }


    .ul-reviews__stage-top {
        align-items: flex-start;

        min-height: auto;

        padding: 16px;
    }


    .ul-reviews__stage-icon {
        width: 43px;
        height: 43px;

        border-radius: 12px;
    }


    .ul-reviews__stage-label {
        gap: 10px;
    }


    .ul-reviews__stage-label strong {
        font-size: 1rem;
    }


    .ul-reviews__stage-label span {
        font-size: .75rem;
    }


    .ul-reviews__stage-marks {
        gap: 5px;

        padding-top: 5px;
    }


    .ul-reviews__stage-marks span {
        width: 7px;
        height: 7px;
    }


    .ul-reviews__widget-shell {
        min-height: 360px;

        padding: 12px;
    }


    .ul-reviews__widget,
    .ul-reviews__placeholder {
        min-height: 335px;
    }


    .ul-reviews__placeholder {
        flex-direction: column;

        gap: 15px;

        padding: 25px 18px;

        text-align: center;
    }


    .ul-reviews__placeholder-icon {
        width: 59px;
        height: 59px;

        border-radius: 17px;
    }


    .ul-reviews__placeholder-icon svg {
        width: 31px;
        height: 31px;
    }


    .ul-reviews__placeholder-copy strong {
        font-size: 1.2rem;
    }


    .ul-reviews__placeholder-copy span {
        font-size: .92rem;

        line-height: 1.52;
    }


    .ul-reviews__stage-bottom {
        flex-wrap: wrap;

        gap: 7px 10px;

        min-height: auto;

        padding:
            13px 15px;

        font-size: .72rem;
    }


    .ul-reviews__stage-line {
        min-width: 45px;
    }


    .ul-reviews__stage-spectrum {
        left: 16px;
        right: 16px;
    }

}


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

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

    .ul-reviews__story,
    .ul-reviews__estimate,
    .ul-reviews__estimate-icon,
    .ul-reviews__call {
        animation: none !important;

        transition: none !important;
    }

}

















































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   06. SERVICE AREAS — DARK MAP SECTION

   Direction:
   • Dark premium contrast section
   • Deep green instead of near-black
   • Light green dominant
   • Blue / cyan map details
   • Yellow / red / orange micro accents
   • Readable secondary typography
   • No counters
========================================================== */


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

.ul-service-areas {
    position: relative;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            145deg,

            #153A27 0%,

            #1B472F 38%,

            #23563A 72%,

            #19442E 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* ==========================================================
   TOP SPECTRUM SEPARATOR
========================================================== */

.ul-service-areas::before {
    content: "";

    position: absolute;

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

    height: 4px;

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


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

.ul-service-areas::after {
    content: "";

    position: absolute;

    z-index: -4;

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

    height: 36%;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,

            transparent,

            rgba(8, 30, 18, .28)
        );
}


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

.ul-service-areas__ambient {
    position: absolute;

    z-index: -4;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(8px);
}


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

.ul-service-areas__ambient--green {
    top: -330px;
    left: -260px;

    width: 700px;
    height: 700px;

    background:

        radial-gradient(
            circle,

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

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

            transparent 70%
        );
}


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

.ul-service-areas__ambient--blue {
    right: -330px;
    bottom: -300px;

    width: 720px;
    height: 720px;

    background:

        radial-gradient(
            circle,

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

            rgba(49, 90, 152, .05) 44%,

            transparent 70%
        );
}


/* ==========================================================
   ORGANIC TEXTURE
========================================================== */

.ul-service-areas__texture {
    position: absolute;

    z-index: -3;

    inset: 0;

    pointer-events: none;

    opacity: .44;

    background:

        repeating-radial-gradient(
            ellipse at 2% 35%,

            transparent 0,

            transparent 42px,

            rgba(255, 255, 255, .018) 43px,

            rgba(255, 255, 255, .018) 44px,

            transparent 45px,

            transparent 81px
        ),

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

            transparent 0,

            transparent 49px,

            rgba(167, 213, 118, .022) 50px,

            rgba(167, 213, 118, .022) 51px,

            transparent 52px,

            transparent 93px
        );
}


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

.ul-service-areas__header {
    display: grid;

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

    align-items: end;

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

    margin-bottom:
        clamp(
            48px,
            5vw,
            72px
        );
}


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

.ul-service-areas__heading {
    min-width: 0;
}


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

.ul-service-areas__eyebrow {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 19px;

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

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

    font-weight: 600;

    line-height: 1;

    letter-spacing: .11em;

    text-transform: uppercase;
}


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

.ul-service-areas__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, 70, 63, .14);
}


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

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

    border-radius: 999px;

    background:

        linear-gradient(
            90deg,

            var(--ul-logo-yellow),

            var(--ul-logo-orange),

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


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

.ul-service-areas__title {
    max-width: 800px;

    margin: 0;

    color:
        var(--ul-white);

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

    font-size:
        clamp(
            3.15rem,
            4.6vw,
            5.25rem
        );

    font-weight: 500;

    line-height: .95;

    letter-spacing:
        -.046em;
}


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

.ul-service-areas__title span {
    display: block;

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


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

.ul-service-areas__header-copy {
    max-width: 510px;

    padding-bottom: 4px;
}


.ul-service-areas__header-copy p {
    margin:
        0 0 23px;

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

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

    line-height: 1.72;
}


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

.ul-service-areas__header-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

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

    font-size: .93rem;

    font-weight: 600;

    line-height: 1;

    transition:

        color .3s ease,

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


.ul-service-areas__header-link svg {
    width: 18px;
    height: 18px;

    transition:
        transform .35s
        var(--ul-ease-out);
}


.ul-service-areas__header-link:hover {
    color:
        var(--ul-green-400);

    transform:
        translateY(-1px);
}


.ul-service-areas__header-link:hover svg {
    transform:
        translateX(4px);
}


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

.ul-service-areas__layout {
    display: grid;

    grid-template-columns:
        minmax(310px, .38fr)
        minmax(0, 1fr);

    align-items: stretch;

    gap:
        clamp(
            18px,
            2vw,
            28px
        );
}


/* ==========================================================
   AREAS PANEL
========================================================== */

.ul-service-areas__panel {
    position: relative;

    min-width: 0;

    padding:
        clamp(
            22px,
            2.3vw,
            31px
        );

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

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

    background:

        linear-gradient(
            145deg,

            rgba(11, 39, 23, .58),

            rgba(21, 59, 35, .48)
        );

    -webkit-backdrop-filter:
        blur(15px)
        saturate(115%);

    backdrop-filter:
        blur(15px)
        saturate(115%);

    box-shadow:

        0 26px 65px
        rgba(4, 22, 12, .24),

        inset 0 1px 0
        rgba(255, 255, 255, .055);
}


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

.ul-service-areas__panel-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding:
        1px 2px
        22px;

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


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

.ul-service-areas__panel-top > div {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.ul-service-areas__panel-label {
    color:
        var(--ul-logo-cyan);

    font-size: .75rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.ul-service-areas__panel-top strong {
    color:
        var(--ul-white);

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

    font-size: 1.25rem;

    font-weight: 500;

    line-height: 1.15;
}


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

.ul-service-areas__panel-mark {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex: 0 0 auto;

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

    border-radius: 15px;

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

    background:
        rgba(126, 187, 80, .10);
}


.ul-service-areas__panel-mark svg {
    width: 22px;
    height: 22px;
}


/* ==========================================================
   AREA LIST
========================================================== */

.ul-service-areas__list {
    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-top: 16px;
}


/* ==========================================================
   AREA BUTTON
========================================================== */

.ul-service-area {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 11px;

    width: 100%;

    min-height: 65px;

    padding:
        9px 10px;

    border:
        1px solid
        transparent;

    border-radius: 15px;

    color:
        var(--ul-white);

    text-align: left;

    background:
        transparent;

    transition:

        background-color .32s ease,

        border-color .32s ease,

        transform .4s
        var(--ul-ease-out),

        box-shadow .35s ease;
}


/* ==========================================================
   AREA HOVER
========================================================== */

.ul-service-area:hover,
.ul-service-area:focus-visible {
    border-color:
        rgba(255, 255, 255, .10);

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

    transform:
        translateX(3px);
}


/* ==========================================================
   ACTIVE AREA
========================================================== */

.ul-service-area.is-active {
    border-color:
        rgba(167, 213, 118, .20);

    background:

        linear-gradient(
            90deg,

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

            rgba(112, 186, 202, .055)
        );

    box-shadow:
        inset 3px 0 0
        var(--ul-green-400);
}


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

.ul-service-area__icon {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

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

    border-radius: 11px;

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


/* ==========================================================
   INNER MARKER DOT
========================================================== */

.ul-service-area__icon span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

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

    box-shadow:

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


/* ==========================================================
   ACTIVE DOT
========================================================== */

.ul-service-area.is-active
.ul-service-area__icon span {
    background:
        var(--ul-logo-yellow);

    box-shadow:

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


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

.ul-service-area__copy {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.ul-service-area__copy strong {
    color:
        rgba(255, 255, 255, .95);

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

    font-size: 1.06rem;

    font-weight: 500;

    line-height: 1;
}


.ul-service-area__copy small {
    color:
        rgba(255, 255, 255, .57);

    font-size: .78rem;

    font-weight: 500;

    line-height: 1.25;
}


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

.ul-service-area__arrow {
    display: grid;

    place-items: center;

    width: 31px;
    height: 31px;

    border-radius: 10px;

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

    transition:

        color .3s ease,

        background-color .3s ease,

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


.ul-service-area__arrow svg {
    width: 16px;
    height: 16px;
}


.ul-service-area:hover
.ul-service-area__arrow,
.ul-service-area.is-active
.ul-service-area__arrow {
    color:
        var(--ul-forest-950);

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

    transform:
        translateX(2px);
}


/* ==========================================================
   SURROUNDING AREAS
========================================================== */

.ul-service-areas__surrounding {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-top: 18px;

    padding:
        18px;

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

    border-radius: 16px;

    background:

        linear-gradient(
            135deg,

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

            rgba(112, 186, 202, .065)
        );
}


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

.ul-service-areas__surrounding-icon {
    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    border-radius: 12px;

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

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


.ul-service-areas__surrounding-icon svg {
    width: 20px;
    height: 20px;
}


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

.ul-service-areas__surrounding > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.ul-service-areas__surrounding strong {
    color:
        var(--ul-white);

    font-size: .95rem;

    font-weight: 600;

    line-height: 1.2;
}


.ul-service-areas__surrounding span {
    color:
        rgba(255, 255, 255, .64);

    font-size: .86rem;

    line-height: 1.5;
}


/* ==========================================================
   MAP COLUMN
========================================================== */

.ul-service-map {
    position: relative;

    min-width: 0;

    overflow: hidden;

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

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

    background:
        #F8FAF6;

    box-shadow:

        0 30px 78px
        rgba(4, 21, 12, .27),

        0 12px 32px
        rgba(4, 21, 12, .14);

    isolation: isolate;
}


/* ==========================================================
   MAP TOP
========================================================== */

.ul-service-map__top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    min-height: 88px;

    padding:
        17px
        clamp(
            20px,
            2.3vw,
            31px
        );

    border-bottom:
        1px solid
        rgba(52, 93, 59, .12);

    background:

        linear-gradient(
            180deg,

            #FFFFFF,

            #F7FAF5
        );
}


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

.ul-service-map__heading {
    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;
}


/* ==========================================================
   MAP HEADING ICON
========================================================== */

.ul-service-map__heading-icon {
    display: grid;

    place-items: center;

    width: 47px;
    height: 47px;

    flex: 0 0 auto;

    border-radius: 14px;

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

    background:

        linear-gradient(
            135deg,

            var(--ul-surface-blue),

            var(--ul-surface-cyan)
        );

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


.ul-service-map__heading-icon svg {
    width: 23px;
    height: 23px;
}


/* ==========================================================
   MAP HEADING COPY
========================================================== */

.ul-service-map__heading > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-service-map__heading strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1.15rem;

    font-weight: 500;

    line-height: 1;
}


.ul-service-map__heading span {
    color:
        var(--ul-text-muted);

    font-size: .84rem;

    line-height: 1.4;
}


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

.ul-service-map__reset {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding:
        0 13px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(73, 113, 77, .15);

    border-radius: 12px;

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

    background:
        var(--ul-white);

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

    font-size: .82rem;

    font-weight: 600;

    line-height: 1;

    transition:

        transform .35s
        var(--ul-ease-out),

        border-color .3s ease,

        background-color .3s ease;
}


.ul-service-map__reset svg {
    width: 17px;
    height: 17px;
}


.ul-service-map__reset:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(126, 187, 80, .28);

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


/* ==========================================================
   MAP VIEWPORT
========================================================== */

.ul-service-map__viewport {
    position: relative;

    min-height:
        clamp(
            520px,
            42vw,
            690px
        );

    overflow: hidden;

    background:
        #E9EFE8;
}


/* ==========================================================
   LEAFLET MAP
========================================================== */

.ul-service-map__canvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    min-height:
        inherit;

    z-index: 1;

    background:
        #E7EDE5;
}


/* ==========================================================
   MAP VISUAL FILTER

   Slightly muted to fit design.
========================================================== */

.ul-service-map__canvas
.leaflet-tile-pane {
    filter:

        saturate(.74)

        contrast(.97)

        brightness(1.03);
}


/* ==========================================================
   LEAFLET CONTROLS
========================================================== */

.ul-service-map__canvas
.leaflet-control-zoom {
    overflow: hidden;

    border:
        1px solid
        rgba(37, 83, 46, .12) !important;

    border-radius: 13px;

    box-shadow:
        0 10px 26px
        rgba(38, 72, 44, .12);
}


.ul-service-map__canvas
.leaflet-control-zoom a {
    display: grid;

    place-items: center;

    width: 39px;
    height: 39px;

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

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

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

    font-size: 1.15rem;

    line-height: 1;

    border-color:
        rgba(37, 83, 46, .08) !important;
}


.ul-service-map__canvas
.leaflet-control-zoom a:hover {
    color:
        var(--ul-white);

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


/* ==========================================================
   ATTRIBUTION
========================================================== */

.ul-service-map__canvas
.leaflet-control-attribution {
    color:
        var(--ul-text-muted);

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

    font-size: 10px;
}


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

.ul-map-marker {
    position: relative;

    width: 34px;
    height: 42px;
}


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

.ul-map-marker__pin {
    position: absolute;

    top: 0;
    left: 50%;

    width: 30px;
    height: 30px;

    display: grid;

    place-items: center;

    transform:
        translateX(-50%)
        rotate(45deg);

    border:
        3px solid
        rgba(255, 255, 255, .96);

    border-radius:
        50% 50% 50% 8px;

    background:

        linear-gradient(
            135deg,

            var(--ul-green-600),

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

    box-shadow:
        0 10px 20px
        rgba(29, 81, 41, .27);
}


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

.ul-map-marker__pin::after {
    content: "";

    width: 8px;
    height: 8px;

    border-radius: 50%;

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

    transform:
        rotate(-45deg);
}


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

.ul-map-marker.is-active
.ul-map-marker__pin {
    background:

        linear-gradient(
            135deg,

            var(--ul-logo-blue),

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

    box-shadow:

        0 12px 28px
        rgba(49, 90, 152, .30),

        0 0 0 6px
        rgba(112, 186, 202, .14);
}


/* ==========================================================
   POPUP
========================================================== */

.ul-service-map__canvas
.leaflet-popup-content-wrapper {
    overflow: hidden;

    border-radius: 15px;

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

    box-shadow:
        0 18px 42px
        rgba(31, 70, 40, .17);
}


.ul-service-map__canvas
.leaflet-popup-content {
    margin:
        15px 17px;

    min-width: 145px;
}


.ul-map-popup {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.ul-map-popup strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1rem;

    font-weight: 500;
}


.ul-map-popup span {
    color:
        var(--ul-text-muted);

    font-size: .78rem;

    line-height: 1.35;
}


/* ==========================================================
   MAP COVERAGE LABEL
========================================================== */

.ul-service-map__coverage {
    position: absolute;

    z-index: 500;

    left: 18px;
    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 11px;

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

    padding:
        11px 14px;

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

    border-radius: 14px;

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

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

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 12px 30px
        rgba(40, 75, 46, .13);
}


/* ==========================================================
   COVERAGE DOT
========================================================== */

.ul-service-map__coverage-dot {
    width: 10px;
    height: 10px;

    flex: 0 0 auto;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 5px
        rgba(189, 70, 63, .10);
}


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

.ul-service-map__coverage > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ul-service-map__coverage small {
    color:
        var(--ul-text-muted);

    font-size: .68rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.ul-service-map__coverage strong {
    color:
        var(--ul-forest-950);

    font-size: .88rem;

    font-weight: 600;

    line-height: 1.2;
}


/* ==========================================================
   MAP ERROR FALLBACK
========================================================== */

.ul-service-map__fallback {
    position: absolute;

    z-index: 600;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 8px;

    padding: 30px;

    color:
        var(--ul-text);

    background:

        linear-gradient(
            145deg,

            #F3F7EF,

            #EAF2E7
        );

    text-align: center;
}


.ul-service-map__fallback strong {
    color:
        var(--ul-forest-950);

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

    font-size: 1.4rem;

    font-weight: 500;
}


.ul-service-map__fallback span {
    max-width: 390px;

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

    font-size: .97rem;

    line-height: 1.55;
}


.ul-service-areas.has-map-error
.ul-service-map__fallback {
    display: flex;
}


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

.ul-service-map__bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    min-height: 77px;

    padding:
        15px
        clamp(
            20px,
            2.3vw,
            31px
        );

    border-top:
        1px solid
        rgba(52, 93, 59, .11);

    background:
        #F9FBF8;
}


/* ==========================================================
   MAP NOTE
========================================================== */

.ul-service-map__bottom p {
    max-width: 590px;

    margin: 0;

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

    font-size: .82rem;

    line-height: 1.5;
}


/* ==========================================================
   MAP CTA
========================================================== */

.ul-service-map__cta {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    flex: 0 0 auto;

    min-height: 44px;

    padding:
        0 14px;

    border-radius: 12px;

    color:
        var(--ul-white);

    background:

        linear-gradient(
            115deg,

            var(--ul-green-700),

            var(--ul-green-500)
        );

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

    font-size: .82rem;

    font-weight: 600;

    line-height: 1;

    transition:

        transform .35s
        var(--ul-ease-out),

        box-shadow .35s ease;
}


.ul-service-map__cta svg {
    width: 17px;
    height: 17px;

    transition:
        transform .35s
        var(--ul-ease-out);
}


.ul-service-map__cta:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 17px 34px
        rgba(126, 187, 80, .23);
}


.ul-service-map__cta:hover svg {
    transform:
        translateX(3px);
}


/* ==========================================================
   MAP SPECTRUM
========================================================== */

.ul-service-map__spectrum {
    position: absolute;

    z-index: 700;

    left: 28px;
    right: 28px;
    bottom: 0;

    height: 3px;

    border-radius:
        999px 999px 0 0;

    pointer-events: none;

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


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

@media (min-width: 1200px) {

    .ul-service-areas__layout {
        grid-template-columns:
            minmax(320px, .38fr)
            minmax(0, 1fr);
    }


    .ul-service-map__viewport {
        min-height:
            clamp(
                540px,
                42vw,
                690px
            );
    }

}


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

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

    .ul-service-areas__header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 48px;
    }


    .ul-service-areas__header-copy {
        max-width: 720px;
    }


    .ul-service-areas__layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .ul-service-areas__panel {
        padding: 25px;
    }


    .ul-service-areas__list {
        display: grid;

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

        gap: 8px;
    }


    .ul-service-area {
        min-height: 66px;
    }


    .ul-service-areas__surrounding {
        max-width: 620px;
    }


    .ul-service-map__viewport {
        min-height: 540px;
    }

}


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

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

    .ul-service-areas__header {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-bottom: 40px;
    }


    .ul-service-areas__eyebrow {
        font-size: .75rem;
    }


    .ul-service-areas__title {
        font-size:
            clamp(
                2.7rem,
                8.8vw,
                3.75rem
            );
    }


    .ul-service-areas__header-copy p {
        font-size: 1rem;

        line-height: 1.65;
    }


    .ul-service-areas__layout {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .ul-service-areas__panel {
        padding: 21px;

        border-radius: 22px;
    }


    .ul-service-areas__list {
        display: grid;

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

        gap: 7px;
    }


    .ul-service-area {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        min-height: 65px;

        padding:
            9px;
    }


    .ul-service-area__arrow {
        display: none;
    }


    .ul-service-area__copy strong {
        font-size: 1rem;
    }


    .ul-service-area__copy small {
        font-size: .74rem;
    }


    .ul-service-map {
        border-radius: 22px;
    }


    .ul-service-map__top {
        min-height: 82px;

        padding:
            16px 18px;
    }


    .ul-service-map__heading span {
        font-size: .79rem;
    }


    .ul-service-map__reset span {
        display: none;
    }


    .ul-service-map__reset {
        width: 43px;

        padding: 0;
    }


    .ul-service-map__viewport {
        min-height: 490px;
    }


    .ul-service-map__bottom {
        padding:
            15px 18px;
    }


    .ul-service-map__bottom p {
        font-size: .78rem;
    }

}


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

@media (max-width: 479px) {

    .ul-service-areas__header {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 34px;
    }


    .ul-service-areas__eyebrow {
        gap: 9px;

        margin-bottom: 15px;

        font-size: .70rem;

        letter-spacing: .09em;
    }


    .ul-service-areas__eyebrow-line {
        width: 40px;
    }


    .ul-service-areas__title {
        font-size:
            clamp(
                2.35rem,
                10.6vw,
                3rem
            );

        line-height: .96;
    }


    .ul-service-areas__header-copy p {
        margin-bottom: 19px;

        font-size: .95rem;

        line-height: 1.61;
    }


    .ul-service-areas__header-link {
        font-size: .86rem;
    }


    .ul-service-areas__layout {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .ul-service-areas__panel {
        padding: 18px 15px;

        border-radius: 19px;
    }


    .ul-service-areas__panel-top {
        padding:
            0 2px
            17px;
    }


    .ul-service-areas__panel-label {
        font-size: .70rem;
    }


    .ul-service-areas__panel-top strong {
        font-size: 1.1rem;
    }


    .ul-service-areas__panel-mark {
        width: 43px;
        height: 43px;

        border-radius: 13px;
    }


    .ul-service-areas__list {
        display: flex;

        flex-direction: column;

        gap: 5px;
    }


    .ul-service-area {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            30px;

        min-height: 60px;

        gap: 10px;

        padding:
            8px 9px;

        border-radius: 13px;
    }


    .ul-service-area__copy strong {
        font-size: 1rem;
    }


    .ul-service-area__copy small {
        font-size: .73rem;
    }


    .ul-service-areas__surrounding {
        padding: 15px;

        border-radius: 14px;
    }


    .ul-service-areas__surrounding strong {
        font-size: .92rem;
    }


    .ul-service-areas__surrounding span {
        font-size: .82rem;
    }


    .ul-service-map {
        border-radius: 19px;
    }


    .ul-service-map__top {
        align-items: flex-start;

        min-height: auto;

        padding: 15px;
    }


    .ul-service-map__heading {
        gap: 10px;
    }


    .ul-service-map__heading-icon {
        width: 43px;
        height: 43px;

        border-radius: 12px;
    }


    .ul-service-map__heading strong {
        font-size: 1.03rem;
    }


    .ul-service-map__heading span {
        font-size: .75rem;
    }


    .ul-service-map__reset {
        width: 41px;
        height: 41px;

        min-height: 41px;

        padding: 0;
    }


    .ul-service-map__reset span {
        display: none;
    }


    .ul-service-map__viewport {
        min-height: 430px;
    }


    .ul-service-map__coverage {
        left: 12px;
        bottom: 12px;

        padding:
            9px 11px;
    }


    .ul-service-map__coverage small {
        font-size: .62rem;
    }


    .ul-service-map__coverage strong {
        font-size: .81rem;
    }


    .ul-service-map__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 11px;

        min-height: auto;

        padding: 14px 15px;
    }


    .ul-service-map__bottom p {
        font-size: .77rem;
    }


    .ul-service-map__cta {
        min-height: 42px;

        font-size: .79rem;
    }


    .ul-service-map__spectrum {
        left: 16px;
        right: 16px;
    }

}


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

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

    .ul-service-area,
    .ul-service-area__arrow,
    .ul-service-map__reset,
    .ul-service-map__cta,
    .ul-service-map__cta svg,
    .ul-service-areas__header-link,
    .ul-service-areas__header-link svg {
        animation: none !important;

        transition: none !important;
    }

}








































/* ==========================================================
   UNLIMITED LANDSCAPING LLC
   07. FOOTER — MODERN COLOR SYSTEM
========================================================== */


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

.ul-footer {
    position: relative;

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

    overflow: hidden;

    color:
        var(--ul-text);

    background:
        linear-gradient(
            180deg,
            #F9FBF7 0%,
            #F3F7EF 48%,
            #EEF4E9 100%
        );

    isolation: isolate;
}


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

    position: absolute;

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

    height: 4px;

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


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

.ul-footer__ambient {
    position: absolute;

    z-index: -4;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(5px);
}


.ul-footer__ambient--green {
    left: -320px;
    top: 18%;

    width: 720px;
    height: 720px;

    background:
        radial-gradient(
            circle,
            rgba(167, 213, 118, .16),
            rgba(126, 187, 80, .045) 47%,
            transparent 71%
        );
}


.ul-footer__ambient--blue {
    right: -340px;
    bottom: -320px;

    width: 720px;
    height: 720px;

    background:
        radial-gradient(
            circle,
            rgba(112, 186, 202, .13),
            rgba(49, 90, 152, .03) 47%,
            transparent 71%
        );
}


/* ==========================================================
   TREE TEXTURE
========================================================== */

.ul-footer__tree-texture {
    position: absolute;

    z-index: -3;

    inset: 0;

    pointer-events: none;

    opacity: .52;

    background:
        repeating-radial-gradient(
            ellipse at 3% 44%,
            transparent 0,
            transparent 43px,
            rgba(79, 122, 82, .030) 44px,
            rgba(79, 122, 82, .030) 45px,
            transparent 46px,
            transparent 83px
        ),
        repeating-radial-gradient(
            ellipse at 97% 70%,
            transparent 0,
            transparent 52px,
            rgba(137, 103, 76, .022) 53px,
            rgba(137, 103, 76, .022) 54px,
            transparent 55px,
            transparent 96px
        );
}


/* ==========================================================
   CLOSING CTA
========================================================== */

.ul-footer-cta {
    position: relative;

    display: grid;

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

    align-items: center;

    gap:
        clamp(40px, 5vw, 80px);

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

    padding:
        clamp(35px, 4.5vw, 62px);

    overflow: hidden;

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

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

    color:
        var(--ul-white);

    background:
        linear-gradient(
            135deg,
            #23533A 0%,
            #347145 48%,
            #539050 100%
        );

    box-shadow:
        0 28px 70px rgba(45, 92, 57, .19),
        inset 0 1px 0 rgba(255, 255, 255, .12);

    isolation: isolate;
}


.ul-footer-cta__texture {
    position: absolute;

    z-index: -2;

    inset: 0;

    pointer-events: none;

    opacity: .48;

    background:
        repeating-linear-gradient(
            99deg,
            transparent 0,
            transparent 17px,
            rgba(255, 255, 255, .023) 18px,
            rgba(255, 255, 255, .023) 19px,
            transparent 20px,
            transparent 47px
        ),
        repeating-radial-gradient(
            ellipse at 12% 42%,
            transparent 0,
            transparent 38px,
            rgba(240, 220, 187, .035) 39px,
            rgba(240, 220, 187, .035) 40px,
            transparent 41px,
            transparent 73px
        );
}


.ul-footer-cta::after {
    content: "";

    position: absolute;

    z-index: -1;

    right: -170px;
    top: -190px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(241, 215, 55, .17),
            rgba(233, 145, 41, .055) 43%,
            transparent 70%
        );
}


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

.ul-footer-cta__content {
    max-width: 760px;
}


.ul-footer-cta__eyebrow {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

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

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

    font-weight: 600;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.ul-footer-cta__eyebrow-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 5px
        rgba(189, 70, 63, .13);
}


.ul-footer-cta__title {
    max-width: 700px;

    margin:
        0 0 20px;

    color:
        var(--ul-white);

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

    font-size:
        clamp(2.9rem, 4vw, 4.7rem);

    font-weight: 500;

    line-height: .95;

    letter-spacing: -.045em;
}


.ul-footer-cta__title span {
    display: block;

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


.ul-footer-cta__content p {
    max-width: 610px;

    margin: 0;

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

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

    line-height: 1.68;
}


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

.ul-footer-cta__actions {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    min-width: 220px;
}


.ul-footer-cta__estimate {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    min-height: 58px;

    padding:
        6px 7px
        6px 19px;

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

    border-radius: 15px;

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

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

    box-shadow:
        0 16px 36px rgba(15, 45, 23, .16),
        inset 0 1px 0 rgba(255, 255, 255, .30);

    font-size: .91rem;

    font-weight: 600;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: .025em;

    transition:
        transform .4s var(--ul-ease-expo),
        color .3s ease,
        background-color .3s ease,
        box-shadow .35s ease;
}


.ul-footer-cta__estimate:hover {
    color:
        var(--ul-white);

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

    transform:
        translateY(-3px);
}


.ul-footer-cta__estimate-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

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

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


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


.ul-footer-cta__estimate:hover
.ul-footer-cta__estimate-icon {
    transform:
        translateX(3px);
}


.ul-footer-cta__phone {
    display: flex;

    align-items: center;

    gap: 11px;

    min-height: 58px;

    padding:
        6px 16px
        6px 7px;

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

    border-radius: 15px;

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

    backdrop-filter:
        blur(10px);

    transition:
        transform .4s var(--ul-ease-out),
        background-color .3s ease,
        border-color .3s ease;
}


.ul-footer-cta__phone:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(112, 186, 202, .38);

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


.ul-footer-cta__phone-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

    border-radius: 11px;

    color:
        var(--ul-white);

    background:
        linear-gradient(
            135deg,
            var(--ul-logo-blue),
            var(--ul-logo-cyan)
        );
}


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


.ul-footer-cta__phone-copy {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ul-footer-cta__phone-copy small {
    color:
        rgba(255, 255, 255, .60);

    font-size: .75rem;

    font-weight: 600;
}


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

    font-size: .95rem;

    font-weight: 600;
}


.ul-footer-cta__spectrum {
    position: absolute;

    left: 32px;
    right: 32px;
    bottom: 0;

    height: 4px;

    border-radius:
        999px 999px 0 0;

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


/* ==========================================================
   MAIN FOOTER GRID
========================================================== */

.ul-footer__main {
    display: grid;

    grid-template-columns:
        minmax(300px, 1.45fr)
        minmax(150px, .62fr)
        minmax(210px, .86fr)
        minmax(220px, .90fr);

    gap:
        clamp(35px, 4vw, 68px);

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


/* ==========================================================
   BRAND
========================================================== */

.ul-footer__logo-link {
    display: inline-flex;

    margin-bottom: 23px;
}


.ul-footer__logo {
    width:
        clamp(120px, 9vw, 155px);

    filter:
        drop-shadow(
            0 10px 18px
            rgba(43, 82, 49, .08)
        );
}


.ul-footer__brand-description {
    max-width: 440px;

    margin:
        0 0 28px;

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

    font-size:
        clamp(1rem, .98vw, 1.07rem);

    line-height: 1.66;
}


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

.ul-footer__contact-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.ul-footer__contact-item {
    display: flex;

    align-items: center;

    gap: 11px;

    width: fit-content;

    max-width: 100%;

    color:
        var(--ul-text);

    font-size: .91rem;

    font-weight: 500;

    line-height: 1.4;

    transition:
        color .3s ease,
        transform .35s var(--ul-ease-out);
}


.ul-footer__contact-item:hover {
    color:
        var(--ul-green-700);

    transform:
        translateX(3px);
}


.ul-footer__contact-icon {
    display: grid;

    place-items: center;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    border-radius: 11px;
}


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


.ul-footer__contact-icon--blue {
    color:
        var(--ul-logo-blue);

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


.ul-footer__contact-icon--green {
    color:
        var(--ul-green-700);

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


/* ==========================================================
   COLUMNS
========================================================== */

.ul-footer__column {
    min-width: 0;

    padding-top: 10px;
}


.ul-footer__column-title {
    position: relative;

    margin:
        0 0 24px;

    padding-bottom: 13px;

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

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

    font-size: 1.22rem;

    font-weight: 500;

    line-height: 1;
}


.ul-footer__column-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 36px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--ul-green-600),
            var(--ul-logo-yellow)
        );
}


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

.ul-footer__links {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}


.ul-footer__links a {
    position: relative;

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

    font-size: .94rem;

    font-weight: 500;

    line-height: 1.35;

    transition:
        color .3s ease,
        transform .35s var(--ul-ease-out);
}


.ul-footer__links a::before {
    content: "";

    position: absolute;

    top: .54em;
    left: -13px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    opacity: 0;

    transform:
        scale(.5);

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

    transition:
        opacity .3s ease,
        transform .35s var(--ul-ease-expo);
}


.ul-footer__links a:hover {
    color:
        var(--ul-green-700);

    transform:
        translateX(7px);
}


.ul-footer__links a:hover::before {
    opacity: 1;

    transform:
        scale(1);
}


/* ==========================================================
   LOCAL
========================================================== */

.ul-footer__local-block {
    margin-bottom: 25px;
}


.ul-footer__local-label {
    display: block;

    margin-bottom: 8px;

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

    font-size: .76rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.ul-footer__local-block p {
    margin: 0;

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

    font-size: .94rem;

    line-height: 1.62;
}


/* ==========================================================
   SOCIAL ROW
========================================================== */

.ul-footer__social-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        clamp(30px, 4vw, 60px);

    padding:
        29px 0;

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

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


.ul-footer__social-heading {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.ul-footer__social-heading > span {
    color:
        var(--ul-forest-950);

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

    font-size: 1.2rem;

    font-weight: 500;
}


.ul-footer__social-heading p {
    margin: 0;

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

    font-size: .91rem;

    line-height: 1.5;
}


.ul-footer__social-links {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;
}


/* ==========================================================
   SOCIAL BUTTONS
========================================================== */

.ul-footer-social {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 47px;

    padding:
        5px 15px
        5px 5px;

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

    border-radius: 13px;

    color:
        var(--ul-text);

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

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

    font-size: .86rem;

    font-weight: 600;

    transition:
        color .3s ease,
        border-color .3s ease,
        background-color .3s ease,
        transform .4s var(--ul-ease-expo),
        box-shadow .35s ease;
}


.ul-footer-social__icon {
    display: grid;

    place-items: center;

    width: 37px;
    height: 37px;

    flex: 0 0 auto;

    border-radius: 10px;
}


.ul-footer-social__icon svg {
    width: 18px;
    height: 18px;
}


.ul-footer-social--facebook
.ul-footer-social__icon {
    color:
        var(--ul-white);

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


.ul-footer-social--instagram
.ul-footer-social__icon {
    color:
        var(--ul-white);

    background:
        linear-gradient(
            135deg,
            var(--ul-logo-purple),
            var(--ul-logo-red),
            var(--ul-logo-orange)
        );
}


.ul-footer-social--tiktok
.ul-footer-social__icon {
    color:
        var(--ul-white);

    background:
        linear-gradient(
            135deg,
            var(--ul-charcoal-950),
            var(--ul-logo-cyan)
        );
}


.ul-footer-social:hover {
    transform:
        translateY(-3px);

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


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

.ul-footer__bottom {
    position: relative;

    display: grid;

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

    align-items: center;

    gap:
        clamp(20px, 3vw, 42px);

    min-height: 96px;
}


/* ==========================================================
   COPYRIGHT
========================================================== */

.ul-footer__copyright {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        5px 14px;

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

    font-size: .84rem;

    line-height: 1.45;
}


/* ==========================================================
   POWERED BY
========================================================== */

.ul-footer__credit {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(73, 113, 77, .11);

    border-radius: 12px;

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

    transition:
        background-color .3s ease,
        border-color .3s ease,
        transform .35s var(--ul-ease-out);
}


.ul-footer__credit:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(126, 187, 80, .20);

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


/* ==========================================================
   CREDIT COLOR MARK
========================================================== */

.ul-footer__credit-spectrum {
    display: grid;

    grid-template-columns:
        repeat(2, 7px);

    grid-template-rows:
        repeat(2, 7px);

    gap: 3px;

    flex: 0 0 auto;
}


.ul-footer__credit-spectrum i {
    display: block;

    border-radius: 3px;
}


.ul-footer__credit-spectrum i:nth-child(1) {
    background:
        var(--ul-green-500);
}


.ul-footer__credit-spectrum i:nth-child(2) {
    background:
        var(--ul-logo-yellow);
}


.ul-footer__credit-spectrum i:nth-child(3) {
    background:
        var(--ul-logo-red);
}


.ul-footer__credit-spectrum i:nth-child(4) {
    background:
        var(--ul-logo-blue);
}


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

.ul-footer__credit-copy {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


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

    font-size: .70rem;

    font-weight: 500;

    line-height: 1;
}


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

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

    font-size: .88rem;

    font-weight: 500;

    line-height: 1.1;

    white-space: nowrap;
}


/* ==========================================================
   BACK TO TOP
========================================================== */

.ul-footer__back-top {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding:
        0 13px;

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

    border-radius: 12px;

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

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

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

    font-size: .82rem;

    font-weight: 600;

    transition:
        transform .35s var(--ul-ease-out),
        color .3s ease,
        border-color .3s ease,
        background-color .3s ease;
}


.ul-footer__back-top svg {
    width: 17px;
    height: 17px;

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


.ul-footer__back-top:hover {
    color:
        var(--ul-white);

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

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

    transform:
        translateY(-2px);
}


.ul-footer__back-top:hover svg {
    transform:
        translateY(-3px);
}


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

@media (min-width: 1200px) {

    .ul-footer__main {
        grid-template-columns:
            minmax(310px, 1.45fr)
            minmax(145px, .62fr)
            minmax(205px, .86fr)
            minmax(220px, .90fr);
    }

}


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

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

    .ul-footer-cta {
        grid-template-columns: 1fr;

        gap: 32px;
    }


    .ul-footer-cta__actions {
        display: grid;

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

        max-width: 590px;
    }


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

        gap:
            48px 55px;
    }


    .ul-footer__brand {
        grid-column:
            1 / -1;
    }


    .ul-footer__social-row {
        align-items: flex-start;

        flex-direction: column;

        gap: 22px;
    }


    .ul-footer__bottom {
        grid-template-columns:
            1fr auto;

        gap: 18px;
    }


    .ul-footer__credit {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }


    .ul-footer__back-top {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

}


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

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

    .ul-footer {
        padding-top: 62px;
    }


    .ul-footer-cta {
        grid-template-columns: 1fr;

        gap: 29px;

        padding: 32px;

        border-radius: 22px;
    }


    .ul-footer-cta__actions {
        display: grid;

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

        width: 100%;
    }


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

        gap:
            42px 35px;
    }


    .ul-footer__brand {
        grid-column:
            1 / -1;
    }


    .ul-footer__social-row {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    .ul-footer__bottom {
        grid-template-columns:
            1fr auto;

        gap:
            14px 18px;

        padding:
            19px 0;
    }


    .ul-footer__credit {
        grid-column: 1;
        grid-row: 2;

        justify-self: start;
    }


    .ul-footer__back-top {
        grid-column: 2;
        grid-row:
            1 / span 2;
    }

}


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

@media (max-width: 479px) {

    .ul-footer {
        padding-top: 54px;
    }


    .ul-footer-cta {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 56px;

        padding:
            27px 20px;

        border-radius: 19px;
    }


    .ul-footer-cta__eyebrow {
        font-size: .70rem;
    }


    .ul-footer-cta__title {
        font-size:
            clamp(2.25rem, 10vw, 2.9rem);
    }


    .ul-footer-cta__content p {
        font-size: .94rem;

        line-height: 1.61;
    }


    .ul-footer-cta__estimate,
    .ul-footer-cta__phone {
        width: 100%;
    }


    .ul-footer__main {
        grid-template-columns: 1fr;

        gap: 38px;

        padding-bottom: 45px;
    }


    .ul-footer__brand {
        grid-column: auto;
    }


    .ul-footer__logo {
        width: 128px;
    }


    .ul-footer__brand-description {
        font-size: .95rem;
    }


    .ul-footer__contact-item {
        align-items: flex-start;

        font-size: .87rem;
    }


    .ul-footer__contact-item > span:last-child {
        overflow-wrap: anywhere;
    }


    .ul-footer__column {
        padding-top: 0;
    }


    .ul-footer__links a,
    .ul-footer__local-block p {
        font-size: .91rem;
    }


    .ul-footer__social-row {
        align-items: stretch;

        flex-direction: column;

        gap: 19px;

        padding:
            25px 0;
    }


    .ul-footer__social-links {
        display: grid;

        grid-template-columns: 1fr;

        gap: 8px;
    }


    .ul-footer-social {
        width: 100%;
    }


    .ul-footer__bottom {
        grid-template-columns: 1fr;

        gap: 15px;

        padding:
            23px 0 26px;
    }


    .ul-footer__copyright {
        font-size: .79rem;
    }


    .ul-footer__credit {
        width: fit-content;

        max-width: 100%;

        padding:
            8px 10px;
    }


    .ul-footer__credit-copy strong {
        font-size: .84rem;

        white-space: normal;
    }


    .ul-footer__back-top {
        width: fit-content;
    }

}


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

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

    .ul-footer-cta__estimate,
    .ul-footer-cta__estimate-icon,
    .ul-footer-cta__phone,
    .ul-footer__contact-item,
    .ul-footer__links a,
    .ul-footer__links a::before,
    .ul-footer-social,
    .ul-footer__credit,
    .ul-footer__back-top,
    .ul-footer__back-top svg {
        animation: none !important;

        transition: none !important;
    }

}