/*
 * ARHTRD Child Theme — assets/css/home.css
 *
 * Homepage-specific styles.
 * Loaded only on the front page via inc/enqueue.php.
 *
 * Structure mirrors section load order in front-page.php:
 *   1. Hero
 *   2. Trust Strip
 *   3. Categories
 *   4. Why Us
 *   5. Industries
 *   6. Brands
 *   7. Promos
 *   8. Testimonials
 *   9. RFQ
 *  10. Blog
 *
 * Add section styles here as template parts are built out.
 */


/* ==========================================================================
   0. GLOBAL DESIGN TOKENS
   ==========================================================================
   Shared constants for the homepage. Every section's scoped custom property
   (--cat-accent, --why-accent, etc.) should resolve back to one of these.
   Centralising them here means a brand colour update is a single-line change.

   Sections reference their own scoped vars for encapsulation, but those vars
   are set to reference these roots — making the system both modular and DRY.
   ========================================================================== */

:root {
    /* Colour palette */
    --home-accent:          #D4A017;   /* precision amber — industrial gold */
    --home-dark:            #0F1117;   /* primary dark surface / text */
    --home-dark-deep:       #0D0F16;   /* deepest dark — RFQ section only */
    --home-light:           #F5F6F8;   /* light grey surface */
    --home-white:           #FFFFFF;

    /* Typography */
    --home-text-primary:    #0F1117;
    --home-text-secondary:  #4A4F5A;
    --home-text-muted:      #6B7280;

    /* Borders */
    --home-border-light:    rgba(15, 17, 23, 0.08);
    --home-border-dark:     rgba(255, 255, 255, 0.08);

    /* Layout */
    --home-container:       1280px;
    --home-pad-x:           20px;
    --home-pad-x-mobile:    16px;
    --home-pad-y:           88px;      /* standard section vertical padding */
    --home-pad-y-mobile:    60px;      /* standard section mobile padding */
    --home-radius:          4px;       /* card border radius */

    /* Spacing */
    --home-intro-gap:       56px;      /* intro → grid gap (mobile/tablet) */
    --home-intro-gap-lg:    64px;      /* intro → grid gap (desktop) */

    /* Animation */
    --home-ease:            0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --home-ease-img:        0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Typography scale — section headings */
    --home-h2-clamp:        clamp(1.625rem, 3vw, 2.375rem);

    /* Description widths */
    --home-desc-width:      52ch;      /* left-aligned section description */
    --home-desc-width-col:  48ch;      /* description in two-column right slot */
}


/* ==========================================================================
   1. HERO
   ==========================================================================
   Mobile-first. Breakpoints:
     tablet  → 768px
     desktop → 1100px
     wide    → 1400px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties — hero scope (dark video theme)
   -------------------------------------------------------------------------- */
.hero {
    --hero-pad-y:          72px;
    --hero-pad-x:          20px;
    --hero-gap:            48px;
    --hero-accent-color:   #D4A017;             /* precision amber — industrial gold */
    --hero-text-primary:   #FFFFFF;             /* white over dark video */
    --hero-text-secondary: rgba(255,255,255,0.72);
    --hero-surface:        #0D0F16;             /* dark fallback while video loads */
    --hero-border:         rgba(255,255,255,0.14);
    --hero-grid-color:     #FFFFFF;
    --hero-cta-radius:     3px;                 /* deliberate: sharp corners = precision */
    --hero-transition:     0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.hero {
    position:   relative;
    overflow:   hidden;
    background: var(--hero-surface);
    padding:    var(--hero-pad-y) var(--hero-pad-x);
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
}

@supports (height: 100dvh) {
    .hero {
        min-height: 100dvh;
    }
}

/* Admin bar offsets — WP adds margin-top to html.admin-bar */
.admin-bar .hero {
    min-height: calc(100vh - 32px);
    min-height: calc(100svh - 32px);
}

@supports (height: 100dvh) {
    .admin-bar .hero {
        min-height: calc(100dvh - 32px);
    }
}
@media screen and (max-width: 782px) {
    .admin-bar .hero {
        min-height: calc(100vh - 46px);
        min-height: calc(100svh - 46px);
    }

    @supports (height: 100dvh) {
        .admin-bar .hero {
            min-height: calc(100dvh - 46px);
        }
    }
}

/* Full-width background layer — video container, receives GSAP parallax */
.hero__bg {
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    bottom:     -20%;  /* extend below to absorb upward parallax without gaps */
    z-index:    0;
    overflow:   hidden;
    will-change: transform;
}

/* Background video — cinematic full-cover */
.hero__bg-video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
}

/* 80% black overlay — ensures strong readability for white text */
.hero__bg-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.80);
    z-index:    1;
}

/* --------------------------------------------------------------------------
   Container — switches to two-column at desktop
   -------------------------------------------------------------------------- */
.hero__container {
    position:        relative;
    z-index:         1;
    display:         grid;
    grid-template-columns: 1fr;
    gap:             var(--hero-gap);
    max-width:       1280px;
    margin-inline:   auto;
    align-items:     center;
    min-height:      calc(100vh - (var(--hero-pad-y) * 2));
    min-height:      calc(100svh - (var(--hero-pad-y) * 2));
}

@supports (height: 100dvh) {
    .hero__container {
        min-height: calc(100dvh - (var(--hero-pad-y) * 2));
    }
}

@media (min-width: 1100px) {
    .hero__container {
        grid-template-columns: 1fr 1fr;
        gap:                   64px;
        min-height:            640px;
    }
}

@media (min-width: 1400px) {
    .hero__container {
        grid-template-columns: 52fr 48fr;
        gap:                   80px;
        min-height:            700px;
    }
}

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */
.hero__content {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    max-width:      600px;
}

/* Eyebrow */
.hero__eyebrow {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   0.75rem;        /* 12px */
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color:       var(--hero-accent-color);
    margin:      0;
    line-height: 1;
}

.hero__eyebrow-line {
    display:          block;
    width:            32px;
    height:           2px;
    background-color: var(--hero-accent-color);
    flex-shrink:      0;
    /* GSAP will animate width from 0 → 32px */
    will-change:      width, opacity;
}

/* Heading */
.hero__heading {
    margin:      0;
    font-size:   clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    color:       var(--hero-text-primary);
    /* GSAP will split lines and animate each */
    will-change: transform, opacity;
}

/* Description */
.hero__description {
    margin:      0;
    font-size:   clamp(0.9375rem, 1.5vw, 1.0625rem); /* 15–17px */
    line-height: 1.7;
    color:       var(--hero-text-secondary);
    max-width:   52ch;
}

/* --------------------------------------------------------------------------
   CTA group
   -------------------------------------------------------------------------- */
.hero__cta-group {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
    align-items: center;
}

/* Shared CTA base */
.hero__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         13px 26px;
    font-size:       0.9375rem; /* 15px */
    font-weight:     600;
    letter-spacing:  0;
    text-decoration: none;
    border-radius:   var(--hero-cta-radius);
    border:          2px solid transparent;
    transition:
        background-color var(--hero-transition),
        border-color     var(--hero-transition),
        color            var(--hero-transition),
        box-shadow       var(--hero-transition);
    white-space:     nowrap;
    cursor:          pointer;
    will-change:     transform, opacity; /* GSAP entry */
}

/* Primary CTA — amber on dark video: brand-forward, high contrast */
.hero__cta--primary {
    background-color: var(--hero-accent-color);
    border-color:     var(--hero-accent-color);
    color:            #0F1117;
}

.hero__cta--primary:hover,
.hero__cta--primary:focus-visible {
    background-color: #C49010;
    border-color:     #C49010;
    box-shadow:       0 4px 20px rgba(212, 160, 23, 0.35);
    color:            #0F1117;
    text-decoration:  none;
}

.hero__cta--primary:focus-visible {
    outline:        3px solid #FFFFFF;
    outline-offset: 3px;
}

/* Arrow icon inside primary CTA */
.hero__cta-arrow {
    display:     inline-flex;
    align-items: center;
    transition:  transform var(--hero-transition);
}

.hero__cta--primary:hover .hero__cta-arrow,
.hero__cta--primary:focus-visible .hero__cta-arrow {
    transform: translateX(3px);
}

/* Secondary CTA — white ghost on dark video */
.hero__cta--secondary {
    background-color: transparent;
    border-color:     rgba(255, 255, 255, 0.35);
    color:            #FFFFFF;
}

.hero__cta--secondary:hover,
.hero__cta--secondary:focus-visible {
    border-color:     #FFFFFF;
    background-color: rgba(255, 255, 255, 0.08);
    color:            #FFFFFF;
    text-decoration:  none;
}

.hero__cta--secondary:focus-visible {
    outline:        3px solid var(--hero-accent-color);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Trust items
   -------------------------------------------------------------------------- */
.hero__trust {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px 20px;
    border-top: 1px solid var(--hero-border);
    padding-top: 20px;
}

.hero__trust-item {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   0.8125rem; /* 13px */
    font-weight: 500;
    color:       var(--hero-text-secondary);
    line-height: 1.3;
    will-change: opacity, transform; /* staggered GSAP entry */
}

.hero__trust-icon {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    width:            18px;
    height:           18px;
    border-radius:    50%;
    background-color: rgba(212, 160, 23, 0.12);
    color:            var(--hero-accent-color);
    flex-shrink:      0;
}

/* --------------------------------------------------------------------------
   Media column
   -------------------------------------------------------------------------- */
.hero__media {
    position:   relative;
    width:      100%;
    /* GSAP will translate this block on scroll for parallax */
    will-change: transform;
}

/* Ensure correct stacking */
.hero__media-frame,
.hero__media-overlay,
.hero__media-accent {
    position: absolute;
}

/* Frame — wraps the image with a precision border treatment */
.hero__media-frame {
    position:      relative;  /* override absolute for natural flow in mobile */
    width:         100%;
    aspect-ratio:  4 / 5;
    overflow:      hidden;
    border-radius: 2px;
    border:        1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 22%),
        rgba(255, 255, 255, 0.035);
    /* Frame shadow — elevated depth on dark video background */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        inset 0 0 28px rgba(212, 160, 23, 0.055),
        0 24px 64px rgba(0, 0, 0, 0.50),
        0  8px 20px rgba(0, 0, 0, 0.25);
    /* GSAP will animate frame reveal */
    will-change: transform, opacity, clip-path;
    isolation:    isolate;
}

.hero__media-frame::before,
.hero__media-frame::after {
    content:        "";
    position:       absolute;
    inset:          0;
    z-index:        3;
    pointer-events: none;
}

