/* =========================================================
   JB GENERAL EXPORTS — HERO REDESIGN, SKELETONS, CARD CLICK
   -------------------------------------------------------
   Loaded LAST so it can override css/jb-export.css without
   editing that file. Nothing here changes site logic.
========================================================= */

:root {
    --jbh-ink: #08090c;
    --jbh-ink-soft: #12141a;
    --jbh-gold: #d9a527;
    --jbh-gold-lit: #f2ca70;
    --jbh-line: rgba(217, 165, 39, .38);
    --jbh-mist: rgba(255, 255, 255, .74);
}


/* =========================================================
   1. HERO — STRUCTURE
   ---------------------------------------------------------
   The photograph is a dark studio shot with the produce
   massed along the bottom edge and empty black at the top.
   So: copy sits top-left in the empty space, the emblem
   parks in the dark upper-right, and the produce is left
   visible along the bottom.
========================================================= */

.jb-hero-v2 {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* Content sets the height; 700px is a floor, not a fixed box. */
    min-height: 700px;

    display: flex;
    align-items: center;

    /* Fallback so copy stays readable if the photo fails. */
    background-color: var(--jbh-ink);
    background-size: cover;
    background-position: 68% bottom;
    background-repeat: no-repeat;
}

.jb-hero-v2 .container {
    position: relative;
    z-index: 2;
    width: 100%;
}


/* ---------------------------------------------------------
   LEGIBILITY SCRIM
   Real element rather than ::before, because the existing
   sheet sets `.jb-home-hero::before { display:none !important }`.
--------------------------------------------------------- */

.jb-hero-v2 .jb-hero-scrim {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        /* bottom vignette — grounds the produce, protects the cert strip */
        linear-gradient(
            to top,
            rgba(8, 9, 12, .92) 0%,
            rgba(8, 9, 12, .55) 18%,
            rgba(8, 9, 12, 0) 42%
        ),
        /* left column scrim — the workhorse for copy contrast */
        linear-gradient(
            100deg,
            rgba(8, 9, 12, .96) 0%,
            rgba(8, 9, 12, .93) 30%,
            rgba(8, 9, 12, .74) 48%,
            rgba(8, 9, 12, .34) 68%,
            rgba(8, 9, 12, .06) 86%,
            rgba(8, 9, 12, 0) 100%
        );
}

/* Barely-there tooth so the large flat black doesn't band. */
.jb-hero-v2 .jb-hero-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .5;

    background-image: radial-gradient(
        rgba(255, 255, 255, .045) 1px,
        transparent 1px
    );
    background-size: 3px 3px;
}


/* ---------------------------------------------------------
   CONTENT GRID
--------------------------------------------------------- */

/* The existing sheet pins .jb-hero-content with several
   `!important` rules (max-width 1100px, auto margins). They have
   to be beaten explicitly rather than out-specified. */
.jb-hero-v2 .jb-hero-content,
.jb-home-hero.jb-hero-v2 .jb-hero-content {
    position: relative;
    z-index: 2;

    /* The old layout gave this a milky panel. The scrim does
       the contrast job now, so the panel has to go. */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 74px 0 70px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 400px;
    align-items: center;
    gap: 40px;
}

.jb-hero-v2 .jb-hero-copy {
    max-width: 620px;
    min-width: 0;
}


/* =========================================================
   2. HERO — TYPE
========================================================= */

.jb-hero-v2 .jb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 18px;
    padding: 8px 15px;

    border: 1px solid var(--jbh-line);
    border-radius: 999px;

    background: rgba(217, 165, 39, .09);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    color: var(--jbh-gold-lit);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    line-height: 1;
    text-transform: uppercase;
}

.jb-hero-v2 .jb-eyebrow i {
    font-size: 12px;
    color: var(--jbh-gold);
}


