/* =========================================================
   FSB SOLUTION PAGE
========================================================= */

:root {

    --fsb-green: #063b25;
    --fsb-dark-green: #032719;
    --fsb-light-green: #0b7547;

    --fsb-lime: #b6d84a;

    --fsb-gold: #d5ad43;

    --fsb-white: #ffffff;

    --fsb-muted: rgba(255,255,255,.72);

    --fsb-border: rgba(255,255,255,.12);

}


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

.fsb-page {

    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #031c12 0%,
            #063b25 45%,
            #021b11 100%
        );

}


/* =========================================================
   SECTION 1
   FSB SOLUTION — FARM SERVICE BUREAU HERO
========================================================= */

.fsb-hero {

    position: relative;

    isolation: isolate;

    width: 100%;

    min-height: 100svh;

    padding:
        clamp(110px, 10vw, 150px)
        20px
        80px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(22, 132, 76, 0.22),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #021c12 0%,
            #063b25 48%,
            #021a10 100%
        );

    color: #ffffff;

}


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

.fsb-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    z-index: -2;

    filter: blur(10px);

}


.fsb-glow-one {

    width:
        clamp(
            250px,
            40vw,
            650px
        );

    height:
        clamp(
            250px,
            40vw,
            650px
        );

    top: 8%;

    left: -12%;

    background:
        radial-gradient(
            circle,
            rgba(0, 180, 91, 0.20),
            transparent 68%
        );

    animation:
        fsbGlowFloatOne
        10s
        ease-in-out
        infinite;

}


.fsb-glow-two {

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

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

    right: -12%;

    bottom: 4%;

    background:
        radial-gradient(
            circle,
            rgba(157, 210, 72, 0.14),
            transparent 68%
        );

    animation:
        fsbGlowFloatTwo
        12s
        ease-in-out
        infinite;

}


@keyframes fsbGlowFloatOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(30px, 25px, 0)
            scale(1.08);
    }

}


@keyframes fsbGlowFloatTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-30px, -20px, 0)
            scale(1.1);
    }

}


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

.fsb-grid-pattern {

    position: absolute;

    inset: 0;

    z-index: -3;

    pointer-events: none;

    opacity: 0.08;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.12) 1px,
            transparent 1px
        ),

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

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

}


/* =========================================================
   MAIN SECTION CONTAINER
========================================================= */

.fsb-hero-container {

    position: relative;

    width:
        min(
            1500px,
            100%
        );

    margin-inline: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 0;

}


/* =========================================================
   BRANDING
========================================================= */

.fsb-branding {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(130px, 0.8fr)
        minmax(280px, 2fr)
        minmax(130px, 0.8fr);

    align-items: center;

    column-gap:
        clamp(
            20px,
            4vw,
            70px
        );

    margin-bottom:
        clamp(
            25px,
            4vw,
            55px
        );

    position: relative;

    z-index: 20;

}


/* =========================================================
   COMPANY LOGO
========================================================= */

.fsb-branding .layout-company-logo {

    width: 100%;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    min-width: 0;

}


.fsb-branding .layout-company-logo img {

    display: block;

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

    height: auto;

    max-width: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 10px 25px rgba(0,0,0,0.28)
        );

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

}

/* ==========================================
FSB HERO COMPANY LOGO
=============================================*/
/* .fsb-company-logo {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    position: relative;
    z-index: 30;
}

.fsb-company-logo img {
    display: block;
    width: clam(90px, 11vw, 165px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 25px 
    rgba(0, 0, 0,  0.28));

    animation: fsbLogoFloat 5s ease-in-out infinite;
} */


@keyframes fsbLogoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


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

.fsb-title-area {

    min-width: 0;

    width: 100%;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding-inline: 10px;

}


/* =========================================================
   MAIN FSB TITLE
   IMPORTANT: USES H1
========================================================= */

.fsb-title-area h1 {

    width: 100%;

    max-width: 900px;

    margin: 0;

    padding: 0;

    font-family:
        "Montserrat",
        sans-serif;

    /*
       This is the main responsive fix.
       It scales smoothly between desktop,
       tablet and mobile.
    */
    font-size:
        clamp(
            2rem,
            5vw,
            4.8rem
        );

    line-height: 0.98;

    font-weight: 900;

    letter-spacing:
        clamp(
            0.01em,
            0.10vw,
            0.06em
        );

    text-transform: uppercase;

    color: #ffffff;

    text-align: center;

    overflow-wrap: break-word;

    word-break: normal;

    text-shadow:
        0 4px 30px rgba(0,0,0,0.30);

}


/* =========================================================
   OPTIONAL H2 SUPPORT
   Keeps the page safe if the HTML still uses H2.
========================================================= */

.fsb-title-area h2 {

    width: 100%;

    max-width: 900px;

    margin: 0;

    padding: 0;

    font-family:
        "Montserrat",
        sans-serif;

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

    line-height: 0.98;

    font-weight: 900;

    letter-spacing:
        clamp(
            0.01em,
            0.10vw,
            0.06em
        );

    text-transform: uppercase;

    color: #ffffff;

    text-align: center;

    text-shadow:
        0 4px 30px rgba(0,0,0,0.30);

}


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

