/* =========================================================
   TZIR LANDSCAPING
   GLOBAL DESIGN SYSTEM
   ========================================================= */


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

:root {

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

    --tzir-forest-950: #172507;
    --tzir-forest-800: #273E0A;

    --tzir-moss-700: #3E531C;
    --tzir-leaf-600: #5F7728;

    --tzir-bark-900: #322121;
    --tzir-earth-400: #A28C79;

    --tzir-stone-200: #D9D6CF;

    --tzir-ivory-50: #F6F5F3;

    --tzir-charcoal-950: #181B16;

    --tzir-white: #FFFFFF;


    /* -----------------------------------------
       DERIVED COLORS
       ----------------------------------------- */

    --tzir-text-primary: var(--tzir-charcoal-950);

    --tzir-text-secondary:
        rgba(24, 27, 22, 0.72);

    --tzir-text-muted:
        rgba(24, 27, 22, 0.58);

    --tzir-border:
        rgba(50, 33, 33, 0.15);

    --tzir-border-green:
        rgba(39, 62, 10, 0.18);

    --tzir-surface:
        rgba(255, 255, 255, 0.72);

    --tzir-surface-solid:
        var(--tzir-white);


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

    --tzir-font-display:
        "Cormorant Garamond",
        Georgia,
        serif;

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


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

    --tzir-container:
        1380px;

    --tzir-page-padding:
        clamp(24px, 5vw, 78px);

    --tzir-section-space:
        clamp(88px, 9vw, 148px);

    /*
       Más adelante actualizaremos este valor
       exactamente con la altura real del header.
    */
    --tzir-scroll-offset:
        112px;


    /* -----------------------------------------
       BORDER RADIUS
       ----------------------------------------- */

    --tzir-radius-xs:
        4px;

    --tzir-radius-sm:
        6px;

    --tzir-radius-md:
        10px;

    --tzir-radius-lg:
        14px;


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

    --tzir-shadow-soft:
        0 18px 45px rgba(23, 37, 7, 0.08),
        0 5px 14px rgba(50, 33, 33, 0.05);

    --tzir-shadow-photo:
        0 32px 65px rgba(23, 37, 7, 0.13),
        0 10px 25px rgba(50, 33, 33, 0.08);

    --tzir-shadow-hover:
        0 28px 65px rgba(23, 37, 7, 0.14),
        0 10px 22px rgba(50, 33, 33, 0.08);


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

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

    --tzir-ease-soft:
        cubic-bezier(0.16, 1, 0.3, 1);

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

    --tzir-duration-fast:
        260ms;

    --tzir-duration-normal:
        480ms;

    --tzir-duration-slow:
        780ms;

    --tzir-duration-page:
        620ms;
}



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

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

html {
    margin: 0;
    padding: 0;

    min-height: 100%;

    background:
        var(--tzir-ivory-50);

    color:
        var(--tzir-text-primary);

    text-size-adjust: 100%;

    -webkit-text-size-adjust: 100%;
}

body {
    position: relative;

    isolation: isolate;

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

    margin: 0;

    overflow-x: hidden;

    background:
        var(--tzir-ivory-50);

    color:
        var(--tzir-text-primary);

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

    font-size:
        1.0625rem;

    font-weight:
        400;

    line-height:
        1.72;

    letter-spacing:
        -0.01em;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

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


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

    max-width: 100%;
}


img {
    height: auto;
}


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


button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


button {
    border: 0;

    cursor: pointer;
}


a {
    color: inherit;

    text-decoration: none;
}


ul,
ol {
    margin: 0;
    padding: 0;
}


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


::selection {
    background:
        var(--tzir-moss-700);

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



/* =========================================================
   03. GLOBAL PAPER / TOPOGRAPHIC BACKGROUND
   ========================================================= */

/*
    Esta será una de las firmas visuales del sitio.

    No es una cuadrícula.

    Combina:
    - curvas topográficas
    - manchas orgánicas de luz
    - papel/mineral extremadamente sutil
*/

body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background-image:

        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='460' viewBox='0 0 760 460'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.075' d='M-80 90C55 13 153 155 286 94S541 26 820 115'/%3E%3Cpath opacity='.055' d='M-72 124C58 46 161 191 300 125S563 59 824 149'/%3E%3Cpath opacity='.055' d='M-85 317C73 223 197 371 337 304S599 228 829 323'/%3E%3Cpath opacity='.07' d='M-60 350C87 260 211 401 355 339S612 269 825 358'/%3E%3Cpath opacity='.045' d='M436 -30C367 63 456 134 555 100S705 108 788 47'/%3E%3C/g%3E%3C/svg%3E"
        ),

        radial-gradient(
            circle at 18% 18%,
            rgba(95, 119, 40, 0.045),
            transparent 32%
        ),

        radial-gradient(
            circle at 82% 72%,
            rgba(162, 140, 121, 0.075),
            transparent 28%
        );

    background-size:
        760px 460px,
        900px 900px,
        1100px 1100px;

    background-position:
        top left,
        top left,
        bottom right;

    opacity:
        1;
}



/*
    Ruido orgánico tipo papel.

    Se usa SVG noise en lugar de un patrón
    repetitivo de puntos para evitar sensación
    de cuadrícula.
*/

body::after {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.055;

    mix-blend-mode:
        multiply;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.42'/%3E%3C/svg%3E"
        );
}



/* =========================================================
   04. SITE SHELL
   ========================================================= */

.tzir-site {
    position: relative;

    width: 100%;

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


.tzir-container {
    width:
        min(
            calc(100% - (var(--tzir-page-padding) * 2)),
            var(--tzir-container)
        );

    margin-inline:
        auto;
}


main {
    position: relative;
}


section {
    position: relative;

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


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



/* =========================================================
   05. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--tzir-forest-950);

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

    font-weight:
        600;

    text-wrap:
        balance;

    letter-spacing:
        -0.035em;
}


h1 {
    font-size:
        clamp(3.4rem, 6.6vw, 6.4rem);

    line-height:
        0.93;
}


h2 {
    font-size:
        clamp(2.65rem, 4.9vw, 4.7rem);

    line-height:
        0.98;
}


h3 {
    font-size:
        clamp(1.8rem, 2.5vw, 2.5rem);

    line-height:
        1.05;
}


h4 {
    font-size:
        clamp(1.4rem, 1.9vw, 1.8rem);

    line-height:
        1.1;
}


p {
    margin-bottom:
        1.35em;

    color:
        var(--tzir-text-secondary);
}


.tzir-lead {
    max-width:
        68ch;

    font-size:
        clamp(1.08rem, 1.1vw, 1.22rem);

    line-height:
        1.75;
}


.tzir-kicker {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.78rem;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        0.22em;

    text-transform:
        uppercase;
}


.tzir-kicker::before {
    content: "";

    width:
        28px;

    height:
        1px;

    background:
        var(--tzir-leaf-600);
}



/* =========================================================
   06. LINKS
   ========================================================= */

.tzir-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

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

    font-weight:
        700;

    transition:
        color var(--tzir-duration-fast)
        var(--tzir-ease-standard);
}


.tzir-link:hover {
    color:
        var(--tzir-leaf-600);
}



/* =========================================================
   07. GLOBAL BUTTONS
   ========================================================= */

.tzir-btn {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    min-height:
        58px;

    padding:
        15px 28px;

    overflow:
        hidden;

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

    font-size:
        0.98rem;

    font-weight:
        700;

    line-height:
        1.2;

    transition:
        transform var(--tzir-duration-normal)
        var(--tzir-ease-standard),

        box-shadow var(--tzir-duration-normal)
        var(--tzir-ease-standard),

        background-color var(--tzir-duration-fast)
        ease,

        color var(--tzir-duration-fast)
        ease,

        border-color var(--tzir-duration-fast)
        ease;
}


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

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            110deg,
            transparent 15%,
            rgba(255, 255, 255, 0.16) 47%,
            transparent 75%
        );

    transform:
        translateX(-120%);

    transition:
        transform 750ms
        var(--tzir-ease-standard);
}


.tzir-btn:hover::before {
    transform:
        translateX(120%);
}


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


.tzir-btn:active {
    transform:
        translateY(-1px)
        scale(0.99);
}


.tzir-btn--primary {
    background:
        var(--tzir-moss-700);

    color:
        var(--tzir-white);

    box-shadow:
        0 12px 30px rgba(39, 62, 10, 0.16);
}


.tzir-btn--primary:hover {
    background:
        var(--tzir-forest-800);

    box-shadow:
        0 18px 38px rgba(39, 62, 10, 0.22);
}


.tzir-btn--outline {
    border:
        1px solid rgba(50, 33, 33, 0.42);

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

    color:
        var(--tzir-bark-900);

    backdrop-filter:
        blur(8px);
}


.tzir-btn--outline:hover {
    border-color:
        var(--tzir-moss-700);

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

    color:
        var(--tzir-forest-800);
}



/* =========================================================
   08. PAPER SURFACES
   ========================================================= */

.tzir-surface {
    background:
        rgba(255, 255, 255, 0.68);

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

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

    backdrop-filter:
        blur(9px);
}


.tzir-surface--forest {
    background:
        var(--tzir-forest-950);

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


.tzir-surface--stone {
    background:
        rgba(217, 214, 207, 0.45);
}



/* =========================================================
   09. PHOTO SYSTEM
   ========================================================= */

.tzir-photo-frame {
    position:
        relative;

    padding:
        9px;

    background:
        var(--tzir-white);

    box-shadow:
        var(--tzir-shadow-photo);

    transform:
        translateZ(0);

    transition:
        transform var(--tzir-duration-slow)
        var(--tzir-ease-standard),

        box-shadow var(--tzir-duration-slow)
        var(--tzir-ease-standard);
}


.tzir-photo-frame img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.tzir-photo-frame:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--tzir-shadow-hover);
}



/* =========================================================
   10. ACCESSIBILITY
   ========================================================= */

:focus-visible {
    outline:
        3px solid rgba(95, 119, 40, 0.54);

    outline-offset:
        4px;
}


.tzir-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;
}



/* =========================================================
   11. CUSTOM SCROLLBAR
   ========================================================= */

/* Firefox */

html {
    scrollbar-width:
        thin;

    scrollbar-color:
        var(--tzir-moss-700)
        var(--tzir-ivory-50);
}


/* Chromium / Safari */

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

    height:
        12px;
}


::-webkit-scrollbar-track {
    background:
        var(--tzir-ivory-50);
}


::-webkit-scrollbar-thumb {
    border:
        3px solid
        var(--tzir-ivory-50);

    border-radius:
        10px;

    background:
        linear-gradient(
            180deg,
            var(--tzir-moss-700),
            var(--tzir-forest-800)
        );
}


::-webkit-scrollbar-thumb:hover {
    background:
        var(--tzir-leaf-600);
}



/* =========================================================
   12. PAGE TRANSITION
   ========================================================= */

/*
    La transición utiliza una cortina orgánica
    verde y la marca en el centro.

    No existe loader.
    No esperamos artificialmente contenido.

    Solamente acompaña el cambio real de página.
*/

.tzir-page-transition {
    position:
        fixed;

    inset:
        0;

    z-index:
        2147483000;

    pointer-events:
        none;
}


/*
    Si JS está desactivado, no debe existir
    ninguna capa tapando el sitio.
*/

html:not(.tzir-js)
.tzir-page-transition {
    display:
        none;
}


.tzir-page-transition__veil {
    position:
        absolute;

    inset:
        0;

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

    transform:
        scaleX(1);

    transform-origin:
        right center;

    transition:
        transform
        var(--tzir-duration-page)
        var(--tzir-ease-page);
}


.tzir-page-transition__texture {
    position:
        absolute;

    inset:
        0;

    opacity:
        0.18;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='460' viewBox='0 0 760 460'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath opacity='.15' d='M-80 90C55 13 153 155 286 94S541 26 820 115'/%3E%3Cpath opacity='.1' d='M-72 124C58 46 161 191 300 125S563 59 824 149'/%3E%3Cpath opacity='.11' d='M-85 317C73 223 197 371 337 304S599 228 829 323'/%3E%3C/g%3E%3C/svg%3E"
        );

    transform:
        scaleX(1);

    transform-origin:
        right center;

    transition:
        transform
        var(--tzir-duration-page)
        var(--tzir-ease-page);
}


.tzir-page-transition__brand {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        13px;

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

    opacity:
        1;

    transition:
        opacity 260ms ease,
        transform 520ms
        var(--tzir-ease-standard);
}


.tzir-page-transition__brand img {
    width:
        clamp(72px, 8vw, 108px);

    height:
        auto;

    filter:
        drop-shadow(
            0 12px 20px
            rgba(0, 0, 0, 0.16)
        );
}


.tzir-page-transition__brand span {
    color:
        rgba(255, 255, 255, 0.78);

    font-size:
        0.69rem;

    font-weight:
        600;

    letter-spacing:
        0.24em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}



/* Page visible */

html.tzir-page-ready
.tzir-page-transition__veil,

html.tzir-page-ready
.tzir-page-transition__texture {
    transform:
        scaleX(0);

    transform-origin:
        left center;
}


html.tzir-page-ready
.tzir-page-transition__brand {
    opacity:
        0;

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



/* Page leaving */

html.tzir-page-leaving
.tzir-page-transition__veil,

html.tzir-page-leaving
.tzir-page-transition__texture {
    transform:
        scaleX(1);

    transform-origin:
        right center;
}


html.tzir-page-leaving
.tzir-page-transition__brand {
    opacity:
        1;

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



/*
    Importantísimo para bfcache / navegador atrás.

    Permite resetear la interfaz instantáneamente
    sin reproducir una transición antigua.
*/

html.tzir-transition-instant
.tzir-page-transition__veil,

html.tzir-transition-instant
.tzir-page-transition__texture,

html.tzir-transition-instant
.tzir-page-transition__brand {
    transition:
        none !important;
}



/* =========================================================
   13. GLOBAL MOTION UTILITIES
   ========================================================= */

[data-tzir-image] {
    overflow:
        hidden;
}


[data-tzir-image] img {
    transform:
        scale(1.025);

    transition:
        transform 1.15s
        var(--tzir-ease-standard);
}


[data-tzir-image]:hover img {
    transform:
        scale(1.055);
}



/* =========================================================
   14. RESPONSIVE
   EXACTLY FOUR BREAKPOINTS
   ========================================================= */


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

@media (min-width: 1200px) {

    body {
        font-size:
            1.125rem;
    }

    .tzir-container {
        width:
            min(
                calc(100% - 120px),
                var(--tzir-container)
            );
    }

    .tzir-btn {
        min-height:
            60px;

        padding-inline:
            30px;
    }

}



/* =========================================================
   TABLET
   769px — 1199px
   ========================================================= */

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

    :root {
        --tzir-page-padding:
            40px;

        --tzir-section-space:
            104px;

        --tzir-scroll-offset:
            104px;
    }

    body {
        font-size:
            1.0625rem;
    }

    h1 {
        font-size:
            clamp(3.2rem, 7.3vw, 5rem);
    }

}



/* =========================================================
   MOBILE
   481px — 768px
   ========================================================= */

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

    :root {
        --tzir-page-padding:
            24px;

        --tzir-section-space:
            84px;

        --tzir-scroll-offset:
            92px;
    }

    body {
        font-size:
            1rem;

        line-height:
            1.68;
    }

    h1 {
        font-size:
            clamp(3rem, 11.5vw, 4.3rem);
    }

    h2 {
        font-size:
            clamp(2.5rem, 9vw, 3.6rem);
    }

    .tzir-btn {
        min-height:
            56px;

        padding:
            14px 23px;
    }

}



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

@media (max-width: 480px) {

    :root {
        --tzir-page-padding:
            18px;

        --tzir-section-space:
            72px;

        --tzir-scroll-offset:
            84px;
    }

    body {
        font-size:
            1rem;

        line-height:
            1.66;
    }

    h1 {
        font-size:
            clamp(2.7rem, 13vw, 3.75rem);

        line-height:
            0.97;
    }

    h2 {
        font-size:
            clamp(2.25rem, 11vw, 3.15rem);
    }

    h3 {
        font-size:
            1.75rem;
    }

    .tzir-kicker {
        font-size:
            0.72rem;

        letter-spacing:
            0.17em;
    }

    .tzir-btn {
        width:
            100%;

        min-height:
            56px;

        padding:
            14px 20px;
    }

}










































/* =========================================================
   TZIR LANDSCAPING
   01. HEADER
   ========================================================= */


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

:root {

    /*
        Esta altura también será utilizada
        por el Hero.
    */

    --tzir-header-height:
        96px;

    --tzir-header-z:
        2000;

    --tzir-menu-z:
        1990;


    /*
        Primera pantalla.

        Header + Hero = 100svh
    */

    --tzir-hero-viewport-height:
        calc(
            100vh -
            var(--tzir-header-height)
        );


    /*
        Anchor offset.
    */

    --tzir-scroll-offset:
        calc(
            var(--tzir-header-height) +
            18px
        );
}


/*
    svh cuando está disponible.
*/

@supports (height: 100svh) {

    :root {

        --tzir-hero-viewport-height:
            calc(
                100svh -
                var(--tzir-header-height)
            );

    }

}



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

.tzir-header-slot {

    position:
        relative;

    width:
        100%;

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

    flex:
        0 0
        var(--tzir-header-height);

}



