/* =========================================================
   BROTHER'S LANDSCAPING
   GLOBAL DESIGN SYSTEM
   ========================================================= */


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

:root {

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

    --bl-forest-950: #0B2D22;
    --bl-forest-900: #123D2D;
    --bl-forest-700: #285A42;
    --bl-forest-500: #47745B;

    --bl-sage-300: #BEC9A8;
    --bl-sage-200: #D4DCC4;
    --bl-sage-100: #E7EBDD;

    --bl-moss: #728B55;

    --bl-clay-500: #C86445;
    --bl-clay-600: #AD5136;

    --bl-prairie: #D2A54A;

    --bl-ivory: #F5F1E7;
    --bl-cream: #FAF8F2;

    --bl-surface: #FFFFFF;

    --bl-charcoal: #18211D;
    --bl-text: #25302A;
    --bl-muted: #66706A;

    --bl-line: #DDD8CC;


    /* -----------------------------------------
       RGB VALUES
       Útiles para transparencias
    ----------------------------------------- */

    --bl-forest-950-rgb: 11, 45, 34;
    --bl-forest-900-rgb: 18, 61, 45;
    --bl-forest-700-rgb: 40, 90, 66;

    --bl-sage-rgb: 190, 201, 168;

    --bl-clay-rgb: 200, 100, 69;


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

    --bl-font-primary:
        "Manrope",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --bl-font-display: var(--bl-font-primary);

    --bl-text-xs: 0.78rem;
    --bl-text-sm: 0.9rem;
    --bl-text-base: 1rem;
    --bl-text-md: 1.075rem;
    --bl-text-lg: 1.2rem;
    --bl-text-xl: 1.4rem;


    /* -----------------------------------------
       CONTAINER
    ----------------------------------------- */

    --bl-container-width: 1440px;

    --bl-gutter: clamp(
        1.25rem,
        4vw,
        4.5rem
    );


    /* -----------------------------------------
       SECTION SPACING
    ----------------------------------------- */

    --bl-section-space:
        clamp(
            5rem,
            9vw,
            8rem
        );


    /* -----------------------------------------
       HEADER / ANCHOR OFFSET
       Se podrá ajustar cuando creemos header
    ----------------------------------------- */

    --bl-scroll-offset: 130px;


    /* -----------------------------------------
       RADII
    ----------------------------------------- */

    --bl-radius-xs: 8px;
    --bl-radius-sm: 12px;
    --bl-radius-md: 18px;
    --bl-radius-lg: 28px;


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

    --bl-shadow-sm:
        0 8px 24px
        rgba(
            var(--bl-forest-950-rgb),
            0.06
        );

    --bl-shadow-md:
        0 18px 45px
        rgba(
            var(--bl-forest-950-rgb),
            0.09
        );

    --bl-shadow-lg:
        0 28px 70px
        rgba(
            var(--bl-forest-950-rgb),
            0.13
        );


    /* -----------------------------------------
       TRANSITIONS
    ----------------------------------------- */

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

    --bl-ease-smooth:
        cubic-bezier(
            0.65,
            0,
            0.35,
            1
        );

    --bl-ease-organic:
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

    --bl-duration-fast: 220ms;
    --bl-duration-normal: 420ms;
    --bl-duration-slow: 720ms;


    /* -----------------------------------------
       Z-INDEX SYSTEM
    ----------------------------------------- */

    --bl-z-base: 1;
    --bl-z-content: 10;
    --bl-z-header: 1000;
    --bl-z-menu: 5000;

    --bl-z-section-transition: 9500;
    --bl-z-page-transition: 9999;
}



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

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


html {
    min-height: 100%;
    scroll-behavior: smooth;

    text-rendering: optimizeLegibility;

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

    scrollbar-width: thin;

    scrollbar-color:
        var(--bl-forest-700)
        var(--bl-ivory);
           width:
        100%;

    max-width:
        100%;

    overflow-x:
        hidden;
}


body {
     position:
        relative;

    width:
        100%;

    max-width:
        100%;

    min-height:
        100vh;

    min-height:
        100svh;

    overflow-x:
        hidden;

    font-family:
        var(--bl-font-primary);

    font-size:
        var(--bl-text-base);

    font-weight: 400;

    line-height: 1.65;

    color:
        var(--bl-text);

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


    /*
    Fondo ambiental global.

    No pretende ser una textura evidente.
    Su función es evitar un fondo crema
    completamente plano.
    */

    background-image:

        radial-gradient(
            circle at 8% 12%,
            rgba(
                var(--bl-sage-rgb),
                0.22
            ),
            transparent 32rem
        ),

        radial-gradient(
            circle at 95% 10%,
            rgba(
                var(--bl-clay-rgb),
                0.065
            ),
            transparent 26rem
        ),

        radial-gradient(
            circle at 55% 82%,
            rgba(
                var(--bl-forest-700-rgb),
                0.055
            ),
            transparent 40rem
        );

    background-repeat:
        no-repeat;

    background-attachment:
        fixed;
}



/* =========================================================
   03. GLOBAL SCROLLBAR
   ========================================================= */

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


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


::-webkit-scrollbar-thumb {

    min-height: 45px;

    background:
        var(--bl-forest-700);

    border:
        3px solid
        var(--bl-ivory);

    border-radius:
        999px;
}


::-webkit-scrollbar-thumb:hover {
    background:
        var(--bl-forest-900);
}


::-webkit-scrollbar-corner {
    background:
        var(--bl-ivory);
}



/* =========================================================
   04. SELECTION
   ========================================================= */

::selection {
    color:
        var(--bl-surface);

    background:
        var(--bl-forest-700);
}


::-moz-selection {
    color:
        var(--bl-surface);

    background:
        var(--bl-forest-700);
}



/* =========================================================
   05. GENERAL ELEMENTS
   ========================================================= */

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


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

    max-width: 100%;
}


img {
    height: auto;
}


a {
    color: inherit;

    text-decoration: none;
}


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


button {
    border: 0;

    font: inherit;

    cursor: pointer;
}


ul,
ol {
    list-style: none;
}


address {
    font-style: normal;
}



/* =========================================================
   06. ACCESSIBILITY
   ========================================================= */

:focus-visible {

    outline:
        3px solid
        var(--bl-clay-500);

    outline-offset:
        4px;
}


.bl-skip-link {

    position: fixed;

    top: 1rem;
    left: 1rem;

    z-index: 20000;

    padding:
        0.8rem
        1.15rem;

    color:
        var(--bl-surface);

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

    border-radius:
        var(--bl-radius-xs);

    transform:
        translateY(-180%);

    transition:
        transform
        var(--bl-duration-fast)
        var(--bl-ease-standard);
}


.bl-skip-link:focus {
    transform:
        translateY(0);
}



/* =========================================================
   07. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

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

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

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.035em;

    text-wrap:
        balance;
}


p {
    text-wrap:
        pretty;
}


strong {
    font-weight:
        700;
}



/* =========================================================
   08. GLOBAL LAYOUT HELPERS
   ========================================================= */

.bl-container {

    width:
        100%;

    max-width:
        calc(
            var(--bl-container-width)
            +
            var(--bl-gutter)
            +
            var(--bl-gutter)
        );

    margin-inline:
        auto;

    padding-inline:
        var(--bl-gutter);

    min-width:
        0;
}


.bl-section {

    position:
        relative;

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


.bl-surface {
    background:
        var(--bl-surface);
}


.bl-surface--ivory {
    background:
        var(--bl-ivory);
}


.bl-surface--cream {
    background:
        var(--bl-cream);
}


.bl-surface--sage {
    background:
        var(--bl-sage-100);
}


.bl-surface--forest {

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-950);
}



/* =========================================================
   09. SCROLL TARGETS
   ========================================================= */

section[id],
[id].bl-scroll-target {

    scroll-margin-top:
        var(--bl-scroll-offset);
}



/* =========================================================
   10. GLOBAL BUTTON SYSTEM
   ========================================================= */

.bl-btn {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.75rem;

    min-height:
        54px;

    padding:
        0.9rem
        1.5rem;

    overflow:
        hidden;

    border-radius:
        var(--bl-radius-xs);

    font-size:
        0.96rem;

    font-weight:
        700;

    line-height:
        1;

    transition:

        transform
        var(--bl-duration-normal)
        var(--bl-ease-standard),

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

        background-color
        var(--bl-duration-normal)
        ease,

        color
        var(--bl-duration-normal)
        ease,

        border-color
        var(--bl-duration-normal)
        ease;
}


.bl-btn > * {
    position:
        relative;

    z-index:
        2;
}


.bl-btn::before {

    content:
        "";

    position:
        absolute;

    width:
        150%;

    aspect-ratio:
        1;

    left:
        -25%;

    bottom:
        -170%;

    border-radius:
        50%;

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

    transition:
        transform
        620ms
        var(--bl-ease-organic);
}


.bl-btn:hover::before {
    transform:
        translateY(-42%);
}


.bl-btn:hover {

    transform:
        translateY(-3px);
}


.bl-btn--primary {

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-900);

    box-shadow:
        0 12px 28px
        rgba(
            var(--bl-forest-950-rgb),
            0.16
        );
}


.bl-btn--primary:hover {

    background:
        var(--bl-forest-700);

    box-shadow:
        0 18px 36px
        rgba(
            var(--bl-forest-950-rgb),
            0.2
        );
}


.bl-btn--clay {

    color:
        var(--bl-surface);

    background:
        var(--bl-clay-500);
}


.bl-btn--clay:hover {
    background:
        var(--bl-clay-600);
}


.bl-btn--outline {

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

    background:
        transparent;

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.5
        );
}


.bl-btn--outline:hover {

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-900);

    border-color:
        var(--bl-forest-900);
}



/* =========================================================
   11. GENERIC CARD
   ========================================================= */

.bl-card {

    position:
        relative;

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

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

    border-radius:
        var(--bl-radius-md);

    box-shadow:
        var(--bl-shadow-md);

    transition:

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

        box-shadow
        520ms
        var(--bl-ease-standard);
}


.bl-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--bl-shadow-lg);
}



/* =========================================================
   12. PAGE ENTRY
   ========================================================= */

@keyframes bl-page-enter {

    from {

        opacity:
            0.65;

        transform:
            translateY(10px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


body.bl-page-entered main {

    animation:
        bl-page-enter
        720ms
        var(--bl-ease-organic)
        both;
}



/* =========================================================
   13. PAGE TRANSITION
   ========================================================= */

.bl-page-transition {

    position:
        fixed;

    inset:
        0;

    z-index:
        var(--bl-z-page-transition);

    overflow:
        hidden;

    pointer-events:
        none;

    visibility:
        hidden;
}


.bl-page-transition.is-active {
    visibility:
        visible;
}


.bl-page-transition__panel {

    position:
        absolute;

    inset:
        -10vh -5vw;

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

    border-radius:
        48% 48% 0 0 /
        10% 10% 0 0;

    transform:
        translateY(115%);

    transition:

        transform
        720ms
        var(--bl-ease-smooth),

        border-radius
        720ms
        var(--bl-ease-smooth);
}


.bl-page-leaving
.bl-page-transition__panel {

    transform:
        translateY(0);

    border-radius:
        0;
}



/* -----------------------------------------
   ORGANIC TERRAIN LAYERS
----------------------------------------- */

.bl-page-transition__terrain {

    position:
        absolute;

    left:
        -8vw;

    width:
        116vw;

    pointer-events:
        none;

    opacity:
        0;

    transition:

        transform
        820ms
        var(--bl-ease-organic),

        opacity
        420ms
        ease;
}


.bl-page-transition__terrain--one {

    bottom:
        -18vh;

    height:
        42vh;

    background:
        var(--bl-sage-300);

    border-radius:
        50% 55% 0 0 /
        65% 70% 0 0;

    transform:
        translateY(100%);
}


.bl-page-transition__terrain--two {

    bottom:
        -24vh;

    height:
        36vh;

    background:
        var(--bl-moss);

    border-radius:
        58% 45% 0 0 /
        55% 70% 0 0;

    transform:
        translateY(110%);
}


.bl-page-leaving
.bl-page-transition__terrain {

    opacity:
        1;

    transform:
        translateY(0);
}



/* -----------------------------------------
   PAGE TRANSITION BRAND
----------------------------------------- */

.bl-page-transition__brand {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    gap:
        0.8rem;

    color:
        var(--bl-surface);

    opacity:
        0;

    transform:
        translate(
            -50%,
            calc(-50% + 25px)
        );

    transition:

        opacity
        360ms
        ease
        260ms,

        transform
        640ms
        var(--bl-ease-organic)
        220ms;
}


.bl-page-leaving
.bl-page-transition__brand {

    opacity:
        1;

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


.bl-page-transition__name {

    white-space:
        nowrap;

    font-size:
        clamp(
            1rem,
            1.7vw,
            1.35rem
        );

    font-weight:
        700;

    letter-spacing:
        -0.02em;
}



/* -----------------------------------------
   SIMPLE LEAF SYMBOL
----------------------------------------- */

.bl-page-transition__leaf {

    position:
        relative;

    display:
        block;

    width:
        23px;

    height:
        34px;

    border-radius:
        100% 0 100% 0;

    background:
        var(--bl-sage-300);

    transform:
        rotate(35deg);
}


.bl-page-transition__leaf::after {

    content:
        "";

    position:
        absolute;

    width:
        1px;

    height:
        30px;

    left:
        50%;

    top:
        4px;

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

    transform:
        rotate(-34deg);
}



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

.bl-section-transition {

    position:
        fixed;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        var(--bl-z-section-transition);

    height:
        7px;

    pointer-events:
        none;

    opacity:
        0;
}


.bl-section-transition__line {

    position:
        absolute;

    inset:
        0;

    background:
        var(--bl-sage-300);

    transform:
        scaleX(0);

    transform-origin:
        left center;
}


.bl-section-transition__seed {

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        16px;

    height:
        16px;

    border-radius:
        50%;

    background:
        var(--bl-clay-500);

    box-shadow:
        0 4px 15px
        rgba(
            var(--bl-clay-rgb),
            0.28
        );

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


.bl-section-transition.is-active {

    opacity:
        1;
}


.bl-section-transition.is-active
.bl-section-transition__line {

    animation:
        bl-section-line
        780ms
        var(--bl-ease-standard)
        both;
}


.bl-section-transition.is-active
.bl-section-transition__seed {

    animation:
        bl-section-seed
        780ms
        var(--bl-ease-standard)
        both;
}


@keyframes bl-section-line {

    0% {
        transform:
            scaleX(0);
    }

    55% {
        transform:
            scaleX(1);
    }

    100% {
        transform:
            scaleX(1);

        opacity:
            0;
    }
}


@keyframes bl-section-seed {

    0% {

        left:
            0%;

        opacity:
            0;
    }

    10% {
        opacity:
            1;
    }

    75% {

        left:
            100%;

        opacity:
            1;
    }

    100% {

        left:
            100%;

        opacity:
            0;
    }
}



/* =========================================================
   15. REVEAL SYSTEM BASE
   Para próximas secciones
   ========================================================= */

[data-bl-reveal] {

    opacity:
        0;

    transform:
        translateY(24px);

    transition:

        opacity
        800ms
        var(--bl-ease-organic),

        transform
        800ms
        var(--bl-ease-organic);
}


[data-bl-reveal].bl-is-visible {

    opacity:
        1;

    transform:
        translateY(0);
}


[data-bl-reveal="left"] {
    transform:
        translateX(-30px);
}


[data-bl-reveal="right"] {
    transform:
        translateX(30px);
}


[data-bl-reveal="scale"] {
    transform:
        scale(0.96);
}


[data-bl-reveal="left"].bl-is-visible,
[data-bl-reveal="right"].bl-is-visible {

    transform:
        translateX(0);
}


[data-bl-reveal="scale"].bl-is-visible {

    transform:
        scale(1);
}



/* =========================================================
   16. REDUCED MOTION
   No usamos @media adicional.
   JS agrega .bl-reduced-motion.
   ========================================================= */

html.bl-reduced-motion {
    scroll-behavior:
        auto;
}


html.bl-reduced-motion *,
html.bl-reduced-motion *::before,
html.bl-reduced-motion *::after {

    animation-duration:
        1ms !important;

    animation-delay:
        0ms !important;

    transition-duration:
        1ms !important;

    transition-delay:
        0ms !important;

    scroll-behavior:
        auto !important;
}



/* =========================================================
   17. TRANSITION HARD RESET
   Importante para BFCache / Back / Forward
   ========================================================= */

.bl-transition-reset,
.bl-transition-reset *,
.bl-transition-reset *::before,
.bl-transition-reset *::after {

    transition:
        none !important;

    animation:
        none !important;
}



/* =========================================================
   18. RESPONSIVE
   EXACTAMENTE 4 BREAKPOINTS
   ========================================================= */


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

@media (min-width: 1200px) {

    :root {

        --bl-gutter:
            clamp(
                3rem,
                5vw,
                5rem
            );

        --bl-scroll-offset:
            132px;
    }

}



/* =========================================================
   TABLET
   768px — 1199px
   ========================================================= */

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

    :root {

        --bl-gutter:
            clamp(
                2rem,
                4vw,
                3rem
            );

        --bl-section-space:
            clamp(
                4.5rem,
                8vw,
                6.5rem
            );

        --bl-scroll-offset:
            120px;
    }


    body {

        background-attachment:
            scroll;
    }

}



/* =========================================================
   MOBILE
   481px — 767px
   ========================================================= */

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

    :root {

        --bl-gutter:
            1.4rem;

        --bl-section-space:
            4.5rem;

        --bl-scroll-offset:
            106px;
    }


    body {

        font-size:
            0.98rem;

        background-attachment:
            scroll;
    }


    .bl-btn {

        min-height:
            52px;

        padding:
            0.9rem
            1.3rem;
    }


    .bl-page-transition__brand {

        width:
            100%;

        justify-content:
            center;
    }

}



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

@media (max-width: 480px) {

    :root {

        --bl-gutter:
            1rem;

        --bl-section-space:
            4rem;

        --bl-scroll-offset:
            96px;

        --bl-radius-md:
            15px;

        --bl-radius-lg:
            22px;
    }


    body {

        font-size:
            0.96rem;

        line-height:
            1.62;

        background-attachment:
            scroll;
    }


    .bl-btn {

        min-height:
            50px;

        padding:
            0.85rem
            1.15rem;

        font-size:
            0.92rem;
    }


    .bl-page-transition__name {

        font-size:
            0.96rem;
    }


    .bl-page-transition__terrain--one {

        height:
            34vh;
    }


    .bl-page-transition__terrain--two {

        height:
            30vh;
    }

}























































/* =========================================================
   BROTHER'S LANDSCAPING
   02. HEADER
========================================================= */


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

:root {

   
    --bl-topbar-height: 38px;

    --bl-header-height: 88px;


    /*
    ALTURA TOTAL DEL SISTEMA FIJO
    */

    --bl-first-screen-chrome-height:
        calc(
            var(--bl-topbar-height)
            +
            var(--bl-header-height)
        );


    /*
    Mantengo este alias temporalmente
    por compatibilidad con código anterior.
    */

    --bl-first-screen-nav-height:
        var(--bl-first-screen-chrome-height);
}



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

.bl-header {

    position:
        fixed;

    top:
        var(--bl-topbar-height);

    left:
        0;

    width:
        100%;

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

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

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

    border-bottom:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

    backdrop-filter:
        blur(16px);

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

    transition:

        background-color
        400ms
        var(--bl-ease-standard),

        box-shadow
        400ms
        var(--bl-ease-standard),

        border-color
        400ms
        var(--bl-ease-standard);
}



/* =========================================================
   SCROLLED STATE

   IMPORTANTE:
   No reducimos la altura del Header al hacer scroll.

   Esto evita:
   - movimientos de layout;
   - desalineación del menú;
   - errores en el espacio reservado;
   - brincos visuales.
========================================================= */

.bl-header.is-scrolled {

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

    border-color:
        rgba(
            var(--bl-forest-900-rgb),
            0.12
        );

    box-shadow:
        0 12px 34px
        rgba(
            var(--bl-forest-950-rgb),
            0.085
        );
}



/* =========================================================
   HEADER SPACE RESERVATION
========================================================= */

.bl-header-slot {

    width:
        100%;

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

    pointer-events:
        none;
}



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

.bl-header__inner {

    position:
        relative;

    height:
        100%;

    display:
        grid;

    align-items:
        center;

    gap:
        2rem;
}



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

.bl-header__brand {

    position:
        relative;

    z-index:
        3;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

    color:
        var(--bl-forest-950);
}


.bl-header__logo {

    display:
        block;

    width:
        auto;

    max-width:
        190px;

    height:
        58px;

    object-fit:
        contain;

    object-position:
        center;
}



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

   Aparece si /img/logo.png no existe todavía.
========================================================= */

.bl-header__brand-fallback {

    display:
        none;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    line-height:
        1;
}


.bl-header__brand-fallback strong {

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

    font-size:
        1.35rem;

    font-weight:
        800;

    letter-spacing:
        -0.045em;
}


.bl-header__brand-fallback small {

    margin-top:
        0.26rem;

    color:
        var(--bl-moss);

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        0.24em;

    text-transform:
        uppercase;
}


.bl-header__brand.is-logo-missing
.bl-header__logo {

    display:
        none;
}


.bl-header__brand.is-logo-missing
.bl-header__brand-fallback {

    display:
        flex;
}



/* =========================================================
   DESKTOP NAV
========================================================= */

.bl-header__desktop-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;
}


.bl-header__nav-list {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(
            1rem,
            1.55vw,
            1.75rem
        );
}


.bl-header__nav-list a {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        44px;

    color:
        var(--bl-text);

    font-size:
        0.91rem;

    font-weight:
        600;

    white-space:
        nowrap;

    transition:

        color
        var(--bl-duration-normal)
        var(--bl-ease-standard),

        transform
        var(--bl-duration-normal)
        var(--bl-ease-standard);
}


.bl-header__nav-list a::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        5px;

    width:
        18px;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--bl-clay-500);

    opacity:
        0;

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

    transition:

        opacity
        var(--bl-duration-normal)
        ease,

        transform
        var(--bl-duration-normal)
        var(--bl-ease-standard);
}


