/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GLOBAL DESIGN SYSTEM
============================================================ */


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

:root {

    /* --------------------------------------------------------
       BRAND COLORS
    -------------------------------------------------------- */

    --gf-forest-950: #033D27;
    --gf-forest-900: #03472B;
    --gf-forest-850: #044D30;
    --gf-forest-800: #075A39;

    --gf-green: #05B85C;
    --gf-green-bright: #12C96B;

    --gf-leaf: #7ED957;
    --gf-leaf-soft: #A7E27F;


    /* --------------------------------------------------------
       DARK NEUTRALS
    -------------------------------------------------------- */

    --gf-ink: #101814;
    --gf-charcoal: #1B211E;
    --gf-graphite: #2B332E;


    /* --------------------------------------------------------
       LIGHT SURFACES
    -------------------------------------------------------- */

    --gf-paper: #FAF8F2;
    --gf-ivory: #F5F1E8;
    --gf-cream: #ECE5D8;

    --gf-stone: #C8C0AD;


    /* --------------------------------------------------------
       WARM ACCENT
    -------------------------------------------------------- */

    --gf-copper: #B8743C;
    --gf-copper-dark: #94582D;


    /* --------------------------------------------------------
       GENERAL
    -------------------------------------------------------- */

    --gf-white: #FFFFFF;

    --gf-gray: #68726B;
    --gf-border: #D8DDD8;


    /* --------------------------------------------------------
       TYPOGRAPHY
    -------------------------------------------------------- */

    --gf-font-sans:
        "Manrope",
        Arial,
        Helvetica,
        sans-serif;

    --gf-font-serif:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;


    /* --------------------------------------------------------
       LAYOUT
    -------------------------------------------------------- */

    --gf-container-max: 1520px;

    --gf-gutter: 72px;

    --gf-section-space: 120px;

    /*
        Will be adjusted when the final header
        dimensions are defined.
    */
    --gf-anchor-offset: 112px;


    /* --------------------------------------------------------
       BORDERS
    -------------------------------------------------------- */

    --gf-border-thin:
        1px solid rgba(3, 71, 43, 0.14);

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


    /* --------------------------------------------------------
       SHADOWS
    -------------------------------------------------------- */

    --gf-shadow-soft:
        0 8px 24px rgba(3, 61, 39, 0.06);

    --gf-shadow-medium:
        0 18px 50px rgba(3, 61, 39, 0.10),
        0 4px 16px rgba(16, 24, 20, 0.05);

    --gf-shadow-large:
        0 34px 90px rgba(3, 61, 39, 0.14),
        0 10px 30px rgba(16, 24, 20, 0.07);

    --gf-shadow-copper:
        0 20px 50px rgba(184, 116, 60, 0.10);


    /* --------------------------------------------------------
       MOTION
    -------------------------------------------------------- */

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

    --gf-ease-emphasized:
        cubic-bezier(0.16, 1, 0.3, 1);

    --gf-ease-page:
        cubic-bezier(0.76, 0, 0.24, 1);

    --gf-duration-fast: 180ms;
    --gf-duration-medium: 360ms;
    --gf-duration-slow: 650ms;


    /* --------------------------------------------------------
       PAPER TEXTURE
    -------------------------------------------------------- */

    --gf-paper-texture:
        radial-gradient(
            circle at 15% 20%,
            rgba(3, 71, 43, 0.035) 0 1px,
            transparent 1.2px
        ),
        radial-gradient(
            circle at 78% 62%,
            rgba(184, 116, 60, 0.025) 0 1px,
            transparent 1.2px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(3, 71, 43, 0.009) 0,
            rgba(3, 71, 43, 0.009) 1px,
            transparent 1px,
            transparent 7px
        ),
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.50),
            transparent 48%
        );


    /* --------------------------------------------------------
       FOREST TEXTURE
    -------------------------------------------------------- */

    --gf-forest-texture:
        radial-gradient(
            circle at 18% 22%,
            rgba(126, 217, 87, 0.07) 0 1px,
            transparent 1.4px
        ),
        radial-gradient(
            circle at 76% 60%,
            rgba(255, 255, 255, 0.035) 0 1px,
            transparent 1.4px
        ),
        repeating-linear-gradient(
            30deg,
            rgba(255, 255, 255, 0.015) 0,
            rgba(255, 255, 255, 0.015) 1px,
            transparent 1px,
            transparent 8px
        );
}



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

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


html {
    min-width: 320px;

    scroll-behavior: auto;

    scrollbar-width: thin;

    scrollbar-color:
        var(--gf-forest-800)
        var(--gf-cream);
}


body {
    margin: 0;

    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;

    overflow-x: hidden;
    overflow-x: clip;

    font-family: var(--gf-font-sans);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.65;

    color: var(--gf-ink);

    background-color: var(--gf-paper);

    background-image:
        var(--gf-paper-texture);

    background-size:
        24px 24px,
        31px 31px,
        100% 8px,
        100% 100%;

    text-rendering: optimizeLegibility;

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

    accent-color: var(--gf-green);
}


body.gf-is-transitioning {
    cursor: progress;
}


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

    max-width: 100%;
}


img {
    height: auto;
}


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


button {
    border: 0;

    color: inherit;

    background: none;
}


a {
    color: inherit;

    text-decoration: none;
}


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


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--gf-font-sans);

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

    text-wrap: balance;
}


p {
    text-wrap: pretty;
}


strong {
    font-weight: 700;
}


::selection {
    color: var(--gf-white);

    background: var(--gf-forest-800);
}


::-moz-selection {
    color: var(--gf-white);

    background: var(--gf-forest-800);
}



/* ============================================================
   03. ACCESSIBILITY
============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline:
        2px solid
        var(--gf-green-bright);

    outline-offset: 4px;
}



/* ============================================================
   04. GLOBAL TYPOGRAPHY HELPERS
============================================================ */

.gf-editorial {
    font-family: var(--gf-font-serif);

    font-style: italic;

    font-weight: 500;
}


.gf-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin: 0;

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

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--gf-copper);
}


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

    width: 38px;
    height: 1px;

    flex: 0 0 auto;

    background: currentColor;
}



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

.gf-container {
    width:
        min(
            calc(
                100% - (var(--gf-gutter) * 2)
            ),
            var(--gf-container-max)
        );

    margin-inline: auto;
}


.gf-section {
    position: relative;

    padding-block: var(--gf-section-space);
}



/* ============================================================
   06. SECTION SURFACES
============================================================ */

.gf-surface-paper {
    color: var(--gf-ink);

    background-color: var(--gf-paper);

    background-image:
        var(--gf-paper-texture);
}


.gf-surface-ivory {
    color: var(--gf-ink);

    background-color: var(--gf-ivory);
}


.gf-surface-forest {
    color: var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);
}


.gf-surface-charcoal {
    color: var(--gf-white);

    background-color:
        var(--gf-charcoal);
}



/* ============================================================
   07. ANCHOR TARGETS
============================================================ */

main section[id],
main [data-anchor-target] {
    scroll-margin-top:
        var(--gf-anchor-offset);
}


/*
    Visual acknowledgement after navigating
    to another section on the same page.
*/

.gf-section-focus {
    outline:
        1px solid
        transparent;

    animation:
        gf-section-focus
        900ms
        var(--gf-ease-standard);
}


@keyframes gf-section-focus {

    0% {
        outline-color:
            rgba(5, 184, 92, 0);

        outline-offset: 14px;
    }

    35% {
        outline-color:
            rgba(5, 184, 92, 0.42);

        outline-offset: 3px;
    }

    100% {
        outline-color:
            rgba(5, 184, 92, 0);

        outline-offset: 0;
    }
}



/* ============================================================
   08. BODY SCROLLBAR
============================================================ */

body::-webkit-scrollbar {
    width: 12px;
}


body::-webkit-scrollbar-track {
    background:
        var(--gf-cream);

    box-shadow:
        inset 0 0 0 1px
        rgba(3, 71, 43, 0.08);
}


body::-webkit-scrollbar-thumb {
    border:
        3px solid
        var(--gf-cream);

    border-radius: 0;

    background:
        var(--gf-forest-800);
}


body::-webkit-scrollbar-thumb:hover {
    background:
        var(--gf-green);
}


body::-webkit-scrollbar-corner {
    background:
        var(--gf-cream);
}



/* ============================================================
   09. PAGE TRANSITION
============================================================ */

.gf-page-transition {
    position: fixed;

    inset: 0;

    z-index: 2147483000;

    visibility: hidden;

    overflow: hidden;

    pointer-events: none;
}


.gf-page-transition__panel {
    position: absolute;

    top: 0;
    bottom: 0;

    will-change: transform;

    transition:
        transform
        560ms
        var(--gf-ease-page);
}


/* LEFT PANEL */

.gf-page-transition__panel--paper {
    left: 0;

    width: 62%;

    background-color:
        var(--gf-paper);

    background-image:
        var(--gf-paper-texture);

    transform:
        translate3d(-102%, 0, 0);
}


/* RIGHT PANEL */

.gf-page-transition__panel--forest {
    right: 0;

    width: 38%;

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

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


/* COPPER DIVIDER */

.gf-page-transition__rule {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 62%;

    width: 1px;

    z-index: 2;

    background:
        rgba(184, 116, 60, 0.75);

    transform:
        scaleY(0);

    transform-origin:
        center;

    transition:
        transform
        440ms
        140ms
        var(--gf-ease-standard);
}


/* BRAND */

.gf-page-transition__brand {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 18px;

    opacity: 0;

    transform:
        translate3d(-50%, -42%, 0);

    transition:
        opacity 280ms ease,
        transform 560ms
        var(--gf-ease-standard);
}


.gf-page-transition__brand-mark {
    display: grid;

    width: 58px;
    height: 58px;

    place-items: center;

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

    letter-spacing: -0.06em;

    color: var(--gf-white);

    background:
        var(--gf-green);
}


.gf-page-transition__brand-copy {
    display: grid;

    gap: 2px;

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


.gf-page-transition__brand-copy strong {
    font-size: 0.86rem;

    letter-spacing: 0.12em;
}


.gf-page-transition__brand-copy small {
    font-size: 0.58rem;

    letter-spacing: 0.16em;

    color:
        var(--gf-leaf);
}



/* ------------------------------------------------------------
   TRANSITION ACTIVE STATES
------------------------------------------------------------ */

.gf-page-transition.is-leaving,
.gf-page-transition.is-entering {
    visibility: visible;

    pointer-events: auto;
}


.gf-page-transition.is-leaving
.gf-page-transition__panel--paper,

.gf-page-transition.is-entering:not(.is-revealing)
.gf-page-transition__panel--paper {
    transform:
        translate3d(0, 0, 0);
}


.gf-page-transition.is-leaving
.gf-page-transition__panel--forest,

.gf-page-transition.is-entering:not(.is-revealing)
.gf-page-transition__panel--forest {
    transform:
        translate3d(0, 0, 0);
}


.gf-page-transition.is-leaving
.gf-page-transition__rule,

.gf-page-transition.is-entering:not(.is-revealing)
.gf-page-transition__rule {
    transform:
        scaleY(1);
}


.gf-page-transition.is-leaving
.gf-page-transition__brand,

.gf-page-transition.is-entering:not(.is-revealing)
.gf-page-transition__brand {
    opacity: 1;

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



/* ------------------------------------------------------------
   NEW PAGE REVEAL
------------------------------------------------------------ */

.gf-page-transition.is-entering.is-revealing
.gf-page-transition__panel--paper {
    transform:
        translate3d(-102%, 0, 0);
}


.gf-page-transition.is-entering.is-revealing
.gf-page-transition__panel--forest {
    transform:
        translate3d(102%, 0, 0);
}


.gf-page-transition.is-entering.is-revealing
.gf-page-transition__rule {
    transform:
        scaleY(0);
}


.gf-page-transition.is-entering.is-revealing
.gf-page-transition__brand {
    opacity: 0;

    transform:
        translate3d(-50%, -58%, 0);
}



/* ============================================================
   10. SAME-PAGE ROUTE LINE
============================================================ */

.gf-route-line {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 2147482999;

    width: 100%;
    height: 3px;

    pointer-events: none;

    opacity: 0;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    background:
        var(--gf-green-bright);

    box-shadow:
        0 2px 16px
        rgba(5, 184, 92, 0.24);
}


.gf-route-line.is-active {
    opacity: 1;

    animation:
        gf-route-progress
        760ms
        var(--gf-ease-standard)
        forwards;
}


@keyframes gf-route-progress {

    0% {
        transform:
            scaleX(0);

        transform-origin:
            left center;
    }

    55% {
        transform:
            scaleX(1);

        transform-origin:
            left center;
    }

    56% {
        transform-origin:
            right center;
    }

    100% {
        transform:
            scaleX(0);

        transform-origin:
            right center;
    }
}



/* ============================================================
   11. BASIC UTILITY
============================================================ */

.gf-visually-hidden {
    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;
}



/* ============================================================
   12. RESPONSIVE
============================================================ */


/* ============================================================
   COMPUTER
   1200px +
============================================================ */

@media (min-width: 1200px) {

    :root {
        --gf-gutter:
            clamp(64px, 5vw, 92px);

        --gf-section-space:
            120px;

        --gf-anchor-offset:
            112px;
    }

}



/* ============================================================
   TABLET / SMALL LAPTOP
   768px - 1199px
============================================================ */

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

    :root {
        --gf-gutter: 44px;

        --gf-section-space:
            96px;

        --gf-anchor-offset:
            104px;
    }


    .gf-page-transition__panel--paper {
        width: 64%;
    }


    .gf-page-transition__panel--forest {
        width: 36%;
    }


    .gf-page-transition__rule {
        left: 64%;
    }

}



/* ============================================================
   MOBILE
   481px - 767px
============================================================ */

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

    :root {
        --gf-gutter: 24px;

        --gf-section-space:
            80px;

        --gf-anchor-offset:
            96px;
    }


    .gf-page-transition__panel--paper {
        width: 68%;
    }


    .gf-page-transition__panel--forest {
        width: 32%;
    }


    .gf-page-transition__rule {
        left: 68%;
    }


    .gf-page-transition__brand {
        gap: 12px;
    }


    .gf-page-transition__brand-mark {
        width: 50px;
        height: 50px;
    }

}



/* ============================================================
   SMALL MOBILE
   480px OR LESS
============================================================ */

@media (max-width: 480px) {

    :root {
        --gf-gutter: 18px;

        --gf-section-space:
            68px;

        --gf-anchor-offset:
            88px;
    }


    .gf-page-transition__panel--paper {
        width: 72%;
    }


    .gf-page-transition__panel--forest {
        width: 28%;
    }


    .gf-page-transition__rule {
        left: 72%;
    }


    .gf-page-transition__brand {
        gap: 10px;
    }


    .gf-page-transition__brand-mark {
        width: 46px;
        height: 46px;

        font-size: 1.2rem;
    }


    .gf-page-transition__brand-copy strong {
        font-size: 0.68rem;
    }


    .gf-page-transition__brand-copy small {
        font-size: 0.5rem;
    }


    body::-webkit-scrollbar {
        width: 8px;
    }

}



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

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

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

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        transition-delay: 0ms !important;
    }


    .gf-page-transition {
        display: none !important;
    }


    .gf-route-line {
        display: none !important;
    }


    .gf-section-focus {
        animation: none !important;
    }

}








































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   02. HEADER
============================================================ */


/* ============================================================
   01. HEADER GLOBAL VARIABLES
============================================================ */

:root {

    /*
        The Topbar does not exist yet.

        header.js will automatically update this variable
        when we create an element with [data-gf-topbar].
    */

    --gf-topbar-height: 0px;

    --gf-header-height: 96px;

    --gf-header-top: 0px;


    /*
        This value will be used by the future Hero.

        Topbar + Header + Hero <= 100svh
    */

    --gf-first-fold-offset:
        calc(
            var(--gf-topbar-height) +
            var(--gf-header-height)
        );

}


/*
    Helps prevent horizontal movement when scroll
    is temporarily locked by the mobile menu.
*/

html {
    scrollbar-gutter: stable;
}



/* ============================================================
   02. FIXED HEADER SHELL
============================================================ */

.gf-header-shell {

    position: fixed;

    top: var(--gf-header-top);
    left: 0;
    right: 0;

    z-index: 1200;

    height: var(--gf-header-height);

    transition:
        top 80ms linear;

}


/*
    IMPORTANT:

    No initial transform.
    No translateY.
    No sticky.
    No animation that affects layout.

    This prevents first-load flickering and unstable
    stacking contexts.
*/

.gf-site-header {

    position: relative;

    width: 100%;
    height: 100%;

    background:
        rgba(250, 248, 242, 0.97);

    border-top:
        2px solid
        var(--gf-forest-800);

    border-bottom:
        1px solid
        rgba(3, 71, 43, 0.12);

    backdrop-filter:
        blur(18px);

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

    transition:
        background-color
        var(--gf-duration-medium)
        var(--gf-ease-standard),

        box-shadow
        var(--gf-duration-medium)
        var(--gf-ease-standard),

        border-color
        var(--gf-duration-medium)
        var(--gf-ease-standard);

}


/* SCROLLED STATE */

.gf-header-shell.is-scrolled
.gf-site-header {

    background:
        rgba(250, 248, 242, 0.985);

    border-bottom-color:
        rgba(3, 71, 43, 0.17);

    box-shadow:
        0 12px 38px
        rgba(3, 61, 39, 0.08);

}



/* ============================================================
   03. HEADER SPACER
============================================================ */

.gf-header-spacer {

    display: block;

    width: 100%;
    height: var(--gf-header-height);

    flex: 0 0 auto;

}



/* ============================================================
   04. INNER GRID
============================================================ */

.gf-header__inner {

    display: grid;

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

    align-items: center;

    gap: 36px;

    height: 100%;

}



/* ============================================================
   05. LOGO
============================================================ */

.gf-header__brand {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    width: 174px;
    height: 100%;

}


.gf-header__brand-frame {

    position: relative;

    display: flex;

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

    width: 100%;
    height: 72px;

    overflow: hidden;

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

}


/*
    Because the provided logo already contains
    its own green background, object-fit: cover allows
    it to integrate naturally into the brand panel.
*/

.gf-header__logo {

    display: block;

    width: 100%;
    height: 100%;

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

    transition:
        filter
        var(--gf-duration-medium)
        var(--gf-ease-standard);

}


.gf-header__brand:hover
.gf-header__logo {

    filter:
        brightness(1.04)
        saturate(1.05);

}



/* ============================================================
   06. DESKTOP NAVIGATION
============================================================ */

.gf-header__nav {

    display: flex;

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

    gap:
        clamp(20px, 2vw, 36px);

    min-width: 0;

}


.gf-header__nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 42px;

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

    letter-spacing: 0.075em;

    text-transform: uppercase;

    white-space: nowrap;

    color:
        var(--gf-charcoal);

    transition:
        color
        var(--gf-duration-fast)
        ease;

}


.gf-header__nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 3px;

    height: 1px;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        320ms
        var(--gf-ease-standard);

}


.gf-header__nav-link:hover {

    color:
        var(--gf-forest-800);

}


.gf-header__nav-link:hover::after,
.gf-header__nav-link[aria-current="page"]::after {

    transform:
        scaleX(1);

    transform-origin:
        left center;

}



/* ============================================================
   07. FREE ESTIMATE CTA
============================================================ */

.gf-header__cta {

    position: relative;

    isolation: isolate;

    display: inline-flex;

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

    gap: 17px;

    min-height: 52px;

    padding:
        0 22px;

    overflow: hidden;

    border:
        1px solid
        var(--gf-forest-800);

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

    color:
        var(--gf-white);

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

    letter-spacing: 0.085em;

    text-transform: uppercase;

    box-shadow:
        0 10px 24px
        rgba(3, 71, 43, 0.13);

    transition:
        box-shadow
        350ms
        var(--gf-ease-standard);

}


.gf-header__cta::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        420ms
        var(--gf-ease-emphasized);

}


.gf-header__cta:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left center;

}


.gf-header__cta:hover {

    box-shadow:
        0 16px 34px
        rgba(5, 184, 92, 0.18);

}