/* Signature: gold trade-line echoing the light streak in the photo. */
.jb-hero-v2 .jb-hero-rule {
    position: relative;
    display: block;

    width: 210px;
    height: 1px;

    margin: 0 0 26px;

    background: linear-gradient(
        90deg,
        var(--jbh-gold) 0%,
        rgba(217, 165, 39, .28) 65%,
        rgba(217, 165, 39, 0) 100%
    );
}

.jb-hero-v2 .jb-hero-rule::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;

    width: 5px;
    height: 5px;
    margin-top: -2.5px;

    border-radius: 50%;
    background: var(--jbh-gold-lit);
    box-shadow: 0 0 10px rgba(242, 202, 112, .9);

    animation: jbTradeLine 4.5s cubic-bezier(.65, .05, .35, 1) infinite;
}

@keyframes jbTradeLine {
    0%   { left: 0;    opacity: 0; }
    12%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { left: 205px; opacity: 0; }
}


.jb-hero-v2 h1,
.jb-home-hero.jb-hero-v2 .jb-hero-content h1 {
    margin: 0 0 20px !important;

    max-width: 100% !important;

    color: #fff;

    font-size: clamp(34px, 3.5vw, 52px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -1.2px;

    text-shadow: 0 2px 26px rgba(0, 0, 0, .6);
}

/* API banners can mark a phrase as highlighted — give it the gold.
   It is allowed to wrap: on a narrow screen a long highlighted
   phrase would otherwise run off the right edge. */
.jb-hero-v2 h1 .jb-banner-highlight {
    position: relative;
    display: inline-block;
    max-width: 100%;
    color: var(--jbh-gold-lit);
    white-space: normal;
    overflow-wrap: break-word;
}

.jb-hero-v2 h1 .jb-banner-highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: linear-gradient(90deg, var(--jbh-gold), rgba(217, 165, 39, 0));
}


.jb-hero-v2 .jb-hero-copy > p,
.jb-home-hero.jb-hero-v2 .jb-hero-content p {
    max-width: 560px !important;
    margin: 0 !important;

    color: var(--jbh-mist) !important;

    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;

    text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}


/* =========================================================
   3. HERO — ACTIONS + CERTIFICATIONS
========================================================= */

/* The old sheet stacks this column and pulls the certifications
   above the buttons with `order: -1`. Both are reset here so the
   reading order is: actions first, credentials underneath. */
.jb-hero-v2 .jb-hero-bottom,
.jb-home-hero.jb-hero-v2 .jb-hero-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0 !important;
    margin-top: 32px;
}

.jb-hero-v2 .jb-hero-bottom .jb-btn-row {
    order: 1 !important;
}

.jb-hero-v2 .jb-hero-bottom .jb-hero-trust {
    order: 2 !important;
}

.jb-hero-v2 .jb-hero-bottom .jb-btn-row,
.jb-home-hero.jb-hero-v2 .jb-btn-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: auto !important;
    margin: 0 0 30px !important;
}

/* The old sheet forces these to `display: block` with a fixed
   220px width and left-aligned text, which pushes the label into
   the corner. Restore a proper centred button box. */
.jb-hero-v2 .jb-btn,
.jb-home-hero.jb-hero-v2 .jb-btn-row .jb-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;

    min-height: 54px !important;
    padding: 0 30px !important;

    border-radius: 4px !important;
    border-width: 1px !important;
    border-style: solid !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    transition: .25s ease !important;
}

.jb-hero-v2 .jb-btn i {
    font-size: 13px;
    line-height: 1;
}

.jb-hero-v2 .jb-btn-primary {
    background: var(--jbh-gold) !important;
    border-color: var(--jbh-gold) !important;
    color: #1a1408 !important;
    box-shadow: 0 12px 30px rgba(217, 165, 39, .3) !important;
}

.jb-hero-v2 .jb-btn-primary:hover {
    background: var(--jbh-gold-lit) !important;
    border-color: var(--jbh-gold-lit) !important;
    color: #1a1408 !important;
}