.bl-header__nav-list a:hover,
.bl-header__nav-list a.is-current {

    color:
        var(--bl-forest-900);
}


.bl-header__nav-list a:hover::after,
.bl-header__nav-list a.is-current::after {

    opacity:
        1;

    transform:
        translateX(-50%)
        scaleX(1);
}



/* =========================================================
   FREE ESTIMATE BUTTON
========================================================= */

.bl-header__estimate {

    position:
        relative;

    z-index:
        4;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.58rem;

    min-height:
        48px;

    padding:
        0.7rem
        1.15rem;

    overflow:
        hidden;

    color:
        var(--bl-surface);

    background:
        var(--bl-clay-500);

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

    border-radius:
        var(--bl-radius-xs);

    box-shadow:
        0 9px 22px
        rgba(
            var(--bl-clay-rgb),
            0.18
        );

    font-size:
        0.9rem;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:

        transform
        440ms
        var(--bl-ease-standard),

        background-color
        440ms
        var(--bl-ease-standard),

        box-shadow
        440ms
        var(--bl-ease-standard);
}


.bl-header__estimate::before {

    content:
        "";

    position:
        absolute;

    width:
        120%;

    aspect-ratio:
        1;

    left:
        -10%;

    bottom:
        -160%;

    border-radius:
        50%;

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

    transition:
        transform
        650ms
        var(--bl-ease-organic);
}


.bl-header__estimate:hover {

    background:
        var(--bl-clay-600);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(
            var(--bl-clay-rgb),
            0.24
        );
}


.bl-header__estimate:hover::before {

    transform:
        translateY(-40%);
}


.bl-header__estimate svg {

    position:
        relative;

    z-index:
        2;

    flex:
        0 0 auto;

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.65;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-header__estimate > span {

    position:
        relative;

    z-index:
        2;
}



/* =========================================================
   HAMBURGER
========================================================= */

.bl-header__menu-toggle {

    position:
        relative;

    z-index:
        5;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

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

    background:
        var(--bl-sage-100);

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

    border-radius:
        50%;

    transition:

        background-color
        350ms
        var(--bl-ease-standard),

        transform
        350ms
        var(--bl-ease-standard);
}


.bl-header__menu-toggle:hover {

    background:
        var(--bl-sage-200);

    transform:
        scale(1.04);
}


.bl-header__menu-icon {

    position:
        relative;

    display:
        block;

    width:
        19px;

    height:
        15px;
}


.bl-header__menu-icon span {

    position:
        absolute;

    left:
        0;

    width:
        100%;

    height:
        2px;

    border-radius:
        999px;

    background:
        currentColor;

    transform-origin:
        center;

    transition:

        top
        420ms
        var(--bl-ease-standard),

        transform
        420ms
        var(--bl-ease-standard);
}


.bl-header__menu-icon span:first-child {

    top:
        3px;
}


.bl-header__menu-icon span:last-child {

    top:
        10px;
}


.bl-header__menu-toggle[aria-expanded="true"]
.bl-header__menu-icon span:first-child {

    top:
        6px;

    transform:
        rotate(45deg);
}


.bl-header__menu-toggle[aria-expanded="true"]
.bl-header__menu-icon span:last-child {

    top:
        6px;

    transform:
        rotate(-45deg);
}



/* =========================================================
   MOBILE MENU OVERLAY
========================================================= */

.bl-mobile-menu {

    position:
        fixed;

    inset:
        0;

    z-index:
        calc(
            var(--bl-z-menu) - 1
        );

    overflow:
        hidden auto;

    overscroll-behavior:
        contain;

    background:
        rgba(
            245,
            241,
            231,
            0.985
        );

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    clip-path:
        circle(
            0%
            at
            calc(var(--bl-gutter) + 23px)
            calc(
                var(--bl-topbar-height)
                +
                (var(--bl-header-height) / 2)
            )
        );

    transition:

        clip-path
        760ms
        var(--bl-ease-organic),

        opacity
        260ms
        ease,

        visibility
        0s
        linear
        760ms;
}


.bl-mobile-menu.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    clip-path:
        circle(
            155%
            at
            calc(var(--bl-gutter) + 23px)
            calc(
                var(--bl-topbar-height)
                +
                (var(--bl-header-height) / 2)
            )
        );

    transition:

        clip-path
        760ms
        var(--bl-ease-organic),

        opacity
        260ms
        ease,

        visibility
        0s;
}



/* =========================================================
   ORGANIC MENU DECORATION
========================================================= */

.bl-mobile-menu__decor {

    position:
        absolute;

    pointer-events:
        none;
}


.bl-mobile-menu__decor--one {

    right:
        -15%;

    bottom:
        -16%;

    width:
        min(
            680px,
            78vw
        );

    aspect-ratio:
        1;

    border-radius:
        54% 46% 30% 70% /
        48% 55% 45% 52%;

    background:
        var(--bl-sage-200);

    opacity:
        0.72;

    transform:
        rotate(-13deg);
}


.bl-mobile-menu__decor--two {

    right:
        8%;

    bottom:
        12%;

    width:
        95px;

    height:
        95px;

    border-radius:
        48% 52% 65% 35% /
        55% 35% 65% 45%;

    background:
        rgba(
            var(--bl-clay-rgb),
            0.13
        );
}



/* =========================================================
   MOBILE MENU CONTENT
========================================================= */

.bl-mobile-menu__inner {

    position:
        relative;

    z-index:
        2;

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

    min-height:
        100%;

    margin-inline:
        auto;

    padding-top:
        calc(
            var(--bl-topbar-height)
            +
            var(--bl-header-height)
            +
            2.6rem
        );

    padding-bottom:
        2.5rem;

    display:
        flex;

    flex-direction:
        column;
}


.bl-mobile-menu__eyebrow {

    color:
        var(--bl-clay-600);

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(16px);

    transition:

        opacity
        500ms
        ease
        160ms,

        transform
        650ms
        var(--bl-ease-organic)
        160ms;
}


.bl-mobile-menu.is-open
.bl-mobile-menu__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);
}



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

.bl-mobile-menu__nav {

    display:
        flex;

    flex-direction:
        column;

    margin-top:
        1.5rem;
}


.bl-mobile-menu__nav a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    min-height:
        64px;

    padding:
        0.7rem
        0;

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

    border-bottom:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.1
        );

    font-size:
        clamp(
            1.15rem,
            3.5vw,
            1.6rem
        );

    font-weight:
        700;

    letter-spacing:
        -0.035em;

    opacity:
        0;

    transform:
        translateY(22px);

    transition:

        color
        320ms
        ease,

        opacity
        540ms
        ease,

        transform
        650ms
        var(--bl-ease-organic);
}


.bl-mobile-menu.is-open
.bl-mobile-menu__nav a {

    opacity:
        1;

    transform:
        translateY(0);

    transition-delay:
        calc(
            190ms
            +
            (
                var(--bl-menu-index)
                *
                55ms
            )
        );
}


.bl-mobile-menu__nav a > span:last-child {

    color:
        var(--bl-clay-500);

    font-size:
        1.1rem;

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


.bl-mobile-menu__nav a:hover {

    color:
        var(--bl-forest-700);
}


.bl-mobile-menu__nav a:hover
> span:last-child {

    transform:
        translateX(5px);
}



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

.bl-mobile-menu__footer {

    margin-top:
        auto;

    padding-top:
        2rem;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0.35rem;

    opacity:
        0;

    transform:
        translateY(18px);

    transition:

        opacity
        580ms
        ease
        430ms,

        transform
        650ms
        var(--bl-ease-organic)
        430ms;
}


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

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-mobile-menu__footer span {

    color:
        var(--bl-muted);

    font-size:
        0.78rem;

    font-weight:
        600;
}


.bl-mobile-menu__footer a {

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

    font-size:
        1.05rem;

    font-weight:
        800;
}



/* =========================================================
   MENU SCROLL LOCK
========================================================= */

html.bl-menu-open {

    overflow:
        hidden;
}



/* =========================================================
   BFCache HARD RESET
========================================================= */

.bl-mobile-menu.bl-menu-reset,
.bl-mobile-menu.bl-menu-reset *,
.bl-mobile-menu.bl-menu-reset *::before,
.bl-mobile-menu.bl-menu-reset *::after {

    transition:
        none !important;

    animation:
        none !important;
}



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

   La clase se agrega desde global.js mediante matchMedia.
   No agregamos un quinto @media.
========================================================= */

html.bl-reduced-motion
.bl-mobile-menu {

    clip-path:
        none;
}



/* =========================================================
   4 RESPONSIVE BREAKPOINTS
========================================================= */


/* =========================================================
   1. COMPUTER — 1200px+
========================================================= */

@media (min-width: 1200px) {

    :root {

        --bl-header-height:
            88px;
    }


    .bl-header__inner {

        grid-template-columns:
            minmax(175px, 0.85fr)
            minmax(0, 2.7fr)
            auto;
    }


    .bl-header__menu-toggle {

        display:
            none;
    }


    .bl-header__desktop-nav {

        display:
            flex;
    }


    .bl-header__brand {

        justify-self:
            start;
    }


    .bl-header__estimate {

        justify-self:
            end;

        min-width:
            150px;
    }


    .bl-mobile-menu {

        display:
            none;
    }

}



/* =========================================================
   2. TABLET — 768px–1199px
========================================================= */

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

    :root {

        --bl-header-height:
            80px;
    }


    .bl-header__inner {

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

        gap:
            1rem;
    }


    .bl-header__desktop-nav {

        display:
            none;
    }


    .bl-header__menu-toggle {

        display:
            inline-flex;

        justify-self:
            start;
    }


    .bl-header__brand {

        grid-column:
            2;

        justify-self:
            center;
    }


    .bl-header__logo {

        height:
            54px;

        max-width:
            180px;
    }


    .bl-header__brand-fallback {

        align-items:
            center;
    }


    .bl-header__estimate {

        grid-column:
            3;

        justify-self:
            end;

        min-height:
            45px;

        padding-inline:
            1rem;
    }

}



/* =========================================================
   3. MOBILE — 481px–767px
========================================================= */

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

    :root {

        --bl-header-height:
            74px;
    }


    .bl-header__inner {

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

        gap:
            0.55rem;
    }


    .bl-header__desktop-nav {

        display:
            none;
    }


    .bl-header__menu-toggle {

        display:
            inline-flex;

        justify-self:
            start;

        width:
            44px;

        height:
            44px;
    }


    .bl-header__brand {

        grid-column:
            2;

        justify-self:
            center;
    }


    .bl-header__logo {

        height:
            50px;

        max-width:
            158px;
    }


    .bl-header__brand-fallback {

        align-items:
            center;
    }


    .bl-header__brand-fallback strong {

        font-size:
            1.12rem;
    }


    .bl-header__brand-fallback small {

        font-size:
            0.52rem;
    }


    .bl-header__estimate {

        grid-column:
            3;

        justify-self:
            end;

        min-height:
            43px;

        padding:
            0.65rem
            0.85rem;

        font-size:
            0.78rem;
    }


    .bl-header__estimate svg {

        width:
            16px;

        height:
            16px;
    }


    .bl-mobile-menu__inner {

        padding-top:
            calc(
                var(--bl-topbar-height)
                +
                var(--bl-header-height)
                +
                2rem
            );
    }

}



/* =========================================================
   4. SMALL MOBILE — <=480px
========================================================= */