.gf-header__cta-arrow {

    display: inline-block;

    font-size: 1rem;

    line-height: 1;

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-header__cta:hover
.gf-header__cta-arrow {

    transform:
        translateX(4px);

}



/* ============================================================
   08. HAMBURGER
============================================================ */

.gf-menu-toggle {

    position: relative;

    z-index: 2;

    display: none;

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

    width: 44px;
    height: 44px;

    padding: 0;

    cursor: pointer;

}


.gf-menu-toggle__box {

    position: relative;

    display: block;

    width: 28px;
    height: 18px;

}


.gf-menu-toggle__line {

    position: absolute;

    left: 0;

    width: 28px;
    height: 1.5px;

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

    transform-origin:
        center;

    transition:
        top 320ms
        var(--gf-ease-standard),

        transform 420ms
        var(--gf-ease-emphasized),

        width 320ms
        var(--gf-ease-standard);

}


.gf-menu-toggle__line--1 {

    top: 5px;

}


.gf-menu-toggle__line--2 {

    top: 13px;

    width: 19px;

}


/* OPEN ICON */

.gf-menu-toggle.is-open
.gf-menu-toggle__line--1 {

    top: 9px;

    transform:
        rotate(45deg);

}


.gf-menu-toggle.is-open
.gf-menu-toggle__line--2 {

    top: 9px;

    width: 28px;

    transform:
        rotate(-45deg);

}



/* ============================================================
   09. MOBILE MENU
============================================================ */

.gf-mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 1100;

    width: 100%;

    height: 100vh;
    height: 100svh;
    height: 100dvh;

    overflow: hidden;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    color:
        var(--gf-white);

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

    transition:
        opacity
        320ms
        ease,

        visibility
        0s linear
        520ms;

}


.gf-mobile-menu::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        var(--gf-forest-texture);

    background-size:
        26px 26px,
        34px 34px,
        auto;

    opacity: 0.72;

}


.gf-mobile-menu.is-open {

    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transition-delay:
        0s;

}



/* ============================================================
   10. AMBIENT SHAPE
============================================================ */

.gf-mobile-menu__ambient {

    position: absolute;

    top: 18%;
    right: -10%;

    width: 56vw;
    height: 56vw;

    max-width: 480px;
    max-height: 480px;

    border:
        1px solid
        rgba(126, 217, 87, 0.15);

    transform:
        rotate(19deg);

    opacity: 0;

    transition:
        opacity
        600ms
        180ms
        ease;

}


.gf-mobile-menu__ambient::before {

    content: "";

    position: absolute;

    inset: 13%;

    border:
        1px solid
        rgba(184, 116, 60, 0.14);

}


.gf-mobile-menu.is-open
.gf-mobile-menu__ambient {

    opacity: 1;

}



/* ============================================================
   11. MOBILE MENU CONTENT
============================================================ */

.gf-mobile-menu__inner {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    width:
        min(
            calc(
                100% -
                (var(--gf-gutter) * 2)
            ),
            760px
        );

    height: 100%;

    margin-inline: auto;

    padding-top:
        calc(
            var(--gf-header-top) +
            var(--gf-header-height) +
            32px
        );

    padding-bottom:
        max(
            30px,
            env(safe-area-inset-bottom)
        );

}


.gf-mobile-menu__intro {

    padding-bottom: 24px;

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

    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity
        500ms
        120ms
        ease,

        transform
        600ms
        120ms
        var(--gf-ease-standard);

}


.gf-mobile-menu.is-open
.gf-mobile-menu__intro {

    opacity: 1;

    transform:
        translateY(0);

}


.gf-mobile-menu__eyebrow {

    display: block;

    margin-bottom: 11px;

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

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-mobile-menu__title {

    max-width: 420px;

    margin: 0;

    font-size:
        clamp(
            1.55rem,
            4.5vw,
            2.3rem
        );

    font-weight: 500;

    line-height: 1.04;

    letter-spacing: -0.04em;

    color:
        var(--gf-white);

}


.gf-mobile-menu__title span {

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-leaf);

}



/* ============================================================
   12. MOBILE MENU LINKS
============================================================ */

.gf-mobile-menu__nav {

    display: grid;

    margin-top: 16px;

}


.gf-mobile-menu__link {

    display: grid;

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

    align-items: center;

    gap: 14px;

    min-height: 64px;

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

    opacity: 0;

    transform:
        translateX(-18px);

    transition:
        color
        260ms
        ease,

        opacity
        480ms
        var(--gf-ease-standard),

        transform
        520ms
        var(--gf-ease-standard),

        padding-left
        300ms
        var(--gf-ease-standard);

}


.gf-mobile-menu.is-open
.gf-mobile-menu__link {

    opacity: 1;

    transform:
        translateX(0);

}


.gf-mobile-menu.is-open
.gf-mobile-menu__link:nth-child(1) {

    transition-delay:
        160ms, 160ms, 160ms, 0ms;

}


.gf-mobile-menu.is-open
.gf-mobile-menu__link:nth-child(2) {

    transition-delay:
        200ms, 200ms, 200ms, 0ms;

}


.gf-mobile-menu.is-open
.gf-mobile-menu__link:nth-child(3) {

    transition-delay:
        240ms, 240ms, 240ms, 0ms;

}


.gf-mobile-menu.is-open
.gf-mobile-menu__link:nth-child(4) {

    transition-delay:
        280ms, 280ms, 280ms, 0ms;

}


.gf-mobile-menu.is-open
.gf-mobile-menu__link:nth-child(5) {

    transition-delay:
        320ms, 320ms, 320ms, 0ms;

}


.gf-mobile-menu.is-open
.gf-mobile-menu__link:nth-child(6) {

    transition-delay:
        360ms, 360ms, 360ms, 0ms;

}


.gf-mobile-menu__number {

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

    letter-spacing: 0.12em;

    color:
        var(--gf-copper);

}


.gf-mobile-menu__link-text {

    font-size:
        clamp(
            1.05rem,
            3vw,
            1.4rem
        );

    font-weight: 600;

    letter-spacing: -0.025em;

}


.gf-mobile-menu__arrow {

    font-size: 0.95rem;

    color:
        var(--gf-leaf);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-mobile-menu__link:hover {

    color:
        var(--gf-leaf);

    padding-left: 7px;

}


.gf-mobile-menu__link:hover
.gf-mobile-menu__arrow {

    transform:
        translate(3px, -3px);

}



/* ============================================================
   13. MOBILE MENU FOOTER
============================================================ */

.gf-mobile-menu__footer {

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-top: auto;

    padding-top: 20px;

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

    font-size: 0.68rem;

    letter-spacing: 0.04em;

    opacity: 0;

    transition:
        opacity
        500ms
        360ms
        ease;

}


.gf-mobile-menu.is-open
.gf-mobile-menu__footer {

    opacity: 1;

}


.gf-mobile-menu__footer span {

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

}


.gf-mobile-menu__footer a {

    font-weight: 700;

    color:
        var(--gf-white);

}



/* ============================================================
   14. GREEN SIDE ACCENT
============================================================ */

.gf-mobile-menu__accent {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: 5px;

    background:
        var(--gf-green);

    transform:
        scaleY(0);

    transform-origin:
        top;

    transition:
        transform
        620ms
        var(--gf-ease-emphasized);

}


.gf-mobile-menu.is-open
.gf-mobile-menu__accent {

    transform:
        scaleY(1);

}



/* ============================================================
   15. SCROLL LOCK
============================================================ */

body.gf-menu-open {

    position: fixed;

    left: 0;
    right: 0;

    width: 100%;

    overflow: hidden;

}



/* ============================================================
   16. COMPUTER
   1200px+
============================================================ */

@media (min-width: 1200px) {

    :root {

        --gf-header-height:
            96px;

    }


    .gf-menu-toggle {

        display: none;

    }


    .gf-header__nav {

        display: flex;

    }


    .gf-header__brand {

        justify-self: start;

    }


    .gf-header__cta {

        justify-self: end;

    }


    .gf-mobile-menu {

        display: none;

    }

}



/* ============================================================
   17. TABLET
   768px - 1199px
============================================================ */

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

    :root {

        --gf-header-height:
            84px;

    }


    .gf-header__inner {

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

        gap: 18px;

    }


    .gf-menu-toggle {

        display: flex;

        justify-self: start;

    }


    .gf-header__nav {

        display: none;

    }


    .gf-header__brand {

        justify-self: center;

        width: 150px;

        height: 100%;

    }


    .gf-header__brand-frame {

        height: 66px;

    }


    .gf-header__cta {

        justify-self: end;

        min-height: 46px;

        padding:
            0 18px;

        gap: 12px;

    }

}



/* ============================================================
   18. MOBILE
   481px - 767px
============================================================ */

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

    :root {

        --gf-header-height:
            78px;

    }


    .gf-header__inner {

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

        gap: 10px;

    }


    .gf-menu-toggle {

        display: flex;

        justify-self: start;

    }


    .gf-header__nav {

        display: none;

    }


    .gf-header__brand {

        justify-self: center;

        width: 132px;

    }


    .gf-header__brand-frame {

        height: 60px;

    }


    .gf-header__cta {

        justify-self: end;

        min-height: 42px;

        padding:
            0 13px;

        gap: 8px;

        font-size: 0.60rem;

        letter-spacing: 0.055em;

    }


    .gf-header__cta-arrow {

        font-size: 0.88rem;

    }


    .gf-mobile-menu__inner {

        padding-top:
            calc(
                var(--gf-header-top) +
                var(--gf-header-height) +
                24px
            );

    }

}



/* ============================================================
   19. SMALL MOBILE
   <= 480px
============================================================ */

@media (max-width: 480px) {

    :root {

        --gf-header-height:
            72px;

    }


    .gf-header__inner {

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

        gap: 6px;

    }


    .gf-menu-toggle {

        display: flex;

        justify-self: start;

        width: 40px;
        height: 40px;

    }


    .gf-menu-toggle__box {

        width: 25px;

    }


    .gf-menu-toggle__line {

        width: 25px;

    }


    .gf-menu-toggle__line--2 {

        width: 17px;

    }


    .gf-menu-toggle.is-open
    .gf-menu-toggle__line--2 {

        width: 25px;

    }


    .gf-header__nav {

        display: none;

    }


    .gf-header__brand {

        justify-self: center;

        width: 112px;

    }


    .gf-header__brand-frame {

        height: 54px;

    }


    .gf-header__cta {

        justify-self: end;

        min-height: 38px;

        padding:
            0 9px;

        gap: 5px;

        font-size: 0.53rem;

        letter-spacing: 0.025em;

    }


    .gf-header__cta-arrow {

        font-size: 0.77rem;

    }


    .gf-mobile-menu__inner {

        padding-top:
            calc(
                var(--gf-header-top) +
                var(--gf-header-height) +
                18px
            );

    }


    .gf-mobile-menu__intro {

        padding-bottom: 16px;

    }


    .gf-mobile-menu__nav {

        margin-top: 8px;

    }


    .gf-mobile-menu__link {

        min-height: 56px;

    }


    .gf-mobile-menu__footer {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }

}



/* ============================================================
   20. REDUCED MOTION
============================================================ */

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

    .gf-header-shell,
    .gf-site-header,
    .gf-header__nav-link,
    .gf-header__nav-link::after,
    .gf-header__cta,
    .gf-header__cta::before,
    .gf-header__cta-arrow,
    .gf-menu-toggle__line,
    .gf-mobile-menu,
    .gf-mobile-menu__ambient,
    .gf-mobile-menu__intro,
    .gf-mobile-menu__link,
    .gf-mobile-menu__arrow,
    .gf-mobile-menu__footer,
    .gf-mobile-menu__accent {

        transition: none !important;

        animation: none !important;

    }

}






































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   04. HERO
============================================================ */


/* ============================================================
   01. HERO SHELL
============================================================ */

.gf-hero {

    position: relative;

    isolation: isolate;

    width: 100%;

    /*
        CRITICAL RULE:

        Topbar + Header + Hero = 100svh maximum.
    */

    height:
        calc(
            100svh -
            var(--gf-first-fold-offset)
        );

    max-height:
        calc(
            100svh -
            var(--gf-first-fold-offset)
        );

    overflow: hidden;

    color:
        var(--gf-ink);

    background-color:
        var(--gf-paper);

    background-image:
        var(--gf-paper-texture);

}


/* Dynamic viewport support */

@supports (height: 100dvh) {

    .gf-hero {

        height:
            calc(
                100dvh -
                var(--gf-first-fold-offset)
            );

        max-height:
            calc(
                100dvh -
                var(--gf-first-fold-offset)
            );

    }

}



/* ============================================================
   02. BACKGROUND
============================================================ */

.gf-hero__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.gf-hero__background::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 49%;
    height: 100%;

    background:

        linear-gradient(
            90deg,
            rgba(245, 241, 232, 0.58),
            transparent
        );

}


.gf-hero__grain {

    position: absolute;

    inset: 0;

    opacity: 0.15;

    background-image:

        radial-gradient(
            rgba(3, 71, 43, 0.2)
            0.45px,
            transparent 0.7px
        );

    background-size:
        8px 8px;

    mix-blend-mode:
        multiply;

}


.gf-hero__contour {

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.035);

}


.gf-hero__contour--1 {

    left: -150px;
    bottom: -230px;

    width: 580px;
    height: 580px;

    transform:
        rotate(31deg);

}


.gf-hero__contour--1::before,
.gf-hero__contour--1::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.038);

}


.gf-hero__contour--1::before {

    inset: 35px;

}


.gf-hero__contour--1::after {

    inset: 72px;

}


.gf-hero__contour--2 {

    left: -50px;
    bottom: -170px;

    width: 430px;
    height: 430px;

    transform:
        rotate(46deg);

}



/* ============================================================
   03. CONTAINER
============================================================ */

.gf-hero__container {

    display: grid;

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

    height: 100%;

}


/* ============================================================
   04. MAIN GRID
============================================================ */

.gf-hero__main {

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(480px, 1.08fr);

    min-height: 0;

}


/* ============================================================
   05. LEFT CONTENT
============================================================ */

.gf-hero__content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        clamp(28px, 4.7vh, 58px)
        clamp(42px, 5vw, 82px)
        clamp(22px, 3.4vh, 42px)
        0;

}



/* ============================================================
   06. EYEBROW
============================================================ */