/* =========================================================
   03. FIXED HEADER SHELL
   ========================================================= */

.tzir-header-shell {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

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

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

    background:
        rgba(
            246,
            245,
            243,
            0.92
        );

    border-bottom:
        1px solid
        rgba(
            39,
            62,
            10,
            0.07
        );

    backdrop-filter:
        blur(18px)
        saturate(1.08);

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

    transition:
        background-color
        var(--tzir-duration-normal)
        var(--tzir-ease-standard),

        box-shadow
        var(--tzir-duration-normal)
        var(--tzir-ease-standard),

        border-color
        var(--tzir-duration-normal)
        var(--tzir-ease-standard);

}


/*
    Topographic detail.

    Muy sutil para continuar el lenguaje
    visual aprobado.
*/

.tzir-header-shell::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    opacity:
        0.28;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='120' viewBox='0 0 720 120'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.10' d='M320-20C375 27 428 8 485 31S601 67 742 18'/%3E%3Cpath opacity='.07' d='M282-7C352 49 415 31 482 52S608 84 748 43'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-repeat:
        repeat-x;

    background-position:
        right top;

}


.tzir-header-shell::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -1px;

    width:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                95,
                119,
                40,
                0.65
            ),
            transparent
        );

    transform:
        translateX(-50%);

    transition:
        width
        800ms
        var(--tzir-ease-standard);

}


.tzir-header-shell.is-scrolled {

    background:
        rgba(
            246,
            245,
            243,
            0.97
        );

    border-bottom-color:
        rgba(
            39,
            62,
            10,
            0.12
        );

    box-shadow:
        0 12px 35px
        rgba(
            23,
            37,
            7,
            0.08
        );

}


.tzir-header-shell.is-scrolled::after {

    width:
        min(
            54%,
            760px
        );

}



/* =========================================================
   04. HEADER CONTENT
   ========================================================= */

.tzir-header {

    width:
        100%;

    height:
        100%;

}


.tzir-header__inner {

    position:
        relative;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    height:
        100%;

    margin-inline:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(
            20px,
            2.2vw,
            40px
        );

}



/* =========================================================
   05. BRAND
   ========================================================= */

.tzir-header__brand {

    position:
        relative;

    z-index:
        3;

    display:
        inline-flex;

    align-items:
        center;

    flex:
        0 0 auto;

    transform:
        translateZ(0);

}


.tzir-header__brand img {

    display:
        block;

    width:
        auto;

    height:
        63px;

    object-fit:
        contain;

    transition:
        transform
        600ms
        var(--tzir-ease-standard),

        filter
        600ms
        var(--tzir-ease-standard);

}


.tzir-header__brand:hover img {

    transform:
        translateY(-2px)
        scale(1.012);

    filter:
        drop-shadow(
            0 8px 12px
            rgba(
                23,
                37,
                7,
                0.08
            )
        );

}



/* =========================================================
   06. DESKTOP NAV
   ========================================================= */

.tzir-header__nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(
            20px,
            1.75vw,
            34px
        );

    margin-left:
        auto;

}


.tzir-header__link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        44px;

    color:
        rgba(
            24,
            27,
            22,
            0.82
        );

    font-size:
        0.95rem;

    font-weight:
        600;

    letter-spacing:
        -0.015em;

    white-space:
        nowrap;

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

}


.tzir-header__link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        4px;

    width:
        100%;

    height:
        1.5px;

    background:
        var(--tzir-leaf-600);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        480ms
        var(--tzir-ease-standard);

}


.tzir-header__link:hover {

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

}


.tzir-header__link:hover::after,
.tzir-header__link.is-active::after {

    transform:
        scaleX(1);

    transform-origin:
        left center;

}


.tzir-header__link.is-active {

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

}



/* =========================================================
   07. FREE ESTIMATE BUTTON
   ========================================================= */

.tzir-header__estimate {

    position:
        relative;

    z-index:
        4;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    flex:
        0 0 auto;

    min-height:
        52px;

    padding:
        13px 21px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            39,
            62,
            10,
            0.16
        );

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

    background:
        var(--tzir-moss-700);

    color:
        var(--tzir-white);

    box-shadow:
        0 10px 24px
        rgba(
            39,
            62,
            10,
            0.14
        );

    font-size:
        0.92rem;

    font-weight:
        700;

    line-height:
        1;

    white-space:
        nowrap;

    transition:
        transform
        460ms
        var(--tzir-ease-standard),

        background-color
        300ms
        ease,

        box-shadow
        460ms
        var(--tzir-ease-standard);

}


.tzir-header__estimate::before {

    content:
        "";

    position:
        absolute;

    top:
        -30%;

    left:
        -45%;

    width:
        42%;

    height:
        160%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.22
            ),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left
        700ms
        var(--tzir-ease-standard);

}


.tzir-header__estimate:hover {

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

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(
            39,
            62,
            10,
            0.2
        );

}


.tzir-header__estimate:hover::before {

    left:
        115%;

}


.tzir-header__estimate-arrow {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        20px;

    height:
        20px;

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-header__estimate-arrow svg {

    width:
        19px;

    height:
        19px;

}


.tzir-header__estimate:hover
.tzir-header__estimate-arrow {

    transform:
        translateX(3px);

}



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

.tzir-menu-toggle {

    position:
        relative;

    z-index:
        5;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    padding:
        0;

    flex:
        0 0 auto;

    border:
        1px solid
        rgba(
            39,
            62,
            10,
            0.16
        );

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

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

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

    box-shadow:
        0 6px 18px
        rgba(
            23,
            37,
            7,
            0.05
        );

    transition:
        background-color
        var(--tzir-duration-fast)
        ease,

        border-color
        var(--tzir-duration-fast)
        ease,

        transform
        var(--tzir-duration-normal)
        var(--tzir-ease-standard);

}


.tzir-menu-toggle:hover {

    background:
        var(--tzir-white);

    border-color:
        rgba(
            39,
            62,
            10,
            0.3
        );

}


.tzir-menu-toggle__line {

    position:
        absolute;

    left:
        50%;

    width:
        20px;

    height:
        1.7px;

    border-radius:
        2px;

    background:
        currentColor;

    transform-origin:
        center;

    transition:
        top
        420ms
        var(--tzir-ease-standard),

        transform
        420ms
        var(--tzir-ease-standard),

        opacity
        240ms
        ease;

}


.tzir-menu-toggle__line:nth-child(1) {

    top:
        16px;

    transform:
        translateX(-50%);

}


.tzir-menu-toggle__line:nth-child(2) {

    top:
        23px;

    transform:
        translateX(-50%);

}


.tzir-menu-toggle__line:nth-child(3) {

    top:
        30px;

    transform:
        translateX(-50%);

}



/* Open → X */

.tzir-menu-toggle.is-open
.tzir-menu-toggle__line:nth-child(1) {

    top:
        23px;

    transform:
        translateX(-50%)
        rotate(45deg);

}


.tzir-menu-toggle.is-open
.tzir-menu-toggle__line:nth-child(2) {

    opacity:
        0;

    transform:
        translateX(-50%)
        scaleX(0);

}


.tzir-menu-toggle.is-open
.tzir-menu-toggle__line:nth-child(3) {

    top:
        23px;

    transform:
        translateX(-50%)
        rotate(-45deg);

}



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

.tzir-mobile-menu {

    position:
        fixed;

    inset:
        0;

    z-index:
        var(--tzir-menu-z);

    min-height:
        100vh;

    padding-top:
        var(--tzir-header-height);

    overflow-x:
        hidden;

    overflow-y:
        auto;

    overscroll-behavior:
        contain;

    background:
        rgba(
            246,
            245,
            243,
            0.985
        );

    visibility:
        hidden;

    pointer-events:
        none;

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

    transition:
        clip-path
        680ms
        var(--tzir-ease-page),

        visibility
        0s linear
        680ms;

}


@supports (height: 100dvh) {

    .tzir-mobile-menu {

        min-height:
            100dvh;

    }

}



/*
    Topographic texture.
*/

.tzir-mobile-menu::before {

    content:
        "";

    position:
        fixed;

    inset:
        var(--tzir-header-height)
        0
        0
        0;

    z-index:
        -1;

    pointer-events:
        none;

    opacity:
        0.8;

    background-image:

        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='460' viewBox='0 0 760 460'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.07' d='M-80 90C55 13 153 155 286 94S541 26 820 115'/%3E%3Cpath opacity='.05' d='M-72 124C58 46 161 191 300 125S563 59 824 149'/%3E%3Cpath opacity='.055' d='M-85 317C73 223 197 371 337 304S599 228 829 323'/%3E%3C/g%3E%3C/svg%3E"
        ),

        radial-gradient(
            circle at 82% 18%,
            rgba(
                95,
                119,
                40,
                0.07
            ),
            transparent 31%
        ),

        radial-gradient(
            circle at 10% 85%,
            rgba(
                162,
                140,
                121,
                0.08
            ),
            transparent 30%
        );

    background-size:
        760px 460px,
        auto,
        auto;

}


.tzir-mobile-menu.is-open {

    visibility:
        visible;

    pointer-events:
        auto;

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

    transition:
        clip-path
        680ms
        var(--tzir-ease-page),

        visibility
        0s linear
        0s;

}



/* =========================================================
   10. MOBILE MENU CONTENT
   ========================================================= */

.tzir-mobile-menu__inner {

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            850px
        );

    min-height:
        calc(
            100vh -
            var(--tzir-header-height)
        );

    margin-inline:
        auto;

    padding:
        clamp(
            42px,
            7vh,
            80px
        )
        0
        38px;

    display:
        flex;

    flex-direction:
        column;

}


.tzir-mobile-menu__nav {

    display:
        flex;

    flex-direction:
        column;

}


.tzir-mobile-menu__link {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        72px;

    border-bottom:
        1px solid
        rgba(
            39,
            62,
            10,
            0.11
        );

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

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

    font-size:
        clamp(
            2rem,
            5vw,
            2.85rem
        );

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        -0.035em;

    opacity:
        0;

    transform:
        translateY(20px);

    transition:
        color
        250ms
        ease,

        transform
        650ms
        var(--tzir-ease-standard),

        opacity
        500ms
        ease;

}


.tzir-mobile-menu__link::after {

    content:
        "↗";

    color:
        var(--tzir-leaf-600);

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

    font-size:
        1.05rem;

    font-weight:
        500;

    opacity:
        0;

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

    transition:
        opacity
        350ms
        ease,

        transform
        450ms
        var(--tzir-ease-standard);

}


.tzir-mobile-menu__link:hover {

    color:
        var(--tzir-moss-700);

}


.tzir-mobile-menu__link:hover::after {

    opacity:
        1;

    transform:
        translate(
            0,
            0
        );

}



/* Stagger */

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

    opacity:
        1;

    transform:
        translateY(0);

}


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

    transition-delay:
        100ms;

}


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

    transition-delay:
        145ms;

}


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

    transition-delay:
        190ms;

}


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

    transition-delay:
        235ms;

}


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

    transition-delay:
        280ms;

}


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

    transition-delay:
        325ms;

}



/* =========================================================
   11. MOBILE MENU FOOTER
   ========================================================= */

.tzir-mobile-menu__footer {

    margin-top:
        auto;

    padding-top:
        36px;

    display:
        grid;

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

    gap:
        22px;

}


.tzir-mobile-menu__meta {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.tzir-mobile-menu__label {

    color:
        var(--tzir-moss-700);

    font-size:
        0.74rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-mobile-menu__phone,
.tzir-mobile-menu__value {

    color:
        var(--tzir-text-secondary);

    font-size:
        1rem;

    font-weight:
        600;

    line-height:
        1.5;

}


.tzir-mobile-menu__phone:hover {

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

}



/* =========================================================
   12. HEADER ENTRANCE MOTION
   ========================================================= */

.tzir-header__inner {

    animation:
        tzirHeaderSettle
        760ms
        var(--tzir-ease-standard)
        both;

}


@keyframes tzirHeaderSettle {

    from {

        transform:
            translateY(-8px);

        opacity:
            0.96;

    }

    to {

        transform:
            translateY(0);

        opacity:
            1;

    }

}



/* =========================================================
   13. MOTION ACCESSIBILITY CLASS
   Managed from JavaScript instead of a fifth media query.
   ========================================================= */

html.tzir-reduced-motion
.tzir-header__inner {

    animation:
        none !important;

}


html.tzir-reduced-motion
.tzir-mobile-menu,

html.tzir-reduced-motion
.tzir-mobile-menu__link,

html.tzir-reduced-motion
.tzir-menu-toggle__line,

html.tzir-reduced-motion
.tzir-header__estimate,

html.tzir-reduced-motion
.tzir-header__brand img {

    transition:
        none !important;

}



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

@media (min-width: 1200px) {

    :root {

        --tzir-header-height:
            96px;

    }


    .tzir-menu-toggle {

        display:
            none;

    }


    .tzir-header__brand img {

        height:
            63px;

    }


    .tzir-header__nav {

        display:
            flex;

    }


    .tzir-mobile-menu {

        display:
            none;

    }


    .tzir-header__estimate {

        min-width:
            154px;

    }

}



/* =========================================================
   15. TABLET
   769px — 1199px
   ========================================================= */

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

    :root {

        --tzir-header-height:
            88px;

    }


    .tzir-header__inner {

        display:
            grid;

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

        gap:
            20px;

    }


    .tzir-menu-toggle {

        display:
            inline-flex;

        justify-self:
            start;

    }


    .tzir-header__brand {

        justify-self:
            center;

    }


    .tzir-header__brand img {

        height:
            61px;

        max-width:
            210px;

    }


    .tzir-header__nav {

        display:
            none;

    }


    .tzir-header__estimate {

        justify-self:
            end;

        min-height:
            50px;

        padding-inline:
            19px;

    }


    .tzir-mobile-menu {

        display:
            block;

    }

}



/* =========================================================
   16. MOBILE
   481px — 768px
   ========================================================= */

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

    :root {

        --tzir-header-height:
            80px;

    }


    .tzir-header__inner {

        width:
            calc(
                100% -
                32px
            );

        display:
            grid;

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

        gap:
            12px;

    }


    .tzir-menu-toggle {

        display:
            inline-flex;

        justify-self:
            start;

        width:
            46px;

        height:
            46px;

    }


    .tzir-header__brand {

        justify-self:
            center;

    }


    .tzir-header__brand img {

        width:
            clamp(
                128px,
                27vw,
                164px
            );

        height:
            58px;

    }


    .tzir-header__nav {

        display:
            none;

    }


    .tzir-header__estimate {

        justify-self:
            end;

        min-height:
            46px;

        padding:
            11px 14px;

        gap:
            7px;

        font-size:
            0.88rem;

    }


    .tzir-header__estimate-arrow {

        width:
            17px;

        height:
            17px;

    }


    .tzir-mobile-menu {

        display:
            block;

    }


    .tzir-mobile-menu__inner {

        min-height:
            calc(
                100vh -
                80px
            );

        padding-top:
            44px;

    }


    .tzir-mobile-menu__link {

        min-height:
            68px;

        font-size:
            clamp(
                2rem,
                7vw,
                2.6rem
            );

    }

}



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

@media (max-width: 480px) {

    :root {

        --tzir-header-height:
            74px;

    }


    .tzir-header__inner {

        width:
            calc(
                100% -
                24px
            );

        display:
            grid;

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

        gap:
            7px;

    }


    .tzir-menu-toggle {

        display:
            inline-flex;

        justify-self:
            start;

        width:
            42px;

        height:
            42px;

    }


    .tzir-menu-toggle__line {

        width:
            18px;

    }


    .tzir-menu-toggle__line:nth-child(1) {

        top:
            13px;

    }


    .tzir-menu-toggle__line:nth-child(2) {

        top:
            20px;

    }


    .tzir-menu-toggle__line:nth-child(3) {

        top:
            27px;

    }


    .tzir-menu-toggle.is-open
    .tzir-menu-toggle__line:nth-child(1),

    .tzir-menu-toggle.is-open
    .tzir-menu-toggle__line:nth-child(3) {

        top:
            20px;

    }


    .tzir-header__brand {

        justify-self:
            center;

    }


    .tzir-header__brand img {

        width:
            clamp(
                96px,
                28vw,
                124px
            );

        height:
            52px;

    }


    .tzir-header__nav {

        display:
            none;

    }


    .tzir-header__estimate {

        justify-self:
            end;

        min-height:
            42px;

        padding:
            9px 10px;

        gap:
            5px;

        font-size:
            0.82rem;

    }


    .tzir-header__estimate-arrow {

        display:
            none;

    }


    .tzir-mobile-menu {

        display:
            block;

    }


    .tzir-mobile-menu__inner {

        width:
            calc(
                100% -
                36px
            );

        min-height:
            calc(
                100vh -
                74px
            );

        padding-top:
            34px;

        padding-bottom:
            26px;

    }


    .tzir-mobile-menu__link {

        min-height:
            60px;

        font-size:
            clamp(
                1.85rem,
                9vw,
                2.35rem
            );

    }


    .tzir-mobile-menu__footer {

        grid-template-columns:
            1fr;

        gap:
            18px;

        padding-top:
            28px;

    }


    .tzir-mobile-menu__phone,
    .tzir-mobile-menu__value {

        font-size:
            0.96rem;

    }

}














