@media (max-width: 480px) {

    :root {

        --bl-header-height:
            70px;
    }


    .bl-header__inner {

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

        gap:
            0.3rem;
    }


    .bl-header__desktop-nav {

        display:
            none;
    }


    .bl-header__menu-toggle {

        display:
            inline-flex;

        justify-self:
            start;

        width:
            42px;

        height:
            42px;
    }


    .bl-header__brand {

        grid-column:
            2;

        justify-self:
            center;
    }


    .bl-header__logo {

        height:
            47px;

        max-width:
            130px;
    }


    .bl-header__brand-fallback {

        align-items:
            center;
    }


    .bl-header__brand-fallback strong {

        font-size:
            0.98rem;
    }


    .bl-header__brand-fallback small {

        font-size:
            0.47rem;

        letter-spacing:
            0.19em;
    }


    .bl-header__estimate {

        grid-column:
            3;

        justify-self:
            end;

        min-height:
            41px;

        padding:
            0.6rem
            0.7rem;

        gap:
            0.35rem;

        font-size:
            0.75rem;
    }


    /*
    En teléfonos muy estrechos mostramos:
    Estimate

    en vez de:
    Free Estimate

    evitando que el botón invada el logo.
    */

    .bl-header__estimate-prefix {

        display:
            none;
    }


    .bl-header__estimate svg {

        width:
            15px;

        height:
            15px;
    }


    .bl-mobile-menu__inner {

        padding-top:
            calc(
                var(--bl-topbar-height)
                +
                var(--bl-header-height)
                +
                1.65rem
            );

        padding-bottom:
            1.6rem;
    }


    .bl-mobile-menu__nav {

        margin-top:
            1rem;
    }


    .bl-mobile-menu__nav a {

        min-height:
            57px;

        font-size:
            1.08rem;
    }

}




































/* =========================================================
   01. TOPBAR
   BROTHER'S LANDSCAPING
========================================================= */


/* =========================================================
   TOPBAR + HEADER FIXED SHELL
========================================================= */

.bl-site-chrome {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

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

    /*
    Crear un contexto propio evita que elementos
    internos interfieran con secciones posteriores.
    */

    isolation:
        isolate;
}



/* =========================================================
   SPACE RESERVATION

   Reemplaza completamente al antiguo:
   .bl-header-slot
========================================================= */

.bl-site-chrome-slot {

    width:
        100%;

    height:
        var(--bl-first-screen-chrome-height);

    pointer-events:
        none;
}



/* =========================================================
   TOPBAR
========================================================= */

.bl-topbar {

    position:
        relative;

    width:
        100%;

    height:
        var(--bl-topbar-height);

    overflow:
        hidden;

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

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

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



/* =========================================================
   SUBTLE AMBIENT TEXTURE
========================================================= */

.bl-topbar::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 12% 50%,
            rgba(
                var(--bl-sage-rgb),
                0.14
            ),
            transparent 22%
        ),

        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.025
            ),
            transparent
        );
}



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

.bl-topbar__inner {

    position:
        relative;

    z-index:
        2;

    height:
        100%;

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.5rem;
}



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

.bl-topbar__item {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.5rem;

    min-width:
        0;

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

    font-size:
        0.78rem;

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;

    transition:

        color
        320ms
        var(--bl-ease-standard),

        opacity
        320ms
        var(--bl-ease-standard);
}


a.bl-topbar__item:hover {

    color:
        var(--bl-sage-300);
}



/* =========================================================
   ICONS
========================================================= */

.bl-topbar__item svg {

    flex:
        0 0 auto;

    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        var(--bl-sage-300);

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* =========================================================
   ALIGNMENT
========================================================= */

.bl-topbar__item--phone {

    justify-self:
        start;
}


.bl-topbar__item--email {

    justify-self:
        center;
}


.bl-topbar__item--hours {

    justify-self:
        end;
}



/* =========================================================
   MOBILE HOURS TEXT
========================================================= */

.bl-topbar__hours-mobile {

    display:
        none;
}



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

   IMPORTANTE:
   REEMPLAZA la regla .bl-header anterior.
========================================================= */

.bl-header {

    /*
    YA NO ES FIXED.

    Su padre .bl-site-chrome es el que mantiene
    Topbar + Header juntos.
    */

    position:
        relative;

    top:
        auto;

    left:
        auto;

    width:
        100%;

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

    z-index:
        2;

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

    border-bottom:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

    backdrop-filter:
        blur(16px);

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

    transition:

        background-color
        400ms
        var(--bl-ease-standard),

        box-shadow
        400ms
        var(--bl-ease-standard),

        border-color
        400ms
        var(--bl-ease-standard);
}



/* =========================================================
   SCROLLED CHROME
========================================================= */

.bl-header.is-scrolled {

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

    border-color:
        rgba(
            var(--bl-forest-900-rgb),
            0.13
        );

    box-shadow:
        0 13px 32px
        rgba(
            var(--bl-forest-950-rgb),
            0.085
        );
}



/* =========================================================
   DELETE OLD HEADER SLOT

   Si todavía existe esta clase en tu CSS,
   déjala anulada o elimínala.
========================================================= */

.bl-header-slot {

    display:
        none;
}



/* =========================================================
   RESPONSIVE
   EXACTLY 4 BREAKPOINTS
========================================================= */


/* =========================================================
   1. COMPUTER
========================================================= */

@media (min-width: 1200px) {

    :root {

        --bl-topbar-height:
            38px;

        --bl-header-height:
            88px;
    }


    .bl-topbar__inner {

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


    .bl-topbar__item {

        font-size:
            0.78rem;
    }

}



/* =========================================================
   2. TABLET
========================================================= */

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

    :root {

        --bl-topbar-height:
            36px;

        --bl-header-height:
            80px;
    }


    .bl-topbar__inner {

        grid-template-columns:
            auto 1fr auto;

        gap:
            1rem;
    }


    .bl-topbar__item {

        font-size:
            0.75rem;
    }


    .bl-topbar__item--email {

        justify-self:
            center;

        max-width:
            270px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;
    }

}



/* =========================================================
   3. MOBILE
========================================================= */

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

    :root {

        --bl-topbar-height:
            34px;

        --bl-header-height:
            74px;
    }


    .bl-topbar__inner {

        grid-template-columns:
            1fr auto;

        gap:
            0.8rem;
    }


    /*
    Ocultamos email para mantener el Topbar
    limpio y legible.
    */

    .bl-topbar__item--email {

        display:
            none;
    }


    .bl-topbar__item {

        font-size:
            0.73rem;
    }


    .bl-topbar__item--hours {

        justify-self:
            end;
    }


    .bl-topbar__hours-desktop {

        display:
            none;
    }


    .bl-topbar__hours-mobile {

        display:
            inline;
    }

}



/* =========================================================
   4. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    :root {

        --bl-topbar-height:
            32px;

        --bl-header-height:
            70px;
    }


    .bl-topbar__inner {

        grid-template-columns:
            1fr auto;

        gap:
            0.4rem;
    }


    .bl-topbar__item--email {

        display:
            none;
    }


    .bl-topbar__item {

        gap:
            0.35rem;

        font-size:
            0.68rem;
    }


    .bl-topbar__item svg {

        width:
            13px;

        height:
            13px;
    }


    .bl-topbar__hours-desktop {

        display:
            none;
    }


    .bl-topbar__hours-mobile {

        display:
            inline;
    }


    .bl-topbar__item--hours {

        justify-self:
            end;
    }

}






































/* =========================================================
   04. HERO
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-hero {

    --bl-hero-scroll-y:
        0px;

    --bl-hero-image-scale:
        1.035;

    --bl-hero-pointer-x:
        0px;

    --bl-hero-pointer-y:
        0px;


    position:
        relative;

    width:
        100%;

    /*
    FALLBACK
    */

    height:
        calc(
            100vh
            -
            var(--bl-first-screen-chrome-height)
        );


    /*
    MODERN VIEWPORT

    Topbar + Header + Hero = 100svh
    */

    height:
        calc(
            100svh
            -
            var(--bl-first-screen-chrome-height)
        );


    min-height:
        0;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        var(--bl-cream);
}



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

.bl-hero__texture {

    position:
        absolute;

    inset:
        0;

    z-index:
        -8;

    pointer-events:
        none;

    background-image:

        radial-gradient(
            circle,
            rgba(
                var(--bl-forest-900-rgb),
                0.045
            )
            0.75px,

            transparent
            0.85px
        ),

        radial-gradient(
            circle at 7% 14%,
            rgba(
                var(--bl-sage-rgb),
                0.17
            ),
            transparent 25%
        ),

        radial-gradient(
            circle at 38% 84%,
            rgba(
                var(--bl-clay-rgb),
                0.045
            ),
            transparent 24%
        );

    background-size:
        15px 15px,
        auto,
        auto;

    opacity:
        0.75;
}



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

.bl-hero__topography {

    position:
        absolute;

    z-index:
        -6;

    top:
        -4%;

    left:
        -3%;

    width:
        min(
            49vw,
            700px
        );

    height:
        110%;

    pointer-events:
        none;

    fill:
        none;

    stroke:
        rgba(
            var(--bl-forest-700-rgb),
            0.075
        );

    stroke-width:
        1.1;

    vector-effect:
        non-scaling-stroke;
}



/* =========================================================
   BOTANICAL LINE ART
========================================================= */

.bl-hero__botanical {

    position:
        absolute;

    z-index:
        4;

    right:
        -14px;

    bottom:
        -20px;

    width:
        clamp(
            100px,
            11vw,
            170px
        );

    height:
        auto;

    fill:
        none;

    stroke:
        rgba(
            var(--bl-forest-900-rgb),
            0.13
        );

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}



/* =========================================================
   MAIN INNER
========================================================= */

.bl-hero__inner {

    position:
        relative;

    z-index:
        8;

    height:
        100%;

    display:
        flex;

    align-items:
        center;
}



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

.bl-hero__content {

    position:
        relative;

    width:
        min(
            47%,
            660px
        );

    padding-bottom:
        clamp(
            0rem,
            1.5svh,
            1rem
        );
}



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

.bl-hero__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.62rem;

    margin-bottom:
        clamp(
            0.8rem,
            2.1svh,
            1.4rem
        );

    color:
        var(--bl-forest-700);

    font-size:
        clamp(
            0.7rem,
            0.8vw,
            0.82rem
        );

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(16px);
}


.bl-hero__eyebrow svg {

    width:
        24px;

    height:
        24px;

    fill:
        none;

    stroke:
        var(--bl-forest-700);

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-hero__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

    margin-left:
        0.3rem;

    background:
        var(--bl-clay-500);

    transform:
        scaleX(0);

    transform-origin:
        left center;
}



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

.bl-hero__title {

    max-width:
        700px;

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

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

    font-size:
        clamp(
            3rem,
            min(5.1vw, 7.5svh),
            5.1rem
        );

    font-weight:
        700;

    line-height:
        0.98;

    letter-spacing:
        -0.058em;
}


.bl-hero__title-line {

    display:
        block;

    overflow:
        hidden;

    padding-bottom:
        0.065em;
}


.bl-hero__title-line > span {

    display:
        block;

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

    transform-origin:
        left bottom;
}


.bl-hero__title-line--soft {

    color:
        var(--bl-forest-500);
}


.bl-hero__dot {

    color:
        var(--bl-clay-500);
}



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

.bl-hero__description {

    max-width:
        540px;

    margin-top:
        clamp(
            0.8rem,
            2.25svh,
            1.5rem
        );

    color:
        var(--bl-muted);

    font-size:
        clamp(
            0.93rem,
            1.05vw,
            1.08rem
        );

    line-height:
        1.7;

    opacity:
        0;

    transform:
        translateY(18px);
}



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

.bl-hero__actions {

    display:
        flex;

    align-items:
        center;

    gap:
        1rem;

    margin-top:
        clamp(
            1rem,
            2.6svh,
            1.8rem
        );

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-hero__button {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.7rem;

    min-height:
        52px;

    padding:
        0.8rem
        1.45rem;

    overflow:
        hidden;

    border-radius:
        var(--bl-radius-xs);

    font-size:
        0.92rem;

    font-weight:
        700;

    line-height:
        1;

    white-space:
        nowrap;

    transition:

        color
        420ms
        var(--bl-ease-standard),

        background-color
        420ms
        var(--bl-ease-standard),

        border-color
        420ms
        var(--bl-ease-standard),

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

        box-shadow
        420ms
        var(--bl-ease-standard);
}


.bl-hero__button svg {

    position:
        relative;

    z-index:
        2;

    flex:
        0 0 auto;

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-hero__button > span {

    position:
        relative;

    z-index:
        2;
}



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

.bl-hero__button--primary {

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-900);

    border:
        1px solid
        var(--bl-forest-900);

    box-shadow:
        0 12px 26px
        rgba(
            var(--bl-forest-950-rgb),
            0.15
        );
}


.bl-hero__button--primary::before {

    content:
        "";

    position:
        absolute;

    left:
        -20%;

    bottom:
        -175%;

    width:
        140%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        var(--bl-forest-700);

    transition:
        transform
        680ms
        var(--bl-ease-organic);
}


.bl-hero__button--primary:hover::before {

    transform:
        translateY(-48%);
}


.bl-hero__button--primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 34px
        rgba(
            var(--bl-forest-950-rgb),
            0.2
        );
}



/* =========================================================
   SECONDARY CTA
========================================================= */

.bl-hero__button--secondary {

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

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

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.58
        );
}


.bl-hero__button--secondary svg {

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


.bl-hero__button--secondary:hover {

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-900);

    border-color:
        var(--bl-forest-900);

    transform:
        translateY(-3px);
}


.bl-hero__button--secondary:hover svg {

    transform:
        translateX(4px);
}



/* =========================================================
   SERVICE CHIPS
========================================================= */

.bl-hero__services {

    display:
        flex;

    align-items:
        center;

    gap:
        0.65rem;

    width:
        max-content;

    max-width:
        100%;

    margin-top:
        clamp(
            1.2rem,
            3svh,
            2rem
        );
}


.bl-hero__chip {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.42rem;

    min-height:
        38px;

    padding:
        0.55rem
        0.82rem;

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

    background:
        rgba(
            231,
            235,
            221,
            0.83
        );

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.045
        );

    border-radius:
        999px;

    box-shadow:
        0 6px 15px
        rgba(
            var(--bl-forest-950-rgb),
            0.035
        );

    font-size:
        0.74rem;

    font-weight:
        600;

    white-space:
        nowrap;

    opacity:
        0;

    transform:
        translateY(14px)
        scale(0.96);

    transition:

        transform
        380ms
        var(--bl-ease-standard),

        background-color
        380ms
        var(--bl-ease-standard),

        box-shadow
        380ms
        var(--bl-ease-standard);
}


.bl-hero__chip svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        var(--bl-forest-700);

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-hero__chip:hover {

    background:
        var(--bl-sage-200);

    transform:
        translateY(-3px);

    box-shadow:
        var(--bl-shadow-sm);
}



/* =========================================================
   MAIN IMAGE AREA
========================================================= */

.bl-hero__visual {

    position:
        absolute;

    z-index:
        1;

    top:
        0;

    right:
        0;

    width:
        55%;

    height:
        100%;

    pointer-events:
        none;

    transform:
        translate3d(
            var(--bl-hero-pointer-x),
            var(--bl-hero-pointer-y),
            0
        );
}


.bl-hero__visual-frame {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    border-radius:
        48% 0 0 34% /
        42% 0 0 56%;

    transform:
        scale(0.965);

    transform-origin:
        right center;

    opacity:
        0;

    box-shadow:
        -18px 18px 50px
        rgba(
            var(--bl-forest-950-rgb),
            0.08
        );
}


.bl-hero__main-image {

    position:
        absolute;

    inset:
        -2%;

    width:
        104%;

    height:
        104%;

    object-fit:
        cover;

    object-position:
        center center;

    transform:

        translate3d(
            0,
            var(--bl-hero-scroll-y),
            0
        )

        scale(
            var(--bl-hero-image-scale)
        );

    will-change:
        transform;
}


.bl-hero__image-shade {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(
                250,
                248,
                242,
                0.18
            ),
            transparent 18%
        ),

        linear-gradient(
            180deg,
            transparent 72%,
            rgba(
                var(--bl-forest-950-rgb),
                0.07
            )
        );
}



/* =========================================================
   SAGE TERRAIN
========================================================= */

.bl-hero__terrain {

    position:
        absolute;

    z-index:
        2;

    right:
        -11%;

    bottom:
        -27%;

    width:
        68%;

    height:
        57%;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle,
            rgba(
                var(--bl-forest-900-rgb),
                0.045
            )
            0.8px,

            transparent
            0.9px
        ),

        var(--bl-sage-300);

    background-size:
        14px 14px,
        auto;

    border-radius:
        60% 35% 0 0 /
        77% 70% 0 0;

    transform:
        translateY(35px)
        rotate(-2deg);

    opacity:
        0;
}



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