.gf-hero__eyebrow {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom:
        clamp(15px, 2vh, 25px);

    overflow: hidden;

    font-size:
        clamp(
            0.58rem,
            0.65vw,
            0.72rem
        );

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-hero__eyebrow-line {

    width: 36px;
    height: 1px;

    flex: 0 0 auto;

    background:
        var(--gf-copper);

}



/* ============================================================
   07. TITLE
============================================================ */

.gf-hero__title {

    margin:
        0 0
        clamp(16px, 2.2vh, 28px);

    font-size:
        clamp(
            2.8rem,
            4.65vw,
            5.45rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing: -0.062em;

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

}


.gf-hero__title-line {

    display: block;

    overflow: hidden;

    padding-bottom:
        0.05em;

}


.gf-hero__title-line > span {

    display: block;

}


.gf-hero__title-line--editorial {

    margin-top:
        0.07em;

    font-family:
        var(--gf-font-serif);

    font-size:
        0.92em;

    font-style: italic;

    font-weight: 500;

    line-height: 0.95;

    letter-spacing: -0.045em;

    color:
        var(--gf-green);

}


.gf-hero__title-dot {

    color:
        var(--gf-leaf);

}



/* ============================================================
   08. DESCRIPTION
============================================================ */

.gf-hero__description {

    max-width: 560px;

    margin:
        0 0
        clamp(18px, 2.6vh, 32px);

    font-size:
        clamp(
            0.84rem,
            0.9vw,
            1rem
        );

    line-height: 1.68;

    color:
        var(--gf-gray);

}



/* ============================================================
   09. QUICK SERVICES
============================================================ */

.gf-hero__services {

    display: grid;

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

    width: 100%;

    max-width: 650px;

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

    border-top:
        var(--gf-border-thin);

    border-bottom:
        var(--gf-border-thin);

}


.gf-hero__service {

    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 54px;

    padding:
        8px 11px;

    overflow: hidden;

    border-right:
        var(--gf-border-thin);

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

    line-height: 1.35;

    letter-spacing: 0.035em;

    text-transform: uppercase;

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

    transition:
        color
        300ms
        ease,

        background-color
        300ms
        ease;

}


.gf-hero__service:last-child {

    border-right: 0;

}


.gf-hero__service::before {

    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 2px;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        360ms
        var(--gf-ease-standard);

}


.gf-hero__service:hover {

    color:
        var(--gf-green);

    background:
        rgba(5, 184, 92, 0.035);

}


.gf-hero__service:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-hero__service-icon {

    display: grid;

    width: 27px;
    height: 27px;

    flex: 0 0 auto;

    place-items: center;

    color:
        var(--gf-forest-800);

}


.gf-hero__service-icon svg {

    width: 100%;
    height: 100%;

}



/* ============================================================
   10. HERO ACTIONS
============================================================ */

.gf-hero__actions {

    display: flex;

    align-items: center;

    gap: 28px;

}


.gf-hero__primary {

    position: relative;

    isolation: isolate;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    min-height: 52px;

    padding:
        0 23px;

    overflow: hidden;

    border:
        1px solid
        var(--gf-forest-800);

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

    box-shadow:
        var(--gf-shadow-soft);

    color:
        var(--gf-white);

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

    letter-spacing: 0.07em;

    text-transform: uppercase;

}


.gf-hero__primary::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        420ms
        var(--gf-ease-emphasized);

}


.gf-hero__primary:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-hero__primary-arrow {

    font-size: 1rem;

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-hero__primary:hover
.gf-hero__primary-arrow {

    transform:
        translateX(5px);

}


.gf-hero__secondary {

    display: inline-flex;

    flex-direction: column;

    gap: 7px;

    padding:
        10px 0;

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

    letter-spacing: 0.07em;

    text-transform: uppercase;

    color:
        var(--gf-forest-800);

}


.gf-hero__secondary-line {

    display: block;

    width: 100%;
    height: 1px;

    background:
        var(--gf-copper);

    transform:
        scaleX(0.46);

    transform-origin:
        left;

    transition:
        transform
        350ms
        var(--gf-ease-standard);

}


.gf-hero__secondary:hover
.gf-hero__secondary-line {

    transform:
        scaleX(1);

}



/* ============================================================
   11. TRUST BAR
============================================================ */

.gf-hero__trust {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top:
        clamp(18px, 2.7vh, 32px);

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

    letter-spacing: 0.105em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-hero__trust-divider {

    display: block;

    width: 1px;
    height: 14px;

    flex: 0 0 auto;

    background:
        var(--gf-stone);

}


.gf-hero__trust-phone {

    transition:
        color
        250ms
        ease;

}


.gf-hero__trust-phone:hover {

    color:
        var(--gf-green);

}



/* ============================================================
   12. VISUAL COLLAGE
============================================================ */

.gf-hero__visual {

    position: relative;

    display: grid;

    grid-template-columns:
        28% 31% 41%;

    grid-template-rows:
        54% 21% 25%;

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

    margin:
        clamp(18px, 2.4vh, 30px)
        0
        clamp(16px, 2.2vh, 26px);

}


/* main photo */

.gf-hero__media {

    position: relative;

    overflow: hidden;

    margin: 0;

    background:
        var(--gf-cream);

}


.gf-hero__media-mask {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.gf-hero__image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        1.1s
        var(--gf-ease-standard);

}


.gf-hero__media:hover
.gf-hero__image {

    transform:
        scale(1.035);

}


.gf-hero__media--main {

    grid-column:
        1 / 3;

    grid-row:
        1 / 3;

    z-index: 1;

}


.gf-hero__media--main
.gf-hero__image {

    object-position:
        center;

}


.gf-hero__media--lawn {

    grid-column:
        3;

    grid-row:
        2 / 4;

    z-index: 2;

    margin-left: 3px;

}


.gf-hero__media--detail {

    grid-column:
        2;

    grid-row:
        3;

    z-index: 3;

    margin:
        3px 0 0 3px;

}



/* ============================================================
   13. STATEMENT PANEL
============================================================ */

.gf-hero__statement {

    position: relative;

    z-index: 4;

    grid-column:
        3;

    grid-row:
        1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        clamp(20px, 2vw, 32px);

    margin-left: 3px;

    overflow: hidden;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-hero__statement::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            145deg,
            rgba(126, 217, 87, 0.07),
            transparent 45%
        );

}


.gf-hero__statement-icon {

    position: relative;

    display: block;

    width: 40px;
    height: 40px;

    margin-bottom:
        clamp(12px, 1.7vh, 20px);

    color:
        var(--gf-leaf);

}


.gf-hero__statement-icon svg {

    width: 100%;
    height: 100%;

}


.gf-hero__statement p {

    position: relative;

    margin: 0;

    font-size:
        clamp(
            0.72rem,
            0.85vw,
            0.95rem
        );

    font-weight: 700;

    line-height: 1.48;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--gf-white);

}


.gf-hero__statement strong {

    display: block;

    margin-top: 5px;

    color:
        var(--gf-green-bright);

}


.gf-hero__statement-rule {

    display: block;

    width: 45px;
    height: 1px;

    margin-top:
        clamp(15px, 2vh, 24px);

    background:
        var(--gf-copper);

}



/* ============================================================
   14. TEXTURE TILE
============================================================ */

.gf-hero__texture-tile {

    position: relative;

    z-index: 4;

    grid-column:
        1;

    grid-row:
        3;

    display: grid;

    place-items: center;

    margin-top: 3px;

    overflow: hidden;

    color:
        rgba(126, 217, 87, 0.24);

    background-color:
        var(--gf-forest-900);

    background-image:
        var(--gf-forest-texture);

}


.gf-hero__texture-tile svg {

    width: 72%;
    height: 72%;

}



/* ============================================================
   15. VISUAL GREEN ACCENT
============================================================ */

.gf-hero__visual-accent {

    position: absolute;

    right: -18px;
    bottom: 17%;

    z-index: 0;

    width: 36px;
    height: 42%;

    background:
        var(--gf-green);

}



/* ============================================================
   16. BOTTOM STRIP
============================================================ */

.gf-hero__bottom {

    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    min-height:
        clamp(68px, 8vh, 86px);

    padding:
        0 clamp(25px, 3vw, 44px);

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-hero__bottom-item {

    display: flex;

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

    gap: 13px;

    min-width: 0;

}


.gf-hero__bottom-divider {

    width: 1px;
    height: 35%;

    min-height: 30px;

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

}


.gf-hero__bottom-value {

    font-size:
        clamp(
            1.35rem,
            1.8vw,
            2rem
        );

    font-weight: 700;

    letter-spacing: -0.05em;

    color:
        var(--gf-leaf);

}


.gf-hero__bottom-icon {

    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

    border:
        1px solid
        rgba(126, 217, 87, 0.32);

    font-size: 1rem;

    color:
        var(--gf-leaf);

}


.gf-hero__bottom-copy {

    display: flex;

    flex-direction: column;

    font-size: 0.53rem;
    font-weight: 500;

    line-height: 1.55;

    letter-spacing: 0.075em;

    text-transform: uppercase;

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

}


.gf-hero__bottom-copy strong {

    font-size: 0.62rem;

    color:
        var(--gf-white);

}


.gf-hero__bottom-link {

    transition:
        color
        250ms
        ease;

}


.gf-hero__bottom-link:hover strong {

    color:
        var(--gf-leaf);

}



/* ============================================================
   17. INITIAL HERO ANIMATION STATES
============================================================ */

.gf-hero.is-preparing
.gf-hero__eyebrow {

    opacity: 0;

    transform:
        translateY(14px);

}


.gf-hero.is-preparing
.gf-hero__title-line > span {

    transform:
        translateY(112%);

}


.gf-hero.is-preparing
.gf-hero__description,
.gf-hero.is-preparing
.gf-hero__services,
.gf-hero.is-preparing
.gf-hero__actions,
.gf-hero.is-preparing
.gf-hero__trust {

    opacity: 0;

    transform:
        translateY(18px);

}


.gf-hero.is-preparing
.gf-hero__media-mask {

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

}


.gf-hero.is-preparing
.gf-hero__image {

    transform:
        scale(1.07);

}


.gf-hero.is-preparing
.gf-hero__statement,
.gf-hero.is-preparing
.gf-hero__texture-tile {

    opacity: 0;

    transform:
        translateY(22px);

}


.gf-hero.is-preparing
.gf-hero__bottom {

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

}



/* ============================================================
   18. ACTIVE HERO ANIMATION
============================================================ */

.gf-hero.is-active
.gf-hero__eyebrow {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 600ms 80ms ease,
        transform 700ms 80ms
        var(--gf-ease-standard);

}


.gf-hero.is-active
.gf-hero__eyebrow-line {

    animation:
        gf-hero-line
        700ms
        180ms
        var(--gf-ease-standard)
        both;

}


.gf-hero.is-active
.gf-hero__title-line > span {

    transform:
        translateY(0);

    transition:
        transform
        900ms
        var(--gf-ease-emphasized);

}


.gf-hero.is-active
.gf-hero__title-line:nth-child(1) > span {

    transition-delay:
        110ms;

}


.gf-hero.is-active
.gf-hero__title-line:nth-child(2) > span {

    transition-delay:
        190ms;

}


.gf-hero.is-active
.gf-hero__title-line:nth-child(3) > span {

    transition-delay:
        280ms;

}


.gf-hero.is-active
.gf-hero__description {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        370ms
        ease,

        transform
        750ms
        370ms
        var(--gf-ease-standard);

}


.gf-hero.is-active
.gf-hero__services {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        450ms
        ease,

        transform
        750ms
        450ms
        var(--gf-ease-standard);

}


.gf-hero.is-active
.gf-hero__actions {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        520ms
        ease,

        transform
        700ms
        520ms
        var(--gf-ease-standard);

}


.gf-hero.is-active
.gf-hero__trust {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        600ms
        ease,

        transform
        700ms
        600ms
        var(--gf-ease-standard);

}


.gf-hero.is-active
.gf-hero__media-mask {

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

    transition:
        clip-path
        950ms
        var(--gf-ease-emphasized);

}


.gf-hero.is-active
.gf-hero__media--main
.gf-hero__media-mask {

    transition-delay:
        120ms;

}


.gf-hero.is-active
.gf-hero__media--lawn
.gf-hero__media-mask {

    transition-delay:
        320ms;

}


.gf-hero.is-active
.gf-hero__media--detail
.gf-hero__media-mask {

    transition-delay:
        440ms;

}


.gf-hero.is-active
.gf-hero__image {

    transform:
        scale(1);

    transition:
        transform
        1.4s
        var(--gf-ease-standard);

}


.gf-hero.is-active
.gf-hero__statement {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        350ms
        ease,

        transform
        800ms
        350ms
        var(--gf-ease-standard);

}


.gf-hero.is-active
.gf-hero__texture-tile {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        460ms
        ease,

        transform
        800ms
        460ms
        var(--gf-ease-standard);

}


.gf-hero.is-active
.gf-hero__bottom {

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

    transition:
        clip-path
        950ms
        600ms
        var(--gf-ease-emphasized);

}


@keyframes gf-hero-line {

    from {

        transform:
            scaleX(0);

        transform-origin:
            left center;

    }

    to {

        transform:
            scaleX(1);

        transform-origin:
            left center;

    }

}



/* ============================================================
   19. COMPUTER
   >= 1200px
============================================================ */

@media (min-width: 1200px) {

    .gf-hero__main {

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

    }


    .gf-hero__content {

        padding-right:
            clamp(
                48px,
                5vw,
                88px
            );

    }


    .gf-hero__visual {

        margin-left:
            8px;

    }

}



/* ============================================================
   20. TABLET
   768px - 1199px
============================================================ */

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

    .gf-hero__main {

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

    }


    .gf-hero__content {

        padding:
            25px
            32px
            22px
            0;

    }


    .gf-hero__title {

        font-size:
            clamp(
                2.55rem,
                5.4vw,
                4.4rem
            );

    }


    .gf-hero__description {

        max-width:
            450px;

        font-size:
            0.78rem;

    }


    .gf-hero__services {

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

        max-width:
            450px;

    }


    .gf-hero__service {

        min-height:
            43px;

        border-bottom:
            var(--gf-border-thin);

    }


    .gf-hero__service:nth-child(2) {

        border-right:
            0;

    }


    .gf-hero__service:nth-child(3),
    .gf-hero__service:nth-child(4) {

        border-bottom:
            0;

    }


    .gf-hero__trust-item:first-child {

        display: none;

    }


    .gf-hero__trust-divider:first-of-type {

        display: none;

    }


    .gf-hero__visual {

        grid-template-columns:
            34% 31% 35%;

    }


    .gf-hero__statement {

        padding:
            18px;

    }


    .gf-hero__statement p {

        font-size:
            0.61rem;

    }


    .gf-hero__statement-icon {

        width: 32px;
        height: 32px;

    }


    .gf-hero__bottom {

        min-height:
            66px;

        padding:
            0 22px;

    }


    .gf-hero__bottom-copy {

        font-size:
            0.46rem;

    }


    .gf-hero__bottom-copy strong {

        font-size:
            0.52rem;

    }

}



/* ============================================================
   21. MOBILE
   481px - 767px
============================================================ */

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

    .gf-hero__container {

        width: 100%;

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

    }


    .gf-hero__main {

        grid-template-columns:
            1fr;

        grid-template-rows:
            56% 44%;

    }


    .gf-hero__content {

        justify-content:
            center;

        padding:
            20px
            var(--gf-gutter)
            14px;

    }


    .gf-hero__eyebrow {

        margin-bottom:
            11px;

        font-size:
            0.53rem;

    }


    .gf-hero__title {

        margin-bottom:
            11px;

        font-size:
            clamp(
                2.3rem,
                10vw,
                3.7rem
            );

        line-height:
            0.88;

    }


    .gf-hero__description {

        max-width:
            520px;

        margin-bottom:
            15px;

        font-size:
            0.72rem;

        line-height:
            1.5;

    }


    .gf-hero__services {

        display: none;

    }


    .gf-hero__actions {

        gap: 22px;

    }


    .gf-hero__primary {

        min-height:
            44px;

        padding:
            0 17px;

        font-size:
            0.57rem;

    }


    .gf-hero__secondary {

        font-size:
            0.55rem;

    }


    .gf-hero__trust {

        margin-top:
            13px;

        font-size:
            0.46rem;

    }


    .gf-hero__trust-item:first-child,
    .gf-hero__trust-divider:first-of-type {

        display: none;

    }


    .gf-hero__visual {

        grid-row:
            2;

        grid-template-columns:
            58% 18% 24%;

        grid-template-rows:
            58% 42%;

        margin:
            0;

    }


    .gf-hero__media--main {

        grid-column:
            1 / 3;

        grid-row:
            1 / 3;

    }


    .gf-hero__statement {

        grid-column:
            3;

        grid-row:
            1;

        margin-left:
            2px;

        padding:
            13px;

    }


    .gf-hero__statement-icon {

        width: 28px;
        height: 28px;

        margin-bottom:
            8px;

    }


    .gf-hero__statement p {

        font-size:
            0.49rem;

        line-height:
            1.4;

    }


    .gf-hero__statement-rule {

        width: 26px;

        margin-top:
            9px;

    }


    .gf-hero__media--lawn {

        grid-column:
            3;

        grid-row:
            2;

        margin:
            2px 0 0 2px;

    }


    .gf-hero__texture-tile,
    .gf-hero__media--detail,
    .gf-hero__visual-accent {

        display: none;

    }


    .gf-hero__bottom {

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

        min-height:
            54px;

        padding:
            0 15px;

    }


    .gf-hero__bottom-item:nth-of-type(4),
    .gf-hero__bottom-divider:nth-of-type(3) {

        display: none;

    }


    .gf-hero__bottom-divider {

        min-height:
            24px;

    }


    .gf-hero__bottom-value {

        font-size:
            1.15rem;

    }


    .gf-hero__bottom-icon {

        width: 28px;
        height: 28px;

    }


    .gf-hero__bottom-copy {

        font-size:
            0.4rem;

    }


    .gf-hero__bottom-copy strong {

        font-size:
            0.44rem;

    }

}



/* ============================================================
   22. SMALL MOBILE
   <= 480px
============================================================ */

@media (max-width: 480px) {

    .gf-hero__container {

        width: 100%;

    }


    .gf-hero__main {

        grid-template-columns:
            1fr;

        grid-template-rows:
            58% 42%;

    }


    .gf-hero__content {

        justify-content:
            center;

        padding:
            13px
            var(--gf-gutter)
            10px;

    }


    .gf-hero__eyebrow {

        gap: 10px;

        margin-bottom:
            9px;

        font-size:
            0.47rem;

        letter-spacing:
            0.11em;

    }


    .gf-hero__eyebrow-line {

        width: 24px;

    }


    .gf-hero__title {

        margin-bottom:
            9px;

        font-size:
            clamp(
                2rem,
                10.7vw,
                3rem
            );

        line-height:
            0.88;

    }


    .gf-hero__description {

        display: -webkit-box;

        max-width:
            410px;

        margin-bottom:
            11px;

        overflow: hidden;

        font-size:
            0.66rem;

        line-height:
            1.42;

        -webkit-line-clamp:
            3;

        -webkit-box-orient:
            vertical;

    }


    .gf-hero__services {

        display: none;

    }


    .gf-hero__actions {

        gap: 16px;

    }


    .gf-hero__primary {

        min-height:
            40px;

        padding:
            0 13px;

        gap:
            12px;

        font-size:
            0.51rem;

        letter-spacing:
            0.045em;

    }


    .gf-hero__secondary {

        font-size:
            0.49rem;

        letter-spacing:
            0.045em;

    }


    .gf-hero__trust {

        gap: 9px;

        margin-top:
            9px;

        font-size:
            0.41rem;

        letter-spacing:
            0.06em;

    }


    .gf-hero__trust-item:first-child,
    .gf-hero__trust-divider:first-of-type {

        display: none;

    }


    .gf-hero__trust-divider {

        height: 10px;

    }


    .gf-hero__visual {

        grid-row:
            2;

        grid-template-columns:
            68% 32%;

        grid-template-rows:
            54% 46%;

        margin: 0;

    }


    .gf-hero__media--main {

        grid-column:
            1;

        grid-row:
            1 / 3;

    }


    .gf-hero__statement {

        grid-column:
            2;

        grid-row:
            1;

        margin-left:
            2px;

        padding:
            11px;

    }


    .gf-hero__statement-icon {

        width: 23px;
        height: 23px;

        margin-bottom:
            6px;

    }


    .gf-hero__statement p {

        font-size:
            0.43rem;

        letter-spacing:
            0.05em;

    }


    .gf-hero__statement-rule {

        width: 22px;

        margin-top:
            7px;

    }


    .gf-hero__media--lawn {

        grid-column:
            2;

        grid-row:
            2;

        margin:
            2px 0 0 2px;

    }


    .gf-hero__media--detail,
    .gf-hero__texture-tile,
    .gf-hero__visual-accent {

        display: none;

    }


    .gf-hero__bottom {

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

        min-height:
            48px;

        padding:
            0 12px;

    }


    .gf-hero__bottom-item:nth-of-type(3),
    .gf-hero__bottom-item:nth-of-type(4),
    .gf-hero__bottom-divider:nth-of-type(2),
    .gf-hero__bottom-divider:nth-of-type(3) {

        display: none;

    }


    .gf-hero__bottom-divider {

        min-height:
            21px;

    }


    .gf-hero__bottom-value {

        font-size:
            1rem;

    }


    .gf-hero__bottom-copy {

        font-size:
            0.37rem;

    }


    .gf-hero__bottom-copy strong {

        font-size:
            0.4rem;

    }

}



/* ============================================================
   23. REDUCED MOTION
============================================================ */

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

    .gf-hero *,
    .gf-hero *::before,
    .gf-hero *::after {

        animation:
            none !important;

        transition:
            none !important;

    }


    .gf-hero__eyebrow,
    .gf-hero__description,
    .gf-hero__services,
    .gf-hero__actions,
    .gf-hero__trust,
    .gf-hero__statement,
    .gf-hero__texture-tile {

        opacity:
            1 !important;

        transform:
            none !important;

    }


    .gf-hero__title-line > span {

        transform:
            none !important;

    }


    .gf-hero__media-mask,
    .gf-hero__bottom {

        clip-path:
            none !important;

    }


    .gf-hero__image {

        transform:
            none !important;

    }

}






























/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   05. SERVICES
============================================================ */


/* ============================================================
   01. SECTION
============================================================ */

.gf-services {

    position: relative;

    overflow: hidden;

    background-color:
        var(--gf-ivory);

    background-image:
        var(--gf-paper-texture);

}


.gf-services::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 31%;
    height: 1px;

    background:
        var(--gf-copper);

    opacity: 0.65;

}


.gf-services::after {

    content: "";

    position: absolute;

    top: 0;
    right: 7%;

    width: 1px;
    height: 110px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            var(--gf-copper),
            transparent
        );

    opacity: 0.35;

}



/* ============================================================
   02. HEADER
============================================================ */

.gf-services__header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, 0.65fr);

    gap:
        clamp(55px, 8vw, 130px);

    align-items: end;

    margin-bottom:
        clamp(54px, 6vw, 86px);

}


.gf-services__heading {

    max-width: 830px;

}


.gf-services__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 21px;

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

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-services__eyebrow-line {

    width: 39px;
    height: 1px;

    flex: 0 0 auto;

    background:
        currentColor;

}


.gf-services__title {

    margin: 0;

    max-width: 800px;

    font-size:
        clamp(
            3.1rem,
            5.2vw,
            6.4rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing: -0.065em;

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

}


.gf-services__title span {

    display: block;

    margin-top: 0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    letter-spacing: -0.045em;

    color:
        var(--gf-green);

}



/* ============================================================
   03. INTRO
============================================================ */

.gf-services__intro {

    position: relative;

    padding:
        0 0 4px 29px;

    border-left:
        1px solid
        rgba(3, 71, 43, 0.15);

}


.gf-services__index {

    display: block;

    margin-bottom: 20px;

    font-family:
        var(--gf-font-serif);

    font-size: 1.05rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-services__intro p {

    max-width: 390px;

    margin:
        0 0 25px;

    font-size:
        0.91rem;

    line-height: 1.75;

    color:
        var(--gf-gray);

}


.gf-services__gallery-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 17px;

    padding-bottom: 7px;

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

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color:
        var(--gf-forest-800);

}


.gf-services__gallery-link::after {

    content: "";

    position: absolute;

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

    height: 1px;

    background:
        var(--gf-copper);

    transform:
        scaleX(0.45);

    transform-origin:
        left;

    transition:
        transform
        380ms
        var(--gf-ease-standard);

}


.gf-services__gallery-link:hover::after {

    transform:
        scaleX(1);

}


.gf-services__gallery-arrow {

    color:
        var(--gf-green);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-services__gallery-link:hover
.gf-services__gallery-arrow {

    transform:
        translate(3px, -3px);

}



/* ============================================================
   04. GRID
============================================================ */

.gf-services__grid {

    display: grid;

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

    grid-template-rows:
        430px
        360px;

    gap: 4px;

    background:
        var(--gf-ivory);

}



/* ============================================================
   05. SERVICE CARD
============================================================ */

.gf-service-card {

    position: relative;

    isolation: isolate;

    display: block;

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

    overflow: hidden;

    color:
        var(--gf-white);

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

    box-shadow:
        0 1px 0
        rgba(3, 61, 39, 0.06);

}


.gf-service-card--landscaping {

    grid-column:
        1 / span 7;

    grid-row:
        1;

}


.gf-service-card--lawn {

    grid-column:
        8 / span 5;

    grid-row:
        1;

}


.gf-service-card--trimming {

    grid-column:
        1 / span 4;

    grid-row:
        2;

}


.gf-service-card--mulch {

    grid-column:
        5 / span 4;

    grid-row:
        2;

}


.gf-service-card--cleanup {

    grid-column:
        9 / span 4;

    grid-row:
        2;

}



/* ============================================================
   06. IMAGE
============================================================ */

.gf-service-card__media,
.gf-service-card__image-mask {

    position: absolute;

    inset: 0;

    margin: 0;

    overflow: hidden;

}


.gf-service-card__image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

    transition:
        transform
        1.1s
        var(--gf-ease-standard),

        filter
        650ms
        ease;

}


.gf-service-card:hover
.gf-service-card__image {

    transform:
        scale(1.045);

    filter:
        saturate(1.04)
        contrast(1.025);

}



/* ============================================================
   07. OVERLAY
============================================================ */

.gf-service-card__shade {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            180deg,
            rgba(3, 29, 19, 0.13) 0%,
            rgba(3, 29, 19, 0.08) 33%,
            rgba(3, 29, 19, 0.83) 100%
        );

    transition:
        background
        550ms
        ease;

}


.gf-service-card:hover
.gf-service-card__shade {

    background:

        linear-gradient(
            180deg,
            rgba(3, 29, 19, 0.08) 0%,
            rgba(3, 29, 19, 0.05) 30%,
            rgba(3, 29, 19, 0.89) 100%
        );

}



/* ============================================================
   08. TOP
============================================================ */

.gf-service-card__top {

    position: absolute;

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

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        25px 27px;

}


.gf-service-card__number {

    display: inline-flex;

    align-items: center;

    gap: 10px;

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

    letter-spacing: 0.13em;

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

}


.gf-service-card__number::after {

    content: "";

    display: block;

    width: 30px;
    height: 1px;

    background:
        var(--gf-copper);

}


.gf-service-card__type {

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

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--gf-leaf);

}



/* ============================================================
   09. CONTENT
============================================================ */

.gf-service-card__content {

    position: absolute;

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

    z-index: 3;

    padding:
        29px 30px 30px;

}


.gf-service-card--featured
.gf-service-card__content {

    max-width:
        630px;

    padding:
        36px 38px;

}


.gf-service-card__kicker {

    display: block;

    margin-bottom: 7px;

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

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color:
        var(--gf-leaf);

}


.gf-service-card__title {

    margin:
        0 0 10px;

    font-size:
        clamp(
            1.7rem,
            2.2vw,
            2.8rem
        );

    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -0.045em;

    color:
        var(--gf-white);

}


.gf-service-card--featured
.gf-service-card__title {

    font-size:
        clamp(
            2.8rem,
            4vw,
            5rem
        );

}


.gf-service-card__title span {

    display: block;

}