/* =========================================================
   TZIR LANDSCAPING
   02. HERO
   ========================================================= */


/* =========================================================
   01. HERO BASE
   ========================================================= */

.tzir-hero {

    position:
        relative;

    width:
        100%;

    height:
        var(--tzir-hero-viewport-height);

    min-height:
        0;

    padding:
        0;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            105deg,
            #F8F6F0 0%,
            var(--tzir-ivory-50) 52%,
            #F3F1EA 100%
        );

}



/* =========================================================
   02. PAPER / TOPOGRAPHIC BACKGROUND
   ========================================================= */

.tzir-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -4;

    pointer-events:
        none;

    opacity:
        0.28;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='680' viewBox='0 0 900 680'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.14' d='M-90 130C85 21 223 195 392 116S679 29 972 144'/%3E%3Cpath opacity='.11' d='M-82 169C101 65 235 234 408 154S700 71 977 190'/%3E%3Cpath opacity='.08' d='M-100 526C81 405 248 598 421 509S719 420 981 549'/%3E%3Cpath opacity='.1' d='M-94 565C98 453 258 638 443 550S747 470 982 594'/%3E%3Cpath opacity='.09' d='M603-75C513 72 601 193 733 140S861 100 961 33'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        900px 680px;

    background-position:
        center center;

    animation:
        tzirHeroContourDrift
        26s
        ease-in-out
        infinite
        alternate;

}


.tzir-hero::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    pointer-events:
        none;

    opacity:
        0.035;

    mix-blend-mode:
        multiply;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
        );

}


@keyframes tzirHeroContourDrift {

    from {

        background-position:
            48% 48%;

    }

    to {

        background-position:
            53% 52%;

    }

}



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

.tzir-hero__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    height:
        100%;

    margin-inline:
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(0, 0.96fr);

    align-items:
        center;

    gap:
        clamp(
            44px,
            5vw,
            90px
        );

}



/* =========================================================
   04. LEFT CONTENT
   ========================================================= */

.tzir-hero__content {

    position:
        relative;

    z-index:
        4;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

}



/* =========================================================
   05. EYEBROW
   ========================================================= */

.tzir-hero__eyebrow {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        clamp(
            16px,
            2vh,
            24px
        );

    color:
        var(--tzir-moss-700);

    font-size:
        0.75rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.24em;

    text-transform:
        uppercase;

}


.tzir-hero__eyebrow i {

    display:
        block;

    width:
        4px;

    height:
        4px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--tzir-moss-700);

}



/* =========================================================
   06. TITLE
   ========================================================= */

.tzir-hero__title {

    max-width:
        780px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

    font-size:
        clamp(
            4.15rem,
            5.55vw,
            6.75rem
        );

    font-weight:
        600;

    line-height:
        0.84;

    letter-spacing:
        -0.055em;

}


.tzir-hero__title-line {

    display:
        block;

    overflow:
        hidden;

    padding-bottom:
        0.08em;

}


.tzir-hero__title-line > span {

    display:
        block;

}


.tzir-hero__title em {

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}



/* =========================================================
   07. DESCRIPTION
   ========================================================= */

.tzir-hero__description {

    max-width:
        610px;

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

    color:
        rgba(
            50,
            33,
            33,
            0.68
        );

    font-size:
        clamp(
            1rem,
            1.02vw,
            1.13rem
        );

    font-weight:
        400;

    line-height:
        1.7;

}



/* =========================================================
   08. CTA
   ========================================================= */

.tzir-hero__actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        clamp(
            20px,
            3vh,
            32px
        );

}


.tzir-hero__primary,
.tzir-hero__call {

    min-height:
        58px;

}


.tzir-hero__primary {

    min-width:
        224px;

}


.tzir-hero__primary svg {

    width:
        20px;

    height:
        20px;

    transition:
        transform
        460ms
        var(--tzir-ease-standard);

}


.tzir-hero__primary:hover svg {

    transform:
        translateX(4px);

}


.tzir-hero__call {

    min-width:
        218px;

}


.tzir-hero__call > svg {

    width:
        22px;

    height:
        22px;

    color:
        var(--tzir-bark-900);

}



/* =========================================================
   09. SERVICES STRIP
   ========================================================= */

.tzir-hero__services {

    position:
        relative;

    margin-top:
        clamp(
            21px,
            3.3vh,
            35px
        );

    padding-top:
        clamp(
            16px,
            2.2vh,
            24px
        );

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.18
        );

}


.tzir-hero__services-list {

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(
            16px,
            1.55vw,
            27px
        );

}


