/* =========================================================
   FSB EQUIPMENT MATRIX
========================================================= */

:root {

    --eq-green: #063b25;

    --eq-dark: #021b11;

    --eq-deep: #032719;

    --eq-lime: #b6d84a;

    --eq-gold: #d9b94f;

    --eq-red: #d92e2e;

    --eq-ink: #123c2b;

    --eq-muted: #66766e;

    --eq-white: #ffffff;

    --eq-soft: #f3f7f3;

    --eq-border: rgba(6,59,37,.12);

    --eq-shadow:
        0 22px 60px rgba(6,59,37,.13);

}


/* =========================================================
   PAGE
========================================================= */

.equipment-page {

    overflow: hidden;

    background:
        var(--eq-soft);

}



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

.equipment-hero {

    position: relative;

    isolation: isolate;

    min-height:
        min(720px, 92svh);

    display: grid;

    place-items: center;

    padding:
        120px
        20px
        90px;

    overflow: hidden;

    color:
        var(--eq-white);

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(57,156,91,.25),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            #021b11 0%,
            #063b25 52%,
            #021a10 100%
        );

}


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

.equipment-grid {

    position: absolute;

    inset: 0;

    z-index: -3;

    opacity: .07;

    background-image:

        linear-gradient(
            rgba(255,255,255,.16) 1px,
            transparent 1px
        ),

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

    background-size:
        54px
        54px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 18%,
            black 82%,
            transparent
        );

}


/* =========================================================
   GLOWS
========================================================= */

.equipment-glow {

    position: absolute;

    z-index: -2;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(12px);

}


.equipment-glow-one {

    width:
        clamp(
            260px,
            42vw,
            620px
        );

    height:
        clamp(
            260px,
            42vw,
            620px
        );

    left:
        -15%;

    top:
        10%;

    background:

        radial-gradient(
            circle,
            rgba(0,190,100,.20),
            transparent 68%
        );

    animation:
        equipmentGlowOne
        10s
        ease-in-out
        infinite alternate;

}


.equipment-glow-two {

    width:
        clamp(
            220px,
            35vw,
            520px
        );

    height:
        clamp(
            220px,
            35vw,
            520px
        );

    right:
        -14%;

    bottom:
        -5%;

    background:

        radial-gradient(
            circle,
            rgba(182,216,74,.14),
            transparent 68%
        );

    animation:
        equipmentGlowTwo
        12s
        ease-in-out
        infinite alternate;

}


@keyframes equipmentGlowOne {

    to {

        transform:
            translate(
                70px,
                35px
            )
            scale(1.08);

    }

}


@keyframes equipmentGlowTwo {

    to {

        transform:
            translate(
                -55px,
                -35px
            )
            scale(1.08);

    }

}



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

.equipment-hero-inner {

    width:
        min(
            980px,
            100%
        );

    text-align:
        center;

}


.equipment-brand {

    display:
        flex;

    justify-content:
        center;

    margin-bottom:
        22px;

}


.equipment-brand img {

    width:
        clamp(
            90px,
            11vw,
            145px
        );

    height:
        auto;

    filter:
        drop-shadow(
            0 12px 28px rgba(0,0,0,.28)
        );

    animation:
        equipmentLogoFloat
        5s
        ease-in-out
        infinite;

}


@keyframes equipmentLogoFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}



/* =========================================================
   KICKER
========================================================= */

.equipment-kicker,
.section-eyebrow {

    margin:
        0;

    color:
        var(--eq-lime);

    font-size:
        .7rem;

    font-weight:
        900;

    letter-spacing:
        .22em;

    text-transform:
        uppercase;

}



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

.equipment-hero-title {

    margin:
        14px
        auto
        18px;

    max-width:
        900px;

    font-size:
        clamp(
            2.5rem,
            7vw,
            6.6rem
        );

    line-height:
        .92;

    font-weight:
        900;

    letter-spacing:
        -.035em;

    text-transform:
        uppercase;

    text-shadow:
        0 10px 35px rgba(0,0,0,.24);

}


.equipment-hero-title span {

    display:
        block;

    color:
        var(--eq-lime);

}



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

.equipment-hero-copy {

    width:
        min(
            720px,
            100%
        );

    margin:
        0
        auto;

    color:
        rgba(255,255,255,.78);

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

    line-height:
        1.8;

}



/* =========================================================
   EXPLORE BUTTON
========================================================= */

.equipment-scroll {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        32px;

    padding:
        12px
        18px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius:
        999px;

    color:
        #fff;

    background:
        rgba(255,255,255,.06);

    backdrop-filter:
        blur(10px);

    font-size:
        .72rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    transition:
        transform .25s ease,
        background .25s ease;

}


.equipment-scroll:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,.11);

}