.gf-service-card__description {

    max-width:
        500px;

    margin:
        0;

    font-size:
        0.76rem;

    line-height: 1.65;

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

}


.gf-service-card--featured
.gf-service-card__description {

    max-width:
        580px;

    font-size:
        0.88rem;

}



/* ============================================================
   10. SERVICE META
============================================================ */

.gf-service-card__meta {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 17px;

    font-size: 0.48rem;

    line-height: 1.4;

    letter-spacing: 0.075em;

    text-transform: uppercase;

}


.gf-service-card__meta span {

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

}


.gf-service-card__meta strong {

    font-weight: 700;

    color:
        var(--gf-leaf-soft);

}



/* ============================================================
   11. CARD ACTION
============================================================ */

.gf-service-card__action {

    position: absolute;

    right: 0;
    bottom: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        13px 17px;

    background:
        var(--gf-paper);

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

    letter-spacing: 0.08em;

    text-transform: uppercase;

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

    transform:
        translateY(100%);

    transition:
        transform
        420ms
        var(--gf-ease-emphasized);

}


.gf-service-card__action span:last-child {

    color:
        var(--gf-green);

}


.gf-service-card:hover
.gf-service-card__action {

    transform:
        translateY(0);

}



/* ============================================================
   12. GREEN EDITORIAL EDGE
============================================================ */

.gf-service-card::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 4;

    width: 3px;
    height: 0;

    background:
        var(--gf-green);

    transition:
        height
        520ms
        var(--gf-ease-emphasized);

}


.gf-service-card:hover::after {

    height: 100%;

}



/* ============================================================
   13. ADDITIONAL SERVICES
============================================================ */

.gf-services__additional {

    display: grid;

    grid-template-columns:
        minmax(290px, 0.9fr)
        minmax(420px, 1.5fr)
        auto;

    align-items: center;

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

    margin-top:
        4px;

    padding:
        30px 34px;

    border:
        1px solid
        rgba(3, 71, 43, 0.10);

    background:
        var(--gf-paper);

    box-shadow:
        var(--gf-shadow-soft);

}


.gf-services__additional-heading {

    display: flex;

    align-items: flex-start;

    gap: 16px;

}


.gf-services__additional-index {

    display: grid;

    width: 35px;
    height: 35px;

    flex: 0 0 auto;

    place-items: center;

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

    color:
        var(--gf-leaf);

    font-size: 1.2rem;
    font-weight: 500;

}


.gf-services__additional-label {

    display: block;

    margin-bottom: 4px;

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

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-services__additional-heading p {

    margin: 0;

    max-width: 290px;

    font-size: 0.71rem;

    line-height: 1.55;

    color:
        var(--gf-gray);

}


.gf-services__additional-list {

    display: flex;

    flex-wrap: wrap;

    gap:
        8px 23px;

}


.gf-services__additional-list span {

    position: relative;

    padding-left: 14px;

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

    letter-spacing: 0.055em;

    text-transform: uppercase;

    color:
        var(--gf-graphite);

}


.gf-services__additional-list span::before {

    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 5px;
    height: 5px;

    transform:
        translateY(-50%);

    background:
        var(--gf-green);

}


.gf-services__additional-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 17px;

    min-height: 48px;

    padding:
        0 18px;

    white-space: nowrap;

    border:
        1px solid
        var(--gf-forest-800);

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

    color:
        var(--gf-white);

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

    letter-spacing: 0.075em;

    text-transform: uppercase;

    transition:
        background-color
        280ms
        ease;

}


.gf-services__additional-cta:hover {

    background:
        var(--gf-green);

}



/* ============================================================
   14. JS REVEAL PREPARATION
============================================================ */

/*
    The section is fully visible by default.

    These hidden states only exist after JS explicitly
    prepares the section, so content never disappears
    permanently if JavaScript fails.
*/

.gf-services.is-prepared
.gf-services__eyebrow,
.gf-services.is-prepared
.gf-services__title,
.gf-services.is-prepared
.gf-services__intro {

    opacity: 0;

    transform:
        translateY(24px);

}


.gf-services.is-prepared
.gf-service-card__image-mask {

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

}


.gf-services.is-prepared
.gf-service-card__image {

    transform:
        scale(1.075);

}


.gf-services.is-prepared
.gf-service-card__top,
.gf-services.is-prepared
.gf-service-card__content {

    opacity: 0;

    transform:
        translateY(20px);

}


.gf-services.is-prepared
.gf-services__additional {

    opacity: 0;

    transform:
        translateY(24px);

}



/* ============================================================
   15. REVEALED STATE
============================================================ */

.gf-services.is-visible
.gf-services__eyebrow {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 500ms ease,
        transform 700ms
        var(--gf-ease-standard);

}


.gf-services.is-visible
.gf-services__title {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 650ms
        80ms ease,

        transform 850ms
        80ms
        var(--gf-ease-standard);

}


.gf-services.is-visible
.gf-services__intro {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 600ms
        180ms ease,

        transform 800ms
        180ms
        var(--gf-ease-standard);

}


.gf-services.is-visible
.gf-service-card__image-mask {

    clip-path:
        inset(0);

    transition:
        clip-path
        950ms
        var(--gf-ease-emphasized);

}


.gf-services.is-visible
.gf-service-card__image {

    transform:
        scale(1.001);

    transition:
        transform
        1.25s
        var(--gf-ease-standard),

        filter
        650ms ease;

}


.gf-services.is-visible
.gf-service-card__top,
.gf-services.is-visible
.gf-service-card__content {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 620ms ease,
        transform 760ms
        var(--gf-ease-standard);

}


/* Image / content staggering */

.gf-services.is-visible
.gf-service-card:nth-child(1)
.gf-service-card__image-mask {

    transition-delay: 160ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(2)
.gf-service-card__image-mask {

    transition-delay: 260ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(3)
.gf-service-card__image-mask {

    transition-delay: 340ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(4)
.gf-service-card__image-mask {

    transition-delay: 420ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(5)
.gf-service-card__image-mask {

    transition-delay: 500ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(1)
.gf-service-card__top,
.gf-services.is-visible
.gf-service-card:nth-child(1)
.gf-service-card__content {

    transition-delay: 370ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(2)
.gf-service-card__top,
.gf-services.is-visible
.gf-service-card:nth-child(2)
.gf-service-card__content {

    transition-delay: 460ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(3)
.gf-service-card__top,
.gf-services.is-visible
.gf-service-card:nth-child(3)
.gf-service-card__content {

    transition-delay: 540ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(4)
.gf-service-card__top,
.gf-services.is-visible
.gf-service-card:nth-child(4)
.gf-service-card__content {

    transition-delay: 620ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(5)
.gf-service-card__top,
.gf-services.is-visible
.gf-service-card:nth-child(5)
.gf-service-card__content {

    transition-delay: 700ms;

}


.gf-services.is-visible
.gf-services__additional {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 650ms
        740ms ease,

        transform 800ms
        740ms
        var(--gf-ease-standard);

}



/* ============================================================
   16. COMPUTER
   >= 1200px
============================================================ */

@media (min-width: 1200px) {

    .gf-services__grid {

        grid-template-rows:
            430px
            360px;

    }

}



/* ============================================================
   17. TABLET
   768px - 1199px
============================================================ */

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

    .gf-services__header {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(260px, 0.85fr);

        gap: 45px;

    }


    .gf-services__title {

        font-size:
            clamp(
                3rem,
                6.7vw,
                4.8rem
            );

    }


    .gf-services__grid {

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

        grid-template-rows:
            410px
            330px
            330px;

    }


    .gf-service-card--landscaping {

        grid-column:
            1 / -1;

        grid-row:
            1;

    }


    .gf-service-card--lawn {

        grid-column:
            1;

        grid-row:
            2;

    }


    .gf-service-card--trimming {

        grid-column:
            2;

        grid-row:
            2;

    }


    .gf-service-card--mulch {

        grid-column:
            1;

        grid-row:
            3;

    }


    .gf-service-card--cleanup {

        grid-column:
            2;

        grid-row:
            3;

    }


    .gf-service-card__content {

        padding:
            25px;

    }


    .gf-service-card--featured
    .gf-service-card__content {

        padding:
            32px;

    }


    .gf-services__additional {

        grid-template-columns:
            1fr
            1.25fr;

    }


    .gf-services__additional-cta {

        grid-column:
            1 / -1;

        justify-self:
            start;

    }

}



/* ============================================================
   18. MOBILE
   481px - 767px
============================================================ */

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

    .gf-services__header {

        grid-template-columns:
            1fr;

        gap: 30px;

        margin-bottom:
            42px;

    }


    .gf-services__title {

        max-width:
            560px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.4rem
            );

    }


    .gf-services__intro {

        max-width:
            540px;

    }


    .gf-services__grid {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            410px
            310px
            310px;

        gap: 3px;

    }


    .gf-service-card--landscaping {

        grid-column:
            1 / -1;

        grid-row:
            1;

    }


    .gf-service-card--lawn {

        grid-column:
            1;

        grid-row:
            2;

    }


    .gf-service-card--trimming {

        grid-column:
            2;

        grid-row:
            2;

    }


    .gf-service-card--mulch {

        grid-column:
            1;

        grid-row:
            3;

    }


    .gf-service-card--cleanup {

        grid-column:
            2;

        grid-row:
            3;

    }


    .gf-service-card__top {

        padding:
            18px;

    }


    .gf-service-card__content,
    .gf-service-card--featured
    .gf-service-card__content {

        padding:
            21px;

    }


    .gf-service-card__description {

        font-size:
            0.68rem;

    }


    .gf-service-card:not(
        .gf-service-card--featured
    )
    .gf-service-card__description {

        display: -webkit-box;

        overflow: hidden;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            3;

    }


    .gf-service-card__meta {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 3px;

        margin-top:
            12px;

    }


    .gf-service-card__action {

        display: none;

    }


    .gf-services__additional {

        grid-template-columns:
            1fr;

        gap: 24px;

        padding:
            26px;

    }


    .gf-services__additional-cta {

        justify-self:
            start;

    }

}



/* ============================================================
   19. SMALL MOBILE
   <= 480px
============================================================ */

@media (max-width: 480px) {

    .gf-services__header {

        grid-template-columns:
            1fr;

        gap: 24px;

        margin-bottom:
            34px;

    }


    .gf-services__eyebrow {

        margin-bottom:
            14px;

        font-size:
            0.58rem;

    }


    .gf-services__title {

        font-size:
            clamp(
                2.55rem,
                12vw,
                3.65rem
            );

    }


    .gf-services__intro {

        padding-left:
            18px;

    }


    .gf-services__intro p {

        font-size:
            0.78rem;

    }


    .gf-services__grid {

        display: grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            390px
            repeat(4, 295px);

        gap: 3px;

    }


    .gf-service-card--landscaping,
    .gf-service-card--lawn,
    .gf-service-card--trimming,
    .gf-service-card--mulch,
    .gf-service-card--cleanup {

        grid-column:
            1;

    }


    .gf-service-card--landscaping {

        grid-row:
            1;

    }


    .gf-service-card--lawn {

        grid-row:
            2;

    }


    .gf-service-card--trimming {

        grid-row:
            3;

    }


    .gf-service-card--mulch {

        grid-row:
            4;

    }


    .gf-service-card--cleanup {

        grid-row:
            5;

    }


    .gf-service-card__top {

        padding:
            17px;

    }


    .gf-service-card__content,
    .gf-service-card--featured
    .gf-service-card__content {

        padding:
            20px;

    }


    .gf-service-card__title,
    .gf-service-card--featured
    .gf-service-card__title {

        font-size:
            clamp(
                1.9rem,
                9vw,
                2.7rem
            );

    }


    .gf-service-card--featured
    .gf-service-card__description,
    .gf-service-card__description {

        font-size:
            0.7rem;

    }


    .gf-service-card__meta {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 2px;

        margin-top:
            11px;

        font-size:
            0.43rem;

    }


    .gf-service-card__action {

        display: none;

    }


    .gf-services__additional {

        grid-template-columns:
            1fr;

        gap: 22px;

        padding:
            23px 20px;

    }


    .gf-services__additional-list {

        display: grid;

        gap: 11px;

    }


    .gf-services__additional-cta {

        width: 100%;

    }

}



/* ============================================================
   20. REDUCED MOTION
============================================================ */

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

    .gf-services *,
    .gf-services *::before,
    .gf-services *::after {

        animation:
            none !important;

        transition:
            none !important;

    }


    .gf-services__eyebrow,
    .gf-services__title,
    .gf-services__intro,
    .gf-service-card__top,
    .gf-service-card__content,
    .gf-services__additional {

        opacity:
            1 !important;

        transform:
            none !important;

    }


    .gf-service-card__image-mask {

        clip-path:
            none !important;

    }


    .gf-service-card__image {

        transform:
            none !important;

    }
}





/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   SERVICES EXPANSION
   06. DOWNSPOUT DRAINAGE SOLUTIONS
   07. GUTTER CLEANING & MAINTENANCE

   Paste AFTER the existing Services CSS.
============================================================ */


/* ============================================================
   01. EXPANDED DESKTOP GRID
============================================================ */

.gf-services__grid {

    grid-template-rows:
        430px
        360px
        390px;

}


/* Existing cards remain untouched. */


/* ------------------------------------------------------------
   DOWNSPOUT
------------------------------------------------------------ */

.gf-service-card--downspout {

    grid-column:
        1 / span 6;

    grid-row:
        3;

}


/* ------------------------------------------------------------
   GUTTER
------------------------------------------------------------ */

.gf-service-card--gutter {

    grid-column:
        7 / span 6;

    grid-row:
        3;

}



/* ============================================================
   02. INFRASTRUCTURE CARDS
============================================================ */

.gf-service-card--infrastructure {

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

}


.gf-service-card--infrastructure
.gf-service-card__content {

    max-width:
        540px;

    padding:
        31px 32px 33px;

}


.gf-service-card--infrastructure
.gf-service-card__title {

    max-width:
        500px;

    font-size:
        clamp(
            2rem,
            2.65vw,
            3.4rem
        );

}


.gf-service-card--infrastructure
.gf-service-card__description {

    max-width:
        480px;

}



/* ============================================================
   03. GRAPHIC MEDIA
============================================================ */

.gf-service-card__media--graphic {

    position: absolute;

    inset: 0;

    overflow: hidden;

    background-color:
        var(--gf-forest-950);

}


/*
    Architectural vertical division.
*/

.gf-service-card__media--graphic::before {

    content: "";

    position: absolute;

    top: 0;
    right: 28%;

    width: 1px;
    height: 100%;

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

}


/*
    Copper structural accent.
*/

.gf-service-card__media--graphic::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 34%;
    height: 4px;

    background:
        var(--gf-copper);

}



/* ============================================================
   04. TECHNICAL GRID
============================================================ */

.gf-service-card__graphic-grid {

    position: absolute;

    inset: 0;

    opacity:
        0.11;

    background-image:

        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.08
            )
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.08
            )
            1px,
            transparent 1px
        );

    background-size:
        44px 44px;

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

}



/* ============================================================
   05. DOWNSPOUT VISUAL
============================================================ */

.gf-service-card__media--downspout {

    background:

        radial-gradient(
            circle at 77% 42%,
            rgba(
                5,
                184,
                92,
                0.13
            ),
            transparent 28%
        ),

        var(--gf-forest-950);

}


.gf-service-card__drainage-art {

    position: absolute;

    top: 44px;
    right:
        clamp(
            28px,
            4vw,
            70px
        );

    width:
        clamp(
            210px,
            29vw,
            390px
        );

    color:
        rgba(
            167,
            226,
            127,
            0.62
        );

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        900ms
        var(--gf-ease-standard),

        color
        500ms
        ease;

}


.gf-service-card__drainage-art svg {

    display: block;

    width: 100%;
    height: auto;

}


.gf-service-card--downspout:hover
.gf-service-card__drainage-art {

    color:
        rgba(
            167,
            226,
            127,
            0.92
        );

    transform:
        translate3d(
            -8px,
            3px,
            0
        );

}



/* ============================================================
   06. GUTTER VISUAL
============================================================ */

.gf-service-card__media--gutter {

    background:

        radial-gradient(
            circle at 75% 35%,
            rgba(
                184,
                116,
                60,
                0.16
            ),
            transparent 31%
        ),

        var(--gf-forest-900);

}


.gf-service-card__gutter-art {

    position: absolute;

    top: 47px;
    right:
        clamp(
            25px,
            4vw,
            65px
        );

    width:
        clamp(
            210px,
            29vw,
            390px
        );

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

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        900ms
        var(--gf-ease-standard),

        color
        500ms
        ease;

}


.gf-service-card__gutter-art svg {

    display: block;

    width: 100%;
    height: auto;

}


.gf-service-card--gutter:hover
.gf-service-card__gutter-art {

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

    transform:
        translate3d(
            7px,
            2px,
            0
        );

}



/* ============================================================
   07. GRAPHIC LABEL
============================================================ */

.gf-service-card__graphic-label {

    position: absolute;

    top: 28px;
    right: 27px;

    z-index: 2;

    font-family:
        var(--gf-font-serif);

    font-size:
        0.72rem;

    font-style: italic;
    font-weight: 500;

    letter-spacing:
        0.02em;

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

}


.gf-service-card__graphic-axis {

    position: absolute;

    top: 25px;
    right: 18px;

    width: 1px;
    height: 95px;

    background:
        linear-gradient(
            to bottom,
            var(--gf-copper),
            transparent
        );

}



/* ============================================================
   08. CUSTOM SHADE

   Graphic cards do not need the same heavy photo overlay.
============================================================ */

.gf-service-card--infrastructure
.gf-service-card__shade {

    background:

        linear-gradient(
            90deg,
            rgba(
                3,
                29,
                19,
                0.93
            )
            0%,

            rgba(
                3,
                29,
                19,
                0.76
            )
            48%,

            rgba(
                3,
                29,
                19,
                0.16
            )
            100%
        ),

        linear-gradient(
            to top,
            rgba(
                3,
                29,
                19,
                0.88
            ),
            transparent 65%
        );

}


.gf-service-card--infrastructure:hover
.gf-service-card__shade {

    background:

        linear-gradient(
            90deg,
            rgba(
                3,
                29,
                19,
                0.91
            )
            0%,

            rgba(
                3,
                29,
                19,
                0.67
            )
            47%,

            rgba(
                3,
                29,
                19,
                0.1
            )
            100%
        ),

        linear-gradient(
            to top,
            rgba(
                3,
                29,
                19,
                0.84
            ),
            transparent 67%
        );

}



/* ============================================================
   09. HOVER — GRAPHIC BACKGROUND
============================================================ */

.gf-service-card--infrastructure
.gf-service-card__graphic-grid {

    transition:
        transform
        1.1s
        var(--gf-ease-standard),

        opacity
        500ms
        ease;

}


.gf-service-card--infrastructure:hover
.gf-service-card__graphic-grid {

    opacity:
        0.16;

    transform:
        scale(1.025);

}



/* ============================================================
   10. REVEAL — NEW CARDS

   Extends the current 5-card stagger to cards 6 and 7.
============================================================ */

.gf-services.is-prepared
.gf-service-card--infrastructure
.gf-service-card__media--graphic {

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

}


.gf-services.is-visible
.gf-service-card--infrastructure
.gf-service-card__media--graphic {

    clip-path:
        inset(0);

    transition:
        clip-path
        950ms
        var(--gf-ease-emphasized);

}


.gf-services.is-visible
.gf-service-card:nth-child(6)
.gf-service-card__media--graphic {

    transition-delay:
        560ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(7)
.gf-service-card__media--graphic {

    transition-delay:
        640ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(6)
.gf-service-card__top,
.gf-services.is-visible
.gf-service-card:nth-child(6)
.gf-service-card__content {

    transition-delay:
        760ms;

}


.gf-services.is-visible
.gf-service-card:nth-child(7)
.gf-service-card__top,
.gf-services.is-visible
.gf-service-card:nth-child(7)
.gf-service-card__content {

    transition-delay:
        840ms;

}



/* ============================================================
   11. COMPUTER
   >= 1200px
============================================================ */

@media (min-width: 1200px) {

    .gf-services__grid {

        grid-template-rows:
            430px
            360px
            390px;

    }

}



/* ============================================================
   12. TABLET
   768px - 1199px
============================================================ */

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

    .gf-services__grid {

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

        grid-template-rows:
            410px
            330px
            330px
            350px;

    }


    .gf-service-card--downspout {

        grid-column:
            1;

        grid-row:
            4;

    }


    .gf-service-card--gutter {

        grid-column:
            2;

        grid-row:
            4;

    }


    .gf-service-card--infrastructure
    .gf-service-card__content {

        padding:
            25px;

    }


    .gf-service-card--infrastructure
    .gf-service-card__title {

        font-size:
            clamp(
                1.8rem,
                3.5vw,
                2.75rem
            );

    }


    .gf-service-card__drainage-art,
    .gf-service-card__gutter-art {

        top:
            53px;

        right:
            20px;

        width:
            min(
                270px,
                58%
            );

        opacity:
            0.8;

    }

}



/* ============================================================
   13. MOBILE
   481px - 767px
============================================================ */

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

    .gf-services__grid {

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

        grid-template-rows:
            410px
            310px
            310px
            325px;

    }


    .gf-service-card--downspout {

        grid-column:
            1;

        grid-row:
            4;

    }


    .gf-service-card--gutter {

        grid-column:
            2;

        grid-row:
            4;

    }


    .gf-service-card--infrastructure
    .gf-service-card__content {

        padding:
            20px;

    }


    .gf-service-card--infrastructure
    .gf-service-card__title {

        max-width:
            100%;

        font-size:
            clamp(
                1.55rem,
                4.7vw,
                2.25rem
            );

    }


    .gf-service-card--infrastructure
    .gf-service-card__description {

        font-size:
            0.68rem;

    }


    .gf-service-card__drainage-art,
    .gf-service-card__gutter-art {

        top:
            47px;

        right:
            12px;

        width:
            65%;

        opacity:
            0.62;

    }


    .gf-service-card__graphic-label,
    .gf-service-card__graphic-axis {

        display:
            none;

    }

}



/* ============================================================
   14. SMALL MOBILE
   <= 480px
============================================================ */

@media (max-width: 480px) {

    .gf-services__grid {

        grid-template-columns:
            1fr;

        grid-template-rows:
            390px
            repeat(
                6,
                305px
            );

    }


    .gf-service-card--downspout,
    .gf-service-card--gutter {

        grid-column:
            1;

    }


    .gf-service-card--downspout {

        grid-row:
            6;

    }


    .gf-service-card--gutter {

        grid-row:
            7;

    }


    .gf-service-card--infrastructure
    .gf-service-card__content {

        max-width:
            100%;

        padding:
            20px;

    }


    .gf-service-card--infrastructure
    .gf-service-card__title {

        max-width:
            330px;

        font-size:
            clamp(
                1.8rem,
                9vw,
                2.55rem
            );

    }


    .gf-service-card--infrastructure
    .gf-service-card__description {

        max-width:
            340px;

        font-size:
            0.72rem;

        line-height:
            1.58;

    }


    .gf-service-card__drainage-art,
    .gf-service-card__gutter-art {

        top:
            38px;

        right:
            -23px;

        width:
            58%;

        opacity:
            0.48;

    }


    .gf-service-card__graphic-label,
    .gf-service-card__graphic-axis {

        display:
            none;

    }


    .gf-service-card--infrastructure
    .gf-service-card__type {

        display:
            none;

    }

}



/* ============================================================
   15. REDUCED MOTION
============================================================ */

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

    .gf-service-card--infrastructure
    .gf-service-card__media--graphic {

        clip-path:
            none !important;

    }


    .gf-service-card__drainage-art,
    .gf-service-card__gutter-art,
    .gf-service-card__graphic-grid {

        transform:
            none !important;

    }

}





































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   06. WHY CHOOSE US
============================================================ */