.bl-hero__secondary {

    position:
        absolute;

    z-index:
        7;

    right:
        clamp(
            5rem,
            10vw,
            10rem
        );

    bottom:
        clamp(
            1.4rem,
            4.2svh,
            3.2rem
        );

    width:
        clamp(
            260px,
            27vw,
            410px
        );

    aspect-ratio:
        1.5;

    margin:
        0;

    padding:
        6px;

    overflow:
        hidden;

    background:
        var(--bl-surface);

    border-radius:
        22px;

    box-shadow:
        0 22px 50px
        rgba(
            var(--bl-forest-950-rgb),
            0.18
        );

    opacity:
        0;

    transform:
        translate3d(
            calc(
                var(--bl-hero-pointer-x)
                *
                -0.65
            ),

            calc(
                28px
                +
                (
                    var(--bl-hero-pointer-y)
                    *
                    -0.65
                )
            ),

            0
        )
        scale(0.94);
}


.bl-hero__secondary img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        17px;

    transition:
        transform
        850ms
        var(--bl-ease-organic);
}


.bl-hero__secondary:hover img {

    transform:
        scale(1.035);
}



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

.bl-hero.is-ready
.bl-hero__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease
        80ms,

        transform
        720ms
        var(--bl-ease-organic)
        80ms;
}


.bl-hero.is-ready
.bl-hero__eyebrow i {

    transform:
        scaleX(1);

    transition:
        transform
        720ms
        var(--bl-ease-organic)
        450ms;
}


.bl-hero.is-ready
.bl-hero__title-line:nth-child(1)
> span {

    transform:
        translateY(0)
        rotate(0);

    transition:
        transform
        900ms
        var(--bl-ease-organic)
        150ms;
}


.bl-hero.is-ready
.bl-hero__title-line:nth-child(2)
> span {

    transform:
        translateY(0)
        rotate(0);

    transition:
        transform
        900ms
        var(--bl-ease-organic)
        240ms;
}


.bl-hero.is-ready
.bl-hero__title-line:nth-child(3)
> span {

    transform:
        translateY(0)
        rotate(0);

    transition:
        transform
        900ms
        var(--bl-ease-organic)
        330ms;
}


.bl-hero.is-ready
.bl-hero__description {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        440ms,

        transform
        820ms
        var(--bl-ease-organic)
        440ms;
}


.bl-hero.is-ready
.bl-hero__actions {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        520ms,

        transform
        820ms
        var(--bl-ease-organic)
        520ms;
}


.bl-hero.is-ready
.bl-hero__chip {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

    transition:

        opacity
        580ms
        ease,

        transform
        700ms
        var(--bl-ease-organic),

        background-color
        380ms
        var(--bl-ease-standard),

        box-shadow
        380ms
        var(--bl-ease-standard);

    transition-delay:
        calc(
            600ms
            +
            (
                var(--bl-chip-index)
                *
                65ms
            )
        );
}


.bl-hero.is-ready
.bl-hero__visual-frame {

    opacity:
        1;

    transform:
        scale(1);

    transition:

        opacity
        850ms
        ease
        100ms,

        transform
        1150ms
        var(--bl-ease-organic)
        100ms;
}


.bl-hero.is-ready
.bl-hero__terrain {

    opacity:
        1;

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

    transition:

        opacity
        850ms
        ease
        400ms,

        transform
        1100ms
        var(--bl-ease-organic)
        400ms;
}


.bl-hero.is-ready
.bl-hero__secondary {

    opacity:
        1;

    transform:
        translate3d(
            calc(
                var(--bl-hero-pointer-x)
                *
                -0.65
            ),

            calc(
                var(--bl-hero-pointer-y)
                *
                -0.65
            ),

            0
        )
        scale(1);

    transition:

        opacity
        700ms
        ease
        610ms,

        transform
        1000ms
        var(--bl-ease-organic)
        610ms;
}



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

html.bl-reduced-motion
.bl-hero__eyebrow,

html.bl-reduced-motion
.bl-hero__description,

html.bl-reduced-motion
.bl-hero__actions,

html.bl-reduced-motion
.bl-hero__chip,

html.bl-reduced-motion
.bl-hero__visual-frame,

html.bl-reduced-motion
.bl-hero__terrain,

html.bl-reduced-motion
.bl-hero__secondary {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-hero__title-line > span {

    transform:
        none;
}



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

@media (min-width: 1200px) {

    .bl-hero__content {

        width:
            min(
                47%,
                675px
            );
    }


    .bl-hero__visual {

        width:
            55%;
    }

}



/* =========================================================
   2. TABLET
   768px — 1199px
========================================================= */

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

    .bl-hero__content {

        width:
            52%;

        padding-right:
            1rem;
    }


    .bl-hero__title {

        font-size:
            clamp(
                2.8rem,
                min(5.8vw, 7svh),
                4.4rem
            );
    }


    .bl-hero__description {

        max-width:
            450px;

        font-size:
            0.94rem;
    }


    .bl-hero__visual {

        width:
            51%;
    }


    .bl-hero__visual-frame {

        border-radius:
            52% 0 0 39% /
            42% 0 0 55%;
    }


    .bl-hero__secondary {

        right:
            3.5rem;

        width:
            clamp(
                225px,
                27vw,
                310px
            );

        bottom:
            1.5rem;
    }


    .bl-hero__services {

        gap:
            0.42rem;
    }


    .bl-hero__chip {

        padding-inline:
            0.65rem;

        font-size:
            0.68rem;
    }


    .bl-hero__chip svg {

        width:
            16px;

        height:
            16px;
    }

}



/* =========================================================
   3. MOBILE
   481px — 767px
========================================================= */

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

    .bl-hero__inner {

        align-items:
            flex-start;
    }


    .bl-hero__content {

        width:
            100%;

        max-width:
            none;

        padding-top:
            clamp(
                1.15rem,
                3.2svh,
                1.8rem
            );

        padding-right:
            0;
    }


    .bl-hero__eyebrow {

        margin-bottom:
            0.75rem;

        font-size:
            0.64rem;

        letter-spacing:
            0.105em;
    }


    .bl-hero__eyebrow svg {

        width:
            20px;

        height:
            20px;
    }


    .bl-hero__eyebrow i {

        width:
            28px;
    }


    .bl-hero__title {

        max-width:
            440px;

        font-size:
            clamp(
                2.25rem,
                min(8.3vw, 6.2svh),
                3.25rem
            );

        line-height:
            0.98;
    }


    .bl-hero__description {

        max-width:
            390px;

        margin-top:
            0.7rem;

        font-size:
            0.82rem;

        line-height:
            1.55;
    }


    .bl-hero__actions {

        gap:
            0.65rem;

        margin-top:
            0.9rem;
    }


    .bl-hero__button {

        min-height:
            44px;

        padding:
            0.7rem
            1rem;

        font-size:
            0.78rem;
    }


    .bl-hero__button svg {

        width:
            16px;

        height:
            16px;
    }


    .bl-hero__services {

        position:
            absolute;

        left:
            0;

        top:
            calc(
                100%
                +
                0.8rem
            );

        width:
            min(
                94vw,
                610px
            );

        max-width:
            none;

        gap:
            0.45rem;

        margin-top:
            0;

        padding-bottom:
            4px;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }


    .bl-hero__services::-webkit-scrollbar {

        display:
            none;
    }


    .bl-hero__chip {

        flex:
            0 0 auto;

        min-height:
            33px;

        padding:
            0.45rem
            0.68rem;

        font-size:
            0.66rem;
    }


    .bl-hero__visual {

        top:
            auto;

        right:
            -4%;

        bottom:
            0;

        width:
            68%;

        height:
            39%;
    }


    .bl-hero__visual-frame {

        border-radius:
            58% 0 0 0 /
            58% 0 0 0;
    }


    .bl-hero__terrain {

        right:
            -23%;

        bottom:
            -17%;

        width:
            96%;

        height:
            37%;

        border-radius:
            63% 35% 0 0 /
            78% 64% 0 0;
    }


    .bl-hero__secondary {

        right:
            5%;

        bottom:
            3.5%;

        width:
            clamp(
                185px,
                38vw,
                245px
            );

        border-radius:
            16px;

        padding:
            4px;
    }


    .bl-hero__secondary img {

        border-radius:
            12px;
    }


    .bl-hero__botanical {

        width:
            95px;

        opacity:
            0.7;
    }


    .bl-hero__topography {

        width:
            84%;

        height:
            67%;
    }

}



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

@media (max-width: 480px) {

    .bl-hero__inner {

        align-items:
            flex-start;
    }


    .bl-hero__content {

        width:
            100%;

        max-width:
            none;

        padding-top:
            clamp(
                0.85rem,
                2.5svh,
                1.3rem
            );
    }


    .bl-hero__eyebrow {

        gap:
            0.42rem;

        margin-bottom:
            0.55rem;

        font-size:
            0.58rem;

        letter-spacing:
            0.09em;
    }


    .bl-hero__eyebrow svg {

        width:
            18px;

        height:
            18px;
    }


    .bl-hero__eyebrow i {

        display:
            none;
    }


    .bl-hero__title {

        max-width:
            340px;

        font-size:
            clamp(
                2rem,
                min(9.5vw, 6.1svh),
                2.75rem
            );

        line-height:
            0.97;
    }


    .bl-hero__description {

        max-width:
            330px;

        margin-top:
            0.55rem;

        font-size:
            0.75rem;

        line-height:
            1.5;
    }


    .bl-hero__actions {

        gap:
            0.48rem;

        margin-top:
            0.7rem;
    }


    .bl-hero__button {

        min-height:
            41px;

        padding:
            0.62rem
            0.78rem;

        gap:
            0.42rem;

        font-size:
            0.7rem;
    }


    .bl-hero__button svg {

        width:
            14px;

        height:
            14px;
    }


    .bl-hero__services {

        position:
            absolute;

        top:
            calc(
                100%
                +
                0.62rem
            );

        left:
            0;

        width:
            calc(
                100vw
                -
                var(--bl-gutter)
            );

        max-width:
            none;

        gap:
            0.38rem;

        margin:
            0;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }


    .bl-hero__services::-webkit-scrollbar {

        display:
            none;
    }


    .bl-hero__chip {

        flex:
            0 0 auto;

        min-height:
            30px;

        padding:
            0.4rem
            0.55rem;

        gap:
            0.32rem;

        font-size:
            0.6rem;
    }


    .bl-hero__chip svg {

        width:
            14px;

        height:
            14px;
    }


    .bl-hero__visual {

        top:
            auto;

        right:
            -9%;

        bottom:
            0;

        width:
            80%;

        height:
            34%;
    }


    .bl-hero__visual-frame {

        border-radius:
            63% 0 0 0 /
            70% 0 0 0;
    }


    .bl-hero__terrain {

        right:
            -42%;

        bottom:
            -15%;

        width:
            130%;

        height:
            34%;
    }


    /*
    En móviles muy pequeños priorizamos
    claridad y mantenemos la primera pantalla
    dentro de 100svh.
    */

    .bl-hero__secondary {

        display:
            none;
    }


    .bl-hero__botanical {

        right:
            -22px;

        bottom:
            -15px;

        width:
            82px;
    }


    .bl-hero__topography {

        width:
            102%;

        height:
            65%;
    }

}







































/* =========================================================
   05. SERVICES
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-services {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(5.5rem, 9vw, 8rem)
        0;

    background:
        var(--bl-ivory);
}



/* =========================================================
   SUBTLE TEXTURE
========================================================= */

.bl-services::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -6;

    pointer-events:
        none;

    background-image:

        radial-gradient(
            circle,
            rgba(
                var(--bl-forest-900-rgb),
                0.035
            )
            0.75px,
            transparent
            0.85px
        ),

        radial-gradient(
            circle at 88% 13%,
            rgba(
                var(--bl-sage-rgb),
                0.15
            ),
            transparent
            30rem
        ),

        radial-gradient(
            circle at 12% 90%,
            rgba(
                var(--bl-clay-rgb),
                0.045
            ),
            transparent
            28rem
        );

    background-size:
        17px 17px,
        auto,
        auto;
}



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

.bl-services__topography {

    position:
        absolute;

    z-index:
        -5;

    top:
        0;

    right:
        -5%;

    width:
        min(
            60vw,
            950px
        );

    height:
        100%;

    pointer-events:
        none;

    fill:
        none;

    stroke:
        rgba(
            var(--bl-forest-700-rgb),
            0.06
        );

    stroke-width:
        1.1;

    vector-effect:
        non-scaling-stroke;
}



/* =========================================================
   ORGANIC TERRAIN
========================================================= */

.bl-services__terrain {

    position:
        absolute;

    z-index:
        -4;

    right:
        -14%;

    top:
        13%;

    width:
        43vw;

    max-width:
        720px;

    aspect-ratio:
        1.35;

    pointer-events:
        none;

    border-radius:
        64% 36% 63% 37% /
        44% 60% 40% 56%;

    background:
        var(--bl-sage-100);

    opacity:
        0.6;

    transform:
        rotate(-11deg);
}



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

.bl-services__inner {

    position:
        relative;

    z-index:
        2;
}



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

.bl-services__header {

    display:
        grid;

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

    align-items:
        end;

    gap:
        clamp(
            3rem,
            7vw,
            7rem
        );

    margin-bottom:
        clamp(
            2.7rem,
            5vw,
            4.8rem
        );
}



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

.bl-services__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1rem;

    color:
        var(--bl-forest-700);

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.bl-services__eyebrow-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}


.bl-services__eyebrow svg {

    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-services__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

    margin-left:
        0.2rem;

    background:
        var(--bl-clay-500);
}



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

.bl-services__title {

    max-width:
        760px;

    font-size:
        clamp(
            2.7rem,
            5vw,
            5.3rem
        );

    line-height:
        0.97;

    letter-spacing:
        -0.06em;
}


.bl-services__title span {

    display:
        block;

    color:
        var(--bl-forest-500);
}



/* =========================================================
   LEAD
========================================================= */

.bl-services__lead {

    max-width:
        430px;

    padding-bottom:
        0.25rem;

    color:
        var(--bl-muted);

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

    line-height:
        1.75;
}



/* =========================================================
   GRID
========================================================= */

.bl-services__grid {

    display:
        grid;

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

    gap:
        1.35rem;
}



/* =========================================================
   SERVICE CARD
========================================================= */

.bl-service-card {

    --bl-card-pointer-x:
        0px;

    --bl-card-pointer-y:
        0px;


    position:
        relative;

    grid-column:
        span 4;

    min-height:
        510px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    color:
        var(--bl-text);

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

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.075
        );

    border-radius:
        var(--bl-radius-md);

    box-shadow:
        0 18px 42px
        rgba(
            var(--bl-forest-950-rgb),
            0.075
        );

    opacity:
        0;

    transform:
        translateY(38px);

    transition:

        opacity
        720ms
        ease,

        transform
        850ms
        var(--bl-ease-organic),

        box-shadow
        520ms
        var(--bl-ease-standard),

        border-color
        520ms
        var(--bl-ease-standard);
}



/* =========================================================
   FIRST ROW
========================================================= */

.bl-service-card--wide {

    grid-column:
        span 7;

    min-height:
        610px;
}


.bl-service-card--tall {

    grid-column:
        span 5;

    min-height:
        610px;
}



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

.bl-service-card.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

    transition-delay:
        calc(
            var(--bl-service-index)
            *
            75ms
        );
}



/* =========================================================
   CARD HOVER
========================================================= */

.bl-service-card:hover {

    border-color:
        rgba(
            var(--bl-forest-900-rgb),
            0.13
        );

    box-shadow:
        0 28px 62px
        rgba(
            var(--bl-forest-950-rgb),
            0.13
        );

    transform:
        translateY(-7px);
}



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

.bl-service-card__media {

    position:
        relative;

    flex:
        1 1 auto;

    min-height:
        290px;

    overflow:
        hidden;

    background:
        var(--bl-sage-200);

    clip-path:
        inset(
            0 0 100% 0
            round
            var(--bl-radius-md)
        );

    transition:
        clip-path
        1050ms
        var(--bl-ease-organic);
}


.bl-service-card.is-visible
.bl-service-card__media {

    clip-path:
        inset(
            0 0 0 0
            round
            var(--bl-radius-md)
        );

    transition-delay:
        calc(
            90ms
            +
            (
                var(--bl-service-index)
                *
                70ms
            )
        );
}


.bl-service-card__media::after {

    content:
        "";

    position:
        absolute;

    right:
        -12%;

    bottom:
        -34%;

    width:
        68%;

    height:
        48%;

    pointer-events:
        none;

    border-radius:
        58% 42% 0 0 /
        80% 65% 0 0;

    background:
        rgba(
            190,
            201,
            168,
            0.78
        );

    transform:
        translateY(26%);

    transition:
        transform
        750ms
        var(--bl-ease-organic);
}


.bl-service-card:hover
.bl-service-card__media::after {

    transform:
        translateY(8%);
}



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

.bl-service-card__media img {

    position:
        absolute;

    inset:
        -2%;

    width:
        104%;

    height:
        104%;

    object-fit:
        cover;

    transform:

        translate3d(
            var(--bl-card-pointer-x),
            var(--bl-card-pointer-y),
            0
        )

        scale(1.035);

    transition:

        transform
        850ms
        var(--bl-ease-organic),

        filter
        650ms
        var(--bl-ease-standard);
}


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

    transform:

        translate3d(
            var(--bl-card-pointer-x),
            var(--bl-card-pointer-y),
            0
        )

        scale(1.07);
}



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

