/* =========================================================
   BROTHER'S LANDSCAPING
   CONTACT.HTML
   03. CONTACT HERO
========================================================= */


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

.bl-contact-hero {

    --bl-contact-scroll:
        0px;

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

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


    position:
        relative;

    isolation:
        isolate;

    width:
        100%;


    /*
    Contact Hero intentionally does not consume
    the entire remaining viewport.

    Topbar + Header + Hero remain comfortably
    below 100vh / 100svh.
    */

    min-height:
        min(
            640px,
            calc(
                78vh
                -
                var(--bl-first-screen-chrome-height)
            )
        );

    min-height:
        min(
            640px,
            calc(
                78svh
                -
                var(--bl-first-screen-chrome-height)
            )
        );


    overflow:
        hidden;

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



/* =========================================================
   FALLBACK MINIMUM
========================================================= */

.bl-contact-hero {

    height:
        clamp(
            470px,
            calc(
                78vh
                -
                var(--bl-first-screen-chrome-height)
            ),
            640px
        );

    height:
        clamp(
            470px,
            calc(
                78svh
                -
                var(--bl-first-screen-chrome-height)
            ),
            640px
        );
}



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

.bl-contact-hero__texture {

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    pointer-events:
        none;

    background-image:

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

        radial-gradient(
            circle at 8% 16%,
            rgba(
                var(--bl-sage-rgb),
                0.18
            ),
            transparent 25rem
        ),

        radial-gradient(
            circle at 43% 96%,
            rgba(
                var(--bl-clay-rgb),
                0.045
            ),
            transparent 22rem
        );

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



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

.bl-contact-hero__topography {

    position:
        absolute;

    z-index:
        -8;

    top:
        -10%;

    left:
        -4%;

    width:
        min(
            51vw,
            730px
        );

    height:
        120%;

    pointer-events:
        none;

    fill:
        none;

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

    stroke-width:
        1.05;

    vector-effect:
        non-scaling-stroke;
}



/* =========================================================
   CLAY ORBIT
========================================================= */

.bl-contact-hero__clay-orbit {

    position:
        absolute;

    z-index:
        -4;

    right:
        45%;

    top:
        17%;

    width:
        46px;

    height:
        46px;

    border:
        1px solid
        rgba(
            var(--bl-clay-rgb),
            0.32
        );

    border-radius:
        50%;

    opacity:
        0;

    transform:
        scale(0.6);

    transition:

        opacity
        750ms
        ease
        520ms,

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


.bl-contact-hero.is-ready
.bl-contact-hero__clay-orbit {

    opacity:
        1;

    transform:
        scale(1);
}


.bl-contact-hero__clay-orbit::after {

    content:
        "";

    position:
        absolute;

    right:
        -8px;

    top:
        6px;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

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



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

.bl-contact-hero__inner {

    position:
        relative;

    z-index:
        8;

    height:
        100%;

    display:
        flex;

    align-items:
        center;
}



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

.bl-contact-hero__content {

    width:
        min(
            48%,
            680px
        );

    padding-right:
        2rem;
}



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

.bl-contact-hero__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1.15rem;

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

    font-size:
        0.73rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(16px);
}


.bl-contact-hero__eyebrow svg {

    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-contact-hero__eyebrow i {

    width:
        42px;

    height:
        2px;

    display:
        block;

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

    transform:
        scaleX(0);

    transform-origin:
        left;
}



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

.bl-contact-hero__title {

    max-width:
        680px;

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

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

    font-weight:
        700;

    line-height:
        0.96;

    letter-spacing:
        -0.064em;
}


.bl-contact-hero__title-line {

    display:
        block;

    overflow:
        hidden;

    padding-bottom:
        0.06em;
}


.bl-contact-hero__title-line > span {

    display:
        block;

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

    transform-origin:
        left bottom;
}


.bl-contact-hero__title-line:nth-child(2) {

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


.bl-contact-hero__dot {

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



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

.bl-contact-hero__description {

    max-width:
        570px;

    margin-top:
        1.25rem;

    color:
        var(--bl-muted);

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

    line-height:
        1.7;

    opacity:
        0;

    transform:
        translateY(18px);
}



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

.bl-contact-hero__actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        1.15rem;

    margin-top:
        1.6rem;

    opacity:
        0;

    transform:
        translateY(18px);
}



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

.bl-contact-hero__cta {

    position:
        relative;

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.65rem;

    padding:
        0.8rem
        1.4rem;

    overflow:
        hidden;

    color:
        var(--bl-surface);

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

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

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

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

    font-size:
        0.9rem;

    font-weight:
        700;

    transition:

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

        box-shadow
        420ms
        ease;
}


.bl-contact-hero__cta::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-contact-hero__cta span,
.bl-contact-hero__cta svg {

    position:
        relative;

    z-index:
        2;
}


.bl-contact-hero__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-contact-hero__cta:hover {

    transform:
        translateY(-3px);

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


.bl-contact-hero__cta:hover::before {

    transform:
        translateY(-46%);
}


.bl-contact-hero__cta:hover svg {

    transform:
        translateX(4px);
}



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

.bl-contact-hero__phone {

    display:
        flex;

    align-items:
        center;

    gap:
        0.65rem;

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


.bl-contact-hero__phone-icon {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 auto;

    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%;

    transition:

        color
        380ms
        ease,

        background-color
        380ms
        ease,

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


.bl-contact-hero__phone:hover
.bl-contact-hero__phone-icon {

    color:
        var(--bl-surface);

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

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


.bl-contact-hero__phone-icon svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.65;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-contact-hero__phone > span:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.08rem;
}


.bl-contact-hero__phone small {

    color:
        var(--bl-muted);

    font-size:
        0.62rem;

    font-weight:
        600;
}


.bl-contact-hero__phone strong {

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

    font-size:
        0.84rem;

    font-weight:
        800;
}



/* =========================================================
   SERVICE AREAS
========================================================= */

.bl-contact-hero__areas {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.6rem;

    margin-top:
        1.65rem;

    color:
        var(--bl-muted);

    font-size:
        0.67rem;

    font-weight:
        600;

    opacity:
        0;

    transform:
        translateY(14px);
}


.bl-contact-hero__areas i {

    width:
        4px;

    height:
        4px;

    flex:
        0 0 auto;

    border-radius:
        50%;

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



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

.bl-contact-hero__visual {

    position:
        absolute;

    z-index:
        2;

    top:
        0;

    right:
        0;

    width:
        53%;

    height:
        100%;

    pointer-events:
        none;

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



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

.bl-contact-hero__image-shell {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

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

    border-radius:
        47% 0 0 32% /
        45% 0 0 58%;

    opacity:
        0;

    clip-path:
        inset(
            0 0 0 100%
            round
            47% 0 0 32%
        );

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



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

.bl-contact-hero__image {

    position:
        absolute;

    inset:
        -3%;

    width:
        106%;

    height:
        106%;

    object-fit:
        cover;

    object-position:
        center;

    transform:

        translateY(
            var(--bl-contact-scroll)
        )

        scale(1.045);
}



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

.bl-contact-hero__image-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(
                250,
                248,
                242,
                0.16
            ),
            transparent 20%
        ),

        linear-gradient(
            180deg,
            transparent 63%,
            rgba(
                var(--bl-forest-950-rgb),
                0.14
            )
        );

    pointer-events:
        none;
}



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

.bl-contact-hero__terrain {

    position:
        absolute;

    z-index:
        4;

    right:
        -10%;

    bottom:
        -29%;

    width:
        66%;

    height:
        57%;

    pointer-events:
        none;

    border-radius:
        64% 36% 0 0 /
        80% 64% 0 0;

    background:

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

        var(--bl-sage-300);

    background-size:
        14px 14px,
        auto;

    opacity:
        0;

    transform:
        translateY(52px)
        rotate(-3deg);
}



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

.bl-contact-hero__botanical {

    position:
        absolute;

    z-index:
        5;

    right:
        -12px;

    bottom:
        -20px;

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

    fill:
        none;

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

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}



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

.bl-contact-hero__visual-note {

    position:
        absolute;

    z-index:
        8;

    left:
        10%;

    bottom:
        7%;

    display:
        flex;

    align-items:
        center;

    gap:
        0.7rem;

    padding:
        0.8rem
        0.95rem;

    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-md);

    backdrop-filter:
        blur(13px);

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

    opacity:
        0;

    transform:
        translateY(25px)
        scale(0.95);
}


.bl-contact-hero__visual-note-icon {

    width:
        38px;

    height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

    border-radius:
        50%;
}


.bl-contact-hero__visual-note-icon svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-contact-hero__visual-note > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.1rem;
}


.bl-contact-hero__visual-note span {

    color:
        var(--bl-muted);

    font-size:
        0.61rem;
}


.bl-contact-hero__visual-note strong {

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

    font-size:
        0.76rem;

    letter-spacing:
        0.07em;
}



/* =========================================================
   ENTRY ANIMATIONS
========================================================= */

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

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease
        70ms,

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


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

    transform:
        scaleX(1);

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


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

    transform:
        translateY(0)
        rotate(0);

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


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

    transform:
        translateY(0)
        rotate(0);

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


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

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        390ms,

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


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

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        470ms,

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


.bl-contact-hero.is-ready
.bl-contact-hero__areas {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        680ms
        ease
        570ms,

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


.bl-contact-hero.is-ready
.bl-contact-hero__image-shell {

    opacity:
        1;

    clip-path:
        inset(
            0 0 0 0
            round
            47% 0 0 32%
        );

    transition:

        opacity
        720ms
        ease
        90ms,

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


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

    opacity:
        1;

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

    transition:

        opacity
        780ms
        ease
        380ms,

        transform
        1050ms
        var(--bl-ease-organic)
        380ms;
}


.bl-contact-hero.is-ready
.bl-contact-hero__visual-note {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

    transition:

        opacity
        700ms
        ease
        570ms,

        transform
        920ms
        var(--bl-ease-organic)
        570ms;
}



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

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

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

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

html.bl-reduced-motion
.bl-contact-hero__areas,

html.bl-reduced-motion
.bl-contact-hero__image-shell,

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

html.bl-reduced-motion
.bl-contact-hero__visual-note,

html.bl-reduced-motion
.bl-contact-hero__clay-orbit {

    opacity:
        1;

    transform:
        none;

    clip-path:
        none;
}


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

    transform:
        none;
}



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

@media (min-width: 1200px) {

    .bl-contact-hero {

        height:
            clamp(
                500px,
                calc(
                    78svh
                    -
                    var(--bl-first-screen-chrome-height)
                ),
                640px
            );
    }


    .bl-contact-hero__visual {

        width:
            53%;
    }


    .bl-contact-hero__content {

        width:
            min(
                48%,
                680px
            );
    }

}



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

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

    .bl-contact-hero {

        height:
            clamp(
                480px,
                calc(
                    80svh
                    -
                    var(--bl-first-screen-chrome-height)
                ),
                610px
            );
    }


    .bl-contact-hero__content {

        width:
            52%;

        padding-right:
            1.4rem;
    }


    .bl-contact-hero__title {

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


    .bl-contact-hero__visual {

        width:
            50%;
    }


    .bl-contact-hero__description {

        font-size:
            0.9rem;
    }


    .bl-contact-hero__areas {

        gap:
            0.45rem;

        max-width:
            500px;
    }


    .bl-contact-hero__visual-note {

        left:
            5%;

        bottom:
            5%;
    }

}



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

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

    .bl-contact-hero {

        height:
            clamp(
                530px,
                calc(
                    88svh
                    -
                    var(--bl-first-screen-chrome-height)
                ),
                620px
            );
    }


    .bl-contact-hero__inner {

        align-items:
            flex-start;
    }


    .bl-contact-hero__content {

        width:
            100%;

        max-width:
            510px;

        padding-top:
            2rem;

        padding-right:
            0;
    }


    .bl-contact-hero__eyebrow {

        margin-bottom:
            0.75rem;

        font-size:
            0.64rem;
    }


    .bl-contact-hero__eyebrow svg {

        width:
            20px;

        height:
            20px;
    }


    .bl-contact-hero__title {

        max-width:
            470px;

        font-size:
            clamp(
                2.6rem,
                8.5vw,
                3.65rem
            );
    }


    .bl-contact-hero__description {

        max-width:
            420px;

        margin-top:
            0.8rem;

        font-size:
            0.82rem;

        line-height:
            1.55;
    }


    .bl-contact-hero__actions {

        margin-top:
            1rem;

        gap:
            0.85rem;
    }


    .bl-contact-hero__cta {

        min-height:
            45px;

        padding:
            0.7rem
            1rem;

        font-size:
            0.78rem;
    }


    .bl-contact-hero__phone-icon {

        width:
            39px;

        height:
            39px;
    }


    .bl-contact-hero__areas {

        margin-top:
            0.9rem;

        max-width:
            460px;

        font-size:
            0.6rem;
    }


    .bl-contact-hero__visual {

        top:
            auto;

        right:
            -5%;

        bottom:
            0;

        width:
            67%;

        height:
            37%;
    }


    .bl-contact-hero__image-shell {

        border-radius:
            60% 0 0 0 /
            65% 0 0 0;
    }


    .bl-contact-hero__terrain {

        right:
            -29%;

        bottom:
            -19%;

        width:
            100%;

        height:
            36%;
    }


    .bl-contact-hero__visual-note {

        left:
            2%;

        bottom:
            5%;

        padding:
            0.65rem
            0.75rem;
    }


    .bl-contact-hero__botanical {

        width:
            92px;
    }


    .bl-contact-hero__topography {

        width:
            88%;

        height:
            72%;
    }


    .bl-contact-hero__clay-orbit {

        right:
            8%;

        top:
            49%;
    }

}



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

@media (max-width: 480px) {

    .bl-contact-hero {

        height:
            clamp(
                500px,
                calc(
                    90svh
                    -
                    var(--bl-first-screen-chrome-height)
                ),
                585px
            );
    }


    .bl-contact-hero__inner {

        align-items:
            flex-start;
    }


    .bl-contact-hero__content {

        width:
            100%;

        padding-top:
            1.35rem;

        padding-right:
            0;
    }


    .bl-contact-hero__eyebrow {

        gap:
            0.42rem;

        margin-bottom:
            0.55rem;

        font-size:
            0.58rem;
    }


    .bl-contact-hero__eyebrow svg {

        width:
            18px;

        height:
            18px;
    }


    .bl-contact-hero__eyebrow i {

        width:
            25px;
    }


    .bl-contact-hero__title {

        max-width:
            360px;

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


    .bl-contact-hero__description {

        max-width:
            340px;

        margin-top:
            0.6rem;

        font-size:
            0.75rem;

        line-height:
            1.48;
    }


    .bl-contact-hero__actions {

        gap:
            0.7rem;

        margin-top:
            0.8rem;
    }


    .bl-contact-hero__cta {

        min-height:
            42px;

        padding:
            0.62rem
            0.78rem;

        font-size:
            0.71rem;
    }


    .bl-contact-hero__phone-icon {

        width:
            36px;

        height:
            36px;
    }


    .bl-contact-hero__phone small {

        font-size:
            0.55rem;
    }


    .bl-contact-hero__phone strong {

        font-size:
            0.72rem;
    }


    /*
    Reducimos información secundaria antes
    de permitir que el Hero se desborde.
    */

    .bl-contact-hero__areas {

        display:
            none;
    }


    .bl-contact-hero__visual {

        top:
            auto;

        right:
            -9%;

        bottom:
            0;

        width:
            78%;

        height:
            33%;
    }


    .bl-contact-hero__image-shell {

        border-radius:
            66% 0 0 0 /
            72% 0 0 0;
    }


    .bl-contact-hero__terrain {

        right:
            -48%;

        bottom:
            -17%;

        width:
            135%;

        height:
            32%;
    }


    .bl-contact-hero__visual-note {

        left:
            2%;

        bottom:
            4%;

        padding:
            0.55rem
            0.65rem;
    }


    .bl-contact-hero__visual-note-icon {

        width:
            32px;

        height:
            32px;
    }


    .bl-contact-hero__visual-note span {

        font-size:
            0.54rem;
    }


    .bl-contact-hero__visual-note strong {

        font-size:
            0.67rem;
    }


    .bl-contact-hero__botanical {

        right:
            -25px;

        width:
            78px;
    }


    .bl-contact-hero__topography {

        width:
            105%;

        height:
            67%;
    }


    .bl-contact-hero__clay-orbit {

        display:
            none;
    }

}










































/* =========================================================
   04. CONTACT + FREE ESTIMATE FORM
========================================================= */


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

.bl-estimate {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

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

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


.bl-estimate::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    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 88% 12%,
            rgba(
                var(--bl-sage-rgb),
                0.18
            ),
            transparent 30rem
        ),

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

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



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

.bl-estimate__topography {

    position:
        absolute;

    z-index:
        -9;

    right:
        -8%;

    top:
        0;

    width:
        min(
            70vw,
            1100px
        );

    height:
        100%;

    fill:
        none;

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

    stroke-width:
        1.1;

    pointer-events:
        none;
}



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

.bl-estimate__terrain {

    position:
        absolute;

    z-index:
        -8;

    left:
        -19%;

    bottom:
        -30%;

    width:
        min(
            58vw,
            850px
        );

    aspect-ratio:
        1.3;

    border-radius:
        65% 35% 0 0 /
        76% 64% 0 0;

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

    opacity:
        0.8;

    transform:
        rotate(7deg);

    pointer-events:
        none;
}



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

.bl-estimate__inner {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(280px, 0.7fr)
        minmax(0, 1.3fr);

    align-items:
        start;

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



/* =========================================================
   LEFT ASIDE
========================================================= */

.bl-estimate__aside {

    position:
        sticky;

    top:
        calc(
            var(--bl-first-screen-chrome-height)
            +
            2rem
        );
}


/*
Only the informational column is sticky on desktop.
This does NOT affect the global Header architecture.
*/



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

.bl-estimate__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1rem;

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

    font-size:
        0.73rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-estimate__eyebrow svg {

    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-estimate__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

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

    transform:
        scaleX(0);

    transform-origin:
        left;
}



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

.bl-estimate__title {

    max-width:
        500px;

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

    font-size:
        clamp(
            2.9rem,
            4.5vw,
            4.9rem
        );

    line-height:
        0.97;

    letter-spacing:
        -0.06em;

    opacity:
        0;

    transform:
        translateY(24px);
}


.bl-estimate__title span {

    display:
        block;

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



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

.bl-estimate__intro {

    max-width:
        470px;

    margin-top:
        1.35rem;

    color:
        var(--bl-muted);

    font-size:
        0.96rem;

    line-height:
        1.75;

    opacity:
        0;

    transform:
        translateY(18px);
}



/* =========================================================
   CONTACT LIST
========================================================= */

.bl-estimate__contact-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.85rem;

    margin-top:
        2rem;
}


.bl-estimate__contact-item {

    display:
        flex;

    align-items:
        center;

    gap:
        0.85rem;

    width:
        max-content;

    max-width:
        100%;

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


.bl-estimate__contact-item:hover {

    transform:
        translateX(5px);
}


.bl-estimate__contact-icon {

    flex:
        0 0 auto;

    width:
        44px;

    height:
        44px;

    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%;

    transition:

        color
        380ms
        ease,

        background-color
        380ms
        ease,

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


.bl-estimate__contact-item:hover
.bl-estimate__contact-icon {

    color:
        var(--bl-surface);

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

    transform:
        rotate(-6deg);
}


.bl-estimate__contact-icon svg {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-estimate__contact-item > span:last-child {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.12rem;
}


.bl-estimate__contact-item small {

    color:
        var(--bl-muted);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-estimate__contact-item strong {

    overflow-wrap:
        anywhere;

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

    font-size:
        0.82rem;

    font-weight:
        800;
}



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

.bl-estimate__hours {

    max-width:
        430px;

    margin-top:
        2rem;

    padding:
        1.25rem;

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

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

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


.bl-estimate__hours-head {

    display:
        flex;

    align-items:
        center;

    gap:
        0.65rem;

    padding-bottom:
        0.9rem;

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

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

    font-size:
        0.76rem;

    font-weight:
        800;
}


.bl-estimate__hours-icon {

    width:
        32px;

    height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

    border-radius:
        50%;
}


.bl-estimate__hours-icon svg {

    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-estimate__hours-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding-top:
        0.85rem;

    color:
        var(--bl-muted);

    font-size:
        0.72rem;
}


.bl-estimate__hours-row strong {

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

    font-size:
        0.72rem;

    white-space:
        nowrap;
}



/* =========================================================
   FORM SHELL
========================================================= */

.bl-estimate__form-shell {

    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(
            1.5rem,
            3vw,
            2.8rem
        );

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

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

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

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

    backdrop-filter:
        blur(14px);

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

    opacity:
        0;

    transform:
        translateY(34px)
        scale(0.985);
}


.bl-estimate__form-shell::before {

    content:
        "";

    position:
        absolute;

    right:
        -13%;

    top:
        -24%;

    width:
        310px;

    aspect-ratio:
        1;

    border-radius:
        50%;

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

    opacity:
        0.62;

    pointer-events:
        none;
}



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

.bl-estimate__form-heading {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        1.5rem;
}


.bl-estimate__form-kicker {

    display:
        block;

    margin-bottom:
        0.35rem;

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

    font-size:
        0.65rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.bl-estimate__form-heading h3 {

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

    font-size:
        clamp(
            1.65rem,
            2.5vw,
            2.3rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.045em;
}


.bl-estimate__form-mark {

    flex:
        0 0 auto;

    width:
        48px;

    height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

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

    border-radius:
        50%;
}


.bl-estimate__form-mark svg {

    width:
        24px;

    height:
        24px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-estimate__form-description {

    position:
        relative;

    z-index:
        2;

    margin-top:
        0.65rem;

    color:
        var(--bl-muted);

    font-size:
        0.7rem;
}


.bl-estimate__form-description span {

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

    font-weight:
        800;
}



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

.bl-estimate__status {

    position:
        relative;

    z-index:
        3;

    margin-top:
        1.4rem;

    padding:
        0.9rem
        1rem;

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

    font-size:
        0.78rem;

    font-weight:
        600;

    line-height:
        1.5;
}


.bl-estimate__status[hidden] {

    display:
        none;
}


.bl-estimate__status.is-success {

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

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

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


.bl-estimate__status.is-error {

    color:
        #7a3024;

    background:
        #f9ebe6;

    border:
        1px solid
        rgba(
            173,
            81,
            54,
            0.18
        );
}



/* =========================================================
   FORM
========================================================= */

.bl-estimate-form {

    position:
        relative;

    z-index:
        2;

    margin-top:
        2rem;
}


.bl-estimate-form__grid {

    display:
        grid;

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

    gap:
        1.3rem;
}



/* =========================================================
   FIELD
========================================================= */

.bl-field {

    min-width:
        0;
}


.bl-field label,
.bl-contact-method legend {

    display:
        inline-block;

    margin-bottom:
        0.5rem;

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

    font-size:
        0.72rem;

    font-weight:
        800;
}


.bl-field label > span:not(.bl-field__optional) {

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


.bl-field__optional {

    margin-left:
        0.35rem;

    color:
        var(--bl-muted);

    font-size:
        0.58rem;

    font-weight:
        600;
}



/* =========================================================
   FIELD CONTROL
========================================================= */

.bl-field__control {

    position:
        relative;

    min-width:
        0;
}


.bl-field__icon {

    position:
        absolute;

    z-index:
        2;

    left:
        1rem;

    top:
        50%;

    width:
        19px;

    height:
        19px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

    transform:
        translateY(-50%);

    pointer-events:
        none;

    transition:
        color
        300ms
        ease;
}


.bl-field__icon svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.55;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* =========================================================
   INPUTS
========================================================= */

.bl-field input,
.bl-field select,
.bl-field textarea {

    width:
        100%;

    color:
        var(--bl-text);

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

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

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

    outline:
        none;

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

    font-size:
        0.88rem;

    transition:

        border-color
        300ms
        ease,

        background-color
        300ms
        ease,

        box-shadow
        300ms
        ease;
}


.bl-field input,
.bl-field select {

    min-height:
        54px;

    padding:
        0.8rem
        2.6rem
        0.8rem
        3rem;
}


.bl-field select {

    appearance:
        none;

    -webkit-appearance:
        none;

    cursor:
        pointer;

    background-image:

        linear-gradient(
            45deg,
            transparent 50%,
            var(--bl-forest-700) 50%
        ),

        linear-gradient(
            135deg,
            var(--bl-forest-700) 50%,
            transparent 50%
        );

    background-position:

        calc(100% - 18px)
        calc(50% - 2px),

        calc(100% - 13px)
        calc(50% - 2px);

    background-size:
        5px 5px,
        5px 5px;

    background-repeat:
        no-repeat;
}


.bl-field textarea {

    min-height:
        145px;

    padding:
        1rem;

    resize:
        vertical;

    line-height:
        1.6;
}


.bl-field input::placeholder,
.bl-field textarea::placeholder {

    color:
        #8a938d;
}



/* =========================================================
   FOCUS
========================================================= */

.bl-field input:focus,
.bl-field select:focus,
.bl-field textarea:focus {

    background:
        var(--bl-surface);

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

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


.bl-field__control:focus-within
.bl-field__icon {

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



/* =========================================================
   VALID INDICATOR
========================================================= */

.bl-field__valid {

    position:
        absolute;

    z-index:
        3;

    right:
        0.9rem;

    top:
        50%;

    width:
        20px;

    height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bl-surface);

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

    border-radius:
        50%;

    font-size:
        0.62rem;

    font-weight:
        800;

    opacity:
        0;

    transform:
        translateY(-50%)
        scale(0.7);

    transition:

        opacity
        250ms
        ease,

        transform
        300ms
        var(--bl-ease-standard);

    pointer-events:
        none;
}


.bl-field.is-valid
.bl-field__valid {

    opacity:
        1;

    transform:
        translateY(-50%)
        scale(1);
}



/* =========================================================
   INVALID
========================================================= */

.bl-field.is-invalid input,
.bl-field.is-invalid select,
.bl-field.is-invalid textarea {

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

    box-shadow:
        0 0 0 3px
        rgba(
            var(--bl-clay-rgb),
            0.08
        );
}


.bl-field__error {

    display:
        block;

    min-height:
        1rem;

    margin-top:
        0.35rem;

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

    font-size:
        0.62rem;

    font-weight:
        600;

    line-height:
        1.4;
}



/* =========================================================
   MESSAGE
========================================================= */

.bl-field--message {

    margin-top:
        1.35rem;
}


.bl-field__label-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;
}


.bl-field__counter {

    color:
        var(--bl-muted);

    font-size:
        0.62rem;

    font-variant-numeric:
        tabular-nums;
}


.bl-field__meta {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-top:
        0.35rem;
}


.bl-field__meta > small:first-child {

    color:
        var(--bl-muted);

    font-size:
        0.61rem;
}



/* =========================================================
   CONTACT METHOD
========================================================= */

.bl-contact-method {

    margin:
        1.4rem
        0
        0;

    padding:
        0;

    border:
        0;
}


.bl-contact-method__options {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.7rem;
}


.bl-contact-method__option {

    position:
        relative;

    margin:
        0;

    cursor:
        pointer;
}


.bl-contact-method__option input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    clip:
        rect(0 0 0 0);

    clip-path:
        inset(50%);

    white-space:
        nowrap;
}


.bl-contact-method__surface {

    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    padding:
        0.65rem
        1rem;

    color:
        var(--bl-muted);

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

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

    border-radius:
        999px;

    font-size:
        0.75rem;

    font-weight:
        700;

    transition:

        color
        300ms
        ease,

        background-color
        300ms
        ease,

        border-color
        300ms
        ease,

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


.bl-contact-method__option:hover
.bl-contact-method__surface {

    transform:
        translateY(-2px);
}


.bl-contact-method__option input:checked
+
.bl-contact-method__surface {

    color:
        var(--bl-surface);

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

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


.bl-contact-method__option input:focus-visible
+
.bl-contact-method__surface {

    outline:
        3px solid
        rgba(
            var(--bl-clay-rgb),
            0.25
        );

    outline-offset:
        3px;
}


.bl-contact-method__icon {

    width:
        20px;

    height:
        20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}


.bl-contact-method__icon svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



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

.bl-estimate-form__footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-top:
        1.7rem;

    padding-top:
        1.5rem;

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


.bl-estimate-form__footer p {

    max-width:
        340px;

    color:
        var(--bl-muted);

    font-size:
        0.65rem;

    line-height:
        1.55;
}



/* =========================================================
   SUBMIT
========================================================= */

.bl-estimate-form__submit {

    position:
        relative;

    flex:
        0 0 auto;

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.7rem;

    padding:
        0.8rem
        1.4rem;

    overflow:
        hidden;

    color:
        var(--bl-surface);

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

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

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

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

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

    font-size:
        0.84rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:

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

        box-shadow
        420ms
        ease;
}


.bl-estimate-form__submit::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-estimate-form__submit span,
.bl-estimate-form__submit svg {

    position:
        relative;

    z-index:
        2;
}


.bl-estimate-form__submit svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


.bl-estimate-form__submit:hover {

    transform:
        translateY(-3px);

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


.bl-estimate-form__submit:hover::before {

    transform:
        translateY(-46%);
}


.bl-estimate-form__submit:hover svg {

    transform:
        translateX(4px);
}



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

.bl-estimate.is-visible
.bl-estimate__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease,

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


.bl-estimate.is-visible
.bl-estimate__eyebrow i {

    transform:
        scaleX(1);

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


.bl-estimate.is-visible
.bl-estimate__title {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        80ms,

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


.bl-estimate.is-visible
.bl-estimate__intro {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        180ms,

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


.bl-estimate.is-visible
.bl-estimate__form-shell {

    opacity:
        1;

    transform:
        translateY(0)
        scale(1);

    transition:

        opacity
        780ms
        ease
        170ms,

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



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

html.bl-reduced-motion
.bl-estimate__eyebrow,

html.bl-reduced-motion
.bl-estimate__title,

html.bl-reduced-motion
.bl-estimate__intro,

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

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-estimate__eyebrow i {

    transform:
        none;
}



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

@media (min-width: 1200px) {

    .bl-estimate__inner {

        grid-template-columns:
            minmax(300px, 0.72fr)
            minmax(620px, 1.28fr);
    }

}



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

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

    .bl-estimate {

        padding:
            5.5rem 0;
    }


    .bl-estimate__inner {

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

        gap:
            3rem;
    }


    .bl-estimate__aside {

        position:
            static;
    }


    .bl-estimate__title {

        font-size:
            clamp(
                2.7rem,
                5.7vw,
                4rem
            );
    }


    .bl-estimate__form-shell {

        padding:
            1.7rem;
    }


    .bl-estimate-form__grid {

        gap:
            1rem;
    }


    .bl-estimate-form__footer {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}



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

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

    .bl-estimate {

        padding:
            4.8rem 0;
    }


    .bl-estimate__inner {

        grid-template-columns:
            1fr;

        gap:
            2.6rem;
    }


    .bl-estimate__aside {

        position:
            static;
    }


    .bl-estimate__title {

        max-width:
            500px;

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


    .bl-estimate__intro {

        max-width:
            540px;

        font-size:
            0.88rem;
    }


    .bl-estimate__hours {

        max-width:
            540px;
    }


    .bl-estimate-form__grid {

        grid-template-columns:
            1fr 1fr;

        gap:
            1rem;
    }


    .bl-estimate__form-shell {

        padding:
            1.5rem;
    }


    .bl-estimate-form__footer {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }

}



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

@media (max-width: 480px) {

    .bl-estimate {

        padding:
            4.2rem 0;
    }


    .bl-estimate__inner {

        grid-template-columns:
            1fr;

        gap:
            2.3rem;
    }


    .bl-estimate__aside {

        position:
            static;
    }


    .bl-estimate__eyebrow {

        font-size:
            0.63rem;
    }


    .bl-estimate__eyebrow i {

        width:
            28px;
    }


    .bl-estimate__title {

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


    .bl-estimate__intro {

        margin-top:
            1rem;

        font-size:
            0.83rem;
    }


    .bl-estimate__contact-list {

        margin-top:
            1.5rem;
    }


    .bl-estimate__contact-item strong {

        font-size:
            0.74rem;
    }


    .bl-estimate__hours {

        margin-top:
            1.5rem;

        padding:
            1rem;
    }


    .bl-estimate__hours-row {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.15rem;
    }


    .bl-estimate__form-shell {

        padding:
            1.15rem;

        border-radius:
            18px;
    }


    .bl-estimate__form-mark {

        width:
            42px;

        height:
            42px;
    }


    .bl-estimate__form-heading h3 {

        font-size:
            1.55rem;
    }


    .bl-estimate-form {

        margin-top:
            1.5rem;
    }


    .bl-estimate-form__grid {

        grid-template-columns:
            1fr;

        gap:
            0.95rem;
    }


    /*
    Important for iOS:
    form controls remain at least 16px,
    preventing automatic viewport zoom.
    */

    .bl-field input,
    .bl-field select,
    .bl-field textarea {

        font-size:
            16px;
    }


    .bl-field input,
    .bl-field select {

        min-height:
            52px;
    }


    .bl-field textarea {

        min-height:
            135px;
    }


    .bl-field__meta {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0;
    }


    .bl-contact-method__options {

        display:
            grid;

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


    .bl-contact-method__surface {

        width:
            100%;

        justify-content:
            center;
    }


    .bl-estimate-form__footer {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-estimate-form__submit {

        width:
            100%;

        min-height:
            50px;
    }

}



































/* =========================================================
   05. WHAT HAPPENS NEXT
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-process {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

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

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



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

.bl-process::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    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 12% 19%,
            rgba(
                var(--bl-sage-rgb),
                0.17
            ),
            transparent
            28rem
        ),

        radial-gradient(
            circle at 89% 83%,
            rgba(
                var(--bl-clay-rgb),
                0.045
            ),
            transparent
            25rem
        );

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



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

.bl-process__topography {

    position:
        absolute;

    z-index:
        -9;

    top:
        0;

    left:
        -5%;

    width:
        min(
            70vw,
            1100px
        );

    height:
        100%;

    fill:
        none;

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

    stroke-width:
        1.1;

    pointer-events:
        none;
}



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

.bl-process__terrain {

    position:
        absolute;

    z-index:
        -8;

    right:
        -19%;

    bottom:
        -37%;

    width:
        min(
            54vw,
            800px
        );

    aspect-ratio:
        1.2;

    border-radius:
        67% 33% 0 0 /
        74% 60% 0 0;

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

    opacity:
        0.73;

    transform:
        rotate(-8deg);

    pointer-events:
        none;
}



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

.bl-process__inner {

    position:
        relative;

    z-index:
        2;
}



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

.bl-process__header {

    max-width:
        800px;

    margin:
        0 auto;

    text-align:
        center;
}



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

.bl-process__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1rem;

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

    font-size:
        0.73rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-process__eyebrow svg {

    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-process__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

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

    transform:
        scaleX(0);

    transform-origin:
        left center;
}



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

.bl-process__title {

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

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

    line-height:
        0.97;

    letter-spacing:
        -0.06em;

    opacity:
        0;

    transform:
        translateY(25px);
}


.bl-process__title span {

    display:
        block;

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



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

.bl-process__lead {

    max-width:
        620px;

    margin:
        1.3rem auto 0;

    color:
        var(--bl-muted);

    font-size:
        0.96rem;

    line-height:
        1.75;

    opacity:
        0;

    transform:
        translateY(18px);
}



/* =========================================================
   JOURNEY
========================================================= */

.bl-process__journey {

    position:
        relative;

    display:
        grid;

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

    gap:
        clamp(
            2rem,
            4vw,
            4.5rem
        );

    margin-top:
        clamp(
            4rem,
            7vw,
            6.5rem
        );

    padding-top:
        2rem;
}



/* =========================================================
   ROUTES
========================================================= */

.bl-process__route {

    position:
        absolute;

    pointer-events:
        none;

    overflow:
        visible;
}


.bl-process__route--desktop {

    z-index:
        0;

    top:
        -1.7rem;

    left:
        4%;

    width:
        92%;

    height:
        160px;
}


.bl-process__route--mobile {

    display:
        none;
}



/* =========================================================
   ROUTE SHADOW
========================================================= */

.bl-process__route-shadow {

    fill:
        none;

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

    stroke-width:
        9;

    stroke-linecap:
        round;
}



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

.bl-process__route-line {

    fill:
        none;

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

    stroke-width:
        2.2;

    stroke-linecap:
        round;

    stroke-dasharray:
        1500;

    stroke-dashoffset:
        1500;

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


.bl-process.is-visible
.bl-process__route-line {

    stroke-dashoffset:
        0;
}



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

.bl-process-step {

    position:
        relative;

    z-index:
        2;

    text-align:
        center;

    opacity:
        0;

    transform:
        translateY(30px);

    transition:

        opacity
        680ms
        ease,

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


.bl-process.is-visible
.bl-process-step {

    opacity:
        1;

    transform:
        translateY(0);

    transition-delay:
        calc(
            470ms
            +
            (
                var(--bl-process-index)
                *
                150ms
            )
        );
}



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

.bl-process-step__marker {

    position:
        relative;

    width:
        94px;

    height:
        94px;

    margin:
        0 auto 1.5rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}



/* =========================================================
   OUTER ORBIT
========================================================= */

.bl-process-step__marker::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

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

    border-radius:
        49% 51% 46% 54% /
        57% 43% 57% 43%;

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

    transform:
        rotate(
            calc(
                -5deg
                +
                (
                    var(--bl-process-index)
                    *
                    5deg
                )
            )
        );

    transition:

        border-color
        420ms
        ease,

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


.bl-process-step:hover
.bl-process-step__marker::before {

    border-color:
        rgba(
            var(--bl-clay-rgb),
            0.3
        );

    transform:
        rotate(8deg)
        scale(1.04);
}



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

.bl-process-step__icon {

    position:
        relative;

    z-index:
        2;

    width:
        64px;

    height:
        64px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

    border-radius:
        50%;

    box-shadow:
        0 10px 25px
        rgba(
            var(--bl-forest-950-rgb),
            0.06
        );

    transition:

        color
        420ms
        ease,

        background-color
        420ms
        ease,

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


.bl-process-step:hover
.bl-process-step__icon {

    color:
        var(--bl-surface);

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

    transform:
        translateY(-4px)
        rotate(-5deg);
}


.bl-process-step__icon svg {

    width:
        25px;

    height:
        25px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



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

.bl-process-step__number {

    position:
        absolute;

    z-index:
        4;

    right:
        -5px;

    top:
        -7px;

    min-width:
        32px;

    height:
        25px;

    padding:
        0 0.45rem;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--bl-surface);

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

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

    border-radius:
        999px;

    font-size:
        0.57rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}



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

.bl-process-step__copy {

    max-width:
        360px;

    margin:
        0 auto;
}


.bl-process-step__label {

    display:
        block;

    margin-bottom:
        0.4rem;

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

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.bl-process-step h3 {

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

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

    line-height:
        1.1;

    letter-spacing:
        -0.04em;
}


.bl-process-step p {

    max-width:
        330px;

    margin:
        0.75rem auto 0;

    color:
        var(--bl-muted);

    font-size:
        0.82rem;

    line-height:
        1.68;
}



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

.bl-process__footer {

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        auto;

    align-items:
        center;

    gap:
        1.2rem;

    margin-top:
        clamp(
            3rem,
            6vw,
            5rem
        );
}


.bl-process__footer-line {

    height:
        1px;

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


.bl-process__footer p {

    color:
        var(--bl-muted);

    font-size:
        0.78rem;
}


.bl-process__footer a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

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

    font-size:
        0.8rem;

    font-weight:
        800;
}


.bl-process__footer a svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


.bl-process__footer a:hover svg {

    transform:
        translateX(5px);
}



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

.bl-process.is-visible
.bl-process__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease,

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


.bl-process.is-visible
.bl-process__eyebrow i {

    transform:
        scaleX(1);

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


.bl-process.is-visible
.bl-process__title {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        80ms,

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


.bl-process.is-visible
.bl-process__lead {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        180ms,

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



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

html.bl-reduced-motion
.bl-process__eyebrow,

html.bl-reduced-motion
.bl-process__title,

html.bl-reduced-motion
.bl-process__lead,

html.bl-reduced-motion
.bl-process-step {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-process__eyebrow i {

    transform:
        none;
}


html.bl-reduced-motion
.bl-process__route-line {

    stroke-dashoffset:
        0;
}



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

@media (min-width: 1200px) {

    .bl-process__journey {

        min-height:
            330px;
    }


    .bl-process-step:nth-of-type(3) {

        transform:
            translateY(20px);

    }


    .bl-process.is-visible
    .bl-process-step:nth-of-type(3) {

        transform:
            translateY(-10px);
    }

}



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

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

    .bl-process {

        padding:
            5.5rem 0;
    }


    .bl-process__title {

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


    .bl-process__journey {

        grid-template-columns:
            1fr;

        gap:
            0;

        max-width:
            760px;

        margin:
            3.8rem auto 0;

        padding:
            0;
    }


    .bl-process__route--desktop {

        display:
            none;
    }


    .bl-process__route--mobile {

        display:
            block;

        z-index:
            0;

        left:
            25px;

        top:
            15px;

        width:
            55px;

        height:
            calc(100% - 30px);
    }


    .bl-process-step {

        display:
            grid;

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

        align-items:
            center;

        gap:
            1.4rem;

        min-height:
            190px;

        padding:
            1rem 0;

        text-align:
            left;
    }


    .bl-process-step__marker {

        margin:
            0;
    }


    .bl-process-step__copy {

        max-width:
            560px;

        margin:
            0;
    }


    .bl-process-step p {

        max-width:
            520px;

        margin:
            0.65rem 0 0;
    }

}



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

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

    .bl-process {

        padding:
            4.8rem 0;
    }


    .bl-process__header {

        text-align:
            left;
    }


    .bl-process__eyebrow {

        justify-content:
            flex-start;
    }


    .bl-process__title {

        max-width:
            520px;

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


    .bl-process__lead {

        max-width:
            520px;

        margin-left:
            0;

        font-size:
            0.88rem;
    }


    .bl-process__journey {

        grid-template-columns:
            1fr;

        gap:
            0;

        margin-top:
            3rem;

        padding:
            0;
    }


    .bl-process__route--desktop {

        display:
            none;
    }


    .bl-process__route--mobile {

        display:
            block;

        z-index:
            0;

        left:
            20px;

        top:
            20px;

        width:
            48px;

        height:
            calc(100% - 40px);
    }


    .bl-process-step {

        display:
            grid;

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

        align-items:
            center;

        gap:
            1.1rem;

        min-height:
            175px;

        padding:
            0.8rem 0;

        text-align:
            left;
    }


    .bl-process-step__marker {

        width:
            82px;

        height:
            82px;

        margin:
            0;
    }


    .bl-process-step__icon {

        width:
            56px;

        height:
            56px;
    }


    .bl-process-step__copy {

        margin:
            0;
    }


    .bl-process-step p {

        margin:
            0.55rem 0 0;

        font-size:
            0.78rem;
    }


    .bl-process__footer {

        grid-template-columns:
            1fr
            auto;
    }


    .bl-process__footer-line {

        grid-column:
            1 / -1;
    }

}



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

@media (max-width: 480px) {

    .bl-process {

        padding:
            4.2rem 0;
    }


    .bl-process__header {

        text-align:
            left;
    }


    .bl-process__eyebrow {

        justify-content:
            flex-start;

        font-size:
            0.63rem;
    }


    .bl-process__eyebrow i {

        width:
            28px;
    }


    .bl-process__title {

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


    .bl-process__lead {

        margin:
            1rem 0 0;

        font-size:
            0.83rem;
    }


    .bl-process__journey {

        grid-template-columns:
            1fr;

        gap:
            0;

        margin-top:
            2.7rem;

        padding:
            0;
    }


    .bl-process__route--desktop {

        display:
            none;
    }


    .bl-process__route--mobile {

        display:
            block;

        left:
            15px;

        top:
            18px;

        width:
            42px;

        height:
            calc(100% - 36px);
    }


    .bl-process-step {

        display:
            grid;

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

        align-items:
            center;

        gap:
            0.9rem;

        min-height:
            165px;

        padding:
            0.7rem 0;

        text-align:
            left;
    }


    .bl-process-step__marker {

        width:
            70px;

        height:
            70px;

        margin:
            0;
    }


    .bl-process-step__icon {

        width:
            48px;

        height:
            48px;
    }


    .bl-process-step__icon svg {

        width:
            21px;

        height:
            21px;
    }


    .bl-process-step__number {

        right:
            -2px;

        top:
            -5px;

        min-width:
            28px;

        height:
            23px;

        font-size:
            0.52rem;
    }


    .bl-process-step__copy {

        margin:
            0;
    }


    .bl-process-step__label {

        font-size:
            0.56rem;
    }


    .bl-process-step h3 {

        font-size:
            1.25rem;
    }


    .bl-process-step p {

        margin:
            0.45rem 0 0;

        font-size:
            0.74rem;

        line-height:
            1.58;
    }


    .bl-process__footer {

        grid-template-columns:
            1fr;

        gap:
            0.7rem;

        margin-top:
            2.5rem;
    }


    .bl-process__footer p {

        font-size:
            0.72rem;
    }

}







































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


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

.bl-faq {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

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

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



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

.bl-faq::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    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 92% 15%,
            rgba(
                var(--bl-sage-rgb),
                0.17
            ),
            transparent
            28rem
        ),

        radial-gradient(
            circle at 7% 84%,
            rgba(
                var(--bl-clay-rgb),
                0.05
            ),
            transparent
            25rem
        );

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



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

.bl-faq__topography {

    position:
        absolute;

    z-index:
        -9;

    top:
        0;

    right:
        -7%;

    width:
        min(
            68vw,
            1080px
        );

    height:
        100%;

    fill:
        none;

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

    stroke-width:
        1.1;

    pointer-events:
        none;
}



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

.bl-faq__terrain {

    position:
        absolute;

    z-index:
        -8;

    left:
        -20%;

    bottom:
        -38%;

    width:
        min(
            56vw,
            820px
        );

    aspect-ratio:
        1.25;

    border-radius:
        67% 33% 0 0 /
        73% 62% 0 0;

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

    opacity:
        0.72;

    transform:
        rotate(8deg);

    pointer-events:
        none;
}



/* =========================================================
   LARGE QUESTION MARK
========================================================= */

.bl-faq__question-mark {

    position:
        absolute;

    z-index:
        -6;

    right:
        3%;

    top:
        10%;

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

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

    font-size:
        clamp(
            15rem,
            26vw,
            28rem
        );

    font-weight:
        700;

    line-height:
        0.8;

    pointer-events:
        none;

    opacity:
        0;

    transform:
        translateY(50px)
        rotate(7deg);

    transition:

        opacity
        900ms
        ease,

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


.bl-faq.is-visible
.bl-faq__question-mark {

    opacity:
        1;

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



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

.bl-faq__botanical {

    position:
        absolute;

    z-index:
        -5;

    left:
        -28px;

    bottom:
        -35px;

    width:
        clamp(
            110px,
            14vw,
            205px
        );

    height:
        auto;

    fill:
        none;

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

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}



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

.bl-faq__inner {

    position:
        relative;

    z-index:
        2;
}



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

.bl-faq__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, 0.8fr);

    align-items:
        end;

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

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



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

.bl-faq__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1rem;

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

    font-size:
        0.73rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-faq__eyebrow svg {

    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-faq__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

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

    transform:
        scaleX(0);

    transform-origin:
        left center;
}



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

.bl-faq__title {

    max-width:
        720px;

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

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

    line-height:
        0.97;

    letter-spacing:
        -0.06em;

    opacity:
        0;

    transform:
        translateY(25px);
}


.bl-faq__title span {

    display:
        block;

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



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

.bl-faq__lead {

    max-width:
        440px;

    color:
        var(--bl-muted);

    font-size:
        0.96rem;

    line-height:
        1.75;

    opacity:
        0;

    transform:
        translateY(18px);
}



/* =========================================================
   FAQ LIST
========================================================= */

.bl-faq__list {

    position:
        relative;

    max-width:
        1120px;

    margin:
        0 auto;

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



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

.bl-faq-item {

    position:
        relative;

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

    opacity:
        0;

    transform:
        translateY(20px);

    transition:

        opacity
        650ms
        ease,

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

        background-color
        350ms
        ease;
}


.bl-faq.is-visible
.bl-faq-item {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-faq.is-visible
.bl-faq-item:nth-child(1) {

    transition-delay:
        220ms;
}


.bl-faq.is-visible
.bl-faq-item:nth-child(2) {

    transition-delay:
        290ms;
}


.bl-faq.is-visible
.bl-faq-item:nth-child(3) {

    transition-delay:
        360ms;
}


.bl-faq.is-visible
.bl-faq-item:nth-child(4) {

    transition-delay:
        430ms;
}


.bl-faq.is-visible
.bl-faq-item:nth-child(5) {

    transition-delay:
        500ms;
}


.bl-faq-item.is-open {

    background:
        rgba(
            255,
            255,
            255,
            0.38
        );
}



/* =========================================================
   QUESTION BUTTON
========================================================= */

.bl-faq-item__button {

    width:
        100%;

    min-height:
        92px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        clamp(
            1rem,
            2.5vw,
            2rem
        );

    padding:
        1.2rem
        clamp(
            0.2rem,
            1vw,
            0.8rem
        );

    color:
        var(--bl-text);

    background:
        transparent;

    border:
        0;

    text-align:
        left;

    cursor:
        pointer;
}



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

.bl-faq-item__number {

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

    font-size:
        0.64rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;
}



/* =========================================================
   QUESTION
========================================================= */

.bl-faq-item__question {

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

    font-size:
        clamp(
            1.05rem,
            1.7vw,
            1.38rem
        );

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        -0.025em;

    transition:
        color
        300ms
        ease;
}


.bl-faq-item__button:hover
.bl-faq-item__question {

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


.bl-faq-item.is-open
.bl-faq-item__question {

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



/* =========================================================
   PLUS / MINUS CONTROL
========================================================= */

.bl-faq-item__toggle {

    position:
        relative;

    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    justify-self:
        end;

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

    border-radius:
        50%;

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

    transition:

        background-color
        350ms
        ease,

        border-color
        350ms
        ease,

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


.bl-faq-item__toggle span {

    position:
        absolute;

    width:
        14px;

    height:
        2px;

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

    border-radius:
        999px;

    transition:

        background-color
        350ms
        ease,

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


.bl-faq-item__toggle span:last-child {

    transform:
        rotate(90deg);
}


.bl-faq-item.is-open
.bl-faq-item__toggle {

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

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

    transform:
        rotate(4deg);
}


.bl-faq-item.is-open
.bl-faq-item__toggle span {

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


.bl-faq-item.is-open
.bl-faq-item__toggle span:last-child {

    transform:
        rotate(0);
}



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

.bl-faq-item__panel {

    overflow:
        hidden;

    max-height:
        0;

    opacity:
        0;

    transition:

        max-height
        620ms
        var(--bl-ease-organic),

        opacity
        360ms
        ease;
}


.bl-faq-item__panel[hidden] {

    display:
        none;
}


.bl-faq-item.is-open
.bl-faq-item__panel {

    opacity:
        1;
}



/* =========================================================
   ANSWER
========================================================= */

.bl-faq-item__answer {

    max-width:
        800px;

    margin-left:
        calc(
            48px
            +
            clamp(
                1rem,
                2.5vw,
                2rem
            )
        );

    padding:
        0
        3rem
        1.6rem
        0;
}


.bl-faq-item__answer p {

    color:
        var(--bl-muted);

    font-size:
        0.88rem;

    line-height:
        1.75;
}


.bl-faq-item__answer a {

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

    font-weight:
        800;

    text-decoration:
        underline;

    text-decoration-color:
        rgba(
            var(--bl-clay-rgb),
            0.5
        );

    text-underline-offset:
        3px;
}



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

.bl-faq__footer {

    max-width:
        1120px;

    margin:
        clamp(
            2.8rem,
            5vw,
            4rem
        )
        auto
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        1rem;

    padding:
        1.1rem
        1.25rem;

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

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

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



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

.bl-faq__footer-icon {

    width:
        44px;

    height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

    border-radius:
        50%;
}


.bl-faq__footer-icon svg {

    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



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

.bl-faq__footer-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.12rem;
}


.bl-faq__footer-copy span {

    color:
        var(--bl-muted);

    font-size:
        0.67rem;
}


.bl-faq__footer-copy strong {

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

    font-size:
        0.84rem;
}



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

.bl-faq__footer-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

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

    font-size:
        0.8rem;

    font-weight:
        800;
}


.bl-faq__footer-link svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


.bl-faq__footer-link:hover svg {

    transform:
        translateX(5px);
}



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

.bl-faq.is-visible
.bl-faq__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease,

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


.bl-faq.is-visible
.bl-faq__eyebrow i {

    transform:
        scaleX(1);

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


.bl-faq.is-visible
.bl-faq__title {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        80ms,

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


.bl-faq.is-visible
.bl-faq__lead {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        180ms,

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



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

html.bl-reduced-motion
.bl-faq__eyebrow,

html.bl-reduced-motion
.bl-faq__title,

html.bl-reduced-motion
.bl-faq__lead,

html.bl-reduced-motion
.bl-faq-item,

html.bl-reduced-motion
.bl-faq__question-mark {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-faq__eyebrow i {

    transform:
        none;
}


html.bl-reduced-motion
.bl-faq-item__panel {

    transition:
        none;
}



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

@media (min-width: 1200px) {

    .bl-faq__list,
    .bl-faq__footer {

        width:
            88%;
    }

}



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

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

    .bl-faq {

        padding:
            5.5rem 0;
    }


    .bl-faq__header {

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

        gap:
            2.5rem;
    }


    .bl-faq__title {

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


    .bl-faq-item__button {

        min-height:
            88px;
    }

}



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

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

    .bl-faq {

        padding:
            4.8rem 0;
    }


    .bl-faq__header {

        grid-template-columns:
            1fr;

        gap:
            1.2rem;

        margin-bottom:
            2.5rem;
    }


    .bl-faq__title {

        max-width:
            540px;

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


    .bl-faq__lead {

        max-width:
            520px;

        font-size:
            0.88rem;
    }


    .bl-faq-item__button {

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

        gap:
            0.85rem;

        min-height:
            82px;

        padding:
            1rem 0;
    }


    .bl-faq-item__answer {

        margin-left:
            calc(
                36px
                +
                0.85rem
            );

        padding-right:
            1rem;
    }


    .bl-faq__question-mark {

        right:
            -9%;
    }

}



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

@media (max-width: 480px) {

    .bl-faq {

        padding:
            4.2rem 0;
    }


    .bl-faq__header {

        grid-template-columns:
            1fr;

        gap:
            1rem;

        margin-bottom:
            2.2rem;
    }


    .bl-faq__eyebrow {

        font-size:
            0.63rem;
    }


    .bl-faq__eyebrow i {

        width:
            28px;
    }


    .bl-faq__title {

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


    .bl-faq__lead {

        font-size:
            0.83rem;

        line-height:
            1.65;
    }


    .bl-faq-item__button {

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

        gap:
            0.65rem;

        min-height:
            76px;

        padding:
            0.9rem 0;
    }


    .bl-faq-item__number {

        font-size:
            0.56rem;
    }


    .bl-faq-item__question {

        font-size:
            0.94rem;

        line-height:
            1.35;
    }


    .bl-faq-item__toggle {

        width:
            36px;

        height:
            36px;
    }


    .bl-faq-item__toggle span {

        width:
            12px;
    }


    .bl-faq-item__answer {

        margin-left:
            calc(
                28px
                +
                0.65rem
            );

        padding:
            0
            0.5rem
            1.3rem
            0;
    }


    .bl-faq-item__answer p {

        font-size:
            0.78rem;

        line-height:
            1.65;
    }


    .bl-faq__footer {

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

        padding:
            1rem;
    }


    .bl-faq__footer-link {

        grid-column:
            2;

        justify-self:
            start;

        margin-top:
            0.2rem;
    }


    .bl-faq__question-mark {

        right:
            -25%;

        top:
            18%;

        font-size:
            14rem;
    }


    .bl-faq__botanical {

        left:
            -45px;

        width:
            100px;
    }

}