/* ============================================================
   01. SECTION
============================================================ */

.gf-why {

    position: relative;

    overflow: hidden;

    background-color:
        var(--gf-paper);

    background-image:
        var(--gf-paper-texture);

}


.gf-why::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 35%;
    height: 3px;

    background:
        var(--gf-green);

}


.gf-why::after {

    content: "";

    position: absolute;

    right: -180px;
    bottom: -230px;

    width: 520px;
    height: 520px;

    border:
        1px solid
        rgba(3, 71, 43, 0.035);

    transform:
        rotate(31deg);

    pointer-events: none;

}



/* ============================================================
   02. HEADER
============================================================ */

.gf-why__header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);

    align-items: end;

    gap:
        clamp(55px, 8vw, 130px);

    margin-bottom:
        clamp(52px, 6vw, 88px);

}


.gf-why__heading {

    max-width: 850px;

}


.gf-why__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 21px;

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

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-why__eyebrow-line {

    width: 40px;
    height: 1px;

    flex: 0 0 auto;

    background:
        currentColor;

}


.gf-why__title {

    max-width: 840px;

    margin: 0;

    font-size:
        clamp(
            3rem,
            5vw,
            6.1rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing: -0.064em;

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

}


.gf-why__title span {

    display: block;

    margin-top: 0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    letter-spacing: -0.045em;

    color:
        var(--gf-green);

}



/* ============================================================
   03. HEADER NOTE
============================================================ */

.gf-why__header-note {

    padding:
        0 0 4px 28px;

    border-left:
        1px solid
        rgba(3, 71, 43, 0.14);

}


.gf-why__section-number {

    display: block;

    margin-bottom: 18px;

    font-family:
        var(--gf-font-serif);

    font-size: 1.05rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-why__header-note p {

    max-width: 360px;

    margin: 0;

    font-size: 0.9rem;

    line-height: 1.72;

    color:
        var(--gf-gray);

}



/* ============================================================
   04. MAIN LAYOUT
============================================================ */

.gf-why__layout {

    display: grid;

    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(0, 1.08fr);

    min-height: 690px;

    box-shadow:
        var(--gf-shadow-large);

}



/* ============================================================
   05. LEFT VISUAL
============================================================ */

.gf-why__visual {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr 38%;

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

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

    overflow: hidden;

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

}



/* ============================================================
   06. IMAGE
============================================================ */

.gf-why__figure {

    position: relative;

    grid-column:
        1 / -1;

    grid-row:
        1;

    min-height: 0;

    margin: 0;

    overflow: hidden;

}


.gf-why__image-mask {

    position: absolute;

    inset: 0;

    overflow: hidden;

}


.gf-why__image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center;

    transform:
        scale(1.001);

    transition:
        transform
        1.4s
        var(--gf-ease-standard),

        filter
        700ms
        ease;

}


.gf-why__visual:hover
.gf-why__image {

    transform:
        scale(1.035);

    filter:
        contrast(1.02)
        saturate(1.04);

}



/* DARK IMAGE SHADING */

.gf-why__figure::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(3, 29, 19, 0.04) 0%,
            rgba(3, 29, 19, 0.06) 47%,
            rgba(3, 29, 19, 0.58) 100%
        );

    pointer-events: none;

}



/* ============================================================
   07. STATEMENT PANEL
============================================================ */

.gf-why__statement {

    position: absolute;

    right: 0;
    bottom: 76px;

    z-index: 4;

    width:
        min(
            45%,
            310px
        );

    padding:
        clamp(25px, 3vw, 43px);

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-why__statement::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        var(--gf-green);

}


.gf-why__statement-mark {

    width: 48px;
    height: 48px;

    margin-bottom: 25px;

    color:
        var(--gf-leaf);

}


.gf-why__statement-mark svg {

    width: 100%;
    height: 100%;

}


.gf-why__statement-label {

    display: block;

    margin-bottom: 11px;

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

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-why__statement p {

    margin: 0;

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.8rem
        );

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -0.035em;

    color:
        var(--gf-white);

}


.gf-why__statement p strong {

    display: block;

    margin-top: 5px;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-green-bright);

}


.gf-why__statement-rule {

    display: block;

    width: 45px;
    height: 1px;

    margin-top: 24px;

    background:
        var(--gf-copper);

}



/* ============================================================
   08. FACTS BAR
============================================================ */

.gf-why__facts {

    position: relative;

    z-index: 5;

    grid-column:
        1 / -1;

    grid-row:
        2;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    min-height: 76px;

    padding:
        0 28px;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-why__fact {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.gf-why__fact span {

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

    letter-spacing: 0.12em;

    text-transform: uppercase;

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

}


.gf-why__fact strong {

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

    letter-spacing: 0.055em;

    text-transform: uppercase;

    color:
        var(--gf-white);

}


.gf-why__fact:last-child {

    align-items:
        flex-end;

    text-align:
        right;

}


.gf-why__fact-divider {

    width: 1px;
    height: 28px;

    margin:
        0 25px;

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

}



/* ============================================================
   09. RIGHT CONTENT
============================================================ */

.gf-why__content {

    display: flex;

    flex-direction: column;

    min-width: 0;

    background:
        var(--gf-ivory);

}


.gf-why__content-intro {

    display: grid;

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

    gap: 38px;

    padding:
        39px 42px;

    border-bottom:
        1px solid
        rgba(3, 71, 43, 0.11);

}


.gf-why__content-label {

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

    line-height: 1.5;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-why__content-intro p {

    max-width: 510px;

    margin: 0;

    font-size: 0.81rem;

    line-height: 1.7;

    color:
        var(--gf-gray);

}



/* ============================================================
   10. REASONS
============================================================ */

.gf-why__reasons {

    flex: 1;

    display: grid;

    grid-template-rows:
        repeat(4, 1fr);

}



/* ============================================================
   11. REASON
============================================================ */

.gf-why__reason {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 22px;

    padding:
        24px 39px;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(3, 71, 43, 0.11);

    cursor: default;

    outline: none;

    transition:
        background-color
        360ms
        var(--gf-ease-standard),

        padding-left
        360ms
        var(--gf-ease-standard);

}


.gf-why__reason::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        var(--gf-green);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform
        420ms
        var(--gf-ease-emphasized);

}


.gf-why__reason::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background:

        linear-gradient(
            90deg,
            rgba(5, 184, 92, 0.055),
            transparent 55%
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity
        350ms
        ease;

}


.gf-why__reason.is-active {

    background:
        var(--gf-paper);

    padding-left:
        46px;

}


.gf-why__reason.is-active::before {

    transform:
        scaleY(1);

    transform-origin:
        top;

}


.gf-why__reason.is-active::after {

    opacity: 1;

}



/* ============================================================
   12. REASON CONTENT
============================================================ */

.gf-why__reason-number,
.gf-why__reason-content,
.gf-why__reason-arrow {

    position: relative;

    z-index: 2;

}


.gf-why__reason-number {

    font-family:
        var(--gf-font-serif);

    font-size: 0.93rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-why__reason-content h3 {

    margin:
        0 0 5px;

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

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -0.035em;

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

}


.gf-why__reason-content p {

    max-width: 500px;

    margin: 0;

    font-size: 0.7rem;

    line-height: 1.62;

    color:
        var(--gf-gray);

}


.gf-why__reason-arrow {

    font-size: 0.95rem;

    color:
        var(--gf-green);

    opacity: 0.35;

    transform:
        translate(0, 0);

    transition:
        opacity
        280ms
        ease,

        transform
        350ms
        var(--gf-ease-standard);

}


.gf-why__reason.is-active
.gf-why__reason-arrow {

    opacity: 1;

    transform:
        translate(3px, -3px);

}



/* ============================================================
   13. CTA
============================================================ */

.gf-why__cta {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    min-height: 91px;

    padding:
        20px 31px 20px 40px;

    color:
        var(--gf-white);

    background-color:
        var(--gf-charcoal);

}


.gf-why__cta > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.gf-why__cta-label {

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

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-why__cta strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.26rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-white);

}


.gf-why__cta-button {

    position: relative;

    isolation: isolate;

    display: inline-flex;

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

    gap: 20px;

    min-height: 46px;

    padding:
        0 18px;

    overflow: hidden;

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

    color:
        var(--gf-white);

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

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.gf-why__cta-button::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        400ms
        var(--gf-ease-emphasized);

}


.gf-why__cta-button:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-why__cta-arrow {

    transition:
        transform
        280ms
        var(--gf-ease-standard);

}


.gf-why__cta-button:hover
.gf-why__cta-arrow {

    transform:
        translateX(4px);

}



/* ============================================================
   14. ANIMATION PREPARATION
============================================================ */

/*
    Content is visible without JS.
    Only JS adds .is-prepared.
*/

.gf-why.is-prepared
.gf-why__eyebrow,
.gf-why.is-prepared
.gf-why__title,
.gf-why.is-prepared
.gf-why__header-note {

    opacity: 0;

    transform:
        translateY(24px);

}


.gf-why.is-prepared
.gf-why__image-mask {

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

}


.gf-why.is-prepared
.gf-why__image {

    transform:
        scale(1.07);

}


.gf-why.is-prepared
.gf-why__statement {

    opacity: 0;

    transform:
        translateX(28px);

}


.gf-why.is-prepared
.gf-why__facts {

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

}


.gf-why.is-prepared
.gf-why__content-intro {

    opacity: 0;

    transform:
        translateY(20px);

}


.gf-why.is-prepared
.gf-why__reason {

    opacity: 0;

    transform:
        translateX(26px);

}


.gf-why.is-prepared
.gf-why__cta {

    opacity: 0;

}



/* ============================================================
   15. ANIMATION VISIBLE
============================================================ */

.gf-why.is-visible
.gf-why__eyebrow {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        550ms ease,

        transform
        720ms
        var(--gf-ease-standard);

}


.gf-why.is-visible
.gf-why__title {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        80ms ease,

        transform
        850ms
        80ms
        var(--gf-ease-standard);

}


.gf-why.is-visible
.gf-why__header-note {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        150ms ease,

        transform
        780ms
        150ms
        var(--gf-ease-standard);

}


.gf-why.is-visible
.gf-why__image-mask {

    clip-path:
        inset(0);

    transition:
        clip-path
        1.05s
        170ms
        var(--gf-ease-emphasized);

}


.gf-why.is-visible
.gf-why__image {

    transform:
        scale(1.001);

    transition:
        transform
        1.45s
        170ms
        var(--gf-ease-standard),

        filter
        700ms ease;

}


.gf-why.is-visible
.gf-why__statement {

    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        650ms
        480ms ease,

        transform
        850ms
        480ms
        var(--gf-ease-standard);

}


.gf-why.is-visible
.gf-why__facts {

    clip-path:
        inset(0);

    transition:
        clip-path
        800ms
        580ms
        var(--gf-ease-emphasized);

}


.gf-why.is-visible
.gf-why__content-intro {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        280ms ease,

        transform
        780ms
        280ms
        var(--gf-ease-standard);

}


.gf-why.is-visible
.gf-why__reason {

    opacity: 1;

    transform:
        translateX(0);

    transition:
        opacity
        550ms ease,

        transform
        720ms
        var(--gf-ease-standard),

        background-color
        360ms
        var(--gf-ease-standard),

        padding-left
        360ms
        var(--gf-ease-standard);

}


.gf-why.is-visible
.gf-why__reason:nth-child(1) {

    transition-delay:
        390ms,
        390ms,
        0ms,
        0ms;

}


.gf-why.is-visible
.gf-why__reason:nth-child(2) {

    transition-delay:
        470ms,
        470ms,
        0ms,
        0ms;

}


.gf-why.is-visible
.gf-why__reason:nth-child(3) {

    transition-delay:
        550ms,
        550ms,
        0ms,
        0ms;

}


.gf-why.is-visible
.gf-why__reason:nth-child(4) {

    transition-delay:
        630ms,
        630ms,
        0ms,
        0ms;

}


.gf-why.is-visible
.gf-why__cta {

    opacity: 1;

    transition:
        opacity
        650ms
        720ms
        ease;

}



/* ============================================================
   16. COMPUTER
   >= 1200px
============================================================ */

@media (min-width: 1200px) {

    .gf-why__layout {

        grid-template-columns:
            minmax(510px, 0.92fr)
            minmax(560px, 1.08fr);

    }


    .gf-why__visual {

        min-height: 690px;

    }

}



/* ============================================================
   17. TABLET
   768px - 1199px
============================================================ */

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

    .gf-why__header {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(250px, 0.85fr);

        gap: 45px;

    }


    .gf-why__title {

        font-size:
            clamp(
                3rem,
                6.5vw,
                4.8rem
            );

    }


    .gf-why__layout {

        grid-template-columns:
            0.9fr
            1.1fr;

        min-height: 650px;

    }


    .gf-why__statement {

        width: 48%;

        padding: 25px;

    }


    .gf-why__statement p {

        font-size: 1.2rem;

    }


    .gf-why__content-intro {

        grid-template-columns:
            1fr;

        gap: 10px;

        padding:
            28px 29px;

    }


    .gf-why__reason {

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

        gap: 15px;

        padding:
            20px 27px;

    }


    .gf-why__reason.is-active {

        padding-left: 33px;

    }


    .gf-why__reason-content p {

        font-size: 0.64rem;

    }


    .gf-why__cta {

        padding:
            17px 23px 17px 28px;

    }

}



/* ============================================================
   18. MOBILE
   481px - 767px
============================================================ */

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

    .gf-why__header {

        grid-template-columns:
            1fr;

        gap: 29px;

        margin-bottom: 43px;

    }


    .gf-why__title {

        max-width: 590px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.3rem
            );

    }


    .gf-why__header-note {

        max-width: 520px;

    }


    .gf-why__layout {

        grid-template-columns:
            1fr;

        min-height: 0;

        box-shadow:
            var(--gf-shadow-medium);

    }


    .gf-why__visual {

        min-height: 500px;

    }


    .gf-why__statement {

        bottom: 68px;

        width: 42%;

        padding: 23px;

    }


    .gf-why__facts {

        min-height: 68px;

        padding:
            0 22px;

    }


    .gf-why__content-intro {

        grid-template-columns:
            0.45fr
            1fr;

        gap: 25px;

        padding:
            29px 28px;

    }


    .gf-why__reason {

        min-height: 118px;

        padding:
            22px 28px;

    }


    .gf-why__reason.is-active {

        padding-left: 34px;

    }


    .gf-why__reason-content p {

        max-width: 480px;

    }


    .gf-why__cta {

        padding:
            20px 26px;

    }

}



/* ============================================================
   19. SMALL MOBILE
   <= 480px
============================================================ */

@media (max-width: 480px) {

    .gf-why__header {

        grid-template-columns:
            1fr;

        gap: 23px;

        margin-bottom: 34px;

    }


    .gf-why__eyebrow {

        margin-bottom: 14px;

        font-size: 0.57rem;

    }


    .gf-why__title {

        font-size:
            clamp(
                2.5rem,
                12vw,
                3.55rem
            );

    }


    .gf-why__header-note {

        padding-left: 18px;

    }


    .gf-why__header-note p {

        font-size: 0.78rem;

    }


    .gf-why__layout {

        grid-template-columns:
            1fr;

        min-height: 0;

        box-shadow:
            var(--gf-shadow-soft);

    }


    .gf-why__visual {

        display: block;

        min-height: 480px;

    }


    .gf-why__figure {

        position: absolute;

        inset: 0 0 65px;

    }


    .gf-why__statement {

        right: 0;
        bottom: 65px;

        width: 58%;

        padding: 19px;

    }


    .gf-why__statement-mark {

        width: 35px;
        height: 35px;

        margin-bottom: 15px;

    }


    .gf-why__statement p {

        font-size: 1.05rem;

    }


    .gf-why__statement-rule {

        margin-top: 15px;

    }


    .gf-why__facts {

        position: absolute;

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

        min-height: 65px;

        padding:
            0 16px;

    }


    .gf-why__fact span {

        font-size: 0.4rem;

    }


    .gf-why__fact strong {

        font-size: 0.49rem;

    }


    .gf-why__fact-divider {

        margin:
            0 12px;

    }


    .gf-why__content-intro {

        grid-template-columns:
            1fr;

        gap: 10px;

        padding:
            26px 21px;

    }


    .gf-why__content-intro p {

        font-size: 0.73rem;

    }


    .gf-why__reason {

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

        gap: 11px;

        min-height: 112px;

        padding:
            19px 19px;

    }


    .gf-why__reason.is-active {

        padding-left: 24px;

    }


    .gf-why__reason-content h3 {

        font-size: 1.08rem;

    }


    .gf-why__reason-content p {

        display: -webkit-box;

        overflow: hidden;

        font-size: 0.63rem;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp: 3;

    }


    .gf-why__reason-arrow {

        font-size: 0.8rem;

    }


    .gf-why__cta {

        align-items: flex-start;

        flex-direction: column;

        min-height: 0;

        padding:
            23px 20px;

    }


    .gf-why__cta-button {

        width: 100%;

    }

}



/* ============================================================
   20. REDUCED MOTION
============================================================ */

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

    .gf-why *,
    .gf-why *::before,
    .gf-why *::after {

        animation:
            none !important;

        transition:
            none !important;

    }


    .gf-why__eyebrow,
    .gf-why__title,
    .gf-why__header-note,
    .gf-why__statement,
    .gf-why__content-intro,
    .gf-why__reason,
    .gf-why__cta {

        opacity:
            1 !important;

        transform:
            none !important;

    }


    .gf-why__image-mask,
    .gf-why__facts {

        clip-path:
            none !important;

    }


    .gf-why__image {

        transform:
            none !important;

    }

}






































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   07. REVIEWS
============================================================ */


/* ============================================================
   01. SECTION
============================================================ */

.gf-reviews {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-reviews::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 24%;
    height: 3px;

    background:
        var(--gf-copper);

}


.gf-reviews::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 42%;
    height: 3px;

    background:
        var(--gf-green);

}



/* ============================================================
   02. BACKGROUND DECORATION
============================================================ */