.bl-service-card__shade {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            transparent 50%,
            rgba(
                var(--bl-forest-950-rgb),
                0.28
            )
        );
}



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

.bl-service-card__number {

    position:
        absolute;

    top:
        1.2rem;

    left:
        1.2rem;

    z-index:
        3;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        42px;

    height:
        30px;

    padding:
        0 0.65rem;

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

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

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

    border-radius:
        999px;

    backdrop-filter:
        blur(10px);

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

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}



/* =========================================================
   CARD BODY
========================================================= */

.bl-service-card__body {

    position:
        relative;

    min-height:
        190px;

    padding:
        1.6rem;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        1.4rem;
}


.bl-service-card--wide
.bl-service-card__body {

    padding:
        1.8rem;
}



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

.bl-service-card__copy {

    max-width:
        510px;
}


.bl-service-card__label {

    display:
        block;

    margin-bottom:
        0.45rem;

    color:
        var(--bl-clay-600);

    font-size:
        0.69rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.bl-service-card h3 {

    margin:
        0;

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

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

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.bl-service-card p {

    max-width:
        480px;

    margin-top:
        0.65rem;

    color:
        var(--bl-muted);

    font-size:
        0.86rem;

    line-height:
        1.62;
}



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

.bl-service-card__arrow {

    flex:
        0 0 auto;

    width:
        48px;

    height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-900);

    border-radius:
        50%;

    transform:
        rotate(-18deg);

    transition:

        transform
        520ms
        var(--bl-ease-organic),

        background-color
        420ms
        ease;
}


.bl-service-card__arrow svg {

    width:
        20px;

    height:
        20px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


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

    background:
        var(--bl-clay-500);

    transform:
        rotate(0deg)
        translateX(2px);
}



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

.bl-services__footer {

    margin-top:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.25rem;
}


.bl-services__footer-line {

    display:
        block;

    height:
        1px;

    background:
        var(--bl-line);
}


.bl-services__footer p {

    color:
        var(--bl-muted);

    font-size:
        0.86rem;
}


.bl-services__footer a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

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

    font-size:
        0.88rem;

    font-weight:
        800;
}


.bl-services__footer a svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


.bl-services__footer a:hover svg {

    transform:
        translateX(5px);
}



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

html.bl-reduced-motion
.bl-service-card {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-service-card__media {

    clip-path:
        none;
}


html.bl-reduced-motion
.bl-service-card__media img {

    transform:
        scale(1.035);
}



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

@media (min-width: 1200px) {

    .bl-service-card--wide
    .bl-service-card__media {

        min-height:
            385px;
    }


    .bl-service-card--tall
    .bl-service-card__media {

        min-height:
            385px;
    }

}



/* =========================================================
   2. TABLET
   768px — 1199px
========================================================= */

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

    .bl-services {

        padding:
            5.5rem 0;
    }


    .bl-services__header {

        grid-template-columns:
            1.2fr 0.8fr;

        gap:
            2.5rem;
    }


    .bl-services__title {

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


    .bl-services__grid {

        gap:
            1rem;
    }


    .bl-service-card {

        grid-column:
            span 6;

        min-height:
            475px;
    }


    .bl-service-card--wide {

        grid-column:
            span 7;

        min-height:
            540px;
    }


    .bl-service-card--tall {

        grid-column:
            span 5;

        min-height:
            540px;
    }


    /*
    Última tarjeta centrada
    visualmente dentro de la segunda fila.
    */

    .bl-service-card:nth-child(5) {

        grid-column:
            4 / span 6;
    }


    .bl-service-card__body {

        min-height:
            180px;

        padding:
            1.35rem;
    }


    .bl-service-card p {

        font-size:
            0.81rem;
    }


    .bl-service-card__arrow {

        width:
            44px;

        height:
            44px;
    }

}



/* =========================================================
   3. MOBILE
   481px — 767px
========================================================= */

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

    .bl-services {

        padding:
            4.8rem 0;
    }


    .bl-services__header {

        grid-template-columns:
            1fr;

        gap:
            1.25rem;

        margin-bottom:
            2.3rem;
    }


    .bl-services__title {

        max-width:
            510px;

        font-size:
            clamp(
                2.5rem,
                8vw,
                3.5rem
            );
    }


    .bl-services__lead {

        max-width:
            520px;

        font-size:
            0.9rem;
    }


    .bl-services__terrain {

        top:
            5%;

        right:
            -40%;

        width:
            95vw;
    }


    .bl-services__grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            0.9rem;
    }


    .bl-service-card,
    .bl-service-card--wide,
    .bl-service-card--tall,
    .bl-service-card:nth-child(5) {

        grid-column:
            auto;

        min-height:
            440px;
    }


    .bl-service-card:first-child {

        grid-column:
            1 / -1;

        min-height:
            500px;
    }


    .bl-service-card:last-child {

        grid-column:
            1 / -1;
    }


    .bl-service-card__media {

        min-height:
            240px;
    }


    .bl-service-card:first-child
    .bl-service-card__media {

        min-height:
            285px;
    }


    .bl-service-card__body {

        min-height:
            170px;

        padding:
            1.2rem;

        gap:
            0.8rem;
    }


    .bl-service-card h3 {

        font-size:
            1.35rem;
    }


    .bl-service-card p {

        margin-top:
            0.45rem;

        font-size:
            0.76rem;

        line-height:
            1.55;
    }


    .bl-service-card__arrow {

        width:
            40px;

        height:
            40px;
    }


    .bl-services__footer {

        grid-template-columns:
            1fr auto;
    }


    .bl-services__footer-line {

        grid-column:
            1 / -1;
    }

}



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

@media (max-width: 480px) {

    .bl-services {

        padding:
            4.2rem 0;
    }


    .bl-services__header {

        grid-template-columns:
            1fr;

        gap:
            1rem;

        margin-bottom:
            2rem;
    }


    .bl-services__eyebrow {

        font-size:
            0.66rem;
    }


    .bl-services__eyebrow i {

        width:
            28px;
    }


    .bl-services__title {

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


    .bl-services__lead {

        font-size:
            0.84rem;

        line-height:
            1.65;
    }


    .bl-services__grid {

        grid-template-columns:
            1fr;

        gap:
            0.9rem;
    }


    .bl-service-card,
    .bl-service-card--wide,
    .bl-service-card--tall,
    .bl-service-card:nth-child(5) {

        grid-column:
            1;

        min-height:
            auto;
    }


    .bl-service-card__media {

        flex:
            none;

        min-height:
            250px;
    }


    .bl-service-card__body {

        min-height:
            auto;

        padding:
            1.25rem;

        align-items:
            center;
    }


    .bl-service-card h3 {

        font-size:
            1.45rem;
    }


    .bl-service-card p {

        font-size:
            0.8rem;
    }


    .bl-service-card__arrow {

        width:
            42px;

        height:
            42px;
    }


    .bl-services__footer {

        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            0.8rem;
    }


    .bl-services__footer p {

        font-size:
            0.8rem;
    }


    .bl-services__terrain {

        width:
            120vw;

        right:
            -70%;

        top:
            4%;
    }

}




































/* =========================================================
   06. WHY CHOOSE US
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-why {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(5.5rem, 9vw, 8rem)
        0;

    background:
        var(--bl-cream);
}



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

.bl-why::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -8;

    pointer-events:
        none;

    background-image:

        radial-gradient(
            circle,
            rgba(
                var(--bl-forest-900-rgb),
                0.032
            )
            0.75px,
            transparent
            0.85px
        ),

        radial-gradient(
            circle at 10% 50%,
            rgba(
                var(--bl-sage-rgb),
                0.18
            ),
            transparent
            30rem
        ),

        radial-gradient(
            circle at 88% 12%,
            rgba(
                var(--bl-clay-rgb),
                0.055
            ),
            transparent
            25rem
        );

    background-size:
        17px 17px,
        auto,
        auto;
}



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

.bl-why__topography {

    position:
        absolute;

    z-index:
        -7;

    right:
        -9%;

    top:
        0;

    width:
        min(
            58vw,
            940px
        );

    height:
        100%;

    pointer-events:
        none;

    fill:
        none;

    stroke:
        rgba(
            var(--bl-forest-700-rgb),
            0.06
        );

    stroke-width:
        1.1;
}



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

.bl-why__ambient-shape {

    position:
        absolute;

    z-index:
        -6;

    left:
        -16%;

    bottom:
        -32%;

    width:
        52vw;

    max-width:
        760px;

    aspect-ratio:
        1.2;

    border-radius:
        62% 38% 52% 48% /
        56% 68% 32% 44%;

    background:
        var(--bl-sage-100);

    opacity:
        0.72;

    transform:
        rotate(10deg);
}



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

.bl-why__inner {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    align-items:
        center;

    gap:
        clamp(
            4rem,
            7vw,
            8rem
        );
}



/* =========================================================
   VISUAL
========================================================= */

.bl-why__visual {

    position:
        relative;

    min-height:
        690px;
}



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

.bl-why__image-shell {

    position:
        absolute;

    inset:
        0 7% 8% 0;

    overflow:
        hidden;

    border-radius:
        48% 28% 42% 34% /
        28% 44% 36% 52%;

    background:
        var(--bl-sage-200);

    clip-path:
        inset(
            0 100% 0 0
            round
            48% 28% 42% 34%
        );

    box-shadow:
        0 30px 62px
        rgba(
            var(--bl-forest-950-rgb),
            0.13
        );

    transition:
        clip-path
        1150ms
        var(--bl-ease-organic);
}


.bl-why.is-visible
.bl-why__image-shell {

    clip-path:
        inset(
            0 0 0 0
            round
            48% 28% 42% 34%
        );
}



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

.bl-why__image {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(1.08);

    transition:
        transform
        1400ms
        var(--bl-ease-organic);
}


.bl-why.is-visible
.bl-why__image {

    transform:
        scale(1);
}


.bl-why__image-shell:hover
.bl-why__image {

    transform:
        scale(1.035);
}



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

.bl-why__image-overlay {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            transparent 55%,
            rgba(
                var(--bl-forest-950-rgb),
                0.13
            )
        );
}



/* =========================================================
   TERRAIN
========================================================= */

.bl-why__terrain {

    position:
        absolute;

    z-index:
        3;

    left:
        -9%;

    bottom:
        0;

    width:
        70%;

    height:
        30%;

    border-radius:
        68% 32% 0 0 /
        78% 60% 0 0;

    background:

        radial-gradient(
            circle,
            rgba(
                var(--bl-forest-900-rgb),
                0.05
            )
            0.75px,
            transparent
            0.85px
        ),

        var(--bl-sage-300);

    background-size:
        14px 14px,
        auto;

    opacity:
        0;

    transform:
        translateY(50px)
        rotate(-6deg);

    transition:

        opacity
        800ms
        ease
        350ms,

        transform
        1100ms
        var(--bl-ease-organic)
        350ms;
}


.bl-why.is-visible
.bl-why__terrain {

    opacity:
        1;

    transform:
        translateY(0)
        rotate(-6deg);
}



/* =========================================================
   VISUAL NOTE
========================================================= */

.bl-why__visual-note {

    position:
        absolute;

    z-index:
        5;

    right:
        -2%;

    bottom:
        7%;

    width:
        min(
            315px,
            64%
        );

    display:
        flex;

    align-items:
        center;

    gap:
        0.9rem;

    padding:
        1.1rem;

    color:
        var(--bl-text);

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

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

    border-radius:
        var(--bl-radius-md);

    box-shadow:
        var(--bl-shadow-md);

    backdrop-filter:
        blur(14px);

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

    opacity:
        0;

    transform:
        translateY(28px)
        scale(0.96);

    transition:

        opacity
        720ms
        ease
        600ms,

        transform
        900ms
        var(--bl-ease-organic)
        600ms;
}


.bl-why.is-visible
.bl-why__visual-note {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);
}


.bl-why__visual-note-icon {

    flex:
        0 0 auto;

    width:
        46px;

    height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bl-forest-700);

    background:
        var(--bl-sage-100);

    border-radius:
        50%;
}


.bl-why__visual-note-icon svg {

    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-why__visual-note div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.2rem;
}


.bl-why__visual-note strong {

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

    font-size:
        0.87rem;

    line-height:
        1.25;
}


.bl-why__visual-note div span {

    color:
        var(--bl-muted);

    font-size:
        0.7rem;

    line-height:
        1.45;
}



/* =========================================================
   BOTANICAL
========================================================= */

.bl-why__botanical {

    position:
        absolute;

    z-index:
        4;

    left:
        -56px;

    top:
        7%;

    width:
        150px;

    height:
        auto;

    pointer-events:
        none;

    fill:
        none;

    stroke:
        rgba(
            var(--bl-forest-900-rgb),
            0.13
        );

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



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

.bl-why__content {

    position:
        relative;

    max-width:
        680px;
}



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

.bl-why__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1rem;

    color:
        var(--bl-forest-700);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.bl-why__eyebrow svg {

    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-why__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

    background:
        var(--bl-clay-500);
}



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

.bl-why__title {

    max-width:
        620px;

    font-size:
        clamp(
            2.9rem,
            5vw,
            5.2rem
        );

    line-height:
        0.97;

    letter-spacing:
        -0.06em;
}


.bl-why__title span {

    display:
        block;

    color:
        var(--bl-forest-500);
}



/* =========================================================
   LEAD
========================================================= */

.bl-why__lead {

    max-width:
        610px;

    margin-top:
        1.35rem;

    color:
        var(--bl-muted);

    font-size:
        clamp(
            0.96rem,
            1.05vw,
            1.06rem
        );

    line-height:
        1.75;
}



/* =========================================================
   REASONS
========================================================= */

.bl-why__reasons {

    position:
        relative;

    margin-top:
        clamp(
            2rem,
            4vw,
            3rem
        );

    padding-left:
        3.4rem;
}



/* =========================================================
   ORGANIC PATH
========================================================= */

.bl-why__path {

    position:
        absolute;

    left:
        0.45rem;

    top:
        0;

    width:
        30px;

    height:
        100%;

    overflow:
        visible;

    pointer-events:
        none;
}


.bl-why__path path {

    fill:
        none;

    stroke:
        var(--bl-sage-300);

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-dasharray:
        560;

    stroke-dashoffset:
        560;

    transition:
        stroke-dashoffset
        1500ms
        var(--bl-ease-organic)
        250ms;
}


.bl-why.is-visible
.bl-why__path path {

    stroke-dashoffset:
        0;
}



/* =========================================================
   REASON
========================================================= */

.bl-why__reason {

    position:
        relative;

    display:
        grid;

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

    gap:
        1.05rem;

    padding:
        1.25rem 0;

    border-bottom:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.095
        );

    opacity:
        0;

    transform:
        translateX(28px);

    transition:

        opacity
        680ms
        ease,

        transform
        820ms
        var(--bl-ease-organic),

        padding-left
        420ms
        var(--bl-ease-standard);
}


.bl-why.is-visible
.bl-why__reason {

    opacity:
        1;

    transform:
        translateX(0);

    transition-delay:
        calc(
            420ms
            +
            (
                var(--bl-why-index)
                *
                110ms
            )
        );
}


.bl-why__reason:hover {

    padding-left:
        0.45rem;
}



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

.bl-why__reason-icon {

    position:
        relative;

    z-index:
        2;

    width:
        46px;

    height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bl-forest-700);

    background:
        var(--bl-sage-100);

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.06
        );

    border-radius:
        50%;

    transition:

        color
        420ms
        ease,

        background-color
        420ms
        ease,

        transform
        420ms
        var(--bl-ease-standard);
}


.bl-why__reason:hover
.bl-why__reason-icon {

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-900);

    transform:
        rotate(-6deg)
        scale(1.04);
}


.bl-why__reason-icon svg {

    width:
        21px;

    height:
        21px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.65;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



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

.bl-why__reason h3 {

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

    font-size:
        1.08rem;

    line-height:
        1.25;

    letter-spacing:
        -0.025em;
}


.bl-why__reason p {

    max-width:
        520px;

    margin-top:
        0.42rem;

    color:
        var(--bl-muted);

    font-size:
        0.83rem;

    line-height:
        1.62;
}



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

.bl-why__actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        1.1rem;

    margin-top:
        2rem;
}



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

.bl-why__cta {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.65rem;

    min-height:
        50px;

    padding:
        0.75rem
        1.35rem;

    overflow:
        hidden;

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-900);

    border-radius:
        var(--bl-radius-xs);

    box-shadow:
        0 12px 28px
        rgba(
            var(--bl-forest-950-rgb),
            0.14
        );

    font-size:
        0.88rem;

    font-weight:
        700;

    transition:

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

        background-color
        420ms
        ease,

        box-shadow
        420ms
        ease;
}