.tzir-hero-service {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    flex:
        0 0 auto;

    color:
        rgba(
            50,
            33,
            33,
            0.82
        );

    font-size:
        0.78rem;

    font-weight:
        600;

    line-height:
        1.2;

    white-space:
        nowrap;

    transition:
        color
        var(--tzir-duration-fast)
        ease,

        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-hero-service svg {

    width:
        21px;

    height:
        21px;

    flex:
        0 0 auto;

    color:
        var(--tzir-moss-700);

}


.tzir-hero-service:hover {

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

    transform:
        translateY(-2px);

}


.tzir-hero__all-services {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        13px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.68rem;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-hero__all-services svg {

    width:
        17px;

    height:
        17px;

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-hero__all-services:hover svg {

    transform:
        translateX(5px);

}



/* =========================================================
   10. LOCATION ROW
   ========================================================= */

.tzir-hero__location {

    display:
        grid;

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

    align-items:
        center;

    gap:
        20px;

    margin-top:
        clamp(
            16px,
            2.5vh,
            26px
        );

}


.tzir-hero__location-main {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(
            50,
            33,
            33,
            0.72
        );

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

    font-size:
        0.95rem;

    font-weight:
        600;

    line-height:
        1.2;

    white-space:
        nowrap;

}


.tzir-hero__location-main svg {

    width:
        22px;

    height:
        22px;

    flex:
        0 0 auto;

    color:
        var(--tzir-moss-700);

}


.tzir-hero__location-rule {

    display:
        block;

    width:
        100%;

    height:
        1px;

    background:
        rgba(
            50,
            33,
            33,
            0.17
        );

}


.tzir-hero__micro-tagline {

    color:
        rgba(
            62,
            83,
            28,
            0.68
        );

    font-size:
        0.63rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.24em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}



/* =========================================================
   11. PHOTO COMPOSITION
   ========================================================= */

.tzir-hero__visual {

    position:
        relative;

    align-self:
        stretch;

    min-width:
        0;

    --tzir-photo-main-x:
        0px;

    --tzir-photo-main-y:
        0px;

    --tzir-photo-secondary-x:
        0px;

    --tzir-photo-secondary-y:
        0px;

}


.tzir-hero__photo {

    position:
        absolute;

    margin:
        0;

    will-change:
        transform;

}


.tzir-hero__photo-paper {

    width:
        100%;

    height:
        100%;

    padding:
        8px;

    overflow:
        hidden;

    background:
        var(--tzir-white);

    box-shadow:
        0 29px 68px
        rgba(
            23,
            37,
            7,
            0.16
        ),
        0 9px 21px
        rgba(
            50,
            33,
            33,
            0.09
        );

}


.tzir-hero__photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.02);

    transition:
        transform
        1.2s
        var(--tzir-ease-standard);

}


.tzir-hero__photo:hover img {

    transform:
        scale(1.055);

}



/* Main image */

.tzir-hero__photo--main {

    top:
        10%;

    left:
        3%;

    width:
        73%;

    height:
        67%;

    z-index:
        2;

    transform:
        translate3d(
            var(--tzir-photo-main-x),
            var(--tzir-photo-main-y),
            0
        )
        rotate(1.45deg);

}


/* Secondary image */

.tzir-hero__photo--secondary {

    right:
        0;

    bottom:
        6.5%;

    width:
        52%;

    height:
        42%;

    z-index:
        4;

    transform:
        translate3d(
            var(--tzir-photo-secondary-x),
            var(--tzir-photo-secondary-y),
            0
        )
        rotate(-2.1deg);

}



/* =========================================================
   12. HANDWRITTEN SIGNATURE
   ========================================================= */

.tzir-hero__signature {

    position:
        absolute;

    top:
        19%;

    right:
        0;

    z-index:
        6;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    color:
        rgba(
            50,
            33,
            33,
            0.72
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        clamp(
            1.35rem,
            1.55vw,
            1.85rem
        );

    font-weight:
        500;

    line-height:
        0.92;

    transform:
        rotate(-5deg);

}


.tzir-hero__signature span + span {

    margin-left:
        12px;

}


.tzir-hero__signature i {

    display:
        block;

    width:
        74px;

    height:
        2px;

    margin:
        9px
        0
        0
        28px;

    background:
        var(--tzir-moss-700);

    transform:
        rotate(-5deg);

    transform-origin:
        left center;

}



/* =========================================================
   13. BOTANICAL DETAILS
   ========================================================= */

.tzir-hero__botanical {

    position:
        absolute;

    z-index:
        1;

    pointer-events:
        none;

    color:
        var(--tzir-moss-700);

    opacity:
        0.12;

}


.tzir-hero__botanical svg {

    width:
        100%;

    height:
        100%;

}


.tzir-hero__botanical--left {

    top:
        2%;

    left:
        -42px;

    width:
        145px;

    height:
        220px;

    transform:
        rotate(-14deg);

    animation:
        tzirHeroLeavesLeft
        11s
        ease-in-out
        infinite
        alternate;

}


.tzir-hero__botanical--right {

    right:
        -40px;

    bottom:
        1%;

    width:
        165px;

    height:
        190px;

    transform:
        rotate(7deg);

    animation:
        tzirHeroLeavesRight
        13s
        ease-in-out
        infinite
        alternate;

}


@keyframes tzirHeroLeavesLeft {

    from {

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(-14deg);

    }

    to {

        transform:
            translate3d(
                5px,
                7px,
                0
            )
            rotate(-11deg);

    }

}


@keyframes tzirHeroLeavesRight {

    from {

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(7deg);

    }

    to {

        transform:
            translate3d(
                -6px,
                -5px,
                0
            )
            rotate(10deg);

    }

}



/* =========================================================
   14. ORGANIC BOTTOM EDGE
   ========================================================= */

.tzir-hero__terrain-edge {

    position:
        absolute;

    left:
        -2%;

    bottom:
        -1px;

    z-index:
        0;

    width:
        104%;

    height:
        clamp(
            18px,
            3.6vh,
            36px
        );

    pointer-events:
        none;

    background:
        rgba(
            95,
            119,
            40,
            0.12
        );

    clip-path:
        polygon(
            0 66%,
            7% 72%,
            14% 58%,
            23% 67%,
            31% 49%,
            41% 63%,
            51% 54%,
            62% 70%,
            73% 56%,
            83% 69%,
            92% 55%,
            100% 64%,
            100% 100%,
            0 100%
        );

}



/* =========================================================
   15. ENTRANCE ANIMATIONS
   ========================================================= */

.tzir-hero__eyebrow {

    animation:
        tzirHeroEyebrowIn
        760ms
        320ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__title-line:nth-child(1) > span {

    animation:
        tzirHeroTitleLine
        950ms
        350ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__title-line:nth-child(2) > span {

    animation:
        tzirHeroTitleLine
        950ms
        450ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__title-line:nth-child(3) > span {

    animation:
        tzirHeroTitleLine
        950ms
        550ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__description {

    animation:
        tzirHeroDescriptionIn
        850ms
        690ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__actions {

    animation:
        tzirHeroActionsIn
        820ms
        800ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__services {

    animation:
        tzirHeroServicesIn
        850ms
        920ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__location {

    animation:
        tzirHeroLocationIn
        750ms
        1060ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__photo--main {

    animation:
        tzirHeroMainPhotoReveal
        1150ms
        430ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__photo--secondary {

    animation:
        tzirHeroSecondaryPhotoReveal
        1100ms
        690ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__signature {

    animation:
        tzirHeroSignatureIn
        900ms
        1050ms
        var(--tzir-ease-standard)
        both;

}


.tzir-hero__signature i {

    animation:
        tzirHeroSignatureStroke
        900ms
        1280ms
        var(--tzir-ease-standard)
        both;

}



/* Animation keyframes */

@keyframes tzirHeroEyebrowIn {

    from {

        opacity:
            0;

        transform:
            translateY(8px);

        letter-spacing:
            0.31em;

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

        letter-spacing:
            0.24em;

    }

}


@keyframes tzirHeroTitleLine {

    from {

        opacity:
            0;

        transform:
            translateY(112%)
            rotate(1.3deg);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            rotate(0);

    }

}


@keyframes tzirHeroDescriptionIn {

    from {

        opacity:
            0;

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

    }

    to {

        opacity:
            1;

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

    }

}


@keyframes tzirHeroActionsIn {

    from {

        opacity:
            0;

        transform:
            translateY(15px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes tzirHeroServicesIn {

    from {

        opacity:
            0;

        transform:
            translateY(12px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes tzirHeroLocationIn {

    from {

        opacity:
            0;

    }

    to {

        opacity:
            1;

    }

}


@keyframes tzirHeroMainPhotoReveal {

    from {

        opacity:
            0;

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

    }

    to {

        opacity:
            1;

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

    }

}


@keyframes tzirHeroSecondaryPhotoReveal {

    from {

        opacity:
            0;

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

    }

    to {

        opacity:
            1;

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

    }

}


@keyframes tzirHeroSignatureIn {

    from {

        opacity:
            0;

        transform:
            translateY(8px)
            rotate(-9deg);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            rotate(-5deg);

    }

}


@keyframes tzirHeroSignatureStroke {

    from {

        transform:
            scaleX(0)
            rotate(-5deg);

    }

    to {

        transform:
            scaleX(1)
            rotate(-5deg);

    }

}



/* =========================================================
   16. REDUCED MOTION
   JS controlled — no fifth media query
   ========================================================= */

html.tzir-reduced-motion
.tzir-hero *,
html.tzir-reduced-motion
.tzir-hero::before {

    animation:
        none !important;

}


html.tzir-reduced-motion
.tzir-hero__photo {

    transform:
        none;

}



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

@media (min-width: 1200px) {

    .tzir-hero__container {

        padding-bottom:
            clamp(
                22px,
                3vh,
                34px
            );

    }


    .tzir-hero__content {

        padding-top:
            1vh;

    }


    .tzir-hero__visual {

        height:
            100%;

    }

}



/* =========================================================
   18. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-hero__container {

        grid-template-columns:
            minmax(0, 1.02fr)
            minmax(0, 0.98fr);

        gap:
            34px;

        padding-bottom:
            20px;

    }


    .tzir-hero__title {

        font-size:
            clamp(
                3.45rem,
                6.6vw,
                5.1rem
            );

        line-height:
            0.87;

    }


    .tzir-hero__description {

        max-width:
            520px;

        font-size:
            0.98rem;

        line-height:
            1.62;

    }


    .tzir-hero__actions {

        gap:
            10px;

    }


    .tzir-hero__primary,
    .tzir-hero__call {

        min-width:
            0;

        min-height:
            52px;

        padding:
            12px 17px;

        font-size:
            0.88rem;

    }


    .tzir-hero__services-list {

        display:
            grid;

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

        gap:
            11px 16px;

    }


    .tzir-hero-service {

        font-size:
            0.72rem;

    }


    .tzir-hero__location {

        gap:
            12px;

    }


    .tzir-hero__location-main {

        font-size:
            0.84rem;

    }


    .tzir-hero__micro-tagline {

        font-size:
            0.56rem;

    }


    .tzir-hero__photo--main {

        top:
            12%;

        left:
            1%;

        width:
            78%;

        height:
            64%;

    }


    .tzir-hero__photo--secondary {

        right:
            -3%;

        bottom:
            8%;

        width:
            56%;

        height:
            38%;

    }


    .tzir-hero__signature {

        top:
            21%;

        right:
            -2%;

        font-size:
            1.3rem;

    }

}



/* =========================================================
   19. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-hero__container {

        width:
            calc(
                100% -
                36px
            );

        grid-template-columns:
            1fr;

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

        align-items:
            stretch;

        gap:
            10px;

        padding:
            23px
            0
            13px;

    }


    .tzir-hero__content {

        justify-content:
            flex-start;

    }


    .tzir-hero__eyebrow {

        gap:
            8px;

        margin-bottom:
            10px;

        font-size:
            0.58rem;

        letter-spacing:
            0.15em;

    }


    .tzir-hero__title {

        max-width:
            100%;

        font-size:
            clamp(
                2.9rem,
                10vw,
                4.2rem
            );

        line-height:
            0.88;

    }


    .tzir-hero__description {

        max-width:
            590px;

        margin-top:
            12px;

        display:
            -webkit-box;

        overflow:
            hidden;

        -webkit-line-clamp:
            3;

        -webkit-box-orient:
            vertical;

        font-size:
            0.92rem;

        line-height:
            1.52;

    }


    .tzir-hero__actions {

        display:
            grid;

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

        gap:
            9px;

        margin-top:
            14px;

    }


    .tzir-hero__primary,
    .tzir-hero__call {

        width:
            100%;

        min-width:
            0;

        min-height:
            48px;

        padding:
            10px 13px;

        font-size:
            0.82rem;

    }


    .tzir-hero__services {

        margin-top:
            13px;

        padding-top:
            11px;

    }


    .tzir-hero__services-list {

        width:
            100%;

        overflow-x:
            auto;

        gap:
            18px;

        padding-bottom:
            4px;

        scrollbar-width:
            none;

        overscroll-behavior-inline:
            contain;

    }


    .tzir-hero__services-list::-webkit-scrollbar {

        display:
            none;

    }


    .tzir-hero-service {

        font-size:
            0.69rem;

    }


    .tzir-hero-service svg {

        width:
            18px;

        height:
            18px;

    }


    .tzir-hero__all-services {

        margin-top:
            7px;

        font-size:
            0.58rem;

    }


    .tzir-hero__location {

        grid-template-columns:
            auto
            1fr;

        gap:
            10px;

        margin-top:
            8px;

    }


    .tzir-hero__location-main {

        font-size:
            0.76rem;

    }


    .tzir-hero__location-main svg {

        width:
            18px;

        height:
            18px;

    }


    .tzir-hero__micro-tagline {

        grid-column:
            1 / -1;

        font-size:
            0.54rem;

    }


    .tzir-hero__visual {

        position:
            relative;

        min-height:
            0;

    }


    .tzir-hero__photo--main {

        top:
            4%;

        left:
            8%;

        width:
            63%;

        height:
            90%;

    }


    .tzir-hero__photo--secondary {

        right:
            3%;

        bottom:
            0;

        width:
            44%;

        height:
            59%;

    }


    .tzir-hero__photo-paper {

        padding:
            5px;

    }


    .tzir-hero__signature {

        top:
            7%;

        right:
            2%;

        font-size:
            1.05rem;

    }


    .tzir-hero__signature i {

        width:
            50px;

    }


    .tzir-hero__botanical--left {

        width:
            100px;

        height:
            160px;

        left:
            -42px;

    }


    .tzir-hero__botanical--right {

        width:
            110px;

        height:
            140px;

    }

}



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

@media (max-width: 480px) {

    .tzir-hero__container {

        width:
            calc(
                100% -
                28px
            );

        grid-template-columns:
            1fr;

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

        align-items:
            stretch;

        gap:
            8px;

        padding:
            17px
            0
            9px;

    }


    .tzir-hero__eyebrow {

        gap:
            6px;

        margin-bottom:
            8px;

        font-size:
            0.5rem;

        letter-spacing:
            0.11em;

    }


    .tzir-hero__eyebrow i {

        width:
            3px;

        height:
            3px;

    }


    .tzir-hero__title {

        font-size:
            clamp(
                2.42rem,
                11.8vw,
                3.25rem
            );

        line-height:
            0.89;

    }


    .tzir-hero__description {

        margin-top:
            9px;

        display:
            -webkit-box;

        overflow:
            hidden;

        -webkit-line-clamp:
            2;

        -webkit-box-orient:
            vertical;

        font-size:
            0.84rem;

        line-height:
            1.44;

    }


    .tzir-hero__actions {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            7px;

        margin-top:
            10px;

    }


    .tzir-hero__primary,
    .tzir-hero__call {

        width:
            100%;

        min-width:
            0;

        min-height:
            43px;

        padding:
            8px 9px;

        font-size:
            0.73rem;

    }


    .tzir-hero__primary svg,
    .tzir-hero__call > svg {

        width:
            16px;

        height:
            16px;

    }


    .tzir-hero__services {

        margin-top:
            9px;

        padding-top:
            8px;

    }


    .tzir-hero__services-list {

        overflow-x:
            auto;

        gap:
            14px;

        padding-bottom:
            2px;

        scrollbar-width:
            none;

    }


    .tzir-hero__services-list::-webkit-scrollbar {

        display:
            none;

    }


    .tzir-hero-service {

        gap:
            5px;

        font-size:
            0.64rem;

    }


    .tzir-hero-service svg {

        width:
            16px;

        height:
            16px;

    }


    .tzir-hero__all-services {

        margin-top:
            5px;

        font-size:
            0.52rem;

        letter-spacing:
            0.13em;

    }


    .tzir-hero__location {

        grid-template-columns:
            auto
            1fr;

        gap:
            7px;

        margin-top:
            5px;

    }


    .tzir-hero__location-main {

        gap:
            6px;

        font-size:
            0.68rem;

    }


    .tzir-hero__location-main svg {

        width:
            16px;

        height:
            16px;

    }


    .tzir-hero__micro-tagline {

        grid-column:
            1 / -1;

        font-size:
            0.46rem;

        letter-spacing:
            0.18em;

    }


    .tzir-hero__photo--main {

        top:
            2%;

        left:
            4%;

        width:
            67%;

        height:
            93%;

    }


    .tzir-hero__photo--secondary {

        right:
            0;

        bottom:
            1%;

        width:
            47%;

        height:
            58%;

    }


    .tzir-hero__photo-paper {

        padding:
            4px;

    }


    .tzir-hero__signature {

        top:
            5%;

        right:
            0;

        font-size:
            0.88rem;

    }


    .tzir-hero__signature span + span {

        margin-left:
            7px;

    }


    .tzir-hero__signature i {

        width:
            38px;

        height:
            1px;

        margin-top:
            5px;

    }


    .tzir-hero__botanical {

        opacity:
            0.075;

    }


    .tzir-hero__botanical--left {

        width:
            78px;

        height:
            130px;

        left:
            -36px;

    }


    .tzir-hero__botanical--right {

        right:
            -35px;

        width:
            92px;

        height:
            120px;

    }


    .tzir-hero__terrain-edge {

        height:
            14px;

    }

}















































/* =========================================================
   TZIR LANDSCAPING
   03. SERVICES
   ========================================================= */


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

.tzir-services {

    position:
        relative;

    padding:
        clamp(104px, 9vw, 150px)
        0;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            180deg,
            #F2EFE6 0%,
            var(--tzir-ivory-50) 18%,
            #F8F6F1 100%
        );

}



/*
    Organic transition from previous section.
*/

.tzir-services::before {

    content:
        "";

    position:
        absolute;

    top:
        -115px;

    left:
        -2%;

    z-index:
        -3;

    width:
        104%;

    height:
        180px;

    background:
        rgba(
            95,
            119,
            40,
            0.055
        );

    clip-path:
        polygon(
            0 44%,
            9% 51%,
            18% 39%,
            30% 50%,
            41% 36%,
            54% 48%,
            65% 33%,
            76% 46%,
            88% 37%,
            100% 47%,
            100% 100%,
            0 100%
        );

}



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

.tzir-services__topography {

    position:
        absolute;

    top:
        30px;

    right:
        -170px;

    z-index:
        -2;

    width:
        min(
            780px,
            60vw
        );

    height:
        620px;

    pointer-events:
        none;

    opacity:
        0.42;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='780' height='620' viewBox='0 0 780 620'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.10' d='M82-35C193 53 117 139 232 188S471 154 578 239S693 424 827 446'/%3E%3Cpath opacity='.075' d='M111-45C223 48 150 130 260 173S486 146 598 224S718 390 839 416'/%3E%3Cpath opacity='.07' d='M9 119C112 194 84 293 190 338S408 329 523 407S648 549 790 572'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

}


.tzir-services__botanical {

    position:
        absolute;

    right:
        -40px;

    bottom:
        4%;

    z-index:
        -1;

    width:
        155px;

    height:
        195px;

    pointer-events:
        none;

    color:
        var(--tzir-moss-700);

    opacity:
        0.08;

    transform:
        rotate(8deg);

}


.tzir-services__botanical svg {

    width:
        100%;

    height:
        100%;

}



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

.tzir-services__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   04. INTRO
   ========================================================= */

.tzir-services__intro {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.65fr);

    align-items:
        end;

    gap:
        clamp(
            50px,
            8vw,
            120px
        );

    margin-bottom:
        clamp(
            50px,
            6vw,
            82px
        );

}


.tzir-services__intro-main {

    max-width:
        820px;

}


.tzir-services__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        18px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


.tzir-services__eyebrow::before {

    content:
        "";

    width:
        34px;

    height:
        1px;

    background:
        var(--tzir-leaf-600);

}


.tzir-services__title {

    max-width:
        760px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

    font-size:
        clamp(
            3.4rem,
            5.3vw,
            5.65rem
        );

    line-height:
        0.94;

    letter-spacing:
        -0.052em;

}


.tzir-services__title em {

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}


.tzir-services__intro-side {

    padding-bottom:
        5px;

}


.tzir-services__intro-side p {

    max-width:
        470px;

    margin:
        0;

    color:
        rgba(
            50,
            33,
            33,
            0.65
        );

    font-size:
        1.04rem;

    line-height:
        1.75;

}


.tzir-services__browse-note {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        19px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.72rem;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


.tzir-services__browse-note > span {

    font-size:
        1rem;

}



/* =========================================================
   05. PRIMARY GRID
   ========================================================= */

.tzir-services__primary-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.32fr)
        minmax(0, 0.84fr)
        minmax(0, 0.84fr);

    gap:
        18px;

}


.tzir-service-item {

    min-width:
        0;

}



/* =========================================================
   06. CLICKABLE SERVICE CARD
   ========================================================= */

.tzir-service-card {

    --tzir-service-image-x:
        0px;

    --tzir-service-image-y:
        0px;

    position:
        relative;

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-height:
        580px;

    overflow:
        hidden;

    isolation:
        isolate;

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

    color:
        var(--tzir-white);

    box-shadow:
        0 22px 55px
        rgba(
            23,
            37,
            7,
            0.13
        );

    cursor:
        pointer;

    transform:
        translateZ(0);

    transition:
        transform
        620ms
        var(--tzir-ease-standard),

        box-shadow
        620ms
        var(--tzir-ease-standard);

}



/*
    Fine outline.
*/

.tzir-service-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        8;

    pointer-events:
        none;

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

    transition:
        border-color
        400ms
        ease;

}



/*
    Moss ambient light.
*/

.tzir-service-card::after {

    content:
        "";

    position:
        absolute;

    right:
        -100px;

    bottom:
        -130px;

    z-index:
        -1;

    width:
        330px;

    height:
        330px;

    border-radius:
        50%;

    background:
        rgba(
            95,
            119,
            40,
            0.34
        );

    filter:
        blur(90px);

    opacity:
        0;

    transition:
        opacity
        650ms
        ease;

}


.tzir-service-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 34px 72px
        rgba(
            23,
            37,
            7,
            0.19
        );

}


.tzir-service-card:hover::before {

    border-color:
        rgba(
            214,
            223,
            190,
            0.35
        );

}


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

    opacity:
        1;

}



/* =========================================================
   07. BACKGROUND PHOTO
   ========================================================= */

.tzir-service-card__media {

    position:
        absolute;

    inset:
        0;

    z-index:
        -4;

    overflow:
        hidden;

}


.tzir-service-card__media img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        translate3d(
            var(--tzir-service-image-x),
            var(--tzir-service-image-y),
            0
        )
        scale(1.035);

    transition:
        transform
        1.15s
        var(--tzir-ease-standard),

        filter
        750ms
        ease;

}


.tzir-service-card:hover
.tzir-service-card__media img {

    transform:
        translate3d(
            var(--tzir-service-image-x),
            var(--tzir-service-image-y),
            0
        )
        scale(1.09);

}



/* =========================================================
   08. PHOTO OVERLAY
   ========================================================= */

.tzir-service-card__overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    background:
        linear-gradient(
            180deg,
            rgba(
                11,
                23,
                7,
                0.2
            )
            0%,

            rgba(
                11,
                23,
                7,
                0.08
            )
            25%,

            rgba(
                11,
                23,
                7,
                0.34
            )
            50%,

            rgba(
                11,
                23,
                7,
                0.91
            )
            83%,

            rgba(
                11,
                23,
                7,
                0.98
            )
            100%
        );

    transition:
        background
        650ms
        ease;

}


.tzir-service-card:hover
.tzir-service-card__overlay {

    background:
        linear-gradient(
            180deg,
            rgba(
                11,
                23,
                7,
                0.12
            )
            0%,

            rgba(
                11,
                23,
                7,
                0.06
            )
            26%,

            rgba(
                11,
                23,
                7,
                0.29
            )
            51%,

            rgba(
                11,
                23,
                7,
                0.9
            )
            83%,

            rgba(
                11,
                23,
                7,
                0.98
            )
            100%
        );

}



/* =========================================================
   09. CARD TOP
   ========================================================= */

.tzir-service-card__top {

    position:
        absolute;

    top:
        0;

    left:
        0;

    z-index:
        4;

    width:
        100%;

    padding:
        25px
        28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.tzir-service-card__index {

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

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.18em;

}


.tzir-service-card__category {

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

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-align:
        right;

    text-transform:
        uppercase;

}



/* =========================================================
   10. CARD CONTENT
   ========================================================= */

.tzir-service-card__content {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    z-index:
        4;

    width:
        100%;

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

}


.tzir-service-card h3 {

    margin:
        0
        0
        24px;

    color:
        var(--tzir-white);

    font-size:
        clamp(
            2.35rem,
            3.25vw,
            3.7rem
        );

    font-weight:
        600;

    line-height:
        0.91;

    letter-spacing:
        -0.045em;

}


.tzir-service-card h3 span {

    display:
        block;

    color:
        #D6DFBE;

}



/* =========================================================
   11. SUBSERVICES
   ========================================================= */

.tzir-service-card__services {

    list-style:
        none;

    display:
        grid;

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

    margin:
        0
        0
        23px;

    padding:
        0;

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

}


.tzir-service-card__services li {

    position:
        relative;

    min-height:
        47px;

    padding:
        12px
        14px
        11px;

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

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

    font-size:
        0.79rem;

    font-weight:
        500;

    line-height:
        1.4;

}


.tzir-service-card__services li::before {

    content:
        "";

    position:
        absolute;

    top:
        18px;

    left:
        0;

    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        #CBD99B;

}


.tzir-service-card__services small {

    display:
        block;

    margin-top:
        2px;

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

    font-size:
        0.67rem;

    font-weight:
        500;

}


/*
    Planting and Tree require less columns.
*/

.tzir-service-item:not(
    .tzir-service-item--lawn
)
.tzir-service-card__services {

    grid-template-columns:
        1fr;

}



/* =========================================================
   12. CARD FOOTER
   ========================================================= */

.tzir-service-card__footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding-top:
        3px;

}


.tzir-service-card__footer > span:first-child {

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

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.tzir-service-card__arrow {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    flex:
        0 0 auto;

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

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

    color:
        var(--tzir-white);

    backdrop-filter:
        blur(9px);

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

    transition:
        background-color
        400ms
        ease,

        border-color
        400ms
        ease,

        transform
        500ms
        var(--tzir-ease-standard);

}


.tzir-service-card__arrow svg {

    width:
        20px;

    height:
        20px;

}


.tzir-service-card:hover
.tzir-service-card__arrow {

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

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

    transform:
        translateX(4px);

}



/* =========================================================
   13. KEYBOARD FOCUS
   ========================================================= */

.tzir-service-card:focus-visible,
.tzir-specialty-card:focus-visible {

    outline:
        3px solid
        var(--tzir-leaf-600);

    outline-offset:
        5px;

}



/* =========================================================
   14. SPECIALIZED SERVICES
   ========================================================= */

.tzir-services__specialized {

    margin-top:
        clamp(
            78px,
            8vw,
            120px
        );

}


.tzir-services__specialized-header {

    display:
        grid;

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

    align-items:
        end;

    gap:
        60px;

    margin-bottom:
        34px;

}


.tzir-services__specialized-header h3 {

    max-width:
        640px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

    font-size:
        clamp(
            2.7rem,
            4.1vw,
            4.2rem
        );

    line-height:
        0.96;

    letter-spacing:
        -0.045em;

}


.tzir-services__specialized-header h3 em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}


.tzir-services__specialized-header p {

    max-width:
        420px;

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.98rem;

    line-height:
        1.72;

}



/* =========================================================
   15. SPECIALIZED GRID
   ========================================================= */

.tzir-services__specialized-grid {

    display:
        grid;

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

    gap:
        14px;

}


.tzir-specialty-item {

    min-width:
        0;

}



/* =========================================================
   16. SPECIALTY CLICKABLE CARD
   ========================================================= */

.tzir-specialty-card {

    --tzir-service-image-x:
        0px;

    --tzir-service-image-y:
        0px;

    position:
        relative;

    display:
        block;

    width:
        100%;

    min-height:
        245px;

    overflow:
        hidden;

    isolation:
        isolate;

    color:
        var(--tzir-white);

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

    box-shadow:
        0 16px 40px
        rgba(
            23,
            37,
            7,
            0.1
        );

    cursor:
        pointer;

    transition:
        transform
        560ms
        var(--tzir-ease-standard),

        box-shadow
        560ms
        var(--tzir-ease-standard);

}


.tzir-specialty-card > img {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        translate3d(
            var(--tzir-service-image-x),
            var(--tzir-service-image-y),
            0
        )
        scale(1.035);

    transition:
        transform
        950ms
        var(--tzir-ease-standard);

}


.tzir-specialty-card__overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background:
        linear-gradient(
            180deg,
            rgba(
                12,
                26,
                8,
                0.08
            )
            0%,

            rgba(
                12,
                26,
                8,
                0.25
            )
            44%,

            rgba(
                12,
                26,
                8,
                0.92
            )
            100%
        );

}


.tzir-specialty-card__content {

    position:
        absolute;

    inset:
        auto 0 0 0;

    z-index:
        3;

    padding:
        24px;

    display:
        grid;

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

    align-items:
        end;

    gap:
        7px 18px;

}


.tzir-specialty-card__category {

    grid-column:
        1 / -1;

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

    font-size:
        0.62rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.tzir-specialty-card h4 {

    margin:
        0;

    color:
        var(--tzir-white);

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

    line-height:
        1;

    letter-spacing:
        -0.035em;

}


.tzir-specialty-card__arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        39px;

    height:
        39px;

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

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

    color:
        var(--tzir-white);

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

    font-size:
        1.05rem;

    backdrop-filter:
        blur(8px);

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

    transition:
        transform
        470ms
        var(--tzir-ease-standard),

        background-color
        350ms
        ease;

}


.tzir-specialty-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 26px 52px
        rgba(
            23,
            37,
            7,
            0.16
        );

}


.tzir-specialty-card:hover > img {

    transform:
        translate3d(
            var(--tzir-service-image-x),
            var(--tzir-service-image-y),
            0
        )
        scale(1.095);

}


.tzir-specialty-card:hover
.tzir-specialty-card__arrow {

    transform:
        translateX(4px);

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

}



/* =========================================================
   17. REDUCED MOTION
   Controlled with JS class from global system.
   ========================================================= */

html.tzir-reduced-motion
.tzir-service-card,

html.tzir-reduced-motion
.tzir-specialty-card,

html.tzir-reduced-motion
.tzir-service-card__media img,

html.tzir-reduced-motion
.tzir-specialty-card > img,

html.tzir-reduced-motion
.tzir-service-card__arrow,

html.tzir-reduced-motion
.tzir-specialty-card__arrow {

    transition:
        none !important;

}



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

@media (min-width: 1200px) {

    .tzir-service-card {

        min-height:
            590px;

    }


    .tzir-service-item--lawn
    .tzir-service-card {

        min-height:
            590px;

    }


    .tzir-services__specialized-grid {

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

    }

}



/* =========================================================
   19. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-services {

        padding:
            104px
            0;

    }


    .tzir-services__intro {

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

        gap:
            42px;

    }


    .tzir-services__title {

        font-size:
            clamp(
                3.15rem,
                6.4vw,
                4.8rem
            );

    }


    .tzir-services__primary-grid {

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

    }


    .tzir-service-item--lawn {

        grid-column:
            1 / -1;

    }


    .tzir-service-item--lawn
    .tzir-service-card {

        min-height:
            500px;

    }


    .tzir-service-card {

        min-height:
            480px;

    }


    .tzir-service-item--lawn
    .tzir-service-card__services {

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

    }


    .tzir-services__specialized-header {

        gap:
            40px;

    }


    .tzir-services__specialized-grid {

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

    }


    .tzir-specialty-card {

        min-height:
            235px;

    }

}



/* =========================================================
   20. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-services {

        padding:
            84px
            0;

    }


    .tzir-services__intro {

        grid-template-columns:
            1fr;

        gap:
            22px;

        margin-bottom:
            42px;

    }


    .tzir-services__title {

        max-width:
            610px;

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

    }


    .tzir-services__intro-side p {

        max-width:
            610px;

        font-size:
            0.98rem;

    }


    .tzir-services__primary-grid {

        grid-template-columns:
            1fr;

        gap:
            14px;

    }


    .tzir-service-card {

        min-height:
            480px;

    }


    .tzir-service-card__content {

        padding:
            28px;

    }


    .tzir-service-card h3 {

        font-size:
            clamp(
                2.4rem,
                7vw,
                3.35rem
            );

    }


    .tzir-service-item--lawn
    .tzir-service-card__services {

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

    }


    .tzir-services__specialized {

        margin-top:
            72px;

    }


    .tzir-services__specialized-header {

        grid-template-columns:
            1fr;

        gap:
            18px;

        margin-bottom:
            27px;

    }


    .tzir-services__specialized-grid {

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

        gap:
            11px;

    }


    .tzir-specialty-card {

        min-height:
            215px;

    }


    .tzir-specialty-card__content {

        padding:
            20px;

    }

}



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

@media (max-width: 480px) {

    .tzir-services {

        padding:
            72px
            0;

    }


    .tzir-services__intro {

        grid-template-columns:
            1fr;

        gap:
            18px;

        margin-bottom:
            34px;

    }


    .tzir-services__eyebrow {

        margin-bottom:
            12px;

        font-size:
            0.68rem;

    }


    .tzir-services__title {

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

        line-height:
            0.95;

    }


    .tzir-services__intro-side p {

        font-size:
            0.94rem;

        line-height:
            1.65;

    }


    .tzir-services__browse-note {

        font-size:
            0.64rem;

    }


    .tzir-services__primary-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }


    .tzir-service-card {

        min-height:
            455px;

    }


    .tzir-service-card__top {

        padding:
            18px;

    }


    .tzir-service-card__index {

        font-size:
            0.59rem;

    }


    .tzir-service-card__category {

        font-size:
            0.56rem;

    }


    .tzir-service-card__content {

        padding:
            21px;

    }


    .tzir-service-card h3 {

        margin-bottom:
            16px;

        font-size:
            clamp(
                2.2rem,
                10vw,
                2.9rem
            );

    }


    .tzir-service-card__services,
    .tzir-service-item--lawn
    .tzir-service-card__services {

        grid-template-columns:
            1fr;

        margin-bottom:
            15px;

    }


    .tzir-service-card__services li {

        min-height:
            0;

        padding:
            8px
            12px;

        font-size:
            0.76rem;

    }


    .tzir-service-card__services li::before {

        top:
            14px;

    }


    .tzir-service-card__footer
    > span:first-child {

        font-size:
            0.62rem;

    }


    .tzir-service-card__arrow {

        width:
            39px;

        height:
            39px;

    }


    .tzir-services__specialized {

        margin-top:
            60px;

    }


    .tzir-services__specialized-header {

        grid-template-columns:
            1fr;

        gap:
            15px;

        margin-bottom:
            22px;

    }


    .tzir-services__specialized-header h3 {

        font-size:
            clamp(
                2.25rem,
                10vw,
                2.95rem
            );

    }


    .tzir-services__specialized-header p {

        font-size:
            0.91rem;

    }


    .tzir-services__specialized-grid {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    .tzir-specialty-card {

        min-height:
            195px;

    }


    .tzir-specialty-card__content {

        padding:
            18px;

    }


    .tzir-specialty-card h4 {

        font-size:
            1.7rem;

    }


    .tzir-services__botanical {

        width:
            100px;

        height:
            130px;

        right:
            -42px;

    }

}











































/* =========================================================
   TZIR LANDSCAPING
   04. WHY CHOOSE US
   ========================================================= */


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

.tzir-why {

    position:
        relative;

    padding:
        clamp(110px, 10vw, 165px)
        0;

    overflow:
        hidden;

    isolation:
        isolate;

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

    color:
        var(--tzir-white);

}


/*
    Very subtle warm gradient so the section
    does not become a flat dark rectangle.
*/

.tzir-why::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -4;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 16% 28%,
            rgba(
                95,
                119,
                40,
                0.17
            ),
            transparent 31%
        ),

        radial-gradient(
            circle at 86% 82%,
            rgba(
                162,
                140,
                121,
                0.09
            ),
            transparent 29%
        ),

        linear-gradient(
            135deg,
            #172507,
            #101C07 68%,
            #172507
        );

}



/* =========================================================
   02. TOPOGRAPHY
   ========================================================= */

.tzir-why__topography {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    pointer-events:
        none;

    opacity:
        0.42;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath opacity='.07' d='M-100 148C87 31 231 210 407 126S697 30 1001 161'/%3E%3Cpath opacity='.05' d='M-100 191C91 81 247 252 425 169S716 86 999 210'/%3E%3Cpath opacity='.055' d='M-80 550C112 428 262 617 451 526S742 438 1000 574'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        900px 700px;

    background-position:
        center;

}



/* =========================================================
   03. BOTANICAL
   ========================================================= */

.tzir-why__botanical {

    position:
        absolute;

    left:
        -65px;

    bottom:
        -45px;

    z-index:
        -1;

    width:
        190px;

    height:
        270px;

    pointer-events:
        none;

    color:
        #C4D093;

    opacity:
        0.1;

    transform:
        rotate(-13deg);

}



/* =========================================================
   04. CONTAINER
   ========================================================= */

.tzir-why__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

    display:
        grid;

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

    align-items:
        center;

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

}



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

.tzir-why__visual {

    position:
        relative;

    min-height:
        720px;

    --tzir-why-main-y:
        0px;

    --tzir-why-detail-y:
        0px;

}



/* =========================================================
   06. PHOTOS
   ========================================================= */

.tzir-why__photo {

    position:
        absolute;

    margin:
        0;

}


.tzir-why__photo-paper {

    width:
        100%;

    height:
        100%;

    padding:
        8px;

    background:
        var(--tzir-white);

    box-shadow:
        0 34px 70px
        rgba(
            0,
            0,
            0,
            0.25
        );

}


.tzir-why__photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        1.15s
        var(--tzir-ease-standard);

}


.tzir-why__photo--main {

    top:
        0;

    left:
        2%;

    width:
        76%;

    height:
        82%;

    z-index:
        2;

    transform:
        translateY(
            var(--tzir-why-main-y)
        )
        rotate(-1.6deg);

}


.tzir-why__photo--detail {

    right:
        0;

    bottom:
        1%;

    width:
        54%;

    height:
        39%;

    z-index:
        5;

    transform:
        translateY(
            var(--tzir-why-detail-y)
        )
        rotate(2.4deg);

}


.tzir-why__photo:hover img {

    transform:
        scale(1.035);

}



/* =========================================================
   07. HANDWRITTEN NOTE
   ========================================================= */

.tzir-why__photo-note {

    position:
        absolute;

    top:
        10%;

    right:
        -1%;

    z-index:
        6;

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

    font-family:
        var(--tzir-font-script);

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

    line-height:
        1;

    transform:
        rotate(-6deg);

}


.tzir-why__photo-note i {

    display:
        block;

    width:
        72px;

    height:
        2px;

    margin:
        9px
        0
        0
        18px;

    background:
        #C7D49B;

    transform:
        rotate(-5deg);

}



/* =========================================================
   08. LOCATION CARD
   ========================================================= */

.tzir-why__location-card {

    position:
        absolute;

    left:
        0;

    bottom:
        5%;

    z-index:
        7;

    min-width:
        225px;

    padding:
        22px
        24px;

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

    background:
        rgba(
            23,
            37,
            7,
            0.83
        );

    backdrop-filter:
        blur(14px);

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

    box-shadow:
        0 20px 45px
        rgba(
            0,
            0,
            0,
            0.18
        );

}


.tzir-why__location-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #C7D49B;

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-why__location-card strong {

    display:
        block;

    color:
        var(--tzir-white);

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

    font-size:
        1.55rem;

    font-weight:
        600;

    line-height:
        1.06;

}


.tzir-why__location-card strong span {

    color:
        #AAB97A;

}



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

.tzir-why__content {

    min-width:
        0;

}


.tzir-why__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        20px;

    color:
        #C5D391;

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


.tzir-why__eyebrow::before {

    content:
        "";

    width:
        35px;

    height:
        1px;

    background:
        #AFC07A;

}



/* =========================================================
   10. TITLE
   ========================================================= */

.tzir-why__title {

    max-width:
        720px;

    margin:
        0;

    color:
        var(--tzir-white);

    font-size:
        clamp(
            3.45rem,
            5vw,
            5.5rem
        );

    line-height:
        0.93;

    letter-spacing:
        -0.052em;

}


.tzir-why__title em {

    display:
        block;

    color:
        #C5D391;

    font-style:
        normal;

}


.tzir-why__heading > p {

    max-width:
        650px;

    margin:
        27px
        0
        0;

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

    font-size:
        1.04rem;

    line-height:
        1.75;

}



/* =========================================================
   11. REASONS
   ========================================================= */

.tzir-why__reasons {

    margin-top:
        clamp(
            42px,
            5vw,
            66px
        );

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

}


.tzir-why-reason {

    display:
        grid;

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

    align-items:
        start;

    gap:
        18px;

    padding:
        26px
        0;

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

    transition:
        padding-left
        450ms
        var(--tzir-ease-standard);

}


.tzir-why-reason:hover {

    padding-left:
        8px;

}


.tzir-why-reason__number {

    padding-top:
        5px;

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

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}


.tzir-why-reason__body h3 {

    margin:
        0
        0
        6px;

    color:
        var(--tzir-white);

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

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

    font-weight:
        600;

    line-height:
        1.06;

    letter-spacing:
        -0.03em;

}


.tzir-why-reason__body p {

    max-width:
        610px;

    margin:
        0;

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

    font-size:
        0.9rem;

    line-height:
        1.65;

}


.tzir-why-reason__mark {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid
        rgba(
            197,
            211,
            145,
            0.27
        );

    color:
        #C5D391;

    transition:
        background-color
        400ms
        ease,

        transform
        450ms
        var(--tzir-ease-standard);

}


.tzir-why-reason__mark svg {

    width:
        25px;

    height:
        25px;

}


.tzir-why-reason:hover
.tzir-why-reason__mark {

    background:
        rgba(
            197,
            211,
            145,
            0.09
        );

    transform:
        rotate(-4deg);

}



/* =========================================================
   12. FOOTER
   ========================================================= */

.tzir-why__footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    margin-top:
        38px;

}


.tzir-why__hours > span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #C5D391;

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-why__hours p {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        0;

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

    font-size:
        0.81rem;

}


.tzir-why__hours strong {

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

    font-weight:
        600;

}


.tzir-why__hours i {

    width:
        3px;

    height:
        3px;

    margin-inline:
        5px;

    border-radius:
        50%;

    background:
        #AFC07A;

}


.tzir-why__cta {

    flex:
        0 0 auto;

    background:
        #657A30;

    box-shadow:
        0 14px 32px
        rgba(
            0,
            0,
            0,
            0.18
        );

}


.tzir-why__cta svg {

    width:
        20px;

    height:
        20px;

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-why__cta:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   13. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-why *,
html.tzir-reduced-motion
.tzir-why__photo {

    transition:
        none !important;

}



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

@media (min-width: 1200px) {

    .tzir-why__visual {

        min-height:
            735px;

    }


    .tzir-why__content {

        padding-left:
            1vw;

    }

}



/* =========================================================
   15. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-why {

        padding:
            110px
            0;

    }


    .tzir-why__container {

        grid-template-columns:
            minmax(0, 0.86fr)
            minmax(0, 1.14fr);

        gap:
            52px;

    }


    .tzir-why__visual {

        min-height:
            620px;

    }


    .tzir-why__photo--main {

        width:
            80%;

        height:
            78%;

    }


    .tzir-why__photo--detail {

        width:
            57%;

        height:
            34%;

    }


    .tzir-why__photo-note {

        top:
            9%;

        font-size:
            1.3rem;

    }


    .tzir-why__location-card {

        min-width:
            190px;

        padding:
            18px;

    }


    .tzir-why__location-card strong {

        font-size:
            1.32rem;

    }


    .tzir-why__title {

        font-size:
            clamp(
                3rem,
                5.6vw,
                4.5rem
            );

    }


    .tzir-why-reason {

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

        gap:
            13px;

        padding:
            21px
            0;

    }


    .tzir-why__footer {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}



/* =========================================================
   16. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-why {

        padding:
            88px
            0;

    }


    .tzir-why__container {

        grid-template-columns:
            1fr;

        gap:
            66px;

    }


    .tzir-why__visual {

        min-height:
            570px;

        max-width:
            590px;

        width:
            100%;

        margin-inline:
            auto;

    }


    .tzir-why__photo--main {

        left:
            3%;

        width:
            74%;

        height:
            78%;

    }


    .tzir-why__photo--detail {

        right:
            2%;

        width:
            51%;

        height:
            37%;

    }


    .tzir-why__photo-note {

        top:
            8%;

        right:
            0;

        font-size:
            1.25rem;

    }


    .tzir-why__location-card {

        left:
            0;

        bottom:
            5%;

        min-width:
            195px;

        padding:
            18px;

    }


    .tzir-why__title {

        max-width:
            620px;

        font-size:
            clamp(
                3rem,
                9vw,
                4.2rem
            );

    }


    .tzir-why__heading > p {

        max-width:
            610px;

        font-size:
            0.98rem;

    }


    .tzir-why-reason {

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

        gap:
            13px;

    }


    .tzir-why-reason__body p {

        font-size:
            0.87rem;

    }


    .tzir-why__footer {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}



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

@media (max-width: 480px) {

    .tzir-why {

        padding:
            76px
            0;

    }


    .tzir-why__container {

        grid-template-columns:
            1fr;

        gap:
            52px;

    }


    .tzir-why__visual {

        min-height:
            440px;

    }


    .tzir-why__photo-paper {

        padding:
            5px;

    }


    .tzir-why__photo--main {

        left:
            2%;

        width:
            76%;

        height:
            75%;

    }


    .tzir-why__photo--detail {

        right:
            0;

        bottom:
            1%;

        width:
            53%;

        height:
            35%;

    }


    .tzir-why__photo-note {

        top:
            7%;

        right:
            -2%;

        font-size:
            1rem;

    }


    .tzir-why__photo-note i {

        width:
            50px;

    }


    .tzir-why__location-card {

        left:
            0;

        bottom:
            7%;

        min-width:
            166px;

        padding:
            14px
            15px;

    }


    .tzir-why__location-label {

        font-size:
            0.55rem;

    }


    .tzir-why__location-card strong {

        font-size:
            1.14rem;

    }


    .tzir-why__eyebrow {

        margin-bottom:
            14px;

        font-size:
            0.68rem;

    }


    .tzir-why__title {

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

    }


    .tzir-why__heading > p {

        margin-top:
            19px;

        font-size:
            0.94rem;

        line-height:
            1.65;

    }


    .tzir-why__reasons {

        margin-top:
            36px;

    }


    .tzir-why-reason {

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

        gap:
            13px;

        padding:
            20px
            0;

    }


    .tzir-why-reason__number {

        display:
            none;

    }


    .tzir-why-reason__body h3 {

        font-size:
            1.45rem;

    }


    .tzir-why-reason__body p {

        font-size:
            0.84rem;

        line-height:
            1.58;

    }


    .tzir-why-reason__mark {

        width:
            36px;

        height:
            36px;

    }


    .tzir-why__footer {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            23px;

    }


    .tzir-why__hours p {

        font-size:
            0.76rem;

    }


    .tzir-why__cta {

        width:
            100%;

    }


    .tzir-why__botanical {

        width:
            110px;

        height:
            155px;

        left:
            -50px;

    }

}










































/* =========================================================
   TZIR LANDSCAPING
   05. REVIEWS
   ========================================================= */


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

.tzir-reviews {

    position:
        relative;

    padding:
        clamp(105px, 9vw, 155px)
        0;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            135deg,
            #F8F6F0 0%,
            var(--tzir-ivory-50) 48%,
            #F1EEE6 100%
        );

    color:
        var(--tzir-text-primary);

}



/*
    Transition from the dark Why Choose Us section.

    The edge is intentionally irregular rather
    than a straight horizontal cut.
*/

.tzir-reviews::before {

    content:
        "";

    position:
        absolute;

    top:
        -70px;

    left:
        -2%;

    z-index:
        -1;

    width:
        104%;

    height:
        115px;

    background:
        var(--tzir-ivory-50);

    clip-path:
        polygon(
            0 60%,
            8% 51%,
            17% 63%,
            28% 48%,
            39% 59%,
            50% 44%,
            62% 58%,
            74% 47%,
            86% 61%,
            100% 50%,
            100% 100%,
            0 100%
        );

}



/* =========================================================
   02. CONTAINER
   ========================================================= */

.tzir-reviews__container {

    position:
        relative;

    z-index:
        3;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   03. TOPOGRAPHIC DECORATION
   ========================================================= */

.tzir-reviews__topography {

    position:
        absolute;

    z-index:
        0;

    pointer-events:
        none;

    background-repeat:
        no-repeat;

    background-size:
        contain;

}


.tzir-reviews__topography--left {

    top:
        6%;

    left:
        -190px;

    width:
        650px;

    height:
        520px;

    opacity:
        0.52;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='650' height='520' viewBox='0 0 650 520'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.09' d='M-70 80C52 15 124 135 235 92S421 12 687 114'/%3E%3Cpath opacity='.065' d='M-72 118C57 49 134 171 248 128S438 51 691 154'/%3E%3Cpath opacity='.06' d='M-80 381C71 298 173 433 302 375S503 315 687 402'/%3E%3Cpath opacity='.08' d='M-71 418C85 332 184 470 319 411S520 355 690 443'/%3E%3C/g%3E%3C/svg%3E"
        );

}


.tzir-reviews__topography--right {

    right:
        -180px;

    bottom:
        -60px;

    width:
        680px;

    height:
        540px;

    opacity:
        0.42;

    transform:
        rotate(180deg);

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='540' viewBox='0 0 680 540'%3E%3Cg fill='none' stroke='%23A28C79' stroke-width='1'%3E%3Cpath opacity='.12' d='M-70 80C52 15 124 135 235 92S421 12 717 114'/%3E%3Cpath opacity='.09' d='M-72 118C57 49 134 171 248 128S438 51 721 154'/%3E%3Cpath opacity='.08' d='M-80 391C71 298 173 443 302 375S513 315 717 412'/%3E%3C/g%3E%3C/svg%3E"
        );

}



/* =========================================================
   04. BOTANICAL
   ========================================================= */

.tzir-reviews__botanical {

    position:
        absolute;

    top:
        17%;

    right:
        -62px;

    z-index:
        1;

    width:
        190px;

    height:
        250px;

    pointer-events:
        none;

    color:
        var(--tzir-moss-700);

    opacity:
        0.09;

    transform:
        rotate(9deg);

}


.tzir-reviews__botanical svg {

    width:
        100%;

    height:
        100%;

}



/* =========================================================
   05. HEADER
   ========================================================= */

.tzir-reviews__header {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.72fr);

    align-items:
        end;

    gap:
        clamp(
            60px,
            9vw,
            145px
        );

    margin-bottom:
        clamp(
            62px,
            7vw,
            96px
        );

}



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

.tzir-reviews__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        18px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.21em;

    text-transform:
        uppercase;

}