.fsb-title-area .fsb-eyebrow {

    display: inline-block;

    margin-bottom:
        clamp(
            8px,
            1vw,
            14px
        );

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

    font-size:
        clamp(
            0.55rem,
            0.8vw,
            0.75rem
        );

    font-weight: 800;

    letter-spacing:
        clamp(
            0.08em,
            0.18em,
            0.22em
        );

    text-transform: uppercase;

}


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

.fsb-title-area h4 {

    margin:
        clamp(
            15px,
            2vw,
            24px
        )
        0
        0;

    max-width: 650px;

    font-family:
        "Montserrat",
        sans-serif;

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

    line-height: 1.6;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

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

}


/* If your HTML uses p instead of h4 */

.fsb-title-area p {

    max-width: 650px;

    margin:
        clamp(
            10px,
            1.5vw,
            20px
        )
        auto
        0;

    font-size:
        clamp(
            0.68rem,
            1vw,
            0.95rem
        );

    line-height: 1.6;

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

}


/* =========================================================
   COAT OF ARMS
========================================================= */

.fsb-coat {

    width: 100%;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    min-width: 0;

}


.fsb-coat img {

    display: block;

    width:
        clamp(
            75px,
            9vw,
            145px
        );

    height: auto;

    max-width: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 18px rgba(0,0,0,0.30)
        );

    animation:
        fsbCoatFloat
        5.5s
        ease-in-out
        infinite;

}


@keyframes fsbCoatFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(1deg);
    }

}


/* =========================================================
   FSB MODEL
========================================================= */

.fsb-model {

    position: relative;

    width:
        min(
            92vw,
            900px
        );

    aspect-ratio: 1 / 1;

    margin:
        40px
        auto
        0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: visible;

    isolation: isolate;

}


/* =========================================================
   STATIC INNER IMAGE
========================================================= */

.fsb-inner {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 68%;

    height: 68%;

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

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 5;

    pointer-events: none;

}


.fsb-inner-image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    max-width: none;

    filter:
        drop-shadow(
            0 18px 35px rgba(0,0,0,0.30)
        );

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

}


@keyframes fsbInnerFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


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

.tractor-orbit {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 94%;

    height: 94%;

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

    border-radius: 50%;

    /*
       VERY IMPORTANT:
       This allows cqw to be based on
       the orbit size.
    */
    container-type: size;

    z-index: 20;

    overflow: visible;

    pointer-events: none;

    animation:
        tractorOrbitRotation
        32s
        linear
        infinite;

}


/* =========================================================
   SINGLE ORBIT RING
========================================================= */

.tractor-orbit::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    width: 82%;

    height: 82%;

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

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            217,
            0,
            0.22
        );

    box-shadow:
        0 0 25px
        rgba(
            255,
            217,
            0,
            0.08
        ),
        inset 0 0 25px
        rgba(
            255,
            217,
            0,
            0.04
        );

    pointer-events: none;

    z-index: -1;

}


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

@keyframes tractorOrbitRotation {

    from {

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

    }

    to {

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

    }

}


/* =========================================================
   TRACTOR NODE
========================================================= */

.tractor-node {

    position: absolute;

    left: 50%;

    top: 50%;

    width:
        clamp(
            35px,
            5.5cqw,
            68px
        );

    height:
        clamp(
            35px,
            5.5cqw,
            68px
        );

    display: flex;

    align-items: center;

    justify-content: center;

    /*
       Responsive orbit radius.
       DO NOT replace this with fixed
       -145px / -205px / -245px rules.
    */
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(var(--angle))
        translateY(
            calc(
                -1 *
                41cqw
            )
        )
        rotate(
            calc(
                -1 *
                var(--angle)
            )
        );

    transform-origin:
        center center;

    z-index: 30;

    animation:
        tractorFloat
        3s
        ease-in-out
        infinite;

}


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

.tractor-node img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    max-width: none;

    filter:
        drop-shadow(
            0 5px 7px rgba(0,0,0,0.45)
        );

    pointer-events: none;

}


/* =========================================================
   TRACTOR POSITIONS
========================================================= */

.tractor-node:nth-child(1) {
    --angle: 0deg;
}

.tractor-node:nth-child(2) {
    --angle: 30deg;
}

.tractor-node:nth-child(3) {
    --angle: 60deg;
}

.tractor-node:nth-child(4) {
    --angle: 90deg;
}

.tractor-node:nth-child(5) {
    --angle: 120deg;
}

.tractor-node:nth-child(6) {
    --angle: 150deg;
}

.tractor-node:nth-child(7) {
    --angle: 180deg;
}

.tractor-node:nth-child(8) {
    --angle: 210deg;
}

.tractor-node:nth-child(9) {
    --angle: 240deg;
}