.gf-reviews__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

}


.gf-reviews__texture {

    position: absolute;

    inset: 0;

    opacity: 0.23;

    background-image:

        radial-gradient(
            rgba(255, 255, 255, 0.14)
            0.55px,
            transparent 0.8px
        );

    background-size:
        11px 11px;

}


.gf-reviews__contour {

    position: absolute;

    border:
        1px solid
        rgba(126, 217, 87, 0.07);

}


.gf-reviews__contour::before,
.gf-reviews__contour::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(126, 217, 87, 0.06);

}


.gf-reviews__contour::before {

    inset: 28px;

}


.gf-reviews__contour::after {

    inset: 60px;

}


.gf-reviews__contour--1 {

    top: -260px;
    right: -280px;

    width: 690px;
    height: 690px;

    transform:
        rotate(27deg);

}


.gf-reviews__contour--2 {

    left: -300px;
    bottom: -390px;

    width: 720px;
    height: 720px;

    transform:
        rotate(43deg);

}


.gf-reviews__vertical-word {

    position: absolute;

    top: 50%;
    right: -69px;

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

    letter-spacing: 0.52em;

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

    transform:
        rotate(90deg);

    transform-origin:
        center;

}



/* ============================================================
   03. HEADER
============================================================ */

.gf-reviews__header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);

    align-items: end;

    gap:
        clamp(55px, 8vw, 130px);

    margin-bottom:
        clamp(54px, 6vw, 88px);

}


.gf-reviews__heading {

    max-width: 900px;

}


.gf-reviews__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 21px;

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

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-reviews__eyebrow-line {

    display: block;

    width: 40px;
    height: 1px;

    flex: 0 0 auto;

    background:
        currentColor;

}


.gf-reviews__title {

    max-width: 890px;

    margin: 0;

    font-size:
        clamp(
            3rem,
            5vw,
            6rem
        );

    font-weight: 600;

    line-height: 0.92;

    letter-spacing: -0.062em;

    color:
        var(--gf-white);

}


.gf-reviews__title span {

    display: block;

    margin-top: 0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    letter-spacing: -0.04em;

    color:
        var(--gf-green-bright);

}



/* ============================================================
   04. HEADER INTRO
============================================================ */

.gf-reviews__intro {

    padding:
        0 0 3px 28px;

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

}


.gf-reviews__section-number {

    display: block;

    margin-bottom: 17px;

    font-family:
        var(--gf-font-serif);

    font-size: 1.05rem;

    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-reviews__intro p {

    max-width: 365px;

    margin:
        0 0 22px;

    font-size: 0.87rem;

    line-height: 1.72;

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

}


.gf-reviews__intro-rule {

    display: block;

    width: 54px;
    height: 1px;

    background:
        var(--gf-leaf);

}



/* ============================================================
   05. REVIEW STAGE
============================================================ */

.gf-reviews__stage {

    position: relative;

    display: grid;

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

    min-height: 590px;

    background:
        var(--gf-paper);

    box-shadow:

        0 42px 100px
        rgba(0, 0, 0, 0.20),

        0 12px 30px
        rgba(0, 0, 0, 0.11);

}



/* ============================================================
   06. LEFT RAIL
============================================================ */

.gf-reviews__rail {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding:
        39px 27px;

    overflow: hidden;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-900);

    background-image:
        var(--gf-forest-texture);

}


.gf-reviews__rail::after {

    content: "";

    position: absolute;

    right: 0;
    top: 0;
    bottom: 0;

    width: 1px;

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

}



/* ============================================================
   07. QUOTE DECORATION
============================================================ */

.gf-reviews__quote {

    display: flex;

    flex-direction: column;

}


.gf-reviews__quote-mark {

    display: block;

    height: 73px;

    font-family:
        var(--gf-font-serif);

    font-size: 7rem;
    font-weight: 500;

    line-height: 0.9;

    color:
        var(--gf-leaf);

}


.gf-reviews__quote-label {

    margin-top: 15px;

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

    line-height: 1.55;

    letter-spacing: 0.12em;

    text-transform: uppercase;

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

}


.gf-reviews__quote-label strong {

    display: block;

    color:
        var(--gf-white);

}



/* ============================================================
   08. LEAF ART
============================================================ */

.gf-reviews__rail-art {

    display: grid;

    flex: 1;

    place-items: center;

    min-height: 200px;

    color:
        rgba(126, 217, 87, 0.27);

}


.gf-reviews__rail-art svg {

    width: 100px;

    max-width: 100%;

}



/* ============================================================
   09. RAIL BOTTOM
============================================================ */

.gf-reviews__rail-line {

    display: block;

    width: 100%;
    height: 1px;

    margin-bottom: 22px;

    background:
        rgba(184, 116, 60, 0.65);

}


.gf-reviews__rail-copy {

    display: grid;

    gap: 6px;

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

    letter-spacing: 0.09em;

    text-transform: uppercase;

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

}


.gf-reviews__rail-copy span:nth-child(2) {

    color:
        var(--gf-leaf);

}



/* ============================================================
   10. WIDGET COLUMN
============================================================ */

.gf-reviews__widget-column {

    display: flex;

    flex-direction: column;

    min-width: 0;

    color:
        var(--gf-ink);

    background:
        var(--gf-paper);

}



/* ============================================================
   11. WIDGET TOP
============================================================ */

.gf-reviews__widget-top {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 62px;

    padding:
        0 27px;

    border-bottom:
        1px solid
        rgba(3, 71, 43, 0.11);

}


.gf-reviews__widget-top-left {

    display: flex;

    align-items: center;

    gap: 10px;

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

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

}


.gf-reviews__widget-dot {

    width: 7px;
    height: 7px;

    background:
        var(--gf-green);

}


.gf-reviews__stars {

    display: flex;

    gap: 5px;

    font-size: 0.64rem;

    color:
        var(--gf-copper);

}



/* ============================================================
   12. ELFSIGHT WIDGET CONTAINER
============================================================ */

.gf-reviews__widget {

    position: relative;

    flex: 1;

    min-width: 0;

    min-height: 450px;

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

    background-color:
        var(--gf-ivory);

    background-image:
        var(--gf-paper-texture);

}


/*
    IMPORTANT:

    Do not add overflow:hidden here.

    Elfsight may calculate its own responsive height
    and should be allowed to expand naturally.
*/



/* ============================================================
   13. STATIC PLACEHOLDER
   NO LOADING ANIMATION
============================================================ */

.gf-reviews__placeholder {

    display: flex;

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

    flex-direction: column;

    gap: 8px;

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

    padding:
        45px 30px;

    text-align: center;

    border:
        1px solid
        rgba(3, 71, 43, 0.14);

    background:
        rgba(250, 248, 242, 0.74);

}


.gf-reviews__placeholder-icon {

    display: grid;

    width: 56px;
    height: 56px;

    margin-bottom: 14px;

    place-items: center;

    color:
        var(--gf-green);

    border:
        1px solid
        rgba(3, 71, 43, 0.14);

}


.gf-reviews__placeholder-icon svg {

    width: 32px;
    height: 32px;

}


.gf-reviews__placeholder-label {

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

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-reviews__placeholder strong {

    font-family:
        var(--gf-font-serif);

    font-size:
        clamp(
            1.8rem,
            2.5vw,
            2.6rem
        );

    font-style: italic;
    font-weight: 500;

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

}


.gf-reviews__placeholder p {

    max-width: 320px;

    margin: 3px 0 0;

    font-size: 0.72rem;

    line-height: 1.6;

    color:
        var(--gf-gray);

}



/* ============================================================
   14. WIDGET BOTTOM
============================================================ */

.gf-reviews__widget-bottom {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    min-height: 82px;

    padding:
        15px 24px 15px 29px;

    border-top:
        1px solid
        rgba(3, 71, 43, 0.11);

    background:
        var(--gf-paper);

}


.gf-reviews__widget-bottom > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-reviews__widget-bottom > div span {

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

    letter-spacing: 0.11em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-reviews__widget-bottom > div strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.13rem;
    font-style: italic;
    font-weight: 500;

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

}



/* ============================================================
   15. CTA
============================================================ */

.gf-reviews__cta {

    position: relative;

    isolation: isolate;

    display: inline-flex;

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

    gap: 19px;

    min-height: 47px;

    padding:
        0 19px;

    overflow: hidden;

    border:
        1px solid
        var(--gf-forest-800);

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

    color:
        var(--gf-white);

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

    letter-spacing: 0.075em;

    text-transform: uppercase;

}


.gf-reviews__cta::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        400ms
        var(--gf-ease-emphasized);

}


.gf-reviews__cta:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left center;

}


.gf-reviews__cta-arrow {

    font-size: 0.9rem;

    transition:
        transform
        280ms
        var(--gf-ease-standard);

}


.gf-reviews__cta:hover
.gf-reviews__cta-arrow {

    transform:
        translateX(4px);

}



/* ============================================================
   16. RIGHT DECORATIVE SIDE
============================================================ */

.gf-reviews__side {

    display: flex;

    align-items: center;

    flex-direction: column;

    padding:
        37px 19px;

    border-left:
        1px solid
        rgba(3, 71, 43, 0.11);

    background:
        var(--gf-cream);

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

}


.gf-reviews__side-number {

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-reviews__side-rule {

    width: 1px;
    height: 120px;

    margin:
        20px 0;

    background:

        linear-gradient(
            to bottom,
            var(--gf-forest-800),
            rgba(3, 71, 43, 0.1)
        );

}


.gf-reviews__side p {

    margin: 0;

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

    line-height: 1.5;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    color:
        var(--gf-gray);

}


.gf-reviews__side p span {

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

}


.gf-reviews__side-symbol {

    display: grid;

    width: 43px;
    height: 43px;

    margin-top: auto;

    place-items: center;

    color:
        var(--gf-green);

}


.gf-reviews__side-symbol svg {

    width: 100%;
    height: 100%;

}



/* ============================================================
   17. FOOTER MESSAGE
============================================================ */

.gf-reviews__footer {

    display: grid;

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

    align-items: center;

    gap: 22px;

    margin-top: 32px;

}


.gf-reviews__footer-line {

    width: 100%;
    height: 1px;

    background:
        var(--gf-copper);

}


.gf-reviews__footer p {

    margin: 0;

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

    letter-spacing: 0.075em;

    text-transform: uppercase;

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

}


.gf-reviews__footer p span {

    margin-left: 5px;

    color:
        var(--gf-leaf);

}


.gf-reviews__footer-index {

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

    letter-spacing: 0.13em;

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

}



/* ============================================================
   18. JS REVEAL INITIAL STATES

   This is NOT a loading animation.
   It only controls section entrance when scrolling.
============================================================ */

.gf-reviews.is-prepared
.gf-reviews__eyebrow,
.gf-reviews.is-prepared
.gf-reviews__title,
.gf-reviews.is-prepared
.gf-reviews__intro {

    opacity: 0;

    transform:
        translateY(22px);

}


.gf-reviews.is-prepared
.gf-reviews__rail {

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

}


.gf-reviews.is-prepared
.gf-reviews__widget-column {

    opacity: 0;

    transform:
        translateY(24px);

}


.gf-reviews.is-prepared
.gf-reviews__side {

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

}


.gf-reviews.is-prepared
.gf-reviews__footer {

    opacity: 0;

}


.gf-reviews.is-prepared
.gf-reviews__contour {

    opacity: 0;

}



/* ============================================================
   19. REVEALED STATE
============================================================ */

.gf-reviews.is-visible
.gf-reviews__eyebrow {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        550ms
        ease,

        transform
        720ms
        var(--gf-ease-standard);

}


.gf-reviews.is-visible
.gf-reviews__title {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        70ms
        ease,

        transform
        850ms
        70ms
        var(--gf-ease-standard);

}


.gf-reviews.is-visible
.gf-reviews__intro {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms
        160ms
        ease,

        transform
        780ms
        160ms
        var(--gf-ease-standard);

}


.gf-reviews.is-visible
.gf-reviews__rail {

    clip-path:
        inset(0);

    transition:
        clip-path
        850ms
        220ms
        var(--gf-ease-emphasized);

}


.gf-reviews.is-visible
.gf-reviews__widget-column {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        310ms
        ease,

        transform
        850ms
        310ms
        var(--gf-ease-standard);

}


.gf-reviews.is-visible
.gf-reviews__side {

    clip-path:
        inset(0);

    transition:
        clip-path
        750ms
        480ms
        var(--gf-ease-emphasized);

}


.gf-reviews.is-visible
.gf-reviews__footer {

    opacity: 1;

    transition:
        opacity
        700ms
        620ms
        ease;

}


.gf-reviews.is-visible
.gf-reviews__contour {

    opacity: 1;

    transition:
        opacity
        1.2s
        340ms
        ease;

}



/* ============================================================
   20. COMPUTER
   >= 1200px
============================================================ */

@media (min-width: 1200px) {

    .gf-reviews__stage {

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

        min-height:
            590px;

    }

}



/* ============================================================
   21. TABLET
   768px - 1199px
============================================================ */

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

    .gf-reviews__header {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(250px, 0.85fr);

        gap:
            45px;

    }


    .gf-reviews__title {

        font-size:
            clamp(
                3rem,
                6.5vw,
                4.8rem
            );

    }


    .gf-reviews__stage {

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

        min-height:
            550px;

    }


    .gf-reviews__rail {

        padding:
            31px 20px;

    }


    .gf-reviews__quote-mark {

        font-size:
            5.8rem;

    }


    .gf-reviews__widget {

        min-height:
            420px;

        padding:
            30px;

    }


    .gf-reviews__placeholder {

        min-height:
            330px;

    }


    .gf-reviews__side {

        padding:
            30px 15px;

    }


    .gf-reviews__widget-bottom {

        padding:
            14px 20px;

    }

}



/* ============================================================
   22. MOBILE
   481px - 767px
============================================================ */

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

    .gf-reviews__header {

        grid-template-columns:
            1fr;

        gap:
            29px;

        margin-bottom:
            43px;

    }


    .gf-reviews__title {

        max-width:
            590px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.3rem
            );

    }


    .gf-reviews__intro {

        max-width:
            520px;

    }


    .gf-reviews__stage {

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

        min-height: 0;

    }


    .gf-reviews__side {

        display: none;

    }


    .gf-reviews__rail {

        padding:
            25px 15px;

    }


    .gf-reviews__quote-mark {

        height:
            58px;

        font-size:
            5rem;

    }


    .gf-reviews__quote-label {

        font-size:
            0.45rem;

    }


    .gf-reviews__rail-art svg {

        width:
            69px;

    }


    .gf-reviews__rail-copy {

        font-size:
            0.38rem;

    }


    .gf-reviews__widget {

        min-height:
            400px;

        padding:
            24px;

    }


    .gf-reviews__placeholder {

        min-height:
            310px;

        padding:
            35px 22px;

    }


    .gf-reviews__widget-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;

        padding:
            20px 22px;

    }


    .gf-reviews__cta {

        width: 100%;

    }


    .gf-reviews__footer {

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

    }


    .gf-reviews__footer-index {

        display: none;

    }


    .gf-reviews__footer p span {

        display: block;

        margin:
            3px 0 0;

    }

}



/* ============================================================
   23. SMALL MOBILE
   <= 480px
============================================================ */

@media (max-width: 480px) {

    .gf-reviews__header {

        grid-template-columns:
            1fr;

        gap:
            23px;

        margin-bottom:
            34px;

    }


    .gf-reviews__eyebrow {

        margin-bottom:
            14px;

        font-size:
            0.57rem;

    }


    .gf-reviews__title {

        font-size:
            clamp(
                2.5rem,
                12vw,
                3.55rem
            );

    }


    .gf-reviews__intro {

        padding-left:
            18px;

    }


    .gf-reviews__intro p {

        font-size:
            0.77rem;

    }


    .gf-reviews__stage {

        display: block;

        min-height: 0;

    }


    /*
        Decorative rails become a horizontal
        brand strip instead of taking screen width.
    */

    .gf-reviews__rail {

        display: grid;

        grid-template-columns:
            auto
            1fr
            auto;

        align-items: center;

        gap:
            18px;

        min-height:
            75px;

        padding:
            13px 17px;

    }


    .gf-reviews__quote {

        display: flex;

        align-items: center;

        flex-direction: row;

        gap: 10px;

    }


    .gf-reviews__quote-mark {

        width:
            30px;

        height:
            38px;

        font-size:
            3.6rem;

    }


    .gf-reviews__quote-label {

        margin: 0;

        font-size:
            0.41rem;

    }


    .gf-reviews__rail-art {

        display: none;

    }


    .gf-reviews__rail-line {

        display: none;

    }


    .gf-reviews__rail-copy {

        display: flex;

        justify-content:
            flex-end;

        flex-wrap: wrap;

        gap:
            3px 9px;

        font-size:
            0.33rem;

    }


    .gf-reviews__side {

        display: none;

    }


    .gf-reviews__widget-top {

        min-height:
            53px;

        padding:
            0 17px;

    }


    .gf-reviews__widget-top-left {

        font-size:
            0.42rem;

    }


    .gf-reviews__stars {

        font-size:
            0.52rem;

    }


    .gf-reviews__widget {

        min-height:
            360px;

        padding:
            17px;

    }


    .gf-reviews__placeholder {

        min-height:
            285px;

        padding:
            30px 18px;

    }


    .gf-reviews__placeholder-icon {

        width:
            48px;

        height:
            48px;

    }


    .gf-reviews__placeholder strong {

        font-size:
            1.75rem;

    }


    .gf-reviews__placeholder p {

        font-size:
            0.68rem;

    }


    .gf-reviews__widget-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;

        padding:
            19px 17px;

    }


    .gf-reviews__cta {

        width:
            100%;

    }


    .gf-reviews__footer {

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

        gap:
            12px;

        margin-top:
            24px;

    }


    .gf-reviews__footer p {

        font-size:
            0.48rem;

        line-height:
            1.55;

    }


    .gf-reviews__footer p span {

        display:
            block;

        margin:
            3px 0 0;

    }


    .gf-reviews__footer-index {

        display:
            none;

    }


    .gf-reviews__vertical-word {

        display:
            none;

    }

}



/* ============================================================
   24. REDUCED MOTION
============================================================ */

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

    .gf-reviews__eyebrow,
    .gf-reviews__title,
    .gf-reviews__intro,
    .gf-reviews__widget-column,
    .gf-reviews__footer,
    .gf-reviews__contour {

        opacity:
            1 !important;

        transform:
            none !important;

    }


    .gf-reviews__rail,
    .gf-reviews__side {

        clip-path:
            none !important;

    }


    /*
        Elfsight content is intentionally not targeted.
    */

}





































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   08. SERVICE AREAS
============================================================ */


/* ============================================================
   01. SECTION
============================================================ */

.gf-areas {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    background-color:
        var(--gf-ivory);

    background-image:
        var(--gf-paper-texture);

}


.gf-areas::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 32%;
    height: 3px;

    background:
        var(--gf-green);

}


.gf-areas::after {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 17%;
    height: 1px;

    background:
        var(--gf-copper);

}



/* ============================================================
   02. BACKGROUND
============================================================ */

.gf-areas__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.gf-areas__contour {

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.035);

}


.gf-areas__contour::before,
.gf-areas__contour::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(3, 71, 43, 0.03);

}


.gf-areas__contour::before {

    inset: 30px;

}


.gf-areas__contour::after {

    inset: 66px;

}


.gf-areas__contour--1 {

    top: -260px;
    left: -290px;

    width: 630px;
    height: 630px;

    transform:
        rotate(32deg);

}


.gf-areas__contour--2 {

    right: -310px;
    bottom: -390px;

    width: 700px;
    height: 700px;

    transform:
        rotate(47deg);

}



/* ============================================================
   03. HEADER
============================================================ */

.gf-areas__header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(280px, 0.65fr);

    align-items: end;

    gap:
        clamp(55px, 8vw, 130px);

    margin-bottom:
        clamp(54px, 6vw, 86px);

}


.gf-areas__heading {

    max-width: 880px;

}