.tzir-reviews__eyebrow::before {

    content:
        "";

    width:
        34px;

    height:
        1px;

    background:
        var(--tzir-leaf-600);

}



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

.tzir-reviews__title {

    max-width:
        760px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

    font-size:
        clamp(
            3.45rem,
            5.25vw,
            5.6rem
        );

    font-weight:
        600;

    line-height:
        0.93;

    letter-spacing:
        -0.052em;

}


.tzir-reviews__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}


.tzir-reviews__heading > p {

    max-width:
        620px;

    margin:
        26px
        0
        0;

    color:
        rgba(
            50,
            33,
            33,
            0.65
        );

    font-size:
        1.04rem;

    line-height:
        1.75;

}



/* =========================================================
   08. EDITORIAL QUOTE
   ========================================================= */

.tzir-reviews__editorial-note {

    position:
        relative;

    min-height:
        205px;

    padding:
        34px
        30px
        28px
        80px;

    border-left:
        1px solid
        rgba(
            50,
            33,
            33,
            0.17
        );

}


.tzir-reviews__quote-mark {

    position:
        absolute;

    top:
        -34px;

    left:
        13px;

    color:
        rgba(
            62,
            83,
            28,
            0.13
        );

    font-family:
        Georgia,
        serif;

    font-size:
        9.5rem;

    font-weight:
        700;

    line-height:
        1;

    user-select:
        none;

}