.tractor-node:nth-child(10) {
    --angle: 270deg;
}

.tractor-node:nth-child(11) {
    --angle: 300deg;
}

.tractor-node:nth-child(12) {
    --angle: 330deg;
}


/* =========================================================
   TRACTOR FLOAT
========================================================= */

@keyframes tractorFloat {

    0%,
    100% {

        translate:
            0
            0;

    }

    50% {

        translate:
            0
            -5px;

    }

}


/* =========================================================
   DIFFERENT FLOAT TIMINGS
========================================================= */

.tractor-node:nth-child(2) {
    animation-delay: -0.2s;
}

.tractor-node:nth-child(3) {
    animation-delay: -0.4s;
}

.tractor-node:nth-child(4) {
    animation-delay: -0.6s;
}

.tractor-node:nth-child(5) {
    animation-delay: -0.8s;
}

.tractor-node:nth-child(6) {
    animation-delay: -1s;
}

.tractor-node:nth-child(7) {
    animation-delay: -1.2s;
}

.tractor-node:nth-child(8) {
    animation-delay: -1.4s;
}

.tractor-node:nth-child(9) {
    animation-delay: -1.6s;
}

.tractor-node:nth-child(10) {
    animation-delay: -1.8s;
}

.tractor-node:nth-child(11) {
    animation-delay: -2s;
}

.tractor-node:nth-child(12) {
    animation-delay: -2.2s;
}


/* =========================================================
   CENTRAL FSB PULSE
========================================================= */

.fsb-model-pulse {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 24%;

    height: 24%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,217,0,0.18) 0%,
            rgba(255,217,0,0.06) 45%,
            transparent 75%
        );

    animation:
        fsbPulse
        3s
        ease-in-out
        infinite;

    z-index: 3;

    pointer-events: none;

}


@keyframes fsbPulse {

    0%,
    100% {

        opacity: 0.45;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.90);

    }

    50% {

        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.08);

    }

}


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

.fsb-description {

    width:
        min(
            900px,
            90%
        );

    margin:
        clamp(
            20px,
            3vw,
            45px
        )
        auto
        0;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    opacity: 0.55;

}


.description-line {

    height: 1px;

    flex: 1;

    max-width: 280px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(177,225,92,0.8),
            transparent
        );

}


/* =========================================================
   TABLET — 900PX
========================================================= */