.bl-why__cta::before {

    content:
        "";

    position:
        absolute;

    left:
        -20%;

    bottom:
        -170%;

    width:
        140%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        var(--bl-forest-700);

    transition:
        transform
        650ms
        var(--bl-ease-organic);
}


.bl-why__cta span,
.bl-why__cta svg {

    position:
        relative;

    z-index:
        2;
}


.bl-why__cta svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


.bl-why__cta:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 34px
        rgba(
            var(--bl-forest-950-rgb),
            0.19
        );
}


.bl-why__cta:hover::before {

    transform:
        translateY(-46%);
}


.bl-why__cta:hover svg {

    transform:
        translateX(4px);
}



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

.bl-why__phone {

    display:
        inline-flex;

    flex-direction:
        column;

    gap:
        0.15rem;

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

    font-size:
        0.88rem;

    font-weight:
        800;
}


.bl-why__phone span {

    color:
        var(--bl-muted);

    font-size:
        0.64rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}



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

html.bl-reduced-motion
.bl-why__image-shell {

    clip-path:
        none;
}


html.bl-reduced-motion
.bl-why__image {

    transform:
        none;
}


html.bl-reduced-motion
.bl-why__terrain,

html.bl-reduced-motion
.bl-why__visual-note,

html.bl-reduced-motion
.bl-why__reason {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-why__path path {

    stroke-dashoffset:
        0;
}



/* =========================================================
   1. COMPUTER
========================================================= */

@media (min-width: 1200px) {

    .bl-why__visual {

        min-height:
            690px;
    }

}



/* =========================================================
   2. TABLET
========================================================= */

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

    .bl-why {

        padding:
            5.5rem 0;
    }


    .bl-why__inner {

        grid-template-columns:
            minmax(0, 0.88fr)
            minmax(0, 1.12fr);

        gap:
            3rem;
    }


    .bl-why__visual {

        min-height:
            590px;
    }


    .bl-why__image-shell {

        inset:
            0 3% 8% 0;
    }


    .bl-why__title {

        font-size:
            clamp(
                2.7rem,
                5.8vw,
                4.3rem
            );
    }


    .bl-why__reason {

        padding:
            1rem 0;
    }


    .bl-why__reason-icon {

        width:
            42px;

        height:
            42px;
    }


    .bl-why__visual-note {

        width:
            260px;

        right:
            -4%;

        padding:
            0.9rem;
    }


    .bl-why__botanical {

        left:
            -45px;

        width:
            125px;
    }

}



/* =========================================================
   3. MOBILE
========================================================= */

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

    .bl-why {

        padding:
            4.8rem 0;
    }


    .bl-why__inner {

        grid-template-columns:
            1fr;

        gap:
            3rem;
    }


    .bl-why__visual {

        min-height:
            520px;

        max-width:
            620px;

        width:
            100%;

        margin-inline:
            auto;
    }


    .bl-why__image-shell {

        inset:
            0 8% 5% 0;
    }


    .bl-why__visual-note {

        right:
            1%;

        bottom:
            3%;

        width:
            260px;
    }


    .bl-why__botanical {

        left:
            -35px;

        width:
            105px;
    }


    .bl-why__title {

        max-width:
            530px;

        font-size:
            clamp(
                2.6rem,
                8vw,
                3.6rem
            );
    }


    .bl-why__lead {

        max-width:
            560px;

        font-size:
            0.9rem;
    }


    .bl-why__reasons {

        padding-left:
            3rem;
    }


    .bl-why__reason p {

        font-size:
            0.8rem;
    }

}



/* =========================================================
   4. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .bl-why {

        padding:
            4.2rem 0;
    }


    .bl-why__inner {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }


    .bl-why__visual {

        min-height:
            410px;
    }


    .bl-why__image-shell {

        inset:
            0 5% 8% 0;

        border-radius:
            42% 24% 36% 28% /
            24% 38% 31% 44%;
    }


    .bl-why__terrain {

        left:
            -20%;

        width:
            88%;

        height:
            27%;
    }


    .bl-why__visual-note {

        right:
            0;

        bottom:
            2%;

        width:
            min(
                245px,
                82%
            );

        padding:
            0.8rem;
    }


    .bl-why__visual-note-icon {

        width:
            40px;

        height:
            40px;
    }


    .bl-why__visual-note strong {

        font-size:
            0.78rem;
    }


    .bl-why__visual-note div span {

        font-size:
            0.63rem;
    }


    .bl-why__botanical {

        display:
            none;
    }


    .bl-why__eyebrow {

        font-size:
            0.66rem;
    }


    .bl-why__eyebrow i {

        width:
            28px;
    }


    .bl-why__title {

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


    .bl-why__lead {

        margin-top:
            1rem;

        font-size:
            0.84rem;
    }


    .bl-why__reasons {

        margin-top:
            1.7rem;

        padding-left:
            2.7rem;
    }


    .bl-why__path {

        left:
            0.2rem;

        width:
            26px;
    }


    .bl-why__reason {

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

        gap:
            0.8rem;

        padding:
            0.95rem 0;
    }


    .bl-why__reason-icon {

        width:
            38px;

        height:
            38px;
    }


    .bl-why__reason-icon svg {

        width:
            18px;

        height:
            18px;
    }


    .bl-why__reason h3 {

        font-size:
            0.98rem;
    }


    .bl-why__reason p {

        font-size:
            0.75rem;
    }


    .bl-why__actions {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.9rem;
    }

}











































/* =========================================================
   07. REVIEWS
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-reviews {

    --bl-reviews-parallax:
        0px;

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(5.5rem, 9vw, 8rem)
        0;

    background:
        var(--bl-ivory);
}



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

.bl-reviews::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    pointer-events:
        none;

    background-image:

        radial-gradient(
            circle,
            rgba(
                var(--bl-forest-900-rgb),
                0.034
            )
            0.75px,
            transparent
            0.9px
        ),

        radial-gradient(
            circle at 13% 19%,
            rgba(
                var(--bl-sage-rgb),
                0.17
            ),
            transparent
            30rem
        ),

        radial-gradient(
            circle at 92% 75%,
            rgba(
                var(--bl-clay-rgb),
                0.055
            ),
            transparent
            26rem
        );

    background-size:
        17px 17px,
        auto,
        auto;
}



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

.bl-reviews__topography {

    position:
        absolute;

    z-index:
        -9;

    left:
        -4%;

    top:
        0;

    width:
        min(
            68vw,
            1050px
        );

    height:
        100%;

    fill:
        none;

    stroke:
        rgba(
            var(--bl-forest-700-rgb),
            0.06
        );

    stroke-width:
        1.1;

    pointer-events:
        none;

    transform:
        translateY(
            calc(
                var(--bl-reviews-parallax)
                *
                0.35
            )
        );
}



/* =========================================================
   ORGANIC TERRAIN SHAPES
========================================================= */

.bl-reviews__terrain {

    position:
        absolute;

    z-index:
        -7;

    pointer-events:
        none;
}


.bl-reviews__terrain--one {

    right:
        -18%;

    top:
        8%;

    width:
        min(
            52vw,
            780px
        );

    aspect-ratio:
        1.25;

    border-radius:
        66% 34% 52% 48% /
        45% 58% 42% 55%;

    background:
        var(--bl-sage-100);

    opacity:
        0.75;

    transform:
        translateY(
            calc(
                var(--bl-reviews-parallax)
                *
                -0.3
            )
        )
        rotate(-11deg);
}


.bl-reviews__terrain--two {

    left:
        -19%;

    bottom:
        -34%;

    width:
        min(
            58vw,
            850px
        );

    aspect-ratio:
        1.4;

    border-radius:
        62% 38% 0 0 /
        74% 64% 0 0;

    background:
        var(--bl-sage-300);

    opacity:
        0.38;

    transform:
        translateY(
            calc(
                var(--bl-reviews-parallax)
                *
                0.18
            )
        )
        rotate(6deg);
}



/* =========================================================
   EDITORIAL QUOTE
========================================================= */

.bl-reviews__quote {

    position:
        absolute;

    z-index:
        -5;

    right:
        4%;

    top:
        10%;

    pointer-events:
        none;

    color:
        rgba(
            var(--bl-forest-700-rgb),
            0.055
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            16rem,
            27vw,
            30rem
        );

    font-weight:
        700;

    line-height:
        0.7;

    opacity:
        0;

    transform:
        translateY(60px)
        rotate(-7deg);

    transition:

        opacity
        900ms
        ease,

        transform
        1300ms
        var(--bl-ease-organic);
}


.bl-reviews.is-visible
.bl-reviews__quote {

    opacity:
        1;

    transform:
        translateY(0)
        rotate(-7deg);
}



/* =========================================================
   BOTANICAL
========================================================= */

.bl-reviews__botanical {

    position:
        absolute;

    z-index:
        -4;

    left:
        -22px;

    bottom:
        -30px;

    width:
        clamp(
            120px,
            15vw,
            220px
        );

    height:
        auto;

    fill:
        none;

    stroke:
        rgba(
            var(--bl-forest-900-rgb),
            0.13
        );

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;

    transform:
        translateY(
            calc(
                var(--bl-reviews-parallax)
                *
                -0.18
            )
        );
}



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

.bl-reviews__inner {

    position:
        relative;

    z-index:
        3;
}



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

.bl-reviews__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, 0.75fr);

    align-items:
        end;

    gap:
        clamp(
            3rem,
            7vw,
            7rem
        );

    margin-bottom:
        clamp(
            2.8rem,
            5vw,
            4.8rem
        );
}



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

.bl-reviews__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1rem;

    color:
        var(--bl-forest-700);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);

    transition:

        opacity
        700ms
        ease,

        transform
        850ms
        var(--bl-ease-organic);
}


.bl-reviews.is-visible
.bl-reviews__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-reviews__eyebrow svg {

    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-reviews__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

    background:
        var(--bl-clay-500);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        760ms
        var(--bl-ease-organic)
        280ms;
}


.bl-reviews.is-visible
.bl-reviews__eyebrow i {

    transform:
        scaleX(1);
}



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

.bl-reviews__title {

    max-width:
        760px;

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

    line-height:
        0.97;

    letter-spacing:
        -0.06em;

    opacity:
        0;

    transform:
        translateY(28px);

    transition:

        opacity
        760ms
        ease
        100ms,

        transform
        950ms
        var(--bl-ease-organic)
        100ms;
}


.bl-reviews.is-visible
.bl-reviews__title {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-reviews__title span {

    display:
        block;

    color:
        var(--bl-forest-500);
}



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

.bl-reviews__intro {

    max-width:
        430px;

    padding-bottom:
        0.25rem;

    opacity:
        0;

    transform:
        translateY(20px);

    transition:

        opacity
        720ms
        ease
        240ms,

        transform
        900ms
        var(--bl-ease-organic)
        240ms;
}


.bl-reviews.is-visible
.bl-reviews__intro {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-reviews__intro-line {

    display:
        block;

    width:
        52px;

    height:
        2px;

    margin-bottom:
        1rem;

    background:
        var(--bl-clay-500);
}


.bl-reviews__intro p {

    color:
        var(--bl-muted);

    font-size:
        clamp(
            0.94rem,
            1vw,
            1.05rem
        );

    line-height:
        1.75;
}



/* =========================================================
   STAGE
========================================================= */

.bl-reviews__stage {

    position:
        relative;

    padding:
        2rem
        2rem
        2.6rem
        4rem;
}



/* =========================================================
   SIDE NOTE
========================================================= */

.bl-reviews__side-note {

    position:
        absolute;

    left:
        0;

    top:
        50%;

    display:
        flex;

    align-items:
        center;

    gap:
        0.8rem;

    color:
        var(--bl-forest-700);

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

    writing-mode:
        vertical-rl;

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

    opacity:
        0.64;
}


.bl-reviews__side-note i {

    display:
        block;

    width:
        1px;

    height:
        45px;

    background:
        var(--bl-clay-500);
}



/* =========================================================
   WIDGET SHELL
========================================================= */

.bl-reviews__widget-shell {

    position:
        relative;

    width:
        100%;

    min-height:
        470px;

    padding:
        clamp(
            1rem,
            2vw,
            1.6rem
        );

    overflow:
        hidden;

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

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

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

    box-shadow:
        0 30px 70px
        rgba(
            var(--bl-forest-950-rgb),
            0.11
        );

    backdrop-filter:
        blur(12px);

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

    opacity:
        0;

    transform:
        translateY(34px)
        scale(0.985);

    transition:

        opacity
        800ms
        ease
        320ms,

        transform
        1050ms
        var(--bl-ease-organic)
        320ms;
}


.bl-reviews.is-visible
.bl-reviews__widget-shell {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);
}



/* =========================================================
   WIDGET DECORATIVE ACCENT
========================================================= */

.bl-reviews__widget-accent {

    position:
        absolute;

    top:
        1rem;

    right:
        1rem;

    display:
        flex;

    align-items:
        center;

    gap:
        0.38rem;

    pointer-events:
        none;
}


.bl-reviews__widget-accent span {

    display:
        block;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;
}


.bl-reviews__widget-accent span:nth-child(1) {

    background:
        var(--bl-forest-700);
}


.bl-reviews__widget-accent span:nth-child(2) {

    background:
        var(--bl-sage-300);
}


.bl-reviews__widget-accent span:nth-child(3) {

    background:
        var(--bl-clay-500);
}



/* =========================================================
   STATIC PLACEHOLDER

   NO LOADER
   NO SHIMMER
   NO SKELETON
   NO WAIT ANIMATION
========================================================= */

.bl-reviews__widget-placeholder {

    min-height:
        435px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1rem;

    padding:
        2rem;

    color:
        var(--bl-muted);

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(
                var(--bl-sage-rgb),
                0.14
            ),
            transparent 18rem
        ),

        rgba(
            245,
            241,
            231,
            0.58
        );

    border:
        1px dashed
        rgba(
            var(--bl-forest-900-rgb),
            0.17
        );

    border-radius:
        calc(
            var(--bl-radius-lg)
            - 7px
        );
}



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

.bl-reviews__placeholder-icon {

    flex:
        0 0 auto;

    width:
        54px;

    height:
        54px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bl-forest-700);

    background:
        var(--bl-sage-100);

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.07
        );

    border-radius:
        50%;
}


.bl-reviews__placeholder-icon svg {

    width:
        25px;

    height:
        25px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.45;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



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

.bl-reviews__widget-placeholder > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.3rem;
}


.bl-reviews__widget-placeholder strong {

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

    font-size:
        0.95rem;
}


.bl-reviews__widget-placeholder
> div
> span {

    color:
        var(--bl-muted);

    font-size:
        0.78rem;
}



/* =========================================================
   IMPORTANT:
   FUTURE ELFSIGHT CONTAINER
========================================================= */

.bl-reviews__widget-shell
[class*="elfsight-app-"] {

    position:
        relative;

    z-index:
        2;

    width:
        100%;
}



/* =========================================================
   CORNER MARK
========================================================= */

.bl-reviews__corner-mark {

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        58px;

    height:
        58px;

    pointer-events:
        none;
}


.bl-reviews__corner-mark span {

    position:
        absolute;

    background:
        var(--bl-clay-500);
}


.bl-reviews__corner-mark span:first-child {

    right:
        0;

    bottom:
        0;

    width:
        58px;

    height:
        2px;
}


.bl-reviews__corner-mark span:last-child {

    right:
        0;

    bottom:
        0;

    width:
        2px;

    height:
        58px;
}



/* =========================================================
   BOTTOM DECORATIVE LINE
========================================================= */

.bl-reviews__footer-decoration {

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.1rem;

    width:
        min(
            480px,
            70%
        );

    margin:
        clamp(
            2.5rem,
            5vw,
            4rem
        )
        auto
        0;
}


.bl-reviews__footer-decoration span {

    display:
        block;

    height:
        1px;

    background:
        var(--bl-line);
}