.tzir-reviews__note-copy {

    position:
        relative;

    z-index:
        2;

}


.tzir-reviews__note-label {

    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.65rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.19em;

    text-transform:
        uppercase;

}


.tzir-reviews__note-copy > p {

    max-width:
        370px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

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

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

    font-weight:
        600;

    line-height:
        1.04;

    letter-spacing:
        -0.03em;

}


.tzir-reviews__signature {

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    margin-top:
        20px;

    color:
        rgba(
            50,
            33,
            33,
            0.64
        );

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-reviews__signature i {

    width:
        67px;

    height:
        2px;

    margin:
        7px
        0
        0
        34px;

    background:
        var(--tzir-leaf-600);

    transform:
        rotate(-4deg);

}



/* =========================================================
   09. WIDGET STAGE
   ========================================================= */

.tzir-reviews__stage {

    position:
        relative;

    max-width:
        1240px;

    margin-inline:
        auto;

    padding:
        26px
        38px
        38px;

}



/* =========================================================
   10. BACK SHEET
   ========================================================= */

.tzir-reviews__back-sheet {

    position:
        absolute;

    top:
        10px;

    left:
        6%;

    z-index:
        0;

    width:
        88%;

    height:
        calc(100% - 8px);

    background:
        #E2DED3;

    border:
        1px solid
        rgba(
            50,
            33,
            33,
            0.08
        );

    box-shadow:
        0 24px 60px
        rgba(
            23,
            37,
            7,
            0.06
        );

    transform:
        rotate(-1.1deg);

}



/* =========================================================
   11. WIDGET SHELL
   ========================================================= */

.tzir-reviews__widget-shell {

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            50,
            33,
            33,
            0.12
        );

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

    box-shadow:
        0 34px 80px
        rgba(
            23,
            37,
            7,
            0.11
        ),
        0 10px 24px
        rgba(
            50,
            33,
            33,
            0.05
        );

    backdrop-filter:
        blur(10px);

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

}



/* =========================================================
   12. WIDGET HEADER
   ========================================================= */

.tzir-reviews__widget-header {

    min-height:
        66px;

    padding:
        17px
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.11
        );

    background:
        rgba(
            246,
            245,
            243,
            0.83
        );

}


.tzir-reviews__widget-heading {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--tzir-bark-900);

    font-size:
        0.85rem;

    font-weight:
        700;

    line-height:
        1.3;

}


.tzir-reviews__widget-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--tzir-leaf-600);

    box-shadow:
        0 0 0 5px
        rgba(
            95,
            119,
            40,
            0.09
        );

}


.tzir-reviews__widget-label {

    color:
        var(--tzir-moss-700);

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}



/* =========================================================
   13. ELFSIGHT HOST
   ========================================================= */

.tzir-reviews__widget-host {

    position:
        relative;

    width:
        100%;

    min-height:
        440px;

    padding:
        26px;

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

}



/*
    Important:

    We do NOT style Elfsight's internal iframe,
    cards, stars or review content here.

    Elfsight remains independent.
*/



/* =========================================================
   14. TEMPORARY PLACEHOLDER
   NO LOADER / NO ANIMATION
   ========================================================= */

.tzir-reviews__placeholder {

    min-height:
        388px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px;

    border:
        1px dashed
        rgba(
            62,
            83,
            28,
            0.25
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                246,
                245,
                243,
                0.7
            ),
            rgba(
                217,
                214,
                207,
                0.25
            )
        );

    text-align:
        center;

}


.tzir-reviews__placeholder-mark {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        68px;

    height:
        68px;

    margin-bottom:
        20px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.18
        );

    color:
        var(--tzir-moss-700);

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

}


.tzir-reviews__placeholder-mark svg {

    width:
        37px;

    height:
        37px;

}


.tzir-reviews__placeholder > span {

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.7rem;

    font-weight:
        600;

    line-height:
        1.1;

}


.tzir-reviews__placeholder p {

    max-width:
        390px;

    margin:
        10px
        0
        0;

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

    font-size:
        0.9rem;

    line-height:
        1.6;

}



/* =========================================================
   15. SIDE NOTE
   ========================================================= */

.tzir-reviews__side-note {

    position:
        absolute;

    top:
        50%;

    left:
        -58px;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        rgba(
            62,
            83,
            28,
            0.6
        );

    font-size:
        0.57rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.19em;

    text-transform:
        uppercase;

    transform:
        translateY(-50%)
        rotate(-90deg);

    transform-origin:
        center;

}


.tzir-reviews__side-note i {

    display:
        block;

    width:
        34px;

    height:
        1px;

    background:
        rgba(
            62,
            83,
            28,
            0.42
        );

}



/* =========================================================
   16. PAPER NOTE
   ========================================================= */

.tzir-reviews__paper-note {

    position:
        absolute;

    right:
        -4px;

    bottom:
        1px;

    z-index:
        6;

    width:
        190px;

    padding:
        18px
        20px;

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

    box-shadow:
        0 18px 38px
        rgba(
            23,
            37,
            7,
            0.17
        );

    color:
        var(--tzir-white);

    transform:
        rotate(2deg);

}


.tzir-reviews__paper-note span {

    display:
        block;

    margin-bottom:
        4px;

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

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.tzir-reviews__paper-note strong {

    display:
        block;

    color:
        var(--tzir-white);

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

    font-size:
        1.2rem;

    font-weight:
        600;

    line-height:
        1.05;

}



/* =========================================================
   17. SECTION FOOTER
   ========================================================= */

.tzir-reviews__footer {

    display:
        grid;

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

    align-items:
        center;

    gap:
        26px;

    margin-top:
        clamp(
            50px,
            5vw,
            76px
        );

}


.tzir-reviews__footer-line {

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                50,
                33,
                33,
                0.19
            )
        );

}


.tzir-reviews__footer p {

    margin:
        0;

    color:
        rgba(
            50,
            33,
            33,
            0.62
        );

    font-size:
        0.88rem;

    line-height:
        1.5;

    white-space:
        nowrap;

}


.tzir-reviews__footer-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

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

    font-size:
        0.73rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.tzir-reviews__footer-link svg {

    width:
        18px;

    height:
        18px;

    transition:
        transform
        430ms
        var(--tzir-ease-standard);

}


.tzir-reviews__footer-link:hover svg {

    transform:
        translateX(5px);

}



/* =========================================================
   18. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-reviews__widget-shell,

html.tzir-reduced-motion
.tzir-reviews__back-sheet,

html.tzir-reduced-motion
.tzir-reviews__paper-note,

html.tzir-reduced-motion
.tzir-reviews__footer-link svg {

    transition:
        none !important;

}



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

@media (min-width: 1200px) {

    .tzir-reviews__stage {

        padding-inline:
            50px;

    }


    .tzir-reviews__widget-host {

        min-height:
            455px;

    }


    .tzir-reviews__placeholder {

        min-height:
            403px;

    }

}



/* =========================================================
   20. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-reviews {

        padding:
            110px
            0;

    }


    .tzir-reviews__header {

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

        gap:
            50px;

    }


    .tzir-reviews__title {

        font-size:
            clamp(
                3.2rem,
                6.2vw,
                4.8rem
            );

    }


    .tzir-reviews__editorial-note {

        padding-left:
            66px;

    }


    .tzir-reviews__quote-mark {

        font-size:
            8rem;

    }


    .tzir-reviews__stage {

        padding:
            24px
            25px
            34px;

    }


    .tzir-reviews__widget-host {

        min-height:
            420px;

    }


    .tzir-reviews__placeholder {

        min-height:
            368px;

    }


    .tzir-reviews__side-note {

        display:
            none;

    }


    .tzir-reviews__paper-note {

        right:
            0;

    }

}



/* =========================================================
   21. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-reviews {

        padding:
            88px
            0;

    }


    .tzir-reviews__header {

        grid-template-columns:
            1fr;

        gap:
            42px;

        margin-bottom:
            54px;

    }


    .tzir-reviews__title {

        max-width:
            620px;

        font-size:
            clamp(
                2.9rem,
                9vw,
                4.1rem
            );

    }


    .tzir-reviews__heading > p {

        max-width:
            590px;

        font-size:
            0.98rem;

    }


    .tzir-reviews__editorial-note {

        max-width:
            550px;

        min-height:
            175px;

        padding:
            28px
            25px
            25px
            72px;

    }


    .tzir-reviews__stage {

        padding:
            16px
            10px
            62px;

    }


    .tzir-reviews__back-sheet {

        left:
            4%;

        width:
            92%;

    }


    .tzir-reviews__widget-header {

        min-height:
            60px;

        padding:
            15px
            18px;

    }


    .tzir-reviews__widget-host {

        min-height:
            390px;

        padding:
            18px;

    }


    .tzir-reviews__placeholder {

        min-height:
            352px;

        padding:
            30px;

    }


    .tzir-reviews__side-note {

        display:
            none;

    }


    .tzir-reviews__paper-note {

        right:
            14px;

        bottom:
            4px;

        width:
            175px;

    }


    .tzir-reviews__footer {

        grid-template-columns:
            1fr
            auto;

        gap:
            18px;

    }


    .tzir-reviews__footer-line {

        grid-column:
            1 / -1;

    }


    .tzir-reviews__footer p {

        white-space:
            normal;

    }

}



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

@media (max-width: 480px) {

    .tzir-reviews {

        padding:
            76px
            0;

    }


    .tzir-reviews__header {

        grid-template-columns:
            1fr;

        gap:
            34px;

        margin-bottom:
            44px;

    }


    .tzir-reviews__eyebrow {

        margin-bottom:
            13px;

        font-size:
            0.68rem;

    }


    .tzir-reviews__title {

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

        line-height:
            0.95;

    }


    .tzir-reviews__heading > p {

        margin-top:
            19px;

        font-size:
            0.94rem;

        line-height:
            1.65;

    }


    .tzir-reviews__editorial-note {

        min-height:
            155px;

        padding:
            22px
            18px
            20px
            54px;

    }


    .tzir-reviews__quote-mark {

        top:
            -17px;

        left:
            6px;

        font-size:
            6.5rem;

    }


    .tzir-reviews__note-copy > p {

        font-size:
            1.55rem;

    }


    .tzir-reviews__signature {

        font-size:
            1.08rem;

    }


    .tzir-reviews__stage {

        padding:
            10px
            0
            58px;

    }


    .tzir-reviews__back-sheet {

        top:
            4px;

        left:
            3%;

        width:
            94%;

    }


    .tzir-reviews__widget-header {

        min-height:
            56px;

        padding:
            13px
            14px;

    }


    .tzir-reviews__widget-heading {

        font-size:
            0.77rem;

    }


    .tzir-reviews__widget-label {

        display:
            none;

    }


    .tzir-reviews__widget-host {

        min-height:
            350px;

        padding:
            12px;

    }


    .tzir-reviews__placeholder {

        min-height:
            326px;

        padding:
            24px
            18px;

    }


    .tzir-reviews__placeholder-mark {

        width:
            58px;

        height:
            58px;

        margin-bottom:
            16px;

    }


    .tzir-reviews__placeholder > span {

        font-size:
            1.45rem;

    }


    .tzir-reviews__placeholder p {

        font-size:
            0.84rem;

    }


    .tzir-reviews__side-note {

        display:
            none;

    }


    .tzir-reviews__paper-note {

        right:
            8px;

        bottom:
            0;

        width:
            155px;

        padding:
            14px
            15px;

    }


    .tzir-reviews__paper-note strong {

        font-size:
            1.05rem;

    }


    .tzir-reviews__footer {

        grid-template-columns:
            1fr;

        gap:
            15px;

        margin-top:
            48px;

    }


    .tzir-reviews__footer-line {

        width:
            100%;

    }


    .tzir-reviews__footer p {

        max-width:
            320px;

        font-size:
            0.84rem;

        white-space:
            normal;

    }


    .tzir-reviews__footer-link {

        width:
            fit-content;

        font-size:
            0.68rem;

    }


    .tzir-reviews__botanical {

        top:
            26%;

        right:
            -65px;

        width:
            120px;

        height:
            165px;

    }

}








































/* =========================================================
   TZIR LANDSCAPING
   08. SERVICE AREAS
   ========================================================= */


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

