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


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

.bl-gallery-hero {

    --bl-gallery-scroll:
        0px;

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

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


    position:
        relative;

    isolation:
        isolate;

    width:
        100%;

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

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

    min-height:
        0;

    overflow:
        hidden;

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



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

.bl-gallery-hero__texture {

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    pointer-events:
        none;

    background-image:

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

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

        radial-gradient(
            circle at 52% 95%,
            rgba(
                var(--bl-clay-rgb),
                0.045
            ),
            transparent 26rem
        );

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



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

.bl-gallery-hero__topography {

    position:
        absolute;

    z-index:
        -8;

    top:
        -8%;

    left:
        -4%;

    width:
        min(
            52vw,
            780px
        );

    height:
        118%;

    fill:
        none;

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

    stroke-width:
        1.05;

    vector-effect:
        non-scaling-stroke;

    pointer-events:
        none;
}



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

.bl-gallery-hero__terrain {

    position:
        absolute;

    z-index:
        1;

    right:
        -13%;

    bottom:
        -28%;

    width:
        66%;

    height:
        58%;

    border-radius:
        64% 36% 0 0 /
        78% 65% 0 0;

    background:

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

        var(--bl-sage-300);

    background-size:
        14px 14px,
        auto;

    opacity:
        0;

    transform:
        translateY(70px)
        rotate(-4deg);

    pointer-events:
        none;
}



/* =========================================================
   CLAY MARK
========================================================= */

.bl-gallery-hero__clay-mark {

    position:
        absolute;

    z-index:
        7;

    left:
        47%;

    top:
        16%;

    width:
        54px;

    height:
        54px;

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

    border-radius:
        50%;

    opacity:
        0;

    transform:
        scale(0.6);

    pointer-events:
        none;
}


.bl-gallery-hero__clay-mark span {

    position:
        absolute;

    right:
        -6px;

    top:
        8px;

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

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



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

.bl-gallery-hero__botanical {

    position:
        absolute;

    z-index:
        6;

    right:
        -15px;

    bottom:
        -18px;

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

    fill:
        none;

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

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}



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

.bl-gallery-hero__inner {

    position:
        relative;

    z-index:
        10;

    height:
        100%;

    display:
        flex;

    align-items:
        center;
}



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

.bl-gallery-hero__content {

    width:
        min(
            46%,
            665px
        );

    padding-right:
        2rem;
}



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

.bl-gallery-hero__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1.05rem;

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

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-gallery-hero__eyebrow svg {

    width:
        23px;

    height:
        23px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.bl-gallery-hero__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

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

    transform:
        scaleX(0);

    transform-origin:
        left;
}



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

.bl-gallery-hero__title {

    max-width:
        670px;

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

    font-size:
        clamp(
            3.1rem,
            min(
                5.2vw,
                7.4svh
            ),
            5.45rem
        );

    font-weight:
        700;

    line-height:
        0.96;

    letter-spacing:
        -0.062em;
}


.bl-gallery-hero__title-line {

    display:
        block;

    overflow:
        hidden;

    padding-bottom:
        0.05em;
}


.bl-gallery-hero__title-line > span {

    display:
        block;

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

    transform-origin:
        left bottom;
}


.bl-gallery-hero__title-line:nth-child(3) {

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


.bl-gallery-hero__title-dot {

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



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

.bl-gallery-hero__description {

    max-width:
        560px;

    margin-top:
        1.15rem;

    color:
        var(--bl-muted);

    font-size:
        clamp(
            0.92rem,
            1vw,
            1.04rem
        );

    line-height:
        1.68;

    opacity:
        0;

    transform:
        translateY(18px);
}



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

.bl-gallery-hero__actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.85rem;

    margin-top:
        1.5rem;

    opacity:
        0;

    transform:
        translateY(18px);
}



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

.bl-gallery-hero__primary {

    position:
        relative;

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.65rem;

    padding:
        0.8rem
        1.35rem;

    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 13px 30px
        rgba(
            var(--bl-forest-950-rgb),
            0.16
        );

    font-size:
        0.87rem;

    font-weight:
        800;

    transition:

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

        box-shadow
        400ms
        ease;
}


.bl-gallery-hero__primary::before {

    content:
        "";

    position:
        absolute;

    left:
        -18%;

    bottom:
        -175%;

    width:
        140%;

    aspect-ratio:
        1;

    border-radius:
        50%;

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

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


.bl-gallery-hero__primary span,
.bl-gallery-hero__primary svg {

    position:
        relative;

    z-index:
        2;
}


.bl-gallery-hero__primary svg,
.bl-gallery-hero__secondary 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-gallery-hero__primary:hover {

    transform:
        translateY(-3px);

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


.bl-gallery-hero__primary:hover::before {

    transform:
        translateY(-47%);
}


.bl-gallery-hero__primary:hover svg {

    transform:
        translateY(4px);
}



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

.bl-gallery-hero__secondary {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.6rem;

    padding:
        0.8rem
        1.2rem;

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

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

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

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

    font-size:
        0.84rem;

    font-weight:
        700;

    transition:

        color
        350ms
        ease,

        background-color
        350ms
        ease,

        border-color
        350ms
        ease,

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


.bl-gallery-hero__secondary:hover {

    color:
        var(--bl-surface);

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

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

    transform:
        translateY(-3px);
}


.bl-gallery-hero__secondary:hover svg {

    transform:
        translateX(4px);
}



/* =========================================================
   CATEGORIES INDICATOR
========================================================= */

.bl-gallery-hero__categories {

    max-width:
        370px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        0.8rem;

    margin-top:
        1.55rem;

    opacity:
        0;

    transform:
        translateY(14px);
}


.bl-gallery-hero__categories-number {

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

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.bl-gallery-hero__categories-line {

    height:
        1px;

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


.bl-gallery-hero__categories-copy {

    color:
        var(--bl-muted);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}



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

.bl-gallery-hero__visual {

    position:
        absolute;

    z-index:
        3;

    top:
        0;

    right:
        0;

    width:
        55%;

    height:
        100%;

    pointer-events:
        none;

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



/* =========================================================
   COMMON PHOTO
========================================================= */

.bl-gallery-hero__photo {

    position:
        absolute;

    margin:
        0;

    opacity:
        0;

    pointer-events:
        none;
}


.bl-gallery-hero__photo-frame {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

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

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


.bl-gallery-hero__photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

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



/* =========================================================
   MAIN PHOTO
========================================================= */

.bl-gallery-hero__photo--main {

    z-index:
        2;

    top:
        7%;

    right:
        -4%;

    width:
        77%;

    height:
        83%;

    transform:
        translateX(70px)
        scale(0.97);
}


.bl-gallery-hero__photo--main
.bl-gallery-hero__photo-frame {

    border-radius:
        46% 0 0 30% /
        43% 0 0 56%;

    clip-path:
        inset(
            0 0 0 100%
            round
            46% 0 0 30%
        );
}


.bl-gallery-hero__photo--main img {

    width:
        106%;

    height:
        106%;

    transform:

        translateY(
            var(--bl-gallery-scroll)
        )

        scale(1.04);
}



/* =========================================================
   PHOTO SHADE
========================================================= */

.bl-gallery-hero__photo-shade {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

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



/* =========================================================
   MAIN CAPTION
========================================================= */

.bl-gallery-hero__photo--main figcaption {

    position:
        absolute;

    z-index:
        4;

    right:
        5%;

    bottom:
        5%;

    max-width:
        230px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        0.15rem;

    color:
        var(--bl-surface);

    text-align:
        right;
}


.bl-gallery-hero__photo--main figcaption span {

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

    font-size:
        0.62rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.bl-gallery-hero__photo--main figcaption strong {

    font-size:
        0.82rem;

    font-weight:
        700;
}



/* =========================================================
   CLEANUP SECONDARY
========================================================= */

.bl-gallery-hero__photo--cleanup {

    z-index:
        6;

    left:
        1%;

    top:
        10%;

    width:
        29%;

    height:
        29%;

    transform:
        translateY(-28px)
        rotate(-4deg)
        scale(0.9);
}


.bl-gallery-hero__photo--cleanup
.bl-gallery-hero__photo-frame {

    border:
        7px solid
        var(--bl-surface);

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


.bl-gallery-hero__photo--cleanup
figcaption {

    position:
        absolute;

    left:
        14px;

    bottom:
        13px;

    padding:
        0.32rem
        0.55rem;

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

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

    border-radius:
        999px;

    font-size:
        0.58rem;

    font-weight:
        800;

    backdrop-filter:
        blur(8px);

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



/* =========================================================
   GRASS SECONDARY
========================================================= */

.bl-gallery-hero__photo--grass {

    z-index:
        7;

    left:
        7%;

    bottom:
        8%;

    width:
        34%;

    height:
        31%;

    transform:
        translateY(36px)
        rotate(3deg)
        scale(0.9);
}


.bl-gallery-hero__photo--grass
.bl-gallery-hero__photo-frame {

    border:
        7px solid
        var(--bl-surface);

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


.bl-gallery-hero__photo--grass
figcaption {

    position:
        absolute;

    right:
        13px;

    bottom:
        12px;

    padding:
        0.32rem
        0.55rem;

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

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

    border-radius:
        999px;

    font-size:
        0.58rem;

    font-weight:
        800;

    backdrop-filter:
        blur(8px);

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



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

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

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease
        80ms,

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


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

    transform:
        scaleX(1);

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



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

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

    transform:
        translateY(0)
        rotate(0);

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


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

    transform:
        translateY(0)
        rotate(0);

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


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

    transform:
        translateY(0)
        rotate(0);

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



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

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

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        680ms
        ease
        420ms,

        transform
        840ms
        var(--bl-ease-organic)
        420ms;
}


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

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        680ms
        ease
        500ms,

        transform
        840ms
        var(--bl-ease-organic)
        500ms;
}


.bl-gallery-hero.is-ready
.bl-gallery-hero__categories {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease
        590ms,

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



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

.bl-gallery-hero.is-ready
.bl-gallery-hero__photo--main {

    opacity:
        1;

    transform:
        translateX(0)
        scale(1);

    transition:

        opacity
        750ms
        ease
        100ms,

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


.bl-gallery-hero.is-ready
.bl-gallery-hero__photo--main
.bl-gallery-hero__photo-frame {

    clip-path:
        inset(
            0 0 0 0
            round
            46% 0 0 30%
        );

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


.bl-gallery-hero.is-ready
.bl-gallery-hero__photo--cleanup {

    opacity:
        1;

    transform:
        translateY(0)
        rotate(-4deg)
        scale(1);

    transition:

        opacity
        700ms
        ease
        420ms,

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


.bl-gallery-hero.is-ready
.bl-gallery-hero__photo--grass {

    opacity:
        1;

    transform:
        translateY(0)
        rotate(3deg)
        scale(1);

    transition:

        opacity
        700ms
        ease
        510ms,

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



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

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

    opacity:
        1;

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

    transition:

        opacity
        800ms
        ease
        330ms,

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


.bl-gallery-hero.is-ready
.bl-gallery-hero__clay-mark {

    opacity:
        1;

    transform:
        scale(1);

    transition:

        opacity
        700ms
        ease
        560ms,

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



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

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

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

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

html.bl-reduced-motion
.bl-gallery-hero__categories,

html.bl-reduced-motion
.bl-gallery-hero__photo,

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

html.bl-reduced-motion
.bl-gallery-hero__clay-mark {

    opacity:
        1;

    transform:
        none;
}


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

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

    transform:
        none;
}


html.bl-reduced-motion
.bl-gallery-hero__photo--main
.bl-gallery-hero__photo-frame {

    clip-path:
        none;
}



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

@media (min-width: 1200px) {

    .bl-gallery-hero__visual {

        width:
            55%;
    }


    .bl-gallery-hero__content {

        width:
            min(
                46%,
                665px
            );
    }

}



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

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

    .bl-gallery-hero__content {

        width:
            51%;

        padding-right:
            1.4rem;
    }


    .bl-gallery-hero__title {

        font-size:
            clamp(
                2.8rem,
                6vw,
                4.35rem
            );
    }


    .bl-gallery-hero__description {

        max-width:
            450px;

        font-size:
            0.88rem;
    }


    .bl-gallery-hero__visual {

        width:
            51%;
    }


    .bl-gallery-hero__photo--main {

        width:
            83%;

        height:
            81%;
    }


    .bl-gallery-hero__photo--cleanup {

        left:
            -2%;

        width:
            34%;

        height:
            26%;
    }


    .bl-gallery-hero__photo--grass {

        left:
            2%;

        width:
            38%;

        height:
            27%;
    }


    .bl-gallery-hero__categories {

        max-width:
            300px;
    }

}



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

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

    .bl-gallery-hero__inner {

        align-items:
            flex-start;
    }


    .bl-gallery-hero__content {

        width:
            100%;

        max-width:
            540px;

        padding:
            2rem 0 0;
    }


    .bl-gallery-hero__eyebrow {

        margin-bottom:
            0.7rem;

        font-size:
            0.65rem;
    }


    .bl-gallery-hero__title {

        max-width:
            500px;

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


    .bl-gallery-hero__description {

        max-width:
            420px;

        margin-top:
            0.75rem;

        font-size:
            0.82rem;

        line-height:
            1.55;
    }


    .bl-gallery-hero__actions {

        margin-top:
            1rem;
    }


    .bl-gallery-hero__primary,
    .bl-gallery-hero__secondary {

        min-height:
            44px;

        padding:
            0.68rem
            0.95rem;

        font-size:
            0.76rem;
    }


    .bl-gallery-hero__categories {

        margin-top:
            0.9rem;
    }


    /* -----------------------------------------
       PHOTO COMPOSITION MOVES TO LOWER AREA
    ----------------------------------------- */

    .bl-gallery-hero__visual {

        top:
            auto;

        right:
            -3%;

        bottom:
            0;

        width:
            76%;

        height:
            40%;
    }


    .bl-gallery-hero__photo--main {

        top:
            0;

        right:
            -2%;

        width:
            78%;

        height:
            100%;
    }


    .bl-gallery-hero__photo--cleanup {

        left:
            1%;

        top:
            5%;

        width:
            34%;

        height:
            46%;
    }


    .bl-gallery-hero__photo--grass {

        left:
            5%;

        bottom:
            3%;

        width:
            38%;

        height:
            43%;
    }


    .bl-gallery-hero__photo--main
    .bl-gallery-hero__photo-frame {

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


    .bl-gallery-hero__photo--main
    figcaption {

        right:
            4%;

        bottom:
            4%;
    }


    .bl-gallery-hero__terrain {

        right:
            -30%;

        bottom:
            -17%;

        width:
            110%;

        height:
            35%;
    }


    .bl-gallery-hero__topography {

        width:
            91%;

        height:
            72%;
    }


    .bl-gallery-hero__clay-mark {

        left:
            auto;

        right:
            8%;

        top:
            46%;
    }


    .bl-gallery-hero__botanical {

        width:
            90px;
    }

}



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

@media (max-width: 480px) {

    .bl-gallery-hero__inner {

        align-items:
            flex-start;
    }


    .bl-gallery-hero__content {

        width:
            100%;

        padding:
            1.3rem 0 0;
    }


    .bl-gallery-hero__eyebrow {

        gap:
            0.45rem;

        margin-bottom:
            0.5rem;

        font-size:
            0.61rem;
    }


    .bl-gallery-hero__eyebrow svg {

        width:
            18px;

        height:
            18px;
    }


    .bl-gallery-hero__eyebrow i {

        width:
            27px;
    }


    .bl-gallery-hero__title {

        max-width:
            370px;

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


    .bl-gallery-hero__description {

        max-width:
            340px;

        margin-top:
            0.55rem;

        font-size:
            0.75rem;

        line-height:
            1.48;
    }


    .bl-gallery-hero__actions {

        gap:
            0.55rem;

        margin-top:
            0.75rem;
    }


    .bl-gallery-hero__primary,
    .bl-gallery-hero__secondary {

        min-height:
            41px;

        padding:
            0.59rem
            0.72rem;

        font-size:
            0.68rem;
    }


    /*
    Secondary information is reduced before
    compromising the one-screen contract.
    */

    .bl-gallery-hero__categories {

        display:
            none;
    }


    /* -----------------------------------------
       SIMPLIFIED PHOTO COMPOSITION
    ----------------------------------------- */

    .bl-gallery-hero__visual {

        top:
            auto;

        right:
            -7%;

        bottom:
            0;

        width:
            83%;

        height:
            35%;
    }


    .bl-gallery-hero__photo--main {

        top:
            0;

        right:
            0;

        width:
            81%;

        height:
            100%;
    }


    .bl-gallery-hero__photo--main
    .bl-gallery-hero__photo-frame {

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


    .bl-gallery-hero__photo--cleanup {

        left:
            1%;

        top:
            8%;

        width:
            38%;

        height:
            48%;
    }


    /*
    Third image is removed only on very small
    screens to preserve hierarchy and space.
    */

    .bl-gallery-hero__photo--grass {

        display:
            none;
    }


    .bl-gallery-hero__photo--cleanup
    .bl-gallery-hero__photo-frame {

        border-width:
            5px;
    }


    .bl-gallery-hero__photo--cleanup
    figcaption {

        display:
            none;
    }


    .bl-gallery-hero__photo--main
    figcaption span {

        display:
            none;
    }


    .bl-gallery-hero__photo--main
    figcaption strong {

        font-size:
            0.66rem;
    }


    .bl-gallery-hero__terrain {

        right:
            -45%;

        bottom:
            -16%;

        width:
            135%;

        height:
            31%;
    }


    .bl-gallery-hero__topography {

        width:
            108%;

        height:
            66%;
    }


    .bl-gallery-hero__clay-mark {

        display:
            none;
    }


    .bl-gallery-hero__botanical {

        right:
            -25px;

        width:
            75px;
    }

}




































/* =========================================================
   04. SERVICE NAVIGATION
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-gallery-nav {

    --bl-gallery-nav-progress:
        0%;

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        clamp(2.8rem, 5vw, 4.4rem)
        0;

    background:
        var(--bl-ivory);

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



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

.bl-gallery-nav::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    pointer-events:
        none;

    background-image:

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

        radial-gradient(
            circle at 91% 7%,
            rgba(
                var(--bl-sage-rgb),
                0.16
            ),
            transparent
            22rem
        ),

        radial-gradient(
            circle at 8% 93%,
            rgba(
                var(--bl-clay-rgb),
                0.045
            ),
            transparent
            19rem
        );

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



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

.bl-gallery-nav__topography {

    position:
        absolute;

    z-index:
        -8;

    right:
        -5%;

    top:
        0;

    width:
        min(
            70vw,
            1100px
        );

    height:
        100%;

    fill:
        none;

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

    stroke-width:
        1.1;

    pointer-events:
        none;
}



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

.bl-gallery-nav__terrain {

    position:
        absolute;

    z-index:
        -7;

    left:
        -10%;

    bottom:
        -62%;

    width:
        min(
            38vw,
            570px
        );

    aspect-ratio:
        1.4;

    border-radius:
        66% 34% 0 0 /
        78% 65% 0 0;

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

    opacity:
        0.76;

    transform:
        rotate(6deg);

    pointer-events:
        none;
}



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

.bl-gallery-nav__inner {

    position:
        relative;

    z-index:
        2;
}



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

.bl-gallery-nav__header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-bottom:
        1.8rem;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-gallery-nav__header > div {

    min-width:
        0;
}


.bl-gallery-nav__eyebrow {

    display:
        block;

    margin-bottom:
        0.3rem;

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

    font-size:
        0.67rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.bl-gallery-nav__header h2 {

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

    font-size:
        clamp(
            1.6rem,
            2.7vw,
            2.45rem
        );

    line-height:
        1.08;

    letter-spacing:
        -0.045em;
}


.bl-gallery-nav__header p {

    max-width:
        380px;

    color:
        var(--bl-muted);

    font-size:
        0.82rem;

    line-height:
        1.65;
}



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

.bl-gallery-nav__list {

    display:
        grid;

    min-width:
        0;

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

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



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

.bl-gallery-nav__item {

    position:
        relative;

    min-width:
        0;

    min-height:
        118px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        0.8rem;

    padding:
        1rem
        clamp(
            0.8rem,
            1.5vw,
            1.35rem
        );

    color:
        var(--bl-text);

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

    opacity:
        0;

    transform:
        translateY(18px);

    transition:

        color
        350ms
        ease,

        background-color
        350ms
        ease,

        opacity
        650ms
        ease,

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


.bl-gallery-nav__item:last-child {

    border-right:
        0;
}



/* =========================================================
   ACTIVE BACKGROUND
========================================================= */

.bl-gallery-nav__item::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

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

    transform:
        scaleY(0);

    transform-origin:
        bottom;

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


.bl-gallery-nav__item:hover::before,
.bl-gallery-nav__item.is-active::before {

    transform:
        scaleY(1);
}



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

.bl-gallery-nav__number {

    align-self:
        start;

    margin-top:
        0.15rem;

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

    font-size:
        0.61rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    transition:
        color
        350ms
        ease;
}


.bl-gallery-nav__item:hover
.bl-gallery-nav__number,

.bl-gallery-nav__item.is-active
.bl-gallery-nav__number {

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



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

.bl-gallery-nav__item-content {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    gap:
        0.3rem;
}


.bl-gallery-nav__item-content strong {

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

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

    font-weight:
        750;

    line-height:
        1.3;

    letter-spacing:
        -0.025em;

    transition:
        color
        350ms
        ease;
}


.bl-gallery-nav__item-content small {

    color:
        var(--bl-muted);

    font-size:
        0.61rem;

    font-weight:
        650;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    transition:
        color
        350ms
        ease;
}


.bl-gallery-nav__item:hover
.bl-gallery-nav__item-content strong,

.bl-gallery-nav__item.is-active
.bl-gallery-nav__item-content strong {

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


.bl-gallery-nav__item:hover
.bl-gallery-nav__item-content small,

.bl-gallery-nav__item.is-active
.bl-gallery-nav__item-content small {

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );
}



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

.bl-gallery-nav__arrow {

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

    font-size:
        1.05rem;

    transform:
        translate(
            0,
            0
        );

    transition:

        color
        350ms
        ease,

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


.bl-gallery-nav__item:hover
.bl-gallery-nav__arrow,

.bl-gallery-nav__item.is-active
.bl-gallery-nav__arrow {

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

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



/* =========================================================
   ACTIVE CLAY LINE
========================================================= */

.bl-gallery-nav__item::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -1px;

    height:
        3px;

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

    transform:
        scaleX(0);

    transform-origin:
        left;

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


.bl-gallery-nav__item.is-active::after {

    transform:
        scaleX(1);
}



/* =========================================================
   PROGRESS
========================================================= */

.bl-gallery-nav__progress {

    display:
        grid;

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

    align-items:
        center;

    gap:
        1rem;

    margin-top:
        1.35rem;

    opacity:
        0;

    transform:
        translateY(12px);
}


.bl-gallery-nav__progress-track {

    position:
        relative;

    display:
        block;

    height:
        2px;

    overflow:
        hidden;

    background:
        rgba(
            var(--bl-forest-900-rgb),
            0.09
        );
}


.bl-gallery-nav__progress-fill {

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        var(--bl-gallery-nav-progress);

    height:
        100%;

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

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


.bl-gallery-nav__progress-label {

    color:
        var(--bl-muted);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}



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

.bl-gallery-nav.is-visible
.bl-gallery-nav__header {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease,

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


.bl-gallery-nav.is-visible
.bl-gallery-nav__item {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-gallery-nav.is-visible
.bl-gallery-nav__item:nth-child(1) {

    transition-delay:
        110ms;
}


.bl-gallery-nav.is-visible
.bl-gallery-nav__item:nth-child(2) {

    transition-delay:
        170ms;
}


.bl-gallery-nav.is-visible
.bl-gallery-nav__item:nth-child(3) {

    transition-delay:
        230ms;
}


.bl-gallery-nav.is-visible
.bl-gallery-nav__item:nth-child(4) {

    transition-delay:
        290ms;
}


.bl-gallery-nav.is-visible
.bl-gallery-nav__item:nth-child(5) {

    transition-delay:
        350ms;
}


.bl-gallery-nav.is-visible
.bl-gallery-nav__progress {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease
        390ms,

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



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

html.bl-reduced-motion
.bl-gallery-nav__header,

html.bl-reduced-motion
.bl-gallery-nav__item,

html.bl-reduced-motion
.bl-gallery-nav__progress {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-gallery-nav__progress-fill {

    transition:
        none;
}



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

@media (min-width: 1200px) {

    .bl-gallery-nav__list {

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


    .bl-gallery-nav__item {

        min-height:
            122px;
    }

}



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

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

    .bl-gallery-nav {

        padding:
            3.2rem 0;
    }


    .bl-gallery-nav__header {

        align-items:
            flex-start;

        margin-bottom:
            1.5rem;
    }


    .bl-gallery-nav__list {

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


    .bl-gallery-nav__item {

        grid-column:
            span 2;

        min-height:
            105px;

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


    .bl-gallery-nav__item:nth-child(3) {

        border-right:
            0;
    }


    .bl-gallery-nav__item:nth-child(4),
    .bl-gallery-nav__item:nth-child(5) {

        grid-column:
            span 3;

        border-bottom:
            0;
    }


    .bl-gallery-nav__item:nth-child(5) {

        border-right:
            0;
    }

}



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

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

    .bl-gallery-nav {

        padding:
            2.8rem 0;
    }


    .bl-gallery-nav__header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.7rem;

        margin-bottom:
            1.4rem;
    }


    .bl-gallery-nav__header p {

        max-width:
            500px;

        font-size:
            0.78rem;
    }


    .bl-gallery-nav__list {

        display:
            flex;

        width:
            100%;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;

        overscroll-behavior-inline:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    .bl-gallery-nav__list::-webkit-scrollbar {

        display:
            none;
    }


    .bl-gallery-nav__item {

        flex:
            0 0 220px;

        min-height:
            105px;

        scroll-snap-align:
            start;
    }


    .bl-gallery-nav__progress {

        margin-top:
            1rem;
    }

}



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

@media (max-width: 480px) {

    .bl-gallery-nav {

        padding:
            2.5rem 0;
    }


    .bl-gallery-nav__header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.65rem;

        margin-bottom:
            1.2rem;
    }


    .bl-gallery-nav__eyebrow {

        font-size:
            0.63rem;
    }


    .bl-gallery-nav__header h2 {

        font-size:
            1.65rem;
    }


    .bl-gallery-nav__header p {

        max-width:
            340px;

        font-size:
            0.76rem;

        line-height:
            1.55;
    }


    .bl-gallery-nav__list {

        display:
            flex;

        width:
            100%;

        overflow-x:
            auto;

        overflow-y:
            hidden;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;

        overscroll-behavior-inline:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    .bl-gallery-nav__list::-webkit-scrollbar {

        display:
            none;
    }


    .bl-gallery-nav__item {

        flex:
            0 0 190px;

        min-height:
            96px;

        padding:
            0.85rem;

        scroll-snap-align:
            start;
    }


    .bl-gallery-nav__item-content strong {

        font-size:
            0.86rem;
    }


    .bl-gallery-nav__item-content small {

        font-size:
            0.59rem;
    }


    .bl-gallery-nav__progress {

        grid-template-columns:
            1fr;

        gap:
            0.6rem;

        margin-top:
            0.9rem;
    }


    .bl-gallery-nav__progress-label {

        font-size:
            0.59rem;
    }


    .bl-gallery-nav__terrain {

        width:
            75vw;
    }

}







































/* =========================================================
   05. GALLERY INTRO
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-gallery-intro {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

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

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



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

.bl-gallery-intro::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 10% 18%,
            rgba(
                var(--bl-sage-rgb),
                0.16
            ),
            transparent
            28rem
        ),

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

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



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

.bl-gallery-intro__topography {

    position:
        absolute;

    z-index:
        -9;

    left:
        -7%;

    top:
        0;

    width:
        min(
            70vw,
            1100px
        );

    height:
        100%;

    fill:
        none;

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

    stroke-width:
        1.1;

    pointer-events:
        none;
}



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

.bl-gallery-intro__terrain {

    position:
        absolute;

    z-index:
        -8;

    right:
        -20%;

    bottom:
        -43%;

    width:
        min(
            53vw,
            800px
        );

    aspect-ratio:
        1.22;

    border-radius:
        67% 33% 0 0 /
        76% 61% 0 0;

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

    opacity:
        0.76;

    transform:
        rotate(-8deg);

    pointer-events:
        none;
}



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

.bl-gallery-intro__botanical {

    position:
        absolute;

    z-index:
        -5;

    right:
        -22px;

    bottom:
        -28px;

    width:
        clamp(
            105px,
            13vw,
            190px
        );

    height:
        auto;

    fill:
        none;

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

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}



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

.bl-gallery-intro__inner {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.03fr)
        minmax(390px, 0.97fr);

    align-items:
        center;

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



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

.bl-gallery-intro__content {

    max-width:
        700px;
}



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

.bl-gallery-intro__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        1rem;

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

    font-size:
        0.72rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-gallery-intro__eyebrow-dot {

    width:
        8px;

    height:
        8px;

    flex:
        0 0 auto;

    border-radius:
        50%;

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

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


.bl-gallery-intro__eyebrow i {

    display:
        block;

    width:
        42px;

    height:
        2px;

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

    transform:
        scaleX(0);

    transform-origin:
        left;
}



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

.bl-gallery-intro__title {

    max-width:
        700px;

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

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

    line-height:
        0.97;

    letter-spacing:
        -0.06em;
}


.bl-gallery-intro__title > span {

    display:
        block;

    opacity:
        0;

    transform:
        translateY(27px);
}


.bl-gallery-intro__title > span:last-child {

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


.bl-gallery-intro__title-dot {

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



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

.bl-gallery-intro__lead {

    max-width:
        600px;

    margin-top:
        1.35rem;

    color:
        var(--bl-muted);

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

    line-height:
        1.75;

    opacity:
        0;

    transform:
        translateY(18px);
}



/* =========================================================
   SERVICE SUMMARY
========================================================= */

.bl-gallery-intro__services {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.65rem;

    margin-top:
        1.8rem;

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

    font-size:
        0.69rem;

    font-weight:
        700;

    opacity:
        0;

    transform:
        translateY(16px);
}


.bl-gallery-intro__services i {

    width:
        4px;

    height:
        4px;

    flex:
        0 0 auto;

    border-radius:
        50%;

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



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

.bl-gallery-intro__visual {

    position:
        relative;

    min-height:
        390px;

    opacity:
        0;

    transform:
        translateY(35px);
}



/* =========================================================
   LARGE NUMBERS
========================================================= */

.bl-gallery-intro__stat {

    position:
        absolute;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        0.85rem;
}


.bl-gallery-intro__stat--photos {

    left:
        4%;

    top:
        2%;
}


.bl-gallery-intro__stat--services {

    right:
        4%;

    bottom:
        18%;
}



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

.bl-gallery-intro__stat-number {

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

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

    font-weight:
        700;

    line-height:
        0.8;

    letter-spacing:
        -0.08em;
}


.bl-gallery-intro__stat--services
.bl-gallery-intro__stat-number {

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



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

.bl-gallery-intro__stat-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.05rem;

    padding-bottom:
        0.6rem;
}


.bl-gallery-intro__stat-copy span {

    color:
        var(--bl-muted);

    font-size:
        0.6rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.bl-gallery-intro__stat-copy strong {

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

    font-size:
        0.88rem;

    font-weight:
        800;
}



/* =========================================================
   ORGANIC ROUTE
========================================================= */

.bl-gallery-intro__route {

    position:
        absolute;

    left:
        4%;

    right:
        4%;

    top:
        33%;

    height:
        150px;
}


.bl-gallery-intro__route svg {

    width:
        100%;

    height:
        100%;

    overflow:
        visible;
}


.bl-gallery-intro__route-shadow {

    fill:
        none;

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

    stroke-width:
        9;

    stroke-linecap:
        round;
}


.bl-gallery-intro__route-line {

    fill:
        none;

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

    stroke-width:
        2.1;

    stroke-linecap:
        round;

    stroke-dasharray:
        700;

    stroke-dashoffset:
        700;

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


.bl-gallery-intro.is-visible
.bl-gallery-intro__route-line {

    stroke-dashoffset:
        0;
}



/* =========================================================
   ROUTE NODES
========================================================= */

.bl-gallery-intro__route-node {

    position:
        absolute;

    width:
        13px;

    height:
        13px;

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

    border-radius:
        50%;

    box-shadow:
        0 0 0 1px
        rgba(
            var(--bl-forest-900-rgb),
            0.08
        );

    opacity:
        0;

    transform:
        scale(0.5);

    transition:

        opacity
        500ms
        ease,

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


.bl-gallery-intro__route-node--one {

    left:
        4%;

    bottom:
        27%;

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


.bl-gallery-intro__route-node--two {

    right:
        1%;

    top:
        5%;

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


.bl-gallery-intro.is-visible
.bl-gallery-intro__route-node {

    opacity:
        1;

    transform:
        scale(1);
}


.bl-gallery-intro.is-visible
.bl-gallery-intro__route-node--one {

    transition-delay:
        450ms;
}


.bl-gallery-intro.is-visible
.bl-gallery-intro__route-node--two {

    transition-delay:
        1100ms;
}



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

.bl-gallery-intro__note {

    position:
        absolute;

    left:
        4%;

    bottom:
        0;

    max-width:
        280px;

    display:
        grid;

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

    align-items:
        start;

    gap:
        0.75rem;
}


.bl-gallery-intro__note-line {

    display:
        block;

    height:
        2px;

    margin-top:
        0.55rem;

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


.bl-gallery-intro__note p {

    color:
        var(--bl-muted);

    font-size:
        0.72rem;

    line-height:
        1.6;
}



/* =========================================================
   BOTTOM TRANSITION
========================================================= */

.bl-gallery-intro__bottom {

    position:
        absolute;

    z-index:
        3;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        26px;

    pointer-events:
        none;
}


.bl-gallery-intro__bottom span {

    position:
        absolute;

    left:
        50%;

    bottom:
        -31px;

    width:
        min(
            82vw,
            1180px
        );

    height:
        52px;

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

    border-radius:
        50%;

    transform:
        translateX(-50%);
}



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

.bl-gallery-intro.is-visible
.bl-gallery-intro__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease,

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


.bl-gallery-intro.is-visible
.bl-gallery-intro__eyebrow i {

    transform:
        scaleX(1);

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


.bl-gallery-intro.is-visible
.bl-gallery-intro__title > span:first-child {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        80ms,

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


.bl-gallery-intro.is-visible
.bl-gallery-intro__title > span:last-child {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        160ms,

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


.bl-gallery-intro.is-visible
.bl-gallery-intro__lead {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        680ms
        ease
        260ms,

        transform
        840ms
        var(--bl-ease-organic)
        260ms;
}


.bl-gallery-intro.is-visible
.bl-gallery-intro__services {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease
        350ms,

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


.bl-gallery-intro.is-visible
.bl-gallery-intro__visual {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        750ms
        ease
        190ms,

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



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

html.bl-reduced-motion
.bl-gallery-intro__eyebrow,

html.bl-reduced-motion
.bl-gallery-intro__title > span,

html.bl-reduced-motion
.bl-gallery-intro__lead,

html.bl-reduced-motion
.bl-gallery-intro__services,

html.bl-reduced-motion
.bl-gallery-intro__visual,

html.bl-reduced-motion
.bl-gallery-intro__route-node {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-gallery-intro__eyebrow i {

    transform:
        none;
}


html.bl-reduced-motion
.bl-gallery-intro__route-line {

    stroke-dashoffset:
        0;

    transition:
        none;
}



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

@media (min-width: 1200px) {

    .bl-gallery-intro__visual {

        min-height:
            410px;
    }

}



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

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

    .bl-gallery-intro {

        padding:
            5.5rem 0;
    }


    .bl-gallery-intro__inner {

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

        gap:
            3.5rem;
    }


    .bl-gallery-intro__title {

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


    .bl-gallery-intro__lead {

        font-size:
            0.9rem;
    }


    .bl-gallery-intro__visual {

        min-height:
            360px;
    }


    .bl-gallery-intro__stat-number {

        font-size:
            clamp(
                5rem,
                9vw,
                7.2rem
            );
    }

}



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

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

    .bl-gallery-intro {

        padding:
            4.8rem 0;
    }


    .bl-gallery-intro__inner {

        grid-template-columns:
            1fr;

        gap:
            3rem;
    }


    .bl-gallery-intro__title {

        max-width:
            560px;

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


    .bl-gallery-intro__lead {

        max-width:
            550px;

        font-size:
            0.87rem;
    }


    .bl-gallery-intro__services {

        max-width:
            560px;
    }


    .bl-gallery-intro__visual {

        width:
            min(
                100%,
                570px
            );

        min-height:
            330px;
    }


    .bl-gallery-intro__stat-number {

        font-size:
            clamp(
                5rem,
                16vw,
                7rem
            );
    }


    .bl-gallery-intro__stat--photos {

        left:
            0;
    }


    .bl-gallery-intro__stat--services {

        right:
            0;
    }


    .bl-gallery-intro__route {

        left:
            0;

        right:
            0;
    }


    .bl-gallery-intro__note {

        left:
            0;
    }

}



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

@media (max-width: 480px) {

    .bl-gallery-intro {

        padding:
            4.2rem 0;
    }


    .bl-gallery-intro__inner {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;
    }


    .bl-gallery-intro__eyebrow {

        font-size:
            0.64rem;
    }


    .bl-gallery-intro__eyebrow i {

        width:
            28px;
    }


    .bl-gallery-intro__title {

        max-width:
            390px;

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


    .bl-gallery-intro__lead {

        max-width:
            360px;

        margin-top:
            1rem;

        font-size:
            0.82rem;

        line-height:
            1.65;
    }


    .bl-gallery-intro__services {

        gap:
            0.5rem;

        margin-top:
            1.4rem;

        font-size:
            0.65rem;
    }


    .bl-gallery-intro__visual {

        min-height:
            290px;
    }


    .bl-gallery-intro__stat-number {

        font-size:
            clamp(
                4.4rem,
                21vw,
                6rem
            );
    }


    .bl-gallery-intro__stat-copy {

        gap:
            0;

        padding-bottom:
            0.3rem;
    }


    .bl-gallery-intro__stat-copy span {

        font-size:
            0.57rem;
    }


    .bl-gallery-intro__stat-copy strong {

        font-size:
            0.76rem;
    }


    .bl-gallery-intro__stat--photos {

        left:
            0;

        top:
            0;
    }


    .bl-gallery-intro__stat--services {

        right:
            0;

        bottom:
            19%;
    }


    .bl-gallery-intro__route {

        left:
            0;

        right:
            0;

        top:
            29%;

        height:
            140px;
    }


    .bl-gallery-intro__note {

        left:
            0;

        bottom:
            -4px;

        max-width:
            235px;

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

        gap:
            0.6rem;
    }


    .bl-gallery-intro__note p {

        font-size:
            0.68rem;
    }


    .bl-gallery-intro__botanical {

        right:
            -48px;

        width:
            100px;
    }

}









































/* =========================================================
   06. CLEANUPS — VIDEO GALLERY
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-gallery-cleanups {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    scroll-margin-top:
        calc(
            var(--bl-first-screen-chrome-height)
            +
            24px
        );

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

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



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

.bl-gallery-cleanups::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 91% 15%,
            rgba(
                var(--bl-sage-rgb),
                0.17
            ),
            transparent 31rem
        ),

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

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



/* =========================================================
   DECORATION
========================================================= */

.bl-gallery-cleanups__topography {

    position:
        absolute;

    z-index:
        -9;

    right:
        -7%;

    top:
        0;

    width:
        min(
            72vw,
            1150px
        );

    height:
        100%;

    fill:
        none;

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

    stroke-width:
        1.05;

    pointer-events:
        none;
}


.bl-gallery-cleanups__terrain {

    position:
        absolute;

    z-index:
        -8;

    left:
        -21%;

    bottom:
        -22%;

    width:
        min(
            54vw,
            820px
        );

    aspect-ratio:
        1.2;

    border-radius:
        68% 32% 0 0 /
        77% 61% 0 0;

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

    opacity:
        0.76;

    transform:
        rotate(7deg);

    pointer-events:
        none;
}


.bl-gallery-cleanups__clay-mark {

    position:
        absolute;

    z-index:
        -4;

    right:
        5%;

    top:
        12%;

    width:
        60px;

    height:
        60px;

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

    border-radius:
        50%;

    pointer-events:
        none;
}


.bl-gallery-cleanups__clay-mark::after {

    content:
        "";

    position:
        absolute;

    right:
        -7px;

    top:
        9px;

    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

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



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

.bl-gallery-cleanups__inner {

    position:
        relative;

    z-index:
        2;
}



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

.bl-gallery-cleanups__header {

    display:
        grid;

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

    align-items:
        end;

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

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


.bl-gallery-cleanups__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        0.85rem;

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

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-gallery-cleanups__eyebrow > span {

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


.bl-gallery-cleanups__eyebrow i {

    width:
        38px;

    height:
        1px;

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


.bl-gallery-cleanups__eyebrow strong {

    font-size:
        inherit;

    font-weight:
        800;
}


.bl-gallery-cleanups__title {

    max-width:
        740px;

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

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

    line-height:
        0.97;

    letter-spacing:
        -0.06em;

    opacity:
        0;

    transform:
        translateY(25px);
}


.bl-gallery-cleanups__title span {

    display:
        block;

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


.bl-gallery-cleanups__intro {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        2rem;

    opacity:
        0;

    transform:
        translateY(20px);
}


.bl-gallery-cleanups__intro p {

    max-width:
        430px;

    color:
        var(--bl-muted);

    font-size:
        0.91rem;

    line-height:
        1.75;
}



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

.bl-gallery-cleanups__meta {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        0.55rem;
}


.bl-gallery-cleanups__meta > span {

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

    font-size:
        2.7rem;

    font-weight:
        700;

    line-height:
        0.8;

    letter-spacing:
        -0.07em;
}


.bl-gallery-cleanups__meta > div {

    display:
        flex;

    flex-direction:
        column;

    padding-bottom:
        0.08rem;
}


.bl-gallery-cleanups__meta small {

    color:
        var(--bl-muted);

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-gallery-cleanups__meta strong {

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

    font-size:
        0.72rem;

    font-weight:
        800;
}



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

.bl-gallery-cleanups__grid {

    display:
        grid;

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

    grid-template-rows:
        minmax(300px, 27vw)
        minmax(300px, 27vw);

    gap:
        clamp(
            0.9rem,
            1.5vw,
            1.45rem
        );
}



/* =========================================================
   VIDEO CARD
========================================================= */

.bl-cleanup-video {

    position:
        relative;

    display:
        block;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    color:
        var(--bl-surface);

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

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

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

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

    opacity:
        0;

    clip-path:
        inset(
            8% 8% 8% 8%
            round
            24px
        );

    transform:
        scale(0.985);

    transition:

        opacity
        680ms
        ease,

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

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

        box-shadow
        480ms
        ease;
}



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

.bl-cleanup-video--feature {

    grid-column:
        1 / 7;

    grid-row:
        1 / 3;

    border-radius:
        38px 18px 38px 18px;
}


.bl-cleanup-video--two {

    grid-column:
        7 / 10;

    grid-row:
        1;
}


.bl-cleanup-video--three {

    grid-column:
        10 / 13;

    grid-row:
        1;

    border-radius:
        18px 38px 18px 18px;
}


.bl-cleanup-video--four {

    grid-column:
        7 / 10;

    grid-row:
        2;

    border-radius:
        18px 18px 18px 38px;
}


.bl-cleanup-video--five {

    grid-column:
        10 / 13;

    grid-row:
        2;

    border-radius:
        18px 18px 38px 18px;
}



/* =========================================================
   MEDIA
========================================================= */

.bl-cleanup-video__media {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;
}


.bl-cleanup-video__media video {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.025);

    pointer-events:
        none;

    transition:

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

        filter
        550ms
        ease;
}



/* =========================================================
   VIDEO SHADE
========================================================= */

.bl-cleanup-video__shade {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            rgba(
                var(--bl-forest-950-rgb),
                0.08
            )
            0%,

            transparent
            40%,

            rgba(
                var(--bl-forest-950-rgb),
                0.58
            )
            100%
        );
}



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

.bl-cleanup-video__topline {

    position:
        absolute;

    z-index:
        4;

    top:
        1rem;

    left:
        1rem;

    right:
        1rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    pointer-events:
        none;
}


.bl-cleanup-video__topline span {

    min-height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0.35rem
        0.6rem;

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

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

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

    border-radius:
        999px;

    backdrop-filter:
        blur(8px);

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

    font-size:
        0.56rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;
}



/* =========================================================
   PLAY AREA
========================================================= */

.bl-cleanup-video__play {

    position:
        absolute;

    z-index:
        5;

    left:
        clamp(
            1rem,
            2vw,
            1.5rem
        );

    bottom:
        clamp(
            1rem,
            2vw,
            1.5rem
        );

    display:
        flex;

    align-items:
        center;

    gap:
        0.8rem;

    pointer-events:
        none;
}


.bl-cleanup-video__play-button {

    width:
        52px;

    height:
        52px;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

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

    border-radius:
        50%;

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            0.18
        );

    transition:

        color
        400ms
        ease,

        background-color
        400ms
        ease,

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


.bl-cleanup-video__play-button svg {

    width:
        21px;

    height:
        21px;

    fill:
        currentColor;

    stroke:
        currentColor;

    stroke-width:
        1.2;
}


.bl-cleanup-video__play-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.08rem;

    text-shadow:
        0 2px 12px
        rgba(
            0,
            0,
            0,
            0.3
        );
}


.bl-cleanup-video__play-copy small {

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

    font-size:
        0.57rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.bl-cleanup-video__play-copy strong {

    color:
        var(--bl-surface);

    font-size:
        0.85rem;

    font-weight:
        700;
}



/* =========================================================
   FEATURE VIDEO
========================================================= */

.bl-cleanup-video--feature
.bl-cleanup-video__play-button {

    width:
        64px;

    height:
        64px;
}


.bl-cleanup-video--feature
.bl-cleanup-video__play-button svg {

    width:
        25px;

    height:
        25px;
}


.bl-cleanup-video--feature
.bl-cleanup-video__play-copy strong {

    font-size:
        1.05rem;
}



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

.bl-cleanup-video:hover {

    z-index:
        5;

    transform:
        translateY(-5px);

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


.bl-cleanup-video:hover
.bl-cleanup-video__media video {

    transform:
        scale(1.065);

    filter:
        brightness(0.92);
}


.bl-cleanup-video:hover
.bl-cleanup-video__play-button {

    color:
        var(--bl-surface);

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

    transform:
        scale(1.08);
}



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

.bl-cleanup-video:focus-visible {

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

    outline-offset:
        5px;
}



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

.bl-gallery-cleanups.is-visible
.bl-gallery-cleanups__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease,

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


.bl-gallery-cleanups.is-visible
.bl-gallery-cleanups__title {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        80ms,

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


.bl-gallery-cleanups.is-visible
.bl-gallery-cleanups__intro {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        680ms
        ease
        150ms,

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


.bl-gallery-cleanups.is-visible
.bl-cleanup-video {

    opacity:
        1;

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

    transform:
        scale(1);
}


.bl-gallery-cleanups.is-visible
.bl-cleanup-video--feature {

    transition-delay:
        180ms;
}


.bl-gallery-cleanups.is-visible
.bl-cleanup-video--two {

    transition-delay:
        250ms;
}


.bl-gallery-cleanups.is-visible
.bl-cleanup-video--three {

    transition-delay:
        320ms;
}


.bl-gallery-cleanups.is-visible
.bl-cleanup-video--four {

    transition-delay:
        390ms;
}


.bl-gallery-cleanups.is-visible
.bl-cleanup-video--five {

    transition-delay:
        460ms;
}



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

.bl-gallery-cleanups__footer {

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.1rem;

    margin-top:
        clamp(
            2.6rem,
            4vw,
            4rem
        );
}


.bl-gallery-cleanups__footer-line {

    height:
        1px;

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


.bl-gallery-cleanups__footer p {

    color:
        var(--bl-muted);

    font-size:
        0.72rem;
}


.bl-gallery-cleanups__footer a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

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

    font-size:
        0.76rem;

    font-weight:
        800;
}


.bl-gallery-cleanups__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-gallery-cleanups__footer a:hover svg {

    transform:
        translateX(5px);
}



/* =========================================================
   REDUCED MOTION — SECTION
========================================================= */

html.bl-reduced-motion
.bl-gallery-cleanups__eyebrow,

html.bl-reduced-motion
.bl-gallery-cleanups__title,

html.bl-reduced-motion
.bl-gallery-cleanups__intro,

html.bl-reduced-motion
.bl-cleanup-video {

    opacity:
        1;

    clip-path:
        none;

    transform:
        none;
}


html.bl-reduced-motion
.bl-cleanup-video__media video {

    transform:
        none;
}



/* =========================================================
   CLEANUP VIDEO VIEWER
========================================================= */

.bl-cleanup-viewer {

    position:
        fixed;

    inset:
        0;

    z-index:
        13000;

    width:
        100%;

    height:
        100vh;

    height:
        100svh;

    display:
        grid;

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

    overflow:
        hidden;

    isolation:
        isolate;

    color:
        var(--bl-surface);

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

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:

        opacity
        350ms
        ease,

        visibility
        350ms
        step-end;
}


.bl-cleanup-viewer[hidden] {

    display:
        none;
}


.bl-cleanup-viewer.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transition:

        opacity
        350ms
        ease,

        visibility
        0ms
        step-start;
}



/* =========================================================
   VIEWER BACKDROP
========================================================= */

.bl-cleanup-viewer__backdrop {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(
                var(--bl-sage-rgb),
                0.09
            ),
            transparent 30rem
        ),

        radial-gradient(
            circle at 88% 85%,
            rgba(
                var(--bl-clay-rgb),
                0.07
            ),
            transparent 28rem
        ),

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



/* =========================================================
   VIEWER TOP
========================================================= */

.bl-cleanup-viewer__top {

    position:
        relative;

    z-index:
        5;

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        0.9rem
        var(--bl-gutter);

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


.bl-cleanup-viewer__identity {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.05rem;
}


.bl-cleanup-viewer__identity small {

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

    font-size:
        0.56rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.bl-cleanup-viewer__identity strong {

    color:
        var(--bl-surface);

    font-size:
        0.88rem;

    font-weight:
        700;
}



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

.bl-cleanup-viewer__top-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        0.65rem;
}


.bl-cleanup-viewer__fullscreen {

    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.5rem;

    padding:
        0.6rem
        0.85rem;

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

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

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

    border-radius:
        999px;

    transition:

        color
        350ms
        ease,

        background-color
        350ms
        ease;
}


.bl-cleanup-viewer__fullscreen svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;
}


.bl-cleanup-viewer__fullscreen span {

    font-size:
        0.65rem;

    font-weight:
        700;
}


.bl-cleanup-viewer__fullscreen:hover {

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

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



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

.bl-cleanup-viewer__close {

    position:
        relative;

    width:
        44px;

    height:
        44px;

    flex:
        0 0 auto;

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

    border-radius:
        50%;

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

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


.bl-cleanup-viewer__close span {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        17px;

    height:
        1.5px;

    border-radius:
        99px;

    background:
        currentColor;
}


.bl-cleanup-viewer__close span:first-child {

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(45deg);
}


.bl-cleanup-viewer__close span:last-child {

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(-45deg);
}


.bl-cleanup-viewer__close:hover {

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

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



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

.bl-cleanup-viewer__stage {

    position:
        relative;

    min-height:
        0;

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.25rem;

    padding:
        1.25rem
        var(--bl-gutter);
}



/* =========================================================
   FULLSCREEN VIDEO
========================================================= */

.bl-cleanup-viewer__video-shell {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #050806;

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

    border-radius:
        clamp(
            12px,
            1.6vw,
            22px
        );

    box-shadow:
        0 30px 80px
        rgba(
            0,
            0,
            0,
            0.32
        );
}


.bl-cleanup-viewer__video {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-height:
        calc(
            100svh
            -
            190px
        );

    object-fit:
        contain;

    background:
        #000;
}



/* =========================================================
   PREV / NEXT
========================================================= */

.bl-cleanup-viewer__nav {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.45rem;

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

    background:
        transparent;

    transition:

        color
        350ms
        ease,

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


.bl-cleanup-viewer__nav svg {

    width:
        45px;

    height:
        45px;

    padding:
        11px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

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

    border-radius:
        50%;
}


.bl-cleanup-viewer__nav span {

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-cleanup-viewer__nav:hover {

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


.bl-cleanup-viewer__nav--prev:hover {

    transform:
        translateX(-4px);
}


.bl-cleanup-viewer__nav--next:hover {

    transform:
        translateX(4px);
}



/* =========================================================
   VIEWER BOTTOM
========================================================= */

.bl-cleanup-viewer__bottom {

    min-height:
        72px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.25rem;

    padding:
        0.8rem
        var(--bl-gutter);

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


.bl-cleanup-viewer__counter {

    display:
        grid;

    grid-template-columns:
        auto
        minmax(30px, 70px)
        auto;

    align-items:
        center;

    gap:
        0.6rem;

    justify-self:
        start;
}


.bl-cleanup-viewer__counter strong {

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

    font-size:
        1rem;
}


.bl-cleanup-viewer__counter > span {

    height:
        1px;

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


.bl-cleanup-viewer__counter small {

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

    font-size:
        0.65rem;
}


.bl-cleanup-viewer__info {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


.bl-cleanup-viewer__info small {

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

    font-size:
        0.5rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.bl-cleanup-viewer__info strong {

    color:
        var(--bl-surface);

    font-size:
        0.72rem;
}


.bl-cleanup-viewer__keyboard {

    display:
        flex;

    justify-self:
        end;

    gap:
        0.8rem;

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

    font-size:
        0.57rem;
}



/* =========================================================
   MOBILE NAV
========================================================= */

.bl-cleanup-viewer__mobile-nav {

    display:
        none;
}


.bl-cleanup-viewer__mobile-nav button {

    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.45rem;

    color:
        var(--bl-surface);

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

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

    border-radius:
        999px;
}


.bl-cleanup-viewer__mobile-nav svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;
}



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

html.bl-cleanup-video-open {

    overflow:
        hidden;
}


body.bl-cleanup-video-open {

    position:
        fixed;

    width:
        100%;
}



/* =========================================================
   LIVE REGION
========================================================= */

.bl-cleanup-viewer__live {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    clip:
        rect(0 0 0 0);

    white-space:
        nowrap;
}



/* =========================================================
   REDUCED MOTION — VIEWER
========================================================= */

html.bl-reduced-motion
.bl-cleanup-viewer,

html.bl-reduced-motion
.bl-cleanup-viewer * {

    transition:
        none;
}



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

@media (min-width: 1200px) {

    .bl-gallery-cleanups__grid {

        max-height:
            940px;
    }


    .bl-cleanup-viewer__stage {

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

}



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

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

    .bl-gallery-cleanups {

        padding:
            5.5rem 0;
    }


    .bl-gallery-cleanups__header {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(270px, 0.9fr);

        gap:
            3rem;
    }


    .bl-gallery-cleanups__title {

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


    .bl-gallery-cleanups__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-cleanups__grid {

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

        grid-template-rows:
            390px
            290px
            290px;
    }


    .bl-cleanup-video--feature {

        grid-column:
            1 / 6;

        grid-row:
            1 / 3;
    }


    .bl-cleanup-video--two {

        grid-column:
            6 / 9;

        grid-row:
            1;
    }


    .bl-cleanup-video--three {

        grid-column:
            6 / 9;

        grid-row:
            2;
    }


    .bl-cleanup-video--four {

        grid-column:
            1 / 5;

        grid-row:
            3;
    }


    .bl-cleanup-video--five {

        grid-column:
            5 / 9;

        grid-row:
            3;
    }


    .bl-cleanup-viewer__stage {

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

        padding-inline:
            1rem;
    }


    .bl-cleanup-viewer__nav span {

        display:
            none;
    }

}



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

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

    .bl-gallery-cleanups {

        padding:
            4.8rem 0;
    }


    .bl-gallery-cleanups__header {

        grid-template-columns:
            1fr;

        gap:
            1.3rem;

        margin-bottom:
            2.7rem;
    }


    .bl-gallery-cleanups__title {

        max-width:
            560px;

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


    .bl-gallery-cleanups__intro {

        align-items:
            center;

        flex-direction:
            row;
    }


    .bl-gallery-cleanups__intro p {

        max-width:
            500px;

        font-size:
            0.86rem;
    }


    .bl-gallery-cleanups__grid {

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

        grid-template-rows:
            430px
            285px
            285px;
    }


    .bl-cleanup-video--feature {

        grid-column:
            1 / -1;

        grid-row:
            1;
    }


    .bl-cleanup-video--two {

        grid-column:
            1;

        grid-row:
            2;
    }


    .bl-cleanup-video--three {

        grid-column:
            2;

        grid-row:
            2;
    }


    .bl-cleanup-video--four {

        grid-column:
            1;

        grid-row:
            3;
    }


    .bl-cleanup-video--five {

        grid-column:
            2;

        grid-row:
            3;
    }


    .bl-cleanup-video__play-copy {

        display:
            none;
    }


    .bl-cleanup-video__play-button,
    .bl-cleanup-video--feature
    .bl-cleanup-video__play-button {

        width:
            50px;

        height:
            50px;
    }


    .bl-gallery-cleanups__footer {

        grid-template-columns:
            1fr
            auto;
    }


    .bl-gallery-cleanups__footer-line {

        grid-column:
            1 / -1;
    }


    .bl-cleanup-viewer {

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


    .bl-cleanup-viewer__stage {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            0.8rem;
    }


    .bl-cleanup-viewer__nav {

        display:
            none;
    }


    .bl-cleanup-viewer__video {

        max-height:
            calc(
                100svh
                -
                225px
            );
    }


    .bl-cleanup-viewer__bottom {

        min-height:
            60px;

        grid-template-columns:
            auto
            1fr;

        padding:
            0.65rem
            1rem;
    }


    .bl-cleanup-viewer__info {

        align-items:
            flex-end;

        text-align:
            right;
    }


    .bl-cleanup-viewer__keyboard {

        display:
            none;
    }


    .bl-cleanup-viewer__mobile-nav {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            0.65rem;

        padding:
            0.6rem
            1rem
            max(
                0.8rem,
                env(safe-area-inset-bottom)
            );

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

}



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

@media (max-width: 480px) {

    .bl-gallery-cleanups {

        padding:
            4.2rem 0;
    }


    .bl-gallery-cleanups__header {

        grid-template-columns:
            1fr;

        gap:
            1.2rem;

        margin-bottom:
            2.4rem;
    }


    .bl-gallery-cleanups__eyebrow {

        font-size:
            0.62rem;
    }


    .bl-gallery-cleanups__title {

        max-width:
            390px;

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


    .bl-gallery-cleanups__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-cleanups__intro p {

        font-size:
            0.81rem;

        line-height:
            1.65;
    }


    .bl-gallery-cleanups__grid {

        grid-template-columns:
            1fr;

        grid-template-rows:
            none;

        gap:
            0.85rem;
    }


    .bl-cleanup-video--feature,
    .bl-cleanup-video--two,
    .bl-cleanup-video--three,
    .bl-cleanup-video--four,
    .bl-cleanup-video--five {

        grid-column:
            auto;

        grid-row:
            auto;

        width:
            100%;

        height:
            310px;

        border-radius:
            18px;
    }


    .bl-cleanup-video--feature {

        height:
            380px;
    }


    .bl-cleanup-video__topline {

        top:
            0.7rem;

        left:
            0.7rem;

        right:
            0.7rem;
    }


    .bl-cleanup-video__play {

        left:
            0.8rem;

        bottom:
            0.8rem;
    }


    .bl-cleanup-video__play-button,
    .bl-cleanup-video--feature
    .bl-cleanup-video__play-button {

        width:
            48px;

        height:
            48px;
    }


    .bl-cleanup-video__play-copy strong {

        font-size:
            0.76rem;
    }


    .bl-gallery-cleanups__footer {

        grid-template-columns:
            1fr;

        gap:
            0.65rem;

        margin-top:
            2.4rem;
    }


    .bl-gallery-cleanups__clay-mark {

        right:
            -15px;

        width:
            48px;

        height:
            48px;
    }


    /* -----------------------------------------
       VIEWER
    ----------------------------------------- */

    .bl-cleanup-viewer {

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


    .bl-cleanup-viewer__top {

        min-height:
            62px;

        padding:
            0.65rem
            0.8rem;
    }


    .bl-cleanup-viewer__fullscreen {

        width:
            40px;

        height:
            40px;

        min-height:
            40px;

        padding:
            0;
    }


    .bl-cleanup-viewer__fullscreen span {

        display:
            none;
    }


    .bl-cleanup-viewer__close {

        width:
            40px;

        height:
            40px;
    }


    .bl-cleanup-viewer__stage {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        min-height:
            0;

        padding:
            0.65rem;
    }


    .bl-cleanup-viewer__nav {

        display:
            none;
    }


    .bl-cleanup-viewer__video-shell {

        border-radius:
            11px;
    }


    .bl-cleanup-viewer__video {

        max-height:
            calc(
                100svh
                -
                210px
            );
    }


    .bl-cleanup-viewer__bottom {

        min-height:
            55px;

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

        gap:
            0.7rem;

        padding:
            0.55rem
            0.8rem;
    }


    .bl-cleanup-viewer__counter {

        grid-template-columns:
            auto
            22px
            auto;

        gap:
            0.4rem;
    }


    .bl-cleanup-viewer__info {

        align-items:
            flex-end;

        min-width:
            0;

        text-align:
            right;
    }


    .bl-cleanup-viewer__info strong {

        max-width:
            190px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        font-size:
            0.64rem;
    }


    .bl-cleanup-viewer__keyboard {

        display:
            none;
    }


    .bl-cleanup-viewer__mobile-nav {

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            0.5rem;

        padding:
            0.55rem
            0.8rem
            max(
                0.7rem,
                env(safe-area-inset-bottom)
            );

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

}







































/* =========================================================
   07. MULCH INSTALLATION
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-gallery-mulch {

    --bl-mulch-feature-y:
        0px;

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    scroll-margin-top:
        calc(
            var(--bl-first-screen-chrome-height)
            +
            24px
        );

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

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



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

.bl-gallery-mulch::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 8% 14%,
            rgba(
                var(--bl-clay-rgb),
                0.07
            ),
            transparent
            28rem
        ),

        radial-gradient(
            circle at 90% 83%,
            rgba(
                var(--bl-sage-rgb),
                0.18
            ),
            transparent
            31rem
        );

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



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

.bl-gallery-mulch__topography {

    position:
        absolute;

    z-index:
        -9;

    left:
        -8%;

    top:
        0;

    width:
        min(
            70vw,
            1120px
        );

    height:
        100%;

    fill:
        none;

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

    stroke-width:
        1.05;

    pointer-events:
        none;
}



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

.bl-gallery-mulch__terrain {

    position:
        absolute;

    z-index:
        -8;

    right:
        -18%;

    bottom:
        -25%;

    width:
        min(
            56vw,
            840px
        );

    aspect-ratio:
        1.2;

    border-radius:
        65% 35% 0 0 /
        78% 60% 0 0;

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

    opacity:
        0.8;

    transform:
        rotate(-8deg);

    pointer-events:
        none;
}



/* =========================================================
   CLAY SHAPE
========================================================= */

.bl-gallery-mulch__clay-shape {

    position:
        absolute;

    z-index:
        -6;

    left:
        -70px;

    top:
        37%;

    width:
        150px;

    height:
        150px;

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

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

    transform:
        rotate(17deg);

    pointer-events:
        none;
}


.bl-gallery-mulch__clay-shape::after {

    content:
        "";

    position:
        absolute;

    right:
        12px;

    top:
        22px;

    width:
        11px;

    height:
        11px;

    border-radius:
        50%;

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



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

.bl-gallery-mulch__botanical {

    position:
        absolute;

    z-index:
        -5;

    right:
        -28px;

    top:
        21%;

    width:
        clamp(
            100px,
            12vw,
            185px
        );

    height:
        auto;

    fill:
        none;

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

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}



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

.bl-gallery-mulch__inner {

    position:
        relative;

    z-index:
        2;
}



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

.bl-gallery-mulch__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(300px, 0.82fr);

    align-items:
        end;

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

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



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

.bl-gallery-mulch__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        0.85rem;

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

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-gallery-mulch__eyebrow > span {

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


.bl-gallery-mulch__eyebrow i {

    width:
        38px;

    height:
        1px;

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


.bl-gallery-mulch__eyebrow strong {

    font-size:
        inherit;

    font-weight:
        800;
}



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

.bl-gallery-mulch__title {

    max-width:
        780px;

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

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

    line-height:
        0.97;

    letter-spacing:
        -0.06em;

    opacity:
        0;

    transform:
        translateY(25px);
}


.bl-gallery-mulch__title span {

    display:
        block;

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



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

.bl-gallery-mulch__intro {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        2rem;

    opacity:
        0;

    transform:
        translateY(20px);
}


.bl-gallery-mulch__intro p {

    max-width:
        450px;

    color:
        var(--bl-muted);

    font-size:
        0.91rem;

    line-height:
        1.75;
}



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

.bl-gallery-mulch__meta {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        0.55rem;
}


.bl-gallery-mulch__meta > span {

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

    font-size:
        2.7rem;

    font-weight:
        700;

    line-height:
        0.8;

    letter-spacing:
        -0.07em;
}


.bl-gallery-mulch__meta > div {

    display:
        flex;

    flex-direction:
        column;

    padding-bottom:
        0.08rem;
}


.bl-gallery-mulch__meta small {

    color:
        var(--bl-muted);

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-gallery-mulch__meta strong {

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

    font-size:
        0.72rem;

    font-weight:
        800;
}



/* =========================================================
   COMPOSITION
========================================================= */

.bl-gallery-mulch__composition {

    position:
        relative;

    display:
        grid;

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

    grid-template-rows:
        minmax(280px, 30vw)
        minmax(280px, 30vw);

    gap:
        clamp(
            0.9rem,
            1.5vw,
            1.45rem
        );

    min-height:
        650px;
}



/* =========================================================
   COMMON PHOTO
========================================================= */

.bl-mulch-photo {

    position:
        relative;

    display:
        block;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    color:
        inherit;

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

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

    box-shadow:
        0 14px 36px
        rgba(
            var(--bl-forest-950-rgb),
            0.08
        );

    opacity:
        0;

    transform:
        translateY(30px);

    transition:

        opacity
        700ms
        ease,

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

        box-shadow
        500ms
        ease;
}


.bl-mulch-photo figure {

    width:
        100%;

    height:
        100%;

    margin:
        0;
}



/* =========================================================
   FEATURE
========================================================= */

.bl-mulch-photo--feature {

    z-index:
        1;

    grid-column:
        1 / 9;

    grid-row:
        1 / 3;

    border-radius:
        42px 18px 42px 18px;
}



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

.bl-mulch-photo--upper {

    z-index:
        3;

    grid-column:
        9 / 13;

    grid-row:
        1;

    margin-top:
        2rem;

    border-radius:
        18px 40px 18px 18px;
}



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

.bl-mulch-photo--lower {

    z-index:
        4;

    grid-column:
        8 / 13;

    grid-row:
        2;

    margin:
        -1.5rem 0 2.1rem 0;

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

    border-radius:
        38px 18px 38px 18px;

    box-shadow:
        0 24px 55px
        rgba(
            var(--bl-forest-950-rgb),
            0.13
        );
}



/* =========================================================
   MEDIA
========================================================= */

.bl-mulch-photo__media {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;
}


.bl-mulch-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.02);

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


.bl-mulch-photo--feature img {

    transform:
        translate3d(
            0,
            var(--bl-mulch-feature-y),
            0
        )
        scale(1.04);
}



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

.bl-mulch-photo__shade {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

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



/* =========================================================
   CAPTION
========================================================= */

.bl-mulch-photo figcaption {

    position:
        absolute;

    z-index:
        3;

    left:
        1rem;

    bottom:
        1rem;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    padding:
        0.4rem
        0.65rem;

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

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

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

    border-radius:
        999px;

    backdrop-filter:
        blur(9px);

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

    opacity:
        0;

    transform:
        translateY(8px);

    transition:

        opacity
        380ms
        ease,

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


.bl-mulch-photo figcaption span {

    font-size:
        0.57rem;

    font-weight:
        800;
}


.bl-mulch-photo figcaption strong {

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

    font-size:
        0.54rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;
}



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

.bl-mulch-photo__view {

    position:
        absolute;

    z-index:
        5;

    top:
        1rem;

    right:
        1rem;

    width:
        43px;

    height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

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

    border-radius:
        50%;

    backdrop-filter:
        blur(9px);

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

    opacity:
        0;

    transform:
        scale(0.8);

    transition:

        opacity
        350ms
        ease,

        color
        350ms
        ease,

        background-color
        350ms
        ease,

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


.bl-mulch-photo__view svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



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

.bl-mulch-photo:hover {

    z-index:
        8;

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 56px
        rgba(
            var(--bl-forest-950-rgb),
            0.14
        );
}


.bl-mulch-photo:hover img {

    transform:
        scale(1.07);
}


.bl-mulch-photo--feature:hover img {

    transform:
        translate3d(
            0,
            var(--bl-mulch-feature-y),
            0
        )
        scale(1.075);
}


.bl-mulch-photo:hover
figcaption {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-mulch-photo:hover
.bl-mulch-photo__view {

    opacity:
        1;

    transform:
        scale(1);
}


.bl-mulch-photo__view:hover {

    color:
        var(--bl-surface);

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



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

.bl-mulch-photo:focus-visible {

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

    outline-offset:
        5px;
}



/* =========================================================
   EDITORIAL NOTE
========================================================= */

.bl-gallery-mulch__note {

    position:
        absolute;

    z-index:
        7;

    left:
        2.5%;

    bottom:
        3%;

    display:
        flex;

    align-items:
        center;

    gap:
        0.8rem;

    padding:
        0.75rem
        0.9rem;

    color:
        var(--bl-surface);

    background:
        rgba(
            var(--bl-forest-950-rgb),
            0.91
        );

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

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

    backdrop-filter:
        blur(10px);

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

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

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-gallery-mulch__note-number {

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

    font-size:
        1.25rem;

    font-weight:
        800;
}


.bl-gallery-mulch__note-line {

    width:
        30px;

    height:
        1px;

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


.bl-gallery-mulch__note > div {

    display:
        flex;

    flex-direction:
        column;
}


.bl-gallery-mulch__note small {

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

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-gallery-mulch__note strong {

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

    font-size:
        0.74rem;

    font-weight:
        800;
}



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

.bl-gallery-mulch__footer {

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.1rem;

    margin-top:
        clamp(
            2.6rem,
            4vw,
            4rem
        );
}


.bl-gallery-mulch__footer-line {

    height:
        1px;

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


.bl-gallery-mulch__footer p {

    color:
        var(--bl-muted);

    font-size:
        0.72rem;
}


.bl-gallery-mulch__footer a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

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

    font-size:
        0.76rem;

    font-weight:
        800;
}


.bl-gallery-mulch__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-gallery-mulch__footer a:hover svg {

    transform:
        translateX(5px);
}



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

.bl-gallery-mulch.is-visible
.bl-gallery-mulch__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease,

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


.bl-gallery-mulch.is-visible
.bl-gallery-mulch__title {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        80ms,

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


.bl-gallery-mulch.is-visible
.bl-gallery-mulch__intro {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        680ms
        ease
        160ms,

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


.bl-gallery-mulch.is-visible
.bl-mulch-photo {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-gallery-mulch.is-visible
.bl-mulch-photo:nth-of-type(1) {

    transition-delay:
        220ms;
}


.bl-gallery-mulch.is-visible
.bl-mulch-photo:nth-of-type(2) {

    transition-delay:
        330ms;
}


.bl-gallery-mulch.is-visible
.bl-mulch-photo:nth-of-type(3) {

    transition-delay:
        430ms;
}


.bl-gallery-mulch.is-visible
.bl-gallery-mulch__note {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease
        520ms,

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



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

html.bl-reduced-motion
.bl-gallery-mulch__eyebrow,

html.bl-reduced-motion
.bl-gallery-mulch__title,

html.bl-reduced-motion
.bl-gallery-mulch__intro,

html.bl-reduced-motion
.bl-mulch-photo,

html.bl-reduced-motion
.bl-gallery-mulch__note {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-mulch-photo img {

    transform:
        none;
}



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

@media (min-width: 1200px) {

    .bl-gallery-mulch__composition {

        max-height:
            1050px;
    }

}



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

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

    .bl-gallery-mulch {

        padding:
            5.5rem 0;
    }


    .bl-gallery-mulch__header {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(270px, 0.9fr);

        gap:
            3rem;
    }


    .bl-gallery-mulch__title {

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


    .bl-gallery-mulch__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-mulch__composition {

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

        grid-template-rows:
            390px
            310px;

        min-height:
            0;
    }


    .bl-mulch-photo--feature {

        grid-column:
            1 / 6;

        grid-row:
            1 / 3;
    }


    .bl-mulch-photo--upper {

        grid-column:
            6 / 9;

        grid-row:
            1;

        margin-top:
            1.2rem;
    }


    .bl-mulch-photo--lower {

        grid-column:
            5 / 9;

        grid-row:
            2;

        margin:
            -1rem 0 1.5rem;
    }

}



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

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

    .bl-gallery-mulch {

        padding:
            4.8rem 0;
    }


    .bl-gallery-mulch__header {

        grid-template-columns:
            1fr;

        gap:
            1.3rem;

        margin-bottom:
            2.8rem;
    }


    .bl-gallery-mulch__title {

        max-width:
            600px;

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


    .bl-gallery-mulch__intro {

        align-items:
            center;

        flex-direction:
            row;
    }


    .bl-gallery-mulch__intro p {

        max-width:
            500px;

        font-size:
            0.86rem;
    }


    .bl-gallery-mulch__composition {

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

        grid-template-rows:
            430px
            270px;

        min-height:
            0;
    }


    .bl-mulch-photo--feature {

        grid-column:
            1 / -1;

        grid-row:
            1;

        border-radius:
            30px 16px 30px 16px;
    }


    .bl-mulch-photo--upper {

        grid-column:
            1;

        grid-row:
            2;

        margin:
            0;
    }


    .bl-mulch-photo--lower {

        grid-column:
            2;

        grid-row:
            2;

        margin:
            0;

        border:
            0;
    }


    .bl-mulch-photo figcaption,
    .bl-mulch-photo__view {

        opacity:
            1;

        transform:
            none;
    }


    .bl-gallery-mulch__note {

        left:
            1rem;

        bottom:
            calc(
                270px
                +
                1.8rem
            );
    }


    .bl-gallery-mulch__footer {

        grid-template-columns:
            1fr
            auto;
    }


    .bl-gallery-mulch__footer-line {

        grid-column:
            1 / -1;
    }

}



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

@media (max-width: 480px) {

    .bl-gallery-mulch {

        padding:
            4.2rem 0;
    }


    .bl-gallery-mulch__header {

        grid-template-columns:
            1fr;

        gap:
            1.2rem;

        margin-bottom:
            2.4rem;
    }


    .bl-gallery-mulch__eyebrow {

        font-size:
            0.62rem;
    }


    .bl-gallery-mulch__title {

        max-width:
            400px;

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


    .bl-gallery-mulch__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-mulch__intro p {

        font-size:
            0.81rem;

        line-height:
            1.65;
    }


    .bl-gallery-mulch__composition {

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            none;

        gap:
            0.85rem;

        min-height:
            0;
    }


    .bl-mulch-photo--feature,
    .bl-mulch-photo--upper,
    .bl-mulch-photo--lower {

        grid-column:
            auto;

        grid-row:
            auto;

        width:
            100%;

        margin:
            0;

        border:
            0;

        border-radius:
            18px;
    }


    .bl-mulch-photo--feature {

        height:
            390px;
    }


    .bl-mulch-photo--upper,
    .bl-mulch-photo--lower {

        height:
            270px;
    }


    .bl-mulch-photo figcaption {

        left:
            0.7rem;

        bottom:
            0.7rem;

        opacity:
            1;

        transform:
            none;
    }


    .bl-mulch-photo__view {

        top:
            0.7rem;

        right:
            0.7rem;

        width:
            38px;

        height:
            38px;

        opacity:
            1;

        transform:
            none;
    }


    .bl-gallery-mulch__note {

        display:
            none;
    }


    .bl-gallery-mulch__footer {

        grid-template-columns:
            1fr;

        gap:
            0.65rem;

        margin-top:
            2.4rem;
    }


    .bl-gallery-mulch__footer p {

        font-size:
            0.69rem;
    }


    .bl-gallery-mulch__botanical {

        right:
            -50px;

        width:
            100px;
    }

}




































/* =========================================================
   08. HEDGE & BUSH TRIMMING
========================================================= */

.bl-gallery-trimming {

    --bl-trimming-feature-y: 0px;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    scroll-margin-top:
        calc(
            var(--bl-first-screen-chrome-height)
            +
            24px
        );

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

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


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

.bl-gallery-trimming::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 90% 12%,
            rgba(var(--bl-sage-rgb), 0.19),
            transparent 32rem
        ),

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

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


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

.bl-gallery-trimming__topography {

    position: absolute;
    z-index: -9;

    right: -8%;
    top: 0;

    width:
        min(
            72vw,
            1180px
        );

    height: 100%;

    fill: none;

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

    stroke-width: 1.05;

    pointer-events: none;
}


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

.bl-gallery-trimming__terrain {

    position: absolute;
    z-index: -8;

    left: -20%;
    bottom: -19%;

    width:
        min(
            54vw,
            820px
        );

    aspect-ratio: 1.2;

    border-radius:
        69% 31% 0 0 /
        75% 63% 0 0;

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

    opacity: 0.77;

    transform:
        rotate(7deg);

    pointer-events: none;
}


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

.bl-gallery-trimming__orbit {

    position: absolute;
    z-index: -5;

    right: 4%;
    top: 9%;

    width: 74px;
    height: 74px;

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

    border-radius: 50%;

    pointer-events: none;
}


.bl-gallery-trimming__orbit span {

    position: absolute;

    top: 11px;
    right: -6px;

    width: 10px;
    height: 10px;

    border-radius: 50%;

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


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

.bl-gallery-trimming__botanical {

    position: absolute;
    z-index: -5;

    left: -32px;
    top: 30%;

    width:
        clamp(
            105px,
            13vw,
            195px
        );

    height: auto;

    fill: none;

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

    stroke-width: 1.35;

    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}


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

.bl-gallery-trimming__inner {

    position: relative;
    z-index: 2;
}


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

.bl-gallery-trimming__header {

    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(300px, 0.82fr);

    align-items: end;

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

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


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

.bl-gallery-trimming__eyebrow {

    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    margin-bottom: 0.85rem;

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

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

    letter-spacing: 0.12em;
    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(18px);
}


.bl-gallery-trimming__eyebrow > span {

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


.bl-gallery-trimming__eyebrow i {

    width: 38px;
    height: 1px;

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


.bl-gallery-trimming__eyebrow strong {

    font-size: inherit;
    font-weight: 800;
}


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

.bl-gallery-trimming__title {

    max-width: 760px;

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

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

    line-height: 0.97;
    letter-spacing: -0.06em;

    opacity: 0;

    transform:
        translateY(25px);
}


.bl-gallery-trimming__title span {

    display: block;

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


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

.bl-gallery-trimming__intro {

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    opacity: 0;

    transform:
        translateY(20px);
}


.bl-gallery-trimming__intro p {

    max-width: 450px;

    color:
        var(--bl-muted);

    font-size: 0.91rem;

    line-height: 1.75;
}


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

.bl-gallery-trimming__meta {

    flex: 0 0 auto;

    display: flex;

    align-items: flex-end;

    gap: 0.55rem;
}


.bl-gallery-trimming__meta > span {

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

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

    line-height: 0.8;

    letter-spacing: -0.07em;
}


.bl-gallery-trimming__meta > div {

    display: flex;

    flex-direction: column;

    padding-bottom: 0.08rem;
}


.bl-gallery-trimming__meta small {

    color:
        var(--bl-muted);

    font-size: 0.54rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.bl-gallery-trimming__meta strong {

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

    font-size: 0.72rem;

    font-weight: 800;
}


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

.bl-gallery-trimming__grid {

    position: relative;

    display: grid;

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

    grid-template-rows:
        minmax(270px, 28vw)
        minmax(260px, 27vw)
        minmax(235px, 23vw);

    gap:
        clamp(
            0.9rem,
            1.5vw,
            1.45rem
        );
}


/* =========================================================
   COMMON PHOTO
========================================================= */

.bl-trimming-photo {

    position: relative;

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

    display: block;

    overflow: hidden;

    color: inherit;

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

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

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

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity 700ms ease,
        transform 900ms var(--bl-ease-organic),
        box-shadow 500ms ease;
}


.bl-trimming-photo figure {

    width: 100%;
    height: 100%;

    margin: 0;
}


/* =========================================================
   PLACEMENT
========================================================= */

.bl-trimming-photo--feature {

    grid-column:
        1 / 6;

    grid-row:
        1 / 3;

    border-radius:
        42px 18px 42px 18px;
}


.bl-trimming-photo--wide {

    grid-column:
        6 / 13;

    grid-row:
        1;

    border-radius:
        18px 42px 18px 18px;
}


.bl-trimming-photo--middle-a {

    grid-column:
        6 / 9;

    grid-row:
        2;

    border-radius:
        18px;
}


.bl-trimming-photo--middle-b {

    grid-column:
        9 / 13;

    grid-row:
        2;

    border-radius:
        18px 18px 38px 18px;
}


.bl-trimming-photo--lower-a {

    grid-column:
        2 / 7;

    grid-row:
        3;

    border-radius:
        34px 18px 18px 34px;
}


.bl-trimming-photo--lower-b {

    grid-column:
        7 / 12;

    grid-row:
        3;

    border-radius:
        18px 34px 34px 18px;
}


/* =========================================================
   MEDIA
========================================================= */

.bl-trimming-photo__media {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.bl-trimming-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.02);

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


.bl-trimming-photo--feature img {

    transform:
        translate3d(
            0,
            var(--bl-trimming-feature-y),
            0
        )
        scale(1.04);
}


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

.bl-trimming-photo__shade {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 47%,
            rgba(
                var(--bl-forest-950-rgb),
                0.29
            )
        );
}


/* =========================================================
   CAPTION
========================================================= */

.bl-trimming-photo figcaption {

    position: absolute;
    z-index: 4;

    left: 1rem;
    bottom: 1rem;

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    padding:
        0.4rem
        0.65rem;

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

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

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

    border-radius:
        999px;

    backdrop-filter:
        blur(9px);

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

    opacity: 0;

    transform:
        translateY(8px);

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


.bl-trimming-photo figcaption span {

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


.bl-trimming-photo figcaption strong {

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

    font-size: 0.54rem;

    font-weight: 800;

    letter-spacing: 0.05em;
}


/* =========================================================
   VIEW BUTTON
========================================================= */

.bl-trimming-photo__view {

    position: absolute;
    z-index: 5;

    top: 1rem;
    right: 1rem;

    width: 43px;
    height: 43px;

    display: inline-flex;

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

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

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

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

    border-radius: 50%;

    backdrop-filter:
        blur(9px);

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

    opacity: 0;

    transform:
        scale(0.8);

    transition:
        opacity 350ms ease,
        color 350ms ease,
        background-color 350ms ease,
        transform 430ms var(--bl-ease-standard);
}


.bl-trimming-photo__view svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

.bl-trimming-photo:hover {

    z-index: 8;

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 56px
        rgba(
            var(--bl-forest-950-rgb),
            0.14
        );
}


.bl-trimming-photo:hover img {

    transform:
        scale(1.07);
}


.bl-trimming-photo--feature:hover img {

    transform:
        translate3d(
            0,
            var(--bl-trimming-feature-y),
            0
        )
        scale(1.075);
}


.bl-trimming-photo:hover figcaption {

    opacity: 1;

    transform:
        translateY(0);
}


.bl-trimming-photo:hover
.bl-trimming-photo__view {

    opacity: 1;

    transform:
        scale(1);
}


.bl-trimming-photo__view:hover {

    color:
        var(--bl-surface);

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


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

.bl-trimming-photo:focus-visible {

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

    outline-offset:
        5px;
}


/* =========================================================
   EDITORIAL LABEL
========================================================= */

.bl-gallery-trimming__label {

    position: absolute;
    z-index: 10;

    left: 5%;
    bottom: calc(23vw + 2.7rem);

    display: flex;

    align-items: center;

    gap: 0.8rem;

    padding:
        0.75rem
        0.95rem;

    color:
        var(--bl-surface);

    background:
        rgba(
            var(--bl-forest-950-rgb),
            0.92
        );

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

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

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

    backdrop-filter:
        blur(10px);

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

    opacity: 0;

    transform:
        translateY(18px);
}


.bl-gallery-trimming__label > span {

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

    font-size: 1.25rem;

    font-weight: 800;
}


.bl-gallery-trimming__label > i {

    width: 30px;
    height: 1px;

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


.bl-gallery-trimming__label > div {

    display: flex;

    flex-direction: column;
}


.bl-gallery-trimming__label small {

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

    font-size: 0.54rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.bl-gallery-trimming__label strong {

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

    font-size: 0.74rem;

    font-weight: 800;
}


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

.bl-gallery-trimming__footer {

    display: grid;

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

    align-items: center;

    gap: 1.1rem;

    margin-top:
        clamp(
            2.6rem,
            4vw,
            4rem
        );
}


.bl-gallery-trimming__footer-line {

    height: 1px;

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


.bl-gallery-trimming__footer p {

    color:
        var(--bl-muted);

    font-size: 0.72rem;
}


.bl-gallery-trimming__footer a {

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

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

    font-size: 0.76rem;

    font-weight: 800;
}


.bl-gallery-trimming__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-gallery-trimming__footer a:hover svg {

    transform:
        translateX(5px);
}


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

.bl-gallery-trimming.is-visible
.bl-gallery-trimming__eyebrow,

.bl-gallery-trimming.is-visible
.bl-gallery-trimming__title,

.bl-gallery-trimming.is-visible
.bl-gallery-trimming__intro {

    opacity: 1;

    transform:
        translateY(0);
}


.bl-gallery-trimming.is-visible
.bl-gallery-trimming__eyebrow {

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


.bl-gallery-trimming.is-visible
.bl-gallery-trimming__title {

    transition:
        opacity 700ms ease 80ms,
        transform 900ms var(--bl-ease-organic) 80ms;
}


.bl-gallery-trimming.is-visible
.bl-gallery-trimming__intro {

    transition:
        opacity 680ms ease 160ms,
        transform 850ms var(--bl-ease-organic) 160ms;
}


.bl-gallery-trimming.is-visible
.bl-trimming-photo {

    opacity: 1;

    transform:
        translateY(0);
}


.bl-gallery-trimming.is-visible
.bl-trimming-photo:nth-child(1) {

    transition-delay:
        210ms;
}


.bl-gallery-trimming.is-visible
.bl-trimming-photo:nth-child(2) {

    transition-delay:
        280ms;
}


.bl-gallery-trimming.is-visible
.bl-trimming-photo:nth-child(3) {

    transition-delay:
        350ms;
}


.bl-gallery-trimming.is-visible
.bl-trimming-photo:nth-child(4) {

    transition-delay:
        420ms;
}


.bl-gallery-trimming.is-visible
.bl-trimming-photo:nth-child(5) {

    transition-delay:
        490ms;
}


.bl-gallery-trimming.is-visible
.bl-trimming-photo:nth-child(6) {

    transition-delay:
        560ms;
}


.bl-gallery-trimming.is-visible
.bl-gallery-trimming__label {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity 650ms ease 620ms,
        transform 820ms var(--bl-ease-organic) 620ms;
}


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

html.bl-reduced-motion
.bl-gallery-trimming__eyebrow,

html.bl-reduced-motion
.bl-gallery-trimming__title,

html.bl-reduced-motion
.bl-gallery-trimming__intro,

html.bl-reduced-motion
.bl-trimming-photo,

html.bl-reduced-motion
.bl-gallery-trimming__label {

    opacity: 1;

    transform: none;
}


html.bl-reduced-motion
.bl-trimming-photo img {

    transform: none;
}


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

@media (min-width: 1200px) {

    .bl-gallery-trimming__grid {

        max-height:
            1300px;
    }

}


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

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

    .bl-gallery-trimming {

        padding:
            5.5rem 0;
    }


    .bl-gallery-trimming__header {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(270px, 0.9fr);

        gap:
            3rem;
    }


    .bl-gallery-trimming__title {

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


    .bl-gallery-trimming__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-trimming__grid {

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

        grid-template-rows:
            400px
            270px
            280px;
    }


    .bl-trimming-photo--feature {

        grid-column:
            1 / 5;

        grid-row:
            1 / 3;
    }


    .bl-trimming-photo--wide {

        grid-column:
            5 / 9;

        grid-row:
            1;
    }


    .bl-trimming-photo--middle-a {

        grid-column:
            5 / 7;

        grid-row:
            2;
    }


    .bl-trimming-photo--middle-b {

        grid-column:
            7 / 9;

        grid-row:
            2;
    }


    .bl-trimming-photo--lower-a {

        grid-column:
            1 / 5;

        grid-row:
            3;
    }


    .bl-trimming-photo--lower-b {

        grid-column:
            5 / 9;

        grid-row:
            3;
    }


    .bl-gallery-trimming__label {

        left:
            1.5rem;

        bottom:
            305px;
    }

}


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

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

    .bl-gallery-trimming {

        padding:
            4.8rem 0;
    }


    .bl-gallery-trimming__header {

        grid-template-columns:
            1fr;

        gap:
            1.3rem;

        margin-bottom:
            2.7rem;
    }


    .bl-gallery-trimming__title {

        max-width:
            560px;

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


    .bl-gallery-trimming__intro {

        align-items:
            center;

        flex-direction:
            row;
    }


    .bl-gallery-trimming__intro p {

        max-width:
            500px;

        font-size:
            0.86rem;
    }


    .bl-gallery-trimming__grid {

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

        grid-template-rows:
            430px
            270px
            270px
            300px;
    }


    .bl-trimming-photo--feature {

        grid-column:
            1 / -1;

        grid-row:
            1;
    }


    .bl-trimming-photo--wide {

        grid-column:
            1 / -1;

        grid-row:
            2;
    }


    .bl-trimming-photo--middle-a {

        grid-column:
            1;

        grid-row:
            3;
    }


    .bl-trimming-photo--middle-b {

        grid-column:
            2;

        grid-row:
            3;
    }


    .bl-trimming-photo--lower-a {

        grid-column:
            1;

        grid-row:
            4;
    }


    .bl-trimming-photo--lower-b {

        grid-column:
            2;

        grid-row:
            4;
    }


    .bl-trimming-photo figcaption,
    .bl-trimming-photo__view {

        opacity: 1;

        transform: none;
    }


    .bl-gallery-trimming__label {

        display: none;
    }


    .bl-gallery-trimming__footer {

        grid-template-columns:
            1fr
            auto;
    }


    .bl-gallery-trimming__footer-line {

        grid-column:
            1 / -1;
    }

}


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

@media (max-width: 480px) {

    .bl-gallery-trimming {

        padding:
            4.2rem 0;
    }


    .bl-gallery-trimming__header {

        grid-template-columns:
            1fr;

        gap:
            1.2rem;

        margin-bottom:
            2.4rem;
    }


    .bl-gallery-trimming__eyebrow {

        font-size:
            0.62rem;
    }


    .bl-gallery-trimming__title {

        max-width:
            400px;

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


    .bl-gallery-trimming__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-trimming__intro p {

        font-size:
            0.81rem;

        line-height:
            1.65;
    }


    .bl-gallery-trimming__grid {

        display: grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            none;

        gap:
            0.85rem;
    }


    .bl-trimming-photo--feature,
    .bl-trimming-photo--wide,
    .bl-trimming-photo--middle-a,
    .bl-trimming-photo--middle-b,
    .bl-trimming-photo--lower-a,
    .bl-trimming-photo--lower-b {

        grid-column: auto;
        grid-row: auto;

        width: 100%;

        border-radius: 18px;
    }


    .bl-trimming-photo--feature {

        height:
            390px;
    }


    .bl-trimming-photo--wide {

        height:
            260px;
    }


    .bl-trimming-photo--middle-a,
    .bl-trimming-photo--middle-b {

        height:
            275px;
    }


    .bl-trimming-photo--lower-a,
    .bl-trimming-photo--lower-b {

        height:
            270px;
    }


    .bl-trimming-photo figcaption {

        left:
            0.7rem;

        bottom:
            0.7rem;

        opacity: 1;

        transform: none;
    }


    .bl-trimming-photo__view {

        top:
            0.7rem;

        right:
            0.7rem;

        width:
            38px;

        height:
            38px;

        opacity: 1;

        transform: none;
    }


    .bl-gallery-trimming__label {

        display: none;
    }


    .bl-gallery-trimming__footer {

        grid-template-columns:
            1fr;

        gap:
            0.65rem;

        margin-top:
            2.4rem;
    }


    .bl-gallery-trimming__footer p {

        font-size:
            0.69rem;
    }


    .bl-gallery-trimming__botanical {

        left:
            -55px;

        width:
            100px;
    }


    .bl-gallery-trimming__orbit {

        right:
            -20px;

        width:
            55px;

        height:
            55px;
    }

}









































/* =========================================================
   09. LEAF CLEANUP — VIDEO
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-gallery-leaf {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    scroll-margin-top:
        calc(
            var(--bl-first-screen-chrome-height)
            +
            24px
        );

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

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



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

.bl-gallery-leaf::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 8% 14%,
            rgba(
                var(--bl-sage-rgb),
                0.18
            ),
            transparent 30rem
        ),

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

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



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

.bl-gallery-leaf__topography {

    position:
        absolute;

    z-index:
        -9;

    left:
        -8%;

    top:
        0;

    width:
        min(
            72vw,
            1160px
        );

    height:
        100%;

    fill:
        none;

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

    stroke-width:
        1.05;

    pointer-events:
        none;
}



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

.bl-gallery-leaf__terrain {

    position:
        absolute;

    z-index:
        -8;

    right:
        -20%;

    bottom:
        -37%;

    width:
        min(
            56vw,
            850px
        );

    aspect-ratio:
        1.25;

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

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

    opacity:
        0.79;

    transform:
        rotate(-8deg);

    pointer-events:
        none;
}



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

.bl-gallery-leaf__ghost-number {

    position:
        absolute;

    z-index:
        -6;

    right:
        1%;

    top:
        14%;

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

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

    font-weight:
        800;

    line-height:
        0.8;

    letter-spacing:
        -0.1em;

    pointer-events:
        none;

    opacity:
        0;

    transform:
        translateY(40px);
}



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

.bl-gallery-leaf__botanical {

    position:
        absolute;

    z-index:
        -5;

    right:
        -35px;

    bottom:
        4%;

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

    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-gallery-leaf__inner {

    position:
        relative;

    z-index:
        2;
}



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

.bl-gallery-leaf__header {

    display:
        grid;

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

    align-items:
        end;

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

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



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

.bl-gallery-leaf__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        0.85rem;

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

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-gallery-leaf__eyebrow > span {

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


.bl-gallery-leaf__eyebrow i {

    width:
        38px;

    height:
        1px;

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



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

.bl-gallery-leaf__title {

    max-width:
        760px;

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

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

    line-height:
        0.97;

    letter-spacing:
        -0.06em;

    opacity:
        0;

    transform:
        translateY(25px);
}


.bl-gallery-leaf__title span {

    display:
        block;

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



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

.bl-gallery-leaf__intro {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        2rem;

    opacity:
        0;

    transform:
        translateY(20px);
}


.bl-gallery-leaf__intro p {

    max-width:
        450px;

    color:
        var(--bl-muted);

    font-size:
        0.91rem;

    line-height:
        1.75;
}



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

.bl-gallery-leaf__meta {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        0.55rem;
}


.bl-gallery-leaf__meta > span {

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

    font-size:
        2.7rem;

    font-weight:
        700;

    line-height:
        0.8;

    letter-spacing:
        -0.07em;
}


.bl-gallery-leaf__meta > div {

    display:
        flex;

    flex-direction:
        column;
}


.bl-gallery-leaf__meta small {

    color:
        var(--bl-muted);

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-gallery-leaf__meta strong {

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

    font-size:
        0.72rem;

    font-weight:
        800;
}



/* =========================================================
   FEATURE COMPOSITION
========================================================= */

.bl-gallery-leaf__composition {

    position:
        relative;

    display:
        grid;

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

    grid-template-rows:
        minmax(
            580px,
            48vw
        );

    gap:
        clamp(
            1.25rem,
            3vw,
            3.5rem
        );

    align-items:
        center;
}



/* =========================================================
   VIDEO CARD
========================================================= */

.bl-leaf-video {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        100%;

    height:
        100%;

    min-width:
        0;

    overflow:
        hidden;

    color:
        var(--bl-surface);

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

    border-radius:
        46px 18px 46px 18px;

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

    opacity:
        0;

    clip-path:
        inset(
            8% 6% 8% 6%
            round 32px
        );

    transform:
        scale(0.985);

    transition:

        opacity
        700ms
        ease,

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

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

        box-shadow
        500ms
        ease;
}



/* =========================================================
   VIDEO MEDIA
========================================================= */

.bl-leaf-video__media {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;
}


.bl-leaf-video__media video {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.02);

    pointer-events:
        none;

    transition:

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

        filter
        500ms
        ease;
}


.bl-leaf-video__shade {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            rgba(
                var(--bl-forest-950-rgb),
                0.07
            )
            0%,

            transparent
            45%,

            rgba(
                var(--bl-forest-950-rgb),
                0.62
            )
            100%
        );
}



/* =========================================================
   VIDEO TOPLINE
========================================================= */

.bl-leaf-video__topline {

    position:
        absolute;

    z-index:
        4;

    top:
        1.2rem;

    left:
        1.2rem;

    right:
        1.2rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    pointer-events:
        none;
}


.bl-leaf-video__topline span {

    min-height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    padding:
        0.35rem
        0.65rem;

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

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

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

    border-radius:
        999px;

    backdrop-filter:
        blur(9px);

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

    font-size:
        0.58rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;
}



/* =========================================================
   PLAY
========================================================= */

.bl-leaf-video__play {

    position:
        absolute;

    z-index:
        5;

    left:
        clamp(
            1.2rem,
            2.5vw,
            2rem
        );

    bottom:
        clamp(
            1.2rem,
            2.5vw,
            2rem
        );

    display:
        flex;

    align-items:
        center;

    gap:
        0.95rem;

    pointer-events:
        none;
}


.bl-leaf-video__play-button {

    width:
        68px;

    height:
        68px;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

    border-radius:
        50%;

    box-shadow:
        0 16px 38px
        rgba(
            0,
            0,
            0,
            0.2
        );

    transition:

        color
        350ms
        ease,

        background-color
        350ms
        ease,

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


.bl-leaf-video__play-button svg {

    width:
        27px;

    height:
        27px;

    fill:
        currentColor;
}


.bl-leaf-video__play-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.08rem;

    text-shadow:
        0 2px 12px
        rgba(
            0,
            0,
            0,
            0.32
        );
}


.bl-leaf-video__play-copy small {

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

    font-size:
        0.58rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.bl-leaf-video__play-copy strong {

    color:
        var(--bl-surface);

    font-size:
        1.05rem;

    font-weight:
        700;
}



/* =========================================================
   VIDEO HOVER
========================================================= */

.bl-leaf-video:hover {

    transform:
        translateY(-5px);

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


.bl-leaf-video:hover
.bl-leaf-video__media video {

    transform:
        scale(1.055);

    filter:
        brightness(0.93);
}


.bl-leaf-video:hover
.bl-leaf-video__play-button {

    color:
        var(--bl-surface);

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

    transform:
        scale(1.08);
}


.bl-leaf-video:focus-visible {

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

    outline-offset:
        5px;
}



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

.bl-gallery-leaf__editorial {

    position:
        relative;

    z-index:
        5;

    width:
        100%;

    display:
        grid;

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

    align-items:
        start;

    gap:
        0.85rem;

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

    color:
        var(--bl-surface);

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

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

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

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

    opacity:
        0;

    transform:
        translateX(24px);
}


.bl-gallery-leaf__editorial-index {

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

    font-size:
        1.4rem;

    font-weight:
        800;

    line-height:
        1;
}


.bl-gallery-leaf__editorial-line {

    height:
        1px;

    margin-top:
        0.68rem;

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


.bl-gallery-leaf__editorial > div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.42rem;
}


.bl-gallery-leaf__editorial small {

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

    font-size:
        0.56rem;

    font-weight:
        800;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.bl-gallery-leaf__editorial strong {

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

    font-size:
        0.74rem;

    font-weight:
        600;

    line-height:
        1.65;
}



/* =========================================================
   VIDEO MARK
========================================================= */

.bl-gallery-leaf__video-mark {

    position:
        absolute;

    z-index:
        7;

    right:
        3%;

    bottom:
        8%;

    display:
        grid;

    grid-template-columns:
        36px
        auto;

    align-items:
        center;

    column-gap:
        0.65rem;

    row-gap:
        0.05rem;

    padding:
        0.8rem
        1rem;

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

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

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

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

    opacity:
        0;

    transform:
        translateY(15px);
}


.bl-gallery-leaf__video-mark > span {

    grid-row:
        1 / 3;

    width:
        36px;

    height:
        36px;

    border:
        1px solid
        var(--bl-clay-500);

    border-radius:
        50%;
}


.bl-gallery-leaf__video-mark small {

    color:
        var(--bl-muted);

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-gallery-leaf__video-mark strong {

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

    font-size:
        0.72rem;
}



/* =========================================================
   CONNECTOR
========================================================= */

.bl-gallery-leaf__connector {

    position:
        absolute;

    z-index:
        1;

    right:
        24%;

    bottom:
        10%;

    width:
        26%;

    height:
        150px;

    overflow:
        visible;

    pointer-events:
        none;
}


.bl-gallery-leaf__connector-shadow {

    fill:
        none;

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

    stroke-width:
        9;

    stroke-linecap:
        round;
}


.bl-gallery-leaf__connector-line {

    fill:
        none;

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

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-dasharray:
        600;

    stroke-dashoffset:
        600;

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



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

.bl-gallery-leaf.is-visible
.bl-gallery-leaf__eyebrow,

.bl-gallery-leaf.is-visible
.bl-gallery-leaf__title,

.bl-gallery-leaf.is-visible
.bl-gallery-leaf__intro {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-gallery-leaf.is-visible
.bl-gallery-leaf__eyebrow {

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


.bl-gallery-leaf.is-visible
.bl-gallery-leaf__title {

    transition:
        opacity 700ms ease 80ms,
        transform 900ms var(--bl-ease-organic) 80ms;
}


.bl-gallery-leaf.is-visible
.bl-gallery-leaf__intro {

    transition:
        opacity 680ms ease 160ms,
        transform 850ms var(--bl-ease-organic) 160ms;
}


.bl-gallery-leaf.is-visible
.bl-leaf-video {

    opacity:
        1;

    clip-path:
        inset(
            0
            round 0
        );

    transform:
        scale(1);

    transition-delay:
        220ms;
}


.bl-gallery-leaf.is-visible
.bl-gallery-leaf__editorial {

    opacity:
        1;

    transform:
        translateX(0);

    transition:

        opacity
        650ms
        ease
        380ms,

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


.bl-gallery-leaf.is-visible
.bl-gallery-leaf__video-mark {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        600ms
        ease
        560ms,

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


.bl-gallery-leaf.is-visible
.bl-gallery-leaf__connector-line {

    stroke-dashoffset:
        0;
}


.bl-gallery-leaf.is-visible
.bl-gallery-leaf__ghost-number {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        900ms
        ease
        200ms,

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



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

.bl-gallery-leaf__footer {

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.1rem;

    margin-top:
        clamp(
            2.6rem,
            4vw,
            4rem
        );
}


.bl-gallery-leaf__footer-line {

    height:
        1px;

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


.bl-gallery-leaf__footer p {

    color:
        var(--bl-muted);

    font-size:
        0.72rem;
}


.bl-gallery-leaf__footer a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

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

    font-size:
        0.76rem;

    font-weight:
        800;
}


.bl-gallery-leaf__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-gallery-leaf__footer a:hover svg {

    transform:
        translateX(5px);
}



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

html.bl-reduced-motion
.bl-gallery-leaf__eyebrow,

html.bl-reduced-motion
.bl-gallery-leaf__title,

html.bl-reduced-motion
.bl-gallery-leaf__intro,

html.bl-reduced-motion
.bl-leaf-video,

html.bl-reduced-motion
.bl-gallery-leaf__editorial,

html.bl-reduced-motion
.bl-gallery-leaf__video-mark,

html.bl-reduced-motion
.bl-gallery-leaf__ghost-number {

    opacity:
        1;

    transform:
        none;

    clip-path:
        none;
}


html.bl-reduced-motion
.bl-gallery-leaf__connector-line {

    stroke-dashoffset:
        0;

    transition:
        none;
}



/* =========================================================
   FULLSCREEN LEAF VIEWER
========================================================= */

.bl-leaf-viewer {

    position:
        fixed;

    inset:
        0;

    z-index:
        13100;

    width:
        100%;

    height:
        100vh;

    height:
        100svh;

    display:
        grid;

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

    overflow:
        hidden;

    isolation:
        isolate;

    color:
        var(--bl-surface);

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

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:

        opacity
        350ms
        ease,

        visibility
        350ms
        step-end;
}


.bl-leaf-viewer[hidden] {

    display:
        none;
}


.bl-leaf-viewer.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transition:

        opacity
        350ms
        ease,

        visibility
        0ms
        step-start;
}



/* =========================================================
   VIEWER BACKDROP
========================================================= */

.bl-leaf-viewer__backdrop {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background:

        radial-gradient(
            circle at 18% 18%,
            rgba(
                var(--bl-sage-rgb),
                0.09
            ),
            transparent 32rem
        ),

        radial-gradient(
            circle at 86% 86%,
            rgba(
                var(--bl-clay-rgb),
                0.075
            ),
            transparent 28rem
        ),

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



/* =========================================================
   VIEWER TOP
========================================================= */

.bl-leaf-viewer__top {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        0.9rem
        var(--bl-gutter);

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


.bl-leaf-viewer__identity {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.05rem;
}


.bl-leaf-viewer__identity small {

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

    font-size:
        0.56rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.bl-leaf-viewer__identity strong {

    color:
        var(--bl-surface);

    font-size:
        0.88rem;
}



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

.bl-leaf-viewer__actions {

    display:
        flex;

    align-items:
        center;

    gap:
        0.65rem;
}


.bl-leaf-viewer__fullscreen {

    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.5rem;

    padding:
        0.6rem
        0.85rem;

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

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

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

    border-radius:
        999px;
}


.bl-leaf-viewer__fullscreen svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;
}


.bl-leaf-viewer__fullscreen:hover {

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

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



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

.bl-leaf-viewer__close {

    position:
        relative;

    width:
        44px;

    height:
        44px;

    flex:
        0 0 auto;

    color:
        var(--bl-surface);

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

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

    border-radius:
        50%;
}


.bl-leaf-viewer__close span {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        17px;

    height:
        1.5px;

    background:
        currentColor;
}


.bl-leaf-viewer__close span:first-child {

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


.bl-leaf-viewer__close span:last-child {

    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}


.bl-leaf-viewer__close:hover {

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

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



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

.bl-leaf-viewer__stage {

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        clamp(
            0.8rem,
            2vw,
            1.5rem
        )
        var(--bl-gutter);
}


.bl-leaf-viewer__video-shell {

    width:
        min(
            100%,
            1280px
        );

    height:
        100%;

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #000;

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

    border-radius:
        clamp(
            12px,
            1.7vw,
            24px
        );

    box-shadow:
        0 32px 85px
        rgba(
            0,
            0,
            0,
            0.32
        );
}


.bl-leaf-viewer__video {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-height:
        calc(
            100svh
            -
            175px
        );

    object-fit:
        contain;

    background:
        #000;
}



/* =========================================================
   VIEWER BOTTOM
========================================================= */

.bl-leaf-viewer__bottom {

    min-height:
        72px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        1rem;

    padding:
        0.8rem
        var(--bl-gutter);

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


.bl-leaf-viewer__counter {

    display:
        grid;

    grid-template-columns:
        auto
        minmax(30px, 70px)
        auto;

    align-items:
        center;

    gap:
        0.6rem;

    justify-self:
        start;
}


.bl-leaf-viewer__counter strong {

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

    font-size:
        1rem;
}


.bl-leaf-viewer__counter > span {

    height:
        1px;

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


.bl-leaf-viewer__counter small {

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

    font-size:
        0.65rem;
}


.bl-leaf-viewer__info {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


.bl-leaf-viewer__info small {

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

    font-size:
        0.5rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.bl-leaf-viewer__info strong {

    color:
        var(--bl-surface);

    font-size:
        0.72rem;
}


.bl-leaf-viewer__keyboard {

    justify-self:
        end;

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

    font-size:
        0.58rem;
}



/* =========================================================
   LIVE
========================================================= */

.bl-leaf-viewer__live {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    clip:
        rect(0 0 0 0);

    white-space:
        nowrap;
}



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

html.bl-leaf-video-open {

    overflow:
        hidden;
}


body.bl-leaf-video-open {

    position:
        fixed;

    width:
        100%;
}



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

html.bl-reduced-motion
.bl-leaf-viewer,

html.bl-reduced-motion
.bl-leaf-viewer * {

    transition:
        none;
}



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

@media (min-width: 1200px) {

    .bl-gallery-leaf__composition {

        max-height:
            850px;
    }

}



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

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

    .bl-gallery-leaf {

        padding:
            5.5rem 0;
    }


    .bl-gallery-leaf__header {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(270px, 0.9fr);

        gap:
            3rem;
    }


    .bl-gallery-leaf__title {

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


    .bl-gallery-leaf__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-leaf__composition {

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

        grid-template-rows:
            600px;

        gap:
            1.5rem;
    }


    .bl-gallery-leaf__video-mark {

        right:
            1%;
    }

}



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

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

    .bl-gallery-leaf {

        padding:
            4.8rem 0;
    }


    .bl-gallery-leaf__header {

        grid-template-columns:
            1fr;

        gap:
            1.3rem;

        margin-bottom:
            2.8rem;
    }


    .bl-gallery-leaf__title {

        max-width:
            560px;

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


    .bl-gallery-leaf__intro {

        align-items:
            center;

        flex-direction:
            row;
    }


    .bl-gallery-leaf__intro p {

        max-width:
            500px;

        font-size:
            0.86rem;
    }


    .bl-gallery-leaf__composition {

        grid-template-columns:
            1fr;

        grid-template-rows:
            500px
            auto;

        gap:
            1rem;
    }


    .bl-leaf-video {

        grid-row:
            1;

        border-radius:
            30px 16px 30px 16px;
    }


    .bl-gallery-leaf__editorial {

        grid-row:
            2;

        transform:
            translateY(20px);
    }


    .bl-gallery-leaf.is-visible
    .bl-gallery-leaf__editorial {

        transform:
            translateY(0);
    }


    .bl-gallery-leaf__video-mark,
    .bl-gallery-leaf__connector {

        display:
            none;
    }


    .bl-gallery-leaf__footer {

        grid-template-columns:
            1fr
            auto;
    }


    .bl-gallery-leaf__footer-line {

        grid-column:
            1 / -1;
    }


    .bl-leaf-viewer__stage {

        padding:
            0.8rem
            1rem;
    }


    .bl-leaf-viewer__video {

        max-height:
            calc(
                100svh
                -
                165px
            );
    }

}



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

@media (max-width: 480px) {

    .bl-gallery-leaf {

        padding:
            4.2rem 0;
    }


    .bl-gallery-leaf__header {

        grid-template-columns:
            1fr;

        gap:
            1.2rem;

        margin-bottom:
            2.4rem;
    }


    .bl-gallery-leaf__eyebrow {

        font-size:
            0.62rem;
    }


    .bl-gallery-leaf__title {

        max-width:
            400px;

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


    .bl-gallery-leaf__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-leaf__intro p {

        font-size:
            0.81rem;

        line-height:
            1.65;
    }


    .bl-gallery-leaf__composition {

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            420px
            auto;

        gap:
            0.85rem;
    }


    .bl-leaf-video {

        grid-row:
            1;

        border-radius:
            18px;
    }


    .bl-leaf-video__topline {

        top:
            0.7rem;

        left:
            0.7rem;

        right:
            0.7rem;
    }


    .bl-leaf-video__play {

        left:
            0.85rem;

        bottom:
            0.85rem;
    }


    .bl-leaf-video__play-button {

        width:
            52px;

        height:
            52px;
    }


    .bl-leaf-video__play-button svg {

        width:
            21px;

        height:
            21px;
    }


    .bl-leaf-video__play-copy strong {

        font-size:
            0.8rem;
    }


    .bl-gallery-leaf__editorial {

        grid-row:
            2;

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

        padding:
            1rem;

        transform:
            translateY(20px);
    }


    .bl-gallery-leaf.is-visible
    .bl-gallery-leaf__editorial {

        transform:
            translateY(0);
    }


    .bl-gallery-leaf__video-mark,
    .bl-gallery-leaf__connector {

        display:
            none;
    }


    .bl-gallery-leaf__ghost-number {

        right:
            -20%;

        top:
            25%;

        font-size:
            12rem;
    }


    .bl-gallery-leaf__botanical {

        right:
            -55px;

        width:
            105px;
    }


    .bl-gallery-leaf__footer {

        grid-template-columns:
            1fr;

        gap:
            0.65rem;

        margin-top:
            2.4rem;
    }


    /* -----------------------------------------
       FULLSCREEN VIEWER
    ----------------------------------------- */

    .bl-leaf-viewer__top {

        min-height:
            62px;

        padding:
            0.65rem
            0.8rem;
    }


    .bl-leaf-viewer__fullscreen {

        width:
            40px;

        height:
            40px;

        min-height:
            40px;

        padding:
            0;
    }


    .bl-leaf-viewer__fullscreen span {

        display:
            none;
    }


    .bl-leaf-viewer__close {

        width:
            40px;

        height:
            40px;
    }


    .bl-leaf-viewer__stage {

        padding:
            0.65rem;
    }


    .bl-leaf-viewer__video-shell {

        border-radius:
            11px;
    }


    .bl-leaf-viewer__video {

        max-height:
            calc(
                100svh
                -
                150px
            );
    }


    .bl-leaf-viewer__bottom {

        min-height:
            55px;

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

        gap:
            0.7rem;

        padding:
            0.55rem
            0.8rem
            max(
                0.55rem,
                env(safe-area-inset-bottom)
            );
    }


    .bl-leaf-viewer__counter {

        grid-template-columns:
            auto
            22px
            auto;

        gap:
            0.4rem;
    }


    .bl-leaf-viewer__info {

        align-items:
            flex-end;

        min-width:
            0;

        text-align:
            right;
    }


    .bl-leaf-viewer__info strong {

        max-width:
            185px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        font-size:
            0.64rem;
    }


    .bl-leaf-viewer__keyboard {

        display:
            none;
    }

}




































/* =========================================================
   10. GRASS CUTTING
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-gallery-grass {

    --bl-grass-feature-y:
        0px;

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    scroll-margin-top:
        calc(
            var(--bl-first-screen-chrome-height)
            +
            24px
        );

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

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



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

.bl-gallery-grass::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
        ),

        linear-gradient(
            165deg,
            rgba(
                var(--bl-sage-rgb),
                0.05
            )
            0%,
            rgba(
                var(--bl-sage-rgb),
                0
            )
            24%,
            rgba(
                var(--bl-sage-rgb),
                0.05
            )
            48%,
            rgba(
                var(--bl-sage-rgb),
                0
            )
            72%,
            rgba(
                var(--bl-sage-rgb),
                0.045
            )
            100%
        ),

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

        radial-gradient(
            circle at 8% 86%,
            rgba(
                var(--bl-clay-rgb),
                0.05
            ),
            transparent
            28rem
        );

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



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

.bl-gallery-grass__topography {

    position:
        absolute;

    z-index:
        -9;

    right:
        -8%;

    top:
        0;

    width:
        min(
            72vw,
            1180px
        );

    height:
        100%;

    fill:
        none;

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

    stroke-width:
        1.05;

    pointer-events:
        none;
}



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

.bl-gallery-grass__terrain {

    position:
        absolute;

    z-index:
        -8;

    left:
        -20%;

    bottom:
        -22%;

    width:
        min(
            54vw,
            820px
        );

    aspect-ratio:
        1.2;

    border-radius:
        68% 32% 0 0 /
        76% 62% 0 0;

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

    opacity:
        0.78;

    transform:
        rotate(7deg);

    pointer-events:
        none;
}



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

.bl-gallery-grass__orbit {

    position:
        absolute;

    z-index:
        -5;

    left:
        4%;

    top:
        10%;

    width:
        70px;

    height:
        70px;

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

    border-radius:
        50%;

    pointer-events:
        none;
}


.bl-gallery-grass__orbit span {

    position:
        absolute;

    left:
        -5px;

    bottom:
        12px;

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

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



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

.bl-gallery-grass__botanical {

    position:
        absolute;

    z-index:
        -5;

    right:
        -28px;

    top:
        24%;

    width:
        clamp(
            110px,
            13vw,
            190px
        );

    height:
        auto;

    fill:
        none;

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

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    pointer-events:
        none;
}



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

.bl-gallery-grass__inner {

    position:
        relative;

    z-index:
        2;
}



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

.bl-gallery-grass__header {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.16fr)
        minmax(300px, 0.84fr);

    align-items:
        end;

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

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



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

.bl-gallery-grass__eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-bottom:
        0.85rem;

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

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-gallery-grass__eyebrow > span {

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


.bl-gallery-grass__eyebrow i {

    width:
        38px;

    height:
        1px;

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


.bl-gallery-grass__eyebrow strong {

    font-size:
        inherit;

    font-weight:
        800;
}



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

.bl-gallery-grass__title {

    max-width:
        760px;

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

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

    line-height:
        0.97;

    letter-spacing:
        -0.06em;

    opacity:
        0;

    transform:
        translateY(25px);
}


.bl-gallery-grass__title span {

    display:
        block;

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



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

.bl-gallery-grass__intro {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        2rem;

    opacity:
        0;

    transform:
        translateY(20px);
}


.bl-gallery-grass__intro p {

    max-width:
        450px;

    color:
        var(--bl-muted);

    font-size:
        0.91rem;

    line-height:
        1.75;
}



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

.bl-gallery-grass__meta {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        0.55rem;
}


.bl-gallery-grass__meta > span {

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

    font-size:
        2.7rem;

    font-weight:
        700;

    line-height:
        0.8;

    letter-spacing:
        -0.07em;
}


.bl-gallery-grass__meta > div {

    display:
        flex;

    flex-direction:
        column;

    padding-bottom:
        0.08rem;
}


.bl-gallery-grass__meta small {

    color:
        var(--bl-muted);

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-gallery-grass__meta strong {

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

    font-size:
        0.72rem;

    font-weight:
        800;
}



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

.bl-gallery-grass__grid {

    position:
        relative;

    display:
        grid;

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

    grid-template-rows:
        minmax(280px, 29vw)
        minmax(220px, 22vw)
        minmax(235px, 23vw);

    gap:
        clamp(
            0.9rem,
            1.5vw,
            1.45rem
        );
}



/* =========================================================
   COMMON PHOTO
========================================================= */

.bl-grass-photo {

    position:
        relative;

    display:
        block;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    color:
        inherit;

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

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

    box-shadow:
        0 14px 36px
        rgba(
            var(--bl-forest-950-rgb),
            0.08
        );

    opacity:
        0;

    transform:
        translateY(30px);

    transition:

        opacity
        700ms
        ease,

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

        box-shadow
        500ms
        ease;
}


.bl-grass-photo figure {

    width:
        100%;

    height:
        100%;

    margin:
        0;
}



/* =========================================================
   PLACEMENT
========================================================= */

.bl-grass-photo--feature {

    grid-column:
        1 / 9;

    grid-row:
        1;

    border-radius:
        42px 18px 42px 18px;
}


.bl-grass-photo--tall {

    grid-column:
        9 / 13;

    grid-row:
        1 / 3;

    border-radius:
        18px 42px 18px 18px;
}


.bl-grass-photo--left {

    grid-column:
        1 / 4;

    grid-row:
        2;

    border-radius:
        18px 18px 34px 18px;
}


.bl-grass-photo--center {

    grid-column:
        4 / 9;

    grid-row:
        2;

    border-radius:
        18px 34px 18px 34px;
}


.bl-grass-photo--right {

    grid-column:
        3 / 10;

    grid-row:
        3;

    border-radius:
        34px 18px 34px 18px;
}



/* =========================================================
   MEDIA
========================================================= */

.bl-grass-photo__media {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;
}


.bl-grass-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.02);

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


.bl-grass-photo--feature img {

    transform:
        translate3d(
            0,
            var(--bl-grass-feature-y),
            0
        )
        scale(1.04);
}



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

.bl-grass-photo__shade {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

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



/* =========================================================
   CAPTION
========================================================= */

.bl-grass-photo figcaption {

    position:
        absolute;

    z-index:
        4;

    left:
        1rem;

    bottom:
        1rem;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

    padding:
        0.4rem
        0.65rem;

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

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

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

    border-radius:
        999px;

    backdrop-filter:
        blur(9px);

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

    opacity:
        0;

    transform:
        translateY(8px);

    transition:

        opacity
        380ms
        ease,

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


.bl-grass-photo figcaption span {

    font-size:
        0.57rem;

    font-weight:
        800;
}


.bl-grass-photo figcaption strong {

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

    font-size:
        0.54rem;

    font-weight:
        800;

    letter-spacing:
        0.05em;
}



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

.bl-grass-photo__view {

    position:
        absolute;

    z-index:
        5;

    top:
        1rem;

    right:
        1rem;

    width:
        43px;

    height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

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

    border-radius:
        50%;

    backdrop-filter:
        blur(9px);

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

    opacity:
        0;

    transform:
        scale(0.8);

    transition:

        opacity
        350ms
        ease,

        color
        350ms
        ease,

        background-color
        350ms
        ease,

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


.bl-grass-photo__view svg {

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



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

.bl-grass-photo:hover {

    z-index:
        9;

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 56px
        rgba(
            var(--bl-forest-950-rgb),
            0.14
        );
}


.bl-grass-photo:hover img {

    transform:
        scale(1.07);
}


.bl-grass-photo--feature:hover img {

    transform:
        translate3d(
            0,
            var(--bl-grass-feature-y),
            0
        )
        scale(1.075);
}


.bl-grass-photo:hover
figcaption {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-grass-photo:hover
.bl-grass-photo__view {

    opacity:
        1;

    transform:
        scale(1);
}


.bl-grass-photo__view:hover {

    color:
        var(--bl-surface);

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



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

.bl-grass-photo:focus-visible {

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

    outline-offset:
        5px;
}



/* =========================================================
   LABEL
========================================================= */

.bl-gallery-grass__label {

    position:
        absolute;

    z-index:
        10;

    right:
        6%;

    bottom:
        calc(23vw + 1.8rem);

    display:
        flex;

    align-items:
        center;

    gap:
        0.8rem;

    padding:
        0.75rem
        0.95rem;

    color:
        var(--bl-surface);

    background:
        rgba(
            var(--bl-forest-950-rgb),
            0.92
        );

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

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

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

    backdrop-filter:
        blur(10px);

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

    opacity:
        0;

    transform:
        translateY(18px);
}


.bl-gallery-grass__label-number {

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

    font-size:
        1.25rem;

    font-weight:
        800;
}


.bl-gallery-grass__label-line {

    width:
        30px;

    height:
        1px;

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


.bl-gallery-grass__label > div {

    display:
        flex;

    flex-direction:
        column;
}


.bl-gallery-grass__label small {

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

    font-size:
        0.54rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-gallery-grass__label strong {

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

    font-size:
        0.74rem;

    font-weight:
        800;
}



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

.bl-gallery-grass__footer {

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.1rem;

    margin-top:
        clamp(
            2.6rem,
            4vw,
            4rem
        );
}


.bl-gallery-grass__footer-line {

    height:
        1px;

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


.bl-gallery-grass__footer p {

    color:
        var(--bl-muted);

    font-size:
        0.72rem;
}


.bl-gallery-grass__footer a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.55rem;

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

    font-size:
        0.76rem;

    font-weight:
        800;
}


.bl-gallery-grass__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-gallery-grass__footer a:hover svg {

    transform:
        translateX(-5px);
}



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

.bl-gallery-grass.is-visible
.bl-gallery-grass__eyebrow {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease,

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


.bl-gallery-grass.is-visible
.bl-gallery-grass__title {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        700ms
        ease
        80ms,

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


.bl-gallery-grass.is-visible
.bl-gallery-grass__intro {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        680ms
        ease
        160ms,

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


.bl-gallery-grass.is-visible
.bl-grass-photo {

    opacity:
        1;

    transform:
        translateY(0);
}


.bl-gallery-grass.is-visible
.bl-grass-photo:nth-child(1) {

    transition-delay:
        210ms;
}


.bl-gallery-grass.is-visible
.bl-grass-photo:nth-child(2) {

    transition-delay:
        290ms;
}


.bl-gallery-grass.is-visible
.bl-grass-photo:nth-child(3) {

    transition-delay:
        360ms;
}


.bl-gallery-grass.is-visible
.bl-grass-photo:nth-child(4) {

    transition-delay:
        430ms;
}


.bl-gallery-grass.is-visible
.bl-grass-photo:nth-child(5) {

    transition-delay:
        500ms;
}


.bl-gallery-grass.is-visible
.bl-gallery-grass__label {

    opacity:
        1;

    transform:
        translateY(0);

    transition:

        opacity
        650ms
        ease
        580ms,

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



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

html.bl-reduced-motion
.bl-gallery-grass__eyebrow,

html.bl-reduced-motion
.bl-gallery-grass__title,

html.bl-reduced-motion
.bl-gallery-grass__intro,

html.bl-reduced-motion
.bl-grass-photo,

html.bl-reduced-motion
.bl-gallery-grass__label {

    opacity:
        1;

    transform:
        none;
}


html.bl-reduced-motion
.bl-grass-photo img {

    transform:
        none;
}



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

@media (min-width: 1200px) {

    .bl-gallery-grass__grid {

        max-height:
            1280px;
    }

}



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

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

    .bl-gallery-grass {

        padding:
            5.5rem 0;
    }


    .bl-gallery-grass__header {

        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(270px, 0.9fr);

        gap:
            3rem;
    }


    .bl-gallery-grass__title {

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


    .bl-gallery-grass__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-grass__grid {

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

        grid-template-rows:
            370px
            250px
            280px;
    }


    .bl-grass-photo--feature {

        grid-column:
            1 / 6;

        grid-row:
            1;
    }


    .bl-grass-photo--tall {

        grid-column:
            6 / 9;

        grid-row:
            1 / 3;
    }


    .bl-grass-photo--left {

        grid-column:
            1 / 3;

        grid-row:
            2;
    }


    .bl-grass-photo--center {

        grid-column:
            3 / 6;

        grid-row:
            2;
    }


    .bl-grass-photo--right {

        grid-column:
            2 / 7;

        grid-row:
            3;
    }


    .bl-gallery-grass__label {

        right:
            1.5rem;

        bottom:
            298px;
    }

}



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

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

    .bl-gallery-grass {

        padding:
            4.8rem 0;
    }


    .bl-gallery-grass__header {

        grid-template-columns:
            1fr;

        gap:
            1.3rem;

        margin-bottom:
            2.7rem;
    }


    .bl-gallery-grass__title {

        max-width:
            560px;

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


    .bl-gallery-grass__intro {

        align-items:
            center;

        flex-direction:
            row;
    }


    .bl-gallery-grass__intro p {

        max-width:
            500px;

        font-size:
            0.86rem;
    }


    .bl-gallery-grass__grid {

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

        grid-template-rows:
            410px
            280px
            260px
            290px;
    }


    .bl-grass-photo--feature {

        grid-column:
            1 / -1;

        grid-row:
            1;
    }


    .bl-grass-photo--tall {

        grid-column:
            1;

        grid-row:
            2 / 4;
    }


    .bl-grass-photo--left {

        grid-column:
            2;

        grid-row:
            2;
    }


    .bl-grass-photo--center {

        grid-column:
            2;

        grid-row:
            3;
    }


    .bl-grass-photo--right {

        grid-column:
            1 / -1;

        grid-row:
            4;
    }


    .bl-grass-photo figcaption,
    .bl-grass-photo__view {

        opacity:
            1;

        transform:
            none;
    }


    .bl-gallery-grass__label {

        display:
            none;
    }


    .bl-gallery-grass__footer {

        grid-template-columns:
            1fr
            auto;
    }


    .bl-gallery-grass__footer-line {

        grid-column:
            1 / -1;
    }

}



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

@media (max-width: 480px) {

    .bl-gallery-grass {

        padding:
            4.2rem 0;
    }


    .bl-gallery-grass__header {

        grid-template-columns:
            1fr;

        gap:
            1.2rem;

        margin-bottom:
            2.4rem;
    }


    .bl-gallery-grass__eyebrow {

        font-size:
            0.62rem;
    }


    .bl-gallery-grass__title {

        max-width:
            400px;

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


    .bl-gallery-grass__intro {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1rem;
    }


    .bl-gallery-grass__intro p {

        font-size:
            0.81rem;

        line-height:
            1.65;
    }


    .bl-gallery-grass__grid {

        display:
            grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            none;

        gap:
            0.85rem;
    }


    .bl-grass-photo--feature,
    .bl-grass-photo--tall,
    .bl-grass-photo--left,
    .bl-grass-photo--center,
    .bl-grass-photo--right {

        grid-column:
            auto;

        grid-row:
            auto;

        width:
            100%;

        border-radius:
            18px;
    }


    .bl-grass-photo--feature {

        height:
            360px;
    }


    .bl-grass-photo--tall {

        height:
            300px;
    }


    .bl-grass-photo--left,
    .bl-grass-photo--center,
    .bl-grass-photo--right {

        height:
            270px;
    }


    .bl-grass-photo figcaption {

        left:
            0.7rem;

        bottom:
            0.7rem;

        opacity:
            1;

        transform:
            none;
    }


    .bl-grass-photo__view {

        top:
            0.7rem;

        right:
            0.7rem;

        width:
            38px;

        height:
            38px;

        opacity:
            1;

        transform:
            none;
    }


    .bl-gallery-grass__label {

        display:
            none;
    }


    .bl-gallery-grass__botanical {

        right:
            -52px;

        width:
            100px;
    }


    .bl-gallery-grass__orbit {

        left:
            -18px;

        width:
            54px;

        height:
            54px;
    }


    .bl-gallery-grass__footer {

        grid-template-columns:
            1fr;

        gap:
            0.65rem;

        margin-top:
            2.4rem;
    }


    .bl-gallery-grass__footer p {

        font-size:
            0.69rem;
    }

}








































/* =========================================================
   12. FULLSCREEN IMAGE VIEWER
   BROTHER'S LANDSCAPING
========================================================= */


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

.bl-gallery-viewer {

    position:
        fixed;

    inset:
        0;

    z-index:
        12000;

    width:
        100%;

    height:
        100vh;

    height:
        100svh;

    display:
        grid;

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

    overflow:
        hidden;

    color:
        var(--bl-surface);

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

    isolation:
        isolate;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:

        opacity
        380ms
        ease,

        visibility
        380ms
        step-end;
}


.bl-gallery-viewer[hidden] {

    display:
        none;
}


.bl-gallery-viewer.is-mounted {

    display:
        grid;
}


.bl-gallery-viewer.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transition:

        opacity
        420ms
        ease,

        visibility
        0ms
        step-start;
}



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

.bl-gallery-viewer__backdrop {

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    background:

        radial-gradient(
            circle at 76% 18%,
            rgba(
                var(--bl-sage-rgb),
                0.08
            ),
            transparent
            34rem
        ),

        radial-gradient(
            circle at 11% 86%,
            rgba(
                var(--bl-clay-rgb),
                0.075
            ),
            transparent
            30rem
        ),

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



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

.bl-gallery-viewer__backdrop::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    opacity:
        0.45;

    background-image:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.06
            )
            0.65px,
            transparent
            0.75px
        );

    background-size:
        18px 18px;
}



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

.bl-gallery-viewer__topography {

    position:
        absolute;

    z-index:
        -8;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    fill:
        none;

    stroke:
        rgba(
            255,
            255,
            255,
            0.038
        );

    stroke-width:
        1;

    pointer-events:
        none;
}



/* =========================================================
   TOP BAR
========================================================= */

.bl-gallery-viewer__top {

    position:
        relative;

    z-index:
        10;

    min-height:
        92px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        1.5rem;

    padding:
        1.2rem
        var(--bl-gutter);

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

    opacity:
        0;

    transform:
        translateY(-15px);

    transition:

        opacity
        600ms
        ease
        160ms,

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


.bl-gallery-viewer.is-open
.bl-gallery-viewer__top {

    opacity:
        1;

    transform:
        translateY(0);
}



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

.bl-gallery-viewer__brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.75rem;

    justify-self:
        start;

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

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.02em;
}


.bl-gallery-viewer__brand-mark {

    width:
        36px;

    height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

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

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

    border-radius:
        50%;

    font-size:
        0.62rem;

    font-weight:
        800;
}



/* =========================================================
   CATEGORY
========================================================= */

.bl-gallery-viewer__category {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.05rem;

    text-align:
        center;
}


.bl-gallery-viewer__category small {

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

    font-size:
        0.54rem;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.bl-gallery-viewer__category strong {

    color:
        var(--bl-surface);

    font-size:
        0.84rem;

    font-weight:
        700;
}



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

.bl-gallery-viewer__close {

    position:
        relative;

    width:
        48px;

    height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    justify-self:
        end;

    color:
        var(--bl-surface);

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

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

    border-radius:
        50%;

    cursor:
        pointer;

    transition:

        color
        350ms
        ease,

        background-color
        350ms
        ease,

        border-color
        350ms
        ease,

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


.bl-gallery-viewer__close span {

    position:
        absolute;

    width:
        17px;

    height:
        1.5px;

    border-radius:
        999px;

    background:
        currentColor;
}


.bl-gallery-viewer__close span:first-child {

    transform:
        rotate(45deg);
}


.bl-gallery-viewer__close span:last-child {

    transform:
        rotate(-45deg);
}


.bl-gallery-viewer__close:hover {

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

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

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

    transform:
        rotate(4deg);
}



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

.bl-gallery-viewer__stage {

    position:
        relative;

    z-index:
        5;

    min-height:
        0;

    display:
        grid;

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

    align-items:
        center;

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

    padding:
        clamp(1rem, 2.3vw, 2.25rem)
        var(--bl-gutter);
}



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

.bl-gallery-viewer__image-shell {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        0;

    transform:
        scale(0.965);

    transition:

        opacity
        600ms
        ease
        100ms,

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


.bl-gallery-viewer.is-open
.bl-gallery-viewer__image-shell {

    opacity:
        1;

    transform:
        scale(1);
}



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

.bl-gallery-viewer__image-frame {

    position:
        relative;

    max-width:
        100%;

    max-height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

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

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

    border-radius:
        clamp(
            12px,
            1.7vw,
            24px
        );

    box-shadow:
        0 32px 85px
        rgba(
            0,
            0,
            0,
            0.31
        );
}



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

.bl-gallery-viewer__image {

    display:
        block;

    max-width:
        min(
            100%,
            1220px
        );

    max-height:
        calc(
            100svh
            -
            245px
        );

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-drag:
        none;

    opacity:
        1;

    transform:
        scale(1);

    transition:

        opacity
        220ms
        ease,

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


.bl-gallery-viewer__image.is-changing {

    opacity:
        0;

    transform:
        scale(0.985);
}



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

.bl-gallery-viewer__image-corner {

    position:
        absolute;

    width:
        44px;

    height:
        44px;

    pointer-events:
        none;
}


.bl-gallery-viewer__image-corner::before,
.bl-gallery-viewer__image-corner::after {

    content:
        "";

    position:
        absolute;

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


.bl-gallery-viewer__image-corner::before {

    width:
        30px;

    height:
        1px;
}


.bl-gallery-viewer__image-corner::after {

    width:
        1px;

    height:
        30px;
}


.bl-gallery-viewer__image-corner--one {

    top:
        -13px;

    left:
        -13px;
}


.bl-gallery-viewer__image-corner--one::before,
.bl-gallery-viewer__image-corner--one::after {

    left:
        0;

    top:
        0;
}


.bl-gallery-viewer__image-corner--two {

    right:
        -13px;

    bottom:
        -13px;

    transform:
        rotate(180deg);
}


.bl-gallery-viewer__image-corner--two::before,
.bl-gallery-viewer__image-corner--two::after {

    left:
        0;

    top:
        0;
}



/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.bl-gallery-viewer__nav {

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.5rem;

    justify-self:
        center;

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

    background:
        transparent;

    border:
        0;

    cursor:
        pointer;

    opacity:
        0;

    transition:

        opacity
        500ms
        ease
        260ms,

        color
        350ms
        ease,

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


.bl-gallery-viewer.is-open
.bl-gallery-viewer__nav {

    opacity:
        1;
}


.bl-gallery-viewer__nav svg {

    width:
        42px;

    height:
        42px;

    padding:
        10px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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

    border-radius:
        50%;

    transition:

        color
        350ms
        ease,

        background-color
        350ms
        ease,

        border-color
        350ms
        ease;
}


.bl-gallery-viewer__nav span {

    font-size:
        0.61rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.bl-gallery-viewer__nav:hover {

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


.bl-gallery-viewer__nav--prev:hover {

    transform:
        translateX(-5px);
}


.bl-gallery-viewer__nav--next:hover {

    transform:
        translateX(5px);
}


.bl-gallery-viewer__nav:hover svg {

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

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

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



/* =========================================================
   BOTTOM
========================================================= */

.bl-gallery-viewer__bottom {

    position:
        relative;

    z-index:
        10;

    min-height:
        82px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        2rem;

    padding:
        1rem
        var(--bl-gutter);

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

    opacity:
        0;

    transform:
        translateY(15px);

    transition:

        opacity
        600ms
        ease
        190ms,

        transform
        760ms
        var(--bl-ease-organic)
        190ms;
}


.bl-gallery-viewer.is-open
.bl-gallery-viewer__bottom {

    opacity:
        1;

    transform:
        translateY(0);
}



/* =========================================================
   COUNTER
========================================================= */

.bl-gallery-viewer__counter {

    display:
        grid;

    grid-template-columns:
        auto
        minmax(30px, 76px)
        auto;

    align-items:
        center;

    gap:
        0.7rem;

    justify-self:
        start;
}


.bl-gallery-viewer__current {

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

    font-size:
        1rem;

    font-weight:
        800;
}


.bl-gallery-viewer__total {

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

    font-size:
        0.68rem;

    font-weight:
        700;
}


.bl-gallery-viewer__counter-line {

    height:
        1px;

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



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

.bl-gallery-viewer__description {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.08rem;

    text-align:
        center;
}


.bl-gallery-viewer__description span {

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

    font-size:
        0.52rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.bl-gallery-viewer__description strong {

    color:
        var(--bl-surface);

    font-size:
        0.72rem;

    font-weight:
        700;
}



/* =========================================================
   KEYBOARD CONTROLS
========================================================= */

.bl-gallery-viewer__controls {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        1.1rem;

    justify-self:
        end;

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

    font-size:
        0.58rem;

    font-weight:
        600;
}


.bl-gallery-viewer__controls span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.28rem;
}


.bl-gallery-viewer__controls kbd {

    min-width:
        25px;

    height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 0.3rem;

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

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

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

    border-radius:
        5px;

    font-family:
        inherit;

    font-size:
        0.54rem;
}



/* =========================================================
   MOBILE CONTROLS
========================================================= */

.bl-gallery-viewer__mobile-controls {

    display:
        none;
}


.bl-gallery-viewer__mobile-controls button {

    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.55rem;

    color:
        var(--bl-surface);

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

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

    border-radius:
        999px;

    font-size:
        0.68rem;

    font-weight:
        700;
}


.bl-gallery-viewer__mobile-controls svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* =========================================================
   LIVE REGION
========================================================= */

.bl-gallery-viewer__live {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

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

    white-space:
        nowrap;

    border:
        0;
}



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

html.bl-gallery-viewer-open {

    overflow:
        hidden;
}


body.bl-gallery-viewer-open {

    position:
        fixed;

    width:
        100%;

    overflow:
        hidden;
}



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

.bl-gallery-viewer button:focus-visible {

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

    outline-offset:
        4px;
}



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

html.bl-reduced-motion
.bl-gallery-viewer,

html.bl-reduced-motion
.bl-gallery-viewer__top,

html.bl-reduced-motion
.bl-gallery-viewer__bottom,

html.bl-reduced-motion
.bl-gallery-viewer__image-shell,

html.bl-reduced-motion
.bl-gallery-viewer__nav,

html.bl-reduced-motion
.bl-gallery-viewer__image {

    transition:
        none;
}


html.bl-reduced-motion
.bl-gallery-viewer__top,

html.bl-reduced-motion
.bl-gallery-viewer__bottom,

html.bl-reduced-motion
.bl-gallery-viewer__image-shell {

    transform:
        none;
}



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

@media (min-width: 1200px) {

    .bl-gallery-viewer__stage {

        padding-left:
            clamp(
                2rem,
                4vw,
                5rem
            );

        padding-right:
            clamp(
                2rem,
                4vw,
                5rem
            );
    }

}



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

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

    .bl-gallery-viewer__top {

        min-height:
            80px;
    }


    .bl-gallery-viewer__stage {

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

        gap:
            1rem;

        padding:
            1.2rem
            1.4rem;
    }


    .bl-gallery-viewer__image {

        max-height:
            calc(
                100svh
                -
                220px
            );
    }


    .bl-gallery-viewer__nav span {

        display:
            none;
    }


    .bl-gallery-viewer__bottom {

        min-height:
            76px;

        padding:
            0.85rem
            1.5rem;
    }


    .bl-gallery-viewer__controls {

        gap:
            0.55rem;
    }


    .bl-gallery-viewer__controls span:last-child {

        display:
            none;
    }

}



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

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

    .bl-gallery-viewer {

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


    .bl-gallery-viewer__top {

        min-height:
            70px;

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

        padding:
            0.8rem
            1rem;
    }


    .bl-gallery-viewer__brand {

        display:
            none;
    }


    .bl-gallery-viewer__category {

        align-items:
            flex-start;

        text-align:
            left;
    }


    .bl-gallery-viewer__close {

        width:
            43px;

        height:
            43px;
    }


    .bl-gallery-viewer__stage {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        min-height:
            0;

        padding:
            1rem;
    }


    .bl-gallery-viewer__nav {

        display:
            none;
    }


    .bl-gallery-viewer__image-shell {

        height:
            100%;
    }


    .bl-gallery-viewer__image {

        max-width:
            100%;

        max-height:
            calc(
                100svh
                -
                255px
            );
    }


    .bl-gallery-viewer__bottom {

        min-height:
            62px;

        grid-template-columns:
            auto
            1fr;

        gap:
            1rem;

        padding:
            0.7rem
            1rem;
    }


    .bl-gallery-viewer__description {

        align-items:
            flex-end;

        text-align:
            right;
    }


    .bl-gallery-viewer__controls {

        display:
            none;
    }


    .bl-gallery-viewer__mobile-controls {

        display:
            grid;

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

        gap:
            0.7rem;

        padding:
            0.65rem
            1rem
            max(
                0.8rem,
                env(safe-area-inset-bottom)
            );

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

}



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

@media (max-width: 480px) {

    .bl-gallery-viewer {

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


    .bl-gallery-viewer__top {

        min-height:
            64px;

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

        gap:
            0.75rem;

        padding:
            0.7rem
            0.8rem;
    }


    .bl-gallery-viewer__brand {

        display:
            none;
    }


    .bl-gallery-viewer__category {

        align-items:
            flex-start;

        text-align:
            left;
    }


    .bl-gallery-viewer__category strong {

        font-size:
            0.76rem;
    }


    .bl-gallery-viewer__close {

        width:
            40px;

        height:
            40px;
    }


    .bl-gallery-viewer__stage {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        min-height:
            0;

        padding:
            0.8rem;
    }


    .bl-gallery-viewer__nav {

        display:
            none;
    }


    .bl-gallery-viewer__image-shell {

        height:
            100%;
    }


    .bl-gallery-viewer__image-frame {

        border-radius:
            12px;
    }


    .bl-gallery-viewer__image {

        max-width:
            100%;

        max-height:
            calc(
                100svh
                -
                235px
            );
    }


    .bl-gallery-viewer__image-corner {

        display:
            none;
    }


    .bl-gallery-viewer__bottom {

        min-height:
            58px;

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

        gap:
            0.8rem;

        padding:
            0.65rem
            0.8rem;
    }


    .bl-gallery-viewer__counter {

        grid-template-columns:
            auto
            25px
            auto;

        gap:
            0.45rem;
    }


    .bl-gallery-viewer__current {

        font-size:
            0.9rem;
    }


    .bl-gallery-viewer__description {

        align-items:
            flex-end;

        text-align:
            right;
    }


    .bl-gallery-viewer__description span {

        font-size:
            0.47rem;
    }


    .bl-gallery-viewer__description strong {

        max-width:
            185px;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        font-size:
            0.65rem;
    }


    .bl-gallery-viewer__controls {

        display:
            none;
    }


    .bl-gallery-viewer__mobile-controls {

        display:
            grid;

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

        gap:
            0.55rem;

        padding:
            0.55rem
            0.8rem
            max(
                0.7rem,
                env(safe-area-inset-bottom)
            );

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


    .bl-gallery-viewer__mobile-controls button {

        min-height:
            42px;

        font-size:
            0.64rem;
    }

}