.jb-hero-v2 .jb-btn-light {
    background: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .5) !important;
    color: #fff !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.jb-hero-v2 .jb-btn-light:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--jbh-ink) !important;
}


/* Credential strip — reads like a compliance header, which is
   what an export buyer is actually scanning for. */
.jb-hero-v2 .jb-hero-trust {
    flex: none !important;
    width: 100% !important;
    max-width: 560px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/* The old sheet floats this label out of flow, which drops it on
   top of the buttons. Put it back in the document. */
.jb-hero-v2 .jb-hero-trust-title,
.jb-home-hero.jb-hero-v2 .jb-hero-trust-title {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    margin: 0 0 14px !important;

    color: rgba(255, 255, 255, .58) !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2.6px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.jb-hero-v2 .jb-hero-certifications {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.jb-hero-v2 .jb-cert-item {
    gap: 9px;
    min-height: 46px;
    padding: 7px 13px 7px 9px;

    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;

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

.jb-hero-v2 .jb-cert-item:hover {
    background: rgba(217, 165, 39, .14);
    border-color: var(--jbh-line);
}

.jb-hero-v2 .jb-cert-logo {
    min-width: 44px;
    height: 32px;
    font-size: 9px;
    letter-spacing: .4px;
    border-radius: 5px;
}

.jb-hero-v2 .jb-cert-item > span,
.jb-home-hero.jb-hero-v2 .jb-cert-item > span {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .6px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    color: rgba(255, 255, 255, .92) !important;
}


/* =========================================================
   4. HERO — LOGO EMBLEM
   ---------------------------------------------------------
   The old 145px box read as a stray badge. This makes it the
   right-hand anchor of the composition: a large gold orrery
   sitting in the empty black of the photograph, opposite the
   headline.
========================================================= */

.jb-hero-v2 .jb-hero-logo-box,
.jb-home-hero.jb-hero-v2 .jb-hero-logo-box {
    position: relative;
    width: 380px !important;
    height: 380px !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    justify-self: center;
    align-self: center;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border: 0 !important;
    border-radius: 50% !important;
    overflow: visible !important;

    /* The right side of the photograph is its busiest area, so the
       emblem carries its own darkening pool. Without it the gold
       mark disappears into the sack and wheat. */
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(6, 7, 10, .97) 0%,
            rgba(6, 7, 10, .95) 40%,
            rgba(6, 7, 10, .84) 58%,
            rgba(6, 7, 10, .45) 74%,
            rgba(6, 7, 10, .12) 86%,
            rgba(6, 7, 10, 0) 94%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(217, 165, 39, .22) 0%,
            rgba(217, 165, 39, .08) 48%,
            rgba(8, 9, 12, 0) 72%
        ) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;

    animation: jbEmblemIn 1.1s cubic-bezier(.2, .7, .3, 1) both;
}

/* Faint dashed orbit, the outermost ring of the orrery. */
.jb-hero-v2 .jb-hero-logo-box::before {
    content: "";
    position: absolute;
    inset: 0;
    width: auto !important;
    height: auto !important;
    top: 0 !important;
    right: 0 !important;

    border-radius: 50%;
    border: 1px dashed rgba(217, 165, 39, .28);
    background: none !important;
    filter: none !important;

    animation: jbSpin 46s linear infinite;
}

/* Solid inner ring with a gold arc. */
.jb-hero-v2 .jb-hero-logo-box::after {
    content: "";
    position: absolute;
    inset: 34px;

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    border-top-color: rgba(242, 202, 112, .85);
    border-right-color: rgba(217, 165, 39, .45);

    animation: jbSpinReverse 18s linear infinite;
}

/* Breathing glow behind the mark. */
.jb-hero-v2 .jb-logo-glow {
    width: 210px !important;
    height: 210px !important;
    background: rgba(217, 165, 39, .3) !important;
    filter: blur(46px) !important;
    animation: jbGlowPulse 5s ease-in-out infinite !important;
}

.jb-hero-v2 .jb-logo-circle {
    border-radius: 50%;
    pointer-events: none;
}

.jb-hero-v2 .jb-logo-circle-1 {
    width: 300px !important;
    height: 300px !important;
    border: 1px solid rgba(217, 165, 39, .3) !important;
    border-top-color: #f2ca70 !important;
    border-right-color: transparent !important;
    animation: jbSpin 13s linear infinite !important;
}

.jb-hero-v2 .jb-logo-circle-2 {
    width: 238px !important;
    height: 238px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-bottom-color: #d9a527 !important;
    border-left-color: transparent !important;
    animation: jbSpinReverse 9s linear infinite !important;
}

/* Particles ride the orbit instead of sitting at fixed corners. */
.jb-hero-v2 .jb-logo-particle {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: 7px !important;
    height: 7px !important;

    margin: -3.5px 0 0 -3.5px;

    background: #f2ca70 !important;
    box-shadow: 0 0 8px #f2ca70, 0 0 20px rgba(217, 165, 39, .8) !important;

    animation: jbOrbit 16s linear infinite !important;
}

.jb-hero-v2 .particle-1 { animation-delay: 0s !important; }
.jb-hero-v2 .particle-2 { animation-delay: -4s !important; }
.jb-hero-v2 .particle-3 { animation-delay: -8s !important; }
.jb-hero-v2 .particle-4 { animation-delay: -12s !important; }

.jb-hero-v2 .jb-hero-logo-box img {
    position: relative;
    z-index: 5;
    width: 210px !important;
    height: auto;

    filter:
        brightness(1.28)
        drop-shadow(0 0 14px rgba(242, 202, 112, .8))
        drop-shadow(0 0 44px rgba(217, 165, 39, .55)) !important;

    animation: jbLogoBreathe 6s ease-in-out infinite !important;
}


/* ---------------------------------------------------------
   EMBLEM KEYFRAMES
--------------------------------------------------------- */

@keyframes jbSpin {
    to { transform: rotate(360deg); }
}

@keyframes jbSpinReverse {
    to { transform: rotate(-360deg); }
}

@keyframes jbGlowPulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.12); }
}