@media (max-width: 900px) {

    .fsb-hero {

        padding-top:
            100px;

    }


    .fsb-model {

        width:
            min(
                94vw,
                700px
            );

        margin-top: 30px;

    }


    .fsb-inner {

        width: 66%;

        height: 66%;

    }


    .tractor-orbit {

        width: 96%;

        height: 96%;

    }


    .fsb-title-area h1,
    .fsb-title-area h2 {

        font-size:
            clamp(
                2rem,
                6vw,
                3.8rem
            );

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP — 800PX
========================================================= */

@media (max-width: 800px) {

    /*
       Hide only the Section 1 company logo.
       This selector is deliberately scoped to
       .fsb-branding so Section 2 is unaffected.
    */

    .fsb-branding
    > .layout-company-logo {

        display: none;

    }


    .fsb-branding {

        width: 100%;

        display: grid;

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

        grid-template-areas:
            "title coat";

        gap: 12px;

        align-items: start;

        margin-bottom: 20px;

    }


    .fsb-title-area {

        grid-area: title;

        width: 100%;

        text-align: left;

        align-items: flex-start;

        padding-inline: 0;

    }


    .fsb-coat {

        grid-area: coat;

        width: auto;

        justify-content: flex-end;

        align-items: flex-start;

    }


    .fsb-title-area h1,
    .fsb-title-area h2 {

        text-align: left;

        font-size:
            clamp(
                1.7rem,
                5.5vw,
                3rem
            );

        line-height: 1;

        letter-spacing:
            0.015em;

    }


    .fsb-title-area h4 {

        text-align: left;

        max-width: 600px;

        font-size:
            clamp(
                0.62rem,
                1.8vw,
                0.9rem
            );

        line-height: 1.5;

        letter-spacing:
            0.045em;

    }


    .fsb-title-area p {

        text-align: left;

        font-size:
            clamp(
                0.62rem,
                1.8vw,
                0.85rem
            );

    }


    .fsb-coat img {

        width:
            clamp(
                70px,
                14vw,
                115px
            );

    }


    .fsb-model {

        width:
            min(
                94vw,
                650px
            );

        margin-top: 20px;

    }


    .fsb-inner {

        width: 70%;

        height: 70%;

    }


    .tractor-node {

        width:
            clamp(
                30px,
                5.5cqw,
                50px
            );

        height:
            clamp(
                30px,
                5.5cqw,
                50px
            );

    }


    .fsb-layout-stage {

        min-height: 850px;

    }


    .fsb-layout-image-wrap {

        width:
            min(
                420px,
                68vw
            );

    }


    .layout-info-card {

        min-width: 180px;

    }


    .layout-card-one {

        left: 0;

        top: 20%;

    }


    .layout-card-two {

        right: 0;

        top: 20%;

    }


    .layout-card-three {

        left: 0;

        bottom: 18%;

    }


    .layout-card-four {

        right: 0;

        bottom: 18%;

    }


    .layout-orbit-one {

        width: 580px;

        height: 580px;

    }


    .layout-orbit-two {

        width: 700px;

        height: 700px;

    }

}


/* =========================================================
   MOBILE — 600PX
========================================================= */

@media (max-width: 600px) {

    .fsb-hero {

        min-height: auto;

        padding:
            95px
            14px
            70px;

    }


    .fsb-branding {

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

        gap: 10px;

        margin-bottom: 8px;

    }


    .fsb-title-area {

        text-align: left;

    }


    .fsb-title-area .fsb-eyebrow {

        font-size:
            clamp(
                0.45rem,
                1.8vw,
                0.58rem
            );

        letter-spacing:
            0.10em;

    }


    /*
       MAIN RESPONSIVE H1
    */

    .fsb-title-area h1,
    .fsb-title-area h2 {

        width: 100%;

        font-size:
            clamp(
                1.25rem,
                6.8vw,
                2rem
            );

        line-height:
            0.98;

        letter-spacing:
            0.005em;

        text-align: left;

    }


    .fsb-title-area h4 {

        margin-top: 9px;

        font-size:
            clamp(
                0.52rem,
                2.3vw,
                0.72rem
            );

        line-height: 1.45;

        letter-spacing:
            0.035em;

        text-align: left;

    }


    .fsb-title-area p {

        margin-top: 7px;

        font-size:
            clamp(
                0.55rem,
                2.5vw,
                0.68rem
            );

        line-height: 1.45;

    }


    .desktop-break {

        display: none;

    }


    .fsb-coat {

        justify-content: flex-end;

        align-items: flex-start;

    }


    .fsb-coat img {

        width:
            clamp(
                52px,
                13vw,
                70px
            );

    }


    .fsb-model {

        width: 96vw;

        max-width: 500px;

        aspect-ratio: 1 / 1;

        min-height: 0;

        margin-top: 15px;

    }


    .fsb-inner {

        width: 65%;

        height: 65%;

    }


    .fsb-inner-image {

        width: 100%;

        height: 100%;

    }


    .tractor-orbit {

        width: 100%;

        height: 100%;

        animation-duration: 28s;

    }


    /*
       Keep tractor size based on the orbit.
       No fixed transform override here.
    */

    .tractor-node {

        width:
            clamp(
                24px,
                7cqw,
                40px
            );

        height:
            clamp(
                24px,
                7cqw,
                40px
            );

    }


    .tractor-orbit::before {

        width: 78%;

        height: 78%;

    }


    .fsb-model-pulse {

        width: 28%;

        height: 28%;

    }


    .fsb-description {

        margin-top: 8px;

        width: 90%;

    }


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

    .fsb-layout-section {

        padding:
            80px
            14px
            80px;

    }


    .fsb-layout-heading {

        margin-bottom: 15px;

    }


    .fsb-layout-heading h2 {

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

    }


    .fsb-layout-heading p {

        font-size: .82rem;

        line-height: 1.65;

    }


    .fsb-layout-stage {

        min-height: 820px;

    }


    .fsb-layout-image-wrap {

        width:
            min(
                300px,
                70vw
            );

    }


    .layout-company-logo {

        left: 2%;

        top: 0;

    }


    .layout-company-logo img {

        width: 65px;

    }


    .layout-coat {

        right: 2%;

        top: 0;

    }


    .layout-coat img {

        width: 58px;

    }


    .layout-fsb-label {

        right: 4%;

        bottom: 6%;

        font-size: .56rem;

    }


    .layout-info-card {

        min-width: 155px;

        max-width: 175px;

        padding:
            9px
            10px;

        gap: 8px;

    }


    .layout-info-card strong {

        font-size: .68rem;

    }


    .layout-info-card span {

        font-size: .53rem;

    }


    .layout-card-icon {

        width: 28px;

        height: 28px;

        font-size: .52rem;

    }


    .layout-card-one {

        left: 0;

        top: 19%;

    }


    .layout-card-two {

        right: 0;

        top: 19%;

    }


    .layout-card-three {

        left: 0;

        bottom: 18%;

    }


    .layout-card-four {

        right: 0;

        bottom: 18%;

    }


    .layout-orbit-one {

        width: 400px;

        height: 400px;

    }


    .layout-orbit-two {

        width: 500px;

        height: 500px;

    }


    .fsb-layout-statement {

        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 0;

    }


    .statement-line {

        display: none;

    }


    .statement-content h3 {

        font-size: 1.5rem;

    }

}


/* =========================================================
   VERY SMALL PHONES — 400PX
========================================================= */

@media (max-width: 400px) {

    .fsb-hero {

        padding:
            85px
            10px
            45px;

    }


    .fsb-branding {

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

        gap: 8px;

    }


    .fsb-title-area h1,
    .fsb-title-area h2 {

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

        line-height: 1;

    }


    .fsb-title-area h4 {

        font-size:
            clamp(
                0.48rem,
                2.4vw,
                0.6rem
            );

        line-height: 1.4;

    }


    .fsb-coat img {

        width: 52px;

    }


    .fsb-model {

        width: 98vw;

        max-width: none;

        margin-top: 10px;

    }


    .fsb-inner {

        width: 62%;

        height: 62%;

    }


    .tractor-node {

        width:
            clamp(
                22px,
                7cqw,
                30px
            );

        height:
            clamp(
                22px,
                7cqw,
                30px
            );

    }


    .fsb-layout-stage {

        min-height: 760px;

    }


    .fsb-layout-image-wrap {

        width: 260px;

    }


    .layout-info-card {

        min-width: 140px;

        max-width: 150px;

    }


    .layout-info-card span {

        display: none;

    }

}


/* =========================================================
   VERY SMALL PHONES — 380PX
========================================================= */

@media (max-width: 380px) {

    .fsb-title-area h1,
    .fsb-title-area h2 {

        font-size:
            clamp(
                1rem,
                6.5vw,
                1.4rem
            );

    }


    .fsb-model {

        width: 100vw;

    }


    .tractor-node {

        width: 21px;

        height: 21px;

    }


    .fsb-inner {

        width: 60%;

        height: 60%;

    }

}


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

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

    .fsb-glow-one,
    .fsb-glow-two,
    .fsb-branding .layout-company-logo img,
    .fsb-coat img,
    .fsb-inner-image,
    .tractor-orbit,
    .tractor-node,
    .fsb-model-pulse,
    .layout-coat img,
    .fsb-layout-image {

        animation: none !important;

    }


    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

    }

}


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