.tzir-areas {

    position:
        relative;

    padding:
        clamp(108px, 9vw, 158px)
        0;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        linear-gradient(
            145deg,
            #F8F6F0 0%,
            var(--tzir-ivory-50) 48%,
            #F0EDE4 100%
        );

}



/*
    Large organic light area.
*/

.tzir-areas::before {

    content:
        "";

    position:
        absolute;

    top:
        22%;

    left:
        -12%;

    z-index:
        -3;

    width:
        650px;

    height:
        650px;

    pointer-events:
        none;

    border-radius:
        50%;

    background:
        rgba(
            95,
            119,
            40,
            0.045
        );

    filter:
        blur(45px);

}



/* =========================================================
   02. TOPOGRAPHY
   ========================================================= */

.tzir-areas__topography {

    position:
        absolute;

    right:
        -190px;

    top:
        0;

    z-index:
        -2;

    width:
        820px;

    height:
        690px;

    pointer-events:
        none;

    opacity:
        0.5;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='690' viewBox='0 0 820 690'%3E%3Cg fill='none' stroke='%23273E0A' stroke-width='1'%3E%3Cpath opacity='.09' d='M-70 114C102 17 230 178 390 111S663 31 890 139'/%3E%3Cpath opacity='.065' d='M-71 155C105 58 243 222 409 150S681 76 891 181'/%3E%3Cpath opacity='.065' d='M-65 520C113 411 261 584 433 510S706 432 890 552'/%3E%3Cpath opacity='.085' d='M-58 563C124 454 277 628 451 553S723 477 891 596'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        contain;

    background-repeat:
        no-repeat;

}



/* =========================================================
   03. BOTANICAL
   ========================================================= */

.tzir-areas__botanical {

    position:
        absolute;

    left:
        -65px;

    bottom:
        6%;

    z-index:
        -1;

    width:
        170px;

    height:
        230px;

    pointer-events:
        none;

    color:
        var(--tzir-moss-700);

    opacity:
        0.08;

    transform:
        rotate(-12deg);

}


.tzir-areas__botanical svg {

    width:
        100%;

    height:
        100%;

}



/* =========================================================
   04. CONTAINER
   ========================================================= */

.tzir-areas__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   05. HEADER
   ========================================================= */

.tzir-areas__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.65fr);

    align-items:
        end;

    gap:
        clamp(
            50px,
            8vw,
            120px
        );

    margin-bottom:
        clamp(
            55px,
            6vw,
            84px
        );

}


.tzir-areas__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        18px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;

}


.tzir-areas__eyebrow::before {

    content:
        "";

    width:
        34px;

    height:
        1px;

    background:
        var(--tzir-leaf-600);

}


.tzir-areas__title {

    max-width:
        850px;

    margin:
        0;

    color:
        var(--tzir-bark-900);

    font-size:
        clamp(
            3.45rem,
            5.3vw,
            5.65rem
        );

    font-weight:
        600;

    line-height:
        0.93;

    letter-spacing:
        -0.052em;

}


.tzir-areas__title em {

    display:
        block;

    color:
        var(--tzir-moss-700);

    font-style:
        normal;

}


.tzir-areas__intro {

    padding-bottom:
        5px;

}


.tzir-areas__intro > p {

    max-width:
        470px;

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        1.04rem;

    line-height:
        1.75;

}


.tzir-areas__map-hint {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        18px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.7rem;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


.tzir-areas__map-hint svg {

    width:
        19px;

    height:
        19px;

}



/* =========================================================
   06. MAIN LAYOUT
   ========================================================= */

.tzir-areas__layout {

    display:
        grid;

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

    align-items:
        stretch;

    gap:
        20px;

}



/* =========================================================
   07. DIRECTORY
   ========================================================= */

.tzir-areas__directory {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    padding:
        32px;

    border:
        1px solid
        rgba(
            50,
            33,
            33,
            0.13
        );

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

    box-shadow:
        0 24px 55px
        rgba(
            23,
            37,
            7,
            0.08
        );

    backdrop-filter:
        blur(12px);

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

}



/* =========================================================
   08. DIRECTORY HEAD
   ========================================================= */

.tzir-areas__directory-head {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    padding-bottom:
        25px;

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.14
        );

}


.tzir-areas__directory-head > div > span {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.61rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-areas__directory-head h3 {

    margin:
        0;

    color:
        var(--tzir-bark-900);

    font-size:
        clamp(
            1.9rem,
            2.4vw,
            2.5rem
        );

    line-height:
        1;

}


.tzir-areas__directory-mark {

    flex:
        0 0 auto;

    padding:
        8px 9px;

    border:
        1px solid
        rgba(
            62,
            83,
            28,
            0.18
        );

    color:
        var(--tzir-moss-700);

    font-size:
        0.58rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

}



/* =========================================================
   09. AREA GROUPS
   ========================================================= */

.tzir-areas__group {

    padding:
        26px
        0;

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

}


.tzir-areas__group-title {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        15px;

    color:
        var(--tzir-bark-900);

    font-size:
        0.71rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.tzir-areas__group-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--tzir-leaf-600);

    box-shadow:
        0 0 0 5px
        rgba(
            95,
            119,
            40,
            0.09
        );

}



/* =========================================================
   10. AREA LIST
   ========================================================= */

.tzir-areas__list {

    display:
        grid;

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

    gap:
        6px;

}



/* =========================================================
   11. AREA BUTTON
   ========================================================= */

.tzir-area-button {

    position:
        relative;

    width:
        100%;

    min-height:
        44px;

    padding:
        10px
        11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    border:
        1px solid
        transparent;

    border-radius:
        var(--tzir-radius-xs);

    background:
        transparent;

    color:
        rgba(
            50,
            33,
            33,
            0.75
        );

    text-align:
        left;

    font-size:
        0.82rem;

    font-weight:
        600;

    line-height:
        1.3;

    transition:
        color
        300ms
        ease,

        background-color
        300ms
        ease,

        border-color
        300ms
        ease,

        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-area-button i {

    flex:
        0 0 auto;

    color:
        var(--tzir-leaf-600);

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

    font-size:
        0.78rem;

    font-style:
        normal;

    opacity:
        0.4;

    transition:
        opacity
        300ms
        ease,

        transform
        400ms
        var(--tzir-ease-standard);

}


.tzir-area-button:hover {

    border-color:
        rgba(
            62,
            83,
            28,
            0.12
        );

    background:
        rgba(
            95,
            119,
            40,
            0.055
        );

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

    transform:
        translateX(3px);

}


.tzir-area-button:hover i {

    opacity:
        1;

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

}


.tzir-area-button.is-active {

    border-color:
        rgba(
            62,
            83,
            28,
            0.2
        );

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

    color:
        var(--tzir-white);

    box-shadow:
        0 8px 20px
        rgba(
            39,
            62,
            10,
            0.12
        );

}


.tzir-area-button.is-active i {

    color:
        #D6DFBE;

    opacity:
        1;

}



/* =========================================================
   12. D.C.
   ========================================================= */

.tzir-area-button--dc {

    min-height:
        52px;

}


.tzir-areas__group--dc
.tzir-areas__group-dot {

    background:
        var(--tzir-earth-400);

    box-shadow:
        0 0 0 5px
        rgba(
            162,
            140,
            121,
            0.12
        );

}



/* =========================================================
   13. DIRECTORY FOOTER
   ========================================================= */

.tzir-areas__directory-footer {

    margin-top:
        auto;

    padding-top:
        25px;

}


.tzir-areas__reset {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    min-height:
        46px;

    padding:
        10px 16px;

    border:
        1px solid
        rgba(
            50,
            33,
            33,
            0.18
        );

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

    background:
        transparent;

    color:
        var(--tzir-bark-900);

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height:
        1.2;

    transition:
        background-color
        300ms
        ease,

        border-color
        300ms
        ease,

        color
        300ms
        ease;

}


.tzir-areas__reset svg {

    width:
        18px;

    height:
        18px;

}


.tzir-areas__reset:hover {

    border-color:
        var(--tzir-moss-700);

    background:
        rgba(
            95,
            119,
            40,
            0.06
        );

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

}



/* =========================================================
   14. MAP COLUMN
   ========================================================= */

.tzir-areas__map-column {

    min-width:
        0;

}



/* =========================================================
   15. MAP FRAME
   ========================================================= */

.tzir-areas__map-frame {

    position:
        relative;

    overflow:
        hidden;

    border:
        8px solid
        var(--tzir-white);

    background:
        var(--tzir-white);

    box-shadow:
        0 32px 75px
        rgba(
            23,
            37,
            7,
            0.14
        ),
        0 9px 22px
        rgba(
            50,
            33,
            33,
            0.07
        );

}



/* =========================================================
   16. MAP RAIL
   ========================================================= */

.tzir-areas__map-rail {

    min-height:
        57px;

    padding:
        13px
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

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

    background:
        #F8F6F1;

}


.tzir-areas__map-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--tzir-bark-900);

    font-size:
        0.79rem;

    font-weight:
        700;

}


.tzir-areas__map-status-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--tzir-leaf-600);

}


.tzir-areas__map-instruction {

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

    font-size:
        0.65rem;

    font-weight:
        600;

    letter-spacing:
        0.05em;

}



/* =========================================================
   17. MAP
   ========================================================= */

.tzir-service-map {

    position:
        relative;

    width:
        100%;

    height:
        610px;

    background:
        #E4E3DB;

    outline:
        none;

}


/*
    Slightly mute OSM colors so the map belongs
    visually to the Tzir palette.
*/

.tzir-service-map
.leaflet-tile-pane {

    filter:
        saturate(0.72)
        sepia(0.05)
        brightness(1.025)
        contrast(0.94);

}



/* =========================================================
   18. MAP FOOTER
   ========================================================= */

.tzir-areas__map-footer {

    min-height:
        76px;

    padding:
        16px
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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

    color:
        var(--tzir-white);

}


.tzir-areas__map-footer > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.tzir-areas__map-footer-label {

    color:
        #B9C98A;

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

}


.tzir-areas__map-footer strong {

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

    font-size:
        1.15rem;

    font-weight:
        600;

}


.tzir-areas__map-script {

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

    font-family:
        var(--tzir-font-script);

    font-size:
        1.25rem;

    transform:
        rotate(-3deg);

}



/* =========================================================
   19. MAP NOTE
   ========================================================= */

.tzir-areas__map-note {

    max-width:
        700px;

    margin:
        16px
        0
        0
        auto;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        flex-end;

    gap:
        8px;

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

    font-size:
        0.75rem;

    line-height:
        1.55;

    text-align:
        right;

}


.tzir-areas__map-note svg {

    width:
        17px;

    height:
        17px;

    margin-top:
        1px;

    flex:
        0 0 auto;

}



/* =========================================================
   20. CUSTOM LEAFLET MARKER
   ========================================================= */

.tzir-leaflet-marker {

    background:
        transparent;

    border:
        0;

}


.tzir-map-marker {

    position:
        relative;

    display:
        block;

    width:
        36px;

    height:
        44px;

}


.tzir-map-marker__pin {

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        32px;

    height:
        32px;

    border:
        3px solid
        var(--tzir-white);

    border-radius:
        50% 50% 50% 5px;

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

    box-shadow:
        0 9px 20px
        rgba(
            23,
            37,
            7,
            0.27
        );

    transform:
        translateX(-50%)
        rotate(-45deg);

    transition:
        transform
        350ms
        var(--tzir-ease-standard),

        background-color
        300ms
        ease;

}


.tzir-map-marker__pin::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #D6DFBE;

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

}


.tzir-map-marker__shadow {

    position:
        absolute;

    left:
        50%;

    bottom:
        1px;

    width:
        22px;

    height:
        7px;

    border-radius:
        50%;

    background:
        rgba(
            23,
            37,
            7,
            0.18
        );

    filter:
        blur(2px);

    transform:
        translateX(-50%);

}


.tzir-leaflet-marker.is-active
.tzir-map-marker__pin {

    background:
        var(--tzir-leaf-600);

    transform:
        translateX(-50%)
        rotate(-45deg)
        scale(1.13);

}



/* =========================================================
   21. LEAFLET POPUPS
   ========================================================= */

.tzir-service-map
.leaflet-popup-content-wrapper {

    overflow:
        hidden;

    padding:
        0;

    border:
        1px solid
        rgba(
            39,
            62,
            10,
            0.12
        );

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

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

    box-shadow:
        0 18px 45px
        rgba(
            23,
            37,
            7,
            0.18
        );

}


.tzir-service-map
.leaflet-popup-content {

    min-width:
        190px;

    margin:
        0;

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

}


.tzir-service-map
.leaflet-popup-tip {

    background:
        var(--tzir-white);

}


.tzir-map-popup {

    padding:
        17px
        18px;

}


.tzir-map-popup__label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--tzir-moss-700);

    font-size:
        0.58rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

}


.tzir-map-popup strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.35rem;

    font-weight:
        600;

    line-height:
        1;

}


.tzir-map-popup__state {

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

    font-size:
        0.76rem;

    line-height:
        1.4;

}



/* =========================================================
   22. LEAFLET ZOOM CONTROLS
   ========================================================= */

.tzir-service-map
.leaflet-control-zoom {

    overflow:
        hidden;

    border:
        0;

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

    box-shadow:
        0 10px 30px
        rgba(
            23,
            37,
            7,
            0.16
        );

}


.tzir-service-map
.leaflet-control-zoom a {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-bottom:
        1px solid
        rgba(
            50,
            33,
            33,
            0.09
        );

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

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

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

    font-size:
        1.2rem;

    line-height:
        1;

}


.tzir-service-map
.leaflet-control-zoom a:hover {

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

    color:
        var(--tzir-white);

}



/* =========================================================
   23. ATTRIBUTION
   ========================================================= */

.tzir-service-map
.leaflet-control-attribution {

    padding:
        3px 6px;

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

    color:
        rgba(
            24,
            27,
            22,
            0.64
        );

    font-size:
        0.58rem;

}


.tzir-service-map
.leaflet-control-attribution a {

    color:
        var(--tzir-moss-700);

}



/* =========================================================
   24. SECTION FOOTER
   ========================================================= */

.tzir-areas__footer {

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

    padding-top:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    border-top:
        1px solid
        rgba(
            50,
            33,
            33,
            0.15
        );

}


.tzir-areas__footer-copy {

    max-width:
        620px;

}


.tzir-areas__footer-copy > span {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--tzir-bark-900);

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

    font-size:
        1.55rem;

    font-weight:
        600;

    line-height:
        1.1;

}


.tzir-areas__footer-copy p {

    margin:
        0;

    color:
        var(--tzir-text-secondary);

    font-size:
        0.92rem;

    line-height:
        1.65;

}


.tzir-areas__cta {

    flex:
        0 0 auto;

}


.tzir-areas__cta svg {

    width:
        20px;

    height:
        20px;

    transition:
        transform
        420ms
        var(--tzir-ease-standard);

}


.tzir-areas__cta:hover svg {

    transform:
        translateX(4px);

}



/* =========================================================
   25. MAP ERROR FALLBACK
   ========================================================= */

.tzir-service-map.is-unavailable {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px;

    background:
        #E9E6DE;

    color:
        var(--tzir-bark-900);

    text-align:
        center;

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

    font-size:
        1.5rem;

}



/* =========================================================
   26. REDUCED MOTION
   Existing global JS class.
   ========================================================= */

html.tzir-reduced-motion
.tzir-area-button,

html.tzir-reduced-motion
.tzir-map-marker__pin,

html.tzir-reduced-motion
.tzir-areas__cta svg {

    transition:
        none !important;

}



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

@media (min-width: 1200px) {

    .tzir-service-map {

        height:
            610px;

    }


    .tzir-areas__directory {

        min-height:
            751px;

    }

}



