/* =========================================================
   FLEETAXIS
   Vehicle Fleet Management & Leasing
   PALETTE 2 — CARBON BLACK + COPPER + CHAMPAGNE
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


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

:root {
    --fx-black: #151515;
    --fx-carbon: #202020;
    --fx-charcoal: #2A2A2A;

    --fx-copper: #B87333;
    --fx-copper-dark: #985A25;
    --fx-copper-light: #D49A63;

    --fx-champagne: #F3E6D0;
    --fx-champagne-light: #FAF5ED;

    --fx-white: #FFFFFF;
    --fx-off-white: #F8F5F0;

    --fx-text: #202020;
    --fx-text-soft: #66615B;

    --fx-border: rgba(32, 32, 32, 0.12);

    --fx-navbar-height: 78px;

    --fx-transition:
        0.25s ease;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    margin: 0;

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

    background: var(--fx-champagne-light);

    color: var(--fx-text);

    line-height: 1.6;

    overflow-x: hidden;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   HEADINGS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Inter", sans-serif;

    font-weight: 600;

    line-height: 1.2;

    color: var(--fx-black);
}


/* =========================================================
   NAVBAR
========================================================= */

.fx-navbar {
    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

    height: var(--fx-navbar-height);

    background:
        var(--fx-champagne-light);

    border-bottom:
        1px solid var(--fx-border);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.04);

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}


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

   IMPORTANT:
   The grid ALWAYS remains LTR.
   RTL is controlled using grid-template-areas.
========================================================= */

.fx-navbar-inner {
    width: min(1440px, calc(100% - 64px));

    height: 100%;

    margin: 0 auto;

    display: grid;

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

    grid-template-areas:
        "brand nav actions";

    align-items: center;

    column-gap: 30px;

    direction: ltr;
}


/* =========================================================
   BRAND
========================================================= */

.fx-brand {
    grid-area: brand;

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    flex-direction: row;

    gap: 11px;

    white-space: nowrap;

    direction: ltr;

    color: var(--fx-black);

    font-weight: 700;

    text-decoration: none;

    transition:
        opacity var(--fx-transition);
}

.fx-brand:hover {
    opacity: 0.82;
}


/* =========================================================
   FLEETAXIS LOGO

   Vehicle inside location pin
========================================================= */

.fx-brand-logo {
    position: relative;

    width: 40px;

    height: 44px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Location pin */

.fx-brand-logo .fx-pin {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--fx-copper);

    font-size: 41px;

    line-height: 1;
}


/* Vehicle */

.fx-brand-logo .fx-car {
    position: relative;

    z-index: 2;

    margin-top: -3px;

    color: var(--fx-white);

    font-size: 12px;

    line-height: 1;
}


/* Brand name */

.fx-brand-name {
    font-size: 18px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.055em;

    color: var(--fx-black);
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.fx-desktop-nav {
    grid-area: nav;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 3px;

    direction: ltr;
}


/* =========================================================
   NAV LINKS
========================================================= */

.fx-nav-link,
.fx-dropdown-toggle {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 46px;

    padding:
        0 15px;

    border-radius: 8px;

    background: transparent;

    color: var(--fx-text);

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    transition:
        background-color var(--fx-transition),
        color var(--fx-transition);
}


/* Hover */

.fx-nav-link:hover,
.fx-dropdown-toggle:hover {
    background: var(--fx-champagne);

    color: var(--fx-copper-dark);
}


/* =========================================================
   ACTIVE STATE
   WHOLE HEADING IS HIGHLIGHTED
========================================================= */

.fx-nav-link.active,
.fx-dropdown-toggle.active {
    background: var(--fx-copper);

    color: var(--fx-white);
}


/* Active hover */

.fx-nav-link.active:hover,
.fx-dropdown-toggle.active:hover {
    background: var(--fx-copper-dark);

    color: var(--fx-white);
}


/* =========================================================
   CHEVRON
========================================================= */

.fx-chevron {
    font-size: 10px;

    transition:
        transform var(--fx-transition);
}

.fx-dropdown.open .fx-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWNS
========================================================= */

.fx-dropdown {
    position: relative;
}

.fx-dropdown-menu {
    position: absolute;

    top: calc(100% + 8px);

    inset-inline-start: 0;

    min-width: 190px;

    padding: 7px;

    background: var(--fx-white);

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

    border-radius: 10px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-6px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    z-index: 1100;
}

.fx-dropdown.open .fx-dropdown-menu {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


/* Dropdown links */

.fx-dropdown-link {
    display: flex;

    align-items: center;

    min-height: 42px;

    width: 100%;

    padding:
        0 13px;

    border-radius: 7px;

    color: var(--fx-text);

    font-size: 13px;

    font-weight: 500;

    white-space: nowrap;

    transition:
        background-color var(--fx-transition),
        color var(--fx-transition);
}

.fx-dropdown-link:hover {
    background: var(--fx-champagne);

    color: var(--fx-copper-dark);
}


/* Dropdown active */

.fx-dropdown-link.active {
    background: var(--fx-copper);

    color: var(--fx-white);
}


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

.fx-desktop-actions {
    grid-area: actions;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    direction: ltr;
}


/* =========================================================
   ICON BUTTON
========================================================= */

.fx-icon-button,
.fx-rtl-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    height: 42px;

    padding:
        0 10px;

    border-radius: 8px;

    background: transparent;

    color: var(--fx-text);

    font-size: 13px;

    font-weight: 600;

    transition:
        background-color var(--fx-transition),
        color var(--fx-transition);
}

.fx-icon-button:hover,
.fx-rtl-button:hover {
    background: var(--fx-champagne);

    color: var(--fx-copper-dark);
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.fx-login-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding:
        0 18px;

    margin-inline-start: 4px;

    border-radius: 8px;

    background: var(--fx-copper);

    color: var(--fx-white);

    font-size: 13px;

    font-weight: 600;

    transition:
        background-color var(--fx-transition),
        transform var(--fx-transition);
}

.fx-login-button:hover {
    background: var(--fx-copper-dark);

    color: var(--fx-white);

    transform:
        translateY(-1px);
}


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

.fx-mobile-actions {
    display: none;
}


/* =========================================================
   HAMBURGER
========================================================= */

.fx-menu-toggle {
    width: 42px;

    height: 42px;

    border-radius: 8px;

    background: transparent;

    color: var(--fx-text);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    transition:
        background-color var(--fx-transition),
        color var(--fx-transition);
}

.fx-menu-toggle:hover {
    background: var(--fx-champagne);

    color: var(--fx-copper-dark);
}


/* =========================================================
   MOBILE MENU OVERLAY
========================================================= */

.fx-mobile-menu {
    position: fixed;

    inset: 0;

    z-index: 2000;

    visibility: hidden;

    pointer-events: none;
}

.fx-mobile-menu.open {
    visibility: visible;

    pointer-events: auto;
}


/* Backdrop */

.fx-mobile-menu-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.45);

    opacity: 0;

    transition:
        opacity 0.25s ease;
}

.fx-mobile-menu.open
.fx-mobile-menu-backdrop {
    opacity: 1;
}


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

.fx-mobile-menu-panel {
    position: absolute;

    top: 0;

    bottom: 0;

    inset-inline-end: 0;

    width: min(390px, 88vw);

    height: 100dvh;

    display: flex;

    flex-direction: column;

    background: var(--fx-champagne-light);

    box-shadow:
        -15px 0 40px rgba(0, 0, 0, 0.15);

    transform:
        translateX(100%);

    transition:
        transform 0.3s ease;

    overflow-y: auto;

    overscroll-behavior:
        contain;
}

.fx-mobile-menu.open
.fx-mobile-menu-panel {
    transform:
        translateX(0);
}


/* =========================================================
   MOBILE MENU HEADER
========================================================= */

.fx-mobile-menu-header {
    min-height: 82px;

    padding:
        0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid var(--fx-border);
}


/* Mobile logo */

.fx-mobile-brand {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--fx-black);

    font-size: 16px;

    font-weight: 700;
}


/* Close */

.fx-menu-close {
    width: 42px;

    height: 42px;

    border-radius: 8px;

    background: transparent;

    color: var(--fx-text);

    font-size: 23px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.fx-menu-close:hover {
    background: var(--fx-champagne);

    color: var(--fx-copper-dark);
}


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

.fx-mobile-nav {
    flex: 1;

    padding:
        20px;

    display: flex;

    flex-direction: column;

    gap: 5px;
}


/* Mobile links */

.fx-mobile-nav-link,
.fx-mobile-dropdown-toggle {
    width: 100%;

    min-height: 48px;

    padding:
        0 15px;

    border-radius: 8px;

    background: transparent;

    color: var(--fx-text);

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 15px;

    font-weight: 600;

    text-align: left;

    transition:
        background-color var(--fx-transition),
        color var(--fx-transition);
}

.fx-mobile-nav-link:hover,
.fx-mobile-dropdown-toggle:hover {
    background: var(--fx-champagne);

    color: var(--fx-copper-dark);
}


/* Mobile active */

.fx-mobile-nav-link.active,
.fx-mobile-dropdown-toggle.active {
    background: var(--fx-copper);

    color: var(--fx-white);
}


/* Mobile dropdown */

.fx-mobile-dropdown-menu {
    display: none;

    padding:
        4px 0 5px 15px;
}

.fx-mobile-dropdown.open
.fx-mobile-dropdown-menu {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.fx-mobile-dropdown-link {
    min-height: 43px;

    display: flex;

    align-items: center;

    padding:
        0 14px;

    border-radius: 7px;

    color: var(--fx-text-soft);

    font-size: 14px;

    font-weight: 500;
}

.fx-mobile-dropdown-link:hover {
    background: var(--fx-champagne);

    color: var(--fx-copper-dark);
}

.fx-mobile-dropdown-link.active {
    background: var(--fx-copper);

    color: var(--fx-white);
}


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

.fx-mobile-login {
    margin-top: auto;

    padding:
        18px 20px 24px;

    border-top:
        1px solid var(--fx-border);
}

.fx-mobile-login .fx-login-button {
    width: 100%;

    min-height: 48px;

    margin: 0;
}


/* =========================================================
   PAGE CONTENT PLACEHOLDER
========================================================= */

.fx-page-content {
    min-height: calc(100vh - var(--fx-navbar-height));
}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .fx-navbar-inner {
        width: min(100% - 40px, 1400px);

        column-gap: 15px;
    }

    .fx-nav-link,
    .fx-dropdown-toggle {
        padding:
            0 11px;

        font-size: 13px;
    }

    .fx-brand-name {
        font-size: 17px;
    }

    .fx-desktop-actions {
        gap: 2px;
    }
}


/* =========================================================
   TABLET + MOBILE
========================================================= */

@media (max-width: 1023px) {

    :root {
        --fx-navbar-height: 72px;
    }


    .fx-navbar-inner {
        width: calc(100% - 30px);

        grid-template-columns:
            1fr
            auto;

        grid-template-areas:
            "brand mobile";

        column-gap: 10px;
    }


    .fx-desktop-nav,
    .fx-desktop-actions {
        display: none;
    }


    .fx-brand {
        grid-area: brand;
    }


    .fx-mobile-actions {
        grid-area: mobile;

        display: flex;

        align-items: center;

        justify-content: flex-end;

        gap: 2px;

        direction: ltr;
    }


    .fx-brand-logo {
        width: 36px;

        height: 40px;

        flex-basis: 36px;
    }


    .fx-brand-logo .fx-pin {
        font-size: 37px;
    }


    .fx-brand-name {
        font-size: 16px;
    }
}


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

@media (max-width: 480px) {

    .fx-navbar-inner {
        width: calc(100% - 20px);
    }

    .fx-brand-logo {
        width: 33px;

        height: 37px;

        flex-basis: 33px;
    }

    .fx-brand-logo .fx-pin {
        font-size: 34px;
    }

    .fx-brand-logo .fx-car {
        font-size: 10px;
    }

    .fx-brand-name {
        font-size: 14px;

        letter-spacing: 0.04em;
    }

    .fx-icon-button,
    .fx-rtl-button,
    .fx-menu-toggle {
        width: 38px;

        min-width: 38px;

        height: 38px;

        padding: 0;
    }

    .fx-mobile-menu-panel {
        width: 92vw;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible {
    outline:
        2px solid var(--fx-copper);

    outline-offset:
        2px;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.fx-menu-open {
    overflow: hidden;
}

/* =========================================================
   FLEETAXIS NAVBAR — FINAL FIXES
   Normalized selectors + clear vehicle-pin logo
========================================================= */

.fx-logo-svg {
    width: 44px;
    height: 50px;
    display: block;
    overflow: visible;
}

.fx-logo-pin {
    fill: var(--fx-copper);
}

.fx-logo-car {
    fill: var(--fx-white);
}

.fx-logo-window {
    fill: var(--fx-copper);
}

.fx-logo-wheel {
    fill: var(--fx-copper);
}

.fx-brand-logo {
    width: 44px;
    height: 50px;
    flex: 0 0 44px;
}

.fx-mobile-brand .fx-brand-logo {
    width: 40px;
    height: 46px;
    flex-basis: 40px;
}

.fx-dropdown-toggle,
.fx-mobile-dropdown-toggle {
    border: 0;
    cursor: pointer;
}

.fx-dropdown-toggle .fa-chevron-down,
.fx-mobile-dropdown-toggle .fa-chevron-down {
    transition: transform 0.25s ease;
}

.fx-dropdown.open .fx-dropdown-toggle .fa-chevron-down,
.fx-mobile-dropdown.open .fx-mobile-dropdown-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

.fx-mobile-menu-backdrop {
    z-index: 0;
}

.fx-mobile-menu-panel {
    z-index: 1;
}

.fx-mobile-menu-header {
    flex-shrink: 0;
}

.fx-mobile-nav {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fx-mobile-login-wrapper {
    flex-shrink: 0;
    margin-top: auto;
    padding: 18px 20px 24px;
    border-top: 1px solid var(--fx-border);
}

.fx-mobile-login {
    width: 100%;
    min-height: 48px;
    margin: 0;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--fx-copper);
    color: var(--fx-white);
    font-size: 14px;
    font-weight: 600;
    transition: background-color var(--fx-transition), transform var(--fx-transition);
}

.fx-mobile-login:hover {
    background: var(--fx-copper-dark);
    color: var(--fx-white);
    transform: translateY(-1px);
}

@media (max-width: 1023px) {
    .fx-brand-logo {
        width: 38px;
        height: 44px;
        flex-basis: 38px;
    }

    .fx-logo-svg {
        width: 38px;
        height: 44px;
    }

    .fx-mobile-brand .fx-brand-logo {
        width: 38px;
        height: 44px;
        flex-basis: 38px;
    }
}

@media (max-width: 480px) {
    .fx-brand-logo,
    .fx-mobile-brand .fx-brand-logo {
        width: 35px;
        height: 41px;
        flex-basis: 35px;
    }

    .fx-logo-svg {
        width: 35px;
        height: 41px;
    }
}


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

.fx-hero {
    --hero-dir: 1;

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

    min-height: max(640px, calc(100vh - var(--fx-navbar-height)));
    display: flex;
    align-items: center;

    padding: 56px 0 64px;
    background: var(--fx-champagne-light);
}

.fx-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.fx-hero-orb {
    position: absolute;
    inset-inline-end: -8%;
    top: 50%;
    width: min(56vw, 760px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,115,51,.26), rgba(184,115,51,.08) 55%, transparent 70%);
    animation: fxBreath 6s ease-in-out infinite;
}

.fx-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--fx-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--fx-border) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 0, transparent 70%);
            mask-image: radial-gradient(ellipse at 70% 50%, #000 0, transparent 70%);
    opacity: .55;
}

.fx-hero-inner {
    width: min(1440px, calc(100% - 140px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 16px;
}

/* ---------- copy ---------- */

.fx-hero-copy { text-align: start; min-width: 0; }

.fx-rise {
    opacity: 0;
    animation: fxRise .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s) forwards;
}

.fx-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    background: var(--fx-white);
    color: var(--fx-copper-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.fx-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fx-copper);
    box-shadow: 0 0 0 0 rgba(184,115,51,.5);
    animation: fxPulse 1.8s ease-out infinite;
}

.fx-hero-title {
    margin: 22px 0 20px;
    font-size: clamp(34px, 5.2vw, 68px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--fx-black);
}

.fx-line { display: block; overflow: hidden; padding-block: .04em .14em; }

.fx-line > span {
    display: block;
    transform: translateY(120%);
    animation: fxLine .95s cubic-bezier(.2,.8,.2,1) var(--d, 0s) forwards;
}

.fx-accent { color: var(--fx-copper); }

.fx-hero-text {
    max-width: 520px;
    margin: 0 0 30px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--fx-text-soft);
}

.fx-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.fx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}

.fx-btn i { font-size: 13px; transition: transform .25s ease; }

.fx-btn-primary {
    background: var(--fx-copper);
    color: #fff;
    box-shadow: 0 10px 26px rgba(184,115,51,.35);
}

.fx-btn-primary:hover { background: var(--fx-copper-dark); transform: translateY(-2px); }
.fx-btn-primary:hover i { transform: translateX(calc(var(--hero-dir) * 4px)); }

.fx-btn-ghost {
    border: 1.5px solid var(--fx-border);
    background: transparent;
    color: var(--fx-black);
}

.fx-btn-ghost i { color: var(--fx-copper); }
.fx-btn-ghost:hover { border-color: var(--fx-copper); transform: translateY(-2px); }

.fx-hero-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 38px;
    margin-top: 38px;
    padding-top: 26px;
    border-top: 1px solid var(--fx-border);
}

.fx-hero-stats strong { display: block; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--fx-black); }
.fx-hero-stats span { font-size: 13px; font-weight: 500; color: var(--fx-text-soft); }

/* ---------- stage ---------- */

.fx-hero-stage {
    position: relative;
    width: 100%;
    max-width: 840px;
    margin-inline: 0 auto;
    aspect-ratio: 1 / .88;
}

.fx-stage-ring {
    position: absolute;
    inset: 4% 8% 14%;
    border: 1.5px dashed rgba(184,115,51,.38);
    border-radius: 50%;
    animation: fxSpin 40s linear infinite;
}

.fx-ring-2 { inset: 14% 18% 24%; border-style: solid; border-color: rgba(184,115,51,.16); animation-duration: 60s; animation-direction: reverse; }

.fx-stage-num {
    position: absolute;
    inset-inline-end: 2%;
    top: -2%;
    font-size: clamp(90px, 15vw, 190px);
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(184,115,51,.35);
    user-select: none;
}

.fx-veh {
    position: absolute;
    inset-inline: 0;
    bottom: 17%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    -webkit-mask-image: linear-gradient(#000 76%, transparent 94%);
            mask-image: linear-gradient(#000 76%, transparent 94%);
}

.fx-veh img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 26px rgba(0,0,0,.28));
    animation: fxFloat 5s ease-in-out infinite;
}

.fx-veh.is-active { animation: fxIn 1s cubic-bezier(.16,1,.3,1) forwards; }
.fx-veh.is-leaving { animation: fxOut .7s ease-in forwards; }

.fx-ground {
    position: absolute;
    inset-inline: 14%;
    bottom: 13%;
    height: 6%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,0,0,.42), transparent 70%);
    filter: blur(6px);
    animation: fxBreath 5s ease-in-out infinite;
}

.fx-speed { position: absolute; inset: 20% 0 30%; pointer-events: none; }

.fx-speed i {
    position: absolute;
    inset-inline-start: 0;
    height: 2px;
    width: 55%;
    border-radius: 2px;
    background: linear-gradient(calc(var(--hero-dir) * 90deg), transparent, var(--fx-copper));
    opacity: 0;
}

.fx-speed i:nth-child(1) { top: 12%; }
.fx-speed i:nth-child(2) { top: 38%; width: 70%; }
.fx-speed i:nth-child(3) { top: 64%; width: 48%; }
.fx-speed i:nth-child(4) { top: 86%; width: 62%; }

.is-moving .fx-speed i { animation: fxSpeed .9s cubic-bezier(.2,.7,.2,1) forwards; }
.is-moving .fx-speed i:nth-child(2) { animation-delay: .06s; }
.is-moving .fx-speed i:nth-child(3) { animation-delay: .12s; }
.is-moving .fx-speed i:nth-child(4) { animation-delay: .18s; }

.fx-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border: 1px solid var(--fx-border);
    border-radius: 12px;
    background: var(--fx-white);
    color: var(--fx-black);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    opacity: 0;
    animation: fxPop .7s cubic-bezier(.2,.8,.2,1) forwards, fxFloat 6s ease-in-out infinite;
}

.fx-chip i { color: var(--fx-copper); }
.fx-chip-1 { inset-inline-start: 0; top: 18%; animation-delay: 1.5s, 2.2s; }
.fx-chip-2 { inset-inline-end: 0; bottom: 30%; animation-delay: 1.8s, 2.6s; }

.fx-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--fx-border);
}

.fx-caption-text { display: flex; flex-direction: column; min-width: 0; }
.fx-caption-text strong { font-size: 17px; font-weight: 600; color: var(--fx-black); }
.fx-caption-text span { font-size: 13px; font-weight: 500; color: var(--fx-text-soft); }
.is-moving .fx-caption-text { animation: fxRise .6s ease forwards; }

.fx-dots { display: flex; gap: 8px; }

.fx-dot {
    position: relative;
    width: 38px; height: 6px;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    background: var(--fx-border);
}

.fx-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--fx-copper);
    transform: scaleX(0);
    transform-origin: calc(50% - var(--hero-dir) * 50%) 50%;
}

.fx-dot.is-on::after { animation: fxFill var(--slide, 2800ms) linear forwards; }

.fx-road {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 4px;
    opacity: .55;
    background: repeating-linear-gradient(90deg, var(--fx-copper) 0 36px, transparent 36px 72px);
    animation: fxRoad 1.6s linear infinite;
}

/* ---------- keyframes ---------- */

@keyframes fxRise  { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
@keyframes fxLine  { to { transform: none; } }
@keyframes fxIn {
    0%   { opacity: 0; transform: translateX(calc(var(--hero-dir) * 115%)) scale(.94); filter: blur(10px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
}
@keyframes fxOut   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(calc(var(--hero-dir) * -40%)) scale(.92); filter: blur(8px); } }
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes fxBreath{ 0%, 100% { opacity: .85; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
@keyframes fxSpin  { to { transform: rotate(360deg); } }
@keyframes fxPop   { from { opacity: 0; transform: scale(.7) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fxPulse { to { box-shadow: 0 0 0 10px rgba(184,115,51,0); } }
@keyframes fxFill  { to { transform: scaleX(1); } }
@keyframes fxRoad  { to { background-position-x: calc(var(--hero-dir) * -72px); } }
@keyframes fxSpeed {
    0%   { opacity: 0; transform: translateX(calc(var(--hero-dir) * 150%)); }
    30%  { opacity: .9; }
    100% { opacity: 0; transform: translateX(calc(var(--hero-dir) * -70%)); }
}

/* ---------- responsive ---------- */

@media (max-width: 1439px) { .fx-hero-title { font-size: clamp(34px, 4.8vw, 60px); } }

@media (max-width: 1199px) {
    .fx-hero-inner { width: calc(100% - 80px); gap: 12px; }
    .fx-hero-text { font-size: 16px; }
}

@media (max-width: 1023px) {
    .fx-hero { min-height: 0; padding: 40px 0 56px; }
    .fx-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .fx-hero-title { font-size: clamp(34px, 7vw, 56px); }
    .fx-hero-stage { max-width: 560px; }
    .fx-hero-orb { width: 90vw; top: 62%; }
}

@media (max-width: 767px) {
    .fx-hero-inner { width: calc(100% - 48px); }
    .fx-hero-stats strong { font-size: 24px; }
}

@media (max-width: 480px) {
    .fx-hero { padding: 28px 0 48px; }
    .fx-hero-title { font-size: clamp(30px, 9.4vw, 40px); margin: 18px 0 16px; }
    .fx-hero-text { font-size: 15px; margin-bottom: 24px; }
    .fx-hero-actions { gap: 10px; }
    .fx-btn { flex: 1 1 100%; min-height: 48px; }
    .fx-hero-stats { gap: 12px 22px; margin-top: 28px; }
    .fx-hero-stats strong { font-size: 21px; }
    .fx-hero-stats span { font-size: 12px; }
    .fx-chip { padding: 7px 10px; font-size: 11px; border-radius: 10px; }
    .fx-chip-1 { top: 10%; }
    .fx-chip-2 { bottom: 34%; }
    .fx-caption-text strong { font-size: 15px; }
    .fx-dot { width: 26px; }
}

@media (max-width: 359px) {
    .fx-hero-stats { gap: 12px 14px; }
    .fx-hero-stats li { flex: 1 1 26%; }
    .fx-hero-stats strong { font-size: 19px; }
    .fx-chip-2 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-hero *, .fx-hero *::before, .fx-hero *::after { animation: none !important; }
    .fx-rise, .fx-chip { opacity: 1; }
    .fx-line > span { transform: none; }
    .fx-veh.is-active { opacity: 1; }
}


/* =========================================================
   FLEETAXIS — HOME 1 · SECTIONS 02 & 03
   Paste at the end of your existing styles.css.
   Uses your existing variables, Inter font, .fx-btn and
   .fx-hero-eyebrow styles.
========================================================= */


/* =========================================================
   SHARED
========================================================= */

.fx-solutions,
.fx-journey-sec {
    --hero-dir: 1;
    --fx-dir: 1;

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

.fx-wrap {
    position: relative;
    width: min(1440px, calc(100% - 140px));
    margin: 0 auto;
}

.fx-sec-title {
    margin: 20px 0 16px;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--fx-black);
}

.fx-sec-text {
    max-width: 560px;
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--fx-text-soft);
}

.fx-btn-light {
    background: #FFFFFF;
    color: #151515;
}

.fx-btn-light:hover {
    background: var(--fx-champagne);
    transform: translateY(-2px);
}

.fx-btn-light:hover i {
    transform: translateX(calc(var(--hero-dir) * 4px));
}

/* reveal on scroll (only when script.js is running) */

.fx-js .fx-reveal { opacity: 0; }

.fx-js .fx-reveal.is-in {
    opacity: 1;
    animation: fxReveal .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards;
}

@keyframes fxReveal {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: none; }
}


/* =========================================================
   SECTION 02 — FLEET SOLUTIONS
========================================================= */

.fx-solutions {
    padding: 96px 0 104px;
    background: var(--fx-champagne-light);
}

.fx-solutions::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(var(--fx-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--fx-border) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0, transparent 70%);
            mask-image: radial-gradient(ellipse at 50% 0%, #000 0, transparent 70%);
}

/* ---------- head ---------- */

.fx-sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px 48px;
    margin-bottom: 44px;
}

.fx-sec-head-copy { min-width: 0; max-width: 700px; }

.fx-filters { display: flex; flex-wrap: wrap; gap: 10px; }

.fx-filter {
    min-height: 44px;
    padding: 0 20px;
    border: 1.5px solid var(--fx-border);
    border-radius: 999px;
    background: var(--fx-white);
    color: var(--fx-black);
    font-size: 14px;
    font-weight: 600;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.fx-filter:hover { border-color: var(--fx-copper); transform: translateY(-2px); }

.fx-filter.is-on {
    background: #985A25;
    border-color: #985A25;
    color: #FFFFFF;
}

.fx-filter:focus-visible,
.fx-sol-link:focus-visible,
.fx-node:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

/* ---------- bento grid ---------- */

.fx-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.fx-sol-a { grid-column: 1 / 6;  grid-row: 1 / 3; }
.fx-sol-b { grid-column: 6 / 10; }
.fx-sol-c { grid-column: 10 / 13; }
.fx-sol-d { grid-column: 6 / 13; }

/* ---------- card ---------- */

.fx-sol {
    --sol-text: var(--fx-black);
    --sol-soft: var(--fx-text-soft);
    --sol-link: var(--fx-copper-dark);

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 30px 30px 0;
    border: 1px solid var(--fx-border);
    border-radius: 22px;
    background: var(--fx-white);
    color: var(--sol-text);
    transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease, filter .35s ease;
}

.fx-sol:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .14);
}

/* soft copper glow rising from the bottom */
.fx-sol::before {
    content: "";
    position: absolute;
    inset: auto -20% -35% -20%;
    height: 75%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, rgba(184, 115, 51, .22), transparent 65%);
}

.fx-sol-a { background: var(--fx-champagne); }

.fx-sol-c {
    --sol-text: #FFFFFF;
    --sol-soft: #FFF4E6;
    --sol-link: #FFFFFF;
    background: #985A25;
    border-color: #985A25;
}

.fx-sol-c::before { background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .18), transparent 65%); }

.fx-sol-d {
    --sol-text: #F8F5F0;
    --sol-soft: #CDC4B6;
    --sol-link: #D49A63;
    background: #1B1B1B;
    border-color: rgba(243, 230, 208, .14);
}

.fx-sol-num {
    position: absolute;
    inset-inline-end: 22px;
    top: 14px;
    z-index: 0;
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(184, 115, 51, .38);
    user-select: none;
    pointer-events: none;
}

.fx-sol-c .fx-sol-num { -webkit-text-stroke-color: rgba(255, 255, 255, .45); }
.fx-sol-d .fx-sol-num { -webkit-text-stroke-color: rgba(212, 154, 99, .45); }

.fx-sol-body { z-index: 1; min-width: 0; padding-bottom: 20px; }

.fx-sol-kicker {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--sol-link);
}

.fx-sol-title {
    margin: 0 0 12px;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--sol-text);
}

.fx-sol-a .fx-sol-title { font-size: clamp(28px, 2.8vw, 40px); }

.fx-sol-text {
    max-width: 440px;
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--sol-soft);
}

.fx-sol-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.fx-sol-tags li {
    padding: 6px 12px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    background: var(--fx-white);
    color: var(--fx-black);
    font-size: 12.5px;
    font-weight: 600;
}

.fx-sol-c .fx-sol-tags li {
    background: rgba(0, 0, 0, .2);
    border-color: rgba(255, 255, 255, .32);
    color: #FFFFFF;
}

.fx-sol-d .fx-sol-tags li {
    background: rgba(243, 230, 208, .08);
    border-color: rgba(243, 230, 208, .2);
    color: #F3E6D0;
}

.fx-sol-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--sol-link);
}

.fx-sol-link i { font-size: 13px; transition: transform .25s ease; }
.fx-sol:hover .fx-sol-link i { transform: translateX(calc(var(--hero-dir) * 5px)); }

/* whole card is clickable through the link */
.fx-sol-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* ---------- vehicle stage ---------- */

.fx-sol-stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: auto -30px 0;
    aspect-ratio: 3 / 2;
    pointer-events: none;
}

.fx-sol-ring {
    position: absolute;
    inset: 6% 14% 2%;
    z-index: -1;
    border: 1.5px dashed rgba(184, 115, 51, .38);
    border-radius: 50%;
    animation: fxSpin 50s linear infinite;
}

.fx-sol-d .fx-sol-ring { border-color: rgba(212, 154, 99, .4); }

.fx-sol-stage img {
    width: 100%;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .28));
    -webkit-mask-image: linear-gradient(#000 84%, transparent 99%);
            mask-image: linear-gradient(#000 84%, transparent 99%);
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.fx-sol:hover .fx-sol-stage img { transform: translateY(-6px) scale(1.03); }

.fx-sol-a .fx-sol-stage { aspect-ratio: 4 / 3; }
.fx-sol-a .fx-sol-stage img { width: 124%; }
.fx-sol-b .fx-sol-stage img { width: 106%; }

/* ---------- card 03 art ---------- */

.fx-sol-art {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 150px;
    margin: 0 -30px;
    pointer-events: none;
}

.fx-art-main {
    position: absolute;
    inset-inline-end: 24px;
    bottom: -14px;
    font-size: clamp(110px, 9vw, 150px);
    line-height: 1;
    color: rgba(255, 255, 255, .22);
}

.fx-art-bolt {
    position: absolute;
    inset-inline-start: 34px;
    bottom: 30px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .22);
    color: #FFFFFF;
    font-size: 22px;
    animation: fxFloat 5s ease-in-out infinite;
}

/* ---------- card 04 (wide, side by side) ---------- */

.fx-sol-d {
    flex-direction: row;
    align-items: stretch;
    padding-block: 30px 0;
    padding-inline: 30px 0;
}

.fx-sol-d .fx-sol-body {
    flex: 0 0 46%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 30px;
}

.fx-sol-d .fx-sol-text { margin-bottom: 14px; }

.fx-sol-d .fx-sol-stage {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    aspect-ratio: auto;
    min-height: 250px;
}

.fx-sol-d .fx-sol-stage img {
    width: 106%;
    -webkit-mask-image: linear-gradient(#000 76%, transparent 97%);
            mask-image: linear-gradient(#000 76%, transparent 97%);
}

/* ---------- filter spotlight ---------- */

.fx-bento.is-filtered .fx-sol { opacity: .55; filter: saturate(.7); transform: scale(.985); }

.fx-bento.is-filtered .fx-sol.is-match {
    opacity: 1;
    filter: none;
    transform: none;
    box-shadow: 0 0 0 2px var(--fx-copper), 0 22px 48px rgba(0, 0, 0, .14);
}

/* ---------- cta strip ---------- */

.fx-cta-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
    margin-top: 16px;
    padding: 24px 30px;
    border-radius: 22px;
    background: #985A25;
    color: #FFFFFF;
}

.fx-cta-text { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; }
.fx-cta-text strong { font-size: 22px; font-weight: 600; line-height: 1.25; color: #FFFFFF; }
.fx-cta-text span { font-size: 15px; font-weight: 500; color: #FFF4E6; }


/* =========================================================
   SECTION 03 — FLEET CONTROL (THE FLEET ROAD)
========================================================= */

.fx-journey-sec {
    --fr-bg: #151515;
    --fr-text: #F8F5F0;
    --fr-soft: #CDC4B6;
    --fr-copper: #D49A63;
    --fr-line: rgba(243, 230, 208, .16);
    --fr-road: #2B2B2B;
    --fr-node: #1F1F1F;

    --fx-truck-w: clamp(130px, 13vw, 210px);
    --fx-truck-h: calc(var(--fx-truck-w) * .571);
    --fx-road-y: calc(var(--fx-truck-h) + 14px);
    --fx-lane: calc(var(--fx-road-y) + 34px);

    padding-top: 100px;
    background: var(--fr-bg);
    color: var(--fr-text);
}

.fx-jr-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.fx-jr-orb {
    position: absolute;
    inset-inline-start: 50%;
    top: 30%;
    width: min(70vw, 900px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 154, 99, .16), rgba(212, 154, 99, .05) 55%, transparent 70%);
    animation: fxBreath 6s ease-in-out infinite;
}

.fx-jr-grid {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(rgba(243, 230, 208, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243, 230, 208, .06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0, transparent 70%);
            mask-image: radial-gradient(ellipse at 50% 30%, #000 0, transparent 70%);
}

.fx-jr-num {
    position: absolute;
    inset-inline: 0;
    top: 30px;
    z-index: 0;
    text-align: center;
    font-size: clamp(150px, 24vw, 340px);
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(212, 154, 99, .22);
    user-select: none;
    pointer-events: none;
}

/* ---------- head ---------- */

.fx-jr-head {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto 64px;
    text-align: center;
}

.fx-journey-sec .fx-hero-eyebrow {
    background: rgba(243, 230, 208, .06);
    border-color: rgba(243, 230, 208, .2);
    color: #E2B487;
}

.fx-journey-sec .fx-sec-title { color: var(--fr-text); }
.fx-journey-sec .fx-accent { color: var(--fr-copper); }

.fx-jr-head .fx-accent { display: block; }

.fx-jr-head .fx-sec-text {
    margin-inline: auto;
    color: var(--fr-soft);
}

/* ---------- journey grid: up-text / road lane / down-text ---------- */

.fx-journey { position: relative; z-index: 1; }

.fx-stops {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto var(--fx-lane) auto;
    column-gap: 8px;
    padding-inline: calc(var(--fx-truck-w) * .55);
}

.fx-stop { display: contents; }

.fx-lane {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
}

/* ---------- road ---------- */

.fx-road,
.fx-road-fill {
    position: absolute;
    top: calc(var(--fx-road-y) - 8px);
    height: 16px;
}

.fx-road {
    inset-inline: -100vw;
    background: var(--fr-road);
    border-block: 1px solid rgba(212, 154, 99, .3);
}

.fx-road::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: calc(50% - 1px);
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(243, 230, 208, .55) 0 22px, transparent 22px 44px);
    animation: fxLane 1.6s linear infinite;
}

.fx-road-fill {
    inset-inline-start: -100vw;
    width: calc(100vw + (var(--i, 0) + .5) * 25%);
    background: rgba(212, 154, 99, .3);
    border-block: 1px solid rgba(212, 154, 99, .7);
    transition: width 1s cubic-bezier(.65, 0, .25, 1);
}

.fx-tick { display: none; }

/* ---------- truck ---------- */

.fx-truck {
    position: absolute;
    z-index: 2;
    top: calc(var(--fx-road-y) + 6px - var(--fx-truck-h));
    inset-inline-start: calc((var(--i, 0) + .5) * 25%);
    width: var(--fx-truck-w);
    transform: translateX(calc((100% + 26px) * var(--fx-dir) * -1));
    transition: inset-inline-start 1s cubic-bezier(.65, 0, .25, 1);
    pointer-events: none;
}

.fx-truck::after {
    content: "";
    position: absolute;
    inset-inline: 6%;
    bottom: -3px;
    height: 10px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 70%);
    filter: blur(3px);
}

.fx-truck img {
    width: 100%;
    height: auto;
    scale: calc(-1 * var(--fx-dir)) 1;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55));
    -webkit-mask-image: linear-gradient(#000 88%, transparent 100%);
            mask-image: linear-gradient(#000 88%, transparent 100%);
}

.fx-journey.is-moving .fx-truck img { animation: fxBob .32s ease-in-out infinite; }

/* ---------- stops ---------- */

.fx-stop-body,
.fx-stem,
.fx-node { grid-column: var(--c); }

.fx-stop-body {
    justify-self: center;
    min-width: 0;
    max-width: 270px;
    text-align: center;
    opacity: .8;
    transition: opacity .4s ease;
}

.fx-stop.is-active .fx-stop-body { opacity: 1; }

.fx-stop.is-up .fx-stop-body   { grid-row: 1; align-self: end;   padding-bottom: 6px; }
.fx-stop.is-down .fx-stop-body { grid-row: 3; align-self: start; padding-top: 30px; }

.fx-stop-step {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--fr-copper);
}

.fx-stop-body h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fr-text);
}

.fx-stop-body p:not(.fx-stop-step) {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--fr-soft);
}

.fx-stop-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 12px;
    border: 1px solid rgba(212, 154, 99, .45);
    border-radius: 999px;
    color: #E2B487;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    transition: background-color .3s ease, color .3s ease;
}

.fx-stop-chip i { font-size: 12px; }

.fx-stop.is-active .fx-stop-chip { background: var(--fr-copper); border-color: var(--fr-copper); color: #151515; }

.fx-ghost {
    grid-column: var(--c);
    justify-self: center;
    align-self: center;
    font-size: clamp(76px, 9vw, 132px);
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(212, 154, 99, .24);
    user-select: none;
    pointer-events: none;
}

.fx-stop.is-up .fx-ghost   { grid-row: 3; }
.fx-stop.is-down .fx-ghost { grid-row: 1; }

.fx-stem {
    justify-self: center;
    width: 0;
    border-inline-start: 1.5px dashed rgba(212, 154, 99, .55);
}

.fx-stop.is-up .fx-stem   { grid-row: 2; align-self: start; height: calc(var(--fx-road-y) - 24px); }
.fx-stop.is-down .fx-stem { grid-row: 3; align-self: start; height: 30px; }

.fx-node {
    position: relative;
    z-index: 3;
    grid-row: 2;
    align-self: start;
    justify-self: center;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-top: calc(var(--fx-road-y) - 24px);
    padding: 0;
    border: 2px solid var(--fr-copper);
    border-radius: 50%;
    background: var(--fr-node);
    color: var(--fr-copper);
    font-size: 17px;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.fx-node:hover { transform: scale(1.1); }

.fx-node b {
    position: absolute;
    top: -9px;
    inset-inline-end: -9px;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fr-copper);
    color: #151515;
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
}

.fx-stop.is-active .fx-node {
    background: var(--fr-copper);
    color: #151515;
    animation: fxNodePulse 2s ease-out infinite;
}

.fx-stop.is-active .fx-node b {
    background: #151515;
    color: var(--fr-copper);
    box-shadow: 0 0 0 1.5px var(--fr-copper);
}

/* ---------- console bar ---------- */

.fx-console {
    position: relative;
    z-index: 1;
    margin-top: 76px;
    border-top: 1px solid var(--fr-line);
    background: rgba(255, 255, 255, .03);
}

.fx-console-inner {
    width: min(1440px, calc(100% - 140px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: stretch;
}

.fx-metric {
    min-width: 0;
    padding: 28px 24px;
    border-inline-end: 1px solid var(--fr-line);
}

.fx-metric:first-child { padding-inline-start: 0; }

.fx-metric strong {
    display: block;
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--fr-text);
}

.fx-metric > span {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--fr-soft);
}

.fx-console-cta { display: flex; align-items: center; padding-inline-start: 32px; }

.fx-journey-sec .fx-btn-primary {
    background: var(--fr-copper);
    color: #151515;
    box-shadow: 0 10px 26px rgba(212, 154, 99, .25);
}

.fx-journey-sec .fx-btn-primary:hover { background: #E2B487; }

.fx-jr-edge {
    height: 4px;
    opacity: .55;
    background: repeating-linear-gradient(90deg, var(--fr-copper) 0 36px, transparent 36px 72px);
    animation: fxRoad 1.6s linear infinite;
}

/* ---------- keyframes ---------- */

@keyframes fxLane { to { background-position-x: calc(var(--fx-dir) * -44px); } }
@keyframes fxBob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fxNodePulse {
    0%   { box-shadow: 0 0 0 0 rgba(212, 154, 99, .55); }
    100% { box-shadow: 0 0 0 16px rgba(212, 154, 99, 0); }
}


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

@media (max-width: 1199px) {

    .fx-wrap,
    .fx-console-inner { width: calc(100% - 80px); }

    .fx-solutions { padding: 80px 0 88px; }

    /* 2-column bento */
    .fx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fx-sol-a { grid-column: 1 / -1; grid-row: auto; }
    .fx-sol-b { grid-column: 1; }
    .fx-sol-c { grid-column: 2; }
    .fx-sol-d { grid-column: 1 / -1; }

    /* wide cards sit side by side */
    .fx-sol-a {
        flex-direction: row;
        align-items: stretch;
        padding-block: 30px 0;
        padding-inline: 30px 0;
    }

    .fx-sol-a .fx-sol-body {
        flex: 0 0 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 30px;
    }

    .fx-sol-a .fx-sol-stage {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        aspect-ratio: auto;
        min-height: 280px;
    }

    .fx-sol-a .fx-sol-stage img { width: 106%; }

    .fx-sol-c .fx-sol-art { min-height: 170px; }
}

@media (max-width: 1023px) {

    .fx-journey-sec { --fx-truck-w: clamp(110px, 14vw, 150px); }

    .fx-journey-sec { padding-top: 84px; }

    .fx-stop-body h3 { font-size: 19px; }
    .fx-stop-body p:not(.fx-stop-step) { font-size: 14px; }

    .fx-console-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .fx-metric:nth-child(2) { border-inline-end: 0; }
    .fx-metric:first-child { padding-inline-start: 24px; }
    .fx-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--fr-line); }

    .fx-console-cta {
        grid-column: 1 / -1;
        padding: 0 0 28px;
        justify-content: center;
    }

    .fx-metric:nth-child(4) { border-inline-end: 0; }
}

@media (max-width: 767px) {

    .fx-wrap,
    .fx-console-inner { width: calc(100% - 48px); }

    .fx-solutions { padding: 64px 0 72px; }

    .fx-sec-head { margin-bottom: 32px; }
    .fx-sec-text { font-size: 16px; }

    .fx-filters {
        flex-wrap: nowrap;
        width: 100%;
        margin-inline: 0;
        padding-bottom: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .fx-filters::-webkit-scrollbar { display: none; }
    .fx-filter { flex: 0 0 auto; }

    /* single column bento */
    .fx-bento { grid-template-columns: 1fr; }

    .fx-sol-a,
    .fx-sol-b,
    .fx-sol-c,
    .fx-sol-d { grid-column: 1; }

    .fx-sol,
    .fx-sol-a,
    .fx-sol-d {
        flex-direction: column;
        padding: 26px 22px 0;
    }

    .fx-sol-a .fx-sol-body,
    .fx-sol-d .fx-sol-body {
        flex: 0 0 auto;
        display: block;
        padding-bottom: 18px;
    }

    .fx-sol-stage,
    .fx-sol-a .fx-sol-stage,
    .fx-sol-d .fx-sol-stage {
        flex: 0 0 auto;
        margin: auto -22px 0;
        aspect-ratio: 3 / 2;
        min-height: 0;
    }

    .fx-sol-d .fx-sol-stage { aspect-ratio: 16 / 9; }

    .fx-sol-a .fx-sol-stage img,
    .fx-sol-b .fx-sol-stage img,
    .fx-sol-d .fx-sol-stage img { width: 100%; }

    .fx-sol-num { font-size: 48px; inset-inline-end: 18px; }

    .fx-sol-art { margin: 0 -22px; min-height: 140px; }

    .fx-cta-strip { padding: 22px; }
    .fx-cta-strip .fx-btn { width: 100%; }
    .fx-cta-text strong { font-size: 19px; }

    /* ---------- section 03 : vertical stops ---------- */

    .fx-journey-sec {
        --fx-truck-w: clamp(104px, 30vw, 150px);
        --fx-road-y: calc(var(--fx-truck-h) + 10px);
        --fx-lane: calc(var(--fx-road-y) + 36px);
        padding-top: 68px;
    }

    .fx-jr-head { margin-bottom: 40px; }
    .fx-jr-num { top: 40px; }

    .fx-stops { display: block; padding-inline: 0; }

    .fx-lane { display: block; height: var(--fx-lane); margin-bottom: 34px; }

    .fx-truck { transform: translateX(calc(-50% * var(--fx-dir))); }

    .fx-tick {
        position: absolute;
        top: calc(var(--fx-road-y) + 16px);
        inset-inline-start: calc((var(--c) + .5) * 25%);
        transform: translateX(calc(-50% * var(--fx-dir)));
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid rgba(212, 154, 99, .5);
        color: var(--fr-soft);
        font-size: 11px;
        font-style: normal;
        font-weight: 600;
        transition: background-color .3s ease, color .3s ease;
    }

    .fx-tick.is-active { background: var(--fr-copper); border-color: var(--fr-copper); color: #151515; }

    .fx-stop {
        position: relative;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 18px;
        padding-bottom: 30px;
    }

    .fx-stop:last-child { padding-bottom: 0; }

    .fx-stop:not(:last-child)::after {
        content: "";
        position: absolute;
        inset-inline-start: 23px;
        top: 54px;
        bottom: 6px;
        border-inline-start: 2px dashed rgba(212, 154, 99, .45);
    }

    .fx-stem,
    .fx-ghost { display: none; }

    .fx-stop.is-up .fx-node,
    .fx-stop.is-down .fx-node {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
    }

    .fx-stop.is-up .fx-stop-body,
    .fx-stop.is-down .fx-stop-body {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: stretch;
        max-width: none;
        padding: 0;
        text-align: start;
    }

    .fx-stop-body h3 { font-size: 20px; }
    .fx-stop-body p:not(.fx-stop-step) { font-size: 15px; }

    .fx-console { margin-top: 52px; }
    .fx-metric { padding: 22px 16px; }
    .fx-metric:first-child { padding-inline-start: 16px; }
    .fx-console-cta .fx-btn { width: 100%; }
    .fx-console-cta { padding: 0 0 24px; }
}

@media (max-width: 480px) {

    .fx-sec-title { font-size: clamp(28px, 8.4vw, 36px); }

    .fx-sol-title,
    .fx-sol-a .fx-sol-title { font-size: 26px; }

    .fx-metric strong { font-size: 24px; }
}

@media (max-width: 359px) {

    .fx-metric { padding: 18px 10px; }
    .fx-metric:first-child { padding-inline-start: 10px; }
}

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

    .fx-js .fx-reveal { opacity: 1; }
    .fx-js .fx-reveal.is-in { animation: none; }

    .fx-sol-ring,
    .fx-art-bolt,
    .fx-jr-orb,
    .fx-road::after,
    .fx-jr-edge,
    .fx-stop.is-active .fx-node,
    .fx-journey.is-moving .fx-truck img { animation: none; }

    .fx-truck,
    .fx-road-fill,
    .fx-sol,
    .fx-sol-stage img { transition: none; }
}




/* =========================================================
   FLEETAXIS — HOME 1 · SECTIONS 04 & 05
   Appended. Uses existing variables, Inter font, .fx-btn,
   .fx-hero-eyebrow, .fx-sec-title, .fx-sec-text, .fx-wrap
   and .fx-reveal. Nothing above this line is modified.
========================================================= */


/* =========================================================
   SECTION 04 — FLEET COMMAND CENTER
========================================================= */

.fx-cmd {
    --cmd-bg: #151515;
    --cmd-panel: rgba(255, 255, 255, .035);
    --cmd-panel-solid: #1C1C1C;
    --cmd-text: #F8F5F0;
    --cmd-soft: #B9B1A6;
    --cmd-line: rgba(243, 230, 208, .16);
    --cmd-copper: #D49A63;
    --cmd-copper-deep: #B87333;

    --hero-dir: 1;
    --fx-dir: 1;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 104px 0 96px;
    background: var(--cmd-bg);
    color: var(--cmd-text);
}

.fx-cmd-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.fx-cmd-orb {
    position: absolute;
    inset-inline-end: -6%;
    top: 8%;
    width: min(62vw, 820px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 154, 99, .18), rgba(212, 154, 99, .05) 55%, transparent 70%);
    animation: fxBreath 6s ease-in-out infinite;
}

.fx-cmd-grid {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(rgba(243, 230, 208, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243, 230, 208, .06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 0, transparent 72%);
            mask-image: radial-gradient(ellipse at 60% 40%, #000 0, transparent 72%);
}

.fx-cmd-num {
    position: absolute;
    inset-inline-end: 3%;
    top: 26px;
    z-index: 0;
    font-size: clamp(120px, 20vw, 280px);
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(212, 154, 99, .2);
    user-select: none;
    pointer-events: none;
}

/* ---------- layout ---------- */

.fx-cmd-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: stretch;
    gap: 34px;
}

.fx-cmd-rail {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fx-cmd-head { margin-bottom: 26px; }

.fx-cmd .fx-hero-eyebrow {
    background: rgba(243, 230, 208, .06);
    border-color: rgba(243, 230, 208, .2);
    color: #E2B487;
}

.fx-cmd .fx-sec-title { color: var(--cmd-text); }
.fx-cmd .fx-accent { color: var(--cmd-copper); }
.fx-cmd .fx-sec-text { color: var(--cmd-soft); margin-bottom: 0; }

/* ---------- feature rows ---------- */

.fx-cmd-feats {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.fx-cmd-feat {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    min-width: 0;
    padding: 17px 2px;
    border-top: 1px solid var(--cmd-line);
}

.fx-cmd-feat:last-child { border-bottom: 1px solid var(--cmd-line); }

.fx-cmd-ico {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(212, 154, 99, .4);
    background: rgba(212, 154, 99, .1);
    color: var(--cmd-copper);
    font-size: 17px;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.fx-cmd-feat:hover .fx-cmd-ico {
    background: var(--cmd-copper);
    color: #151515;
    transform: translateY(-2px);
}

.fx-cmd-feat-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-cmd-feat-copy strong { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--cmd-text); }
.fx-cmd-feat-copy span { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--cmd-soft); }

/* ---------- rail actions ---------- */

.fx-cmd-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
}

.fx-cmd .fx-btn-primary { background: var(--cmd-copper); color: #151515; box-shadow: 0 10px 26px rgba(212, 154, 99, .25); }
.fx-cmd .fx-btn-primary:hover { background: #E2B487; }
.fx-cmd .fx-btn-primary i { color: #151515; }

.fx-cmd-online {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cmd-soft);
}

.fx-cmd-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cmd-copper);
    box-shadow: 0 0 0 0 rgba(212, 154, 99, .55);
    animation: fxPulse 1.8s ease-out infinite;
}

/* ---------- map panel ---------- */

.fx-cmd-map {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cmd-line);
    border-radius: 22px;
    background: linear-gradient(160deg, #1E1E1E, #131313);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

.fx-cmd-map-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cmd-line);
    background: rgba(255, 255, 255, .025);
}

.fx-cmd-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cmd-text);
}

.fx-cmd-clock {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    color: var(--cmd-copper);
}

/* ---------- stage ---------- */

.fx-cmd-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 320px;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(243, 230, 208, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243, 230, 208, .05) 1px, transparent 1px);
    background-size: 42px 42px;
    background-position: center;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0, transparent 92%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 0, transparent 92%);
}

.fx-cmd-sweep {
    position: absolute;
    inset-inline-end: -20%;
    top: -20%;
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(212, 154, 99, .28), transparent 28%);
    opacity: .5;
    animation: fxCmdSweep 5.5s linear infinite;
    pointer-events: none;
}

.fx-cmd-ring {
    position: absolute;
    top: 50%;
    inset-inline-end: 12%;
    width: 46%;
    aspect-ratio: 1;
    transform: translateY(-50%);
    border: 1.5px dashed rgba(212, 154, 99, .3);
    border-radius: 50%;
    animation: fxSpin 44s linear infinite;
    pointer-events: none;
}

.fx-cmd-ring-2 {
    width: 30%;
    inset-inline-end: 20%;
    border-style: solid;
    border-color: rgba(212, 154, 99, .16);
    animation-duration: 66s;
    animation-direction: reverse;
}

/* ---------- routes ---------- */

.fx-cmd-routes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.fx-cmd-route {
    fill: none;
    stroke: rgba(212, 154, 99, .55);
    stroke-width: .55;
    stroke-dasharray: 2.4 2.4;
    animation: fxCmdDash 1.6s linear infinite;
}

.fx-cmd-route-2 { stroke: rgba(243, 230, 208, .34); animation-duration: 2.1s; }
.fx-cmd-route-3 { stroke: rgba(212, 154, 99, .3); animation-duration: 1.2s; }

/* ---------- convoy vehicles ---------- */

.fx-cmd-convoy {
    position: absolute;
    width: 92px;
    pointer-events: none;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6));
}

.fx-cmd-convoy img {
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(#000 88%, transparent 100%);
            mask-image: linear-gradient(#000 88%, transparent 100%);
}

.fx-cmd-convoy-1 {
    offset-path: path("M -30 470 C 120 330, 220 560, 360 400 S 620 250, 800 330");
    animation: fxCmdDrive 16s linear infinite;
}

.fx-cmd-convoy-2 {
    width: 78px;
    offset-path: path("M -40 200 C 140 280, 260 90, 420 210 S 700 430, 860 340");
    animation: fxCmdDrive 21s linear infinite;
    animation-delay: -6s;
}

.fx-cmd-convoy-3 {
    width: 108px;
    offset-path: path("M -50 330 C 160 420, 280 250, 440 360 S 720 260, 880 390");
    animation: fxCmdDrive 27s linear infinite;
    animation-delay: -12s;
}

/* ---------- pins ---------- */

.fx-cmd-pin {
    position: absolute;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 154, 99, .7);
    background: rgba(21, 21, 21, .82);
    color: var(--cmd-copper);
    font-size: 13px;
    animation: fxFloat 6s ease-in-out infinite;
}

.fx-cmd-pin::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 9px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 9px;
    background: #F3E6D0;
    color: #151515;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .4);
    pointer-events: none;
}

.fx-cmd-pin:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-3px);
}

.fx-cmd-pin-1 { inset-inline-start: 24%; top: 20%; animation-delay: 0s; }
.fx-cmd-pin-2 { inset-inline-start: 58%; top: 33%; animation-delay: .8s; }
.fx-cmd-pin-3 { inset-inline-start: 40%; bottom: 30%; animation-delay: 1.4s; }
.fx-cmd-pin-4 { inset-inline-start: 78%; bottom: 22%; animation-delay: 2s; }

/* ---------- readout ---------- */

.fx-cmd-readout {
    position: absolute;
    inset-inline-start: 18px;
    bottom: 18px;
    width: min(280px, 58%);
    padding: 16px 18px;
    border: 1px solid var(--cmd-line);
    border-radius: 16px;
    background: rgba(20, 20, 20, .86);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.fx-cmd-readout-kicker {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cmd-copper);
}

.fx-cmd-readout-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.fx-cmd-readout-list li {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.fx-cmd-bar-label { font-size: 12px; font-weight: 500; color: var(--cmd-soft); }

.fx-cmd-bar {
    position: relative;
    height: 6px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(243, 230, 208, .12);
}

.fx-cmd-bar i {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--cmd-copper-deep), var(--cmd-copper));
    transform-origin: calc(50% - var(--fx-dir) * 50%) 50%;
    transform: scaleX(0);
    transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s);
}

.fx-cmd-map.is-in .fx-cmd-bar i { transform: scaleX(calc(var(--v) / 100)); }

.fx-cmd-readout-list b {
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cmd-text);
}

/* ---------- telemetry ---------- */

.fx-cmd-telemetry {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--cmd-line);
    background: rgba(255, 255, 255, .025);
}

.fx-cmd-stat {
    min-width: 0;
    padding: 20px 18px;
    border-inline-end: 1px solid var(--cmd-line);
}

.fx-cmd-stat:last-child { border-inline-end: 0; }

.fx-cmd-stat strong {
    display: block;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--cmd-text);
}

.fx-cmd-stat > span {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cmd-soft);
}

/* ---------- ticker ---------- */

.fx-cmd-ticker {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--cmd-line);
    background: rgba(0, 0, 0, .28);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.fx-cmd-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 34px;
    padding: 12px 0;
    white-space: nowrap;
    animation: fxCmdTicker 34s linear infinite;
}

.fx-cmd-ticker:hover .fx-cmd-ticker-track { animation-play-state: paused; }

.fx-cmd-tick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cmd-soft);
}

.fx-cmd-tick i { font-size: 11px; color: var(--cmd-copper); }


/* =========================================================
   SECTION 05 — LEASE YOUR WAY
========================================================= */

.fx-lease {
    --hero-dir: 1;
    --fx-dir: 1;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 96px 0 104px;
    background: var(--fx-champagne-light);
}

.fx-lease-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.fx-lease-orb {
    position: absolute;
    inset-inline-start: 50%;
    top: -10%;
    width: min(70vw, 900px);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 115, 51, .16), rgba(184, 115, 51, .04) 55%, transparent 70%);
    animation: fxBreath 7s ease-in-out infinite;
}

.fx-lease-grid {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(var(--fx-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--fx-border) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0, transparent 70%);
            mask-image: radial-gradient(ellipse at 50% 0%, #000 0, transparent 70%);
}

.fx-lease-num {
    position: absolute;
    inset-inline-start: 4%;
    top: 20px;
    z-index: 0;
    font-size: clamp(120px, 20vw, 280px);
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(184, 115, 51, .26);
    user-select: none;
    pointer-events: none;
}

/* ---------- head ---------- */

.fx-lease-head {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto 54px;
    text-align: center;
}

.fx-lease-head .fx-sec-text { margin-inline: auto; }

/* ---------- carousel ---------- */

.fx-lease-carousel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.fx-lease-stage {
    position: relative;
    width: 100%;
    min-height: 480px;
    perspective: 1600px;
    perspective-origin: 50% 42%;
    transform-style: preserve-3d;
}

.fx-lease-card {
    position: absolute;
    top: 0;
    inset-inline-start: 50%;
    width: min(360px, 82vw);
    display: flex;
    flex-direction: column;
    min-height: 450px;
    padding: 30px;
    border: 1px solid var(--fx-border);
    border-radius: 22px;
    background: var(--fx-white);
    color: var(--fx-black);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .14);
    transform-origin: center center;
    transition:
        transform .7s cubic-bezier(.2, .8, .2, 1),
        opacity .7s ease,
        box-shadow .7s ease,
        background-color .5s ease,
        border-color .5s ease;
    will-change: transform, opacity;
}

/* depth positions (set by JS via data-pos classes) */
.fx-lease-card.pos-center {
    transform: translateX(calc(-50% * var(--fx-dir))) translateZ(0) scale(1);
    z-index: 3;
    opacity: 1;
}

.fx-lease-card.pos-left {
    transform: translateX(calc(-148% * var(--fx-dir))) translateZ(-220px) rotateY(calc(34deg * var(--fx-dir))) scale(.86);
    z-index: 2;
    opacity: .68;
}

.fx-lease-card.pos-right {
    transform: translateX(calc(48% * var(--fx-dir))) translateZ(-220px) rotateY(calc(-34deg * var(--fx-dir))) scale(.86);
    z-index: 2;
    opacity: .68;
}

.fx-lease-card.pos-far-left {
    transform: translateX(calc(-200% * var(--fx-dir))) translateZ(-420px) scale(.72);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.fx-lease-card.pos-far-right {
    transform: translateX(calc(100% * var(--fx-dir))) translateZ(-420px) scale(.72);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* centre card goes copper */
.fx-lease-card.pos-center {
    background: #985A25;
    border-color: #985A25;
    color: #FFFFFF;
}

.fx-lease-ghost {
    position: absolute;
    inset-inline-end: 20px;
    top: 12px;
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(184, 115, 51, .4);
    pointer-events: none;
}

.fx-lease-card.pos-center .fx-lease-ghost { -webkit-text-stroke-color: rgba(255, 255, 255, .45); }

.fx-lease-pop {
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--fx-border);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
}

.fx-lease-card.pos-center .fx-lease-pop {
    background: rgba(0, 0, 0, .22);
    border-color: rgba(255, 255, 255, .4);
    color: #FFFFFF;
}

.fx-lease-badge {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 15px;
    border: 1px solid var(--fx-border);
    background: var(--fx-champagne);
    color: var(--fx-copper);
    font-size: 22px;
    animation: fxFloat 5s ease-in-out infinite;
}

.fx-lease-card.pos-center .fx-lease-badge {
    background: rgba(0, 0, 0, .22);
    border-color: rgba(255, 255, 255, .34);
    color: #FFFFFF;
}

.fx-lease-name {
    margin: 0 0 9px;
    font-size: clamp(25px, 2.4vw, 32px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: inherit;
}

.fx-lease-desc {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--fx-text-soft);
}

.fx-lease-card.pos-center .fx-lease-desc { color: #FFF4E6; }

.fx-lease-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--fx-border);
    color: inherit;
}

.fx-lease-card.pos-center .fx-lease-price { border-color: rgba(255, 255, 255, .28); }

.fx-lease-cur { font-size: 22px; font-weight: 600; color: var(--fx-copper); }
.fx-lease-card.pos-center .fx-lease-cur { color: #FFFFFF; }

.fx-lease-val {
    font-size: clamp(40px, 4vw, 54px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.fx-lease-val.is-roll { animation: fxLeaseRoll .5s cubic-bezier(.2, .8, .2, 1); }

.fx-lease-per { margin-inline-start: 5px; font-size: 13px; font-weight: 500; color: var(--fx-text-soft); }
.fx-lease-card.pos-center .fx-lease-per { color: #FFF4E6; }

.fx-lease-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fx-lease-list li {
    position: relative;
    padding-inline-start: 26px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fx-text-soft);
}

.fx-lease-card.pos-center .fx-lease-list li { color: #FFF4E6; }

.fx-lease-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset-inline-start: 0;
    top: 1px;
    font-size: 12px;
    color: var(--fx-copper);
}

.fx-lease-card.pos-center .fx-lease-list li::before { color: #FFFFFF; }

.fx-lease-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 10px;
    border: 1.5px solid var(--fx-copper);
    background: transparent;
    color: var(--fx-copper-dark);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}

.fx-lease-cta i { font-size: 13px; transition: transform .25s ease; }
.fx-lease-cta:hover { background: var(--fx-copper); border-color: var(--fx-copper); color: #FFFFFF; transform: translateY(-2px); }
.fx-lease-cta:hover i { transform: translateX(calc(var(--hero-dir) * 4px)); }

.fx-lease-card.pos-center .fx-lease-cta {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #151515;
}

.fx-lease-card.pos-center .fx-lease-cta:hover { background: var(--fx-champagne); border-color: var(--fx-champagne); color: #151515; }

/* ---------- carousel nav ---------- */

.fx-lease-nav {
    position: absolute;
    top: 42%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--fx-border);
    background: var(--fx-white);
    color: var(--fx-black);
    font-size: 17px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
    transition: background-color .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}

.fx-lease-nav:hover { background: var(--fx-copper); border-color: var(--fx-copper); color: #FFFFFF; transform: scale(1.08); }

.fx-lease-prev { inset-inline-start: 0; }
.fx-lease-next { inset-inline-end: 0; }

.fx-lease-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
}

.fx-lease-dot {
    width: 34px;
    height: 6px;
    padding: 0;
    border-radius: 6px;
    background: var(--fx-border);
    transition: background-color .3s ease, width .3s ease;
}

.fx-lease-dot.is-on { background: var(--fx-copper); width: 48px; }

/* ---------- quote bar ---------- */

.fx-lease-quote {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .85fr);
    align-items: center;
    gap: 30px 42px;
    margin-top: 30px;
    padding: 32px 36px;
    border: 1px solid var(--fx-border);
    border-radius: 22px;
    background: var(--fx-white);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .1);
}

.fx-lease-quote-col { min-width: 0; }
.fx-lease-term, .fx-lease-total { padding-inline-start: 42px; border-inline-start: 1px solid var(--fx-border); }

.fx-lease-label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--fx-text-soft);
}

.fx-lease-label strong { color: var(--fx-black); font-weight: 600; }
.fx-lease-label strong span { color: var(--fx-copper-dark); }

/* range */
.fx-lease-range {
    -webkit-appearance: none;
            appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 8px;
    background: var(--fx-champagne);
    cursor: pointer;
    outline: none;
}

.fx-lease-range::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fx-copper);
    border: 3px solid var(--fx-white);
    box-shadow: 0 4px 12px rgba(184, 115, 51, .5);
    cursor: pointer;
    transition: transform .2s ease;
}

.fx-lease-range::-webkit-slider-thumb:hover { transform: scale(1.12); }

.fx-lease-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fx-copper);
    border: 3px solid var(--fx-white);
    box-shadow: 0 4px 12px rgba(184, 115, 51, .5);
    cursor: pointer;
}

.fx-lease-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fx-text-soft);
}

/* term toggle */
.fx-lease-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fx-lease-term-btn {
    min-height: 42px;
    padding: 0 16px;
    border: 1.5px solid var(--fx-border);
    border-radius: 999px;
    background: transparent;
    color: var(--fx-black);
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.fx-lease-term-btn:hover { border-color: var(--fx-copper); transform: translateY(-2px); }
.fx-lease-term-btn.is-on { background: #985A25; border-color: #985A25; color: #FFFFFF; }

.fx-lease-save {
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--fx-copper-dark);
}

/* total */
.fx-lease-amount {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0 0 18px;
    color: var(--fx-black);
}

.fx-lease-total-val {
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.fx-lease-total-val.is-roll { animation: fxLeaseRoll .5s cubic-bezier(.2, .8, .2, 1); }

.fx-lease-total .fx-lease-cur { font-size: 20px; color: var(--fx-copper); }
.fx-lease-total .fx-lease-per { font-size: 14px; }
.fx-lease-total .fx-btn { width: 100%; }

/* ---------- included ribbon ---------- */

.fx-lease-ribbon {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    padding: 26px 30px;
    border: 1px solid var(--fx-border);
    border-radius: 22px;
    background: var(--fx-white);
}

.fx-lease-ribbon-title {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fx-copper-dark);
    text-align: center;
}

.fx-lease-ribbon-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.fx-lease-ribbon-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 10px;
    border: 1px solid var(--fx-border);
    border-radius: 14px;
    background: var(--fx-champagne-light);
    color: var(--fx-black);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.fx-lease-ribbon-grid li:hover {
    transform: translateY(-4px);
    border-color: var(--fx-copper);
    box-shadow: 0 16px 32px rgba(184, 115, 51, .16);
}

.fx-lease-ribbon-grid i { font-size: 21px; color: var(--fx-copper); }


/* =========================================================
   SECTIONS 04 & 05 — KEYFRAMES
========================================================= */

@keyframes fxCmdSweep { to { transform: rotate(360deg); } }
@keyframes fxCmdDash  { to { stroke-dashoffset: -4.8; } }
@keyframes fxCmdDrive { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@keyframes fxCmdTicker{ from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fxLeaseRoll {
    0%   { opacity: 0; transform: translateY(60%); }
    100% { opacity: 1; transform: none; }
}


/* =========================================================
   SECTIONS 04 & 05 — RESPONSIVE
========================================================= */

/* --- laptop L and below (<=1439px) --- */
@media (max-width: 1439px) {
    .fx-cmd { padding: 96px 0 88px; }
    .fx-cmd-stage { min-height: 300px; }
}

/* --- laptop (<=1199px) --- */
@media (max-width: 1199px) {
    .fx-cmd-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .fx-cmd-stage { min-height: 360px; }
    .fx-cmd-rail { max-width: none; }

    .fx-cmd-convoy-1 {
        offset-path: path("M -30 300 C 140 200, 260 380, 420 260 S 660 160, 800 240");
    }
    .fx-cmd-convoy-2 {
        offset-path: path("M -40 130 C 140 200, 260 60, 420 150 S 700 320, 860 240");
    }
    .fx-cmd-convoy-3 {
        offset-path: path("M -50 230 C 160 300, 280 170, 440 260 S 720 180, 880 280");
    }

    .fx-lease-stage { min-height: 460px; }
    .fx-lease-quote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .fx-lease-total {
        grid-column: 1 / -1;
        padding-inline-start: 0;
        border-inline-start: 0;
        border-top: 1px solid var(--fx-border);
        padding-top: 26px;
    }
    .fx-lease-total .fx-btn { width: auto; }
}

/* --- tablet (<=1023px) --- */
@media (max-width: 1023px) {
    .fx-cmd { padding: 84px 0 76px; }
    .fx-cmd-num { inset-inline-end: 2%; top: 18px; }
    .fx-cmd-stage { min-height: 330px; }
    .fx-cmd-telemetry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-cmd-stat { border-bottom: 1px solid var(--cmd-line); }
    .fx-cmd-stat:nth-child(2n) { border-inline-end: 0; }
    .fx-cmd-stat:nth-child(n + 3) { border-bottom: 0; }

    .fx-lease { padding: 84px 0 88px; }
    .fx-lease-head { margin-bottom: 44px; }
    .fx-lease-ribbon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- mobile L (<=767px) --- */
@media (max-width: 767px) {
    .fx-cmd { padding: 68px 0 64px; }

    .fx-cmd-feat { padding: 15px 0; }

    .fx-cmd-rail .fx-btn-primary { width: 100%; }

    .fx-cmd-map-actions,
    .fx-cmd-actions { flex-direction: column; align-items: stretch; }
    .fx-cmd-online { justify-content: center; }

    .fx-cmd-stage { min-height: 300px; }

    .fx-cmd-convoy { width: 68px; }
    .fx-cmd-convoy-2 { width: 58px; }
    .fx-cmd-convoy-3 { width: 80px; }

    .fx-cmd-readout { width: calc(100% - 36px); }

    .fx-cmd-pin { width: 26px; height: 26px; font-size: 11px; }
    .fx-cmd-pin-1 { inset-inline-start: 16%; }
    .fx-cmd-pin-2 { inset-inline-start: 62%; }
    .fx-cmd-pin-3 { inset-inline-start: 30%; }
    .fx-cmd-pin-4 { inset-inline-start: 74%; }

    .fx-cmd-tick { font-size: 11.5px; }

    .fx-lease { padding: 68px 0 72px; }
    .fx-lease-head { margin-bottom: 36px; }

    /* carousel: narrower cards, side cards tucked behind */
    .fx-lease-stage { min-height: 430px; perspective: 1100px; }
    .fx-lease-card { width: min(330px, 84vw); min-height: 420px; padding: 26px 22px; }
    .fx-lease-card.pos-left  { transform: translateX(calc(-124% * var(--fx-dir))) translateZ(-260px) rotateY(calc(28deg * var(--fx-dir))) scale(.84); }
    .fx-lease-card.pos-right { transform: translateX(calc(24% * var(--fx-dir))) translateZ(-260px) rotateY(calc(-28deg * var(--fx-dir))) scale(.84); }
    .fx-lease-nav { top: auto; bottom: 6px; }
    .fx-lease-prev { inset-inline-start: 12px; }
    .fx-lease-next { inset-inline-end: 12px; }
    .fx-lease-dots { margin-top: 20px; }

    .fx-lease-quote { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px 22px; }
    .fx-lease-term, .fx-lease-total {
        padding-inline-start: 0;
        border-inline-start: 0;
        border-top: 1px solid var(--fx-border);
        padding-top: 24px;
    }
    .fx-lease-total .fx-btn { width: 100%; }

    .fx-lease-ribbon { padding: 22px 20px; }
    .fx-lease-ribbon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- mobile M (<=480px) --- */
@media (max-width: 480px) {
    .fx-cmd-stage { min-height: 290px; }
    .fx-cmd-map-top { padding: 12px 15px; }
    .fx-cmd-live, .fx-cmd-clock { font-size: 12px; }

    .fx-cmd-readout-list li { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; }
    .fx-cmd-bar-label { font-size: 11px; }

    .fx-cmd-stat { padding: 16px 13px; }
    .fx-cmd-stat strong { font-size: 21px; }
    .fx-cmd-stat > span { font-size: 11.5px; }

    .fx-cmd-convoy { width: 58px; }
    .fx-cmd-convoy-2 { width: 50px; }
    .fx-cmd-convoy-3 { width: 68px; }

    .fx-lease-stage { min-height: 410px; perspective: 900px; }
    .fx-lease-card { width: min(300px, 86vw); min-height: 400px; padding: 24px 20px; }
    .fx-lease-name { font-size: 24px; }
    .fx-lease-val { font-size: 38px; }
    .fx-lease-ghost { font-size: 40px; }

    .fx-lease-ribbon-grid li { padding: 15px 8px; font-size: 12.5px; }
    .fx-lease-ribbon-grid i { font-size: 19px; }
}

/* --- mobile S (<=359px) --- */
@media (max-width: 359px) {
    .fx-cmd { padding: 60px 0 56px; }
    .fx-cmd-num, .fx-lease-num { font-size: 96px; }

    .fx-cmd-stage { min-height: 260px; }
    .fx-cmd-feat-copy strong { font-size: 15px; }
    .fx-cmd-feat-copy span { font-size: 13px; }
    .fx-cmd-ico { flex-basis: 40px; width: 40px; height: 40px; font-size: 15px; }

    .fx-cmd-readout { padding: 13px 14px; }
    .fx-cmd-readout-list li { grid-template-columns: 60px minmax(0, 1fr) auto; }
    .fx-cmd-readout-list b { font-size: 11.5px; }

    .fx-cmd-stat { padding: 14px 10px; }
    .fx-cmd-stat strong { font-size: 19px; }
    .fx-cmd-stat > span { font-size: 11px; }

    .fx-lease-card { width: min(272px, 88vw); padding: 22px 17px; min-height: 388px; }
    .fx-lease-list li { font-size: 13.5px; }
    .fx-lease-ribbon-grid { grid-template-columns: 1fr; }
    .fx-lease-term-btn { padding: 0 12px; font-size: 12.5px; }
}


/* =========================================================
   SECTIONS 04 & 05 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .fx-cmd-orb,
    .fx-cmd-sweep,
    .fx-cmd-ring,
    .fx-cmd-route,
    .fx-cmd-convoy,
    .fx-cmd-pin,
    .fx-cmd-dot,
    .fx-cmd-ticker-track,
    .fx-lease-orb,
    .fx-lease-badge { animation: none !important; }

    .fx-lease-card,
    .fx-lease-nav,
    .fx-lease-cta { transition: none; }

    .fx-cmd-bar i { transform: scaleX(calc(var(--v) / 100)); transition: none; }
}

/* SECTION 04: keep convoy artwork grouped around the route marker and telemetry clear. */
.fx-cmd-stage .fx-cmd-convoy { offset-path: none; animation: fxFloat 5s ease-in-out infinite; }
.fx-cmd-stage .fx-cmd-convoy-1 { inset-inline-start: 18%; top: 42%; }
.fx-cmd-stage .fx-cmd-convoy-2 { inset-inline-start: 39%; top: 30%; animation-delay: -.8s; }
.fx-cmd-stage .fx-cmd-convoy-3 { inset-inline-start: 59%; top: 42%; animation-delay: -1.6s; }
.fx-cmd-readout { z-index: 2; }
@media (max-width: 767px) {
  .fx-cmd-stage { min-height: 330px; }
  .fx-cmd-stage .fx-cmd-convoy { width: 54px; }
  .fx-cmd-stage .fx-cmd-convoy-2 { width: 48px; }
  .fx-cmd-stage .fx-cmd-convoy-3 { width: 62px; }
  .fx-cmd-readout { width: calc(100% - 24px); }
}


/* SECTION 04: force Fleet telemetry above map artwork with readable contrast. */
.fx-cmd-stage { -webkit-mask-image: none; mask-image: none; }
.fx-cmd-stage .fx-cmd-convoy-1 { inset-inline-start: 25%; top: 18%; }
.fx-cmd-stage .fx-cmd-convoy-2 { inset-inline-start: 45%; top: 12%; }
.fx-cmd-stage .fx-cmd-convoy-3 { inset-inline-start: 65%; top: 20%; }
.fx-cmd-stage .fx-cmd-readout { position: absolute; inset-inline-start: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; width: min(420px, calc(100% - 28px)); padding: 16px 18px; border: 2px solid #D49A63; border-radius: 16px; background: #F3E6D0; color: #151515; opacity: 1; visibility: visible; box-shadow: 0 12px 34px rgba(0,0,0,.55); }
.fx-cmd-stage .fx-cmd-readout-kicker { color: #6C3D17; }
.fx-cmd-stage .fx-cmd-bar-label, .fx-cmd-stage .fx-cmd-readout-list b { color: #151515; }
@media (max-width: 767px) {
  .fx-cmd-stage { min-height: 360px; }
  .fx-cmd-stage .fx-cmd-readout { width: calc(100% - 20px); bottom: 10px; padding: 13px 12px; }
  .fx-cmd-stage .fx-cmd-convoy { width: 50px; }
  .fx-cmd-stage .fx-cmd-convoy-2 { width: 44px; }
  .fx-cmd-stage .fx-cmd-convoy-3 { width: 58px; }
}


/* SECTION 04: restore compact dark telemetry card at the map's bottom-left. */
.fx-cmd-stage .fx-cmd-readout { inset-inline-start: 14px; inset-inline-end: auto; left: 14px; bottom: 14px; transform: none; width: min(280px, 58%); padding: 16px 18px; border: 1px solid var(--cmd-line); border-radius: 16px; background: rgba(8, 8, 8, .96); color: #F8F5F0; }
.fx-cmd-stage .fx-cmd-readout-kicker { color: #D49A63; }
.fx-cmd-stage .fx-cmd-bar-label, .fx-cmd-stage .fx-cmd-readout-list b { color: #F8F5F0; }
@media (max-width: 767px) { .fx-cmd-stage .fx-cmd-readout { left: 10px; bottom: 10px; width: min(280px, calc(100% - 20px)); padding: 13px 14px; } }

/* =========================================================
   FLEETAXIS — VEHICLE BRANDS
   Scoped section styles only
========================================================= */

.fx-brands-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(76px, 8vw, 118px)
        0
        clamp(78px, 8vw, 110px);

    background: var(--fx-champagne-light);

    color: var(--fx-text);
}


/* ---------------------------------------------------------
   WRAPPER
--------------------------------------------------------- */

.fx-brands-wrap {
    position: relative;

    width: min(
        1440px,
        calc(100% - 140px)
    );

    margin-inline: auto;
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.fx-brands-head {
    display: flex;

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

    gap: 50px;

    margin-bottom: 48px;
}


.fx-brands-head-copy {
    min-width: 0;
    max-width: 760px;
}


/* ---------------------------------------------------------
   EYEBROW
--------------------------------------------------------- */

.fx-brands-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin: 0;

    padding: 7px 11px;

    background: var(--fx-champagne);

    color: var(--fx-copper-dark);

    font-size: 11px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.fx-brands-eyebrow-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--fx-copper);

    box-shadow:
        0 0 0 5px rgba(184, 115, 51, .10);

    animation:
        fxBrandsPulse 2.4s ease-in-out infinite;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.fx-brands-title {
    margin:
        19px 0
        14px;

    color: var(--fx-black);

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

    font-size: clamp(
        30px,
        4vw,
        54px
    );

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -.025em;
}


.fx-brands-title span {
    color: var(--fx-copper);
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.fx-brands-intro {
    max-width: 620px;

    margin: 0;

    color: var(--fx-text-soft);

    font-size: 17px;

    font-weight: 500;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   VIEW LINK
--------------------------------------------------------- */

.fx-brands-view {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-height: 44px;

    color: var(--fx-text);

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    transition:
        color var(--fx-transition),
        transform var(--fx-transition);
}


.fx-brands-view:hover {
    color: var(--fx-copper);

    transform: translateY(-2px);
}


.fx-brands-view-icon {
    width: 34px;
    height: 34px;

    display: inline-flex;

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

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

    background: transparent;

    color: var(--fx-copper);

    transition:
        background-color var(--fx-transition),
        border-color var(--fx-transition),
        color var(--fx-transition),
        transform var(--fx-transition);
}


.fx-brands-view:hover .fx-brands-view-icon {
    background: var(--fx-copper);

    border-color: var(--fx-copper);

    color: var(--fx-white);

    transform: rotate(4deg);
}


/* ---------------------------------------------------------
   BRAND GRID
--------------------------------------------------------- */

.fx-brands-grid {
    display: grid;

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

    gap: 12px;
}


/* ---------------------------------------------------------
   BRAND CARD
--------------------------------------------------------- */

.fx-brand-card {
    position: relative;

    min-width: 0;

    min-height: 184px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 20px;

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

    background: var(--fx-white);

    color: var(--fx-text);

    overflow: hidden;

    cursor: pointer;

    outline: none;

    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1),
        border-color .35s ease,
        background-color .35s ease,
        box-shadow .35s ease;
}


.fx-brand-card::before {
    content: "";

    position: absolute;

    inset-inline-start: 0;
    inset-block-start: 0;

    width: 3px;
    height: 0;

    background: var(--fx-copper);

    transition:
        height .35s cubic-bezier(.2, .8, .2, 1);
}


.fx-brand-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    inset-inline-end: -72px;
    inset-block-end: -72px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 115, 51, .13),
            transparent 68%
        );

    opacity: 0;

    transform: scale(.7);

    transition:
        opacity .4s ease,
        transform .4s ease;
}


.fx-brand-card:hover,
.fx-brand-card:focus-visible {
    transform: translateY(-5px);

    border-color:
        rgba(184, 115, 51, .42);

    background: var(--fx-off-white);

    box-shadow:
        0 16px 38px rgba(32, 32, 32, .08);
}


.fx-brand-card:hover::before,
.fx-brand-card:focus-visible::before {
    height: 100%;
}


.fx-brand-card:hover::after,
.fx-brand-card:focus-visible::after {
    opacity: 1;

    transform: scale(1);
}


/* ---------------------------------------------------------
   CARD TOP
--------------------------------------------------------- */

.fx-brand-card-top {
    position: relative;
    z-index: 2;

    display: flex;

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

    min-height: 22px;
}


.fx-brand-index {
    color: var(--fx-text-soft);

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .10em;
}


.fx-brand-arrow {
    width: 26px;
    height: 26px;

    display: inline-flex;

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

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

    color: var(--fx-text-soft);

    font-size: 10px;

    opacity: .72;

    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.fx-brand-card:hover .fx-brand-arrow,
.fx-brand-card:focus-visible .fx-brand-arrow {
    background: var(--fx-copper);

    border-color: var(--fx-copper);

    color: var(--fx-white);

    transform: translate(2px, -2px);
}


/* ---------------------------------------------------------
   BRAND MARK
--------------------------------------------------------- */

.fx-brand-mark {
    position: relative;
    z-index: 2;

    width: 66px;
    height: 66px;

    display: flex;

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

    margin-top: 15px;

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

    border-radius: 50%;

    background: var(--fx-champagne);

    color: var(--fx-copper-dark);

    font-size: 16px;

    font-weight: 700;

    letter-spacing: -.04em;

    transition:
        transform .35s cubic-bezier(.2, .8, .2, 1),
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease;
}


.fx-brand-mark::after {
    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid rgba(184, 115, 51, .28);

    border-radius: 50%;
}


.fx-brand-card:hover .fx-brand-mark,
.fx-brand-card:focus-visible .fx-brand-mark {
    transform: scale(1.08) rotate(-4deg);

    background: var(--fx-copper);

    border-color: var(--fx-copper);

    color: var(--fx-white);
}


/* ---------------------------------------------------------
   BRAND INFORMATION
--------------------------------------------------------- */

.fx-brand-info {
    position: relative;
    z-index: 2;

    margin-top: 16px;

    min-width: 0;
}


.fx-brand-info h3 {
    margin: 0;

    color: var(--fx-black);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


.fx-brand-info p {
    margin: 4px 0 0;

    color: var(--fx-text-soft);

    font-size: 12px;

    font-weight: 500;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


.fx-brand-card:hover .fx-brand-info h3,
.fx-brand-card:focus-visible .fx-brand-info h3 {
    color: var(--fx-copper-dark);
}


/* ---------------------------------------------------------
   BOTTOM STATEMENT
--------------------------------------------------------- */

.fx-brands-footer {
    display: grid;

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

    align-items: center;

    gap: 20px;

    margin-top: 26px;
}


.fx-brands-footer-line {
    height: 1px;

    background: var(--fx-border);
}


.fx-brands-footer p {
    margin: 0;

    color: var(--fx-text-soft);

    font-size: 12px;

    font-weight: 500;

    line-height: 1.5;

    text-align: center;

    white-space: nowrap;
}


.fx-brands-footer p strong {
    color: var(--fx-black);

    font-weight: 600;
}


.fx-brands-footer-icon {
    justify-self: end;

    width: 28px;
    height: 28px;

    display: inline-flex;

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

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

    color: var(--fx-copper);

    font-size: 10px;
}


/* ---------------------------------------------------------
   ANIMATION
--------------------------------------------------------- */

@keyframes fxBrandsPulse {

    0%,
    100% {
        opacity: 1;

        transform: scale(1);
    }

    50% {
        opacity: .55;

        transform: scale(.82);
    }
}


/* ---------------------------------------------------------
   SCROLL REVEAL
--------------------------------------------------------- */

.fx-brands-section.fx-brands-ready
.fx-brand-card {
    opacity: 0;

    transform: translateY(24px);
}


.fx-brands-section.fx-brands-ready
.fx-brand-card.fx-brand-visible {
    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2, .8, .2, 1),
        border-color .35s ease,
        background-color .35s ease,
        box-shadow .35s ease;
}


.fx-brands-section.fx-brands-ready
.fx-brand-card:nth-child(1) {
    transition-delay: .03s;
}


.fx-brands-section.fx-brands-ready
.fx-brand-card:nth-child(2) {
    transition-delay: .09s;
}


.fx-brands-section.fx-brands-ready
.fx-brand-card:nth-child(3) {
    transition-delay: .15s;
}


.fx-brands-section.fx-brands-ready
.fx-brand-card:nth-child(4) {
    transition-delay: .21s;
}


.fx-brands-section.fx-brands-ready
.fx-brand-card:nth-child(5) {
    transition-delay: .27s;
}


.fx-brands-section.fx-brands-ready
.fx-brand-card:nth-child(6) {
    transition-delay: .33s;
}


.fx-brands-section.fx-brands-ready
.fx-brand-card:nth-child(7) {
    transition-delay: .39s;
}


.fx-brands-section.fx-brands-ready
.fx-brand-card:nth-child(8) {
    transition-delay: .45s;
}


/* =========================================================
   LAPTOP-L — 1200px to 1439px
========================================================= */

@media (min-width: 1200px) and (max-width: 1439px) {

    .fx-brands-wrap {
        width: calc(100% - 100px);
    }

    .fx-brands-head {
        margin-bottom: 42px;
    }

    .fx-brand-card {
        min-height: 176px;

        padding: 18px;
    }

}


/* =========================================================
   LAPTOP — 1024px to 1199px
========================================================= */

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

    .fx-brands-wrap {
        width: calc(100% - 80px);
    }

    .fx-brands-section {
        padding:
            82px 0
            88px;
    }

    .fx-brands-head {
        gap: 30px;

        margin-bottom: 38px;
    }

    .fx-brands-title {
        font-size: clamp(
            34px,
            4.2vw,
            46px
        );
    }

    .fx-brands-intro {
        max-width: 540px;

        font-size: 16px;
    }

    .fx-brand-card {
        min-height: 170px;

        padding: 17px;
    }

    .fx-brand-mark {
        width: 60px;
        height: 60px;
    }

}


/* =========================================================
   TABLET — 481px to 1023px
========================================================= */

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

    .fx-brands-section {
        padding:
            72px 0
            78px;
    }

    .fx-brands-wrap {
        width: calc(100% - 48px);
    }

    .fx-brands-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 22px;

        margin-bottom: 34px;
    }

    .fx-brands-title {
        margin-top: 17px;

        font-size:
            clamp(32px, 6vw, 44px);
    }

    .fx-brands-intro {
        max-width: 650px;

        font-size: 16px;
    }

    .fx-brands-view {
        align-self: flex-start;
    }

    .fx-brands-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .fx-brand-card {
        min-height: 174px;

        padding: 18px;
    }

    .fx-brand-mark {
        width: 62px;
        height: 62px;
    }

    .fx-brands-footer {
        grid-template-columns:
            1fr
            auto
            1fr;
    }

}


/* =========================================================
   MOBILE-L — 391px to 480px
========================================================= */

@media (min-width: 391px) and (max-width: 480px) {

    .fx-brands-section {
        padding:
            62px 0
            68px;
    }

    .fx-brands-wrap {
        width: calc(100% - 32px);
    }

    .fx-brands-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 28px;
    }

    .fx-brands-title {
        margin:
            16px 0
            13px;

        font-size:
            clamp(30px, 8.3vw, 37px);
    }

    .fx-brands-intro {
        font-size: 15px;

        line-height: 1.65;
    }

    .fx-brands-view {
        min-height: 40px;
    }

    .fx-brands-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .fx-brand-card {
        min-height: 166px;

        padding: 15px;
    }

    .fx-brand-mark {
        width: 55px;
        height: 55px;

        margin-top: 13px;

        font-size: 14px;
    }

    .fx-brand-info {
        margin-top: 13px;
    }

    .fx-brand-info h3 {
        font-size: 14px;
    }

    .fx-brand-info p {
        font-size: 10.5px;
    }

    .fx-brand-arrow {
        width: 23px;
        height: 23px;

        font-size: 9px;
    }

    .fx-brands-footer {
        display: flex;

        justify-content: space-between;

        gap: 12px;

        margin-top: 22px;
    }

    .fx-brands-footer-line {
        flex: 1;
    }

    .fx-brands-footer p {
        white-space: normal;

        text-align: start;

        font-size: 10.5px;
    }

}


/* =========================================================
   MOBILE-M — 361px to 390px
========================================================= */

@media (min-width: 361px) and (max-width: 390px) {

    .fx-brands-section {
        padding:
            58px 0
            64px;
    }

    .fx-brands-wrap {
        width: calc(100% - 28px);
    }

    .fx-brands-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        margin-bottom: 26px;
    }

    .fx-brands-title {
        margin:
            15px 0
            12px;

        font-size: 30px;
    }

    .fx-brands-intro {
        font-size: 14px;

        line-height: 1.65;
    }

    .fx-brands-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .fx-brand-card {
        min-height: 158px;

        padding: 13px;
    }

    .fx-brand-mark {
        width: 50px;
        height: 50px;

        margin-top: 11px;

        font-size: 13px;
    }

    .fx-brand-mark::after {
        inset: 6px;
    }

    .fx-brand-info {
        margin-top: 11px;
    }

    .fx-brand-info h3 {
        font-size: 13px;
    }

    .fx-brand-info p {
        font-size: 9.5px;

        line-height: 1.45;
    }

    .fx-brand-index {
        font-size: 9px;
    }

    .fx-brand-arrow {
        width: 21px;
        height: 21px;

        font-size: 8px;
    }

    .fx-brands-footer {
        display: flex;

        align-items: center;

        gap: 10px;
    }

    .fx-brands-footer-line {
        flex: 1;
    }

    .fx-brands-footer p {
        white-space: normal;

        text-align: start;

        font-size: 10px;
    }

}


/* =========================================================
   MOBILE-S — up to 360px
========================================================= */

@media (max-width: 360px) {

    .fx-brands-section {
        padding:
            52px 0
            58px;
    }

    .fx-brands-wrap {
        width: calc(100% - 24px);
    }

    .fx-brands-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 17px;

        margin-bottom: 23px;
    }

    .fx-brands-eyebrow {
        font-size: 9px;

        padding:
            6px 9px;
    }

    .fx-brands-title {
        margin:
            14px 0
            10px;

        font-size: 28px;
    }

    .fx-brands-intro {
        font-size: 13px;

        line-height: 1.6;
    }

    .fx-brands-view {
        font-size: 11px;

        gap: 8px;
    }

    .fx-brands-view-icon {
        width: 30px;
        height: 30px;
    }

    .fx-brands-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;
    }

    .fx-brand-card {
        min-height: 150px;

        padding: 11px;
    }

    .fx-brand-mark {
        width: 46px;
        height: 46px;

        margin-top: 9px;

        font-size: 12px;
    }

    .fx-brand-mark::after {
        inset: 5px;
    }

    .fx-brand-info {
        margin-top: 9px;
    }

    .fx-brand-info h3 {
        font-size: 12px;

        line-height: 1.3;
    }

    .fx-brand-info p {
        margin-top: 3px;

        font-size: 8.7px;

        line-height: 1.4;
    }

    .fx-brand-index {
        font-size: 8px;
    }

    .fx-brand-arrow {
        width: 20px;
        height: 20px;

        font-size: 7px;
    }

    .fx-brands-footer {
        display: flex;

        align-items: center;

        gap: 8px;

        margin-top: 18px;
    }

    .fx-brands-footer-line {
        flex: 1;
    }

    .fx-brands-footer p {
        max-width: 185px;

        white-space: normal;

        text-align: start;

        font-size: 9px;
    }

    .fx-brands-footer-icon {
        width: 24px;
        height: 24px;

        font-size: 8px;
    }

}


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

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

    .fx-brands-eyebrow-dot {
        animation: none;
    }

    .fx-brands-section.fx-brands-ready
    .fx-brand-card {
        opacity: 1;

        transform: none;
    }

    .fx-brand-card,
    .fx-brand-card::before,
    .fx-brand-card::after,
    .fx-brand-mark,
    .fx-brand-arrow,
    .fx-brands-view,
    .fx-brands-view-icon {
        transition: none;
    }

}

/* =========================================================
   FLEETAXIS — INTERACTIVE FLEET OPERATIONS SLIDER
   SECTION ONLY
   All selectors are uniquely scoped.
========================================================= */

.fx-fleet-slider {
    --fleet-slider-bg: var(--fx-champagne-light);
    --fleet-slider-surface: var(--fx-white);
    --fleet-slider-surface-2: var(--fx-off-white);
    --fleet-slider-text: var(--fx-black);
    --fleet-slider-muted: var(--fx-text-soft);
    --fleet-slider-accent: var(--fx-copper);
    --fleet-slider-accent-dark: var(--fx-copper-dark);
    --fleet-slider-border: var(--fx-border);

    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding:
        clamp(88px, 9vw, 126px)
        0
        clamp(72px, 7vw, 100px);

    background: var(--fleet-slider-bg);
    color: var(--fleet-slider-text);
}


.fx-fleet-slider-bg {
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;
}


.fx-fleet-slider-grid {
    position: absolute;
    inset: 0;

    opacity: .42;

    background-image:
        linear-gradient(
            rgba(32, 32, 32, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(32, 32, 32, .045) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

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


.fx-fleet-slider-glow {
    position: absolute;

    width: 560px;
    height: 560px;

    inset-inline-end: -300px;
    top: 12%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 115, 51, .11),
            transparent 68%
        );

    filter: blur(12px);

    animation:
        fxFleetSliderGlow 8s ease-in-out infinite alternate;
}


@keyframes fxFleetSliderGlow {

    from {
        transform: translate3d(0, -20px, 0);
    }

    to {
        transform: translate3d(-70px, 30px, 0);
    }
}


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

.fx-fleet-slider-inner {
    width: min(
        1440px,
        calc(100% - 140px)
    );

    margin-inline: auto;
}


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

.fx-fleet-slider-head {
    display: flex;

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

    gap: 50px;

    margin-bottom: 46px;
}


.fx-fleet-slider-heading {
    min-width: 0;

    max-width: 820px;
}


.fx-fleet-slider-live-dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-inline-end: 7px;

    border-radius: 50%;

    background: var(--fx-copper);

    box-shadow:
        0 0 0 5px rgba(184, 115, 51, .11);

    animation:
        fxFleetSliderLive 2s ease-in-out infinite;
}


@keyframes fxFleetSliderLive {

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

    50% {
        opacity: .5;
        transform: scale(.78);
    }
}


.fx-fleet-slider-title {
    max-width: 800px;

    margin-top: 18px;
}


.fx-fleet-slider-title span {
    color: var(--fx-copper);
}


.fx-fleet-slider-intro {
    max-width: 690px;

    margin-top: 16px;

    line-height: 1.72;
}


.fx-fleet-slider-counter {
    display: flex;

    align-items: center;

    gap: 12px;

    flex: 0 0 auto;

    padding-bottom: 7px;

    color: var(--fleet-slider-muted);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .08em;
}


.fx-fleet-slider-current {
    color: var(--fleet-slider-accent);

    font-size: 20px;

    line-height: 1;
}


.fx-fleet-slider-counter-line {
    width: 44px;
    height: 1px;

    background: var(--fleet-slider-border);
}


/* =========================================================
   MAIN SLIDER SHELL
========================================================= */

.fx-fleet-slider-shell {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(420px, .82fr);

    min-height: 600px;

    border:
        1px solid var(--fleet-slider-border);

    background: var(--fleet-slider-surface);

    box-shadow:
        0 24px 70px rgba(32, 32, 32, .075);

    outline: none;

    overflow: hidden;
}


.fx-fleet-slider-shell:focus-visible {
    border-color: var(--fleet-slider-accent);

    box-shadow:
        0 0 0 3px rgba(184, 115, 51, .13),
        0 24px 70px rgba(32, 32, 32, .075);
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.fx-fleet-slider-visual {
    position: relative;

    min-width: 0;

    min-height: 600px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--fx-carbon),
            var(--fx-black)
        );

    color: #FFFFFF;
}


.fx-fleet-slider-visual::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(184, 115, 51, .18),
            transparent 34%
        );

    pointer-events: none;
}


.fx-fleet-slider-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    opacity: .25;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .08) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 25%,
            #000 72%,
            transparent
        );

    pointer-events: none;
}


.fx-fleet-slider-visual-top {
    position: absolute;

    z-index: 10;

    inset-inline: 28px;

    top: 25px;

    display: flex;

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

    gap: 20px;
}


.fx-fleet-slider-status,
.fx-fleet-slider-slide-label {
    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding: 0 11px;

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

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

    backdrop-filter: blur(12px);

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.fx-fleet-slider-status i {
    margin-inline-end: 7px;

    color: var(--fx-copper-light);

    font-size: 7px;

    animation:
        fxFleetSliderLive 2s ease-in-out infinite;
}


.fx-fleet-slider-slide-label {
    color: rgba(255, 255, 255, .56);
}


/* =========================================================
   ART
========================================================= */

.fx-fleet-slider-art {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.fx-fleet-slider-art-item {
    position: absolute;

    inset: 0;

    display: flex;

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

    padding:
        90px
        38px
        78px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(80px)
        scale(.965);

    transition:
        opacity .65s ease,
        transform .75s cubic-bezier(.2, .8, .2, 1),
        visibility 0s linear .75s;
}


.fx-fleet-slider-art-item.is-active {
    opacity: 1;

    visibility: visible;

    transform:
        translateX(0)
        scale(1);

    transition:
        opacity .65s ease,
        transform .75s cubic-bezier(.2, .8, .2, 1),
        visibility 0s;
}


.fx-fleet-slider-art-item img {
    position: relative;

    z-index: 2;

    width: min(
        88%,
        690px
    );

    max-height: 420px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 30px 28px rgba(0, 0, 0, .48)
        );
}


.fx-fleet-slider-art-item[data-art="3"] {
    padding: 0;
}


.fx-fleet-slider-art-item[data-art="3"] img {
    width: 100%;
    height: 100%;

    max-height: none;

    object-fit: cover;

    opacity: .78;

    filter:
        saturate(.72)
        contrast(1.08);
}


.fx-fleet-slider-art-item[data-art="3"]::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(21, 21, 21, .82),
            rgba(21, 21, 21, .18) 55%,
            rgba(21, 21, 21, .58)
        );
}


.fx-fleet-slider-art-number {
    position: absolute;

    z-index: 1;

    inset-inline-start: 25px;
    bottom: 45px;

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

    font-size: clamp(
        120px,
        17vw,
        230px
    );

    font-weight: 700;

    line-height: .75;

    letter-spacing: -.08em;

    pointer-events: none;
}


/* =========================================================
   MIXED FLEET VISUAL
========================================================= */

.fx-fleet-slider-mixed {
    align-items: flex-end;

    padding:
        110px
        20px
        58px;
}


.fx-fleet-slider-mixed::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 180px;

    bottom: 66px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(184, 115, 51, .25),
            transparent 68%
        );

    filter: blur(18px);
}


.fx-fleet-slider-mixed img {
    position: absolute;

    width: auto;

    max-width: none;

    object-fit: contain;
}


.fx-fleet-slider-mixed-car {
    z-index: 3;

    width: 48% !important;

    inset-inline-start: 6%;
    bottom: 82px;
}


.fx-fleet-slider-mixed-van {
    z-index: 2;

    width: 50% !important;

    inset-inline-end: 7%;
    bottom: 52px;
}


.fx-fleet-slider-mixed-truck {
    z-index: 4;

    width: 54% !important;

    inset-inline-start: 27%;
    bottom: 4px;
}


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

.fx-fleet-slider-vehicle-caption {
    position: absolute;

    z-index: 12;

    inset-inline: 28px;

    bottom: 24px;

    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .04em;
}


.fx-fleet-slider-caption-line {
    width: 32px;
    height: 1px;

    background:
        rgba(255, 255, 255, .30);
}


/* =========================================================
   RIGHT INFORMATION PANEL
========================================================= */

.fx-fleet-slider-info {
    position: relative;

    min-width: 0;

    min-height: 600px;

    background: var(--fleet-slider-surface);

    overflow: hidden;
}


.fx-fleet-slider-panel {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    padding:
        42px
        42px
        118px;

    opacity: 0;

    visibility: hidden;

    transform: translateX(45px);

    pointer-events: none;

    transition:
        opacity .5s ease,
        transform .65s cubic-bezier(.2, .8, .2, 1),
        visibility 0s linear .65s;
}


.fx-fleet-slider-panel.is-active {
    opacity: 1;

    visibility: visible;

    transform: translateX(0);

    pointer-events: auto;

    transition:
        opacity .5s ease,
        transform .65s cubic-bezier(.2, .8, .2, 1),
        visibility 0s;
}


.fx-fleet-slider-panel-top {
    display: flex;

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

    gap: 20px;

    margin-bottom: 38px;
}


.fx-fleet-slider-panel-number {
    color: var(--fleet-slider-muted);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .09em;
}


.fx-fleet-slider-panel-icon {
    width: 42px;
    height: 42px;

    display: inline-flex;

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

    border:
        1px solid var(--fleet-slider-border);

    color: var(--fleet-slider-accent);

    font-size: 15px;
}


.fx-fleet-slider-panel h3 {
    max-width: 520px;

    margin: 0;

    color: var(--fleet-slider-text);

    font-size: clamp(
        29px,
        3.1vw,
        44px
    );

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -.035em;
}


.fx-fleet-slider-panel h3 span {
    display: block;

    color: var(--fleet-slider-accent);
}


.fx-fleet-slider-panel-text {
    max-width: 530px;

    margin:
        18px 0
        34px;

    color: var(--fleet-slider-muted);

    font-size: 15px;

    font-weight: 500;

    line-height: 1.72;
}


/* =========================================================
   STATS
========================================================= */

.fx-fleet-slider-stats {
    display: grid;

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

    border-top:
        1px solid var(--fleet-slider-border);

    border-bottom:
        1px solid var(--fleet-slider-border);
}


.fx-fleet-slider-stat {
    min-width: 0;

    padding:
        21px 15px
        21px 0;

    border-inline-end:
        1px solid var(--fleet-slider-border);
}


.fx-fleet-slider-stat:not(:first-child) {
    padding-inline-start: 15px;
}


.fx-fleet-slider-stat:last-child {
    border-inline-end: 0;
}


.fx-fleet-slider-stat strong {
    display: block;

    color: var(--fleet-slider-text);

    font-size: clamp(
        22px,
        2.2vw,
        31px
    );

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -.03em;
}


.fx-fleet-slider-stat span {
    display: block;

    margin-top: 6px;

    color: var(--fleet-slider-muted);

    font-size: 10.5px;

    font-weight: 500;

    line-height: 1.4;
}


/* =========================================================
   DETAIL AREA
========================================================= */

.fx-fleet-slider-detail {
    margin-top: auto;

    padding-top: 28px;
}


.fx-fleet-slider-detail > span {
    display: block;

    margin-bottom: 12px;

    color: var(--fleet-slider-muted);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .10em;

    text-transform: uppercase;
}


/* TAGS */

.fx-fleet-slider-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.fx-fleet-slider-tags span {
    padding:
        7px 9px;

    border:
        1px solid var(--fleet-slider-border);

    color: var(--fleet-slider-text);

    font-size: 10.5px;

    font-weight: 600;
}


/* PROCESS */

.fx-fleet-slider-process {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    color: var(--fleet-slider-text);

    font-size: 11px;

    font-weight: 600;
}


.fx-fleet-slider-process i {
    color: var(--fleet-slider-accent);

    font-size: 9px;
}


/* TIMELINE */

.fx-fleet-slider-timeline {
    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--fleet-slider-text);

    font-size: 10px;

    font-weight: 600;
}


.fx-fleet-slider-timeline-track {
    position: relative;

    flex: 1;

    height: 3px;

    background:
        var(--fleet-slider-border);
}


.fx-fleet-slider-timeline-track b {
    position: absolute;

    inset-block: 0;
    inset-inline-start: 0;

    width: 72%;

    background: var(--fleet-slider-accent);

    animation:
        fxFleetSliderTimeline 2.8s ease-in-out infinite alternate;
}


@keyframes fxFleetSliderTimeline {

    from {
        width: 38%;
    }

    to {
        width: 82%;
    }
}


/* ROUTE */

.fx-fleet-slider-route {
    display: flex;

    align-items: center;

    width: 100%;

    height: 28px;
}


.fx-fleet-slider-route i {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border:
        2px solid var(--fleet-slider-accent);

    border-radius: 50%;

    background: var(--fleet-slider-surface);
}


.fx-fleet-slider-route b {
    position: relative;

    flex: 1;

    height: 1px;

    background: var(--fleet-slider-border);

    overflow: hidden;
}


.fx-fleet-slider-route b::after {
    content: "";

    position: absolute;

    inset-block: 0;

    width: 40%;

    background: var(--fleet-slider-accent);

    animation:
        fxFleetSliderRoute 2.2s linear infinite;
}


@keyframes fxFleetSliderRoute {

    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(260%);
    }
}


/* CYCLE */

.fx-fleet-slider-cycle {
    display: grid;

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

    gap: 6px;
}


.fx-fleet-slider-cycle span {
    position: relative;

    padding:
        10px 7px;

    border:
        1px solid var(--fleet-slider-border);

    color: var(--fleet-slider-text);

    font-size: 9.5px;

    font-weight: 600;

    text-align: center;
}


.fx-fleet-slider-cycle span::before {
    content: "";

    display: block;

    width: 5px;
    height: 5px;

    margin:
        0 auto
        6px;

    border-radius: 50%;

    background: var(--fleet-slider-accent);
}


/* =========================================================
   CONTROLS
========================================================= */

.fx-fleet-slider-controls {
    position: absolute;

    z-index: 30;

    inset-inline: 42px;

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 14px;
}


.fx-fleet-slider-arrow {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: inline-flex;

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

    border:
        1px solid var(--fleet-slider-border);

    background: transparent;

    color: var(--fleet-slider-text);

    font-size: 11px;

    cursor: pointer;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}


.fx-fleet-slider-arrow:hover {
    background: var(--fleet-slider-accent);

    border-color: var(--fleet-slider-accent);

    color: #FFFFFF;

    transform: translateY(-2px);
}


.fx-fleet-slider-dots {
    display: flex;

    align-items: center;

    gap: 7px;

    flex: 1;

    min-width: 0;
}


.fx-fleet-slider-dot {
    position: relative;

    height: 38px;

    min-width: 38px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--fleet-slider-muted);

    font-size: 9px;

    font-weight: 600;

    cursor: pointer;

    transition:
        color .3s ease,
        flex .4s ease;
}


.fx-fleet-slider-dot::after {
    content: "";

    position: absolute;

    inset-inline: 5px;

    bottom: 0;

    height: 2px;

    background: var(--fleet-slider-border);

    transition:
        background-color .3s ease,
        transform .35s ease;
}


.fx-fleet-slider-dot.is-active {
    flex: 1;

    color: var(--fleet-slider-accent);
}


.fx-fleet-slider-dot.is-active::after {
    background: var(--fleet-slider-accent);

    transform: scaleY(1.5);
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.fx-fleet-slider-strip {
    display: flex;

    align-items: center;

    gap: 0;

    margin-top: 14px;

    border-top:
        1px solid var(--fleet-slider-border);

    border-bottom:
        1px solid var(--fleet-slider-border);

    overflow: hidden;
}


.fx-fleet-slider-strip span {
    min-height: 45px;

    display: inline-flex;

    align-items: center;

    padding:
        0 18px;

    border-inline-end:
        1px solid var(--fleet-slider-border);

    color: var(--fleet-slider-muted);

    font-size: 10px;

    font-weight: 600;

    white-space: nowrap;
}


.fx-fleet-slider-strip span:first-child {
    padding-inline-start: 0;

    color: var(--fleet-slider-text);
}


.fx-fleet-slider-strip span:first-child i {
    margin-inline-end: 7px;

    color: var(--fleet-slider-accent);

    font-size: 6px;
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (max-width: 1439px) {

    .fx-fleet-slider-inner {
        width: calc(100% - 100px);
    }

    .fx-fleet-slider-shell {
        min-height: 570px;

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(390px, .92fr);
    }

    .fx-fleet-slider-visual,
    .fx-fleet-slider-info {
        min-height: 570px;
    }

    .fx-fleet-slider-panel {
        padding:
            38px
            36px
            112px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .fx-fleet-slider-inner {
        width: calc(100% - 80px);
    }

    .fx-fleet-slider-head {
        gap: 30px;
    }

    .fx-fleet-slider-shell {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, .88fr);

        min-height: 540px;
    }

    .fx-fleet-slider-visual,
    .fx-fleet-slider-info {
        min-height: 540px;
    }

    .fx-fleet-slider-panel {
        padding:
            34px
            32px
            108px;
    }

    .fx-fleet-slider-panel h3 {
        font-size: 36px;
    }

    .fx-fleet-slider-panel-text {
        font-size: 14px;

        margin-bottom: 28px;
    }

    .fx-fleet-slider-stat strong {
        font-size: 25px;
    }

    .fx-fleet-slider-visual-top,
    .fx-fleet-slider-vehicle-caption {
        inset-inline: 24px;
    }

    .fx-fleet-slider-controls {
        inset-inline: 32px;
    }

}


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

@media (max-width: 1023px) {

    .fx-fleet-slider {
        padding:
            82px 0
            82px;
    }

    .fx-fleet-slider-inner {
        width: calc(100% - 48px);
    }

    .fx-fleet-slider-head {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 32px;
    }

    .fx-fleet-slider-counter {
        padding-bottom: 0;
    }

    .fx-fleet-slider-shell {
        display: block;

        min-height: 0;
    }

    .fx-fleet-slider-visual {
        min-height: 430px;
    }

    .fx-fleet-slider-info {
        min-height: 500px;
    }

    .fx-fleet-slider-panel {
        position: absolute;

        min-height: 500px;

        padding:
            32px
            32px
            108px;
    }

    .fx-fleet-slider-panel h3 {
        font-size: 34px;
    }

    .fx-fleet-slider-art-item {
        padding:
            72px
            30px
            60px;
    }

    .fx-fleet-slider-art-item img {
        width: min(82%, 600px);
    }

    .fx-fleet-slider-mixed-car {
        width: 42% !important;
    }

    .fx-fleet-slider-mixed-van {
        width: 46% !important;
    }

    .fx-fleet-slider-mixed-truck {
        width: 50% !important;
    }

}

@media (min-width: 768px) and (max-width: 1023px) {
    .fx-fleet-slider-info:has(.fx-fleet-slider-panel[data-panel="4"].is-active) {
        min-height: 590px;
    }

    .fx-fleet-slider-info:has(.fx-fleet-slider-panel[data-panel="4"].is-active) .fx-fleet-slider-controls {
        bottom: 20px;
    }
}


/* =========================================================
   MOBILE-L / MOBILE-M
========================================================= */

@media (max-width: 767px) {

    .fx-fleet-slider {
        padding:
            68px 0
            68px;
    }

    .fx-fleet-slider-inner {
        width: calc(100% - 32px);
    }

    .fx-fleet-slider-head {
        margin-bottom: 26px;
    }

    .fx-fleet-slider-title {
        font-size: 34px;
    }

    .fx-fleet-slider-intro {
        font-size: 14px;

        line-height: 1.65;
    }

    .fx-fleet-slider-shell {
        display: flex;

        flex-direction: column;

        min-height: 0;
    }

    .fx-fleet-slider-visual {
        min-height: 340px;

        flex: 0 0 340px;
    }

    .fx-fleet-slider-info {
        min-height: 515px;

        flex: 0 0 515px;
    }

    .fx-fleet-slider-panel {
        min-height: 515px;

        padding:
            28px
            24px
            104px;
    }

    .fx-fleet-slider-panel-top {
        margin-bottom: 28px;
    }

    .fx-fleet-slider-panel h3 {
        font-size: 30px;
    }

    .fx-fleet-slider-panel-text {
        margin:
            16px 0
            27px;

        font-size: 14px;
    }

    .fx-fleet-slider-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .fx-fleet-slider-stat {
        padding:
            17px 9px
            17px 0;
    }

    .fx-fleet-slider-stat:not(:first-child) {
        padding-inline-start: 9px;
    }

    .fx-fleet-slider-stat strong {
        font-size: 21px;
    }

    .fx-fleet-slider-stat span {
        font-size: 9.5px;
    }

    .fx-fleet-slider-visual-top {
        top: 18px;

        inset-inline: 18px;
    }

    .fx-fleet-slider-status,
    .fx-fleet-slider-slide-label {
        min-height: 28px;

        padding: 0 8px;

        font-size: 8.5px;
    }

    .fx-fleet-slider-art-item {
        padding:
            60px
            18px
            45px;
    }

    .fx-fleet-slider-art-item img {
        width: min(92%, 500px);

        max-height: 280px;
    }

    .fx-fleet-slider-art-number {
        inset-inline-start: 14px;

        bottom: 35px;

        font-size: 120px;
    }

    .fx-fleet-slider-vehicle-caption {
        inset-inline: 18px;

        bottom: 15px;

        font-size: 9px;
    }

    .fx-fleet-slider-controls {
        inset-inline: 24px;

        bottom: 27px;

        gap: 8px;
    }

    .fx-fleet-slider-arrow {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

    .fx-fleet-slider-dot {
        min-width: 29px;

        height: 34px;
    }

    .fx-fleet-slider-detail {
        padding-top: 23px;
    }

    .fx-fleet-slider-cycle span {
        padding:
            8px 4px;

        font-size: 8.5px;
    }

    .fx-fleet-slider-strip {
        overflow-x: auto;

        scrollbar-width: none;
    }

    .fx-fleet-slider-strip::-webkit-scrollbar {
        display: none;
    }

    .fx-fleet-slider-strip span {
        min-height: 40px;

        padding:
            0 13px;

        font-size: 9px;
    }

    .fx-fleet-slider-strip span:first-child {
        padding-inline-start: 0;
    }

}


/* =========================================================
   MOBILE-M
========================================================= */

@media (max-width: 480px) {

    .fx-fleet-slider {
        padding:
            60px 0
            60px;
    }

    .fx-fleet-slider-inner {
        width: calc(100% - 24px);
    }

    .fx-fleet-slider-title {
        font-size: 30px;
    }

    .fx-fleet-slider-intro {
        font-size: 13px;
    }

    .fx-fleet-slider-counter {
        font-size: 10px;
    }

    .fx-fleet-slider-current {
        font-size: 18px;
    }

    .fx-fleet-slider-counter-line {
        width: 32px;
    }

    .fx-fleet-slider-visual {
        min-height: 300px;

        flex-basis: 300px;
    }

    .fx-fleet-slider-info {
        min-height: 535px;

        flex-basis: 535px;
    }

    .fx-fleet-slider-panel {
        min-height: 535px;

        padding:
            24px
            18px
            98px;
    }

    .fx-fleet-slider-panel-top {
        margin-bottom: 23px;
    }

    .fx-fleet-slider-panel-icon {
        width: 36px;
        height: 36px;

        font-size: 13px;
    }

    .fx-fleet-slider-panel h3 {
        font-size: 27px;
    }

    .fx-fleet-slider-panel-text {
        font-size: 13px;

        line-height: 1.62;
    }

    .fx-fleet-slider-stats {
        gap: 0;
    }

    .fx-fleet-slider-stat {
        padding:
            15px 7px
            15px 0;
    }

    .fx-fleet-slider-stat:not(:first-child) {
        padding-inline-start: 7px;
    }

    .fx-fleet-slider-stat strong {
        font-size: 19px;
    }

    .fx-fleet-slider-stat span {
        font-size: 8.7px;
    }

    .fx-fleet-slider-tags {
        gap: 5px;
    }

    .fx-fleet-slider-tags span {
        padding:
            6px 7px;

        font-size: 9px;
    }

    .fx-fleet-slider-process {
        gap: 6px;

        font-size: 9px;
    }

    .fx-fleet-slider-process i {
        font-size: 7px;
    }

    .fx-fleet-slider-cycle {
        gap: 4px;
    }

    .fx-fleet-slider-cycle span {
        padding:
            7px 3px;

        font-size: 7.5px;
    }

    .fx-fleet-slider-cycle span::before {
        width: 4px;
        height: 4px;

        margin-bottom: 5px;
    }

    .fx-fleet-slider-controls {
        inset-inline: 18px;

        bottom: 24px;
    }

    .fx-fleet-slider-dot {
        min-width: 25px;
    }

    .fx-fleet-slider-art-item {
        padding:
            55px
            10px
            42px;
    }

    .fx-fleet-slider-art-item img {
        width: 96%;
    }

    .fx-fleet-slider-mixed-car {
        width: 48% !important;
        bottom: 72px;
    }

    .fx-fleet-slider-mixed-van {
        width: 52% !important;
        bottom: 43px;
    }

    .fx-fleet-slider-mixed-truck {
        width: 58% !important;
        bottom: 0;
    }

}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 359px) {

    .fx-fleet-slider {
        padding:
            54px 0
            55px;
    }

    .fx-fleet-slider-inner {
        width: calc(100% - 18px);
    }

    .fx-fleet-slider-title {
        font-size: 27px;
    }

    .fx-fleet-slider-intro {
        font-size: 12.5px;
    }

    .fx-fleet-slider-visual {
        min-height: 275px;

        flex-basis: 275px;
    }

    .fx-fleet-slider-info {
        min-height: 550px;

        flex-basis: 550px;
    }

    .fx-fleet-slider-panel {
        min-height: 550px;

        padding:
            21px
            15px
            92px;
    }

    .fx-fleet-slider-panel h3 {
        font-size: 24px;
    }

    .fx-fleet-slider-panel-text {
        font-size: 12px;
    }

    .fx-fleet-slider-stat strong {
        font-size: 17px;
    }

    .fx-fleet-slider-stat span {
        font-size: 8px;
    }

    .fx-fleet-slider-visual-top {
        inset-inline: 12px;
        top: 13px;
    }

    .fx-fleet-slider-status,
    .fx-fleet-slider-slide-label {
        min-height: 25px;

        padding: 0 6px;

        font-size: 7px;
    }

    .fx-fleet-slider-vehicle-caption {
        inset-inline: 12px;

        font-size: 8px;
    }

    .fx-fleet-slider-controls {
        inset-inline: 15px;
        bottom: 19px;
    }

    .fx-fleet-slider-arrow {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }

    .fx-fleet-slider-dot {
        min-width: 22px;

        height: 31px;

        font-size: 8px;
    }

    .fx-fleet-slider-detail > span {
        font-size: 8px;
    }

    .fx-fleet-slider-process {
        font-size: 8px;
    }

    .fx-fleet-slider-timeline {
        font-size: 8px;
    }

    .fx-fleet-slider-strip span {
        font-size: 8px;
    }

}


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

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

    .fx-fleet-slider-live-dot,
    .fx-fleet-slider-status i,
    .fx-fleet-slider-glow,
    .fx-fleet-slider-timeline-track b,
    .fx-fleet-slider-route b::after {
        animation: none !important;
    }

    .fx-fleet-slider-art-item,
    .fx-fleet-slider-panel,
    .fx-fleet-slider-arrow,
    .fx-fleet-slider-dot {
        transition: none !important;
    }

}

/* =========================================================
   FLEETAXIS — FINAL CTA
   Scoped component
   Does NOT modify existing global components
========================================================= */

.fx-final-cta {
    position: relative;
    isolation: isolate;

    width: 100%;

    padding:
        92px
        0
        96px;

    overflow: hidden;

    background:
        var(--fx-champagne-light);

    color: var(--fx-text);
}


/* =========================================================
   OUTER SHELL
========================================================= */

.fx-final-cta-shell {
    position: relative;

    width:
        min(
            1360px,
            calc(100% - 80px)
        );

    margin: 0 auto;

    overflow: hidden;

    border:
        1px solid
        rgba(184, 115, 51, 0.38);

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #202020 0%,
            #151515 52%,
            #202020 100%
        );

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.fx-final-cta-shell:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 38px 90px rgba(0, 0, 0, 0.20);
}


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

.fx-final-cta-bg {
    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}


/* grid */

.fx-final-cta-grid {
    position: absolute;

    inset: 0;

    opacity: 0.15;

    background-image:
        linear-gradient(
            rgba(243, 230, 208, 0.14) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243, 230, 208, 0.14) 1px,
            transparent 1px
        );

    background-size:
        46px 46px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 18%,
            black 82%,
            transparent
        );
}


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

.fx-final-cta-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 115, 51, 0.22),
            rgba(184, 115, 51, 0.07) 42%,
            transparent 72%
        );

    filter: blur(4px);

    animation:
        fxFinalCtaGlow 8s ease-in-out infinite;
}


.fx-final-cta-glow-one {
    top: -230px;
    left: -100px;
}


.fx-final-cta-glow-two {
    right: -130px;
    bottom: -250px;

    animation-delay:
        -4s;
}


@keyframes fxFinalCtaGlow {

    0%,
    100% {
        transform:
            scale(0.95);
        opacity: 0.65;
    }

    50% {
        transform:
            scale(1.12);
        opacity: 1;
    }
}


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

.fx-final-cta-orbit {
    position: absolute;

    width: 460px;
    height: 460px;

    top: 50%;
    left: 50%;

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

    border:
        1px solid
        rgba(212, 154, 99, 0.13);

    border-radius: 50%;

    animation:
        fxFinalCtaOrbit 18s linear infinite;
}


.fx-final-cta-orbit::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    top: 10px;
    left: 50%;

    border-radius: 50%;

    background:
        var(--fx-copper-light);

    box-shadow:
        0 0 16px
        rgba(212, 154, 99, 0.8);
}


.fx-final-cta-orbit-two {
    width: 650px;
    height: 650px;

    border-color:
        rgba(212, 154, 99, 0.07);

    animation:
        fxFinalCtaOrbitReverse
        26s
        linear
        infinite;
}


@keyframes fxFinalCtaOrbit {

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

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


@keyframes fxFinalCtaOrbitReverse {

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

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


/* =========================================================
   MOVING BORDER BEAM
========================================================= */

.fx-final-cta-beam {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    border-radius: inherit;

    overflow: hidden;
}


.fx-final-cta-beam::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 2px;

    top: 0;
    left: -180px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--fx-copper-light),
            transparent
        );

    box-shadow:
        0 0 16px
        rgba(212, 154, 99, 0.8);

    animation:
        fxFinalCtaBeam 6s linear infinite;
}


@keyframes fxFinalCtaBeam {

    0% {
        left: -180px;
        top: 0;
    }

    24% {
        left: calc(100% - 20px);
        top: 0;
    }

    25% {
        left: calc(100% - 2px);
        top: 0;

        transform:
            rotate(90deg);
    }

    49% {
        left: calc(100% - 2px);
        top: calc(100% - 180px);
    }

    50% {
        left: calc(100% - 2px);
        top: calc(100% - 2px);

        transform:
            rotate(180deg);
    }

    74% {
        left: 20px;
        top: calc(100% - 2px);
    }

    75% {
        left: 0;
        top: calc(100% - 2px);

        transform:
            rotate(270deg);
    }

    99% {
        left: 0;
        top: 180px;
    }

    100% {
        left: -180px;
        top: 0;

        transform:
            rotate(360deg);
    }
}


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

.fx-final-cta-content {
    position: relative;

    z-index: 4;

    width:
        min(
            940px,
            calc(100% - 80px)
        );

    margin: 0 auto;

    padding:
        82px
        30px
        72px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;
}


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

.fx-final-cta-eyebrow {
    display: inline-flex;

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

    gap: 10px;

    margin: 0 0 24px;

    color:
        var(--fx-copper-light);

    font-size: 12px;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.fx-final-cta-status {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        var(--fx-copper-light);

    box-shadow:
        0 0 0 5px
        rgba(212, 154, 99, 0.10),
        0 0 14px
        rgba(212, 154, 99, 0.75);

    animation:
        fxFinalCtaPulse 2s ease-in-out infinite;
}


@keyframes fxFinalCtaPulse {

    0%,
    100% {
        opacity: 0.65;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}


.fx-final-cta-line {
    width: 34px;
    height: 1px;

    background:
        rgba(212, 154, 99, 0.55);
}


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

.fx-final-cta-title {
    max-width: 820px;

    margin: 0;

    color:
        #FFFFFF;

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

    font-size:
        clamp(
            32px,
            4vw,
            54px
        );

    font-weight: 600;

    line-height: 1.1;

    letter-spacing:
        -0.025em;
}


.fx-final-cta-title span {
    display: block;

    margin-top: 5px;

    color:
        var(--fx-copper-light);
}


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

.fx-final-cta-description {
    max-width: 700px;

    margin:
        22px
        auto
        0;

    color:
        #D8D0C5;

    font-size:
        17px;

    font-weight:
        500;

    line-height:
        1.7;
}


/* =========================================================
   BUTTONS
========================================================= */

.fx-final-cta-actions {
    display: flex;

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

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;
}


/*
   These deliberately mirror the existing
   FLEETAXIS Login button:
   42px / 13px / 600 / 8px
*/

.fx-final-cta-button {
    min-height: 42px;

    padding:
        0 18px;

    border-radius:
        8px;

    display: inline-flex;

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

    gap: 9px;

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

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.fx-final-cta-button i {
    font-size: 12px;

    transition:
        transform 0.25s ease;
}


/* primary = same visual language as Login */

.fx-final-cta-button-primary {
    background:
        var(--fx-copper);

    color:
        #FFFFFF;

    border:
        1px solid
        var(--fx-copper);

    box-shadow:
        0 8px 24px
        rgba(184, 115, 51, 0.20);
}


.fx-final-cta-button-primary:hover {
    background:
        var(--fx-copper-dark);

    color:
        #FFFFFF;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(184, 115, 51, 0.28);
}


.fx-final-cta-button-primary:hover i {
    transform:
        translateX(4px);
}


/* secondary */

.fx-final-cta-button-secondary {
    background:
        rgba(243, 230, 208, 0.08);

    color:
        #F8F5F0;

    border:
        1px solid
        rgba(243, 230, 208, 0.30);
}


.fx-final-cta-button-secondary:hover {
    background:
        rgba(243, 230, 208, 0.15);

    border-color:
        var(--fx-copper-light);

    color:
        #FFFFFF;

    transform:
        translateY(-2px);
}


.fx-final-cta-button-secondary:hover i {
    transform:
        translateX(4px);
}


/* =========================================================
   METRICS
========================================================= */

.fx-final-cta-metrics {
    width: 100%;

    max-width: 780px;

    margin-top: 46px;

    padding-top: 30px;

    display: flex;

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

    gap: 30px;

    border-top:
        1px solid
        rgba(243, 230, 208, 0.13);
}


.fx-final-cta-metric {
    display: inline-flex;

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

    gap: 11px;

    text-align: left;
}


.fx-final-cta-metric-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: inline-flex;

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

    border:
        1px solid
        rgba(212, 154, 99, 0.32);

    border-radius: 8px;

    background:
        rgba(184, 115, 51, 0.09);

    color:
        var(--fx-copper-light);

    font-size: 14px;
}


.fx-final-cta-metric-copy {
    display: flex;

    flex-direction: column;

    gap: 1px;
}


.fx-final-cta-metric-copy strong {
    color:
        #F8F5F0;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.4;
}


.fx-final-cta-metric-copy small {
    color:
        #AFA79D;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.4;
}


.fx-final-cta-divider {
    width: 1px;
    height: 30px;

    background:
        rgba(243, 230, 208, 0.15);
}


/* =========================================================
   BOTTOM STATUS
========================================================= */

.fx-final-cta-status-row {
    display: inline-flex;

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

    gap: 8px;

    margin-top: 28px;

    color:
        #AFA79D;

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.5;

    text-align: center;
}


.fx-final-cta-live-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background:
        #8BBF8B;

    box-shadow:
        0 0 10px
        rgba(139, 191, 139, 0.6);

    animation:
        fxFinalCtaLive 2s ease-in-out infinite;
}


@keyframes fxFinalCtaLive {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (max-width: 1439px) {

    .fx-final-cta {
        padding:
            84px
            0
            88px;
    }

    .fx-final-cta-shell {
        width:
            min(
                1280px,
                calc(100% - 64px)
            );
    }

    .fx-final-cta-content {
        padding:
            76px
            28px
            66px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .fx-final-cta {
        padding:
            78px
            0
            82px;
    }

    .fx-final-cta-shell {
        width:
            calc(100% - 56px);

        border-radius:
            24px;
    }

    .fx-final-cta-content {
        width:
            min(
                900px,
                calc(100% - 60px)
            );

        padding:
            68px
            24px
            60px;
    }

    .fx-final-cta-title {
        font-size:
            clamp(
                31px,
                4vw,
                48px
            );
    }

}


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

@media (max-width: 1023px) {

    .fx-final-cta {
        padding:
            68px
            0
            72px;
    }

    .fx-final-cta-shell {
        width:
            calc(100% - 40px);

        border-radius:
            22px;
    }

    .fx-final-cta-content {
        width:
            calc(100% - 40px);

        padding:
            62px
            20px
            56px;
    }

    .fx-final-cta-description {
        max-width:
            640px;

        font-size:
            16px;
    }

    .fx-final-cta-metrics {
        gap:
            20px;
    }

    .fx-final-cta-metric {
        gap:
            8px;
    }

}


/* =========================================================
   MOBILE-L
========================================================= */

@media (max-width: 767px) {

    .fx-final-cta {
        padding:
            58px
            0
            64px;
    }

    .fx-final-cta-shell {
        width:
            calc(100% - 28px);

        border-radius:
            20px;
    }

    .fx-final-cta-content {
        width:
            calc(100% - 28px);

        padding:
            52px
            14px
            46px;
    }

    .fx-final-cta-eyebrow {
        margin-bottom:
            20px;

        font-size:
            11px;

        letter-spacing:
            0.11em;

        flex-wrap:
            wrap;
    }

    .fx-final-cta-line {
        display:
            none;
    }

    .fx-final-cta-title {
        font-size:
            clamp(
                29px,
                8vw,
                40px
            );

        line-height:
            1.12;
    }

    .fx-final-cta-description {
        margin-top:
            18px;

        font-size:
            15px;

        line-height:
            1.65;
    }

    .fx-final-cta-actions {
        width:
            100%;

        flex-direction:
            column;

        margin-top:
            28px;

        gap:
            10px;
    }

    .fx-final-cta-button {
        width:
            min(
                100%,
                320px
            );
    }

    .fx-final-cta-metrics {
        flex-direction:
            column;

        gap:
            18px;

        margin-top:
            36px;

        padding-top:
            26px;
    }

    body.fx-home1 .fx-final-cta-metric {
        width:
            100%;

        max-width:
            220px;

        margin-inline:
            auto;

        justify-content:
            flex-start;

        text-align:
            center;
    }

    .fx-final-cta-metric-copy {
        text-align:
            left;
    }

    .fx-final-cta-divider {
        width:
            70px;

        height:
            1px;
    }

    .fx-final-cta-status-row {
        max-width:
            300px;

        margin-top:
            24px;
    }

    .fx-final-cta-orbit {
        width:
            360px;

        height:
            360px;
    }

    .fx-final-cta-orbit-two {
        width:
            520px;

        height:
            520px;
    }

}


/* =========================================================
   MOBILE-M
========================================================= */

@media (max-width: 480px) {

    .fx-final-cta {
        padding:
            50px
            0
            56px;
    }

    .fx-final-cta-shell {
        width:
            calc(100% - 20px);

        border-radius:
            18px;
    }

    .fx-final-cta-content {
        width:
            calc(100% - 20px);

        padding:
            46px
            10px
            40px;
    }

    .fx-final-cta-title {
        font-size:
            28px;
    }

    .fx-final-cta-description {
        font-size:
            14px;
    }

    .fx-final-cta-button {
        min-height:
            44px;

        padding:
            0 16px;

        font-size:
            13px;
    }

    .fx-final-cta-metrics {
        margin-top:
            32px;
    }

}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 359px) {

    .fx-final-cta {
        padding:
            44px
            0
            50px;
    }

    .fx-final-cta-shell {
        width:
            calc(100% - 14px);

        border-radius:
            16px;
    }

    .fx-final-cta-content {
        width:
            calc(100% - 14px);

        padding:
            40px
            8px
            36px;
    }

    .fx-final-cta-eyebrow {
        font-size:
            10px;
    }

    .fx-final-cta-title {
        font-size:
            25px;
    }

    .fx-final-cta-description {
        font-size:
            13.5px;
    }

    .fx-final-cta-button {
        width:
            100%;

        min-height:
            43px;

        font-size:
            12.5px;
    }

    .fx-final-cta-metric-copy strong {
        font-size:
            11.5px;
    }

    .fx-final-cta-metric-copy small {
        font-size:
            10.5px;
    }

}


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

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

    .fx-final-cta-glow,
    .fx-final-cta-orbit,
    .fx-final-cta-status,
    .fx-final-cta-live-dot,
    .fx-final-cta-beam::before {
        animation:
            none !important;
    }

    .fx-final-cta-shell,
    .fx-final-cta-button {
        transition:
            none !important;
    }

}

/* =========================================================
   FLEETAXIS — COMPACT CORPORATE FOOTER
   Fully scoped component
========================================================= */

.fx-footer {
    --fx-footer-bg: #202020;
    --fx-footer-surface: #262626;
    --fx-footer-surface-hover: #2C2C2C;
    --fx-footer-heading: #F8F5F0;
    --fx-footer-text: #C7C0B7;
    --fx-footer-soft: #969087;
    --fx-footer-border: rgba(243, 230, 208, 0.12);
    --fx-footer-copper: #B87333;
    --fx-footer-copper-light: #D49A63;

    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background:
        var(--fx-footer-bg);

    color:
        var(--fx-footer-text);

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

    border-top:
        1px solid
        rgba(184, 115, 51, 0.30);
}


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

.fx-footer-inner {
    width:
        min(
            1360px,
            calc(100% - 80px)
        );

    margin:
        0 auto;
}


/* =========================================================
   TOP ROW
========================================================= */

.fx-footer-top {
    display: grid;

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

    align-items: center;

    gap: 70px;

    min-height: 190px;

    padding:
        38px
        0
        34px;

    border-bottom:
        1px solid
        var(--fx-footer-border);
}


/* =========================================================
   BRAND
========================================================= */

.fx-footer-brand-block {
    min-width: 0;
}


.fx-footer-brand {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--fx-footer-heading);

    text-decoration: none;
}


.fx-footer-brand:hover {
    color:
        var(--fx-footer-heading);
}


.fx-footer-logo {
    width: 36px;
    height: 40px;

    flex:
        0 0 36px;

    display: inline-flex;

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


.fx-footer-logo-svg {
    width: 100%;
    height: 100%;

    display: block;
}


.fx-footer-logo-pin {
    fill:
        var(--fx-footer-copper);
}


.fx-footer-logo-car {
    fill:
        #FFFFFF;
}


.fx-footer-logo-window {
    fill:
        var(--fx-footer-copper);
}


.fx-footer-logo-wheel {
    fill:
        var(--fx-footer-copper);
}


.fx-footer-brand-name {
    color:
        var(--fx-footer-heading);

    font-size:
        18px;

    font-weight:
        700;

    letter-spacing:
        0.055em;

    line-height:
        1;
}


.fx-footer-brand-text {
    max-width:
        400px;

    margin:
        14px
        0
        0;

    color:
        var(--fx-footer-soft);

    font-size:
        12px;

    font-weight:
        500;

    line-height:
        1.65;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.fx-footer-newsletter {
    display: grid;

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

    align-items: center;

    gap: 26px;

    min-width: 0;
}


.fx-footer-newsletter-copy {
    min-width: 0;
}


.fx-footer-eyebrow {
    display: block;

    margin-bottom:
        7px;

    color:
        var(--fx-footer-copper-light);

    font-size:
        10px;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.fx-footer-newsletter-copy h2 {
    margin:
        0;

    color:
        var(--fx-footer-heading);

    font-size:
        20px;

    font-weight:
        600;

    line-height:
        1.25;

    letter-spacing:
        -0.015em;
}


.fx-footer-newsletter-copy p {
    max-width:
        350px;

    margin:
        7px
        0
        0;

    color:
        var(--fx-footer-soft);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.55;
}


/* =========================================================
   NEWSLETTER FORM
========================================================= */

.fx-footer-newsletter-form {
    display: flex;

    align-items: stretch;

    width: 100%;

    min-width: 0;

    padding:
        4px;

    border:
        1px solid
        rgba(243, 230, 208, 0.18);

    border-radius:
        8px;

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

    transition:
        border-color 0.25s ease,
        background-color 0.25s ease;
}


.fx-footer-newsletter-form:focus-within {
    border-color:
        rgba(212, 154, 99, 0.65);

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


.fx-footer-newsletter-form input {
    flex: 1 1 auto;

    min-width: 0;

    height: 40px;

    padding:
        0
        12px;

    border: 0;

    outline: 0;

    background:
        transparent;

    color:
        #F8F5F0;

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

    font-size:
        12px;

    font-weight:
        500;
}


.fx-footer-newsletter-form input::placeholder {
    color:
        #918B84;

    opacity:
        1;
}


.fx-footer-newsletter-form input:focus::placeholder {
    opacity:
        0.65;
}


.fx-footer-newsletter-form button {
    flex:
        0 0 auto;

    min-height:
        40px;

    padding:
        0
        15px;

    display: inline-flex;

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

    gap: 8px;

    border:
        0;

    border-radius:
        6px;

    background:
        var(--fx-footer-copper);

    color:
        #FFFFFF;

    cursor:
        pointer;

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

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


.fx-footer-newsletter-form button:hover {
    background:
        #985A25;

    transform:
        translateY(-1px);
}


.fx-footer-newsletter-form button i {
    font-size:
        10px;

    transition:
        transform 0.25s ease;
}


.fx-footer-newsletter-form button:hover i {
    transform:
        translateX(3px);
}


.fx-footer-form-message {
    grid-column:
        2;

    min-height:
        15px;

    margin:
        -17px
        0
        0;

    color:
        var(--fx-footer-copper-light);

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.4;

    opacity:
        0;

    transition:
        opacity 0.2s ease;
}


.fx-footer-form-message.is-visible {
    opacity:
        1;
}


/* =========================================================
   NAVIGATION AREA
========================================================= */

.fx-footer-navigation {
    display: grid;

    grid-template-columns:
        1.05fr
        0.95fr
        1.2fr
        1.2fr;

    gap:
        52px;

    padding:
        34px
        0
        30px;
}


.fx-footer-column {
    min-width:
        0;
}


.fx-footer-column h3 {
    margin:
        0
        0
        15px;

    color:
        var(--fx-footer-heading);

    font-size:
        11px;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;
}


.fx-footer-column ul {
    display:
        grid;

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

    gap:
        8px
        20px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.fx-footer-column li {
    margin:
        0;

    padding:
        0;
}


.fx-footer-column li a {
    display:
        inline-block;

    color:
        var(--fx-footer-soft);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.45;

    text-decoration:
        none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.fx-footer-column li a:hover {
    color:
        var(--fx-footer-copper-light);

    transform:
        translateX(2px);
}


/* =========================================================
   CONTACT
========================================================= */

.fx-footer-contact-column {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.fx-footer-contact-column h3 {
    margin-bottom:
        4px;
}


.fx-footer-contact-item {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

    color:
        var(--fx-footer-text);

    text-decoration:
        none;
}


.fx-footer-contact-item:hover {
    color:
        var(--fx-footer-heading);
}


.fx-footer-contact-icon {
    width:
        30px;

    height:
        30px;

    flex:
        0 0 30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(212, 154, 99, 0.25);

    border-radius:
        7px;

    background:
        rgba(184, 115, 51, 0.07);

    color:
        var(--fx-footer-copper-light);

    font-size:
        11px;
}


.fx-footer-contact-item > span:last-child {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;
}


.fx-footer-contact-item small {
    color:
        var(--fx-footer-soft);

    font-size:
        9px;

    font-weight:
        500;

    line-height:
        1.3;
}


.fx-footer-contact-item strong {
    color:
        var(--fx-footer-text);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   OPERATIONS
========================================================= */

.fx-footer-operations p {
    max-width:
        270px;

    margin:
        0
        0
        15px;

    color:
        var(--fx-footer-soft);

    font-size:
        11px;

    font-weight:
        500;

    line-height:
        1.6;
}


.fx-footer-operation-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        16px;

    color:
        var(--fx-footer-text);

    font-size:
        10px;

    font-weight:
        500;
}


.fx-footer-status-dot {
    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        #8BBF8B;

    box-shadow:
        0 0 9px
        rgba(139, 191, 139, 0.65);

    animation:
        fxFooterStatusPulse
        2s
        ease-in-out
        infinite;
}


@keyframes fxFooterStatusPulse {

    0%,
    100% {
        opacity:
            0.55;
    }

    50% {
        opacity:
            1;
    }
}


.fx-footer-dashboard-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--fx-footer-copper-light);

    font-size:
        11px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color 0.2s ease;
}


.fx-footer-dashboard-link:hover {
    color:
        #F0C49D;
}


.fx-footer-dashboard-link i {
    font-size:
        9px;

    transition:
        transform 0.2s ease;
}


.fx-footer-dashboard-link:hover i {
    transform:
        translateX(3px);
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.fx-footer-bottom {
    min-height:
        58px;

    display:
        grid;

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

    align-items:
        center;

    gap:
        20px;

    padding:
        14px
        0;

    border-top:
        1px solid
        var(--fx-footer-border);
}


.fx-footer-copyright {
    margin:
        0;

    color:
        var(--fx-footer-soft);

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.4;
}


.fx-footer-legal {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        #77716A;

    font-size:
        10px;

    font-weight:
        500;

    white-space:
        nowrap;
}


.fx-footer-legal a {
    color:
        var(--fx-footer-soft);

    text-decoration:
        none;

    transition:
        color 0.2s ease;
}


.fx-footer-legal a:hover {
    color:
        var(--fx-footer-copper-light);
}


.fx-footer-socials {
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    gap:
        7px;
}


.fx-footer-socials a {
    width:
        28px;

    height:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(243, 230, 208, 0.14);

    border-radius:
        7px;

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

    color:
        var(--fx-footer-soft);

    font-size:
        10px;

    text-decoration:
        none;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}


.fx-footer-socials a:hover {
    border-color:
        rgba(212, 154, 99, 0.55);

    background:
        rgba(184, 115, 51, 0.10);

    color:
        var(--fx-footer-copper-light);

    transform:
        translateY(-2px);
}


/* =========================================================
   SCREEN READER ONLY
========================================================= */

.fx-footer-sr-only {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (max-width: 1439px) {

    .fx-footer-inner {
        width:
            min(
                1280px,
                calc(100% - 64px)
            );
    }

    .fx-footer-top {
        gap:
            50px;
    }

    .fx-footer-navigation {
        gap:
            38px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .fx-footer-inner {
        width:
            calc(100% - 56px);
    }

    .fx-footer-top {
        grid-template-columns:
            0.8fr
            1.2fr;

        gap:
            36px;

        min-height:
            180px;
    }

    .fx-footer-newsletter {
        grid-template-columns:
            1fr;

        gap:
            13px;
    }

    .fx-footer-form-message {
        grid-column:
            1;

        margin-top:
            -8px;
    }

    .fx-footer-navigation {
        grid-template-columns:
            1fr
            1fr
            1.25fr
            1.25fr;

        gap:
            28px;
    }

}


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

@media (max-width: 1023px) {

    .fx-footer-inner {
        width:
            calc(100% - 40px);
    }

    .fx-footer-top {
        grid-template-columns:
            1fr;

        gap:
            28px;

        padding:
            34px
            0
            30px;
    }

    .fx-footer-brand-text {
        max-width:
            560px;
    }

    .fx-footer-newsletter {
        grid-template-columns:
            minmax(230px, 0.85fr)
            minmax(300px, 1.15fr);

        gap:
            24px;
    }

    .fx-footer-form-message {
        grid-column:
            2;
    }

    .fx-footer-navigation {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            30px
            45px;

        padding:
            30px
            0
            28px;
    }

    .fx-footer-bottom {
        grid-template-columns:
            1fr
            auto;

        row-gap:
            12px;
    }

    .fx-footer-legal {
        justify-content:
            flex-end;
    }

    .fx-footer-socials {
        grid-column:
            1 / -1;

        justify-content:
            flex-start;
    }

}


/* =========================================================
   MOBILE-L
========================================================= */

@media (max-width: 767px) {

    .fx-footer-inner {
        width:
            calc(100% - 28px);
    }

    .fx-footer-top {
        gap:
            26px;

        padding:
            30px
            0
            27px;
    }

    .fx-footer-newsletter {
        grid-template-columns:
            1fr;

        gap:
            15px;
    }

    .fx-footer-form-message {
        grid-column:
            1;

        margin-top:
            -8px;
    }

    .fx-footer-navigation {
        grid-template-columns:
            1fr
            1fr;

        gap:
            28px
            20px;
    }

    .fx-footer-column ul {
        grid-template-columns:
            1fr;
    }

    .fx-footer-contact-column,
    .fx-footer-operations {
        grid-column:
            1 / -1;
    }

    .fx-footer-bottom {
        grid-template-columns:
            1fr;

        justify-items:
            center;

        text-align:
            center;

        gap:
            12px;

        padding:
            17px
            0
            20px;
    }

    .fx-footer-legal {
        justify-content:
            center;

        flex-wrap:
            wrap;

        white-space:
            normal;
    }

    .fx-footer-socials {
        grid-column:
            auto;

        justify-content:
            center;
    }

    .fx-footer-copyright {
        text-align:
            center;
    }

}


/* =========================================================
   MOBILE-M
========================================================= */

@media (max-width: 480px) {

    .fx-footer-inner {
        width:
            calc(100% - 20px);
    }

    .fx-footer-top {
        padding:
            27px
            0
            25px;
    }

    .fx-footer-brand-name {
        font-size:
            17px;
    }

    .fx-footer-brand-text {
        font-size:
            11px;

        line-height:
            1.6;
    }

    .fx-footer-newsletter-copy h2 {
        font-size:
            19px;
    }

    .fx-footer-newsletter-copy p {
        font-size:
            10.5px;
    }

    .fx-footer-newsletter-form {
        display:
            flex;

        flex-direction:
            column;

        gap:
            4px;

        padding:
            4px;
    }

    .fx-footer-newsletter-form input {
        width:
            100%;

        min-height:
            40px;
    }

    .fx-footer-newsletter-form button {
        width:
            100%;

        min-height:
            39px;
    }

    .fx-footer-navigation {
        grid-template-columns:
            1fr;

        gap:
            26px;

        padding:
            27px
            0
            25px;
    }

    .fx-footer-column ul {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap:
            20px;

        row-gap:
            8px;
    }

    .fx-footer-contact-column,
    .fx-footer-operations {
        grid-column:
            auto;
    }

}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 359px) {

    .fx-footer-inner {
        width:
            calc(100% - 14px);
    }

    .fx-footer-brand-name {
        font-size:
            16px;
    }

    .fx-footer-newsletter-copy h2 {
        font-size:
            18px;
    }

    .fx-footer-column h3 {
        font-size:
            10px;
    }

    .fx-footer-column li a,
    .fx-footer-contact-item strong,
    .fx-footer-dashboard-link {
        font-size:
            10.5px;
    }

    .fx-footer-column ul {
        column-gap:
            14px;
    }

}


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

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

    .fx-footer-status-dot {
        animation:
            none;
    }

    .fx-footer *,
    .fx-footer *::before,
    .fx-footer *::after {
        scroll-behavior:
            auto !important;
    }

}


/* =========================================================
   FLEETAXIS USER DASHBOARD — PAGE-SCOPED ADDITION ONLY
   Uses existing Inter typography, palette and Login styles.
========================================================= */

body.fx-user-dashboard-body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.fx-ud-topbar {
    position: relative;
    z-index: 1000;
    height: var(--fx-navbar-height, 78px);
    width: 100%;
    background: var(--fx-champagne-light);
    border-bottom: 1px solid var(--fx-border);
    box-shadow: 0 4px 18px rgba(0,0,0,.035);
}

.fx-ud-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1600px, calc(100% - 64px));
    height: 100%;
    margin: 0 auto;
    direction: ltr;
}

.fx-ud-topbar-spacer {
    flex: 1;
    min-width: 0;
}

.fx-ud-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    direction: ltr;
}

.fx-ud-top-actions .fx-icon-button,
.fx-ud-top-actions .fx-rtl-button {
    border: 0;
    cursor: pointer;
}

.fx-ud-top-actions .fx-login-button {
    gap: 8px;
    margin-inline-start: 4px;
    min-height: 42px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.fx-ud-hamburger {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fx-text);
    font-size: 17px;
    cursor: pointer;
    transition: background-color var(--fx-transition), color var(--fx-transition);
}

.fx-ud-hamburger:hover {
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

.fx-ud-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(8,8,8,.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.fx-ud-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.fx-ud-backdrop[hidden] {
    display: none !important;
}

/* Desktop: sidebar and content have separate scroll areas. */
.fx-ud-app {
    height: calc(100dvh - var(--fx-navbar-height, 78px));
    min-height: 0;
    display: grid;
    grid-template-columns: 270px minmax(0,1fr);
    grid-template-areas: "sidebar main";
    background: var(--fx-champagne-light);
    overflow: hidden;
}

.fx-ud-sidebar {
    grid-area: sidebar;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,154,99,.48) transparent;
    background: var(--fx-carbon);
    color: #F3EDE5;
}

.fx-ud-sidebar::-webkit-scrollbar,
.fx-ud-main::-webkit-scrollbar,
.fx-ud-nav::-webkit-scrollbar {
    width: 5px;
}

.fx-ud-sidebar::-webkit-scrollbar-thumb,
.fx-ud-main::-webkit-scrollbar-thumb,
.fx-ud-nav::-webkit-scrollbar-thumb {
    background: rgba(212,154,99,.42);
    border-radius: 10px;
}

.fx-ud-sidebar-top {
    padding: 22px 17px 15px;
    flex: 0 0 auto;
}

.fx-ud-brand-row {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px 20px;
}

.fx-ud-brand {
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    color: #F8F5F0;
}

.fx-ud-brand .fx-brand-logo {
    width: 38px;
    height: 42px;
    flex: 0 0 38px;
}

.fx-ud-brand .fx-brand-name {
    color: #F8F5F0;
    font-size: 17px;
    letter-spacing: .055em;
}

.fx-ud-brand .fx-logo-pin {
    fill: var(--fx-copper);
}

.fx-ud-brand .fx-logo-car {
    fill: #FFFFFF;
}

.fx-ud-brand .fx-logo-window,
.fx-ud-brand .fx-logo-wheel {
    fill: var(--fx-copper-light);
}

.fx-ud-menu-close {
    display: none;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(243,230,208,.15);
    border-radius: 8px;
    background: transparent;
    color: #F3EDE5;
    font-size: 20px;
    cursor: pointer;
}

.fx-ud-menu-close:hover {
    background: rgba(243,230,208,.08);
    color: var(--fx-copper-light);
}

.fx-ud-profile {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 14px 10px;
    border: 1px solid rgba(243,230,208,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
}

.fx-ud-profile-image {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: block;
    object-fit: cover;
    border: 1px solid rgba(212,154,99,.45);
    border-radius: 50%;
    background: var(--fx-champagne);
}

.fx-ud-profile-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fx-ud-profile-copy strong {
    color: #F8F5F0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.fx-ud-profile-copy span {
    color: #B8B0A6;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
}

.fx-ud-profile-status {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #8BBF8B;
    box-shadow: 0 0 0 4px rgba(139,191,139,.1);
}

.fx-ud-nav-label {
    padding: 8px 18px 9px;
    color: #9F9890;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
}

.fx-ud-nav-label-secondary {
    padding-top: 3px;
}

.fx-ud-nav {
    min-height: 0;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px 17px;
    overscroll-behavior: contain;
}

.fx-ud-nav-item {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #D3CCC3;
    text-align: left;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.fx-ud-nav-item > i:first-child {
    width: 17px;
    flex: 0 0 17px;
    color: #D49A63;
    font-size: 13px;
    text-align: center;
}

.fx-ud-nav-item > span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.fx-ud-nav-item:hover {
    background: rgba(243,230,208,.08);
    color: #FFFFFF;
}

/* Same copper active-state highlight as the existing navigation. */
.fx-ud-nav-item.active {
    background: var(--fx-copper);
    color: #FFFFFF;
    box-shadow: inset 3px 0 0 rgba(255,255,255,.24);
}

.fx-ud-nav-item.active > i:first-child {
    color: #FFFFFF;
}

.fx-ud-nav-item.active:hover {
    background: var(--fx-copper-dark);
    color: #FFFFFF;
}

.fx-ud-nav-arrow {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,.58);
    font-size: 9px;
}

.fx-ud-nav-item.active .fx-ud-nav-arrow {
    color: #FFFFFF;
}

.fx-ud-nav-badge {
    min-width: 20px;
    min-height: 20px;
    padding: 2px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212,154,99,.28);
    border-radius: 6px;
    background: rgba(184,115,51,.15);
    color: #E2B487;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.fx-ud-nav-item.active .fx-ud-nav-badge {
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.15);
    color: #FFFFFF;
}

.fx-ud-nav-divider {
    height: 1px;
    flex: 0 0 1px;
    margin: 11px 8px 7px;
    background: rgba(243,230,208,.12);
}

.fx-ud-sidebar-bottom {
    flex: 0 0 auto;
    padding: 13px 12px 15px;
    border-top: 1px solid rgba(243,230,208,.1);
}

.fx-ud-sidebar-help {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 7px 13px;
}

.fx-ud-help-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212,154,99,.26);
    border-radius: 8px;
    color: #D49A63;
    font-size: 13px;
}

.fx-ud-sidebar-help > span:nth-child(2) {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.fx-ud-sidebar-help strong {
    color: #F3EDE5;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.fx-ud-sidebar-help small {
    color: #9F9890;
    font-size: 9px;
    line-height: 1.45;
}

.fx-ud-sidebar-help > a {
    color: #AFA79D;
    font-size: 10px;
    padding: 5px;
}

.fx-ud-sidebar-help > a:hover {
    color: #E2B487;
}

.fx-ud-mobile-logout {
    display: none;
}

/* Main workspace scrolls independently from the sidebar. */
.fx-ud-main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(184,115,51,.45) transparent;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
}

.fx-ud-main-inner {
    width: min(1500px,100%);
    min-height: 100%;
    margin: 0 auto;
    padding: 29px clamp(20px,3vw,44px) 18px;
}

.fx-ud-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 23px;
}

.fx-ud-page-head-copy {
    min-width: 0;
}

.fx-ud-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .11em;
    line-height: 1.5;
}

.fx-ud-breadcrumb i {
    color: var(--fx-copper);
    font-size: 8px;
}

.fx-ud-breadcrumb span:last-child {
    color: var(--fx-copper-dark);
}

.fx-ud-page-head h1 {
    margin: 0;
    color: var(--fx-black);
    font-size: clamp(23px,2.1vw,30px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.25;
}

.fx-ud-page-head p {
    max-width: 690px;
    margin: 7px 0 0;
    color: var(--fx-text-soft);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.fx-ud-page-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
}

.fx-ud-demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(184,115,51,.24);
    border-radius: 7px;
    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.fx-ud-demo-chip i {
    font-size: 11px;
}

.fx-ud-action-button {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-size: 14px;
    cursor: pointer;
}

.fx-ud-action-button:hover {
    border-color: var(--fx-copper);
    color: var(--fx-copper-dark);
}

.fx-ud-action-count {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-size: 8px;
    font-weight: 700;
}

.fx-ud-kicker {
    margin: 0 0 5px;
    color: var(--fx-copper-dark);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
}

.fx-ud-welcome-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 21px;
}

.fx-ud-welcome-row h2 {
    margin: 0;
    color: var(--fx-black);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
}

.fx-ud-welcome-row > div > p:last-child {
    margin: 6px 0 0;
    color: var(--fx-text-soft);
    font-size: 12px;
    line-height: 1.6;
}

.fx-ud-wave {
    display: inline-block;
    color: var(--fx-copper);
    animation: fxUdWave 2s ease-in-out infinite;
}

@keyframes fxUdWave {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.fx-ud-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-white);
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 600;
}

.fx-ud-date-chip i {
    color: var(--fx-copper);
}

/* Statistics */
.fx-ud-stat-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 13px;
    margin-bottom: 18px;
}

.fx-ud-stat-grid-three {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.fx-ud-stat-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 19px 18px;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    background: var(--fx-white);
    box-shadow: 0 5px 18px rgba(32,32,32,.035);
}

.fx-ud-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--fx-text-soft);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ud-stat-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184,115,51,.22);
    border-radius: 8px;
    background: rgba(184,115,51,.08);
    color: var(--fx-copper-dark);
    font-size: 14px;
}

.fx-ud-stat-number {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    color: var(--fx-black);
    font-size: clamp(25px,2.2vw,32px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.fx-ud-stat-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 11px;
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.45;
}

.fx-ud-stat-decoration {
    position: absolute;
    right: 8px;
    bottom: -17px;
    color: rgba(184,115,51,.055);
    font-size: 90px;
    font-weight: 700;
    pointer-events: none;
}

.fx-ud-stat-dot,
.fx-ud-status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--fx-copper);
}

.fx-ud-dot-green { background: #719D75; }
.fx-ud-dot-amber { background: #C99548; }
.fx-ud-dot-copper { background: var(--fx-copper); }

.fx-ud-mini-bar,
.fx-ud-progress,
.fx-ud-term-progress {
    height: 4px;
    margin-top: 11px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(32,32,32,.08);
}

.fx-ud-mini-bar span,
.fx-ud-progress span,
.fx-ud-term-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--fx-copper);
}

.fx-ud-inline-link,
.fx-ud-text-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    margin-top: 10px;
    border: 0;
    background: transparent;
    color: var(--fx-copper-dark);
    font-family: "Inter",sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
    text-align: start;
    cursor: pointer;
}

.fx-ud-inline-link:hover,
.fx-ud-text-button:hover {
    color: var(--fx-copper);
}

.fx-ud-inline-link i,
.fx-ud-text-button i {
    font-size: 9px;
}

/* Shared panel layout */
.fx-ud-content-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
}

.fx-ud-overview-grid {
    grid-template-columns: minmax(0,1.18fr) minmax(290px,.82fr);
}

.fx-ud-panel {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    background: var(--fx-white);
    box-shadow: 0 5px 18px rgba(32,32,32,.035);
}

.fx-ud-wide-panel {
    grid-column: 1 / -1;
}

.fx-ud-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
}

.fx-ud-panel-head h3,
.fx-ud-small-panel-title {
    margin: 0;
    color: var(--fx-black);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ud-panel-head p {
    margin: 4px 0 0;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}

.fx-ud-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid rgba(184,115,51,.22);
    border-radius: 7px;
    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 700;
}

/* Donut / vehicle status */
.fx-ud-status-overview {
    display: grid;
    grid-template-columns: 155px minmax(0,1fr);
    align-items: center;
    gap: 22px;
}

.fx-ud-donut {
    width: 150px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(
        #B87333 0 79%,
        #8A9B85 79% 92%,
        #69737A 92% 98%,
        #CBAD83 98% 100%
    );
}

.fx-ud-donut > div {
    width: 108px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fx-border);
    border-radius: 50%;
    background: var(--fx-white);
}

.fx-ud-donut strong {
    color: var(--fx-black);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.fx-ud-donut span {
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ud-status-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fx-ud-status-legend > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.4;
}

.fx-ud-status-legend > div > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.fx-ud-status-legend strong {
    color: var(--fx-text);
    font-size: 11px;
}

.fx-ud-legend-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
}

.fx-ud-legend-active { background: var(--fx-copper); }
.fx-ud-legend-available { background: #8A9B85; }
.fx-ud-legend-service { background: #69737A; }
.fx-ud-legend-attention { background: #CBAD83; }

.fx-ud-category-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.fx-ud-category-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ud-category-strip strong {
    color: var(--fx-text);
    font-weight: 700;
}

/* Attention and activity rows */
.fx-ud-attention-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid var(--fx-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.fx-ud-attention-item:last-child {
    border-bottom: 0;
}

.fx-ud-attention-icon,
.fx-ud-activity-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184,115,51,.18);
    border-radius: 8px;
    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);
    font-size: 12px;
}

.fx-ud-attention-amber { color: #A97931; }
.fx-ud-attention-copper { color: var(--fx-copper-dark); }
.fx-ud-attention-gray { color: #69737A; }

.fx-ud-attention-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fx-ud-attention-copy strong,
.fx-ud-activity-item strong {
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ud-attention-copy small,
.fx-ud-activity-item small {
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.fx-ud-attention-item > i:last-child {
    color: var(--fx-copper);
    font-size: 10px;
}

.fx-ud-activity-list {
    display: flex;
    flex-direction: column;
}

.fx-ud-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ud-activity-item:last-child {
    border-bottom: 0;
}

.fx-ud-activity-item > span:nth-child(2) {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fx-ud-activity-item time {
    color: var(--fx-text-soft);
    font-size: 9px;
    white-space: nowrap;
}

/* Tables */
.fx-ud-table-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(184,115,51,.4) transparent;
}

.fx-ud-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 10px;
}

.fx-ud-table th {
    padding: 12px 10px;
    border-bottom: 1px solid var(--fx-border);
    background: rgba(184,115,51,.035);
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

.fx-ud-table td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--fx-border);
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.5;
    vertical-align: middle;
}

.fx-ud-table tr:last-child td {
    border-bottom: 0;
}

.fx-ud-table tbody tr:hover {
    background: rgba(184,115,51,.035);
}

.fx-ud-table td strong {
    display: block;
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
}

.fx-ud-table td small {
    display: block;
    margin-top: 3px;
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ud-table-note,
.fx-ud-inline-notice {
    margin: 13px 0 0;
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.fx-ud-priority,
.fx-ud-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.priority-high {
    background: rgba(216,121,104,.13);
    color: #A5493C;
    border-color: rgba(216,121,104,.22);
}

.priority-medium {
    background: rgba(215,175,117,.15);
    color: #8D692E;
    border-color: rgba(215,175,117,.25);
}

.priority-low {
    background: rgba(166,177,188,.15);
    color: #536271;
    border-color: rgba(166,177,188,.25);
}

.status-active {
    background: rgba(121,177,126,.13);
    border-color: rgba(121,177,126,.24);
    color: #3C7444;
}

.status-available {
    background: rgba(129,166,199,.15);
    border-color: rgba(129,166,199,.25);
    color: #3D668D;
}

.status-due {
    background: rgba(212,154,99,.14);
    border-color: rgba(184,115,51,.24);
    color: #985A25;
}

.status-planned {
    background: rgba(166,177,188,.12);
    border-color: rgba(166,177,188,.22);
    color: #596571;
}

/* Lease preview */
.fx-ud-lease-row {
    padding: 13px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ud-lease-row:last-child {
    border-bottom: 0;
}

.fx-ud-lease-row-top,
.fx-ud-lease-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fx-ud-lease-row-top strong {
    display: block;
    color: var(--fx-text);
    font-size: 10px;
}

.fx-ud-lease-row-top small {
    display: block;
    margin-top: 3px;
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ud-days {
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.fx-ud-lease-meta {
    margin-top: 90px;
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.fx-ud-lease-meta span:last-child {
    text-align: end;
}

.fx-ud-term-progress {
    margin: 0 0 5px;
}

/* Internal page sections */
.fx-ud-view[hidden] {
    display: none !important;
}

.fx-ud-view.is-visible {
    animation: fxUdViewIn .25s ease both;
}

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

.fx-ud-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 19px;
}

.fx-ud-toolbar h2 {
    margin: 0;
    color: var(--fx-black);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}

.fx-ud-toolbar p {
    margin: 5px 0 0;
    color: var(--fx-text-soft);
    font-size: 12px;
    line-height: 1.55;
}

.fx-ud-primary-button,
.fx-ud-secondary-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: "Inter",sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.fx-ud-primary-button {
    background: var(--fx-copper);
    color: #FFFFFF;
}

.fx-ud-primary-button:hover {
    background: var(--fx-copper-dark);
    color: #FFFFFF;
}

.fx-ud-secondary-button {
    border-color: var(--fx-border);
    background: var(--fx-off-white);
    color: var(--fx-text);
}

.fx-ud-secondary-button:hover {
    border-color: var(--fx-copper);
    color: var(--fx-copper-dark);
}

.fx-ud-icon-close {
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    background: transparent;
    color: var(--fx-text);
    cursor: pointer;
}

.fx-ud-form-panel {
    margin-bottom: 17px;
}

.fx-ud-form-panel[hidden] {
    display: none !important;
}

.fx-ud-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 15px;
    margin-top: 17px;
}

.fx-ud-form-grid label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--fx-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.fx-ud-field-full {
    grid-column: 1 / -1;
}

.fx-ud-form-grid input,
.fx-ud-form-grid select,
.fx-ud-form-grid textarea {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 10px 11px;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    outline: none;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-family: "Inter",sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

.fx-ud-form-grid textarea {
    min-height: 92px;
    resize: vertical;
}

.fx-ud-form-grid input:focus,
.fx-ud-form-grid select:focus,
.fx-ud-form-grid textarea:focus {
    border-color: var(--fx-copper);
    box-shadow: 0 0 0 3px rgba(184,115,51,.1);
}

.fx-ud-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.fx-ud-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.fx-ud-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 11px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-off-white);
    color: var(--fx-text-soft);
}

.fx-ud-search input {
    width: 100%;
    min-width: 0;
    height: 39px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--fx-text);
    font: 500 11px "Inter",sans-serif;
}

.fx-ud-search input::placeholder {
    color: var(--fx-text-soft);
    opacity: .9;
}

.fx-ud-search:focus-within {
    border-color: var(--fx-copper);
}

.fx-ud-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 600;
}

.fx-ud-filter-label select {
    max-width: 190px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    outline: none;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-family: "Inter",sans-serif;
    font-size: 10px;
}

/* Vehicle table */
.fx-ud-vehicle-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 150px;
}

.fx-ud-vehicle-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184,115,51,.2);
    border-radius: 7px;
    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);
}

.fx-ud-vehicle-cell > span:last-child {
    min-width: 0;
}

/* Tracking / demo map */
.fx-ud-tracking-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 270px;
    align-items: start;
    gap: 16px;
}

.fx-ud-map-panel {
    min-width: 0;
}

.fx-ud-map-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fx-copper-dark);
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.fx-ud-map {
    position: relative;
    min-height: 410px;
    overflow: hidden;
    border: 1px solid var(--fx-border);
    border-radius: 9px;
    background:
        radial-gradient(circle at 24% 65%, rgba(184,115,51,.1), transparent 28%),
        linear-gradient(135deg,#ECE5D9,#E3E2DA);
}

.fx-ud-map-roads,
.fx-ud-map-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fx-ud-map-roads path {
    fill: none;
    stroke: rgba(84,91,91,.22);
    stroke-width: 7;
}

.fx-ud-map-roads path:nth-child(n+5) {
    stroke-width: 3;
    stroke: rgba(84,91,91,.16);
}

.fx-ud-map-route path {
    fill: none;
    stroke: rgba(184,115,51,.38);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 8 10;
}

.fx-ud-map-route .fx-ud-route-highlight {
    stroke: var(--fx-copper);
    stroke-width: 3;
    stroke-dasharray: 14 12;
    animation: fxUdRouteMove 7s linear infinite;
}

@keyframes fxUdRouteMove {
    to { stroke-dashoffset: -208; }
}

.fx-ud-map-label {
    position: absolute;
    padding: 5px 7px;
    border: 1px solid rgba(84,91,91,.17);
    border-radius: 4px;
    background: rgba(250,245,237,.83);
    color: #515957;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
}

.map-label-one { left: 9%; top: 16%; }
.map-label-two { right: 11%; top: 48%; }
.map-label-three { left: 43%; bottom: 14%; }

.fx-ud-map-pin {
    position: absolute;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--fx-copper);
    color: #FFFFFF;
    box-shadow: 0 5px 15px rgba(0,0,0,.18);
    font-size: 11px;
    animation: fxUdPinFloat 3s ease-in-out infinite;
}

.map-pin-one { left: 27%; top: 65%; }
.map-pin-two { left: 56%; top: 38%; animation-delay: -.7s; }
.map-pin-three { right: 17%; top: 22%; animation-delay: -1.4s; }
.map-pin-four { right: 27%; bottom: 18%; animation-delay: -2s; }

@keyframes fxUdPinFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.fx-ud-map-legend {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding: 11px;
    border: 1px solid rgba(84,91,91,.16);
    border-radius: 7px;
    background: rgba(250,245,237,.92);
    color: #515957;
}

.fx-ud-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 600;
}

.fx-ud-tracking-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fx-ud-small-panel-title {
    margin-bottom: 13px;
}

.fx-ud-route-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fx-border);
    color: var(--fx-text-soft);
    font-size: 10px;
}

.fx-ud-route-stat:last-child {
    border-bottom: 0;
}

.fx-ud-route-stat strong {
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 600;
}

.fx-ud-location-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ud-location-item:last-child {
    border-bottom: 0;
}

.fx-ud-location-indicator {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--fx-copper);
}

.fx-ud-location-item > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fx-ud-location-item strong {
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ud-location-item small {
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

/* Documents */
.fx-ud-document-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px;
}

.fx-ud-document-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    align-items: start;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    background: var(--fx-white);
}

.fx-ud-document-icon,
.fx-ud-support-big-icon,
.fx-ud-security-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184,115,51,.22);
    border-radius: 9px;
    background: rgba(184,115,51,.08);
    color: var(--fx-copper-dark);
    font-size: 15px;
}

.fx-ud-document-card h3 {
    margin: 0;
    color: var(--fx-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ud-document-card p {
    margin: 5px 0 0;
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.fx-ud-document-meta {
    grid-column: 2;
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ud-document-card .fx-ud-text-button {
    grid-column: 2;
    justify-self: start;
    margin-top: 0;
}

.fx-ud-inline-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(184,115,51,.2);
    border-radius: 8px;
    background: rgba(184,115,51,.045);
}

.fx-ud-inline-notice i {
    margin-top: 2px;
    color: var(--fx-copper);
}

/* Reports / chart */
.fx-ud-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ud-chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--fx-copper);
}

.fx-ud-bar-chart {
    position: relative;
    height: 270px;
    padding: 10px 15px 27px 39px;
}

.fx-ud-chart-gridline {
    position: absolute;
    left: 39px;
    right: 0;
    border-top: 1px dashed var(--fx-border);
}

.fx-ud-chart-gridline span {
    position: absolute;
    right: calc(100% + 8px);
    top: -7px;
    color: var(--fx-text-soft);
    font-size: 8px;
}

.fx-ud-chart-gridline.line-25 { bottom: 25%; }
.fx-ud-chart-gridline.line-50 { bottom: 50%; }
.fx-ud-chart-gridline.line-75 { bottom: 75%; }
.fx-ud-chart-gridline.line-100 { top: 10px; }

.fx-ud-chart-bars {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 11px;
    height: 100%;
}

.fx-ud-chart-bars > div {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.fx-ud-chart-value {
    color: var(--fx-text-soft);
    font-size: 8px;
    font-weight: 600;
}

.fx-ud-chart-bars i {
    width: min(65%,34px);
    min-height: 4px;
    display: block;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to top,var(--fx-copper-dark),var(--fx-copper-light));
    animation: fxUdBarGrow .65s ease both;
    transform-origin: bottom;
}

@keyframes fxUdBarGrow {
    from { transform: scaleY(.1); }
    to { transform: scaleY(1); }
}

.fx-ud-chart-bars small {
    color: var(--fx-text-soft);
    font-size: 8px;
}

.fx-ud-mix-row {
    display: grid;
    grid-template-columns: 94px minmax(50px,1fr) 34px;
    align-items: center;
    gap: 8px;
    margin: 18px 0;
    color: var(--fx-text-soft);
    font-size: 10px;
}

.fx-ud-mix-row > div {
    height: 6px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(32,32,32,.08);
}

.fx-ud-mix-row > div > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--fx-copper);
}

.fx-ud-mix-row strong {
    color: var(--fx-text);
    font-size: 10px;
    text-align: right;
}

/* Notifications */
.fx-ud-notification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ud-notification:last-child {
    border-bottom: 0;
}

.fx-ud-notification.is-unread {
    background: rgba(184,115,51,.025);
}

.fx-ud-notification-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(184,115,51,.08);
    color: var(--fx-copper-dark);
}

.fx-ud-notification-copy {
    flex: 1;
    min-width: 0;
}

.fx-ud-notification-copy > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fx-ud-notification-copy strong {
    color: var(--fx-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.fx-ud-notification-time {
    color: var(--fx-text-soft);
    font-size: 9px;
    white-space: nowrap;
}

.fx-ud-notification-copy p {
    margin: 7px 0 0;
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.fx-ud-unread-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--fx-copper);
}

/* Support and tickets */
.fx-ud-support-grid,
.fx-ud-settings-grid {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(250px,.7fr);
    align-items: start;
    gap: 16px;
    margin-bottom: 16px;
}

.fx-ud-support-contact h3,
.fx-ud-security-panel h3 {
    margin: 15px 0 7px;
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 600;
}

.fx-ud-support-contact > p,
.fx-ud-security-panel > p {
    margin: 0 0 15px;
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.65;
}

.fx-ud-support-contact > a {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--fx-text);
    font-size: 11px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.fx-ud-support-contact > a i {
    color: var(--fx-copper);
}

.fx-ud-support-availability {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: var(--fx-text-soft);
    font-size: 10px;
}

.fx-ud-support-availability i {
    color: #719D75;
    font-size: 7px;
}

.fx-ud-support-contact > small {
    display: block;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--fx-border);
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.55;
}

.fx-ud-support-tickets {
    margin-bottom: 18px;
}

.fx-ud-ticket {
    display: grid;
    grid-template-columns: 70px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ud-ticket:last-child {
    border-bottom: 0;
}

.fx-ud-ticket-id {
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 700;
}

.fx-ud-ticket > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fx-ud-ticket strong {
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
}

.fx-ud-ticket small {
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

/* Account settings */
.fx-ud-profile-edit {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 15px 0 20px;
}

.fx-ud-profile-edit img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border: 1px solid rgba(184,115,51,.3);
    border-radius: 50%;
}

.fx-ud-profile-edit span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fx-ud-profile-edit strong {
    color: var(--fx-text);
    font-size: 12px;
}

.fx-ud-profile-edit small {
    color: var(--fx-text-soft);
    font-size: 10px;
}

.fx-ud-settings-notifications {
    margin-top: 23px;
}

.fx-ud-settings-notifications h4 {
    margin-bottom: 9px;
    color: var(--fx-text);
    font-size: 12px;
    font-weight: 600;
}

.fx-ud-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ud-switch-row > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fx-ud-switch-row strong {
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
}

.fx-ud-switch-row small {
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.fx-ud-switch-row input {
    accent-color: var(--fx-copper);
}

.fx-ud-security-icon {
    width: 44px;
    height: 44px;
    font-size: 16px;
}

.fx-ud-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--fx-border);
    color: var(--fx-text);
    font-size: 10px;
}

.fx-ud-security-row:last-child {
    border-bottom: 0;
}

/* Footer and toast */
.fx-ud-main-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 0 5px;
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.5;
}

.fx-ud-toast {
    position: fixed;
    z-index: 2000;
    right: 24px;
    bottom: 24px;
    max-width: min(420px,calc(100vw - 32px));
    padding: 13px 17px;
    border: 1px solid rgba(184,115,51,.32);
    border-radius: 8px;
    background: var(--fx-carbon);
    color: #FFFFFF;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
    font-size: 12px;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.fx-ud-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Focus visibility */
.fx-ud-nav-item:focus-visible,
.fx-ud-primary-button:focus-visible,
.fx-ud-secondary-button:focus-visible,
.fx-ud-text-button:focus-visible,
.fx-ud-action-button:focus-visible,
.fx-ud-hamburger:focus-visible,
.fx-ud-menu-close:focus-visible {
    outline: 2px solid var(--fx-copper-light);
    outline-offset: 2px;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
========================================================= */

/* Laptop-L */
@media (max-width: 1439px) {
    .fx-ud-main-inner {
        padding-inline: 28px;
    }

    .fx-ud-overview-grid {
        grid-template-columns: minmax(0,1fr) minmax(270px,.8fr);
    }
}

/* Laptop */
@media (max-width: 1199px) and (min-width: 1024px) {
    .fx-ud-app {
        grid-template-columns: 230px minmax(0,1fr);
    }

    .fx-ud-sidebar-top {
        padding-inline: 12px;
    }

    .fx-ud-nav {
        padding-inline: 9px;
    }

    .fx-ud-nav-item {
        gap: 8px;
        padding-inline: 9px;
        font-size: 11px;
    }

    .fx-ud-main-inner {
        padding: 24px 20px 16px;
    }

    .fx-ud-stat-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .fx-ud-content-grid,
    .fx-ud-overview-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ud-status-overview {
        grid-template-columns: 155px minmax(0,1fr);
    }

    .fx-ud-donut {
        width: 140px;
    }

    .fx-ud-donut > div {
        width: 102px;
    }

    .fx-ud-tracking-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ud-tracking-side {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* Tablet and mobile: fixed, full-viewport navigation drawer */
@media (max-width: 1023px) {
    body.fx-user-dashboard-body {
        height: 100vh;
        height: 100dvh;
    }

    .fx-ud-topbar {
        height: 68px;
    }

    .fx-ud-topbar-inner {
        width: calc(100% - 32px);
    }

    .fx-ud-top-actions {
        gap: 4px;
    }

    .fx-ud-top-actions .fx-icon-button,
    .fx-ud-top-actions .fx-rtl-button {
        min-width: 38px;
        height: 38px;
        padding-inline: 8px;
    }

    .fx-ud-top-actions .fx-ud-logout-desktop {
        display: none;
    }

    .fx-ud-hamburger {
        display: inline-flex;
    }

    .fx-ud-app {
        display: block;
        height: calc(100dvh - 68px);
        overflow: hidden;
    }

    .fx-ud-sidebar {
        position: fixed;
        inset: 0;
        z-index: 1200;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
        box-shadow: 15px 0 40px rgba(0,0,0,.3);
    }

    .fx-ud-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s;
    }

    .fx-ud-sidebar-top {
        padding: 20px 22px 15px;
    }

    .fx-ud-brand-row {
        padding-bottom: 18px;
    }

    .fx-ud-brand .fx-brand-name {
        font-size: 18px;
    }

    .fx-ud-menu-close {
        display: inline-flex;
    }

    .fx-ud-profile-image {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .fx-ud-nav {
        padding: 0 18px 18px;
    }

    .fx-ud-nav-label {
        padding-inline: 24px;
    }

    .fx-ud-nav-item {
        min-height: 45px;
        padding-inline: 14px;
        font-size: 13px;
    }

    .fx-ud-nav-item > i:first-child {
        width: 20px;
        flex-basis: 20px;
        font-size: 14px;
    }

    .fx-ud-sidebar-bottom {
        padding: 13px 18px calc(16px + env(safe-area-inset-bottom));
    }

    .fx-ud-mobile-logout {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin-top: 6px;
        padding: 0 16px;
        border-radius: 8px;
        background: var(--fx-copper);
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 600;
    }

    .fx-ud-mobile-logout:hover {
        background: var(--fx-copper-dark);
        color: #FFFFFF;
    }

    .fx-ud-main {
        height: 100%;
        overscroll-behavior: contain;
    }

    .fx-ud-main-inner {
        padding: 25px 24px 16px;
    }

    .fx-ud-stat-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .fx-ud-content-grid,
    .fx-ud-overview-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ud-status-overview {
        grid-template-columns: 170px minmax(0,1fr);
    }

    .fx-ud-donut {
        width: 150px;
    }

    .fx-ud-donut > div {
        width: 108px;
    }

    .fx-ud-tracking-grid,
    .fx-ud-support-grid,
    .fx-ud-settings-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ud-tracking-side {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .fx-ud-document-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .fx-ud-main-footer {
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .fx-ud-topbar-inner {
        width: calc(100% - 24px);
    }

    .fx-ud-main-inner {
        padding: 21px 16px 14px;
    }

    .fx-ud-page-head {
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .fx-ud-page-head h1 {
        font-size: 24px;
    }

    .fx-ud-page-head p {
        font-size: 11px;
    }

    .fx-ud-demo-chip {
        padding: 7px 8px;
        font-size: 9px;
    }

    .fx-ud-action-button {
        width: 35px;
        height: 35px;
    }

    .fx-ud-welcome-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .fx-ud-welcome-row h2 {
        font-size: 19px;
    }

    .fx-ud-date-chip {
        align-self: flex-start;
    }

    .fx-ud-stat-grid {
        gap: 10px;
    }

    .fx-ud-stat-card {
        padding: 14px;
    }

    .fx-ud-stat-top {
        align-items: flex-start;
        font-size: 10px;
    }

    .fx-ud-stat-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .fx-ud-stat-number {
        font-size: 27px;
    }

    .fx-ud-panel {
        padding: 15px;
    }

    .fx-ud-status-overview {
        grid-template-columns: 130px minmax(0,1fr);
        gap: 14px;
    }

    .fx-ud-donut {
        width: 122px;
    }

    .fx-ud-donut > div {
        width: 88px;
    }

    .fx-ud-donut strong {
        font-size: 21px;
    }

    .fx-ud-status-legend {
        gap: 10px;
    }

    .fx-ud-status-legend > div {
        font-size: 9px;
    }

    .fx-ud-category-strip {
        gap: 6px;
    }

    .fx-ud-category-strip span {
        padding: 5px 6px;
        font-size: 8px;
    }

    .fx-ud-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .fx-ud-toolbar .fx-ud-primary-button,
    .fx-ud-toolbar .fx-ud-secondary-button {
        align-self: flex-start;
    }

    .fx-ud-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .fx-ud-search {
        width: 100%;
    }

    .fx-ud-filter-label {
        justify-content: space-between;
    }

    .fx-ud-filter-label select {
        flex: 0 1 65%;
        max-width: none;
    }

    .fx-ud-tracking-side {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ud-map {
        min-height: 350px;
    }

    .fx-ud-document-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ud-main-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .fx-ud-notification-copy > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .fx-ud-ticket {
        grid-template-columns: 65px minmax(0,1fr);
    }

    .fx-ud-ticket > .fx-ud-status-pill {
        grid-column: 2;
        justify-self: start;
    }

    .fx-ud-form-grid {
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .fx-ud-topbar {
        height: 64px;
    }

    .fx-ud-app {
        height: calc(100dvh - 64px);
    }

    .fx-ud-topbar-inner {
        width: calc(100% - 16px);
    }

    .fx-ud-top-actions .fx-icon-button,
    .fx-ud-top-actions .fx-rtl-button,
    .fx-ud-hamburger {
        width: 35px;
        min-width: 35px;
        height: 35px;
        padding: 0;
        font-size: 12px;
    }

    .fx-ud-hamburger {
        font-size: 16px;
    }

    .fx-ud-main-inner {
        padding: 18px 11px 12px;
    }

    .fx-ud-page-head {
        gap: 8px;
    }

    .fx-ud-page-head h1 {
        font-size: 21px;
        overflow-wrap: anywhere;
    }

    .fx-ud-page-head p {
        font-size: 10px;
    }

    .fx-ud-breadcrumb {
        font-size: 8px;
        gap: 6px;
    }

    .fx-ud-demo-chip {
        gap: 5px;
        min-height: 29px;
        padding: 6px 7px;
        font-size: 8px;
    }

    .fx-ud-demo-chip i {
        font-size: 10px;
    }

    .fx-ud-action-button {
        width: 31px;
        height: 31px;
        font-size: 12px;
    }

    .fx-ud-stat-grid {
        gap: 8px;
    }

    .fx-ud-stat-card {
        padding: 11px;
    }

    .fx-ud-stat-top {
        font-size: 9px;
        gap: 5px;
    }

    .fx-ud-stat-icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        font-size: 11px;
    }

    .fx-ud-stat-number {
        margin-top: 10px;
        font-size: 24px;
    }

    .fx-ud-stat-foot {
        font-size: 8px;
    }

    .fx-ud-inline-link {
        font-size: 9px;
    }

    .fx-ud-panel {
        padding: 12px;
    }

    .fx-ud-panel-head {
        gap: 8px;
    }

    .fx-ud-panel-head h3 {
        font-size: 12px;
    }

    .fx-ud-panel-head p {
        font-size: 9px;
    }

    .fx-ud-text-button {
        font-size: 9px;
    }

    .fx-ud-status-overview {
        grid-template-columns: 1fr;
        justify-items: center;
        padding-top: 2px;
    }

    .fx-ud-status-legend {
        width: 100%;
    }

    .fx-ud-status-legend > div {
        font-size: 10px;
    }

    .fx-ud-category-strip {
        justify-content: center;
    }

    .fx-ud-attention-item {
        gap: 8px;
    }

    .fx-ud-attention-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 11px;
    }

    .fx-ud-attention-copy strong {
        font-size: 9px;
    }

    .fx-ud-attention-copy small {
        font-size: 8px;
    }

    .fx-ud-activity-item {
        flex-wrap: wrap;
    }

    .fx-ud-activity-item time {
        margin-inline-start: 42px;
    }

    .fx-ud-toolbar h2 {
        font-size: 16px;
    }

    .fx-ud-toolbar p {
        font-size: 10px;
    }

    .fx-ud-primary-button,
    .fx-ud-secondary-button {
        min-height: 39px;
        padding-inline: 11px;
        font-size: 10px;
    }

    .fx-ud-form-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ud-field-full {
        grid-column: auto;
    }

    .fx-ud-form-grid label {
        font-size: 10px;
    }

    .fx-ud-form-grid input,
    .fx-ud-form-grid select,
    .fx-ud-form-grid textarea {
        font-size: 11px;
    }

    .fx-ud-table {
        min-width: 650px;
    }

    .fx-ud-map {
        min-height: 310px;
    }

    .fx-ud-map-legend {
        left: 7px;
        right: 7px;
        bottom: 7px;
        gap: 8px;
        padding: 7px;
    }

    .fx-ud-map-legend span {
        font-size: 8px;
    }

    .fx-ud-document-card {
        grid-template-columns: 38px minmax(0,1fr);
        padding: 14px;
        gap: 10px;
    }

    .fx-ud-document-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .fx-ud-bar-chart {
        height: 220px;
        padding-left: 31px;
    }

    .fx-ud-chart-gridline {
        left: 31px;
    }

    .fx-ud-chart-bars {
        gap: 5px;
    }

    .fx-ud-chart-bars i {
        width: 65%;
    }

    .fx-ud-chart-value {
        font-size: 7px;
    }

    .fx-ud-mix-row {
        grid-template-columns: 80px minmax(40px,1fr) 30px;
        gap: 6px;
    }

    .fx-ud-form-actions {
        flex-wrap: wrap;
    }

    .fx-ud-form-actions button {
        flex: 1;
    }

    .fx-ud-support-contact > a {
        font-size: 10px;
    }

    .fx-ud-security-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .fx-ud-main-footer {
        font-size: 8px;
    }
}

@media (max-width: 359px) {
    .fx-ud-top-actions {
        gap: 2px;
    }

    .fx-ud-topbar-inner {
        width: calc(100% - 10px);
    }

    .fx-ud-top-actions .fx-icon-button,
    .fx-ud-top-actions .fx-rtl-button,
    .fx-ud-hamburger {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .fx-ud-main-inner {
        padding-inline: 8px;
    }

    .fx-ud-page-head h1 {
        font-size: 19px;
    }

    .fx-ud-page-head p {
        font-size: 9px;
    }

    .fx-ud-stat-card {
        padding: 9px;
    }

    .fx-ud-stat-top {
        font-size: 8px;
    }

    .fx-ud-stat-number {
        font-size: 22px;
    }

    .fx-ud-stat-icon {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
        font-size: 10px;
    }

    .fx-ud-panel {
        padding: 10px;
    }

    .fx-ud-table {
        min-width: 620px;
    }

    .fx-ud-welcome-row h2 {
        font-size: 17px;
    }

    .fx-ud-nav-item {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-ud-view.is-visible,
    .fx-ud-map-route .fx-ud-route-highlight,
    .fx-ud-map-pin,
    .fx-ud-chart-bars i,
    .fx-ud-wave {
        animation: none !important;
    }

    .fx-ud-sidebar,
    .fx-ud-nav-item,
    .fx-ud-toast,
    .fx-ud-backdrop {
        transition: none !important;
    }
}

/* Keep dashboard content copy readable across viewport sizes. */
body.fx-user-dashboard-body .fx-ud-main p {
    font-size: clamp(14px, calc(10px + 1vw), 16px);
    line-height: 1.6;
}

body.fx-user-dashboard-body .fx-ud-main .fx-ud-stat-foot,
body.fx-user-dashboard-body .fx-ud-main .fx-ud-attention-copy small,
body.fx-user-dashboard-body .fx-ud-main .fx-ud-activity-item small,
body.fx-user-dashboard-body .fx-ud-main .fx-ud-table td small,
body.fx-user-dashboard-body .fx-ud-main .fx-ud-lease-row-top small,
body.fx-user-dashboard-body .fx-ud-main .fx-ud-location-item small,
body.fx-user-dashboard-body .fx-ud-main .fx-ud-support-contact > small,
body.fx-user-dashboard-body .fx-ud-main .fx-ud-ticket small,
body.fx-user-dashboard-body .fx-ud-main .fx-ud-profile-edit small,
body.fx-user-dashboard-body .fx-ud-main .fx-ud-switch-row small {
    font-size: clamp(13px, calc(10px + .9vw), 15px);
    line-height: 1.5;
}

/* =========================================================
   FLEETAXIS — HOME 2 · HERO (VIDEO BACKGROUND)
   Paste at the end of your existing styles.css.
   Video: ../assets/images/hero.mp4
========================================================= */

.fx-h2-hero {
    --fx-h2-dir: 1;

    --h2-text: #F8F5F0;
    --h2-soft: #DAD1C4;
    --h2-copper: #D49A63;
    --h2-copper-hi: #E2B487;
    --h2-glass: rgba(18, 18, 18, .58);
    --h2-line: rgba(243, 230, 208, .24);

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

    display: flex;
    flex-direction: column;

    min-height: max(620px, calc(100vh - var(--fx-navbar-height, 78px)));
    padding: 56px 0 30px;

    background: #151515;
    color: var(--h2-text);
}

@supports (height: 100svh) {
    .fx-h2-hero { min-height: max(620px, calc(100svh - var(--fx-navbar-height, 78px))); }
}


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

.fx-h2-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: #151515;
}

.fx-h2-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
}

/* readable text on top, calm in the middle, grounded at the bottom */
.fx-h2-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(14, 14, 14, .86) 0%,
            rgba(14, 14, 14, .60) 30%,
            rgba(14, 14, 14, .16) 58%,
            rgba(14, 14, 14, .55) 82%,
            rgba(14, 14, 14, .88) 100%),
        radial-gradient(ellipse at 50% 100%, rgba(184, 115, 51, .22), transparent 60%);
}


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

.fx-h2-wrap {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: min(1440px, calc(100% - 140px));
    margin: 0 auto;
}

/* top: stats | headline | paragraph */

.fx-h2-top {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(220px, 290px);
    grid-template-areas:
        "stats copy para"
        "stats cta  para";
    column-gap: 40px;
    align-items: start;
}

.fx-h2-stats { grid-area: stats; }
.fx-h2-copy  { grid-area: copy; }
.fx-h2-para  { grid-area: para; }
.fx-h2-cta   { grid-area: cta; }

.fx-h2-in { animation: fxH2Rise .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards; }


/* ---------- stats ---------- */

.fx-h2-stats {
    display: grid;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-h2-stats li {
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--h2-copper);
}

.fx-h2-stats strong {
    display: block;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--h2-text);
}

.fx-h2-stats span {
    font-size: 13px;
    font-weight: 500;
    color: var(--h2-soft);
}


/* ---------- headline ---------- */

.fx-h2-copy {
    min-width: 0;
    text-align: center;
}

.fx-h2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid var(--h2-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--h2-copper-hi);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

.fx-h2-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--h2-copper);
    box-shadow: 0 0 0 0 rgba(212, 154, 99, .55);
    animation: fxH2Pulse 1.8s ease-out infinite;
}

.fx-h2-title {
    margin: 22px 0 0;
    font-size: clamp(34px, 5.2vw, 68px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--h2-text);
    text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
    text-wrap: balance;
}

.fx-h2-line { display: block; }
.fx-h2-accent { color: var(--h2-copper); }

.fx-h2-cta {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.fx-h2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 28px;
    border-radius: 10px;
    background: var(--h2-copper);
    color: #151515;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 28px rgba(212, 154, 99, .3);
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.fx-h2-btn i { font-size: 13px; transition: transform .25s ease; }

.fx-h2-btn:hover {
    background: var(--h2-copper-hi);
    transform: translateY(-2px);
}

.fx-h2-btn:hover i { transform: translateX(calc(var(--fx-h2-dir) * 4px)); }

.fx-h2-btn:focus-visible,
.fx-h2-badge:focus-visible,
.fx-h2-toggle:focus-visible,
.fx-h2-field:focus-within {
    outline: 2px solid var(--h2-copper-hi);
    outline-offset: 3px;
}

.fx-h2-para {
    max-width: 290px;
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--h2-soft);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}


/* =========================================================
   BOTTOM : dashboard badge, pause, quote bar
========================================================= */

.fx-h2-bottom {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
    padding-top: 56px;
}

.fx-h2-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.fx-h2-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px 9px 10px;
    border: 1px solid var(--h2-line);
    border-radius: 14px;
    background: var(--h2-glass);
    color: var(--h2-text);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    transition: border-color .25s ease, transform .25s ease;
}

.fx-h2-badge:hover { border-color: var(--h2-copper); transform: translateY(-2px); }

.fx-h2-badge-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--h2-copper);
    color: #151515;
    font-size: 16px;
}

.fx-h2-badge-text { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.fx-h2-badge-text small { font-size: 11px; font-weight: 500; color: var(--h2-soft); }
.fx-h2-badge-text strong { font-size: 14px; font-weight: 600; color: var(--h2-text); }

.fx-h2-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--h2-line);
    border-radius: 50%;
    background: var(--h2-glass);
    color: var(--h2-text);
    font-size: 14px;
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    transition: border-color .25s ease, color .25s ease;
}

.fx-h2-toggle:hover { border-color: var(--h2-copper); color: var(--h2-copper-hi); }

/* ---------- quote bar ---------- */

.fx-h2-quote {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--h2-line);
    border-radius: 18px;
    background: var(--h2-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
            backdrop-filter: blur(16px) saturate(1.2);
}

.fx-h2-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding-block: 8px;
    padding-inline: 18px 40px;
    border-inline-end: 1px solid var(--h2-line);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color .25s ease;
}

.fx-h2-field:hover { background: rgba(255, 255, 255, .05); }

.fx-h2-field::after {
    content: "";
    position: absolute;
    inset-inline-end: 18px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--h2-soft);
    border-bottom: 2px solid var(--h2-soft);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.fx-h2-field-icon { flex: 0 0 auto; font-size: 18px; color: var(--h2-copper); }

.fx-h2-field-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.fx-h2-field-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--h2-soft);
}

.fx-h2-field select {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--h2-text);
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.fx-h2-field select option { background: #FFFFFF; color: #151515; }

.fx-h2-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    margin-inline-start: 10px;
    padding: 0 32px;
    border-radius: 12px;
    background: var(--h2-copper);
    color: #151515;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .25s ease, transform .25s ease;
}

.fx-h2-submit i { font-size: 13px; transition: transform .25s ease; }
.fx-h2-submit:hover { background: var(--h2-copper-hi); transform: translateY(-2px); }
.fx-h2-submit:hover i { transform: translateX(calc(var(--fx-h2-dir) * 4px)); }
.fx-h2-submit:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

/* ---------- loop progress ---------- */

.fx-h2-progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    height: 3px;
    background: rgba(243, 230, 208, .14);
}

.fx-h2-progress span {
    display: block;
    height: 100%;
    background: var(--h2-copper);
    transform: scaleX(0);
    transform-origin: calc(50% - var(--fx-h2-dir) * 50%) 50%;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fx-h2-quote,
    .fx-h2-badge,
    .fx-h2-toggle { background: rgba(18, 18, 18, .85); }
}


/* ---------- keyframes ---------- */

@keyframes fxH2Rise  { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes fxH2Pulse { to { box-shadow: 0 0 0 10px rgba(212, 154, 99, 0); } }


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

/* laptop */
@media (max-width: 1199px) {

    .fx-h2-wrap { width: calc(100% - 80px); }

    .fx-h2-hero { padding-top: 48px; }

    .fx-h2-top {
        grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) minmax(200px, 240px);
        column-gap: 28px;
    }

    .fx-h2-stats strong { font-size: 26px; }
    .fx-h2-para { font-size: 14.5px; }
}

/* tablet */
@media (max-width: 1023px) {

    .fx-h2-hero { padding: 44px 0 24px; }

    .fx-h2-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "copy  copy"
            "cta   cta"
            "stats para";
        row-gap: 0;
    }

    .fx-h2-cta { margin-top: 26px; }

    .fx-h2-stats {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: 34px;
        margin-top: 40px;
        align-self: center;
    }

    .fx-h2-para {
        max-width: 340px;
        margin: 40px 0 0;
        justify-self: end;
    }

    .fx-h2-bottom { padding-top: 40px; }

    .fx-h2-quote { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }

    .fx-h2-field:nth-child(3) { border-inline-end: 0; }

    .fx-h2-submit {
        grid-column: 1 / -1;
        margin-inline-start: 0;
        min-height: 52px;
    }
}

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

    .fx-h2-hero { padding: 36px 0 22px; min-height: max(600px, calc(100vh - var(--fx-navbar-height, 78px))); }

    @supports (height: 100svh) {
        .fx-h2-hero { min-height: max(600px, calc(100svh - var(--fx-navbar-height, 78px))); }
    }

    .fx-h2-wrap { width: calc(100% - 40px); }

    /* stronger shade so every line stays readable over the footage */
    .fx-h2-shade {
        background:
            linear-gradient(180deg,
                rgba(14, 14, 14, .88) 0%,
                rgba(14, 14, 14, .76) 38%,
                rgba(14, 14, 14, .52) 62%,
                rgba(14, 14, 14, .70) 82%,
                rgba(14, 14, 14, .92) 100%),
            radial-gradient(ellipse at 50% 100%, rgba(184, 115, 51, .2), transparent 60%);
    }

    .fx-h2-stats strong,
    .fx-h2-stats span { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }

    .fx-h2-top {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "para"
            "cta"
            "stats";
    }

    .fx-h2-title { margin-top: 18px; }

    .fx-h2-para {
        max-width: 460px;
        margin: 14px auto 0;
        justify-self: center;
        text-align: center;
        font-size: 15px;
    }

    .fx-h2-cta { margin-top: 24px; }

    .fx-h2-stats {
        justify-content: center;
        gap: 28px;
        margin-top: 28px;
    }

    .fx-h2-stats strong { font-size: 24px; }

    .fx-h2-bottom { padding-top: 32px; }

    /* the quote bar collapses to a single button */
    .fx-h2-quote {
        display: block;
        padding: 0;
        border: 0;
        background: transparent;
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }

    .fx-h2-field { display: none; }

    .fx-h2-submit {
        width: 100%;
        margin: 0;
        min-height: 54px;
        box-shadow: 0 10px 28px rgba(212, 154, 99, .28);
    }
}

/* mobile L and below */
@media (max-width: 480px) {

    .fx-h2-title { font-size: clamp(30px, 9.4vw, 42px); }

    .fx-h2-badge { padding: 8px 14px 8px 8px; }
    .fx-h2-badge-icon { width: 34px; height: 34px; font-size: 15px; }
}

/* mobile S */
@media (max-width: 359px) {

    .fx-h2-wrap { width: calc(100% - 32px); }

    .fx-h2-eyebrow { padding: 6px 12px; font-size: 12px; }
    .fx-h2-title { font-size: 29px; }
    .fx-h2-para { font-size: 14px; }
    .fx-h2-stats { gap: 18px; }
    .fx-h2-stats li { padding-inline-start: 12px; }
    .fx-h2-stats strong { font-size: 21px; }
    .fx-h2-stats span { font-size: 12px; }
    .fx-h2-badge-text small { display: none; }
    .fx-h2-btn { width: 100%; }
}

/* Keep the section 03 vehicle images vertically centered on tablet and laptop views. */
@media (min-width: 768px) and (max-width: 1439px) {
    .fx-sln-visual { align-items: center; }

    .fx-sln-visual img { margin-bottom: 0; }
}

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

    .fx-h2-in,
    .fx-h2-dot { animation: none; }

    .fx-h2-btn,
    .fx-h2-submit,
    .fx-h2-badge,
    .fx-h2-field { transition: none; }
}


/* =========================================================
   FLEETAXIS ADMIN DASHBOARD
   All new selectors are scoped to .fx-ad-*.
========================================================= */

body.fx-admin-dashboard-body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

/* Top navbar */
.fx-ad-topbar {
    position: fixed;
    z-index: 1250;
    top: 0;
    left: 0;
    right: 0;
    height: var(--fx-navbar-height, 78px);
    background: var(--fx-champagne-light);
    border-bottom: 1px solid var(--fx-border);
    box-shadow: 0 4px 18px rgba(0,0,0,.035);
}

.fx-ad-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1600px,calc(100% - 64px));
    height: 100%;
    margin: 0 auto;
    direction: ltr;
}

.fx-ad-topbar-spacer {
    flex: 1;
    min-width: 0;
}

.fx-ad-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    direction: ltr;
}

.fx-ad-top-actions .fx-icon-button,
.fx-ad-top-actions .fx-rtl-button {
    min-width: 42px;
    height: 42px;
    cursor: pointer;
}

.fx-ad-top-actions .fx-login-button {
    min-height: 42px;
    gap: 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.fx-ad-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fx-text);
    font-size: 17px;
    cursor: pointer;
}

.fx-ad-menu-toggle:hover {
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

/* Full viewport mobile drawer backdrop */
.fx-ad-backdrop {
    position: fixed;
    z-index: 1280;
    inset: 0;
    display: block;
    background: rgba(8,8,8,.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease,visibility .25s ease;
}

.fx-ad-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.fx-ad-backdrop[hidden] {
    display: none !important;
}

/* Fixed app area: independent sidebar and main scroll */
.fx-ad-app {
    position: fixed;
    inset: var(--fx-navbar-height,78px) 0 0;
    display: grid;
    grid-template-columns: 270px minmax(0,1fr);
    grid-template-areas: "sidebar main";
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--fx-champagne-light);
}

.fx-ad-sidebar {
    grid-area: sidebar;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--fx-carbon);
    color: #F3EDE5;
}

.fx-ad-sidebar-head {
    flex: 0 0 auto;
    padding: 21px 16px 13px;
}

.fx-ad-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 3px 18px;
}

.fx-ad-brand {
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 10px;
    color: #F8F5F0;
}

.fx-ad-brand .fx-brand-logo {
    width: 38px;
    height: 42px;
    flex: 0 0 38px;
}

.fx-ad-brand .fx-brand-name {
    color: #F8F5F0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.2;
}

.fx-ad-brand .fx-logo-pin {
    fill: var(--fx-copper);
}

.fx-ad-brand .fx-logo-car {
    fill: #FFFFFF;
}

.fx-ad-brand .fx-logo-window,
.fx-ad-brand .fx-logo-wheel {
    fill: var(--fx-copper-light);
}

.fx-ad-menu-close {
    display: none;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(243,230,208,.15);
    border-radius: 8px;
    background: transparent;
    color: #F3EDE5;
    font-size: 20px;
    cursor: pointer;
}

.fx-ad-menu-close:hover {
    background: rgba(243,230,208,.08);
    color: var(--fx-copper-light);
}

/* Admin profile */
.fx-ad-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 9px;
    border: 1px solid rgba(243,230,208,.12);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
}

.fx-ad-profile-image {
    display: block;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: cover;
    border: 1px solid rgba(212,154,99,.4);
    border-radius: 50%;
    background: var(--fx-champagne);
}

.fx-ad-profile-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.fx-ad-profile-copy strong {
    color: #F8F5F0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ad-profile-copy span {
    color: #B8B0A6;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.4;
}

.fx-ad-profile-status {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #8BBF8B;
    box-shadow: 0 0 0 4px rgba(139,191,139,.1);
}

.fx-ad-workspace-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    padding: 0 5px;
    color: #D49A63;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.5;
}

.fx-ad-workspace-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--fx-copper-light);
}

/* Scrollable navigation only; logo/profile remain visible */
.fx-ad-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    padding: 0 11px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,154,99,.42) transparent;
}

.fx-ad-nav::-webkit-scrollbar {
    width: 5px;
}

.fx-ad-nav::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(212,154,99,.42);
}

.fx-ad-nav-heading {
    margin: 12px 0 5px;
    padding: 0 14px;
    color: #9F9890;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
}

.fx-ad-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #D3CCC3;
    font-family: "Inter",sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background-color .2s ease,color .2s ease,transform .2s ease;
}

.fx-ad-nav-item > i:first-child {
    width: 17px;
    flex: 0 0 17px;
    color: #D49A63;
    font-size: 13px;
    text-align: center;
}

.fx-ad-nav-item > span:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.fx-ad-nav-item:hover {
    background: rgba(243,230,208,.08);
    color: #FFFFFF;
}

/* Same copper active-state language as the existing navbar */
.fx-ad-nav-item.active {
    background: #B87333;
    color: #FFFFFF;
    box-shadow: inset 3px 0 0 rgba(255,255,255,.24);
}

.fx-ad-nav-item.active > i:first-child {
    color: #FFFFFF;
}

.fx-ad-nav-item.active:hover {
    background: #985A25;
    color: #FFFFFF;
}

.fx-ad-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    padding: 2px 5px;
    border: 1px solid rgba(212,154,99,.28);
    border-radius: 6px;
    background: rgba(184,115,51,.15);
    color: #E2B487;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.fx-ad-nav-item.active .fx-ad-nav-badge {
    border-color: rgba(255,255,255,.23);
    background: rgba(255,255,255,.14);
    color: #FFFFFF;
}

/* Sidebar lower area stays pinned */
.fx-ad-sidebar-footer {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid rgba(243,230,208,.1);
}

.fx-ad-sidebar-support {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 5px 12px;
}

.fx-ad-sidebar-support-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid rgba(212,154,99,.25);
    border-radius: 8px;
    color: #D49A63;
    font-size: 12px;
}

.fx-ad-sidebar-support > span:last-child {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.fx-ad-sidebar-support strong {
    color: #F3EDE5;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.fx-ad-sidebar-support small {
    color: #9F9890;
    font-size: 9px;
    line-height: 1.4;
}

.fx-ad-mobile-logout {
    display: none;
}

/* Main workspace independent scroll */
.fx-ad-main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(184,115,51,.42) transparent;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
}

.fx-ad-main::-webkit-scrollbar {
    width: 6px;
}

.fx-ad-main::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(184,115,51,.42);
}

.fx-ad-main-inner {
    width: min(1560px,100%);
    min-height: 100%;
    margin: 0 auto;
    padding: 28px clamp(20px,2.8vw,42px) 18px;
}

.fx-ad-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 23px;
}

.fx-ad-page-heading {
    min-width: 0;
}

.fx-ad-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.5;
}

.fx-ad-breadcrumb i,
.fx-ad-breadcrumb span:last-child {
    color: var(--fx-copper-dark);
}

.fx-ad-page-header h1 {
    margin: 0;
    color: var(--fx-black);
    font-size: clamp(22px,2.1vw,30px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.fx-ad-page-header p {
    max-width: 760px;
    margin: 7px 0 0;
    color: var(--fx-text-soft);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.fx-ad-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.fx-ad-demo-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(184,115,51,.23);
    border-radius: 7px;
    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.fx-ad-notification-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-off-white);
    color: var(--fx-text);
    cursor: pointer;
}

.fx-ad-notification-button > span {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 9px;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-size: 8px;
    font-weight: 700;
}

.fx-ad-notification-button:hover {
    border-color: var(--fx-copper);
    color: var(--fx-copper-dark);
}

/* Welcome row */
.fx-ad-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.fx-ad-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--fx-copper-dark);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
}

.fx-ad-welcome h2 {
    margin: 0;
    color: var(--fx-black);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
}

.fx-ad-welcome h2 span {
    color: var(--fx-copper);
}

.fx-ad-welcome p {
    margin: 6px 0 0;
    color: var(--fx-text-soft);
    font-size: 11px;
    line-height: 1.6;
}

.fx-ad-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-white);
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.fx-ad-date-chip i {
    color: var(--fx-copper);
}

/* KPI cards */
.fx-ad-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 13px;
    margin-bottom: 17px;
}

.fx-ad-kpi-grid-three {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.fx-ad-kpi {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 17px;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    background: var(--fx-white);
    box-shadow: 0 5px 18px rgba(32,32,32,.035);
}

.fx-ad-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ad-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    border: 1px solid rgba(184,115,51,.22);
    border-radius: 8px;
    background: rgba(184,115,51,.08);
    color: var(--fx-copper-dark);
    font-size: 13px;
}

.fx-ad-kpi > strong {
    display: block;
    margin-top: 12px;
    color: var(--fx-black);
    font-size: clamp(24px,2vw,32px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.fx-ad-kpi > small {
    display: block;
    margin-top: 8px;
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.5;
}

.fx-ad-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-end: 5px;
    border-radius: 50%;
    background: var(--fx-copper);
}

.fx-ad-status-dot.warning {
    background: #C99548;
}

.fx-ad-status-dot.copper {
    background: var(--fx-copper);
}

.fx-ad-link-button,
.fx-ad-text-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    margin-top: 10px;
    border: 0;
    background: transparent;
    color: var(--fx-copper-dark);
    font-family: "Inter",sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
    text-align: start;
    cursor: pointer;
}

.fx-ad-link-button:hover,
.fx-ad-text-button:hover {
    color: var(--fx-copper);
}

/* Panels and grids */
.fx-ad-overview-grid {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(270px,.85fr);
    gap: 15px;
}

.fx-ad-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    background: var(--fx-white);
    box-shadow: 0 5px 18px rgba(32,32,32,.035);
}

.fx-ad-full-panel {
    grid-column: 1 / -1;
}

.fx-ad-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.fx-ad-panel-header h3,
.fx-ad-small-title {
    margin: 0;
    color: var(--fx-black);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ad-panel-header p {
    margin: 4px 0 0;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.55;
}

.fx-ad-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid rgba(184,115,51,.23);
    border-radius: 7px;
    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

/* Fleet health donut */
.fx-ad-health-layout {
    display: grid;
    grid-template-columns: 150px minmax(0,1fr);
    align-items: center;
    gap: 20px;
}

.fx-ad-donut {
    display: grid;
    place-items: center;
    width: 146px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(
        #B87333 0 79%,
        #8A9B85 79% 92%,
        #69737A 92% 98%,
        #CBAD83 98% 100%
    );
}

.fx-ad-donut > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 104px;
    aspect-ratio: 1;
    border: 1px solid var(--fx-border);
    border-radius: 50%;
    background: var(--fx-white);
}

.fx-ad-donut strong {
    color: var(--fx-black);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
}

.fx-ad-donut span {
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ad-health-legend {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.fx-ad-health-legend > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.fx-ad-health-legend > div > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.fx-ad-health-legend strong {
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 700;
}

.fx-ad-health-legend i,
.fx-ad-map-legend i {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
}

.fx-ad-health-legend .active-dot,
.fx-ad-map-legend .active-dot { background: var(--fx-copper); }
.fx-ad-health-legend .available-dot,
.fx-ad-map-legend .available-dot { background: #8A9B85; }
.fx-ad-health-legend .service-dot,
.fx-ad-map-legend .service-dot { background: #69737A; }
.fx-ad-health-legend .attention-dot { background: #CBAD83; }

.fx-ad-category-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}

.fx-ad-category-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ad-category-strip strong {
    color: var(--fx-text);
    font-weight: 700;
}

/* Priority task list */
.fx-ad-priority-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid var(--fx-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.fx-ad-priority-row:last-child {
    border-bottom: 0;
}

.fx-ad-priority-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    border: 1px solid rgba(184,115,51,.2);
    border-radius: 8px;
    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);
    font-size: 12px;
}

.fx-ad-priority-row > span:nth-child(2) {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.fx-ad-priority-row strong {
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ad-priority-row small {
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.fx-ad-priority-row > i:last-child {
    color: var(--fx-copper);
    font-size: 9px;
}

/* Activity list */
.fx-ad-activity-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ad-activity-row:last-child {
    border-bottom: 0;
}

.fx-ad-activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid rgba(184,115,51,.2);
    border-radius: 8px;
    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);
    font-size: 11px;
}

.fx-ad-activity-row > span:nth-child(2) {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.fx-ad-activity-row strong {
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
}

.fx-ad-activity-row small {
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.fx-ad-activity-row time {
    color: var(--fx-text-soft);
    font-size: 9px;
    white-space: nowrap;
}

/* Tables */
.fx-ad-table-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(184,115,51,.4) transparent;
}

.fx-ad-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 10px;
}

.fx-ad-table th {
    padding: 11px 10px;
    border-bottom: 1px solid var(--fx-border);
    background: rgba(184,115,51,.035);
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.fx-ad-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--fx-border);
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.5;
    vertical-align: middle;
}

.fx-ad-table tr:last-child td {
    border-bottom: 0;
}

.fx-ad-table tbody tr:hover {
    background: rgba(184,115,51,.035);
}

.fx-ad-table td strong {
    display: block;
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
}

.fx-ad-table td small {
    display: block;
    margin-top: 3px;
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ad-table-note,
.fx-ad-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 13px 0 0;
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.fx-ad-note i,
.fx-ad-table-note i {
    margin-top: 2px;
    color: var(--fx-copper);
}

.fx-ad-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.priority-high {
    background: rgba(216,121,104,.13);
    border-color: rgba(216,121,104,.22);
    color: #A5493C;
}

.priority-normal {
    background: rgba(215,175,117,.15);
    border-color: rgba(215,175,117,.25);
    color: #8D692E;
}

.status-active {
    background: rgba(121,177,126,.13);
    border-color: rgba(121,177,126,.24);
    color: #3C7444;
}

.status-available {
    background: rgba(129,166,199,.15);
    border-color: rgba(129,166,199,.25);
    color: #3D668D;
}

.status-due {
    background: rgba(212,154,99,.14);
    border-color: rgba(184,115,51,.24);
    color: #985A25;
}

.status-planned {
    background: rgba(166,177,188,.12);
    border-color: rgba(166,177,188,.22);
    color: #596571;
}

.fx-ad-row-action {
    padding: 5px 7px;
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    background: var(--fx-off-white);
    color: var(--fx-copper-dark);
    font-family: "Inter",sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.fx-ad-row-action:hover {
    border-color: var(--fx-copper);
}

.fx-ad-inline-select {
    max-width: 150px;
    min-height: 31px;
    padding: 5px 8px;
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    outline: 0;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-family: "Inter",sans-serif;
    font-size: 9px;
}

.fx-ad-inline-select:focus {
    border-color: var(--fx-copper);
}

.fx-ad-term-bar {
    width: 95px;
    height: 4px;
    margin-bottom: 5px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(32,32,32,.08);
}

.fx-ad-term-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--fx-copper);
}

/* Page switching */
.fx-ad-view[hidden],
.fx-ad-form-panel[hidden] {
    display: none !important;
}

.fx-ad-view.is-visible {
    animation: fxAdViewEnter .24s ease both;
}

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

/* Page toolbars */
.fx-ad-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.fx-ad-toolbar h2 {
    margin: 0;
    color: var(--fx-black);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}

.fx-ad-toolbar p {
    margin: 5px 0 0;
    color: var(--fx-text-soft);
    font-size: 11px;
    line-height: 1.6;
}

.fx-ad-primary-button,
.fx-ad-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: "Inter",sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .2s ease,border-color .2s ease,color .2s ease;
}

.fx-ad-primary-button {
    background: var(--fx-copper);
    color: #FFFFFF;
}

.fx-ad-primary-button:hover {
    background: var(--fx-copper-dark);
    color: #FFFFFF;
}

.fx-ad-secondary-button {
    border-color: var(--fx-border);
    background: var(--fx-off-white);
    color: var(--fx-text);
}

.fx-ad-secondary-button:hover {
    border-color: var(--fx-copper);
    color: var(--fx-copper-dark);
}

.fx-ad-close-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    background: transparent;
    color: var(--fx-text);
    cursor: pointer;
}

.fx-ad-form-panel {
    margin-bottom: 17px;
}

.fx-ad-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-top: 15px;
}

.fx-ad-form-grid label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 7px;
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.fx-ad-field-full {
    grid-column: 1 / -1;
}

.fx-ad-form-grid input,
.fx-ad-form-grid select,
.fx-ad-form-grid textarea {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    outline: 0;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-family: "Inter",sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

.fx-ad-form-grid textarea {
    min-height: 90px;
    resize: vertical;
}

.fx-ad-form-grid input:focus,
.fx-ad-form-grid select:focus,
.fx-ad-form-grid textarea:focus {
    border-color: var(--fx-copper);
    box-shadow: 0 0 0 3px rgba(184,115,51,.1);
}

.fx-ad-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 17px;
}

/* Search / filters */
.fx-ad-table-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.fx-ad-search {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 9px;
    padding: 0 11px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-off-white);
    color: var(--fx-text-soft);
}

.fx-ad-search:focus-within {
    border-color: var(--fx-copper);
}

.fx-ad-search input {
    width: 100%;
    min-width: 0;
    height: 39px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--fx-text);
    font-family: "Inter",sans-serif;
    font-size: 10px;
}

.fx-ad-search input::placeholder {
    color: var(--fx-text-soft);
    opacity: .9;
}

.fx-ad-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 600;
}

.fx-ad-filter-label select {
    max-width: 190px;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    outline: 0;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-family: "Inter",sans-serif;
    font-size: 10px;
}

/* Tracking demonstration map */
.fx-ad-tracking-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) 270px;
    align-items: start;
    gap: 15px;
}

.fx-ad-map-tag {
    color: var(--fx-copper-dark);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
}

.fx-ad-map {
    position: relative;
    min-height: 410px;
    overflow: hidden;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background:
        radial-gradient(circle at 24% 65%,rgba(184,115,51,.1),transparent 28%),
        linear-gradient(135deg,#ECE5D9,#E3E2DA);
}

.fx-ad-map-roads,
.fx-ad-map-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.fx-ad-map-roads path {
    fill: none;
    stroke: rgba(84,91,91,.22);
    stroke-width: 7;
}

.fx-ad-map-roads path:nth-child(n+5) {
    stroke-width: 3;
    stroke: rgba(84,91,91,.16);
}

.fx-ad-map-route path {
    fill: none;
    stroke: var(--fx-copper);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 14 12;
    animation: fxAdRoute 8s linear infinite;
}

@keyframes fxAdRoute {
    to { stroke-dashoffset: -208; }
}

.fx-ad-map-label {
    position: absolute;
    padding: 5px 7px;
    border: 1px solid rgba(84,91,91,.17);
    border-radius: 4px;
    background: rgba(250,245,237,.9);
    color: #515957;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .07em;
}

.fx-ad-map-label.label-one { left: 9%; top: 16%; }
.fx-ad-map-label.label-two { right: 11%; top: 48%; }
.fx-ad-map-label.label-three { left: 43%; bottom: 14%; }

.fx-ad-map-pin {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background: var(--fx-copper);
    color: #FFFFFF;
    box-shadow: 0 5px 15px rgba(0,0,0,.18);
    font-size: 11px;
    animation: fxAdPinFloat 3s ease-in-out infinite;
}

.fx-ad-map-pin.pin-one { left: 27%; top: 65%; }
.fx-ad-map-pin.pin-two { left: 56%; top: 38%; animation-delay: -.7s; }
.fx-ad-map-pin.pin-three { right: 17%; top: 22%; animation-delay: -1.4s; }
.fx-ad-map-pin.pin-four { right: 27%; bottom: 18%; animation-delay: -2s; }

@keyframes fxAdPinFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.fx-ad-map-legend {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 10px;
    border: 1px solid rgba(84,91,91,.16);
    border-radius: 7px;
    background: rgba(250,245,237,.93);
    color: #515957;
}

.fx-ad-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 600;
}

.fx-ad-tracking-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fx-ad-small-title {
    margin-bottom: 12px;
}

.fx-ad-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fx-border);
    color: var(--fx-text-soft);
    font-size: 10px;
}

.fx-ad-summary-row:last-child {
    border-bottom: 0;
}

.fx-ad-summary-row strong {
    color: var(--fx-text);
    font-size: 13px;
    font-weight: 600;
}

.fx-ad-exception {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ad-exception:last-child {
    border-bottom: 0;
}

.fx-ad-exception > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--fx-copper);
}

.fx-ad-exception > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fx-ad-exception strong {
    color: var(--fx-text);
    font-size: 10px;
    line-height: 1.45;
}

.fx-ad-exception small {
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

/* Service provider cards */
.fx-ad-provider-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.fx-ad-provider-card {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: start;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    background: var(--fx-white);
}

.fx-ad-provider-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(184,115,51,.2);
    border-radius: 9px;
    background: rgba(184,115,51,.08);
    color: var(--fx-copper-dark);
}

.fx-ad-provider-card > .fx-ad-pill {
    grid-column: 3;
}

.fx-ad-provider-card h3 {
    margin: 0;
    color: var(--fx-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.fx-ad-provider-card p {
    margin-top: 5px;
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.fx-ad-provider-card > div {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--fx-border);
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ad-provider-card > div strong {
    color: var(--fx-text);
    font-size: 12px;
}

.fx-ad-provider-card > a {
    grid-column: 2 / -1;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 7px;
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 600;
}

.fx-ad-provider-card > a:hover {
    color: var(--fx-copper);
}

/* Reports chart */
.fx-ad-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ad-chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--fx-copper);
}

.fx-ad-chart {
    position: relative;
    height: 270px;
    padding: 10px 16px 25px 40px;
}

.fx-ad-chart-grid {
    position: absolute;
    right: 0;
    left: 40px;
    border-top: 1px dashed var(--fx-border);
}

.fx-ad-chart-grid span {
    position: absolute;
    top: -7px;
    right: calc(100% + 8px);
    color: var(--fx-text-soft);
    font-size: 8px;
}

.fx-ad-chart-grid.g25 { bottom: 25%; }
.fx-ad-chart-grid.g50 { bottom: 50%; }
.fx-ad-chart-grid.g75 { bottom: 75%; }
.fx-ad-chart-grid.g100 { top: 10px; }

.fx-ad-chart-bars {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 11px;
    height: 100%;
}

.fx-ad-chart-bars > div {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.fx-ad-chart-bars strong {
    color: var(--fx-text-soft);
    font-size: 8px;
    font-weight: 600;
}

.fx-ad-chart-bars i {
    display: block;
    width: min(65%,35px);
    min-height: 4px;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to top,var(--fx-copper-dark),var(--fx-copper-light));
    transform-origin: bottom;
    animation: fxAdBarGrow .65s ease both;
}

@keyframes fxAdBarGrow {
    from { transform: scaleY(.1); }
    to { transform: scaleY(1); }
}

.fx-ad-chart-bars small {
    color: var(--fx-text-soft);
    font-size: 8px;
}

.fx-ad-mix-row {
    display: grid;
    grid-template-columns: 90px minmax(45px,1fr) 34px;
    align-items: center;
    gap: 8px;
    margin: 18px 0;
    color: var(--fx-text-soft);
    font-size: 9px;
}

.fx-ad-mix-row > div {
    height: 6px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(32,32,32,.08);
}

.fx-ad-mix-row > div > i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--fx-copper);
}

.fx-ad-mix-row strong {
    color: var(--fx-text);
    font-size: 10px;
    text-align: right;
}

/* Notification list */
.fx-ad-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ad-alert-item:last-child {
    border-bottom: 0;
}

.fx-ad-alert-item.is-unread {
    background: rgba(184,115,51,.025);
}

.fx-ad-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    background: rgba(184,115,51,.08);
    color: var(--fx-copper-dark);
}

.fx-ad-alert-item > div {
    flex: 1;
    min-width: 0;
}

.fx-ad-alert-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fx-ad-alert-title strong {
    color: var(--fx-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.fx-ad-alert-title time {
    color: var(--fx-text-soft);
    font-size: 9px;
    white-space: nowrap;
}

.fx-ad-alert-item p {
    margin-top: 6px;
    color: var(--fx-text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.fx-ad-unread-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--fx-copper);
}

.alert-amber { color: #A97931; }
.alert-copper { color: var(--fx-copper-dark); }
.alert-gray { color: #69737A; }
.alert-green { color: #54805A; }

/* System setting toggles */
.fx-ad-settings-toggles {
    margin-top: 23px;
}

.fx-ad-settings-toggles > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid var(--fx-border);
}

.fx-ad-settings-toggles > label > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.fx-ad-settings-toggles strong {
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
}

.fx-ad-settings-toggles small {
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.fx-ad-settings-toggles input {
    accent-color: var(--fx-copper);
}

/* Footer and notification toast */
.fx-ad-main-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 21px 0 5px;
    color: var(--fx-text-soft);
    font-size: 9px;
    line-height: 1.5;
}

.fx-ad-toast {
    position: fixed;
    z-index: 1500;
    right: 24px;
    bottom: 24px;
    max-width: min(420px,calc(100vw - 32px));
    padding: 13px 17px;
    border: 1px solid rgba(184,115,51,.32);
    border-radius: 8px;
    background: var(--fx-carbon);
    color: #FFFFFF;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
    font-size: 11px;
    line-height: 1.55;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease,transform .2s ease,visibility .2s ease;
}

.fx-ad-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Keyboard focus */
.fx-ad-nav-item:focus-visible,
.fx-ad-primary-button:focus-visible,
.fx-ad-secondary-button:focus-visible,
.fx-ad-text-button:focus-visible,
.fx-ad-menu-toggle:focus-visible,
.fx-ad-menu-close:focus-visible,
.fx-ad-row-action:focus-visible {
    outline: 2px solid var(--fx-copper-light);
    outline-offset: 2px;
}

/* =========================================================
   RESPONSIVE: LAPTOP-L
========================================================= */

@media (max-width: 1439px) {
    .fx-ad-main-inner {
        padding-inline: 27px;
    }

    .fx-ad-overview-grid {
        grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr);
    }

    .fx-ad-tracking-grid {
        grid-template-columns: minmax(0,1fr) 245px;
    }
}


/* =========================================================
   RESPONSIVE: LAPTOP
========================================================= */

@media (max-width: 1199px) and (min-width: 1024px) {
    .fx-ad-app {
        grid-template-columns: 230px minmax(0,1fr);
    }

    .fx-ad-sidebar-head {
        padding-inline: 12px;
    }

    .fx-ad-nav {
        padding-inline: 9px;
    }

    .fx-ad-nav-item {
        gap: 8px;
        padding-inline: 9px;
        font-size: 10px;
    }

    .fx-ad-main-inner {
        padding: 23px 19px 15px;
    }

    .fx-ad-kpi-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .fx-ad-overview-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ad-tracking-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ad-tracking-side {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .fx-ad-health-layout {
        grid-template-columns: 150px minmax(0,1fr);
    }

    .fx-ad-provider-grid {
        grid-template-columns: minmax(0,1fr);
    }
}


/* =========================================================
   RESPONSIVE: TABLET AND MOBILE DRAWER
========================================================= */

@media (max-width: 1023px) {
    body.fx-admin-dashboard-body {
        height: 100vh;
        height: 100dvh;
    }

    .fx-ad-topbar {
        height: 68px;
    }

    .fx-ad-topbar-inner {
        width: calc(100% - 32px);
    }

    .fx-ad-top-actions {
        gap: 4px;
    }

    .fx-ad-top-actions .fx-icon-button,
    .fx-ad-top-actions .fx-rtl-button {
        min-width: 38px;
        height: 38px;
        padding-inline: 8px;
    }

    .fx-ad-top-actions .fx-ad-logout-desktop {
        display: none;
    }

    .fx-ad-menu-toggle {
        display: inline-flex;
    }

    .fx-ad-app {
        display: block;
        inset: 68px 0 0;
        overflow: hidden;
    }

    /* Sidebar becomes an independent full-screen overlay. */
    .fx-ad-sidebar {
        position: fixed;
        z-index: 1300;
        inset: 0;
        width: 100%;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        transform: translateX(-102%);
        visibility: hidden;
        box-shadow: 15px 0 40px rgba(0,0,0,.3);
        transition:
            transform .28s cubic-bezier(.2,.8,.2,1),
            visibility 0s linear .28s;
    }

    .fx-ad-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        transition:
            transform .28s cubic-bezier(.2,.8,.2,1),
            visibility 0s;
    }

    .fx-ad-sidebar-head {
        padding: 20px 22px 14px;
    }

    .fx-ad-brand-row {
        padding-bottom: 17px;
    }

    .fx-ad-brand .fx-brand-name {
        font-size: 18px;
    }

    .fx-ad-menu-close {
        display: inline-flex;
    }

    .fx-ad-profile-image {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .fx-ad-nav {
        padding: 0 18px 18px;
    }

    .fx-ad-nav-heading {
        padding-inline: 16px;
    }

    .fx-ad-nav-item {
        min-height: 45px;
        padding-inline: 14px;
        font-size: 12px;
    }

    .fx-ad-nav-item > i:first-child {
        width: 20px;
        flex-basis: 20px;
        font-size: 14px;
    }

    .fx-ad-sidebar-footer {
        padding: 12px 18px calc(15px + env(safe-area-inset-bottom));
    }

    .fx-ad-mobile-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 45px;
        margin-top: 5px;
        padding: 0 16px;
        border-radius: 8px;
        background: var(--fx-copper);
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 600;
    }

    .fx-ad-mobile-logout:hover {
        background: var(--fx-copper-dark);
        color: #FFFFFF;
    }

    .fx-ad-main {
        width: 100%;
        height: 100%;
    }

    .fx-ad-main-inner {
        padding: 24px 24px 16px;
    }

    .fx-ad-kpi-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .fx-ad-overview-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ad-tracking-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ad-tracking-side {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .fx-ad-provider-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
   RESPONSIVE: MOBILE-L
========================================================= */

@media (max-width: 767px) {
    .fx-ad-topbar-inner {
        width: calc(100% - 24px);
    }

    .fx-ad-main-inner {
        padding: 20px 16px 14px;
    }

    .fx-ad-page-header {
        align-items: flex-start;
        margin-bottom: 19px;
    }

    .fx-ad-page-header h1 {
        font-size: 23px;
    }

    .fx-ad-page-header p {
        font-size: 11px;
    }

    .fx-ad-page-actions {
        gap: 6px;
    }

    .fx-ad-demo-label {
        padding: 7px 8px;
        font-size: 8px;
    }

    .fx-ad-notification-button {
        width: 35px;
        height: 35px;
    }

    .fx-ad-welcome {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .fx-ad-welcome h2 {
        font-size: 19px;
    }

    .fx-ad-date-chip {
        align-self: flex-start;
    }

    .fx-ad-kpi-grid {
        gap: 9px;
    }

    .fx-ad-kpi {
        padding: 13px;
    }

    .fx-ad-kpi-top {
        font-size: 9px;
    }

    .fx-ad-kpi-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 11px;
    }

    .fx-ad-kpi > strong {
        font-size: 26px;
    }

    .fx-ad-kpi > small {
        font-size: 9px;
    }

    .fx-ad-panel {
        padding: 15px;
    }

    .fx-ad-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .fx-ad-toolbar h2 {
        font-size: 17px;
    }

    .fx-ad-toolbar p {
        font-size: 10px;
    }

    .fx-ad-toolbar .fx-ad-primary-button,
    .fx-ad-toolbar .fx-ad-secondary-button {
        align-self: flex-start;
    }

    .fx-ad-health-layout {
        grid-template-columns: 145px minmax(0,1fr);
        gap: 15px;
    }

    .fx-ad-donut {
        width: 138px;
    }

    .fx-ad-donut > div {
        width: 98px;
    }

    .fx-ad-health-legend {
        gap: 10px;
    }

    .fx-ad-health-legend > div {
        font-size: 9px;
    }

    .fx-ad-category-strip span {
        padding: 5px 7px;
        font-size: 8px;
    }

    .fx-ad-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .fx-ad-search {
        width: 100%;
    }

    .fx-ad-filter-label {
        justify-content: space-between;
    }

    .fx-ad-filter-label select {
        flex: 0 1 65%;
        max-width: none;
    }

    .fx-ad-tracking-side {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ad-map {
        min-height: 350px;
    }

    .fx-ad-provider-grid {
        grid-template-columns: minmax(0,1fr);
    }

    .fx-ad-chart {
        height: 235px;
        padding-left: 32px;
    }

    .fx-ad-chart-grid {
        left: 32px;
    }

    .fx-ad-chart-bars {
        gap: 6px;
    }

    .fx-ad-chart-bars i {
        width: 65%;
    }

    .fx-ad-chart-bars strong {
        font-size: 7px;
    }

    .fx-ad-chart-bars small {
        font-size: 8px;
    }

    .fx-ad-main-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .fx-ad-alert-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE-M
========================================================= */

@media (max-width: 480px) {
    .fx-ad-topbar {
        height: 64px;
    }

    .fx-ad-app {
        inset: 64px 0 0;
    }

    .fx-ad-topbar-inner {
        width: calc(100% - 16px);
    }

    .fx-ad-top-actions .fx-icon-button,
    .fx-ad-top-actions .fx-rtl-button,
    .fx-ad-menu-toggle {
        width: 35px;
        min-width: 35px;
        height: 35px;
        padding: 0;
        font-size: 12px;
    }

    .fx-ad-menu-toggle {
        font-size: 16px;
    }

    .fx-ad-main-inner {
        padding: 17px 11px 12px;
    }

    .fx-ad-page-header {
        gap: 8px;
    }

    .fx-ad-page-header h1 {
        font-size: 20px;
        overflow-wrap: anywhere;
    }

    .fx-ad-page-header p {
        font-size: 10px;
    }

    .fx-ad-breadcrumb {
        gap: 6px;
        font-size: 8px;
    }

    .fx-ad-demo-label {
        gap: 5px;
        padding: 6px 7px;
        font-size: 8px;
    }

    .fx-ad-notification-button {
        width: 31px;
        height: 31px;
        font-size: 12px;
    }

    .fx-ad-kpi-grid {
        gap: 8px;
    }

    .fx-ad-kpi {
        padding: 10px;
    }

    .fx-ad-kpi-top {
        align-items: flex-start;
        gap: 5px;
        font-size: 8px;
    }

    .fx-ad-kpi-icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
        font-size: 10px;
    }

    .fx-ad-kpi > strong {
        margin-top: 10px;
        font-size: 23px;
    }

    .fx-ad-kpi > small {
        font-size: 8px;
        line-height: 1.45;
    }

    .fx-ad-link-button {
        gap: 5px;
        font-size: 8px;
    }

    .fx-ad-panel {
        padding: 12px;
    }

    .fx-ad-panel-header {
        align-items: flex-start;
        gap: 8px;
    }

    .fx-ad-panel-header h3 {
        font-size: 11px;
    }

    .fx-ad-panel-header p {
        font-size: 9px;
    }

    .fx-ad-health-layout {
        grid-template-columns: minmax(0,1fr);
        justify-items: center;
        gap: 14px;
    }

    .fx-ad-health-legend {
        width: 100%;
    }

    .fx-ad-health-legend > div {
        font-size: 10px;
    }

    .fx-ad-category-strip {
        justify-content: center;
        gap: 5px;
    }

    .fx-ad-category-strip span {
        font-size: 8px;
        padding: 5px 6px;
    }

    .fx-ad-priority-row {
        gap: 8px;
    }

    .fx-ad-priority-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 10px;
    }

    .fx-ad-priority-row strong {
        font-size: 9px;
    }

    .fx-ad-priority-row small {
        font-size: 8px;
    }

    .fx-ad-table {
        min-width: 650px;
    }

    .fx-ad-form-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 12px;
    }

    .fx-ad-field-full {
        grid-column: auto;
    }

    .fx-ad-form-grid label {
        font-size: 10px;
    }

    .fx-ad-form-grid input,
    .fx-ad-form-grid select,
    .fx-ad-form-grid textarea {
        font-size: 11px;
    }

    .fx-ad-primary-button,
    .fx-ad-secondary-button {
        min-height: 39px;
        padding-inline: 11px;
        font-size: 10px;
    }

    .fx-ad-form-actions {
        flex-wrap: wrap;
    }

    .fx-ad-form-actions > button {
        flex: 1;
    }

    .fx-ad-map {
        min-height: 305px;
    }

    .fx-ad-map-legend {
        right: 7px;
        bottom: 7px;
        left: 7px;
        gap: 8px;
        padding: 7px;
    }

    .fx-ad-map-legend span {
        font-size: 8px;
    }

    .fx-ad-map-pin {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .fx-ad-map-label {
        font-size: 7px;
        padding: 4px 5px;
    }

    .fx-ad-provider-card {
        grid-template-columns: 36px minmax(0,1fr);
        gap: 10px;
        padding: 13px;
    }

    .fx-ad-provider-icon {
        width: 35px;
        height: 35px;
        grid-row: span 2;
        font-size: 12px;
    }

    .fx-ad-provider-card > .fx-ad-pill {
        grid-column: 2;
        justify-self: start;
    }

    .fx-ad-provider-card h3 {
        font-size: 11px;
    }

    .fx-ad-provider-card > div,
    .fx-ad-provider-card > a {
        grid-column: 2;
    }

    .fx-ad-chart {
        height: 210px;
        padding-left: 29px;
    }

    .fx-ad-chart-grid {
        left: 29px;
    }

    .fx-ad-chart-bars {
        gap: 4px;
    }

    .fx-ad-chart-bars strong {
        font-size: 7px;
    }

    .fx-ad-mix-row {
        grid-template-columns: 78px minmax(35px,1fr) 29px;
        gap: 6px;
        font-size: 8px;
    }

    .fx-ad-mix-row strong {
        font-size: 9px;
    }

    .fx-ad-alert-item {
        gap: 8px;
        padding: 13px 0;
    }

    .fx-ad-alert-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 11px;
    }

    .fx-ad-alert-title strong {
        font-size: 10px;
    }

    .fx-ad-alert-item p {
        font-size: 9px;
    }

    .fx-ad-main-footer {
        font-size: 8px;
    }
}


/* =========================================================
   RESPONSIVE: MOBILE-S
========================================================= */

@media (max-width: 359px) {
    .fx-ad-topbar-inner {
        width: calc(100% - 10px);
    }

    .fx-ad-top-actions {
        gap: 2px;
    }

    .fx-ad-top-actions .fx-icon-button,
    .fx-ad-top-actions .fx-rtl-button,
    .fx-ad-menu-toggle {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .fx-ad-main-inner {
        padding: 15px 8px 10px;
    }

    .fx-ad-page-header h1 {
        font-size: 18px;
    }

    .fx-ad-page-header p {
        font-size: 9px;
    }

    .fx-ad-kpi {
        padding: 9px;
    }

    .fx-ad-kpi-top {
        font-size: 7.5px;
    }

    .fx-ad-kpi-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
        font-size: 9px;
    }

    .fx-ad-kpi > strong {
        font-size: 21px;
    }

    .fx-ad-kpi > small {
        font-size: 7.5px;
    }

    .fx-ad-panel {
        padding: 10px;
    }

    .fx-ad-panel-header h3 {
        font-size: 10px;
    }

    .fx-ad-table {
        min-width: 620px;
    }

    .fx-ad-toolbar h2 {
        font-size: 16px;
    }

    .fx-ad-welcome h2 {
        font-size: 17px;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .fx-ad-view.is-visible,
    .fx-ad-map-route path,
    .fx-ad-map-pin,
    .fx-ad-chart-bars i {
        animation: none !important;
    }

    .fx-ad-sidebar,
    .fx-ad-nav-item,
    .fx-ad-toast,
    .fx-ad-backdrop {
        transition: none !important;
    }
}

/* =========================================================
   FLEETAXIS ADMIN DASHBOARD — MOBILE DRAWER VISIBILITY FIX
   Fixes backdrop covering the sidebar contents.
========================================================= */

@media (max-width: 1023px) {

    /* Place the app layer above the backdrop stacking layer. */
    body.fx-admin-dashboard-body .fx-ad-app {
        position: fixed !important;
        z-index: 1290 !important;
        inset: 68px 0 0;
        overflow: visible;
    }

    /* Make the open drawer fully visible and opaque. */
    body.fx-admin-dashboard-body .fx-ad-sidebar {
        position: fixed !important;
        z-index: 1301 !important;
        top: 0 !important;
        right: 0;
        bottom: 0 !important;
        left: 0;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh;
        background: #151515 !important;
        opacity: 1 !important;
        filter: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /* Keep the backdrop below the drawer. */
    body.fx-admin-dashboard-body .fx-ad-backdrop {
        z-index: 1280 !important;
    }

    /* Preserve a solid background for the complete menu. */
    body.fx-admin-dashboard-body .fx-ad-sidebar.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        background: #151515 !important;
    }

    /* Prevent the page underneath the drawer from scrolling. */
    body.fx-admin-dashboard-body.fx-ad-drawer-open {
        overflow: hidden !important;
    }

    body.fx-admin-dashboard-body.fx-ad-drawer-open .fx-ad-main {
        overflow: hidden !important;
    }

    /* Explicit text contrast for the menu. */
    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-ad-brand-name,
    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-brand-name,
    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-ad-profile-copy strong,
    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-ad-nav-item,
    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-ad-sidebar-support strong {
        color: #F8F5F0;
    }

    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-ad-profile-copy span,
    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-ad-sidebar-support small {
        color: #B8B0A6;
    }

    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-ad-nav-heading {
        color: #D49A63;
    }

    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-ad-nav-item.active {
        background: #B87333 !important;
        color: #FFFFFF !important;
    }

    body.fx-admin-dashboard-body .fx-ad-sidebar .fx-ad-nav-item.active i {
        color: #FFFFFF !important;
    }

    body.fx-admin-dashboard-body .fx-ad-menu-close {
        color: #F8F5F0;
        background: transparent;
        border-color: rgba(243, 230, 208, 0.2);
    }
}

/* Keep the full-screen drawer coming from the correct side in RTL. */
@media (max-width: 1023px) {
    html[dir="rtl"] body.fx-admin-dashboard-body .fx-ad-sidebar {
        right: 0;
        left: auto;
        transform: translateX(102%);
    }

    html[dir="rtl"] body.fx-admin-dashboard-body .fx-ad-sidebar.is-open {
        transform: translateX(0);
    }
}

/* Keep admin dashboard content copy readable across viewport sizes. */
body.fx-admin-dashboard-body .fx-ad-main p {
    font-size: clamp(14px, calc(10px + 1vw), 16px);
    line-height: 1.6;
}

body.fx-admin-dashboard-body .fx-ad-main .fx-ad-kpi > small,
body.fx-admin-dashboard-body .fx-ad-main .fx-ad-priority-row small,
body.fx-admin-dashboard-body .fx-ad-main .fx-ad-activity-row small,
body.fx-admin-dashboard-body .fx-ad-main .fx-ad-table td small,
body.fx-admin-dashboard-body .fx-ad-main .fx-ad-exception small,
body.fx-admin-dashboard-body .fx-ad-main .fx-ad-settings-toggles small {
    font-size: clamp(13px, calc(10px + .9vw), 15px);
    line-height: 1.5;
}

/* =========================================================
   FLEETAXIS — HOME 2 · SECTIONS 02 & 03
   Paste at the end of your existing styles.css.

   Every class is scoped with its own prefix
   (fx-spot-… and fx-sln-…) so nothing existing changes.
   Only your colour tokens (--fx-…) are inherited.
========================================================= */


/* =========================================================
   SECTION 02 — FEATURED FLEET (SPOTLIGHT RAIL)
========================================================= */

.fx-spot {
    --spot-dir: 1;

    position: relative;
    isolation: isolate;
    padding: 96px 0 104px;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
}

.fx-spot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(var(--fx-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--fx-border) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0, transparent 70%);
            mask-image: radial-gradient(ellipse at 50% 0%, #000 0, transparent 70%);
}

.fx-spot-wrap {
    position: relative;
    width: min(1440px, calc(100% - 140px));
    margin: 0 auto;
}

/* ---------- head ---------- */

.fx-spot-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px 48px;
    margin-bottom: 44px;
}

.fx-spot-head-copy { min-width: 0; max-width: 760px; }

.fx-spot-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    background: var(--fx-white);
    color: var(--fx-copper-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.fx-spot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fx-copper);
    box-shadow: 0 0 0 0 rgba(184, 115, 51, .5);
    animation: fxSpotPulse 1.8s ease-out infinite;
}

.fx-spot-title {
    margin: 20px 0 16px;
    font-family: "Inter", sans-serif;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--fx-black);
    text-wrap: balance;
}

.fx-spot-accent { color: var(--fx-copper); }

.fx-spot-text {
    max-width: 560px;
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--fx-text-soft);
}

/* ---------- counter + arrows ---------- */

.fx-spot-controls { display: flex; align-items: center; gap: 12px; }

.fx-spot-count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    margin-inline-end: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fx-text-soft);
}

.fx-spot-count b {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--fx-black);
}

.fx-spot-arrow {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1.5px solid var(--fx-border);
    border-radius: 50%;
    background: var(--fx-white);
    color: var(--fx-black);
    font-size: 15px;
    transition: border-color .25s ease, color .25s ease, transform .25s ease;
}

.fx-spot-arrow:hover { border-color: var(--fx-copper); color: var(--fx-copper-dark); transform: translateY(-2px); }

.fx-spot-arrow:focus-visible,
.fx-spot-trigger:focus-visible,
.fx-spot-go:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

/* ---------- rail ---------- */

.fx-spot-rail {
    display: flex;
    gap: 12px;
    height: clamp(500px, 64vh, 600px);
}

.fx-spot-panel {
    --p-ink: var(--fx-black);
    --p-soft: var(--fx-text-soft);
    --p-accent: var(--fx-copper-dark);
    --p-line: var(--fx-border);

    position: relative;
    isolation: isolate;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--fx-border);
    border-radius: 22px;
    background: var(--fx-white);
    color: var(--p-ink);
    transition:
        flex-grow .65s cubic-bezier(.65, 0, .25, 1),
        background-color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        transform .3s ease;
}

.fx-spot-panel::before {
    content: "";
    position: absolute;
    inset: auto -25% -30% -25%;
    height: 70%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, rgba(184, 115, 51, .2), transparent 65%);
}

.fx-spot-panel:not(.is-active):hover { border-color: var(--fx-copper); transform: translateY(-3px); }

.fx-spot-panel.is-active {
    --p-ink: #F8F5F0;
    --p-soft: #CDC4B6;
    --p-accent: #D49A63;
    --p-line: rgba(243, 230, 208, .2);

    flex-grow: 3.6;
    background: #151515;
    border-color: rgba(243, 230, 208, .16);
    box-shadow: 0 26px 56px rgba(0, 0, 0, .2);
}

/* copper panel keeps the same colours open or closed */
.fx-spot-panel-copper,
.fx-spot-panel-copper.is-active {
    --p-ink: #FFFFFF;
    --p-soft: #FFF4E6;
    --p-accent: #FFFFFF;
    --p-line: rgba(255, 255, 255, .3);

    background: #985A25;
    border-color: #985A25;
}

.fx-spot-panel-copper::before { background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .18), transparent 65%); }

/* ---------- closed state: number + vertical name ---------- */

.fx-spot-trigger {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 26px 8px;
    background: transparent;
    color: var(--p-ink);
    text-align: center;
}

.fx-spot-trigger-num {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--p-accent);
}

.fx-spot-trigger-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--p-ink);
}

.fx-spot-trigger-plus { display: none; }

.fx-spot-panel.is-active .fx-spot-trigger { visibility: hidden; opacity: 0; }

/* ---------- open state ---------- */

.fx-spot-detail { position: absolute; inset: 0; z-index: 1; }

.fx-spot-in { position: relative; width: 100%; height: 100%; }

.fx-spot-ghost {
    position: absolute;
    top: 14px;
    inset-inline-end: 22px;
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(212, 154, 99, .4);
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
}

.fx-spot-panel-copper .fx-spot-ghost { -webkit-text-stroke-color: rgba(255, 255, 255, .45); }

.fx-spot-panel.is-active .fx-spot-ghost { opacity: 1; transition-delay: .35s; }

.fx-spot-body,
.fx-spot-specs {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .25s ease, transform .35s ease, visibility 0s linear .25s;
}

.fx-spot-panel.is-active .fx-spot-body,
.fx-spot-panel.is-active .fx-spot-specs {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .45s ease .4s, transform .5s ease .4s, visibility 0s;
}

.fx-spot-body {
    position: absolute;
    z-index: 2;
    top: 30px;
    inset-inline: 30px;
    padding-inline-end: 70px;
}

.fx-spot-kicker {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--p-accent);
}

.fx-spot-name {
    margin: 0 0 10px;
    font-family: "Inter", sans-serif;
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--p-ink);
}

.fx-spot-desc {
    max-width: 420px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--p-soft);
}

/* vehicle stage */

.fx-spot-stage {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    height: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    transition: bottom .6s cubic-bezier(.65, 0, .25, 1), height .6s cubic-bezier(.65, 0, .25, 1);
}

.fx-spot-panel.is-active .fx-spot-stage { bottom: 100px; height: 56%; }

.fx-spot-stage img {
    width: auto;
    max-width: none;
    height: 100%;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .4));
    -webkit-mask-image: linear-gradient(#000 84%, transparent 99%);
            mask-image: linear-gradient(#000 84%, transparent 99%);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.fx-spot-panel.is-active:hover .fx-spot-stage img { transform: translateY(-5px) scale(1.02); }

/* copper panel art (no vehicle photo) */

.fx-spot-art { align-items: center; }

.fx-spot-art-main {
    position: absolute;
    inset-inline-end: 8%;
    bottom: 6%;
    font-size: clamp(120px, 12vw, 190px);
    line-height: 1;
    color: rgba(255, 255, 255, .22);
}

.fx-spot-art-bolt {
    position: absolute;
    inset-inline-start: 12%;
    bottom: 22%;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(0, 0, 0, .22);
    color: #FFFFFF;
    font-size: 26px;
    animation: fxSpotFloat 5s ease-in-out infinite;
}

.fx-spot-art .fx-spot-art-main,
.fx-spot-art .fx-spot-art-bolt { opacity: .9; }

/* spec bar */

.fx-spot-specs {
    position: absolute;
    z-index: 2;
    inset-inline: 22px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--p-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.fx-spot-panel-copper .fx-spot-specs { background: rgba(0, 0, 0, .18); }

.fx-spot-specs dl { display: flex; flex: 1; min-width: 0; margin: 0; }

.fx-spot-specs dl > div {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 14px;
    border-inline-end: 1px solid var(--p-line);
}

.fx-spot-specs dl > div:last-child { border-inline-end: 0; }

.fx-spot-specs dt {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--p-soft);
}

.fx-spot-specs dd {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--p-ink);
}

.fx-spot-go {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #D49A63;
    color: #151515;
    font-size: 14px;
    transition: background-color .25s ease, transform .25s ease;
}

.fx-spot-go:hover { background: #E2B487; transform: translateX(calc(var(--spot-dir) * 3px)); }

.fx-spot-panel-copper .fx-spot-go { background: #FFFFFF; color: #985A25; }
.fx-spot-panel-copper .fx-spot-go:hover { background: #FFF4E6; }

/* scroll reveal (only active once script.js is running) */

.fx-spot.is-ready [data-spot-reveal] { opacity: 0; }

.fx-spot.is-ready [data-spot-reveal].is-in {
    opacity: 1;
    animation: fxSpotRise .85s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards;
}

@keyframes fxSpotRise  { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes fxSpotPulse { to { box-shadow: 0 0 0 10px rgba(184, 115, 51, 0); } }
@keyframes fxSpotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }


/* =========================================================
   SECTION 03 — SOLUTIONS BY INDUSTRY
========================================================= */

.fx-sln {
    --sln-dir: 1;

    --sln-bg: #151515;
    --sln-text: #F8F5F0;
    --sln-soft: #CDC4B6;
    --sln-copper: #D49A63;
    --sln-copper-hi: #E2B487;
    --sln-line: rgba(243, 230, 208, .16);

    /* card surfaces (light mode : champagne tones) */
    --sln-card-1: #F3E6D0;
    --sln-card-2: #FAF5ED;
    --sln-card-3: #EBD9BC;
    --sln-ink: #151515;
    --sln-card-soft: #55504A;
    --sln-card-line: rgba(21, 21, 21, .12);
    --sln-card-link: #8A4F1D;
    --sln-point-bg: rgba(152, 90, 37, .14);
    --sln-point-ink: #8A4F1D;

    --sln-top: calc(var(--fx-navbar-height, 78px) + 24px);

    position: relative;
    isolation: isolate;
    padding: 96px 0 104px;
    background: var(--sln-bg);
    color: var(--sln-text);
}

.fx-sln-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.fx-sln-orb {
    position: absolute;
    inset-inline-start: 22%;
    top: 24%;
    width: min(70vw, 900px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 154, 99, .16), rgba(212, 154, 99, .05) 55%, transparent 70%);
    animation: fxSlnBreath 6s ease-in-out infinite;
}

.fx-sln-grid-bg {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(rgba(243, 230, 208, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243, 230, 208, .06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 0, transparent 70%);
            mask-image: radial-gradient(ellipse at 30% 20%, #000 0, transparent 70%);
}

.fx-sln-wrap {
    position: relative;
    width: min(1440px, calc(100% - 140px));
    margin: 0 auto;
}

.fx-sln-layout {
    display: grid;
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
    gap: 64px;
    align-items: start;
}

/* ---------- pinned column ---------- */

.fx-sln-side { position: sticky; top: var(--sln-top); align-self: start; }

.fx-sln-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid rgba(243, 230, 208, .2);
    border-radius: 999px;
    background: rgba(243, 230, 208, .06);
    color: var(--sln-copper-hi);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.fx-sln-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sln-copper);
    box-shadow: 0 0 0 0 rgba(212, 154, 99, .55);
    animation: fxSlnPulse 1.8s ease-out infinite;
}

.fx-sln-title {
    margin: 20px 0 16px;
    font-family: "Inter", sans-serif;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--sln-text);
}

.fx-sln-accent { color: var(--sln-copper); }

.fx-sln-text {
    max-width: 480px;
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--sln-soft);
}

/* index list */

.fx-sln-index {
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--sln-line);
}

.fx-sln-index li { border-bottom: 1px solid var(--sln-line); }

.fx-sln-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 4px;
    color: var(--sln-soft);
    transition: color .3s ease, padding .3s ease;
}

.fx-sln-link-num { font-size: 13px; font-weight: 600; letter-spacing: .04em; }

.fx-sln-link-name { flex: 1; font-size: 17px; font-weight: 600; }

.fx-sln-link i { font-size: 13px; opacity: 0; transition: opacity .3s ease, transform .3s ease; }

.fx-sln-link:hover,
.fx-sln-link.is-active { color: var(--sln-text); }

.fx-sln-link.is-active { padding-inline-start: 12px; }

.fx-sln-link.is-active .fx-sln-link-num { color: var(--sln-copper); }

.fx-sln-link.is-active i { opacity: 1; color: var(--sln-copper); }

.fx-sln-link:hover i { opacity: 1; transform: translateX(calc(var(--sln-dir) * 4px)); }

.fx-sln-link:focus-visible,
.fx-sln-btn:focus-visible,
.fx-sln-btn-ghost:focus-visible,
.fx-sln-cta:focus-visible {
    outline: 2px solid var(--sln-copper-hi);
    outline-offset: 3px;
}

/* buttons */

.fx-sln-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.fx-sln-btn,
.fx-sln-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}

.fx-sln-btn i { font-size: 13px; transition: transform .25s ease; }

.fx-sln-btn {
    background: var(--sln-copper);
    color: #151515;
    box-shadow: 0 10px 28px rgba(212, 154, 99, .28);
}

.fx-sln-btn:hover { background: var(--sln-copper-hi); transform: translateY(-2px); }
.fx-sln-btn:hover i { transform: translateX(calc(var(--sln-dir) * 4px)); }

.fx-sln-btn-ghost {
    border: 1.5px solid rgba(243, 230, 208, .3);
    background: transparent;
    color: var(--sln-text);
}

.fx-sln-btn-ghost:hover { border-color: var(--sln-copper); color: var(--sln-copper-hi); transform: translateY(-2px); }

/* ---------- stacking cards ---------- */

.fx-sln-stack { min-width: 0; }

.fx-sln-card {
    --sln-p: 0;

    position: sticky;
    top: calc(var(--sln-top) + var(--i, 0) * 20px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    min-height: 470px;
    margin-bottom: 28px;
    padding: 12px;
    border: 1px solid var(--sln-card-line);
    border-radius: 26px;
    background: var(--sln-card-1);
    color: var(--sln-ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    transform-origin: 50% 0;
    transform: scale(calc(1 - var(--sln-p) * .055));
    filter: brightness(calc(1 - var(--sln-p) * .28));
    will-change: transform;
}

.fx-sln-card:nth-child(2) { background: var(--sln-card-2); }
.fx-sln-card:nth-child(3) { background: var(--sln-card-3); margin-bottom: 0; }

.fx-sln-card { scroll-margin-top: calc(var(--sln-top) + 8px); }

.fx-sln-content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px 26px 22px 24px;
}

.fx-sln-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.fx-sln-tag {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--sln-card-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    color: var(--sln-card-link);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.fx-sln-num {
    font-size: 54px;
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(152, 90, 37, .45);
    user-select: none;
}

.fx-sln-card-title {
    margin: 18px 0 10px;
    font-family: "Inter", sans-serif;
    font-size: clamp(26px, 2.4vw, 36px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--sln-ink);
}

.fx-sln-card-text {
    margin: 0;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--sln-card-soft);
}

.fx-sln-points { display: grid; gap: 14px; margin: 22px 0 24px; padding: 0; list-style: none; }

.fx-sln-points li { display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--sln-card-soft); }

.fx-sln-points strong { display: block; font-size: 15px; font-weight: 600; color: var(--sln-ink); }

.fx-sln-point-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--sln-point-bg);
    color: var(--sln-point-ink);
    font-size: 15px;
}

.fx-sln-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--sln-card-link);
}

.fx-sln-cta i { font-size: 13px; transition: transform .25s ease; }
.fx-sln-cta:hover i { transform: translateX(calc(var(--sln-dir) * 5px)); }

/* ---------- visual panel ---------- */

.fx-sln-visual {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(212, 154, 99, .28), transparent 62%),
        #151515;
}

.fx-sln-ring {
    position: absolute;
    inset: 22% 8% 4%;
    z-index: -1;
    border: 1.5px dashed rgba(212, 154, 99, .4);
    border-radius: 50%;
    animation: fxSlnSpin 60s linear infinite;
}

.fx-sln-visual img {
    position: relative;
    z-index: 1;
    width: 112%;
    max-width: none;
    height: auto;
    margin-bottom: -3%;
    filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .5));
    -webkit-mask-image: linear-gradient(#000 82%, transparent 99%);
            mask-image: linear-gradient(#000 82%, transparent 99%);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.fx-sln-card:hover .fx-sln-visual img { transform: translateY(-6px) scale(1.02); }

/* fleet mix */

.fx-sln-mix {
    position: absolute;
    z-index: 2;
    top: 16px;
    inset-inline-start: 16px;
    width: min(220px, calc(100% - 32px));
    padding: 14px 16px;
    border: 1px solid rgba(243, 230, 208, .22);
    border-radius: 14px;
    background: rgba(21, 21, 21, .62);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.fx-sln-mix-title { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--sln-copper-hi); }

.fx-sln-mix ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }

.fx-sln-mix li {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: #E8DFD2;
}

.fx-sln-mix b { font-size: 12.5px; font-weight: 600; color: #F8F5F0; text-align: end; }

.fx-sln-bar { position: relative; height: 6px; border-radius: 999px; background: rgba(243, 230, 208, .16); overflow: hidden; }

.fx-sln-bar i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--w, 50%);
    border-radius: inherit;
    background: var(--sln-copper);
    transition: width 1.1s cubic-bezier(.2, .8, .2, 1) .25s;
}

.fx-sln.is-ready .fx-sln-card:not(.is-in) .fx-sln-bar i { width: 0; }

/* reveal */

.fx-sln.is-ready [data-sln-reveal] { opacity: 0; }

.fx-sln.is-ready [data-sln-reveal].is-in {
    opacity: 1;
    animation: fxSlnRise .85s cubic-bezier(.2, .8, .2, 1) backwards;
}

@keyframes fxSlnRise   { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes fxSlnPulse  { to { box-shadow: 0 0 0 10px rgba(212, 154, 99, 0); } }
@keyframes fxSlnBreath { 0%, 100% { opacity: .85; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
@keyframes fxSlnSpin   { to { transform: rotate(360deg); } }


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

/* laptop */
@media (max-width: 1199px) {

    .fx-spot,
    .fx-sln { padding: 80px 0 88px; }

    .fx-spot-wrap,
    .fx-sln-wrap { width: calc(100% - 80px); }

    .fx-spot-rail { height: clamp(500px, 62vh, 560px); }

    .fx-spot-body { inset-inline: 26px; padding-inline-end: 60px; }

    .fx-sln-layout { gap: 40px; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); }

    .fx-sln-content { padding: 20px 20px 20px 18px; }
}

/* tablet : rail becomes an accordion, cards stop stacking */
@media (max-width: 1023px) {

    .fx-spot-head { margin-bottom: 36px; }

    .fx-spot-rail { flex-direction: column; height: auto; gap: 10px; }

    .fx-spot-panel,
    .fx-spot-panel.is-active { flex: none; width: 100%; }

    .fx-spot-panel::before { display: none; }

    .fx-spot-trigger {
        position: relative;
        inset: auto;
        flex-direction: row;
        align-items: center;
        gap: 18px;
        width: 100%;
        min-height: 78px;
        padding: 0 22px;
        text-align: start;
    }

    .fx-spot-trigger-name {
        flex: 1;
        font-size: 18px;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .fx-spot-trigger-plus {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border: 1px solid var(--p-line);
        border-radius: 50%;
        font-size: 13px;
        transition: transform .4s ease;
    }

    .fx-spot-panel.is-active .fx-spot-trigger { visibility: visible; opacity: 1; }
    .fx-spot-panel.is-active .fx-spot-trigger-plus { transform: rotate(45deg); }

    .fx-spot-detail {
        position: static;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .55s cubic-bezier(.65, 0, .25, 1);
    }

    .fx-spot-panel.is-active .fx-spot-detail { grid-template-rows: 1fr; }

    .fx-spot-in {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "body  stage"
            "specs stage";
        align-content: start;
        column-gap: 16px;
        min-height: 0;
        height: auto;
        overflow: hidden;
        visibility: hidden;
        transition: visibility 0s linear .55s;
    }

    .fx-spot-panel.is-active .fx-spot-in { visibility: visible; transition-delay: 0s; }

    .fx-spot-ghost { display: none; }

    .fx-spot-body,
    .fx-spot-specs,
    .fx-spot-panel.is-active .fx-spot-body,
    .fx-spot-panel.is-active .fx-spot-specs {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .fx-spot-name { display: none; }

    .fx-spot-body { grid-area: body; margin: 4px 22px 0; padding: 0; }

    .fx-spot-desc { max-width: none; }

    .fx-spot-stage,
    .fx-spot-panel.is-active .fx-spot-stage {
        position: relative;
        grid-area: stage;
        inset: auto;
        height: auto;
        min-height: 230px;
        margin: 0 0 0;
        align-self: end;
    }

    .fx-spot-stage img { width: 100%; height: auto; }

    .fx-spot-art { min-height: 230px; }

    .fx-spot-specs { grid-area: specs; margin: 18px 22px 22px; align-self: end; }

    .fx-spot-panel.is-active:hover .fx-spot-stage img { transform: none; }

    /* section 03 */

    .fx-sln-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }

    .fx-sln-side { position: static; }

    .fx-sln-text { max-width: 620px; }

    .fx-sln-index { display: none; }

    .fx-sln-actions { margin-top: 28px; }

    .fx-sln-card {
        position: relative;
        top: auto;
        margin-bottom: 20px;
        min-height: 0;
        transform: none;
        filter: none;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
    }
}

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

    .fx-spot,
    .fx-sln { padding: 64px 0 72px; }

    .fx-spot-wrap,
    .fx-sln-wrap { width: calc(100% - 48px); }

    .fx-spot-text,
    .fx-sln-text { font-size: 16px; }

    .fx-spot-head { gap: 22px; margin-bottom: 30px; }

    .fx-spot-count b { font-size: 24px; }

    .fx-spot-arrow { width: 46px; height: 46px; }

    .fx-spot-trigger { min-height: 72px; padding: 0 18px; gap: 14px; }

    .fx-spot-in {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "body"
            "stage"
            "specs";
    }

    .fx-spot-body { margin: 4px 18px 0; }

    .fx-spot-stage,
    .fx-spot-panel.is-active .fx-spot-stage {
        min-height: 0;
        aspect-ratio: 3 / 2;
        margin-top: 6px;
    }

    .fx-spot-art { aspect-ratio: 16 / 9; }

    .fx-spot-art-main { font-size: 120px; }

    .fx-spot-specs { margin: 8px 18px 18px; padding: 10px; }

    .fx-spot-specs dl { flex-wrap: wrap; row-gap: 12px; }

    .fx-spot-specs dl > div { flex: 1 1 33%; padding-inline: 10px; }

    .fx-spot-specs dl > div:first-child { padding-inline-start: 6px; }

    /* section 03 */

    .fx-sln-actions .fx-sln-btn,
    .fx-sln-actions .fx-sln-btn-ghost { flex: 1 1 100%; }

    .fx-sln-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
        border-radius: 22px;
    }

    .fx-sln-visual { order: -1; min-height: 330px; }

    .fx-sln-visual img { width: 108%; }

    .fx-sln-content { padding: 22px 12px 14px; }

    .fx-sln-num { font-size: 44px; }

    .fx-sln-card-title { font-size: 26px; }

    .fx-sln-cta { margin-top: 4px; }
}

/* mobile S */
@media (max-width: 359px) {

    .fx-spot-wrap,
    .fx-sln-wrap { width: calc(100% - 32px); }

    .fx-spot-specs dl > div { flex: 1 1 50%; }

    .fx-sln-mix { padding: 12px; }

    .fx-sln-mix li { grid-template-columns: 54px minmax(0, 1fr) 30px; gap: 8px; }

    .fx-sln-visual { min-height: 310px; }
}

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

    .fx-spot-dot,
    .fx-sln-dot,
    .fx-sln-orb,
    .fx-sln-ring,
    .fx-spot-art-bolt { animation: none; }

    .fx-spot.is-ready [data-spot-reveal].is-in,
    .fx-sln.is-ready [data-sln-reveal].is-in { animation: none; }

    .fx-spot-panel,
    .fx-spot-stage,
    .fx-spot-detail,
    .fx-sln-bar i { transition: none; }

    .fx-sln-card { transform: none !important; filter: none !important; }
}

/* =========================================================
   FLEETAXIS LOGIN PAGE
   Page-specific styles only
   Existing shared theme variables are reused.
========================================================= */

body.fx-login-page {
    --fx-login-error: #B52E28;
    --fx-login-panel-radius: 22px;

    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
}

/* =========================================================
   TOP CONTROLS — OUTSIDE LOGIN CONTAINER
========================================================= */

.fx-login-controls {
    position: fixed;
    z-index: 100;
    top: 18px;
    right: 24px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    direction: ltr;
}

.fx-login-controls .fx-icon-button,
.fx-login-controls .fx-rtl-button {
    flex: 0 0 auto;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-white);
    color: var(--fx-text);

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
    transition:
        background-color var(--fx-transition),
        border-color var(--fx-transition),
        color var(--fx-transition),
        transform var(--fx-transition);
}

.fx-login-controls .fx-icon-button:hover,
.fx-login-controls .fx-rtl-button:hover {
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

.fx-login-controls .fx-icon-button:focus-visible,
.fx-login-controls .fx-rtl-button:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}


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

.fx-login-stage {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

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

    padding:
        82px
        28px
        28px;
}


/* =========================================================
   MAIN RECTANGULAR CONTAINER
   Equal 50/50 panels on desktop and laptop
========================================================= */

.fx-login-card {
    display: grid;

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

    grid-template-areas:
        "brand form";

    align-items: stretch;

    width: 100%;
    max-width: 1240px;

    min-height: 660px;

    margin: auto;

    overflow: hidden;

    border: 1px solid var(--fx-border);
    border-radius: var(--fx-login-panel-radius);

    background: var(--fx-white);

    box-shadow:
        0 25px 75px rgba(32, 32, 32, .10);
}


/* =========================================================
   LEFT BRAND PANEL
========================================================= */

.fx-login-brand-panel {
    grid-area: brand;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 660px;

    overflow: hidden;

    padding: 36px 38px 24px;

    background:
        linear-gradient(
            145deg,
            #202020 0%,
            #151515 58%,
            #211C17 100%
        );

    color: #F8F5F0;
}

.fx-login-brand-panel::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 100px;
    left: -130px;

    width: 370px;
    height: 370px;

    border: 1px solid rgba(212, 154, 99, .15);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(212,154,99,.025),
        0 0 0 75px rgba(212,154,99,.02);

    pointer-events: none;
}

.fx-login-brand-panel::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(243, 230, 208, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243, 230, 208, .045) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    opacity: .45;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 30%,
            black 88%,
            transparent 100%
        );

    pointer-events: none;
}

.fx-login-brand-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex: 1;
    flex-direction: column;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   BRAND LOGO + LOGONAME
========================================================= */

.fx-login-brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    width: fit-content;
    max-width: 100%;

    gap: 11px;

    color: #F8F5F0;
    text-decoration: none;

    direction: ltr;
}

.fx-login-brand:hover {
    color: #FFFFFF;
}

.fx-login-brand .fx-brand-logo {
    position: relative;

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

    width: 42px;
    height: 46px;

    flex: 0 0 42px;
}

.fx-login-brand .fx-logo-svg {
    display: block;

    width: 100%;
    height: 100%;
}

.fx-login-brand .fx-logo-pin {
    fill: #B87333;
}

.fx-login-brand .fx-logo-car {
    fill: #FFFFFF;
}

.fx-login-brand .fx-logo-window,
.fx-login-brand .fx-logo-wheel {
    fill: #D49A63;
}

.fx-login-brand .fx-brand-name {
    color: #F8F5F0;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .055em;
}


/* =========================================================
   LEFT PANEL INTRO
========================================================= */

.fx-login-intro {
    margin-top: 47px;
}

.fx-login-eyebrow {
    display: block;

    margin-bottom: 17px;

    color: #D49A63;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .12em;
}

.fx-login-intro h1 {
    max-width: 475px;

    margin: 0;

    color: #F8F5F0;

    font-family: "Inter", sans-serif;
    font-size: clamp(32px, 3.1vw, 45px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.035em;

    overflow-wrap: anywhere;
}

.fx-login-intro h1 span {
    display: block;
    margin-top: 4px;

    color: #D49A63;
}

.fx-login-intro p {
    max-width: 435px;

    margin: 17px 0 0;

    color: #C8C0B7;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;

    overflow-wrap: anywhere;
}


/* =========================================================
   EXISTING VEHICLE IMAGES
   All three images are contained inside the same area.
========================================================= */

.fx-login-vehicle-stage {
    position: relative;
    isolation: isolate;

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

    width: 100%;
    height: 220px;

    min-width: 0;
    margin-top: auto;

    padding: 13px 0 4px;

    overflow: hidden;
}

.fx-login-image-glow {
    position: absolute;
    z-index: -1;

    bottom: 14px;
    left: 50%;

    width: 84%;
    height: 64px;

    background:
        radial-gradient(
            ellipse,
            rgba(184, 115, 51, .24) 0%,
            rgba(184, 115, 51, .07) 45%,
            transparent 75%
        );

    transform: translateX(-50%);

    filter: blur(8px);
}

.fx-login-vehicle {
    position: relative;

    display: block;

    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center bottom;

    filter: drop-shadow(0 16px 16px rgba(0,0,0,.24));

    user-select: none;
    pointer-events: none;
}

.fx-login-vehicle-car {
    z-index: 1;

    width: 29%;
    height: 135px;

    margin-right: -5%;
}

.fx-login-vehicle-van {
    z-index: 2;

    width: 34%;
    height: 170px;

    margin-right: -5%;
}

.fx-login-vehicle-truck {
    z-index: 3;

    width: 43%;
    height: 205px;
}


/* =========================================================
   FLEET CAPABILITIES
========================================================= */

.fx-login-capabilities {
    display: grid;

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

    gap: 10px;

    padding-top: 17px;

    border-top:
        1px solid rgba(243, 230, 208, .14);
}

.fx-login-capability {
    display: flex;
    align-items: flex-start;

    min-width: 0;
    gap: 8px;
}

.fx-login-capability-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border: 1px solid rgba(212, 154, 99, .28);
    border-radius: 7px;

    background: rgba(184, 115, 51, .09);

    color: #D49A63;
    font-size: 11px;
}

.fx-login-capability > span:last-child {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
    gap: 3px;
}

.fx-login-capability strong {
    color: #F3EDE5;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.45;

    overflow-wrap: anywhere;
}

.fx-login-capability small {
    color: #AFA79D;

    font-size: 8px;
    font-weight: 500;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.fx-login-brand-bottom {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 20px;

    color: #AFA79D;

    font-size: 8px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .12em;
}

.fx-login-brand-bottom-line {
    display: block;

    width: 24px;
    height: 1px;

    flex: 0 0 24px;

    background: #B87333;
}


/* =========================================================
   RIGHT FORM PANEL
========================================================= */

.fx-login-form-panel {
    grid-area: form;

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

    min-width: 0;
    min-height: 660px;

    padding: 38px;

    border-left: 1px solid var(--fx-border);

    background: var(--fx-white);
    color: var(--fx-text);
}

.fx-login-form-content {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 405px;
    min-width: 0;

    margin: auto;
}


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

.fx-login-form-heading {
    margin-bottom: 27px;
    text-align: center;
}

.fx-login-form-kicker {
    display: block;

    margin-bottom: 10px;

    color: var(--fx-copper-dark);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .15em;
}

.fx-login-form-heading h2 {
    margin: 0;

    color: var(--fx-black);

    font-family: "Inter", sans-serif;
    font-size: clamp(23px, 2.2vw, 29px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;

    overflow-wrap: anywhere;
}

.fx-login-form-heading p {
    max-width: 330px;

    margin: 10px auto 0;

    color: var(--fx-text-soft);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
}


/* =========================================================
   FORM FIELDS
========================================================= */

.fx-login-form {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
}

.fx-login-field {
    display: flex;
    flex-direction: column;

    min-width: 0;

    margin-bottom: 17px;
}

.fx-login-field > label,
.fx-login-label-row > label {
    display: block;

    color: var(--fx-text);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.fx-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
    margin-bottom: 8px;
}

.fx-login-field > label {
    margin-bottom: 8px;
}

.fx-login-input-wrap {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
    min-height: 47px;

    gap: 11px;

    padding: 0 13px;

    border: 1px solid var(--fx-border);
    border-radius: 8px;

    background: var(--fx-off-white);
    color: var(--fx-text);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.fx-login-input-wrap:focus-within {
    border-color: var(--fx-copper);

    box-shadow:
        0 0 0 3px rgba(184, 115, 51, .11);
}

.fx-login-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 15px;

    color: var(--fx-copper-dark);
    font-size: 13px;
}

.fx-login-input-wrap input {
    display: block;

    width: 100%;
    min-width: 0;
    height: 45px;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: var(--fx-text);

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;

    box-shadow: none;
}

.fx-login-input-wrap input::placeholder {
    color: var(--fx-text-soft);
    opacity: .82;
}

.fx-login-input-wrap input:focus {
    outline: none;
    box-shadow: none;
}

.fx-login-forgot {
    flex: 0 0 auto;

    color: var(--fx-copper-dark);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;

    text-decoration: none;
}

.fx-login-forgot:hover {
    color: var(--fx-copper);
    text-decoration: underline;
}


/* =========================================================
   SHOW / HIDE PASSWORD
========================================================= */

.fx-login-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 29px;

    width: 29px;
    height: 32px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: var(--fx-text-soft);

    font-size: 13px;

    cursor: pointer;
}

.fx-login-password-toggle:hover {
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

.fx-login-password-toggle:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 2px;
}


/* =========================================================
   ERROR VALIDATION
========================================================= */

.fx-login-error {
    display: none;

    margin-top: 6px;

    color: var(--fx-login-error);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.fx-login-field.has-error .fx-login-error {
    display: block;
}

.fx-login-field.has-error .fx-login-input-wrap {
    border-color: var(--fx-login-error);

    background:
        color-mix(
            in srgb,
            var(--fx-login-error) 4%,
            var(--fx-off-white)
        );

    box-shadow:
        0 0 0 2px rgba(181,46,40,.07);
}

.fx-login-field.has-error .fx-login-input-icon {
    color: var(--fx-login-error);
}

.fx-login-input-wrap input[aria-invalid="true"] {
    color: var(--fx-text);
}

.fx-login-form-message {
    display: none;

    margin: 0 0 12px;
    padding: 10px 12px;

    border: 1px solid rgba(181,46,40,.24);
    border-radius: 7px;

    background: rgba(181,46,40,.07);
    color: var(--fx-login-error);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.fx-login-form-message.is-visible {
    display: block;
}

.fx-login-form-message.is-success {
    border-color: rgba(75,140,86,.28);
    background: rgba(75,140,86,.08);
    color: #367343;
}


/* =========================================================
   REMEMBER ME
========================================================= */

.fx-login-form-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 12px;

    margin-top: -2px;
    margin-bottom: 19px;
}

.fx-login-remember {
    display: inline-flex;
    align-items: center;

    position: relative;

    gap: 8px;

    color: var(--fx-text-soft);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;

    cursor: pointer;
    user-select: none;
}

.fx-login-remember input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.fx-login-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    border: 1px solid var(--fx-border);
    border-radius: 4px;

    background: var(--fx-off-white);
    color: #FFFFFF;

    transition:
        background-color .2s ease,
        border-color .2s ease;
}

.fx-login-remember input:checked + .fx-login-checkmark {
    border-color: var(--fx-copper);
    background: var(--fx-copper);
}

.fx-login-remember input:checked + .fx-login-checkmark::after {
    content: "\2713";

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.fx-login-remember input:focus-visible + .fx-login-checkmark {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}


/* =========================================================
   SIGN IN BUTTON
   Same Login button design language
========================================================= */

.fx-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    width: 100%;
    min-height: 44px;

    gap: 10px;
    padding: 0 17px;

    border: 1px solid var(--fx-copper);
    border-radius: 8px;

    background: var(--fx-copper);
    color: #FFFFFF;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.fx-login-submit:hover {
    background: var(--fx-copper-dark);
    border-color: var(--fx-copper-dark);
    color: #FFFFFF;

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(184,115,51,.18);
}

.fx-login-submit:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

.fx-login-submit:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.fx-login-submit i {
    font-size: 11px;
    transition: transform .2s ease;
}

.fx-login-submit:hover i {
    transform: translateX(3px);
}


/* =========================================================
   SOCIAL SIGN-IN
========================================================= */

.fx-login-divider {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;
    margin: 23px 0 15px;
}

.fx-login-divider span {
    display: block;

    flex: 1;
    min-width: 0;
    height: 1px;

    background: var(--fx-border);
}

.fx-login-divider p {
    flex: 0 0 auto;

    margin: 0;

    color: var(--fx-text-soft);

    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .09em;

    white-space: nowrap;
}

.fx-login-socials {
    display: grid;

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

    gap: 9px;

    width: 100%;
}

.fx-login-social {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 42px;

    gap: 8px;
    padding: 0 7px;

    border: 1px solid var(--fx-border);
    border-radius: 8px;

    background: var(--fx-white);
    color: var(--fx-text);

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.fx-login-social i {
    flex: 0 0 auto;
    font-size: 14px;
}

.fx-login-social:hover {
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);

    transform: translateY(-1px);
}

.fx-login-social:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 2px;
}


/* =========================================================
   SIGNUP LINK
========================================================= */

.fx-login-signup {
    margin: 22px 0 0;

    color: var(--fx-text-soft);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.7;

    text-align: center;
}

.fx-login-signup a {
    margin-inline-start: 4px;

    color: var(--fx-copper-dark);

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}

.fx-login-signup a:hover {
    color: var(--fx-copper);
    text-decoration: underline;
}


/* =========================================================
   FORM TRUST NOTE
========================================================= */

.fx-login-trust-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 24px;
    padding-top: 15px;

    border-top: 1px solid var(--fx-border);

    color: var(--fx-text-soft);

    font-size: 9px;
    font-weight: 500;
    line-height: 1.55;

    text-align: center;
}

.fx-login-trust-note i {
    flex: 0 0 auto;
    color: var(--fx-copper-dark);
    font-size: 11px;
}


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

@keyframes fxLoginRise {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fx-login-card {
    animation: fxLoginRise .45s ease both;
}

.fx-login-vehicle-stage img {
    animation: fxLoginRise .6s ease both;
}

.fx-login-vehicle-van {
    animation-delay: .08s !important;
}

.fx-login-vehicle-truck {
    animation-delay: .16s !important;
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (max-width: 1439px) {
    .fx-login-card {
        max-width: 1180px;
    }

    .fx-login-brand-panel {
        padding-inline: 32px;
    }

    .fx-login-form-panel {
        padding-inline: 32px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) and (min-width: 851px) {
    .fx-login-stage {
        padding-inline: 22px;
    }

    .fx-login-card {
        min-height: 640px;
    }

    .fx-login-brand-panel,
    .fx-login-form-panel {
        min-height: 640px;
    }

    .fx-login-brand-panel {
        padding: 29px 26px 21px;
    }

    .fx-login-form-panel {
        padding: 30px 27px;
    }

    .fx-login-intro {
        margin-top: 37px;
    }

    .fx-login-intro h1 {
        font-size: clamp(30px,3.2vw,38px);
    }

    .fx-login-intro p {
        font-size: 11px;
    }

    .fx-login-vehicle-stage {
        height: 200px;
    }

    .fx-login-vehicle-car {
        height: 120px;
    }

    .fx-login-vehicle-van {
        height: 155px;
    }

    .fx-login-vehicle-truck {
        height: 185px;
    }

    .fx-login-capabilities {
        gap: 7px;
    }

    .fx-login-capability {
        gap: 6px;
    }

    .fx-login-capability-icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
        font-size: 10px;
    }

    .fx-login-capability strong {
        font-size: 8px;
    }

    .fx-login-capability small {
        font-size: 7px;
    }

    .fx-login-form-content {
        max-width: 390px;
    }
}

/* =========================================================
   FLEETAXIS LOGIN PAGE
   Page-specific styles only
   Existing shared theme variables are reused.
========================================================= */

body.fx-login-page {
    --fx-login-error: #B52E28;
    --fx-login-panel-radius: 22px;

    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
}

/* =========================================================
   TOP CONTROLS — OUTSIDE LOGIN CONTAINER
========================================================= */

.fx-login-controls {
    position: fixed;
    z-index: 100;
    top: 18px;
    right: 24px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    direction: ltr;
}

.fx-login-controls .fx-icon-button,
.fx-login-controls .fx-rtl-button {
    flex: 0 0 auto;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-white);
    color: var(--fx-text);

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
    transition:
        background-color var(--fx-transition),
        border-color var(--fx-transition),
        color var(--fx-transition),
        transform var(--fx-transition);
}

.fx-login-controls .fx-icon-button:hover,
.fx-login-controls .fx-rtl-button:hover {
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

.fx-login-controls .fx-icon-button:focus-visible,
.fx-login-controls .fx-rtl-button:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}


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

.fx-login-stage {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

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

    padding:
        82px
        28px
        28px;
}


/* =========================================================
   MAIN RECTANGULAR CONTAINER
   Equal 50/50 panels on desktop and laptop
========================================================= */

.fx-login-card {
    display: grid;

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

    grid-template-areas:
        "brand form";

    align-items: stretch;

    width: 100%;
    max-width: 1240px;

    min-height: 660px;

    margin: auto;

    overflow: hidden;

    border: 1px solid var(--fx-border);
    border-radius: var(--fx-login-panel-radius);

    background: var(--fx-white);

    box-shadow:
        0 25px 75px rgba(32, 32, 32, .10);
}


/* =========================================================
   LEFT BRAND PANEL
========================================================= */

.fx-login-brand-panel {
    grid-area: brand;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 660px;

    overflow: hidden;

    padding: 36px 38px 24px;

    background:
        linear-gradient(
            145deg,
            #202020 0%,
            #151515 58%,
            #211C17 100%
        );

    color: #F8F5F0;
}

.fx-login-brand-panel::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 100px;
    left: -130px;

    width: 370px;
    height: 370px;

    border: 1px solid rgba(212, 154, 99, .15);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(212,154,99,.025),
        0 0 0 75px rgba(212,154,99,.02);

    pointer-events: none;
}

.fx-login-brand-panel::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(243, 230, 208, .045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243, 230, 208, .045) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    opacity: .45;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 30%,
            black 88%,
            transparent 100%
        );

    pointer-events: none;
}

.fx-login-brand-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex: 1;
    flex-direction: column;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   BRAND LOGO + LOGONAME
========================================================= */

.fx-login-brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    width: fit-content;
    max-width: 100%;

    gap: 11px;

    color: #F8F5F0;
    text-decoration: none;

    direction: ltr;
}

.fx-login-brand:hover {
    color: #FFFFFF;
}

.fx-login-brand .fx-brand-logo {
    position: relative;

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

    width: 42px;
    height: 46px;

    flex: 0 0 42px;
}

.fx-login-brand .fx-logo-svg {
    display: block;

    width: 100%;
    height: 100%;
}

.fx-login-brand .fx-logo-pin {
    fill: #B87333;
}

.fx-login-brand .fx-logo-car {
    fill: #FFFFFF;
}

.fx-login-brand .fx-logo-window,
.fx-login-brand .fx-logo-wheel {
    fill: #D49A63;
}

.fx-login-brand .fx-brand-name {
    color: #F8F5F0;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .055em;
}


/* =========================================================
   LEFT PANEL INTRO
========================================================= */

.fx-login-intro {
    margin-top: 47px;
}

.fx-login-eyebrow {
    display: block;

    margin-bottom: 17px;

    color: #D49A63;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .12em;
}

.fx-login-intro h1 {
    max-width: 475px;

    margin: 0;

    color: #F8F5F0;

    font-family: "Inter", sans-serif;
    font-size: clamp(32px, 3.1vw, 45px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.035em;

    overflow-wrap: anywhere;
}

.fx-login-intro h1 span {
    display: block;
    margin-top: 4px;

    color: #D49A63;
}

.fx-login-intro p {
    max-width: 435px;

    margin: 17px 0 0;

    color: #C8C0B7;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;

    overflow-wrap: anywhere;
}


/* =========================================================
   EXISTING VEHICLE IMAGES
   All three images are contained inside the same area.
========================================================= */

.fx-login-vehicle-stage {
    position: relative;
    isolation: isolate;

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

    width: 100%;
    height: 220px;

    min-width: 0;
    margin-top: auto;

    padding: 13px 0 4px;

    overflow: hidden;
}

.fx-login-image-glow {
    position: absolute;
    z-index: -1;

    bottom: 14px;
    left: 50%;

    width: 84%;
    height: 64px;

    background:
        radial-gradient(
            ellipse,
            rgba(184, 115, 51, .24) 0%,
            rgba(184, 115, 51, .07) 45%,
            transparent 75%
        );

    transform: translateX(-50%);

    filter: blur(8px);
}

.fx-login-vehicle {
    position: relative;

    display: block;

    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center bottom;

    filter: drop-shadow(0 16px 16px rgba(0,0,0,.24));

    user-select: none;
    pointer-events: none;
}

.fx-login-vehicle-car {
    z-index: 1;

    width: 29%;
    height: 135px;

    margin-right: -5%;
}

.fx-login-vehicle-van {
    z-index: 2;

    width: 34%;
    height: 170px;

    margin-right: -5%;
}

.fx-login-vehicle-truck {
    z-index: 3;

    width: 43%;
    height: 205px;
}


/* =========================================================
   FLEET CAPABILITIES
========================================================= */

.fx-login-capabilities {
    display: grid;

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

    gap: 10px;

    padding-top: 17px;

    border-top:
        1px solid rgba(243, 230, 208, .14);
}

.fx-login-capability {
    display: flex;
    align-items: flex-start;

    min-width: 0;
    gap: 8px;
}

.fx-login-capability-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    border: 1px solid rgba(212, 154, 99, .28);
    border-radius: 7px;

    background: rgba(184, 115, 51, .09);

    color: #D49A63;
    font-size: 11px;
}

.fx-login-capability > span:last-child {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
    gap: 3px;
}

.fx-login-capability strong {
    color: #F3EDE5;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.45;

    overflow-wrap: anywhere;
}

.fx-login-capability small {
    color: #AFA79D;

    font-size: 8px;
    font-weight: 500;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.fx-login-brand-bottom {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 20px;

    color: #AFA79D;

    font-size: 8px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .12em;
}

.fx-login-brand-bottom-line {
    display: block;

    width: 24px;
    height: 1px;

    flex: 0 0 24px;

    background: #B87333;
}


/* =========================================================
   RIGHT FORM PANEL
========================================================= */

.fx-login-form-panel {
    grid-area: form;

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

    min-width: 0;
    min-height: 660px;

    padding: 38px;

    border-left: 1px solid var(--fx-border);

    background: var(--fx-white);
    color: var(--fx-text);
}

.fx-login-form-content {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 405px;
    min-width: 0;

    margin: auto;
}


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

.fx-login-form-heading {
    margin-bottom: 27px;
    text-align: center;
}

.fx-login-form-kicker {
    display: block;

    margin-bottom: 10px;

    color: var(--fx-copper-dark);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .15em;
}

.fx-login-form-heading h2 {
    margin: 0;

    color: var(--fx-black);

    font-family: "Inter", sans-serif;
    font-size: clamp(23px, 2.2vw, 29px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;

    overflow-wrap: anywhere;
}

.fx-login-form-heading p {
    max-width: 330px;

    margin: 10px auto 0;

    color: var(--fx-text-soft);

    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
}


/* =========================================================
   FORM FIELDS
========================================================= */

.fx-login-form {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
}

.fx-login-field {
    display: flex;
    flex-direction: column;

    min-width: 0;

    margin-bottom: 17px;
}

.fx-login-field > label,
.fx-login-label-row > label {
    display: block;

    color: var(--fx-text);

    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.fx-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
    margin-bottom: 8px;
}

.fx-login-field > label {
    margin-bottom: 8px;
}

.fx-login-input-wrap {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
    min-height: 47px;

    gap: 11px;

    padding: 0 13px;

    border: 1px solid var(--fx-border);
    border-radius: 8px;

    background: var(--fx-off-white);
    color: var(--fx-text);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.fx-login-input-wrap:focus-within {
    border-color: var(--fx-copper);

    box-shadow:
        0 0 0 3px rgba(184, 115, 51, .11);
}

.fx-login-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 15px;

    color: var(--fx-copper-dark);
    font-size: 13px;
}

.fx-login-input-wrap input {
    display: block;

    width: 100%;
    min-width: 0;
    height: 45px;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: var(--fx-text);

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;

    box-shadow: none;
}

.fx-login-input-wrap input::placeholder {
    color: var(--fx-text-soft);
    opacity: .82;
}

.fx-login-input-wrap input:focus {
    outline: none;
    box-shadow: none;
}

.fx-login-forgot {
    flex: 0 0 auto;

    color: var(--fx-copper-dark);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;

    text-decoration: none;
}

.fx-login-forgot:hover {
    color: var(--fx-copper);
    text-decoration: underline;
}


/* =========================================================
   SHOW / HIDE PASSWORD
========================================================= */

.fx-login-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 29px;

    width: 29px;
    height: 32px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 6px;

    background: transparent;
    color: var(--fx-text-soft);

    font-size: 13px;

    cursor: pointer;
}

.fx-login-password-toggle:hover {
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

.fx-login-password-toggle:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 2px;
}


/* =========================================================
   ERROR VALIDATION
========================================================= */

.fx-login-error {
    display: none;

    margin-top: 6px;

    color: var(--fx-login-error);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.fx-login-field.has-error .fx-login-error {
    display: block;
}

.fx-login-field.has-error .fx-login-input-wrap {
    border-color: var(--fx-login-error);

    background:
        color-mix(
            in srgb,
            var(--fx-login-error) 4%,
            var(--fx-off-white)
        );

    box-shadow:
        0 0 0 2px rgba(181,46,40,.07);
}

.fx-login-field.has-error .fx-login-input-icon {
    color: var(--fx-login-error);
}

.fx-login-input-wrap input[aria-invalid="true"] {
    color: var(--fx-text);
}

.fx-login-form-message {
    display: none;

    margin: 0 0 12px;
    padding: 10px 12px;

    border: 1px solid rgba(181,46,40,.24);
    border-radius: 7px;

    background: rgba(181,46,40,.07);
    color: var(--fx-login-error);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.fx-login-form-message.is-visible {
    display: block;
}

.fx-login-form-message.is-success {
    border-color: rgba(75,140,86,.28);
    background: rgba(75,140,86,.08);
    color: #367343;
}


/* =========================================================
   REMEMBER ME
========================================================= */

.fx-login-form-options {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 12px;

    margin-top: -2px;
    margin-bottom: 19px;
}

.fx-login-remember {
    display: inline-flex;
    align-items: center;

    position: relative;

    gap: 8px;

    color: var(--fx-text-soft);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;

    cursor: pointer;
    user-select: none;
}

.fx-login-remember input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.fx-login-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    border: 1px solid var(--fx-border);
    border-radius: 4px;

    background: var(--fx-off-white);
    color: #FFFFFF;

    transition:
        background-color .2s ease,
        border-color .2s ease;
}

.fx-login-remember input:checked + .fx-login-checkmark {
    border-color: var(--fx-copper);
    background: var(--fx-copper);
}

.fx-login-remember input:checked + .fx-login-checkmark::after {
    content: "\2713";

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.fx-login-remember input:focus-visible + .fx-login-checkmark {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}


/* =========================================================
   SIGN IN BUTTON
   Same Login button design language
========================================================= */

.fx-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    width: 100%;
    min-height: 44px;

    gap: 10px;
    padding: 0 17px;

    border: 1px solid var(--fx-copper);
    border-radius: 8px;

    background: var(--fx-copper);
    color: #FFFFFF;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.fx-login-submit:hover {
    background: var(--fx-copper-dark);
    border-color: var(--fx-copper-dark);
    color: #FFFFFF;

    transform: translateY(-1px);

    box-shadow:
        0 8px 20px rgba(184,115,51,.18);
}

.fx-login-submit:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

.fx-login-submit:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.fx-login-submit i {
    font-size: 11px;
    transition: transform .2s ease;
}

.fx-login-submit:hover i {
    transform: translateX(3px);
}


/* =========================================================
   SOCIAL SIGN-IN
========================================================= */

.fx-login-divider {
    display: flex;
    align-items: center;

    gap: 12px;

    width: 100%;
    margin: 23px 0 15px;
}

.fx-login-divider span {
    display: block;

    flex: 1;
    min-width: 0;
    height: 1px;

    background: var(--fx-border);
}

.fx-login-divider p {
    flex: 0 0 auto;

    margin: 0;

    color: var(--fx-text-soft);

    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .09em;

    white-space: nowrap;
}

.fx-login-socials {
    display: grid;

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

    gap: 9px;

    width: 100%;
}

.fx-login-social {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 42px;

    gap: 8px;
    padding: 0 7px;

    border: 1px solid var(--fx-border);
    border-radius: 8px;

    background: var(--fx-white);
    color: var(--fx-text);

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.fx-login-social i {
    flex: 0 0 auto;
    font-size: 14px;
}

.fx-login-social:hover {
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);

    transform: translateY(-1px);
}

.fx-login-social:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 2px;
}


/* =========================================================
   SIGNUP LINK
========================================================= */

.fx-login-signup {
    margin: 22px 0 0;

    color: var(--fx-text-soft);

    font-size: 10px;
    font-weight: 500;
    line-height: 1.7;

    text-align: center;
}

.fx-login-signup a {
    margin-inline-start: 4px;

    color: var(--fx-copper-dark);

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}

.fx-login-signup a:hover {
    color: var(--fx-copper);
    text-decoration: underline;
}


/* =========================================================
   FORM TRUST NOTE
========================================================= */

.fx-login-trust-note {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 24px;
    padding-top: 15px;

    border-top: 1px solid var(--fx-border);

    color: var(--fx-text-soft);

    font-size: 9px;
    font-weight: 500;
    line-height: 1.55;

    text-align: center;
}

.fx-login-trust-note i {
    flex: 0 0 auto;
    color: var(--fx-copper-dark);
    font-size: 11px;
}


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

@keyframes fxLoginRise {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fx-login-card {
    animation: fxLoginRise .45s ease both;
}

.fx-login-vehicle-stage img {
    animation: fxLoginRise .6s ease both;
}

.fx-login-vehicle-van {
    animation-delay: .08s !important;
}

.fx-login-vehicle-truck {
    animation-delay: .16s !important;
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (max-width: 1439px) {
    .fx-login-card {
        max-width: 1180px;
    }

    .fx-login-brand-panel {
        padding-inline: 32px;
    }

    .fx-login-form-panel {
        padding-inline: 32px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) and (min-width: 851px) {
    .fx-login-stage {
        padding-inline: 22px;
    }

    .fx-login-card {
        min-height: 640px;
    }

    .fx-login-brand-panel,
    .fx-login-form-panel {
        min-height: 640px;
    }

    .fx-login-brand-panel {
        padding: 29px 26px 21px;
    }

    .fx-login-form-panel {
        padding: 30px 27px;
    }

    .fx-login-intro {
        margin-top: 37px;
    }

    .fx-login-intro h1 {
        font-size: clamp(30px,3.2vw,38px);
    }

    .fx-login-intro p {
        font-size: 11px;
    }

    .fx-login-vehicle-stage {
        height: 200px;
    }

    .fx-login-vehicle-car {
        height: 120px;
    }

    .fx-login-vehicle-van {
        height: 155px;
    }

    .fx-login-vehicle-truck {
        height: 185px;
    }

    .fx-login-capabilities {
        gap: 7px;
    }

    .fx-login-capability {
        gap: 6px;
    }

    .fx-login-capability-icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
        font-size: 10px;
    }

    .fx-login-capability strong {
        font-size: 8px;
    }

    .fx-login-capability small {
        font-size: 7px;
    }

    .fx-login-form-content {
        max-width: 390px;
    }
}

/* =========================================================
   FLEETAXIS LOGIN — MOBILE STACKING FIX
   Mobile-S, Mobile-M and Mobile-L only
   Left panel first, login form underneath
========================================================= */

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

    body.fx-login-page {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body.fx-login-page .fx-login-stage {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 100dvh;

        padding: 65px 10px 16px !important;
        overflow: visible;
    }

    /* Force the main container into one column */
    body.fx-login-page .fx-login-card {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "brand"
            "form" !important;

        align-items: stretch !important;

        width: 100% !important;
        max-width: 520px !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 auto !important;
        overflow: hidden !important;

        border-radius: 14px;
    }

    /* LEFT SECTION — first row */
    body.fx-login-page .fx-login-card .fx-login-brand-panel {
        grid-area: brand !important;
        grid-column: 1 !important;
        grid-row: 1 !important;

        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;

        padding: 22px 17px 18px !important;
        overflow: hidden !important;
    }

    body.fx-login-page .fx-login-brand-content {
        width: 100%;
        min-width: 0;
    }

    body.fx-login-page .fx-login-brand {
        align-self: flex-start;
        max-width: 100%;
    }

    body.fx-login-page .fx-login-intro {
        width: 100%;
        min-width: 0;
        margin-top: 22px !important;
    }

    body.fx-login-page .fx-login-intro h1 {
        max-width: 100%;
        font-size: clamp(26px, 7vw, 34px);
        line-height: 1.17;
        overflow-wrap: break-word;
    }

    body.fx-login-page .fx-login-intro h1 span {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    body.fx-login-page .fx-login-intro p {
        max-width: 100%;
        font-size: 11px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

    /* Keep the vehicle illustration within the first panel */
    body.fx-login-page .fx-login-vehicle-stage {
        width: 100%;
        min-width: 0;
        height: clamp(115px, 35vw, 155px);
        margin-top: 14px;
        overflow: hidden;
    }

    body.fx-login-page .fx-login-vehicle {
        max-width: 44%;
        min-width: 0;
        object-fit: contain;
    }

    body.fx-login-page .fx-login-vehicle-car {
        height: 75%;
    }

    body.fx-login-page .fx-login-vehicle-van {
        height: 88%;
    }

    body.fx-login-page .fx-login-vehicle-truck {
        height: 100%;
    }

    body.fx-login-page .fx-login-capabilities {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        gap: 11px;
    }

    body.fx-login-page .fx-login-capability {
        width: 100%;
        min-width: 0;
    }

    body.fx-login-page .fx-login-capability strong,
    body.fx-login-page .fx-login-capability small {
        overflow-wrap: anywhere;
    }

    /* RIGHT SECTION — second row */
    body.fx-login-page .fx-login-card .fx-login-form-panel {
        grid-area: form !important;
        grid-column: 1 !important;
        grid-row: 2 !important;

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

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;

        padding: 28px 17px 24px !important;

        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 1px solid var(--fx-border) !important;

        overflow: visible !important;
    }

    body.fx-login-page .fx-login-form-content {
        width: 100% !important;
        max-width: 430px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }

    body.fx-login-page .fx-login-form-heading {
        width: 100%;
        text-align: center;
    }

    body.fx-login-page .fx-login-form-heading h2 {
        font-size: clamp(21px, 5.8vw, 25px);
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    body.fx-login-page .fx-login-form,
    body.fx-login-page .fx-login-field,
    body.fx-login-page .fx-login-input-wrap {
        width: 100%;
        min-width: 0;
    }

    body.fx-login-page .fx-login-input-wrap input {
        flex: 1 1 auto;
        width: 0;
        min-width: 0;
    }

    body.fx-login-page .fx-login-label-row {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    body.fx-login-page .fx-login-socials {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100%;
        gap: 6px;
    }

    body.fx-login-page .fx-login-social {
        min-width: 0;
        padding: 0 4px;
        gap: 5px;
        font-size: 9px;
    }

    body.fx-login-page .fx-login-social span {
        overflow-wrap: anywhere;
    }

    body.fx-login-page .fx-login-controls {
        top: 10px;
        right: 10px;
        z-index: 200;
    }

    /* Prevent long error messages from widening the page */
    body.fx-login-page .fx-login-error,
    body.fx-login-page .fx-login-form-message {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Preserve dark-mode divider contrast */
    html.dark-mode body.fx-login-page .fx-login-form-panel {
        border-top-color: rgba(243, 230, 208, .13) !important;
    }
}


/* Extra-tight screens: Mobile-S */
@media screen and (max-width: 359px) {

    body.fx-login-page .fx-login-stage {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }

    body.fx-login-page .fx-login-brand-panel {
        padding: 19px 12px 15px !important;
    }

    body.fx-login-page .fx-login-form-panel {
        padding: 23px 12px 20px !important;
    }

    body.fx-login-page .fx-login-socials {
        gap: 4px;
    }

    body.fx-login-page .fx-login-social {
        font-size: 8px;
    }
}
/* =========================================================
   FLEETAXIS — HOME 2 · SECTIONS 04 & 05
   Paste at the end of your existing styles.css.

   Every class is scoped with its own prefix
   (fx-mp-… and fx-lt-…) so nothing existing changes.
   Only your colour tokens (--fx-…) and the shared
   .fx-btn / .fx-btn-primary / .fx-btn-ghost buttons are reused.
========================================================= */


/* =========================================================
   SECTION 04 — MAINTENANCE PLANNER
========================================================= */

.fx-mp {
    --hero-dir: 1;
    --mp-accent: var(--fx-copper-dark);
    --mp-tint: rgba(184, 115, 51, .10);

    position: relative;
    isolation: isolate;
    padding: 96px 0 104px;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
}

.fx-mp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .6;
    background-image: radial-gradient(var(--fx-border) 1.2px, transparent 1.6px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0, transparent 65%);
            mask-image: radial-gradient(ellipse at 100% 0%, #000 0, transparent 65%);
}

.fx-mp-wrap {
    position: relative;
    width: min(1440px, calc(100% - 140px));
    margin: 0 auto;
}

.fx-mp-layout {
    display: grid;
    grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
    gap: 72px;
    align-items: center;
}

.fx-mp-copy { min-width: 0; max-width: 540px; }


/* ---------- copy ---------- */

.fx-mp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    background: var(--fx-white);
    color: var(--fx-copper-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.fx-mp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fx-copper);
    box-shadow: 0 0 0 0 rgba(184, 115, 51, .5);
    animation: fxMpPulse 1.8s ease-out infinite;
}

.fx-mp-title {
    margin: 20px 0 16px;
    font-family: "Inter", sans-serif;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--fx-black);
    text-wrap: balance;
}

.fx-mp-accent { color: var(--fx-copper); }

.fx-mp-text {
    max-width: 560px;
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--fx-text-soft);
}

.fx-mp-points {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
}

.fx-mp-points li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--fx-border);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--fx-black);
}

.fx-mp-points li:last-child { border-bottom: 1px solid var(--fx-border); }

.fx-mp-point-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--mp-tint);
    color: var(--mp-accent);
    font-size: 14px;
}

.fx-mp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}


/* ---------- board ---------- */

.fx-mp-board {
    min-width: 0;
    padding: 30px;
    border: 1px solid var(--fx-border);
    border-radius: 24px;
    background: var(--fx-white);
    box-shadow: 0 30px 70px rgba(32, 32, 32, .08);
}

.fx-mp-board-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.fx-mp-board-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--fx-text-soft);
}

.fx-mp-board-title {
    margin: 2px 0 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--fx-black);
}

.fx-mp-fill {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fx-text-soft);
}

.fx-mp-fill b {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--fx-black);
}

.fx-mp-meter {
    height: 6px;
    margin-bottom: 26px;
    border-radius: 999px;
    background: var(--fx-border);
    overflow: hidden;
}

.fx-mp-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--fx-copper), var(--fx-copper-light));
    transition: width .8s cubic-bezier(.2, .8, .2, 1);
}

.fx-mp-tabs { display: none; }

.fx-mp-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.fx-mp-day {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.fx-mp-day-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--fx-border);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fx-text-soft);
}

.fx-mp-today-tag { display: none; }

.fx-mp-day.is-today .fx-mp-day-name {
    border-bottom-color: var(--fx-copper);
    color: var(--fx-black);
}

.fx-mp-day.is-today .fx-mp-today-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--mp-tint);
    color: var(--mp-accent);
    font-size: 11px;
    letter-spacing: .02em;
    text-transform: none;
}


/* ---------- slots ---------- */

.fx-mp-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 100px;
    min-width: 0;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid var(--fx-border);
    border-radius: 14px;
    background: transparent;
    color: var(--fx-black);
    font: inherit;
    text-align: start;
}

.fx-mp-time {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--fx-text-soft);
}

.fx-mp-vehicle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fx-black);
}

.fx-mp-vehicle i { font-size: 12px; color: var(--mp-accent); }

.fx-mp-service {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--fx-text-soft);
}

.fx-mp-slot.is-booked {
    border-color: transparent;
    border-inline-start: 3px solid var(--fx-copper);
    background: var(--mp-tint);
}

.fx-mp-slot.is-open {
    border-style: dashed;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.fx-mp-slot.is-open:hover {
    border-color: var(--fx-copper);
    background: var(--mp-tint);
    transform: translateY(-2px);
}

.fx-mp-slot.is-mine { cursor: pointer; }

.fx-mp-slot:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

.fx-mp-open {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--mp-accent);
}

.fx-mp-open i { font-size: 11px; }

.fx-mp-check {
    position: absolute;
    top: 13px;
    inset-inline-end: 13px;
    font-size: 15px;
    color: var(--mp-accent);
}

.fx-mp-slot.is-new { animation: fxMpPop .6s cubic-bezier(.2, .8, .2, 1); }

.fx-mp-hint {
    margin: 22px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fx-text-soft);
}


/* ---------- stats ---------- */

.fx-mp-stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin: 96px 0 0;
    padding: 48px 0 0;
    border-top: 1px solid var(--fx-border);
}

.fx-mp-stat-num {
    display: block;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--fx-black);
}

.fx-mp-stat-num em { font-style: normal; color: var(--fx-copper); }

.fx-mp-stat-label {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fx-text-soft);
}


/* ---------- motion ---------- */

.fx-mp.is-ready [data-mp-reveal] { opacity: 0; }

.fx-mp.is-ready [data-mp-reveal].is-in {
    opacity: 1;
    animation: fxMpRise .85s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards;
}

.fx-mp.is-ready .fx-mp-board:not(.is-in) .fx-mp-slot { opacity: 0; }

.fx-mp.is-ready .fx-mp-board.is-in .fx-mp-slot {
    animation: fxMpSlot .6s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i, 0) * .07s) backwards;
}

.fx-mp.is-ready .fx-mp-board.is-in .fx-mp-slot.is-new { animation: fxMpPop .6s cubic-bezier(.2, .8, .2, 1); }

@keyframes fxMpRise  { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes fxMpSlot  { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fxMpPop   { 0% { transform: scale(.94); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes fxMpPulse { to { box-shadow: 0 0 0 10px rgba(184, 115, 51, 0); } }


/* =========================================================
   SECTION 05 — LEASE TERM TRACKER
========================================================= */

.fx-lt {
    --hero-dir: 1;
    --lt-accent: var(--fx-copper-dark);
    --lt-tint: rgba(184, 115, 51, .12);
    --lt-today: 44.5%;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 104px 0 112px;
    background: var(--fx-champagne);
    color: var(--fx-text);
}

.fx-lt-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.fx-lt-glow {
    position: absolute;
    top: -240px;
    inset-inline-end: -180px;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 115, 51, .22), transparent 68%);
    animation: fxLtDrift 14s ease-in-out infinite;
}

.fx-lt-wrap {
    position: relative;
    width: min(1440px, calc(100% - 140px));
    margin: 0 auto;
}


/* ---------- head ---------- */

.fx-lt-head {
    max-width: 760px;
    margin: 0 auto 72px;
    text-align: center;
}

.fx-lt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    background: var(--fx-white);
    color: var(--fx-copper-dark);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.fx-lt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fx-copper);
    box-shadow: 0 0 0 0 rgba(184, 115, 51, .5);
    animation: fxLtPulse 1.8s ease-out infinite;
}

.fx-lt-title {
    margin: 20px 0 16px;
    font-family: "Inter", sans-serif;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--fx-black);
    text-wrap: balance;
}

.fx-lt-accent { color: var(--fx-copper); }

.fx-lt-text {
    max-width: 560px;
    margin: 0 auto;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--fx-text-soft);
}


/* ---------- layout ---------- */

.fx-lt-layout {
    display: grid;
    grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr);
    gap: 40px;
    align-items: stretch;
}


/* ---------- timeline ---------- */

.fx-lt-chart {
    min-width: 0;
    padding: 36px 40px 28px;
    border: 1px solid var(--fx-border);
    border-radius: 24px;
    background: var(--fx-white);
    box-shadow: 0 30px 70px rgba(32, 32, 32, .08);
}

.fx-lt-rows {
    position: relative;
    isolation: isolate;
    padding-top: 36px;
    background-image: linear-gradient(to right, var(--fx-border) 1px, transparent 1px);
    background-size: 25% 100%;
    background-position: 0 0;
    background-repeat: repeat-x;
}

.fx-lt-today {
    position: absolute;
    top: 0;
    inset-inline-start: var(--lt-today);
    z-index: 3;
    width: 0;
    height: 24px;
    pointer-events: none;
}

.fx-lt-today b {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    transform: translateX(calc(var(--hero-dir) * -50%));
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.fx-lt-row {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.fx-lt-row::before {
    content: "";
    position: absolute;
    inset-block: 3px;
    inset-inline: -18px;
    z-index: -1;
    border-radius: 14px;
    background: var(--lt-tint);
    opacity: 0;
    transition: opacity .25s ease;
}

.fx-lt-row:hover::before,
.fx-lt-row.is-active::before { opacity: 1; }

.fx-lt-row:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 2px;
    border-radius: 12px;
}

.fx-lt-row-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 10px;
}

.fx-lt-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fx-black);
}

.fx-lt-name i { font-size: 13px; color: var(--lt-accent); }

.fx-lt-left {
    font-size: 14px;
    font-weight: 500;
    color: var(--fx-text-soft);
}

.fx-lt-row.is-hot .fx-lt-left { font-weight: 600; color: var(--lt-accent); }

.fx-lt-track {
    position: relative;
    z-index: 0;
    display: block;
    height: 14px;
    border-radius: 999px;
    background: var(--fx-border);
}

/* "today" marker on every bar, so no label ever sits under a line */
.fx-lt-track::after {
    content: "";
    position: absolute;
    top: -7px;
    bottom: -7px;
    inset-inline-start: var(--lt-today);
    z-index: 3;
    width: 2px;
    margin-inline-start: -1px;
    border-radius: 2px;
    background: var(--fx-copper);
}

.fx-lt-bar {
    position: absolute;
    top: 0;
    inset-inline-start: var(--s);
    display: block;
    width: var(--w);
    height: 100%;
    border: 1.5px solid var(--fx-copper);
    border-radius: 999px;
    background: var(--lt-tint);
    overflow: hidden;
}

.fx-lt-fill {
    display: block;
    width: var(--f);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fx-copper), var(--fx-copper-light));
}

.fx-lt-row.is-hot .fx-lt-bar { animation: fxLtGlow 2.2s ease-out infinite; }

.fx-lt-axis {
    position: relative;
    height: 30px;
    margin-top: 10px;
}

.fx-lt-axis span {
    position: absolute;
    top: 6px;
    inset-inline-start: var(--x);
    padding-inline-start: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--fx-text-soft);
}

.fx-lt-note {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fx-text-soft);
}


/* ---------- selected lease ---------- */

.fx-lt-detail {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    padding: 36px 32px;
    border: 1px solid var(--fx-border);
    border-radius: 24px;
    background: var(--fx-white);
    box-shadow: 0 30px 70px rgba(32, 32, 32, .08);
}

.fx-lt-detail.is-swap > * { animation: fxLtSwap .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.fx-lt-detail.is-swap > *:nth-child(2) { animation-delay: .05s; }
.fx-lt-detail.is-swap > *:nth-child(3) { animation-delay: .1s; }
.fx-lt-detail.is-swap > *:nth-child(4) { animation-delay: .15s; }

.fx-lt-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--fx-text-soft);
}

.fx-lt-d-title {
    margin: -8px 0 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--fx-black);
}

.fx-lt-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fx-text-soft);
}

.fx-lt-status i { font-size: 12px; }

.fx-lt-status.is-hot {
    border-color: var(--fx-copper);
    background: var(--lt-tint);
    color: var(--lt-accent);
}

.fx-lt-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    margin: 0;
}

.fx-lt-meta dt {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fx-text-soft);
}

.fx-lt-meta dd {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fx-black);
}

.fx-lt-meter {
    height: 8px;
    margin-top: -6px;
    border-radius: 999px;
    background: var(--fx-border);
    overflow: hidden;
}

.fx-lt-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--fx-copper), var(--fx-copper-light));
    transition: width .8s cubic-bezier(.2, .8, .2, 1);
}

.fx-lt-cta { align-self: flex-start; margin-top: auto; }


/* ---------- foot ---------- */

.fx-lt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px 56px;
    margin-top: 88px;
}

.fx-lt-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 32px 72px;
    margin: 0;
    padding: 0;
}

.fx-lt-stat-num {
    display: block;
    font-size: clamp(36px, 4vw, 54px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--fx-black);
}

.fx-lt-stat-num em { font-style: normal; font-size: .5em; letter-spacing: 0; color: var(--fx-copper-dark); }

.fx-lt-stat-label {
    display: block;
    max-width: 200px;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fx-text-soft);
}

.fx-lt-actions { display: flex; flex-wrap: wrap; gap: 14px; }


/* ---------- motion ---------- */

.fx-lt.is-ready [data-lt-reveal] { opacity: 0; }

.fx-lt.is-ready [data-lt-reveal].is-in {
    opacity: 1;
    animation: fxLtRise .85s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards;
}

/* bars grow, the today line sweeps across, rows rise in turn */

.fx-lt.is-ready .fx-lt-chart:not(.is-in) .fx-lt-fill { width: 0; }
.fx-lt.is-ready .fx-lt-chart:not(.is-in) .fx-lt-today,
.fx-lt.is-ready .fx-lt-chart:not(.is-in) .fx-lt-track::after { inset-inline-start: 0; opacity: 0; }
.fx-lt.is-ready .fx-lt-chart:not(.is-in) .fx-lt-row-top { opacity: 0; }

.fx-lt.is-ready .fx-lt-chart.is-in .fx-lt-fill {
    transition: width 1.5s cubic-bezier(.2, .8, .2, 1) calc(.45s + var(--i, 0) * .12s);
}

.fx-lt.is-ready .fx-lt-chart.is-in .fx-lt-today,
.fx-lt.is-ready .fx-lt-chart.is-in .fx-lt-track::after {
    transition: inset-inline-start 1.7s cubic-bezier(.2, .8, .2, 1) .35s, opacity .4s ease .35s;
}

.fx-lt.is-ready .fx-lt-chart.is-in .fx-lt-row-top {
    animation: fxLtRise .7s cubic-bezier(.2, .8, .2, 1) calc(.2s + var(--i, 0) * .1s) backwards;
}

@keyframes fxLtRise  { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes fxLtSwap  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fxLtPulse { to { box-shadow: 0 0 0 10px rgba(184, 115, 51, 0); } }
@keyframes fxLtGlow  { 0% { box-shadow: 0 0 0 0 rgba(184, 115, 51, .55); } 100% { box-shadow: 0 0 0 9px rgba(184, 115, 51, 0); } }
@keyframes fxLtDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, 30px); } }


/* =========================================================
   RESPONSIVE — LAPTOP L (≥1440) is the base above
========================================================= */

@media (max-width: 1439px) {

    .fx-mp-layout { gap: 56px; }

    .fx-mp-board { padding: 26px; }

    .fx-lt-chart { padding: 32px 34px 26px; }
}


/* ---------- laptop (1024–1199) and below ---------- */

@media (max-width: 1199px) {

    .fx-mp { padding: 80px 0 88px; }
    .fx-lt { padding: 88px 0 96px; }

    .fx-mp-wrap,
    .fx-lt-wrap { width: calc(100% - 80px); }

    .fx-mp-layout { grid-template-columns: minmax(0, 1fr); gap: 52px; }
    .fx-mp-copy { max-width: 680px; }

    .fx-mp-stats { margin-top: 80px; padding-top: 40px; }

    .fx-lt-head { margin-bottom: 56px; }

    .fx-lt-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }

    .fx-lt-detail {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        grid-template-areas:
            "kicker kicker"
            "title  meta"
            "status meta"
            "meter  meter"
            "cta    cta";
        gap: 18px 40px;
        padding: 32px;
    }

    .fx-lt-kicker { grid-area: kicker; }
    .fx-lt-d-title { grid-area: title; margin: 0; }
    .fx-lt-status { grid-area: status; }
    .fx-lt-meta { grid-area: meta; }
    .fx-lt-meter { grid-area: meter; margin-top: 0; }
    .fx-lt-cta { grid-area: cta; margin-top: 6px; }

    .fx-lt-foot { margin-top: 72px; }
}


/* ---------- tablet (768–1023) ---------- */

@media (max-width: 1023px) {

    .fx-mp-board { padding: 24px; }
    .fx-mp-grid { gap: 10px; }
    .fx-mp-slot { padding: 12px; min-height: 96px; }

    .fx-lt-chart { padding: 28px 28px 24px; }
}


/* ---------- mobile L / M / S (≤767) ---------- */

@media (max-width: 767px) {

    .fx-mp { padding: 64px 0 72px; }
    .fx-lt { padding: 64px 0 72px; }

    .fx-mp-wrap,
    .fx-lt-wrap { width: calc(100% - 48px); }

    .fx-mp-text,
    .fx-lt-text { font-size: 16px; }

    .fx-mp-layout { gap: 40px; }

    .fx-mp-points { margin-top: 28px; }
    .fx-mp-actions { margin-top: 32px; }

    .fx-mp-board { padding: 20px; border-radius: 20px; }
    .fx-mp-board-title { font-size: 22px; }
    .fx-mp-fill b { font-size: 24px; }
    .fx-mp-meter { margin-bottom: 20px; }

    /* day tabs replace the five-column week */
    .fx-mp-tabs {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 16px;
    }

    .fx-mp-tab {
        min-height: 42px;
        padding: 0 4px;
        border: 1.5px solid var(--fx-border);
        border-radius: 999px;
        background: transparent;
        color: var(--fx-text-soft);
        font-size: 13px;
        font-weight: 600;
        transition: border-color .25s ease, background-color .25s ease, color .25s ease;
    }

    .fx-mp-tab:hover { border-color: var(--fx-copper); color: var(--fx-black); }

    .fx-mp-tab.is-active {
        border-color: var(--fx-copper);
        background: var(--fx-copper);
        color: #FFFFFF;
    }

    .fx-mp-tab:focus-visible { outline: 2px solid var(--fx-copper); outline-offset: 3px; }

    .fx-mp-grid { grid-template-columns: minmax(0, 1fr); }

    .fx-mp.is-ready .fx-mp-day:not(.is-active) { display: none; }

    .fx-mp.is-ready .fx-mp-day-name { display: none; }

    .fx-mp-slot {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 14px;
        row-gap: 2px;
        min-height: 78px;
        padding: 14px 16px;
    }

    .fx-mp-time { grid-row: 1 / 3; align-self: center; }
    .fx-mp-vehicle { grid-column: 2; }
    .fx-mp-service { grid-column: 2; }
    .fx-mp-open { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
    .fx-mp-check { top: 50%; transform: translateY(-50%); }

    .fx-mp-stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        margin-top: 64px;
        padding-top: 36px;
    }

    .fx-mp-stats li { display: flex; align-items: baseline; gap: 18px; }
    .fx-mp-stat-num { flex: 0 0 120px; font-size: 38px; }
    .fx-mp-stat-label { margin-top: 0; font-size: 15px; }


    /* lease tracker */

    .fx-lt-head { margin-bottom: 40px; }

    .fx-lt-chart { padding: 24px 22px 20px; border-radius: 20px; }
    .fx-lt-row::before { inset-inline: -12px; }
    .fx-lt-name { font-size: 15px; }
    .fx-lt-left { font-size: 13px; }

    .fx-lt-detail {
        display: flex;
        gap: 20px;
        padding: 28px 24px;
        border-radius: 20px;
    }

    .fx-lt-d-title { font-size: 26px; }
    .fx-lt-meter { margin-top: -4px; }

    .fx-lt-foot { margin-top: 56px; gap: 36px; }
    .fx-lt-stats { gap: 28px 44px; }
}


/* ---------- mobile L (≤480) ---------- */

@media (max-width: 480px) {

    .fx-mp-actions,
    .fx-lt-actions { width: 100%; }

    .fx-mp-actions .fx-btn,
    .fx-lt-actions .fx-btn,
    .fx-lt-cta { width: 100%; }

    .fx-mp-stats li { gap: 14px; }
    .fx-mp-stat-num { flex-basis: 108px; }

    .fx-lt-meta { gap: 16px 18px; }
}


/* ---------- mobile S (≤359) ---------- */

@media (max-width: 359px) {

    .fx-mp { padding: 56px 0 64px; }
    .fx-lt { padding: 56px 0 64px; }

    .fx-mp-wrap,
    .fx-lt-wrap { width: calc(100% - 32px); }

    .fx-mp-board { padding: 16px; }
    .fx-mp-tab { font-size: 12px; }

    .fx-mp-slot { grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; padding: 12px; }

    .fx-mp-stat-num { flex-basis: 92px; font-size: 32px; }

    .fx-lt-chart { padding: 20px 16px 16px; }
    .fx-lt-row::before { inset-inline: -8px; }
    .fx-lt-detail { padding: 24px 18px; }
    .fx-lt-d-title { font-size: 24px; }
    .fx-lt-meta dd { font-size: 16px; }
}


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

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

    .fx-mp *,
    .fx-lt * { animation: none !important; transition: none !important; }

    .fx-mp.is-ready [data-mp-reveal],
    .fx-lt.is-ready [data-lt-reveal],
    .fx-mp.is-ready .fx-mp-board:not(.is-in) .fx-mp-slot,
    .fx-lt.is-ready .fx-lt-chart:not(.is-in) .fx-lt-row-top { opacity: 1 !important; }

    .fx-lt.is-ready .fx-lt-chart:not(.is-in) .fx-lt-fill { width: var(--f); }

    .fx-lt.is-ready .fx-lt-chart:not(.is-in) .fx-lt-today,
    .fx-lt.is-ready .fx-lt-chart:not(.is-in) .fx-lt-track::after {
        inset-inline-start: var(--lt-today);
        opacity: 1;
    }
}

/* =========================================================
   FLEETAXIS SIGN-UP PAGE
   Strictly scoped to body.fx-signup-page
========================================================= */

body.fx-signup-page {
    --fx-signup-error: #B52E28;

    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
}


/* =========================================================
   TOP CONTROLS — NO NAVBAR
========================================================= */

body.fx-signup-page .fx-signup-controls {
    position: fixed;
    z-index: 500;
    top: 18px;
    right: 24px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;

    direction: ltr;
}

body.fx-signup-page .fx-signup-controls .fx-icon-button,
body.fx-signup-page .fx-signup-controls .fx-rtl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    flex: 0 0 auto;
    min-width: 42px;
    height: 42px;
    padding: 0 10px;

    border: 1px solid var(--fx-border);
    border-radius: 8px;

    background: var(--fx-white);
    color: var(--fx-text);

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease;
}

body.fx-signup-page .fx-signup-controls .fx-icon-button:hover,
body.fx-signup-page .fx-signup-controls .fx-rtl-button:hover {
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

body.fx-signup-page .fx-signup-controls button:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}


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

body.fx-signup-page .fx-signup-stage {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    padding: 82px 28px 28px;
}


/* =========================================================
   MAIN RECTANGLE
   Equal columns and matching top/bottom edges.
========================================================= */

body.fx-signup-page .fx-signup-card {
    display: grid;

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

    grid-template-areas: "brand form";

    align-items: stretch;

    width: 100%;
    max-width: 1280px;
    min-width: 0;
    min-height: 760px;

    margin: auto;
    overflow: hidden;

    border: 1px solid var(--fx-border);
    border-radius: 22px;

    background: var(--fx-white);

    box-shadow: 0 25px 75px rgba(32,32,32,.10);
}


/* =========================================================
   LEFT BRAND PANEL
========================================================= */

body.fx-signup-page .fx-signup-brand-panel {
    grid-area: brand;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 760px;

    padding: 35px 34px 23px;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #202020 0%,
            #151515 58%,
            #211C17 100%
        );

    color: #F8F5F0;
}

body.fx-signup-page .fx-signup-brand-panel::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 105px;
    left: -140px;

    width: 380px;
    height: 380px;

    border: 1px solid rgba(212,154,99,.15);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(212,154,99,.025),
        0 0 0 75px rgba(212,154,99,.02);

    pointer-events: none;
}

body.fx-signup-page .fx-signup-brand-panel::after {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(243,230,208,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243,230,208,.045) 1px,
            transparent 1px
        );

    background-size: 38px 38px;
    opacity: .4;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 90%,
            transparent
        );

    pointer-events: none;
}

body.fx-signup-page .fx-signup-brand-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex: 1;
    flex-direction: column;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   LOGO — SAME MARK AND LOGONAME
========================================================= */

body.fx-signup-page .fx-signup-brand {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    width: fit-content;
    max-width: 100%;
    min-width: 0;

    gap: 11px;
    direction: ltr;

    color: #F8F5F0;
    text-decoration: none;
}

body.fx-signup-page .fx-signup-brand:hover {
    color: #FFFFFF;
}

body.fx-signup-page .fx-signup-brand .fx-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 46px;
    flex: 0 0 42px;
}

body.fx-signup-page .fx-signup-brand .fx-logo-svg {
    display: block;
    width: 100%;
    height: 100%;
}

body.fx-signup-page .fx-signup-brand .fx-logo-pin {
    fill: #B87333;
}

body.fx-signup-page .fx-signup-brand .fx-logo-car {
    fill: #FFFFFF;
}

body.fx-signup-page .fx-signup-brand .fx-logo-window,
body.fx-signup-page .fx-signup-brand .fx-logo-wheel {
    fill: #D49A63;
}

body.fx-signup-page .fx-signup-brand .fx-brand-name {
    color: #F8F5F0;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .055em;
}


/* =========================================================
   LEFT INTRODUCTION
========================================================= */

body.fx-signup-page .fx-signup-intro {
    margin-top: 36px;
}

body.fx-signup-page .fx-signup-eyebrow {
    display: block;
    margin-bottom: 14px;

    color: #D49A63;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .12em;
}

body.fx-signup-page .fx-signup-intro h1 {
    max-width: 470px;
    margin: 0;

    color: #F8F5F0;

    font-family: "Inter", sans-serif;
    font-size: clamp(32px, 3vw, 43px);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -.035em;

    overflow-wrap: anywhere;
}

body.fx-signup-page .fx-signup-intro h1 span {
    display: block;
    margin-top: 4px;
    color: #D49A63;
}

body.fx-signup-page .fx-signup-intro > p {
    max-width: 465px;
    margin: 15px 0 0;

    color: #C8C0B7;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;

    overflow-wrap: anywhere;
}


/* =========================================================
   VEHICLE ILLUSTRATION
========================================================= */

body.fx-signup-page .fx-signup-vehicle-stage {
    position: relative;
    isolation: isolate;

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

    width: 100%;
    height: 190px;
    min-width: 0;

    margin-top: auto;
    padding-top: 12px;

    overflow: hidden;
    direction: ltr;
}

body.fx-signup-page .fx-signup-image-glow {
    position: absolute;
    z-index: -1;

    bottom: 8px;
    left: 50%;

    width: 85%;
    height: 65px;

    background:
        radial-gradient(
            ellipse,
            rgba(184,115,51,.23) 0%,
            rgba(184,115,51,.06) 48%,
            transparent 75%
        );

    filter: blur(8px);
    transform: translateX(-50%);
    pointer-events: none;
}

body.fx-signup-page .fx-signup-vehicle {
    position: relative;

    display: block;
    flex: 0 1 auto;

    min-width: 0;
    max-width: 45%;
    max-height: 100%;

    object-fit: contain;
    object-position: center bottom;

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

    pointer-events: none;
    user-select: none;
}

body.fx-signup-page .fx-signup-car {
    z-index: 1;
    width: 30%;
    height: 125px;
    margin-right: -4%;
}

body.fx-signup-page .fx-signup-van {
    z-index: 2;
    width: 36%;
    height: 158px;
    margin-right: -4%;
}

body.fx-signup-page .fx-signup-truck {
    z-index: 3;
    width: 42%;
    height: 185px;
}


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

body.fx-signup-page .fx-signup-feature-list {
    display: grid;

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

    gap: 11px;

    padding-top: 17px;
    border-top: 1px solid rgba(243,230,208,.14);
}

body.fx-signup-page .fx-signup-feature {
    display: flex;
    align-items: flex-start;

    min-width: 0;
    gap: 8px;
}

body.fx-signup-page .fx-signup-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29px;
    height: 29px;
    flex: 0 0 29px;

    border: 1px solid rgba(212,154,99,.28);
    border-radius: 7px;

    background: rgba(184,115,51,.09);
    color: #D49A63;

    font-size: 11px;
}

body.fx-signup-page .fx-signup-feature > div {
    min-width: 0;
    flex: 1;
}

body.fx-signup-page .fx-signup-feature h3 {
    margin: 0;

    color: #F3EDE5;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

body.fx-signup-page .fx-signup-feature p {
    margin: 4px 0 0;

    color: #AFA79D;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.55;

    overflow-wrap: anywhere;
}

body.fx-signup-page .fx-signup-brand-bottom {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 18px;
}

body.fx-signup-page .fx-signup-brand-bottom > span {
    display: block;
    width: 23px;
    height: 1px;
    flex: 0 0 23px;
    background: #B87333;
}

body.fx-signup-page .fx-signup-brand-bottom p {
    margin: 0;
    color: #AFA79D;

    font-size: 8px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .11em;
}


/* =========================================================
   RIGHT FORM PANEL
========================================================= */

body.fx-signup-page .fx-signup-form-panel {
    grid-area: form;

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

    width: 100%;
    min-width: 0;
    min-height: 760px;

    padding: 30px 32px;

    border-left: 1px solid var(--fx-border);

    background: var(--fx-white);
    color: var(--fx-text);
}

body.fx-signup-page .fx-signup-form-content {
    width: 100%;
    max-width: 465px;
    min-width: 0;
    margin: auto;
}

body.fx-signup-page .fx-signup-form-heading {
    margin-bottom: 22px;
    text-align: center;
}

body.fx-signup-page .fx-signup-form-heading > span {
    display: block;
    margin-bottom: 9px;

    color: var(--fx-copper-dark);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .15em;
}

body.fx-signup-page .fx-signup-form-heading h2 {
    margin: 0;

    color: var(--fx-black);

    font-family: "Inter", sans-serif;
    font-size: clamp(23px,2.1vw,28px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.025em;

    overflow-wrap: anywhere;
}

body.fx-signup-page .fx-signup-form-heading p {
    max-width: 370px;
    margin: 8px auto 0;

    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.65;
}


/* =========================================================
   SIGN-UP FIELD GRID
========================================================= */

body.fx-signup-page .fx-signup-form {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
}

body.fx-signup-page .fx-signup-field-grid {
    display: grid;

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

    gap: 12px 13px;

    width: 100%;
    min-width: 0;
}

body.fx-signup-page .fx-signup-field {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

body.fx-signup-page .fx-signup-field > label {
    display: block;
    margin-bottom: 6px;

    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

body.fx-signup-page .fx-signup-input-wrap {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
    min-height: 43px;

    gap: 8px;
    padding: 0 10px;

    border: 1px solid var(--fx-border);
    border-radius: 7px;

    background: var(--fx-off-white);
    color: var(--fx-text);

    transition: border-color .2s ease,box-shadow .2s ease;
}

body.fx-signup-page .fx-signup-input-wrap:focus-within {
    border-color: var(--fx-copper);
    box-shadow: 0 0 0 3px rgba(184,115,51,.1);
}

body.fx-signup-page .fx-signup-input-wrap > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 13px;

    color: var(--fx-copper-dark);
    font-size: 11px;
}

body.fx-signup-page .fx-signup-input-wrap input {
    display: block;

    flex: 1 1 auto;

    width: 0;
    min-width: 0;
    height: 41px;

    padding: 0;

    border: 0;
    outline: 0;
    box-shadow: none;

    background: transparent;
    color: var(--fx-text);

    font-family: "Inter",sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}

body.fx-signup-page .fx-signup-input-wrap input::placeholder {
    color: var(--fx-text-soft);
    opacity: .82;
}

body.fx-signup-page .fx-signup-input-wrap input:focus {
    outline: 0;
    box-shadow: none;
}

body.fx-signup-page .fx-signup-field-hint {
    display: block;
    margin-top: 5px;

    color: var(--fx-text-soft);
    font-size: 8px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* =========================================================
   PASSWORD VISIBILITY
========================================================= */

body.fx-signup-page .fx-signup-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 27px;

    width: 27px;
    height: 30px;
    padding: 0;

    border: 0;
    border-radius: 5px;

    background: transparent;
    color: var(--fx-text-soft);

    font-size: 12px;
    cursor: pointer;
}

body.fx-signup-page .fx-signup-password-toggle:hover {
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

body.fx-signup-page .fx-signup-password-toggle:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 2px;
}


/* =========================================================
   RED FIELD ERRORS
========================================================= */

body.fx-signup-page .fx-signup-error {
    display: none;

    margin-top: 5px;

    color: var(--fx-signup-error);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

body.fx-signup-page .fx-signup-field.has-error .fx-signup-error,
body.fx-signup-page .fx-signup-terms.has-error > .fx-signup-error {
    display: block;
}

body.fx-signup-page .fx-signup-field.has-error .fx-signup-input-wrap {
    border-color: var(--fx-signup-error);

    background:
        color-mix(in srgb,var(--fx-signup-error) 4%,var(--fx-off-white));

    box-shadow: 0 0 0 2px rgba(181,46,40,.06);
}

body.fx-signup-page .fx-signup-field.has-error .fx-signup-input-wrap > i:first-child {
    color: var(--fx-signup-error);
}

body.fx-signup-page .fx-signup-input-wrap input[aria-invalid="true"] {
    color: var(--fx-text);
}


/* =========================================================
   TERMS AND CONSENT
========================================================= */

body.fx-signup-page .fx-signup-terms {
    margin-top: 15px;
}

body.fx-signup-page .fx-signup-terms > label {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    color: var(--fx-text-soft);

    font-size: 9px;
    font-weight: 500;
    line-height: 1.65;

    cursor: pointer;
}

body.fx-signup-page .fx-signup-terms input {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;

    margin: 2px 0 0;

    accent-color: var(--fx-copper);
    cursor: pointer;
}

body.fx-signup-page .fx-signup-terms a {
    color: var(--fx-copper-dark);
    font-weight: 600;
    text-decoration: none;
}

body.fx-signup-page .fx-signup-terms a:hover {
    color: var(--fx-copper);
    text-decoration: underline;
}

body.fx-signup-page .fx-signup-terms.has-error > label {
    color: var(--fx-signup-error);
}

body.fx-signup-page .fx-signup-terms.has-error input {
    outline: 1px solid var(--fx-signup-error);
    outline-offset: 2px;
}


/* =========================================================
   FORM STATUS MESSAGE
========================================================= */

body.fx-signup-page .fx-signup-message {
    display: none;

    margin-top: 12px;
    padding: 9px 11px;

    border: 1px solid rgba(184,115,51,.25);
    border-radius: 7px;

    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);

    font-size: 9px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

body.fx-signup-page .fx-signup-message.is-visible {
    display: block;
}

body.fx-signup-page .fx-signup-message.is-error {
    border-color: rgba(181,46,40,.25);
    background: rgba(181,46,40,.07);
    color: var(--fx-signup-error);
}

body.fx-signup-page .fx-signup-message.is-success {
    border-color: rgba(75,140,86,.28);
    background: rgba(75,140,86,.08);
    color: #367343;
}


/* =========================================================
   CREATE ACCOUNT BUTTON
========================================================= */

body.fx-signup-page .fx-signup-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    min-height: 44px;

    margin-top: 14px;
    padding: 0 16px;

    border: 1px solid var(--fx-copper);
    border-radius: 8px;

    background: var(--fx-copper);
    color: #FFFFFF;

    font-family: "Inter",sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;

    transition: background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

body.fx-signup-page .fx-signup-submit:hover {
    border-color: var(--fx-copper-dark);
    background: var(--fx-copper-dark);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(184,115,51,.16);
}

body.fx-signup-page .fx-signup-submit:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

body.fx-signup-page .fx-signup-submit:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

body.fx-signup-page .fx-signup-submit i {
    font-size: 10px;
    transition: transform .2s ease;
}

body.fx-signup-page .fx-signup-submit:hover i {
    transform: translateX(3px);
}


/* =========================================================
   SOCIAL SIGN-UP OPTIONS
========================================================= */

body.fx-signup-page .fx-signup-divider {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    margin: 18px 0 12px;
}

body.fx-signup-page .fx-signup-divider > span {
    display: block;
    flex: 1;
    min-width: 0;
    height: 1px;
    background: var(--fx-border);
}

body.fx-signup-page .fx-signup-divider p {
    flex: 0 0 auto;
    margin: 0;

    color: var(--fx-text-soft);

    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;

    white-space: nowrap;
}

body.fx-signup-page .fx-signup-socials {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;

    width: 100%;
}

body.fx-signup-page .fx-signup-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 0;
    min-height: 40px;
    padding: 0 6px;

    border: 1px solid var(--fx-border);
    border-radius: 8px;

    background: var(--fx-white);
    color: var(--fx-text);

    font-family: "Inter",sans-serif;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;
    transition: border-color .2s ease,background-color .2s ease,color .2s ease;
}

body.fx-signup-page .fx-signup-social i {
    flex: 0 0 auto;
    font-size: 13px;
}

body.fx-signup-page .fx-signup-social span {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.fx-signup-page .fx-signup-social:hover {
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

body.fx-signup-page .fx-signup-social:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 2px;
}


/* =========================================================
   SIGN-IN LINK AND SECURITY NOTE
========================================================= */

body.fx-signup-page .fx-signup-login-link {
    margin: 17px 0 0;

    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
}

body.fx-signup-page .fx-signup-login-link a {
    margin-inline-start: 3px;

    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

body.fx-signup-page .fx-signup-login-link a:hover {
    color: var(--fx-copper);
    text-decoration: underline;
}

body.fx-signup-page .fx-signup-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 18px;
    padding-top: 12px;

    border-top: 1px solid var(--fx-border);

    color: var(--fx-text-soft);
    font-size: 8px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

body.fx-signup-page .fx-signup-security-note i {
    flex: 0 0 auto;
    color: var(--fx-copper-dark);
    font-size: 10px;
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (max-width: 1439px) {
    body.fx-signup-page .fx-signup-card {
        max-width: 1200px;
    }

    body.fx-signup-page .fx-signup-brand-panel {
        padding-inline: 29px;
    }

    body.fx-signup-page .fx-signup-form-panel {
        padding-inline: 27px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) and (min-width: 851px) {
    body.fx-signup-page .fx-signup-stage {
        padding-inline: 21px;
    }

    body.fx-signup-page .fx-signup-card {
        min-height: 735px;
    }

    body.fx-signup-page .fx-signup-brand-panel,
    body.fx-signup-page .fx-signup-form-panel {
        min-height: 735px;
    }

    body.fx-signup-page .fx-signup-brand-panel {
        padding: 28px 24px 20px;
    }

    body.fx-signup-page .fx-signup-form-panel {
        padding: 24px 20px;
    }

    body.fx-signup-page .fx-signup-intro {
        margin-top: 30px;
    }

    body.fx-signup-page .fx-signup-intro h1 {
        font-size: clamp(29px,3.1vw,36px);
    }

    body.fx-signup-page .fx-signup-intro > p {
        font-size: 10px;
    }

    body.fx-signup-page .fx-signup-vehicle-stage {
        height: 165px;
    }

    body.fx-signup-page .fx-signup-car {
        height: 110px;
    }

    body.fx-signup-page .fx-signup-van {
        height: 140px;
    }

    body.fx-signup-page .fx-signup-truck {
        height: 160px;
    }

    body.fx-signup-page .fx-signup-feature-list {
        gap: 7px;
    }

    body.fx-signup-page .fx-signup-feature {
        gap: 5px;
    }

    body.fx-signup-page .fx-signup-feature-icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
        font-size: 9px;
    }

    body.fx-signup-page .fx-signup-feature h3 {
        font-size: 8px;
    }

    body.fx-signup-page .fx-signup-feature p {
        font-size: 7px;
    }

    body.fx-signup-page .fx-signup-form-heading {
        margin-bottom: 17px;
    }

    body.fx-signup-page .fx-signup-form-heading h2 {
        font-size: 23px;
    }

    body.fx-signup-page .fx-signup-field-grid {
        gap: 10px;
    }

    body.fx-signup-page .fx-signup-input-wrap {
        padding-inline: 8px;
        gap: 6px;
    }

    body.fx-signup-page .fx-signup-input-wrap input {
        font-size: 9px;
    }

    body.fx-signup-page .fx-signup-field > label {
        font-size: 9px;
    }
}


/* =========================================================
   TABLET: STACK PANELS
========================================================= */

@media (max-width: 850px) {
    body.fx-signup-page .fx-signup-stage {
        align-items: flex-start;
        padding: 78px 22px 24px;
    }

    body.fx-signup-page .fx-signup-card {
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "brand"
            "form";

        width: 100%;
        max-width: 620px;
        min-height: 0;
    }

    body.fx-signup-page .fx-signup-brand-panel {
        grid-area: brand;

        min-height: 0;
        padding: 28px 30px 22px;
    }

    body.fx-signup-page .fx-signup-intro {
        margin-top: 27px;
    }

    body.fx-signup-page .fx-signup-intro h1 {
        max-width: 540px;
        font-size: clamp(30px,5.5vw,39px);
    }

    body.fx-signup-page .fx-signup-intro > p {
        max-width: 500px;
        font-size: 11px;
    }

    body.fx-signup-page .fx-signup-vehicle-stage {
        height: 180px;
        margin-top: 12px;
    }

    body.fx-signup-page .fx-signup-car {
        height: 115px;
    }

    body.fx-signup-page .fx-signup-van {
        height: 145px;
    }

    body.fx-signup-page .fx-signup-truck {
        height: 170px;
    }

    body.fx-signup-page .fx-signup-feature-list {
        gap: 12px;
    }

    body.fx-signup-page .fx-signup-feature h3 {
        font-size: 9px;
    }

    body.fx-signup-page .fx-signup-feature p {
        font-size: 8px;
    }

    body.fx-signup-page .fx-signup-form-panel {
        grid-area: form;

        min-height: 0;
        padding: 36px 32px;

        border-top: 1px solid var(--fx-border);
        border-left: 0;
    }

    body.fx-signup-page .fx-signup-form-content {
        max-width: 480px;
    }

    body.fx-signup-page .fx-signup-form-heading h2 {
        font-size: 27px;
    }

    body.fx-signup-page .fx-signup-field-grid {
        gap: 13px;
    }
}


/* =========================================================
   MOBILE-L
========================================================= */

@media (max-width: 767px) {
    body.fx-signup-page .fx-signup-controls {
        top: 12px;
        right: 17px;
        gap: 6px;
    }

    body.fx-signup-page .fx-signup-stage {
        padding: 70px 17px 22px;
    }

    body.fx-signup-page .fx-signup-card {
        max-width: 560px;
        border-radius: 17px;
    }

    body.fx-signup-page .fx-signup-brand-panel {
        padding: 24px 24px 19px;
    }

    body.fx-signup-page .fx-signup-intro {
        margin-top: 24px;
    }

    body.fx-signup-page .fx-signup-intro h1 {
        font-size: clamp(28px,6vw,36px);
    }

    body.fx-signup-page .fx-signup-intro > p {
        font-size: 10.5px;
    }

    body.fx-signup-page .fx-signup-vehicle-stage {
        height: 160px;
    }

    body.fx-signup-page .fx-signup-car {
        height: 100px;
    }

    body.fx-signup-page .fx-signup-van {
        height: 128px;
    }

    body.fx-signup-page .fx-signup-truck {
        height: 150px;
    }

    body.fx-signup-page .fx-signup-form-panel {
        padding: 30px 24px;
    }

    body.fx-signup-page .fx-signup-form-heading h2 {
        font-size: 25px;
    }

    body.fx-signup-page .fx-signup-form-heading p {
        font-size: 10px;
    }
}


/* =========================================================
   MOBILE-M
========================================================= */

@media (max-width: 480px) {
    body.fx-signup-page .fx-signup-controls {
        top: 10px;
        right: 10px;
        gap: 5px;
    }

    body.fx-signup-page .fx-signup-controls .fx-icon-button,
    body.fx-signup-page .fx-signup-controls .fx-rtl-button {
        min-width: 36px;
        height: 36px;
        padding-inline: 8px;
        font-size: 10px;
    }

    body.fx-signup-page .fx-signup-stage {
        padding: 61px 10px 14px;
    }

    body.fx-signup-page .fx-signup-card {
        border-radius: 14px;
    }

    body.fx-signup-page .fx-signup-brand-panel {
        padding: 21px 17px 17px;
    }

    body.fx-signup-page .fx-signup-brand .fx-brand-logo {
        width: 37px;
        height: 41px;
        flex-basis: 37px;
    }

    body.fx-signup-page .fx-signup-brand .fx-brand-name {
        font-size: 17px;
    }

    body.fx-signup-page .fx-signup-intro {
        margin-top: 22px;
    }

    body.fx-signup-page .fx-signup-eyebrow {
        margin-bottom: 11px;
        font-size: 8px;
        letter-spacing: .09em;
    }

    body.fx-signup-page .fx-signup-intro h1 {
        font-size: clamp(26px,7.6vw,33px);
    }

    body.fx-signup-page .fx-signup-intro > p {
        font-size: 10px;
        line-height: 1.7;
    }

    body.fx-signup-page .fx-signup-vehicle-stage {
        height: 135px;
        margin-top: 11px;
    }

    body.fx-signup-page .fx-signup-car {
        height: 83px;
    }

    body.fx-signup-page .fx-signup-van {
        height: 106px;
    }

    body.fx-signup-page .fx-signup-truck {
        height: 130px;
    }

    body.fx-signup-page .fx-signup-feature-list {
        grid-template-columns: minmax(0,1fr);
        gap: 11px;
        padding-top: 13px;
    }

    body.fx-signup-page .fx-signup-feature {
        align-items: center;
        gap: 10px;
    }

    body.fx-signup-page .fx-signup-feature-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 11px;
    }

    body.fx-signup-page .fx-signup-feature h3 {
        font-size: 9px;
    }

    body.fx-signup-page .fx-signup-feature p {
        margin-top: 2px;
        font-size: 8px;
    }

    body.fx-signup-page .fx-signup-brand-bottom {
        margin-top: 14px;
    }

    body.fx-signup-page .fx-signup-brand-bottom p {
        font-size: 7px;
    }

    body.fx-signup-page .fx-signup-form-panel {
        padding: 26px 16px 22px;
    }

    body.fx-signup-page .fx-signup-form-heading {
        margin-bottom: 20px;
    }

    body.fx-signup-page .fx-signup-form-heading h2 {
        font-size: 23px;
    }

    body.fx-signup-page .fx-signup-form-heading p {
        font-size: 10px;
    }

    body.fx-signup-page .fx-signup-field-grid {
        grid-template-columns: minmax(0,1fr);
        gap: 12px;
    }

    body.fx-signup-page .fx-signup-field > label {
        font-size: 10px;
    }

    body.fx-signup-page .fx-signup-input-wrap {
        min-height: 44px;
        padding-inline: 10px;
    }

    body.fx-signup-page .fx-signup-input-wrap input {
        height: 42px;
        font-size: 10px;
    }

    body.fx-signup-page .fx-signup-field-hint {
        font-size: 8px;
    }

    body.fx-signup-page .fx-signup-terms > label {
        font-size: 9px;
    }

    body.fx-signup-page .fx-signup-socials {
        gap: 6px;
    }

    body.fx-signup-page .fx-signup-social {
        min-height: 40px;
        gap: 5px;
        padding-inline: 4px;
        font-size: 9px;
    }

    body.fx-signup-page .fx-signup-social i {
        font-size: 12px;
    }
}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 359px) {
    body.fx-signup-page .fx-signup-controls {
        top: 8px;
        right: 8px;
        gap: 4px;
    }

    body.fx-signup-page .fx-signup-controls .fx-icon-button,
    body.fx-signup-page .fx-signup-controls .fx-rtl-button {
        min-width: 33px;
        height: 33px;
        padding-inline: 7px;
    }

    body.fx-signup-page .fx-signup-stage {
        padding: 54px 7px 10px;
    }

    body.fx-signup-page .fx-signup-brand-panel {
        padding: 18px 12px 15px;
    }

    body.fx-signup-page .fx-signup-brand .fx-brand-logo {
        width: 34px;
        height: 38px;
        flex-basis: 34px;
    }

    body.fx-signup-page .fx-signup-brand .fx-brand-name {
        font-size: 16px;
    }

    body.fx-signup-page .fx-signup-intro h1 {
        font-size: 26px;
    }

    body.fx-signup-page .fx-signup-vehicle-stage {
        height: 117px;
    }

    body.fx-signup-page .fx-signup-car {
        height: 72px;
    }

    body.fx-signup-page .fx-signup-van {
        height: 92px;
    }

    body.fx-signup-page .fx-signup-truck {
        height: 112px;
    }

    body.fx-signup-page .fx-signup-form-panel {
        padding: 22px 12px 20px;
    }

    body.fx-signup-page .fx-signup-form-heading h2 {
        font-size: 21px;
    }

    body.fx-signup-page .fx-signup-socials {
        gap: 4px;
    }

    body.fx-signup-page .fx-signup-social {
        gap: 4px;
        padding-inline: 3px;
        font-size: 8px;
    }

    body.fx-signup-page .fx-signup-divider {
        gap: 7px;
    }

    body.fx-signup-page .fx-signup-divider p {
        font-size: 7px;
        letter-spacing: .05em;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    body.fx-signup-page .fx-signup-card,
    body.fx-signup-page .fx-signup-vehicle {
        animation: none !important;
    }

    body.fx-signup-page .fx-signup-controls *,
    body.fx-signup-page .fx-signup-input-wrap,
    body.fx-signup-page .fx-signup-submit,
    body.fx-signup-page .fx-signup-social {
        transition: none !important;
    }
}

/* =========================================================
   FLEETAXIS HOME 2 — SECTION 06: CONNECTED FLEET
   Section-only styles. Do not replace existing styles.
========================================================= */

.fx-net {
    position: relative;
    isolation: isolate;
    padding: clamp(54px, 6.5vw, 92px) 0;
    overflow: hidden;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
}

.fx-net,
.fx-net * {
    box-sizing: border-box;
}

.fx-net-shell {
    width: min(1380px, calc(100% - 64px));
    margin: 0 auto;
}

.fx-net-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 29px;
}

.fx-net-heading {
    min-width: 0;
    max-width: 830px;
}

.fx-net-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .12em;
}

.fx-net-eyebrow-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--fx-copper);
    box-shadow: 0 0 0 4px rgba(184, 115, 51, .12);
}

.fx-net-title {
    max-width: 800px;
    margin: 0;
    color: var(--fx-black);
    font-size: clamp(32px, 4.1vw, 54px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}

.fx-net-title span {
    color: var(--fx-copper);
}

.fx-net-intro {
    max-width: 730px;
    margin: 15px 0 0;
    color: var(--fx-text-soft);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.fx-net-head-index {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 0 0 auto;
    padding: 8px 0 4px 18px;
    border-left: 1px solid var(--fx-border);
}

.fx-net-index-number {
    color: var(--fx-copper);
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.05em;
}

.fx-net-index-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--fx-text-soft);
    font-size: 8px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .09em;
}

.fx-net-index-label b {
    color: var(--fx-text);
    font-size: 9px;
}


/* =========================================================
   VISUAL FRAME
========================================================= */

.fx-net-visual {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--fx-border);
    border-radius: 13px;
    background: var(--fx-white);
    box-shadow: 0 18px 45px rgba(32, 32, 32, .065);
}

.fx-net-scene-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 10px 17px;
    background: #202020;
    color: #F3EDE5;
}

.fx-net-scene-label,
.fx-net-scene-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
}

.fx-net-scene-label i {
    color: #D49A63;
    font-size: 11px;
}

.fx-net-scene-status {
    color: #D3CCC3;
    text-align: right;
}

.fx-net-scene-status > i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #D49A63;
    box-shadow: 0 0 0 4px rgba(212, 154, 99, .12);
    animation: fxNetStatusPulse 2.2s ease-in-out infinite;
}


/* =========================================================
   REAL FLEET IMAGE
========================================================= */

.fx-net-photo {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: clamp(335px, 38vw, 490px);
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #252525;
}

.fx-net-photo-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    user-select: none;
    pointer-events: none;
}

.fx-net-photo-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(15, 15, 15, .54) 0%,
            rgba(15, 15, 15, .11) 24%,
            rgba(15, 15, 15, .03) 51%,
            rgba(15, 15, 15, .20) 72%,
            rgba(15, 15, 15, .73) 100%
        );
    pointer-events: none;
}

/* Subtle scan texture over the cinematic scene */
.fx-net-photo::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.07) 50%,
            transparent 100%
        );
    opacity: .18;
    transform: translateX(-120%);
    pointer-events: none;
}

.fx-net-visual.is-in .fx-net-photo::before {
    animation: fxNetPhotoScan 1.5s .3s ease-out both;
}

.fx-net-photo-overlay {
    pointer-events: none;
}


/* =========================================================
   ANIMATED ROUTE OVER THE IMAGE
========================================================= */

.fx-net-route {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.fx-net-route-base,
.fx-net-route-flow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fx-net-route-base {
    stroke: rgba(255,255,255,.5);
    stroke-width: 1.5;
}

.fx-net-route-flow {
    stroke: url("#fxNetRouteGradient");
    stroke-width: 3;
    stroke-dasharray: 12 10;
    filter: drop-shadow(0 0 4px rgba(184,115,51,.6));
    animation: fxNetRouteTravel 14s linear infinite;
}


/* =========================================================
   CLICKABLE VEHICLE HOTSPOTS
========================================================= */

.fx-net-hotspot {
    position: absolute;
    z-index: 6;
    left: var(--fx-net-x, 50%);
    top: var(--fx-net-y, 47%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: #202020;
    color: #F8F5F0;
    box-shadow:
        0 0 0 4px rgba(184,115,51,.2),
        0 6px 16px rgba(0,0,0,.23);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        scale .2s ease;
}

.fx-net-hotspot-number {
    position: relative;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.fx-net-hotspot-pulse {
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(184,115,51,.7);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.fx-net-hotspot.is-active {
    border-color: #FFFFFF;
    background: #B87333;
    color: #FFFFFF;
    box-shadow:
        0 0 0 5px rgba(184,115,51,.23),
        0 0 24px rgba(184,115,51,.55);
    scale: 1.07;
}

.fx-net-hotspot.is-active .fx-net-hotspot-pulse {
    opacity: 1;
    animation: fxNetHotspotPulse 2.2s ease-out infinite;
}

.fx-net-hotspot:hover {
    border-color: #FFFFFF;
    background: #985A25;
    color: #FFFFFF;
}

.fx-net-hotspot:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 5px;
}

.fx-net-photo-caption {
    position: absolute;
    z-index: 5;
    right: 18px;
    bottom: 15px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #FFFFFF;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
    pointer-events: none;
}

.fx-net-photo-caption > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.fx-net-photo-caption i {
    color: #E2B487;
    font-size: 11px;
}

.fx-net-photo-caption-right {
    color: #F3E6D0;
    text-align: right;
}


/* =========================================================
   VEHICLE SELECTOR RAIL
========================================================= */

.fx-net-switcher {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
    border-top: 1px solid var(--fx-border);
    border-bottom: 1px solid var(--fx-border);
    background: var(--fx-white);
    direction: ltr;
}

.fx-net-vehicle-select {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 91px;
    padding: 13px 15px 12px;
    border: 0;
    border-right: 1px solid var(--fx-border);
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    text-align: left;
    cursor: pointer;
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.fx-net-vehicle-select:last-child {
    border-right: 0;
}

.fx-net-option-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    color: var(--fx-copper-dark);
}

.fx-net-option-top > i {
    font-size: 15px;
}

.fx-net-option-number {
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
}

.fx-net-option-name {
    display: block;
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.fx-net-option-short {
    display: none;
}

.fx-net-option-description {
    display: block;
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.fx-net-vehicle-select:hover {
    background: rgba(184,115,51,.05);
}

.fx-net-vehicle-select.is-active {
    border-bottom-color: var(--fx-copper);
    background: rgba(184,115,51,.075);
}

.fx-net-vehicle-select.is-active .fx-net-option-top,
.fx-net-vehicle-select.is-active .fx-net-option-name {
    color: var(--fx-copper-dark);
}

.fx-net-vehicle-select.is-active .fx-net-option-number {
    color: var(--fx-copper-dark);
}

.fx-net-vehicle-select:focus-visible {
    z-index: 2;
    outline: 2px solid var(--fx-copper);
    outline-offset: -4px;
}


/* =========================================================
   SELECTED VEHICLE INFORMATION
========================================================= */

.fx-net-selected {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 27px;
    padding: 23px 25px 24px;
    background: var(--fx-white);
}

.fx-net-selected-main {
    min-width: 0;
}

.fx-net-selected-kicker {
    margin: 0 0 7px;
    color: var(--fx-copper-dark);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
}

.fx-net-selected-main h3 {
    margin: 0;
    color: var(--fx-black);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.fx-net-selected-copy {
    max-width: 530px;
    margin: 8px 0 0;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.fx-net-selected-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    min-width: 0;
    margin: 0;
}

.fx-net-selected-facts > div {
    min-width: 0;
    padding-left: 13px;
    border-left: 1px solid var(--fx-border);
}

.fx-net-selected-facts dt {
    margin: 0 0 7px;
    color: var(--fx-text-soft);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    overflow-wrap: anywhere;
}

.fx-net-selected-facts dd {
    margin: 0;
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.fx-net-selected.is-changing .fx-net-selected-main,
.fx-net-selected.is-changing .fx-net-selected-facts {
    animation: fxNetContentSwap .3s ease both;
}


/* =========================================================
   CONNECTED OPERATIONS TIMELINE
========================================================= */

.fx-net-process {
    padding: clamp(35px, 4.5vw, 58px) 0 31px;
}

.fx-net-process-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 33px;
}

.fx-net-process-head > div {
    min-width: 0;
}

.fx-net-process-eyebrow {
    margin: 0 0 9px;
    color: var(--fx-copper-dark);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .11em;
}

.fx-net-process-head h3 {
    margin: 0;
    color: var(--fx-black);
    font-size: clamp(22px, 2.5vw, 31px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.fx-net-process-head h3 span {
    color: var(--fx-copper);
}

.fx-net-process-head > p {
    max-width: 410px;
    margin: 0;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.8;
}

.fx-net-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 21px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-net-steps::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 12.5%;
    left: 12.5%;
    height: 1px;
    background: var(--fx-border);
}

.fx-net-steps::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 12.5%;
    width: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--fx-copper), transparent);
    animation: fxNetProcessTravel 6s ease-in-out infinite;
    pointer-events: none;
}

.fx-net-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.fx-net-step-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    border: 1px solid var(--fx-border);
    border-radius: 50%;
    background: var(--fx-champagne-light);
    color: var(--fx-copper-dark);
    font-size: 12px;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.fx-net-process.is-in .fx-net-step-node {
    animation: fxNetNodeReveal .5s ease both;
}

.fx-net-process.is-in .fx-net-step:nth-child(2) .fx-net-step-node {
    animation-delay: .12s;
}

.fx-net-process.is-in .fx-net-step:nth-child(3) .fx-net-step-node {
    animation-delay: .24s;
}

.fx-net-process.is-in .fx-net-step:nth-child(4) .fx-net-step-node {
    animation-delay: .36s;
}

.fx-net-step-copy {
    min-width: 0;
    padding-top: 14px;
}

.fx-net-step-number {
    display: block;
    margin-bottom: 5px;
    color: var(--fx-copper-dark);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .09em;
}

.fx-net-step-copy h4 {
    margin: 0;
    color: var(--fx-black);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.fx-net-step-copy p {
    max-width: 260px;
    margin: 6px 0 0;
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.75;
    overflow-wrap: anywhere;
}


/* =========================================================
   SECTION CLOSING CTA
========================================================= */

.fx-net-outro {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 21px 24px;
    border: 1px solid rgba(212,154,99,.2);
    border-radius: 10px;
    background: #202020;
    color: #F3EDE5;
}

.fx-net-outro-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(212,154,99,.3);
    border-radius: 9px;
    background: rgba(184,115,51,.12);
    color: #D49A63;
    font-size: 17px;
}

.fx-net-outro-copy {
    min-width: 0;
}

.fx-net-outro-copy > p {
    margin: 0 0 5px;
    color: #D49A63;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
    overflow-wrap: anywhere;
}

.fx-net-outro-copy h3 {
    margin: 0;
    color: #F8F5F0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.fx-net-outro-copy > span {
    display: block;
    margin-top: 5px;
    color: #B8B0A6;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.fx-net-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid #B87333;
    border-radius: 8px;
    background: #B87333;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.fx-net-cta > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fx-net-cta > i {
    flex: 0 0 auto;
    font-size: 10px;
    transition: transform .2s ease;
}

.fx-net-cta:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.fx-net-cta:hover > i {
    transform: translateX(3px);
}

.fx-net-cta:focus-visible {
    outline: 2px solid #D49A63;
    outline-offset: 3px;
}


/* =========================================================
   REVEAL + ANIMATION STATES
   Content stays visible if the script is unavailable.
========================================================= */

.fx-net.is-ready [data-fx-net-reveal] {
    opacity: 0;
    transform: translateY(18px);
}

.fx-net.is-ready [data-fx-net-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2, .8, .2, 1);
}

.fx-net.is-ready .fx-net-visual:not(.is-in) .fx-net-photo-image {
    clip-path: inset(0 100% 0 0);
}

.fx-net.is-ready .fx-net-visual.is-in .fx-net-photo-image {
    animation: fxNetImageReveal 1.1s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes fxNetImageReveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes fxNetPhotoScan {
    from { transform: translateX(-120%); }
    to   { transform: translateX(120%); }
}

@keyframes fxNetRouteTravel {
    to { stroke-dashoffset: -220; }
}

@keyframes fxNetHotspotPulse {
    0%   { transform: scale(.78); opacity: .85; }
    100% { transform: scale(1.65); opacity: 0; }
}

@keyframes fxNetStatusPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(212,154,99,.12); }
    50%      { box-shadow: 0 0 0 7px rgba(212,154,99,.04); }
}

@keyframes fxNetContentSwap {
    from { opacity: .35; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fxNetNodeReveal {
    from { opacity: .5; transform: scale(.8); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes fxNetProcessTravel {
    0%   { left: 12.5%; }
    100% { left: 67.5%; }
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (max-width: 1439px) {
    .fx-net-shell {
        width: min(1320px, calc(100% - 54px));
    }

    .fx-net-head {
        gap: 25px;
    }

    .fx-net-photo {
        height: clamp(340px, 40vw, 465px);
    }

    .fx-net-selected {
        gap: 20px;
        padding: 21px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) and (min-width: 1024px) {
    .fx-net-shell {
        width: calc(100% - 44px);
    }

    .fx-net-head {
        align-items: flex-start;
    }

    .fx-net-title {
        font-size: clamp(31px, 3.7vw, 44px);
    }

    .fx-net-head-index {
        gap: 9px;
        padding-left: 12px;
    }

    .fx-net-index-number {
        font-size: 35px;
    }

    .fx-net-photo {
        height: 360px;
    }

    .fx-net-vehicle-select {
        min-height: 83px;
        padding: 11px 10px;
    }

    .fx-net-selected {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .fx-net-selected-facts > div {
        padding-left: 10px;
    }

    .fx-net-process-head > p {
        max-width: 350px;
    }

    .fx-net-outro {
        padding: 18px;
        gap: 13px;
    }
}


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

@media (max-width: 1023px) {
    .fx-net {
        padding: 56px 0;
    }

    .fx-net-shell {
        width: calc(100% - 40px);
    }

    .fx-net-head {
        align-items: flex-start;
        gap: 20px;
    }

    .fx-net-heading {
        max-width: 100%;
    }

    .fx-net-title {
        font-size: clamp(30px, 4.8vw, 43px);
    }

    .fx-net-intro {
        max-width: 630px;
    }

    .fx-net-head-index {
        margin-top: 15px;
    }

    .fx-net-photo {
        height: clamp(315px, 43vw, 390px);
    }

    .fx-net-hotspot {
        width: 35px;
        height: 35px;
    }

    .fx-net-selected {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 20px;
    }

    .fx-net-selected-facts {
        gap: 12px;
    }

    .fx-net-process-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        margin-bottom: 27px;
    }

    .fx-net-process-head > p {
        max-width: 650px;
    }

    .fx-net-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 22px;
    }

    .fx-net-steps::before,
    .fx-net-steps::after {
        display: none;
    }

    .fx-net-step {
        display: grid;
        grid-template-columns: 37px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }

    .fx-net-step-copy {
        padding-top: 0;
    }

    .fx-net-step-node {
        width: 37px;
        height: 37px;
    }
}


/* =========================================================
   MOBILE-L
========================================================= */

@media (max-width: 767px) {
    .fx-net {
        padding: 48px 0;
    }

    .fx-net-shell {
        width: calc(100% - 30px);
    }

    .fx-net-head {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 22px;
    }

    .fx-net-eyebrow {
        margin-bottom: 11px;
        font-size: 9px;
    }

    .fx-net-title {
        font-size: clamp(29px, 7vw, 38px);
        line-height: 1.15;
    }

    .fx-net-intro {
        margin-top: 12px;
        font-size: 10px;
        line-height: 1.75;
    }

    .fx-net-head-index {
        margin-top: 0;
        padding-left: 12px;
    }

    .fx-net-index-number {
        font-size: 30px;
    }

    .fx-net-scene-topbar {
        min-height: 40px;
        padding: 9px 11px;
    }

    .fx-net-scene-label,
    .fx-net-scene-status {
        font-size: 8px;
        letter-spacing: .04em;
    }

    .fx-net-photo {
        height: clamp(245px, 61vw, 320px);
    }

    .fx-net-photo-image {
        object-position: center 58%;
    }

    .fx-net-hotspot {
        top: var(--fx-net-mobile-y, 51%);
        width: 31px;
        height: 31px;
    }

    .fx-net-hotspot-number {
        font-size: 9px;
    }

    .fx-net-photo-caption {
        right: 10px;
        bottom: 10px;
        left: 10px;
        gap: 8px;
        font-size: 7px;
        letter-spacing: .035em;
    }

    .fx-net-photo-caption > span:first-child {
        gap: 5px;
    }

    .fx-net-switcher {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .fx-net-vehicle-select {
        min-height: 72px;
        gap: 5px;
        padding: 9px 5px 8px;
    }

    .fx-net-option-top > i {
        font-size: 13px;
    }

    .fx-net-option-number {
        font-size: 8px;
    }

    .fx-net-option-name {
        font-size: 9px;
        line-height: 1.35;
    }

    .fx-net-option-description {
        font-size: 7px;
    }

    .fx-net-selected {
        gap: 17px;
        padding: 18px 15px;
    }

    .fx-net-selected-main h3 {
        font-size: 18px;
    }

    .fx-net-selected-copy {
        font-size: 10px;
        line-height: 1.7;
    }

    .fx-net-selected-facts {
        gap: 9px;
    }

    .fx-net-selected-facts > div {
        padding-left: 9px;
    }

    .fx-net-selected-facts dt {
        font-size: 7px;
    }

    .fx-net-selected-facts dd {
        font-size: 9px;
    }

    .fx-net-process {
        padding: 34px 0 25px;
    }

    .fx-net-process-head {
        margin-bottom: 24px;
    }

    .fx-net-process-head h3 {
        font-size: 24px;
    }

    .fx-net-process-head > p {
        font-size: 10px;
    }

    .fx-net-steps {
        gap: 23px 16px;
    }

    .fx-net-step {
        grid-template-columns: 33px minmax(0, 1fr);
        gap: 10px;
    }

    .fx-net-step-node {
        width: 33px;
        height: 33px;
        font-size: 11px;
    }

    .fx-net-step-copy h4 {
        font-size: 12px;
    }

    .fx-net-step-copy p {
        font-size: 9px;
    }

    .fx-net-outro {
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .fx-net-outro-mark {
        width: 39px;
        height: 39px;
        font-size: 14px;
    }

    .fx-net-outro-copy h3 {
        font-size: 14px;
    }

    .fx-net-outro .fx-net-cta {
        grid-column: 1 / -1;
        justify-self: start;
    }
}


/* =========================================================
   MOBILE-M
========================================================= */

@media (max-width: 480px) {
    .fx-net {
        padding: 42px 0;
    }

    .fx-net-shell {
        width: calc(100% - 22px);
    }

    .fx-net-title {
        font-size: clamp(26px, 7.5vw, 32px);
        letter-spacing: -.03em;
    }

    .fx-net-intro {
        font-size: 10px;
    }

    .fx-net-head-index {
        gap: 10px;
    }

    .fx-net-index-number {
        font-size: 27px;
    }

    .fx-net-index-label {
        font-size: 7px;
    }

    .fx-net-index-label b {
        font-size: 8px;
    }

    .fx-net-visual {
        border-radius: 9px;
    }

    .fx-net-scene-topbar {
        gap: 6px;
        padding: 8px;
    }

    .fx-net-scene-label,
    .fx-net-scene-status {
        gap: 5px;
        font-size: 7px;
    }

    .fx-net-photo {
        height: clamp(215px, 64vw, 275px);
    }

    .fx-net-photo-image {
        object-position: center 58%;
    }

    .fx-net-hotspot {
        top: var(--fx-net-mobile-y, 51%);
        width: 27px;
        height: 27px;
        box-shadow:
            0 0 0 3px rgba(184,115,51,.2),
            0 4px 12px rgba(0,0,0,.23);
    }

    .fx-net-hotspot-pulse {
        inset: -4px;
    }

    .fx-net-hotspot-number {
        font-size: 8px;
    }

    .fx-net-photo-caption {
        right: 7px;
        bottom: 7px;
        left: 7px;
        font-size: 6.5px;
    }

    .fx-net-photo-caption-right {
        display: none;
    }

    .fx-net-vehicle-select {
        min-height: 64px;
        padding: 7px 3px;
        gap: 4px;
    }

    .fx-net-option-top {
        justify-content: center;
        gap: 3px;
    }

    .fx-net-option-top > i {
        font-size: 12px;
    }

    .fx-net-option-number {
        display: none;
    }

    .fx-net-option-full {
        display: none;
    }

    .fx-net-option-short {
        display: inline;
    }

    .fx-net-option-name {
        font-size: 8px;
        text-align: center;
    }

    .fx-net-option-description {
        display: none;
    }

    .fx-net-selected {
        padding: 16px 12px;
        gap: 15px;
    }

    .fx-net-selected-kicker {
        font-size: 7px;
    }

    .fx-net-selected-main h3 {
        font-size: 17px;
    }

    .fx-net-selected-copy {
        font-size: 9px;
    }

    .fx-net-selected-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .fx-net-selected-facts > div {
        padding: 9px 0;
        border-left: 0;
        border-top: 1px solid var(--fx-border);
    }

    .fx-net-selected-facts dt {
        margin-bottom: 4px;
        font-size: 7px;
    }

    .fx-net-selected-facts dd {
        font-size: 9px;
    }

    .fx-net-process-head h3 {
        font-size: 21px;
    }

    .fx-net-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .fx-net-step {
        grid-template-columns: 33px minmax(0,1fr);
        gap: 11px;
    }

    .fx-net-step-copy p {
        max-width: 100%;
    }

    .fx-net-outro {
        gap: 10px;
        padding: 13px;
    }

    .fx-net-outro-mark {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .fx-net-outro-copy > p {
        font-size: 7px;
    }

    .fx-net-outro-copy h3 {
        font-size: 12px;
    }

    .fx-net-outro-copy > span {
        font-size: 8px;
    }

    .fx-net-cta {
        width: 100%;
        min-height: 41px;
        justify-content: space-between;
        font-size: 9px;
    }
}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 359px) {
    .fx-net-shell {
        width: calc(100% - 16px);
    }

    .fx-net-title {
        font-size: 25px;
    }

    .fx-net-scene-label,
    .fx-net-scene-status {
        font-size: 6px;
    }

    .fx-net-photo {
        height: 205px;
    }

    .fx-net-hotspot {
        width: 24px;
        height: 24px;
    }

    .fx-net-hotspot-number {
        font-size: 7px;
    }

    .fx-net-option-top > i {
        font-size: 11px;
    }

    .fx-net-option-name {
        font-size: 7px;
    }

    .fx-net-selected-main h3 {
        font-size: 16px;
    }

    .fx-net-outro {
        grid-template-columns: 30px minmax(0,1fr);
        padding: 11px;
    }

    .fx-net-outro-mark {
        width: 30px;
        height: 30px;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .fx-net .fx-net-route-flow,
    .fx-net .fx-net-hotspot-pulse,
    .fx-net .fx-net-scene-status > i,
    .fx-net .fx-net-photo::before,
    .fx-net .fx-net-step-node {
        animation: none !important;
    }

    .fx-net.is-ready [data-fx-net-reveal],
    .fx-net.is-ready .fx-net-visual:not(.is-in) .fx-net-photo-image {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .fx-net .fx-net-vehicle-select,
    .fx-net .fx-net-hotspot,
    .fx-net .fx-net-cta {
        transition: none !important;
    }
}

/* =========================================================
   HOME 2 — SECTION 06 DESCRIPTION FONT-SIZE FIX
   Match the existing maintenance / lease section typography.
   Scoped exclusively to .fx-net.
========================================================= */

/* Laptop-L and desktop */
.fx-net .fx-net-intro,
.fx-net .fx-net-selected-copy,
.fx-net .fx-net-process-head > p,
.fx-net .fx-net-step-copy p {
    font-size: 13px !important;
    line-height: 1.7;
}

.fx-net .fx-net-outro-copy > span {
    font-size: 12px !important;
    line-height: 1.65;
}

.fx-net .fx-net-selected-facts dd {
    font-size: 12px !important;
    line-height: 1.6;
}

.fx-net .fx-net-option-description {
    font-size: 11px !important;
    line-height: 1.5;
}


/* Laptop and tablet */
@media (max-width: 1199px) {
    .fx-net .fx-net-intro,
    .fx-net .fx-net-selected-copy,
    .fx-net .fx-net-process-head > p,
    .fx-net .fx-net-step-copy p {
        font-size: 12px !important;
    }

    .fx-net .fx-net-outro-copy > span {
        font-size: 11px !important;
    }

    .fx-net .fx-net-selected-facts dd {
        font-size: 11px !important;
    }

    .fx-net .fx-net-option-description {
        font-size: 10px !important;
    }
}


/* Mobile-L */
@media (max-width: 767px) {
    .fx-net .fx-net-intro,
    .fx-net .fx-net-selected-copy,
    .fx-net .fx-net-process-head > p,
    .fx-net .fx-net-step-copy p {
        font-size: 12px !important;
        line-height: 1.7;
    }

    .fx-net .fx-net-outro-copy > span,
    .fx-net .fx-net-selected-facts dd {
        font-size: 11px !important;
    }
}


/* Mobile-M and Mobile-S */
@media (max-width: 480px) {
    .fx-net .fx-net-intro,
    .fx-net .fx-net-selected-copy,
    .fx-net .fx-net-process-head > p,
    .fx-net .fx-net-step-copy p {
        font-size: 11px !important;
        line-height: 1.7;
    }

    .fx-net .fx-net-outro-copy > span,
    .fx-net .fx-net-selected-facts dd {
        font-size: 11px !important;
    }
}

/* =========================================================
   FLEETAXIS SERVICES — HERO ONLY
   Scoped styles; no global resets or global typography rules.
========================================================= */

body.fx-services-page .fxs-page {
    min-width: 0;
    width: 100%;
    overflow-x: clip;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
}

body.fx-services-page .fxs-hero {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(96px, 8.2vw, 118px) 0 clamp(44px, 5vw, 72px);
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 5% 6%,
            rgba(184,115,51,.065),
            transparent 37%
        ),
        var(--fx-champagne-light);
    color: var(--fx-text);
}

body.fx-services-page .fxs-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 12%;
    left: -170px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(184,115,51,.11);
    border-radius: 50%;
    box-shadow:
        0 0 0 35px rgba(184,115,51,.025),
        0 0 0 80px rgba(184,115,51,.018);
    pointer-events: none;
}

body.fx-services-page .fxs-shell {
    width: min(1380px, calc(100% - 64px));
    margin-inline: auto;
}

body.fx-services-page .fxs-layout {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    grid-template-areas: "copy visual";
    align-items: center;
    gap: clamp(26px, 4vw, 58px);
    min-width: 0;
}


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

body.fx-services-page .fxs-copy {
    grid-area: copy;
    width: 100%;
    min-width: 0;
}

body.fx-services-page .fxs-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .12em;
}

body.fx-services-page .fxs-eyebrow-line {
    display: inline-block;
    width: 27px;
    height: 2px;
    flex: 0 0 27px;
    border-radius: 2px;
    background: var(--fx-copper);
}

body.fx-services-page .fxs-title {
    max-width: 650px;
    margin: 0;
    color: var(--fx-black);
    font-family: "Inter", sans-serif;
    font-size: clamp(36px, 4.05vw, 55px);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

body.fx-services-page .fxs-title > span {
    display: block;
    margin-top: 5px;
    color: var(--fx-copper);
}

body.fx-services-page .fxs-description {
    max-width: 610px;
    margin: 19px 0 0;
    color: var(--fx-text-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs-vehicle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 19px;
}

body.fx-services-page .fxs-vehicle-tags > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 29px;
    padding: 6px 9px;
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    background: var(--fx-white);
    color: var(--fx-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    transition:
        border-color .25s ease,
        background-color .25s ease,
        transform .25s ease;
}

body.fx-services-page .fxs-vehicle-tags > span > i {
    color: var(--fx-copper-dark);
    font-size: 11px;
}

body.fx-services-page .fxs-vehicle-tags > span:hover {
    transform: translateY(-2px);
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
}


/* =========================================================
   CALLS TO ACTION
========================================================= */

body.fx-services-page .fxs-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 25px;
}

body.fx-services-page .fxs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    min-height: 45px;
    padding: 11px 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

body.fx-services-page .fxs-button > span {
    min-width: 0;
}

body.fx-services-page .fxs-button > i {
    flex: 0 0 auto;
    font-size: 11px;
}

body.fx-services-page .fxs-button-primary {
    background: var(--fx-copper);
    border-color: var(--fx-copper);
    color: #FFFFFF;
    box-shadow: 0 8px 22px rgba(184,115,51,.14);
}

body.fx-services-page .fxs-button-primary:hover {
    transform: translateY(-2px);
    background: var(--fx-copper-dark);
    border-color: var(--fx-copper-dark);
    color: #FFFFFF;
    box-shadow: 0 12px 26px rgba(184,115,51,.2);
}

body.fx-services-page .fxs-button-secondary {
    border-color: var(--fx-border);
    background: var(--fx-white);
    color: var(--fx-text);
}

body.fx-services-page .fxs-button-secondary > i {
    color: var(--fx-copper-dark);
}

body.fx-services-page .fxs-button-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

body.fx-services-page .fxs-button:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}


/* =========================================================
   THREE SERVICE TILES
========================================================= */

body.fx-services-page .fxs-service-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 29px;
}

body.fx-services-page .fxs-service-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 177px;
    padding: 13px 12px 11px;
    overflow: hidden;
    border: 1px solid var(--fx-border);
    border-radius: 9px;
    background: var(--fx-white);
    box-shadow: 0 7px 20px rgba(32,32,32,.025);
    transform-style: preserve-3d;
    transition:
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

body.fx-services-page .fxs-service-tile::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -33px;
    width: 85px;
    height: 85px;
    border: 1px solid rgba(184,115,51,.1);
    border-radius: 50%;
    pointer-events: none;
    transition: transform .35s ease;
}

body.fx-services-page .fxs-service-tile:hover {
    z-index: 2;
    border-color: rgba(184,115,51,.45);
    box-shadow: 0 15px 29px rgba(32,32,32,.09);
}

body.fx-services-page .fxs-service-tile:hover::after {
    transform: scale(1.35);
}

body.fx-services-page .fxs-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

body.fx-services-page .fxs-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(184,115,51,.23);
    border-radius: 8px;
    background: rgba(184,115,51,.07);
    color: var(--fx-copper-dark);
    font-size: 13px;
}

body.fx-services-page .fxs-tile-number {
    color: var(--fx-copper-dark);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
}

body.fx-services-page .fxs-service-tile h2 {
    margin: 0;
    color: var(--fx-black);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs-service-tile > p {
    position: relative;
    z-index: 1;
    margin: 7px 0 12px;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs-tile-bottom {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--fx-border);
    color: var(--fx-copper-dark);
    font-size: 7px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .07em;
    overflow-wrap: anywhere;
}


/* =========================================================
   SUPPORTING PROMISE
========================================================= */

body.fx-services-page .fxs-service-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 19px;
}

body.fx-services-page .fxs-note-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(184,115,51,.11);
    color: var(--fx-copper-dark);
    font-size: 10px;
}

body.fx-services-page .fxs-service-note p {
    max-width: 570px;
    margin: 0;
    color: var(--fx-text-soft);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs-service-note strong {
    color: var(--fx-black);
    font-weight: 600;
}


/* =========================================================
   RIGHT SIDE IMAGE STAGE
========================================================= */

body.fx-services-page .fxs-visual {
    grid-area: visual;
    position: relative;
    width: 100%;
    min-width: 0;
}

body.fx-services-page .fxs-visual-frame {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: clamp(480px, 44vw, 610px);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(184,115,51,.22);
    border-radius: 15px;
    background: #202020;
    box-shadow: 0 25px 70px rgba(32,32,32,.13);
    perspective: 1000px;
    --fxs-shift-x: 0px;
    --fxs-shift-y: 0px;
}

body.fx-services-page .fxs-fleet-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 57%;
    transform: scale(1.04);
    transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

body.fx-services-page .fxs-visual-frame:hover .fxs-fleet-image {
    transform:
        translate(
            calc(var(--fxs-shift-x) * .3),
            calc(var(--fxs-shift-y) * .3)
        )
        scale(1.085);
}

body.fx-services-page .fxs-image-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.70) 0%,
            rgba(17,17,17,.1) 20%,
            rgba(17,17,17,.02) 42%,
            rgba(17,17,17,.09) 61%,
            rgba(17,17,17,.76) 100%
        );
    pointer-events: none;
}

body.fx-services-page .fxs-image-grid {
    position: absolute;
    z-index: 2;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 39px 39px;
    opacity: .28;
    mask-image: linear-gradient(to bottom, black, transparent 85%);
    pointer-events: none;
}


/* =========================================================
   IMAGE LABELS
========================================================= */

body.fx-services-page .fxs-image-top {
    position: absolute;
    z-index: 6;
    top: 17px;
    right: 17px;
    left: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.fx-services-page .fxs-image-label,
body.fx-services-page .fxs-image-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 32px;
    padding: 7px 10px;
    border: 1px solid rgba(243,230,208,.22);
    border-radius: 6px;
    background: rgba(24,24,24,.74);
    color: #F8F5F0;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .055em;
    backdrop-filter: blur(10px);
}

body.fx-services-page .fxs-image-label > i {
    flex: 0 0 auto;
    color: #D49A63;
}

body.fx-services-page .fxs-image-status > span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #A6C49A;
    box-shadow: 0 0 0 4px rgba(166,196,154,.13);
    animation: fxsStatusGlow 2.8s ease-in-out infinite;
}


/* =========================================================
   ANIMATED ROUTE
========================================================= */

body.fx-services-page .fxs-route {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

body.fx-services-page .fxs-route-base,
body.fx-services-page .fxs-route-moving {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.fx-services-page .fxs-route-base {
    stroke: rgba(255,255,255,.50);
    stroke-width: 1.5;
}

body.fx-services-page .fxs-route-moving {
    stroke: url("#fxsRouteGradient");
    stroke-width: 3;
    stroke-dasharray: 10 9;
    filter: drop-shadow(0 0 5px rgba(184,115,51,.65));
    animation: fxsRouteTravel 12s linear infinite;
}

body.fx-services-page .fxs-route-point {
    fill: #D49A63;
    stroke: rgba(255,255,255,.9);
    stroke-width: 1.3;
    filter: drop-shadow(0 0 5px rgba(184,115,51,.8));
    transform-box: fill-box;
    transform-origin: center;
    animation: fxsRoutePoint 2.8s ease-in-out infinite;
}

body.fx-services-page .fxs-route-point:nth-of-type(2) {
    animation-delay: .4s;
}

body.fx-services-page .fxs-route-point:nth-of-type(3) {
    animation-delay: .8s;
}

body.fx-services-page .fxs-route-point:nth-of-type(4) {
    animation-delay: 1.2s;
}


/* =========================================================
   FLOATING IMAGE TILES
========================================================= */

body.fx-services-page .fxs-image-tile {
    position: absolute;
    z-index: 7;
    display: grid;
    grid-template-columns: 68px minmax(0,1fr) 26px;
    align-items: center;
    gap: 10px;
    width: min(78%, 330px);
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(243,230,208,.20);
    border-radius: 10px;
    background: rgba(24,24,24,.92);
    color: #F8F5F0;
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
    backdrop-filter: blur(13px);
    animation: fxsFloat 5.6s ease-in-out infinite;
}

body.fx-services-page .fxs-tile-lease {
    left: 17px;
    bottom: 102px;
}

body.fx-services-page .fxs-tile-care {
    right: 17px;
    bottom: 16px;
    animation-delay: -2.8s;
}

body.fx-services-page .fxs-floating-image {
    width: 68px;
    height: 65px;
    overflow: hidden;
    border-radius: 6px;
    background: #38332D;
}

body.fx-services-page .fxs-floating-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}

body.fx-services-page .fxs-image-tile:hover .fxs-floating-image img {
    transform: scale(1.1);
}

body.fx-services-page .fxs-floating-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

body.fx-services-page .fxs-floating-copy > span {
    color: #D49A63;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
}

body.fx-services-page .fxs-floating-copy strong {
    color: #F8F5F0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs-floating-copy small {
    color: #C8C0B7;
    font-size: 12px;
    letter-spacing: normal;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs-floating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(212,154,99,.3);
    border-radius: 6px;
    background: rgba(184,115,51,.13);
    color: #E2B487;
    font-size: 10px;
}


/* =========================================================
   IMAGE BOTTOM CAPTION
========================================================= */

body.fx-services-page .fxs-image-bottom {
    position: absolute;
    z-index: 5;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    pointer-events: none;
}

body.fx-services-page .fxs-caption-kicker {
    display: block;
    max-width: 300px;
    color: #F3E6D0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .08em;
}

body.fx-services-page .fxs-image-bottom p {
    margin: 5px 0 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

body.fx-services-page .fxs-caption-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border: 1px solid rgba(243,230,208,.3);
    border-radius: 50%;
    background: rgba(24,24,24,.63);
    color: #E2B487;
    font-size: 13px;
}


/* Keep photo caption below the floating tiles. */
body.fx-services-page .fxs-image-bottom {
    bottom: 17px;
    opacity: .96;
}

body.fx-services-page .fxs-tile-care {
    bottom: 69px;
}


/* =========================================================
   BELOW-IMAGE SERVICE STRIP
========================================================= */

body.fx-services-page .fxs-visual-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 9px 17px;
    padding: 14px 2px 0;
}

body.fx-services-page .fxs-visual-footer > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
}

body.fx-services-page .fxs-visual-footer i {
    color: var(--fx-copper-dark);
    font-size: 12px;
}


/* =========================================================
   CREATIVE REVEAL ANIMATIONS
   Hidden states are added only when page JS initializes.
========================================================= */

body.fx-services-page .fxs-hero.fxs-animate [data-fxs-reveal] {
    opacity: 0;
    transform: translateY(22px);
}

body.fx-services-page .fxs-hero.fxs-animate [data-fxs-reveal].fxs-in {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2,.8,.2,1);
}

body.fx-services-page .fxs-hero.fxs-animate .fxs-copy.fxs-in {
    transition-delay: .06s;
}

body.fx-services-page .fxs-hero.fxs-animate .fxs-visual.fxs-in {
    transition-delay: .2s;
}


/* Image entrance */
body.fx-services-page .fxs-hero.fxs-animate:not(.fxs-initialized) {
    --fxs-image-reveal: 1;
}

body.fx-services-page .fxs-visual::after {
    content: "";
    position: absolute;
    z-index: 8;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(212,154,99,.2) 50%,
        transparent 75%
    );
    transform: translateX(-135%);
    pointer-events: none;
}

body.fx-services-page .fxs-visual.fxs-in::after {
    animation: fxsImageSweep 1.5s .3s ease-out both;
}


/* Glow crossing the vehicle image */
body.fx-services-page .fxs-visual-frame::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 25%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.11),
        transparent
    );
    transform: skewX(-13deg);
    pointer-events: none;
}

body.fx-services-page .fxs-visual.fxs-in .fxs-visual-frame::after {
    animation: fxsImageShimmer 1.7s .55s ease-out both;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes fxsFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes fxsRouteTravel {
    to {
        stroke-dashoffset: -190;
    }
}

@keyframes fxsRoutePoint {
    0%, 100% {
        opacity: .7;
        transform: scale(.85);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

@keyframes fxsStatusGlow {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(166,196,154,.13);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(166,196,154,.035);
    }
}

@keyframes fxsImageSweep {
    from {
        transform: translateX(-135%);
    }
    to {
        transform: translateX(135%);
    }
}

@keyframes fxsImageShimmer {
    from {
        left: -40%;
    }
    to {
        left: 140%;
    }
}


/* =========================================================
   LAPTOP-L
========================================================= */

@media (max-width: 1439px) {
    body.fx-services-page .fxs-shell {
        width: min(1320px, calc(100% - 54px));
    }

    body.fx-services-page .fxs-layout {
        gap: 34px;
    }

    body.fx-services-page .fxs-service-tiles {
        gap: 8px;
    }

    body.fx-services-page .fxs-service-tile {
        padding-inline: 10px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) and (min-width: 1024px) {
    body.fx-services-page .fxs-shell {
        width: calc(100% - 42px);
    }

    body.fx-services-page .fxs-layout {
        gap: 23px;
    }

    body.fx-services-page .fxs-title {
        font-size: clamp(33px, 3.5vw, 43px);
    }

    body.fx-services-page .fxs-description {
        font-size: 12px;
    }

    body.fx-services-page .fxs-service-tiles {
        gap: 7px;
        margin-top: 23px;
    }

    body.fx-services-page .fxs-service-tile {
        min-height: 184px;
        padding: 11px 8px;
    }

    body.fx-services-page .fxs-tile-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 11px;
    }

    body.fx-services-page .fxs-service-tile h2 {
        font-size: 10px;
    }

    body.fx-services-page .fxs-service-tile > p {
        font-size: 9px;
    }

    body.fx-services-page .fxs-visual-frame {
        height: 520px;
    }

    body.fx-services-page .fxs-image-tile {
        grid-template-columns: 55px minmax(0,1fr) 23px;
        gap: 7px;
        width: min(85%, 310px);
        padding: 7px;
    }

    body.fx-services-page .fxs-floating-image {
        width: 55px;
        height: 58px;
    }

    body.fx-services-page .fxs-floating-copy strong {
        font-size: 9px;
    }

    body.fx-services-page .fxs-floating-copy small {
        font-size: 7px;
    }
}


/* =========================================================
   TABLET: STACK LEFT CONTENT ABOVE IMAGE
========================================================= */

@media (max-width: 1023px) {
    body.fx-services-page .fxs-hero {
        padding-top: 91px;
        padding-bottom: 48px;
    }

    body.fx-services-page .fxs-shell {
        width: calc(100% - 40px);
    }

    body.fx-services-page .fxs-layout {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas:
            "copy"
            "visual";
        gap: 31px;
    }

    body.fx-services-page .fxs-copy {
        max-width: 760px;
    }

    body.fx-services-page .fxs-title {
        max-width: 750px;
        font-size: clamp(38px,5.4vw,52px);
    }

    body.fx-services-page .fxs-description {
        max-width: 720px;
        font-size: 13px;
    }

    body.fx-services-page .fxs-service-tiles {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 11px;
    }

    body.fx-services-page .fxs-service-tile {
        min-height: 164px;
        padding: 13px;
    }

    body.fx-services-page .fxs-service-tile h2 {
        font-size: 11px;
    }

    body.fx-services-page .fxs-service-tile > p {
        font-size: 10px;
    }

    body.fx-services-page .fxs-visual {
        width: 100%;
        max-width: 760px;
        margin-inline: auto;
    }

    body.fx-services-page .fxs-visual-frame {
        height: clamp(410px, 61vw, 530px);
    }

    body.fx-services-page .fxs-image-tile {
        width: min(65%, 330px);
    }
}


/* =========================================================
   MOBILE-L
========================================================= */

@media (max-width: 767px) {
    body.fx-services-page .fxs-hero {
        padding-top: 79px;
        padding-bottom: 35px;
    }

    body.fx-services-page .fxs-shell {
        width: calc(100% - 32px);
    }

    body.fx-services-page .fxs-layout {
        gap: 25px;
    }

    body.fx-services-page .fxs-eyebrow {
        gap: 8px;
        margin-bottom: 14px;
        font-size: 9px;
        letter-spacing: .08em;
    }

    body.fx-services-page .fxs-title {
        font-size: clamp(33px, 6.5vw, 43px);
        line-height: 1.15;
    }

    body.fx-services-page .fxs-description {
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.8;
    }

    body.fx-services-page .fxs-vehicle-tags {
        gap: 7px;
        margin-top: 15px;
    }

    body.fx-services-page .fxs-vehicle-tags > span {
        min-height: 28px;
        padding: 6px 8px;
        font-size: 9px;
    }

    body.fx-services-page .fxs-actions {
        margin-top: 20px;
        gap: 9px;
    }

    body.fx-services-page .fxs-button {
        min-height: 43px;
        font-size: 10px;
    }

    body.fx-services-page .fxs-service-tiles {
        gap: 8px;
        margin-top: 23px;
    }

    body.fx-services-page .fxs-service-tile {
        min-height: 170px;
        padding: 11px 9px;
    }

    body.fx-services-page .fxs-tile-top {
        margin-bottom: 11px;
    }

    body.fx-services-page .fxs-tile-icon {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
        font-size: 11px;
    }

    body.fx-services-page .fxs-service-tile h2 {
        font-size: 10px;
    }

    body.fx-services-page .fxs-service-tile > p {
        font-size: 9px;
        line-height: 1.6;
    }

    body.fx-services-page .fxs-tile-bottom {
        font-size: 6.5px;
        letter-spacing: .04em;
    }

    body.fx-services-page .fxs-service-note {
        margin-top: 16px;
    }

    body.fx-services-page .fxs-service-note p {
        font-size: 10px;
    }

    body.fx-services-page .fxs-visual-frame {
        height: clamp(370px, 62vw, 455px);
        border-radius: 12px;
    }

    body.fx-services-page .fxs-fleet-image {
        object-position: center 57%;
    }

    body.fx-services-page .fxs-image-top {
        top: 12px;
        right: 12px;
        left: 12px;
    }

    body.fx-services-page .fxs-image-label,
    body.fx-services-page .fxs-image-status {
        min-height: 29px;
        padding: 6px 8px;
        font-size: 7px;
    }

    body.fx-services-page .fxs-image-tile {
        grid-template-columns: 59px minmax(0,1fr) 24px;
        gap: 8px;
        width: min(78%, 310px);
    }

    body.fx-services-page .fxs-tile-lease {
        left: 12px;
        bottom: 106px;
    }

    body.fx-services-page .fxs-tile-care {
        right: 12px;
        bottom: 17px;
    }

    body.fx-services-page .fxs-floating-image {
        width: 59px;
        height: 59px;
    }

    body.fx-services-page .fxs-floating-copy strong {
        font-size: 9px;
    }

    body.fx-services-page .fxs-floating-copy small {
        font-size: 8px;
    }

    body.fx-services-page .fxs-image-bottom {
        right: 12px;
        bottom: 13px;
        left: 12px;
    }

    body.fx-services-page .fxs-caption-mark {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    body.fx-services-page .fxs-visual-footer {
        gap: 9px 14px;
    }
}


/* =========================================================
   MOBILE-M
========================================================= */

@media (max-width: 480px) {
    body.fx-services-page .fxs-hero {
        padding-top: 69px;
        padding-bottom: 28px;
    }

    body.fx-services-page .fxs-shell {
        width: calc(100% - 24px);
    }

    body.fx-services-page .fxs-title {
        font-size: clamp(29px,7.7vw,36px);
        letter-spacing: -.03em;
    }

    body.fx-services-page .fxs-description {
        font-size: 12px;
    }

    body.fx-services-page .fxs-vehicle-tags {
        gap: 6px;
    }

    body.fx-services-page .fxs-vehicle-tags > span {
        font-size: 9px;
        padding-inline: 7px;
    }

    body.fx-services-page .fxs-actions {
        align-items: stretch;
        flex-direction: column;
    }

    body.fx-services-page .fxs-button {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        font-size: 11px;
    }

    body.fx-services-page .fxs-service-tiles {
        grid-template-columns: minmax(0,1fr);
        gap: 9px;
        margin-top: 19px;
    }

    body.fx-services-page .fxs-service-tile {
        display: grid;
        grid-template-columns: 35px minmax(0,1fr);
        grid-template-areas:
            "icon title"
            "icon desc"
            "foot foot";
        align-items: start;
        column-gap: 10px;
        row-gap: 3px;
        min-height: 0;
        padding: 12px;
    }

    body.fx-services-page .fxs-tile-top {
        display: contents;
    }

    body.fx-services-page .fxs-tile-icon {
        grid-area: icon;
        width: 32px;
        height: 32px;
        margin-top: 1px;
    }

    body.fx-services-page .fxs-tile-number {
        position: absolute;
        top: 8px;
        right: 11px;
    }

    body.fx-services-page .fxs-service-tile h2 {
        grid-area: title;
        padding-right: 21px;
        font-size: 11px;
    }

    body.fx-services-page .fxs-service-tile > p {
        grid-area: desc;
        margin: 2px 0 9px;
        font-size: 10px;
        line-height: 1.65;
    }

    body.fx-services-page .fxs-tile-bottom {
        grid-area: foot;
        margin-top: 1px;
        padding-top: 8px;
        font-size: 7px;
    }

    body.fx-services-page .fxs-service-note p {
        font-size: 10px;
    }

    body.fx-services-page .fxs-visual-frame {
        height: clamp(360px, 105vw, 425px);
    }

    body.fx-services-page .fxs-image-label,
    body.fx-services-page .fxs-image-status {
        gap: 5px;
        padding: 6px;
        font-size: 6.5px;
    }

    body.fx-services-page .fxs-image-tile {
        grid-template-columns: 48px minmax(0,1fr) 22px;
        gap: 6px;
        width: min(83%, 290px);
        padding: 7px;
    }

    body.fx-services-page .fxs-tile-lease {
        left: 8px;
        bottom: 108px;
    }

    body.fx-services-page .fxs-tile-care {
        right: 8px;
        bottom: 14px;
    }

    body.fx-services-page .fxs-floating-image {
        width: 48px;
        height: 53px;
    }

    body.fx-services-page .fxs-floating-copy > span {
        font-size: 6px;
    }

    body.fx-services-page .fxs-floating-copy strong {
        font-size: 8px;
    }

    body.fx-services-page .fxs-floating-copy small {
        font-size: 7px;
    }

    body.fx-services-page .fxs-floating-icon {
        width: 22px;
        height: 22px;
        font-size: 8px;
    }

    body.fx-services-page .fxs-image-bottom {
        right: 9px;
        bottom: 9px;
        left: 9px;
    }

    body.fx-services-page .fxs-caption-kicker {
        max-width: 225px;
        font-size: 7px;
    }

    body.fx-services-page .fxs-image-bottom p {
        font-size: 9px;
    }

    body.fx-services-page .fxs-caption-mark {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 10px;
    }

    body.fx-services-page .fxs-visual-footer > span {
        font-size: 8px;
    }
}


/* =========================================================
   MOBILE-S
========================================================= */

@media (max-width: 359px) {
    body.fx-services-page .fxs-shell {
        width: calc(100% - 18px);
    }

    body.fx-services-page .fxs-title {
        font-size: 28px;
    }

    body.fx-services-page .fxs-description {
        font-size: 11px;
    }

    body.fx-services-page .fxs-vehicle-tags > span {
        gap: 5px;
        font-size: 8px;
        padding-inline: 6px;
    }

    body.fx-services-page .fxs-visual-frame {
        height: 345px;
    }

    body.fx-services-page .fxs-image-status {
        max-width: 45%;
        overflow-wrap: anywhere;
    }

    body.fx-services-page .fxs-image-tile {
        width: 86%;
    }

    body.fx-services-page .fxs-tile-lease {
        bottom: 104px;
    }

    body.fx-services-page .fxs-floating-copy small {
        font-size: 7px;
    }

    body.fx-services-page .fxs-visual-footer > span {
        font-size: 7px;
    }
}


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

@media (prefers-reduced-motion: reduce) {
    body.fx-services-page .fxs-route-moving,
    body.fx-services-page .fxs-route-point,
    body.fx-services-page .fxs-image-status > span,
    body.fx-services-page .fxs-image-tile {
        animation: none !important;
    }

    body.fx-services-page .fxs-hero [data-fxs-reveal],
    body.fx-services-page .fxs-hero.fxs-animate [data-fxs-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    body.fx-services-page .fxs-visual-frame,
    body.fx-services-page .fxs-fleet-image,
    body.fx-services-page .fxs-service-tile,
    body.fx-services-page .fxs-button {
        transition: none !important;
    }

    body.fx-services-page .fxs-visual::after,
    body.fx-services-page .fxs-visual-frame::after {
        display: none !important;
    }
}

/* SERVICES HERO — FINAL IMAGE OVERLAY ALIGNMENT */

body.fx-services-page .fxs-image-bottom {
    top: 77px;
    bottom: auto;
}

body.fx-services-page .fxs-tile-lease {
    bottom: 135px;
}

body.fx-services-page .fxs-tile-care {
    bottom: 17px;
}

@media (max-width: 767px) {
    body.fx-services-page .fxs-image-bottom {
        top: 63px;
        bottom: auto;
    }

    body.fx-services-page .fxs-tile-lease {
        bottom: 106px;
    }

    body.fx-services-page .fxs-tile-care {
        bottom: 17px;
    }
}

@media (max-width: 480px) {
    body.fx-services-page .fxs-image-bottom {
        top: 61px;
        bottom: auto;
    }

    body.fx-services-page .fxs-tile-lease {
        bottom: 106px;
    }

    body.fx-services-page .fxs-tile-care {
        bottom: 14px;
    }
}

@media (max-width: 359px) {
    body.fx-services-page .fxs-image-bottom {
        top: 59px;
        bottom: auto;
    }

    body.fx-services-page .fxs-tile-lease {
        bottom: 104px;
    }

    body.fx-services-page .fxs-tile-care {
        bottom: 14px;
    }
}

/* =========================================
   FLEETAXIS SERVICES — CLEAN HERO IMAGE
   ========================================= */

/* Remove the animated wave/route line */
body.fx-services-page #fxsVisualFrame svg {
    display: none !important;
}

/* Remove the decorative circle if it is
   generated by the visual frame's ::after */
body.fx-services-page #fxsVisualFrame::after {
    content: none !important;
    display: none !important;
}

body.fx-services-page #fxsVisualFrame::before {
    content: none !important;
    display: none !important;
}

/* Hide common decorative circle elements
   inside this hero image */
body.fx-services-page #fxsVisualFrame .fxs-orb,
body.fx-services-page #fxsVisualFrame .fxs-visual-orb,
body.fx-services-page #fxsVisualFrame .fxs-image-orb,
body.fx-services-page #fxsVisualFrame .fxs-floating-circle,
body.fx-services-page #fxsVisualFrame .fxs-decorative-circle {
    display: none !important;
}

body.fx-services-page .fxs34-collision-point {
    display: none !important;
}

/* =========================================
   SERVICES HERO — CONSISTENT DESCRIPTION TYPE
   ========================================= */

body.fx-services-page .fxs-hero p:not([class*="eyebrow"])
    :not([class*="kicker"]):not([class*="label"])
    :not([class*="meta"]):not([class*="overline"]) {
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 400;
}

/* Tablet and mobile */
@media (max-width: 767px) {
    body.fx-services-page .fxs-hero p:not([class*="eyebrow"])
        :not([class*="kicker"]):not([class*="label"])
        :not([class*="meta"]):not([class*="overline"]) {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }
}

/* ==========================================
   FLEETAXIS SERVICES — READABLE CARD TEXT
   Match card descriptions to the hero description
   ========================================== */

/* Three service tiles on the left */
body.fx-services-page .fxs-hero [data-fxs-tilt] p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    font-weight: 400;
}

body.fx-services-page .fxs-hero [data-fxs-tilt] h3,
body.fx-services-page .fxs-hero [data-fxs-tilt] h4,
body.fx-services-page .fxs-hero [data-fxs-tilt] h5 {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 600;
}

/* Two floating information banners on the right */
body.fx-services-page .fxs-hero .fxs-tile-lease p,
body.fx-services-page .fxs-hero .fxs-tile-care p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400;
}

body.fx-services-page .fxs-hero .fxs-tile-lease h3,
body.fx-services-page .fxs-hero .fxs-tile-lease h4,
body.fx-services-page .fxs-hero .fxs-tile-care h3,
body.fx-services-page .fxs-hero .fxs-tile-care h4,
body.fx-services-page .fxs-hero .fxs-tile-lease strong,
body.fx-services-page .fxs-hero .fxs-tile-care strong {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 600;
}

/* Give the floating banners room for larger text */
body.fx-services-page .fxs-hero .fxs-tile-lease,
body.fx-services-page .fxs-hero .fxs-tile-care {
    min-height: 108px;
    height: auto;
}

/* Keep all five cards readable on mobile too */
@media (max-width: 767px) {
    body.fx-services-page .fxs-hero [data-fxs-tilt] p,
    body.fx-services-page .fxs-hero .fxs-tile-lease p,
    body.fx-services-page .fxs-hero .fxs-tile-care p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    body.fx-services-page .fxs-hero [data-fxs-tilt] h3,
    body.fx-services-page .fxs-hero [data-fxs-tilt] h4,
    body.fx-services-page .fxs-hero [data-fxs-tilt] h5,
    body.fx-services-page .fxs-hero .fxs-tile-lease h3,
    body.fx-services-page .fxs-hero .fxs-tile-lease h4,
    body.fx-services-page .fxs-hero .fxs-tile-care h3,
    body.fx-services-page .fxs-hero .fxs-tile-care h4,
    body.fx-services-page .fxs-hero .fxs-tile-lease strong,
    body.fx-services-page .fxs-hero .fxs-tile-care strong {
        font-size: 14px !important;
    }
}

/* =========================================================
   HOME 2 · SECTION 4 · FLEET SCAN
   Scoped to .fx-scan. Nothing here touches other sections.
========================================================= */

.fx-scan {
    --scan-bg: #141414;
    --scan-tile: #1D1D1D;
    --scan-line: rgba(243, 230, 208, .14);
    --scan-text: #F8F5F0;
    --scan-soft: #B9B0A5;
    --scan-cu: #D49A63;
    --scan-cu-d: #B87333;
    --scan-dir: 1;

    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(40px, 6vw, 96px) 0;
    background: var(--scan-bg);
    color: var(--scan-text);
}

.fx-scan::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .35;
    background-image:
        linear-gradient(var(--scan-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--scan-line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 75%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 75%);
}

.fx-scan-wrap { width: calc(100% - 32px); margin: 0 auto; }

/* ---------- grid (mobile first: 6 columns of squares) ---------- */

.fx-scan-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    perspective: 1400px;
}

.fx-scan-stage { grid-column: 1 / -1; order: 1; }
.fx-scan-tab   { grid-column: span 2; order: 2; aspect-ratio: 1; }
.fx-scan-stat  { grid-column: 1 / -1; order: 3; }
.fx-scan-tile[data-scan-tile] { grid-column: span 3; order: 4; aspect-ratio: 1; }

/* ---------- tiles ---------- */

.fx-scan-tile {
    position: relative;
    display: flex;
    min-width: 0;
    padding: clamp(12px, 1.4vw, 22px);
    border: 1px solid var(--scan-line);
    border-radius: 14px;
    background: var(--scan-tile);
    color: var(--scan-text);
    font: inherit;
    text-align: start;
    transition: background-color .4s ease, border-color .4s ease, transform .35s ease;
}

.fx-scan-tile::before,
.fx-scan-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.fx-scan-tile::before {
    opacity: .55;
    background-image:
        linear-gradient(var(--scan-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--scan-line) 1px, transparent 1px);
    background-size: 25% 25%;
    -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000);
            mask-image: linear-gradient(135deg, transparent 30%, #000);
}

.fx-scan-tile::after {
    opacity: 0;
    background: linear-gradient(160deg, rgba(184, 115, 51, .4), rgba(184, 115, 51, .06));
    transition: opacity .5s ease;
}

.fx-scan-tile.is-on,
.fx-scan-tab.is-active { border-color: var(--scan-cu-d); }
.fx-scan-tile.is-on::after,
.fx-scan-tab.is-active::after { opacity: 1; }

.fx-scan-face {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.fx-scan-tile.is-on .fx-scan-face { animation: fxScanFlip .7s cubic-bezier(.2, .8, .2, 1); }

.fx-scan-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.fx-scan-tile-top i {
    display: grid;
    place-items: center;
    flex: none;
    width: clamp(30px, 2.8vw, 42px);
    aspect-ratio: 1;
    border-radius: 10px;
    background: rgba(184, 115, 51, .18);
    color: var(--scan-cu);
    font-size: clamp(13px, 1.2vw, 18px);
    transition: background-color .4s ease, color .4s ease;
}

.fx-scan-tile-top b { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--scan-soft); }

.fx-scan-tile.is-on .fx-scan-tile-top i,
.fx-scan-tab.is-active .fx-scan-tile-top i { background: var(--scan-cu-d); color: #fff; }
.fx-scan-tile.is-on .fx-scan-tile-top b,
.fx-scan-tab.is-active .fx-scan-tile-top b { color: var(--scan-cu); }

.fx-scan-tile h3 { font-size: clamp(13px, 1.15vw, 17px); font-weight: 600; line-height: 1.25; color: var(--scan-text); }
.fx-scan-tile p  { margin-top: 6px; font-size: clamp(11px, .85vw, 13px); font-weight: 500; line-height: 1.45; color: var(--scan-soft); }

.fx-scan-tab { cursor: pointer; }
.fx-scan-tab:hover { border-color: var(--scan-cu-d); transform: translateY(-3px); }
.fx-scan-tab:focus-visible { outline: 2px solid var(--scan-cu); outline-offset: 2px; }

.fx-scan-bar { display: block; height: 4px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: var(--scan-line); }
.fx-scan-bar i { display: block; height: 100%; background: var(--scan-cu); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* stat tile */

.fx-scan-odo { display: block; height: 1em; overflow: hidden; font-size: clamp(44px, 6vw, 72px); font-weight: 600; line-height: 1; color: var(--scan-text); }
.fx-scan-odo-col { display: block; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform 1.8s cubic-bezier(.2, .8, .2, 1); }
.fx-scan-odo-col i { display: block; height: 1em; font-style: normal; }
.fx-scan-stat h3 { margin-top: 8px; }
.fx-scan-stat-note { margin: 0; font-size: 13px; color: var(--scan-soft); }
.fx-scan-stat-note strong { color: var(--scan-cu); font-weight: 600; }

/* ---------- stage ---------- */

.fx-scan-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--scan-line);
    border-radius: 18px;
    background: #0E0E0E;
}

.fx-scan-view { position: relative; flex: 1 1 auto; aspect-ratio: 5 / 4; }
.fx-scan-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fx-scan-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fx-scan-copy { position: relative; z-index: 2; padding: 22px 18px 0; }

.fx-scan-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border: 1px solid var(--scan-line);
    border-radius: 999px;
    background: rgba(20, 20, 20, .85);
    color: var(--scan-cu);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

.fx-scan-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--scan-cu); animation: fxScanBlink 1.6s steps(2, jump-none) infinite; }

.fx-scan-title { margin: 14px 0 0; font-size: clamp(26px, 7.4vw, 36px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--scan-text); }
.fx-scan-line { display: block; overflow: hidden; padding-block: .04em .12em; }
.fx-scan-line > span { display: block; }
.fx-scan-accent { color: var(--scan-cu); }

.fx-scan-text { margin: 12px 0 16px; max-width: 460px; font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--scan-soft); }

.fx-scan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 10px;
    background: var(--scan-cu-d);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 26px rgba(184, 115, 51, .35);
    transition: transform .25s ease, background-color .25s ease;
}

.fx-scan-btn i { font-size: 13px; transition: transform .25s ease; }
.fx-scan-btn:hover { background: var(--scan-cu); color: #151515; transform: translateY(-2px); }
.fx-scan-btn:hover i { transform: translateX(calc(var(--scan-dir) * 4px)); }
.fx-scan-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- entrance ---------- */

.fx-scan[data-ready] .fx-scan-grid:not(.is-in) .fx-scan-tile,
.fx-scan[data-ready] .fx-scan-grid:not(.is-in) .fx-scan-stage { opacity: 0; }
.fx-scan[data-ready] .fx-scan-grid:not(.is-in) .fx-scan-line > span { transform: translateY(120%); }
.fx-scan[data-ready] .fx-scan-grid:not(.is-in) .fx-scan-rise { opacity: 0; }

.fx-scan-grid.is-in .fx-scan-tile { animation: fxScanPop .8s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.fx-scan-grid.is-in .fx-scan-stage { animation: fxScanStage .9s cubic-bezier(.2, .8, .2, 1) backwards; }
.fx-scan-grid.is-in .fx-scan-line > span { animation: fxScanLine .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.35s + var(--l, 0) * .14s); }
.fx-scan-grid.is-in .fx-scan-rise { animation: fxScanRise .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.3s + var(--r, 0) * .14s); }

@keyframes fxScanPop   { from { opacity: 0; transform: scale(.5) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes fxScanStage { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fxScanLine  { from { transform: translateY(120%); } to { transform: none; } }
@keyframes fxScanRise  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fxScanFlip  { from { opacity: 0; transform: rotateY(90deg); } to { opacity: 1; transform: none; } }
@keyframes fxScanBlink { 50% { opacity: .25; } }

/* ---------- responsive ---------- */

@media (max-width: 359px) {
    .fx-scan-tile p { display: none; }
    .fx-scan-tile { padding: 10px; }
}

@media (min-width: 360px) {
    .fx-scan-wrap { width: calc(100% - 48px); }
}

@media (min-width: 768px) {
    .fx-scan-wrap { width: calc(100% - 80px); }
    .fx-scan-tile[data-scan-tile] { grid-column: span 2; }
    .fx-scan-view { aspect-ratio: 16 / 10; }
    .fx-scan-copy { padding: 30px 30px 0; }
    .fx-scan-title { font-size: clamp(30px, 5vw, 44px); }
}

@media (min-width: 1200px) {
    .fx-scan-wrap { width: min(1440px, calc(100% - 140px)); }
}

@media (min-width: 1024px) {
    .fx-scan-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
        aspect-ratio: 2 / 1;
    }

    .fx-scan-tile { min-height: 0; }
    .fx-scan-tile[data-scan-tile], .fx-scan-tab, .fx-scan-stat { aspect-ratio: auto; order: 0; }

    .fx-scan-s1 { grid-area: 1 / 1 / 3 / 3; }
    .fx-scan-s2 { grid-area: 3 / 1 / 5 / 3; }
    .fx-scan-s3 { grid-area: 5 / 1 / 7 / 3; }
    .fx-scan-s4 { grid-area: 1 / 11 / 3 / 13; }
    .fx-scan-s5 { grid-area: 3 / 11 / 5 / 13; }
    .fx-scan-s6 { grid-area: 5 / 11 / 7 / 13; }
    .fx-scan-stage { grid-area: 1 / 3 / 5 / 11; display: block; order: 0; }
    .fx-scan-t1 { grid-area: 5 / 3 / 7 / 5; }
    .fx-scan-t2 { grid-area: 5 / 5 / 7 / 7; }
    .fx-scan-t3 { grid-area: 5 / 7 / 7 / 9; }
    .fx-scan-stat { grid-area: 5 / 9 / 7 / 11; }

    .fx-scan-view { position: absolute; inset: 0; aspect-ratio: auto; }

    .fx-scan-copy { position: absolute; inset-block-start: 0; inset-inline-start: 0; max-width: 44%; padding: clamp(16px, 2.2vw, 34px); }
    .fx-scan-copy::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline: 0 -30%;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(90deg, #0E0E0E 45%, transparent);
    }

    .fx-scan-title { font-size: clamp(22px, 2.9vw, 46px); }
    .fx-scan-text { font-size: clamp(14px, 1.05vw, 16px); }
    .fx-scan-btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
}

@media (min-width: 1024px) and (max-width: 1179px) {
    .fx-scan-tile p { display: none; }
    .fx-scan-text { display: none; }
}

@media (min-width: 1180px) and (max-width: 1279px) {
    .fx-scan-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-scan *, .fx-scan *::before, .fx-scan *::after { animation: none !important; transition: none !important; }
    .fx-scan[data-ready] .fx-scan-grid:not(.is-in) .fx-scan-tile,
    .fx-scan[data-ready] .fx-scan-grid:not(.is-in) .fx-scan-stage,
    .fx-scan[data-ready] .fx-scan-grid:not(.is-in) .fx-scan-rise { opacity: 1; }
    .fx-scan[data-ready] .fx-scan-grid:not(.is-in) .fx-scan-line > span { transform: none; }
}

/* =========================================================
   FLEETAXIS SERVICES — SECTIONS 01 + 02
   Scoped additions only; shared site rules remain untouched
========================================================= */

body.fx-services-page .fxs2-overview,
body.fx-services-page .fxs2-lease {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(66px, 7.2vw, 108px) 0;
    font-family: "Inter", sans-serif;
    color: var(--fx-text);
}

body.fx-services-page .fxs2-overview {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(184,115,51,.085), transparent 35%),
        var(--fx-off-white);
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxs2-lease {
    background:
        radial-gradient(ellipse at 0% 5%, rgba(184,115,51,.10), transparent 34%),
        var(--fx-champagne-light);
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxs2-shell {
    width: min(1380px, calc(100% - 64px));
    margin-inline: auto;
}

body.fx-services-page .fxs2-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr);
    align-items: end;
    gap: clamp(26px, 4vw, 58px);
    margin-bottom: 36px;
}

body.fx-services-page .fxs2-head-copy,
body.fx-services-page .fxs2-section-lede,
body.fx-services-page .fxs2-head-aside,
body.fx-services-page .fxs2-service-card,
body.fx-services-page .fxs2-lease-card,
body.fx-services-page .fxs2-lease-intro-copy {
    min-width: 0;
}

body.fx-services-page .fxs2-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    color: var(--fx-copper-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .105em;
    text-transform: uppercase;
}

body.fx-services-page .fxs2-eyebrow > span {
    display: inline-block;
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    border-radius: 99px;
    background: var(--fx-copper);
}

body.fx-services-page .fxs2-section-title {
    max-width: 850px;
    margin: 0;
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 3.55vw, 52px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs2-section-title > span {
    display: block;
    margin-top: 4px;
    color: var(--fx-copper);
}

body.fx-services-page .fxs2-section-lede {
    max-width: 820px;
    margin: 18px 0 0;
    color: var(--fx-text-soft);
    font-size: clamp(15px, 1.08vw, 17px);
    font-weight: 400;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs2-head-aside {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 15px;
    padding: 23px 24px;
    border: 1px solid var(--fx-border);
    border-inline-start: 3px solid var(--fx-copper);
    border-radius: 12px;
    background: var(--fx-white);
    box-shadow: 0 13px 35px rgba(32, 32, 32, .045);
}

body.fx-services-page .fxs2-aside-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(184,115,51,.24);
    border-radius: 10px;
    background: rgba(184,115,51,.09);
    color: var(--fx-copper-dark);
    font-size: 22px;
}

body.fx-services-page .fxs2-head-aside strong {
    display: block;
    margin: 1px 0 7px;
    color: var(--fx-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}

body.fx-services-page .fxs2-head-aside p {
    margin: 0;
    color: var(--fx-text-soft);
    font-size: 15px;
    line-height: 1.7;
}

/* -----------------------------------------
   SECTION 01 — SERVICE FILTER TOOLBAR
----------------------------------------- */

body.fx-services-page .fxs2-overview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 17px 24px;
    padding: 18px 20px;
    margin-bottom: 22px;
    border: 1px solid var(--fx-border);
    border-radius: 12px;
    background: var(--fx-white);
}

body.fx-services-page .fxs2-filter-intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 155px;
}

body.fx-services-page .fxs2-filter-label {
    display: block;
    color: var(--fx-copper-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .09em;
}

body.fx-services-page .fxs2-filter-count {
    color: var(--fx-text-soft);
    font-size: 14px;
    line-height: 1.5;
}

body.fx-services-page .fxs2-filter-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

body.fx-services-page .fxs2-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .22s ease, border-color .22s ease,
                color .22s ease, transform .22s ease;
}

body.fx-services-page .fxs2-filter-chip > span {
    display: inline-grid;
    place-items: center;
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
    border-radius: 5px;
    background: rgba(184,115,51,.10);
    color: var(--fx-copper-dark);
    font-size: 11px;
    font-weight: 800;
}

body.fx-services-page .fxs2-filter-chip:hover {
    border-color: var(--fx-copper);
    transform: translateY(-1px);
}

body.fx-services-page .fxs2-filter-chip.is-active {
    border-color: var(--fx-copper);
    background: var(--fx-copper);
    color: #FFFFFF;
}

body.fx-services-page .fxs2-filter-chip.is-active > span {
    background: rgba(255,255,255,.18);
    color: #FFFFFF;
}

body.fx-services-page .fxs2-filter-chip:focus-visible,
body.fx-services-page .fxs2-reset-filters:focus-visible,
body.fx-services-page .fxs2-card-link:focus-visible,
body.fx-services-page .fxs2-inline-cta:focus-visible,
body.fx-services-page .fxs2-shortlist-button:focus-visible,
body.fx-services-page .fxs2-details-toggle:focus-visible,
body.fx-services-page .fxs2-clear-shortlist:focus-visible,
body.fx-services-page .fxs2-shortlist-cta:focus-visible,
body.fx-services-page .fxs2-no-results button:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

/* -----------------------------------------
   SECTION 01 — SERVICE CARDS
----------------------------------------- */

body.fx-services-page .fxs2-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

body.fx-services-page .fxs2-service-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--fx-border);
    border-radius: 13px;
    background: var(--fx-white);
    box-shadow: 0 8px 24px rgba(32,32,32,.035);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

body.fx-services-page .fxs2-service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(184,115,51,.52);
    box-shadow: 0 20px 42px rgba(32,32,32,.10);
}

body.fx-services-page .fxs2-service-card.is-filtered-out,
body.fx-services-page .fxs2-lease-card.is-filtered-out {
    display: none !important;
}

body.fx-services-page .fxs2-card-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    min-height: 190px;
    overflow: hidden;
    background: var(--fx-charcoal);
    text-decoration: none;
}

body.fx-services-page .fxs2-card-image::after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(180deg, transparent, rgba(12,12,12,.64));
    pointer-events: none;
}

body.fx-services-page .fxs2-card-image img,
body.fx-services-page .fxs2-lease-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}

body.fx-services-page .fxs2-service-card:hover .fxs2-card-image img,
body.fx-services-page .fxs2-lease-card:hover .fxs2-lease-card-media img {
    transform: scale(1.045);
}

body.fx-services-page .fxs2-image-number {
    position: absolute;
    z-index: 1;
    top: 14px;
    inset-inline-start: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 8px;
    background: rgba(20,20,20,.67);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

body.fx-services-page .fxs2-image-tag {
    position: absolute;
    z-index: 1;
    right: 14px;
    bottom: 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 28px);
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    background: rgba(17,17,17,.82);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .035em;
}

body.fx-services-page .fxs2-image-tag i { color: #E2B487; }

body.fx-services-page .fxs2-service-card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 22px 20px;
    min-width: 0;
}

body.fx-services-page .fxs2-service-card h3 {
    margin: 0;
    color: var(--fx-text);
    font-size: clamp(19px, 1.45vw, 22px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs2-service-card p {
    margin: 11px 0 20px;
    color: var(--fx-text-soft);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs2-card-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--fx-border);
    width: 100%;
    color: var(--fx-copper-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}

body.fx-services-page .fxs2-card-link i { font-size: 13px; }

body.fx-services-page .fxs2-card-link:hover {
    color: var(--fx-copper);
    gap: 14px;
}

/* -----------------------------------------
   SECTION 01 — SUMMARY STRIP
----------------------------------------- */

body.fx-services-page .fxs2-overview-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 25px;
    margin-top: 25px;
    padding: 21px 23px;
    border: 1px solid var(--fx-border);
    border-radius: 11px;
    background: rgba(184,115,51,.055);
}

body.fx-services-page .fxs2-overview-bottom > p {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 900px;
    margin: 0;
    color: var(--fx-text-soft);
    font-size: 15px;
    line-height: 1.7;
}

body.fx-services-page .fxs2-overview-bottom strong { color: var(--fx-text); }

body.fx-services-page .fxs2-bottom-check {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-size: 12px;
}

body.fx-services-page .fxs2-inline-cta,
body.fx-services-page .fxs2-shortlist-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 45px;
    padding: 11px 16px;
    border: 1px solid var(--fx-copper);
    border-radius: 8px;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

body.fx-services-page .fxs2-inline-cta:hover,
body.fx-services-page .fxs2-shortlist-cta:hover {
    transform: translateY(-2px);
    border-color: var(--fx-copper-dark);
    background: var(--fx-copper-dark);
    color: #FFFFFF;
}

/* -----------------------------------------
   SECTION 02 — LEASE EXPLORER HEADER
----------------------------------------- */

body.fx-services-page .fxs2-lease-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .85fr);
    align-items: stretch;
    gap: clamp(26px, 4.4vw, 64px);
    margin-bottom: 34px;
}

body.fx-services-page .fxs2-lease-intro-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-block: 12px;
}

body.fx-services-page .fxs2-lease-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

body.fx-services-page .fxs2-lease-benefits > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    background: var(--fx-white);
    color: var(--fx-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

body.fx-services-page .fxs2-lease-benefits i { color: var(--fx-copper-dark); }

body.fx-services-page .fxs2-lease-feature {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 310px;
    overflow: hidden;
    border: 1px solid rgba(184,115,51,.25);
    border-radius: 14px;
    background: var(--fx-charcoal);
    box-shadow: 0 18px 45px rgba(32,32,32,.10);
}

body.fx-services-page .fxs2-lease-feature > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxs2-lease-feature:hover > img { transform: scale(1.04); }

body.fx-services-page .fxs2-feature-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,12,12,.02) 3%, rgba(12,12,12,.18) 35%, rgba(12,12,12,.90) 100%);
}

body.fx-services-page .fxs2-feature-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 28px;
    color: #FFFFFF;
}

body.fx-services-page .fxs2-feature-copy > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 5px;
    background: rgba(17,17,17,.53);
    color: #F6D9B9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .075em;
    line-height: 1.4;
}

body.fx-services-page .fxs2-feature-copy strong {
    max-width: 480px;
    color: #FFFFFF;
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.025em;
    text-wrap: balance;
}

body.fx-services-page .fxs2-feature-copy small {
    max-width: 500px;
    color: rgba(255,255,255,.88);
    font-size: 15px;
    line-height: 1.65;
}

body.fx-services-page .fxs2-feature-index {
    position: absolute;
    top: 14px;
    inset-inline-end: 15px;
    z-index: 1;
    color: rgba(255,255,255,.83);
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.05em;
}

/* -----------------------------------------
   SECTION 02 — FILTER PANEL
----------------------------------------- */

body.fx-services-page .fxs2-lease-filter-panel {
    padding: 23px;
    margin-bottom: 23px;
    border: 1px solid var(--fx-border);
    border-radius: 13px;
    background: var(--fx-white);
    box-shadow: 0 12px 32px rgba(32,32,32,.045);
}

body.fx-services-page .fxs2-filter-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 18px;
}

body.fx-services-page .fxs2-filter-panel-top h3 {
    margin: 5px 0 0;
    color: var(--fx-text);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.025em;
}

body.fx-services-page .fxs2-reset-filters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

body.fx-services-page .fxs2-reset-filters:hover {
    border-color: var(--fx-copper);
    color: var(--fx-copper-dark);
}

body.fx-services-page .fxs2-filter-controls {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) repeat(3, minmax(155px, 1fr));
    gap: 13px;
}

body.fx-services-page .fxs2-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    color: var(--fx-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

body.fx-services-page .fxs2-control > span:first-child { color: var(--fx-text); }

body.fx-services-page .fxs2-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-off-white);
    color: var(--fx-copper-dark);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body.fx-services-page .fxs2-input-wrap:focus-within {
    border-color: var(--fx-copper);
    box-shadow: 0 0 0 3px rgba(184,115,51,.11);
}

body.fx-services-page .fxs2-input-wrap i { flex: 0 0 auto; font-size: 15px; }

body.fx-services-page .fxs2-input-wrap input,
body.fx-services-page .fxs2-control select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    outline: none;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body.fx-services-page .fxs2-input-wrap input {
    min-height: 44px;
    padding: 10px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.fx-services-page .fxs2-input-wrap input::placeholder {
    color: var(--fx-text-soft);
    opacity: 1;
}

body.fx-services-page .fxs2-control select {
    padding: 0 12px;
    cursor: pointer;
}

body.fx-services-page .fxs2-input-wrap input:focus-visible,
body.fx-services-page .fxs2-control select:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 2px;
}

body.fx-services-page .fxs2-filter-feedback {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 11px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxs2-filter-feedback p {
    margin: 0;
    color: var(--fx-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

body.fx-services-page .fxs2-result-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fx-copper);
    box-shadow: 0 0 0 4px rgba(184,115,51,.12);
}

body.fx-services-page .fxs2-filter-feedback-note {
    margin-inline-start: auto;
    color: var(--fx-text-soft);
    font-size: 13px;
    line-height: 1.5;
}

/* -----------------------------------------
   SECTION 02 — LEASE OPTION CARDS
----------------------------------------- */

body.fx-services-page .fxs2-lease-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

body.fx-services-page .fxs2-lease-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--fx-border);
    border-radius: 13px;
    background: var(--fx-white);
    box-shadow: 0 8px 25px rgba(32,32,32,.035);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body.fx-services-page .fxs2-lease-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184,115,51,.48);
    box-shadow: 0 20px 45px rgba(32,32,32,.09);
}

body.fx-services-page .fxs2-lease-card.is-picked {
    border-color: var(--fx-copper);
    box-shadow: 0 0 0 2px rgba(184,115,51,.12), 0 15px 33px rgba(32,32,32,.075);
}

body.fx-services-page .fxs2-lease-card-media {
    position: relative;
    height: 205px;
    overflow: hidden;
    background: var(--fx-charcoal);
}

body.fx-services-page .fxs2-option-number {
    position: absolute;
    top: 13px;
    inset-inline-start: 13px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    background: rgba(17,17,17,.76);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
}

body.fx-services-page .fxs2-option-tag {
    position: absolute;
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 5px;
    background: rgba(17,17,17,.85);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .06em;
}

body.fx-services-page .fxs2-lease-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 21px;
    min-width: 0;
}

body.fx-services-page .fxs2-lease-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 13px;
}

body.fx-services-page .fxs2-lease-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border: 1px solid rgba(184,115,51,.25);
    border-radius: 9px;
    background: rgba(184,115,51,.09);
    color: var(--fx-copper-dark);
    font-size: 18px;
}

body.fx-services-page .fxs2-model-label {
    color: var(--fx-copper-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .08em;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs2-lease-card h3 {
    margin: 0;
    color: var(--fx-text);
    font-size: clamp(20px, 1.5vw, 23px);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs2-lease-card-content > p {
    margin: 10px 0 17px;
    color: var(--fx-text-soft);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs2-card-detail-line {
    display: grid;
    grid-template-columns: minmax(90px, .42fr) minmax(0, 1fr);
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxs2-card-detail-line > span {
    color: var(--fx-text-soft);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

body.fx-services-page .fxs2-card-detail-line > strong {
    color: var(--fx-text);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs2-lease-card-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
    padding-top: 17px;
}

body.fx-services-page .fxs2-details-toggle,
body.fx-services-page .fxs2-shortlist-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    background: var(--fx-off-white);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: start;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

body.fx-services-page .fxs2-details-toggle:hover,
body.fx-services-page .fxs2-shortlist-button:hover {
    border-color: var(--fx-copper);
}

body.fx-services-page .fxs2-details-toggle i {
    color: var(--fx-copper-dark);
    transition: transform .2s ease;
}

body.fx-services-page .fxs2-details-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

body.fx-services-page .fxs2-shortlist-button {
    justify-content: center;
    border-color: var(--fx-copper);
    background: rgba(184,115,51,.055);
    color: var(--fx-copper-dark);
}

body.fx-services-page .fxs2-shortlist-button[aria-pressed="true"] {
    border-color: var(--fx-copper);
    background: var(--fx-copper);
    color: #FFFFFF;
}

body.fx-services-page .fxs2-shortlist-button[aria-pressed="true"] i { color: #FFFFFF; }

body.fx-services-page .fxs2-lease-more {
    margin-top: 12px;
    padding: 13px 14px;
    border-inline-start: 3px solid var(--fx-copper);
    border-radius: 0 7px 7px 0;
    background: rgba(184,115,51,.07);
}

body.fx-services-page .fxs2-lease-more p {
    margin: 0;
    color: var(--fx-text-soft);
    font-size: 14px;
    line-height: 1.7;
}

body.fx-services-page .fxs2-no-results {
    padding: 38px 24px;
    border: 1px dashed var(--fx-border);
    border-radius: 12px;
    background: var(--fx-white);
    text-align: center;
}

body.fx-services-page .fxs2-no-results[hidden],
body.fx-services-page .fxs2-lease-more[hidden] {
    display: none !important;
}

body.fx-services-page .fxs2-no-results > span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 13px;
    border-radius: 13px;
    background: rgba(184,115,51,.10);
    color: var(--fx-copper-dark);
    font-size: 22px;
}

body.fx-services-page .fxs2-no-results h3 {
    margin: 0;
    color: var(--fx-text);
    font-size: 22px;
    line-height: 1.35;
}

body.fx-services-page .fxs2-no-results p {
    margin: 9px auto 18px;
    max-width: 550px;
    color: var(--fx-text-soft);
    font-size: 15px;
    line-height: 1.7;
}

body.fx-services-page .fxs2-no-results button {
    min-height: 43px;
    padding: 10px 15px;
    border: 1px solid var(--fx-copper);
    border-radius: 7px;
    background: var(--fx-copper);
    color: #FFFFFF;
    font: 700 14px/1.4 "Inter", sans-serif;
    cursor: pointer;
}

/* -----------------------------------------
   SECTION 02 — LEASING SHORTLIST
----------------------------------------- */

body.fx-services-page .fxs2-shortlist-panel {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 15px;
    margin-top: 27px;
    padding: 21px 23px;
    border: 1px solid rgba(184,115,51,.35);
    border-radius: 12px;
    background: linear-gradient(100deg, rgba(184,115,51,.10), rgba(184,115,51,.025));
}

body.fx-services-page .fxs2-shortlist-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-size: 19px;
}

body.fx-services-page .fxs2-shortlist-copy { min-width: 0; }

body.fx-services-page .fxs2-shortlist-copy > strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--fx-text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
}

body.fx-services-page .fxs2-shortlist-copy > strong span {
    padding: 4px 8px;
    border: 1px solid var(--fx-border);
    border-radius: 5px;
    background: var(--fx-white);
    color: var(--fx-copper-dark);
    font-size: 12px;
    font-weight: 800;
}

body.fx-services-page .fxs2-shortlist-copy p {
    margin: 5px 0 0;
    color: var(--fx-text-soft);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs2-clear-shortlist {
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--fx-border);
    border-radius: 7px;
    background: var(--fx-white);
    color: var(--fx-text);
    font: 700 12px/1.4 "Inter", sans-serif;
    cursor: pointer;
}

body.fx-services-page .fxs2-clear-shortlist:hover:not(:disabled) {
    border-color: var(--fx-copper);
    color: var(--fx-copper-dark);
}

body.fx-services-page .fxs2-clear-shortlist:disabled {
    opacity: .5;
    cursor: not-allowed;
}

body.fx-services-page .fxs2-shortlist-cta {
    white-space: normal;
    text-align: center;
}

body.fx-services-page .fxs2-lease-disclaimer {
    margin: 17px 0 0;
    color: var(--fx-text-soft);
    font-size: 13px;
    line-height: 1.65;
}

/* -----------------------------------------
   SECTION-SCOPED REVEAL ANIMATIONS
----------------------------------------- */

body.fx-services-page.fxs2-motion-ready .fxs2-reveal-item {
    opacity: 0;
    transform: translateY(17px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page.fxs2-motion-ready .fxs2-reveal-item.fxs2-is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.fx-services-page .fxs2-service-card:nth-child(3n + 2),
body.fx-services-page .fxs2-lease-card:nth-child(3n + 2) {
    transition-delay: .035s;
}

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

body.fx-services-page .fxs2-service-card:not(.is-filtered-out),
body.fx-services-page .fxs2-lease-card:not(.is-filtered-out) {
    animation: fxs2FilterIn .28s ease both;
}

/* -----------------------------------------
   LAPTOP-L AND LAPTOP: up to 1199px
----------------------------------------- */

@media (max-width: 1199px) {
    body.fx-services-page .fxs2-shell {
        width: min(100% - 48px, 1380px);
    }

    body.fx-services-page .fxs2-section-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(260px, .75fr);
        gap: 30px;
    }

    body.fx-services-page .fxs2-lease-intro {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
        gap: 30px;
    }

    body.fx-services-page .fxs2-service-grid,
    body.fx-services-page .fxs2-lease-grid {
        gap: 16px;
    }

    body.fx-services-page .fxs2-service-card-copy { padding: 19px; }
    body.fx-services-page .fxs2-lease-card-content { padding: 18px; }
    body.fx-services-page .fxs2-lease-card-media { height: 185px; }

    body.fx-services-page .fxs2-filter-controls {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.fx-services-page .fxs2-search-control { grid-column: span 2; }
}

/* -----------------------------------------
   TABLET: up to 1023px
----------------------------------------- */

@media (max-width: 1023px) {
    body.fx-services-page .fxs2-overview,
    body.fx-services-page .fxs2-lease {
        padding: 65px 0;
    }

    body.fx-services-page .fxs2-section-head {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 22px;
    }

    body.fx-services-page .fxs2-head-aside { max-width: none; }

    body.fx-services-page .fxs2-service-grid,
    body.fx-services-page .fxs2-lease-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px;
    }

    body.fx-services-page .fxs2-lease-intro {
        grid-template-columns: minmax(0, 1fr) minmax(270px, .8fr);
        gap: 23px;
    }

    body.fx-services-page .fxs2-lease-feature { min-height: 290px; }
    body.fx-services-page .fxs2-lease-card-media { height: 205px; }

    body.fx-services-page .fxs2-shortlist-panel {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    body.fx-services-page .fxs2-shortlist-cta {
        grid-column: 2 / -1;
        justify-self: start;
    }
}

/* -----------------------------------------
   MOBILE-L: up to 767px
----------------------------------------- */

@media (max-width: 767px) {
    body.fx-services-page .fxs2-shell { width: calc(100% - 36px); }

    body.fx-services-page .fxs2-overview,
    body.fx-services-page .fxs2-lease {
        padding: 53px 0;
    }

    body.fx-services-page .fxs2-section-head { margin-bottom: 25px; }

    body.fx-services-page .fxs2-section-title {
        font-size: clamp(32px, 7.5vw, 42px);
        line-height: 1.13;
    }

    body.fx-services-page .fxs2-eyebrow {
        font-size: 11px;
        margin-bottom: 12px;
    }

    body.fx-services-page .fxs2-section-lede {
        margin-top: 14px;
        font-size: 15.5px;
        line-height: 1.75;
    }

    body.fx-services-page .fxs2-head-aside {
        grid-template-columns: 46px minmax(0,1fr);
        gap: 12px;
        padding: 17px;
    }

    body.fx-services-page .fxs2-aside-icon {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }

    body.fx-services-page .fxs2-head-aside strong { font-size: 16px; }
    body.fx-services-page .fxs2-head-aside p { font-size: 14.5px; }

    body.fx-services-page .fxs2-overview-toolbar {
        align-items: flex-start;
        padding: 15px;
        gap: 14px;
    }

    body.fx-services-page .fxs2-filter-intro,
    body.fx-services-page .fxs2-filter-buttons {
        width: 100%;
    }

    body.fx-services-page .fxs2-filter-buttons { justify-content: flex-start; }

    body.fx-services-page .fxs2-filter-chip {
        min-height: 40px;
        padding: 8px 10px;
        font-size: 12.5px;
    }

    body.fx-services-page .fxs2-service-grid,
    body.fx-services-page .fxs2-lease-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
    }

    body.fx-services-page .fxs2-card-image {
        min-height: 220px;
        aspect-ratio: 16 / 8.5;
    }

    body.fx-services-page .fxs2-service-card-copy { padding: 19px; }
    body.fx-services-page .fxs2-service-card h3 { font-size: 21px; }

    body.fx-services-page .fxs2-service-card p {
        margin: 9px 0 17px;
        font-size: 15.5px;
    }

    body.fx-services-page .fxs2-overview-bottom {
        align-items: flex-start;
        padding: 16px;
    }

    body.fx-services-page .fxs2-overview-bottom > p { font-size: 14.5px; }
    body.fx-services-page .fxs2-inline-cta { width: 100%; }

    body.fx-services-page .fxs2-lease-intro {
        grid-template-columns: minmax(0,1fr);
        gap: 22px;
        margin-bottom: 25px;
    }

    body.fx-services-page .fxs2-lease-intro-copy { padding: 0; }

    body.fx-services-page .fxs2-lease-benefits {
        gap: 7px;
        margin-top: 17px;
    }

    body.fx-services-page .fxs2-lease-benefits > span {
        font-size: 12px;
        min-height: 36px;
    }

    body.fx-services-page .fxs2-lease-feature { min-height: 265px; }
    body.fx-services-page .fxs2-feature-copy { padding: 20px; }
    body.fx-services-page .fxs2-feature-copy strong { font-size: 24px; }
    body.fx-services-page .fxs2-feature-copy small { font-size: 14px; }

    body.fx-services-page .fxs2-lease-filter-panel {
        padding: 16px;
        margin-bottom: 17px;
    }

    body.fx-services-page .fxs2-filter-panel-top h3 { font-size: 21px; }

    body.fx-services-page .fxs2-filter-controls {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 12px;
    }

    body.fx-services-page .fxs2-search-control { grid-column: 1 / -1; }
    body.fx-services-page .fxs2-control { font-size: 12px; }

    body.fx-services-page .fxs2-control select {
        font-size: 13px;
        padding-inline: 9px;
    }

    body.fx-services-page .fxs2-filter-feedback-note {
        width: 100%;
        margin-inline-start: 0;
    }

    body.fx-services-page .fxs2-lease-card-media { height: 230px; }
    body.fx-services-page .fxs2-lease-card-content { padding: 19px; }
    body.fx-services-page .fxs2-lease-card h3 { font-size: 22px; }

    body.fx-services-page .fxs2-lease-card-content > p { font-size: 15.5px; }
    body.fx-services-page .fxs2-card-detail-line > strong { font-size: 13.5px; }

    body.fx-services-page .fxs2-shortlist-panel {
        grid-template-columns: 42px minmax(0,1fr);
        align-items: start;
        gap: 12px;
        padding: 16px;
    }

    body.fx-services-page .fxs2-shortlist-icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    body.fx-services-page .fxs2-shortlist-copy > strong { font-size: 15.5px; }

    body.fx-services-page .fxs2-clear-shortlist {
        grid-column: 2;
        justify-self: start;
    }

    body.fx-services-page .fxs2-shortlist-cta {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
    }

    body.fx-services-page .fxs2-lease-disclaimer { font-size: 12.5px; }
}

/* -----------------------------------------
   MOBILE-M: up to 480px
----------------------------------------- */

@media (max-width: 480px) {
    body.fx-services-page .fxs2-shell { width: calc(100% - 28px); }

    body.fx-services-page .fxs2-overview,
    body.fx-services-page .fxs2-lease { padding: 44px 0; }

    body.fx-services-page .fxs2-section-title {
        font-size: clamp(30px, 8.4vw, 36px);
        letter-spacing: -.04em;
    }

    body.fx-services-page .fxs2-eyebrow {
        font-size: 10px;
        letter-spacing: .075em;
    }

    body.fx-services-page .fxs2-section-lede { font-size: 15px; }
    body.fx-services-page .fxs2-overview-toolbar { padding: 13px; }

    body.fx-services-page .fxs2-filter-chip {
        flex: 1 1 calc(50% - 8px);
        justify-content: space-between;
        font-size: 12px;
    }

    body.fx-services-page .fxs2-card-image { min-height: 185px; }
    body.fx-services-page .fxs2-service-card-copy { padding: 17px; }
    body.fx-services-page .fxs2-service-card h3 { font-size: 20px; }
    body.fx-services-page .fxs2-service-card p { font-size: 15px; }

    body.fx-services-page .fxs2-image-tag { font-size: 10px; }
    body.fx-services-page .fxs2-overview-bottom { padding: 14px; }
    body.fx-services-page .fxs2-overview-bottom > p { font-size: 14px; }

    body.fx-services-page .fxs2-lease-feature { min-height: 245px; }
    body.fx-services-page .fxs2-feature-copy { padding: 16px; }
    body.fx-services-page .fxs2-feature-copy strong { font-size: 22px; }
    body.fx-services-page .fxs2-feature-index { font-size: 30px; }

    body.fx-services-page .fxs2-lease-filter-panel { padding: 13px; }

    body.fx-services-page .fxs2-filter-panel-top { align-items: flex-start; }
    body.fx-services-page .fxs2-filter-panel-top h3 { font-size: 20px; }

    body.fx-services-page .fxs2-reset-filters {
        min-height: 37px;
        padding: 8px 9px;
        font-size: 12px;
    }

    body.fx-services-page .fxs2-filter-controls {
        grid-template-columns: minmax(0,1fr);
    }

    body.fx-services-page .fxs2-search-control { grid-column: auto; }
    body.fx-services-page .fxs2-control select { min-height: 46px; }

    body.fx-services-page .fxs2-lease-card-media { height: 205px; }
    body.fx-services-page .fxs2-lease-card-content { padding: 16px; }
    body.fx-services-page .fxs2-lease-card h3 { font-size: 21px; }
    body.fx-services-page .fxs2-lease-card-content > p { font-size: 15px; }

    body.fx-services-page .fxs2-card-detail-line {
        grid-template-columns: minmax(78px, .38fr) minmax(0, 1fr);
        gap: 8px;
    }

    body.fx-services-page .fxs2-card-detail-line > span { font-size: 11.5px; }
    body.fx-services-page .fxs2-card-detail-line > strong { font-size: 13px; }
    body.fx-services-page .fxs2-shortlist-panel { padding: 13px; }
}

/* -----------------------------------------
   MOBILE-S: narrow phones up to 359px
----------------------------------------- */

@media (max-width: 359px) {
    body.fx-services-page .fxs2-shell { width: calc(100% - 22px); }
    body.fx-services-page .fxs2-section-title { font-size: 29px; }

    body.fx-services-page .fxs2-eyebrow {
        font-size: 9.5px;
        gap: 7px;
    }

    body.fx-services-page .fxs2-eyebrow > span {
        width: 20px;
        flex-basis: 20px;
    }

    body.fx-services-page .fxs2-head-aside {
        grid-template-columns: 38px minmax(0,1fr);
        gap: 9px;
        padding: 12px;
    }

    body.fx-services-page .fxs2-aside-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    body.fx-services-page .fxs2-head-aside strong { font-size: 14.5px; }
    body.fx-services-page .fxs2-head-aside p { font-size: 13.5px; }

    body.fx-services-page .fxs2-filter-chip { flex-basis: 100%; }
    body.fx-services-page .fxs2-card-image { min-height: 160px; }

    body.fx-services-page .fxs2-image-tag {
        font-size: 9px;
        padding: 7px;
    }

    body.fx-services-page .fxs2-feature-copy strong { font-size: 20px; }
    body.fx-services-page .fxs2-feature-copy small { font-size: 13px; }
    body.fx-services-page .fxs2-filter-panel-top { gap: 9px; }

    body.fx-services-page .fxs2-reset-filters { width: 100%; }
    body.fx-services-page .fxs2-lease-card-media { height: 175px; }

    body.fx-services-page .fxs2-lease-card-heading { align-items: flex-start; }

    body.fx-services-page .fxs2-model-label {
        font-size: 10px;
        padding-top: 4px;
    }

    body.fx-services-page .fxs2-card-detail-line {
        grid-template-columns: minmax(0,1fr);
        gap: 4px;
    }

    body.fx-services-page .fxs2-shortlist-copy > strong {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.fx-services-page .fxs2-overview *,
    body.fx-services-page .fxs2-lease * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    body.fx-services-page.fxs2-motion-ready .fxs2-reveal-item,
    body.fx-services-page.fxs2-motion-ready .fxs2-reveal-item.fxs2-is-visible {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   SERVICES HERO — FLOATING TILES NO LONGER COVER THE PHOTO
   Paste at the very END of assets/css/styles.css
   (it must come after the existing .fxs- rules).

   The fleet photo now keeps its own area at the top of the
   frame, and the two tiles ("Choose your arrangement" and
   "Plan the vehicle care") sit underneath it inside the same
   rounded frame. Nothing else on the page is touched.
========================================================= */

body.fx-services-page #fxsVisualFrame {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    height: auto;
    min-height: 0;
    container-type: inline-size;
    container-name: fxsframe;
}


/* ---------- photo + its overlays share row 1 ---------- */

body.fx-services-page #fxsVisualFrame > .fxs-fleet-image {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    transform: none;
}

body.fx-services-page #fxsVisualFrame:hover > .fxs-fleet-image {
    transform: scale(1.04);
}

body.fx-services-page #fxsVisualFrame > .fxs-image-shade,
body.fx-services-page #fxsVisualFrame > .fxs-image-grid,
body.fx-services-page #fxsVisualFrame > .fxs-image-top,
body.fx-services-page #fxsVisualFrame > .fxs-image-bottom {
    grid-column: 1 / -1;
    grid-row: 1;
}


/* ---------- the two tiles move below the photo ---------- */

body.fx-services-page #fxsVisualFrame > .fxs-image-tile {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    width: auto;
    margin: 10px 10px 0;
    animation: none;
    transform: none;
}

body.fx-services-page #fxsVisualFrame > .fxs-tile-lease { grid-row: 2; }

body.fx-services-page #fxsVisualFrame > .fxs-tile-care {
    grid-row: 3;
    margin-bottom: 10px;
}

/* wide frames (tablet, large laptops): tiles sit side by side */
@container fxsframe (min-width: 620px) {

    body.fx-services-page #fxsVisualFrame > .fxs-tile-lease {
        grid-column: 1;
        grid-row: 2;
        margin: 10px 5px 10px 10px;
    }

    body.fx-services-page #fxsVisualFrame > .fxs-tile-care {
        grid-column: 2;
        grid-row: 2;
        margin: 10px 10px 10px 5px;
    }
}

/* phones: slightly taller photo so the vehicles stay readable */
@media (max-width: 767px) {

    body.fx-services-page #fxsVisualFrame > .fxs-fleet-image {
        aspect-ratio: 6 / 5;
    }

    body.fx-services-page #fxsVisualFrame > .fxs-image-tile {
        margin-inline: 8px;
    }
}


/* ---------- tile text stays readable at every width ---------- */

body.fx-services-page #fxsVisualFrame .fxs-floating-copy > span {
    font-size: 12px;
}

body.fx-services-page #fxsVisualFrame .fxs-floating-copy strong {
    font-size: 14px;
}

body.fx-services-page #fxsVisualFrame .fxs-floating-copy small {
    font-size: 12px;
    line-height: 1.5;
}

body.fx-services-page #fxsVisualFrame .fxs-floating-image {
    width: 64px;
    height: 64px;
}

body.fx-services-page #fxsVisualFrame > .fxs-image-tile {
    grid-template-columns: 64px minmax(0, 1fr) 26px;
}

/* =========================================================
   FLEETAXIS SERVICES — SECTIONS 03 + 04
   Theme: existing charcoal / copper / champagne / Inter
========================================================= */

body.fx-services-page .fxs34-maintenance,
body.fx-services-page .fxs34-categories {
    position: relative;
    isolation: isolate;
    padding: clamp(64px, 7vw, 100px) 0;
    overflow: clip;
    font-family: "Inter", sans-serif;
}

body.fx-services-page .fxs34-shell {
    width: min(1380px, calc(100% - 64px));
    margin-inline: auto;
}

body.fx-services-page .fxs34-maintenance {
    color: var(--fx-text);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(184,115,51,.075), transparent 36%),
        var(--fx-off-white);
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxs34-categories {
    color: #F3EDE5;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(184,115,51,.15), transparent 36%),
        #151515;
    border-top: 1px solid rgba(212,154,99,.25);
}

body.fx-services-page .fxs34-heading,
body.fx-services-page .fxs34-category-heading {
    max-width: 1000px;
    margin-bottom: 34px;
}

body.fx-services-page .fxs34-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    color: var(--fx-copper-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .105em;
    text-transform: uppercase;
}

body.fx-services-page .fxs34-eyebrow > span {
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    border-radius: 99px;
    background: var(--fx-copper);
}

body.fx-services-page .fxs34-heading h2,
body.fx-services-page .fxs34-category-heading h2 {
    max-width: 900px;
    margin: 0;
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 3.7vw, 52px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs34-heading h2 span {
    display: block;
    color: var(--fx-copper);
}

body.fx-services-page .fxs34-intro {
    max-width: 760px;
    margin: 17px 0 0;
    color: var(--fx-text-soft);
    font-size: 16px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* -----------------------------------------
   CENTER-COLLISION ENTRANCE ANIMATION
----------------------------------------- */

body.fx-services-page .fxs34-animate-section .fxs34-entry-left,
body.fx-services-page .fxs34-animate-section .fxs34-entry-right {
    opacity: 1;
    transform: none;
}

/* JS adds fxs34-motion-ready only after setting up observation. */
body.fx-services-page.fxs34-motion-ready
.fxs34-animate-section:not(.fxs34-in-view) .fxs34-entry-left {
    opacity: 0;
    transform: translateX(-62px);
}

body.fx-services-page.fxs34-motion-ready
.fxs34-animate-section:not(.fxs34-in-view) .fxs34-entry-right {
    opacity: 0;
    transform: translateX(62px);
}

body.fx-services-page .fxs34-entry-left,
body.fx-services-page .fxs34-entry-right {
    transition:
        opacity .8s cubic-bezier(.2,.7,.2,1),
        transform .85s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxs34-animate-section.fxs34-in-view .fxs34-entry-left,
body.fx-services-page .fxs34-animate-section.fxs34-in-view .fxs34-entry-right {
    opacity: 1;
    transform: translateX(0);
}

body.fx-services-page .fxs34-entry-right {
    transition-delay: .12s;
}

body.fx-services-page .fxs34-collision-point {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 50%;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-size: 13px;
    box-shadow: 0 0 0 0 rgba(184,115,51,.42);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.35);
}

body.fx-services-page .fxs34-in-view .fxs34-collision-point {
    animation: fxs34CenterImpact .65s .48s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes fxs34CenterImpact {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.35);
        box-shadow: 0 0 0 0 rgba(184,115,51,.5);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18);
        box-shadow: 0 0 0 13px rgba(184,115,51,.13);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 6px rgba(184,115,51,.07);
    }
}

/* -----------------------------------------
   SECTION 03 — MAINTENANCE FEATURE
----------------------------------------- */

body.fx-services-page .fxs34-maintenance-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    grid-template-areas: "visual content";
    align-items: stretch;
    gap: clamp(25px, 4vw, 56px);
}

body.fx-services-page .fxs34-maintenance-visual {
    grid-area: visual;
    min-width: 0;
}

body.fx-services-page .fxs34-maintenance-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

body.fx-services-page .fxs34-maintenance-photo {
    position: relative;
    min-height: 500px;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(184,115,51,.3);
    border-radius: 13px;
    background: var(--fx-charcoal);
    box-shadow: 0 20px 48px rgba(32,32,32,.12);
}

body.fx-services-page .fxs34-maintenance-photo > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity .3s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxs34-maintenance-photo:hover > img {
    transform: scale(1.035);
}

body.fx-services-page .fxs34-photo-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(16,16,16,.30), transparent 34%),
        linear-gradient(0deg, rgba(16,16,16,.90), transparent 62%);
    pointer-events: none;
}

body.fx-services-page .fxs34-photo-top {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.fx-services-page .fxs34-photo-top > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100% - 48px);
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    background: rgba(17,17,17,.75);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .06em;
    backdrop-filter: blur(10px);
}

body.fx-services-page .fxs34-photo-top > span:first-child i {
    color: #E2B487;
}

body.fx-services-page .fxs34-photo-number {
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.04em;
}

body.fx-services-page .fxs34-photo-caption {
    position: absolute;
    right: 25px;
    bottom: 25px;
    left: 25px;
    color: #FFFFFF;
}

body.fx-services-page .fxs34-photo-caption > span {
    display: inline-block;
    margin-bottom: 11px;
    color: #E2B487;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .09em;
}

body.fx-services-page .fxs34-photo-caption h3 {
    max-width: 450px;
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(26px, 2.6vw, 35px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.035em;
}

body.fx-services-page .fxs34-photo-caption p {
    max-width: 460px;
    margin: 11px 0 0;
    color: rgba(255,255,255,.88);
    font-size: 15px;
    line-height: 1.7;
}

body.fx-services-page .fxs34-photo-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 2px 0;
    color: var(--fx-text-soft);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .04em;
}

body.fx-services-page .fxs34-photo-bottom > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.fx-services-page .fxs34-photo-bottom i {
    color: var(--fx-copper);
    font-size: 15px;
}

/* Service selector panel */

body.fx-services-page .fxs34-maintenance-content-head {
    margin-bottom: 19px;
}

body.fx-services-page .fxs34-mini-label {
    display: block;
    margin-bottom: 8px;
    color: var(--fx-copper-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .1em;
}

body.fx-services-page .fxs34-maintenance-content-head h3 {
    margin: 0;
    color: var(--fx-text);
    font-size: clamp(25px, 2.4vw, 32px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
}

body.fx-services-page .fxs34-maintenance-content-head p {
    margin: 10px 0 0;
    color: var(--fx-text-soft);
    font-size: 15px;
    line-height: 1.75;
}

body.fx-services-page .fxs34-maintenance-options {
    display: grid;
    gap: 10px;
}

body.fx-services-page .fxs34-maintenance-option {
    display: grid;
    grid-template-columns: 45px minmax(0,1fr) 25px;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    background: var(--fx-white);
    color: var(--fx-text);
    text-align: start;
    cursor: pointer;
    transition:
        transform .22s ease,
        border-color .22s ease,
        background-color .22s ease,
        box-shadow .22s ease;
}

body.fx-services-page .fxs34-maintenance-option:hover {
    transform: translateX(3px);
    border-color: rgba(184,115,51,.55);
}

body.fx-services-page .fxs34-maintenance-option.is-active {
    border-color: var(--fx-copper);
    background: rgba(184,115,51,.075);
    box-shadow: inset 3px 0 0 var(--fx-copper);
}

body.fx-services-page .fxs34-option-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border: 1px solid rgba(184,115,51,.25);
    border-radius: 9px;
    background: rgba(184,115,51,.085);
    color: var(--fx-copper-dark);
    font-size: 18px;
}

body.fx-services-page .fxs34-option-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}

body.fx-services-page .fxs34-option-text strong {
    color: var(--fx-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs34-option-text small {
    color: var(--fx-text-soft);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs34-option-arrow {
    color: var(--fx-copper-dark);
    font-size: 13px;
    transition: transform .22s ease;
}

body.fx-services-page .fxs34-maintenance-option.is-active .fxs34-option-arrow {
    transform: translateX(3px);
    color: var(--fx-copper);
}

/* Selected service information */

body.fx-services-page .fxs34-maintenance-detail {
    margin-top: 15px;
    padding: 20px;
    border: 1px solid var(--fx-border);
    border-inline-start: 3px solid var(--fx-copper);
    border-radius: 10px;
    background: var(--fx-white);
}

body.fx-services-page .fxs34-detail-label {
    display: block;
    margin-bottom: 7px;
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .1em;
}

body.fx-services-page .fxs34-maintenance-detail h4 {
    margin: 0;
    color: var(--fx-text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

body.fx-services-page .fxs34-maintenance-detail p {
    margin: 8px 0 17px;
    color: var(--fx-text-soft);
    font-size: 14px;
    line-height: 1.75;
}

body.fx-services-page .fxs34-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 46px;
    padding: 12px 16px;
    border: 1px solid var(--fx-copper);
    border-radius: 7px;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

body.fx-services-page .fxs34-cta:hover {
    transform: translateY(-2px);
    border-color: var(--fx-copper-dark);
    background: var(--fx-copper-dark);
    color: #FFFFFF;
}

/* Maintenance workflow */

body.fx-services-page .fxs34-care-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 27px;
    padding: 21px 24px;
    border: 1px solid var(--fx-border);
    border-radius: 11px;
    background: rgba(184,115,51,.045);
}

body.fx-services-page .fxs34-care-flow-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 190px;
}

body.fx-services-page .fxs34-care-flow-title > strong {
    color: var(--fx-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

body.fx-services-page .fxs34-care-flow-steps {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.9vw, 26px);
}

body.fx-services-page .fxs34-care-flow-steps > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.fx-services-page .fxs34-care-flow-steps > div > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 1px solid rgba(184,115,51,.25);
    border-radius: 50%;
    background: rgba(184,115,51,.10);
    color: var(--fx-copper-dark);
    font-size: 11px;
    font-weight: 800;
}

body.fx-services-page .fxs34-care-flow-steps strong {
    color: var(--fx-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

body.fx-services-page .fxs34-care-flow-steps > i {
    color: var(--fx-copper);
    font-size: 12px;
}

/* -----------------------------------------
   SECTION 04 — DARK VEHICLE EXPLORER
   Deliberately charcoal in both color modes
----------------------------------------- */

body.fx-services-page .fxs34-categories .fxs34-eyebrow {
    color: #E2B487;
}

body.fx-services-page .fxs34-categories .fxs34-category-heading {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,.7fr);
    align-items: end;
    gap: 35px;
    max-width: none;
    margin-bottom: 30px;
}

body.fx-services-page .fxs34-category-heading h2 {
    color: #F3EDE5;
}

body.fx-services-page .fxs34-category-heading h2 span {
    display: block;
    color: #D49A63;
}

body.fx-services-page .fxs34-category-intro {
    max-width: 560px;
    margin: 0;
    color: #C1B8AD;
    font-size: 16px;
    line-height: 1.8;
}

body.fx-services-page .fxs34-category-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 9px;
    margin-bottom: 22px;
}

body.fx-services-page .fxs34-category-tab {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr);
    align-items: center;
    column-gap: 9px;
    row-gap: 7px;
    min-width: 0;
    min-height: 74px;
    padding: 13px 12px;
    border: 1px solid rgba(243,230,208,.16);
    border-radius: 9px;
    background: #202020;
    color: #F3EDE5;
    font-family: "Inter", sans-serif;
    text-align: start;
    cursor: pointer;
    transition:
        background .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

body.fx-services-page .fxs34-category-tab > i:first-child {
    color: #D49A63;
    font-size: 18px;
}

body.fx-services-page .fxs34-category-tab > span {
    color: #F3EDE5;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs34-category-tab .fxs34-tab-arrow {
    display: none;
}

body.fx-services-page .fxs34-category-tab:hover {
    transform: translateY(-2px);
    border-color: rgba(212,154,99,.55);
    background: #292522;
}

body.fx-services-page .fxs34-category-tab.is-active {
    border-color: #D49A63;
    background: #302A24;
    box-shadow: inset 0 -3px 0 #D49A63;
}

body.fx-services-page .fxs34-category-tab.is-active .fxs34-tab-arrow {
    display: block;
    grid-column: 2;
    color: #D49A63;
    font-size: 11px;
}

/* Stage: the image and details enter from opposing sides */

body.fx-services-page .fxs34-category-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr);
    grid-template-areas: "visual detail";
    align-items: stretch;
    gap: clamp(24px, 4vw, 54px);
}

body.fx-services-page .fxs34-category-visual {
    grid-area: visual;
    min-width: 0;
}

body.fx-services-page .fxs34-category-detail {
    grid-area: detail;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 25px 0;
}

body.fx-services-page .fxs34-category-image-wrap {
    position: relative;
    min-height: 390px;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(212,154,99,.34);
    border-radius: 12px;
    background: #202020;
}

body.fx-services-page .fxs34-category-image-wrap > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:
        opacity .32s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxs34-category-image-wrap:hover > img {
    transform: scale(1.035);
}

body.fx-services-page .fxs34-category-image-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15,15,15,.24), transparent 28%),
        linear-gradient(0deg, rgba(15,15,15,.88), transparent 65%);
    pointer-events: none;
}

body.fx-services-page .fxs34-category-image-top {
    position: absolute;
    top: 17px;
    right: 17px;
    left: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.fx-services-page .fxs34-category-image-top > span:first-child {
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 5px;
    background: rgba(17,17,17,.75);
    color: #F3EDE5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.45;
}

body.fx-services-page .fxs34-live-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #D49A63;
    box-shadow: 0 0 0 5px rgba(212,154,99,.16);
    animation: fxs34DotPulse 2s ease-in-out infinite;
}

@keyframes fxs34DotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(212,154,99,.10); }
    50% { box-shadow: 0 0 0 8px rgba(212,154,99,.03); }
}

body.fx-services-page .fxs34-category-image-bottom {
    position: absolute;
    right: 23px;
    bottom: 22px;
    left: 23px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

body.fx-services-page .fxs34-category-image-bottom > span {
    color: #E2B487;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

body.fx-services-page .fxs34-category-image-bottom strong {
    color: #FFFFFF;
    font-size: clamp(25px, 2.4vw, 33px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

/* Category information */

body.fx-services-page .fxs34-category-detail > .fxs34-mini-label {
    color: #E2B487;
}

body.fx-services-page .fxs34-category-detail h3 {
    margin: 0;
    color: #F3EDE5;
    font-size: clamp(29px, 3vw, 41px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs34-category-detail > p {
    margin: 15px 0 20px;
    color: #C1B8AD;
    font-size: 16px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs34-category-considerations {
    padding: 17px 18px;
    border: 1px solid rgba(243,230,208,.14);
    border-radius: 9px;
    background: #202020;
}

body.fx-services-page .fxs34-category-considerations h4 {
    margin: 0 0 12px;
    color: #F3EDE5;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

body.fx-services-page .fxs34-category-considerations ul {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

body.fx-services-page .fxs34-category-considerations li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #C1B8AD;
    font-size: 14px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs34-category-considerations li::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: #D49A63;
}

body.fx-services-page .fxs34-category-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 17px;
}

body.fx-services-page .fxs34-category-note > i {
    margin-top: 4px;
    color: #D49A63;
    font-size: 16px;
}

body.fx-services-page .fxs34-category-note p {
    margin: 0;
    color: #B8B0A6;
    font-size: 13px;
    line-height: 1.7;
}

body.fx-services-page .fxs34-category-cta {
    align-self: flex-start;
    margin-top: 19px;
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

body.fx-services-page .fxs34-category-cta:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
}

/* Category footer */

body.fx-services-page .fxs34-category-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px 25px;
    margin-top: 27px;
    padding: 20px 22px;
    border: 1px solid rgba(212,154,99,.26);
    border-radius: 10px;
    background: rgba(212,154,99,.065);
}

body.fx-services-page .fxs34-category-footer > p {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 850px;
    margin: 0;
    color: #C1B8AD;
    font-size: 14px;
    line-height: 1.75;
}

body.fx-services-page .fxs34-category-footer > p > i {
    margin-top: 4px;
    color: #D49A63;
    font-size: 17px;
}

body.fx-services-page .fxs34-category-footer strong {
    color: #F3EDE5;
}

body.fx-services-page .fxs34-category-footer > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 10px;
    min-height: 42px;
    padding: 10px 13px;
    border: 1px solid rgba(212,154,99,.4);
    border-radius: 7px;
    color: #E2B487;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

body.fx-services-page .fxs34-category-footer > a:hover {
    background: #B87333;
    color: #FFFFFF;
}

/* Keyboard visibility */

body.fx-services-page .fxs34-maintenance-option:focus-visible,
body.fx-services-page .fxs34-category-tab:focus-visible,
body.fx-services-page .fxs34-cta:focus-visible,
body.fx-services-page .fxs34-category-footer > a:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

/* Smooth image transition when selectors change */
body.fx-services-page .fxs34-maintenance-photo img,
body.fx-services-page .fxs34-category-image-wrap img {
    opacity: 1;
    transition:
        opacity .28s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxs34-image-switching {
    opacity: .15 !important;
}

@media (prefers-reduced-motion: reduce) {
    body.fx-services-page .fxs34-maintenance-photo img,
    body.fx-services-page .fxs34-category-image-wrap img {
        transition: none !important;
    }
}

/* =========================================================
   FLEETAXIS — ABOUT · HERO (TWO-TONE PANEL)
   Paste at the end of your existing styles.css.

   Every class starts with fx-ab- so no other page changes.
   Only your colour tokens and the Inter font are inherited.
========================================================= */

.fx-ab {
    --ab-dir: 1;

    /* the two background colours */
    --ab-a: #131313;
    --ab-b: #3A332C;

    --ab-text: #F8F5F0;
    --ab-soft: #DAD1C4;
    --ab-copper: #D49A63;
    --ab-copper-hi: #E2B487;
    --ab-glass: rgba(14, 14, 14, .58);
    --ab-line: rgba(243, 230, 208, .24);

    --ab-car-w: clamp(300px, 40vw, 600px);

    position: relative;
    padding: clamp(20px, 3vw, 36px) 0 clamp(44px, 5vw, 72px);
    background: var(--fx-champagne-light);
}


/* =========================================================
   PANEL — LEFT COLOUR + RIGHT COLOUR
========================================================= */

.fx-ab-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    width: min(1440px, calc(100% - 140px));
    min-height: max(640px, calc(100vh - var(--fx-navbar-height, 78px) - 72px));
    margin: 0 auto;
    padding: 40px 44px 24px;

    border: 1px solid rgba(184, 115, 51, .28);
    border-radius: 28px;
    background: linear-gradient(90deg, var(--ab-a) 0 50%, var(--ab-b) 50% 100%);
    color: var(--ab-text);
    box-shadow: 0 30px 80px rgba(32, 32, 32, .22);
}

/* thin copper seam where the two colours meet */
.fx-ab-panel::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    z-index: -1;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(212, 154, 99, .5) 30%, rgba(212, 154, 99, .5) 70%, transparent);
    pointer-events: none;
}

/* copper glow rising behind the vehicle */
.fx-ab-panel::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: -1;
    height: 60%;
    background: radial-gradient(ellipse at 50% 100%, rgba(212, 154, 99, .22), transparent 62%);
    pointer-events: none;
}

.fx-ab-in { animation: fxAbRise .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) backwards; }


/* =========================================================
   TOP : stats | headline | paragraph
========================================================= */

.fx-ab-top {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(220px, 290px);
    grid-template-areas: "stats copy para";
    column-gap: 40px;
    align-items: start;
}

.fx-ab-stats { grid-area: stats; }
.fx-ab-copy  { grid-area: copy; }
.fx-ab-para  { grid-area: para; }

.fx-ab-stats {
    display: grid;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fx-ab-stats li {
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--ab-copper);
}

.fx-ab-stats strong {
    display: block;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ab-text);
}

.fx-ab-stats li > span {
    font-size: 13px;
    font-weight: 500;
    color: var(--ab-soft);
}

.fx-ab-copy { min-width: 0; text-align: center; }

.fx-ab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid var(--ab-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--ab-copper-hi);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.fx-ab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ab-copper);
    box-shadow: 0 0 0 0 rgba(212, 154, 99, .55);
    animation: fxAbPulse 1.8s ease-out infinite;
}

.fx-ab-title {
    margin: 22px 0 0;
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 5.2vw, 68px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--ab-text);
    text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
    text-wrap: balance;
}

.fx-ab-line { display: block; }
.fx-ab-accent { color: var(--ab-copper); }

.fx-ab-para {
    max-width: 290px;
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--ab-soft);
}


/* =========================================================
   CENTRE : the vehicle
========================================================= */

.fx-ab-stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: calc(var(--ab-car-w) * .62);
    margin: 14px 0 16px;
}

.fx-ab-ring {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    z-index: 0;
    width: min(86%, 620px);
    aspect-ratio: 1;
    translate: -50% -46%;
    border: 1.5px dashed rgba(212, 154, 99, .42);
    border-radius: 50%;
    pointer-events: none;
    animation: fxAbSpin 60s linear infinite;
}

html[dir="rtl"] .fx-ab-ring { translate: 50% -46%; }

.fx-ab-car {
    position: relative;
    z-index: 1;
    width: var(--ab-car-w);
    max-width: 100%;
    translate: var(--ab-px, 0px) var(--ab-py, 0px);
    transition: translate .45s cubic-bezier(.2, .8, .2, 1);
    animation: fxAbIn 1.1s cubic-bezier(.2, .8, .2, 1) .35s backwards;
}

/* ground shadow */
.fx-ab-car::after {
    content: "";
    position: absolute;
    inset-inline: 8%;
    bottom: 6%;
    z-index: -1;
    height: 8%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, .65), transparent 70%);
    filter: blur(6px);
}

.fx-ab-car img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .5));
    -webkit-mask-image: linear-gradient(#000 86%, transparent 99%);
            mask-image: linear-gradient(#000 86%, transparent 99%);
    animation: fxAbFloat 6s ease-in-out 1.6s infinite;
}


/* =========================================================
   BOTTOM : dashboard badge, scroll cue, info bar
========================================================= */

.fx-ab-bottom { display: flex; flex-direction: column; gap: 14px; }

.fx-ab-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.fx-ab-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px 9px 10px;
    border: 1px solid var(--ab-line);
    border-radius: 14px;
    background: var(--ab-glass);
    color: var(--ab-text);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    transition: border-color .25s ease, transform .25s ease;
}

.fx-ab-badge:hover { border-color: var(--ab-copper); transform: translateY(-2px); }

.fx-ab-badge-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ab-copper);
    color: #151515;
    font-size: 16px;
}

.fx-ab-badge-text { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.fx-ab-badge-text small { font-size: 11px; font-weight: 500; color: var(--ab-soft); }
.fx-ab-badge-text strong { font-size: 14px; font-weight: 600; color: var(--ab-text); }

.fx-ab-scroll {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ab-line);
    border-radius: 50%;
    background: var(--ab-glass);
    color: var(--ab-text);
    font-size: 14px;
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    transition: border-color .25s ease, color .25s ease, transform .25s ease;
}

.fx-ab-scroll:hover { border-color: var(--ab-copper); color: var(--ab-copper-hi); transform: translateY(3px); }

.fx-ab-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: stretch;
    padding: 10px;
    border: 1px solid var(--ab-line);
    border-radius: 18px;
    background: var(--ab-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
            backdrop-filter: blur(16px) saturate(1.2);
}

.fx-ab-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 6px 18px;
    border-inline-end: 1px solid var(--ab-line);
}

.fx-ab-cell-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(212, 154, 99, .16);
    color: var(--ab-copper);
    font-size: 17px;
}

.fx-ab-cell-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fx-ab-cell-text strong { font-size: 15px; font-weight: 600; color: var(--ab-text); }
.fx-ab-cell-text small { font-size: 12.5px; font-weight: 500; color: var(--ab-soft); }

.fx-ab-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    margin-inline-start: 10px;
    padding: 0 32px;
    border-radius: 12px;
    background: var(--ab-copper);
    color: #151515;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 10px 28px rgba(212, 154, 99, .26);
    transition: background-color .25s ease, transform .25s ease;
}

.fx-ab-cta i { font-size: 13px; transition: transform .25s ease; }
.fx-ab-cta:hover { background: var(--ab-copper-hi); transform: translateY(-2px); }
.fx-ab-cta:hover i { transform: translateX(calc(var(--ab-dir) * 4px)); }

.fx-ab-badge:focus-visible,
.fx-ab-scroll:focus-visible,
.fx-ab-cta:focus-visible {
    outline: 2px solid var(--ab-copper-hi);
    outline-offset: 3px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .fx-ab-bar,
    .fx-ab-badge,
    .fx-ab-scroll { background: rgba(14, 14, 14, .85); }
}

@keyframes fxAbRise  { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes fxAbIn    { from { opacity: 0; transform: translateX(90px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fxAbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes fxAbPulse { to { box-shadow: 0 0 0 10px rgba(212, 154, 99, 0); } }
@keyframes fxAbSpin  { to { transform: rotate(360deg); } }


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

/* laptop */
@media (max-width: 1199px) {

    .fx-ab-panel { width: calc(100% - 80px); padding: 36px 32px 22px; }

    .fx-ab-top {
        grid-template-columns: minmax(120px, 150px) minmax(0, 1fr) minmax(180px, 220px);
        column-gap: 28px;
    }

    .fx-ab-title { font-size: clamp(34px, 4.4vw, 52px); }
    .fx-ab-stats strong { font-size: 26px; }
    .fx-ab-para { font-size: 14.5px; }

    .fx-ab-cta { padding: 0 24px; }
}

/* tablet */
@media (max-width: 1023px) {

    .fx-ab-panel { padding: 32px 26px 20px; border-radius: 24px; }

    .fx-ab-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "copy  copy"
            "stats para";
        row-gap: 30px;
    }

    .fx-ab-title { font-size: clamp(34px, 5.6vw, 52px); }

    .fx-ab-stats { grid-auto-flow: column; grid-auto-columns: max-content; gap: 34px; align-self: center; }

    .fx-ab-para { max-width: 340px; margin: 0; justify-self: end; }

    .fx-ab-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }

    .fx-ab-cell:nth-child(3) { border-inline-end: 0; }

    .fx-ab-cta { grid-column: 1 / -1; margin-inline-start: 0; min-height: 52px; }
}

/* mobile : the two colours split top / bottom behind the vehicle */
@media (max-width: 767px) {

    .fx-ab { padding: 16px 0 44px; }

    .fx-ab-panel {
        width: calc(100% - 32px);
        min-height: max(600px, calc(100vh - var(--fx-navbar-height, 78px) - 32px));
        padding: 28px 18px 18px;
        border-radius: 22px;
        background: var(--ab-a);
    }

    .fx-ab-panel::before { display: none; }

    .fx-ab-stage::before {
        content: "";
        position: absolute;
        inset-inline: -60px;
        top: 50%;
        bottom: -400px;
        z-index: -1;
        background: var(--ab-b);
        border-top: 1px solid rgba(212, 154, 99, .45);
    }

    .fx-ab-top {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "para"
            "stats";
        row-gap: 0;
    }

    .fx-ab-title { margin-top: 18px; }

    .fx-ab-para { max-width: 460px; margin: 14px auto 0; justify-self: center; text-align: center; }

    .fx-ab-stats { justify-content: center; gap: 28px; margin-top: 24px; }
    .fx-ab-stats strong { font-size: 24px; }

    .fx-ab-stage { margin: 18px 0 14px; }

    .fx-ab-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 10px;
        border-radius: 16px;
    }

    .fx-ab-cell {
        flex-direction: column;
        justify-content: flex-start;
        gap: 8px;
        padding: 6px 4px;
        text-align: center;
    }

    .fx-ab-cell-text small { display: none; }
    .fx-ab-cell-text strong { font-size: 13px; }

    .fx-ab-cta { min-height: 52px; }
}

/* mobile L and below */
@media (max-width: 480px) {

    .fx-ab-title { font-size: clamp(30px, 9.4vw, 42px); }

    .fx-ab-badge { padding: 8px 14px 8px 8px; }
    .fx-ab-badge-icon { width: 34px; height: 34px; font-size: 15px; }
}

/* mobile S */
@media (max-width: 359px) {

    .fx-ab-panel { width: calc(100% - 24px); padding: 24px 14px 14px; }

    .fx-ab-eyebrow { padding: 6px 12px; font-size: 12px; }
    .fx-ab-title { font-size: 29px; }
    .fx-ab-para { font-size: 14px; }
    .fx-ab-stats { gap: 18px; }
    .fx-ab-stats li { padding-inline-start: 12px; }
    .fx-ab-stats strong { font-size: 21px; }
    .fx-ab-stats li > span { font-size: 12px; }
    .fx-ab-badge-text small { display: none; }
    .fx-ab-cell-icon { width: 36px; height: 36px; font-size: 15px; }
}

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

    .fx-ab-in,
    .fx-ab-car,
    .fx-ab-car img,
    .fx-ab-ring,
    .fx-ab-dot { animation: none; }

    .fx-ab-car { transition: none; }
}

/* =========================================================
   FLEETAXIS — CONTACT PAGE · HERO ("THE COCKPIT")
   Paste at the end of your existing styles.css
   (or link this file after styles.css).

   Fully scoped: every class starts with fx-ct-, every
   keyframe with fxCt…, and every colour is a local
   --ct-… variable, so nothing else on the site can change.
   Height, spacing, font sizes and the Inter font follow
   the home 1 hero.
========================================================= */


.fx-ct {
    /* theme (light) — same values as your tokens */
    --ct-bg: #FAF5ED;
    --ct-surface: #FFFFFF;
    --ct-ink: #151515;
    --ct-text: #202020;
    --ct-soft: #66615B;
    --ct-copper: #B87333;
    --ct-copper-light: #D49A63;
    --ct-accent-text: #985A25;
    --ct-border: rgba(32, 32, 32, .12);
    --ct-border-2: rgba(32, 32, 32, .2);
    --ct-tint: rgba(184, 115, 51, .12);
    --ct-on: #FFFFFF;
    --ct-glow: rgba(184, 115, 51, .26);
    --ct-dir: 1;

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

    min-height: max(640px, calc(100vh - var(--fx-navbar-height, 78px)));
    display: flex;
    align-items: center;

    padding: 56px 0 64px;
    background: var(--ct-bg);
    color: var(--ct-text);
    font-family: "Inter", sans-serif;
    line-height: 1.6;
}

.fx-ct *,
.fx-ct *::before,
.fx-ct *::after { box-sizing: border-box; }

.fx-ct-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ---------- background ---------- */

.fx-ct-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.fx-ct-grid {
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(var(--ct-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--ct-border) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 72% 50%, #000 0, transparent 70%);
            mask-image: radial-gradient(ellipse at 72% 50%, #000 0, transparent 70%);
}

.fx-ct-glow {
    position: absolute;
    inset-inline-end: -8%;
    top: 50%;
    width: min(62vw, 880px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--ct-glow), rgba(184, 115, 51, .08) 55%, transparent 72%);
    animation: fxCtBreathe 7s ease-in-out infinite;
}


/* ---------- layout ---------- */

.fx-ct-inner {
    width: min(1440px, calc(100% - 140px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 56px;
}

.fx-ct-copy { min-width: 0; text-align: start; }


/* ---------- copy ---------- */

.fx-ct-rise {
    opacity: 0;
    animation: fxCtRise .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) forwards;
}

.fx-ct-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid var(--ct-border);
    border-radius: 999px;
    background: var(--ct-surface);
    color: var(--ct-accent-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
}

.fx-ct-pulse {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ct-copper);
    box-shadow: 0 0 0 0 rgba(184, 115, 51, .5);
    animation: fxCtPulse 1.8s ease-out infinite;
}

.fx-ct-title {
    margin: 22px 0 20px;
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 5.2vw, 68px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--ct-ink);
}

.fx-ct-line { display: block; overflow: hidden; padding-block: .04em .14em; }

.fx-ct-line > span {
    display: block;
    transform: translateY(120%);
    animation: fxCtLine .95s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) forwards;
}

.fx-ct-accent { color: var(--ct-copper); }

.fx-ct-text {
    max-width: 520px;
    margin: 0 0 30px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--ct-soft);
}

.fx-ct-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.fx-ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}

.fx-ct-btn svg { flex: 0 0 auto; width: 15px; height: 15px; transition: transform .25s ease; }

.fx-ct-btn-primary {
    background: var(--ct-copper);
    color: var(--ct-on);
    box-shadow: 0 10px 26px rgba(184, 115, 51, .35);
}

.fx-ct-btn-primary:hover { background: var(--ct-accent-text); color: var(--ct-on); transform: translateY(-2px); }
.fx-ct-btn-primary:hover svg { transform: translateX(calc(var(--ct-dir) * 4px)); }

.fx-ct-btn-ghost {
    border-color: var(--ct-border-2);
    background: transparent;
    color: var(--ct-ink);
}

.fx-ct-btn-ghost svg { color: var(--ct-copper); }
.fx-ct-btn-ghost:hover { border-color: var(--ct-copper); color: var(--ct-ink); transform: translateY(-2px); }

.fx-ct-btn:focus-visible,
.fx-ct-light:focus-visible {
    outline: 2px solid var(--ct-copper);
    outline-offset: 3px;
}

.fx-ct-live {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ct-soft);
}

.fx-ct-live b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ct-ink); }

.fx-ct-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 38px;
    margin: 30px 0 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--ct-border);
}

.fx-ct-stats strong { display: block; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--ct-ink); }
.fx-ct-stats span { font-size: 13px; font-weight: 500; color: var(--ct-soft); }


/* =========================================================
   THE INSTRUMENT CLUSTER
   Always dark, like a real dashboard, so every label keeps
   its contrast in both light and dark mode.
========================================================= */

.fx-ct-bin {
    --pn-text: #F8F5F0;
    --pn-soft: #B8B0A6;
    --pn-dim: #8F877D;
    --pn-copper: #D49A63;
    --pn-copper-hi: #E2B487;
    --pn-line: #2C2926;

    position: relative;
    min-width: 0;
    padding: 26px 28px 24px;
    border: 1px solid rgba(212, 154, 99, .38);
    border-radius: 32px;
    background: linear-gradient(160deg, #1E1E20, #0B0B0C);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 60px rgba(212, 154, 99, .05);
    color: var(--pn-text);
    opacity: 0;
    animation: fxCtRise 1s cubic-bezier(.2, .8, .2, 1) .25s forwards;
}

.fx-ct-bin-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
}

.fx-ct-brand { font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--pn-copper-hi); }

.fx-ct-ready {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--pn-soft);
}

.fx-ct-ready i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pn-copper);
    box-shadow: 0 0 10px var(--pn-copper);
    animation: fxCtBlink 1.6s ease-in-out infinite;
}


/* ---------- gauges ---------- */

.fx-ct-gauges {
    display: grid;
    grid-template-columns: 1fr 1.32fr 1fr;
    gap: 10px;
    align-items: end;
}

.fx-ct-g { position: relative; min-width: 0; text-align: center; }

.fx-ct-g svg { display: block; width: 100%; height: auto; overflow: visible; }

.fx-ct-cap { margin: 6px 0 0; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--pn-soft); }

.fx-ct-ro {
    position: absolute;
    inset-inline: 0;
    top: 57%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    pointer-events: none;
}

.fx-ct-g-mid .fx-ct-ro { top: 60%; }

.fx-ct-ro b {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--pn-text);
}

.fx-ct-g-mid .fx-ct-ro b { color: var(--pn-copper-hi); }

.fx-ct-ro span { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--pn-soft); }

.fx-ct-face { fill: url(#fx-ct-face); stroke: rgba(212, 154, 99, .3); stroke-width: 1; }
.fx-ct-track { fill: none; stroke: #35312D; stroke-width: 9; }
.fx-ct-seg { fill: none; stroke: #35312D; stroke-width: 11; transition: stroke .5s ease, filter .5s ease; }
.fx-ct-seg.is-on { stroke: #D49A63; filter: drop-shadow(0 0 5px rgba(212, 154, 99, .8)); }
.fx-ct-tick { stroke: #6F675E; stroke-width: 2; stroke-linecap: round; }
.fx-ct-tick.is-major { stroke: #B8B0A6; stroke-width: 2.6; }
.fx-ct-tick.is-now { stroke: #E2B487; stroke-width: 3.4; filter: drop-shadow(0 0 4px rgba(226, 180, 135, .9)); }
.fx-ct-mark { fill: #D49A63; }
.fx-ct-tl { font: 600 10.5px "Inter", sans-serif; fill: #B8B0A6; text-anchor: middle; dominant-baseline: middle; }

.fx-ct-needle {
    transform-origin: 100px 100px;
    transition: transform 1.25s cubic-bezier(.3, 1.35, .4, 1);
}

.fx-ct-needle line { stroke: #E2B487; stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(226, 180, 135, .8)); }
.fx-ct-needle.is-thin line { stroke-width: 2.2; }

.fx-ct-idle { transform-origin: 100px 100px; animation: fxCtIdle 3.2s ease-in-out infinite; }

.fx-ct-hub { fill: #E2B487; }
.fx-ct-hub-in { fill: #0B0B0C; }


/* ---------- warning lights ---------- */

.fx-ct-lights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 0;
}

.fx-ct-light {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 12px 6px 10px;
    border: 1px solid var(--pn-line);
    border-radius: 14px;
    background: #121213;
    color: var(--pn-soft);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    opacity: 0;
    animation: fxCtRise .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) forwards;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .3s ease;
}

.fx-ct-light svg { width: 24px; height: 24px; transition: color .3s ease, filter .3s ease; }

.fx-ct-light:hover { border-color: rgba(212, 154, 99, .6); color: var(--pn-text); }

.fx-ct-light.is-on {
    border-color: var(--pn-copper);
    background: rgba(212, 154, 99, .14);
    color: var(--pn-text);
    transform: translateY(-3px);
}

.fx-ct-light.is-on svg { color: var(--pn-copper-hi); filter: drop-shadow(0 0 7px rgba(226, 180, 135, .9)); }


/* ---------- trip display ---------- */

.fx-ct-lcd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 16px 0 0;
    padding: 16px 20px;
    border: 1px solid var(--pn-line);
    border-radius: 16px;
    background: #060606;
    box-shadow: inset 0 0 30px rgba(212, 154, 99, .07);
}

.fx-ct-lcd-main { min-width: 0; }

.fx-ct-lcd small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--pn-dim); }

.fx-ct-lcd h2 {
    margin: 3px 0 4px;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--pn-copper-hi);
}

.fx-ct-lcd h2::after { content: "_"; margin-inline-start: 2px; animation: fxCtBlink 1s steps(2) infinite; }

.fx-ct-lcd p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--pn-soft); }
.fx-ct-lcd p b { font-weight: 600; color: var(--pn-text); }

.fx-ct-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pn-soft);
    visibility: hidden;
}

.fx-ct.is-live .fx-ct-status { visibility: visible; }

.fx-ct-status i { width: 7px; height: 7px; border-radius: 50%; background: #5A534B; }
.fx-ct-status.is-ok { color: var(--pn-copper-hi); }
.fx-ct-status.is-ok i { background: var(--pn-copper); box-shadow: 0 0 8px var(--pn-copper); }

.fx-ct-lcd .fx-ct-btn {
    flex: 0 0 auto;
    background: #D49A63;
    color: #151515;
    box-shadow: 0 10px 24px rgba(212, 154, 99, .25);
}

.fx-ct-lcd .fx-ct-btn:hover { background: #E2B487; color: #151515; }


/* ---------- motion ---------- */

@keyframes fxCtRise   { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes fxCtLine   { from { transform: translateY(120%); } to { transform: translateY(0); } }
@keyframes fxCtPulse  { to { box-shadow: 0 0 0 10px rgba(184, 115, 51, 0); } }
@keyframes fxCtBreathe { 0%, 100% { opacity: .8; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.06); } }
@keyframes fxCtBlink  { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes fxCtIdle   { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }


/* =========================================================
   RESPONSIVE — same breakpoints as the home 1 hero
   (laptop L is the base above)
========================================================= */

/* ---------- laptop (1024–1439) ---------- */

@media (max-width: 1439px) {

    .fx-ct-title { font-size: clamp(34px, 4.8vw, 60px); }
    .fx-ct-inner { gap: 44px; }
}

@media (max-width: 1199px) {

    .fx-ct-inner { width: calc(100% - 80px); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; }
    .fx-ct-text { font-size: 16px; }

    .fx-ct-bin { padding: 22px 20px 20px; border-radius: 28px; }
    .fx-ct-ro b { font-size: 26px; }
    .fx-ct-lcd { padding: 14px 16px; gap: 14px; }
    .fx-ct-lcd h2 { font-size: 20px; }
    .fx-ct-lcd .fx-ct-btn { padding: 0 20px; }
}


/* ---------- tablet (768–1023) ---------- */

@media (max-width: 1023px) {

    .fx-ct { min-height: 0; padding: 40px 0 56px; }

    .fx-ct-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }

    .fx-ct-title { font-size: clamp(34px, 7vw, 56px); }

    .fx-ct-glow { width: 90vw; top: 62%; }

    .fx-ct-grid {
        -webkit-mask-image: radial-gradient(ellipse at 50% 70%, #000 0, transparent 72%);
                mask-image: radial-gradient(ellipse at 50% 70%, #000 0, transparent 72%);
    }

    .fx-ct-bin { width: 100%; max-width: 720px; justify-self: center; }

    .fx-ct-ro b { font-size: 30px; }
}


/* ---------- mobile (≤767) ---------- */

@media (max-width: 767px) {

    .fx-ct-inner { width: calc(100% - 48px); gap: 34px; }

    .fx-ct-stats strong { font-size: 24px; }

    .fx-ct-bin { padding: 18px 14px 16px; border-radius: 24px; }

    .fx-ct-gauges { grid-template-columns: .8fr 1.3fr .8fr; gap: 6px; }

    .fx-ct-tl { display: none; }

    .fx-ct-ro b { font-size: 18px; }
    .fx-ct-g-mid .fx-ct-ro b { font-size: 20px; }
    .fx-ct-ro span { font-size: 11px; }

    .fx-ct-lights { gap: 6px; margin-top: 16px; }
    .fx-ct-light { padding: 10px 2px 8px; font-size: 12px; }

    .fx-ct-lcd { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px; }
    .fx-ct-lcd .fx-ct-btn { width: 100%; }
}


/* ---------- mobile L (≤480) ---------- */

@media (max-width: 480px) {

    .fx-ct { padding: 28px 0 48px; }

    .fx-ct-title { font-size: clamp(30px, 9.4vw, 40px); margin: 18px 0 16px; }
    .fx-ct-text { font-size: 15px; margin-bottom: 24px; }

    .fx-ct-actions { gap: 10px; }
    .fx-ct-btn { flex: 1 1 100%; min-height: 48px; }

    .fx-ct-stats { gap: 12px 22px; margin-top: 28px; }
    .fx-ct-stats strong { font-size: 21px; }
    .fx-ct-stats span { font-size: 12px; }
}


/* ---------- mobile S (≤359) ---------- */

@media (max-width: 359px) {

    .fx-ct-inner { width: calc(100% - 32px); }

    .fx-ct-stats { gap: 12px 14px; }
    .fx-ct-stats li { flex: 1 1 26%; }
    .fx-ct-stats strong { font-size: 19px; }

    .fx-ct-bin { padding: 14px 10px 12px; border-radius: 20px; }
    .fx-ct-gauges { gap: 4px; }
    .fx-ct-cap { font-size: 11px; }
    .fx-ct-ro b { font-size: 16px; }
    .fx-ct-g-mid .fx-ct-ro b { font-size: 18px; }
    .fx-ct-light { font-size: 11px; }
    .fx-ct-lcd h2 { font-size: 18px; }
}


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

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

    .fx-ct *, .fx-ct *::before, .fx-ct *::after { animation: none !important; }

    .fx-ct-rise,
    .fx-ct-bin,
    .fx-ct-light { opacity: 1; }

    .fx-ct-line > span { transform: none; }

    .fx-ct-needle { transition: none; }
}

/* =========================================================
   FLEETAXIS SERVICES — SECTION 06 + FAQ + FINAL CTA
   Scoped additions only. Uses existing FX theme variables.
========================================================= */

/* ---------- Section 06: Progressive timeline ---------- */

body.fx-services-page .fxs6-section,
body.fx-services-page .fxfaq-section,
body.fx-services-page .fxfinal-section {
    position: relative;
    isolation: isolate;
    padding: clamp(58px, 7vw, 96px) 0;
    font-family: "Inter", sans-serif;
    overflow: clip;
}

body.fx-services-page .fxs6-section {
    background: var(--fx-off-white);
    color: var(--fx-text);
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxs6-shell,
body.fx-services-page .fxfaq-shell {
    width: min(1320px, calc(100% - 64px));
    margin-inline: auto;
}

body.fx-services-page .fxs6-header {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
    align-items: end;
    gap: clamp(28px, 5vw, 70px);
    margin-bottom: 62px;
}

body.fx-services-page .fxs6-eyebrow,
body.fx-services-page .fxfaq-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    color: var(--fx-copper-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.fx-services-page .fxs6-eyebrow > span,
body.fx-services-page .fxfaq-eyebrow > span {
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    background: var(--fx-copper);
}

body.fx-services-page .fxs6-heading h2,
body.fx-services-page .fxfaq-header h2 {
    max-width: 820px;
    margin: 0;
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 3.65vw, 52px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs6-heading h2 > span,
body.fx-services-page .fxfaq-header h2 > span {
    display: block;
    color: var(--fx-copper);
}

body.fx-services-page .fxs6-intro > p {
    margin: 0 0 17px;
    color: var(--fx-text-soft);
    font-size: 16px;
    line-height: 1.8;
}

body.fx-services-page .fxs6-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fx-copper-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}

body.fx-services-page .fxs6-text-link i {
    transition: transform .2s ease;
}

body.fx-services-page .fxs6-text-link:hover i {
    transform: translateX(4px);
}

/* Desktop timeline track */

body.fx-services-page .fxs6-timeline {
    position: relative;
    padding-top: 0;
}

body.fx-services-page .fxs6-track {
    position: absolute;
    top: 17px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    overflow: visible;
    background: transparent;
    pointer-events: none;
}

body.fx-services-page .fxs6-track-base,
body.fx-services-page .fxs6-track-progress {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
}

body.fx-services-page .fxs6-track-base {
    background: var(--fx-border);
}

body.fx-services-page .fxs6-track-progress {
    background: var(--fx-copper);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.8s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxs6-timeline.fxs6-is-progressed
.fxs6-track-progress {
    transform: scaleX(1);
}

body.fx-services-page .fxs6-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    padding: 0;
    margin: 0;
    list-style: none;
}

body.fx-services-page .fxs6-step {
    position: relative;
    min-width: 0;
    padding-top: 58px;
    text-align: center;
    opacity: .72;
    transform: translateY(10px);
    transition:
        opacity .55s ease,
        transform .55s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxs6-step.fxs6-step-active {
    opacity: 1;
    transform: translateY(0);
}

body.fx-services-page .fxs6-node {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--fx-border);
    border-radius: 50%;
    background: var(--fx-off-white);
    color: var(--fx-text-soft);
    font-size: 14px;
    transform: translateX(-50%);
    transition:
        color .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

body.fx-services-page .fxs6-step.fxs6-step-active .fxs6-node {
    border-color: var(--fx-copper);
    background: var(--fx-copper);
    color: #FFFFFF;
    box-shadow: 0 0 0 6px rgba(184,115,51,.12);
}

body.fx-services-page .fxs6-step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

body.fx-services-page .fxs6-step-kicker {
    display: block;
    margin-bottom: 9px;
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .09em;
}

body.fx-services-page .fxs6-step h3 {
    margin: 0;
    color: var(--fx-text);
    font-size: clamp(18px, 1.45vw, 21px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs6-step p {
    max-width: 275px;
    margin: 12px 0 16px;
    color: var(--fx-text-soft);
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxs6-step-end {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    color: var(--fx-text-soft);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

body.fx-services-page .fxs6-step-end i {
    color: var(--fx-copper);
    font-size: 12px;
}

body.fx-services-page .fxs6-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 42px;
    padding-top: 20px;
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxs6-footer > p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--fx-text-soft);
    font-size: 14px;
    line-height: 1.65;
}

body.fx-services-page .fxs6-footer > p strong {
    color: var(--fx-text);
}

body.fx-services-page .fxs6-footer-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--fx-copper);
    box-shadow: 0 0 0 4px rgba(184,115,51,.1);
}

body.fx-services-page .fxs6-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    color: var(--fx-copper-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}

body.fx-services-page .fxs6-footer-link:hover {
    color: var(--fx-copper);
}

/* ---------- FAQ: plain editorial accordion ---------- */

body.fx-services-page .fxfaq-section {
    color: var(--fx-text);
    background: var(--fx-champagne-light);
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxfaq-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr);
    align-items: end;
    gap: clamp(26px, 5vw, 65px);
    margin-bottom: 42px;
}

body.fx-services-page .fxfaq-intro {
    max-width: 520px;
    margin: 0;
    color: var(--fx-text-soft);
    font-size: 16px;
    line-height: 1.8;
}

body.fx-services-page .fxfaq-list {
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxfaq-row {
    border-bottom: 1px solid var(--fx-border);
    --fxfaq-slide-x: -24px;
}

body.fx-services-page .fxfaq-row[data-faq-side="right"] {
    --fxfaq-slide-x: 24px;
}

body.fx-services-page .fxfaq-question {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 88px;
    padding: 20px 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    text-align: start;
    cursor: pointer;
}

body.fx-services-page .fxfaq-number {
    color: var(--fx-copper-dark);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .035em;
}

body.fx-services-page .fxfaq-question-text {
    display: block;
    color: var(--fx-text);
    font-size: clamp(17px, 1.55vw, 21px);
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

body.fx-services-page .fxfaq-question:hover .fxfaq-question-text,
body.fx-services-page .fxfaq-row.is-open .fxfaq-question-text {
    color: var(--fx-copper-dark);
}

body.fx-services-page .fxfaq-symbol {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--fx-border);
    border-radius: 50%;
    color: var(--fx-copper-dark);
    font-size: 13px;
    transition:
        transform .38s cubic-bezier(.2,.7,.2,1),
        color .25s ease,
        background .25s ease,
        border-color .25s ease;
}

body.fx-services-page .fxfaq-row.is-open .fxfaq-symbol {
    transform: rotate(135deg);
    border-color: var(--fx-copper);
    background: var(--fx-copper);
    color: #FFFFFF;
}

/* The grid-row technique lets the answer slide without fixed heights. */
body.fx-services-page .fxfaq-answer-shell {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
        grid-template-rows .48s cubic-bezier(.2,.7,.2,1),
        visibility .48s;
}

body.fx-services-page .fxfaq-row.is-open .fxfaq-answer-shell {
    grid-template-rows: 1fr;
    visibility: visible;
}

body.fx-services-page .fxfaq-answer-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(var(--fxfaq-slide-x));
    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxfaq-row.is-open .fxfaq-answer-inner {
    opacity: 1;
    transform: translateX(0);
}

body.fx-services-page .fxfaq-answer-inner p {
    max-width: 860px;
    margin: 0;
    padding: 0 52px 27px 64px;
    color: var(--fx-text-soft);
    font-size: 15px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

/* FAQ row entrance animation as the section enters the viewport. */
body.fx-services-page.fxs-faq-motion-ready
.fxfaq-section:not(.fxfaq-is-visible) .fxfaq-header {
    opacity: 0;
    transform: translateX(-28px);
}

body.fx-services-page.fxs-faq-motion-ready
.fxfaq-section:not(.fxfaq-is-visible)
.fxfaq-row[data-faq-side="left"] .fxfaq-question {
    opacity: 0;
    transform: translateX(-28px);
}

body.fx-services-page.fxs-faq-motion-ready
.fxfaq-section:not(.fxfaq-is-visible)
.fxfaq-row[data-faq-side="right"] .fxfaq-question {
    opacity: 0;
    transform: translateX(28px);
}

body.fx-services-page .fxfaq-header,
body.fx-services-page .fxfaq-question {
    transition:
        opacity .55s ease,
        transform .6s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxfaq-is-visible .fxfaq-row:nth-child(1) .fxfaq-question {
    transition-delay: .04s;
}

body.fx-services-page .fxfaq-is-visible .fxfaq-row:nth-child(2) .fxfaq-question {
    transition-delay: .11s;
}

body.fx-services-page .fxfaq-is-visible .fxfaq-row:nth-child(3) .fxfaq-question {
    transition-delay: .18s;
}

body.fx-services-page .fxfaq-is-visible .fxfaq-row:nth-child(4) .fxfaq-question {
    transition-delay: .25s;
}

body.fx-services-page .fxfaq-is-visible .fxfaq-row:nth-child(5) .fxfaq-question {
    transition-delay: .32s;
}

body.fx-services-page .fxfaq-question:focus-visible,
body.fx-services-page .fxs6-text-link:focus-visible,
body.fx-services-page .fxs6-footer-link:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 5px;
}

/* ---------- Final CTA: large centered statement ---------- */

body.fx-services-page .fxfinal-section {
    padding: clamp(38px, 5.7vw, 80px) 0;
    background: var(--fx-off-white);
    border-top: 1px solid var(--fx-border);
}

body.fx-services-page .fxfinal-shell {
    width: min(1280px, calc(100% - 72px));
    margin-inline: auto;
}

body.fx-services-page .fxfinal-panel {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 560px;
    padding: clamp(45px, 6.4vw, 88px) clamp(22px, 6.5vw, 90px);
    overflow: hidden;
    border: 1px solid rgba(184,115,51,.4);
    border-radius: 26px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(184,115,51,.08), transparent 56%),
        linear-gradient(145deg, #202020, #151515 72%);
    color: #F3EDE5;
    box-shadow: 0 28px 70px rgba(32,32,32,.15);
    text-align: center;
}

body.fx-services-page .fxfinal-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -170px;
    left: 50%;
    width: 540px;
    height: 540px;
    border: 1px solid rgba(212,154,99,.08);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 50px rgba(212,154,99,.018),
                0 0 0 100px rgba(212,154,99,.012);
    pointer-events: none;
}

body.fx-services-page .fxfinal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
}

body.fx-services-page .fxfinal-decoration {
    position: absolute;
    z-index: -1;
    width: 190px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D49A63, transparent);
    opacity: .76;
    transform: rotate(-33deg);
    pointer-events: none;
}

body.fx-services-page .fxfinal-decoration-one {
    top: 42%;
    left: -55px;
}

body.fx-services-page .fxfinal-decoration-two {
    right: -75px;
    bottom: 27%;
    opacity: .42;
}

body.fx-services-page .fxfinal-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 25px;
    color: #D49A63;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .12em;
}

body.fx-services-page .fxfinal-eyebrow-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #D49A63;
    box-shadow: 0 0 0 5px rgba(212,154,99,.12);
    animation: fxfinalDotPulse 2.4s ease-in-out infinite;
}

@keyframes fxfinalDotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(212,154,99,.12); }
    50% { box-shadow: 0 0 0 9px rgba(212,154,99,.035); }
}

body.fx-services-page .fxfinal-eyebrow-line {
    width: 34px;
    height: 1px;
    background: rgba(212,154,99,.65);
}

body.fx-services-page .fxfinal-content h2 {
    margin: 0;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxfinal-content h2 > span {
    display: block;
    margin-top: 4px;
    color: #D49A63;
}

body.fx-services-page .fxfinal-description {
    max-width: 800px;
    margin: 24px auto 0;
    color: #D0C8BE;
    font-size: clamp(15px, 1.2vw, 17px);
    font-weight: 500;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

body.fx-services-page .fxfinal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

body.fx-services-page .fxfinal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 47px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition:
        transform .23s ease,
        background .23s ease,
        border-color .23s ease,
        color .23s ease,
        box-shadow .23s ease;
}

body.fx-services-page .fxfinal-button-primary {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
    box-shadow: 0 9px 24px rgba(184,115,51,.15);
}

body.fx-services-page .fxfinal-button-primary:hover {
    transform: translateY(-3px);
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
    box-shadow: 0 12px 28px rgba(184,115,51,.22);
}

body.fx-services-page .fxfinal-button-secondary {
    border-color: rgba(243,230,208,.3);
    background: rgba(255,255,255,.035);
    color: #F3EDE5;
}

body.fx-services-page .fxfinal-button-secondary:hover {
    transform: translateY(-3px);
    border-color: #D49A63;
    background: rgba(212,154,99,.10);
    color: #FFFFFF;
}

body.fx-services-page .fxfinal-button:focus-visible {
    outline: 2px solid #D49A63;
    outline-offset: 4px;
}

body.fx-services-page .fxfinal-divider {
    width: min(780px, 100%);
    height: 1px;
    margin: 40px auto 28px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(243,230,208,.23) 20%,
        rgba(243,230,208,.23) 80%,
        transparent
    );
}

body.fx-services-page .fxfinal-benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 2.4vw, 34px);
}

body.fx-services-page .fxfinal-benefit {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    text-align: start;
}

body.fx-services-page .fxfinal-benefit-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border: 1px solid rgba(212,154,99,.32);
    border-radius: 9px;
    background: rgba(212,154,99,.09);
    color: #D49A63;
    font-size: 15px;
}

body.fx-services-page .fxfinal-benefit > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body.fx-services-page .fxfinal-benefit strong {
    color: #F3EDE5;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

body.fx-services-page .fxfinal-benefit small {
    color: #B8B0A6;
    font-size: 11px;
    line-height: 1.5;
}

body.fx-services-page .fxfinal-benefit-separator {
    width: 1px;
    height: 31px;
    flex: 0 0 1px;
    background: rgba(243,230,208,.16);
}

body.fx-services-page .fxfinal-closing-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 29px 0 0;
    color: #B8B0A6;
    font-size: 12px;
    line-height: 1.6;
}

body.fx-services-page .fxfinal-closing-line > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #D49A63;
}

/* CTA entrance */
body.fx-services-page.fxfinal-motion-ready
.fxfinal-section:not(.fxfinal-is-visible) .fxfinal-content {
    opacity: 0;
    transform: translateY(24px);
}

body.fx-services-page .fxfinal-content {
    transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}

body.fx-services-page .fxfinal-section.fxfinal-is-visible .fxfinal-content {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FLEETAXIS SERVICES — RESPONSIVE RULES
========================================================= */

/* Laptop-L and Laptop */
@media (max-width: 1199px) {
    body.fx-services-page .fxs6-shell,
    body.fx-services-page .fxfaq-shell {
        width: calc(100% - 48px);
    }

    body.fx-services-page .fxs6-header,
    body.fx-services-page .fxfaq-header {
        gap: 30px;
    }

    body.fx-services-page .fxs6-steps {
        gap: 17px;
    }

    body.fx-services-page .fxfinal-shell {
        width: calc(100% - 56px);
    }

    body.fx-services-page .fxfinal-panel {
        min-height: 520px;
    }
}

/* Tablet and below: progressive vertical timeline */
@media (max-width: 900px) {
    body.fx-services-page .fxs6-timeline {
        padding-inline-start: 0;
    }

    body.fx-services-page .fxs6-track {
        top: 0;
        bottom: 0;
        left: 17px;
        right: auto;
        width: 2px;
        height: auto;
    }

    body.fx-services-page .fxs6-track-base,
    body.fx-services-page .fxs6-track-progress {
        top: 0;
        left: 0;
        width: 2px;
        height: 100%;
    }

    body.fx-services-page .fxs6-track-progress {
        transform: scaleY(0);
        transform-origin: center top;
    }

    body.fx-services-page .fxs6-timeline.fxs6-is-progressed
    .fxs6-track-progress {
        transform: scaleY(1);
    }

    body.fx-services-page .fxs6-steps {
        grid-template-columns: minmax(0,1fr);
        gap: 27px;
    }

    body.fx-services-page .fxs6-step {
        display: grid;
        grid-template-columns: 36px minmax(0,1fr);
        gap: 19px;
        min-height: 100px;
        padding-top: 0;
        text-align: start;
    }

    body.fx-services-page .fxs6-node {
        position: relative;
        top: 0;
        left: auto;
        z-index: 2;
        grid-column: 1;
        grid-row: 1;
        transform: none;
    }

    body.fx-services-page .fxs6-step-content {
        grid-column: 2;
        grid-row: 1;
        align-items: flex-start;
        padding: 1px 0 14px;
    }

    body.fx-services-page .fxs6-step p {
        max-width: 620px;
        margin: 9px 0 12px;
    }

    body.fx-services-page .fxs6-step-end {
        justify-content: flex-start;
    }
}

/* Tablet */
@media (max-width: 1023px) {
    body.fx-services-page .fxs6-section,
    body.fx-services-page .fxfaq-section {
        padding: 62px 0;
    }

    body.fx-services-page .fxs6-header,
    body.fx-services-page .fxfaq-header {
        grid-template-columns: minmax(0,1fr);
        gap: 18px;
        margin-bottom: 36px;
    }

    body.fx-services-page .fxs6-heading h2,
    body.fx-services-page .fxfaq-header h2 {
        font-size: clamp(34px, 5.1vw, 46px);
    }

    body.fx-services-page .fxs6-intro > p,
    body.fx-services-page .fxfaq-intro {
        max-width: 720px;
        font-size: 15px;
    }

    body.fx-services-page .fxfinal-panel {
        min-height: 500px;
        padding: 56px 36px;
    }

    body.fx-services-page .fxfinal-benefits {
        gap: 18px;
    }
}

/* Mobile-L */
@media (max-width: 767px) {
    body.fx-services-page .fxs6-shell,
    body.fx-services-page .fxfaq-shell {
        width: calc(100% - 36px);
    }

    body.fx-services-page .fxs6-section,
    body.fx-services-page .fxfaq-section {
        padding: 52px 0;
    }

    body.fx-services-page .fxs6-eyebrow,
    body.fx-services-page .fxfaq-eyebrow {
        font-size: 11px;
        letter-spacing: .075em;
    }

    body.fx-services-page .fxs6-heading h2,
    body.fx-services-page .fxfaq-header h2 {
        font-size: clamp(31px, 7.3vw, 42px);
        line-height: 1.14;
    }

    body.fx-services-page .fxs6-header,
    body.fx-services-page .fxfaq-header {
        margin-bottom: 32px;
    }

    body.fx-services-page .fxs6-intro > p,
    body.fx-services-page .fxfaq-intro {
        font-size: 15px;
        line-height: 1.75;
    }

    body.fx-services-page .fxs6-step h3 {
        font-size: 20px;
    }

    body.fx-services-page .fxs6-step p {
        font-size: 14.5px;
        line-height: 1.75;
    }

    body.fx-services-page .fxs6-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
        margin-top: 28px;
    }

    body.fx-services-page .fxfaq-question {
        grid-template-columns: 31px minmax(0,1fr) 32px;
        gap: 11px;
        min-height: 78px;
        padding: 17px 0;
    }

    body.fx-services-page .fxfaq-number {
        font-size: 12px;
    }

    body.fx-services-page .fxfaq-question-text {
        font-size: 16px;
    }

    body.fx-services-page .fxfaq-symbol {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    body.fx-services-page .fxfaq-answer-inner p {
        padding: 0 0 22px 42px;
        font-size: 14.5px;
        line-height: 1.8;
    }

    body.fx-services-page .fxfinal-section {
        padding: 34px 0 44px;
    }

    body.fx-services-page .fxfinal-shell {
        width: calc(100% - 32px);
    }

    body.fx-services-page .fxfinal-panel {
        min-height: 0;
        padding: 48px 24px 38px;
        border-radius: 19px;
    }

    body.fx-services-page .fxfinal-content h2 {
        font-size: clamp(31px, 7.6vw, 42px);
        line-height: 1.15;
    }

    body.fx-services-page .fxfinal-description {
        margin-top: 19px;
        font-size: 15px;
        line-height: 1.75;
    }

    body.fx-services-page .fxfinal-actions {
        gap: 10px;
        margin-top: 25px;
    }

    body.fx-services-page .fxfinal-button {
        min-height: 46px;
        padding: 12px 14px;
        font-size: 13px;
    }

    body.fx-services-page .fxfinal-divider {
        margin: 30px auto 22px;
    }

    body.fx-services-page .fxfinal-benefits {
        display: grid;
        grid-template-columns: minmax(0,1fr);
        gap: 16px;
        max-width: 350px;
        margin-inline: auto;
    }

    body.fx-services-page .fxfinal-benefit {
        justify-content: flex-start;
    }

    body.fx-services-page .fxfinal-benefit-separator {
        display: none;
    }

    body.fx-services-page .fxfinal-closing-line {
        margin-top: 25px;
        font-size: 11.5px;
    }

    body.fx-services-page .fxfinal-decoration {
        width: 100px;
    }
}

/* Mobile-M */
@media (max-width: 480px) {
    body.fx-services-page .fxs6-shell,
    body.fx-services-page .fxfaq-shell {
        width: calc(100% - 28px);
    }

    body.fx-services-page .fxs6-section,
    body.fx-services-page .fxfaq-section {
        padding: 44px 0;
    }

    body.fx-services-page .fxs6-heading h2,
    body.fx-services-page .fxfaq-header h2 {
        font-size: clamp(29px, 8.1vw, 36px);
        letter-spacing: -.04em;
    }

    body.fx-services-page .fxs6-eyebrow,
    body.fx-services-page .fxfaq-eyebrow {
        font-size: 10px;
        gap: 8px;
    }

    body.fx-services-page .fxs6-step {
        grid-template-columns: 34px minmax(0,1fr);
        gap: 15px;
    }

    body.fx-services-page .fxs6-track {
        left: 16px;
    }

    body.fx-services-page .fxs6-node {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    body.fx-services-page .fxs6-step-kicker {
        font-size: 9.5px;
    }

    body.fx-services-page .fxs6-step h3 {
        font-size: 19px;
    }

    body.fx-services-page .fxs6-footer > p {
        align-items: flex-start;
        font-size: 13px;
    }

    body.fx-services-page .fxfaq-question {
        grid-template-columns: 25px minmax(0,1fr) 29px;
        gap: 8px;
        min-height: 73px;
    }

    body.fx-services-page .fxfaq-question-text {
        font-size: 15px;
        line-height: 1.5;
    }

    body.fx-services-page .fxfaq-symbol {
        width: 27px;
        height: 27px;
    }

    body.fx-services-page .fxfaq-answer-inner p {
        padding-inline-start: 33px;
        font-size: 14px;
    }

    body.fx-services-page .fxfinal-shell {
        width: calc(100% - 22px);
    }

    body.fx-services-page .fxfinal-panel {
        padding: 40px 17px 29px;
        border-radius: 16px;
    }

    body.fx-services-page .fxfinal-eyebrow {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 9.5px;
        letter-spacing: .07em;
    }

    body.fx-services-page .fxfinal-eyebrow-line {
        width: 22px;
    }

    body.fx-services-page .fxfinal-content h2 {
        font-size: clamp(28px, 8.2vw, 35px);
    }

    body.fx-services-page .fxfinal-description {
        font-size: 14px;
    }

    body.fx-services-page .fxfinal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body.fx-services-page .fxfinal-button {
        width: 100%;
        justify-content: center;
        font-size: 13px;
    }

    body.fx-services-page .fxfinal-benefit strong {
        font-size: 12px;
    }

    body.fx-services-page .fxfinal-benefit small {
        font-size: 11px;
    }

    body.fx-services-page .fxfinal-closing-line {
        align-items: flex-start;
        font-size: 11px;
    }
}

/* Mobile-S */
@media (max-width: 359px) {
    body.fx-services-page .fxs6-shell,
    body.fx-services-page .fxfaq-shell {
        width: calc(100% - 22px);
    }

    body.fx-services-page .fxs6-heading h2,
    body.fx-services-page .fxfaq-header h2 {
        font-size: 28px;
    }

    body.fx-services-page .fxs6-step {
        grid-template-columns: 31px minmax(0,1fr);
        gap: 12px;
    }

    body.fx-services-page .fxs6-track {
        left: 14px;
    }

    body.fx-services-page .fxs6-node {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    body.fx-services-page .fxfaq-question {
        grid-template-columns: 22px minmax(0,1fr) 25px;
        gap: 7px;
    }

    body.fx-services-page .fxfaq-question-text {
        font-size: 14px;
    }

    body.fx-services-page .fxfaq-symbol {
        width: 24px;
        height: 24px;
    }

    body.fx-services-page .fxfaq-answer-inner p {
        padding-inline-start: 29px;
        font-size: 13.5px;
    }

    body.fx-services-page .fxfinal-panel {
        padding-inline: 13px;
    }

    body.fx-services-page .fxfinal-content h2 {
        font-size: 27px;
    }

    body.fx-services-page .fxfinal-description {
        font-size: 13.5px;
    }

    body.fx-services-page .fxfinal-eyebrow {
        font-size: 9px;
    }
}

/* Honour accessibility preferences */
@media (prefers-reduced-motion: reduce) {
    body.fx-services-page .fxs6-section *,
    body.fx-services-page .fxfaq-section *,
    body.fx-services-page .fxfinal-section * {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    body.fx-services-page .fxs6-step {
        opacity: 1 !important;
        transform: none !important;
    }

    body.fx-services-page .fxs6-track-progress {
        transform: none !important;
    }

    body.fx-services-page .fxfaq-row .fxfaq-question,
    body.fx-services-page .fxfaq-header,
    body.fx-services-page .fxfinal-content {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   FLEETAXIS HOME 2 — FINAL CTA
   Scoped styles only; shared site styling is preserved
========================================================= */

body.fx-home2-page .fxfinal-section {
    position: relative;
    isolation: isolate;
    padding: clamp(38px, 5.7vw, 80px) 0;
    overflow: clip;
    background: var(--fx-off-white);
    border-top: 1px solid var(--fx-border);
    font-family: "Inter", sans-serif;
}

body.fx-home2-page .fxfinal-shell {
    width: min(1280px, calc(100% - 72px));
    margin-inline: auto;
}

body.fx-home2-page .fxfinal-panel {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 560px;
    padding: clamp(45px, 6.4vw, 88px) clamp(22px, 6.5vw, 90px);
    overflow: hidden;
    border: 1px solid rgba(184, 115, 51, .4);
    border-radius: 26px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(184, 115, 51, .08), transparent 56%),
        linear-gradient(145deg, #202020, #151515 72%);
    color: #F3EDE5;
    box-shadow: 0 28px 70px rgba(32, 32, 32, .15);
    text-align: center;
}

body.fx-home2-page .fxfinal-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -170px;
    left: 50%;
    width: 540px;
    height: 540px;
    border: 1px solid rgba(212, 154, 99, .08);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow:
        0 0 0 50px rgba(212, 154, 99, .018),
        0 0 0 100px rgba(212, 154, 99, .012);
    pointer-events: none;
}

body.fx-home2-page .fxfinal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
}

body.fx-home2-page .fxfinal-decoration {
    position: absolute;
    z-index: -1;
    width: 190px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #D49A63,
        transparent
    );
    opacity: .76;
    transform: rotate(-33deg);
    pointer-events: none;
}

body.fx-home2-page .fxfinal-decoration-one {
    top: 42%;
    left: -55px;
}

body.fx-home2-page .fxfinal-decoration-two {
    right: -75px;
    bottom: 27%;
    opacity: .42;
}

/* Eyebrow */

body.fx-home2-page .fxfinal-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 25px;
    color: #D49A63;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .12em;
}

body.fx-home2-page .fxfinal-eyebrow-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #D49A63;
    box-shadow: 0 0 0 5px rgba(212, 154, 99, .12);
    animation: fxhome2CtaPulse 2.4s ease-in-out infinite;
}

@keyframes fxhome2CtaPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(212, 154, 99, .12);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(212, 154, 99, .035);
    }
}

body.fx-home2-page .fxfinal-eyebrow-line {
    width: 34px;
    height: 1px;
    background: rgba(212, 154, 99, .65);
}

/* Main heading */

body.fx-home2-page .fxfinal-content h2 {
    margin: 0;
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.fx-home2-page .fxfinal-content h2 > span {
    display: block;
    margin-top: 4px;
    color: #D49A63;
}

/* Description */

body.fx-home2-page .fxfinal-description {
    max-width: 800px;
    margin: 24px auto 0;
    color: #D0C8BE;
    font-size: clamp(15px, 1.2vw, 17px);
    font-weight: 500;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* CTA buttons */

body.fx-home2-page .fxfinal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

body.fx-home2-page .fxfinal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-width: 0;
    min-height: 47px;
    padding: 13px 19px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition:
        transform .23s ease,
        background .23s ease,
        border-color .23s ease,
        color .23s ease,
        box-shadow .23s ease;
}

body.fx-home2-page .fxfinal-button-primary {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
    box-shadow: 0 9px 24px rgba(184, 115, 51, .15);
}

body.fx-home2-page .fxfinal-button-primary:hover {
    transform: translateY(-3px);
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
    box-shadow: 0 12px 28px rgba(184, 115, 51, .22);
}

body.fx-home2-page .fxfinal-button-secondary {
    border-color: rgba(243, 230, 208, .3);
    background: rgba(255, 255, 255, .035);
    color: #F3EDE5;
}

body.fx-home2-page .fxfinal-button-secondary:hover {
    transform: translateY(-3px);
    border-color: #D49A63;
    background: rgba(212, 154, 99, .10);
    color: #FFFFFF;
}

body.fx-home2-page .fxfinal-button:focus-visible {
    outline: 2px solid #D49A63;
    outline-offset: 4px;
}

/* Separator */

body.fx-home2-page .fxfinal-divider {
    width: min(780px, 100%);
    height: 1px;
    margin: 40px auto 28px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(243, 230, 208, .23) 20%,
        rgba(243, 230, 208, .23) 80%,
        transparent
    );
}

/* Three inline highlights */

body.fx-home2-page .fxfinal-benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 2.4vw, 34px);
}

body.fx-home2-page .fxfinal-benefit {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    text-align: start;
}

body.fx-home2-page .fxfinal-benefit-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border: 1px solid rgba(212, 154, 99, .32);
    border-radius: 9px;
    background: rgba(212, 154, 99, .09);
    color: #D49A63;
    font-size: 15px;
}

body.fx-home2-page .fxfinal-benefit-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body.fx-home2-page .fxfinal-benefit strong {
    color: #F3EDE5;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

body.fx-home2-page .fxfinal-benefit small {
    color: #B8B0A6;
    font-size: 11px;
    line-height: 1.5;
}

body.fx-home2-page .fxfinal-benefit-separator {
    width: 1px;
    height: 31px;
    flex: 0 0 1px;
    background: rgba(243, 230, 208, .16);
}

/* Closing line */

body.fx-home2-page .fxfinal-closing-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 29px 0 0;
    color: #B8B0A6;
    font-size: 12px;
    line-height: 1.65;
}

body.fx-home2-page .fxfinal-closing-line > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #D49A63;
}

/* Entrance reveal */

body.fx-home2-page.fxhome2-cta-motion-ready
.fxfinal-section:not(.fxfinal-is-visible) .fxfinal-content {
    opacity: 0;
    transform: translateY(24px);
}

body.fx-home2-page .fxfinal-content {
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2, .7, .2, 1);
}

body.fx-home2-page .fxfinal-section.fxfinal-is-visible .fxfinal-content {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FLEETAXIS — CUTE 404 PAGE
   Scoped to body.fx-404-page only
========================================================= */

body.fx-404-page {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: clip;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
}

body.fx-404-page *,
body.fx-404-page *::before,
body.fx-404-page *::after {
    box-sizing: border-box;
}

body.fx-404-page .fx404-main {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 88px 28px 42px;
    isolation: isolate;
    overflow: hidden;
}

body.fx-404-page .fx404-main::before,
body.fx-404-page .fx404-main::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

body.fx-404-page .fx404-main::before {
    top: -180px;
    left: -180px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(184, 115, 51, .12);
    box-shadow:
        0 0 0 36px rgba(184, 115, 51, .025),
        0 0 0 74px rgba(184, 115, 51, .018);
}

body.fx-404-page .fx404-main::after {
    right: -220px;
    bottom: -250px;
    width: 540px;
    height: 540px;
    border: 1px solid rgba(184, 115, 51, .10);
    box-shadow: 0 0 0 48px rgba(184, 115, 51, .02);
}

/* Top-right existing shared controls */

body.fx-404-page .fx404-tools {
    position: fixed;
    z-index: 2000;
    top: 18px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    direction: ltr;
}

body.fx-404-page .fx404-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 42px;
    height: 42px;
    padding: 0 11px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-white);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(32, 32, 32, .045);
    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .22s ease;
}

body.fx-404-page .fx404-tool:hover {
    transform: translateY(-2px);
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

body.fx-404-page .fx404-tool:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

body.fx-404-page .fx404-tool > i {
    font-size: 15px;
}

body.fx-404-page .fx404-rtl-tool > span {
    font-size: 12px;
    font-weight: 800;
}

/* Main layout */

body.fx-404-page .fx404-error {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(920px, 100%);
    margin: auto;
    text-align: center;
}

/* Brand eyebrow */

body.fx-404-page .fx404-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 5px;
    color: var(--fx-copper-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: .13em;
}

body.fx-404-page .fx404-eyebrow-line {
    display: inline-block;
    width: 27px;
    height: 1px;
    background: var(--fx-copper);
}

body.fx-404-page .fx404-eyebrow-slash {
    color: var(--fx-copper);
}

/* Illustrated 404 */

body.fx-404-page .fx404-illustration {
    position: relative;
    width: min(720px, 100%);
    margin: 10px auto 0;
    padding: 0 10px;
    isolation: isolate;
}

body.fx-404-page .fx404-number {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 2vw, 18px);
    min-height: clamp(130px, 20vw, 225px);
    color: var(--fx-black);
    font-family: "Inter", sans-serif;
    font-size: clamp(112px, 19vw, 205px);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.09em;
    user-select: none;
}

body.fx-404-page .fx404-digit {
    display: inline-block;
    color: var(--fx-black);
    text-shadow: 0 8px 0 rgba(184, 115, 51, .05);
    animation: fx404NumberFloat 4.5s ease-in-out infinite;
}

body.fx-404-page .fx404-digit:last-child {
    animation-delay: .35s;
}

body.fx-404-page .fx404-zero {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: .91em;
    height: .91em;
    flex: 0 0 .91em;
    border: .075em solid var(--fx-copper);
    border-radius: 50%;
    background: rgba(184, 115, 51, .055);
    color: var(--fx-copper);
    font-size: .91em;
    line-height: 1;
    letter-spacing: -.08em;
    animation: fx404ZeroFloat 4s ease-in-out infinite;
}

body.fx-404-page .fx404-zero-character {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--fx-copper);
    opacity: .22;
}

body.fx-404-page .fx404-pin {
    position: relative;
    z-index: 1;
    color: var(--fx-copper-dark);
    font-size: .34em;
    filter: drop-shadow(0 4px 7px rgba(184, 115, 51, .19));
    animation: fx404PinBounce 2.3s ease-in-out infinite;
}

@keyframes fx404NumberFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes fx404ZeroFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-7px) rotate(3deg); }
}

@keyframes fx404PinBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    42% { transform: translateY(-5px) scale(1.04); }
    55% { transform: translateY(0) scale(.97); }
}

/* Route graphic */

body.fx-404-page .fx404-route {
    position: relative;
    width: min(650px, 100%);
    height: clamp(65px, 9vw, 94px);
    margin: -5px auto 0;
}

body.fx-404-page .fx404-route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

body.fx-404-page .fx404-road-base,
body.fx-404-page .fx404-road-dashes {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.fx-404-page .fx404-road-base {
    stroke: rgba(184, 115, 51, .19);
    stroke-width: 8;
}

body.fx-404-page .fx404-road-dashes {
    stroke: var(--fx-copper);
    stroke-width: 2;
    stroke-dasharray: 6 11;
    animation: fx404RoadMove 1.8s linear infinite;
}

@keyframes fx404RoadMove {
    to { stroke-dashoffset: -68; }
}

body.fx-404-page .fx404-map-marker {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
}

body.fx-404-page .fx404-marker-start {
    top: 54%;
    left: 1%;
    color: var(--fx-copper-dark);
    font-size: 11px;
}

body.fx-404-page .fx404-marker-end {
    top: 13%;
    right: 0;
    color: var(--fx-copper);
    font-size: 22px;
    filter: drop-shadow(0 4px 6px rgba(184, 115, 51, .15));
    animation: fx404MarkerBounce 2.8s ease-in-out infinite;
}

@keyframes fx404MarkerBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* Tiny vehicle moving along the route */

body.fx-404-page .fx404-lost-vehicle {
    position: absolute;
    z-index: 3;
    top: 20%;
    left: 3%;
    display: grid;
    place-items: center;
    width: 42px;
    height: 34px;
    border: 1px solid rgba(184, 115, 51, .35);
    border-radius: 10px;
    background: var(--fx-champagne-light);
    color: var(--fx-copper-dark);
    font-size: 19px;
    box-shadow: 0 5px 17px rgba(32, 32, 32, .07);
    animation: fx404DriveAlong 8s ease-in-out infinite;
}

@keyframes fx404DriveAlong {
    0%   { left: 3%; transform: translateY(5px) rotate(-4deg); }
    20%  { left: 20%; transform: translateY(-8px) rotate(0deg); }
    43%  { left: 42%; transform: translateY(10px) rotate(5deg); }
    66%  { left: 63%; transform: translateY(-5px) rotate(-3deg); }
    84%  { left: 80%; transform: translateY(5px) rotate(3deg); }
    100% { left: 3%; transform: translateY(5px) rotate(-4deg); }
}

/* Floating "wrong turn" label */

body.fx-404-page .fx404-route-label {
    position: absolute;
    z-index: 4;
    top: 49%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    background: var(--fx-white);
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .06em;
    white-space: nowrap;
    box-shadow: 0 5px 16px rgba(32, 32, 32, .05);
    transform: translate(-50%, -50%) rotate(-2deg);
    animation: fx404LabelBob 3.5s ease-in-out infinite;
}

body.fx-404-page .fx404-route-label i {
    color: var(--fx-copper);
}

@keyframes fx404LabelBob {
    0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); }
    50% { transform: translate(-50%, calc(-50% - 4px)) rotate(2deg); }
}

/* Small decorative sparks */

body.fx-404-page .fx404-spark {
    position: absolute;
    z-index: 2;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--fx-copper-light);
    opacity: .7;
    animation: fx404Sparkle 2.5s ease-in-out infinite;
}

body.fx-404-page .fx404-spark-one {
    top: 22%;
    left: 13%;
}

body.fx-404-page .fx404-spark-two {
    top: 38%;
    right: 11%;
    width: 5px;
    height: 5px;
    animation-delay: .6s;
}

body.fx-404-page .fx404-spark-three {
    bottom: 10%;
    left: 24%;
    width: 5px;
    height: 5px;
    animation-delay: 1.1s;
}

@keyframes fx404Sparkle {
    0%, 100% { opacity: .25; transform: scale(.8) rotate(0); }
    50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}

/* Message */

body.fx-404-page .fx404-copy {
    width: 100%;
    max-width: 760px;
    margin: 3px auto 0;
}

body.fx-404-page .fx404-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 6px 10px;
    border: 1px solid var(--fx-border);
    border-radius: 5px;
    background: rgba(184, 115, 51, .055);
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .08em;
}

body.fx-404-page .fx404-status > span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--fx-copper);
}

body.fx-404-page .fx404-copy h1 {
    margin: 0;
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: clamp(30px, 3.3vw, 43px);
    font-weight: 700;
    line-height: 1.17;
    letter-spacing: -.04em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.fx-404-page .fx404-copy h1 > span {
    display: block;
    color: var(--fx-copper);
}

body.fx-404-page .fx404-description {
    max-width: 630px;
    margin: 15px auto 0;
    color: var(--fx-text-soft);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* Back to home button */

body.fx-404-page .fx404-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    margin-top: 26px;
    padding: 13px 20px;
    border: 1px solid var(--fx-copper);
    border-radius: 8px;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: 0 8px 21px rgba(184, 115, 51, .14);
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

body.fx-404-page .fx404-home-button:hover {
    transform: translateY(-3px);
    border-color: var(--fx-copper-dark);
    background: var(--fx-copper-dark);
    color: #FFFFFF;
    box-shadow: 0 12px 26px rgba(184, 115, 51, .20);
}

body.fx-404-page .fx404-home-button:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 4px;
}

body.fx-404-page .fx404-button-arrow {
    margin-inline-start: 4px;
    transition: transform .22s ease;
}

body.fx-404-page .fx404-home-button:hover .fx404-button-arrow {
    transform: translateX(4px);
}

body.fx-404-page .fx404-helper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 15px 0 0;
    color: var(--fx-text-soft);
    font-size: 13px;
    line-height: 1.6;
}

body.fx-404-page .fx404-helper i {
    color: var(--fx-copper);
}

/* Bottom signature */

body.fx-404-page .fx404-bottom-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 38px;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: .09em;
}

body.fx-404-page .fx404-bottom-line > span:first-child {
    color: var(--fx-copper-dark);
}

body.fx-404-page .fx404-bottom-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--fx-copper);
}

/* Reveal animation */

body.fx-404-page.fx404-motion-ready
.fx404-error:not(.fx404-is-visible) [data-fx404-reveal] {
    opacity: 0;
    transform: translateY(18px);
}

body.fx-404-page .fx404-error [data-fx404-reveal] {
    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2, .7, .2, 1);
}

body.fx-404-page .fx404-error.f x404-is-visible [data-fx404-reveal] {
    opacity: 1;
    transform: translateY(0);
}

body.fx-404-page.fx404-motion-ready
.fx404-error:not(.fx404-is-visible) [data-fx404-reveal] {
    opacity: 0;
    transform: translateY(18px);
}

body.fx-404-page .fx404-error.f x404-is-visible [data-fx404-reveal] {
    opacity: 1;
    transform: translateY(0);
}

body.fx-404-page.fx404-motion-ready
.fx404-error:not(.fx404-is-visible) [data-fx404-reveal] {
    opacity: 0;
    transform: translateY(18px);
}

body.fx-404-page .fx404-error.f x404-is-visible [data-fx404-reveal] {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FLEETAXIS 404 — RESPONSIVE LAYOUT
========================================================= */

/* Laptop-L and Laptop */
@media (max-width: 1199px) {
    body.fx-404-page .fx404-main {
        padding: 84px 30px 36px;
    }

    body.fx-404-page .fx404-illustration {
        width: min(650px, 100%);
    }
}

/* Tablet */
@media (max-width: 1023px) {
    body.fx-404-page .fx404-main {
        padding: 85px 26px 38px;
    }

    body.fx-404-page .fx404-number {
        font-size: clamp(120px, 22vw, 190px);
    }

    body.fx-404-page .fx404-copy h1 {
        font-size: clamp(32px, 5vw, 42px);
    }

    body.fx-404-page .fx404-description {
        max-width: 600px;
        font-size: 15px;
    }
}

/* Mobile-L */
@media (max-width: 767px) {
    body.fx-404-page .fx404-tools {
        top: 13px;
        right: 15px;
        gap: 7px;
    }

    body.fx-404-page .fx404-tool {
        min-width: 39px;
        height: 39px;
        padding: 0 10px;
    }

    body.fx-404-page .fx404-main {
        padding: 82px 20px 30px;
    }

    body.fx-404-page .fx404-eyebrow {
        gap: 8px;
        font-size: 10px;
        letter-spacing: .09em;
    }

    body.fx-404-page .fx404-eyebrow-line {
        width: 20px;
    }

    body.fx-404-page .fx404-illustration {
        width: min(540px, 100%);
        margin-top: 20px;
    }

    body.fx-404-page .fx404-number {
        min-height: 155px;
        font-size: clamp(114px, 23vw, 165px);
    }

    body.fx-404-page .fx404-route {
        height: 70px;
        margin-top: -5px;
    }

    body.fx-404-page .fx404-copy {
        margin-top: 9px;
    }

    body.fx-404-page .fx404-copy h1 {
        font-size: clamp(30px, 6.7vw, 39px);
    }

    body.fx-404-page .fx404-description {
        max-width: 520px;
        margin-top: 13px;
        font-size: 14.5px;
        line-height: 1.75;
    }

    body.fx-404-page .fx404-home-button {
        margin-top: 22px;
    }

    body.fx-404-page .fx404-bottom-line {
        margin-top: 30px;
    }
}

/* Mobile-M */
@media (max-width: 480px) {
    body.fx-404-page .fx404-tools {
        top: 11px;
        right: 12px;
        gap: 6px;
    }

    body.fx-404-page .fx404-tool {
        min-width: 37px;
        height: 37px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 12px;
    }

    body.fx-404-page .fx404-tool > i {
        font-size: 14px;
    }

    body.fx-404-page .fx404-main {
        padding: 75px 16px 25px;
    }

    body.fx-404-page .fx404-eyebrow {
        gap: 6px;
        font-size: 9px;
        letter-spacing: .065em;
    }

    body.fx-404-page .fx404-eyebrow-line {
        width: 15px;
    }

    body.fx-404-page .fx404-illustration {
        padding: 0;
        margin-top: 22px;
    }

    body.fx-404-page .fx404-number {
        min-height: 132px;
        gap: 4px;
        font-size: clamp(100px, 27vw, 135px);
    }

    body.fx-404-page .fx404-route {
        height: 58px;
        margin-top: 0;
    }

    body.fx-404-page .fx404-lost-vehicle {
        width: 34px;
        height: 29px;
        border-radius: 8px;
        font-size: 16px;
    }

    body.fx-404-page .fx404-route-label {
        gap: 5px;
        padding: 6px 8px;
        font-size: 8px;
    }

    body.fx-404-page .fx404-marker-end {
        font-size: 18px;
    }

    body.fx-404-page .fx404-copy {
        margin-top: 10px;
    }

    body.fx-404-page .fx404-status {
        font-size: 9px;
    }

    body.fx-404-page .fx404-copy h1 {
        font-size: clamp(27px, 7.8vw, 34px);
        line-height: 1.2;
    }

    body.fx-404-page .fx404-description {
        font-size: 14px;
        line-height: 1.75;
    }

    body.fx-404-page .fx404-home-button {
        width: min(100%, 240px);
        min-height: 46px;
        padding: 12px 15px;
        font-size: 13px;
    }

    body.fx-404-page .fx404-helper {
        font-size: 12px;
    }

    body.fx-404-page .fx404-bottom-line {
        gap: 7px;
        margin-top: 27px;
        font-size: 9px;
        letter-spacing: .065em;
    }
}

/* Mobile-S — narrow screens down to 320px */
@media (max-width: 359px) {
    body.fx-404-page .fx404-tools {
        top: 9px;
        right: 9px;
        gap: 5px;
    }

    body.fx-404-page .fx404-tool {
        min-width: 34px;
        height: 34px;
        padding: 0 7px;
        font-size: 11px;
    }

    body.fx-404-page .fx404-main {
        padding: 67px 12px 20px;
    }

    body.fx-404-page .fx404-eyebrow {
        gap: 5px;
        font-size: 8px;
    }

    body.fx-404-page .fx404-eyebrow-line {
        width: 11px;
    }

    body.fx-404-page .fx404-number {
        min-height: 114px;
        font-size: clamp(90px, 29vw, 112px);
    }

    body.fx-404-page .fx404-route {
        height: 48px;
    }

    body.fx-404-page .fx404-route-label {
        padding: 5px 6px;
        font-size: 7px;
    }

    body.fx-404-page .fx404-copy h1 {
        font-size: 27px;
    }

    body.fx-404-page .fx404-description {
        font-size: 13px;
    }

    body.fx-404-page .fx404-bottom-line {
        font-size: 8px;
        letter-spacing: .04em;
    }
}

/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
    body.fx-404-page *,
    body.fx-404-page *::before,
    body.fx-404-page *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }

    body.fx-404-page.fx404-motion-ready
    .fx404-error [data-fx404-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

body.fx-404-page.fx404-motion-ready
.fx404-error:not(.fx404-is-visible) [data-fx404-reveal] {
    opacity: 0;
    transform: translateY(18px);
}

body.fx-404-page .fx404-error.fx404-is-visible [data-fx404-reveal] {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FLEETAXIS — COMING SOON PAGE
   Scoped CSS. Existing shared styles remain untouched.
========================================================= */

body.fx-comingsoon-page {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: clip;
    background: var(--fx-champagne-light);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
}

body.fx-comingsoon-page *,
body.fx-comingsoon-page *::before,
body.fx-comingsoon-page *::after {
    box-sizing: border-box;
}

body.fx-comingsoon-page .fxcs-main {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 95px 28px 35px;
    isolation: isolate;
    overflow: hidden;
}

body.fx-comingsoon-page .fxcs-main::before,
body.fx-comingsoon-page .fxcs-main::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

body.fx-comingsoon-page .fxcs-main::before {
    top: -210px;
    left: -190px;
    width: 490px;
    height: 490px;
    border: 1px solid rgba(184,115,51,.12);
    box-shadow:
        0 0 0 35px rgba(184,115,51,.025),
        0 0 0 75px rgba(184,115,51,.016);
}

body.fx-comingsoon-page .fxcs-main::after {
    right: -240px;
    bottom: -280px;
    width: 550px;
    height: 550px;
    border: 1px solid rgba(184,115,51,.10);
    box-shadow: 0 0 0 48px rgba(184,115,51,.018);
}

/* ---------- Top-right controls ---------- */

body.fx-comingsoon-page .fxcs-tools {
    position: fixed;
    z-index: 2000;
    top: 18px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    direction: ltr;
}

body.fx-comingsoon-page .fxcs-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 42px;
    height: 42px;
    padding: 0 11px;
    border: 1px solid var(--fx-border);
    border-radius: 8px;
    background: var(--fx-white);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(32,32,32,.045);
    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .22s ease;
}

body.fx-comingsoon-page .fxcs-tool:hover {
    transform: translateY(-2px);
    border-color: var(--fx-copper);
    background: var(--fx-champagne);
    color: var(--fx-copper-dark);
}

body.fx-comingsoon-page .fxcs-tool:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 3px;
}

body.fx-comingsoon-page .fxcs-tool > i {
    font-size: 15px;
}

body.fx-comingsoon-page .fxcs-rtl-tool > span {
    font-size: 12px;
    font-weight: 800;
}

/* ---------- Main content ---------- */

body.fx-comingsoon-page .fxcs-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(940px, 100%);
    margin: auto;
    text-align: center;
}

body.fx-comingsoon-page .fxcs-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    color: var(--fx-copper-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: .13em;
}

body.fx-comingsoon-page .fxcs-eyebrow-line {
    width: 27px;
    height: 1px;
    flex: 0 0 27px;
    background: var(--fx-copper);
}

body.fx-comingsoon-page .fxcs-eyebrow-divider {
    color: var(--fx-copper);
}

/* ---------- Cute animated illustration ---------- */

body.fx-comingsoon-page .fxcs-artwork {
    position: relative;
    isolation: isolate;
    width: min(720px, 100%);
    margin: 15px auto 0;
    padding: 0 8px;
}

body.fx-comingsoon-page .fxcs-ring {
    position: absolute;
    z-index: -1;
    top: 3%;
    left: 50%;
    width: 245px;
    height: 245px;
    border: 1px solid rgba(184,115,51,.10);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

body.fx-comingsoon-page .fxcs-ring-two {
    top: 12%;
    width: 200px;
    height: 200px;
    border-color: rgba(184,115,51,.075);
    animation: fxcsRingFloat 7s ease-in-out infinite;
}

@keyframes fxcsRingFloat {
    0%, 100% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.055);
    }
}

body.fx-comingsoon-page .fxcs-artwork-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
}

body.fx-comingsoon-page .fxcs-artwork-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--fx-border);
    border-radius: 6px;
    background: var(--fx-white);
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .055em;
}

body.fx-comingsoon-page .fxcs-artwork-badge i {
    color: var(--fx-copper);
}

body.fx-comingsoon-page .fxcs-artwork-spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--fx-copper-light);
    animation: fxcsSparkle 2.5s ease-in-out infinite;
}

body.fx-comingsoon-page .fxcs-spark-one {
    top: 0;
    left: 16%;
}

body.fx-comingsoon-page .fxcs-spark-two {
    top: 21px;
    right: 13%;
    width: 5px;
    height: 5px;
    animation-delay: .8s;
}

@keyframes fxcsSparkle {
    0%, 100% {
        opacity: .25;
        transform: scale(.75) rotate(0);
    }
    50% {
        opacity: 1;
        transform: scale(1.25) rotate(45deg);
    }
}

/* Road SVG and animated vehicle */

body.fx-comingsoon-page .fxcs-road {
    position: relative;
    width: 100%;
    height: clamp(95px, 12vw, 130px);
    margin-top: 2px;
}

body.fx-comingsoon-page .fxcs-road-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

body.fx-comingsoon-page .fxcs-road-shadow,
body.fx-comingsoon-page .fxcs-road-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.fx-comingsoon-page .fxcs-road-shadow {
    stroke: rgba(184,115,51,.13);
    stroke-width: 9;
}

body.fx-comingsoon-page .fxcs-road-line {
    stroke: var(--fx-copper);
    stroke-width: 2;
    stroke-dasharray: 6 10;
    animation: fxcsRoadFlow 1.8s linear infinite;
}

@keyframes fxcsRoadFlow {
    to {
        stroke-dashoffset: -64;
    }
}

body.fx-comingsoon-page .fxcs-road-pin {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
}

body.fx-comingsoon-page .fxcs-road-pin-start {
    top: 64%;
    left: 0;
    color: var(--fx-copper-dark);
    font-size: 10px;
}

body.fx-comingsoon-page .fxcs-road-pin-end {
    top: 17%;
    right: 0;
    color: var(--fx-copper);
    font-size: 23px;
    filter: drop-shadow(0 4px 6px rgba(184,115,51,.15));
    animation: fxcsPinBounce 2.6s ease-in-out infinite;
}

@keyframes fxcsPinBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

body.fx-comingsoon-page .fxcs-vehicle {
    position: absolute;
    z-index: 3;
    top: 25%;
    left: 2%;
    display: grid;
    place-items: center;
    width: 43px;
    height: 35px;
    border: 1px solid rgba(184,115,51,.33);
    border-radius: 9px;
    background: var(--fx-champagne-light);
    color: var(--fx-copper-dark);
    font-size: 19px;
    box-shadow: 0 5px 16px rgba(32,32,32,.07);
    animation: fxcsVehicleTravel 8s ease-in-out infinite;
}

body.fx-comingsoon-page .fxcs-vehicle-glow {
    position: absolute;
    z-index: -1;
    right: -5px;
    bottom: -5px;
    left: -5px;
    height: 9px;
    border-radius: 50%;
    background: rgba(184,115,51,.15);
    filter: blur(5px);
}

@keyframes fxcsVehicleTravel {
    0%   { left: 2%; transform: translateY(5px) rotate(-4deg); }
    20%  { left: 20%; transform: translateY(-6px) rotate(0deg); }
    43%  { left: 42%; transform: translateY(8px) rotate(4deg); }
    66%  { left: 63%; transform: translateY(-5px) rotate(-3deg); }
    84%  { left: 80%; transform: translateY(4px) rotate(3deg); }
    100% { left: 2%; transform: translateY(5px) rotate(-4deg); }
}

body.fx-comingsoon-page .fxcs-artwork-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: -5px;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: .10em;
}

body.fx-comingsoon-page .fxcs-artwork-bottom > span:first-child {
    color: var(--fx-copper-dark);
}

body.fx-comingsoon-page .fxcs-artwork-bottom-line {
    width: 32px;
    height: 1px;
    background: var(--fx-copper);
}

/* ---------- Main message ---------- */

body.fx-comingsoon-page .fxcs-message {
    width: 100%;
    max-width: 790px;
    margin-top: 17px;
}

body.fx-comingsoon-page .fxcs-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 13px;
    padding: 7px 11px;
    border: 1px solid var(--fx-border);
    border-radius: 5px;
    background: rgba(184,115,51,.055);
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .09em;
}

body.fx-comingsoon-page .fxcs-status > span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--fx-copper);
    animation: fxcsStatusPulse 1.8s ease-in-out infinite;
}

@keyframes fxcsStatusPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(184,115,51,.08); }
    50% { box-shadow: 0 0 0 7px rgba(184,115,51,.025); }
}

body.fx-comingsoon-page .fxcs-message h1 {
    margin: 0;
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

body.fx-comingsoon-page .fxcs-message h1 > span {
    display: block;
    margin-top: 4px;
    color: var(--fx-copper);
}

body.fx-comingsoon-page .fxcs-description {
    max-width: 690px;
    margin: 17px auto 0;
    color: var(--fx-text-soft);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* ---------- Countdown ---------- */

body.fx-comingsoon-page .fxcs-countdown-wrap {
    width: min(530px, 100%);
    margin: 27px auto 0;
}

body.fx-comingsoon-page .fxcs-countdown-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 13px;
}

body.fx-comingsoon-page .fxcs-countdown-heading p {
    margin: 0;
    color: var(--fx-copper-dark);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .12em;
}

body.fx-comingsoon-page .fxcs-countdown-pulse {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--fx-copper);
    box-shadow: 0 0 0 4px rgba(184,115,51,.10);
}

body.fx-comingsoon-page .fxcs-countdown {
    display: grid;
    grid-template-columns: minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr);
    align-items: center;
    gap: 7px;
}

body.fx-comingsoon-page .fxcs-time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 95px;
    padding: 12px 7px 10px;
    border: 1px solid var(--fx-border);
    border-radius: 10px;
    background: var(--fx-white);
    box-shadow: 0 7px 20px rgba(32,32,32,.035);
    transition: border-color .25s ease, transform .25s ease;
}

body.fx-comingsoon-page .fxcs-time-unit:hover {
    transform: translateY(-3px);
    border-color: rgba(184,115,51,.45);
}

body.fx-comingsoon-page .fxcs-time-value {
    display: block;
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
    font-size: clamp(27px, 3.7vw, 39px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    letter-spacing: -.04em;
}

body.fx-comingsoon-page .fxcs-time-label {
    display: block;
    margin-top: 7px;
    color: var(--fx-text-soft);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .10em;
}

body.fx-comingsoon-page .fxcs-time-colon {
    color: var(--fx-copper);
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    transform: translateY(-5px);
}

body.fx-comingsoon-page .fxcs-countdown-note {
    margin: 12px 0 0;
    color: var(--fx-text-soft);
    font-size: 12px;
    line-height: 1.65;
    text-align: center;
}

/* ---------- Back-to-home button ---------- */

body.fx-comingsoon-page .fxcs-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 25px;
}

body.fx-comingsoon-page .fxcs-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-width: 180px;
    min-height: 48px;
    padding: 13px 20px;
    border: 1px solid var(--fx-copper);
    border-radius: 8px;
    background: var(--fx-copper);
    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
    box-shadow: 0 8px 21px rgba(184,115,51,.14);
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

body.fx-comingsoon-page .fxcs-home-button:hover {
    transform: translateY(-3px);
    border-color: var(--fx-copper-dark);
    background: var(--fx-copper-dark);
    color: #FFFFFF;
    box-shadow: 0 12px 26px rgba(184,115,51,.20);
}

body.fx-comingsoon-page .fxcs-home-button:focus-visible {
    outline: 2px solid var(--fx-copper);
    outline-offset: 4px;
}

body.fx-comingsoon-page .fxcs-home-arrow {
    margin-inline-start: 3px;
    transition: transform .2s ease;
}

body.fx-comingsoon-page .fxcs-home-button:hover .fxcs-home-arrow {
    transform: translateX(4px);
}

/* ---------- Footer signature ---------- */

body.fx-comingsoon-page .fxcs-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 34px;
    color: var(--fx-text-soft);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.65;
    letter-spacing: .09em;
    text-align: center;
}

body.fx-comingsoon-page .fxcs-bottom-brand {
    color: var(--fx-copper-dark);
}

body.fx-comingsoon-page .fxcs-bottom-dot {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: var(--fx-copper);
}

/* ---------- Gentle content reveal ---------- */

body.fx-comingsoon-page.fxcs-motion-ready
.fxcs-content:not(.fxcs-is-visible) [data-fxcs-reveal] {
    opacity: 0;
    transform: translateY(17px);
}

body.fx-comingsoon-page .fxcs-content [data-fxcs-reveal] {
    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2,.7,.2,1);
}

body.fx-comingsoon-page .fxcs-content.fxcs-is-visible [data-fxcs-reveal] {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   FLEETAXIS COMING SOON — RESPONSIVE
========================================================= */

/* Laptop-L and Laptop */
@media (max-width: 1199px) {
    body.fx-comingsoon-page .fxcs-main {
        padding-inline: 30px;
    }

    body.fx-comingsoon-page .fxcs-content {
        width: min(880px, 100%);
    }
}

/* Tablet */
@media (max-width: 1023px) {
    body.fx-comingsoon-page .fxcs-main {
        padding: 88px 25px 32px;
    }

    body.fx-comingsoon-page .fxcs-artwork {
        width: min(640px, 100%);
    }

    body.fx-comingsoon-page .fxcs-message h1 {
        font-size: clamp(34px, 5.3vw, 47px);
    }

    body.fx-comingsoon-page .fxcs-description {
        max-width: 620px;
        font-size: 15px;
    }
}

/* Mobile-L */
@media (max-width: 767px) {
    body.fx-comingsoon-page .fxcs-tools {
        top: 13px;
        right: 15px;
        gap: 7px;
    }

    body.fx-comingsoon-page .fxcs-tool {
        min-width: 39px;
        height: 39px;
        padding: 0 10px;
    }

    body.fx-comingsoon-page .fxcs-main {
        padding: 83px 20px 30px;
    }

    body.fx-comingsoon-page .fxcs-eyebrow {
        gap: 8px;
        font-size: 10px;
        letter-spacing: .09em;
    }

    body.fx-comingsoon-page .fxcs-eyebrow-line {
        width: 20px;
        flex-basis: 20px;
    }

    body.fx-comingsoon-page .fxcs-artwork {
        width: min(550px, 100%);
        margin-top: 21px;
    }

    body.fx-comingsoon-page .fxcs-road {
        height: 86px;
    }

    body.fx-comingsoon-page .fxcs-ring {
        width: 200px;
        height: 200px;
    }

    body.fx-comingsoon-page .fxcs-ring-two {
        width: 160px;
        height: 160px;
    }

    body.fx-comingsoon-page .fxcs-message {
        margin-top: 16px;
    }

    body.fx-comingsoon-page .fxcs-message h1 {
        font-size: clamp(31px, 7.4vw, 42px);
        line-height: 1.16;
    }

    body.fx-comingsoon-page .fxcs-description {
        max-width: 530px;
        margin-top: 13px;
        font-size: 14.5px;
        line-height: 1.75;
    }

    body.fx-comingsoon-page .fxcs-countdown-wrap {
        margin-top: 24px;
    }

    body.fx-comingsoon-page .fxcs-time-unit {
        min-height: 85px;
    }

    body.fx-comingsoon-page .fxcs-time-value {
        font-size: clamp(27px, 5.5vw, 35px);
    }

    body.fx-comingsoon-page .fxcs-bottom {
        margin-top: 28px;
    }
}

/* Mobile-M */
@media (max-width: 480px) {
    body.fx-comingsoon-page .fxcs-tools {
        top: 11px;
        right: 12px;
        gap: 6px;
    }

    body.fx-comingsoon-page .fxcs-tool {
        min-width: 37px;
        height: 37px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 12px;
    }

    body.fx-comingsoon-page .fxcs-tool > i {
        font-size: 14px;
    }

    body.fx-comingsoon-page .fxcs-main {
        padding: 76px 16px 24px;
    }

    body.fx-comingsoon-page .fxcs-eyebrow {
        gap: 6px;
        font-size: 9px;
        letter-spacing: .065em;
    }

    body.fx-comingsoon-page .fxcs-eyebrow-line {
        width: 15px;
        flex-basis: 15px;
    }

    body.fx-comingsoon-page .fxcs-artwork {
        margin-top: 23px;
        padding-inline: 0;
    }

    body.fx-comingsoon-page .fxcs-artwork-badge {
        gap: 7px;
        padding: 7px 9px;
        font-size: 9px;
    }

    body.fx-comingsoon-page .fxcs-road {
        height: 68px;
    }

    body.fx-comingsoon-page .fxcs-vehicle {
        width: 36px;
        height: 30px;
        border-radius: 8px;
        font-size: 16px;
    }

    body.fx-comingsoon-page .fxcs-road-pin-end {
        font-size: 19px;
    }

    body.fx-comingsoon-page .fxcs-artwork-bottom {
        gap: 7px;
        font-size: 9px;
        letter-spacing: .065em;
    }

    body.fx-comingsoon-page .fxcs-artwork-bottom-line {
        width: 20px;
    }

    body.fx-comingsoon-page .fxcs-message h1 {
        font-size: clamp(28px, 8.1vw, 36px);
        line-height: 1.18;
    }

    body.fx-comingsoon-page .fxcs-description {
        font-size: 14px;
    }

    body.fx-comingsoon-page .fxcs-countdown-wrap {
        margin-top: 21px;
    }

    body.fx-comingsoon-page .fxcs-countdown {
        grid-template-columns:
            minmax(0,1fr) 6px
            minmax(0,1fr) 6px
            minmax(0,1fr) 6px
            minmax(0,1fr);
        gap: 4px;
    }

    body.fx-comingsoon-page .fxcs-time-unit {
        min-height: 74px;
        padding: 9px 3px 8px;
        border-radius: 8px;
    }

    body.fx-comingsoon-page .fxcs-time-value {
        font-size: clamp(23px, 6.8vw, 30px);
    }

    body.fx-comingsoon-page .fxcs-time-label {
        margin-top: 6px;
        font-size: 8px;
        letter-spacing: .07em;
    }

    body.fx-comingsoon-page .fxcs-time-colon {
        font-size: 17px;
    }

    body.fx-comingsoon-page .fxcs-countdown-note {
        font-size: 11.5px;
    }

    body.fx-comingsoon-page .fxcs-home-button {
        min-height: 46px;
        padding: 12px 16px;
        font-size: 13px;
    }

    body.fx-comingsoon-page .fxcs-bottom {
        gap: 7px;
        font-size: 8.5px;
        letter-spacing: .055em;
    }
}

/* Mobile-S — narrow phones */
@media (max-width: 359px) {
    body.fx-comingsoon-page .fxcs-tools {
        top: 9px;
        right: 9px;
        gap: 5px;
    }

    body.fx-comingsoon-page .fxcs-tool {
        min-width: 34px;
        height: 34px;
        padding: 0 7px;
        font-size: 11px;
    }

    body.fx-comingsoon-page .fxcs-main {
        padding: 68px 12px 20px;
    }

    body.fx-comingsoon-page .fxcs-eyebrow {
        gap: 5px;
        font-size: 8px;
        letter-spacing: .045em;
    }

    body.fx-comingsoon-page .fxcs-eyebrow-line {
        width: 11px;
        flex-basis: 11px;
    }

    body.fx-comingsoon-page .fxcs-artwork-badge {
        font-size: 8px;
        gap: 5px;
        padding: 7px;
    }

    body.fx-comingsoon-page .fxcs-road {
        height: 57px;
    }

    body.fx-comingsoon-page .fxcs-vehicle {
        width: 31px;
        height: 27px;
        font-size: 14px;
    }

    body.fx-comingsoon-page .fxcs-artwork-bottom {
        font-size: 8px;
        letter-spacing: .04em;
    }

    body.fx-comingsoon-page .fxcs-artwork-bottom-line {
        width: 13px;
    }

    body.fx-comingsoon-page .fxcs-message h1 {
        font-size: 27px;
    }

    body.fx-comingsoon-page .fxcs-description {
        font-size: 13px;
        line-height: 1.7;
    }

    body.fx-comingsoon-page .fxcs-countdown-heading p {
        font-size: 9px;
        letter-spacing: .08em;
    }

    body.fx-comingsoon-page .fxcs-countdown {
        gap: 3px;
    }

    body.fx-comingsoon-page .fxcs-time-unit {
        min-height: 67px;
        padding: 8px 2px 7px;
    }

    body.fx-comingsoon-page .fxcs-time-value {
        font-size: 22px;
    }

    body.fx-comingsoon-page .fxcs-time-label {
        font-size: 7px;
        letter-spacing: .035em;
    }

    body.fx-comingsoon-page .fxcs-time-colon {
        font-size: 14px;
    }

    body.fx-comingsoon-page .fxcs-home-button {
        width: min(100%, 225px);
    }

    body.fx-comingsoon-page .fxcs-bottom {
        font-size: 7.5px;
        letter-spacing: .025em;
    }
}

/* Accessibility: honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    body.fx-comingsoon-page *,
    body.fx-comingsoon-page *::before,
    body.fx-comingsoon-page *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }

    body.fx-comingsoon-page.fxcs-motion-ready
    .fxcs-content [data-fxcs-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* FLEETAXIS CONTACT MAIN SECTIONS ONLY.
   All selectors are scoped to .fxcs-contact-sections.
   Reuses the existing --fx-* design tokens when present. */
.fxcs-contact-sections {
  --fxcs-copper: var(--fx-copper, #B87333);
  --fxcs-copper-dark: var(--fx-copper-dark, #985A25);
  --fxcs-copper-light: var(--fx-copper-light, #D49A63);
  --fxcs-bg: var(--fx-champagne-light, #FAF5ED);
  --fxcs-surface: var(--fx-off-white, #F8F5F0);
  --fxcs-heading: var(--fx-black, #151515);
  --fxcs-text: var(--fx-text, #202020);
  --fxcs-muted: var(--fx-text-soft, #66615B);
  --fxcs-border: var(--fx-border, rgba(32,32,32,.12));
  --fxcs-error: #B42318;
  --fxcs-error-bg: #FEF3F2;
  --fxcs-success: #176B46;
  color: var(--fxcs-text);
  background: var(--fxcs-bg);
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: clip;
  isolation: isolate;
}
.fxcs-contact-sections *, .fxcs-contact-sections *::before, .fxcs-contact-sections *::after { box-sizing: border-box; }
.fxcs-contact-sections :where(h2,h3,h4,p) { margin: 0; }
.fxcs-contact-sections :where(h2,h3,h4) { font-family: inherit; color: var(--fxcs-heading); font-weight: 600; line-height: 1.18; letter-spacing: -.035em; }
.fxcs-contact-sections :where(a) { color: inherit; text-decoration: none; }
.fxcs-contact-sections :where(button,input,select,textarea) { font: inherit; }
.fxcs-contact-sections button { border: 0; cursor: pointer; }
.fxcs-contact-sections svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fxcs-contact-sections :where(img,iframe) { max-width: 100%; }
.fxcs-contact-sections :where(a,button,input,select,textarea):focus-visible { outline: 2px solid var(--fxcs-copper); outline-offset: 3px; }
.fxcs-contact-sections .fxcs-container { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.fxcs-contact-sections .fxcs-section { position: relative; padding-block: 78px; }
.fxcs-contact-sections .fxcs-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--fxcs-copper-dark); font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.fxcs-contact-sections .fxcs-eyebrow-dot { display: inline-block; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--fxcs-copper); box-shadow: 0 0 0 4px rgba(184,115,51,.13); }
.fxcs-contact-sections .fxcs-eyebrow-line { display: inline-block; width: 34px; height: 1px; background: var(--fxcs-copper-light); }
.fxcs-contact-sections h2 { max-width: 720px; font-size: clamp(30px, 3.1vw, 43px); }
.fxcs-contact-sections h2 span { color: var(--fxcs-copper); }
.fxcs-contact-sections p { color: var(--fxcs-muted); }
.fxcs-contact-sections .fxcs-lead { max-width: 570px; margin-top: 22px; font-size: 16px; line-height: 1.85; }
.fxcs-contact-sections .fxcs-text-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; color: var(--fxcs-copper-dark); font-size: 13px; font-weight: 700; }
.fxcs-contact-sections .fxcs-text-link svg,.fxcs-contact-sections .fxcs-outline-link svg { width: 18px; height: 18px; transition: transform .2s ease; }
.fxcs-contact-sections .fxcs-text-link:hover svg,.fxcs-contact-sections .fxcs-outline-link:hover svg { transform: translateX(3px); }

/* 01 Contact information */
.fxcs-contact-sections .fxcs-info { padding-block: 60px 76px; background: var(--fxcs-bg); }
.fxcs-contact-sections .fxcs-info-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(370px,.88fr); align-items: center; gap: clamp(35px,6vw,82px); }
.fxcs-contact-sections .fxcs-info-copy { padding-block: 10px; }
.fxcs-contact-sections .fxcs-info h2 { margin-top: 22px; font-size: clamp(38px,4.7vw,61px); line-height: 1.08; letter-spacing: -.055em; }
.fxcs-contact-sections .fxcs-info-rail { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--fxcs-border); color: var(--fxcs-muted); font-size: 10px; font-weight: 600; }
.fxcs-contact-sections .fxcs-info-rail-number { color: var(--fxcs-copper-dark); font-weight: 700; letter-spacing: .1em; }
.fxcs-contact-sections .fxcs-info-rail i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--fxcs-copper); vertical-align: middle; }
.fxcs-contact-sections .fxcs-contact-panel { padding: 27px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: var(--fx-carbon, #202020); color: #fff; box-shadow: 0 22px 50px rgba(32,32,32,.11); }
.fxcs-contact-sections .fxcs-panel-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.15); color: var(--fxcs-copper-light); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.fxcs-contact-sections .fxcs-status-mark { display: inline-flex; align-items: center; gap: 7px; color: #E8E2D9; font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
.fxcs-contact-sections .fxcs-status-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--fxcs-copper-light); }
.fxcs-contact-sections .fxcs-channel { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; }
.fxcs-contact-sections .fxcs-channel:last-of-type { border-bottom: 0; }
.fxcs-contact-sections .fxcs-channel-icon { display: inline-flex; flex: 0 0 41px; align-items: center; justify-content: center; width: 41px; height: 41px; border: 1px solid rgba(212,154,99,.4); border-radius: 9px; background: rgba(212,154,99,.1); color: var(--fxcs-copper-light); }
.fxcs-contact-sections .fxcs-channel-icon svg { width: 19px; height: 19px; }
.fxcs-contact-sections .fxcs-channel-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.fxcs-contact-sections .fxcs-channel-text small { color: #C8BEB1; font-size: 11px; }
.fxcs-contact-sections .fxcs-channel-text strong { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.fxcs-contact-sections .fxcs-channel-text em { color: #D3CBC2; font-size: 10px; font-style: normal; line-height: 1.55; }
.fxcs-contact-sections .fxcs-channel-arrow { flex: 0 0 17px; width: 17px; height: 17px; color: #B9AEA1; transition: transform .2s ease; }
.fxcs-contact-sections .fxcs-channel:hover .fxcs-channel-arrow { transform: translate(2px,-2px); color: var(--fxcs-copper-light); }
.fxcs-contact-sections .fxcs-panel-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.12); color: #CBC3B9; font-size: 10px; line-height: 1.65; }
.fxcs-contact-sections .fxcs-panel-note > span { display: inline-flex; flex: 0 0 16px; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid #B89A79; border-radius: 50%; color: #F3D3AB; font-size: 10px; }

/* 02 Form */
.fxcs-contact-sections .fxcs-form-section { background: var(--fxcs-surface); border-block: 1px solid var(--fxcs-border); scroll-margin-top: 22px; }
.fxcs-contact-sections .fxcs-form-grid { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr); align-items: start; gap: clamp(32px,5vw,70px); }
.fxcs-contact-sections .fxcs-section-heading { padding-top: 18px; }
.fxcs-contact-sections .fxcs-section-heading h2 { margin-top: 18px; }
.fxcs-contact-sections .fxcs-section-heading > p:not(.fxcs-eyebrow) { max-width: 430px; margin-top: 17px; font-size: 13px; line-height: 1.85; }
.fxcs-contact-sections .fxcs-form-side-note { display: flex; align-items: flex-start; gap: 12px; max-width: 430px; margin-top: 30px; padding: 18px; border: 1px solid var(--fxcs-border); border-radius: 10px; background: var(--fxcs-bg); }
.fxcs-contact-sections .fxcs-note-icon { display: inline-flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; background: var(--fx-champagne, #F3E6D0); color: var(--fxcs-copper-dark); }
.fxcs-contact-sections .fxcs-note-icon svg { width: 20px; height: 20px; }
.fxcs-contact-sections .fxcs-form-side-note > span:last-child { display: flex; flex-direction: column; gap: 5px; }
.fxcs-contact-sections .fxcs-form-side-note strong { color: var(--fxcs-text); font-size: 12px; font-weight: 700; }
.fxcs-contact-sections .fxcs-form-side-note small { color: var(--fxcs-muted); font-size: 11px; line-height: 1.7; }
.fxcs-contact-sections .fxcs-form { min-width: 0; padding: clamp(22px,3vw,34px); border: 1px solid var(--fxcs-border); border-radius: 13px; background: var(--fxcs-bg); box-shadow: 0 14px 36px rgba(32,32,32,.04); }
.fxcs-contact-sections .fxcs-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; margin-bottom: 23px; padding-bottom: 18px; border-bottom: 1px solid var(--fxcs-border); }
.fxcs-contact-sections .fxcs-form-heading > div > span { color: var(--fxcs-copper-dark); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.fxcs-contact-sections .fxcs-form-heading h3 { margin-top: 7px; font-size: 23px; }
.fxcs-contact-sections .fxcs-required-label { padding-top: 4px; color: var(--fxcs-muted); font-size: 10px; white-space: nowrap; }
.fxcs-contact-sections .fxcs-required-label b,.fxcs-contact-sections .fxcs-field label b { color: var(--fxcs-error); }
.fxcs-contact-sections .fxcs-fields-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.fxcs-contact-sections .fxcs-field { display: flex; flex-direction: column; min-width: 0; }
.fxcs-contact-sections .fxcs-field-full { grid-column: 1 / -1; }
.fxcs-contact-sections .fxcs-field label { margin-bottom: 7px; color: var(--fxcs-text); font-size: 12px; font-weight: 600; line-height: 1.5; }
.fxcs-contact-sections .fxcs-field label span { color: var(--fxcs-muted); font-size: 10px; font-weight: 400; }
.fxcs-contact-sections .fxcs-field :where(input,select,textarea) { display: block; width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid var(--fxcs-border); border-radius: 7px; background: var(--fx-white, #fff); color: var(--fxcs-text); font-size: 12px; line-height: 1.5; outline: none; transition: border-color .2s ease,box-shadow .2s ease,background-color .2s ease; }
.fxcs-contact-sections .fxcs-field :where(input,select,textarea)::placeholder { color: #817A70; opacity: 1; }
.fxcs-contact-sections .fxcs-field :where(input,select,textarea):focus { border-color: var(--fxcs-copper); box-shadow: 0 0 0 3px rgba(184,115,51,.12); }
.fxcs-contact-sections .fxcs-field textarea { min-height: 120px; resize: vertical; }
.fxcs-contact-sections .fxcs-select-wrap { position: relative; }
.fxcs-contact-sections .fxcs-select-wrap select { padding-inline-end: 40px; appearance: none; }
.fxcs-contact-sections .fxcs-select-wrap > svg { position: absolute; inset-inline-end: 12px; top: 50%; width: 14px; height: 14px; color: var(--fxcs-muted); pointer-events: none; transform: translateY(-50%); }
.fxcs-contact-sections .fxcs-error { display: block; min-height: 0; margin-top: 0; color: var(--fxcs-error); font-size: 11px; line-height: 1.45; }
.fxcs-contact-sections .fxcs-error:not(:empty) { min-height: 15px; margin-top: 5px; }
.fxcs-contact-sections .fxcs-field.is-invalid :where(input,select,textarea) { border-color: var(--fxcs-error) !important; background: var(--fxcs-error-bg); box-shadow: 0 0 0 2px rgba(180,35,24,.07); }
.fxcs-contact-sections .fxcs-field.is-invalid label,.fxcs-contact-sections .fxcs-field.is-invalid .fxcs-error { color: var(--fxcs-error); }
.fxcs-contact-sections .fxcs-field.is-valid :where(input,select,textarea) { border-color: #2F855A; }
.fxcs-contact-sections .fxcs-form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fxcs-border); }
.fxcs-contact-sections .fxcs-form-bottom p { display: flex; align-items: flex-start; gap: 8px; max-width: 330px; font-size: 10px; line-height: 1.65; }
.fxcs-contact-sections .fxcs-form-bottom p svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--fxcs-copper-dark); }
.fxcs-contact-sections .fxcs-submit-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 10px; min-height: 47px; padding-inline: 18px; border-radius: 7px; background: var(--fxcs-copper); color: #fff; font-size: 12px; font-weight: 700; transition: background-color .2s ease,transform .2s ease; }
.fxcs-contact-sections .fxcs-submit-button:hover { background: var(--fxcs-copper-dark); transform: translateY(-1px); }
.fxcs-contact-sections .fxcs-submit-button svg { width: 17px; height: 17px; }
.fxcs-contact-sections .fxcs-form-feedback { margin-top: 15px; padding: 12px 14px; border: 1px solid rgba(23,107,70,.28); border-radius: 7px; background: rgba(23,107,70,.08); color: var(--fxcs-success); font-size: 12px; line-height: 1.6; }
.fxcs-contact-sections .fxcs-form-feedback[hidden] { display: none; }
.fxcs-contact-sections .fxcs-form-feedback.is-error { border-color: rgba(180,35,24,.35); background: var(--fxcs-error-bg); color: var(--fxcs-error); }
.fxcs-contact-sections .fxcs-form-note { margin-top: 12px; color: var(--fxcs-muted); font-size: 10px; line-height: 1.65; }

/* 03 U.S. map */
.fxcs-contact-sections .fxcs-map-section { background: var(--fxcs-bg); }
.fxcs-contact-sections .fxcs-map-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,.58fr); align-items: end; gap: 32px; margin-bottom: 29px; }
.fxcs-contact-sections .fxcs-map-heading h2 { margin-top: 17px; }
.fxcs-contact-sections .fxcs-map-heading > p { max-width: 450px; padding-bottom: 4px; font-size: 12px; line-height: 1.85; }
.fxcs-contact-sections .fxcs-map-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(265px,.55fr); overflow: hidden; border: 1px solid var(--fxcs-border); border-radius: 13px; background: var(--fxcs-surface); }
.fxcs-contact-sections .fxcs-map-frame { position: relative; min-width: 0; min-height: 360px; background: #E7E2D8; }
.fxcs-contact-sections .fxcs-map-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.fxcs-contact-sections .fxcs-map-tag { position: absolute; top: 17px; inset-inline-start: 17px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(32,32,32,.12); border-radius: 6px; background: rgba(250,245,237,.96); color: #202020; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.fxcs-contact-sections .fxcs-map-tag svg { width: 16px; height: 16px; color: #985A25; }
.fxcs-contact-sections .fxcs-map-aside { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 32px 27px; }
.fxcs-contact-sections .fxcs-map-aside-index { color: var(--fxcs-copper-dark); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.fxcs-contact-sections .fxcs-map-aside h3 { margin-top: 17px; font-size: 24px; }
.fxcs-contact-sections .fxcs-map-aside > p { margin-top: 13px; font-size: 12px; line-height: 1.85; }
.fxcs-contact-sections .fxcs-outline-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 11px 13px; border: 1px solid var(--fxcs-border); border-radius: 7px; color: var(--fxcs-copper-dark); font-size: 11px; font-weight: 700; transition: background-color .2s ease,border-color .2s ease; }
.fxcs-contact-sections .fxcs-outline-link:hover { border-color: var(--fxcs-copper); background: var(--fx-champagne, #F3E6D0); }
.fxcs-contact-sections .fxcs-map-aside-rule { width: 100%; height: 1px; margin-block: 25px 18px; background: var(--fxcs-border); }
.fxcs-contact-sections .fxcs-map-aside-email { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fxcs-contact-sections .fxcs-map-aside-email .fxcs-channel-icon { flex-basis: 38px; width: 38px; height: 38px; background: var(--fx-champagne, #F3E6D0); }
.fxcs-contact-sections .fxcs-map-aside-email > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fxcs-contact-sections .fxcs-map-aside-email small { color: var(--fxcs-muted); font-size: 10px; }
.fxcs-contact-sections .fxcs-map-aside-email a { color: var(--fxcs-text); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.fxcs-contact-sections .fxcs-map-aside-email a:hover { color: var(--fxcs-copper-dark); }

/* 04 The only section using photographs */
.fxcs-contact-sections .fxcs-trust-section { background: var(--fxcs-surface); border-block: 1px solid var(--fxcs-border); }
.fxcs-contact-sections .fxcs-section-head-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.62fr); align-items: end; gap: 30px; margin-bottom: 30px; }
.fxcs-contact-sections .fxcs-section-head-row h2 { margin-top: 17px; }
.fxcs-contact-sections .fxcs-section-head-row > p { max-width: 430px; padding-bottom: 4px; font-size: 12px; line-height: 1.85; }
.fxcs-contact-sections .fxcs-image-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.fxcs-contact-sections .fxcs-image-card { min-width: 0; overflow: hidden; border: 1px solid var(--fxcs-border); border-radius: 10px; background: var(--fxcs-bg); transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.fxcs-contact-sections .fxcs-image-card:hover { transform: translateY(-3px); border-color: rgba(184,115,51,.42); box-shadow: 0 14px 30px rgba(32,32,32,.07); }
.fxcs-contact-sections .fxcs-image-wrap { position: relative; height: 182px; overflow: hidden; background: var(--fx-champagne, #F3E6D0); }
.fxcs-contact-sections .fxcs-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fxcs-contact-sections .fxcs-image-card:hover .fxcs-image-wrap img { transform: scale(1.04); }
.fxcs-contact-sections .fxcs-image-number { position: absolute; top: 11px; inset-inline-start: 11px; display: inline-flex; align-items: center; justify-content: center; min-width: 31px; height: 28px; padding-inline: 7px; border: 1px solid rgba(255,255,255,.35); border-radius: 5px; background: rgba(32,32,32,.82); color: #fff; font-size: 10px; font-weight: 700; }
.fxcs-contact-sections .fxcs-image-card-copy { padding: 18px 17px 20px; }
.fxcs-contact-sections .fxcs-image-card-copy > span { color: var(--fxcs-copper-dark); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.fxcs-contact-sections .fxcs-image-card-copy h3 { margin-top: 8px; color: var(--fxcs-heading); font-size: 16px; letter-spacing: -.02em; }
.fxcs-contact-sections .fxcs-image-card-copy p { margin-top: 8px; font-size: 11px; line-height: 1.75; }

/* 05 Icon-based process — no photos */
.fxcs-contact-sections .fxcs-process-section { background: var(--fxcs-bg); }
.fxcs-contact-sections .fxcs-process-heading { max-width: 720px; margin-inline: auto; text-align: center; }
.fxcs-contact-sections .fxcs-process-heading .fxcs-eyebrow { justify-content: center; }
.fxcs-contact-sections .fxcs-process-heading h2 { margin: 17px auto 0; }
.fxcs-contact-sections .fxcs-process-heading > p:last-child { margin-top: 15px; font-size: 13px; line-height: 1.8; }
.fxcs-contact-sections .fxcs-process-grid { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr); align-items: stretch; gap: 11px; margin-top: 39px; }
.fxcs-contact-sections .fxcs-process-card { display: flex; flex-direction: column; min-width: 0; padding: 23px 21px; border: 1px solid var(--fxcs-border); border-radius: 11px; background: var(--fxcs-surface); transition: border-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.fxcs-contact-sections .fxcs-process-card:hover { border-color: rgba(184,115,51,.4); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(32,32,32,.05); }
.fxcs-contact-sections .fxcs-process-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fxcs-contact-sections .fxcs-step-number { color: var(--fxcs-copper-dark); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.fxcs-contact-sections .fxcs-process-icon { display: inline-flex; align-items: center; justify-content: center; width: 47px; height: 47px; border: 1px solid rgba(184,115,51,.3); border-radius: 11px; background: var(--fx-champagne, #F3E6D0); color: var(--fxcs-copper-dark); }
.fxcs-contact-sections .fxcs-process-icon svg { width: 23px; height: 23px; }
.fxcs-contact-sections .fxcs-process-card h3 { margin-top: 24px; font-size: 18px; }
.fxcs-contact-sections .fxcs-process-card > p { margin-top: 11px; font-size: 12px; line-height: 1.8; }
.fxcs-contact-sections .fxcs-process-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 23px; color: var(--fxcs-copper-dark); font-size: 9px; font-weight: 700; letter-spacing: .07em; }
.fxcs-contact-sections .fxcs-process-link svg { width: 15px; height: 15px; }
.fxcs-contact-sections .fxcs-process-connector { display: flex; align-items: center; justify-content: center; color: var(--fxcs-copper); }
.fxcs-contact-sections .fxcs-process-connector span { width: 10px; height: 1px; background: var(--fxcs-copper-light); }
.fxcs-contact-sections .fxcs-process-connector svg { width: 17px; height: 17px; }

/* 06 Final CTA */
.fxcs-contact-sections .fxcs-cta-section { padding-block: 10px 78px; background: var(--fxcs-bg); }
.fxcs-contact-sections .fxcs-cta-panel { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 170px; align-items: center; gap: 30px; min-height: 320px; overflow: hidden; padding: clamp(32px,5vw,58px); border-radius: 15px; background: var(--fx-carbon, #202020); color: #fff; isolation: isolate; }
.fxcs-contact-sections .fxcs-cta-content { position: relative; z-index: 2; max-width: 750px; }
.fxcs-contact-sections .fxcs-cta-eyebrow { display: flex; align-items: center; gap: 9px; color: var(--fxcs-copper-light); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.fxcs-contact-sections .fxcs-cta-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: var(--fxcs-copper-light); box-shadow: 0 0 0 4px rgba(212,154,99,.14); }
.fxcs-contact-sections .fxcs-cta-content h2 { max-width: 690px; margin-top: 18px; color: #fff; font-size: clamp(31px,4vw,47px); line-height: 1.15; }
.fxcs-contact-sections .fxcs-cta-content h2 span { color: var(--fxcs-copper-light); }
.fxcs-contact-sections .fxcs-cta-content > p:not(.fxcs-cta-eyebrow) { max-width: 650px; margin-top: 16px; color: #D5CDC3; font-size: 13px; line-height: 1.85; }
.fxcs-contact-sections .fxcs-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.fxcs-contact-sections .fxcs-cta-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 16px; border: 1px solid transparent; border-radius: 7px; font-size: 11px; font-weight: 700; transition: background-color .2s ease,border-color .2s ease,transform .2s ease; }
.fxcs-contact-sections .fxcs-cta-actions svg { width: 16px; height: 16px; }
.fxcs-contact-sections .fxcs-cta-primary { background: var(--fxcs-copper); color: #fff; }
.fxcs-contact-sections .fxcs-cta-primary:hover { background: var(--fxcs-copper-dark); transform: translateY(-1px); }
.fxcs-contact-sections .fxcs-cta-secondary { border-color: rgba(255,255,255,.25) !important; background: transparent; color: #fff; }
.fxcs-contact-sections .fxcs-cta-secondary:hover { border-color: var(--fxcs-copper-light) !important; background: rgba(255,255,255,.06); }
.fxcs-contact-sections .fxcs-cta-benefits { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }
.fxcs-contact-sections .fxcs-cta-benefits span { display: inline-flex; align-items: center; gap: 8px; color: #D7CEC3; font-size: 10px; }
.fxcs-contact-sections .fxcs-cta-benefits i { width: 5px; height: 5px; border-radius: 50%; background: var(--fxcs-copper-light); }
.fxcs-contact-sections .fxcs-cta-mark { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; color: var(--fxcs-copper-light); opacity: .9; }
.fxcs-contact-sections .fxcs-cta-mark svg { width: min(100%,150px); height: auto; stroke-width: 1.35; }
.fxcs-contact-sections .fxcs-cta-mark svg circle { stroke-dasharray: 3 5; }
.fxcs-contact-sections .fxcs-cta-mark span { color: #E6D3BD; font-size: 9px; font-weight: 700; letter-spacing: .17em; line-height: 1.7; text-align: center; }
.fxcs-contact-sections .fxcs-cta-orbit { position: absolute; z-index: -1; border: 1px solid rgba(212,154,99,.15); border-radius: 50%; pointer-events: none; }
.fxcs-contact-sections .fxcs-cta-orbit-one { top: -170px; inset-inline-end: 30px; width: 410px; height: 410px; }
.fxcs-contact-sections .fxcs-cta-orbit-two { top: -105px; inset-inline-end: 94px; width: 280px; height: 280px; }

@media (max-width: 1199px) {
  .fxcs-contact-sections .fxcs-section { padding-block: 65px; }
  .fxcs-contact-sections .fxcs-container { width: calc(100% - 48px); }
  .fxcs-contact-sections .fxcs-info-grid { grid-template-columns: minmax(0,1fr) minmax(320px,.95fr); gap: 30px; }
  .fxcs-contact-sections .fxcs-contact-panel { padding: 22px; }
  .fxcs-contact-sections .fxcs-image-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fxcs-contact-sections .fxcs-image-wrap { height: 205px; }
  .fxcs-contact-sections .fxcs-process-grid { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr); gap: 7px; }
  .fxcs-contact-sections .fxcs-process-card { padding: 20px 16px; }
  .fxcs-contact-sections .fxcs-process-card h3 { font-size: 16px; }
}
@media (max-width: 1023px) {
  .fxcs-contact-sections .fxcs-container { width: calc(100% - 44px); }
  .fxcs-contact-sections .fxcs-section { padding-block: 58px; }
  .fxcs-contact-sections .fxcs-info-grid,.fxcs-contact-sections .fxcs-form-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .fxcs-contact-sections .fxcs-info { padding-block: 55px 60px; }
  .fxcs-contact-sections .fxcs-info-copy { max-width: 720px; }
  .fxcs-contact-sections .fxcs-lead { font-size: 14px; }
  .fxcs-contact-sections .fxcs-form-grid { gap: 26px; }
  .fxcs-contact-sections .fxcs-section-heading { padding-top: 0; }
  .fxcs-contact-sections .fxcs-section-heading > p:not(.fxcs-eyebrow) { max-width: 650px; }
  .fxcs-contact-sections .fxcs-form-side-note { max-width: 650px; margin-top: 20px; }
  .fxcs-contact-sections .fxcs-map-layout { grid-template-columns: minmax(0,1.25fr) minmax(235px,.75fr); }
  .fxcs-contact-sections .fxcs-map-frame,.fxcs-contact-sections .fxcs-map-frame iframe { min-height: 310px; }
  .fxcs-contact-sections .fxcs-map-aside { padding: 23px 19px; }
  .fxcs-contact-sections .fxcs-process-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .fxcs-contact-sections .fxcs-process-card { padding: 23px; }
  .fxcs-contact-sections .fxcs-process-card h3 { margin-top: 19px; font-size: 18px; }
  .fxcs-contact-sections .fxcs-process-connector { min-height: 18px; transform: rotate(90deg); }
  .fxcs-contact-sections .fxcs-process-connector span { width: 12px; }
  .fxcs-contact-sections .fxcs-process-link { padding-top: 18px; }
  .fxcs-contact-sections .fxcs-cta-panel { grid-template-columns: minmax(0,1fr) 130px; gap: 20px; padding: 36px; }
  .fxcs-contact-sections .fxcs-cta-mark svg { width: 120px; }
}
@media (max-width: 767px) {
  .fxcs-contact-sections .fxcs-container { width: calc(100% - 36px); }
  .fxcs-contact-sections .fxcs-section { padding-block: 50px; }
  .fxcs-contact-sections .fxcs-info { padding-block: 43px 49px; }
  .fxcs-contact-sections .fxcs-info h2 { font-size: clamp(35px,7.8vw,49px); }
  .fxcs-contact-sections .fxcs-lead { margin-top: 15px; font-size: 13px; }
  .fxcs-contact-sections .fxcs-contact-panel { padding: 21px; }
  .fxcs-contact-sections .fxcs-section-heading h2,.fxcs-contact-sections .fxcs-map-heading h2,.fxcs-contact-sections .fxcs-section-head-row h2,.fxcs-contact-sections .fxcs-process-heading h2 { font-size: clamp(29px,6.4vw,38px); }
  .fxcs-contact-sections .fxcs-form { padding: 22px; }
  .fxcs-contact-sections .fxcs-map-heading,.fxcs-contact-sections .fxcs-section-head-row { grid-template-columns: minmax(0,1fr); gap: 13px; margin-bottom: 22px; }
  .fxcs-contact-sections .fxcs-map-layout { grid-template-columns: minmax(0,1fr); }
  .fxcs-contact-sections .fxcs-map-frame,.fxcs-contact-sections .fxcs-map-frame iframe { position: relative; min-height: 320px; height: 320px; }
  .fxcs-contact-sections .fxcs-map-aside { padding: 24px; }
  .fxcs-contact-sections .fxcs-image-wrap { height: 195px; }
  .fxcs-contact-sections .fxcs-image-card-copy { padding: 17px 16px 18px; }
  .fxcs-contact-sections .fxcs-cta-section { padding-block: 5px 54px; }
  .fxcs-contact-sections .fxcs-cta-panel { grid-template-columns: minmax(0,1fr); min-height: 0; padding: 30px 25px; }
  .fxcs-contact-sections .fxcs-cta-mark { display: none; }
  .fxcs-contact-sections .fxcs-cta-content h2 { font-size: clamp(31px,6.8vw,41px); }
}
@media (max-width: 480px) {
  .fxcs-contact-sections .fxcs-container { width: calc(100% - 30px); }
  .fxcs-contact-sections .fxcs-section { padding-block: 43px; }
  .fxcs-contact-sections .fxcs-info { padding-block: 36px 40px; }
  .fxcs-contact-sections .fxcs-eyebrow { gap: 7px; font-size: 9px; letter-spacing: .11em; }
  .fxcs-contact-sections .fxcs-info h2 { font-size: clamp(32px,9vw,42px); }
  .fxcs-contact-sections .fxcs-contact-panel { padding: 17px; }
  .fxcs-contact-sections .fxcs-panel-topline { font-size: 8px; }
  .fxcs-contact-sections .fxcs-status-mark { font-size: 8px; }
  .fxcs-contact-sections .fxcs-channel { gap: 10px; padding: 14px 0; }
  .fxcs-contact-sections .fxcs-channel-icon { flex-basis: 35px; width: 35px; height: 35px; }
  .fxcs-contact-sections .fxcs-channel-text strong { font-size: 11px; }
  .fxcs-contact-sections .fxcs-channel-text small,.fxcs-contact-sections .fxcs-channel-text em { font-size: 9px; }
  .fxcs-contact-sections .fxcs-panel-note { font-size: 9px; }
  .fxcs-contact-sections .fxcs-section-heading h2,.fxcs-contact-sections .fxcs-map-heading h2,.fxcs-contact-sections .fxcs-section-head-row h2,.fxcs-contact-sections .fxcs-process-heading h2 { font-size: 29px; }
  .fxcs-contact-sections .fxcs-form { padding: 17px 15px; }
  .fxcs-contact-sections .fxcs-form-heading { flex-direction: column; gap: 7px; padding-bottom: 16px; margin-bottom: 19px; }
  .fxcs-contact-sections .fxcs-form-heading h3 { font-size: 20px; }
  .fxcs-contact-sections .fxcs-fields-grid { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .fxcs-contact-sections .fxcs-field-full { grid-column: auto; }
  .fxcs-contact-sections .fxcs-form-bottom { flex-direction: column; align-items: stretch; gap: 15px; }
  .fxcs-contact-sections .fxcs-form-bottom p { max-width: none; }
  .fxcs-contact-sections .fxcs-submit-button { width: 100%; }
  .fxcs-contact-sections .fxcs-map-frame,.fxcs-contact-sections .fxcs-map-frame iframe { min-height: 275px; height: 275px; }
  .fxcs-contact-sections .fxcs-map-tag { top: 10px; inset-inline-start: 10px; padding: 8px 10px; font-size: 8px; }
  .fxcs-contact-sections .fxcs-image-grid { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .fxcs-contact-sections .fxcs-image-wrap { height: 212px; }
  .fxcs-contact-sections .fxcs-process-heading > p:last-child { font-size: 12px; }
  .fxcs-contact-sections .fxcs-process-card { padding: 20px; }
  .fxcs-contact-sections .fxcs-cta-panel { padding: 26px 19px; }
  .fxcs-contact-sections .fxcs-cta-content h2 { font-size: 30px; }
  .fxcs-contact-sections .fxcs-cta-content > p:not(.fxcs-cta-eyebrow) { font-size: 12px; }
  .fxcs-contact-sections .fxcs-cta-actions { flex-direction: column; }
  .fxcs-contact-sections .fxcs-cta-actions a { width: 100%; }
  .fxcs-contact-sections .fxcs-cta-benefits { flex-direction: column; gap: 9px; }
}
@media (max-width: 359px) {
  .fxcs-contact-sections .fxcs-container { width: calc(100% - 24px); }
  .fxcs-contact-sections .fxcs-info h2 { font-size: 31px; }
  .fxcs-contact-sections .fxcs-contact-panel { padding: 14px; }
  .fxcs-contact-sections .fxcs-channel-text strong { font-size: 10px; }
  .fxcs-contact-sections .fxcs-status-mark { letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fxcs-contact-sections *, .fxcs-contact-sections *::before, .fxcs-contact-sections *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Match the non-hero contact sections to the contact hero's gutters and type scale. */
.fxcs-contact-sections { font-size: 16px; }
.fxcs-contact-sections .fxcs-container { width: min(1440px, calc(100% - 140px)); }
.fxcs-contact-sections h2 { font-size: clamp(34px, 5.2vw, 68px) !important; }
.fxcs-contact-sections .fxcs-eyebrow { font-size: 13px !important; }
.fxcs-contact-sections :where(p, small, label, input, select, textarea, button, a, span, strong, em) { font-size: 16px !important; }

@media (max-width: 1439px) {
  .fxcs-contact-sections h2 { font-size: clamp(34px, 4.8vw, 60px) !important; }
}
@media (max-width: 1199px) {
  .fxcs-contact-sections .fxcs-container { width: calc(100% - 80px); }
}
@media (max-width: 767px) {
  .fxcs-contact-sections .fxcs-container { width: calc(100% - 48px); }
  .fxcs-contact-sections h2 { font-size: clamp(34px, 7vw, 56px) !important; }
}
@media (max-width: 480px) {
  .fxcs-contact-sections h2 { font-size: clamp(30px, 9.4vw, 40px) !important; }
}
@media (max-width: 359px) {
  .fxcs-contact-sections .fxcs-container { width: calc(100% - 32px); }
}
.fxcs-contact-sections h2 span { font-size: inherit !important; }

/* =========================================================
   FLEETAXIS ABOUT — SECTIONS 04–07 ONLY
   Every selector is scoped to .fxa-about-sections.
   Does not style main, body, navbar or other pages.
========================================================= */

.fxa-about-sections {
    --fxa-bg: #FAF5ED;
    --fxa-surface: #F8F5F0;
    --fxa-surface-alt: #F3E6D0;
    --fxa-text: #202020;
    --fxa-heading: #151515;
    --fxa-muted: #66615B;
    --fxa-copper: #B87333;
    --fxa-copper-dark: #985A25;
    --fxa-copper-light: #D49A63;
    --fxa-border: rgba(32, 32, 32, .12);
    --fxa-error: #B42318;

    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: clip;
    background: var(--fxa-bg);
    color: var(--fxa-text);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    isolation: isolate;
}

.fxa-about-sections,
.fxa-about-sections *,
.fxa-about-sections *::before,
.fxa-about-sections *::after {
    box-sizing: border-box;
}

.fxa-about-sections :where(h2, h3, h4, p) {
    margin: 0;
}

.fxa-about-sections :where(h2, h3, h4) {
    color: var(--fxa-heading);
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.fxa-about-sections :where(p, span, strong, small, button) {
    overflow-wrap: anywhere;
}

.fxa-about-sections :where(button, input) {
    font: inherit;
}

.fxa-about-sections button {
    cursor: pointer;
}

.fxa-about-sections svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fxa-about-sections :where(img, svg) {
    max-width: 100%;
}

.fxa-about-sections button:focus-visible,
.fxa-about-sections input:focus-visible {
    outline: 2px solid var(--fxa-copper);
    outline-offset: 4px;
}

.fxa-about-sections .fxa-container {
    width: min(1240px, calc(100% - 64px));
    margin-inline: auto;
}

.fxa-about-sections .fxa-story,
.fxa-about-sections .fxa-team,
.fxa-about-sections .fxa-ecosystem,
.fxa-about-sections .fxa-difference {
    position: relative;
    padding-block: 86px;
    background: var(--fxa-bg);
}

.fxa-about-sections .fxa-team,
.fxa-about-sections .fxa-difference {
    background: var(--fxa-surface);
}

.fxa-about-sections .fxa-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fxa-copper-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.6;
}

.fxa-about-sections .fxa-eyebrow-dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fxa-copper);
    box-shadow: 0 0 0 4px rgba(184, 115, 51, .12);
}

.fxa-about-sections .fxa-story-heading,
.fxa-about-sections .fxa-team-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(250px, .72fr);
    align-items: end;
    gap: 38px;
    margin-bottom: 36px;
}

.fxa-about-sections .fxa-story-heading h2,
.fxa-about-sections .fxa-team-heading h2,
.fxa-about-sections .fxa-ecosystem-heading h2,
.fxa-about-sections .fxa-difference-heading h2 {
    max-width: 760px;
    margin-top: 18px;
    font-size: clamp(32px, 3.8vw, 48px);
    font-weight: 600;
    line-height: 1.14;
    text-wrap: balance;
}

.fxa-about-sections .fxa-story-heading h2 span,
.fxa-about-sections .fxa-team-heading h2 span,
.fxa-about-sections .fxa-ecosystem-heading h2 span,
.fxa-about-sections .fxa-difference-heading h2 span {
    color: var(--fxa-copper);
}

.fxa-about-sections .fxa-story-intro,
.fxa-about-sections .fxa-team-heading > p {
    max-width: 430px;
    color: var(--fxa-muted);
    font-size: 13px;
    line-height: 1.85;
}

/* =========================================================
   SECTION 04 — OUR STORY
========================================================= */

.fxa-about-sections .fxa-story-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(350px, .82fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(184, 115, 51, .27);
    border-radius: 20px;
    background: #202020;
    color: #F8F5F0;
    box-shadow: 0 25px 70px rgba(32, 32, 32, .12);
}

.fxa-about-sections .fxa-story-canvas {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 535px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(140deg, #202020 5%, #29241F 60%, #201D1A);
    color: #F8F5F0;
}

.fxa-about-sections .fxa-canvas-topline,
.fxa-about-sections .fxa-canvas-bottomline {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 19px 23px;
    color: #D4C8B9;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}

.fxa-about-sections .fxa-canvas-topline {
    border-bottom: 1px solid rgba(243, 230, 208, .11);
}

.fxa-about-sections .fxa-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #E2B487;
    font-size: 8px;
    letter-spacing: .07em;
    white-space: nowrap;
}

.fxa-about-sections .fxa-live-indicator i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D49A63;
    box-shadow: 0 0 0 4px rgba(212, 154, 99, .13);
    animation: fxaAboutPulse 2s ease-out infinite;
}

.fxa-about-sections .fxa-blueprint-grid {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .42;
    background-image:
        linear-gradient(rgba(212, 154, 99, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 154, 99, .075) 1px, transparent 1px);
    background-size: 31px 31px;
    mask-image: linear-gradient(180deg, transparent, #000 15%, #000 90%, transparent);
}

.fxa-about-sections .fxa-blueprint-glow {
    position: absolute;
    z-index: -1;
    top: 20%;
    left: 18%;
    width: 67%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 115, 51, .19), transparent 68%);
    filter: blur(15px);
    animation: fxaAboutGlow 8s ease-in-out infinite alternate;
}

.fxa-about-sections .fxa-story-connectors {
    position: absolute;
    inset: 9% 0 8%;
    width: 100%;
    height: 83%;
    overflow: visible;
    pointer-events: none;
    stroke-width: 1.4;
}

.fxa-about-sections .fxa-path-base {
    fill: none;
    stroke: rgba(212, 154, 99, .2);
    stroke-width: 1.5;
    stroke-dasharray: 3 7;
}

.fxa-about-sections .fxa-path-alt {
    stroke: rgba(212, 154, 99, .12);
}

.fxa-about-sections .fxa-path-animated {
    fill: none;
    stroke: #D49A63;
    stroke-width: 2;
    stroke-dasharray: 9 12;
    stroke-dashoffset: 210;
    animation: fxaAboutPath 8s linear infinite;
}

.fxa-about-sections .fxa-path-animated-alt {
    stroke: #B87333;
    animation-delay: -3s;
}

.fxa-about-sections .fxa-path-bridge {
    fill: none;
    stroke: rgba(212, 154, 99, .4);
    stroke-width: 1.2;
    stroke-dasharray: 3 5;
}

.fxa-about-sections .fxa-path-node {
    fill: #D49A63;
    stroke: #202020;
    stroke-width: 2;
    animation: fxaAboutNode 3s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: center;
}

.fxa-about-sections .fxa-path-node:nth-of-type(2n) {
    animation-delay: -1.2s;
}

.fxa-about-sections .fxa-vehicle-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(212, 154, 99, .29);
    border-radius: 7px;
    background: rgba(35, 31, 27, .96);
    color: #E9D7C2;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    white-space: nowrap;
    animation: fxaAboutFloat 5.5s ease-in-out infinite;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}

.fxa-about-sections .fxa-vehicle-chip svg {
    flex: 0 0 44px;
    width: 44px;
    height: 28px;
    stroke: #D49A63;
    stroke-width: 1.5;
}

.fxa-about-sections .fxa-vehicle-chip-one {
    top: 21%;
    left: 6%;
}

.fxa-about-sections .fxa-vehicle-chip-two {
    top: 50%;
    left: 4%;
    animation-delay: -1.7s;
}

.fxa-about-sections .fxa-vehicle-chip-three {
    top: 34%;
    right: 4%;
    animation-delay: -3s;
}

.fxa-about-sections .fxa-story-hub {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 51%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 155px;
    min-height: 133px;
    padding: 15px;
    border: 1px solid rgba(212, 154, 99, .75);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #493625, #27211B 75%);
    box-shadow: 0 0 0 8px rgba(184, 115, 51, .06), 0 0 48px rgba(184, 115, 51, .2);
    transform: translate(-50%, -50%);
    transition: transform .6s ease, box-shadow .6s ease;
}

.fxa-about-sections .fxa-story-hub-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(212, 154, 99, .47);
    border-radius: 50%;
    color: #E2B487;
}

.fxa-about-sections .fxa-story-hub-inner svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
}

.fxa-about-sections .fxa-story-hub > span {
    color: #F3E6D0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
}

.fxa-about-sections .fxa-story-hub small {
    color: #D49A63;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .09em;
    text-align: center;
}

.fxa-about-sections .fxa-orbit {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 51%;
    width: 205px;
    aspect-ratio: 1;
    border: 1px dashed rgba(212, 154, 99, .35);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: fxaAboutOrbit 32s linear infinite;
}

.fxa-about-sections .fxa-orbit-two {
    width: 285px;
    border-style: solid;
    border-color: rgba(212, 154, 99, .09);
    animation-direction: reverse;
    animation-duration: 48s;
}

.fxa-about-sections .fxa-scene-tag {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #AFA292;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .09em;
    transition: color .3s ease, transform .4s ease;
}

.fxa-about-sections .fxa-scene-tag > span:first-child {
    color: #D49A63;
}

.fxa-about-sections .fxa-scene-tag-one {
    top: 14%;
    right: 8%;
}

.fxa-about-sections .fxa-scene-tag-two {
    bottom: 20%;
    left: 8%;
}

.fxa-about-sections .fxa-scene-tag-three {
    right: 8%;
    bottom: 24%;
}

.fxa-about-sections .fxa-canvas-bottomline {
    margin-top: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid rgba(243, 230, 208, .11);
    color: #CBBBA8;
    font-size: 8px;
}

.fxa-about-sections .fxa-canvas-bottom-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D49A63;
}

.fxa-about-sections .fxa-story-narrative {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(24px, 3.5vw, 43px);
    background: linear-gradient(145deg, #2A2A2A, #202020);
    color: #F8F5F0;
}

.fxa-about-sections .fxa-story-narrative-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.fxa-about-sections .fxa-story-count {
    display: inline-flex;
    flex: 0 0 41px;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    border: 1px solid rgba(212, 154, 99, .55);
    border-radius: 50%;
    color: #E2B487;
    font-size: 13px;
    font-weight: 700;
}

.fxa-about-sections .fxa-story-kicker {
    color: #D49A63;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.6;
}

.fxa-about-sections .fxa-story-narrative h3 {
    color: #FFFFFF;
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.18;
    letter-spacing: -.035em;
}

.fxa-about-sections .fxa-story-narrative > p:not(.fxa-story-footnote) {
    min-height: 82px;
    margin-top: 16px;
    color: #D5CDC3;
    font-size: 13px;
    line-height: 1.85;
    animation: fxaAboutTextIn .4s ease both;
}

.fxa-about-sections .fxa-story-progress {
    height: 2px;
    overflow: hidden;
    margin-top: 24px;
    background: rgba(243, 230, 208, .15);
}

.fxa-about-sections .fxa-story-progress-bar {
    display: block;
    width: 33.333%;
    height: 100%;
    background: #D49A63;
    transition: width .45s cubic-bezier(.2, .8, .2, 1);
}

.fxa-about-sections .fxa-story-tabs {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

.fxa-about-sections .fxa-story-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 15px 0;
    border-bottom: 1px solid rgba(243, 230, 208, .11);
    background: transparent;
    color: #D5CDC3;
    text-align: start;
    transition: color .25s ease, padding .25s ease;
}

.fxa-about-sections .fxa-story-tab:last-child {
    border-bottom: 0;
}

.fxa-about-sections .fxa-tab-number {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(243, 230, 208, .2);
    border-radius: 50%;
    color: #C5B8A8;
    font-size: 10px;
    font-weight: 700;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.fxa-about-sections .fxa-tab-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fxa-about-sections .fxa-tab-text strong {
    color: #F8F5F0;
    font-size: 12px;
    font-weight: 600;
}

.fxa-about-sections .fxa-tab-text small {
    color: #C1B8AD;
    font-size: 10px;
    line-height: 1.5;
}

.fxa-about-sections .fxa-story-tab > svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    color: #8F8273;
    transition: transform .25s ease, color .25s ease;
}

.fxa-about-sections .fxa-story-tab:hover,
.fxa-about-sections .fxa-story-tab.is-active {
    color: #FFFFFF;
}

.fxa-about-sections .fxa-story-tab.is-active {
    padding-inline-start: 5px;
}

.fxa-about-sections .fxa-story-tab.is-active .fxa-tab-number {
    background: #B87333;
    border-color: #B87333;
    color: #FFFFFF;
}

.fxa-about-sections .fxa-story-tab.is-active > svg,
.fxa-about-sections .fxa-story-tab:hover > svg {
    color: #D49A63;
    transform: translateX(3px);
}

.fxa-about-sections .fxa-story-footnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 19px;
    padding-top: 15px;
    border-top: 1px solid rgba(243, 230, 208, .11);
    color: #C1B8AD;
    font-size: 9px;
    line-height: 1.7;
}

.fxa-about-sections .fxa-story-footnote svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    color: #D49A63;
}

/* Transformation states controlled by section tabs. */
.fxa-about-sections .fxa-story-stage[data-story-state="2"] .fxa-vehicle-chip-one {
    transform: translate(35px, 25px);
}

.fxa-about-sections .fxa-story-stage[data-story-state="2"] .fxa-vehicle-chip-two {
    transform: translate(80px, -12px);
}

.fxa-about-sections .fxa-story-stage[data-story-state="2"] .fxa-vehicle-chip-three {
    transform: translate(-30px, 15px);
}

.fxa-about-sections .fxa-story-stage[data-story-state="2"] .fxa-story-hub {
    box-shadow: 0 0 0 12px rgba(184, 115, 51, .1), 0 0 70px rgba(184, 115, 51, .3);
}

.fxa-about-sections .fxa-story-stage[data-story-state="3"] .fxa-vehicle-chip-one {
    transform: translate(72px, 60px) scale(.9);
}

.fxa-about-sections .fxa-story-stage[data-story-state="3"] .fxa-vehicle-chip-two {
    transform: translate(108px, -36px) scale(.9);
}

.fxa-about-sections .fxa-story-stage[data-story-state="3"] .fxa-vehicle-chip-three {
    transform: translate(-64px, 14px) scale(.9);
}

.fxa-about-sections .fxa-story-stage[data-story-state="3"] .fxa-story-hub {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 0 0 15px rgba(184, 115, 51, .1), 0 0 85px rgba(184, 115, 51, .33);
}

/* =========================================================
   SECTION 05 — OUR TEAM CONSTELLATION
========================================================= */

.fxa-about-sections .fxa-team-constellation {
    position: relative;
    padding: 14px 0 0;
}

.fxa-about-sections .fxa-team-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    fill: none;
    stroke: rgba(184, 115, 51, .22);
    stroke-width: 1.1;
    stroke-dasharray: 5 8;
    animation: fxaAboutPath 28s linear infinite;
}

.fxa-about-sections .fxa-team-network circle {
    fill: var(--fxa-copper);
    stroke: none;
}

.fxa-about-sections .fxa-team-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.fxa-about-sections .fxa-team-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--fxa-border);
    border-radius: 12px;
    background: var(--fxa-bg);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.fxa-about-sections .fxa-team-card:hover,
.fxa-about-sections .fxa-team-card.is-active {
    transform: translateY(-5px);
    border-color: rgba(184, 115, 51, .58);
    box-shadow: 0 17px 35px rgba(32, 32, 32, .09);
}

.fxa-about-sections .fxa-team-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 185px;
    overflow: hidden;
    background: #202020;
    isolation: isolate;
}

.fxa-about-sections .fxa-team-art-one {
    background: linear-gradient(145deg, #202020, #34291F);
}

.fxa-about-sections .fxa-team-art-two {
    background: linear-gradient(145deg, #493625, #202020);
}

.fxa-about-sections .fxa-team-art-three {
    background: linear-gradient(145deg, #292929, #403429);
}

.fxa-about-sections .fxa-team-art-four {
    background: linear-gradient(145deg, #38312B, #202020);
}

.fxa-about-sections .fxa-team-halo {
    position: absolute;
    z-index: -1;
    top: 48%;
    left: 50%;
    width: 135px;
    height: 135px;
    border: 1px dashed rgba(212, 154, 99, .5);
    border-radius: 50%;
    box-shadow: inset 0 0 0 13px rgba(212, 154, 99, .035);
    transform: translate(-50%, -50%);
    animation: fxaAboutOrbit 35s linear infinite;
}

.fxa-about-sections .fxa-team-card:nth-child(even) .fxa-team-halo {
    animation-direction: reverse;
    animation-duration: 48s;
}

.fxa-about-sections .fxa-team-art > svg {
    position: relative;
    z-index: 1;
    width: 130px;
    height: 130px;
    overflow: visible;
    transition: transform .4s ease;
}

.fxa-about-sections .fxa-team-card:hover .fxa-team-art > svg,
.fxa-about-sections .fxa-team-card.is-active .fxa-team-art > svg {
    transform: translateY(-5px) scale(1.04);
}

.fxa-about-sections .fxa-avatar-orbit {
    fill: rgba(212, 154, 99, .04);
    stroke: rgba(212, 154, 99, .48);
    stroke-width: 1.3;
    stroke-dasharray: 3 4;
}

.fxa-about-sections .fxa-avatar-head {
    fill: #D49A63;
    stroke: #E2B487;
    stroke-width: 1.2;
}

.fxa-about-sections .fxa-avatar-body {
    fill: #D49A63;
    stroke: #E2B487;
    stroke-width: 1.3;
}

.fxa-about-sections .fxa-team-card-two .fxa-avatar-head,
.fxa-about-sections .fxa-team-card-two .fxa-avatar-body {
    fill: #B87333;
    stroke: #D49A63;
}

.fxa-about-sections .fxa-team-card-three .fxa-avatar-head,
.fxa-about-sections .fxa-team-card-three .fxa-avatar-body {
    fill: #E2B487;
    stroke: #D49A63;
}

.fxa-about-sections .fxa-team-card-four .fxa-avatar-head,
.fxa-about-sections .fxa-team-card-four .fxa-avatar-body {
    fill: #985A25;
    stroke: #D49A63;
}

.fxa-about-sections .fxa-avatar-detail {
    fill: none;
    stroke: #202020;
    stroke-width: 2;
    stroke-linecap: round;
}

.fxa-about-sections .fxa-team-art-label {
    position: absolute;
    inset-inline-start: 14px;
    bottom: 13px;
    color: #D49A63;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
}

.fxa-about-sections .fxa-team-copy {
    padding: 20px 18px 21px;
}

.fxa-about-sections .fxa-team-role {
    color: var(--fxa-copper-dark);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .11em;
}

.fxa-about-sections .fxa-team-copy h3 {
    margin-top: 8px;
    font-size: 17px;
}

.fxa-about-sections .fxa-team-copy p {
    min-height: 63px;
    margin-top: 10px;
    color: var(--fxa-muted);
    font-size: 11px;
    line-height: 1.8;
}

.fxa-about-sections .fxa-team-focus {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    padding: 0;
    background: transparent;
    color: var(--fxa-copper-dark);
    font-size: 10px;
    font-weight: 700;
    text-align: start;
}

.fxa-about-sections .fxa-team-focus svg {
    width: 15px;
    height: 15px;
    transition: transform .25s ease;
}

.fxa-about-sections .fxa-team-focus:hover svg {
    transform: translateX(3px);
}

.fxa-about-sections .fxa-team-card.is-active .fxa-team-focus {
    color: var(--fxa-copper);
}

.fxa-about-sections .fxa-team-status {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 13px 15px;
    border: 1px solid var(--fxa-border);
    border-radius: 8px;
    background: var(--fxa-bg);
    color: var(--fxa-muted);
    font-size: 11px;
    line-height: 1.6;
}

.fxa-about-sections .fxa-team-status-dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fxa-copper);
}

/* =========================================================
   SECTION 06 — THE FLEET ECOSYSTEM
========================================================= */

.fxa-about-sections .fxa-ecosystem-heading {
    max-width: 760px;
    margin-bottom: 37px;
}

.fxa-about-sections .fxa-ecosystem-heading > p:last-child {
    max-width: 660px;
    margin-top: 16px;
    color: var(--fxa-muted);
    font-size: 13px;
    line-height: 1.85;
}

.fxa-about-sections .fxa-ecosystem-board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, .7fr) minmax(0, 1fr);
    grid-template-areas:
        "left hub right"
        "detail detail detail";
    align-items: center;
    gap: 35px;
    overflow: hidden;
    padding: 36px;
    border: 1px solid rgba(184, 115, 51, .28);
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(184, 115, 51, .15), transparent 42%),
        linear-gradient(145deg, #252321, #1B1B1B);
    color: #F8F5F0;
    isolation: isolate;
}

.fxa-about-sections .fxa-ecosystem-lines {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 72%;
    overflow: visible;
    fill: none;
    stroke: rgba(212, 154, 99, .36);
    stroke-width: 1.3;
    stroke-dasharray: 5 8;
    animation: fxaAboutPath 28s linear infinite;
    pointer-events: none;
}

.fxa-about-sections .fxa-ecosystem-lines circle {
    fill: #D49A63;
    stroke: #202020;
    stroke-width: 2;
}

.fxa-about-sections .fxa-ecosystem-nodes {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.fxa-about-sections .fxa-ecosystem-left {
    grid-area: left;
}

.fxa-about-sections .fxa-ecosystem-right {
    grid-area: right;
}

.fxa-about-sections .fxa-ecosystem-node {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 95px;
    padding: 15px;
    border: 1px solid rgba(243, 230, 208, .17);
    border-radius: 9px;
    background: rgba(42, 42, 42, .94);
    color: #F8F5F0;
    text-align: start;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.fxa-about-sections .fxa-ecosystem-node:hover {
    transform: translateY(-3px);
    border-color: rgba(212, 154, 99, .62);
}

.fxa-about-sections .fxa-ecosystem-node.is-active {
    border-color: #D49A63;
    background: #302A24;
    box-shadow: 0 0 0 3px rgba(212, 154, 99, .08);
}

.fxa-about-sections .fxa-ecosystem-icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(212, 154, 99, .34);
    border-radius: 8px;
    background: rgba(184, 115, 51, .1);
    color: #D49A63;
}

.fxa-about-sections .fxa-ecosystem-icon svg {
    width: 21px;
    height: 21px;
}

.fxa-about-sections .fxa-ecosystem-node-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fxa-about-sections .fxa-ecosystem-node-copy strong {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.fxa-about-sections .fxa-ecosystem-node-copy small {
    color: #C8BEB1;
    font-size: 10px;
    line-height: 1.55;
}

.fxa-about-sections .fxa-ecosystem-node-arrow {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #A99A89;
    transition: transform .25s ease, color .25s ease;
}

.fxa-about-sections .fxa-ecosystem-node.is-active .fxa-ecosystem-node-arrow,
.fxa-about-sections .fxa-ecosystem-node:hover .fxa-ecosystem-node-arrow {
    color: #D49A63;
    transform: translateX(3px);
}

.fxa-about-sections .fxa-ecosystem-hub {
    position: relative;
    grid-area: hub;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    min-height: 190px;
    isolation: isolate;
    text-align: center;
}

.fxa-about-sections .fxa-hub-orbit {
    position: absolute;
    z-index: -1;
    top: 45%;
    left: 50%;
    width: 165px;
    aspect-ratio: 1;
    border: 1px dashed rgba(212, 154, 99, .55);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: fxaAboutOrbit 28s linear infinite;
}

.fxa-about-sections .fxa-hub-orbit-two {
    width: 210px;
    border-color: rgba(212, 154, 99, .18);
    animation-direction: reverse;
    animation-duration: 40s;
}

.fxa-about-sections .fxa-hub-core {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    border: 1px solid #D49A63;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #493625, #25201B);
    color: #E2B487;
    box-shadow: 0 0 0 7px rgba(184, 115, 51, .08), 0 0 40px rgba(184, 115, 51, .16);
    animation: fxaAboutHub 4s ease-in-out infinite;
}

.fxa-about-sections .fxa-hub-core svg {
    width: 39px;
    height: 39px;
}

.fxa-about-sections .fxa-ecosystem-hub > strong {
    color: #FFFFFF;
    font-size: 12px;
    letter-spacing: .1em;
}

.fxa-about-sections .fxa-ecosystem-hub > small {
    color: #D49A63;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
}

.fxa-about-sections .fxa-ecosystem-detail {
    position: relative;
    grid-area: detail;
    display: grid;
    grid-template-columns: minmax(0, .5fr) minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 22px;
    padding: 22px 25px;
    border: 1px solid rgba(212, 154, 99, .25);
    border-radius: 9px;
    background: rgba(30, 28, 26, .76);
}

.fxa-about-sections .fxa-ecosystem-detail-index {
    color: #D49A63;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.6;
}

.fxa-about-sections .fxa-ecosystem-detail h3 {
    color: #F8F5F0;
    font-size: 17px;
}

.fxa-about-sections .fxa-ecosystem-detail p {
    color: #D5CDC3;
    font-size: 11px;
    line-height: 1.8;
    animation: fxaAboutTextIn .4s ease both;
}

.fxa-about-sections .fxa-ecosystem-detail-line {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 28%;
    height: 2px;
    background: linear-gradient(90deg, #B87333, #D49A63, transparent);
    transition: width .4s ease;
}

.fxa-about-sections .fxa-ecosystem-board:has(.fxa-ecosystem-node:nth-child(2).is-active)
    .fxa-ecosystem-detail-line {
    width: 48%;
}

/* =========================================================
   SECTION 07 — INTERACTIVE COMPARISON
========================================================= */

.fxa-about-sections .fxa-difference-heading {
    max-width: 780px;
    margin-bottom: 32px;
}

.fxa-about-sections .fxa-difference-heading > p:last-child {
    max-width: 620px;
    margin-top: 16px;
    color: var(--fxa-muted);
    font-size: 13px;
    line-height: 1.85;
}

.fxa-about-sections .fxa-difference-wrap {
    overflow: hidden;
    border: 1px solid var(--fxa-border);
    border-radius: 14px;
    background: var(--fxa-bg);
}

.fxa-about-sections .fxa-difference-board {
    --fxa-compare-position: 50%;
    position: relative;
    display: block;
    min-width: 0;
    min-height: 400px;
    overflow: hidden;
    background: #E9E3DA;
    isolation: isolate;
    touch-action: pan-y;
}

.fxa-about-sections .fxa-difference-before,
.fxa-about-sections .fxa-difference-after {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    height: 100%;
}

.fxa-about-sections .fxa-difference-before {
    background: #E9E3DA;
    color: #202020;
}

.fxa-about-sections .fxa-difference-after {
    background: #202020;
    color: #F8F5F0;
    clip-path: inset(0 0 0 var(--fxa-compare-position));
    transition: clip-path .08s linear;
    will-change: clip-path;
}

.fxa-about-sections .fxa-difference-pane {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    min-height: 400px;
    padding: clamp(18px, 3vw, 34px);
}

.fxa-about-sections .fxa-before-pane {
    background: #E9E3DA;
}

.fxa-about-sections .fxa-before-side {
    overflow: hidden;
    background: #F3EDE5;
}

.fxa-about-sections .fxa-after-empty {
    background: #202020;
}

.fxa-about-sections .fxa-after-pane {
    background: linear-gradient(145deg, #292929, #202020);
    border-inline-start: 1px solid rgba(212, 154, 99, .1);
}

.fxa-about-sections .fxa-difference-label {
    color: #985A25;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.7;
}

.fxa-about-sections .fxa-after-pane .fxa-difference-label {
    color: #D49A63;
}

.fxa-about-sections .fxa-difference-pane h3 {
    margin-top: 14px;
    font-size: clamp(20px, 2.25vw, 29px);
    line-height: 1.18;
}

.fxa-about-sections .fxa-before-pane h3 {
    color: #202020;
}

.fxa-about-sections .fxa-after-pane h3 {
    color: #FFFFFF;
}

.fxa-about-sections .fxa-difference-pane > p {
    margin-top: 10px;
    color: #625A50;
    font-size: 11px;
    line-height: 1.75;
}

.fxa-about-sections .fxa-after-pane > p {
    color: #D5CDC3;
}

.fxa-about-sections .fxa-fragment-stack {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 20px;
}

.fxa-about-sections .fxa-fragment {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #D3C8BC;
    border-radius: 7px;
    background: #F8F5F0;
    animation: fxaAboutFragment 5s ease-in-out infinite;
    transition: transform .3s ease, border-color .3s ease;
}

.fxa-about-sections .fxa-fragment-two {
    margin-inline-start: 12px;
    animation-delay: -1.7s;
}

.fxa-about-sections .fxa-fragment-three {
    animation-delay: -3s;
}

.fxa-about-sections .fxa-fragment-icon {
    display: inline-flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #E9E3DA;
    color: #786D60;
}

.fxa-about-sections .fxa-fragment-icon svg {
    width: 17px;
    height: 17px;
}

.fxa-about-sections .fxa-fragment > span:nth-child(2) {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fxa-about-sections .fxa-fragment strong {
    color: #403A33;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.fxa-about-sections .fxa-fragment small {
    color: #746B61;
    font-size: 9px;
    line-height: 1.4;
}

.fxa-about-sections .fxa-fragment > i {
    display: inline-block;
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #B8A99A;
}

.fxa-about-sections .fxa-fragments-illustration {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 12px;
    min-height: 185px;
    margin-top: 15px;
}

.fxa-about-sections .fxa-fragments-line {
    display: block;
    width: 35%;
    height: 29px;
    border: 1px solid #C6B7A7;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg, #C4B9AB 0 5px, transparent 5px 9px);
    background-size: 65% 2px;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-4deg);
    animation: fxaAboutFragment 4.5s ease-in-out infinite;
}

.fxa-about-sections .fxa-fragments-line:nth-child(2n) {
    transform: rotate(6deg);
    animation-delay: -2s;
}

.fxa-about-sections .fxa-fragments-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #B87333;
    animation: fxaAboutPulse 2s ease-out infinite;
}

.fxa-about-sections .fxa-fragments-dot:nth-of-type(6) {
    top: 14%;
    left: 13%;
}

.fxa-about-sections .fxa-fragments-dot:nth-of-type(7) {
    top: 65%;
    right: 18%;
    animation-delay: -.6s;
}

.fxa-about-sections .fxa-fragments-dot:nth-of-type(8) {
    top: 34%;
    right: 6%;
    animation-delay: -1.3s;
}

.fxa-about-sections .fxa-fragments-dot:nth-of-type(9) {
    bottom: 8%;
    left: 27%;
    animation-delay: -.9s;
}

.fxa-about-sections .fxa-fragments-cross {
    position: absolute;
    top: 37%;
    left: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(152, 90, 37, .35);
    border-radius: 50%;
    background: #E9E3DA;
    color: #985A25;
    font-size: 20px;
}

.fxa-about-sections .fxa-connected-network {
    position: relative;
    width: 100%;
    height: 205px;
    margin-top: 12px;
    overflow: hidden;
}

.fxa-about-sections .fxa-connected-network > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    stroke: #B87333;
    stroke-width: 1.4;
    stroke-dasharray: 5 7;
    animation: fxaAboutPath 20s linear infinite;
}

.fxa-about-sections .fxa-connected-network > svg circle {
    fill: #D49A63;
    stroke: #202020;
    stroke-width: 2;
}

.fxa-about-sections .fxa-connected-core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 57px;
    border: 1px solid #D49A63;
    border-radius: 50%;
    background: #3B2D20;
    color: #E2B487;
    box-shadow: 0 0 0 6px rgba(184, 115, 51, .09);
    transform: translate(-50%, -50%);
    animation: fxaAboutHub 4s ease-in-out infinite;
}

.fxa-about-sections .fxa-connected-core svg {
    width: 32px;
    height: 32px;
}

.fxa-about-sections .fxa-network-node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(212, 154, 99, .57);
    border-radius: 9px;
    background: #302A24;
    color: #E2B487;
    animation: fxaAboutFloat 4.5s ease-in-out infinite;
}

.fxa-about-sections .fxa-network-node svg {
    width: 17px;
    height: 17px;
}

.fxa-about-sections .fxa-network-node-one {
    top: 6%;
    left: 11%;
}

.fxa-about-sections .fxa-network-node-two {
    top: 6%;
    right: 11%;
    animation-delay: -1.4s;
}

.fxa-about-sections .fxa-network-node-three {
    bottom: 6%;
    left: 11%;
    animation-delay: -2.4s;
}

.fxa-about-sections .fxa-network-node-four {
    right: 11%;
    bottom: 6%;
    animation-delay: -3s;
}

.fxa-about-sections .fxa-connected-labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
}

.fxa-about-sections .fxa-connected-labels span {
    padding: 5px 7px;
    border: 1px solid rgba(212, 154, 99, .23);
    border-radius: 4px;
    color: #E2B487;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
}

.fxa-about-sections .fxa-difference-divider {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: var(--fxa-compare-position);
    width: 2px;
    background: #D49A63;
    pointer-events: none;
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(32, 32, 32, .15), 0 0 18px rgba(184, 115, 51, .25);
    transition: left .08s linear;
}

.fxa-about-sections .fxa-difference-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 2px solid #E2B487;
    border-radius: 50%;
    background: #B87333;
    color: #FFFFFF;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
}

.fxa-about-sections .fxa-difference-handle svg {
    width: 20px;
    height: 20px;
}

.fxa-about-sections .fxa-difference-range {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    direction: ltr;
    touch-action: pan-y;
}

.fxa-about-sections .fxa-difference-range-label {
    position: absolute;
    z-index: 6;
    bottom: 12px;
    left: 50%;
    max-width: calc(100% - 24px);
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 5px;
    background: rgba(32, 32, 32, .9);
    color: #F3E6D0;
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.fxa-about-sections .fxa-difference-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 25px;
    padding: 15px 18px;
    background: var(--fxa-bg);
}

.fxa-about-sections .fxa-difference-footer span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fxa-muted);
    font-size: 10px;
    font-weight: 600;
}

.fxa-about-sections .fxa-difference-footer i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.fxa-about-sections .fxa-before-key {
    background: #C4B6A6;
}

.fxa-about-sections .fxa-after-key {
    background: #B87333;
}

/* =========================================================
   SCROLL REVEALS / ANIMATIONS
========================================================= */

.fxa-about-sections.fxa-motion-ready [data-fxa-reveal-section] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1);
}

.fxa-about-sections.fxa-motion-ready [data-fxa-reveal-section].fxa-is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fxaAboutPulse {
    0% { box-shadow: 0 0 0 0 rgba(212, 154, 99, .45); }
    65% { box-shadow: 0 0 0 8px rgba(212, 154, 99, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 154, 99, 0); }
}

@keyframes fxaAboutPath {
    to { stroke-dashoffset: -160; }
}

@keyframes fxaAboutNode {
    from { opacity: .5; transform: scale(.8); }
    to { opacity: 1; transform: scale(1.15); }
}

@keyframes fxaAboutFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@keyframes fxaAboutOrbit {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fxaAboutGlow {
    from { opacity: .6; transform: scale(.88); }
    to { opacity: 1; transform: scale(1.1); }
}

@keyframes fxaAboutHub {
    0%, 100% { box-shadow: 0 0 0 6px rgba(184, 115, 51, .07), 0 0 26px rgba(184, 115, 51, .15); }
    50% { box-shadow: 0 0 0 10px rgba(184, 115, 51, .1), 0 0 42px rgba(184, 115, 51, .25); }
}

@keyframes fxaAboutTextIn {
    from { opacity: .25; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fxaAboutFragment {
    0%, 100% { translate: 0 0; }
    50% { translate: 3px -3px; }
}

/* =========================================================
   LAPTOP AND TABLET
========================================================= */

@media (max-width: 1199px) {
    .fxa-about-sections .fxa-container {
        width: calc(100% - 48px);
    }

    .fxa-about-sections .fxa-story-stage {
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    }

    .fxa-about-sections .fxa-story-canvas {
        min-height: 500px;
    }

    .fxa-about-sections .fxa-team-grid {
        gap: 12px;
    }

    .fxa-about-sections .fxa-team-copy {
        padding-inline: 14px;
    }

    .fxa-about-sections .fxa-ecosystem-board {
        gap: 22px;
        padding: 25px;
    }

    .fxa-about-sections .fxa-ecosystem-node {
        gap: 9px;
        padding: 12px;
    }

    .fxa-about-sections .fxa-ecosystem-icon {
        flex-basis: 37px;
        width: 37px;
        height: 37px;
    }

    .fxa-about-sections .fxa-ecosystem-node-copy strong {
        font-size: 11px;
    }

    .fxa-about-sections .fxa-ecosystem-node-copy small {
        font-size: 9px;
    }
}

@media (max-width: 1023px) {
    .fxa-about-sections .fxa-container {
        width: calc(100% - 44px);
    }

    .fxa-about-sections .fxa-story,
    .fxa-about-sections .fxa-team,
    .fxa-about-sections .fxa-ecosystem,
    .fxa-about-sections .fxa-difference {
        padding-block: 65px;
    }

    .fxa-about-sections .fxa-story-heading,
    .fxa-about-sections .fxa-team-heading {
        gap: 24px;
    }

    .fxa-about-sections .fxa-story-heading h2,
    .fxa-about-sections .fxa-team-heading h2,
    .fxa-about-sections .fxa-ecosystem-heading h2,
    .fxa-about-sections .fxa-difference-heading h2 {
        font-size: clamp(30px, 4vw, 40px);
    }

    .fxa-about-sections .fxa-story-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .fxa-about-sections .fxa-story-canvas {
        min-height: 440px;
    }

    .fxa-about-sections .fxa-story-narrative {
        padding: 30px;
    }

    .fxa-about-sections .fxa-story-narrative > p:not(.fxa-story-footnote) {
        min-height: 0;
    }

    .fxa-about-sections .fxa-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .fxa-about-sections .fxa-team-art {
        height: 175px;
    }

    .fxa-about-sections .fxa-team-copy p {
        min-height: 42px;
    }

    .fxa-about-sections .fxa-ecosystem-board {
        grid-template-columns: minmax(0, 1fr) minmax(120px, .65fr) minmax(0, 1fr);
        gap: 14px;
        padding: 21px;
    }

    .fxa-about-sections .fxa-ecosystem-node {
        min-height: 90px;
        padding: 11px;
    }

    .fxa-about-sections .fxa-ecosystem-node-arrow {
        display: none;
    }

    .fxa-about-sections .fxa-ecosystem-detail {
        grid-template-columns: minmax(0, .55fr) minmax(0, .8fr) minmax(0, 1.35fr);
        gap: 14px;
        padding: 18px;
    }

    .fxa-about-sections .fxa-hub-orbit {
        width: 135px;
    }

    .fxa-about-sections .fxa-hub-orbit-two {
        width: 165px;
    }

    .fxa-about-sections .fxa-difference-pane {
        min-height: 390px;
    }
}

/* =========================================================
   MOBILE-L / MOBILE-M / MOBILE-S
========================================================= */

@media (max-width: 767px) {
    .fxa-about-sections .fxa-container {
        width: calc(100% - 36px);
    }

    .fxa-about-sections .fxa-story,
    .fxa-about-sections .fxa-team,
    .fxa-about-sections .fxa-ecosystem,
    .fxa-about-sections .fxa-difference {
        padding-block: 54px;
    }

    .fxa-about-sections .fxa-story-heading,
    .fxa-about-sections .fxa-team-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        margin-bottom: 25px;
    }

    .fxa-about-sections .fxa-story-heading h2,
    .fxa-about-sections .fxa-team-heading h2,
    .fxa-about-sections .fxa-ecosystem-heading h2,
    .fxa-about-sections .fxa-difference-heading h2 {
        max-width: 650px;
        font-size: clamp(30px, 6.6vw, 39px);
    }

    .fxa-about-sections .fxa-story-intro,
    .fxa-about-sections .fxa-team-heading > p,
    .fxa-about-sections .fxa-ecosystem-heading > p:last-child,
    .fxa-about-sections .fxa-difference-heading > p:last-child {
        font-size: 12px;
        line-height: 1.8;
    }

    .fxa-about-sections .fxa-story-canvas {
        min-height: 390px;
    }

    .fxa-about-sections .fxa-canvas-topline,
    .fxa-about-sections .fxa-canvas-bottomline {
        padding: 14px;
        font-size: 8px;
    }

    .fxa-about-sections .fxa-vehicle-chip {
        gap: 6px;
        padding: 8px;
        font-size: 7px;
    }

    .fxa-about-sections .fxa-vehicle-chip svg {
        flex-basis: 32px;
        width: 32px;
        height: 23px;
    }

    .fxa-about-sections .fxa-vehicle-chip-one {
        top: 22%;
        left: 3%;
    }

    .fxa-about-sections .fxa-vehicle-chip-two {
        top: 52%;
        left: 3%;
    }

    .fxa-about-sections .fxa-vehicle-chip-three {
        top: 38%;
        right: 3%;
    }

    .fxa-about-sections .fxa-story-hub {
        left: 50%;
        width: 126px;
        min-height: 115px;
    }

    .fxa-about-sections .fxa-story-hub > span {
        font-size: 10px;
    }

    .fxa-about-sections .fxa-story-hub small {
        font-size: 6px;
    }

    .fxa-about-sections .fxa-orbit {
        left: 50%;
        width: 170px;
    }

    .fxa-about-sections .fxa-orbit-two {
        width: 220px;
    }

    .fxa-about-sections .fxa-scene-tag {
        font-size: 7px;
    }

    .fxa-about-sections .fxa-scene-tag-one {
        top: 13%;
        right: 5%;
    }

    .fxa-about-sections .fxa-scene-tag-two {
        bottom: 19%;
        left: 5%;
    }

    .fxa-about-sections .fxa-scene-tag-three {
        right: 5%;
        bottom: 22%;
    }

    .fxa-about-sections .fxa-story-narrative {
        padding: 23px;
    }

    .fxa-about-sections .fxa-story-narrative h3 {
        font-size: 27px;
    }

    .fxa-about-sections .fxa-story-tabs {
        margin-top: 10px;
    }

    .fxa-about-sections .fxa-story-tab {
        padding-block: 13px;
    }

    .fxa-about-sections .fxa-team-art {
        height: 165px;
    }

    .fxa-about-sections .fxa-team-copy {
        padding: 17px 15px 19px;
    }

    .fxa-about-sections .fxa-team-copy h3 {
        font-size: 16px;
    }

    .fxa-about-sections .fxa-team-copy p {
        min-height: 55px;
        font-size: 11px;
    }

    .fxa-about-sections .fxa-ecosystem-heading {
        margin-bottom: 25px;
    }

    .fxa-about-sections .fxa-ecosystem-board {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hub"
            "left"
            "right"
            "detail";
        gap: 18px;
        padding: 18px;
    }

    .fxa-about-sections .fxa-ecosystem-lines {
        display: none;
    }

    .fxa-about-sections .fxa-ecosystem-hub {
        min-height: 185px;
        margin-bottom: 3px;
    }

    .fxa-about-sections .fxa-ecosystem-nodes {
        gap: 11px;
    }

    .fxa-about-sections .fxa-ecosystem-node {
        min-height: 70px;
        padding: 13px;
    }

    .fxa-about-sections .fxa-ecosystem-node-arrow {
        display: block;
    }

    .fxa-about-sections .fxa-ecosystem-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 17px;
    }

    .fxa-about-sections .fxa-difference-heading {
        margin-bottom: 24px;
    }

    .fxa-about-sections .fxa-difference-board {
        min-height: 430px;
    }

    .fxa-about-sections .fxa-difference-pane {
        min-height: 430px;
        padding: 13px;
    }

    .fxa-about-sections .fxa-difference-pane h3 {
        font-size: 18px;
    }

    .fxa-about-sections .fxa-difference-pane > p {
        font-size: 10px;
        line-height: 1.65;
    }

    .fxa-about-sections .fxa-difference-label {
        font-size: 7px;
        letter-spacing: .07em;
    }

    .fxa-about-sections .fxa-fragment-stack {
        gap: 9px;
        margin-top: 15px;
    }

    .fxa-about-sections .fxa-fragment {
        gap: 6px;
        padding: 8px 6px;
    }

    .fxa-about-sections .fxa-fragment-icon {
        flex-basis: 25px;
        width: 25px;
        height: 25px;
    }

    .fxa-about-sections .fxa-fragment-icon svg {
        width: 14px;
        height: 14px;
    }

    .fxa-about-sections .fxa-fragment strong {
        font-size: 9px;
    }

    .fxa-about-sections .fxa-fragment small {
        font-size: 8px;
    }

    .fxa-about-sections .fxa-connected-network {
        height: 190px;
    }

    .fxa-about-sections .fxa-network-node {
        width: 28px;
        height: 28px;
    }

    .fxa-about-sections .fxa-network-node svg {
        width: 15px;
        height: 15px;
    }

    .fxa-about-sections .fxa-connected-labels {
        gap: 4px;
    }

    .fxa-about-sections .fxa-connected-labels span {
        padding: 4px;
        font-size: 6px;
        letter-spacing: .02em;
    }

    .fxa-about-sections .fxa-difference-handle {
        width: 35px;
        height: 35px;
    }

    .fxa-about-sections .fxa-difference-handle svg {
        width: 17px;
        height: 17px;
    }
}

/* Mobile-L can use a two-column people grid. */
@media (min-width: 430px) and (max-width: 767px) {
    .fxa-about-sections .fxa-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fxa-about-sections .fxa-team-art {
        height: 180px;
    }

    .fxa-about-sections .fxa-team-copy p {
        min-height: 60px;
    }
}

/* Mobile-S and compact Mobile-M widths. */
@media (max-width: 429px) {
    .fxa-about-sections .fxa-container {
        width: calc(100% - 28px);
    }

    .fxa-about-sections .fxa-story,
    .fxa-about-sections .fxa-team,
    .fxa-about-sections .fxa-ecosystem,
    .fxa-about-sections .fxa-difference {
        padding-block: 45px;
    }

    .fxa-about-sections .fxa-eyebrow {
        font-size: 9px;
        letter-spacing: .1em;
    }

    .fxa-about-sections .fxa-story-heading h2,
    .fxa-about-sections .fxa-team-heading h2,
    .fxa-about-sections .fxa-ecosystem-heading h2,
    .fxa-about-sections .fxa-difference-heading h2 {
        font-size: 30px;
    }

    .fxa-about-sections .fxa-story-canvas {
        min-height: 355px;
    }

    .fxa-about-sections .fxa-canvas-topline {
        flex-wrap: wrap;
        font-size: 7px;
    }

    .fxa-about-sections .fxa-vehicle-chip {
        max-width: 43%;
        padding: 7px 6px;
        font-size: 6px;
        letter-spacing: .03em;
    }

    .fxa-about-sections .fxa-vehicle-chip svg {
        flex-basis: 25px;
        width: 25px;
        height: 19px;
    }

    .fxa-about-sections .fxa-vehicle-chip-one {
        top: 23%;
        left: 2%;
    }

    .fxa-about-sections .fxa-vehicle-chip-two {
        top: 52%;
        left: 2%;
    }

    .fxa-about-sections .fxa-vehicle-chip-three {
        top: 38%;
        right: 2%;
    }

    .fxa-about-sections .fxa-story-hub {
        width: 108px;
        min-height: 103px;
        padding: 10px;
    }

    .fxa-about-sections .fxa-story-hub-inner {
        width: 34px;
        height: 34px;
    }

    .fxa-about-sections .fxa-story-hub-inner svg {
        width: 24px;
        height: 24px;
    }

    .fxa-about-sections .fxa-story-hub > span {
        font-size: 9px;
    }

    .fxa-about-sections .fxa-story-hub small {
        font-size: 5px;
    }

    .fxa-about-sections .fxa-orbit {
        width: 135px;
    }

    .fxa-about-sections .fxa-orbit-two {
        width: 180px;
    }

    .fxa-about-sections .fxa-scene-tag {
        font-size: 6px;
    }

    .fxa-about-sections .fxa-canvas-bottomline {
        gap: 6px;
        font-size: 7px;
    }

    .fxa-about-sections .fxa-story-narrative {
        padding: 19px;
    }

    .fxa-about-sections .fxa-story-narrative h3 {
        font-size: 25px;
    }

    .fxa-about-sections .fxa-team-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fxa-about-sections .fxa-team-art {
        height: 190px;
    }

    .fxa-about-sections .fxa-team-copy p {
        min-height: 0;
    }

    .fxa-about-sections .fxa-ecosystem-board {
        padding: 13px;
        gap: 14px;
    }

    .fxa-about-sections .fxa-ecosystem-node {
        padding: 10px;
    }

    .fxa-about-sections .fxa-ecosystem-node-copy strong {
        font-size: 11px;
    }

    .fxa-about-sections .fxa-ecosystem-node-copy small {
        font-size: 9px;
    }

    .fxa-about-sections .fxa-difference-board {
        min-height: 405px;
    }

    .fxa-about-sections .fxa-difference-pane {
        min-height: 405px;
        padding: 9px;
    }

    .fxa-about-sections .fxa-difference-pane h3 {
        font-size: 16px;
    }

    .fxa-about-sections .fxa-difference-pane > p {
        font-size: 9px;
    }

    .fxa-about-sections .fxa-fragment {
        gap: 5px;
        padding: 6px 4px;
    }

    .fxa-about-sections .fxa-fragment-icon {
        flex-basis: 21px;
        width: 21px;
        height: 21px;
    }

    .fxa-about-sections .fxa-fragment-icon svg {
        width: 12px;
        height: 12px;
    }

    .fxa-about-sections .fxa-fragment strong {
        font-size: 8px;
    }

    .fxa-about-sections .fxa-fragment small {
        font-size: 7px;
    }

    .fxa-about-sections .fxa-connected-network {
        height: 170px;
    }

    .fxa-about-sections .fxa-connected-labels {
        flex-direction: column;
        align-items: center;
    }

    .fxa-about-sections .fxa-difference-range-label {
        bottom: 8px;
        font-size: 8px;
    }
}


@media (max-width: 359px) {
    .fxa-about-sections .fxa-container {
        width: calc(100% - 22px);
    }

    .fxa-about-sections .fxa-story-canvas {
        min-height: 330px;
    }

    .fxa-about-sections .fxa-story-narrative {
        padding: 15px;
    }

    .fxa-about-sections .fxa-story-narrative h3 {
        font-size: 23px;
    }

    .fxa-about-sections .fxa-story-kicker {
        font-size: 8px;
    }

    .fxa-about-sections .fxa-story-tab {
        gap: 8px;
    }

    .fxa-about-sections .fxa-tab-number {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .fxa-about-sections *,
    .fxa-about-sections *::before,
    .fxa-about-sections *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .fxa-about-sections.fxa-motion-ready [data-fxa-reveal-section] {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   FLEETAXIS ABOUT — TEAM PHOTO MOSAIC
   Unique prefix: fxat-
========================================================= */

.fxa-about-team-unused {
    display: none;
}

.fxat-team-section {
    --fxat-bg: var(--fx-champagne-light, #FAF5ED);
    --fxat-surface: var(--fx-off-white, #F8F5F0);
    --fxat-text: var(--fx-text, #202020);
    --fxat-heading: var(--fx-black, #151515);
    --fxat-muted: var(--fx-text-soft, #66615B);
    --fxat-copper: var(--fx-copper, #B87333);
    --fxat-copper-dark: var(--fx-copper-dark, #985A25);
    --fxat-copper-light: var(--fx-copper-light, #D49A63);
    --fxat-border: var(--fx-border, rgba(32, 32, 32, .12));

    width: 100%;
    margin: 0;
    padding: 86px 0;
    overflow: clip;
    background: var(--fxat-bg);
    color: var(--fxat-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    isolation: isolate;
}

.fxat-team-section,
.fxat-team-section *,
.fxat-team-section *::before,
.fxat-team-section *::after {
    box-sizing: border-box;
}

.fxat-team-section :where(h2, h3, p) {
    margin: 0;
}

.fxat-team-section :where(h2, h3) {
    color: var(--fxat-heading);
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.fxat-team-section img {
    display: block;
    max-width: 100%;
}

.fxat-team-section svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fxat-team-section button {
    font: inherit;
}

.fxat-team-section :where(a, button):focus-visible {
    outline: 2px solid var(--fxat-copper);
    outline-offset: 4px;
}

.fxat-team-section .fxat-container {
    width: min(1240px, calc(100% - 64px));
    margin-inline: auto;
}

/* HEADING */

.fxat-team-section .fxat-team-header {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr);
    align-items: end;
    gap: 44px;
    margin-bottom: 36px;
}

.fxat-team-section .fxat-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fxat-copper-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.6;
}

.fxat-team-section .fxat-eyebrow-dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fxat-copper);
    box-shadow: 0 0 0 4px rgba(184, 115, 51, .13);
}

.fxat-team-section .fxat-team-heading h2 {
    max-width: 760px;
    margin-top: 18px;
    font-size: clamp(34px, 3.6vw, 47px);
    line-height: 1.14;
    text-wrap: balance;
}

.fxat-team-section .fxat-team-heading h2 span {
    color: var(--fxat-copper);
}

.fxat-team-section .fxat-team-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
}

.fxat-team-section .fxat-team-intro > p {
    max-width: 440px;
    color: var(--fxat-muted);
    font-size: 13px;
    line-height: 1.85;
}

.fxat-team-section .fxat-team-index {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    min-width: 64px;
    padding-bottom: 4px;
    color: var(--fxat-copper-dark);
}

.fxat-team-section .fxat-team-index span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
}

.fxat-team-section .fxat-team-index strong {
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -.08em;
    line-height: 1.1;
}

.fxat-team-section .fxat-team-index i {
    display: block;
    width: 43px;
    height: 2px;
    margin-top: 7px;
    background: var(--fxat-copper);
}

/* PHOTO MOSAIC */

.fxat-team-section .fxat-team-mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 245px 225px;
    gap: 15px;
}

.fxat-team-section .fxat-team-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--fxat-border);
    border-radius: 11px;
    background: #262626;
    color: #FFFFFF;
    isolation: isolate;
    transform: translateZ(0);
    transition:
        transform .4s cubic-bezier(.2, .75, .2, 1),
        border-color .35s ease,
        box-shadow .35s ease;
}

.fxat-team-section .fxat-card-feature {
    grid-column: 1 / span 6;
    grid-row: 1 / span 2;
}

.fxat-team-section .fxat-card-leasing {
    grid-column: 7 / span 3;
    grid-row: 1;
}

.fxat-team-section .fxat-card-maintenance {
    grid-column: 10 / span 3;
    grid-row: 1;
}

.fxat-team-section .fxat-card-commercial {
    grid-column: 7 / span 6;
    grid-row: 2;
}

.fxat-team-section .fxat-team-card:hover {
    z-index: 2;
    transform: translateY(-4px);
    border-color: rgba(212, 154, 99, .72);
    box-shadow: 0 17px 36px rgba(32, 32, 32, .14);
}

.fxat-team-section .fxat-team-image {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .94;
    transform: scale(1.001);
    transition:
        transform .9s cubic-bezier(.2, .75, .2, 1),
        opacity .5s ease,
        filter .5s ease;
    filter: saturate(.84) contrast(1.02);
}

.fxat-team-section .fxat-team-card:hover .fxat-team-image {
    transform: scale(1.065);
    opacity: 1;
    filter: saturate(1.06) contrast(1.04);
}

.fxat-team-section .fxat-image-shade {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(16, 16, 16, .43) 0%,
        rgba(16, 16, 16, .05) 29%,
        rgba(16, 16, 16, .28) 52%,
        rgba(16, 16, 16, .94) 100%
    );
    transition: background .4s ease;
}

.fxat-team-section .fxat-team-card:hover .fxat-image-shade {
    background: linear-gradient(
        180deg,
        rgba(16, 16, 16, .33) 0%,
        rgba(16, 16, 16, .04) 25%,
        rgba(16, 16, 16, .37) 52%,
        rgba(16, 16, 16, .96) 100%
    );
}

.fxat-team-section .fxat-image-index {
    position: absolute;
    top: 15px;
    inset-inline-start: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 5px;
    background: rgba(32, 32, 32, .64);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    backdrop-filter: blur(8px);
}

.fxat-team-section .fxat-image-topline {
    position: absolute;
    top: 21px;
    inset-inline-end: 15px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 75px);
    color: #FFFFFF;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.5;
    text-align: end;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}

.fxat-team-section .fxat-topline-dot {
    display: inline-block;
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D49A63;
    box-shadow: 0 0 0 4px rgba(212, 154, 99, .18);
}

.fxat-team-section .fxat-card-content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 22px;
    color: #FFFFFF;
    transform: translateY(5px);
    transition: transform .4s ease;
}

.fxat-team-section .fxat-team-card:hover .fxat-card-content {
    transform: translateY(0);
}

.fxat-team-section .fxat-card-kicker {
    display: block;
    margin-bottom: 7px;
    color: #E2B487;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.5;
}

.fxat-team-section .fxat-card-content h3 {
    color: #FFFFFF;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.fxat-team-section .fxat-card-content p {
    max-width: 440px;
    margin-top: 9px;
    color: #F2EAE1;
    font-size: 11px;
    line-height: 1.75;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.fxat-team-section .fxat-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .27);
    color: #F3E6D0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .09em;
}

.fxat-team-section .fxat-card-bottom svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    color: #E2B487;
    transition: transform .25s ease;
}

.fxat-team-section .fxat-team-card:hover .fxat-card-bottom svg {
    transform: translateX(4px);
}

.fxat-team-section .fxat-corner-mark {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 48px;
    height: 48px;
    border-top: 2px solid #D49A63;
    border-inline-start: 2px solid #D49A63;
    opacity: 0;
    transform: translate(7px, 7px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

.fxat-team-section .fxat-team-card:hover .fxat-corner-mark {
    opacity: 1;
    transform: translate(0, 0);
}

/* PHOTO CARD CAPTION SIZING */

.fxat-team-section .fxat-card-feature .fxat-card-content {
    padding: 29px;
}

.fxat-team-section .fxat-card-feature .fxat-card-content h3 {
    font-size: clamp(25px, 2.7vw, 34px);
}

.fxat-team-section .fxat-card-feature .fxat-card-content p {
    max-width: 390px;
    font-size: 12px;
}

.fxat-team-section .fxat-card-leasing .fxat-card-content,
.fxat-team-section .fxat-card-maintenance .fxat-card-content {
    padding: 15px 14px;
}

.fxat-team-section .fxat-card-leasing .fxat-card-content h3,
.fxat-team-section .fxat-card-maintenance .fxat-card-content h3 {
    font-size: 15px;
}

.fxat-team-section .fxat-card-leasing .fxat-card-content p,
.fxat-team-section .fxat-card-maintenance .fxat-card-content p {
    font-size: 10px;
    line-height: 1.6;
}

.fxat-team-section .fxat-card-leasing .fxat-card-bottom,
.fxat-team-section .fxat-card-maintenance .fxat-card-bottom {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 7px;
}

.fxat-team-section .fxat-card-commercial .fxat-card-content {
    max-width: 760px;
    padding: 18px 22px;
}

.fxat-team-section .fxat-card-commercial .fxat-card-content h3 {
    font-size: 21px;
}

/* BOTTOM STRIP */

.fxat-team-section .fxat-team-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 23px;
    margin-top: 20px;
    padding: 18px 21px;
    border: 1px solid var(--fxat-border);
    border-radius: 9px;
    background: var(--fxat-surface);
}

.fxat-team-section .fxat-team-footer-copy {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.fxat-team-section .fxat-footer-symbol {
    display: inline-flex;
    flex: 0 0 39px;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(184, 115, 51, .28);
    border-radius: 8px;
    background: var(--fxat-surface-alt);
    color: var(--fxat-copper-dark);
}

.fxat-team-section .fxat-footer-symbol svg {
    width: 20px;
    height: 20px;
}

.fxat-team-section .fxat-team-footer-copy h3 {
    color: var(--fxat-heading);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -.01em;
}

.fxat-team-section .fxat-team-footer-copy p {
    margin-top: 3px;
    color: var(--fxat-muted);
    font-size: 10px;
    line-height: 1.6;
}

.fxat-team-section .fxat-capability-tags {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.fxat-team-section .fxat-capability-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 4px 9px;
    border: 1px solid var(--fxat-border);
    border-radius: 5px;
    background: var(--fxat-bg);
    color: var(--fxat-muted);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
}

/* SCROLL ANIMATION — SAFE WHEN JS IS DISABLED */

.fxat-team-section.fxt-motion-ready [data-fxat-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2, .75, .2, 1);
    transition-delay: var(--fxat-delay, 0s);
}

.fxat-team-section.fxt-motion-ready [data-fxat-reveal].fxat-in-view {
    opacity: 1;
    transform: translateY(0);
}

.fxat-team-section.fxt-motion-ready .fxat-card-feature {
    --fxat-delay: .04s;
}

.fxat-team-section.fxt-motion-ready .fxat-card-leasing {
    --fxat-delay: .12s;
}

.fxat-team-section.fxt-motion-ready .fxat-card-maintenance {
    --fxat-delay: .2s;
}

.fxat-team-section.fxt-motion-ready .fxat-card-commercial {
    --fxat-delay: .28s;
}

/* LAPTOP-L / DESKTOP */

@media (min-width: 1440px) {
    .fxat-team-section .fxat-container {
        width: min(1300px, calc(100% - 80px));
    }

    .fxat-team-section .fxat-team-mosaic {
        grid-template-rows: 275px 245px;
        gap: 17px;
    }

    .fxat-team-section .fxat-card-content {
        padding: 25px;
    }

    .fxat-team-section .fxat-card-feature .fxat-card-content {
        padding: 34px;
    }
}

/* LAPTOP */

@media (max-width: 1199px) {
    .fxat-team-section .fxat-container {
        width: calc(100% - 48px);
    }

    .fxat-team-section .fxat-team-header {
        gap: 28px;
    }

    .fxat-team-section .fxat-team-index {
        min-width: 54px;
    }

    .fxat-team-section .fxat-team-index strong {
        font-size: 36px;
    }

    .fxat-team-section .fxat-team-mosaic {
        grid-template-rows: 230px 210px;
        gap: 12px;
    }

    .fxat-team-section .fxat-card-feature .fxat-card-content {
        padding: 23px;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-content,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content {
        padding: 12px;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-content h3,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content h3 {
        font-size: 14px;
    }

    .fxat-team-section .fxat-card-bottom {
        letter-spacing: .05em;
    }
}

/* TABLET */

@media (max-width: 1023px) {
    .fxat-team-section {
        padding-block: 65px;
    }

    .fxat-team-section .fxat-container {
        width: calc(100% - 44px);
    }

    .fxat-team-section .fxat-team-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
        margin-bottom: 28px;
    }

    .fxat-team-section .fxat-team-heading h2 {
        font-size: clamp(32px, 4.5vw, 43px);
    }

    .fxat-team-section .fxat-team-intro {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .fxat-team-section .fxat-team-mosaic {
        grid-template-rows: 225px 205px;
        gap: 12px;
    }

    .fxat-team-section .fxat-card-feature {
        grid-column: 1 / span 6;
        grid-row: 1 / span 2;
    }

    .fxat-team-section .fxat-card-leasing {
        grid-column: 7 / span 3;
        grid-row: 1;
    }

    .fxat-team-section .fxat-card-maintenance {
        grid-column: 10 / span 3;
        grid-row: 1;
    }

    .fxat-team-section .fxat-card-commercial {
        grid-column: 7 / span 6;
        grid-row: 2;
    }

    .fxat-team-section .fxat-card-content {
        padding: 15px;
    }

    .fxat-team-section .fxat-card-feature .fxat-card-content {
        padding: 20px;
    }

    .fxat-team-section .fxat-card-feature .fxat-card-content h3 {
        font-size: 26px;
    }

    .fxat-team-section .fxat-card-feature .fxat-card-content p {
        font-size: 11px;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-content p,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content p {
        display: none;
    }

    .fxat-team-section .fxat-team-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .fxat-team-section .fxat-capability-tags {
        justify-content: flex-start;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .fxat-team-section .fxat-card-feature .fxat-card-content p,
    .fxat-team-section .fxat-card-commercial .fxat-card-content p {
        display: none;
    }
}


/* MOBILE-L / MOBILE-M / MOBILE-S */

@media (max-width: 767px) {
    .fxat-team-section {
        padding-block: 54px;
    }

    .fxat-team-section .fxat-container {
        width: calc(100% - 36px);
    }

    .fxat-team-section .fxat-team-heading h2 {
        margin-top: 15px;
        font-size: clamp(30px, 6.8vw, 39px);
    }

    .fxat-team-section .fxat-team-intro {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .fxat-team-section .fxat-team-intro > p {
        font-size: 12px;
    }

    .fxat-team-section .fxat-team-index strong {
        font-size: 30px;
    }

    .fxat-team-section .fxat-team-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 300px 205px 230px;
        gap: 11px;
    }

    .fxat-team-section .fxat-card-feature {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .fxat-team-section .fxat-card-leasing {
        grid-column: 1;
        grid-row: 2;
    }

    .fxat-team-section .fxat-card-maintenance {
        grid-column: 2;
        grid-row: 2;
    }

    .fxat-team-section .fxat-card-commercial {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .fxat-team-section .fxat-card-feature .fxat-card-content {
        padding: 22px;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-content,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content {
        padding: 12px;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-content h3,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content h3 {
        font-size: 13px;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-content .fxat-card-kicker,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content .fxat-card-kicker {
        font-size: 7px;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-bottom,
    .fxat-team-section .fxat-card-maintenance .fxat-card-bottom {
        gap: 5px;
        font-size: 6px;
    }

    .fxat-team-section .fxat-card-commercial .fxat-card-content {
        padding: 18px;
    }

    .fxat-team-section .fxat-card-commercial .fxat-card-content h3 {
        font-size: 13px;
    }

    .fxat-team-section .fxat-card-commercial .fxat-card-content p {
        font-size: 10px;
    }

    .fxat-team-section .fxat-team-footer {
        padding: 15px;
    }
}

/* MOBILE-S / COMPACT MOBILE-M */

@media (max-width: 429px) {
    .fxat-team-section {
        padding-block: 45px;
    }

    .fxat-team-section .fxat-container {
        width: calc(100% - 28px);
    }

    .fxat-team-section .fxat-team-heading h2 {
        font-size: 30px;
    }

    .fxat-team-section .fxat-team-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    .fxat-team-section .fxat-team-index {
        display: none;
    }

    .fxat-team-section .fxat-team-mosaic {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 285px 220px 220px 240px;
        gap: 12px;
    }

    .fxat-team-section .fxat-card-feature,
    .fxat-team-section .fxat-card-leasing,
    .fxat-team-section .fxat-card-maintenance,
    .fxat-team-section .fxat-card-commercial {
        grid-column: 1;
    }

    .fxat-team-section .fxat-card-feature {
        grid-row: 1;
    }

    .fxat-team-section .fxat-card-leasing {
        grid-row: 2;
    }

    .fxat-team-section .fxat-card-maintenance {
        grid-row: 3;
    }

    .fxat-team-section .fxat-card-commercial {
        grid-row: 4;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-content p,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content p {
        display: block;
        font-size: 10px;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-content h3,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content h3 {
        font-size: 17px;
    }

    .fxat-team-section .fxat-card-commercial .fxat-card-content h3 {
        font-size: 17px;
    }

    .fxat-team-section .fxat-card-leasing .fxat-card-bottom,
    .fxat-team-section .fxat-card-maintenance .fxat-card-bottom {
        font-size: 8px;
    }

    .fxat-team-section .fxat-team-footer-copy {
        align-items: flex-start;
    }

    .fxat-team-section .fxat-team-footer-copy h3 {
        font-size: 12px;
    }

    .fxat-team-section .fxat-capability-tags {
        gap: 6px;
    }
}

@media (max-width: 359px) {
    .fxat-team-section .fxat-team-heading h2 {
        font-size: 27px;
    }

    .fxat-team-section .fxat-team-mosaic {
        grid-template-rows: 270px 220px 220px 230px;
    }

    .fxat-team-section .fxat-card-feature .fxat-card-content {
        padding: 17px;
    }

    .fxat-team-section .fxat-card-feature .fxat-card-content h3 {
        font-size: 23px;
    }

    .fxat-team-section .fxat-card-bottom {
        font-size: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fxat-team-section *,
    .fxat-team-section *::before,
    .fxat-team-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .fxat-team-section.fxt-motion-ready [data-fxat-reveal] {
        opacity: 1;
        transform: none;
    }
}

.fx-spot-panel .fx-spot-stage .fx-spot-ev-image {
    width: auto;
    max-width: 115%;
    height: 115%;
    object-fit: contain;
}

@media (max-width: 767px) {
    .fx-spot-panel .fx-spot-stage .fx-spot-ev-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        transform: scale(1.08);
        transform-origin: center bottom;
    }
}


/* =========================================================
   FLEETAXIS ABOUT — MISSION / VISION / GOALS
   Prefix: fxmv-
   Appendable section styles only.
========================================================= */

.fxmv-section {
    --fxmv-bg: var(--fx-champagne-light, #FAF5ED);
    --fxmv-surface: var(--fx-off-white, #F8F5F0);
    --fxmv-surface-alt: var(--fx-champagne, #F3E6D0);
    --fxmv-text: var(--fx-text, #202020);
    --fxmv-heading: var(--fx-black, #151515);
    --fxmv-muted: var(--fx-text-soft, #66615B);
    --fxmv-copper: var(--fx-copper, #B87333);
    --fxmv-copper-dark: var(--fx-copper-dark, #985A25);
    --fxmv-copper-light: var(--fx-copper-light, #D49A63);
    --fxmv-border: var(--fx-border, rgba(32, 32, 32, .12));

    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 82px 0;
    overflow: clip;
    background: var(--fxmv-bg);
    color: var(--fxmv-text);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    isolation: isolate;
    transition: background-color .25s ease, color .25s ease;
}

.fxmv-section,
.fxmv-section *,
.fxmv-section *::before,
.fxmv-section *::after {
    box-sizing: border-box;
}

.fxmv-section :where(h2, h3, p, figure, ul) {
    margin: 0;
}

.fxmv-section :where(h2, h3) {
    color: var(--fxmv-heading);
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.fxmv-section :where(button, input) {
    font: inherit;
}

.fxmv-section button {
    cursor: pointer;
}

.fxmv-section svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fxmv-section img {
    display: block;
    max-width: 100%;
}

.fxmv-section :where(button, input):focus-visible {
    outline: 2px solid var(--fxmv-copper);
    outline-offset: 3px;
}

.fxmv-section [hidden] {
    display: none !important;
}

.fxmv-section .fxmv-container {
    width: min(1220px, calc(100% - 64px));
    margin-inline: auto;
}

/* HEADING */

.fxmv-section .fxmv-heading {
    margin-bottom: 30px;
}

.fxmv-section .fxmv-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fxmv-copper-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.6;
}

.fxmv-section .fxmv-eyebrow-dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fxmv-copper);
    box-shadow: 0 0 0 4px rgba(184, 115, 51, .12);
}

.fxmv-section .fxmv-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(250px, .7fr);
    align-items: end;
    gap: 35px;
    margin-top: 16px;
}

.fxmv-section .fxmv-heading h2 {
    max-width: 730px;
    font-size: clamp(33px, 3.5vw, 45px);
    line-height: 1.14;
    text-wrap: balance;
}

.fxmv-section .fxmv-heading h2 span {
    color: var(--fxmv-copper);
}

.fxmv-section .fxmv-heading-row > p {
    max-width: 445px;
    color: var(--fxmv-muted);
    font-size: 13px;
    line-height: 1.85;
}

/* INTERACTIVE TABS */

.fxmv-section .fxmv-tab-area {
    margin-bottom: 22px;
}

.fxmv-section .fxmv-tabs {
    --fxmv-active-index: 0;

    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 5px;
    overflow: hidden;
    border: 1px solid var(--fxmv-border);
    border-radius: 11px;
    background: var(--fxmv-surface);
    isolation: isolate;
}

.fxmv-section .fxmv-tabs::before {
    position: absolute;
    z-index: -1;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / 3);
    border-radius: 7px;
    background: var(--fxmv-copper);
    content: "";
    transform: translateX(calc(var(--fxmv-active-index) * 100%));
    transition: transform .48s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 5px 16px rgba(184, 115, 51, .2);
}

.fxmv-section .fxmv-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 72px;
    padding: 12px 17px;
    border-radius: 7px;
    background: transparent;
    color: var(--fxmv-text);
    text-align: start;
    transition: color .25s ease;
}

.fxmv-section .fxmv-tab-icon {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--fxmv-border);
    border-radius: 9px;
    background: var(--fxmv-bg);
    color: var(--fxmv-copper-dark);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.fxmv-section .fxmv-tab-icon svg {
    width: 20px;
    height: 20px;
}

.fxmv-section .fxmv-tab-label {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fxmv-section .fxmv-tab-label strong {
    color: var(--fxmv-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.fxmv-section .fxmv-tab-label small {
    color: var(--fxmv-muted);
    font-size: 10px;
    line-height: 1.5;
}

.fxmv-section .fxmv-tab-arrow {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--fxmv-muted);
    transition: transform .25s ease, color .25s ease;
}

.fxmv-section .fxmv-tab:hover .fxmv-tab-arrow,
.fxmv-section .fxmv-tab.is-active .fxmv-tab-arrow {
    color: #FFFFFF;
    transform: translateX(3px);
}

.fxmv-section .fxmv-tab.is-active .fxmv-tab-label strong,
.fxmv-section .fxmv-tab.is-active .fxmv-tab-label small {
    color: #FFFFFF;
}

.fxmv-section .fxmv-tab.is-active .fxmv-tab-icon {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .13);
    color: #FFFFFF;
}

.fxmv-section .fxmv-tab.is-active .fxmv-tab-arrow {
    color: #FFFFFF;
}

.fxmv-section .fxmv-tab:focus-visible {
    outline-offset: -2px;
}

.fxmv-section .fxmv-tab-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 13px;
    color: var(--fxmv-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
    text-align: center;
}

.fxmv-section .fxmv-caption-line {
    display: inline-block;
    width: 33px;
    height: 1px;
    background: var(--fxmv-border);
}

/* IMAGE + COPY PANELS */

.fxmv-section .fxmv-panels {
    position: relative;
    display: grid;
    align-items: stretch;
    min-width: 0;
}

.fxmv-section .fxmv-panel {
    position: relative;
    display: grid;
    grid-area: 1 / 1;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 440px;
    overflow: hidden;
    border: 1px solid var(--fxmv-border);
    border-radius: 13px;
    background: var(--fxmv-surface);
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .8, .2, 1),
        visibility 0s;
}

.fxmv-section .fxmv-panel:not(.is-active) {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(3%);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1),
        visibility 0s linear .45s;
}

.fxmv-section .fxmv-panels[data-fxmv-direction="backward"]
    .fxmv-panel:not(.is-active) {
    transform: translateX(-3%);
}

.fxmv-section .fxmv-panel.fxmv-enter-forward {
    animation: fxmvPanelEnterForward .48s cubic-bezier(.2, .8, .2, 1) both;
}

.fxmv-section .fxmv-panel.fxmv-enter-backward {
    animation: fxmvPanelEnterBackward .48s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes fxmvPanelEnterForward {
    from { opacity: 0; transform: translateX(32px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fxmvPanelEnterBackward {
    from { opacity: 0; transform: translateX(-32px); }
    to { opacity: 1; transform: translateX(0); }
}

/* IMAGE — shares the exact top and bottom edges with the content panel */

.fxmv-section .fxmv-visual {
    position: relative;
    align-self: stretch;
    min-width: 0;
    min-height: 440px;
    overflow: hidden;
    background: #34291F;
    isolation: isolate;
}

.fxmv-section .fxmv-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.001);
    transition: transform .8s cubic-bezier(.2, .75, .2, 1), filter .45s ease;
    filter: saturate(.88) contrast(1.02);
}

.fxmv-section .fxmv-panel:hover .fxmv-visual > img {
    transform: scale(1.045);
    filter: saturate(1) contrast(1.03);
}

.fxmv-section .fxmv-visual-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(18, 18, 18, .13) 0%,
        rgba(18, 18, 18, .03) 32%,
        rgba(18, 18, 18, .36) 62%,
        rgba(18, 18, 18, .88) 100%
    );
    pointer-events: none;
}

.fxmv-section .fxmv-visual-index {
    position: absolute;
    z-index: 2;
    top: 17px;
    inset-inline-start: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 41px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 7px;
    background: rgba(32, 32, 32, .52);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    backdrop-filter: blur(6px);
}

.fxmv-section .fxmv-visual-caption {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 30px;
    color: #FFFFFF;
}

.fxmv-section .fxmv-visual-kicker {
    color: #E2B487;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.5;
}

.fxmv-section .fxmv-visual-caption strong {
    max-width: 500px;
    color: #FFFFFF;
    font-size: clamp(23px, 2.3vw, 31px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.fxmv-section .fxmv-visual-description {
    color: #F0E8DF;
    font-size: 12px;
    line-height: 1.7;
}

.fxmv-section .fxmv-visual-frame {
    position: absolute;
    z-index: 2;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, .24);
    pointer-events: none;
    transition: inset .35s ease, border-color .35s ease;
}

.fxmv-section .fxmv-panel:hover .fxmv-visual-frame {
    inset: 18px;
    border-color: rgba(226, 180, 135, .65);
}

/* COPY AREA — equal edge alignment with image */

.fxmv-section .fxmv-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: 440px;
    padding: clamp(24px, 3.3vw, 39px);
    background: var(--fxmv-surface);
    color: var(--fxmv-text);
}

.fxmv-section .fxmv-copy-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--fxmv-border);
}

.fxmv-section .fxmv-section-number {
    color: var(--fxmv-copper-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
}

.fxmv-section .fxmv-copy-symbol {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(184, 115, 51, .3);
    border-radius: 9px;
    background: var(--fxmv-surface-alt);
    color: var(--fxmv-copper-dark);
}

.fxmv-section .fxmv-copy-symbol svg {
    width: 21px;
    height: 21px;
}

.fxmv-section .fxmv-copy h3 {
    margin-top: 21px;
    color: var(--fxmv-heading);
    font-size: clamp(27px, 2.8vw, 36px);
    line-height: 1.14;
    text-wrap: balance;
}

.fxmv-section .fxmv-copy h3 span {
    color: var(--fxmv-copper);
}

.fxmv-section .fxmv-lead {
    margin-top: 15px;
    color: var(--fxmv-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
}

.fxmv-section .fxmv-description {
    margin-top: 11px;
    color: var(--fxmv-muted);
    font-size: 12px;
    line-height: 1.8;
}

.fxmv-section .fxmv-principles-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    color: var(--fxmv-copper-dark);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.6;
}

.fxmv-section .fxmv-principles-rule {
    flex: 1;
    height: 1px;
    min-width: 12px;
    background: var(--fxmv-border);
}

.fxmv-section .fxmv-principles {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

.fxmv-section .fxmv-principles li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
}

.fxmv-section .fxmv-check {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 1px solid rgba(184, 115, 51, .3);
    border-radius: 50%;
    color: var(--fxmv-copper-dark);
}

.fxmv-section .fxmv-check svg {
    width: 13px;
    height: 13px;
}

.fxmv-section .fxmv-principles li > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.fxmv-section .fxmv-principles strong {
    color: var(--fxmv-heading);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.fxmv-section .fxmv-principles small {
    color: var(--fxmv-muted);
    font-size: 11px;
    line-height: 1.65;
}

.fxmv-section .fxmv-copy-footer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--fxmv-copper-dark);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.6;
}

.fxmv-section .fxmv-footer-mark {
    display: inline-block;
    flex: 0 0 26px;
    width: 26px;
    height: 2px;
    background: var(--fxmv-copper);
}

/* BOTTOM STATEMENT */

.fxmv-section .fxmv-bottom-note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 17px 20px;
    border: 1px solid var(--fxmv-border);
    border-radius: 9px;
    background: var(--fxmv-surface);
}

.fxmv-section .fxmv-bottom-note-icon {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(184, 115, 51, .27);
    border-radius: 8px;
    background: var(--fxmv-surface-alt);
    color: var(--fxmv-copper-dark);
}

.fxmv-section .fxmv-bottom-note-icon svg {
    width: 19px;
    height: 19px;
}

.fxmv-section .fxmv-bottom-note > div {
    flex: 1;
    min-width: 0;
}

.fxmv-section .fxmv-bottom-note strong {
    display: block;
    color: var(--fxmv-heading);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.fxmv-section .fxmv-bottom-note p {
    margin-top: 3px;
    color: var(--fxmv-muted);
    font-size: 10px;
    line-height: 1.6;
}

.fxmv-section .fxmv-bottom-index {
    flex: 0 0 auto;
    color: var(--fxmv-copper-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

/* REVEAL ANIMATIONS — default content stays visible without JS */

.fxmv-section.fxmv-js [data-fxmv-reveal] {
    opacity: 0;
    transform: translateY(17px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}

.fxmv-section.fxmv-js [data-fxmv-reveal].fxmv-visible {
    opacity: 1;
    transform: translateY(0);
}

.fxmv-section.fxmv-js .fxmv-tab-area {
    transition-delay: .1s;
}

.fxmv-section.fxmv-js .fxmv-bottom-note {
    transition-delay: .15s;
}

/* =========================================================
   LAPTOP / LAPTOP-L
========================================================= */

@media (min-width: 1440px) {
    .fxmv-section .fxmv-container {
        width: min(1280px, calc(100% - 80px));
    }

    .fxmv-section .fxmv-panel,
    .fxmv-section .fxmv-visual,
    .fxmv-section .fxmv-copy {
        min-height: 470px;
    }

    .fxmv-section .fxmv-copy {
        padding: 42px;
    }
}

@media (max-width: 1199px) {
    .fxmv-section .fxmv-container {
        width: calc(100% - 48px);
    }

    .fxmv-section .fxmv-heading-row {
        gap: 25px;
    }

    .fxmv-section .fxmv-panel,
    .fxmv-section .fxmv-visual,
    .fxmv-section .fxmv-copy {
        min-height: 430px;
    }

    .fxmv-section .fxmv-copy {
        padding: 25px;
    }

    .fxmv-section .fxmv-copy h3 {
        font-size: 29px;
    }

    .fxmv-section .fxmv-lead {
        font-size: 13px;
    }

    .fxmv-section .fxmv-principles {
        gap: 11px;
    }

    .fxmv-section .fxmv-principles small {
        font-size: 10px;
    }
}

/* =========================================================
   TABLET — ALL THREE PANELS VISIBLE ONE AFTER ANOTHER
========================================================= */

@media (max-width: 1023px) {
    .fxmv-section {
        padding-block: 63px;
    }

    .fxmv-section .fxmv-container {
        width: calc(100% - 44px);
    }

    .fxmv-section .fxmv-heading-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .fxmv-section .fxmv-heading h2 {
        font-size: clamp(31px, 4.5vw, 42px);
    }

    .fxmv-section .fxmv-tab-area,
    .fxmv-section .fxmv-tabs {
        display: none !important;
    }

    .fxmv-section .fxmv-panels {
        display: flex;
        flex-direction: column;
        gap: 19px;
    }

    .fxmv-section .fxmv-panel,
    .fxmv-section .fxmv-panel:not(.is-active) {
        position: relative;
        inset: auto;
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        grid-area: auto;
        width: 100%;
        min-height: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        animation: none;
        transition: border-color .25s ease;
    }

    .fxmv-section .fxmv-visual,
    .fxmv-section .fxmv-copy {
        min-height: 390px;
    }

    .fxmv-section .fxmv-visual-caption {
        padding: 22px;
    }

    .fxmv-section .fxmv-visual-caption strong {
        font-size: 25px;
    }

    .fxmv-section .fxmv-copy {
        padding: 25px;
    }

    .fxmv-section .fxmv-copy h3 {
        font-size: 28px;
    }

    .fxmv-section .fxmv-principles-heading {
        margin-top: 18px;
    }

    .fxmv-section .fxmv-principles {
        gap: 12px;
    }

    .fxmv-section .fxmv-copy-footer {
        padding-top: 19px;
    }

    .fxmv-section .fxmv-bottom-note {
        margin-top: 19px;
    }
}

/* =========================================================
   MOBILE-L / MOBILE-M / MOBILE-S
   Image first, followed by its complete text content.
========================================================= */

@media (max-width: 767px) {
    .fxmv-section {
        padding-block: 52px;
    }

    .fxmv-section .fxmv-container {
        width: calc(100% - 36px);
    }

    .fxmv-section .fxmv-heading {
        margin-bottom: 25px;
    }

    .fxmv-section .fxmv-heading h2 {
        font-size: clamp(30px, 6.5vw, 38px);
    }

    .fxmv-section .fxmv-heading-row > p {
        font-size: 12px;
        line-height: 1.8;
    }

    .fxmv-section .fxmv-panels {
        gap: 17px;
    }

    .fxmv-section .fxmv-panel,
    .fxmv-section .fxmv-panel:not(.is-active) {
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
        border-radius: 11px;
    }

    .fxmv-section .fxmv-visual {
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .fxmv-section .fxmv-visual > img {
        position: absolute;
        height: 100%;
    }

    .fxmv-section .fxmv-visual-caption {
        padding: 20px;
    }

    .fxmv-section .fxmv-visual-caption strong {
        font-size: clamp(22px, 5.1vw, 28px);
    }

    .fxmv-section .fxmv-visual-description {
        font-size: 11px;
    }

    .fxmv-section .fxmv-copy {
        min-height: 0;
        padding: 22px;
    }

    .fxmv-section .fxmv-copy h3 {
        margin-top: 17px;
        font-size: clamp(25px, 5.8vw, 31px);
    }

    .fxmv-section .fxmv-lead {
        margin-top: 13px;
        font-size: 13px;
        line-height: 1.8;
    }

    .fxmv-section .fxmv-description {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.8;
    }

    .fxmv-section .fxmv-principles-heading {
        margin-top: 20px;
        font-size: 8px;
    }

    .fxmv-section .fxmv-principles {
        gap: 13px;
        margin-top: 14px;
    }

    .fxmv-section .fxmv-principles strong {
        font-size: 12px;
    }

    .fxmv-section .fxmv-principles small {
        font-size: 11px;
    }

    .fxmv-section .fxmv-copy-footer {
        margin-top: 21px;
        padding-top: 16px;
        font-size: 8px;
    }

    .fxmv-section .fxmv-bottom-note {
        align-items: flex-start;
        padding: 15px;
    }

    .fxmv-section .fxmv-bottom-index {
        padding-top: 5px;
        font-size: 9px;
    }
}

/* MOBILE-S / SMALL MOBILE-M */

@media (max-width: 429px) {
    .fxmv-section {
        padding-block: 43px;
    }

    .fxmv-section .fxmv-container {
        width: calc(100% - 28px);
    }

    .fxmv-section .fxmv-heading h2 {
        font-size: 30px;
    }

    .fxmv-section .fxmv-eyebrow {
        gap: 8px;
        font-size: 9px;
        letter-spacing: .1em;
    }

    .fxmv-section .fxmv-visual {
        aspect-ratio: 4 / 3;
    }

    .fxmv-section .fxmv-visual-caption {
        gap: 7px;
        padding: 16px;
    }

    .fxmv-section .fxmv-visual-index {
        top: 12px;
        inset-inline-start: 12px;
        width: 35px;
        height: 34px;
        font-size: 10px;
    }

    .fxmv-section .fxmv-visual-caption strong {
        font-size: 23px;
    }

    .fxmv-section .fxmv-visual-kicker {
        font-size: 8px;
    }

    .fxmv-section .fxmv-visual-description {
        font-size: 10px;
    }

    .fxmv-section .fxmv-copy {
        padding: 17px;
    }

    .fxmv-section .fxmv-copy h3 {
        font-size: 25px;
    }

    .fxmv-section .fxmv-copy-symbol {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
    }

    .fxmv-section .fxmv-copy-symbol svg {
        width: 19px;
        height: 19px;
    }

    .fxmv-section .fxmv-section-number {
        font-size: 9px;
    }

    .fxmv-section .fxmv-lead {
        font-size: 12px;
    }

    .fxmv-section .fxmv-description {
        font-size: 11px;
    }

    .fxmv-section .fxmv-principles-heading {
        font-size: 7px;
        letter-spacing: .06em;
    }

    .fxmv-section .fxmv-principles li {
        gap: 9px;
    }

    .fxmv-section .fxmv-principles strong {
        font-size: 11px;
    }

    .fxmv-section .fxmv-principles small {
        font-size: 10px;
    }

    .fxmv-section .fxmv-bottom-note {
        gap: 10px;
        padding: 12px;
    }

    .fxmv-section .fxmv-bottom-note-icon {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
    }

    .fxmv-section .fxmv-bottom-note strong {
        font-size: 11px;
    }

    .fxmv-section .fxmv-bottom-note p {
        font-size: 9px;
    }
}

@media (max-width: 359px) {
    .fxmv-section .fxmv-container {
        width: calc(100% - 22px);
    }

    .fxmv-section .fxmv-heading h2 {
        font-size: 27px;
    }

    .fxmv-section .fxmv-copy {
        padding: 14px;
    }

    .fxmv-section .fxmv-copy h3 {
        font-size: 23px;
    }

    .fxmv-section .fxmv-visual-caption strong {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fxmv-section *,
    .fxmv-section *::before,
    .fxmv-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .fxmv-section.fxmv-js [data-fxmv-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   FLEETAXIS ABOUT — PROGRESSIVE HISTORY WAVE
   Section scoped only: .fxht-history-section
========================================================= */

.fxht-history-section {
    --fxht-bg: var(--fx-champagne-light, #FAF5ED);
    --fxht-surface: var(--fx-off-white, #F8F5F0);
    --fxht-heading: var(--fx-black, #151515);
    --fxht-text: var(--fx-text, #202020);
    --fxht-muted: var(--fx-text-soft, #66615B);
    --fxht-copper: var(--fx-copper, #B87333);
    --fxht-copper-dark: var(--fx-copper-dark, #985A25);
    --fxht-copper-light: var(--fx-copper-light, #D49A63);
    --fxht-border: var(--fx-border, rgba(32, 32, 32, .12));

    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 82px 0 74px;
    overflow: clip;
    isolation: isolate;
    background: var(--fxht-bg);
    color: var(--fxht-text);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    transition: background-color .25s ease, color .25s ease;
}

.fxht-history-section,
.fxht-history-section *,
.fxht-history-section *::before,
.fxht-history-section *::after {
    box-sizing: border-box;
}

.fxht-history-section :where(h2, h3, p) {
    margin: 0;
}

.fxht-history-section :where(h2, h3) {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.fxht-history-section :where(button) {
    font: inherit;
}

.fxht-history-section button {
    cursor: pointer;
}

.fxht-history-section svg {
    display: block;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fxht-history-section button:focus-visible {
    outline: 2px solid var(--fxht-copper);
    outline-offset: 4px;
}

.fxht-history-section .fxht-container {
    width: min(1240px, calc(100% - 64px));
    margin-inline: auto;
}

/* ---------------- SECTION HEADING ---------------- */

.fxht-history-section .fxht-heading {
    margin-bottom: 26px;
}

.fxht-history-section .fxht-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fxht-copper-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.6;
}

.fxht-history-section .fxht-eyebrow-dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fxht-copper);
    box-shadow: 0 0 0 4px rgba(184, 115, 51, .12);
}

.fxht-history-section .fxht-heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, .72fr);
    align-items: end;
    gap: 38px;
    margin-top: 16px;
}

.fxht-history-section .fxht-heading h2 {
    max-width: 750px;
    color: var(--fxht-heading);
    font-size: clamp(32px, 3.5vw, 45px);
    line-height: 1.14;
    text-wrap: balance;
}

.fxht-history-section .fxht-heading h2 span {
    color: var(--fxht-copper);
}

.fxht-history-section .fxht-heading-row > p {
    max-width: 450px;
    color: var(--fxht-muted);
    font-size: 13px;
    line-height: 1.85;
}

/* ---------------- DESKTOP WAVE STAGE ---------------- */

.fxht-history-section .fxht-timeline-runway {
    position: relative;
    --fxht-timeline-height: 600px;
    height: calc(100vh + var(--fxht-timeline-height, 600px));
}

.fxht-history-section .fxht-timeline {
    position: relative;
    width: 100%;
    height: var(--fxht-timeline-height);
    min-height: var(--fxht-timeline-height);
    overflow: visible;
    isolation: isolate;
}

@media (min-width: 768px) {
    .fxht-history-section .fxht-timeline {
        position: sticky;
        top: calc(var(--fx-navbar-height, 78px) + 16px);
    }
}

@media (min-width: 768px) and (max-height: 760px) {
    .fxht-history-section .fxht-timeline-runway {
        --fxht-timeline-height: max(420px, calc(100vh - 136px));
    }

    .fxht-history-section .fxht-timeline {
        height: var(--fxht-timeline-height);
        min-height: var(--fxht-timeline-height);
    }
}

.fxht-history-section .fxht-wave-svg {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.fxht-history-section .fxht-wave-base,
.fxht-history-section .fxht-wave-progress {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.fxht-history-section .fxht-wave-base {
    stroke: var(--fxht-border);
    stroke-width: 3;
}

.fxht-history-section .fxht-wave-progress {
    stroke: url(#fxht-wave-gradient);
    stroke-width: 3;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: url(#fxht-wave-glow);
    transition: stroke-dashoffset .12s linear;
}

/* ---------------- MILESTONES: NO CARDS ---------------- */

.fxht-history-section .fxht-milestone {
    position: absolute;
    z-index: 2;
    top: 0;
    left: var(--fxht-x);
    width: 0;
    height: 100%;
}

.fxht-history-section .fxht-node {
    position: absolute;
    top: var(--fxht-node-y);
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    padding: 0;
    border: 1px solid rgba(184, 115, 51, .7);
    border-radius: 50%;
    background: var(--fxht-bg);
    color: var(--fxht-copper-dark);
    transform: translate(-50%, -50%);
    isolation: isolate;
    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        box-shadow .3s ease,
        scale .3s ease;
}

.fxht-history-section .fxht-node-number {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.fxht-history-section .fxht-node-halo {
    position: absolute;
    z-index: -1;
    inset: -6px;
    border: 1px solid var(--fxht-copper);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.72);
    transition: opacity .3s ease, transform .3s ease;
}

.fxht-history-section .fxht-node::before {
    position: absolute;
    inset: -11px;
    border: 1px solid rgba(184, 115, 51, .23);
    border-radius: 50%;
    content: "";
    opacity: 0;
    transform: scale(.65);
}

.fxht-history-section .fxht-node:hover,
.fxht-history-section .fxht-node.is-active {
    border-color: var(--fxht-copper);
    background: var(--fxht-copper);
    color: #FFFFFF;
    box-shadow: 0 0 0 5px rgba(184, 115, 51, .09);
}

.fxht-history-section .fxht-node.is-active .fxht-node-halo {
    opacity: 1;
    transform: scale(1);
}

.fxht-history-section .fxht-node.is-active::before {
    animation: fxht-node-ripple 1.8s ease-out infinite;
}

/* Node position is defined by the timeline point.
   Text is kept separate from the decorative wave. */

.fxht-history-section .fxht-milestone-content {
    position: absolute;
    top: var(--fxht-copy-top);
    left: 0;
    width: clamp(175px, 20.5vw, 235px);
    min-width: 0;
    padding: 0;
    color: var(--fxht-text);
    transform: translateX(-50%);
    opacity: 1;
    filter: none;
}

.fxht-history-section .fxht-chapter-label {
    display: block;
    margin-bottom: 9px;
    color: var(--fxht-copper-dark);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.6;
}

.fxht-history-section .fxht-milestone-content h3 {
    max-width: 100%;
    color: var(--fxht-heading);
    font-size: clamp(17px, 1.65vw, 21px);
    line-height: 1.25;
    text-wrap: balance;
}

.fxht-history-section .fxht-milestone-content p {
    margin-top: 10px;
    color: var(--fxht-muted);
    font-size: 11px;
    line-height: 1.8;
    overflow-wrap: break-word;
}

.fxht-history-section .fxht-content-accent {
    display: block;
    width: 36px;
    height: 2px;
    margin-top: 13px;
    background: var(--fxht-copper);
    transform: scaleX(.55);
    transform-origin: left center;
    transition: width .3s ease, transform .3s ease;
}

.fxht-history-section .fxht-milestone:hover .fxht-content-accent,
.fxht-history-section .fxht-milestone:focus-within .fxht-content-accent,
.fxht-history-section .fxht-milestone.is-active .fxht-content-accent {
    width: 58px;
    transform: scaleX(1);
}

/* ---------------- MOBILE RAIL (HIDDEN ON DESKTOP) ---------------- */

.fxht-history-section .fxht-mobile-rail {
    display: none;
}

/* ---------------- TIMELINE PROGRESS FOOTER ---------------- */

.fxht-history-section .fxht-timeline-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 1.5fr) auto;
    align-items: center;
    gap: 24px;
    width: 100%;
    min-height: 66px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--fxht-border);
}

.fxht-history-section .fxht-current-chapter {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.fxht-history-section .fxht-current-dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fxht-copper);
    box-shadow: 0 0 0 4px rgba(184, 115, 51, .12);
}

.fxht-history-section .fxht-current-label {
    color: var(--fxht-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

.fxht-history-section .fxht-progress-track {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 3px;
    align-self: center;
    overflow: hidden;
    border-radius: 99px;
    background: var(--fxht-border);
}

.fxht-history-section .fxht-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--fxht-copper-dark), var(--fxht-copper-light));
    transform-origin: left center;
    transition: width .15s linear;
}

.fxht-history-section .fxht-progress-count {
    color: var(--fxht-copper-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    white-space: nowrap;
}

/* ---------------- REVEAL ANIMATIONS ---------------- */

.fxht-history-section.fxht-js [data-fxht-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}

.fxht-history-section.fxht-js [data-fxht-reveal].fxht-visible {
    opacity: 1;
    transform: translateY(0);
}

.fxht-history-section.fxht-js .fxht-milestone-content[data-fxht-reveal-content] {
    opacity: 0;
    filter: blur(2px);
    transition: opacity .55s ease, filter .55s ease;
}

.fxht-history-section.fxht-js .fxht-milestone.fxht-item-visible
    .fxht-milestone-content[data-fxht-reveal-content] {
    opacity: 1;
    filter: blur(0);
}

@keyframes fxht-node-ripple {
    0% {
        opacity: .65;
        transform: scale(.65);
    }
    100% {
        opacity: 0;
        transform: scale(1.7);
    }
}

/* =========================================================
   LAPTOP-L / DESKTOP
========================================================= */

@media (min-width: 1440px) {
    .fxht-history-section .fxht-timeline-runway {
        --fxht-timeline-height: 620px;
    }

    .fxht-history-section .fxht-container {
        width: min(1280px, calc(100% - 80px));
    }

    .fxht-history-section .fxht-timeline {
        height: var(--fxht-timeline-height);
        min-height: var(--fxht-timeline-height);
    }

    .fxht-history-section .fxht-milestone-content {
        width: 235px;
    }

    .fxht-history-section .fxht-milestone-content h3 {
        font-size: 21px;
    }

    .fxht-history-section .fxht-milestone-content p {
        font-size: 12px;
    }
}

/* =========================================================
   LAPTOP / SMALL DESKTOP
========================================================= */

@media (max-width: 1199px) {
    .fxht-history-section .fxht-timeline-runway {
        --fxht-timeline-height: 620px;
    }

    .fxht-history-section .fxht-container {
        width: calc(100% - 48px);
    }

    .fxht-history-section .fxht-heading-row {
        gap: 25px;
    }

    .fxht-history-section .fxht-timeline {
        height: var(--fxht-timeline-height);
        min-height: var(--fxht-timeline-height);
    }

    .fxht-history-section .fxht-milestone-content {
        width: clamp(170px, 20vw, 210px);
    }

    .fxht-history-section .fxht-milestone-content h3 {
        font-size: 18px;
    }

    .fxht-history-section .fxht-milestone-content p {
        font-size: 10.5px;
        line-height: 1.75;
    }
}

/* =========================================================
   TABLET
   Retain the horizontal wave, giving milestone text more height.
========================================================= */

@media (max-width: 1023px) and (min-width: 768px) {
    .fxht-history-section .fxht-timeline-runway {
        --fxht-timeline-height: 650px;
    }

    .fxht-history-section {
        padding-block: 64px;
    }

    .fxht-history-section .fxht-container {
        width: calc(100% - 44px);
    }

    .fxht-history-section .fxht-heading-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .fxht-history-section .fxht-heading h2 {
        font-size: clamp(31px, 4.4vw, 40px);
    }

    .fxht-history-section .fxht-heading-row > p {
        font-size: 12px;
    }

    .fxht-history-section .fxht-timeline {
        height: var(--fxht-timeline-height);
        min-height: var(--fxht-timeline-height);
    }

    .fxht-history-section .fxht-milestone-content {
        width: clamp(150px, 18.5vw, 190px);
    }

    .fxht-history-section .fxht-milestone-content h3 {
        font-size: 17px;
    }

    .fxht-history-section .fxht-milestone-content p {
        font-size: 10px;
        line-height: 1.7;
    }

    .fxht-history-section .fxht-chapter-label {
        font-size: 8px;
        letter-spacing: .07em;
    }
}

/* =========================================================
   MOBILE-L / MOBILE-M / MOBILE-S
   Wave becomes a straight vertical line.
========================================================= */

@media (max-width: 767px) {
    .fxht-history-section {
        padding-block: 53px;
    }

    .fxht-history-section .fxht-container {
        width: calc(100% - 36px);
    }

    .fxht-history-section .fxht-heading {
        margin-bottom: 25px;
    }

    .fxht-history-section .fxht-heading-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .fxht-history-section .fxht-heading h2 {
        font-size: clamp(30px, 6.5vw, 38px);
    }

    .fxht-history-section .fxht-heading-row > p {
        font-size: 12px;
        line-height: 1.8;
    }

    .fxht-history-section .fxht-timeline {
        position: relative;
        top: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        height: auto;
        min-height: 0;
        padding: 4px 0 0;
        overflow: visible;
    }

    .fxht-history-section .fxht-timeline-runway {
        height: auto;
    }

    .fxht-history-section .fxht-wave-svg {
        display: none;
    }

    .fxht-history-section .fxht-mobile-rail {
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 20px;
        left: 15px;
        display: block;
        width: 2px;
        overflow: hidden;
        background: var(--fxht-border);
        pointer-events: none;
    }

    .fxht-history-section .fxht-mobile-rail > span {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 0;
        background: linear-gradient(180deg, var(--fxht-copper-light), var(--fxht-copper-dark));
        box-shadow: 0 0 8px rgba(184, 115, 51, .18);
        transition: height .12s linear;
    }

    .fxht-history-section .fxht-milestone,
    .fxht-history-section .fxht-milestone-top,
    .fxht-history-section .fxht-milestone-bottom {
        position: relative;
        top: auto;
        left: auto;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: start;
        gap: 14px;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0 0 32px;
    }

    .fxht-history-section .fxht-milestone:last-child {
        padding-bottom: 5px;
    }

    .fxht-history-section .fxht-node {
        position: relative;
        top: auto;
        left: auto;
        z-index: 2;
        grid-column: 1;
        grid-row: 1;
        width: 32px;
        height: 32px;
        margin: 0;
        transform: none;
    }

    .fxht-history-section .fxht-node-number {
        font-size: 9px;
    }

    .fxht-history-section .fxht-node-halo {
        inset: -4px;
    }

    .fxht-history-section .fxht-node::before {
        inset: -7px;
    }

    .fxht-history-section .fxht-milestone-content {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-width: 0;
        padding: 0;
        transform: none;
    }

    .fxht-history-section .fxht-chapter-label {
        margin-bottom: 6px;
        font-size: 9px;
    }

    .fxht-history-section .fxht-milestone-content h3 {
        font-size: clamp(20px, 4.8vw, 25px);
        line-height: 1.25;
    }

    .fxht-history-section .fxht-milestone-content p {
        margin-top: 9px;
        font-size: 12px;
        line-height: 1.8;
    }

    .fxht-history-section .fxht-content-accent {
        width: 34px;
        margin-top: 11px;
        transform: none;
    }

    .fxht-history-section .fxht-timeline-footer {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        margin-top: 21px;
        padding-top: 15px;
    }

    .fxht-history-section .fxht-current-chapter {
        grid-column: 1 / -1;
    }

    .fxht-history-section .fxht-current-label {
        font-size: 11px;
    }
}

/* =========================================================
   MOBILE-S / COMPACT MOBILE-M
========================================================= */

@media (max-width: 429px) {
    .fxht-history-section {
        padding-block: 44px;
    }

    .fxht-history-section .fxht-container {
        width: calc(100% - 28px);
    }

    .fxht-history-section .fxht-eyebrow {
        gap: 8px;
        font-size: 9px;
        letter-spacing: .1em;
    }

    .fxht-history-section .fxht-heading h2 {
        font-size: 30px;
    }

    .fxht-history-section .fxht-heading-row > p {
        font-size: 11px;
    }

    .fxht-history-section .fxht-mobile-rail {
        left: 14px;
    }

    .fxht-history-section .fxht-milestone,
    .fxht-history-section .fxht-milestone-top,
    .fxht-history-section .fxht-milestone-bottom {
        grid-template-columns: 29px minmax(0, 1fr);
        gap: 12px;
        padding-bottom: 29px;
    }

    .fxht-history-section .fxht-node {
        width: 29px;
        height: 29px;
    }

    .fxht-history-section .fxht-milestone-content h3 {
        font-size: 21px;
    }

    .fxht-history-section .fxht-milestone-content p {
        font-size: 11px;
    }

    .fxht-history-section .fxht-timeline-footer {
        margin-top: 16px;
    }
}

@media (max-width: 359px) {
    .fxht-history-section .fxht-container {
        width: calc(100% - 22px);
    }

    .fxht-history-section .fxht-heading h2 {
        font-size: 27px;
    }

    .fxht-history-section .fxht-milestone-content h3 {
        font-size: 19px;
    }

    .fxht-history-section .fxht-milestone-content p {
        font-size: 10.5px;
    }

    .fxht-history-section .fxht-chapter-label {
        font-size: 8px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .fxht-history-section *,
    .fxht-history-section *::before,
    .fxht-history-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .fxht-history-section.fxht-js [data-fxht-reveal],
    .fxht-history-section.fxht-js .fxht-milestone-content {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

@media (min-width: 768px) and (max-height: 760px) {
    .fxht-history-section .fxht-timeline-runway {
        --fxht-timeline-height: max(420px, calc(100vh - 136px));
    }

    .fxht-history-section .fxht-timeline {
        height: var(--fxht-timeline-height);
        min-height: var(--fxht-timeline-height);
    }
}


/* =========================================================
   FLEETAXIS — ABOUT PAGE TESTIMONIALS
   All styles are scoped to .fxt-testimonials
========================================================= */

.fxt-testimonials {
    --fxt-bg: var(--fx-champagne-light);
    --fxt-card-bg: var(--fx-white);
    --fxt-heading: var(--fx-black);
    --fxt-copy: var(--fx-text-soft);
    --fxt-accent: var(--fx-copper);
    --fxt-border: var(--fx-border);

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

    padding: 100px 0 92px;

    background: var(--fxt-bg);
    color: var(--fxt-heading);

    font-family: "Inter", sans-serif;
}


/* ---------- SUBTLE HERO-STYLE BACKGROUND ---------- */

.fxt-testimonials::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            var(--fxt-border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--fxt-border) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

    opacity: 0.20;

    -webkit-mask-image: radial-gradient(
        ellipse at 50% 35%,
        #000 0,
        transparent 75%
    );

    mask-image: radial-gradient(
        ellipse at 50% 35%,
        #000 0,
        transparent 75%
    );
}


/* ---------- SECTION CONTAINER ---------- */

.fxt-testimonials .fxt-testimonial-container {
    position: relative;

    width: min(1440px, calc(100% - 140px));
    margin-inline: auto;
}


/* ---------- HEADING ---------- */

.fxt-testimonials .fxt-testimonial-heading {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;

    text-align: center;
}

.fxt-testimonials .fxt-testimonial-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0 0 22px;
    padding: 7px 16px;

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

    background: var(--fxt-card-bg);
    color: var(--fx-copper-dark);

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.fxt-testimonials .fxt-eyebrow-dot {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: var(--fxt-accent);

    box-shadow: 0 0 0 4px rgba(184, 115, 51, 0.12);
}

.fxt-testimonials .fxt-testimonial-title {
    margin: 0 0 20px;

    font-family: "Inter", sans-serif;
    font-size: clamp(34px, 5.2vw, 68px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;

    color: var(--fxt-heading);

    text-wrap: balance;
}

.fxt-testimonials .fxt-testimonial-title span {
    color: var(--fxt-accent);
}

.fxt-testimonials .fxt-testimonial-subtitle {
    max-width: 700px;
    margin: 0 auto;

    color: var(--fxt-copy);

    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;

    text-wrap: pretty;
}


/* ---------- MARQUEE VIEWPORT ---------- */

.fxt-testimonials .fxt-marquee-window {
    width: 100%;
    margin-top: 48px;

    overflow: hidden;

    padding-block: 12px 22px;
}

.fxt-testimonials .fxt-marquee-track {
    display: flex;
    align-items: stretch;

    width: max-content;
    max-width: none;

    transform: translateZ(0);
    will-change: transform;
}

.fxt-testimonials.is-ready .fxt-marquee-track {
    animation: fxtMarqueeLeft 36s linear infinite;
    animation-play-state: running;
}


/* ---------- THREE-CARD GROUP ---------- */

.fxt-testimonials .fxt-marquee-group {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;

    gap: 22px;

    /* Keeps a consistent gap where the duplicated group joins. */
    padding-inline-end: 22px;
}


/* ---------- TESTIMONIAL CARD ---------- */

.fxt-testimonials .fxt-testimonial-card {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;

    width: clamp(
        260px,
        calc((100vw - 206px) / 3),
        458px
    );

    min-width: 0;
    min-height: 310px;

    padding: clamp(22px, 2.2vw, 32px);

    border: 1px solid var(--fxt-border);
    border-radius: 16px;

    background: var(--fxt-card-bg);

    box-shadow:
        0 12px 34px rgba(32, 32, 32, 0.045);

    color: var(--fxt-heading);

    text-align: start;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.fxt-testimonials .fxt-testimonial-card:hover {
    border-color: rgba(184, 115, 51, 0.5);

    box-shadow:
        0 20px 48px rgba(32, 32, 32, 0.09);

    transform: translateY(-3px);
}


/* ---------- CARD TOP ---------- */

.fxt-testimonials .fxt-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    min-height: 32px;
}

.fxt-testimonials .fxt-card-type {
    display: inline-block;

    color: var(--fx-copper-dark);

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;

    overflow-wrap: anywhere;
}

.fxt-testimonials .fxt-quote-symbol {
    flex: 0 0 auto;

    color: var(--fxt-accent);

    font-family: Georgia, serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 0.85;
}


/* ---------- QUOTE TEXT ---------- */

.fxt-testimonials .fxt-card-quote {
    margin: 18px 0 28px;
    padding: 0;

    color: var(--fxt-copy);

    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;

    overflow-wrap: anywhere;
    white-space: normal;
}


/* ---------- PROFILE FOOTER ---------- */

.fxt-testimonials .fxt-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: auto;
    padding-top: 18px;

    border-top: 1px solid var(--fxt-border);
}

.fxt-testimonials .fxt-card-profile {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
}

.fxt-testimonials .fxt-profile-image {
    display: block;
    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    border: 2px solid rgba(184, 115, 51, 0.50);
    border-radius: 50%;

    object-fit: cover;
    background: var(--fx-champagne);

    box-shadow: 0 3px 12px rgba(32, 32, 32, 0.12);
}

/* Position the existing folder images to give a better portrait crop. */

.fxt-testimonials .fxt-profile-service {
    object-position: 70% 23%;
}

.fxt-testimonials .fxt-profile-leasing {
    object-position: 72% 28%;
}

.fxt-testimonials .fxt-profile-maintenance {
    object-position: 87% 34%;
}

.fxt-testimonials .fxt-profile-copy {
    min-width: 0;
}

.fxt-testimonials .fxt-profile-name {
    margin: 0 0 4px;

    color: var(--fxt-heading);

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;

    overflow-wrap: anywhere;
}

.fxt-testimonials .fxt-profile-role {
    margin: 0;

    color: var(--fxt-copy);

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;

    overflow-wrap: anywhere;
}

.fxt-testimonials .fxt-card-number {
    flex: 0 0 auto;

    color: var(--fxt-accent);

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}


/* ---------- BOTTOM ACCENT ---------- */

.fxt-testimonials .fxt-testimonial-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-top: 32px;
}

.fxt-testimonials .fxt-bottom-line {
    display: block;

    width: clamp(28px, 5vw, 70px);
    height: 1px;

    background: var(--fxt-accent);
    opacity: 0.6;
}

.fxt-testimonials .fxt-bottom-label {
    color: var(--fxt-copy);

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.08em;

    text-align: center;
}


/* ---------- MARQUEE MOVES PHYSICALLY LEFT ---------- */

@keyframes fxtMarqueeLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* ---------- LAPTOP-L / LARGE DESKTOP ---------- */

@media (min-width: 1440px) {
    .fxt-testimonials {
        padding-block: 112px 100px;
    }
}


/* ---------- LAPTOP / TABLET ---------- */

@media (max-width: 1023px) {
    .fxt-testimonials {
        padding-block: 84px 78px;
    }

    .fxt-testimonials .fxt-testimonial-container {
        width: calc(100% - 64px);
    }

    .fxt-testimonials .fxt-marquee-group {
        gap: 20px;
        padding-inline-end: 20px;
    }

    .fxt-testimonials .fxt-testimonial-card {
        width: clamp(
            260px,
            calc((100vw - 84px) / 2),
            470px
        );

        min-height: 300px;
        padding: 26px;
    }

    .fxt-testimonials.is-ready .fxt-marquee-track {
        animation-duration: 29s;
    }

    .fxt-testimonials .fxt-marquee-window {
        margin-top: 40px;
    }
}


/* ---------- MOBILE-L / MOBILE-M / MOBILE-S ---------- */

@media (max-width: 767px) {
    .fxt-testimonials {
        padding-block: 70px 64px;
    }

    .fxt-testimonials .fxt-testimonial-container {
        width: calc(100% - 36px);
    }

    .fxt-testimonials .fxt-testimonial-heading {
        max-width: 100%;
    }

    .fxt-testimonials .fxt-testimonial-eyebrow {
        gap: 8px;

        margin-bottom: 18px;
        padding: 7px 13px;

        font-size: 12px;
    }

    .fxt-testimonials .fxt-testimonial-title {
        margin-bottom: 16px;

        font-size: clamp(34px, 8.5vw, 44px);
        line-height: 1.12;
        letter-spacing: -0.02em;
    }

    .fxt-testimonials .fxt-testimonial-subtitle {
        font-size: 16px;
        line-height: 1.7;
    }

    .fxt-testimonials .fxt-marquee-window {
        margin-top: 30px;
        padding-block: 10px 18px;
    }

    .fxt-testimonials .fxt-marquee-group {
        gap: 16px;
        padding-inline-end: 16px;
    }

    .fxt-testimonials .fxt-testimonial-card {
        width: calc(100vw - 36px);

        min-height: 300px;
        padding: 24px 22px;

        border-radius: 14px;
    }

    .fxt-testimonials .fxt-card-quote {
        margin-block: 16px 24px;
        font-size: 16px;
        line-height: 1.75;
    }

    .fxt-testimonials .fxt-profile-image {
        flex-basis: 50px;

        width: 50px;
        height: 50px;
    }

    .fxt-testimonials .fxt-profile-name {
        font-size: 13px;
    }

    .fxt-testimonials .fxt-profile-role {
        font-size: 12px;
    }

    .fxt-testimonials .fxt-testimonial-bottom {
        gap: 10px;
        margin-top: 24px;
    }

    .fxt-testimonials .fxt-bottom-label {
        font-size: 10px;
        letter-spacing: 0.05em;
    }

    .fxt-testimonials.is-ready .fxt-marquee-track {
        animation-duration: 28s;
    }
}


/* ---------- VERY SMALL MOBILE ---------- */

@media (max-width: 359px) {
    .fxt-testimonials .fxt-testimonial-container {
        width: calc(100% - 28px);
    }

    .fxt-testimonials .fxt-testimonial-title {
        font-size: 34px;
    }

    .fxt-testimonials .fxt-testimonial-card {
        width: calc(100vw - 28px);
        padding: 21px 18px;
    }

    .fxt-testimonials .fxt-card-type {
        font-size: 12px;
    }

    .fxt-testimonials .fxt-card-quote {
        font-size: 16px;
    }

    .fxt-testimonials .fxt-card-profile {
        gap: 10px;
    }

    .fxt-testimonials .fxt-profile-image {
        flex-basis: 46px;

        width: 46px;
        height: 46px;
    }
}


/* ---------- REDUCED-MOTION ACCESSIBILITY ---------- */

@media (prefers-reduced-motion: reduce) {
    .fxt-testimonials.is-ready .fxt-marquee-track {
        animation: none;
        transform: none;
        will-change: auto;
    }

    .fxt-testimonials .fxt-testimonial-card {
        transition: none;
    }

    .fxt-testimonials .fxt-testimonial-card:hover {
        transform: none;
    }
}

/* =========================================================
   FLEETAXIS — ABOUT TESTIMONIALS / DARK MODE
========================================================= */

html.dark-mode .fxt-testimonials {
    --fxt-bg: #171717;
    --fxt-card-bg: #1D1D1D;
    --fxt-heading: #F8F5F0;
    --fxt-copy: #C9C1B7;
    --fxt-accent: #D49A63;
    --fxt-border: rgba(243, 230, 208, 0.15);

    background: #171717;
    color: #F3EDE5;
}

html.dark-mode .fxt-testimonials::before {
    opacity: 0.13;
}

html.dark-mode .fxt-testimonials .fxt-testimonial-eyebrow {
    background: #1D1D1D;
    border-color: rgba(243, 230, 208, 0.16);
    color: #E2B487;
}

html.dark-mode .fxt-testimonials .fxt-testimonial-title {
    color: #F8F5F0;
}

html.dark-mode .fxt-testimonials .fxt-testimonial-title span {
    color: #D49A63;
}

html.dark-mode .fxt-testimonials .fxt-testimonial-subtitle {
    color: #C9C1B7;
}

html.dark-mode .fxt-testimonials .fxt-testimonial-card {
    background: #1D1D1D;
    border-color: rgba(243, 230, 208, 0.15);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.24);

    color: #F3EDE5;
}

html.dark-mode .fxt-testimonials .fxt-testimonial-card:hover {
    border-color: rgba(212, 154, 99, 0.65);

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.36);
}

html.dark-mode .fxt-testimonials .fxt-card-type {
    color: #E2B487;
}

html.dark-mode .fxt-testimonials .fxt-quote-symbol {
    color: #D49A63;
}

html.dark-mode .fxt-testimonials .fxt-card-quote {
    color: #EDE7DE;
}

html.dark-mode .fxt-testimonials .fxt-card-footer {
    border-top-color: rgba(243, 230, 208, 0.15);
}

html.dark-mode .fxt-testimonials .fxt-profile-image {
    border-color: #D49A63;
    background: #302A24;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.4);
}

html.dark-mode .fxt-testimonials .fxt-profile-name {
    color: #F8F5F0;
}

html.dark-mode .fxt-testimonials .fxt-profile-role {
    color: #C9C1B7;
}

html.dark-mode .fxt-testimonials .fxt-card-number {
    color: #D49A63;
}

html.dark-mode .fxt-testimonials .fxt-bottom-line {
    background: #D49A63;
}

html.dark-mode .fxt-testimonials .fxt-bottom-label {
    color: #C9C1B7;
}

/* =========================================================
   FLEETAXIS — ABOUT PAGE CTA
   Homepage-matched design; section-scoped styles only
========================================================= */

.fxab-cta,
.fxab-cta *,
.fxab-cta *::before,
.fxab-cta *::after {
    box-sizing: border-box;
}

.fxab-cta {
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 92px 0 96px;
    overflow: hidden;

    background: var(--fx-champagne-light);
    color: var(--fx-text);
    font-family: "Inter", sans-serif;
}


/* ---------- LARGE RECTANGULAR CONTAINER ---------- */

.fxab-cta .fxab-cta-shell {
    position: relative;
    isolation: isolate;
    width: min(1360px, calc(100% - 80px));
    margin-inline: auto;
    overflow: hidden;

    border: 1px solid rgba(184, 115, 51, 0.38);
    border-radius: 28px;

    background: linear-gradient(
        135deg,
        #202020 0%,
        #151515 52%,
        #202020 100%
    );

    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

@media (hover: hover) {
    .fxab-cta .fxab-cta-shell:hover {
        transform: translateY(-3px);
        box-shadow: 0 38px 90px rgba(0, 0, 0, 0.20);
    }
}


/* ---------- DECORATIVE BACKGROUND ---------- */

.fxab-cta .fxab-cta-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.fxab-cta .fxab-cta-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(243, 230, 208, 0.14) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243, 230, 208, 0.14) 1px,
            transparent 1px
        );

    background-size: 46px 46px;
    opacity: 0.15;

    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 18%,
        #000 82%,
        transparent
    );

    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 18%,
        #000 82%,
        transparent
    );
}


/* ---------- COPPER GLOW ---------- */

.fxab-cta .fxab-cta-glow {
    position: absolute;
    width: 420px;
    height: 420px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(184, 115, 51, 0.22),
        rgba(184, 115, 51, 0.07) 42%,
        transparent 72%
    );

    filter: blur(4px);
    animation: fxabCtaGlow 8s ease-in-out infinite;
    pointer-events: none;
}

.fxab-cta .fxab-cta-glow-one {
    top: -230px;
    left: -100px;
}

.fxab-cta .fxab-cta-glow-two {
    right: -130px;
    bottom: -250px;
    animation-delay: -4s;
}

@keyframes fxabCtaGlow {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}


/* ---------- ORBIT RINGS ---------- */

.fxab-cta .fxab-cta-orbit {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 460px;
    height: 460px;

    border: 1px solid rgba(212, 154, 99, 0.13);
    border-radius: 50%;

    transform: translate(-50%, -50%);
    animation: fxabCtaOrbit 18s linear infinite;
}

.fxab-cta .fxab-cta-orbit::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: var(--fx-copper-light);
    box-shadow: 0 0 16px rgba(212, 154, 99, 0.8);
}

.fxab-cta .fxab-cta-orbit-two {
    width: 650px;
    height: 650px;

    border-color: rgba(212, 154, 99, 0.07);
    animation-name: fxabCtaOrbitReverse;
    animation-duration: 26s;
}

@keyframes fxabCtaOrbit {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

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

@keyframes fxabCtaOrbitReverse {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

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


/* ---------- ANIMATED COPPER BORDER BEAM ---------- */

.fxab-cta .fxab-cta-beam {
    position: absolute;
    z-index: 3;
    inset: 0;

    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.fxab-cta .fxab-cta-beam::before {
    content: "";
    position: absolute;
    top: 0;
    left: -180px;

    width: 180px;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--fx-copper-light),
        transparent
    );

    box-shadow: 0 0 16px rgba(212, 154, 99, 0.8);

    animation: fxabCtaBeam 6s linear infinite;
}

@keyframes fxabCtaBeam {
    0% {
        left: -180px;
        top: 0;
        transform: rotate(0deg);
    }

    24% {
        left: calc(100% - 20px);
        top: 0;
    }

    25% {
        left: calc(100% - 2px);
        top: 0;
        transform: rotate(90deg);
    }

    49% {
        left: calc(100% - 2px);
        top: calc(100% - 180px);
    }

    50% {
        left: calc(100% - 2px);
        top: calc(100% - 2px);
        transform: rotate(180deg);
    }

    74% {
        left: 20px;
        top: calc(100% - 2px);
    }

    75% {
        left: 0;
        top: calc(100% - 2px);
        transform: rotate(270deg);
    }

    99% {
        left: 0;
        top: 180px;
    }

    100% {
        left: -180px;
        top: 0;
        transform: rotate(360deg);
    }
}


/* ---------- CENTERED CONTENT ---------- */

.fxab-cta .fxab-cta-content {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(940px, calc(100% - 80px));
    margin-inline: auto;
    padding: 82px 30px 72px;

    text-align: center;
}

.fxab-cta .fxab-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

    margin: 0 0 24px;

    color: #D49A63;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.fxab-cta .fxab-cta-status {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    border-radius: 50%;
    background: #D49A63;

    box-shadow:
        0 0 0 5px rgba(212, 154, 99, 0.10),
        0 0 14px rgba(212, 154, 99, 0.7);

    animation: fxabCtaStatusPulse 2.2s ease-in-out infinite;
}

@keyframes fxabCtaStatusPulse {
    0%, 100% {
        opacity: 0.65;
        box-shadow: 0 0 0 4px rgba(212, 154, 99, 0.08);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 0 8px rgba(212, 154, 99, 0.03);
    }
}

.fxab-cta .fxab-cta-eyebrow-line {
    width: 34px;
    height: 1px;
    flex: 0 0 34px;

    background: rgba(212, 154, 99, 0.65);
}


/* ---------- TITLE ---------- */

.fxab-cta .fxab-cta-title {
    max-width: 820px;
    margin: 0;

    color: #FFFFFF;
    font-family: "Inter", sans-serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;

    overflow-wrap: anywhere;
    text-wrap: balance;
}

.fxab-cta .fxab-cta-title span {
    display: block;
    margin-top: 5px;
    color: #D49A63;
}


/* ---------- DESCRIPTION ---------- */

.fxab-cta .fxab-cta-description {
    max-width: 700px;
    margin: 22px auto 0;

    color: #D8D0C5;
    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;

    overflow-wrap: anywhere;
    text-wrap: pretty;
}


/* ---------- CTA BUTTONS ---------- */

.fxab-cta .fxab-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;
    margin-top: 32px;

    width: 100%;
}

.fxab-cta .fxab-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 0;
    min-height: 42px;
    max-width: 100%;
    padding: 10px 18px;

    border: 1px solid transparent;
    border-radius: 8px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;

    overflow-wrap: anywhere;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.fxab-cta .fxab-cta-button i {
    flex: 0 0 auto;
    font-size: 12px;
    transition: transform 0.25s ease;
}

.fxab-cta .fxab-cta-button-primary {
    background: var(--fx-copper);
    color: #FFFFFF;
    border-color: var(--fx-copper);

    box-shadow: 0 8px 24px rgba(184, 115, 51, 0.20);
}

.fxab-cta .fxab-cta-button-primary:hover {
    background: var(--fx-copper-dark);
    color: #FFFFFF;
    border-color: var(--fx-copper-dark);

    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(184, 115, 51, 0.28);
}

.fxab-cta .fxab-cta-button-secondary {
    background: rgba(243, 230, 208, 0.08);
    color: #F8F5F0;
    border-color: rgba(243, 230, 208, 0.30);
}

.fxab-cta .fxab-cta-button-secondary:hover {
    background: rgba(243, 230, 208, 0.15);
    color: #FFFFFF;
    border-color: #D49A63;

    transform: translateY(-2px);
}

.fxab-cta .fxab-cta-button-primary:hover i,
.fxab-cta .fxab-cta-button-secondary:hover i {
    transform: translateX(4px);
}

.fxab-cta .fxab-cta-button:focus-visible {
    outline: 2px solid #D49A63;
    outline-offset: 4px;
}


/* ---------- THREE HIGHLIGHTS ---------- */

.fxab-cta .fxab-cta-metrics {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 780px;

    gap: 30px;
    margin-top: 46px;
    padding-top: 30px;

    border-top: 1px solid rgba(243, 230, 208, 0.13);
}

.fxab-cta .fxab-cta-metric {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-width: 0;
    text-align: left;
}

.fxab-cta .fxab-cta-metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    border: 1px solid rgba(212, 154, 99, 0.32);
    border-radius: 8px;

    background: rgba(184, 115, 51, 0.09);
    color: #D49A63;
    font-size: 14px;
}

.fxab-cta .fxab-cta-metric-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fxab-cta .fxab-cta-metric-copy strong {
    color: #F8F5F0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.fxab-cta .fxab-cta-metric-copy small {
    color: #AFA79D;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.fxab-cta .fxab-cta-divider {
    flex: 0 0 1px;
    width: 1px;
    height: 30px;
    background: rgba(243, 230, 208, 0.15);
}


/* ---------- CLOSING LINE ---------- */

.fxab-cta .fxab-cta-status-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;

    max-width: 100%;
    margin: 28px 0 0;

    color: #AFA79D;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    overflow-wrap: anywhere;
}

.fxab-cta .fxab-cta-live-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;

    border-radius: 50%;
    background: #8BBF8B;

    box-shadow: 0 0 10px rgba(139, 191, 139, 0.6);

    animation: fxabCtaLive 2s ease-in-out infinite;
}

@keyframes fxabCtaLive {
    0%, 100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}


/* ---------- LAPTOP-L: UP TO 1439px ---------- */

@media (max-width: 1439px) {
    .fxab-cta {
        padding: 84px 0 88px;
    }

    .fxab-cta .fxab-cta-shell {
        width: min(1280px, calc(100% - 64px));
    }

    .fxab-cta .fxab-cta-content {
        padding: 76px 28px 66px;
    }
}


/* ---------- LAPTOP: UP TO 1199px ---------- */

@media (max-width: 1199px) {
    .fxab-cta {
        padding: 78px 0 82px;
    }

    .fxab-cta .fxab-cta-shell {
        width: calc(100% - 56px);
        border-radius: 24px;
    }

    .fxab-cta .fxab-cta-content {
        width: min(900px, calc(100% - 60px));
        padding: 68px 24px 60px;
    }

    .fxab-cta .fxab-cta-title {
        font-size: clamp(31px, 4vw, 48px);
    }
}


/* ---------- TABLET: UP TO 1023px ---------- */

@media (max-width: 1023px) {
    .fxab-cta {
        padding: 68px 0 72px;
    }

    .fxab-cta .fxab-cta-shell {
        width: calc(100% - 40px);
        border-radius: 22px;
    }

    .fxab-cta .fxab-cta-content {
        width: calc(100% - 40px);
        padding: 62px 20px 56px;
    }

    .fxab-cta .fxab-cta-description {
        max-width: 640px;
        font-size: 16px;
    }

    .fxab-cta .fxab-cta-metrics {
        gap: 20px;
    }

    .fxab-cta .fxab-cta-metric {
        gap: 8px;
    }
}


/* ---------- MOBILE-L, MOBILE-M, MOBILE-S ---------- */

@media (max-width: 767px) {
    .fxab-cta {
        padding: 58px 0 64px;
    }

    .fxab-cta .fxab-cta-shell {
        width: calc(100% - 28px);
        border-radius: 20px;
    }

    .fxab-cta .fxab-cta-content {
        width: calc(100% - 28px);
        padding: 52px 14px 46px;
    }

    .fxab-cta .fxab-cta-eyebrow {
        margin-bottom: 20px;
        gap: 8px;

        font-size: 11px;
        line-height: 1.6;
        letter-spacing: 0.11em;
    }

    .fxab-cta .fxab-cta-eyebrow-line {
        display: none;
    }

    .fxab-cta .fxab-cta-title {
        font-size: clamp(29px, 8vw, 40px);
        line-height: 1.12;
        letter-spacing: -0.02em;
    }

    .fxab-cta .fxab-cta-title span {
        margin-top: 4px;
    }

    .fxab-cta .fxab-cta-description {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.65;
    }

    .fxab-cta .fxab-cta-actions {
        width: 100%;
        flex-direction: column;
        align-items: center;

        margin-top: 28px;
        gap: 10px;
    }

    .fxab-cta .fxab-cta-button {
        width: min(100%, 320px);
        min-height: 44px;
        white-space: normal;
        text-align: center;
    }

    .fxab-cta .fxab-cta-metrics {
        flex-direction: column;
        align-items: center;
        gap: 18px;

        margin-top: 36px;
        padding-top: 26px;
    }

    .fxab-cta .fxab-cta-metric {
        width: min(100%, 300px);
        justify-content: center;
        text-align: left;
    }

    .fxab-cta .fxab-cta-metric-copy {
        text-align: left;
    }

    .fxab-cta .fxab-cta-divider {
        width: 70px;
        height: 1px;
        flex-basis: 1px;
    }

    .fxab-cta .fxab-cta-status-row {
        max-width: 300px;
        margin-top: 24px;
    }

    .fxab-cta .fxab-cta-orbit-one {
        width: 360px;
        height: 360px;
    }

    .fxab-cta .fxab-cta-orbit-two {
        width: 520px;
        height: 520px;
    }
}


/* ---------- MOBILE-M / MOBILE-S: UP TO 480px ---------- */

@media (max-width: 480px) {
    .fxab-cta {
        padding: 50px 0 56px;
    }

    .fxab-cta .fxab-cta-shell {
        width: calc(100% - 20px);
        border-radius: 18px;
    }

    .fxab-cta .fxab-cta-content {
        width: calc(100% - 20px);
        padding: 46px 10px 40px;
    }

    .fxab-cta .fxab-cta-title {
        font-size: 28px;
    }

    .fxab-cta .fxab-cta-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .fxab-cta .fxab-cta-button {
        padding: 11px 16px;
        font-size: 13px;
    }

    .fxab-cta .fxab-cta-metrics {
        margin-top: 32px;
    }

    .fxab-cta .fxab-cta-glow {
        width: 300px;
        height: 300px;
    }
}


/* ---------- VERY SMALL MOBILE: UP TO 359px ---------- */

@media (max-width: 359px) {
    .fxab-cta {
        padding: 44px 0 50px;
    }

    .fxab-cta .fxab-cta-shell {
        width: calc(100% - 14px);
        border-radius: 16px;
    }

    .fxab-cta .fxab-cta-content {
        width: calc(100% - 14px);
        padding: 40px 8px 36px;
    }

    .fxab-cta .fxab-cta-eyebrow {
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    .fxab-cta .fxab-cta-title {
        font-size: 25px;
    }

    .fxab-cta .fxab-cta-description {
        font-size: 13.5px;
    }

    .fxab-cta .fxab-cta-button {
        width: 100%;
        min-height: 43px;
        padding-inline: 10px;
        font-size: 12.5px;
    }

    .fxab-cta .fxab-cta-metric-copy strong {
        font-size: 11.5px;
    }

    .fxab-cta .fxab-cta-metric-copy small {
        font-size: 10.5px;
    }
}


/* ---------- INTRO REVEAL ---------- */

.fxab-cta .fxab-cta-content {
    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fxab-cta.fxab-motion-ready:not(.fxab-is-visible)
.fxab-cta-content {
    opacity: 0;
    transform: translateY(24px);
}

.fxab-cta.fxab-is-visible .fxab-cta-content {
    opacity: 1;
    transform: translateY(0);
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
    .fxab-cta .fxab-cta-glow,
    .fxab-cta .fxab-cta-orbit,
    .fxab-cta .fxab-cta-status,
    .fxab-cta .fxab-cta-live-dot,
    .fxab-cta .fxab-cta-beam::before {
        animation: none !important;
    }

    .fxab-cta .fxab-cta-shell,
    .fxab-cta .fxab-cta-button,
    .fxab-cta .fxab-cta-content {
        transition: none !important;
    }

    .fxab-cta.fxab-motion-ready:not(.fxab-is-visible)
    .fxab-cta-content {
        opacity: 1;
        transform: none;
    }
}

/* About page: align non-hero section gutters and description scale with the hero. */
.fxa-about-sections .fxa-container,
.fxat-team-section .fxat-container,
.fxmv-section .fxmv-container,
.fxht-history-section .fxht-container {
    width: min(1440px, calc(100% - 140px));
}

.fxa-about-sections .fxa-story-intro,
.fxa-about-sections .fxa-team-heading > p,
.fxa-about-sections .fxa-story-narrative > p:not(.fxa-story-footnote),
.fxa-about-sections .fxa-ecosystem-heading > p:last-child,
.fxa-about-sections .fxa-difference-heading > p:last-child,
.fxa-about-sections .fxa-difference-pane > p,
.fxat-team-section .fxat-team-intro > p,
.fxat-team-section .fxat-card-content p,
.fxat-team-section .fxat-team-footer-copy p,
.fxmv-section .fxmv-lead,
.fxmv-section .fxmv-description,
.fxmv-section .fxmv-visual-description,
.fxht-history-section .fxht-heading-row > p,
.fxht-history-section .fxht-milestone-content p {
    font-size: 15px;
}

@media (max-width: 1199px) {
    .fxa-about-sections .fxa-container,
    .fxat-team-section .fxat-container,
    .fxmv-section .fxmv-container,
    .fxht-history-section .fxht-container {
        width: calc(100% - 80px);
    }
}

@media (max-width: 767px) {
    .fxa-about-sections .fxa-container,
    .fxat-team-section .fxat-container,
    .fxmv-section .fxmv-container,
    .fxht-history-section .fxht-container {
        width: calc(100% - 32px);
    }
}


/* =========================================================
   FLEETAXIS ABOUT: OUR HISTORY, SPACING FIX
   Paste at the very END of styles.css.
   Chapters 01 and 03 now sit fully above the wave, chapters
   02 and 04 fully below it, and the progress footer starts
   lower so nothing overlaps. Scoped to .fxht-history-section.
========================================================= */

@media (min-width: 768px) {

    .fxht-history-section .fxht-timeline-runway {
        /* space reserved above / below the wave for the chapter text.
           script.js measures the real text and replaces these two values */
        --fxht-top-room: 250px;
        --fxht-bot-room: 250px;
        --fxht-node-gap: 40px;   /* clear space between a node and its text */

        /* wave height shrinks on short screens so the pinned stage fits */
        --fxht-amp: clamp(
            70px,
            calc(100vh - var(--fx-navbar-height, 78px) - 36px - var(--fxht-top-room) - var(--fxht-bot-room) - var(--fxht-node-gap) * 2),
            150px
        );

        --fxht-crest: calc(var(--fxht-top-room) + var(--fxht-node-gap));
        --fxht-trough: calc(var(--fxht-crest) + var(--fxht-amp));
        --fxht-svg-h: calc(var(--fxht-amp) * 2.625);
        --fxht-svg-top: calc(var(--fxht-crest) - var(--fxht-svg-h) * .309524);

        --fxht-timeline-height: calc(
            var(--fxht-top-room) + var(--fxht-amp) + var(--fxht-bot-room) + var(--fxht-node-gap) * 2
        );
    }

    /* the wave is drawn only inside its own band */
    .fxht-history-section .fxht-timeline .fxht-wave-svg {
        inset: auto 0 auto 0;
        top: var(--fxht-svg-top);
        width: 100%;
        height: var(--fxht-svg-h);
    }

    /* nodes sit exactly on the crest / trough of the wave */
    .fxht-history-section .fxht-timeline .fxht-milestone-top .fxht-node {
        top: var(--fxht-crest);
    }

    .fxht-history-section .fxht-timeline .fxht-milestone-bottom .fxht-node {
        top: var(--fxht-trough);
    }

    /* top chapters grow upward from the node, bottom chapters grow downward */
    .fxht-history-section .fxht-timeline .fxht-milestone-top .fxht-milestone-content {
        top: auto;
        bottom: calc(var(--fxht-timeline-height) - var(--fxht-crest) + var(--fxht-node-gap));
    }

    .fxht-history-section .fxht-timeline .fxht-milestone-bottom .fxht-milestone-content {
        top: calc(var(--fxht-trough) + var(--fxht-node-gap));
        bottom: auto;
    }

    /* progress line, chapter name and counter start lower */
    .fxht-history-section .fxht-timeline-footer {
        margin-top: 40px;
        padding-top: 24px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .fxht-history-section .fxht-timeline-runway { --fxht-top-room: 280px; --fxht-bot-room: 285px; }
    .fxht-history-section .fxht-timeline .fxht-milestone-content { width: clamp(190px, 27vw, 230px); }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .fxht-history-section .fxht-timeline-runway { --fxht-top-room: 262px; --fxht-bot-room: 266px; }
}

/* mobile timeline: just more room above the footer */
@media (max-width: 767px) {
    .fxht-history-section .fxht-timeline-footer { margin-top: 36px; padding-top: 20px; }
}

/* =========================================================
   FLEETAXIS CONTACT HERO: GAUGE LABEL OVERLAP FIX
   Paste at the very END of styles.css.
   On small phones the two side dials are only 70 to 95px wide,
   so their number + sub-label ran into the caption below.
   Scoped to .fx-ct-gauges, mobile only (up to 479px).
========================================================= */

@media (max-width: 479px) {

    /* the caption already says "on duty" / "cover", so the small
       sub-label inside the side dials is dropped to give room */
    .fx-ct-gauges .fx-ct-g-side .fx-ct-ro span {
        display: none;
    }

    /* number sits in the open gap at the bottom of the dial */
    .fx-ct-gauges .fx-ct-g-side .fx-ct-ro {
        top: 56%;
    }

    .fx-ct-gauges .fx-ct-g-side .fx-ct-ro b {
        font-size: clamp(15px, 4.6vw, 18px);
    }

    /* the middle dial is larger, keep its sub-label but tighten it */
    .fx-ct-gauges .fx-ct-g-mid .fx-ct-ro {
        top: 58%;
        gap: 0;
    }

    .fx-ct-gauges .fx-ct-g-mid .fx-ct-ro span {
        font-size: 10px;
        line-height: 1.2;
    }

    /* every caption gets the same two-line height, so the three
       dials stay level and a wrapped caption never touches a dial */
    .fx-ct-gauges .fx-ct-cap {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: 2.7em;
        margin-top: 8px;
        font-size: 11px;
        line-height: 1.3;
        text-wrap: balance;
        overflow-wrap: anywhere;
    }
}

/* =========================================================
   ABOUT PAGE · OUR TEAM  (#our-team)
   Cards 1, 2 and 3 now use the same text sizes as card 4
   on LAPTOP (1024px–1439px) and LAPTOP L (1440px and up).

   Paste this at the very END of your styles.css, after all
   the existing .fxat-… rules, so it wins over them.
   Mobile and tablet are not touched (nothing here applies
   below 1024px).

   Card 4 sizes used as the reference:
     title        21px
     paragraph    15px  (line-height 1.75, top gap 9px)
     bottom label  8px
========================================================= */

@media (min-width: 1024px) {

    /* ---------- titles ---------- */

    .fxat-team-section .fxat-card-feature .fxat-card-content h3,
    .fxat-team-section .fxat-card-leasing .fxat-card-content h3,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content h3 {
        font-size: 21px;
    }


    /* ---------- paragraphs ---------- */

    .fxat-team-section .fxat-card-feature .fxat-card-content p,
    .fxat-team-section .fxat-card-leasing .fxat-card-content p,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content p {
        max-width: 440px;
        margin-top: 9px;
        font-size: 15px;
        line-height: 1.75;
    }


    /* ---------- bottom labels ("02 — PLANNING AHEAD" …) ---------- */

    .fxat-team-section .fxat-card-feature .fxat-card-bottom,
    .fxat-team-section .fxat-card-leasing .fxat-card-bottom,
    .fxat-team-section .fxat-card-maintenance .fxat-card-bottom {
        margin-top: 16px;
        padding-top: 12px;
        font-size: 8px;
    }


    /* ---------- the two narrow cards get card 4's padding ---------- */

    .fxat-team-section .fxat-card-leasing .fxat-card-content,
    .fxat-team-section .fxat-card-maintenance .fxat-card-content {
        padding: 18px 22px;
    }


    /* ---------- taller top row so the larger text never reaches the badges ---------- */

    .fxat-team-section .fxat-team-mosaic {
        grid-template-rows: 345px 225px;
    }
}

@media (min-width: 1200px) {

    .fxat-team-section .fxat-team-mosaic {
        grid-template-rows: 305px 225px;
    }
}

@media (min-width: 1440px) {

    .fxat-team-section .fxat-team-mosaic {
        grid-template-rows: 275px 225px;
    }
}


/* =========================================================
   HOME 1 · SECTION 05 · LEASE YOUR WAY — MOBILE & TABLET FIX
   Paste at the very END of your existing styles.css.

   Applies only at 1023px and below (mobile S / M / L and
   tablet). Laptop and laptop L are not touched.

   What was wrong: the plan cards are absolutely positioned,
   so the stage could not grow with them. The taller card was
   covered by the quote panel, and the arrow buttons sat on
   top of the card text.

   What changes:
   - all cards share one grid cell, so the stage always grows
     to the tallest card (nothing is covered any more)
   - arrow buttons and dots move into a row under the card
   - mobile (767px and below): one card at a time, no
     half-cut side cards at the screen edges
   - tablet (768px to 1023px): side cards stay tucked behind
========================================================= */

@media (max-width: 1023px) {

    /* ---------- carousel: card on top, controls underneath ---------- */

    .fx-lease-carousel {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        align-items: center;
        column-gap: 12px;
        row-gap: 22px;
        margin-bottom: 26px;
    }

    .fx-lease-stage {
        grid-column: 1 / -1;
        grid-row: 1;
        display: grid;
        justify-items: center;
        align-items: stretch;
        min-height: 0;
        width: 100%;
        padding-block: 6px;
        perspective: 1400px;
        perspective-origin: 50% 40%;
    }

    .fx-lease-nav {
        position: static;
        grid-row: 2;
    }

    .fx-lease-prev { grid-column: 1; justify-self: start; }
    .fx-lease-next { grid-column: 3; justify-self: end; }

    .fx-lease-dots {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
    }


    /* ---------- cards: stacked in one cell, so the stage fits the tallest ---------- */

    .fx-lease-card {
        grid-area: 1 / 1;
        position: relative;
        inset-inline-start: auto;
        top: auto;
        width: min(380px, 100%);
        min-height: 0;
        padding: 28px 24px;
    }

    .fx-lease-card.pos-center {
        transform: translateZ(0) scale(1);
    }

    .fx-lease-card.pos-left {
        transform: translateX(calc(-68% * var(--fx-dir))) translateZ(-200px) rotateY(calc(30deg * var(--fx-dir))) scale(.86);
    }

    .fx-lease-card.pos-right {
        transform: translateX(calc(68% * var(--fx-dir))) translateZ(-200px) rotateY(calc(-30deg * var(--fx-dir))) scale(.86);
    }

    .fx-lease-card.pos-far-left {
        transform: translateX(calc(-110% * var(--fx-dir))) translateZ(-300px) scale(.8);
    }

    .fx-lease-card.pos-far-right {
        transform: translateX(calc(110% * var(--fx-dir))) translateZ(-300px) scale(.8);
    }
}


/* ---------- mobile (767px and below): one card at a time ---------- */

@media (max-width: 767px) {

    .fx-lease-card.pos-left,
    .fx-lease-card.pos-right,
    .fx-lease-card.pos-far-left,
    .fx-lease-card.pos-far-right {
        opacity: 0;
        pointer-events: none;
    }

    .fx-lease-card.pos-left,
    .fx-lease-card.pos-far-left {
        transform: translateX(calc(-30% * var(--fx-dir))) scale(.92);
    }

    .fx-lease-card.pos-right,
    .fx-lease-card.pos-far-right {
        transform: translateX(calc(30% * var(--fx-dir))) scale(.92);
    }

    .fx-lease-card { padding: 26px 22px; }
}


@media (max-width: 480px) {

    .fx-lease-card { padding: 24px 20px; }
}


@media (max-width: 359px) {

    .fx-lease-carousel { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 8px; }
    .fx-lease-nav { width: 44px; height: 44px; font-size: 15px; }
    .fx-lease-dot { width: 26px; }
    .fx-lease-dot.is-on { width: 38px; }
    .fx-lease-card { padding: 22px 17px; }
}

/* =========================================================
   HOME 2 · SECTION 03 (INDUSTRY SOLUTIONS)
   VEHICLES CENTRED INSIDE THE CARD IMAGE PANEL
   Tablet, laptop and laptop-L only (768px and up).
   Mobile (767px and below) is not touched.

   Paste at the very END of assets/css/styles.css.
   It has to come after the .fx-sln-visual rules, which is why
   the earlier "align-items: center" block near the top of the
   file had no effect (the later rule won).
========================================================= */

@media (min-width: 768px) {

    /* vehicle sits in the exact middle, horizontally and vertically */
    .fx-sln .fx-sln-visual {
        container-type: inline-size;
        container-name: slnvis;

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

        /* copper glow follows the vehicle instead of sitting at the bottom */
        background:
            radial-gradient(ellipse at 50% 52%, rgba(212, 154, 99, .26), transparent 64%),
            #151515;
    }

    .fx-sln .fx-sln-visual img {
        width: auto;
        max-width: 100%;
        max-height: 58%;
        margin: 0;

        /* the bottom fade only made sense when the vehicle was anchored to the floor */
        -webkit-mask-image: none;
                mask-image: none;
    }

    /* dashed ring is a circle centred around the vehicle too */
    .fx-sln .fx-sln-visual .fx-sln-ring {
        inset: 50% auto auto 50%;
        width: 86%;
        height: auto;
        aspect-ratio: 1;
        translate: -50% -50%;
    }

    /* the "Sample fleet mix" box becomes a slim strip across the top, so it
       never sits on top of a vehicle that is now in the middle of the panel */
    .fx-sln .fx-sln-visual .fx-sln-mix {
        top: 14px;
        inset-inline: 14px;
        width: auto;
        padding: 10px 14px 12px;
    }

    .fx-sln .fx-sln-visual .fx-sln-mix-title { margin-bottom: 8px; }

    .fx-sln .fx-sln-visual .fx-sln-mix ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .fx-sln .fx-sln-visual .fx-sln-mix li {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label value"
            "bar   bar";
        gap: 6px 8px;
    }

    .fx-sln .fx-sln-visual .fx-sln-mix li > span:first-child { grid-area: label; }
    .fx-sln .fx-sln-visual .fx-sln-mix .fx-sln-bar { grid-area: bar; }
    .fx-sln .fx-sln-visual .fx-sln-mix b { grid-area: value; }

    /* each PNG has a little transparent space above or below the vehicle,
       so a tiny nudge makes the vehicle itself (not the image box) sit centred */
    .fx-sln .fx-sln-card:nth-child(1) .fx-sln-visual img { translate: 0 1%; }
    .fx-sln .fx-sln-card:nth-child(2) .fx-sln-visual img { translate: 0 -5%; }
    .fx-sln .fx-sln-card:nth-child(3) .fx-sln-visual img { translate: 0 0; }

    /* very narrow image panel (tablet and small laptops):
       label, value and bar stack so nothing overlaps */
    @container slnvis (max-width: 330px) {

        .fx-sln .fx-sln-visual .fx-sln-mix ul { gap: 10px; }

        .fx-sln .fx-sln-visual .fx-sln-mix li {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "label"
                "value"
                "bar";
            gap: 3px;
        }

        .fx-sln .fx-sln-visual .fx-sln-mix b { text-align: start; }
    }
}

/* =========================================================
   HOME 2 · SECTION 02 (FEATURED FLEET)
   CARD TEXT FIX — MOBILE-M AND TABLET ONLY

   Mobile-M  : 360px to 424px
   Tablet    : 768px to 1023px
   Every other screen size is left exactly as it was.

   Paste at the very END of assets/css/styles.css.

   Problem: the three spec cells (Seats / Lease term / Service ...)
   and the arrow button were squeezed into one row about 70px per
   cell, so words like "Scheduled" and "Sleeper" were clipped and
   "Lease term" wrapped onto three lines.
   Fix: in these two ranges the specs become a clean label / value
   list with the arrow button as a full-width button underneath.
========================================================= */

@media (min-width: 360px) and (max-width: 424px),
       (min-width: 768px) and (max-width: 1023px) {

    .fx-spot .fx-spot-specs {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .fx-spot .fx-spot-specs dl {
        display: block;
        flex: none;
        width: 100%;
    }

    .fx-spot .fx-spot-specs dl > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        flex: none;
        padding: 9px 4px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--p-line);
    }

    .fx-spot .fx-spot-specs dl > div:last-child { border-bottom: 0; }

    .fx-spot .fx-spot-specs dt {
        flex: 0 0 auto;
        font-size: 12.5px;
    }

    .fx-spot .fx-spot-specs dd {
        margin: 0;
        font-size: 15px;
        text-align: end;
        overflow-wrap: break-word;
    }

    .fx-spot .fx-spot-go {
        width: 100%;
        height: 46px;
    }
}

/* tablet : the vehicle is centred next to the text instead of hanging at the bottom */
@media (min-width: 768px) and (max-width: 1023px) {

    .fx-spot .fx-spot-stage,
    .fx-spot .fx-spot-panel.is-active .fx-spot-stage {
        align-self: stretch;
        align-items: center;
    }
}

/* Keep About and Services hero heights aligned with the Contact hero. */
@media (min-width: 1024px) {
    #about-hero {
        min-height: max(640px, calc(100vh - var(--fx-navbar-height, 78px)));
    }

    #about-hero .fx-ab-panel {
        min-height: 0;
    }

    body.fx-services-page .fxs-hero {
        min-height: max(640px, calc(100vh - var(--fx-navbar-height, 78px)));
        min-height: max(640px, calc(100dvh - var(--fx-navbar-height, 78px)));
    }
}

@media (max-width: 1023px) {
    #about-hero,
    body.fx-services-page .fxs-hero {
        min-height: 0;
    }

    #about-hero .fx-ab-panel {
        min-height: 0;
    }
}

.fx-back-to-top {
    position: fixed;
    z-index: 9999;
    inset-inline-end: 24px;
    inset-block-end: max(24px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(152, 90, 37, .28);
    border-radius: 14px;
    background: var(--fx-copper);
    color: #fff;
    box-shadow: 0 8px 24px rgba(32, 32, 32, .24);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease, visibility .2s ease;
}

.fx-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.fx-back-to-top:hover {
    background: var(--fx-copper-dark);
}

.fx-back-to-top:focus-visible {
    outline: 3px solid var(--fx-copper-light);
    outline-offset: 3px;
}

.fx-back-to-top svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    .fx-back-to-top {
        inset-inline-end: 16px;
        inset-block-end: max(16px, env(safe-area-inset-bottom));
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-back-to-top { transition: none; }
}

/* Services sections 05 and 07: mobile layouts only. */
@media (max-width: 767px) {
    body.fx-services-page .fxs34-maintenance,
    body.fx-services-page .fxs34-categories {
        padding: 48px 0;
    }

    body.fx-services-page .fxs34-shell {
        width: calc(100% - 32px);
    }

    body.fx-services-page .fxs34-heading,
    body.fx-services-page .fxs34-category-heading {
        margin-bottom: 22px;
    }

    body.fx-services-page .fxs34-heading h2,
    body.fx-services-page .fxs34-category-heading h2 {
        font-size: clamp(30px, 8vw, 40px);
    }

    body.fx-services-page .fxs34-intro,
    body.fx-services-page .fxs34-category-intro {
        font-size: 15px;
        line-height: 1.7;
    }

    body.fx-services-page .fxs34-maintenance-grid,
    body.fx-services-page .fxs34-category-stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "visual"
            "detail";
        gap: 22px;
    }

    body.fx-services-page .fxs34-maintenance-photo,
    body.fx-services-page .fxs34-category-image-wrap {
        min-height: 0;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    body.fx-services-page .fxs34-maintenance-content,
    body.fx-services-page .fxs34-category-detail {
        padding: 0;
    }

    body.fx-services-page .fxs34-collision-point {
        display: none;
    }

    body.fx-services-page .fxs34-photo-caption {
        right: 16px;
        bottom: 16px;
        left: 16px;
    }

    body.fx-services-page .fxs34-photo-caption h3 {
        font-size: clamp(20px, 5vw, 27px);
    }

    body.fx-services-page .fxs34-photo-bottom {
        flex-wrap: wrap;
        gap: 8px 14px;
        padding-inline: 2px;
    }

    body.fx-services-page .fxs34-maintenance-option {
        grid-template-columns: 38px minmax(0, 1fr) 18px;
        gap: 10px;
        padding: 11px;
    }

    body.fx-services-page .fxs34-option-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    body.fx-services-page .fxs34-option-text strong { font-size: 14px; }
    body.fx-services-page .fxs34-option-text small { font-size: 12px; }

    body.fx-services-page .fxs34-maintenance-detail { padding: 16px; }

    body.fx-services-page .fxs34-care-flow {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
        padding: 16px;
    }

    body.fx-services-page .fxs34-care-flow-title { min-width: 0; }

    body.fx-services-page .fxs34-care-flow-steps {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    body.fx-services-page .fxs34-care-flow-steps strong { font-size: 12px; }

    body.fx-services-page .fxs34-category-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    body.fx-services-page .fxs34-category-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.fx-services-page .fxs34-category-tab {
        grid-template-columns: 22px minmax(0, 1fr);
        column-gap: 7px;
        min-height: 64px;
        padding: 9px;
    }

    body.fx-services-page .fxs34-category-tab > i:first-child { font-size: 16px; }
    body.fx-services-page .fxs34-category-tab > span { font-size: 11px; }

    body.fx-services-page .fxs34-category-tab.is-active .fxs34-tab-arrow {
        display: none;
    }

    body.fx-services-page .fxs34-category-image-top {
        top: 12px;
        right: 12px;
        left: 12px;
    }

    body.fx-services-page .fxs34-category-image-bottom {
        right: 16px;
        bottom: 16px;
        left: 16px;
    }

    body.fx-services-page .fxs34-category-footer {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        margin-top: 20px;
        padding: 16px;
    }

    body.fx-services-page .fxs34-category-footer > a {
        width: 100%;
    }
}

@media (max-width: 359px) {
    body.fx-services-page .fxs34-shell {
        width: calc(100% - 24px);
    }

    body.fx-services-page .fxs34-maintenance,
    body.fx-services-page .fxs34-categories {
        padding: 40px 0;
    }

    body.fx-services-page .fxs34-category-tabs { gap: 6px; }

    body.fx-services-page .fxs34-category-tab {
        column-gap: 5px;
        padding: 8px 7px;
    }

    body.fx-services-page .fxs34-category-tab > span { font-size: 10px; }
}