.fsb-layout-section {

    position: relative;

    min-height: 100vh;

    padding:
        120px
        25px
        120px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f4f8f4,
            #ffffff 45%,
            #e9f1eb
        );

    color: #103b29;

}


/* =========================================================
   SECTION 2 BACKGROUND
========================================================= */

.layout-grid {

    position: absolute;

    inset: 0;

    opacity: .35;

    background-image:

        linear-gradient(
            rgba(6,59,37,.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(6,59,37,.07) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

}


.layout-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);

}


.layout-glow-one {

    width: 500px;

    height: 500px;

    left: -220px;

    top: 180px;

    background:
        radial-gradient(
            circle,
            rgba(92,169,110,.17),
            transparent 70%
        );

    animation:
        layoutGlowOne
        9s
        ease-in-out
        infinite
        alternate;

}


.layout-glow-two {

    width: 550px;

    height: 550px;

    right: -250px;

    bottom: 0;

    background:
        radial-gradient(
            circle,
            rgba(213,173,67,.12),
            transparent 70%
        );

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

}


@keyframes layoutGlowOne {

    from {
        transform:
            translate(
                0,
                0
            );
    }

    to {
        transform:
            translate(
                80px,
                -40px
            );
    }

}


@keyframes layoutGlowTwo {

    from {
        transform:
            translate(
                0,
                0
            );
    }

    to {
        transform:
            translate(
                -80px,
                -50px
            );
    }

}


/* =========================================================
   FSB SECTION 1 — COMPANY LOGO FIX
   ========================================================= */

/* Make the logo participate properly in the branding grid */
.fsb-branding > .layout-company-logo {
    position: relative;
    inset: auto;

    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    z-index: 25;
}

/* Logo itself */
.fsb-branding > .layout-company-logo img {
    display: block;

    width: clamp(85px, 10vw, 150px);
    height: auto;

    max-width: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));

    animation: fsbLogoFloat 5s ease-in-out infinite;
}


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

.fsb-title-area h1 {
    margin: 0;

    width: 100%;

    font-family: "Montserrat", sans-serif;

    font-size: clamp(
        1.8rem,
        4.5vw,
        4.8rem
    );

    line-height: 0.95;

    font-weight: 900;

    letter-spacing: clamp(
        0.01em,
        0.12vw,
        0.06em
    );

    text-transform: uppercase;

    color: #ffffff;

    text-align: center;

    overflow-wrap: normal;
    word-break: normal;

    text-shadow:
        0 4px 30px rgba(0, 0, 0, 0.30);
}


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

@media (max-width: 900px) {

    .fsb-branding > .layout-company-logo img {
        width: clamp(75px, 12vw, 120px);
    }

    .fsb-title-area h1 {
        font-size: clamp(
            1.7rem,
            5.5vw,
            3.2rem
        );

        line-height: 0.98;
    }

}


/* =========================================================
   SMALL TABLET / LARGE PHONE
   ========================================================= */