/* =========================================================
   28. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-areas {

        padding:
            108px
            0;

    }


    .tzir-areas__header {

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

        gap:
            44px;

    }


    .tzir-areas__title {

        font-size:
            clamp(
                3.1rem,
                6.2vw,
                4.8rem
            );

    }


    .tzir-areas__layout {

        grid-template-columns:
            minmax(290px, 0.62fr)
            minmax(0, 1.38fr);

        gap:
            15px;

    }


    .tzir-areas__directory {

        padding:
            25px;

    }


    .tzir-areas__list {

        grid-template-columns:
            1fr;

    }


    .tzir-area-button {

        min-height:
            40px;

    }


    .tzir-service-map {

        height:
            635px;

    }


    .tzir-areas__map-script {

        font-size:
            1.12rem;

    }

}



/* =========================================================
   29. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-areas {

        padding:
            88px
            0;

    }


    .tzir-areas__header {

        grid-template-columns:
            1fr;

        gap:
            22px;

        margin-bottom:
            45px;

    }


    .tzir-areas__title {

        max-width:
            630px;

        font-size:
            clamp(
                2.9rem,
                9vw,
                4.1rem
            );

    }


    .tzir-areas__intro > p {

        max-width:
            610px;

        font-size:
            0.98rem;

    }


    .tzir-areas__layout {

        grid-template-columns:
            1fr;

        gap:
            24px;

    }


    .tzir-areas__directory {

        padding:
            26px;

    }


    .tzir-areas__list {

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

    }


    .tzir-area-button {

        min-height:
            44px;

    }


    .tzir-service-map {

        height:
            535px;

    }


    .tzir-areas__map-frame {

        border-width:
            6px;

    }


    .tzir-areas__map-note {

        justify-content:
            flex-start;

        margin-left:
            0;

        text-align:
            left;

    }


    .tzir-areas__footer {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            25px;

    }

}



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

@media (max-width: 480px) {

    .tzir-areas {

        padding:
            76px
            0;

    }


    .tzir-areas__header {

        grid-template-columns:
            1fr;

        gap:
            18px;

        margin-bottom:
            36px;

    }


    .tzir-areas__eyebrow {

        margin-bottom:
            13px;

        font-size:
            0.68rem;

    }


    .tzir-areas__title {

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

    }


    .tzir-areas__intro > p {

        font-size:
            0.94rem;

        line-height:
            1.65;

    }


    .tzir-areas__map-hint {

        font-size:
            0.62rem;

    }


    .tzir-areas__layout {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .tzir-areas__directory {

        padding:
            20px;

    }


    .tzir-areas__directory-head {

        padding-bottom:
            20px;

    }


    .tzir-areas__directory-head h3 {

        font-size:
            1.9rem;

    }


    .tzir-areas__list {

        grid-template-columns:
            1fr;

        gap:
            4px;

    }


    .tzir-area-button {

        min-height:
            44px;

        padding:
            10px;

        font-size:
            0.82rem;

    }


    .tzir-areas__group {

        padding:
            21px
            0;

    }


    .tzir-areas__directory-footer {

        padding-top:
            20px;

    }


    .tzir-service-map {

        height:
            455px;

    }


    .tzir-areas__map-frame {

        border-width:
            5px;

    }


    .tzir-areas__map-rail {

        min-height:
            53px;

        padding:
            12px;

    }


    .tzir-areas__map-status {

        font-size:
            0.73rem;

    }


    .tzir-areas__map-instruction {

        display:
            none;

    }


    .tzir-areas__map-footer {

        min-height:
            68px;

        padding:
            13px;

    }


    .tzir-areas__map-footer strong {

        font-size:
            1rem;

    }


    .tzir-areas__map-script {

        font-size:
            1rem;

    }


    .tzir-areas__map-note {

        justify-content:
            flex-start;

        margin-left:
            0;

        font-size:
            0.7rem;

        text-align:
            left;

    }


    .tzir-areas__footer {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            22px;

        margin-top:
            45px;

    }


    .tzir-areas__footer-copy > span {

        font-size:
            1.4rem;

    }


    .tzir-areas__footer-copy p {

        font-size:
            0.88rem;

    }


    .tzir-areas__cta {

        width:
            100%;

    }


    .tzir-areas__botanical {

        left:
            -60px;

        width:
            110px;

        height:
            150px;

    }

}










































/* =========================================================
   TZIR LANDSCAPING
   09. FOOTER
   ========================================================= */


/* =========================================================
   01. FOOTER
   ========================================================= */

.tzir-footer {

    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

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

    color:
        var(--tzir-white);

}


/*
    Organic transition from Service Areas.
*/

.tzir-footer::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -2%;

    z-index:
        0;

    width:
        104%;

    height:
        36px;

    background:
        var(--tzir-ivory-50);

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 34%,
            91% 57%,
            82% 43%,
            72% 62%,
            62% 46%,
            51% 67%,
            40% 48%,
            29% 64%,
            18% 44%,
            8% 61%,
            0 47%
        );

}



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

.tzir-footer::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 10% 22%,
            rgba(
                95,
                119,
                40,
                0.15
            ),
            transparent 29%
        ),

        radial-gradient(
            circle at 88% 78%,
            rgba(
                162,
                140,
                121,
                0.07
            ),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #172507 0%,
            #101C07 64%,
            #172507 100%
        );

}



/* =========================================================
   03. TOPOGRAPHY
   ========================================================= */

.tzir-footer__topography {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    pointer-events:
        none;

    opacity:
        0.45;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='620' viewBox='0 0 900 620'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1'%3E%3Cpath opacity='.06' d='M-90 95C87 15 203 159 363 104S658 30 970 132'/%3E%3Cpath opacity='.045' d='M-83 137C101 56 221 200 384 144S679 78 976 177'/%3E%3Cpath opacity='.055' d='M-95 482C99 380 248 535 424 470S730 392 974 514'/%3E%3Cpath opacity='.07' d='M-87 526C112 421 262 580 444 515S751 442 978 559'/%3E%3C/g%3E%3C/svg%3E"
        );

    background-size:
        900px 620px;

    background-position:
        center;

}



/* =========================================================
   04. BOTANICAL
   ========================================================= */

.tzir-footer__botanical {

    position:
        absolute;

    right:
        -55px;

    bottom:
        70px;

    z-index:
        -1;

    width:
        165px;

    height:
        225px;

    pointer-events:
        none;

    color:
        #C5D391;

    opacity:
        0.085;

    transform:
        rotate(11deg);

}


.tzir-footer__botanical svg {

    width:
        100%;

    height:
        100%;

}



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

.tzir-footer__container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(
                100% -
                (
                    var(--tzir-page-padding) *
                    2
                )
            ),
            var(--tzir-container)
        );

    margin-inline:
        auto;

}



/* =========================================================
   06. MAIN GRID
   ========================================================= */

.tzir-footer__main {

    display:
        grid;

    grid-template-columns:
        minmax(280px, 1.25fr)
        minmax(155px, 0.58fr)
        minmax(250px, 0.92fr)
        minmax(230px, 0.82fr);

    gap:
        clamp(
            40px,
            5vw,
            82px
        );

    padding:
        clamp(
            115px,
            10vw,
            155px
        )
        0
        clamp(
            65px,
            6vw,
            90px
        );

}



/* =========================================================
   07. BRAND
   ========================================================= */

.tzir-footer__brand-column {

    max-width:
        390px;

}


.tzir-footer__logo {

    display:
        inline-flex;

    margin-bottom:
        25px;

}


.tzir-footer__logo img {

    width:
        auto;

    height:
        76px;

    object-fit:
        contain;

    /*
        If the supplied logo has a light background,
        remove this property.
    */

    filter:
        drop-shadow(
            0 12px 20px
            rgba(
                0,
                0,
                0,
                0.14
            )
        );

}


.tzir-footer__description {

    max-width:
        375px;

    margin:
        0;

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

    font-size:
        0.96rem;

    line-height:
        1.72;

}



/* =========================================================
   08. CONTACT
   ========================================================= */

.tzir-footer__contact {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        12px;

    margin-top:
        28px;

}


.tzir-footer__contact-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    max-width:
        100%;

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

    font-size:
        0.86rem;

    font-weight:
        600;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;

    transition:
        color
        300ms
        ease;

}


.tzir-footer__contact-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    flex:
        0 0 auto;

    border:
        1px solid
        rgba(
            197,
            211,
            145,
            0.18
        );

    color:
        #C5D391;

}


.tzir-footer__contact-icon svg {

    width:
        18px;

    height:
        18px;

}


.tzir-footer__contact-link:hover {

    color:
        var(--tzir-white);

}



/* =========================================================
   09. SIGNATURE
   ========================================================= */

.tzir-footer__signature {

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    margin-top:
        27px;

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

    font-family:
        var(--tzir-font-script);

    font-size:
        1.3rem;

    line-height:
        1;

    transform:
        rotate(-3deg);

}


.tzir-footer__signature i {

    width:
        70px;

    height:
        2px;

    margin:
        8px
        0
        0
        38px;

    background:
        #9FB268;

    transform:
        rotate(-4deg);

}



/* =========================================================
   10. COLUMN TITLES
   ========================================================= */

.tzir-footer__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        25px;

    color:
        #C5D391;

    font-size:
        0.67rem;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;

}


.tzir-footer__eyebrow::before {

    content:
        "";

    width:
        20px;

    height:
        1px;

    background:
        rgba(
            197,
            211,
            145,
            0.72
        );

}



/* =========================================================
   11. QUICK LINKS
   ========================================================= */

.tzir-footer__links {

    list-style:
        none;

    display:
        flex;

    flex-direction:
        column;

    margin:
        0;

    padding:
        0;

}


.tzir-footer__links li {

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

}


.tzir-footer__links a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    min-height:
        44px;

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

    font-size:
        0.86rem;

    font-weight:
        600;

    line-height:
        1.3;

    transition:
        color
        300ms
        ease,

        padding-left
        420ms
        var(--tzir-ease-standard);

}


.tzir-footer__links a span {

    color:
        #AFC07A;

    font-size:
        0.75rem;

    opacity:
        0;

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

    transition:
        opacity
        300ms
        ease,

        transform
        400ms
        var(--tzir-ease-standard);

}


.tzir-footer__links a:hover {

    padding-left:
        4px;

    color:
        var(--tzir-white);

}


.tzir-footer__links a:hover span {

    opacity:
        1;

    transform:
        translate(
            0,
            0
        );

}



/* =========================================================
   12. HOURS
   ========================================================= */

.tzir-footer__hours {

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

}


.tzir-footer__hours-row {

    padding:
        18px
        0;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

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

}


.tzir-footer__hours-row > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.tzir-footer__hours-row span {

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

    font-size:
        0.82rem;

    font-weight:
        600;

    line-height:
        1.4;

}


.tzir-footer__hours-row small {

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

    font-size:
        0.66rem;

    line-height:
        1.3;

}


.tzir-footer__hours-row strong {

    flex:
        0 0 auto;

    color:
        #C5D391;

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height:
        1.45;

    white-space:
        nowrap;

}



/* =========================================================
   13. SERVICE NOTE
   ========================================================= */

.tzir-footer__service-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    margin-top:
        23px;

}


.tzir-footer__service-note > svg {

    width:
        21px;

    height:
        21px;

    flex:
        0 0 auto;

    margin-top:
        2px;

    color:
        #AFC07A;

}


.tzir-footer__service-note > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

}


.tzir-footer__service-note span {

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

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.tzir-footer__service-note strong {

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

    font-size:
        0.8rem;

    font-weight:
        600;

    line-height:
        1.4;

}



/* =========================================================
   14. SOCIAL
   ========================================================= */

.tzir-footer__social-intro {

    margin:
        0
        0
        20px;

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

    font-size:
        0.84rem;

    line-height:
        1.6;

}


.tzir-footer__socials {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}



/* =========================================================
   15. SOCIAL CARD
   ========================================================= */

.tzir-footer-social {

    display:
        grid;

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

    align-items:
        center;

    gap:
        12px;

    min-height:
        64px;

    padding:
        10px
        12px;

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

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

    transition:
        background-color
        350ms
        ease,

        border-color
        350ms
        ease,

        transform
        450ms
        var(--tzir-ease-standard);

}


.tzir-footer-social__icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    background:
        rgba(
            197,
            211,
            145,
            0.08
        );

    color:
        #C5D391;

}


.tzir-footer-social__icon svg {

    width:
        23px;

    height:
        23px;

}


.tzir-footer-social__copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}


.tzir-footer-social__copy small {

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

    font-size:
        0.57rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;

}


.tzir-footer-social__copy strong {

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

    font-size:
        0.83rem;

    font-weight:
        600;

}


.tzir-footer-social__arrow {

    color:
        #AFC07A;

    font-size:
        0.78rem;

    opacity:
        0.55;

    transition:
        opacity
        300ms
        ease,

        transform
        400ms
        var(--tzir-ease-standard);

}


.tzir-footer-social:hover {

    border-color:
        rgba(
            197,
            211,
            145,
            0.26
        );

    background:
        rgba(
            197,
            211,
            145,
            0.065
        );

    transform:
        translateY(-3px);

}


.tzir-footer-social:hover
.tzir-footer-social__arrow {

    opacity:
        1;

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

}



/* =========================================================
   16. BOTTOM BAR
   ========================================================= */

.tzir-footer__bottom {

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

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

}


.tzir-footer__bottom p {

    margin:
        0;

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

    font-size:
        0.75rem;

    line-height:
        1.5;

}



/* =========================================================
   17. POWERED BY
   ========================================================= */

.tzir-footer__powered {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

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

    font-size:
        0.74rem;

    line-height:
        1.5;

    transition:
        color
        300ms
        ease;

}


.tzir-footer__powered strong {

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

    font-weight:
        600;

    transition:
        color
        300ms
        ease;

}


.tzir-footer__powered > span {

    margin-left:
        3px;

    color:
        #AFC07A;

    font-size:
        0.67rem;

    transition:
        transform
        400ms
        var(--tzir-ease-standard);

}


.tzir-footer__powered:hover {

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

}


.tzir-footer__powered:hover strong {

    color:
        #D6DFBE;

}


.tzir-footer__powered:hover > span {

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

}



/* =========================================================
   18. FOCUS
   ========================================================= */

.tzir-footer a:focus-visible {

    outline:
        2px solid
        #C5D391;

    outline-offset:
        4px;

}



/* =========================================================
   19. REDUCED MOTION
   ========================================================= */

html.tzir-reduced-motion
.tzir-footer * {

    transition:
        none !important;

}



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

@media (min-width: 1200px) {

    .tzir-footer__main {

        grid-template-columns:
            minmax(300px, 1.25fr)
            minmax(160px, 0.55fr)
            minmax(260px, 0.88fr)
            minmax(245px, 0.8fr);

    }

}



/* =========================================================
   21. TABLET
   769px — 1199px
   ========================================================= */

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

    .tzir-footer__main {

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

        gap:
            58px
            60px;

        padding:
            110px
            0
            65px;

    }


    .tzir-footer__brand-column {

        max-width:
            430px;

    }


    .tzir-footer__logo img {

        height:
            70px;

    }


    .tzir-footer__bottom {

        min-height:
            78px;

    }

}



/* =========================================================
   22. MOBILE
   481px — 768px
   ========================================================= */

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

    .tzir-footer__main {

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

        gap:
            48px
            34px;

        padding:
            92px
            0
            55px;

    }


    .tzir-footer__brand-column {

        grid-column:
            1 / -1;

        max-width:
            570px;

    }


    .tzir-footer__logo img {

        height:
            68px;

    }


    .tzir-footer__social-column {

        grid-column:
            1 / -1;

    }


    .tzir-footer__socials {

        display:
            grid;

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

    }


    .tzir-footer__bottom {

        min-height:
            90px;

        align-items:
            flex-start;

        justify-content:
            center;

        flex-direction:
            column;

        gap:
            9px;

        padding:
            21px
            0;

    }

}



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

@media (max-width: 480px) {

    .tzir-footer__main {

        grid-template-columns:
            1fr;

        gap:
            44px;

        padding:
            82px
            0
            48px;

    }


    .tzir-footer__brand-column {

        max-width:
            100%;

    }


    .tzir-footer__logo {

        margin-bottom:
            21px;

    }


    .tzir-footer__logo img {

        height:
            62px;

    }


    .tzir-footer__description {

        font-size:
            0.92rem;

    }


    .tzir-footer__contact-link {

        font-size:
            0.8rem;

    }


    .tzir-footer__eyebrow {

        margin-bottom:
            20px;

    }


    .tzir-footer__links a {

        min-height:
            46px;

        font-size:
            0.85rem;

    }


    .tzir-footer__hours-row {

        gap:
            12px;

        padding:
            16px
            0;

    }


    .tzir-footer__hours-row span {

        font-size:
            0.8rem;

    }


    .tzir-footer__hours-row strong {

        font-size:
            0.72rem;

    }


    .tzir-footer__socials {

        display:
            flex;

        flex-direction:
            column;

    }


    .tzir-footer-social {

        min-height:
            66px;

    }


    .tzir-footer__bottom {

        min-height:
            0;

        padding:
            23px
            0
            27px;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            8px;

    }


    .tzir-footer__bottom p,
    .tzir-footer__powered {

        font-size:
            0.7rem;

    }


    .tzir-footer__powered {

        flex-wrap:
            wrap;

    }


    .tzir-footer__botanical {

        right:
            -50px;

        bottom:
            75px;

        width:
            105px;

        height:
            145px;

    }

}