@keyframes jbLogoBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-10px) scale(1.03); }
}

/* Radius must match .jb-logo-circle-1 for the dots to sit on it. */
@keyframes jbOrbit {
    from { transform: rotate(0deg)   translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

@keyframes jbEmblemIn {
    from { opacity: 0; transform: scale(.82) rotate(-8deg); }
    to   { opacity: 1; transform: scale(1)   rotate(0deg); }
}


/* =========================================================
   4b. HERO — MOTION
   ---------------------------------------------------------
   One orchestrated page-load sequence plus a very slow drift
   on the photograph. Everything is disabled under
   prefers-reduced-motion at the end of this file.
========================================================= */

/* Slow drift on the backdrop. A duplicate of the section's own
   image sits on top and scales, so the photo breathes without
   the edges ever showing. */
.jb-home-hero.jb-hero-v2::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: inherit;
    background-size: cover;
    background-position: 68% bottom;
    background-repeat: no-repeat;

    transform-origin: 70% 80%;
    animation: jbHeroDrift 30s ease-in-out infinite alternate;
}

@keyframes jbHeroDrift {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}


/* Staged reveal. Each element rises a little later than the one
   above it, so the eye is walked down the copy. */
.jb-hero-v2 .jb-eyebrow,
.jb-hero-v2 .jb-hero-rule,
.jb-hero-v2 h1,
.jb-hero-v2 .jb-hero-copy > p,
.jb-hero-v2 .jb-hero-bottom .jb-btn-row,
.jb-hero-v2 .jb-hero-trust {
    animation: jbRiseIn .85s cubic-bezier(.22, .68, .3, 1) both;
}

.jb-hero-v2 .jb-eyebrow                     { animation-delay: .05s; }
.jb-hero-v2 .jb-hero-rule                   { animation-delay: .18s; }
.jb-hero-v2 h1                              { animation-delay: .26s; }
.jb-hero-v2 .jb-hero-copy > p               { animation-delay: .40s; }
.jb-hero-v2 .jb-hero-bottom .jb-btn-row     { animation-delay: .54s; }
.jb-hero-v2 .jb-hero-trust                  { animation-delay: .66s; }

@keyframes jbRiseIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* The gold phrase in the headline draws its underline in. */
.jb-hero-v2 h1 .jb-banner-highlight::after {
    transform-origin: left center;
    animation: jbUnderline .9s cubic-bezier(.22, .68, .3, 1) .95s both;
}

@keyframes jbUnderline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Certification chips settle in one after another. */
.jb-hero-v2 .jb-cert-item {
    animation: jbRiseIn .6s cubic-bezier(.22, .68, .3, 1) both;
}

.jb-hero-v2 .jb-cert-item:nth-child(1) { animation-delay: .78s; }
.jb-hero-v2 .jb-cert-item:nth-child(2) { animation-delay: .86s; }
.jb-hero-v2 .jb-cert-item:nth-child(3) { animation-delay: .94s; }

/* Buttons lift on hover rather than just changing colour. */
.jb-hero-v2 .jb-btn:hover {
    transform: translateY(-3px);
}

.jb-hero-v2 .jb-btn-primary:hover {
    box-shadow: 0 16px 38px rgba(217, 165, 39, .42) !important;
}

.jb-hero-v2 .jb-btn-primary i {
    transition: transform .25s ease;
}

.jb-hero-v2 .jb-btn-primary:hover i {
    transform: translateX(4px);
}


/* =========================================================
   5. HERO — RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .jb-hero-v2 { min-height: 640px; background-position: 74% bottom; }

    .jb-hero-v2 .jb-hero-content,
    .jb-home-hero.jb-hero-v2 .jb-hero-content {
        padding: 66px 0 62px !important;
        gap: 28px;
    }

    .jb-hero-v2 .jb-hero-copy { max-width: 560px; }

    .jb-hero-v2 .jb-hero-content,
    .jb-home-hero.jb-hero-v2 .jb-hero-content {
        grid-template-columns: minmax(0, 1fr) 300px !important;
    }

    .jb-hero-v2 .jb-hero-logo-box,
    .jb-home-hero.jb-hero-v2 .jb-hero-logo-box {
        width: 290px !important;
        height: 290px !important;
        max-width: none !important;
    }

    .jb-hero-v2 .jb-logo-circle-1 { width: 228px !important; height: 228px !important; }
    .jb-hero-v2 .jb-logo-circle-2 { width: 180px !important; height: 180px !important; }
    .jb-hero-v2 .jb-logo-glow     { width: 160px !important; height: 160px !important; }
    .jb-hero-v2 .jb-hero-logo-box::after { inset: 26px; }
    .jb-hero-v2 .jb-hero-logo-box img { width: 132px !important; }

    @keyframes jbOrbit {
        from { transform: rotate(0deg)   translateX(114px) rotate(0deg); }
        to   { transform: rotate(360deg) translateX(114px) rotate(-360deg); }
    }
}


@media (max-width: 991px) {

    .jb-hero-v2 {
        min-height: 0;
        background-position: center bottom;
    }

    /* Photo reads as a band under the copy on tablet/mobile,
       so the scrim goes vertical to keep contrast honest. */
    .jb-hero-v2 .jb-hero-scrim {
        background:
            linear-gradient(
                to top,
                rgba(8, 9, 12, .94) 0%,
                rgba(8, 9, 12, .78) 30%,
                rgba(8, 9, 12, .82) 62%,
                rgba(8, 9, 12, .95) 100%
            );
    }

    /* Flex column so the emblem can be ordered above the copy.
       Left at the end of the DOM it stranded itself below the
       certification chips, half off the bottom of the section. */
    .jb-hero-v2 .jb-hero-content,
    .jb-home-hero.jb-hero-v2 .jb-hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        padding: 52px 0 56px !important;
        gap: 0 !important;
    }

    .jb-hero-v2 .jb-hero-copy {
        order: 1 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .jb-hero-v2 .jb-hero-copy > p,
    .jb-home-hero.jb-hero-v2 .jb-hero-content p {
        max-width: none !important;
    }

    .jb-hero-v2 .jb-hero-trust {
        max-width: none !important;
    }

    /* Emblem closes the hero. It sits after the certification block
       with its own breathing room, and the section's bottom padding
       below accounts for its full height so nothing is cut off. */
    .jb-hero-v2 .jb-hero-logo-box,
    .jb-home-hero.jb-hero-v2 .jb-hero-logo-box {
        order: 2 !important;
        width: 200px !important;
        height: 200px !important;
        max-width: none !important;
        margin: 34px auto 0 !important;
        align-self: center !important;
        flex: 0 0 auto !important;
    }

    .jb-hero-v2 .jb-logo-circle-1 { width: 160px !important; height: 160px !important; }
    .jb-hero-v2 .jb-logo-circle-2 { width: 126px !important; height: 126px !important; }
    .jb-hero-v2 .jb-logo-glow     { width: 112px !important; height: 112px !important; }
    .jb-hero-v2 .jb-hero-logo-box::after { inset: 20px; }
    .jb-hero-v2 .jb-hero-logo-box img { width: 96px !important; }

    @keyframes jbOrbit {
        from { transform: rotate(0deg)   translateX(80px) rotate(0deg); }
        to   { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
    }

    .jb-hero-v2 h1,
    .jb-home-hero.jb-hero-v2 .jb-hero-content h1 {
        letter-spacing: -.6px;
        /* Long words must not break mid-syllable on narrow screens. */
        overflow-wrap: break-word !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    .jb-hero-v2 .jb-hero-copy > p,
    .jb-home-hero.jb-hero-v2 .jb-hero-content p { font-size: 15px !important; }
}


@media (max-width: 575px) {

    .jb-hero-v2 .jb-hero-content,
    .jb-home-hero.jb-hero-v2 .jb-hero-content { padding: 42px 0 48px !important; }

    .jb-hero-v2 .jb-eyebrow {
        font-size: 10px;
        letter-spacing: 1.8px;
        padding: 7px 12px;
    }

    .jb-hero-v2 .jb-hero-rule { width: 150px; }

    @keyframes jbTradeLine {
        0%   { left: 0;   opacity: 0; }
        12%  { opacity: 1; }
        78%  { opacity: 1; }
        100% { left: 145px; opacity: 0; }
    }

    .jb-hero-v2 h1,
    .jb-home-hero.jb-hero-v2 .jb-hero-content h1 {
        font-size: clamp(27px, 8.4vw, 34px) !important;
    }

    .jb-hero-v2 .jb-hero-bottom .jb-btn-row {
        gap: 10px !important;
        width: 100% !important;
    }

    /* Share the row when both fit; stretch to full width each when
       a longer API label forces them to wrap. */
    .jb-hero-v2 .jb-btn,
    .jb-home-hero.jb-hero-v2 .jb-btn-row .jb-btn {
        flex: 1 1 150px !important;
        min-height: 50px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }

    .jb-hero-v2 .jb-hero-certifications { gap: 8px; }

    .jb-hero-v2 .jb-cert-item {
        flex: 1 1 calc(50% - 4px);
        min-height: 44px;
    }
}


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

    .jb-hero-v2 .jb-hero-rule::after { animation: none; left: 0; }

    /* Everything still renders, it just stops moving. */
    .jb-hero-v2 *,
    .jb-hero-v2 *::before,
    .jb-hero-v2 *::after,
    .jb-home-hero.jb-hero-v2::before {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* =========================================================
   6. FULL-CARD CLICK
   ---------------------------------------------------------
   The card's existing link is stretched to cover the whole
   card, so a click anywhere opens it. The real <a href>
   is untouched, so middle-click, right-click, "open in new
   tab" and keyboard focus all keep working.
========================================================= */

.jb-category-card,
.jb-featured-product {
    position: relative;
}

.jb-category-card .jb-text-link::after,
.jb-featured-product .jb-featured-product-copy > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    /* Keeps the click target invisible but real. */
    background: transparent;
    border-radius: inherit;
}

/* Anything the stretched link would swallow but shouldn't. */
.jb-category-card .jb-category-badge,
.jb-featured-product .jb-featured-product-image {
    position: relative;
    z-index: 2;
}

/* Whole card reads as clickable. */
.jb-category-card,
.jb-featured-product {
    cursor: pointer;
}

/* Hover state now belongs to the card, not just the link. */
.jb-category-card:hover .jb-text-link,
.jb-category-card:focus-within .jb-text-link {
    gap: 11px;
}

.jb-category-card:hover .jb-text-link i {
    transform: translateX(3px);
}

.jb-category-card .jb-text-link i {
    transition: transform .25s ease;
}

/* Visible keyboard focus, since the card is now the target. */
.jb-category-card:focus-within,
.jb-featured-product:focus-within {
    outline: 2px solid var(--jb-teal, #009989);
    outline-offset: 3px;
}

.jb-category-card .jb-text-link:focus,
.jb-featured-product .jb-featured-product-copy > a:focus {
    outline: none;
}


/* =========================================================
   7. SKELETON LOADERS
   ---------------------------------------------------------
   Shown until the API responds. Card footprint matches the
   real card so the grid doesn't jump when data lands.
========================================================= */

.jb-skeleton-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--jb-border, #e6eaea);
    cursor: default;
}

.jb-skeleton-media {
    height: 245px;
    width: 100%;
}

.jb-skeleton-body {
    padding: 24px;
}

.jb-skeleton-line {
    display: block;
    height: 12px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.jb-skeleton-line:first-child {
    height: 20px;
    margin-bottom: 16px;
}

.jb-skeleton-line:last-child {
    margin-bottom: 0;
}

.jb-skeleton-link {
    height: 12px;
    margin-top: 20px;
}

.jb-skeleton-line.w-35 { width: 35%; }
.jb-skeleton-line.w-45 { width: 45%; }
.jb-skeleton-line.w-75 { width: 75%; }
.jb-skeleton-line.w-90 { width: 90%; }

.jb-shimmer {
    position: relative;
    overflow: hidden;
    background: #e9edee;
}

.jb-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);

    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .68) 50%,
        rgba(255, 255, 255, 0) 100%
    );

    animation: jbShimmer 1.4s ease-in-out infinite;
}