.gf-areas__eyebrow {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 21px;

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

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-areas__eyebrow-line {

    display: block;

    width: 40px;
    height: 1px;

    flex: 0 0 auto;

    background:
        currentColor;

}


.gf-areas__title {

    max-width: 870px;

    margin: 0;

    font-size:
        clamp(
            3rem,
            5vw,
            6rem
        );

    font-weight: 600;

    line-height: 0.92;

    letter-spacing: -0.062em;

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

}


.gf-areas__title span {

    display: block;

    margin-top: 0.05em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    letter-spacing: -0.04em;

    color:
        var(--gf-green);

}



/* ============================================================
   04. INTRO
============================================================ */

.gf-areas__intro {

    padding:
        0 0 3px 28px;

    border-left:
        1px solid
        rgba(3, 71, 43, 0.15);

}


.gf-areas__section-number {

    display: block;

    margin-bottom: 17px;

    font-family:
        var(--gf-font-serif);

    font-size: 1.05rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-areas__intro p {

    max-width: 365px;

    margin: 0;

    font-size: 0.87rem;

    line-height: 1.72;

    color:
        var(--gf-gray);

}



/* ============================================================
   05. STAGE
============================================================ */

.gf-areas__stage {

    display: grid;

    grid-template-columns:
        minmax(340px, 0.38fr)
        minmax(0, 0.62fr);

    min-height: 620px;

    box-shadow:
        var(--gf-shadow-large);

}



/* ============================================================
   06. LEFT PANEL
============================================================ */

.gf-areas__panel {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-areas__panel::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        var(--gf-green);

}



/* ============================================================
   07. PANEL TOP
============================================================ */

.gf-areas__panel-top {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;

    padding:
        36px 35px 28px;

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

}


.gf-areas__panel-count {

    display: flex;

    align-items: flex-end;

    gap: 14px;

}


.gf-areas__panel-count strong {

    font-size:
        clamp(
            3rem,
            4vw,
            4.5rem
        );

    font-weight: 600;

    line-height: 0.8;

    letter-spacing: -0.07em;

    color:
        var(--gf-leaf);

}


.gf-areas__panel-count span {

    display: flex;

    flex-direction: column;

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

    line-height: 1.4;

    letter-spacing: 0.11em;

    text-transform: uppercase;

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

}


.gf-areas__panel-count em {

    font-style: normal;

    color:
        var(--gf-white);

}


.gf-areas__panel-leaf {

    width: 48px;
    height: 48px;

    color:
        rgba(126, 217, 87, 0.42);

}


.gf-areas__panel-leaf svg {

    width: 100%;
    height: 100%;

}



/* ============================================================
   08. PANEL INTRO
============================================================ */

.gf-areas__panel-intro {

    padding:
        22px 35px;

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

}


.gf-areas__panel-intro > span {

    display: block;

    margin-bottom: 5px;

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

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-areas__panel-intro p {

    max-width: 340px;

    margin: 0;

    font-size: 0.7rem;

    line-height: 1.6;

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

}



/* ============================================================
   09. AREA LIST
============================================================ */

.gf-areas__list {

    display: grid;

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

    flex: 1;

}



/* ============================================================
   10. AREA BUTTON
============================================================ */

.gf-areas__item {

    position: relative;

    isolation: isolate;

    display: grid;

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

    align-items: center;

    gap: 9px;

    min-height: 67px;

    padding:
        13px 17px;

    overflow: hidden;

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

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

    cursor: pointer;

    text-align: left;

    color:
        var(--gf-white);

    background:
        transparent;

    transition:
        color
        280ms
        ease,

        background-color
        320ms
        ease,

        padding-left
        320ms
        var(--gf-ease-standard);

}


.gf-areas__item::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        400ms
        var(--gf-ease-emphasized);

}


.gf-areas__item:nth-child(2n) {

    border-right: 0;

}


.gf-areas__item:hover,
.gf-areas__item:focus-visible {

    padding-left: 21px;

}


.gf-areas__item:hover::before,
.gf-areas__item:focus-visible::before,
.gf-areas__item.is-active::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-areas__item-number {

    font-family:
        var(--gf-font-serif);

    font-size: 0.67rem;

    font-style: italic;

    color:
        var(--gf-copper);

    transition:
        color 280ms ease;

}


.gf-areas__item.is-active
.gf-areas__item-number,
.gf-areas__item:hover
.gf-areas__item-number {

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

}


.gf-areas__item-name {

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

    line-height: 1.35;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}


.gf-areas__item-arrow {

    color:
        var(--gf-leaf);

    transition:
        color 280ms ease,
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-areas__item:hover
.gf-areas__item-arrow,
.gf-areas__item.is-active
.gf-areas__item-arrow {

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

    transform:
        translate(3px, -3px);

}



/* ============================================================
   11. PANEL FOOTER
============================================================ */

.gf-areas__panel-footer {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        21px 27px 21px 35px;

    background:
        var(--gf-charcoal);

}


.gf-areas__panel-footer > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-areas__panel-footer span {

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

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

}


.gf-areas__panel-footer strong {

    font-family:
        var(--gf-font-serif);

    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-white);

}


.gf-areas__panel-cta {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 5px;

    border-bottom:
        1px solid
        var(--gf-copper);

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

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--gf-white);

}


.gf-areas__panel-cta span:last-child {

    color:
        var(--gf-leaf);

}



/* ============================================================
   12. MAP COLUMN
============================================================ */

.gf-areas__map-column {

    display: flex;

    flex-direction: column;

    min-width: 0;

    background:
        var(--gf-paper);

}



/* ============================================================
   13. MAP HEADER
============================================================ */

.gf-areas__map-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    min-height: 82px;

    padding:
        16px 28px;

    border-bottom:
        1px solid
        rgba(3, 71, 43, 0.11);

}


.gf-areas__map-header > div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.gf-areas__map-label {

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

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-areas__map-header strong {

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

    letter-spacing: 0.045em;

    text-transform: uppercase;

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

}



/* ============================================================
   14. RESET BUTTON
============================================================ */

.gf-areas__reset {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 39px;

    padding:
        0 14px;

    cursor: pointer;

    border:
        1px solid
        rgba(3, 71, 43, 0.18);

    background:
        transparent;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;

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

    transition:
        color
        280ms
        ease,

        background-color
        280ms
        ease,

        border-color
        280ms
        ease;

}


.gf-areas__reset:hover {

    color:
        var(--gf-white);

    border-color:
        var(--gf-forest-800);

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

}


.gf-areas__reset-icon {

    font-size: 0.9rem;

    color:
        var(--gf-green);

}



/* ============================================================
   15. MAP WRAPPER
============================================================ */

.gf-areas__map-wrap {

    position: relative;

    flex: 1;

    min-height: 538px;

    overflow: hidden;

}



/* ============================================================
   16. LEAFLET MAP
============================================================ */

.gf-areas__map {

    position: absolute;

    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    background:
        var(--gf-cream);

}


/*
    Slightly harmonizes standard map tiles with
    the warm architectural palette while retaining labels.
*/

.gf-areas__map
.leaflet-tile-pane {

    filter:
        saturate(0.76)
        contrast(0.96)
        sepia(0.07);

}



/* ============================================================
   17. LEAFLET CONTROLS
============================================================ */

.gf-areas__map
.leaflet-control-zoom {

    margin:
        20px 20px 0 0;

    border:
        0;

    border-radius:
        0;

    box-shadow:
        0 12px 28px
        rgba(3, 61, 39, 0.16);

}


.gf-areas__map
.leaflet-control-zoom a {

    display: grid;

    width: 38px;
    height: 38px;

    place-items: center;

    border:
        0;

    border-bottom:
        1px solid
        rgba(3, 71, 43, 0.13);

    border-radius:
        0 !important;

    font-family:
        var(--gf-font-sans);

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

    background:
        var(--gf-paper);

}


.gf-areas__map
.leaflet-control-zoom a:hover {

    color:
        var(--gf-white);

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

}


.gf-areas__map
.leaflet-control-attribution {

    padding:
        4px 7px;

    font-family:
        var(--gf-font-sans);

    font-size:
        9px;

    color:
        var(--gf-gray);

    background:
        rgba(250, 248, 242, 0.9);

}


.gf-areas__map
.leaflet-control-attribution a {

    color:
        var(--gf-forest-800);

}



/* ============================================================
   18. CUSTOM MARKER
============================================================ */

.gf-map-marker {

    border: 0 !important;

    background:
        transparent !important;

}


.gf-map-marker__core {

    position: relative;

    display: grid;

    width: 40px;
    height: 40px;

    place-items: center;

    border:
        2px solid
        var(--gf-white);

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

    box-shadow:
        0 10px 25px
        rgba(3, 61, 39, 0.28);

    transition:
        transform
        280ms
        var(--gf-ease-standard),

        background-color
        280ms
        ease,

        box-shadow
        280ms
        ease;

}


.gf-map-marker__core::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -7px;

    width: 10px;
    height: 10px;

    border-right:
        2px solid
        var(--gf-white);

    border-bottom:
        2px solid
        var(--gf-white);

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

    transform:
        translateX(-50%)
        rotate(45deg);

}


.gf-map-marker__leaf {

    position: relative;

    z-index: 2;

    width: 13px;
    height: 19px;

    border:
        2px solid
        var(--gf-leaf);

    border-radius:
        70% 0 70% 0;

    transform:
        rotate(-34deg);

}


.gf-map-marker:hover
.gf-map-marker__core,
.gf-map-marker.is-active
.gf-map-marker__core {

    transform:
        translateY(-4px);

    background:
        var(--gf-green);

    box-shadow:
        0 16px 35px
        rgba(5, 184, 92, 0.32);

}


.gf-map-marker:hover
.gf-map-marker__core::after,
.gf-map-marker.is-active
.gf-map-marker__core::after {

    background:
        var(--gf-green);

}



/* ============================================================
   19. LEAFLET POPUP
============================================================ */

.gf-areas__map
.leaflet-popup-content-wrapper {

    padding: 0;

    overflow: hidden;

    border-radius: 0;

    background:
        var(--gf-paper);

    box-shadow:
        0 20px 55px
        rgba(3, 61, 39, 0.22);

}


.gf-areas__map
.leaflet-popup-content {

    width: 245px !important;

    margin: 0;

    font-family:
        var(--gf-font-sans);

}


.gf-map-popup {

    position: relative;

    padding:
        22px 23px 20px;

    border-top:
        3px solid
        var(--gf-green);

}


.gf-map-popup__eyebrow {

    display: block;

    margin-bottom: 7px;

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

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-map-popup h3 {

    margin:
        0 0 7px;

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

    line-height: 1.05;

    letter-spacing: -0.035em;

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

}


.gf-map-popup p {

    margin:
        0 0 15px;

    font-size: 0.67rem;

    line-height: 1.55;

    color:
        var(--gf-gray);

}


.gf-map-popup a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding-bottom: 4px;

    border-bottom:
        1px solid
        var(--gf-copper);

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

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color:
        var(--gf-forest-800);

}


.gf-areas__map
.leaflet-popup-tip {

    background:
        var(--gf-paper);

}



/* ============================================================
   20. MAP BRAND CORNER
============================================================ */

.gf-areas__map-corner {

    position: absolute;

    top: 22px;
    left: 22px;

    z-index: 500;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 12px;

    pointer-events: none;

    color:
        var(--gf-white);

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

    box-shadow:
        0 10px 26px
        rgba(3, 61, 39, 0.19);

}


.gf-areas__map-corner span {

    display: grid;

    width: 28px;
    height: 28px;

    place-items: center;

    background:
        var(--gf-green);

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

}


.gf-areas__map-corner small {

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

    letter-spacing: 0.1em;

    text-transform: uppercase;

}



/* ============================================================
   21. MAP HINT
============================================================ */

.gf-areas__map-hint {

    position: absolute;

    left: 22px;
    bottom: 22px;

    z-index: 500;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 12px;

    pointer-events: none;

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

    letter-spacing: 0.07em;

    text-transform: uppercase;

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

    background:
        rgba(250, 248, 242, 0.93);

    box-shadow:
        var(--gf-shadow-soft);

}


.gf-areas__map-hint-icon {

    display: grid;

    width: 22px;
    height: 22px;

    place-items: center;

    color:
        var(--gf-white);

    background:
        var(--gf-green);

}



/* ============================================================
   22. BOTTOM
============================================================ */

.gf-areas__bottom {

    display: grid;

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

    align-items: center;

    gap: 23px;

    margin-top: 31px;

}


.gf-areas__bottom-line {

    width: 100%;
    height: 1px;

    background:
        var(--gf-copper);

}


.gf-areas__bottom p {

    margin: 0;

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

    letter-spacing: 0.07em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-areas__bottom p span {

    margin-left: 5px;

    color:
        var(--gf-forest-800);

}


.gf-areas__phone {

    display: flex;

    align-items: flex-end;

    flex-direction: column;

    gap: 2px;

}


.gf-areas__phone span {

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

    letter-spacing: 0.11em;

    text-transform: uppercase;

    color:
        var(--gf-gray);

}


.gf-areas__phone strong {

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

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

}



/* ============================================================
   23. ENTRANCE PREPARATION
============================================================ */

.gf-areas.is-prepared
.gf-areas__eyebrow,
.gf-areas.is-prepared
.gf-areas__title,
.gf-areas.is-prepared
.gf-areas__intro {

    opacity: 0;

    transform:
        translateY(22px);

}


.gf-areas.is-prepared
.gf-areas__panel {

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

}


.gf-areas.is-prepared
.gf-areas__map-column {

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

}


.gf-areas.is-prepared
.gf-areas__bottom {

    opacity: 0;

}



/* ============================================================
   24. REVEAL
============================================================ */

.gf-areas.is-visible
.gf-areas__eyebrow {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        550ms ease,

        transform
        720ms
        var(--gf-ease-standard);

}


.gf-areas.is-visible
.gf-areas__title {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms 70ms ease,

        transform
        850ms 70ms
        var(--gf-ease-standard);

}


.gf-areas.is-visible
.gf-areas__intro {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        600ms 150ms ease,

        transform
        780ms 150ms
        var(--gf-ease-standard);

}


.gf-areas.is-visible
.gf-areas__panel {

    clip-path:
        inset(0);

    transition:
        clip-path
        900ms 230ms
        var(--gf-ease-emphasized);

}


.gf-areas.is-visible
.gf-areas__map-column {

    clip-path:
        inset(0);

    transition:
        clip-path
        950ms 340ms
        var(--gf-ease-emphasized);

}


.gf-areas.is-visible
.gf-areas__bottom {

    opacity: 1;

    transition:
        opacity
        650ms 650ms ease;

}



/* ============================================================
   25. COMPUTER
   >= 1200px
============================================================ */

@media (min-width: 1200px) {

    .gf-areas__stage {

        grid-template-columns:
            minmax(390px, 0.38fr)
            minmax(0, 0.62fr);

        min-height:
            620px;

    }


    .gf-areas__map-wrap {

        min-height:
            538px;

    }

}



/* ============================================================
   26. TABLET
   768px - 1199px
============================================================ */

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

    .gf-areas__header {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(250px, 0.85fr);

        gap:
            45px;

    }


    .gf-areas__title {

        font-size:
            clamp(
                3rem,
                6.5vw,
                4.8rem
            );

    }


    .gf-areas__stage {

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

        min-height:
            570px;

    }


    .gf-areas__panel-top {

        padding:
            29px 25px 24px;

    }


    .gf-areas__panel-intro {

        padding:
            20px 25px;

    }


    .gf-areas__item {

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

        min-height:
            62px;

        padding:
            11px 12px;

    }


    .gf-areas__item-name {

        font-size:
            0.53rem;

    }


    .gf-areas__panel-footer {

        align-items:
            flex-start;

        flex-direction: column;

        padding:
            20px 25px;

    }


    .gf-areas__map-wrap {

        min-height:
            488px;

    }

}



/* ============================================================
   27. MOBILE
   481px - 767px
============================================================ */

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

    .gf-areas__header {

        grid-template-columns:
            1fr;

        gap:
            29px;

        margin-bottom:
            43px;

    }


    .gf-areas__title {

        max-width:
            590px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4.3rem
            );

    }


    .gf-areas__intro {

        max-width:
            520px;

    }


    .gf-areas__stage {

        grid-template-columns:
            1fr;

        min-height:
            0;

    }


    .gf-areas__panel {

        min-height:
            auto;

    }


    .gf-areas__panel-top {

        padding:
            28px;

    }


    .gf-areas__panel-intro {

        padding:
            20px 28px;

    }


    .gf-areas__list {

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

    }


    .gf-areas__item {

        min-height:
            58px;

        padding:
            10px 20px;

    }


    .gf-areas__panel-footer {

        padding:
            21px 27px;

    }


    .gf-areas__map-header {

        min-height:
            75px;

        padding:
            15px 22px;

    }


    .gf-areas__map-wrap {

        min-height:
            500px;

    }


    .gf-areas__bottom {

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

    }


    .gf-areas__phone {

        grid-column:
            2;

        align-items:
            flex-start;

    }

}



/* ============================================================
   28. SMALL MOBILE
   <= 480px
============================================================ */

@media (max-width: 480px) {

    .gf-areas__header {

        grid-template-columns:
            1fr;

        gap:
            23px;

        margin-bottom:
            34px;

    }


    .gf-areas__eyebrow {

        margin-bottom:
            14px;

        font-size:
            0.57rem;

    }


    .gf-areas__title {

        font-size:
            clamp(
                2.5rem,
                12vw,
                3.55rem
            );

    }


    .gf-areas__intro {

        padding-left:
            18px;

    }


    .gf-areas__intro p {

        font-size:
            0.77rem;

    }


    .gf-areas__stage {

        grid-template-columns:
            1fr;

        min-height:
            0;

    }


    .gf-areas__panel-top {

        padding:
            24px 20px;

    }


    .gf-areas__panel-intro {

        padding:
            18px 20px;

    }


    .gf-areas__list {

        grid-template-columns:
            1fr 1fr;

    }


    .gf-areas__item {

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

        gap:
            7px;

        min-height:
            58px;

        padding:
            10px 12px;

    }


    .gf-areas__item-arrow {

        display:
            none;

    }


    .gf-areas__item-name {

        font-size:
            0.5rem;

    }


    .gf-areas__panel-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            20px;

    }


    .gf-areas__map-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            13px;

        padding:
            17px;

    }


    .gf-areas__reset {

        width:
            100%;

        justify-content:
            center;

    }


    .gf-areas__map-wrap {

        min-height:
            430px;

    }


    .gf-areas__map-corner {

        top: 14px;
        left: 14px;

    }


    .gf-areas__map-corner small {

        display:
            none;

    }


    .gf-areas__map-hint {

        left: 14px;
        bottom: 14px;

        font-size:
            0.39rem;

    }


    .gf-areas__bottom {

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

        gap:
            12px;

        margin-top:
            24px;

    }


    .gf-areas__bottom p {

        font-size:
            0.48rem;

        line-height:
            1.55;

    }


    .gf-areas__bottom p span {

        display:
            block;

        margin:
            3px 0 0;

    }


    .gf-areas__phone {

        grid-column:
            2;

        align-items:
            flex-start;

        margin-top:
            5px;

    }

}



/* ============================================================
   29. REDUCED MOTION
============================================================ */

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

    .gf-areas__eyebrow,
    .gf-areas__title,
    .gf-areas__intro,
    .gf-areas__bottom {

        opacity:
            1 !important;

        transform:
            none !important;

    }


    .gf-areas__panel,
    .gf-areas__map-column {

        clip-path:
            none !important;

    }


    .gf-areas__item,
    .gf-areas__item::before,
    .gf-map-marker__core {

        transition:
            none !important;

    }

}







































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   09. FOOTER
============================================================ */


/* ============================================================
   01. FOOTER
============================================================ */

.gf-footer {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    color:
        var(--gf-white);

    background-color:
        var(--gf-forest-950);

    background-image:
        var(--gf-forest-texture);

}


.gf-footer::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    z-index: 3;

    width: 28%;
    height: 3px;

    background:
        var(--gf-green);

}


.gf-footer::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    z-index: 3;

    width: 15%;
    height: 1px;

    background:
        var(--gf-copper);

}



/* ============================================================
   02. BACKGROUND DECORATION
============================================================ */

.gf-footer__background {

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;

}


.gf-footer__grain {

    position: absolute;

    inset: 0;

    opacity: 0.14;

    background-image:

        radial-gradient(
            rgba(255, 255, 255, 0.16)
            0.5px,
            transparent 0.7px
        );

    background-size:
        10px 10px;

}


.gf-footer__contour {

    position: absolute;

    border:
        1px solid
        rgba(126, 217, 87, 0.06);

}


.gf-footer__contour::before,
.gf-footer__contour::after {

    content: "";

    position: absolute;

    border:
        1px solid
        rgba(126, 217, 87, 0.045);

}


.gf-footer__contour::before {

    inset: 32px;

}


.gf-footer__contour::after {

    inset: 67px;

}


.gf-footer__contour--1 {

    right: -340px;
    top: -280px;

    width: 680px;
    height: 680px;

    transform:
        rotate(34deg);

}


.gf-footer__contour--2 {

    left: -380px;
    bottom: -480px;

    width: 760px;
    height: 760px;

    transform:
        rotate(49deg);

}



/* ============================================================
   03. MAIN
============================================================ */

.gf-footer__main {

    padding:
        clamp(75px, 8vw, 120px)
        0
        clamp(65px, 7vw, 100px);

}



/* ============================================================
   04. TOP
============================================================ */

.gf-footer__top {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;

    padding-bottom:
        clamp(45px, 5vw, 70px);

    margin-bottom:
        clamp(48px, 5vw, 72px);

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

}


.gf-footer__top-heading {

    display: grid;

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

    gap: 24px;

    align-items: start;

}