@media (max-width: 800px) {

    .fsb-branding {
        grid-template-columns: 1fr auto;

        grid-template-areas:
            "title coat"
            "logo logo";

        row-gap: 12px;
    }

    .fsb-branding > .layout-company-logo {
        grid-area: logo;

        justify-content: center;

        margin-top: 4px;
    }

    .fsb-branding > .layout-company-logo img {
        width: clamp(75px, 15vw, 105px);
    }

    .fsb-title-area {
        grid-area: title;

        width: 100%;

        padding-inline: 4px;

        text-align: left;

        align-items: flex-start;
    }

    .fsb-title-area h1 {
        font-size: clamp(
            1.55rem,
            6vw,
            2.7rem
        );

        line-height: 0.98;

        text-align: left;

        letter-spacing: 0.015em;
    }

}


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

@media (max-width: 600px) {

    .fsb-branding {
        grid-template-columns: 1fr 58px;

        grid-template-areas:
            "title coat"
            "logo logo";

        gap: 8px;

        margin-bottom: 12px;
    }

    .fsb-branding > .layout-company-logo {
        grid-area: logo;

        justify-content: center;

        margin-top: 5px;
    }

    .fsb-branding > .layout-company-logo img {
        width: clamp(
            70px,
            18vw,
            95px
        );
    }

    .fsb-title-area {
        width: 100%;

        padding: 0;

        text-align: left;

        align-items: flex-start;
    }

    .fsb-title-area h1 {
        width: 100%;

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

        line-height: 1;

        letter-spacing: 0.01em;

        text-align: left;

        white-space: normal;

        overflow-wrap: break-word;
    }

    .fsb-title-area h3 {
        margin-top: 8px !important;

        font-size: clamp(
            0.58rem,
            2.5vw,
            0.78rem
        ) !important;

        line-height: 1.45;

        text-align: left;
    }

    .fsb-coat {
        grid-area: coat;

        justify-content: flex-end;

        align-items: flex-start;
    }

    .fsb-coat img {
        width: clamp(
            48px,
            13vw,
            62px
        );
    }

}


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

@media (max-width: 380px) {

    .fsb-branding {
        grid-template-columns: 1fr 52px;
    }

    .fsb-branding > .layout-company-logo img {
        width: 68px;
    }

    .fsb-title-area h1 {
        font-size: clamp(
            1.05rem,
            7vw,
            1.5rem
        );

        line-height: 1;
    }

    .fsb-title-area h3 {
        font-size: 0.55rem !important;

        line-height: 1.4;
    }

    .fsb-coat img {
        width: 50px;
    }

}


/* =========================================================
   FSB BRANDING — ANDROID / MOBILE HORIZONTAL ARRANGEMENT
   LOGO | TITLE | COAT
========================================================= */

@media (max-width: 800px) {

    .fsb-branding {
        width: 100%;

        display: grid;

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

        grid-template-areas:
            "logo title coat";

        align-items: center;

        column-gap: 8px;
        row-gap: 0;

        margin-bottom: 15px;
    }


    /* -----------------------------------------------------
       COMPANY LOGO — LEFT
    ----------------------------------------------------- */

    .fsb-branding > .layout-company-logo {

        grid-area: logo;

        position: relative;

        inset: auto;

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        min-width: 0;

        margin: 0;

        z-index: 25;
    }


    .fsb-branding > .layout-company-logo img {

        display: block;

        width: clamp(
            58px,
            12vw,
            78px
        );

        height: auto;

        max-width: 100%;

        object-fit: contain;
    }


    /* -----------------------------------------------------
       TITLE — CENTER
    ----------------------------------------------------- */

    .fsb-title-area {

        grid-area: title;

        width: 100%;

        min-width: 0;

        padding: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;
    }


    .fsb-title-area h1 {

        width: 100%;

        margin: 0;

        font-size: clamp(
            1.15rem,
            5.5vw,
            2.25rem
        );

        line-height: 0.98;

        font-weight: 900;

        letter-spacing: 0.01em;

        text-align: center;

        white-space: normal;

        overflow-wrap: normal;

        word-break: normal;
    }


    .fsb-title-area h3 {

        width: 100%;

        margin:
            7px
            0
            0;

        font-size: clamp(
            0.52rem,
            2vw,
            0.72rem
        ) !important;

        line-height: 1.35;

        text-align: center;

        white-space: normal;
    }


    /* -----------------------------------------------------
       COAT OF ARMS — RIGHT
    ----------------------------------------------------- */

    .fsb-branding > .fsb-coat {

        grid-area: coat;

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        min-width: 0;

        margin: 0;
    }


    .fsb-branding > .fsb-coat img {

        display: block;

        width: clamp(
            48px,
            10vw,
            65px
        );

        height: auto;

        max-width: 100%;

        object-fit: contain;
    }
}


/* =========================================================
   ANDROID / SMALL PHONES
========================================================= */