.bl-reviews__footer-decoration svg {

    width:
        26px;

    height:
        26px;

    fill:
        none;

    stroke:
        var(--bl-forest-700);

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



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

html.bl-reduced-motion
.bl-reviews__eyebrow,

html.bl-reduced-motion
.bl-reviews__title,

html.bl-reduced-motion
.bl-reviews__intro,

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

html.bl-reduced-motion
.bl-reviews__quote {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-reviews__eyebrow i {

    transform:
        none;
}



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

@media (min-width: 1200px) {

    .bl-reviews__stage {

        padding-left:
            4.5rem;

        padding-right:
            3rem;
    }


    .bl-reviews__widget-shell {

        min-height:
            500px;
    }


    .bl-reviews__widget-placeholder {

        min-height:
            465px;
    }

}



/* =========================================================
   2. TABLET
   768px — 1199px
========================================================= */

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

    .bl-reviews {

        padding:
            5.5rem 0;
    }


    .bl-reviews__header {

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

        gap:
            2.5rem;
    }


    .bl-reviews__title {

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


    .bl-reviews__stage {

        padding:
            1.5rem
            1.2rem
            2rem
            3.2rem;
    }


    .bl-reviews__widget-shell {

        min-height:
            440px;
    }


    .bl-reviews__widget-placeholder {

        min-height:
            405px;
    }


    .bl-reviews__quote {

        right:
            -2%;
    }

}



/* =========================================================
   3. MOBILE
   481px — 767px
========================================================= */

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

    .bl-reviews {

        padding:
            4.8rem 0;
    }


    .bl-reviews__header {

        grid-template-columns:
            1fr;

        gap:
            1.3rem;

        margin-bottom:
            2.3rem;
    }


    .bl-reviews__title {

        max-width:
            560px;

        font-size:
            clamp(
                2.5rem,
                8vw,
                3.6rem
            );
    }


    .bl-reviews__intro {

        max-width:
            520px;
    }


    .bl-reviews__stage {

        padding:
            1rem
            0
            1.6rem;
    }


    .bl-reviews__side-note {

        display:
            none;
    }


    .bl-reviews__widget-shell {

        min-height:
            400px;

        border-radius:
            var(--bl-radius-md);
    }


    .bl-reviews__widget-placeholder {

        min-height:
            365px;

        border-radius:
            calc(
                var(--bl-radius-md)
                - 5px
            );
    }


    .bl-reviews__quote {

        top:
            14%;

        right:
            -10%;
    }


    .bl-reviews__botanical {

        width:
            115px;
    }

}



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

@media (max-width: 480px) {

    .bl-reviews {

        padding:
            4.2rem 0;
    }


    .bl-reviews__header {

        grid-template-columns:
            1fr;

        gap:
            1rem;

        margin-bottom:
            2rem;
    }


    .bl-reviews__eyebrow {

        font-size:
            0.66rem;
    }


    .bl-reviews__eyebrow i {

        width:
            28px;
    }


    .bl-reviews__title {

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


    .bl-reviews__intro p {

        font-size:
            0.84rem;
    }


    .bl-reviews__stage {

        padding:
            0.6rem 0 1rem;
    }


    .bl-reviews__side-note {

        display:
            none;
    }


    .bl-reviews__widget-shell {

        min-height:
            350px;

        padding:
            0.7rem;

        border-radius:
            16px;
    }


    .bl-reviews__widget-placeholder {

        min-height:
            325px;

        flex-direction:
            column;

        text-align:
            center;

        padding:
            1.4rem;

        border-radius:
            11px;
    }


    .bl-reviews__placeholder-icon {

        width:
            48px;

        height:
            48px;
    }


    .bl-reviews__widget-placeholder strong {

        font-size:
            0.86rem;
    }


    .bl-reviews__widget-placeholder
    > div
    > span {

        font-size:
            0.7rem;
    }


    .bl-reviews__widget-accent {

        top:
            0.8rem;

        right:
            0.8rem;
    }


    .bl-reviews__quote {

        right:
            -20%;

        top:
            18%;

        font-size:
            15rem;
    }


    .bl-reviews__botanical {

        left:
            -40px;

        width:
            100px;

        opacity:
            0.75;
    }


    .bl-reviews__footer-decoration {

        width:
            85%;

        margin-top:
            2.3rem;
    }

}



































/* =========================================================
   08. SERVICE AREAS
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-areas {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(5.5rem, 9vw, 8rem)
        0;

    background:
        var(--bl-cream);
}



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

.bl-areas::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    pointer-events:
        none;

    background-image:

        radial-gradient(
            circle,
            rgba(
                var(--bl-forest-900-rgb),
                0.035
            )
            0.75px,
            transparent
            0.85px
        ),

        radial-gradient(
            circle at 90% 10%,
            rgba(
                var(--bl-sage-rgb),
                0.19
            ),
            transparent
            30rem
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(
                var(--bl-clay-rgb),
                0.045
            ),
            transparent
            30rem
        );

    background-size:
        17px 17px,
        auto,
        auto;
}



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

.bl-areas__topography {

    position:
        absolute;

    z-index:
        -9;

    right:
        -5%;

    top:
        0;

    width:
        min(
            72vw,
            1150px
        );

    height:
        100%;

    fill:
        none;

    stroke:
        rgba(
            var(--bl-forest-700-rgb),
            0.06
        );

    stroke-width:
        1.1;

    pointer-events:
        none;
}



/* =========================================================
   TERRAIN
========================================================= */

.bl-areas__terrain {

    position:
        absolute;

    z-index:
        -8;

    pointer-events:
        none;
}


.bl-areas__terrain--left {

    left:
        -22%;

    bottom:
        -31%;

    width:
        min(
            58vw,
            880px
        );

    aspect-ratio:
        1.3;

    border-radius:
        65% 35% 0 0 /
        72% 64% 0 0;

    background:
        var(--bl-sage-200);

    opacity:
        0.48;

    transform:
        rotate(7deg);
}


.bl-areas__terrain--right {

    right:
        -15%;

    top:
        8%;

    width:
        min(
            43vw,
            670px
        );

    aspect-ratio:
        1.2;

    border-radius:
        54% 46% 67% 33% /
        42% 61% 39% 58%;

    background:
        var(--bl-sage-100);

    opacity:
        0.73;

    transform:
        rotate(-12deg);
}



/* =========================================================
   BOTANICAL
========================================================= */

.bl-areas__botanical {

    position:
        absolute;

    z-index:
        -4;

    right:
        -20px;

    bottom:
        -40px;

    width:
        clamp(
            120px,
            14vw,
            205px
        );

    height:
        auto;

    fill:
        none;

    stroke:
        rgba(
            var(--bl-forest-900-rgb),
            0.13
        );

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}



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

.bl-areas__inner {

    position:
        relative;

    z-index:
        2;
}



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

.bl-areas__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, 0.75fr);

    align-items:
        end;

    gap:
        clamp(
            3rem,
            7vw,
            7rem
        );

    margin-bottom:
        clamp(
            2.8rem,
            5vw,
            4.8rem
        );
}



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

.bl-areas__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1rem;

    color:
        var(--bl-forest-700);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);

    transition:

        opacity
        700ms
        ease,

        transform
        850ms
        var(--bl-ease-organic);
}


.bl-areas.is-visible
.bl-areas__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-areas__eyebrow svg {

    width:
        22px;

    height:
        22px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-areas__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

    background:
        var(--bl-clay-500);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform
        750ms
        var(--bl-ease-organic)
        250ms;
}


.bl-areas.is-visible
.bl-areas__eyebrow i {

    transform:
        scaleX(1);
}



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

.bl-areas__title {

    max-width:
        760px;

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

    line-height:
        0.97;

    letter-spacing:
        -0.06em;

    opacity:
        0;

    transform:
        translateY(26px);

    transition:

        opacity
        750ms
        ease
        80ms,

        transform
        900ms
        var(--bl-ease-organic)
        80ms;
}


.bl-areas.is-visible
.bl-areas__title {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-areas__title span {

    display:
        block;

    color:
        var(--bl-forest-500);
}



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

.bl-areas__intro {

    max-width:
        430px;

    opacity:
        0;

    transform:
        translateY(20px);

    transition:

        opacity
        700ms
        ease
        180ms,

        transform
        850ms
        var(--bl-ease-organic)
        180ms;
}


.bl-areas.is-visible
.bl-areas__intro {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-areas__intro-line {

    display:
        block;

    width:
        52px;

    height:
        2px;

    margin-bottom:
        1rem;

    background:
        var(--bl-clay-500);
}


.bl-areas__intro p {

    color:
        var(--bl-muted);

    font-size:
        clamp(
            0.94rem,
            1vw,
            1.05rem
        );

    line-height:
        1.75;
}



/* =========================================================
   EXPERIENCE SHELL
========================================================= */

.bl-areas__experience {

    display:
        grid;

    grid-template-columns:
        minmax(290px, 0.34fr)
        minmax(0, 0.66fr);

    min-height:
        660px;

    overflow:
        hidden;

    background:
        var(--bl-surface);

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

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

    box-shadow:
        0 30px 70px
        rgba(
            var(--bl-forest-950-rgb),
            0.12
        );

    opacity:
        0;

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

    transition:

        opacity
        800ms
        ease
        250ms,

        transform
        1000ms
        var(--bl-ease-organic)
        250ms;
}


.bl-areas.is-visible
.bl-areas__experience {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);
}



/* =========================================================
   LEFT PANEL
========================================================= */

.bl-areas__panel {

    position:
        relative;

    z-index:
        5;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    padding:
        clamp(
            1.5rem,
            2.6vw,
            2.4rem
        );

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-950);
}



/* =========================================================
   PANEL TEXTURE
========================================================= */

.bl-areas__panel::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 16% 12%,
            rgba(
                var(--bl-sage-rgb),
                0.13
            ),
            transparent 16rem
        ),

        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.035
            )
            0.7px,
            transparent
            0.8px
        );

    background-size:
        auto,
        16px 16px;
}



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

.bl-areas__panel-head {

    position:
        relative;

    z-index:
        2;

    padding-bottom:
        1.5rem;
}


.bl-areas__panel-kicker {

    color:
        var(--bl-sage-300);

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.bl-areas__panel-head h3 {

    margin-top:
        0.55rem;

    color:
        var(--bl-surface);

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

    line-height:
        1.05;

    letter-spacing:
        -0.045em;
}


.bl-areas__panel-head p {

    max-width:
        315px;

    margin-top:
        0.7rem;

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

    font-size:
        0.78rem;

    line-height:
        1.6;
}



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

.bl-areas__list {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;
}



/* =========================================================
   LOCATION BUTTON
========================================================= */

.bl-area-item {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    min-height:
        68px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        0.85rem;

    padding:
        0.8rem
        0;

    text-align:
        left;

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

    background:
        transparent;

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

    transition:

        color
        350ms
        ease,

        padding
        430ms
        var(--bl-ease-standard),

        background-color
        350ms
        ease;
}


.bl-area-item:not(.bl-area-item--all):hover,
.bl-area-item:not(.bl-area-item--all).is-active {

    color:
        var(--bl-surface);

    padding-left:
        0.55rem;
}



/* =========================================================
   ALL AREAS BUTTON
========================================================= */

.bl-area-item--all {

    margin-bottom:
        0.55rem;

    padding:
        0.9rem;

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

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

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


.bl-area-item--all:hover,
.bl-area-item--all.is-active {

    color:
        var(--bl-surface);

    background:
        rgba(
            190,
            201,
            168,
            0.11
        );

    border-color:
        rgba(
            190,
            201,
            168,
            0.23
        );
}



/* =========================================================
   AREA INDEX
========================================================= */

.bl-area-item__index {

    color:
        var(--bl-sage-300);

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}



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

.bl-area-item__content {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    gap:
        0.2rem;
}


.bl-area-item__content strong {

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    color:
        inherit;

    font-size:
        0.91rem;

    font-weight:
        700;

    white-space:
        nowrap;
}


.bl-area-item__content small {

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

    font-size:
        0.65rem;
}



/* =========================================================
   STATE
========================================================= */

.bl-area-item__state {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        34px;

    height:
        26px;

    color:
        var(--bl-sage-300);

    border:
        1px solid
        rgba(
            190,
            201,
            168,
            0.18
        );

    border-radius:
        999px;

    font-size:
        0.6rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}



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

.bl-area-item__marker {

    width:
        36px;

    height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bl-sage-300);

    background:
        rgba(
            190,
            201,
            168,
            0.1
        );

    border-radius:
        50%;
}


.bl-area-item__marker svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-area-item__arrow {

    color:
        var(--bl-clay-500);

    font-size:
        1rem;
}



/* =========================================================
   PANEL FOOTER
========================================================= */

.bl-areas__panel-footer {

    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    padding-top:
        1.6rem;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        0.65rem;
}


.bl-areas__panel-footer > span {

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

    font-size:
        0.68rem;
}


.bl-areas__panel-footer a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    color:
        var(--bl-surface);

    font-size:
        0.82rem;

    font-weight:
        800;
}


.bl-areas__panel-footer svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        var(--bl-clay-500);

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


.bl-areas__panel-footer a:hover svg {

    transform:
        translateX(5px);
}



/* =========================================================
   MAP SHELL
========================================================= */

.bl-areas__map-shell {

    position:
        relative;

    min-width:
        0;

    min-height:
        660px;

    overflow:
        hidden;

    background:
        var(--bl-sage-100);
}



/* =========================================================
   MAP
========================================================= */

.bl-areas__map {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    z-index:
        1;

    background:
        var(--bl-sage-100);
}



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

.bl-areas__map-label {

    position:
        absolute;

    z-index:
        600;

    top:
        1.2rem;

    left:
        1.2rem;

    display:
        flex;

    align-items:
        center;

    gap:
        0.7rem;

    padding:
        0.75rem
        0.9rem;

    color:
        var(--bl-text);

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

    border:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

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

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

    backdrop-filter:
        blur(13px);

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

    pointer-events:
        none;
}


.bl-areas__map-label-dot {

    width:
        9px;

    height:
        9px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--bl-clay-500);

    box-shadow:
        0 0 0 5px
        rgba(
            var(--bl-clay-rgb),
            0.12
        );
}


.bl-areas__map-label > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.1rem;
}


.bl-areas__map-label strong {

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

    font-size:
        0.75rem;
}


.bl-areas__map-label small {

    color:
        var(--bl-muted);

    font-size:
        0.62rem;
}



/* =========================================================
   LEAFLET VISUAL INTEGRATION
========================================================= */

.bl-areas
.leaflet-container {

    font-family:
        var(--bl-font-primary);

    background:
        var(--bl-sage-100);
}



/* =========================================================
   ZOOM CONTROL
========================================================= */

.bl-areas
.leaflet-control-zoom {

    overflow:
        hidden;

    border:
        0;

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

    box-shadow:
        var(--bl-shadow-sm);
}


.bl-areas
.leaflet-control-zoom a {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

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

    border:
        0;

    border-bottom:
        1px solid
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

    font-size:
        1.2rem;

    line-height:
        1;
}


.bl-areas
.leaflet-control-zoom a:hover {

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-900);
}



/* =========================================================
   ATTRIBUTION
========================================================= */

.bl-areas
.leaflet-control-attribution {

    padding:
        4px 7px;

    color:
        var(--bl-muted);

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

    font-size:
        0.58rem;

    backdrop-filter:
        blur(8px);

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



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

.bl-map-marker {

    position:
        relative;

    width:
        42px;

    height:
        48px;
}


.bl-map-marker__pin {

    position:
        absolute;

    top:
        0;

    left:
        50%;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bl-surface);

    background:
        var(--bl-forest-900);

    border:
        3px solid
        var(--bl-cream);

    border-radius:
        50% 50% 50% 8px;

    box-shadow:
        0 8px 20px
        rgba(
            var(--bl-forest-950-rgb),
            0.24
        );

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

    transition:

        background-color
        350ms
        ease,

        transform
        350ms
        var(--bl-ease-standard);
}


.bl-map-marker__pin::after {

    content:
        "";

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--bl-sage-300);

    transform:
        rotate(45deg);
}


.bl-map-marker.is-active
.bl-map-marker__pin {

    background:
        var(--bl-clay-500);

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



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

.bl-map-marker::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        0;

    width:
        22px;

    height:
        7px;

    border-radius:
        50%;

    background:
        rgba(
            var(--bl-forest-950-rgb),
            0.2
        );

    filter:
        blur(2px);

    transform:
        translateX(-50%);
}



/* =========================================================
   POPUP
========================================================= */

.bl-areas
.leaflet-popup-content-wrapper {

    overflow:
        hidden;

    padding:
        0;

    background:
        var(--bl-cream);

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

    box-shadow:
        0 20px 45px
        rgba(
            var(--bl-forest-950-rgb),
            0.18
        );
}


.bl-areas
.leaflet-popup-content {

    width:
        210px !important;

    margin:
        0;

    padding:
        1rem;
}


.bl-areas
.leaflet-popup-tip {

    background:
        var(--bl-cream);
}



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

.bl-map-popup {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.4rem;
}