.gf-footer__top-index {

    padding-top: 7px;

    font-family:
        var(--gf-font-serif);

    font-size: 1rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-footer__eyebrow {

    display: block;

    margin-bottom: 12px;

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

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color:
        var(--gf-leaf);

}


.gf-footer__top h2 {

    max-width: 760px;

    margin: 0;

    font-size:
        clamp(
            2.5rem,
            4.2vw,
            5rem
        );

    font-weight: 600;

    line-height: 0.95;

    letter-spacing: -0.055em;

    color:
        var(--gf-white);

}


.gf-footer__top h2 span {

    display: block;

    margin-top: 0.08em;

    font-family:
        var(--gf-font-serif);

    font-style: italic;
    font-weight: 500;

    color:
        var(--gf-green-bright);

}



/* ============================================================
   05. ESTIMATE BUTTON
============================================================ */

.gf-footer__estimate {

    position: relative;

    isolation: isolate;

    display: inline-flex;

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

    gap: 28px;

    flex: 0 0 auto;

    min-height: 55px;

    padding:
        0 24px;

    overflow: hidden;

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

    color:
        var(--gf-white);

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

    letter-spacing: 0.09em;

    text-transform: uppercase;

}


.gf-footer__estimate::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--gf-green);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        420ms
        var(--gf-ease-emphasized);

}


.gf-footer__estimate:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-footer__estimate-arrow {

    font-size: 1rem;

    color:
        var(--gf-leaf);

    transition:
        transform
        300ms
        var(--gf-ease-standard),

        color
        300ms
        ease;

}


.gf-footer__estimate:hover
.gf-footer__estimate-arrow {

    color:
        var(--gf-white);

    transform:
        translateX(4px);

}



/* ============================================================
   06. GRID
============================================================ */

.gf-footer__grid {

    display: grid;

    grid-template-columns:
        minmax(280px, 1.2fr)
        minmax(180px, 0.72fr)
        minmax(260px, 1fr)
        minmax(230px, 0.9fr);

    gap:
        clamp(38px, 5vw, 80px);

}



/* ============================================================
   07. BRAND
============================================================ */

.gf-footer__brand-column {

    padding-right:
        clamp(20px, 3vw, 50px);

}


.gf-footer__brand {

    display: inline-block;

    width:
        min(
            220px,
            100%
        );

    margin-bottom: 27px;

}


.gf-footer__logo {

    width: 100%;
    height: auto;

    max-height: 112px;

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

}


.gf-footer__description {

    max-width: 390px;

    margin:
        0 0 28px;

    font-size: 0.78rem;

    line-height: 1.75;

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

}



/* ============================================================
   08. CONTACT
============================================================ */

.gf-footer__contact {

    display: grid;

    gap: 15px;

}


.gf-footer__contact a {

    display: flex;

    flex-direction: column;

    gap: 3px;

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-footer__contact a:hover {

    transform:
        translateX(4px);

}


.gf-footer__contact span {

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

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-copper);

}


.gf-footer__contact strong {

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

    word-break: break-word;

    color:
        var(--gf-white);

}



/* ============================================================
   09. COLUMN HEADING
============================================================ */

.gf-footer__column-heading {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 27px;

}


.gf-footer__column-heading > span {

    font-family:
        var(--gf-font-serif);

    font-size: 0.72rem;
    font-style: italic;

    color:
        var(--gf-copper);

}


.gf-footer__column-heading h3 {

    margin: 0;

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

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--gf-white);

}



/* ============================================================
   10. QUICK LINKS
============================================================ */

.gf-footer__links {

    display: grid;

}


.gf-footer__links a {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 41px;

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

    font-size: 0.63rem;
    font-weight: 650;

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

    transition:
        color
        260ms
        ease,

        padding-left
        320ms
        var(--gf-ease-standard);

}


.gf-footer__links a:first-child {

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

}


.gf-footer__links a span:last-child {

    color:
        var(--gf-green);

    opacity: 0.55;

    transition:
        transform
        300ms
        var(--gf-ease-standard),

        opacity
        300ms
        ease;

}


.gf-footer__links a:hover {

    padding-left: 5px;

    color:
        var(--gf-white);

}


.gf-footer__links a:hover
span:last-child {

    opacity: 1;

    transform:
        translate(3px, -3px);

}



/* ============================================================
   11. HOURS
============================================================ */

.gf-footer__hours {

    display: grid;

}


.gf-footer__hours-row {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 41px;

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

}


.gf-footer__hours-row:first-child {

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

}


.gf-footer__hours-row span {

    font-size: 0.56rem;
    font-weight: 600;

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

}


.gf-footer__hours-row strong {

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

    text-align: right;

    color:
        var(--gf-white);

}


.gf-footer__hours-row--closed strong {

    color:
        var(--gf-copper);

}



/* ============================================================
   12. SOCIAL INTRO
============================================================ */

.gf-footer__social-intro {

    max-width: 270px;

    margin:
        0 0 24px;

    font-size: 0.72rem;

    line-height: 1.7;

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

}



/* ============================================================
   13. SOCIAL
============================================================ */

.gf-footer__socials {

    display: grid;

}


.gf-footer__social {

    position: relative;

    isolation: isolate;

    display: grid;

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

    align-items: center;

    gap: 13px;

    min-height: 68px;

    padding:
        11px 15px;

    overflow: hidden;

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

    color:
        var(--gf-white);

}


.gf-footer__social::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        rgba(5, 184, 92, 0.12);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        420ms
        var(--gf-ease-emphasized);

}


.gf-footer__social:hover::before {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-footer__social-icon {

    display: grid;

    width: 42px;
    height: 42px;

    place-items: center;

    background:
        var(--gf-green);

    color:
        var(--gf-white);

}


.gf-footer__social-icon svg {

    width: 18px;
    height: 18px;

}


.gf-footer__social-copy {

    display: flex;

    flex-direction: column;

    gap: 1px;

}


.gf-footer__social-copy small {

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

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

}


.gf-footer__social-copy strong {

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

    color:
        var(--gf-white);

}


.gf-footer__social-arrow {

    color:
        var(--gf-leaf);

    transition:
        transform
        300ms
        var(--gf-ease-standard);

}


.gf-footer__social:hover
.gf-footer__social-arrow {

    transform:
        translate(3px, -3px);

}



/* ============================================================
   14. AVAILABILITY
============================================================ */

.gf-footer__availability {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-top: 26px;

    padding-top: 22px;

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

}


.gf-footer__availability-dot {

    position: relative;

    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    background:
        var(--gf-green);

}


.gf-footer__availability-dot::after {

    content: "";

    position: absolute;

    inset: -4px;

    border:
        1px solid
        rgba(126, 217, 87, 0.25);

}


.gf-footer__availability > div {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.gf-footer__availability div span {

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

    letter-spacing: 0.1em;

    text-transform: uppercase;

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

}


.gf-footer__availability div strong {

    font-size: 0.59rem;
    font-weight: 650;

    color:
        var(--gf-white);

}



/* ============================================================
   15. FOOTER BOTTOM
============================================================ */

.gf-footer__bottom {

    position: relative;

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

    background:
        var(--gf-ink);

}


.gf-footer__bottom::before {

    content: "";

    position: absolute;

    top: -1px;
    left: 0;

    width: 70px;
    height: 1px;

    background:
        var(--gf-copper);

}


.gf-footer__bottom-inner {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    min-height: 72px;

}


.gf-footer__copyright {

    margin: 0;

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

    letter-spacing: 0.045em;

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

}



/* ============================================================
   16. POWERED BY
============================================================ */

.gf-footer__powered {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        8px 0;

    font-size: 0.51rem;

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

}


.gf-footer__powered::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 3px;

    height: 1px;

    background:
        var(--gf-copper);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform
        350ms
        var(--gf-ease-standard);

}


.gf-footer__powered:hover::after {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.gf-footer__powered strong {

    font-weight: 700;

    color:
        var(--gf-white);

}


.gf-footer__powered-arrow {

    margin-left: 3px;

    color:
        var(--gf-green);

    transition:
        transform
        280ms
        var(--gf-ease-standard);

}


.gf-footer__powered:hover
.gf-footer__powered-arrow {

    transform:
        translate(3px, -3px);

}



/* ============================================================
   17. ANIMATION PREPARATION
============================================================ */

.gf-footer.is-prepared
.gf-footer__top {

    opacity: 0;

    transform:
        translateY(24px);

}


.gf-footer.is-prepared
.gf-footer__grid {

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

}


.gf-footer.is-prepared
.gf-footer__bottom-inner {

    opacity: 0;

}



/* ============================================================
   18. REVEALED
============================================================ */

.gf-footer.is-visible
.gf-footer__top {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity
        650ms
        ease,

        transform
        850ms
        var(--gf-ease-standard);

}


.gf-footer.is-visible
.gf-footer__grid {

    clip-path:
        inset(0);

    transition:
        clip-path
        1s
        180ms
        var(--gf-ease-emphasized);

}


.gf-footer.is-visible
.gf-footer__bottom-inner {

    opacity: 1;

    transition:
        opacity
        650ms
        520ms
        ease;

}



/* ============================================================
   19. COMPUTER
   >= 1200px
============================================================ */

@media (min-width: 1200px) {

    .gf-footer__grid {

        grid-template-columns:
            minmax(300px, 1.2fr)
            minmax(170px, 0.7fr)
            minmax(265px, 1fr)
            minmax(230px, 0.9fr);

    }

}



/* ============================================================
   20. TABLET
   768px - 1199px
============================================================ */

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

    .gf-footer__top {

        align-items:
            flex-start;

    }


    .gf-footer__top h2 {

        font-size:
            clamp(
                2.7rem,
                5.8vw,
                4.5rem
            );

    }


    .gf-footer__grid {

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

        gap:
            55px 65px;

    }


    .gf-footer__brand-column {

        padding-right: 0;

    }

}



/* ============================================================
   21. MOBILE
   481px - 767px
============================================================ */

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

    .gf-footer__top {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 31px;

    }


    .gf-footer__top-heading {

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

        gap: 18px;

    }


    .gf-footer__top h2 {

        font-size:
            clamp(
                2.5rem,
                8vw,
                3.8rem
            );

    }


    .gf-footer__estimate {

        min-height: 49px;

    }


    .gf-footer__grid {

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

        gap:
            50px 35px;

    }


    .gf-footer__brand-column {

        padding-right: 0;

    }


    .gf-footer__bottom-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap: 7px;

        padding-block:
            20px;

    }

}



/* ============================================================
   22. SMALL MOBILE
   <= 480px
============================================================ */

@media (max-width: 480px) {

    .gf-footer__main {

        padding:
            67px 0 58px;

    }


    .gf-footer__top {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 27px;

        padding-bottom:
            39px;

        margin-bottom:
            42px;

    }


    .gf-footer__top-heading {

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

        gap: 12px;

    }


    .gf-footer__top-index {

        font-size:
            0.8rem;

    }


    .gf-footer__top h2 {

        font-size:
            clamp(
                2.25rem,
                10.4vw,
                3.25rem
            );

    }


    .gf-footer__estimate {

        width: 100%;

        min-height: 47px;

    }


    .gf-footer__grid {

        grid-template-columns:
            1fr;

        gap: 44px;

    }


    .gf-footer__brand-column {

        padding-right: 0;

    }


    .gf-footer__brand {

        width: 190px;

    }


    .gf-footer__description {

        font-size: 0.74rem;

    }


    .gf-footer__column-heading {

        margin-bottom: 21px;

    }


    .gf-footer__hours-row {

        min-height: 39px;

    }


    .gf-footer__social {

        min-height: 65px;

    }


    .gf-footer__bottom-inner {

        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap: 7px;

        min-height: 0;

        padding:
            20px 0;

    }


    .gf-footer__copyright {

        line-height: 1.6;

    }


    .gf-footer__powered {

        flex-wrap: wrap;

    }

}



/* ============================================================
   23. REDUCED MOTION
============================================================ */

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

    .gf-footer__top,
    .gf-footer__bottom-inner {

        opacity:
            1 !important;

        transform:
            none !important;

    }


    .gf-footer__grid {

        clip-path:
            none !important;

    }


    .gf-footer__estimate,
    .gf-footer__estimate::before,
    .gf-footer__links a,
    .gf-footer__social,
    .gf-footer__social::before,
    .gf-footer__powered,
    .gf-footer__powered::after {

        transition:
            none !important;

    }

}







































/* ============================================================
   GREEN FORCE PROPERTY SERVICES
   GLOBAL DESCRIPTION READABILITY UPDATE

   Improves paragraph readability without enlarging:
   - Eyebrows
   - Metadata
   - Section indexes
   - Small labels
   - Decorative copy
============================================================ */


/* ============================================================
   01. HERO DESCRIPTION
============================================================ */

.gf-hero__description {

    max-width: 620px;

    font-size:
        clamp(
            1rem,
            1.05vw,
            1.12rem
        );

    line-height:
        1.72;

}



/* ============================================================
   02. SERVICES INTRO
============================================================ */

.gf-services__intro p {

    max-width:
        430px;

    font-size:
        clamp(
            0.98rem,
            1vw,
            1.08rem
        );

    line-height:
        1.72;

}



/* ============================================================
   03. SERVICE CARD DESCRIPTIONS
============================================================ */

.gf-service-card__description {

    max-width:
        540px;

    font-size:
        clamp(
            0.9rem,
            0.92vw,
            1rem
        );

    line-height:
        1.65;

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

}


.gf-service-card--featured
.gf-service-card__description {

    max-width:
        610px;

    font-size:
        clamp(
            1rem,
            1.05vw,
            1.12rem
        );

    line-height:
        1.66;

}



/* ============================================================
   04. ADDITIONAL SERVICES DESCRIPTION
============================================================ */

.gf-services__additional-heading p {

    max-width:
        340px;

    font-size:
        0.9rem;

    line-height:
        1.65;

}



/* ============================================================
   05. WHY CHOOSE US
============================================================ */

.gf-why__header-note p {

    max-width:
        400px;

    font-size:
        clamp(
            0.96rem,
            1vw,
            1.06rem
        );

    line-height:
        1.72;

}


.gf-why__content-intro p {

    max-width:
        550px;

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

    line-height:
        1.7;

}


.gf-why__reason-content p {

    max-width:
        540px;

    font-size:
        clamp(
            0.86rem,
            0.9vw,
            0.96rem
        );

    line-height:
        1.64;

}



/* ============================================================
   06. REVIEWS
============================================================ */

.gf-reviews__intro p {

    max-width:
        400px;

    font-size:
        clamp(
            0.96rem,
            1vw,
            1.06rem
        );

    line-height:
        1.72;

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

}


.gf-reviews__placeholder p {

    max-width:
        370px;

    font-size:
        clamp(
            0.88rem,
            0.92vw,
            0.98rem
        );

    line-height:
        1.65;

}



/* ============================================================
   07. SERVICE AREAS
============================================================ */

.gf-areas__intro p {

    max-width:
        400px;

    font-size:
        clamp(
            0.96rem,
            1vw,
            1.06rem
        );

    line-height:
        1.72;

}


.gf-areas__panel-intro p {

    max-width:
        380px;

    font-size:
        clamp(
            0.84rem,
            0.88vw,
            0.94rem
        );

    line-height:
        1.65;

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

}


.gf-map-popup p {

    font-size:
        0.82rem;

    line-height:
        1.6;

}



/* ============================================================
   08. FOOTER
============================================================ */

.gf-footer__description {

    max-width:
        420px;

    font-size:
        clamp(
            0.9rem,
            0.94vw,
            1rem
        );

    line-height:
        1.72;

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

}


.gf-footer__social-intro {

    max-width:
        300px;

    font-size:
        0.88rem;

    line-height:
        1.7;

}



/* ============================================================
   09. TABLET
   768px - 1199px
============================================================ */

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

    .gf-hero__description {

        font-size:
            0.96rem;

    }


    .gf-service-card__description {

        font-size:
            0.88rem;

    }


    .gf-service-card--featured
    .gf-service-card__description {

        font-size:
            1rem;

    }


    .gf-why__header-note p,
    .gf-why__content-intro p,
    .gf-reviews__intro p,
    .gf-areas__intro p {

        font-size:
            0.94rem;

    }


    .gf-why__reason-content p {

        font-size:
            0.84rem;

    }


    .gf-areas__panel-intro p {

        font-size:
            0.82rem;

    }

}



/* ============================================================
   10. MOBILE
   481px - 767px
============================================================ */

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

    .gf-hero__description {

        font-size:
            0.88rem;

        line-height:
            1.6;

    }


    .gf-services__intro p {

        font-size:
            0.94rem;

    }


    .gf-service-card__description,
    .gf-service-card--featured
    .gf-service-card__description {

        font-size:
            0.84rem;

        line-height:
            1.6;

    }


    .gf-why__header-note p,
    .gf-why__content-intro p,
    .gf-reviews__intro p,
    .gf-areas__intro p {

        font-size:
            0.9rem;

        line-height:
            1.65;

    }


    .gf-why__reason-content p {

        font-size:
            0.8rem;

        line-height:
            1.58;

    }


    .gf-areas__panel-intro p {

        font-size:
            0.8rem;

    }


    .gf-footer__description {

        font-size:
            0.88rem;

    }

}



/* ============================================================
   11. SMALL MOBILE
   <= 480px
============================================================ */

@media (max-width: 480px) {

    /*
        Previously several of these descriptions were
        around .63rem - .78rem.

        They now remain comfortably readable without
        overwhelming the mobile composition.
    */

    .gf-hero__description {

        font-size:
            0.84rem;

        line-height:
            1.56;

    }


    .gf-services__intro p {

        font-size:
            0.9rem;

        line-height:
            1.65;

    }


    .gf-service-card__description,
    .gf-service-card--featured
    .gf-service-card__description {

        font-size:
            0.82rem;

        line-height:
            1.58;

    }


    .gf-services__additional-heading p {

        font-size:
            0.84rem;

    }


    .gf-why__header-note p {

        font-size:
            0.9rem;

        line-height:
            1.65;

    }


    .gf-why__content-intro p {

        font-size:
            0.86rem;

        line-height:
            1.63;

    }


    .gf-why__reason-content p {

        font-size:
            0.78rem;

        line-height:
            1.58;

    }


    .gf-reviews__intro p {

        font-size:
            0.88rem;

        line-height:
            1.65;

    }


    .gf-reviews__placeholder p {

        font-size:
            0.8rem;

        line-height:
            1.6;

    }


    .gf-areas__intro p {

        font-size:
            0.88rem;

        line-height:
            1.65;

    }


    .gf-areas__panel-intro p {

        font-size:
            0.78rem;

        line-height:
            1.6;

    }


    .gf-map-popup p {

        font-size:
            0.78rem;

    }


    .gf-footer__description {

        font-size:
            0.86rem;

        line-height:
            1.67;

    }


    .gf-footer__social-intro {

        font-size:
            0.82rem;

        line-height:
            1.65;

    }

}



/* ============================================================
   12. REDUCED MOTION
============================================================ */

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

    /* Typography only — no additional motion rules required. */

}

/*TELEFONO FLOTANTE*/
.whatsapp-float {
  position: fixed;
  left: clamp(16px, 3vw, 24px);
  bottom: clamp(16px, 3vh, 24px);

  width: clamp(56px, 7vw, 64px);
  height: clamp(56px, 7vw, 64px);

  border-radius: 50%;
  background: linear-gradient(135deg, #2ee86f 0%, #25d366 45%, #15b957 100%);

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

  z-index: 9999;
  cursor: pointer;
  text-decoration: none;

  box-shadow:
    0 10px 24px rgba(37, 211, 102, 0.45),
    0 18px 42px rgba(37, 211, 102, 0.28),
    0 0 0 6px rgba(37, 211, 102, 0.16),
    inset 0 4px 8px rgba(255, 255, 255, 0.22),
    inset 0 -5px 10px rgba(0, 100, 40, 0.28);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.06);

  box-shadow:
    0 12px 28px rgba(37, 211, 102, 0.55),
    0 24px 55px rgba(37, 211, 102, 0.35),
    0 0 0 8px rgba(37, 211, 102, 0.2),
    inset 0 4px 8px rgba(255, 255, 255, 0.24),
    inset 0 -5px 10px rgba(0, 100, 40, 0.3);
}

.whatsapp-float:active {
  transform: scale(0.96);
}

.whatsapp-float svg {
  width: clamp(28px, 3.5vw, 34px);
  height: clamp(28px, 3.5vw, 34px);
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 80, 35, 0.45));
}

.whatsapp-float svg path {
  fill: #ffffff;
}

/* Teléfono */
@media (max-width: 768px) {
  .whatsapp-float {
    left: 20px;
    bottom: 22px;

    width: 58px;
    height: 58px;
  }

  .whatsapp-float svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 420px) {
  .whatsapp-float {
    left: 18px;
    bottom: 20px;

    width: 56px;
    height: 56px;
  }

  .whatsapp-float svg {
    width: 29px;
    height: 29px;
  }
}