@media (max-width: 600px) {

    .fsb-branding {

        grid-template-columns:
            clamp(58px, 17vw, 75px)
            minmax(0, 1fr)
            clamp(48px, 14vw, 62px);

        column-gap: 5px;

        align-items: center;

        margin-bottom: 12px;
    }


    .fsb-branding > .layout-company-logo img {

        width: clamp(
            55px,
            16vw,
            72px
        );
    }


    .fsb-title-area {

        padding-inline: 2px;

        align-items: center;

        text-align: center;
    }


    .fsb-title-area h1 {

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

        line-height: 1;

        letter-spacing: 0;

        text-align: center;
    }


    .fsb-title-area h3 {

        margin-top: 6px;

        font-size: clamp(
            0.48rem,
            2.15vw,
            0.68rem
        ) !important;

        line-height: 1.35;

        text-align: center;
    }


    .fsb-branding > .fsb-coat img {

        width: clamp(
            45px,
            12vw,
            58px
        );
    }
}


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

@media (max-width: 380px) {

    .fsb-branding {

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

        column-gap: 4px;
    }


    .fsb-branding > .layout-company-logo img {

        width: 50px;
    }


    .fsb-title-area h1 {

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

        line-height: 1;
    }


    .fsb-title-area h3 {

        font-size: 0.45rem !important;

        line-height: 1.3;
    }


    .fsb-branding > .fsb-coat img {

        width: 43px;
    }
}


/* =========================================================
   SECTION 2 CONTAINER
========================================================= */

.fsb-layout-container {

    position: relative;

    z-index: 5;

    width:
        min(
            1400px,
            100%
        );

    margin: auto;

}


/* =========================================================
   SECTION 2 HEADING
========================================================= */

.fsb-layout-heading {

    width:
        min(
            850px,
            100%
        );

    margin:
        0
        auto
        40px;

    text-align: center;

}


.layout-eyebrow {

    display: inline-block;

    color: #4e855f;

    font-size: .72rem;

    font-weight: 900;

    letter-spacing: .2em;

}


.fsb-layout-heading h2 {

    margin:
        12px
        0
        16px;

    color: #083c25;

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

    line-height: 1.08;

    font-weight: 900;

}


.fsb-layout-heading h2 span {

    display: block;

    color: #74a83c;

}


.fsb-layout-heading p {

    max-width: 720px;

    margin: auto;

    color: #597063;

    font-size: 1rem;

    line-height: 1.8;

}


/* =========================================================
   SECTION 2 STAGE
========================================================= */

.fsb-layout-stage {

    position: relative;

    width: 100%;

    min-height: 760px;

    display: flex;

    justify-content: center;

    align-items: center;

    perspective: 1200px;

}


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

.fsb-layout-image-wrap {

    position: relative;

    z-index: 5;

    width:
        min(
            500px,
            55vw
        );

    transform:
        rotateZ(0deg)
        translate3d(0,0,0);

    transition:
        transform .25s ease-out;

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

}


.fsb-layout-image {

    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

    animation:
        farmImageFloat
        7s
        ease-in-out
        infinite;

}


@keyframes farmImageFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotateZ(0deg);

    }

    50% {

        transform:
            translateY(-12px)
            rotateZ(.6deg);

    }

}


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

.image-scan {

    position: absolute;

    z-index: 4;

    left: 10%;

    right: 10%;

    height: 3px;

    border-radius: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(180,230,87,.9),
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(133,190,71,.7);

    opacity: .7;

    animation:
        imageScan
        5s
        linear
        infinite;

    pointer-events: none;

}


@keyframes imageScan {

    0% {

        top: 5%;

        opacity: 0;

    }

    15% {

        opacity: .8;

    }

    85% {

        opacity: .8;

    }

    100% {

        top: 92%;

        opacity: 0;

    }

}


/* =========================================================
   SECTION 2 COMPANY LOGO
========================================================= */

.layout-company-logo {

    position: absolute;

    z-index: 12;

    left: 7%;

    top: 2%;

}


.layout-company-logo img {

    width:
        clamp(
            75px,
            10vw,
            120px
        );

    height: auto;

    filter:
        drop-shadow(
            0 8px 15px
            rgba(0,0,0,.15)
        );

}


/* =========================================================
   SECTION 2 COAT
========================================================= */

.layout-coat {

    position: absolute;

    z-index: 12;

    right: 7%;

    top: 1%;

}


.layout-coat img {

    width:
        clamp(
            65px,
            9vw,
            110px
        );

    height: auto;

    filter:
        drop-shadow(
            0 8px 15px
            rgba(0,0,0,.15)
        );

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

}


@keyframes layoutCoatFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-7px);
    }

}


/* =========================================================
   FSB LABEL
========================================================= */

.layout-fsb-label {

    position: absolute;

    z-index: 15;

    right: 7%;

    bottom: 7%;

    display: flex;

    flex-direction: column;

    color: #103b29;

    font-size:
        clamp(
            .65rem,
            1vw,
            .9rem
        );

    line-height: 1.15;

    text-align: left;

    letter-spacing: .04em;

}