.bl-map-popup__state {

    color:
        var(--bl-clay-600);

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.bl-map-popup strong {

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

    font-size:
        1rem;

    letter-spacing:
        -0.025em;
}


.bl-map-popup p {

    color:
        var(--bl-muted);

    font-size:
        0.7rem;

    line-height:
        1.5;
}



/* =========================================================
   FALLBACK
========================================================= */

.bl-areas__map-fallback {

    position:
        absolute;

    inset:
        0;

    z-index:
        20;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.4rem;

    padding:
        2rem;

    text-align:
        center;

    background:
        var(--bl-sage-100);
}


.bl-areas__map-fallback[hidden] {

    display:
        none;
}


.bl-areas__map-fallback strong {

    color:
        var(--bl-forest-950);
}


.bl-areas__map-fallback span {

    max-width:
        320px;

    color:
        var(--bl-muted);

    font-size:
        0.78rem;
}



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

.bl-areas__footer {

    margin-top:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        1.5rem;
}


.bl-areas__footer-copy {

    display:
        flex;

    align-items:
        baseline;

    gap:
        0.45rem;
}


.bl-areas__footer-copy span {

    color:
        var(--bl-muted);

    font-size:
        0.75rem;
}


.bl-areas__footer-copy strong {

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

    font-size:
        0.8rem;

    letter-spacing:
        0.08em;
}


.bl-areas__footer-line {

    height:
        1px;

    background:
        var(--bl-line);
}


.bl-areas__footer > a {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        0.12rem;
}


.bl-areas__footer > a span {

    color:
        var(--bl-muted);

    font-size:
        0.67rem;
}


.bl-areas__footer > a strong {

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

    font-size:
        0.88rem;
}



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

html.bl-reduced-motion
.bl-areas__eyebrow,

html.bl-reduced-motion
.bl-areas__title,

html.bl-reduced-motion
.bl-areas__intro,

html.bl-reduced-motion
.bl-areas__experience {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-areas__eyebrow i {

    transform:
        none;
}



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

@media (min-width: 1200px) {

    .bl-areas__experience {

        min-height:
            670px;
    }


    .bl-areas__map-shell {

        min-height:
            670px;
    }

}



/* =========================================================
   2. TABLET
   768px — 1199px
========================================================= */

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

    .bl-areas {

        padding:
            5.5rem 0;
    }


    .bl-areas__header {

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

        gap:
            2.5rem;
    }


    .bl-areas__title {

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


    .bl-areas__experience {

        grid-template-columns:
            minmax(250px, 0.36fr)
            minmax(0, 0.64fr);

        min-height:
            610px;
    }


    .bl-areas__map-shell {

        min-height:
            610px;
    }


    .bl-areas__panel {

        padding:
            1.5rem;
    }


    .bl-area-item {

        min-height:
            63px;
    }

}



/* =========================================================
   3. MOBILE
   481px — 767px
========================================================= */

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

    .bl-areas {

        padding:
            4.8rem 0;
    }


    .bl-areas__header {

        grid-template-columns:
            1fr;

        gap:
            1.25rem;

        margin-bottom:
            2.3rem;
    }


    .bl-areas__title {

        max-width:
            560px;

        font-size:
            clamp(
                2.5rem,
                8vw,
                3.6rem
            );
    }


    .bl-areas__intro {

        max-width:
            520px;
    }


    .bl-areas__experience {

        grid-template-columns:
            1fr;

        min-height:
            0;

        border-radius:
            var(--bl-radius-md);
    }


    .bl-areas__panel {

        padding:
            1.5rem;
    }


    .bl-areas__panel-head p {

        max-width:
            500px;
    }


    .bl-areas__list {

        display:
            grid;

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


    .bl-area-item--all {

        margin-bottom:
            0.8rem;
    }


    .bl-area-item {

        padding:
            0.75rem
            0.5rem;
    }


    .bl-area-item:nth-child(odd) {

        padding-right:
            0.8rem;
    }


    .bl-area-item:nth-child(even) {

        padding-left:
            0.8rem;
    }


    .bl-areas__panel-footer {

        margin-top:
            1.2rem;
    }


    .bl-areas__map-shell {

        min-height:
            470px;
    }


    .bl-areas__footer {

        grid-template-columns:
            auto 1fr;

        gap:
            1rem;
    }


    .bl-areas__footer > a {

        grid-column:
            1 / -1;

        align-items:
            flex-start;
    }

}



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

@media (max-width: 480px) {

    .bl-areas {

        padding:
            4.2rem 0;
    }


    .bl-areas__header {

        grid-template-columns:
            1fr;

        gap:
            1rem;

        margin-bottom:
            2rem;
    }


    .bl-areas__eyebrow {

        font-size:
            0.66rem;
    }


    .bl-areas__eyebrow i {

        width:
            28px;
    }


    .bl-areas__title {

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


    .bl-areas__intro p {

        font-size:
            0.84rem;
    }


    .bl-areas__experience {

        grid-template-columns:
            1fr;

        min-height:
            0;

        border-radius:
            16px;
    }


    .bl-areas__panel {

        padding:
            1.2rem;
    }


    .bl-areas__panel-head {

        padding-bottom:
            1.2rem;
    }


    .bl-areas__panel-head h3 {

        font-size:
            1.5rem;
    }


    .bl-areas__list {

        display:
            flex;

        flex-direction:
            column;
    }


    .bl-area-item {

        min-height:
            59px;

        padding:
            0.7rem 0;
    }


    .bl-area-item__content strong {

        font-size:
            0.84rem;
    }


    .bl-area-item--all {

        padding:
            0.8rem;
    }


    .bl-areas__panel-footer {

        margin-top:
            1.1rem;
    }


    .bl-areas__map-shell {

        min-height:
            400px;
    }


    .bl-areas__map-label {

        top:
            0.8rem;

        left:
            0.8rem;

        padding:
            0.65rem
            0.75rem;
    }


    .bl-areas
    .leaflet-control-zoom a {

        width:
            38px;

        height:
            38px;
    }


    .bl-areas__footer {

        grid-template-columns:
            1fr;

        gap:
            0.8rem;
    }


    .bl-areas__footer-line {

        width:
            100%;
    }


    .bl-areas__footer > a {

        align-items:
            flex-start;
    }


    .bl-areas__botanical {

        right:
            -45px;

        width:
            100px;
    }

}




































/* =========================================================
   09. FOOTER
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-footer {

    position:
        relative;

    isolation:
        isolate;

    margin-top:
        52px;

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

    background:
        var(--bl-forest-950);
}



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

.bl-footer__transition {

    position:
        absolute;

    z-index:
        1;

    left:
        0;

    top:
        -52px;

    width:
        100%;

    height:
        54px;

    overflow:
        hidden;

    pointer-events:
        none;
}


.bl-footer__transition svg {

    width:
        100%;

    height:
        100%;
}


.bl-footer__transition path {

    fill:
        var(--bl-forest-950);
}



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

.bl-footer::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    pointer-events:
        none;

    background-image:

        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.035
            )
            0.7px,
            transparent
            0.8px
        ),

        radial-gradient(
            circle at 9% 25%,
            rgba(
                var(--bl-sage-rgb),
                0.11
            ),
            transparent
            26rem
        ),

        radial-gradient(
            circle at 92% 74%,
            rgba(
                var(--bl-clay-rgb),
                0.07
            ),
            transparent
            25rem
        );

    background-size:
        17px 17px,
        auto,
        auto;
}



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

.bl-footer__topography {

    position:
        absolute;

    z-index:
        -8;

    top:
        0;

    right:
        -7%;

    width:
        min(
            70vw,
            1050px
        );

    height:
        100%;

    fill:
        none;

    stroke:
        rgba(
            255,
            255,
            255,
            0.035
        );

    stroke-width:
        1.1;

    pointer-events:
        none;
}



/* =========================================================
   BOTANICAL
========================================================= */

.bl-footer__botanical {

    position:
        absolute;

    z-index:
        -5;

    left:
        -26px;

    bottom:
        15%;

    width:
        clamp(
            120px,
            14vw,
            205px
        );

    height:
        auto;

    fill:
        none;

    stroke:
        rgba(
            190,
            201,
            168,
            0.13
        );

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}



/* =========================================================
   MAIN GRID
========================================================= */

.bl-footer__main {

    position:
        relative;

    z-index:
        3;

    display:
        grid;

    grid-template-columns:
        minmax(280px, 1.45fr)
        minmax(175px, 0.75fr)
        minmax(240px, 1fr)
        minmax(220px, 0.9fr);

    gap:
        clamp(
            2.5rem,
            5vw,
            5.5rem
        );

    padding-top:
        clamp(
            5rem,
            8vw,
            7rem
        );

    padding-bottom:
        clamp(
            4rem,
            7vw,
            6rem
        );
}



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

.bl-footer__brand {

    max-width:
        400px;
}


.bl-footer__logo {

    display:
        inline-flex;

    align-items:
        center;
}


.bl-footer__logo img {

    width:
        auto;

    max-width:
        210px;

    height:
        64px;

    object-fit:
        contain;

    filter:
        brightness(0)
        invert(1);

    opacity:
        0.96;
}



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

.bl-footer__description {

    max-width:
        390px;

    margin-top:
        1.5rem;

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

    font-size:
        0.88rem;

    line-height:
        1.75;
}



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

.bl-footer__contact {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.85rem;

    margin-top:
        1.8rem;
}


.bl-footer__contact a {

    display:
        flex;

    align-items:
        center;

    gap:
        0.8rem;

    width:
        max-content;

    max-width:
        100%;

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


.bl-footer__contact a:hover {

    transform:
        translateX(4px);
}


.bl-footer__contact-icon {

    flex:
        0 0 auto;

    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bl-sage-300);

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

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

    border-radius:
        50%;
}


.bl-footer__contact-icon svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-footer__contact a > span:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.1rem;

    min-width:
        0;
}


.bl-footer__contact small {

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

    font-size:
        0.61rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-footer__contact strong {

    overflow-wrap:
        anywhere;

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

    font-size:
        0.78rem;

    font-weight:
        600;
}



/* =========================================================
   COLUMN
========================================================= */

.bl-footer__column {

    min-width:
        0;
}


.bl-footer__column-label {

    display:
        block;

    margin-bottom:
        0.4rem;

    color:
        var(--bl-sage-300);

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.bl-footer__column-title {

    color:
        var(--bl-surface);

    font-size:
        1.18rem;

    line-height:
        1.2;

    letter-spacing:
        -0.035em;
}



/* =========================================================
   QUICK LINKS
========================================================= */

.bl-footer__links {

    display:
        flex;

    flex-direction:
        column;

    margin-top:
        1.35rem;
}


.bl-footer__links a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        0.8rem;

    min-height:
        38px;

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

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

    font-size:
        0.8rem;

    transition:

        color
        340ms
        ease,

        padding-left
        380ms
        var(--bl-ease-standard);
}


.bl-footer__links a:hover {

    padding-left:
        0.4rem;

    color:
        var(--bl-surface);
}


.bl-footer__links a span:last-child {

    color:
        var(--bl-clay-500);

    transition:
        transform
        340ms
        var(--bl-ease-standard);
}


.bl-footer__links a:hover
span:last-child {

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



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

.bl-footer__hours {

    display:
        flex;

    flex-direction:
        column;

    margin-top:
        1.35rem;
}


.bl-footer__hours-row {

    display:
        grid;

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

    align-items:
        center;

    gap:
        1rem;

    padding:
        0.92rem 0;

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


.bl-footer__hours-row div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.18rem;
}


.bl-footer__hours-row strong {

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

    font-size:
        0.77rem;
}


.bl-footer__hours-row span {

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

    font-size:
        0.61rem;
}


.bl-footer__hours-row time {

    color:
        var(--bl-sage-300);

    font-size:
        0.72rem;

    font-weight:
        700;

    white-space:
        nowrap;
}


.bl-footer__hours-row--closed time {

    color:
        var(--bl-clay-500);
}



/* =========================================================
   SOCIAL
========================================================= */

.bl-footer__social-copy {

    max-width:
        280px;

    margin-top:
        1.35rem;

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

    font-size:
        0.8rem;

    line-height:
        1.65;
}


.bl-footer__social-link {

    display:
        grid;

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

    align-items:
        center;

    gap:
        0.85rem;

    margin-top:
        1.4rem;

    padding:
        0.85rem;

    color:
        var(--bl-surface);

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

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

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

    transition:

        background-color
        400ms
        ease,

        border-color
        400ms
        ease,

        transform
        420ms
        var(--bl-ease-standard);
}


.bl-footer__social-link:hover {

    background:
        rgba(
            190,
            201,
            168,
            0.1
        );

    border-color:
        rgba(
            190,
            201,
            168,
            0.2
        );

    transform:
        translateY(-4px);
}


.bl-footer__social-icon {

    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

    background:
        var(--bl-sage-300);

    border-radius:
        50%;
}


.bl-footer__social-icon svg {

    width:
        20px;

    height:
        20px;

    fill:
        currentColor;
}


.bl-footer__social-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.15rem;
}


.bl-footer__social-content small {

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

    font-size:
        0.6rem;
}


.bl-footer__social-content strong {

    font-size:
        0.84rem;
}


.bl-footer__social-arrow {

    color:
        var(--bl-clay-500);

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


.bl-footer__social-link:hover
.bl-footer__social-arrow {

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



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

.bl-footer__bottom {

    position:
        relative;

    z-index:
        3;

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

    background:
        rgba(
            0,
            0,
            0,
            0.08
        );
}


.bl-footer__bottom-inner {

    min-height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;
}


.bl-footer__bottom p {

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

    font-size:
        0.69rem;
}


.bl-footer__bottom a {

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

    font-size:
        0.69rem;

    transition:
        color
        320ms
        ease;
}


.bl-footer__bottom a strong {

    color:
        var(--sage-300, var(--bl-sage-300));

    font-weight:
        700;
}


.bl-footer__bottom a:hover {

    color:
        var(--bl-surface);
}



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

.bl-footer__brand,
.bl-footer__column {

    opacity:
        0;

    transform:
        translateY(26px);

    transition:

        opacity
        700ms
        ease,

        transform
        850ms
        var(--bl-ease-organic);
}


.bl-footer.is-visible
.bl-footer__brand {

    opacity:
        1;

    transform:
        translateY(0);

    transition-delay:
        80ms;
}


.bl-footer.is-visible
.bl-footer__column:nth-of-type(2) {

    opacity:
        1;

    transform:
        translateY(0);

    transition-delay:
        150ms;
}


.bl-footer.is-visible
.bl-footer__column:nth-of-type(3) {

    opacity:
        1;

    transform:
        translateY(0);

    transition-delay:
        220ms;
}


.bl-footer.is-visible
.bl-footer__column:nth-of-type(4) {

    opacity:
        1;

    transform:
        translateY(0);

    transition-delay:
        290ms;
}



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

html.bl-reduced-motion
.bl-footer__brand,

html.bl-reduced-motion
.bl-footer__column {

    opacity:
        1;

    transform:
        none;
}



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

@media (min-width: 1200px) {

    .bl-footer__main {

        grid-template-columns:
            minmax(300px, 1.45fr)
            minmax(170px, 0.72fr)
            minmax(240px, 0.95fr)
            minmax(220px, 0.88fr);
    }

}



/* =========================================================
   2. TABLET
   768px — 1199px
========================================================= */

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

    .bl-footer__main {

        grid-template-columns:
            1.2fr 0.8fr;

        gap:
            3rem 4rem;

        padding-top:
            5rem;

        padding-bottom:
            4.5rem;
    }


    .bl-footer__brand {

        max-width:
            480px;
    }


    .bl-footer__description {

        max-width:
            460px;
    }


    .bl-footer__social-copy {

        max-width:
            420px;
    }

}



/* =========================================================
   3. MOBILE
   481px — 767px
========================================================= */

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

    .bl-footer {

        margin-top:
            42px;
    }


    .bl-footer__transition {

        top:
            -42px;

        height:
            44px;
    }


    .bl-footer__main {

        grid-template-columns:
            1fr 1fr;

        gap:
            2.8rem 2rem;

        padding-top:
            4.5rem;

        padding-bottom:
            4rem;
    }


    .bl-footer__brand {

        grid-column:
            1 / -1;

        max-width:
            560px;
    }


    .bl-footer__social-column {

        grid-column:
            1 / -1;
    }


    .bl-footer__social-copy {

        max-width:
            520px;
    }


    .bl-footer__social-link {

        max-width:
            360px;
    }


    .bl-footer__bottom-inner {

        min-height:
            86px;

        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            0.4rem;
    }

}



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

@media (max-width: 480px) {

    .bl-footer {

        margin-top:
            34px;
    }


    .bl-footer__transition {

        top:
            -34px;

        height:
            36px;
    }


    .bl-footer__main {

        grid-template-columns:
            1fr;

        gap:
            2.6rem;

        padding-top:
            4rem;

        padding-bottom:
            3.5rem;
    }


    .bl-footer__logo img {

        max-width:
            175px;

        height:
            56px;
    }


    .bl-footer__description {

        font-size:
            0.82rem;
    }


    .bl-footer__contact strong {

        font-size:
            0.72rem;
    }


    .bl-footer__column-title {

        font-size:
            1.1rem;
    }


    .bl-footer__hours-row {

        gap:
            0.6rem;
    }


    .bl-footer__hours-row strong {

        font-size:
            0.73rem;
    }


    .bl-footer__hours-row time {

        font-size:
            0.67rem;
    }


    .bl-footer__social-link {

        width:
            100%;
    }


    .bl-footer__bottom-inner {

        min-height:
            auto;

        padding-top:
            1.3rem;

        padding-bottom:
            1.3rem;

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            0.55rem;
    }


    .bl-footer__bottom p,
    .bl-footer__bottom a {

        font-size:
            0.64rem;
    }


    .bl-footer__botanical {

        left:
            -45px;

        width:
            105px;
    }

}