.equipment-scroll span {

    color:
        var(--eq-lime);

    font-size:
        1rem;

}



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

.equipment-section {

    position:
        relative;

    padding:
        clamp(
            80px,
            9vw,
            125px
        )
        20px;

    background:

        radial-gradient(
            circle at 0% 20%,
            rgba(92,169,110,.10),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #f4f8f4,
            #fff 48%,
            #e9f1eb
        );

}


.equipment-container {

    width:
        min(
            1380px,
            100%
        );

    margin-inline:
        auto;

}



/* =========================================================
   HEADING
========================================================= */

.equipment-heading {

    width:
        min(
            850px,
            100%
        );

    margin:
        0
        auto
        44px;

    text-align:
        center;

}


.equipment-heading h2 {

    margin:
        12px
        0
        16px;

    color:
        #083c25;

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

    line-height:
        1.02;

    font-weight:
        900;

    letter-spacing:
        -.025em;

}


.equipment-heading h2 span {

    display:
        block;

    color:
        #6d9950;

}


.equipment-heading p {

    max-width:
        720px;

    margin:
        auto;

    color:
        var(--eq-muted);

    font-size:
        .92rem;

    line-height:
        1.8;

}



/* =========================================================
   FILTER TOOLBAR
========================================================= */

.equipment-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        28px;

    padding:
        12px;

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

    border-radius:
        18px;

    background:
        rgba(255,255,255,.72);

    box-shadow:
        0 12px 35px
        rgba(6,59,37,.06);

    backdrop-filter:
        blur(14px);

}


.filter-group {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.filter-btn {

    border:
        1px solid
        transparent;

    border-radius:
        999px;

    padding:
        10px
        14px;

    color:
        #426151;

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        .68rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        .22s ease;

}


.filter-btn:hover {

    border-color:
        rgba(6,59,37,.12);

    background:
        #fff;

}


.filter-btn.active {

    color:
        #fff;

    background:
        #083c25;

    box-shadow:
        0 8px 18px
        rgba(8,60,37,.18);

}


.equipment-count {

    flex:
        0 0 auto;

    margin:
        0
        7px;

    color:
        #6b7b72;

    font-size:
        .68rem;

    font-weight:
        800;

    white-space:
        nowrap;

}



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

.equipment-grid-list {

    display:
        grid;

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

    gap:
        22px;

}



/* =========================================================
   EQUIPMENT CARD
========================================================= */

.equipment-card {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(6,59,37,.10);

    border-radius:
        22px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        var(--eq-shadow);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.equipment-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(109,153,80,.28);

    box-shadow:
        0 28px 70px
        rgba(6,59,37,.17);

}


.equipment-card.is-hidden {

    display:
        none;

}



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

.equipment-image-box {

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    height:
        255px;

    padding:
        20px;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(196,220,188,.18),
            transparent 65%
        ),

        #fff;

}


.equipment-image-box::after {

    content:
        "";

    position:
        absolute;

    inset:
        auto
        8%
        10px;

    height:
        18px;

    border-radius:
        50%;

    background:
        rgba(6,59,37,.10);

    filter:
        blur(12px);

    transform:
        scaleX(.72);

}


.equipment-image-box img {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    transition:
        transform .35s ease;

}


.equipment-card:hover
.equipment-image-box img {

    transform:
        scale(1.035);

}



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

.equipment-number {

    position:
        absolute;

    z-index:
        4;

    top:
        12px;

    right:
        12px;

    display:
        grid;

    place-items:
        center;

    width:
        36px;

    height:
        36px;

    border-radius:
        50%;

    color:
        #fff;

    background:
        #083c25;

    font-size:
        .62rem;

    font-weight:
        900;

}



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

.equipment-card-body {

    padding:
        21px
        20px
        20px;

}


.equipment-category {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #6d9950;

    font-size:
        .59rem;

    font-weight:
        900;

    letter-spacing:
        .14em;

}


.equipment-card h3 {

    margin:
        0;

    color:
        #083c25;

    font-size:
        1.15rem;

    line-height:
        1.15;

    font-weight:
        900;

}


.equipment-card-body p {

    min-height:
        38px;

    margin:
        7px
        0
        0;

    color:
        #68776f;

    font-size:
        .74rem;

    line-height:
        1.55;

}


.equipment-note {

    display:
        inline-block;

    margin-top:
        9px;

    color:
        var(--eq-red);

    font-size:
        .58rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}



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

.view-equipment {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        16px;

    padding:
        0;

    border:
        0;

    color:
        #083c25;

    background:
        transparent;

    font-family:
        inherit;

    font-size:
        .67rem;

    font-weight:
        900;

    cursor:
        pointer;

}


.view-equipment span {

    color:
        #6d9950;

    transition:
        transform .2s ease;

}