/* =========================================================
   ORBITS
========================================================= */

.layout-orbit {

    position: absolute;

    left: 50%;

    top: 50%;

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

    border-radius: 50%;

    pointer-events: none;

}


.layout-orbit-one {

    width: 650px;

    height: 650px;

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

    animation:
        orbitRotateOne
        25s
        linear
        infinite;

}


.layout-orbit-two {

    width: 820px;

    height: 820px;

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

    border-style: dashed;

    opacity: .5;

    animation:
        orbitRotateTwo
        35s
        linear
        infinite
        reverse;

}


@keyframes orbitRotateOne {

    from {

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

    }

    to {

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

    }

}


@keyframes orbitRotateTwo {

    from {

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

    }

    to {

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

    }

}


/* =========================================================
   INFORMATION CARDS
========================================================= */

.layout-info-card {

    position: absolute;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 220px;

    padding:
        14px
        17px;

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

    border-radius: 14px;

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

    box-shadow:
        0 18px 40px
        rgba(6,59,37,.13);

    backdrop-filter:
        blur(14px);

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

}


.layout-info-card strong {

    display: block;

    color: #083c25;

    font-size: .85rem;

    font-weight: 800;

}


.layout-info-card span {

    display: block;

    margin-top: 3px;

    color: #718078;

    font-size: .67rem;

}


.layout-card-icon {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #083c25;

    color: white;

    font-size: .65rem;

    font-weight: 900;

}


.layout-card-one {

    left: 2%;

    top: 30%;

}


.layout-card-two {

    right: 2%;

    top: 27%;

    animation-delay: -1.2s;

}


.layout-card-three {

    left: 3%;

    bottom: 25%;

    animation-delay: -2.4s;

}


.layout-card-four {

    right: 2%;

    bottom: 21%;

    animation-delay: -3.5s;

}


@keyframes cardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


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

.fsb-layout-statement {

    display: grid;

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

    align-items: center;

    gap: 25px;

    margin-top: 30px;

}


.statement-line {

    height: 1px;

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

}


.statement-line:last-child {

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

}


.statement-content {

    text-align: center;

}


.statement-content > span {

    color: #6d9950;

    font-size: .65rem;

    font-weight: 900;

    letter-spacing: .18em;

}


.statement-content h3 {

    margin:
        8px
        0
        10px;

    color: #083c25;

    font-size:
        clamp(
            1.4rem,
            3vw,
            2.5rem
        );

    line-height: 1.1;

    font-weight: 900;

}


.statement-content p {

    max-width: 600px;

    margin: auto;

    color: #718078;

    line-height: 1.7;

    font-size: .85rem;

}


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

.reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   SECTION 2 — TABLET
========================================================= */

@media (max-width: 1000px) {

    .fsb-layout-stage {

        min-height: 700px;

    }


    .fsb-layout-image-wrap {

        width:
            min(
                450px,
                52vw
            );

    }


    .layout-info-card {

        min-width: 195px;

    }

}


/* =========================================================
   SECTION 2 — MOBILE
========================================================= */

@media (max-width: 600px) {

    .fsb-layout-section {

        padding:
            80px
            14px
            80px;

    }


    .fsb-layout-heading {

        margin-bottom: 15px;

    }


    .fsb-layout-heading h2 {

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

    }


    .fsb-layout-heading p {

        font-size: .82rem;

        line-height: 1.65;

    }


    .fsb-layout-stage {

        min-height: 820px;

    }


    .fsb-layout-image-wrap {

        width:
            min(
                300px,
                70vw
            );

    }


    .layout-company-logo {

        left: 2%;

        top: 0;

    }


    .layout-company-logo img {

        width: 65px;

    }


    .layout-coat {

        right: 2%;

        top: 0;

    }


    .layout-coat img {

        width: 58px;

    }


    .layout-fsb-label {

        right: 4%;

        bottom: 6%;

        font-size: .56rem;

    }


    .layout-info-card {

        min-width: 155px;

        max-width: 175px;

        padding:
            9px
            10px;

        gap: 8px;

    }


    .layout-info-card strong {

        font-size: .68rem;

    }


    .layout-info-card span {

        font-size: .53rem;

    }


    .layout-card-icon {

        width: 28px;

        height: 28px;

        font-size: .52rem;

    }


    .layout-card-one {

        left: 0;

        top: 19%;

    }


    .layout-card-two {

        right: 0;

        top: 19%;

    }


    .layout-card-three {

        left: 0;

        bottom: 18%;

    }


    .layout-card-four {

        right: 0;

        bottom: 18%;

    }


    .layout-orbit-one {

        width: 400px;

        height: 400px;

    }


    .layout-orbit-two {

        width: 500px;

        height: 500px;

    }


    .fsb-layout-statement {

        grid-template-columns: 1fr;

        gap: 15px;

        margin-top: 0;

    }


    .statement-line {

        display: none;

    }


    .statement-content h3 {

        font-size: 1.5rem;

    }

}