@keyframes jbShimmer {
    100% { transform: translateX(100%); }
}

/* Stagger so the grid breathes instead of pulsing in lockstep. */
.jb-skeleton-card:nth-child(2) .jb-shimmer::after { animation-delay: .12s; }
.jb-skeleton-card:nth-child(3) .jb-shimmer::after { animation-delay: .24s; }
.jb-skeleton-card:nth-child(4) .jb-shimmer::after { animation-delay: .36s; }
.jb-skeleton-card:nth-child(5) .jb-shimmer::after { animation-delay: .48s; }
.jb-skeleton-card:nth-child(6) .jb-shimmer::after { animation-delay: .60s; }

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

    .jb-shimmer::after { animation: none; opacity: .35; }
}

@media (max-width: 767px) {

    .jb-skeleton-media { height: 200px; }
}


/* =========================================================
   8. EMPTY STATE
   Replaces skeletons when the API returns nothing.
========================================================= */

.jb-async-empty {
    grid-column: 1 / -1;
    padding: 54px 24px;
    text-align: center;
    border: 1px dashed var(--jb-border, #e6eaea);
    background: #fbfcfc;
}

.jb-async-empty i {
    font-size: 26px;
    color: var(--jb-muted, #7a8a8b);
    margin-bottom: 14px;
    display: block;
}

.jb-async-empty h3 {
    margin: 0 0 8px;
    font-size: 19px;
    color: var(--jb-purple, #291f51);
}

.jb-async-empty p {
    margin: 0;
    color: var(--jb-muted, #7a8a8b);
    line-height: 1.7;
}


/* =========================================================
   9. MOBILE HEADER — BRAND VS "QUICK ENQUIRY"
   ---------------------------------------------------------
   On narrow screens the brand block and the enquiry button
   were overlapping (brand ended at 185px, button started at
   163px on a 360px screen). The row is given an explicit
   space-between layout, the brand is pinned left, and the
   logo is capped so both always fit.
========================================================= */

@media (max-width: 991px) {

    .jb-main-header .jb-main-header-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;

        /* The hamburger is absolutely positioned over this row, so
           the row keeps clear space for it on the right. */
        padding-right: 54px !important;
    }

    /* Brand sits hard left in the space that was empty before. */
    .jb-main-header .jb-brand {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 auto 0 0 !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
    }

    .jb-main-header .jb-brand img {
        width: auto !important;
        max-width: 118px !important;
        height: auto !important;
        max-height: 44px !important;
        object-fit: contain !important;
    }

    /* Button holds its size and never gets walked over. The old
       rule centred it with `top: 50%` + `translateY(-50%)` while
       absolutely positioned; now that it sits in normal flow that
       transform would drag it up out of the bar. */
    .jb-main-header .jb-header-action {
        position: static !important;
        top: auto !important;
        transform: none !important;
        align-self: center !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        white-space: nowrap !important;
    }

    /* Row must be able to hold the button without overflowing. */
    .jb-main-header,
    .jb-main-header .jb-main-header-inner {
        height: auto !important;
        min-height: 70px !important;
        overflow: visible !important;
    }

    .jb-main-header .jb-main-header-inner {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}


@media (max-width: 575px) {

    .jb-main-header .jb-main-header-inner {
        gap: 8px !important;
    }

    .jb-main-header .jb-brand img {
        max-width: 96px !important;
        max-height: 38px !important;
    }

    .jb-main-header .jb-header-action {
        padding: 0 12px !important;
        font-size: 12px !important;
    }
}


/* =========================================================
   10. TWO-WAY TRADE CAPABILITY CARDS — CLIPPED CONTENT
   ---------------------------------------------------------
   responsive-fixes.css pins these cards to `aspect-ratio:
   496/520`. On a narrow screen that resolves to ~356px tall
   while the copy needs ~492px, and `overflow: hidden` cuts
   the rest off. Below desktop the ratio is dropped so the
   card grows to fit its content instead.
========================================================= */

@media (max-width: 1199px) {

    .jb-trade-capability-card {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .jb-trade-capability-copy {
        width: 100% !important;
        padding: 34px 26px !important;
    }

    /* Overlay must cover the taller card, not just the old box. */
    .jb-trade-capability-overlay {
        inset: 0 !important;
        background: linear-gradient(
            180deg,
            rgba(14, 19, 32, .45),
            rgba(14, 19, 32, .94)
        ) !important;
    }
}


@media (max-width: 575px) {

    .jb-trade-capability-copy {
        padding: 26px 20px !important;
    }

    .jb-trade-capability-copy h3 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .jb-trade-capability-copy p,
    .jb-trade-capability-copy li {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .jb-trade-capability-copy ul {
        margin: 16px 0 !important;
    }
}


/* =========================================================
   11. GENERAL SMALL-SCREEN OVERFLOW GUARD
   Stops any long word or fixed-width child forcing a
   horizontal scrollbar on the page.
========================================================= */

@media (max-width: 991px) {

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .jb-section .container,
    .jb-main-header .container {
        max-width: 100% !important;
    }
}