.view-equipment:hover span {

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

}



/* =========================================================
   STATEMENT
========================================================= */

.equipment-statement {

    display:
        grid;

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

    align-items:
        center;

    gap:
        24px;

    margin-top:
        70px;

    text-align:
        center;

}


.statement-line {

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(6,59,37,.25)
        );

}


.statement-line:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(6,59,37,.25),
            transparent
        );

}


.equipment-statement span,
.equipment-statement strong {

    display:
        block;

}


.equipment-statement span {

    color:
        #6d9950;

    font-size:
        .58rem;

    font-weight:
        900;

    letter-spacing:
        .16em;

}


.equipment-statement strong {

    margin-top:
        8px;

    color:
        #083c25;

    font-size:
        .8rem;

}



/* =========================================================
   MODAL
========================================================= */

.equipment-modal {

    position:
        fixed;

    inset:
        0;

    z-index:
        100000;

    display:
        grid;

    place-items:
        center;

    padding:
        20px;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .25s ease,
        visibility .25s ease;

}


.equipment-modal.open {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}


.modal-backdrop {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(1,18,11,.78);

    backdrop-filter:
        blur(8px);

}


.modal-panel {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            900px,
            100%
        );

    max-height:
        min(
            90vh,
            850px
        );

    overflow:
        auto;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:
        24px;

    background:
        #fff;

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.35);

}


.modal-close {

    position:
        absolute;

    z-index:
        5;

    top:
        13px;

    right:
        13px;

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid
        rgba(6,59,37,.12);

    border-radius:
        50%;

    color:
        #083c25;

    background:
        rgba(255,255,255,.9);

    font-size:
        1.6rem;

    line-height:
        1;

    cursor:
        pointer;

}


.modal-image-wrap {

    display:
        grid;

    place-items:
        center;

    min-height:
        350px;

    padding:
        45px;

    background:
        #f5f8f5;

}


.modal-image-wrap img {

    display:
        block;

    width:
        min(
            700px,
            100%
        );

    max-height:
        52vh;

    object-fit:
        contain;

}


.modal-content {

    padding:
        28px
        32px
        34px;

}


.modal-content span {

    color:
        #6d9950;

    font-size:
        .62rem;

    font-weight:
        900;

    letter-spacing:
        .15em;

}


.modal-content h2 {

    margin:
        8px
        0
        0;

    color:
        #083c25;

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

    font-weight:
        900;

}


.modal-content p {

    margin:
        10px
        0
        0;

    color:
        #68776f;

    line-height:
        1.7;

}


body.modal-open {

    overflow:
        hidden;

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .equipment-grid-list {

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

    }

}



/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 850px) {

    .equipment-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .equipment-count {

        margin-left:
            4px;

    }


    .equipment-grid-list {

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

    }


    .equipment-image-box {

        height:
            230px;

    }

}



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

@media (max-width: 600px) {

    .equipment-hero {

        min-height:
            650px;

        padding:
            105px
            14px
            65px;

    }


    .equipment-hero-title {

        font-size:
            clamp(
                2.15rem,
                12vw,
                4rem
            );

        line-height:
            .94;

    }


    .equipment-hero-copy {

        font-size:
            .76rem;

        line-height:
            1.7;

    }


    .equipment-section {

        padding:
            70px
            14px
            80px;

    }


    .equipment-heading {

        margin-bottom:
            28px;

    }


    .equipment-heading h2 {

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

    }


    .equipment-heading p {

        font-size:
            .78rem;

    }


    .equipment-grid-list {

        grid-template-columns:
            1fr;

        gap:
            16px;

    }


    .equipment-image-box {

        height:
            250px;

    }


    .equipment-card-body {

        padding:
            18px;

    }


    .equipment-statement {

        grid-template-columns:
            1fr;

        gap:
            14px;

        margin-top:
            48px;

    }


    .statement-line {

        display:
            none;

    }


    .modal-image-wrap {

        min-height:
            250px;

        padding:
            40px
            20px
            25px;

    }


    .modal-content {

        padding:
            23px
            20px
            27px;

    }

}



/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .equipment-brand img {

        width:
            82px;

    }


    .equipment-kicker,
    .section-eyebrow {

        font-size:
            .57rem;

    }


    .equipment-hero-title {

        font-size:
            2rem;

    }


    .filter-btn {

        padding:
            9px
            11px;

        font-size:
            .61rem;

    }


    .equipment-image-box {

        height:
            220px;

    }

}



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

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

    .equipment-glow-one,
    .equipment-glow-two,
    .equipment-brand img {

        animation:
            none !important;

    }


    .equipment-card,
    .equipment-image-box img,
    .equipment-scroll {

        transition:
            none !important;

    }

}