.hero__media-frame::before {
    border: 1px solid rgba(212, 160, 23, 0.32);
    -webkit-mask:
        linear-gradient(#000 0 0) top left / 34% 1px no-repeat,
        linear-gradient(#000 0 0) top right / 42% 1px no-repeat,
        linear-gradient(#000 0 0) bottom left / 48% 1px no-repeat,
        linear-gradient(#000 0 0) bottom right / 30% 1px no-repeat,
        linear-gradient(#000 0 0) top left / 1px 42% no-repeat,
        linear-gradient(#000 0 0) top right / 1px 34% no-repeat,
        linear-gradient(#000 0 0) bottom left / 1px 28% no-repeat,
        linear-gradient(#000 0 0) bottom right / 1px 46% no-repeat;
    mask:
        linear-gradient(#000 0 0) top left / 34% 1px no-repeat,
        linear-gradient(#000 0 0) top right / 42% 1px no-repeat,
        linear-gradient(#000 0 0) bottom left / 48% 1px no-repeat,
        linear-gradient(#000 0 0) bottom right / 30% 1px no-repeat,
        linear-gradient(#000 0 0) top left / 1px 42% no-repeat,
        linear-gradient(#000 0 0) top right / 1px 34% no-repeat,
        linear-gradient(#000 0 0) bottom left / 1px 28% no-repeat,
        linear-gradient(#000 0 0) bottom right / 1px 46% no-repeat;
}

.hero__media-frame::after {
    opacity: 0.68;
    background:
        radial-gradient(circle at 92% 9%, rgba(212, 160, 23, 0.50) 0 1px, transparent 2px),
        radial-gradient(circle at 96% 18%, rgba(255, 255, 255, 0.36) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 4%, rgba(212, 160, 23, 0.26) 0 1px, transparent 2px),
        linear-gradient(135deg, transparent 0 71%, rgba(212, 160, 23, 0.20) 72%, transparent 76%),
        linear-gradient(315deg, transparent 0 82%, rgba(255, 255, 255, 0.10) 83%, transparent 86%);
    mix-blend-mode: screen;
}

@media (min-width: 768px) {
    .hero__media-frame {
        aspect-ratio: 3 / 4;
    }
}

@media (min-width: 1100px) {
    .hero__media-frame {
        aspect-ratio: 4 / 5;
    }
}

/* Image inside frame */
.hero__media-image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    display:    block;
    /* GSAP: subtle scale from 1.05 → 1 on entry, controlled rotation */
    will-change: transform;
}

/* Placeholder (no image set) */
.hero__media-placeholder {
    width:            100%;
    height:           100%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background-color: rgba(255, 255, 255, 0.06);
    color:            var(--hero-text-secondary);
}

.hero__media-placeholder svg {
    width:  100%;
    height: 100%;
}

/* Precision grid overlay on media */
.hero__media-overlay {
    inset:      0;
    z-index:    2;
    pointer-events: none;
    /* GSAP: opacity reveal synchronized with image entry */
    will-change: opacity;
}

.hero__grid-svg {
    width:  100%;
    height: 100%;
    color:  var(--hero-grid-color);
}

/* Corner calibration marks inherit the SVG currentColor */
.hero__grid-marks {
    opacity: 0.55;
}

/* Accent bar — vertical mechanical alignment strip */
.hero__media-accent {
    top:              12%;
    right:            -16px;
    width:            4px;
    height:           40%;
    background-color: var(--hero-accent-color);
    z-index:          3;
    /* GSAP: scaleY from 0 → 1 (transform-origin: top), precision wipe */
    transform-origin: top center;
    will-change:      transform, opacity;
}

@media (min-width: 1100px) {
    .hero__media-accent {
        right: -24px;
    }
}

/* --------------------------------------------------------------------------
   Industrial frame corners — amber L-bracket calibration marks
   Sit inside .hero__media-frame at z-index 4 (above image + grid overlay).
   GSAP fades them in mid-sequence for a "frame locked" precision reveal.
   -------------------------------------------------------------------------- */
.hero__frame-corners {
    position:       absolute;
    inset:          0;
    z-index:        4;
    pointer-events: none;
    will-change:    opacity;
}

.hero__frame-corner {
    position:    absolute;
    width:       18px;
    height:      18px;
    border-color: var(--hero-accent-color);
    border-style: solid;
    border-width: 0;
    opacity:      0.9;
}

/* Each corner exposes two sides of the L-bracket */
.hero__frame-corner--tl {
    top:              0;
    left:             0;
    border-top-width: 2px;
    border-left-width: 2px;
}

.hero__frame-corner--tr {
    top:               0;
    right:             0;
    border-top-width:  2px;
    border-right-width: 2px;
}

.hero__frame-corner--bl {
    bottom:             0;
    left:               0;
    border-bottom-width: 2px;
    border-left-width:  2px;
}

.hero__frame-corner--br {
    bottom:              0;
    right:               0;
    border-bottom-width: 2px;
    border-right-width:  2px;
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */

/* On mobile the media column sits below the content */
@media (max-width: 1099px) {
    .hero {
        --hero-gap: 32px;
    }

    .hero__container {
        align-content: center;
    }

    .hero__content {
        max-width: 680px;
    }

    .hero__media {
        max-width: min(480px, 82vw);
        margin-inline: auto;
    }

    .hero__media-frame {
        aspect-ratio: 16 / 11;
    }

    .hero__media-accent {
        right: -10px;
    }
}

/* Tighten vertical padding on smaller screens */
@media (max-width: 767px) {
    .hero {
        --hero-pad-y: 38px;
        --hero-pad-x: 16px;
        --hero-gap:   18px;
    }

    .hero__content {
        gap: 14px;
    }

    .hero__heading {
        font-size: clamp(2rem, 11vw, 2.75rem);
    }

    .hero__description {
        line-height: 1.6;
    }

    .hero__cta {
        padding-block: 11px;
    }

    .hero__cta-group {
        flex-direction: column;
        align-items:    flex-start;
        gap:            10px;
    }

    .hero__cta {
        width: 100%;
        justify-content: center;
    }

    .hero__trust {
        gap: 6px 12px;
        padding-top: 12px;
    }

    .hero__media {
        max-width: min(420px, 82vw);
    }

    .hero__media-frame {
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 420px) {
    .hero__trust {
        display: none;
    }

    .hero__media-frame {
        aspect-ratio: 4 / 5;
    }
}

/* Reduced motion: pause the video via attribute (JS also handles this) */
@media (prefers-reduced-motion: reduce) {
    .hero__bg-video {
        animation: none !important;
    }
}


/* ==========================================================================
   1b. WELCOME SCREEN
   Full-screen cinematic intro layer — sits BEFORE the hero in page flow.
   Occupies 100vh. Contains only a single heading over a dark image.
   Exits softly via GSAP scrub on first scroll; hero section follows beneath.

   This is separate from the hero section and must not be merged with it.

   Scroll exit (GSAP, scrubbed, no pin):
     Scroll hint  → gone at  ~8% scroll
     Corner marks → gone at ~20% scroll
     Heading      → fades/rises by ~55% scroll
     Image        → slow Ken Burns drift through 100% scroll
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.welcome-screen {
    position:        relative;
    min-height:      100vh;
    min-height:      100svh;
    overflow:        hidden;
    background:      #0D0F16;   /* dark base when image is absent */
    display:         flex;
    align-items:     center;
    justify-content: center;
}

@supports (height: 100dvh) {
    .welcome-screen {
        min-height: 100dvh;
    }
}

/* Admin bar offset — WP adds margin-top: 32px to body.admin-bar */
.admin-bar .welcome-screen {
    min-height: calc(100vh - 32px);
    min-height: calc(100svh - 32px);
}

@supports (height: 100dvh) {
    .admin-bar .welcome-screen {
        min-height: calc(100dvh - 32px);
    }
}
@media screen and (max-width: 782px) {
    .admin-bar .welcome-screen {
        min-height: calc(100vh - 46px); /* admin bar is taller on mobile */
        min-height: calc(100svh - 46px);
    }

    @supports (height: 100dvh) {
        .admin-bar .welcome-screen {
            min-height: calc(100dvh - 46px);
        }
    }
}

/* --------------------------------------------------------------------------
   Layer 0 — Background: image + overlay
   -------------------------------------------------------------------------- */
.welcome-screen__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
    overflow: hidden; /* clips the GSAP-scaled image */
    opacity:  0;
    transform: scale(1.015);
    animation: welcome-bg-in 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.welcome-screen__img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center center;
    display:         block;
    will-change:     transform; /* GSAP scale + yPercent on scroll exit */
}

/* ~80% black overlay */
.welcome-screen__overlay {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: rgba(0, 0, 0, 0.80);
}

@keyframes welcome-bg-in {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --------------------------------------------------------------------------
   Layer 1 — Precision corner marks (purely decorative)
   -------------------------------------------------------------------------- */
.welcome-screen__marks {
    position:       absolute;
    inset:          0;
    z-index:        2;
    pointer-events: none;
    color:          rgba(255, 255, 255, 0.25);
    will-change:    opacity;
    opacity:        0;
    animation:      welcome-marks-in 0.9s ease 0.45s forwards;
}

.welcome-screen__marks-svg {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
}

@keyframes welcome-marks-in {
    to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Layer 2 — Content: heading + amber accent rule
   -------------------------------------------------------------------------- */
.welcome-screen__content {
    position: relative;
    z-index:  3;
    display:  flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding:  0 clamp(24px, 6vw, 80px);
}

/* ONE heading — uses <p> to avoid H1 conflict with the hero below */
.welcome-screen__heading {
    margin:         0;
    font-size:      clamp(2.5rem, 6vw, 5.5rem);
    font-weight:    700;
    line-height:    1.08;
    letter-spacing: 0;
    color:          #ffffff;
    will-change:    transform, opacity;

    /* CSS entrance: fades in after preloader clears (first visit) */
    opacity:        0;
    animation:      welcome-heading-in 1s cubic-bezier(0.22, 1, 0.36, 1) 2.55s forwards;
}

/* Repeat visitor: shorter delay (.arhtrd-sticky-fast set by sticky-buttons.php) */
.arhtrd-sticky-fast .welcome-screen__heading {
    animation-delay: 0.5s;
}

@keyframes welcome-heading-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Thin amber accent line beneath the heading */
.welcome-screen__accent {
    display:    block;
    width:      48px;
    height:     2px;
    background: linear-gradient(
                    90deg,
                    transparent    0%,
                    #D4A017        30%,
                    #D4A017        70%,
                    transparent    100%
                );
    margin-top: 24px;
    opacity:    0;
    transform:  scaleX(0.55);
    transform-origin: center;
    animation:  welcome-accent-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 3.25s forwards;
}

.arhtrd-sticky-fast .welcome-screen__accent {
    animation-delay: 1.1s;
}

@keyframes welcome-accent-in {
    to { opacity: 1; transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Layer 3 — Scroll hint: amber pulse line at bottom centre
   -------------------------------------------------------------------------- */
.welcome-screen__scroll-hint {
    position:         absolute;
    bottom:           28px;
    left:             50%;
    transform:        translateX(-50%);
    z-index:          4;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    will-change:      opacity, transform;
}

.welcome-screen__scroll-line {
    display:    block;
    width:      1px;
    height:     44px;
    background: linear-gradient(
                    to bottom,
                    rgba(212, 160, 23, 0.75),
                    transparent
                );
    opacity:    0;
    animation:  welcome-scroll-pulse 2s ease-in-out 3.8s infinite;
}

.arhtrd-sticky-fast .welcome-screen__scroll-line {
    animation-delay: 1.4s;
}

@keyframes welcome-scroll-pulse {
    0%, 100% { opacity: 1;   transform: scaleY(1);    }
    50%       { opacity: 0.3; transform: scaleY(0.65); }
}

/* --------------------------------------------------------------------------
   Reduced motion — disable all keyframe animations; show everything at rest
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .welcome-screen__heading {
        animation:  none;
        opacity:    1;
        transform:  none;
        will-change: auto;
    }

    .welcome-screen__bg,
    .welcome-screen__marks {
        animation: none;
        opacity:   1;
        transform: none;
    }

    .welcome-screen__accent {
        animation: none;
        opacity:   1;
        transform: none;
    }

    .welcome-screen__scroll-line {
        animation: none;
        opacity:   0.5;
    }

    .welcome-screen__img {
        will-change: auto;
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    .welcome-screen__heading {
        letter-spacing: 0;
    }
}

@media (max-width: 440px) {

    .welcome-screen__heading {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }
}




/* ==========================================================================
   2. TRUST STRIP
   ==========================================================================
   Sits directly below the hero. Dark background provides visual contrast
   and a clean hard break — the hero surface was light (#F5F6F8), so the
   strip grounds the page and adds weight before the next section.

   Mobile-first. Breakpoints:
     tablet  → 640px
     desktop → 1100px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties — trust-strip scope
   -------------------------------------------------------------------------- */
.trust-strip {
    --ts-bg:            #0F1117;              /* same as hero text-primary */
    --ts-text-number:   #FFFFFF;
    --ts-text-label:    rgba(255, 255, 255, 0.55);
    --ts-accent:        #D4A017;              /* matches hero accent amber */
    --ts-divider:       rgba(255, 255, 255, 0.10);
    --ts-rule:          #D4A017;
    --ts-pad-y:         40px;
    --ts-pad-x:         20px;
    --ts-rule-height:   3px;
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.trust-strip {
    position:        relative;
    padding:         var(--ts-pad-y) var(--ts-pad-x);
    overflow:        hidden;
    z-index:         1;
}

/* Background fill — creates the masking effect for the border */
.trust-strip::after {
    content:          '';
    position:         absolute;
    inset:            1px;
    background-color: var(--ts-bg);
    z-index:          -1;
    pointer-events:   none;
}

/* Continuous moving scanning border */
.trust-strip::before {
    content:          '';
    position:         absolute;
    top:              -150vw;
    bottom:           -150vw;
    left:             -150vw;
    right:            -150vw;
    background:       conic-gradient(
                          from 0deg,
                          transparent 70%,
                          rgba(212, 160, 23, 0.15) 90%,
                          var(--ts-accent) 100%
                      );
    z-index:          -2;
    animation:        ts-scan 6s linear infinite;
    pointer-events:   none;
}

@keyframes ts-scan {
    100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .trust-strip::before {
        display: none;
    }
    .trust-strip::after {
        inset: 0;
    }
}

/* Bottom accent rule — amber line that grounds the strip */
.trust-strip__rule {
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           var(--ts-rule-height);
    background:       linear-gradient(
        90deg,
        transparent 0%,
        var(--ts-rule) 20%,
        var(--ts-rule) 80%,
        transparent 100%
    );
    z-index:          2;
    /* GSAP: scaleX from 0 → 1, transform-origin: left — horizontal wipe */
    transform-origin: left center;
    will-change:      transform, opacity;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.trust-strip__container {
    max-width:     1280px;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Grid — stacks on mobile, one row on tablet+
   -------------------------------------------------------------------------- */
.trust-strip__grid {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        grid;
    grid-template-columns: 1fr 1fr;
    gap:            32px 0;
}

@media (min-width: 640px) {
    .trust-strip__grid {
        grid-template-columns: repeat(4, 1fr);
        gap:                   0;
    }
}

/* --------------------------------------------------------------------------
   Individual stat item
   -------------------------------------------------------------------------- */
.trust-strip__item {
    position:    relative;
    display:     flex;
    align-items: stretch;
    /* GSAP: translateY(20px) → translateY(0) + opacity, staggered by data-index */
    will-change: transform, opacity;
    cursor:      default;
    /* Smooth CSS transition for hover states so it doesn't fight GSAP */
    transition:  transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                 background-color 0.4s ease;
    border-radius: 6px;
}

/* Hover micro-interactions */
@media (hover: hover) and (pointer: fine) {
    .trust-strip__item:hover {
        transform: translateY(-3px);
        background-color: rgba(255, 255, 255, 0.02);
    }

    .trust-strip__item:hover .trust-strip__label {
        color: rgba(255, 255, 255, 0.75); /* brighten label slightly */
    }

    .trust-strip__item:hover .trust-strip__dot {
        transform: scale(1.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-strip__item {
        transition: none;
    }
    .trust-strip__item:hover {
        transform: none;
    }
}

/* Vertical divider between items — desktop only */
.trust-strip__divider {
    display:          none;
    position:         absolute;
    left:             0;
    top:              15%;
    height:           70%;
    width:            1px;
    background-color: var(--ts-divider);
    flex-shrink:      0;
}

@media (min-width: 640px) {
    .trust-strip__divider {
        display: block;
    }
}

/* On mobile 2-col grid: show divider only on right-column items */
@media (max-width: 639px) {
    .trust-strip__item:nth-child(even) .trust-strip__divider {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Stat content block
   -------------------------------------------------------------------------- */
.trust-strip__stat {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             6px;
    padding-inline:  24px;
    width:           100%;
}

/* First item has no left padding to align flush with container */
.trust-strip__item:first-child .trust-strip__stat {
    padding-left: 0;
}

@media (min-width: 640px) {
    /* Center all stats evenly on wider layouts */
    .trust-strip__stat {
        align-items:  center;
        padding-inline: 28px;
        text-align:   center;
    }

    .trust-strip__item:first-child .trust-strip__stat {
        padding-left: 28px;
    }
}

@media (min-width: 1100px) {
    .trust-strip__stat {
        padding-inline: 40px;
    }

    .trust-strip__item:first-child .trust-strip__stat {
        padding-left: 40px;
    }
}

/* --------------------------------------------------------------------------
   Number / value
   -------------------------------------------------------------------------- */
.trust-strip__number {
    display:        block;
    font-size:      clamp(1.75rem, 3.5vw, 2.5rem); /* 28–40px */
    font-weight:    700;
    letter-spacing: -0.03em;
    line-height:    1;
    color:          var(--ts-text-number);
    /* GSAP SplitText / counter target — data-value holds raw number */
    will-change:    opacity;
}

/* Amber accent on the number — reinforces precision brand colour */
.trust-strip__dot {
    display:       inline-block;
    width:         5px;
    height:        5px;
    background:    var(--ts-accent);
    border-radius: 50%;
    margin-left:   4px;
    margin-top:    8px;
    flex-shrink:   0;
    will-change:   transform, opacity;
}

/* --------------------------------------------------------------------------
   Label
   -------------------------------------------------------------------------- */
.trust-strip__label {
    display:        block;
    font-size:      0.8125rem; /* 13px */
    font-weight:    500;
    letter-spacing: 0.04em;
    line-height:    1.4;
    color:          var(--ts-text-label);
    text-transform: uppercase;
    max-width:      16ch;
    transition:     color 0.4s ease;
}

@media (min-width: 640px) {
    .trust-strip__label {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   Responsive padding adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .trust-strip {
        --ts-pad-y: 32px;
        --ts-pad-x: 16px;
    }

    .trust-strip__stat {
        padding-inline: 12px;
    }

    .trust-strip__item:nth-child(odd) .trust-strip__stat {
        padding-left: 0;
        padding-right: 16px;
    }

    .trust-strip__item:nth-child(even) .trust-strip__stat {
        padding-left: 16px;
        padding-right: 0;
    }
}


/* ==========================================================================
   HOMEPAGE LAYOUT — GeneratePress container override
   ==========================================================================
   Belt-and-suspenders guard in case generate_content_open / generate_content_close
   are still present (e.g. added back by a GP update or plugin).

   The primary fix is the remove_action() in front-page.php.
   These rules neutralise any residual GP container width constraints
   without affecting any other page on the site.

   Coverage:
     .site-content / .inside-site-content — GP's outer content wrappers
     #primary / .content-area             — GP's main-element wrapper
     .inside-article / .entry-content     — GP's article inner wrapper
     .arhtrd-home                         — our own layout root
   ========================================================================== */

body.home .site-content,
body.home .inside-site-content,
body.home #primary,
body.home .content-area,
body.home .inside-article,
body.home .entry-content,
body.home .page-header {
    max-width:      none;
    width:          100%;
    padding-top:    0;
    padding-bottom: 0;
    padding-left:   0;
    padding-right:  0;
    margin-left:    0;
    margin-right:   0;
    float:          none; /* GP sidebar layouts use float — neutralise it */
}

/* Our homepage <main> is the direct layout root */
body.home .arhtrd-home {
    display:   block;
    width:     100%;
    max-width: none;
    padding:   0;
    margin:    0;
}


/* ==========================================================================
   SECTION SHELL SYSTEM
   ==========================================================================
   Every homepage section is a full-width block.
   This shared rule is the structural foundation — individual section rules
   add surface colour, padding, and overflow on top of it.

   Key properties enforced here:
     display: block          — never flex/grid at section level (that's for containers)
     width: 100%             — explicit, not inherited; works inside any GP wrapper
     box-sizing: border-box  — padding does not expand width beyond 100%
     position: relative      — enables absolutely-positioned children (accent bars,
                               overlay backgrounds, decorative elements) without
                               needing a separate rule per section
     opacity: 1              — explicit visibility guarantee before JS runs.
                               GSAP targets elements INSIDE sections, not the
                               section shell itself — this declaration ensures the
                               shell never participates in GSAP's opacity chain.
   ========================================================================== */

.hero,
.trust-strip,
.categories,
.why-us,
.industries,
.brands,
.promos,
.testimonials,
.rfq,
.blog {
    display:    block;
    width:      100%;
    box-sizing: border-box;
    position:   relative;
    opacity:    1; /* always visible — sections are never GSAP targets */
}


/* ==========================================================================
   CONTAINER SYSTEM
   ==========================================================================
   Every section's inner container must share the same max-width and
   centering behaviour. Hardcoded 1280px (not var()) so this works even
   if CSS custom property inheritance is disrupted by GP's structure.

   Each section's existing container rule adds display/gap on top of this.
   ========================================================================== */

.hero__container,
.trust-strip__container,
.categories__container,
.why-us__container,
.industries__container,
.brands__container,
.promos__container,
.testimonials__container,
.rfq__container,
.blog__container {
    width:         100%;
    max-width:     1280px;
    margin-inline: auto;
    box-sizing:    border-box;
}


/* ==========================================================================
   SECTION INTRO SYSTEM
   ==========================================================================
   The eyebrow → heading → description sequence is shared across every
   section that has a .{section}__intro header. These shared rules
   establish the baseline; section-specific rules override where needed.

   Visibility note: heading and description opacity is not set here.
   GSAP uses gsap.set() on these elements before its from-animations run.
   The baseline is: every intro element is visible in HTML/CSS — GSAP
   handles visibility transitions exclusively via JS.
   ========================================================================== */

/* Eyebrow — shared token */
.categories__eyebrow,
.why-us__eyebrow,
.industries__eyebrow,
.brands__eyebrow,
.promos__eyebrow,
.testimonials__eyebrow,
.blog__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            12px;
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin:         0;
    line-height:    1;
}

/* Section heading — shared scale */
.categories__heading,
.why-us__heading,
.industries__heading,
.brands__heading,
.promos__heading,
.testimonials__heading,
.blog__heading {
    margin:         0;
    font-size:      clamp(1.625rem, 3vw, 2.375rem);
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -0.02em;
}

/* Section description — shared reading measure */
.categories__description,
.why-us__description,
.industries__description,
.brands__description,
.promos__description,
.testimonials__description,
.blog__description {
    margin:      0;
    font-size:   clamp(0.9375rem, 1.4vw, 1.0625rem);
    line-height: 1.7;
}

/* Card / grid items — always start visible.
   GSAP uses gsap.set() to override opacity/y before animating in.
   Without this rule, items whose will-change triggers a compositing
   layer can appear incorrectly in some rendering engines. */
.categories__item,
.why-us__item,
.industries__item,
.brands__item,
.testimonials__item,
.blog__item {
    opacity: 1;
}


/* ==========================================================================
   3. CATEGORIES
   ==========================================================================
   Premium industrial image-led card grid. Deep charcoal background with
   ambient amber glow, geometric grid texture, and layered depth layers.

   Animation: GSAP layered entry (media wipe → image settle → body reveal),
   hover crossfade image swap, ambient background breathing, soft scroll exit.

   Mobile-first. Breakpoints:
     tablet  → 640px  (2 columns)
     desktop → 1024px (3 columns)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties — categories scope
   -------------------------------------------------------------------------- */
.categories {
    --cat-bg:             #07080b;
    --cat-pad-y:          96px;
    --cat-pad-x:          20px;
    --cat-text-primary:   #FFFFFF;
    --cat-text-secondary: rgba(255, 255, 255, 0.68);
    --cat-text-muted:     rgba(255, 255, 255, 0.42);
    --cat-accent:         #D4A017;
    --cat-accent-dim:     rgba(212, 160, 23, 0.18);
    --cat-border:         rgba(255, 255, 255, 0.065);
    --cat-border-hover:   rgba(212, 160, 23, 0.22);
    --cat-card-bg:        #0d0f14;
    --cat-card-radius:    5px;
    --cat-transition:     0.42s cubic-bezier(0.22, 1, 0.36, 1);
    --cat-img-transition: var(--home-ease-img);
}

/* --------------------------------------------------------------------------
   Section shell — rich industrial dark base
   -------------------------------------------------------------------------- */
.categories {
    background-color: var(--cat-bg);
    padding:          var(--cat-pad-y) var(--cat-pad-x);
    position:         relative;
    overflow:         hidden;
}

/* CSS grid texture — subtle amber engineering grid */
.categories::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image:
        linear-gradient(rgba(212, 160, 23, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 160, 23, 0.028) 1px, transparent 1px);
    background-size:  72px 72px;
    z-index:          0;
    pointer-events:   none;
}

/* Diagonal depth stripe — very low opacity for surface richness */
.categories::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: repeating-linear-gradient(
        -58deg,
        transparent,
        transparent 110px,
        rgba(255, 255, 255, 0.007) 110px,
        rgba(255, 255, 255, 0.007) 111px
    );
    z-index:       0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Background decorative layer — ambient glow + accent lines
   -------------------------------------------------------------------------- */
.categories__bg {
    position:       absolute;
    inset:          0;
    overflow:       hidden;
    z-index:        0;
    pointer-events: none;
}

/* Amber glow blob — top center */
.cat-bg-glow--1 {
    position:   absolute;
    top:        -25%;
    left:       50%;
    transform:  translateX(-50%);
    width:      90%;
    height:     65%;
    background: radial-gradient(ellipse at center, rgba(212, 160, 23, 0.09) 0%, transparent 68%);
    filter:     blur(48px);
}

/* Secondary glow — bottom-right corner depth */
.cat-bg-glow--2 {
    position:   absolute;
    bottom:     -15%;
    right:      -8%;
    width:      50%;
    height:     55%;
    background: radial-gradient(ellipse at center, rgba(212, 160, 23, 0.055) 0%, transparent 70%);
    filter:     blur(60px);
}

/* Horizontal accent lines — drawn in via GSAP scaleX on entry */
.cat-bg-line {
    position:         absolute;
    left:             -5%;
    width:            110%;
    height:           1px;
    background:       linear-gradient(
        90deg,
        transparent      0%,
        rgba(212, 160, 23, 0.1)  15%,
        rgba(212, 160, 23, 0.22) 50%,
        rgba(212, 160, 23, 0.1)  85%,
        transparent      100%
    );
    transform:        scaleX(0);
    transform-origin: left center;
    opacity:          0;
    will-change:      transform, opacity;
}

/* --------------------------------------------------------------------------
   Container — positioned above bg layer
   -------------------------------------------------------------------------- */
.categories__container {
    max-width:      var(--home-container);
    margin-inline:  auto;
    display:        flex;
    flex-direction: column;
    gap:            var(--home-intro-gap);
    position:       relative;
    z-index:        1;
}

@media (min-width: 1024px) {
    .categories__container {
        gap: var(--home-intro-gap-lg);
    }
}

/* --------------------------------------------------------------------------
   Section intro — premium typography on dark field
   -------------------------------------------------------------------------- */
.categories__intro {
    max-width:      720px;
    display:        flex;
    flex-direction: column;
    gap:            18px;
    position:       relative;
}

/* Vertical accent rule — desktop only */
@media (min-width: 1024px) {
    .categories__intro {
        padding-left: 22px;
    }

    .categories__intro::before {
        content:          '';
        position:         absolute;
        left:             0;
        top:              4px;
        bottom:           4px;
        width:            2px;
        background:       linear-gradient(to bottom, var(--cat-accent) 0%, rgba(212, 160, 23, 0.0) 100%);
        opacity:          0.65;
    }
}

/* Eyebrow */
.categories__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            12px;
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--cat-accent);
    margin:         0;
    line-height:    1;
    will-change:    opacity, transform;
}

.categories__eyebrow-line {
    display:          block;
    width:            36px;
    height:           2px;
    background-color: var(--cat-accent);
    flex-shrink:      0;
    will-change:      transform, opacity;
}

/* Section heading */
.categories__heading {
    margin:         0;
    font-size:      var(--home-h2-clamp);
    font-weight:    700;
    line-height:    1.13;
    letter-spacing: -0.025em;
    color:          var(--cat-text-primary);
    will-change:    opacity, transform;
}

/* Section description */
.categories__description {
    margin:      0;
    font-size:   clamp(0.9375rem, 1.4vw, 1.0625rem);
    line-height: 1.72;
    color:       var(--cat-text-secondary);
    max-width:   var(--home-desc-width);
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */
.categories__grid {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    grid-template-columns: 1fr;
    gap:        24px;
}

@media (min-width: 640px) {
    .categories__grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   28px;
    }
}

@media (min-width: 1024px) {
    .categories__grid {
        grid-template-columns: repeat(3, 1fr);
        gap:                   32px;
    }
}

/* --------------------------------------------------------------------------
   Card item — GSAP stagger target
   -------------------------------------------------------------------------- */
.categories__item {
    display:        flex;
    flex-direction: column;
    opacity:        1;
    will-change:    transform, opacity;
}

/* --------------------------------------------------------------------------
   Card component — premium industrial panel
   -------------------------------------------------------------------------- */
.cat-card {
    position:       relative;
    border-radius:  var(--cat-card-radius);
    overflow:       hidden;
    border:         1px solid var(--cat-border);
    background:     var(--cat-card-bg);
    display:        flex;
    flex-direction: column;
    flex:           1 1 auto;
    transition:     transform       var(--cat-transition),
                    box-shadow      var(--cat-transition),
                    border-color    var(--cat-transition);
}

@media (hover: hover) and (pointer: fine) {
    .cat-card:hover,
    .cat-card:focus-within {
        transform:    translateY(-8px);
        border-color: var(--cat-border-hover);
        box-shadow:
            0 28px 56px rgba(0, 0, 0, 0.55),
            0  0   36px rgba(212, 160, 23, 0.06),
            0  1px  0   rgba(212, 160, 23, 0.12) inset;
    }
}

/* --------------------------------------------------------------------------
   Decorative card number — ghosted engineering-print index
   GSAP: opacity 0 → 0.06 on entry, 0.06 → 0.14 on hover
   -------------------------------------------------------------------------- */
.cat-card__num {
    position:       absolute;
    top:            -0.05em;
    right:          14px;
    font-size:      clamp(3.5rem, 6vw, 5rem);
    font-weight:    800;
    line-height:    1;
    letter-spacing: -0.04em;
    color:          #FFFFFF;
    opacity:        0;
    z-index:        4;
    pointer-events: none;
    user-select:    none;
    will-change:    opacity, transform;
    mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   Card link — full-card click target
   -------------------------------------------------------------------------- */
.cat-card__link {
    display:         flex;
    flex-direction:  column;
    flex:            1 1 auto;
    text-decoration: none;
    color:           inherit;
    outline:         none;
}

.cat-card__link:focus-visible {
    outline: none;
}

.cat-card:focus-within {
    outline:        3px solid var(--cat-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Card media — image area
   overflow:hidden clips scaled images and the alt-image layer.
   -------------------------------------------------------------------------- */
.cat-card__media {
    position:     relative;
    overflow:     hidden;
    aspect-ratio: 3 / 2;
    background:   #0d0f14;
    flex-shrink:  0;
    will-change:  clip-path;
}

/* Primary image */
.cat-card__image {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    will-change:     transform, opacity;
}

/* Hover alt image — GSAP crossfades from opacity 0 → 1 on hover */
.cat-card__image--alt {
    z-index:    1;
    opacity:    0;
}

/* Overlay tint — GSAP controls opacity on hover (CSS :hover as no-JS fallback) */
.cat-card__overlay {
    position:       absolute;
    inset:          0;
    background:     rgba(7, 8, 11, 0.52);
    z-index:        2;
    pointer-events: none;
    will-change:    opacity;
}

.cat-card:hover .cat-card__overlay,
.cat-card:focus-within .cat-card__overlay {
    background: rgba(7, 8, 11, 0.2);
}

/* Mechanical scanline — sweeps across image on hover */
.cat-card__scanline {
    position:            absolute;
    inset:               0;
    background:          linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.055) 50%, transparent 100%);
    background-size:     100% 200%;
    background-position: 0% -100%;
    z-index:             3;
    pointer-events:      none;
    opacity:             0;
    transition:          opacity var(--cat-transition);
}

.cat-card:hover .cat-card__scanline,
.cat-card:focus-within .cat-card__scanline {
    opacity:   1;
    animation: cat-scanline 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cat-scanline {
    0%   { background-position: 0% -100%; }
    100% { background-position: 0% 160%;  }
}

/* Amber accent bar — GSAP scaleX 0 → 1 on hover (CSS :hover as fallback) */
.cat-card__accent {
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           3px;
    background:       linear-gradient(90deg, var(--cat-accent) 0%, rgba(212, 160, 23, 0.5) 100%);
    z-index:          4;
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform var(--cat-transition);
    will-change:      transform;
}

.cat-card:hover .cat-card__accent,
.cat-card:focus-within .cat-card__accent {
    transform: scaleX(1);
}

/* Edge glow — GSAP opacity 0 → 1 on hover */
.cat-card__edge-glow {
    position:       absolute;
    inset:          -1px;
    border-radius:  var(--cat-card-radius);
    border:         1px solid rgba(212, 160, 23, 0.30);
    box-shadow:     0 0 28px rgba(212, 160, 23, 0.10);
    z-index:        5;
    pointer-events: none;
    opacity:        0;
    will-change:    opacity;
}

/* Placeholder — absolutely fills the media area */
.cat-card__placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #0d0f14;
    color:           rgba(255, 255, 255, 0.12);
}

.cat-card__placeholder svg {
    width:   64px;
    height:  64px;
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Card body — text content below image
   -------------------------------------------------------------------------- */
.cat-card__body {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        20px 24px 24px;
    flex:           1 1 auto;
    will-change:    transform, opacity;
}

/* Top rule — thin amber accent above content */
.cat-card__body-rule {
    width:            28px;
    height:           1.5px;
    background-color: var(--cat-accent);
    opacity:          0.45;
    margin-bottom:    2px;
    flex-shrink:      0;
}

.cat-card:hover .cat-card__body-rule,
.cat-card:focus-within .cat-card__body-rule {
    opacity: 0.85;
}

/* Card title */
.cat-card__title {
    margin:         0;
    font-size:      1.075rem;
    font-weight:    700;
    line-height:    1.25;
    letter-spacing: -0.012em;
    color:          var(--cat-text-primary);
    transition:     color var(--cat-transition);
}

/* Card description */
.cat-card__description {
    margin:               0;
    font-size:            0.875rem;
    line-height:          1.65;
    color:                var(--cat-text-muted);
    flex-grow:            1;
    display:              -webkit-box;
    -webkit-line-clamp:   3;
    -webkit-box-orient:   vertical;
    overflow:             hidden;
}

/* Card CTA */
.cat-card__cta {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    font-size:      0.8125rem;
    font-weight:    600;
    letter-spacing: 0.025em;
    color:          var(--cat-accent);
    margin-top:     6px;
    transition:     gap var(--cat-transition), color var(--cat-transition);
}

.cat-card:hover .cat-card__cta,
.cat-card:focus-within .cat-card__cta {
    gap:   9px;
    color: #e8b520;
}

.cat-card__cta-arrow {
    flex-shrink:  0;
    will-change:  transform;
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .categories {
        --cat-pad-y: 64px;
        --cat-pad-x: 16px;
    }

    .cat-card__body {
        padding: 18px 18px 20px;
    }

    .cat-card__num {
        font-size: 3rem;
    }
}


/* ==========================================================================
   4. WHY CHOOSE US — Pinned Horizontal Scroll Experience
   ==========================================================================
   Desktop (≥1024px): section pins at top, card track translates horizontally
   via GSAP ScrollTrigger scrub. After the track finishes, normal vertical
   scroll resumes — no blank gap, no abrupt snap.

   Tablet (640–1023px): native horizontal swipe with scroll-snap.
   Mobile (<640px): same native swipe, narrower cards.

   No JS dependency for readability — all content visible by default.
   GSAP sets from-states only after the animation runtime is available.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties — why-us scope
   -------------------------------------------------------------------------- */
.why-us {
    --why-bg:             #0D0F14;
    --why-card-bg:        #13161E;
    --why-card-bg-active: #191D28;
    --why-border:         rgba(255, 255, 255, 0.07);
    --why-border-active:  rgba(212, 160, 23, 0.28);
    --why-accent:         #D4A017;
    --why-text-primary:   #E8EAF0;
    --why-text-secondary: #9298A6;
    --why-text-muted:     #60656F;
    --why-index-color:    rgba(212, 160, 23, 0.10);
    --why-card-w:         clamp(272px, 27vw, 392px);
    --why-card-h:         clamp(288px, 38vh, 372px);
    --why-track-gap:      18px;
    --why-transition:     0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --why-pad-x:          clamp(20px, 5vw, 80px);
    --why-intro-w:        clamp(240px, 26vw, 360px);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.why-us {
    background-color: var(--why-bg);
    position:         relative;
    overflow:         hidden;
}

/* --------------------------------------------------------------------------
   Two-zone layout wrapper
   -------------------------------------------------------------------------- */
.why-us__layout {
    display:        flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Left intro column — eyebrow / heading / description / scroll cue
   -------------------------------------------------------------------------- */
.why-us__intro-col {
    flex-shrink: 0;
    padding:     60px var(--why-pad-x) 44px;
}

.why-us__intro {
    display:        flex;
    flex-direction: column;
    gap:            18px;
    max-width:      480px;
}

/* Eyebrow (colour + will-change override shared rule) */
.why-us__eyebrow {
    color:      var(--why-accent);
    will-change: opacity, transform;
}

.why-us__eyebrow-line {
    width:            30px;
    height:           2px;
    background-color: var(--why-accent);
    flex-shrink:      0;
    will-change:      transform;
}

/* Heading */
.why-us__heading {
    font-size:      clamp(1.625rem, 3.2vw, 2.625rem);
    font-weight:    700;
    line-height:    1.12;
    letter-spacing: -0.025em;
    color:          var(--why-text-primary);
    will-change:    opacity, transform;
}

/* Description */
.why-us__description {
    font-size:   clamp(0.875rem, 1.15vw, 1rem);
    line-height: 1.72;
    color:       var(--why-text-secondary);
    max-width:   40ch;
}

/* --------------------------------------------------------------------------
   Scroll cue — desktop-only affordance, hidden on mobile/tablet
   -------------------------------------------------------------------------- */
.why-us__scroll-cue {
    display:     none;
    align-items: center;
    gap:         10px;
    margin:      6px 0 0;
}

.why-us__scroll-cue-line {
    display:          block;
    width:            20px;
    height:           1px;
    background-color: var(--why-text-muted);
    flex-shrink:      0;
}

.why-us__scroll-cue-label {
    font-size:      0.6563rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--why-text-muted);
}

/* --------------------------------------------------------------------------
   Track viewport — clips the translating track
   -------------------------------------------------------------------------- */
.why-us__track-viewport {
    position: relative;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Card track
   Mobile / tablet: native horizontal scroll with snap
   Desktop: overflow visible, GSAP controls x-translation
   -------------------------------------------------------------------------- */
.why-us__track {
    list-style:               none;
    margin:                   0;
    padding:                  0 var(--why-pad-x) 52px;
    display:                  flex;
    flex-direction:           row;
    flex-wrap:                nowrap;
    gap:                      var(--why-track-gap);
    /* native scroll for mobile/tablet */
    overflow-x:               auto;
    scroll-snap-type:         x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:          none;
    will-change:              transform;
}

.why-us__track::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   Card item
   -------------------------------------------------------------------------- */
.why-us__item {
    flex:              0 0 var(--why-card-w);
    scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   Value card — dark panel
   -------------------------------------------------------------------------- */
.why-card {
    position:   relative;
    background: var(--why-card-bg);
    border:     1px solid var(--why-border);
    border-radius: 2px;
    height:     var(--why-card-h);
    overflow:   hidden;
    transition: background-color var(--why-transition),
                border-color     var(--why-transition),
                box-shadow       var(--why-transition);
}

/* Amber top-edge shimmer — appears on hover / active */
.why-card::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(90deg,
                    transparent 0%,
                    var(--why-accent) 40%,
                    var(--why-accent) 60%,
                    transparent 100%);
    opacity:    0;
    transition: opacity var(--why-transition);
}

.why-card:hover,
.why-card:focus-within,
.why-card.is-active {
    background:   var(--why-card-bg-active);
    border-color: var(--why-border-active);
    box-shadow:   0 0 48px rgba(212, 160, 23, 0.05),
                  0 8px 32px rgba(0, 0, 0, 0.35);
}

.why-card:hover::before,
.why-card:focus-within::before,
.why-card.is-active::before {
    opacity: 1;
}

/* Inner padding wrapper */
.why-card__inner {
    padding:        32px 28px 36px;
    display:        flex;
    flex-direction: column;
    gap:            22px;
    height:         100%;
    box-sizing:     border-box;
}

/* Index counter */
.why-card__index {
    display:        block;
    font-size:      2.75rem;
    font-weight:    800;
    letter-spacing: -0.05em;
    line-height:    1;
    color:          var(--why-index-color);
    font-variant-numeric: tabular-nums;
    transition:     color var(--why-transition);
    will-change:    opacity;
}

.why-card:hover .why-card__index,
.why-card:focus-within .why-card__index,
.why-card.is-active .why-card__index {
    color: rgba(212, 160, 23, 0.20);
}

/* Card content */
.why-card__content {
    display:        flex;
    flex-direction: column;
    gap:            11px;
    flex-grow:      1;
}

/* Card title */
.why-card__title {
    margin:         0;
    font-size:      1.0625rem;
    font-weight:    700;
    line-height:    1.3;
    letter-spacing: -0.01em;
    color:          var(--why-text-primary);
    transition:     color var(--why-transition);
}

.why-card:hover .why-card__title,
.why-card:focus-within .why-card__title,
.why-card.is-active .why-card__title {
    color: #FFFFFF;
}

/* Card description */
.why-card__description {
    margin:      0;
    font-size:   0.875rem;
    line-height: 1.7;
    color:       var(--why-text-muted);
    transition:  color var(--why-transition);
}

.why-card:hover .why-card__description,
.why-card:focus-within .why-card__description {
    color: var(--why-text-secondary);
}

/* Bottom accent line — wipes in from left on hover */
.why-card__accent {
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           2px;
    background-color: var(--why-accent);
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-card:hover .why-card__accent,
.why-card:focus-within .why-card__accent {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Horizontal progress bar — desktop only
   -------------------------------------------------------------------------- */
.why-us__progress {
    display:          none;
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           2px;
    background-color: rgba(255, 255, 255, 0.05);
    z-index:          10;
}

.why-us__progress-fill {
    height:           100%;
    width:            0%;
    background-color: var(--why-accent);
    transform-origin: left center;
    will-change:      width;
    transition:       width 0.08s linear;
}

/* --------------------------------------------------------------------------
   Desktop — full horizontal scroll layout  (≥ 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .why-us__layout {
        flex-direction: row;
        align-items:    center;
        min-height:     100vh;
    }

    .why-us__intro-col {
        flex:       0 0 var(--why-intro-w);
        padding:    0 48px 0 var(--why-pad-x);
        align-self: center;
        position:   relative;
        z-index:    2;
    }

    .why-us__scroll-cue {
        display: flex;
        opacity: 0.45;
    }

    .why-us__track-viewport {
        flex:        1;
        overflow:    hidden;
        height:      100vh;
        display:     flex;
        align-items: center;
    }

    /* On desktop, GSAP controls the x-translation; disable native scroll */
    .why-us__track {
        overflow:         visible;
        scroll-snap-type: none;
        padding:          0 clamp(32px, 4vw, 64px) 0 clamp(20px, 2.5vw, 40px);
        width:            max-content;
        flex-shrink:      0;
    }

    .why-us__item {
        scroll-snap-align: none;
    }

    .why-us__progress {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Tablet  640–1023px — native swipe, wider cards
   -------------------------------------------------------------------------- */
@media (min-width: 640px) and (max-width: 1023px) {

    .why-us__intro-col {
        padding: 72px var(--why-pad-x) 40px;
    }

    .why-us__item {
        flex-basis: clamp(256px, 44vw, 340px);
    }
}

/* --------------------------------------------------------------------------
   Mobile  < 640px — narrower cards, tighter padding
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {

    .why-us {
        --why-pad-x:  16px;
        --why-card-w: 82vw;
    }

    .why-us__intro-col {
        padding: 56px 16px 32px;
    }

    .why-us__track {
        padding-bottom: 40px;
    }

    .why-card__inner {
        padding: 26px 22px 30px;
    }

    .why-card__index {
        font-size: 2.125rem;
    }
}


/* ==========================================================================
   5. INDUSTRIES SERVED
   ==========================================================================
   Four image-backed cards in an asymmetric editorial grid. The layout breaks
   the uniform tile rhythm established by categories and why-us, signalling
   a shift in content tone — this is about sector identity, not product lists.

   Surface: dark (#0F1117) — creates a strong visual break and makes
   the image cards read as immersive. Matches the trust strip surface.

   Desktop grid — 12-column CSS grid with named rows:
     Col 1–7:  Card 1 (tall, two rows)
     Col 8–12: Card 2 (row 1) / Card 3 (row 2)
     Col 1–12: Card 4 (full-width landscape strip)

   Tablet:  2-col equal, all four cards same height
   Mobile:  single column stack

   Mobile-first. Breakpoints:
     tablet  → 768px
     desktop → 1100px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties — industries scope
   -------------------------------------------------------------------------- */
.industries {
    --ind-bg:             #0F1117;
    --ind-pad-y:          88px;
    --ind-pad-x:          20px;
    --ind-text-primary:   #FFFFFF;
    --ind-text-secondary: rgba(255, 255, 255, 0.65);
    --ind-accent:         #D4A017;
    --ind-card-radius:    4px;
    --ind-overlay-base:   rgba(15, 17, 23, 0.50);
    --ind-overlay-hover:  rgba(15, 17, 23, 0.68);
    --ind-transition:     var(--home-ease);
    --ind-img-transition: var(--home-ease-img);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.industries {
    background-color: var(--ind-bg);
    padding:          var(--ind-pad-y) var(--ind-pad-x);
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.industries__container {
    max-width:      var(--home-container);
    margin-inline:  auto;
    display:        flex;
    flex-direction: column;
    gap:            var(--home-intro-gap);
}

@media (min-width: 1100px) {
    .industries__container {
        gap: var(--home-intro-gap-lg);
    }
}

/* --------------------------------------------------------------------------
   Section intro — mirrors why-us two-column editorial split
   -------------------------------------------------------------------------- */
.industries__intro {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

@media (min-width: 1100px) {
    .industries__intro {
        flex-direction:  row;
        align-items:     flex-end;
        justify-content: space-between;
        gap:             64px;
    }
}

.industries__intro-primary {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    flex-shrink:    0;
}

@media (min-width: 1100px) {
    .industries__intro-primary {
        max-width: 520px;
    }
}

/* Eyebrow */
.industries__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            12px;
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--ind-accent);
    margin:         0;
    line-height:    1;
    will-change:    opacity, transform;
}

.industries__eyebrow-line {
    display:          block;
    width:            32px;
    height:           2px;
    background-color: var(--ind-accent);
    flex-shrink:      0;
    will-change:      transform, opacity;
}

/* Section heading */
.industries__heading {
    margin:         0;
    font-size:      var(--home-h2-clamp);
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -0.02em;
    color:          var(--ind-text-primary);
    will-change:    opacity, transform;
}

/* Section description */
.industries__description {
    margin:      0;
    font-size:   clamp(0.9375rem, 1.4vw, 1.0625rem);
    line-height: 1.7;
    color:       var(--ind-text-secondary);
    max-width:   var(--home-desc-width-col); /* 48ch — two-column right slot */
}

@media (min-width: 1100px) {
    .industries__description {
        padding-bottom: 6px;
    }
}

/* --------------------------------------------------------------------------
   Card grid — mobile: single column
   -------------------------------------------------------------------------- */
.industries__grid {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    grid-template-columns: 1fr;
    gap:        16px;
}

/* Tablet: uniform 2-col, equal-height cards */
@media (min-width: 768px) {
    .industries__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows:        320px;
    }
}

/* Desktop: asymmetric editorial layout
   12-column grid, 3 rows.
   Card 1 occupies col 1–7, rows 1–2 (tall).
   Card 2 occupies col 8–12, row 1 (portrait upper).
   Card 3 occupies col 8–12, row 2 (portrait lower).
   Card 4 occupies col 1–12, row 3 (full-width landscape).
*/
@media (min-width: 1100px) {
    .industries__grid {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows:    320px 320px 280px;
        gap:                   16px;
    }

    .industries__item--1 {
        grid-column: 1 / 8;
        grid-row:    1 / 3;
    }

    .industries__item--2 {
        grid-column: 8 / 13;
        grid-row:    1 / 2;
    }

    .industries__item--3 {
        grid-column: 8 / 13;
        grid-row:    2 / 3;
    }

    .industries__item--4 {
        grid-column: 1 / 13;
        grid-row:    3 / 4;
    }
}

/* --------------------------------------------------------------------------
   Grid item — GSAP stagger target
   -------------------------------------------------------------------------- */
.industries__item {
    will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   Industry card
   -------------------------------------------------------------------------- */
.ind-card {
    position:      relative;
    border-radius: var(--ind-card-radius);
    overflow:      hidden;
    height:        100%;
    background:    #1A1D26; /* dark placeholder surface */
    /* Subtle border reflects light against the dark section bg */
    border:        1px solid rgba(255, 255, 255, 0.06);
    transition:    border-color var(--ind-transition);
}

.ind-card:hover,
.ind-card:focus-within {
    border-color: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Full-card link
   -------------------------------------------------------------------------- */
.ind-card__link {
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end; /* body anchored to bottom */
    height:          100%;
    text-decoration: none;
    color:           inherit;
    outline:         none;
    position:        relative;
    min-height:      260px;
}

/* Focus ring on the card itself */
.ind-card:focus-within {
    outline:        3px solid var(--ind-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Media — full-bleed background image
   -------------------------------------------------------------------------- */
.ind-card__media {
    position: absolute;
    inset:    0;
    z-index:  0;
}

/* Image fills the entire card */
.ind-card__image {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    transition:      transform var(--ind-img-transition);
    will-change:     transform;
}

.ind-card:hover .ind-card__image,
.ind-card:focus-within .ind-card__image {
    transform: scale(1.04);
}

/* Gradient overlay — ensures text is always legible regardless of image */
.ind-card__overlay {
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to top,
        rgba(15, 17, 23, 0.82) 0%,
        rgba(15, 17, 23, 0.38) 50%,
        rgba(15, 17, 23, 0.12) 100%
    );
    transition: background var(--ind-transition);
    z-index:   1;
}

.ind-card:hover .ind-card__overlay,
.ind-card:focus-within .ind-card__overlay {
    background: linear-gradient(
        to top,
        rgba(15, 17, 23, 0.90) 0%,
        rgba(15, 17, 23, 0.50) 55%,
        rgba(15, 17, 23, 0.18) 100%
    );
}

/* Placeholder (no image) */
.ind-card__placeholder {
    width:   100%;
    height:  100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color:   rgba(255, 255, 255, 0.12);
}

.ind-card__placeholder svg {
    width:  60%;
    height: 60%;
    max-width: 200px;
}

/* --------------------------------------------------------------------------
   Card body — sits above overlay via z-index
   -------------------------------------------------------------------------- */
.ind-card__body {
    position:        relative;
    z-index:         2;
    display:         flex;
    flex-direction:  column;
    gap:             10px;
    padding:         28px 28px 24px;
    /* Description and CTA hidden by default — slide up on hover */
    overflow:        hidden;
}

/* Card title */
.ind-card__title {
    margin:         0;
    font-size:      clamp(1.0625rem, 1.8vw, 1.25rem);
    font-weight:    700;
    line-height:    1.25;
    letter-spacing: -0.01em;
    color:          var(--ind-text-primary);
    transition:     transform var(--ind-transition);
}

/* Card description — hidden at rest, visible on hover via max-height */
.ind-card__description {
    margin:      0;
    font-size:   0.875rem;
    line-height: 1.6;
    color:       rgba(255, 255, 255, 0.75);
    max-height:  0;
    opacity:     0;
    overflow:    hidden;
    transition:
        max-height var(--ind-transition),
        opacity    var(--ind-transition);
}

.ind-card:hover .ind-card__description,
.ind-card:focus-within .ind-card__description {
    max-height: 120px; /* enough for 4 lines — content never truncates */
    opacity:    1;
}

/* Card CTA */
.ind-card__cta {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    font-size:      0.8125rem;
    font-weight:    600;
    letter-spacing: 0.03em;
    color:          var(--ind-accent);
    transition:     gap var(--ind-transition), opacity var(--ind-transition);
    opacity:        0;
}

.ind-card:hover .ind-card__cta,
.ind-card:focus-within .ind-card__cta {
    opacity: 1;
    gap:     8px;
}

.ind-card__cta-arrow {
    flex-shrink: 0;
    transition:  transform var(--ind-transition);
}

.ind-card:hover .ind-card__cta-arrow,
.ind-card:focus-within .ind-card__cta-arrow {
    transform: translateX(3px);
}

/* Amber bottom accent line */
.ind-card__accent {
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           3px;
    background-color: var(--ind-accent);
    z-index:          3;
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform var(--ind-transition);
}

.ind-card:hover .ind-card__accent,
.ind-card:focus-within .ind-card__accent {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Mobile / tablet aspect ratio enforcement
   When the grid uses auto-rows on tablet, cards fill that row height.
   On mobile we enforce an aspect ratio so cards don't collapse to nothing.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ind-card__link {
        min-height: 280px;
    }

    .ind-card__body {
        padding: 20px 20px 18px;
    }

    /* On mobile always show description — no hover state on touch */
    .ind-card__description {
        max-height: 120px;
        opacity:    1;
    }

    .ind-card__cta {
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   Responsive padding
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .industries {
        --ind-pad-y: 60px;
        --ind-pad-x: 16px;
    }
}


/* ==========================================================================
   6. BRANDS — Precision Tool Rack / Machine Dashboard
   ==========================================================================
   Industrial dark surface with amber corner brackets, machine-panel cards,
   and a scroll-triggered scan-line reveal sequence.

   Surface: deep dark navy — premium break from the dark industries section,
   unified dark language, maximum logo contrast headroom on both light/dark
   logo variants via brightness filter.

   Grid: 4-col desktop, 3-col tablet, 2-col mobile.
   Each card is a precision-mounted module with amber L-bracket corners,
   a light-sweep shimmer on hover, and GSAP-driven logo sharpening.

   Parallax: background grid translates slower than scroll (subtle depth).
   Ambient: CSS-only dot-matrix grid animation (performance-safe).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties — brands scope
   -------------------------------------------------------------------------- */
.brands {
    --br-bg:               #0B0D15;
    --br-panel-bg:         #0F1320;
    --br-panel-bg-hover:   #141928;
    --br-border:           rgba(255, 255, 255, 0.06);
    --br-border-hover:     rgba(212, 160, 23, 0.36);
    --br-accent:           #D4A017;
    --br-accent-dim:       rgba(212, 160, 23, 0.18);
    --br-text-primary:     #DDE0E8;
    --br-text-secondary:   #6E7480;
    --br-card-height:      108px;
    --br-pad-y:            88px;
    --br-pad-x:            clamp(20px, 5vw, 80px);
    --br-corner-size:      10px;
    --br-corner-weight:    1.5px;
    --br-transition:       0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.brands {
    background-color: var(--br-bg);
    padding:          var(--br-pad-y) 0;
    position:         relative;
    overflow:         hidden;
}

/* --------------------------------------------------------------------------
   Background texture layer — parallax-driven by GSAP
   -------------------------------------------------------------------------- */
.brands__bg {
    position:       absolute;
    inset:          -20% 0;       /* oversized so parallax movement has room */
    pointer-events: none;
    z-index:        0;
}

/* Dot-matrix engineering grid — subtle precision surface */
.brands__bg-grid {
    position:          absolute;
    inset:             0;
    background-image:
        radial-gradient( circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px );
    background-size:   28px 28px;
    will-change:       transform;
}

/* Centered vignette — keeps edges darker, focuses the eye on cards */
.brands__bg-vignette {
    position: absolute;
    inset:    0;
    background: radial-gradient(
        ellipse 80% 70% at 50% 50%,
        transparent 30%,
        rgba(11, 13, 21, 0.72) 100%
    );
}

/* Ambient scanline sweep — slow CSS-only motion, performance-safe */
@media (prefers-reduced-motion: no-preference) {
    .brands__bg-grid::after {
        content:    '';
        position:   absolute;
        inset:      0;
        background: linear-gradient(
            180deg,
            transparent           0%,
            rgba(212,160,23,0.04) 48%,
            rgba(212,160,23,0.06) 50%,
            rgba(212,160,23,0.04) 52%,
            transparent           100%
        );
        background-size: 100% 200%;
        animation:  br-scanline 9s linear infinite;
    }
}

@keyframes br-scanline {
    0%   { background-position: 0 -100%; }
    100% { background-position: 0  100%; }
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.brands__container {
    max-width:      var(--home-container);
    margin-inline:  auto;
    padding-inline: var(--br-pad-x);
    display:        flex;
    flex-direction: column;
    gap:            var(--home-intro-gap);
    position:       relative;
    z-index:        1;
}

@media (min-width: 1024px) {
    .brands__container {
        gap: var(--home-intro-gap-lg);
    }
}

/* --------------------------------------------------------------------------
   Section intro — two-column editorial split on desktop
   -------------------------------------------------------------------------- */
.brands__intro {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

@media (min-width: 1024px) {
    .brands__intro {
        flex-direction:  row;
        align-items:     flex-end;
        justify-content: space-between;
        gap:             64px;
    }
}

.brands__intro-primary {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    flex-shrink:    0;
}

@media (min-width: 1024px) {
    .brands__intro-primary {
        max-width: 520px;
    }
}

/* Eyebrow — dark-surface colour override */
.brands__eyebrow {
    color:       var(--br-accent);
    will-change: opacity, transform;
}

.brands__eyebrow-line {
    width:            30px;
    height:           2px;
    background-color: var(--br-accent);
    flex-shrink:      0;
    will-change:      transform;
}

/* Heading */
.brands__heading {
    font-size:      clamp(1.625rem, 3vw, 2.375rem);
    font-weight:    700;
    line-height:    1.13;
    letter-spacing: -0.022em;
    color:          var(--br-text-primary);
    will-change:    opacity, transform;
}

/* Description */
.brands__description {
    font-size:   clamp(0.875rem, 1.2vw, 1rem);
    line-height: 1.72;
    color:       var(--br-text-secondary);
    max-width:   var(--home-desc-width-col);
}

@media (min-width: 1024px) {
    .brands__description {
        padding-bottom: 6px;
    }
}

/* --------------------------------------------------------------------------
   Scan-line divider — GSAP draws the amber line left-to-right on scroll
   -------------------------------------------------------------------------- */
.brands__divider {
    display:  flex;
    align-items: center;
    gap:      8px;
    position: relative;
    height:   1px;
}

.brands__divider-dot {
    width:            5px;
    height:           5px;
    border-radius:    50%;
    background-color: var(--br-accent);
    flex-shrink:      0;
}

.brands__divider-line {
    flex:             1;
    height:           1px;
    background:       linear-gradient(
                          90deg,
                          var(--br-accent) 0%,
                          rgba(212, 160, 23, 0.30) 60%,
                          transparent 100%
                      );
    transform-origin: left center;
    /* GSAP sets scaleX: 0 then animates to 1 */
    will-change:      transform;
}

/* --------------------------------------------------------------------------
   Brand grid — hairline-separated panel array
   -------------------------------------------------------------------------- */
.brands__grid {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    grid-template-columns: repeat(2, 1fr);
    gap:        1px;
    background: rgba(255, 255, 255, 0.05); /* gap colour */
    border:     1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow:   hidden;
}

@media (min-width: 640px) {
    .brands__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .brands__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Grid item — GSAP stagger + lock-in target
   -------------------------------------------------------------------------- */
.brands__item {
    background:  var(--br-panel-bg);
    position:    relative;
    will-change: opacity, transform;
}

/* --------------------------------------------------------------------------
   Brand card — machine module panel
   -------------------------------------------------------------------------- */
.brand-card {
    position: relative;
    height:   100%;
}

/* --------------------------------------------------------------------------
   Amber corner brackets — L-shaped precision frames
   -------------------------------------------------------------------------- */
.brand-card__corner {
    position:   absolute;
    width:      var(--br-corner-size);
    height:     var(--br-corner-size);
    border-color: var(--br-accent);
    border-style: solid;
    border-width: 0;
    opacity:    0;
    transition: opacity var(--br-transition);
    z-index:    2;
    pointer-events: none;
}

.brand-card__corner--tl {
    top:  7px;
    left: 7px;
    border-top-width:  var(--br-corner-weight);
    border-left-width: var(--br-corner-weight);
}

.brand-card__corner--tr {
    top:   7px;
    right: 7px;
    border-top-width:   var(--br-corner-weight);
    border-right-width: var(--br-corner-weight);
}

.brand-card__corner--bl {
    bottom: 7px;
    left:   7px;
    border-bottom-width: var(--br-corner-weight);
    border-left-width:   var(--br-corner-weight);
}

.brand-card__corner--br {
    bottom: 7px;
    right:  7px;
    border-bottom-width: var(--br-corner-weight);
    border-right-width:  var(--br-corner-weight);
}

/* Corners activate on hover / focus — linkable cards only */
.brand-card:not(.brand-card--no-link):hover .brand-card__corner,
.brand-card:not(.brand-card--no-link):focus-within .brand-card__corner {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Card link / static wrapper
   -------------------------------------------------------------------------- */
.brand-card__link {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    height:           var(--br-card-height);
    padding:          20px 24px;
    text-decoration:  none;
    background-color: var(--br-panel-bg);
    position:         relative;
    overflow:         hidden;
    outline:          none;
    transition:
        background-color var(--br-transition),
        box-shadow       var(--br-transition),
        transform        var(--br-transition);
}

/* Diagonal shimmer sweep — CSS-only, fires on hover */
.brand-card__link::before {
    content:    '';
    position:   absolute;
    top:        -60%;
    left:       -80%;
    width:      55%;
    height:     220%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.025) 40%,
        rgba(255, 255, 255, 0.055) 50%,
        rgba(255, 255, 255, 0.025) 60%,
        transparent 100%
    );
    transform:       skewX(-12deg) translateX(0);
    transition:      transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events:  none;
    will-change:     transform;
}

/* Amber bottom accent — wipes in on hover */
.brand-card__link::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           1px;
    background:       linear-gradient(90deg, var(--br-accent), transparent);
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform var(--br-transition);
}

/* Hover / focus — linkable cards only */
.brand-card:not(.brand-card--no-link) .brand-card__link:hover,
.brand-card:not(.brand-card--no-link) .brand-card__link:focus-visible {
    background-color: var(--br-panel-bg-hover);
    box-shadow:       inset 0 0 0 1px var(--br-border-hover),
                      0 0 28px rgba(212, 160, 23, 0.06);
    transform:        translateY(-2px);
}

.brand-card:not(.brand-card--no-link) .brand-card__link:hover::before,
.brand-card:not(.brand-card--no-link) .brand-card__link:focus-visible::before {
    transform: skewX(-12deg) translateX(360%);
}

.brand-card:not(.brand-card--no-link) .brand-card__link:hover::after,
.brand-card:not(.brand-card--no-link) .brand-card__link:focus-visible::after {
    transform: scaleX(1);
}

.brand-card__link:focus-visible {
    outline:        2px solid var(--br-accent);
    outline-offset: -2px;
    border-radius:  1px;
}

/* --------------------------------------------------------------------------
   Card inner — centres content both axes
   -------------------------------------------------------------------------- */
.brand-card__inner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    position:        relative;
    z-index:         1;
}

/* --------------------------------------------------------------------------
   Logo image — dark-surface treatment
   GSAP sets initial muted filter; sharpens on scroll reveal.
   Hover is GSAP-managed (avoids inline/cascade conflict).
   -------------------------------------------------------------------------- */
.brand-card__logo-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    max-width:       152px;
    max-height:      52px;
}

.brand-card__logo {
    max-width:  100%;
    max-height: 52px;
    width:      auto;
    height:     auto;
    object-fit: contain;
    display:    block;
    /* Default muted state — GSAP sharpens on scroll.
       brightness(1.8): lifts dark logos so they register on dark bg.
       Without JS: this muted-but-visible state is the fallback. */
    filter:     grayscale(100%) brightness(1.8) opacity(0.45);
    will-change: filter;
}

/* --------------------------------------------------------------------------
   Text-only fallback — typographic precision label
   -------------------------------------------------------------------------- */
.brand-card__name {
    display:        block;
    font-size:      0.9375rem;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          rgba(221, 224, 232, 0.38);
    text-align:     center;
    line-height:    1.2;
    transition:     color var(--br-transition);
    font-variant-numeric: tabular-nums;
}

.brand-card:not(.brand-card--no-link) .brand-card__link:hover .brand-card__name,
.brand-card:not(.brand-card--no-link) .brand-card__link:focus-visible .brand-card__name {
    color: rgba(221, 224, 232, 0.88);
}

.brand-card--no-link .brand-card__name {
    color: rgba(221, 224, 232, 0.46);
}

/* --------------------------------------------------------------------------
   Screen reader utility
   -------------------------------------------------------------------------- */
.screen-reader-text {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* --------------------------------------------------------------------------
   Tablet  640–1023px
   -------------------------------------------------------------------------- */
@media (min-width: 640px) and (max-width: 1023px) {
    .brands {
        --br-card-height: 100px;
    }
}

/* --------------------------------------------------------------------------
   Mobile  < 640px — two-column, tighter
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .brands {
        --br-pad-y:       64px;
        --br-card-height: 88px;
        --br-pad-x:       16px;
    }

    .brands__container {
        padding-inline: 16px;
    }

    .brand-card__link {
        padding: 16px 16px;
    }

    .brand-card__logo {
        max-height: 40px;
    }

    .brand-card__logo-wrap {
        max-height:  40px;
        max-width:   120px;
    }

    .brand-card__corner {
        --br-corner-size: 8px;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion — disable CSS animation and all decorative transitions
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .brands__bg-grid::after {
        animation: none;
    }

    .brand-card__link,
    .brand-card__link::before,
    .brand-card__link::after,
    .brand-card__corner,
    .brand-card__logo,
    .brand-card__name {
        transition: none;
    }
}


/* ==========================================================================
   7. PROMO BANNERS
   ==========================================================================
   Two large editorial banners presented side-by-side on desktop.
   Premium and intentional — not sales ads. Each banner is a full-bleed
   image card with a controlled overlay, body copy, and a CTA button.

   Surface: dark (#0F1117) — deliberate shift from the white brands section.
   The dark container makes the banners feel immersive and curated rather
   than inline ad blocks dropped into a light page.

   Each banner internally has:
     1. Full-bleed background image (absolute, z-index 0)
     2. Dark gradient overlay (z-index 1) — always legible
     3. Subtle precision grid overlay (z-index 2) — decorative, GSAP-animatable
     4. Body content (z-index 3) — heading, description, CTA

   Mobile-first. Breakpoints:
     tablet  → 768px  (side-by-side, reduced height)
     desktop → 1100px (full height, more padding)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties — promos scope
   -------------------------------------------------------------------------- */
.promos {
    --pr-bg:            #0F1117;
    --pr-pad-y:         88px;
    --pr-pad-x:         20px;
    --pr-text-primary:  #FFFFFF;
    --pr-text-secondary:rgba(255, 255, 255, 0.65);
    --pr-accent:        #D4A017;
    --pr-card-radius:   4px;
    --pr-card-min-h:    360px;
    --pr-transition:    var(--home-ease);
    --pr-img-transition:var(--home-ease-img);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.promos {
    background-color: var(--pr-bg);
    padding:          var(--pr-pad-y) var(--pr-pad-x);
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.promos__container {
    max-width:      var(--home-container);
    margin-inline:  auto;
    display:        flex;
    flex-direction: column;
    gap:            var(--home-intro-gap);
}

@media (min-width: 1100px) {
    .promos__container {
        gap: var(--home-intro-gap-lg);
    }
}

/* --------------------------------------------------------------------------
   Section intro — left-aligned, compact
   -------------------------------------------------------------------------- */
.promos__intro {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    max-width:      100%;
}

/* Eyebrow */
.promos__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            12px;
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--pr-accent);
    margin:         0;
    line-height:    1;
    will-change:    opacity, transform;
}

.promos__eyebrow-line {
    display:          block;
    width:            32px;
    height:           2px;
    background-color: var(--pr-accent);
    flex-shrink:      0;
    will-change:      transform, opacity;
}

/* Heading + description row */
.promos__intro-row {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

@media (min-width: 768px) {
    .promos__intro-row {
        display:               grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.75fr);
        align-items:           start;
        gap:                   clamp(32px, 5vw, 72px);
    }
}

/* Section heading */
.promos__heading {
    margin:         0;
    font-size:      var(--home-h2-clamp);
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -0.02em;
    color:          var(--pr-text-primary);
    max-width:      13ch;
    will-change:    opacity, transform;
}

/* Section description */
.promos__description {
    margin:      0;
    font-size:   0.9375rem;
    line-height: 1.65;
    color:       var(--pr-text-secondary);
    max-width:   48ch;
    padding-top: 0.22em;
}

@media (max-width: 767px) {
    .promos__heading {
        max-width: 14ch;
    }

    .promos__description {
        max-width: 58ch;
        padding-top: 0;
    }
}

/* --------------------------------------------------------------------------
   Banner grid — stacked on mobile, 2-col on tablet+
   -------------------------------------------------------------------------- */
.promos__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap:     20px;
}

@media (min-width: 768px) {
    .promos__grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   24px;
    }
}

/* --------------------------------------------------------------------------
   Promo card — full-bleed image card
   -------------------------------------------------------------------------- */
.promo-card {
    position:      relative;
    border-radius: var(--pr-card-radius);
    overflow:      hidden;
    min-height:    var(--pr-card-min-h);
    display:       flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Dark base surface for no-image state */
    background-color: #1A1D26;
    border:           1px solid rgba(255, 255, 255, 0.06);
    transition:       border-color var(--pr-transition),
                      box-shadow   var(--pr-transition);
    /* GSAP: promo-card--one slides in from left, --two from right */
    will-change:   transform, opacity;
}

.promo-card:hover,
.promo-card:focus-within {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:   0 20px 60px rgba(15, 17, 23, 0.40);
}

@media (min-width: 768px) {
    .promo-card {
        min-height: 420px;
    }
}

@media (min-width: 1100px) {
    .promo-card {
        min-height: 480px;
    }
}

/* --------------------------------------------------------------------------
   Background image — fills entire card, z-index 0
   -------------------------------------------------------------------------- */
.promo-card__media {
    position: absolute;
    inset:    0;
    z-index:  0;
}

.promo-card__image {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    /* GSAP: scale(1.05) → 1 on entry; CSS: slight scale on hover */
    transition:      transform var(--pr-img-transition);
    will-change:     transform;
}

.promo-card:hover .promo-card__image,
.promo-card:focus-within .promo-card__image {
    transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Dark gradient overlay — z-index 1, always visible
   Gradient runs bottom-to-top: dense at base, clear at top.
   Ensures heading + description are legible over any image.
   -------------------------------------------------------------------------- */
.promo-card__overlay {
    position: absolute;
    inset:    0;
    z-index:  1;
    background: linear-gradient(
        to top,
        rgba(15, 17, 23, 0.92) 0%,
        rgba(15, 17, 23, 0.55) 45%,
        rgba(15, 17, 23, 0.18) 100%
    );
    transition: background var(--pr-transition);
}

.promo-card:hover .promo-card__overlay,
.promo-card:focus-within .promo-card__overlay {
    background: linear-gradient(
        to top,
        rgba(15, 17, 23, 0.95) 0%,
        rgba(15, 17, 23, 0.62) 50%,
        rgba(15, 17, 23, 0.22) 100%
    );
}

/* --------------------------------------------------------------------------
   Precision grid overlay — z-index 2, decorative
   Subtle engineering texture. Opacity kept very low so it reads as
   a surface quality rather than a pattern.
   -------------------------------------------------------------------------- */
.promo-card__grid-overlay {
    position:       absolute;
    inset:          0;
    z-index:        2;
    pointer-events: none;
    color:          #FFFFFF;
    /* GSAP: opacity 0 → 0.4 on entry — calibration layer appearing */
    will-change:    opacity;
    opacity:        0.4;
}

.promo-card__grid-overlay svg {
    width:  100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Card body — z-index 3, sits above all layers
   -------------------------------------------------------------------------- */
.promo-card__body {
    position:       relative;
    z-index:        3;
    display:        flex;
    flex-direction: column;
    gap:            14px;
    padding:        32px 36px 36px;
    /* GSAP: body content translates up slightly on entry */
    will-change:    transform, opacity;
}

@media (min-width: 1100px) {
    .promo-card__body {
        padding: 40px 44px 44px;
        gap:     16px;
    }
}

/* Amber rule above heading — short horizontal line, precise marker */
.promo-card__rule {
    display:          block;
    width:            36px;
    height:           2px;
    background-color: var(--pr-accent);
    flex-shrink:      0;
    /* GSAP: scaleX 0 → 1 on entry, same wipe as eyebrow lines */
    will-change:      transform, opacity;
}

/* Banner heading */
.promo-card__heading {
    margin:         0;
    font-size:      clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight:    700;
    line-height:    1.2;
    letter-spacing: -0.02em;
    color:          #FFFFFF;
}

/* Banner description */
.promo-card__description {
    margin:      0;
    font-size:   0.9375rem;
    line-height: 1.65;
    color:       rgba(255, 255, 255, 0.72);
    max-width:   44ch;
}

/* CTA button — white/transparent variant for dark card surface */
.promo-card__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    align-self:      flex-start;
    margin-top:      6px;
    padding:         12px 24px;
    font-size:       0.9375rem;
    font-weight:     600;
    letter-spacing:  0.02em;
    text-decoration: none;
    color:           #FFFFFF;
    background-color: transparent;
    border:          2px solid rgba(255, 255, 255, 0.30);
    border-radius:   3px;
    transition:
        background-color var(--pr-transition),
        border-color     var(--pr-transition),
        color            var(--pr-transition);
    will-change:     opacity, transform;
}

.promo-card__cta:hover,
.promo-card__cta:focus-visible {
    background-color: var(--pr-accent);
    border-color:     var(--pr-accent);
    color:            #0F1117;
    text-decoration:  none;
}

.promo-card__cta:focus-visible {
    outline:        3px solid var(--pr-accent);
    outline-offset: 3px;
}

/* Arrow inside CTA */
.promo-card__cta-arrow {
    display:    inline-flex;
    align-items: center;
    transition: transform var(--pr-transition);
    flex-shrink: 0;
}

.promo-card__cta:hover .promo-card__cta-arrow,
.promo-card__cta:focus-visible .promo-card__cta-arrow {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Bottom amber accent bar — z-index 4, wipes in on hover
   -------------------------------------------------------------------------- */
.promo-card__accent {
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           3px;
    background-color: var(--pr-accent);
    z-index:          4;
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform var(--pr-transition);
}

.promo-card:hover .promo-card__accent,
.promo-card:focus-within .promo-card__accent {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .promos {
        --pr-pad-y: 60px;
        --pr-pad-x: 16px;
    }

    .promo-card__body {
        padding: 24px 24px 28px;
        gap:     12px;
    }

    .promo-card__cta {
        width:           100%;
        justify-content: center;
    }
}


/* ==========================================================================
   8. TESTIMONIALS
   ==========================================================================
   Three structured quote cards. No carousel, no star ratings, no avatars.
   The restraint is intentional — in B2B industrial contexts, calm credibility
   outperforms feature-heavy review widgets.

   Surface: light grey (#F5F6F8) — returns to the hero/why-us light tone
   after the dark promos section, giving the text-heavy cards room to breathe.

   Each card uses <figure> / <figcaption> / <blockquote> — correct semantic
   HTML for attributed quotations.

   Mobile-first. Breakpoints:
     tablet  → 640px  (2 columns)
     desktop → 1024px (3 columns)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties — testimonials scope
   -------------------------------------------------------------------------- */
.testimonials {
    --te-bg:               #0D1117;
    --te-pad-y:            96px;
    --te-pad-x:            20px;
    --te-text-primary:     #E6EDF3;
    --te-text-secondary:   #8B949E;
    --te-text-muted:       #6E7681;
    --te-accent:           #D4A017;
    --te-card-bg:          #161B22;
    --te-card-border:      rgba(255, 255, 255, 0.07);
    --te-card-radius:      4px;
    --te-quote-mark-color: rgba(212, 160, 23, 0.10);
    --te-transition:       0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --te-conveyor-card-w:  380px;
    --te-conveyor-gap:     28px;
}

/* --------------------------------------------------------------------------
   Section shell — dark industrial surface with subtle grid texture
   -------------------------------------------------------------------------- */
.testimonials {
    background-color:  var(--te-bg);
    padding:           var(--te-pad-y) var(--te-pad-x);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 44px 44px;
    position:        relative; /* stacking context for scan line */
}

/* Conveyor mode: prevent horizontal scrollbar from the sliding track */
.testimonials--conveyor {
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Ambient scan line — slow horizontal sweep across the background surface.
   GSAP animates the x position; visible only in conveyor mode.
   -------------------------------------------------------------------------- */
.testimonials__scan-line {
    position:       absolute;
    top:            0;
    left:           0;
    width:          200px;
    height:         100%;
    background:     linear-gradient(
        to right,
        transparent              0%,
        rgba(212, 160, 23, 0.04) 50%,
        transparent              100%
    );
    pointer-events: none;
    z-index:        0;
    opacity:        0; /* shown only via JS when conveyor is active */
}

/* --------------------------------------------------------------------------
   Container — holds the intro only
   -------------------------------------------------------------------------- */
.testimonials__container {
    max-width:      var(--home-container);
    margin-inline:  auto;
    position:       relative;
    z-index:        1;
}

/* --------------------------------------------------------------------------
   Section intro — centred layout
   -------------------------------------------------------------------------- */
.testimonials__intro {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            16px;
    max-width:      640px;
    margin-inline:  auto;
}

/* Eyebrow — flanked by two amber lines for symmetry */
.testimonials__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            12px;
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--te-accent);
    margin:         0;
    line-height:    1;
    will-change:    opacity, transform;
}

.testimonials__eyebrow-line {
    display:          block;
    flex:             1 1 0;
    max-width:        40px;
    height:           2px;
    background-color: var(--te-accent);
    flex-shrink:      0;
}

/* Section heading */
.testimonials__heading {
    margin:         0;
    font-size:      var(--home-h2-clamp);
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -0.02em;
    color:          var(--te-text-primary);
    will-change:    opacity, transform;
}

/* Section description */
.testimonials__description {
    margin:      0;
    font-size:   clamp(0.9375rem, 1.4vw, 1.0625rem);
    line-height: 1.7;
    color:       var(--te-text-secondary);
    max-width:   56ch;
}

/* --------------------------------------------------------------------------
   Rail wrap — sibling of container, houses the card track.

   Static mode  : centred block matching the container max-width.
   Conveyor mode: breaks to full section width via negative margin-inline
                  (cancels the section's side padding) and clips the track.
   -------------------------------------------------------------------------- */
.testimonials__rail-wrap {
    position:      relative;
    max-width:     var(--home-container);
    margin-inline: auto;
    margin-top:    var(--home-intro-gap);
    z-index:       1;
}

@media (min-width: 1024px) {
    .testimonials__rail-wrap {
        margin-top: var(--home-intro-gap-lg);
    }
}

/* Conveyor mode: expand to full section width */
.testimonials--conveyor .testimonials__rail-wrap {
    max-width:     none;
    margin-inline: calc(-1 * var(--te-pad-x));
    overflow:      hidden;
}

/* --------------------------------------------------------------------------
   Edge fade masks — gradient veils at left and right of the conveyor rail.
   Hidden in static mode; revealed when conveyor is active.
   -------------------------------------------------------------------------- */
.testimonials__edge {
    position:       absolute;
    top:            0;
    bottom:         0;
    width:          120px;
    z-index:        2;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.6s ease;
}

.testimonials--conveyor .testimonials__edge {
    opacity: 1;
}

.testimonials__edge--left {
    left:       0;
    background: linear-gradient(to right, var(--te-bg) 10%, transparent 100%);
}

.testimonials__edge--right {
    right:      0;
    background: linear-gradient(to left, var(--te-bg) 10%, transparent 100%);
}

/* --------------------------------------------------------------------------
   Testimonial grid — static layout (CSS grid, responsive)
   JS switches to flex conveyor by adding .testimonials--conveyor to section.
   -------------------------------------------------------------------------- */
.testimonials__grid {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    grid-template-columns: 1fr;
    gap:        24px;
}

@media (min-width: 640px) {
    .testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   28px;
    }
}

@media (min-width: 1024px) {
    .testimonials__grid {
        grid-template-columns: repeat(3, 1fr);
        gap:                   32px;
    }
}

/* Conveyor mode: flex rail — JS controls x position via gsap.set() */
.testimonials--conveyor .testimonials__grid {
    display:        flex;
    flex-wrap:      nowrap;
    align-items:    stretch;
    gap:            var(--te-conveyor-gap);
    padding-inline: 80px;  /* side room inside the edge fades */
    padding-bottom: 14px;  /* room for card shadow bleed */
    width:          max-content;
    will-change:    transform;
}

/* --------------------------------------------------------------------------
   Grid item — GSAP stagger/conveyor target
   -------------------------------------------------------------------------- */
.testimonials__item {
    will-change: transform, opacity;
}

/* Conveyor mode: fixed card width for uniform rail layout */
.testimonials--conveyor .testimonials__item {
    width:       var(--te-conveyor-card-w);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Testimonial card — <figure>
   -------------------------------------------------------------------------- */
.testi-card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    height:          100%;
    margin:          0;
    padding:         36px 30px 30px;
    background:      var(--te-card-bg);
    border:          1px solid var(--te-card-border);
    border-top:      2px solid rgba(212, 160, 23, 0.20);
    border-radius:   var(--te-card-radius);
    overflow:        hidden;
    transition:
        transform        var(--te-transition),
        box-shadow       var(--te-transition),
        border-color     var(--te-transition),
        border-top-color var(--te-transition),
        background-color var(--te-transition);
}

.testi-card:hover {
    transform:        translateY(-6px);
    box-shadow:       0 20px 56px rgba(0, 0, 0, 0.45);
    border-color:     rgba(212, 160, 23, 0.30);
    border-top-color: var(--te-accent);
    background-color: #1b2131;
}

/* --------------------------------------------------------------------------
   Active card — centered/featured card in conveyor.
   Subtle emphasis: brighter amber top border, slightly warmer quote mark.
   JS toggles .is-active on the closest item to the rail's horizontal centre.
   -------------------------------------------------------------------------- */
.testimonials--conveyor .testimonials__item.is-active .testi-card {
    border-top-color: var(--te-accent);
    border-color:     rgba(212, 160, 23, 0.24);
}

.testimonials--conveyor .testimonials__item.is-active .testi-card__quote-mark {
    color: rgba(212, 160, 23, 0.20);
}

/* --------------------------------------------------------------------------
   Large decorative opening quotation mark — background typographic element
   -------------------------------------------------------------------------- */
.testi-card__quote-mark {
    position:       absolute;
    top:            12px;
    right:          20px;
    font-size:      7rem;
    line-height:    1;
    font-family:    Georgia, 'Times New Roman', serif;
    color:          var(--te-quote-mark-color);
    user-select:    none;
    pointer-events: none;
    transition:     color var(--te-transition);
}

/* --------------------------------------------------------------------------
   Quote body — <blockquote>
   -------------------------------------------------------------------------- */
.testi-card__body {
    margin:    0;
    padding:   0;
    flex-grow: 1;
}

.testi-card__quote {
    margin:         0;
    font-size:      0.9375rem;
    line-height:    1.80;
    color:          var(--te-text-secondary);
    font-style:     normal;
    position:       relative;
    z-index:        1;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Rule — amber separator between quote and attribution
   -------------------------------------------------------------------------- */
.testi-card__rule {
    display:          block;
    width:            32px;
    height:           2px;
    background-color: var(--te-accent);
    margin-block:     20px 18px;
    flex-shrink:      0;
}

/* --------------------------------------------------------------------------
   Author / figcaption block
   -------------------------------------------------------------------------- */
.testi-card__author {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
}

/* Amber vertical bar — visual anchor left of the author text */
.testi-card__author-mark {
    width:            3px;
    height:           36px;
    background-color: var(--te-accent);
    border-radius:    2px;
    flex-shrink:      0;
    margin-top:       2px;
}

.testi-card__author-meta {
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

/* Reviewer name — <cite> — strongest weight in the author hierarchy */
.testi-card__name {
    display:        block;
    font-size:      1rem;
    font-weight:    700;
    font-style:     normal;
    letter-spacing: -0.01em;
    line-height:    1.3;
    color:          var(--te-text-primary);
}

/* Role + company — secondary line, muted */
.testi-card__attribution {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         4px;
    font-size:   0.8125rem;
    line-height: 1.4;
    color:       var(--te-text-muted);
}

.testi-card__role    { font-weight: 500; }
.testi-card__sep     { opacity:     0.5; }
.testi-card__company { font-weight: 400; }

/* --------------------------------------------------------------------------
   Bottom accent line — amber wipe from left on hover
   -------------------------------------------------------------------------- */
.testi-card__accent {
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           2px;
    background-color: var(--te-accent);
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform var(--te-transition);
}

.testi-card:hover .testi-card__accent {
    transform: scaleX(1);
}

.testi-card:hover .testi-card__quote-mark {
    color: rgba(212, 160, 23, 0.24);
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .testimonials {
        --te-pad-y: 64px;
        --te-pad-x: 16px;
    }

    .testi-card {
        padding: 28px 24px 24px;
    }

    .testi-card__quote-mark {
        font-size: 5.5rem;
    }

    /* No translateY hover on touch — lifted state persists after tap */
    .testi-card:hover {
        transform: none;
    }
}


/* ==========================================================================
   9. RFQ / CTA
   ==========================================================================
   Primary conversion section. Two render modes controlled by a BEM modifier
   on the <section> element:

     .rfq--cta-only   → centred copy + two action buttons + trust list
     .rfq--with-form  → left copy + trust list / right shortcode form

   Surface: deep dark (#0D0F16) — slightly deeper than the standard dark
   (#0F1117) to give this section its own weight and signal importance.
   The amber accent is used liberally here — it is a conversion moment.

   Precision grid overlay runs at very low opacity across the full section —
   adds technical texture without competing with the CTA content.

   Mobile-first. Breakpoints:
     tablet  → 768px
     desktop → 1100px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties — rfq scope
   -------------------------------------------------------------------------- */
.rfq {
    --rfq-bg:               var(--home-dark-deep);
    --rfq-pad-y:            96px;
    --rfq-pad-x:            var(--home-pad-x);
    --rfq-text-primary:     #FFFFFF;
    --rfq-text-secondary:   rgba(255, 255, 255, 0.68);
    --rfq-text-muted:       rgba(255, 255, 255, 0.48);
    --rfq-accent:           var(--home-accent);
    --rfq-accent-hover:     #E8B220;
    --rfq-btn-radius:       var(--home-radius);
    --rfq-transition:       var(--home-ease);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.rfq {
    position:         relative;
    background-color: var(--rfq-bg);
    padding:          var(--rfq-pad-y) var(--rfq-pad-x);
    overflow:         hidden;
}

/* --------------------------------------------------------------------------
   Precision grid overlay — full-section background texture
   -------------------------------------------------------------------------- */
.rfq__grid-overlay {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        0;
    color:          #FFFFFF;
    will-change:    opacity;
}

.rfq__grid-overlay svg {
    width:  100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Container — sits above the grid overlay
   -------------------------------------------------------------------------- */
.rfq__container {
    position:      relative;
    z-index:       1;
    max-width:     var(--home-container);
    margin-inline: auto;
}

/* ==========================================================================
   CTA MODE — .rfq--cta-only
   Centred single column: heading → description → buttons → trust list
   ========================================================================== */

.rfq__cta-block {
    display:        flex;
    justify-content: center;
}

.rfq__cta-inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            28px;
    max-width:      680px;
    width:          100%;
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */
.rfq__heading {
    margin:         0;
    font-size:      clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight:    700;
    line-height:    1.1;
    letter-spacing: -0.025em;
    color:          var(--rfq-text-primary);
    will-change:    opacity, transform;
}

/* Centred variant — used in CTA mode */
.rfq__heading--centred {
    max-width: 20ch;
}

/* --------------------------------------------------------------------------
   Description
   -------------------------------------------------------------------------- */
.rfq__description {
    margin:      0;
    font-size:   clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
    color:       var(--rfq-text-secondary);
    will-change: opacity;
}

.rfq__description--centred {
    max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Button group
   -------------------------------------------------------------------------- */
.rfq__btn-group {
    display:        flex;
    flex-wrap:      wrap;
    justify-content: center;
    gap:            12px;
    will-change:    opacity, transform;
}

/* Shared button base */
.rfq__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         15px 32px;
    font-size:       1rem;
    font-weight:     600;
    letter-spacing:  0.02em;
    text-decoration: none;
    border-radius:   var(--rfq-btn-radius);
    border:          2px solid transparent;
    transition:
        background-color var(--rfq-transition),
        border-color     var(--rfq-transition),
        color            var(--rfq-transition),
        box-shadow       var(--rfq-transition);
    white-space:     nowrap;
    will-change:     opacity, transform;
}

/* Primary — solid amber: the most prominent action on the page */
.rfq__btn--primary {
    background-color: var(--rfq-accent);
    border-color:     var(--rfq-accent);
    color:            #0D0F16;
}

.rfq__btn--primary:hover,
.rfq__btn--primary:focus-visible {
    background-color: var(--rfq-accent-hover);
    border-color:     var(--rfq-accent-hover);
    box-shadow:       0 6px 24px rgba(212, 160, 23, 0.35);
    color:            #0D0F16;
    text-decoration:  none;
}

.rfq__btn--primary:focus-visible {
    outline:        3px solid #FFFFFF;
    outline-offset: 3px;
}

/* Arrow inside primary button */
.rfq__btn-arrow {
    display:    inline-flex;
    align-items: center;
    transition: transform var(--rfq-transition);
    flex-shrink: 0;
}

.rfq__btn--primary:hover .rfq__btn-arrow,
.rfq__btn--primary:focus-visible .rfq__btn-arrow {
    transform: translateX(3px);
}

/* Secondary — ghost: white border, transparent fill */
.rfq__btn--secondary {
    background-color: transparent;
    border-color:     rgba(255, 255, 255, 0.28);
    color:            #FFFFFF;
}

.rfq__btn--secondary:hover,
.rfq__btn--secondary:focus-visible {
    border-color:     rgba(255, 255, 255, 0.60);
    background-color: rgba(255, 255, 255, 0.06);
    color:            #FFFFFF;
    text-decoration:  none;
}

.rfq__btn--secondary:focus-visible {
    outline:        3px solid var(--rfq-accent);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Trust signals list
   -------------------------------------------------------------------------- */
.rfq__trust {
    list-style:  none;
    margin:      0;
    padding:     0;
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px 24px;
    will-change: opacity;
}

/* Centred variant — CTA mode */
.rfq__trust--centred {
    justify-content: center;
    padding-top:     4px;
    border-top:      1px solid rgba(255, 255, 255, 0.08);
}

.rfq__trust-item {
    display:     flex;
    align-items: center;
    gap:         7px;
    font-size:   0.8125rem; /* 13px */
    font-weight: 500;
    color:       var(--rfq-text-muted);
    line-height: 1.3;
    will-change: opacity, transform;
}

.rfq__trust-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           18px;
    height:          18px;
    border-radius:   50%;
    background:      rgba(212, 160, 23, 0.15);
    color:           var(--rfq-accent);
    flex-shrink:     0;
}

/* ==========================================================================
   FORM MODE — .rfq--with-form
   Two-column split: copy + trust left, shortcode form right
   ========================================================================== */

.rfq__split {
    display:        flex;
    flex-direction: column;
    gap:            48px;
}

@media (min-width: 1100px) {
    .rfq__split {
        flex-direction: row;
        align-items:    flex-start;
        gap:            80px;
    }
}

/* Copy column — left */
.rfq__copy {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    flex-shrink:    0;
}

@media (min-width: 1100px) {
    .rfq__copy {
        flex:      0 0 45%;
        max-width: 480px;
    }
}

/* Trust list in form mode — left-aligned */
.rfq--with-form .rfq__trust {
    padding-top: 4px;
    border-top:  1px solid rgba(255, 255, 255, 0.08);
}

/* Form column — right */
.rfq__form-wrap {
    flex:    1 1 auto;
    width:   100%;
}

/*
 * Third-party form plugin overrides — scoped to .rfq__form-wrap.
 * These ensure CF7, Gravity Forms, WPForms, etc. inherit the dark
 * surface colour scheme of this section rather than using their
 * default light-mode styles.
 */
.rfq__form-wrap input[type="text"],
.rfq__form-wrap input[type="email"],
.rfq__form-wrap input[type="tel"],
.rfq__form-wrap input[type="number"],
.rfq__form-wrap select,
.rfq__form-wrap textarea {
    background-color: rgba(255, 255, 255, 0.06);
    border:           1px solid rgba(255, 255, 255, 0.15);
    border-radius:    3px;
    color:            #FFFFFF;
    padding:          11px 14px;
    width:            100%;
    font-size:        0.9375rem;
    line-height:      1.5;
    transition:       border-color var(--rfq-transition),
                      background-color var(--rfq-transition);
}

.rfq__form-wrap input[type="text"]:focus,
.rfq__form-wrap input[type="email"]:focus,
.rfq__form-wrap input[type="tel"]:focus,
.rfq__form-wrap input[type="number"]:focus,
.rfq__form-wrap select:focus,
.rfq__form-wrap textarea:focus {
    outline:          none;
    border-color:     var(--rfq-accent);
    background-color: rgba(255, 255, 255, 0.09);
}

.rfq__form-wrap textarea {
    resize:     vertical;
    min-height: 110px;
}

.rfq__form-wrap label {
    display:     block;
    font-size:   0.8125rem;
    font-weight: 600;
    color:       rgba(255, 255, 255, 0.70);
    margin-bottom: 5px;
    letter-spacing: 0.02em;
}

/* Submit button — matches primary CTA */
.rfq__form-wrap input[type="submit"],
.rfq__form-wrap button[type="submit"] {
    background-color: var(--rfq-accent);
    border:          2px solid var(--rfq-accent);
    border-radius:   var(--rfq-btn-radius);
    color:           #0D0F16;
    font-size:       1rem;
    font-weight:     600;
    letter-spacing:  0.02em;
    padding:         13px 28px;
    cursor:          pointer;
    transition:      background-color var(--rfq-transition),
                     border-color     var(--rfq-transition),
                     box-shadow       var(--rfq-transition);
    width:           100%;
}

.rfq__form-wrap input[type="submit"]:hover,
.rfq__form-wrap button[type="submit"]:hover {
    background-color: var(--rfq-accent-hover);
    border-color:     var(--rfq-accent-hover);
    box-shadow:       0 6px 24px rgba(212, 160, 23, 0.30);
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .rfq {
        --rfq-pad-y: 64px;
        --rfq-pad-x: 16px;
    }

    .rfq__btn-group {
        flex-direction: column;
        align-items:    stretch;
    }

    .rfq__btn {
        justify-content: center;
        width:           100%;
    }

    .rfq__trust--centred {
        flex-direction: column;
        align-items:    flex-start;
        text-align:     left;
    }
}


/* ==========================================================================
   10. BLOG / KNOWLEDGE BASE
   ==========================================================================
   Premium industrial knowledge-hub editorial grid.
   Dark/amber surface treatment aligned with the site's design language.
   Technical insight panels — not default WordPress cards.

   Mobile-first. Breakpoints:
     tablet  → 640px  (2 columns)
     desktop → 1024px (3 columns)
   ========================================================================== */

.blog {
    --blog-bg:             #090b0f;
    --blog-pad-y:          96px;
    --blog-pad-x:          20px;
    --blog-text-primary:   #e8eaf0;
    --blog-text-secondary: rgba(232, 234, 240, 0.65);
    --blog-text-muted:     rgba(232, 234, 240, 0.38);
    --blog-accent:         #D4A017;
    --blog-accent-dim:     rgba(212, 160, 23, 0.14);
    --blog-border:         rgba(255, 255, 255, 0.065);
    --blog-border-hover:   rgba(212, 160, 23, 0.30);
    --blog-card-bg:        #0e1118;
    --blog-card-bg-hover:  #131822;
    --blog-card-radius:    4px;
    --blog-transition:     0.34s cubic-bezier(0.22, 1, 0.36, 1);
    --blog-img-transition: 0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Section shell — dark industrial base with engineering-grid texture */
.blog {
    background-color: var(--blog-bg);
    padding:          var(--blog-pad-y) var(--blog-pad-x);
    position:         relative;
    overflow:         hidden;
}

/* Engineering-paper grid — very faint amber lines */
.blog::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image:
        linear-gradient(rgba(212, 160, 23, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 160, 23, 0.024) 1px, transparent 1px);
    background-size:  64px 64px;
    z-index:          0;
    pointer-events:   none;
}

/* Top fade — blends with the section above */
.blog::after {
    content:        '';
    position:       absolute;
    top:            0;
    left:           0;
    right:          0;
    height:         80px;
    background:     linear-gradient(to bottom, rgba(7, 8, 11, 0.72), transparent);
    z-index:        0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Background decorative layer — ambient amber glow blobs
   -------------------------------------------------------------------------- */
.blog__bg {
    position:       absolute;
    inset:          0;
    overflow:       hidden;
    z-index:        0;
    pointer-events: none;
}

/* Amber glow — upper right */
.blog__bg-glow--1 {
    position:   absolute;
    top:        -22%;
    right:      -8%;
    width:      52%;
    height:     60%;
    background: radial-gradient(ellipse at center, rgba(212, 160, 23, 0.075) 0%, transparent 68%);
    filter:     blur(56px);
}

/* Secondary glow — lower left, cooler */
.blog__bg-glow--2 {
    position:   absolute;
    bottom:     -12%;
    left:       -4%;
    width:      44%;
    height:     52%;
    background: radial-gradient(ellipse at center, rgba(212, 160, 23, 0.042) 0%, transparent 70%);
    filter:     blur(64px);
}

/* --------------------------------------------------------------------------
   Container — elevated above bg layer
   -------------------------------------------------------------------------- */
.blog__container {
    display:        flex;
    flex-direction: column;
    gap:            56px;
    position:       relative;
    z-index:        1;
}

@media (min-width: 1024px) {
    .blog__container {
        gap: 68px;
    }
}

/* --------------------------------------------------------------------------
   Section intro — two-column on tablet+ (heading left, description right)
   -------------------------------------------------------------------------- */
.blog__intro {
    display:   grid;
    gap:       24px;
}

@media (min-width: 768px) {
    .blog__intro {
        grid-template-columns: 1fr 1fr;
        align-items:           end;
        gap:                   40px;
    }
}

@media (min-width: 1200px) {
    .blog__intro {
        grid-template-columns: 1.2fr 1fr;
    }
}

.blog__intro-primary {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    position:       relative;
}

/* Vertical amber rule — desktop only */
@media (min-width: 1024px) {
    .blog__intro-primary {
        padding-left: 22px;
    }

    .blog__intro-primary::before {
        content:    '';
        position:   absolute;
        left:       0;
        top:        4px;
        bottom:     4px;
        width:      2px;
        background: linear-gradient(to bottom, var(--blog-accent) 0%, rgba(212, 160, 23, 0) 100%);
        opacity:    0.55;
    }
}

/* Eyebrow */
.blog__eyebrow {
    color: var(--blog-accent);
}

.blog__eyebrow-line {
    display:          block;
    width:            32px;
    height:           2px;
    background-color: var(--blog-accent);
    flex-shrink:      0;
}

/* Heading */
.blog__heading {
    color: var(--blog-text-primary);
}

/* Description */
.blog__description {
    color:      var(--blog-text-secondary);
    max-width:  var(--home-desc-width);
    align-self: end;
}

/* --------------------------------------------------------------------------
   Post grid
   -------------------------------------------------------------------------- */
.blog__grid {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    grid-template-columns: 1fr;
    gap:        24px;
}

@media (min-width: 640px) {
    .blog__grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   28px;
    }
}

@media (min-width: 1024px) {
    .blog__grid {
        grid-template-columns: repeat(3, 1fr);
        gap:                   32px;
    }
}

/* --------------------------------------------------------------------------
   Grid item — GSAP stagger target
   -------------------------------------------------------------------------- */
.blog__item {
    display:        flex;
    flex-direction: column;
    will-change:    transform, opacity;
}

/* --------------------------------------------------------------------------
   Post card — technical insight panel
   -------------------------------------------------------------------------- */
.blog-card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    flex:            1 1 auto;
    border:          1px solid var(--blog-border);
    border-radius:   var(--blog-card-radius);
    overflow:        hidden;
    background:      var(--blog-card-bg);
    text-decoration: none;
    color:           inherit;
    transition:
        transform    var(--blog-transition),
        box-shadow   var(--blog-transition),
        border-color var(--blog-transition),
        background   var(--blog-transition);
}

@media (hover: hover) and (pointer: fine) {
    .blog-card:hover,
    .blog-card:focus-within {
        transform:    translateY(-6px);
        border-color: var(--blog-border-hover);
        background:   var(--blog-card-bg-hover);
        box-shadow:
            0 24px 52px rgba(0, 0, 0, 0.48),
            0  0   32px rgba(212, 160, 23, 0.06),
            0  1px  0   rgba(212, 160, 23, 0.1) inset;
        text-decoration: none;
    }
}

.blog-card:focus-visible {
    outline:        3px solid var(--blog-accent);
    outline-offset: 2px;
}

/* Top amber accent strip — always present, reinforces technical panel identity */
.blog-card__top-accent {
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     2px;
    background: linear-gradient(
        90deg,
        transparent              0%,
        rgba(212, 160, 23, 0.45) 20%,
        rgba(212, 160, 23, 0.75) 50%,
        rgba(212, 160, 23, 0.45) 80%,
        transparent              100%
    );
    z-index: 2;
}

/* --------------------------------------------------------------------------
   Card media — image area
   -------------------------------------------------------------------------- */
.blog-card__media {
    position:     relative;
    overflow:     hidden;
    aspect-ratio: 16 / 9;
    background:   #0d1018;
    flex-shrink:  0;
    display:      block;
}

.blog-card__image {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    transition:      transform var(--blog-img-transition);
}

/* Subtle gradient overlay on image — aids text readability */
.blog-card__media::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(
        to bottom,
        transparent 55%,
        rgba(9, 11, 15, 0.38) 100%
    );
    pointer-events: none;
}

/* CSS hover fallback — GSAP overrides on scroll-reveal */
.blog-card:hover .blog-card__image,
.blog-card:focus-visible .blog-card__image {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Card body — meta, title, excerpt, read-more
   -------------------------------------------------------------------------- */
.blog-card__body {
    display:        flex;
    flex-direction: column;
    gap:            11px;
    padding:        20px 22px 24px;
    flex:           1 1 auto;
    position:       relative;
    z-index:        1;
}

/* Meta — category badge + date */
.blog-card__meta {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

/* Category badge — amber pill with border */
.blog-card__category {
    display:         inline-block;
    font-size:       0.6875rem;
    font-weight:     700;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    color:           var(--blog-accent);
    padding:         3px 8px;
    background:      rgba(212, 160, 23, 0.10);
    border:          1px solid rgba(212, 160, 23, 0.20);
    border-radius:   2px;
    line-height:     1.4;
    text-decoration: none;
    transition:      background var(--blog-transition), border-color var(--blog-transition);
}

.blog-card__category:hover {
    background:   rgba(212, 160, 23, 0.18);
    border-color: rgba(212, 160, 23, 0.36);
    color:        var(--blog-accent);
}

/* Date — muted, tabular numerals */
.blog-card__date {
    font-size:           0.75rem;
    letter-spacing:      0.04em;
    color:               var(--blog-text-muted);
    line-height:         1;
    font-variant-numeric: tabular-nums;
}

/* Title */
.blog-card__title {
    margin:         0;
    font-size:      1.0625rem;
    font-weight:    700;
    line-height:    1.3;
    letter-spacing: -0.01em;
    color:          var(--blog-text-primary);
}

.blog-card__title-link {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--blog-transition);
}

.blog-card:hover .blog-card__title-link,
.blog-card:focus-within .blog-card__title-link {
    color: #ffffff;
}

/* Excerpt — secondary text, line-clamped */
.blog-card__excerpt {
    margin:               0;
    font-size:            0.875rem;
    line-height:          1.68;
    color:                var(--blog-text-secondary);
    flex-grow:            1;
    display:              -webkit-box;
    -webkit-line-clamp:   3;
    -webkit-box-orient:   vertical;
    overflow:             hidden;
}

/* Read Article — amber link with arrow */
.blog-card__read-more {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-size:       0.8125rem;
    font-weight:     600;
    letter-spacing:  0.04em;
    text-decoration: none;
    color:           var(--blog-accent);
    margin-top:      4px;
}

.blog-card__read-more-arrow {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Decorative card index watermark
   -------------------------------------------------------------------------- */
.blog-card__index {
    position:       absolute;
    bottom:         14px;
    right:          16px;
    font-size:      3.25rem;
    font-weight:    800;
    line-height:    1;
    color:          rgba(255, 255, 255, 0.038);
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select:    none;
    z-index:        0;
}

/* --------------------------------------------------------------------------
   Bottom accent stripe — GSAP-driven on hover
   -------------------------------------------------------------------------- */
.blog-card__accent {
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    height:           1px;
    background:       linear-gradient(
        90deg,
        transparent              0%,
        rgba(212, 160, 23, 0.65) 25%,
        rgba(212, 160, 23, 0.65) 75%,
        transparent              100%
    );
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform var(--blog-transition);
    z-index:          2;
}

.blog-card:hover .blog-card__accent,
.blog-card:focus-visible .blog-card__accent {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   View All Articles CTA — centred below the grid
   -------------------------------------------------------------------------- */
.blog__cta-wrap {
    display:         flex;
    justify-content: center;
    padding-bottom:  4px;
}

.blog__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         14px 32px;
    font-size:       0.9375rem;
    font-weight:     600;
    letter-spacing:  0.04em;
    text-decoration: none;
    border-radius:   3px;
}

/* --------------------------------------------------------------------------
   No-posts empty state
   -------------------------------------------------------------------------- */
.blog__empty {
    text-align:  center;
    padding:     48px 24px;
    color:       var(--blog-text-muted);
    font-size:   0.9375rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .blog {
        --blog-pad-y: 64px;
        --blog-pad-x: 16px;
    }

    .blog__intro {
        grid-template-columns: 1fr;
    }

    .blog-card__body {
        padding: 18px 18px 20px;
    }

    .blog-card__index {
        font-size: 2.75rem;
    }
}


/* ==========================================================================
   GSAP ANIMATION SUPPORT
   ==========================================================================
   Structural properties that CSS must own for GSAP reveals to work correctly.
   These are not animation rules — GSAP controls timing, easing, and values.
   ========================================================================== */

/*
 * Eyebrow accent lines — rendered as inline <span> elements in PHP.
 * Setting inline-block gives them a proper box model so scaleX transforms
 * originate from the correct edge and do not collapse to zero height.
 */
.hero__eyebrow-line,
.categories__eyebrow-line,
.why-us__eyebrow-line,
.industries__eyebrow-line,
.brands__eyebrow-line,
.promos__eyebrow-line,
.testimonials__eyebrow-line,
.blog__eyebrow-line {
    display:         inline-block;
    transform-origin: left center; /* matches GSAP: scaleX wipe from left */
}

/*
 * Promo card CSS hover — disabled when GSAP manages image transforms.
 * GSAP's inline style (transform: scale(1)) overrides class-based rules,
 * so this was always ignored after scroll reveal. Suppressing it prevents
 * the unexpected flash of `scale(1.03)` in browsers that re-evaluate
 * the cascade before GSAP's first frame runs.
 */
.promo-card:hover .promo-card__image,
.promo-card:focus-within .promo-card__image {
    transform: none; /* GSAP binds hover via JS in home.js */
}

/*
 * GPU compositing hints for elements under continuous scroll-driven animation.
 * Applied only to parallax layers — once-fired entrance elements do not need
 * will-change after they have settled.
 */
.js-hero-bg,
.js-hero-media,
.js-hero-content {
    will-change: transform;
}


/* ==========================================================================
   GLOBAL HOMEPAGE MOTION SYSTEM
   ========================================================================== */

.arhtrd-home .js-reveal-image {
    backface-visibility: hidden;
    transform-origin: center;
}

.arhtrd-home .btn-animated {
    --btn-motion-base: rgba(15, 17, 23, 0.94);
    --btn-motion-base-2: rgba(37, 40, 48, 0.94);
    --btn-motion-accent: rgba(212, 160, 23, 0.34);
    --btn-motion-border: rgba(212, 160, 23, 0.42);
    --btn-motion-text: #FFFFFF;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--btn-motion-text) !important;
    border-color: var(--btn-motion-border);
    background:
        linear-gradient(110deg,
            var(--btn-motion-base) 0%,
            var(--btn-motion-base-2) 36%,
            var(--btn-motion-accent) 54%,
            var(--btn-motion-base) 78%,
            var(--btn-motion-base-2) 100%);
    background-size: 220% 100%;
    animation: btn-surface-drift 8s linear infinite;
    transition:
        border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.arhtrd-home .btn-animated::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.42;
    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent);
    transform: translateX(-45%);
    transition:
        opacity 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.arhtrd-home .btn-animated--primary {
    --btn-motion-base: #0F1117;
    --btn-motion-base-2: #20232B;
    --btn-motion-accent: rgba(212, 160, 23, 0.48);
    --btn-motion-border: rgba(212, 160, 23, 0.64);
    --btn-motion-text: #FFFFFF;
}

.arhtrd-home .btn-animated--secondary {
    --btn-motion-base: rgba(15, 17, 23, 0.88);
    --btn-motion-base-2: rgba(38, 41, 48, 0.84);
    --btn-motion-accent: rgba(212, 160, 23, 0.24);
    --btn-motion-border: rgba(212, 160, 23, 0.44);
    --btn-motion-text: #FFFFFF;
}

.arhtrd-home .btn-animated:hover,
.arhtrd-home .btn-animated:focus-visible,
.arhtrd-home .btn-animated:active {
    border-color: rgba(212, 160, 23, 0.82);
    background-position: 100% 50%;
    color: #FFFFFF !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 10px 26px rgba(0, 0, 0, 0.18);
}

.arhtrd-home .btn-animated svg,
.arhtrd-home .btn-animated path {
    color: currentColor;
    stroke: currentColor;
}

.arhtrd-home .btn-animated:hover::before,
.arhtrd-home .btn-animated:focus-visible::before {
    opacity: 0.18;
    transform: translateX(35%);
}

@keyframes btn-surface-drift {
    from { background-position: 0% 50%; }
    to   { background-position: 220% 50%; }
}

@media (hover: none) {
    .arhtrd-home .btn-animated:hover {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arhtrd-home .btn-animated {
        animation: none;
        transition-duration: 0.01ms;
    }

    .arhtrd-home .btn-animated::before {
        transition: none;
    }
}