/* =========================================================
   FLEETAXIS — DARK MODE
========================================================= */

html.dark-mode {

    --fx-black: #F8F5F0;
    --fx-carbon: #EDE7DE;
    --fx-charcoal: #D8D0C5;

    --fx-copper: #D49A63;
    --fx-copper-dark: #B87333;
    --fx-copper-light: #E2B487;

    --fx-champagne: #302A24;
    --fx-champagne-light: #171717;

    --fx-white: #111111;
    --fx-off-white: #1D1D1D;

    --fx-text: #F3EDE5;
    --fx-text-soft: #B8B0A6;

    --fx-border: rgba(243, 230, 208, 0.13);
}


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

html.dark-mode body {
    background: #171717;

    color: #F3EDE5;
}


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

html.dark-mode .fx-navbar {
    background: #171717;

    border-bottom:
        1px solid rgba(243, 230, 208, 0.12);

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


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

html.dark-mode .fx-brand-name,
html.dark-mode .fx-mobile-brand {
    color: #F8F5F0;
}


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

html.dark-mode .fx-nav-link,
html.dark-mode .fx-dropdown-toggle,
html.dark-mode .fx-icon-button,
html.dark-mode .fx-rtl-button,
html.dark-mode .fx-menu-toggle {
    color: #F3EDE5;
}

html.dark-mode .fx-nav-link:hover,
html.dark-mode .fx-dropdown-toggle:hover,
html.dark-mode .fx-icon-button:hover,
html.dark-mode .fx-rtl-button:hover,
html.dark-mode .fx-menu-toggle:hover {
    background: #302A24;

    color: #D49A63;
}


/* =========================================================
   ACTIVE
========================================================= */

html.dark-mode .fx-nav-link.active,
html.dark-mode .fx-dropdown-toggle.active,
html.dark-mode .fx-mobile-nav-link.active,
html.dark-mode .fx-mobile-dropdown-toggle.active,
html.dark-mode .fx-dropdown-link.active,
html.dark-mode .fx-mobile-dropdown-link.active {
    background: #B87333;

    color: #FFFFFF;
}

html.dark-mode .fx-nav-link.active:hover,
html.dark-mode .fx-dropdown-toggle.active:hover {
    background: #985A25;

    color: #FFFFFF;
}


/* =========================================================
   DROPDOWN
========================================================= */

html.dark-mode .fx-dropdown-menu {
    background: #222222;

    border-color:
        rgba(243, 230, 208, 0.14);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.40);
}

html.dark-mode .fx-dropdown-link {
    color: #F3EDE5;
}

html.dark-mode .fx-dropdown-link:hover {
    background: #302A24;

    color: #D49A63;
}


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

html.dark-mode .fx-login-button {
    background: #B87333;

    color: #FFFFFF;
}

html.dark-mode .fx-login-button:hover {
    background: #985A25;

    color: #FFFFFF;
}


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

html.dark-mode .fx-mobile-menu-panel {
    background: #171717;

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

html.dark-mode .fx-mobile-menu-header,
html.dark-mode .fx-mobile-login {
    border-color:
        rgba(243, 230, 208, 0.12);
}

html.dark-mode .fx-menu-close {
    color: #F3EDE5;
}

html.dark-mode .fx-menu-close:hover {
    background: #302A24;

    color: #D49A63;
}


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

html.dark-mode .fx-mobile-nav-link,
html.dark-mode .fx-mobile-dropdown-toggle {
    color: #F3EDE5;
}

html.dark-mode .fx-mobile-nav-link:hover,
html.dark-mode .fx-mobile-dropdown-toggle:hover {
    background: #302A24;

    color: #D49A63;
}

html.dark-mode .fx-mobile-dropdown-link {
    color: #B8B0A6;
}

html.dark-mode .fx-mobile-dropdown-link:hover {
    background: #302A24;

    color: #D49A63;
}


/* =========================================================
   SCROLLBAR
========================================================= */

html.dark-mode ::-webkit-scrollbar {
    width: 8px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: #171717;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #4A4139;

    border-radius: 10px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #B87333;
}

/* Final navbar fixes */
html.dark-mode .fx-mobile-login-wrapper {
    border-color: rgba(243, 230, 208, 0.12);
}

html.dark-mode .fx-mobile-login {
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode .fx-mobile-login:hover {
    background: #985A25;
    color: #FFFFFF;
}

html.dark-mode .fx-logo-car {
    fill: #171717;
}

html.dark-mode .fx-logo-window,
html.dark-mode .fx-logo-wheel {
    fill: #D49A63;
}


/* =========================================================
   HERO — DARK
========================================================= */

html.dark-mode .fx-hero { background: #171717; }

html.dark-mode .fx-hero-orb {
    background: radial-gradient(circle, rgba(212,154,99,.30), rgba(212,154,99,.09) 55%, transparent 70%);
}

html.dark-mode .fx-hero-grid { opacity: .4; }

html.dark-mode .fx-hero-eyebrow { background: #1D1D1D; color: #E2B487; }

html.dark-mode .fx-btn-primary { color: #151515; box-shadow: 0 10px 28px rgba(212,154,99,.28); }
html.dark-mode .fx-btn-primary:hover { background: #E2B487; }

html.dark-mode .fx-stage-ring { border-color: rgba(212,154,99,.42); }
html.dark-mode .fx-ring-2 { border-color: rgba(212,154,99,.2); }
html.dark-mode .fx-stage-num { -webkit-text-stroke-color: rgba(212,154,99,.4); }

html.dark-mode .fx-veh img {
    filter: drop-shadow(0 16px 16px rgba(0,0,0,.55));
}

html.dark-mode .fx-ground { background: radial-gradient(ellipse, rgba(0,0,0,.8), transparent 70%); }

html.dark-mode .fx-chip { background: #1D1D1D; box-shadow: 0 12px 30px rgba(0,0,0,.5); }

html.dark-mode .fx-dot { background: rgba(243,230,208,.18); }


/* =========================================================
   FLEETAXIS — HOME 1 · SECTIONS 02 & 03 — DARK MODE
   Paste at the end of your existing dark.css.
========================================================= */


/* ---------- section 02 ---------- */

html.dark-mode .fx-solutions { background: #171717; }

html.dark-mode .fx-filter { background: #1D1D1D; color: #F3EDE5; }
html.dark-mode .fx-filter.is-on { background: #985A25; border-color: #985A25; color: #FFFFFF; }

html.dark-mode .fx-sol { background: #111111; box-shadow: none; }
html.dark-mode .fx-sol:hover { box-shadow: 0 22px 48px rgba(0, 0, 0, .55); }

html.dark-mode .fx-sol-a { background: #26211C; }
html.dark-mode .fx-sol-c { background: #985A25; border-color: #985A25; }
html.dark-mode .fx-sol-d { background: #0D0D0D; }

html.dark-mode .fx-sol::before {
    background: radial-gradient(ellipse at 50% 100%, rgba(212, 154, 99, .2), transparent 65%);
}

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

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

html.dark-mode .fx-sol-ring { border-color: rgba(212, 154, 99, .42); }

html.dark-mode .fx-sol-kicker,
html.dark-mode .fx-sol-link { color: #D49A63; }

html.dark-mode .fx-sol-c .fx-sol-kicker,
html.dark-mode .fx-sol-c .fx-sol-link { color: #FFFFFF; }

html.dark-mode .fx-sol-tags li {
    background: #1D1D1D;
    border-color: rgba(243, 230, 208, .16);
    color: #F3EDE5;
}

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

html.dark-mode .fx-sol-stage img { filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .6)); }

html.dark-mode .fx-bento.is-filtered .fx-sol.is-match {
    box-shadow: 0 0 0 2px #D49A63, 0 22px 48px rgba(0, 0, 0, .5);
}

html.dark-mode .fx-cta-strip { background: #985A25; }
html.dark-mode .fx-btn-light { background: #FFFFFF; color: #151515; }
html.dark-mode .fx-btn-light:hover { background: #F3E6D0; color: #151515; }


/* ---------- section 03 ---------- */

html.dark-mode .fx-journey-sec {
    --fr-bg: #0E0E0E;
    --fr-road: #1E1E1E;
    --fr-node: #161616;
}

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

html.dark-mode .fx-journey-sec .fx-btn-primary {
    background: #D49A63;
    color: #151515;
    box-shadow: 0 10px 28px rgba(212, 154, 99, .25);
}

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

html.dark-mode .fx-console { background: rgba(255, 255, 255, .025); }

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



/* =========================================================
   FLEETAXIS — HOME 1 · SECTIONS 04 & 05 — DARK MODE
   Appended. Nothing above this line is modified.
========================================================= */


/* ---------- SECTION 04 · FLEET COMMAND CENTER ---------- */

.fx-cmd {
    --cmd-bg: #0C0C0C;
    --cmd-panel-solid: #161616;
    --cmd-text: #F8F5F0;
    --cmd-soft: #B8B0A6;
    --cmd-line: rgba(243, 230, 208, .14);
    --cmd-copper: #D49A63;
    --cmd-copper-deep: #B87333;
}

.fx-cmd-map { background: linear-gradient(160deg, #171717, #0E0E0E); box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.fx-cmd-map-top { background: rgba(255, 255, 255, .02); }

.fx-cmd-readout { background: rgba(12, 12, 12, .9); }
.fx-cmd-telemetry { background: rgba(255, 255, 255, .02); }
.fx-cmd-ticker { background: rgba(0, 0, 0, .4); }

.fx-cmd-pin::after { background: #F3E6D0; color: #151515; }

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


/* ---------- SECTION 05 · LEASE YOUR WAY ---------- */

html.dark-mode .fx-lease { background: #171717; }

html.dark-mode .fx-lease-orb {
    background: radial-gradient(circle, rgba(212, 154, 99, .2), rgba(212, 154, 99, .06) 55%, transparent 70%);
}

html.dark-mode .fx-lease-grid { opacity: .4; }
html.dark-mode .fx-lease-num { -webkit-text-stroke-color: rgba(212, 154, 99, .28); }

/* side cards */
html.dark-mode .fx-lease-card { background: #1D1D1D; border-color: rgba(243, 230, 208, .14); box-shadow: 0 22px 48px rgba(0, 0, 0, .5); }
html.dark-mode .fx-lease-card .fx-lease-name { color: #F8F5F0; }
html.dark-mode .fx-lease-card .fx-lease-desc,
html.dark-mode .fx-lease-card .fx-lease-per,
html.dark-mode .fx-lease-card .fx-lease-list li { color: #B8B0A6; }
html.dark-mode .fx-lease-card .fx-lease-ghost { -webkit-text-stroke-color: rgba(212, 154, 99, .4); }
html.dark-mode .fx-lease-card .fx-lease-pop { background: #302A24; border-color: rgba(243, 230, 208, .18); color: #E2B487; }
html.dark-mode .fx-lease-card .fx-lease-badge { background: #302A24; border-color: rgba(243, 230, 208, .18); color: #D49A63; }
html.dark-mode .fx-lease-card .fx-lease-cta { border-color: #D49A63; color: #E2B487; }
html.dark-mode .fx-lease-card .fx-lease-cta:hover { background: #B87333; border-color: #B87333; color: #FFFFFF; }

/* centre card stays copper and high-contrast */
html.dark-mode .fx-lease-card.pos-center { background: #B87333; border-color: #B87333; color: #FFFFFF; }
html.dark-mode .fx-lease-card.pos-center .fx-lease-name { color: #FFFFFF; }
html.dark-mode .fx-lease-card.pos-center .fx-lease-desc,
html.dark-mode .fx-lease-card.pos-center .fx-lease-list li { color: #FFF4E6; }

html.dark-mode .fx-lease-nav { background: #1D1D1D; border-color: rgba(243, 230, 208, .16); color: #F3EDE5; }
html.dark-mode .fx-lease-nav:hover { background: #B87333; border-color: #B87333; color: #FFFFFF; }

html.dark-mode .fx-lease-dot { background: rgba(243, 230, 208, .18); }
html.dark-mode .fx-lease-dot.is-on { background: #D49A63; }

html.dark-mode .fx-lease-quote { background: #111111; border-color: rgba(243, 230, 208, .13); box-shadow: 0 22px 48px rgba(0, 0, 0, .5); }
html.dark-mode .fx-lease-label { color: #B8B0A6; }
html.dark-mode .fx-lease-label strong { color: #F8F5F0; }
html.dark-mode .fx-lease-label strong span { color: #E2B487; }
html.dark-mode .fx-lease-scale { color: #B8B0A6; }
html.dark-mode .fx-lease-range { background: #302A24; }
html.dark-mode .fx-lease-range::-webkit-slider-thumb { border-color: #171717; }
html.dark-mode .fx-lease-range::-moz-range-thumb { border-color: #171717; }

html.dark-mode .fx-lease-term-btn { color: #F3EDE5; border-color: rgba(243, 230, 208, .18); }
html.dark-mode .fx-lease-term-btn:hover { border-color: #D49A63; }
html.dark-mode .fx-lease-term-btn.is-on { background: #B87333; border-color: #B87333; color: #FFFFFF; }
html.dark-mode .fx-lease-save { color: #E2B487; }

html.dark-mode .fx-lease-amount { color: #F8F5F0; }
html.dark-mode .fx-lease-total .fx-lease-cur { color: #D49A63; }

html.dark-mode .fx-lease-ribbon { background: #111111; border-color: rgba(243, 230, 208, .13); }
html.dark-mode .fx-lease-ribbon-title { color: #E2B487; }
html.dark-mode .fx-lease-ribbon-grid li { background: #1D1D1D; border-color: rgba(243, 230, 208, .14); color: #F3EDE5; }
html.dark-mode .fx-lease-ribbon-grid li:hover { border-color: #D49A63; box-shadow: 0 16px 32px rgba(0, 0, 0, .5); }
html.dark-mode .fx-lease-ribbon-grid i { color: #D49A63; }


/* =========================================================
   FLEETAXIS — VEHICLE BRANDS · DARK MODE
   Section only
========================================================= */

html.dark-mode .fx-brands-section {
    background: #171717;

    color: #F3EDE5;
}


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

html.dark-mode .fx-brands-eyebrow {
    background: #302A24;

    color: #E2B487;
}


html.dark-mode .fx-brands-title {
    color: #F8F5F0;
}


html.dark-mode .fx-brands-title span {
    color: #D49A63;
}


html.dark-mode .fx-brands-intro {
    color: #B8B0A6;
}


html.dark-mode .fx-brands-view {
    color: #F3EDE5;
}


html.dark-mode .fx-brands-view:hover {
    color: #D49A63;
}


html.dark-mode .fx-brands-view-icon {
    border-color:
        rgba(243, 230, 208, .14);

    color: #D49A63;
}


html.dark-mode .fx-brands-view:hover
.fx-brands-view-icon {
    background: #B87333;

    border-color: #B87333;

    color: #FFFFFF;
}


/* ---------------------------------------------------------
   BRAND CARDS
--------------------------------------------------------- */

html.dark-mode .fx-brand-card {
    background: #202020;

    border-color:
        rgba(243, 230, 208, .13);

    color: #F3EDE5;
}


html.dark-mode .fx-brand-card:hover,
html.dark-mode .fx-brand-card:focus-visible {
    background: #242424;

    border-color:
        rgba(212, 154, 99, .48);

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


html.dark-mode .fx-brand-card::before {
    background: #D49A63;
}


html.dark-mode .fx-brand-card::after {
    background:
        radial-gradient(
            circle,
            rgba(212, 154, 99, .16),
            transparent 68%
        );
}


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

html.dark-mode .fx-brand-index {
    color: #AFA79D;
}


html.dark-mode .fx-brand-arrow {
    border-color:
        rgba(243, 230, 208, .13);

    color: #AFA79D;
}


html.dark-mode .fx-brand-card:hover
.fx-brand-arrow,
html.dark-mode .fx-brand-card:focus-visible
.fx-brand-arrow {
    background: #B87333;

    border-color: #B87333;

    color: #FFFFFF;
}


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

html.dark-mode .fx-brand-mark {
    background: #302A24;

    border-color:
        rgba(212, 154, 99, .20);

    color: #E2B487;
}


html.dark-mode .fx-brand-mark::after {
    border-color:
        rgba(212, 154, 99, .28);
}


html.dark-mode .fx-brand-card:hover
.fx-brand-mark,
html.dark-mode .fx-brand-card:focus-visible
.fx-brand-mark {
    background: #D49A63;

    border-color: #D49A63;

    color: #171717;
}


/* ---------------------------------------------------------
   BRAND TEXT
--------------------------------------------------------- */

html.dark-mode .fx-brand-info h3 {
    color: #F8F5F0;
}


html.dark-mode .fx-brand-info p {
    color: #B8B0A6;
}


html.dark-mode .fx-brand-card:hover
.fx-brand-info h3,
html.dark-mode .fx-brand-card:focus-visible
.fx-brand-info h3 {
    color: #E2B487;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

html.dark-mode .fx-brands-footer-line {
    background:
        rgba(243, 230, 208, .13);
}


html.dark-mode .fx-brands-footer p {
    color: #AFA79D;
}


html.dark-mode .fx-brands-footer p strong {
    color: #F8F5F0;
}


html.dark-mode .fx-brands-footer-icon {
    border-color:
        rgba(243, 230, 208, .13);

    color: #D49A63;
}

/* =========================================================
   FLEETAXIS — INTERACTIVE FLEET OPERATIONS SLIDER
   DARK MODE — SECTION ONLY
========================================================= */

html.dark-mode .fx-fleet-slider {

    --fleet-slider-bg: #171717;
    --fleet-slider-surface: #1D1D1D;
    --fleet-slider-surface-2: #202020;

    --fleet-slider-text: #F8F5F0;
    --fleet-slider-muted: #B8B0A6;

    --fleet-slider-accent: #D49A63;
    --fleet-slider-accent-dark: #B87333;

    --fleet-slider-border:
        rgba(243, 230, 208, .13);

    background: var(--fleet-slider-bg);

    color: var(--fleet-slider-text);
}


/* Background grid */

html.dark-mode .fx-fleet-slider-grid {
    opacity: .22;

    background-image:
        linear-gradient(
            rgba(243, 230, 208, .055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243, 230, 208, .055) 1px,
            transparent 1px
        );
}


/* Background glow */

html.dark-mode .fx-fleet-slider-glow {
    background:
        radial-gradient(
            circle,
            rgba(212, 154, 99, .12),
            transparent 68%
        );
}


/* Main shell */

html.dark-mode .fx-fleet-slider-shell {
    background: #1D1D1D;

    border-color:
        rgba(243, 230, 208, .13);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .40);
}


html.dark-mode .fx-fleet-slider-shell:focus-visible {
    border-color: #D49A63;

    box-shadow:
        0 0 0 3px rgba(212, 154, 99, .12),
        0 24px 70px rgba(0, 0, 0, .40);
}


/* Visual */

html.dark-mode .fx-fleet-slider-visual {
    background:
        linear-gradient(
            135deg,
            #111111,
            #202020
        );
}


html.dark-mode .fx-fleet-slider-visual::before {
    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(212, 154, 99, .17),
            transparent 34%
        );
}


html.dark-mode .fx-fleet-slider-visual::after {
    opacity: .18;

    background-image:
        linear-gradient(
            rgba(243, 230, 208, .08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243, 230, 208, .08) 1px,
            transparent 1px
        );
}


/* Visual labels */

html.dark-mode .fx-fleet-slider-status,
html.dark-mode .fx-fleet-slider-slide-label {
    border-color:
        rgba(243, 230, 208, .14);

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

    color:
        rgba(248, 245, 240, .82);
}


html.dark-mode .fx-fleet-slider-status i {
    color: #E2B487;
}


/* Information */

html.dark-mode .fx-fleet-slider-info {
    background: #1D1D1D;
}


html.dark-mode .fx-fleet-slider-panel h3 {
    color: #F8F5F0;
}


html.dark-mode .fx-fleet-slider-panel h3 span {
    color: #D49A63;
}


html.dark-mode .fx-fleet-slider-panel-text {
    color: #B8B0A6;
}


html.dark-mode .fx-fleet-slider-panel-number {
    color: #AFA79D;
}


html.dark-mode .fx-fleet-slider-panel-icon {
    border-color:
        rgba(243, 230, 208, .14);

    color: #D49A63;
}


/* Stats */

html.dark-mode .fx-fleet-slider-stat strong {
    color: #F8F5F0;
}


html.dark-mode .fx-fleet-slider-stat span {
    color: #B8B0A6;
}


/* Tags */

html.dark-mode .fx-fleet-slider-tags span {
    border-color:
        rgba(243, 230, 208, .14);

    color: #F3EDE5;

    background: transparent;
}


/* Process / timeline / route */

html.dark-mode .fx-fleet-slider-process {
    color: #F3EDE5;
}


html.dark-mode .fx-fleet-slider-process i {
    color: #D49A63;
}


html.dark-mode .fx-fleet-slider-timeline {
    color: #F3EDE5;
}


html.dark-mode .fx-fleet-slider-timeline-track {
    background:
        rgba(243, 230, 208, .15);
}


html.dark-mode .fx-fleet-slider-timeline-track b {
    background: #D49A63;
}


html.dark-mode .fx-fleet-slider-route i {
    background: #1D1D1D;

    border-color: #D49A63;
}


html.dark-mode .fx-fleet-slider-route b {
    background:
        rgba(243, 230, 208, .15);
}


html.dark-mode .fx-fleet-slider-route b::after {
    background: #D49A63;
}


/* Cycle */

html.dark-mode .fx-fleet-slider-cycle span {
    border-color:
        rgba(243, 230, 208, .14);

    color: #F3EDE5;
}


/* Controls */

html.dark-mode .fx-fleet-slider-arrow {
    border-color:
        rgba(243, 230, 208, .14);

    background: transparent;

    color: #F3EDE5;
}


html.dark-mode .fx-fleet-slider-arrow:hover {
    background: #B87333;

    border-color: #B87333;

    color: #FFFFFF;
}


html.dark-mode .fx-fleet-slider-dot {
    color: #AFA79D;
}


html.dark-mode .fx-fleet-slider-dot::after {
    background:
        rgba(243, 230, 208, .14);
}


html.dark-mode .fx-fleet-slider-dot.is-active {
    color: #D49A63;
}


html.dark-mode .fx-fleet-slider-dot.is-active::after {
    background: #D49A63;
}


/* Bottom strip */

html.dark-mode .fx-fleet-slider-strip {
    border-color:
        rgba(243, 230, 208, .13);
}


html.dark-mode .fx-fleet-slider-strip span {
    border-color:
        rgba(243, 230, 208, .13);

    color: #AFA79D;
}


html.dark-mode .fx-fleet-slider-strip span:first-child {
    color: #F3EDE5;
}


html.dark-mode .fx-fleet-slider-strip span:first-child i {
    color: #D49A63;
}

/* =========================================================
   FLEETAXIS — FINAL CTA · DARK MODE
   Scoped component only
========================================================= */

html.dark-mode .fx-final-cta {
    background:
        #171717;
}


html.dark-mode .fx-final-cta-shell {
    background:
        linear-gradient(
            135deg,
            #242424 0%,
            #171717 52%,
            #202020 100%
        );

    border-color:
        rgba(212, 154, 99, 0.38);

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.40);
}


html.dark-mode .fx-final-cta-shell:hover {
    box-shadow:
        0 38px 90px
        rgba(0, 0, 0, 0.52);
}


html.dark-mode .fx-final-cta-grid {
    opacity:
        0.18;

    background-image:
        linear-gradient(
            rgba(243, 230, 208, 0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243, 230, 208, 0.12) 1px,
            transparent 1px
        );
}


html.dark-mode .fx-final-cta-title {
    color:
        #F8F5F0;
}


html.dark-mode .fx-final-cta-title span {
    color:
        #E2B487;
}


html.dark-mode .fx-final-cta-description {
    color:
        #C8C0B7;
}


html.dark-mode .fx-final-cta-eyebrow {
    color:
        #E2B487;
}


html.dark-mode .fx-final-cta-status {
    background:
        #E2B487;

    box-shadow:
        0 0 0 5px
        rgba(226, 180, 135, 0.10),
        0 0 14px
        rgba(226, 180, 135, 0.75);
}


html.dark-mode .fx-final-cta-line {
    background:
        rgba(226, 180, 135, 0.50);
}


html.dark-mode .fx-final-cta-button-primary {
    background:
        #B87333;

    border-color:
        #B87333;

    color:
        #FFFFFF;
}


html.dark-mode .fx-final-cta-button-primary:hover {
    background:
        #985A25;

    border-color:
        #985A25;

    color:
        #FFFFFF;
}


html.dark-mode .fx-final-cta-button-secondary {
    background:
        rgba(243, 230, 208, 0.07);

    border-color:
        rgba(243, 230, 208, 0.28);

    color:
        #F8F5F0;
}


html.dark-mode .fx-final-cta-button-secondary:hover {
    background:
        rgba(243, 230, 208, 0.13);

    border-color:
        #D49A63;

    color:
        #FFFFFF;
}


html.dark-mode .fx-final-cta-metrics {
    border-top-color:
        rgba(243, 230, 208, 0.13);
}


html.dark-mode .fx-final-cta-metric-icon {
    background:
        rgba(212, 154, 99, 0.08);

    border-color:
        rgba(212, 154, 99, 0.30);

    color:
        #E2B487;
}


html.dark-mode .fx-final-cta-metric-copy strong {
    color:
        #F8F5F0;
}


html.dark-mode .fx-final-cta-metric-copy small {
    color:
        #AAA198;
}


html.dark-mode .fx-final-cta-divider {
    background:
        rgba(243, 230, 208, 0.14);
}


html.dark-mode .fx-final-cta-status-row {
    color:
        #AAA198;
}


html.dark-mode .fx-final-cta-live-dot {
    background:
        #8BBF8B;
}

/* =========================================================
   FLEETAXIS — FOOTER · DARK MODE
   Scoped component only
========================================================= */

html.dark-mode .fx-footer {

    --fx-footer-bg: #111111;

    --fx-footer-surface: #191919;

    --fx-footer-surface-hover: #222222;

    --fx-footer-heading: #F8F5F0;

    --fx-footer-text: #D3CCC3;

    --fx-footer-soft: #9F9890;

    --fx-footer-border:
        rgba(243, 230, 208, 0.12);

    --fx-footer-copper: #D49A63;

    --fx-footer-copper-light: #E2B487;

    background:
        var(--fx-footer-bg);

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

    border-top-color:
        rgba(212, 154, 99, 0.34);
}


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

html.dark-mode .fx-footer-brand-name {
    color:
        #F8F5F0;
}


html.dark-mode .fx-footer-logo-car {
    fill:
        #FFFFFF;
}


/* =========================================================
   NEWSLETTER
========================================================= */

html.dark-mode .fx-footer-newsletter-form {
    background:
        rgba(255, 255, 255, 0.035);

    border-color:
        rgba(243, 230, 208, 0.16);
}


html.dark-mode .fx-footer-newsletter-form:focus-within {
    background:
        rgba(255, 255, 255, 0.055);

    border-color:
        rgba(226, 180, 135, 0.65);
}


html.dark-mode .fx-footer-newsletter-form input {
    color:
        #F8F5F0;
}


html.dark-mode .fx-footer-newsletter-form input::placeholder {
    color:
        #918B84;
}


html.dark-mode .fx-footer-newsletter-form button {
    background:
        #B87333;

    color:
        #FFFFFF;
}


html.dark-mode .fx-footer-newsletter-form button:hover {
    background:
        #985A25;
}


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

html.dark-mode .fx-footer-column li a {
    color:
        #A9A198;
}


html.dark-mode .fx-footer-column li a:hover {
    color:
        #E2B487;
}


/* =========================================================
   CONTACT
========================================================= */

html.dark-mode .fx-footer-contact-icon {
    background:
        rgba(212, 154, 99, 0.08);

    border-color:
        rgba(226, 180, 135, 0.25);

    color:
        #E2B487;
}


html.dark-mode .fx-footer-contact-item strong {
    color:
        #D3CCC3;
}


html.dark-mode .fx-footer-contact-item small {
    color:
        #918B84;
}


html.dark-mode .fx-footer-contact-item:hover strong {
    color:
        #F8F5F0;
}


/* =========================================================
   OPERATIONS
========================================================= */

html.dark-mode .fx-footer-operation-status {
    color:
        #D3CCC3;
}


html.dark-mode .fx-footer-dashboard-link {
    color:
        #E2B487;
}


html.dark-mode .fx-footer-dashboard-link:hover {
    color:
        #F0C49D;
}


/* =========================================================
   SOCIAL
========================================================= */

html.dark-mode .fx-footer-socials a {
    background:
        rgba(255, 255, 255, 0.025);

    border-color:
        rgba(243, 230, 208, 0.14);

    color:
        #A9A198;
}


html.dark-mode .fx-footer-socials a:hover {
    background:
        rgba(212, 154, 99, 0.09);

    border-color:
        rgba(226, 180, 135, 0.55);

    color:
        #E2B487;
}


/* =========================================================
   LEGAL / COPYRIGHT
========================================================= */

html.dark-mode .fx-footer-copyright,
html.dark-mode .fx-footer-legal a {
    color:
        #918B84;
}


html.dark-mode .fx-footer-legal a:hover {
    color:
        #E2B487;
}


html.dark-mode .fx-footer-form-message {
    color:
        #E2B487;
}

/* =========================================================
   FLEETAXIS USER DASHBOARD — DARK MODE ONLY
========================================================= */

html.dark-mode .fx-ud-topbar {
    background: #171717;
    border-bottom-color: rgba(243,230,208,.12);
    box-shadow: 0 4px 18px rgba(0,0,0,.28);
}

html.dark-mode .fx-ud-sidebar {
    background: #111111;
    color: #F3EDE5;
    scrollbar-color: rgba(212,154,99,.48) transparent;
}

html.dark-mode .fx-ud-brand .fx-brand-name,
html.dark-mode .fx-ud-profile-copy strong {
    color: #F8F5F0;
}

html.dark-mode .fx-ud-profile {
    border-color: rgba(243,230,208,.12);
    background: rgba(255,255,255,.035);
}

html.dark-mode .fx-ud-profile-copy span,
html.dark-mode .fx-ud-sidebar-help small,
html.dark-mode .fx-ud-nav-label {
    color: #AFA79D;
}

html.dark-mode .fx-ud-nav-item {
    color: #D3CCC3;
}

html.dark-mode .fx-ud-nav-item > i:first-child {
    color: #D49A63;
}

html.dark-mode .fx-ud-nav-item:hover {
    background: #302A24;
    color: #FFFFFF;
}

/* Keep the same active copper highlight. */
html.dark-mode .fx-ud-nav-item.active {
    background: #B87333;
    color: #FFFFFF;
    box-shadow: inset 3px 0 0 rgba(255,255,255,.24);
}

html.dark-mode .fx-ud-nav-item.active > i:first-child,
html.dark-mode .fx-ud-nav-item.active .fx-ud-nav-arrow {
    color: #FFFFFF;
}

html.dark-mode .fx-ud-nav-item.active:hover {
    background: #985A25;
    color: #FFFFFF;
}

html.dark-mode .fx-ud-nav-badge {
    background: rgba(212,154,99,.12);
    border-color: rgba(212,154,99,.25);
    color: #E2B487;
}

html.dark-mode .fx-ud-nav-item.active .fx-ud-nav-badge {
    color: #FFFFFF;
    background: rgba(255,255,255,.15);
}

html.dark-mode .fx-ud-nav-divider,
html.dark-mode .fx-ud-sidebar-bottom {
    border-color: rgba(243,230,208,.11);
}

html.dark-mode .fx-ud-sidebar-help strong {
    color: #F3EDE5;
}

html.dark-mode .fx-ud-help-icon {
    color: #E2B487;
    border-color: rgba(212,154,99,.28);
}

html.dark-mode .fx-ud-sidebar-help > a {
    color: #AFA79D;
}

html.dark-mode .fx-ud-mobile-logout {
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode .fx-ud-mobile-logout:hover {
    background: #985A25;
    color: #FFFFFF;
}

/* Main workspace background and headings */
html.dark-mode .fx-ud-main {
    background: #171717;
    color: #F3EDE5;
}

html.dark-mode .fx-ud-page-head h1,
html.dark-mode .fx-ud-welcome-row h2,
html.dark-mode .fx-ud-toolbar h2,
html.dark-mode .fx-ud-panel-head h3,
html.dark-mode .fx-ud-small-panel-title,
html.dark-mode .fx-ud-stat-number,
html.dark-mode .fx-ud-status-legend strong,
html.dark-mode .fx-ud-document-card h3,
html.dark-mode .fx-ud-support-contact h3,
html.dark-mode .fx-ud-security-panel h3 {
    color: #F8F5F0;
}

html.dark-mode .fx-ud-page-head p,
html.dark-mode .fx-ud-welcome-row > div > p:last-child,
html.dark-mode .fx-ud-panel-head p,
html.dark-mode .fx-ud-toolbar p,
html.dark-mode .fx-ud-breadcrumb {
    color: #B8B0A6;
}

html.dark-mode .fx-ud-breadcrumb span:last-child,
html.dark-mode .fx-ud-kicker,
html.dark-mode .fx-ud-text-button,
html.dark-mode .fx-ud-inline-link {
    color: #E2B487;
}

html.dark-mode .fx-ud-demo-chip {
    color: #E2B487;
    background: rgba(212,154,99,.09);
    border-color: rgba(212,154,99,.27);
}

html.dark-mode .fx-ud-action-button,
html.dark-mode .fx-ud-date-chip,
html.dark-mode .fx-ud-stat-card,
html.dark-mode .fx-ud-panel,
html.dark-mode .fx-ud-document-card {
    background: #1D1D1D;
    border-color: rgba(243,230,208,.13);
    box-shadow: 0 5px 18px rgba(0,0,0,.12);
}

html.dark-mode .fx-ud-action-button {
    color: #F3EDE5;
}

html.dark-mode .fx-ud-action-button:hover {
    border-color: #D49A63;
    color: #E2B487;
}

html.dark-mode .fx-ud-date-chip,
html.dark-mode .fx-ud-stat-top,
html.dark-mode .fx-ud-stat-foot,
html.dark-mode .fx-ud-table-note,
html.dark-mode .fx-ud-lease-meta,
html.dark-mode .fx-ud-document-card p,
html.dark-mode .fx-ud-inline-notice,
html.dark-mode .fx-ud-chart-legend,
html.dark-mode .fx-ud-chart-gridline span,
html.dark-mode .fx-ud-chart-value,
html.dark-mode .fx-ud-mix-row {
    color: #B8B0A6;
}

html.dark-mode .fx-ud-stat-icon,
html.dark-mode .fx-ud-vehicle-icon,
html.dark-mode .fx-ud-document-icon,
html.dark-mode .fx-ud-activity-icon,
html.dark-mode .fx-ud-support-big-icon,
html.dark-mode .fx-ud-security-icon {
    background: rgba(212,154,99,.09);
    border-color: rgba(212,154,99,.25);
    color: #E2B487;
}

html.dark-mode .fx-ud-mini-bar,
html.dark-mode .fx-ud-progress,
html.dark-mode .fx-ud-term-progress,
html.dark-mode .fx-ud-mix-row > div {
    background: rgba(243,230,208,.12);
}

html.dark-mode .fx-ud-status-legend > div,
html.dark-mode .fx-ud-category-strip span,
html.dark-mode .fx-ud-category-strip strong {
    color: #D3CCC3;
}

html.dark-mode .fx-ud-category-strip span {
    border-color: rgba(243,230,208,.13);
}

html.dark-mode .fx-ud-donut > div {
    background: #1D1D1D;
    border-color: rgba(243,230,208,.13);
}

/* Text inside panels */
html.dark-mode .fx-ud-attention-copy strong,
html.dark-mode .fx-ud-activity-item strong,
html.dark-mode .fx-ud-lease-row-top strong,
html.dark-mode .fx-ud-table td strong,
html.dark-mode .fx-ud-route-stat strong,
html.dark-mode .fx-ud-location-item strong,
html.dark-mode .fx-ud-notification-copy strong,
html.dark-mode .fx-ud-ticket strong,
html.dark-mode .fx-ud-profile-edit strong,
html.dark-mode .fx-ud-switch-row strong,
html.dark-mode .fx-ud-security-row > span:first-child {
    color: #F3EDE5;
}

html.dark-mode .fx-ud-attention-copy small,
html.dark-mode .fx-ud-activity-item small,
html.dark-mode .fx-ud-lease-row-top small,
html.dark-mode .fx-ud-table td,
html.dark-mode .fx-ud-table td small,
html.dark-mode .fx-ud-table th,
html.dark-mode .fx-ud-location-item small,
html.dark-mode .fx-ud-notification-copy p,
html.dark-mode .fx-ud-notification-time,
html.dark-mode .fx-ud-ticket small,
html.dark-mode .fx-ud-profile-edit small,
html.dark-mode .fx-ud-switch-row small,
html.dark-mode .fx-ud-support-contact > p,
html.dark-mode .fx-ud-security-panel > p {
    color: #B8B0A6;
}

html.dark-mode .fx-ud-table th,
html.dark-mode .fx-ud-table td,
html.dark-mode .fx-ud-lease-row,
html.dark-mode .fx-ud-activity-item,
html.dark-mode .fx-ud-attention-item,
html.dark-mode .fx-ud-location-item,
html.dark-mode .fx-ud-route-stat,
html.dark-mode .fx-ud-notification,
html.dark-mode .fx-ud-ticket,
html.dark-mode .fx-ud-switch-row,
html.dark-mode .fx-ud-security-row {
    border-color: rgba(243,230,208,.12);
}

html.dark-mode .fx-ud-table tbody tr:hover {
    background: rgba(212,154,99,.055);
}

/* Status labels */
html.dark-mode .fx-ud-priority,
html.dark-mode .fx-ud-status-pill {
    border-color: transparent;
}

html.dark-mode .priority-high {
    background: rgba(216,121,104,.16);
    border-color: rgba(216,121,104,.25);
    color: #F1A99B;
}

html.dark-mode .priority-medium {
    background: rgba(215,175,117,.15);
    border-color: rgba(215,175,117,.26);
    color: #E7C48F;
}

html.dark-mode .priority-low {
    background: rgba(166,177,188,.12);
    border-color: rgba(166,177,188,.2);
    color: #C0C8CF;
}

html.dark-mode .status-active {
    background: rgba(121,177,126,.14);
    border-color: rgba(121,177,126,.25);
    color: #A9D4AD;
}

html.dark-mode .status-available {
    background: rgba(129,166,199,.14);
    border-color: rgba(129,166,199,.25);
    color: #B5D5F2;
}

html.dark-mode .status-due {
    background: rgba(212,154,99,.14);
    border-color: rgba(212,154,99,.28);
    color: #E2B487;
}

html.dark-mode .status-planned {
    background: rgba(166,177,188,.11);
    border-color: rgba(166,177,188,.2);
    color: #C0C8CF;
}

/* Forms and inputs */
html.dark-mode .fx-ud-lease-meta,
html.dark-mode .fx-ud-days,
html.dark-mode .fx-ud-ticket-id {
    color: #E2B487;
}

html.dark-mode .fx-ud-primary-button {
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode .fx-ud-primary-button:hover {
    background: #985A25;
    color: #FFFFFF;
}

html.dark-mode .fx-ud-secondary-button {
    background: #202020;
    border-color: rgba(243,230,208,.15);
    color: #F3EDE5;
}

html.dark-mode .fx-ud-secondary-button:hover {
    border-color: #D49A63;
    color: #E2B487;
}

html.dark-mode .fx-ud-search,
html.dark-mode .fx-ud-filter-label select,
html.dark-mode .fx-ud-form-grid input,
html.dark-mode .fx-ud-form-grid select,
html.dark-mode .fx-ud-form-grid textarea {
    background: #151515;
    border-color: rgba(243,230,208,.15);
    color: #F3EDE5;
}

html.dark-mode .fx-ud-search input {
    color: #F3EDE5;
}

html.dark-mode .fx-ud-search input::placeholder,
html.dark-mode .fx-ud-form-grid input::placeholder,
html.dark-mode .fx-ud-form-grid textarea::placeholder {
    color: #AFA79D;
}

html.dark-mode .fx-ud-search:focus-within,
html.dark-mode .fx-ud-form-grid input:focus,
html.dark-mode .fx-ud-form-grid select:focus,
html.dark-mode .fx-ud-form-grid textarea:focus {
    border-color: #D49A63;
    box-shadow: 0 0 0 3px rgba(212,154,99,.12);
}

html.dark-mode .fx-ud-icon-close {
    background: transparent;
    border-color: rgba(243,230,208,.15);
    color: #F3EDE5;
}

html.dark-mode .fx-ud-inline-notice {
    border-color: rgba(212,154,99,.22);
    background: rgba(212,154,99,.07);
}

html.dark-mode .fx-ud-inline-notice i,
html.dark-mode .fx-ud-text-button i {
    color: #E2B487;
}

html.dark-mode .fx-ud-notification-icon {
    filter: brightness(1.15);
}

html.dark-mode .fx-ud-support-contact > a {
    color: #F3EDE5;
}

html.dark-mode .fx-ud-support-contact > a i {
    color: #E2B487;
}

html.dark-mode .fx-ud-support-availability {
    color: #D3CCC3;
}

html.dark-mode .fx-ud-support-contact > small {
    color: #AFA79D;
    border-color: rgba(243,230,208,.12);
}

html.dark-mode .fx-ud-toast {
    background: #242424;
    border-color: rgba(212,154,99,.32);
    color: #F8F5F0;
}

html.dark-mode .fx-ud-main-footer {
    color: #AFA79D;
}

html.dark-mode .fx-ud-stat-decoration {
    color: rgba(212,154,99,.07);
}

/* =========================================================
   FLEETAXIS — HOME 2 · HERO — DARK MODE
   Paste at the end of your existing dark.css.
========================================================= */

html.dark-mode .fx-h2-hero { background: #0E0E0E; }

html.dark-mode .fx-h2-media { background: #0E0E0E; }

html.dark-mode .fx-h2-video { filter: brightness(.82) contrast(1.05); }

html.dark-mode .fx-h2-shade {
    background:
        linear-gradient(180deg,
            rgba(8, 8, 8, .90) 0%,
            rgba(8, 8, 8, .66) 30%,
            rgba(8, 8, 8, .24) 58%,
            rgba(8, 8, 8, .62) 82%,
            rgba(8, 8, 8, .92) 100%),
        radial-gradient(ellipse at 50% 100%, rgba(212, 154, 99, .2), transparent 60%);
}

html.dark-mode .fx-h2-hero {
    --h2-glass: rgba(10, 10, 10, .66);
    --h2-line: rgba(243, 230, 208, .2);
}

html.dark-mode .fx-h2-eyebrow { background: rgba(243, 230, 208, .07); }

html.dark-mode .fx-h2-field select option { background: #1B1B1B; color: #F8F5F0; }

html.dark-mode .fx-h2-field:hover { background: rgba(243, 230, 208, .06); }

html.dark-mode .fx-h2-btn,
html.dark-mode .fx-h2-submit { color: #151515; box-shadow: 0 10px 28px rgba(212, 154, 99, .26); }

html.dark-mode .fx-h2-progress { background: rgba(243, 230, 208, .12); }


@media (max-width: 767px) {

    html.dark-mode .fx-h2-shade {
        background:
            linear-gradient(180deg,
                rgba(8, 8, 8, .92) 0%,
                rgba(8, 8, 8, .82) 38%,
                rgba(8, 8, 8, .60) 62%,
                rgba(8, 8, 8, .76) 82%,
                rgba(8, 8, 8, .94) 100%),
            radial-gradient(ellipse at 50% 100%, rgba(212, 154, 99, .18), transparent 60%);
    }
}

/* =========================================================
   FLEETAXIS ADMIN DASHBOARD — DARK MODE
========================================================= */

html.dark-mode .fx-ad-topbar {
    background: #171717;
    border-bottom-color: rgba(243,230,208,.12);
    box-shadow: 0 4px 18px rgba(0,0,0,.28);
}

html.dark-mode .fx-ad-app,
html.dark-mode .fx-ad-main {
    background: #171717;
    color: #F3EDE5;
}

html.dark-mode .fx-ad-sidebar {
    background: #111111;
    color: #F3EDE5;
    scrollbar-color: rgba(212,154,99,.42) transparent;
}

html.dark-mode .fx-ad-brand .fx-brand-name,
html.dark-mode .fx-ad-profile-copy strong {
    color: #F8F5F0;
}

html.dark-mode .fx-ad-brand .fx-logo-pin {
    fill: #D49A63;
}

html.dark-mode .fx-ad-brand .fx-logo-car {
    fill: #FFFFFF;
}

html.dark-mode .fx-ad-brand .fx-logo-window,
html.dark-mode .fx-ad-brand .fx-logo-wheel {
    fill: #E2B487;
}

html.dark-mode .fx-ad-profile {
    border-color: rgba(243,230,208,.12);
    background: rgba(255,255,255,.035);
}

html.dark-mode .fx-ad-profile-copy span,
html.dark-mode .fx-ad-sidebar-support small,
html.dark-mode .fx-ad-nav-heading {
    color: #AFA79D;
}

html.dark-mode .fx-ad-workspace-label {
    color: #E2B487;
}

html.dark-mode .fx-ad-nav-item {
    color: #D3CCC3;
}

html.dark-mode .fx-ad-nav-item > i:first-child {
    color: #D49A63;
}

html.dark-mode .fx-ad-nav-item:hover {
    background: #302A24;
    color: #FFFFFF;
}

/* Same copper active state in dark mode */
html.dark-mode .fx-ad-nav-item.active {
    background: #B87333;
    color: #FFFFFF;
    box-shadow: inset 3px 0 0 rgba(255,255,255,.24);
}

html.dark-mode .fx-ad-nav-item.active > i:first-child,
html.dark-mode .fx-ad-nav-item.active .fx-ad-nav-badge {
    color: #FFFFFF;
}

html.dark-mode .fx-ad-nav-item.active:hover {
    background: #985A25;
    color: #FFFFFF;
}

html.dark-mode .fx-ad-nav-badge {
    border-color: rgba(212,154,99,.25);
    background: rgba(212,154,99,.12);
    color: #E2B487;
}

html.dark-mode .fx-ad-nav-item.active .fx-ad-nav-badge {
    border-color: rgba(255,255,255,.23);
    background: rgba(255,255,255,.14);
    color: #FFFFFF;
}

html.dark-mode .fx-ad-sidebar-footer {
    border-top-color: rgba(243,230,208,.11);
}

html.dark-mode .fx-ad-sidebar-support strong {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-sidebar-support-icon {
    border-color: rgba(212,154,99,.25);
    color: #E2B487;
}

html.dark-mode .fx-ad-mobile-logout {
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode .fx-ad-mobile-logout:hover {
    background: #985A25;
    color: #FFFFFF;
}

/* Main headers */
html.dark-mode .fx-ad-page-header h1,
html.dark-mode .fx-ad-welcome h2,
html.dark-mode .fx-ad-toolbar h2,
html.dark-mode .fx-ad-panel-header h3,
html.dark-mode .fx-ad-small-title {
    color: #F8F5F0;
}

html.dark-mode .fx-ad-page-header p,
html.dark-mode .fx-ad-breadcrumb,
html.dark-mode .fx-ad-welcome p,
html.dark-mode .fx-ad-toolbar p,
html.dark-mode .fx-ad-panel-header p {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-breadcrumb i,
html.dark-mode .fx-ad-breadcrumb span:last-child,
html.dark-mode .fx-ad-eyebrow {
    color: #E2B487;
}

html.dark-mode .fx-ad-welcome h2 span {
    color: #D49A63;
}

html.dark-mode .fx-ad-demo-label,
html.dark-mode .fx-ad-count-pill {
    border-color: rgba(212,154,99,.25);
    background: rgba(212,154,99,.09);
    color: #E2B487;
}

html.dark-mode .fx-ad-notification-button,
html.dark-mode .fx-ad-date-chip,
html.dark-mode .fx-ad-kpi,
html.dark-mode .fx-ad-panel,
html.dark-mode .fx-ad-provider-card {
    border-color: rgba(243,230,208,.13);
    background: #1D1D1D;
    box-shadow: 0 5px 18px rgba(0,0,0,.14);
}

html.dark-mode .fx-ad-notification-button {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-notification-button:hover {
    border-color: #D49A63;
    color: #E2B487;
}

html.dark-mode .fx-ad-kpi-top,
html.dark-mode .fx-ad-kpi > small,
html.dark-mode .fx-ad-kpi > strong {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-kpi-top {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-kpi-icon,
html.dark-mode .fx-ad-priority-icon,
html.dark-mode .fx-ad-activity-icon,
html.dark-mode .fx-ad-provider-icon {
    border-color: rgba(212,154,99,.24);
    background: rgba(212,154,99,.09);
    color: #E2B487;
}

html.dark-mode .fx-ad-link-button,
html.dark-mode .fx-ad-text-button {
    color: #E2B487;
}

html.dark-mode .fx-ad-link-button:hover,
html.dark-mode .fx-ad-text-button:hover {
    color: #F0C49D;
}

html.dark-mode .fx-ad-health-legend > div,
html.dark-mode .fx-ad-category-strip span,
html.dark-mode .fx-ad-activity-row time {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-health-legend strong,
html.dark-mode .fx-ad-category-strip strong {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-category-strip span {
    border-color: rgba(243,230,208,.13);
}

html.dark-mode .fx-ad-donut > div {
    border-color: rgba(243,230,208,.13);
    background: #1D1D1D;
}

html.dark-mode .fx-ad-donut strong {
    color: #F8F5F0;
}

html.dark-mode .fx-ad-donut span {
    color: #B8B0A6;
}

/* Data tables */
html.dark-mode .fx-ad-table th {
    border-bottom-color: rgba(243,230,208,.13);
    background: rgba(212,154,99,.045);
    color: #B8B0A6;
}

html.dark-mode .fx-ad-table td {
    border-bottom-color: rgba(243,230,208,.12);
    color: #B8B0A6;
}

html.dark-mode .fx-ad-table td strong {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-table td small {
    color: #AFA79D;
}

html.dark-mode .fx-ad-table tbody tr:hover {
    background: rgba(212,154,99,.05);
}

html.dark-mode .fx-ad-table-note,
html.dark-mode .fx-ad-note {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-pill {
    border-color: transparent;
}

html.dark-mode .priority-high {
    background: rgba(216,121,104,.16);
    border-color: rgba(216,121,104,.25);
    color: #F1A99B;
}

html.dark-mode .priority-normal {
    background: rgba(215,175,117,.15);
    border-color: rgba(215,175,117,.25);
    color: #E7C48F;
}

html.dark-mode .status-active {
    background: rgba(121,177,126,.14);
    border-color: rgba(121,177,126,.25);
    color: #A9D4AD;
}

html.dark-mode .status-available {
    background: rgba(129,166,199,.14);
    border-color: rgba(129,166,199,.25);
    color: #B5D5F2;
}

html.dark-mode .status-due {
    background: rgba(212,154,99,.14);
    border-color: rgba(212,154,99,.28);
    color: #E2B487;
}

html.dark-mode .status-planned {
    background: rgba(166,177,188,.11);
    border-color: rgba(166,177,188,.2);
    color: #C0C8CF;
}

html.dark-mode .fx-ad-row-action,
html.dark-mode .fx-ad-inline-select,
html.dark-mode .fx-ad-filter-label select,
html.dark-mode .fx-ad-search,
html.dark-mode .fx-ad-form-grid input,
html.dark-mode .fx-ad-form-grid select,
html.dark-mode .fx-ad-form-grid textarea {
    border-color: rgba(243,230,208,.15);
    background: #151515;
    color: #F3EDE5;
}

html.dark-mode .fx-ad-search input {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-search input::placeholder,
html.dark-mode .fx-ad-form-grid input::placeholder,
html.dark-mode .fx-ad-form-grid textarea::placeholder {
    color: #AFA79D;
}

html.dark-mode .fx-ad-search:focus-within,
html.dark-mode .fx-ad-form-grid input:focus,
html.dark-mode .fx-ad-form-grid select:focus,
html.dark-mode .fx-ad-form-grid textarea:focus,
html.dark-mode .fx-ad-inline-select:focus {
    border-color: #D49A63;
    box-shadow: 0 0 0 3px rgba(212,154,99,.12);
}

html.dark-mode .fx-ad-primary-button {
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode .fx-ad-primary-button:hover {
    background: #985A25;
    color: #FFFFFF;
}

html.dark-mode .fx-ad-secondary-button {
    border-color: rgba(243,230,208,.15);
    background: #202020;
    color: #F3EDE5;
}

html.dark-mode .fx-ad-secondary-button:hover {
    border-color: #D49A63;
    color: #E2B487;
}

html.dark-mode .fx-ad-close-form {
    border-color: rgba(243,230,208,.15);
    background: transparent;
    color: #F3EDE5;
}

/* Map: retain map-label contrast in both themes */
html.dark-mode .fx-ad-map {
    border-color: rgba(243,230,208,.13);
}

html.dark-mode .fx-ad-map-legend,
html.dark-mode .fx-ad-map-label {
    border-color: rgba(84,91,91,.2);
    background: rgba(250,245,237,.94);
    color: #515957;
}

/* Tracking and providers */
html.dark-mode .fx-ad-summary-row,
html.dark-mode .fx-ad-mix-row {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-summary-row strong,
html.dark-mode .fx-ad-exception strong {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-exception small {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-provider-card h3 {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-provider-card p,
html.dark-mode .fx-ad-provider-card > div {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-provider-card > div {
    border-color: rgba(243,230,208,.12);
}

html.dark-mode .fx-ad-provider-card > div strong {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-provider-card > a {
    color: #E2B487;
}

/* Charts */
html.dark-mode .fx-ad-chart-legend,
html.dark-mode .fx-ad-chart-grid span,
html.dark-mode .fx-ad-chart-bars strong,
html.dark-mode .fx-ad-chart-bars small {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-chart-grid {
    border-top-color: rgba(243,230,208,.14);
}

html.dark-mode .fx-ad-mix-row > div,
html.dark-mode .fx-ad-term-bar {
    background: rgba(243,230,208,.12);
}

html.dark-mode .fx-ad-mix-row strong {
    color: #F3EDE5;
}

/* Notifications */
html.dark-mode .fx-ad-alert-item {
    border-bottom-color: rgba(243,230,208,.12);
}

html.dark-mode .fx-ad-alert-title strong {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-alert-title time,
html.dark-mode .fx-ad-alert-item p {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-alert-icon {
    background: rgba(212,154,99,.09);
}

html.dark-mode .alert-amber { color: #E7C48F; }
html.dark-mode .alert-copper { color: #E2B487; }
html.dark-mode .alert-gray { color: #C0C8CF; }
html.dark-mode .alert-green { color: #A9D4AD; }

/* System settings */
html.dark-mode .fx-ad-settings-toggles > label {
    border-bottom-color: rgba(243,230,208,.12);
}

html.dark-mode .fx-ad-settings-toggles strong {
    color: #F3EDE5;
}

html.dark-mode .fx-ad-settings-toggles small {
    color: #B8B0A6;
}

html.dark-mode .fx-ad-settings-toggles input {
    accent-color: #D49A63;
}

html.dark-mode .fx-ad-main-footer {
    color: #AFA79D;
}

html.dark-mode .fx-ad-toast {
    border-color: rgba(212,154,99,.32);
    background: #242424;
    color: #F8F5F0;
}

/* =========================================================
   FLEETAXIS — HOME 2 · SECTIONS 02 & 03 — DARK MODE
   Paste at the end of your existing dark.css.
========================================================= */


/* ---------- section 02 · featured fleet ---------- */

html.dark-mode .fx-spot-eyebrow { background: #1D1D1D; color: #E2B487; }

html.dark-mode .fx-spot-arrow:hover { color: #E2B487; }

html.dark-mode .fx-spot-panel::before {
    background: radial-gradient(ellipse at 50% 100%, rgba(212, 154, 99, .2), transparent 65%);
}

html.dark-mode .fx-spot-panel.is-active {
    background: #0D0D0D;
    border-color: rgba(212, 154, 99, .45);
    box-shadow: 0 26px 56px rgba(0, 0, 0, .6);
}

html.dark-mode .fx-spot-panel-copper,
html.dark-mode .fx-spot-panel-copper.is-active {
    background: #985A25;
    border-color: #985A25;
}

html.dark-mode .fx-spot-panel-copper::before {
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .16), transparent 65%);
}

html.dark-mode .fx-spot-stage img { filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .65)); }

html.dark-mode .fx-spot-specs { background: rgba(243, 230, 208, .06); }

html.dark-mode .fx-spot-panel-copper .fx-spot-specs { background: rgba(0, 0, 0, .2); }


/* ---------- section 03 · solutions by industry ---------- */

html.dark-mode .fx-sln {
    --sln-bg: #0E0E0E;

    --sln-card-1: #1E1E1E;
    --sln-card-2: #242424;
    --sln-card-3: #2A241E;
    --sln-ink: #F8F5F0;
    --sln-card-soft: #CDC4B6;
    --sln-card-line: rgba(243, 230, 208, .12);
    --sln-card-link: #D49A63;
    --sln-point-bg: rgba(212, 154, 99, .16);
    --sln-point-ink: #D49A63;
}

html.dark-mode .fx-sln-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }

html.dark-mode .fx-sln-tag { background: rgba(243, 230, 208, .07); }

html.dark-mode .fx-sln-num { -webkit-text-stroke-color: rgba(212, 154, 99, .45); }

html.dark-mode .fx-sln-visual {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(212, 154, 99, .22), transparent 62%),
        #0A0A0A;
}

html.dark-mode .fx-sln-btn { background: #D49A63; color: #151515; box-shadow: 0 10px 28px rgba(212, 154, 99, .26); }
html.dark-mode .fx-sln-btn:hover { background: #E2B487; }

/* =========================================================
   FLEETAXIS LOGIN PAGE — DARK MODE ONLY
========================================================= */

html.dark-mode body.fx-login-page {
    --fx-login-error: #FF8E85;

    background: #171717;
    color: #F3EDE5;
}


/* Main card */

html.dark-mode .fx-login-card {
    background: #111111;
    border-color: rgba(243,230,208,.13);

    box-shadow:
        0 25px 75px rgba(0,0,0,.35);
}


/* Left panel stays dark in both modes */

html.dark-mode .fx-login-brand-panel {
    background:
        linear-gradient(
            145deg,
            #202020 0%,
            #151515 58%,
            #211C17 100%
        );

    color: #F8F5F0;
}

html.dark-mode .fx-login-brand-panel::before {
    border-color: rgba(212,154,99,.16);
}

html.dark-mode .fx-login-brand-panel::after {
    opacity: .4;
}

html.dark-mode .fx-login-brand .fx-brand-name {
    color: #F8F5F0;
}

html.dark-mode .fx-login-brand .fx-logo-pin {
    fill: #B87333;
}

html.dark-mode .fx-login-brand .fx-logo-car {
    fill: #FFFFFF;
}

html.dark-mode .fx-login-brand .fx-logo-window,
html.dark-mode .fx-login-brand .fx-logo-wheel {
    fill: #D49A63;
}

html.dark-mode .fx-login-eyebrow {
    color: #E2B487;
}

html.dark-mode .fx-login-intro h1 {
    color: #F8F5F0;
}

html.dark-mode .fx-login-intro h1 span {
    color: #D49A63;
}

html.dark-mode .fx-login-intro p {
    color: #C8C0B7;
}

html.dark-mode .fx-login-capability strong {
    color: #F3EDE5;
}

html.dark-mode .fx-login-capability small,
html.dark-mode .fx-login-brand-bottom {
    color: #AFA79D;
}

html.dark-mode .fx-login-capability-icon {
    border-color: rgba(212,154,99,.28);
    background: rgba(184,115,51,.09);
    color: #E2B487;
}

html.dark-mode .fx-login-capabilities {
    border-top-color: rgba(243,230,208,.14);
}


/* Right panel */

html.dark-mode .fx-login-form-panel {
    background: #111111;
    border-top-color: rgba(243,230,208,.13);
    border-left-color: rgba(243,230,208,.13);
    color: #F3EDE5;
}

html.dark-mode .fx-login-form-heading h2 {
    color: #F8F5F0;
}

html.dark-mode .fx-login-form-heading p {
    color: #B8B0A6;
}

html.dark-mode .fx-login-form-kicker {
    color: #E2B487;
}


/* Top controls */

html.dark-mode .fx-login-controls .fx-icon-button,
html.dark-mode .fx-login-controls .fx-rtl-button {
    border-color: rgba(243,230,208,.15);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode .fx-login-controls .fx-icon-button:hover,
html.dark-mode .fx-login-controls .fx-rtl-button:hover {
    border-color: #D49A63;
    background: #302A24;
    color: #E2B487;
}


/* Form labels */

html.dark-mode .fx-login-field > label,
html.dark-mode .fx-login-label-row > label {
    color: #F3EDE5;
}

html.dark-mode .fx-login-forgot {
    color: #E2B487;
}

html.dark-mode .fx-login-forgot:hover {
    color: #F0C49D;
}


/* Inputs */

html.dark-mode .fx-login-input-wrap {
    border-color: rgba(243,230,208,.17);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode .fx-login-input-wrap:focus-within {
    border-color: #D49A63;
    box-shadow: 0 0 0 3px rgba(212,154,99,.13);
}

html.dark-mode .fx-login-input-icon {
    color: #E2B487;
}

html.dark-mode .fx-login-input-wrap input {
    background: transparent;
    color: #F8F5F0;
    caret-color: #E2B487;
}

html.dark-mode .fx-login-input-wrap input::placeholder {
    color: #AAA198;
    opacity: 1;
}

html.dark-mode .fx-login-password-toggle {
    color: #B8B0A6;
}

html.dark-mode .fx-login-password-toggle:hover {
    background: #302A24;
    color: #E2B487;
}


/* Error fields retain clearly visible red feedback */

html.dark-mode .fx-login-field.has-error .fx-login-error {
    color: #FF8E85;
}

html.dark-mode .fx-login-field.has-error .fx-login-input-wrap {
    border-color: #FF8E85;

    background:
        color-mix(
            in srgb,
            #FF8E85 6%,
            #1D1D1D
        );

    box-shadow: 0 0 0 2px rgba(255,142,133,.08);
}

html.dark-mode .fx-login-field.has-error .fx-login-input-icon {
    color: #FF8E85;
}

html.dark-mode .fx-login-form-message {
    border-color: rgba(255,142,133,.3);
    background: rgba(255,142,133,.08);
    color: #FFAAA3;
}

html.dark-mode .fx-login-form-message.is-success {
    border-color: rgba(121,177,126,.3);
    background: rgba(121,177,126,.09);
    color: #A9D4AD;
}

html.dark-mode .fx-login-form-message.is-info {
    border-color: rgba(212,154,99,.28);
    background: rgba(212,154,99,.09);
    color: #E2B487;
}


/* Remember me */

html.dark-mode .fx-login-remember {
    color: #C8C0B7;
}

html.dark-mode .fx-login-checkmark {
    border-color: rgba(243,230,208,.23);
    background: #1D1D1D;
}

html.dark-mode .fx-login-remember input:checked + .fx-login-checkmark {
    border-color: #B87333;
    background: #B87333;
}


/* Sign-in button */

html.dark-mode .fx-login-submit {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode .fx-login-submit:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;

    box-shadow:
        0 8px 22px rgba(0,0,0,.28);
}


/* Social sign-in options */

html.dark-mode .fx-login-divider span {
    background: rgba(243,230,208,.15);
}

html.dark-mode .fx-login-divider p {
    color: #AAA198;
}

html.dark-mode .fx-login-social {
    border-color: rgba(243,230,208,.15);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode .fx-login-social:hover {
    border-color: #D49A63;
    background: #302A24;
    color: #E2B487;
}


/* Signup link and trust note */

html.dark-mode .fx-login-signup {
    color: #B8B0A6;
}

html.dark-mode .fx-login-signup a {
    color: #E2B487;
}

html.dark-mode .fx-login-signup a:hover {
    color: #F0C49D;
}

html.dark-mode .fx-login-trust-note {
    border-top-color: rgba(243,230,208,.13);
    color: #AFA79D;
}

html.dark-mode .fx-login-trust-note i {
    color: #E2B487;
}


/* Ensure panel remains readable when stacked */

@media (max-width: 850px) {
    html.dark-mode .fx-login-form-panel {
        border-left: 0;
        border-top-color: rgba(243,230,208,.13);
    }
}

/* =========================================================
   FLEETAXIS — HOME 2 · SECTIONS 04 & 05 — DARK MODE
   Paste at the end of your existing dark.css.

   Light-mode text already follows your colour tokens, which
   flip automatically. These rules only lift the small copper
   text, card surfaces and button text so every label stays
   readable on the dark backgrounds.
========================================================= */


/* ---------- shared tokens ---------- */

html.dark-mode .fx-mp {
    --mp-accent: #E2B487;
    --mp-tint: rgba(212, 154, 99, .14);
}

html.dark-mode .fx-lt {
    --lt-accent: #E2B487;
    --lt-tint: rgba(212, 154, 99, .16);
}


/* ---------- section 04 · maintenance planner ---------- */

html.dark-mode .fx-mp { background: #171717; }

html.dark-mode .fx-mp-eyebrow,
html.dark-mode .fx-lt-eyebrow { background: #1D1D1D; color: #E2B487; }

html.dark-mode .fx-mp-board {
    background: #1D1D1D;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

html.dark-mode .fx-mp-tab.is-active { color: #151515; }

html.dark-mode .fx-mp-slot.is-open:hover { background: rgba(212, 154, 99, .14); }

html.dark-mode .fx-mp-stat-num em { color: #E2B487; }


/* ---------- section 05 · lease term tracker ---------- */

html.dark-mode .fx-lt { background: #1B1917; }

html.dark-mode .fx-lt-glow {
    background: radial-gradient(circle, rgba(212, 154, 99, .2), transparent 68%);
}

html.dark-mode .fx-lt-chart,
html.dark-mode .fx-lt-detail {
    background: #1D1D1D;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

html.dark-mode .fx-lt-today b { color: #151515; }

html.dark-mode .fx-lt-stat-num em { color: #E2B487; }

/* =========================================================
   FLEETAXIS SIGN-UP PAGE — DARK MODE
========================================================= */

html.dark-mode body.fx-signup-page {
    --fx-signup-error: #FF8E85;

    background: #171717;
    color: #F3EDE5;
}


/* Main container */

html.dark-mode body.fx-signup-page .fx-signup-card {
    border-color: rgba(243,230,208,.13);
    background: #111111;
    box-shadow: 0 25px 75px rgba(0,0,0,.35);
}


/* Keep the brand panel dark in both modes */

html.dark-mode body.fx-signup-page .fx-signup-brand-panel {
    background:
        linear-gradient(
            145deg,
            #202020 0%,
            #151515 58%,
            #211C17 100%
        );

    color: #F8F5F0;
}

html.dark-mode body.fx-signup-page .fx-signup-brand-panel::before {
    border-color: rgba(212,154,99,.16);
}

html.dark-mode body.fx-signup-page .fx-signup-brand-panel::after {
    opacity: .4;
}

html.dark-mode body.fx-signup-page .fx-signup-brand .fx-brand-name,
html.dark-mode body.fx-signup-page .fx-signup-intro h1 {
    color: #F8F5F0;
}

html.dark-mode body.fx-signup-page .fx-signup-brand .fx-logo-pin {
    fill: #B87333;
}

html.dark-mode body.fx-signup-page .fx-signup-brand .fx-logo-car {
    fill: #FFFFFF;
}

html.dark-mode body.fx-signup-page .fx-signup-brand .fx-logo-window,
html.dark-mode body.fx-signup-page .fx-signup-brand .fx-logo-wheel {
    fill: #D49A63;
}

html.dark-mode body.fx-signup-page .fx-signup-eyebrow,
html.dark-mode body.fx-signup-page .fx-signup-intro h1 span {
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-intro > p {
    color: #C8C0B7;
}

html.dark-mode body.fx-signup-page .fx-signup-feature h3 {
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-feature p,
html.dark-mode body.fx-signup-page .fx-signup-brand-bottom p {
    color: #AFA79D;
}

html.dark-mode body.fx-signup-page .fx-signup-feature-icon {
    border-color: rgba(212,154,99,.28);
    background: rgba(184,115,51,.09);
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-feature-list {
    border-top-color: rgba(243,230,208,.14);
}


/* Right panel */

html.dark-mode body.fx-signup-page .fx-signup-form-panel {
    border-left-color: rgba(243,230,208,.13);
    background: #111111;
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-form-heading h2 {
    color: #F8F5F0;
}

html.dark-mode body.fx-signup-page .fx-signup-form-heading > span {
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-form-heading p {
    color: #B8B0A6;
}


/* Top controls */

html.dark-mode body.fx-signup-page .fx-signup-controls .fx-icon-button,
html.dark-mode body.fx-signup-page .fx-signup-controls .fx-rtl-button {
    border-color: rgba(243,230,208,.15);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-controls .fx-icon-button:hover,
html.dark-mode body.fx-signup-page .fx-signup-controls .fx-rtl-button:hover {
    border-color: #D49A63;
    background: #302A24;
    color: #E2B487;
}


/* Field labels */

html.dark-mode body.fx-signup-page .fx-signup-field > label {
    color: #F3EDE5;
}


/* Inputs */

html.dark-mode body.fx-signup-page .fx-signup-input-wrap {
    border-color: rgba(243,230,208,.17);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-input-wrap:focus-within {
    border-color: #D49A63;
    box-shadow: 0 0 0 3px rgba(212,154,99,.13);
}

html.dark-mode body.fx-signup-page .fx-signup-input-wrap > i:first-child {
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-input-wrap input {
    background: transparent;
    color: #F8F5F0;
    caret-color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-input-wrap input::placeholder {
    color: #AAA198;
    opacity: 1;
}

html.dark-mode body.fx-signup-page .fx-signup-field-hint {
    color: #B8B0A6;
}

html.dark-mode body.fx-signup-page .fx-signup-password-toggle {
    color: #B8B0A6;
}

html.dark-mode body.fx-signup-page .fx-signup-password-toggle:hover {
    background: #302A24;
    color: #E2B487;
}


/* Errors remain visible red */

html.dark-mode body.fx-signup-page .fx-signup-error,
html.dark-mode body.fx-signup-page .fx-signup-field.has-error .fx-signup-error {
    color: #FF8E85;
}

html.dark-mode body.fx-signup-page .fx-signup-field.has-error .fx-signup-input-wrap {
    border-color: #FF8E85;

    background:
        color-mix(in srgb,#FF8E85 6%,#1D1D1D);

    box-shadow: 0 0 0 2px rgba(255,142,133,.08);
}

html.dark-mode body.fx-signup-page .fx-signup-field.has-error .fx-signup-input-wrap > i:first-child {
    color: #FF8E85;
}

html.dark-mode body.fx-signup-page .fx-signup-terms.has-error > label {
    color: #FF8E85;
}

html.dark-mode body.fx-signup-page .fx-signup-terms.has-error input {
    outline-color: #FF8E85;
}

html.dark-mode body.fx-signup-page .fx-signup-message {
    border-color: rgba(212,154,99,.28);
    background: rgba(212,154,99,.09);
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-message.is-error {
    border-color: rgba(255,142,133,.3);
    background: rgba(255,142,133,.08);
    color: #FFAAA3;
}

html.dark-mode body.fx-signup-page .fx-signup-message.is-success {
    border-color: rgba(121,177,126,.3);
    background: rgba(121,177,126,.09);
    color: #A9D4AD;
}


/* Terms and consent */

html.dark-mode body.fx-signup-page .fx-signup-terms > label {
    color: #B8B0A6;
}

html.dark-mode body.fx-signup-page .fx-signup-terms a,
html.dark-mode body.fx-signup-page .fx-signup-login-link a {
    color: #E2B487;
}

html.dark-mode body.fx-signup-page .fx-signup-terms a:hover,
html.dark-mode body.fx-signup-page .fx-signup-login-link a:hover {
    color: #F0C49D;
}

html.dark-mode body.fx-signup-page .fx-signup-terms input {
    accent-color: #D49A63;
}


/* Main action */

html.dark-mode body.fx-signup-page .fx-signup-submit {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode body.fx-signup-page .fx-signup-submit:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
}


/* Social sign-up */

html.dark-mode body.fx-signup-page .fx-signup-divider > span {
    background: rgba(243,230,208,.15);
}

html.dark-mode body.fx-signup-page .fx-signup-divider p {
    color: #AAA198;
}

html.dark-mode body.fx-signup-page .fx-signup-social {
    border-color: rgba(243,230,208,.15);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode body.fx-signup-page .fx-signup-social:hover {
    border-color: #D49A63;
    background: #302A24;
    color: #E2B487;
}


/* Footer-like message inside the form, not a website footer */

html.dark-mode body.fx-signup-page .fx-signup-login-link {
    color: #B8B0A6;
}

html.dark-mode body.fx-signup-page .fx-signup-security-note {
    border-top-color: rgba(243,230,208,.13);
    color: #AFA79D;
}

html.dark-mode body.fx-signup-page .fx-signup-security-note i {
    color: #E2B487;
}


/* Preserve borders while the stacked panels change */
@media (max-width: 850px) {
    html.dark-mode body.fx-signup-page .fx-signup-form-panel {
        border-top-color: rgba(243,230,208,.13);
        border-left: 0;
    }
}

/* =========================================================
   FLEETAXIS HOME 2 — SECTION 06 DARK MODE
   Scoped exclusively to .fx-net
========================================================= */

html.dark-mode .fx-net {
    background: var(--fx-champagne-light);
    color: var(--fx-text);
}

html.dark-mode .fx-net .fx-net-title,
html.dark-mode .fx-net .fx-net-process-head h3,
html.dark-mode .fx-net .fx-net-selected-main h3,
html.dark-mode .fx-net .fx-net-step-copy h4,
html.dark-mode .fx-net .fx-net-selected-facts dd {
    color: #F8F5F0;
}

html.dark-mode .fx-net .fx-net-title span,
html.dark-mode .fx-net .fx-net-process-head h3 span {
    color: #D49A63;
}

html.dark-mode .fx-net .fx-net-eyebrow,
html.dark-mode .fx-net .fx-net-process-eyebrow,
html.dark-mode .fx-net .fx-net-selected-kicker,
html.dark-mode .fx-net .fx-net-step-number {
    color: #E2B487;
}

html.dark-mode .fx-net .fx-net-intro,
html.dark-mode .fx-net .fx-net-process-head > p,
html.dark-mode .fx-net .fx-net-selected-copy,
html.dark-mode .fx-net .fx-net-step-copy p,
html.dark-mode .fx-net .fx-net-index-label {
    color: #B8B0A6;
}

html.dark-mode .fx-net .fx-net-index-label b {
    color: #F3EDE5;
}

html.dark-mode .fx-net .fx-net-head-index {
    border-left-color: rgba(243,230,208,.15);
}


/* Visual frame and selector rail */

html.dark-mode .fx-net .fx-net-visual {
    border-color: rgba(243,230,208,.13);
    background: #111111;
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

html.dark-mode .fx-net .fx-net-scene-topbar {
    background: #202020;
    color: #F3EDE5;
}

html.dark-mode .fx-net .fx-net-scene-label {
    color: #F3EDE5;
}

html.dark-mode .fx-net .fx-net-scene-status {
    color: #D3CCC3;
}

html.dark-mode .fx-net .fx-net-scene-label i {
    color: #E2B487;
}

html.dark-mode .fx-net .fx-net-switcher,
html.dark-mode .fx-net .fx-net-selected {
    border-color: rgba(243,230,208,.13);
    background: #111111;
}

html.dark-mode .fx-net .fx-net-vehicle-select {
    border-right-color: rgba(243,230,208,.13);
    border-bottom-color: transparent;
    background: #111111;
    color: #F3EDE5;
}

html.dark-mode .fx-net .fx-net-vehicle-select:hover {
    background: #24201C;
}

html.dark-mode .fx-net .fx-net-vehicle-select.is-active {
    border-bottom-color: #D49A63;
    background: rgba(212,154,99,.09);
}

html.dark-mode .fx-net .fx-net-option-top,
html.dark-mode .fx-net .fx-net-option-name {
    color: #F3EDE5;
}

html.dark-mode .fx-net .fx-net-option-number,
html.dark-mode .fx-net .fx-net-option-description {
    color: #B8B0A6;
}

html.dark-mode .fx-net .fx-net-vehicle-select.is-active .fx-net-option-top,
html.dark-mode .fx-net .fx-net-vehicle-select.is-active .fx-net-option-name,
html.dark-mode .fx-net .fx-net-vehicle-select.is-active .fx-net-option-number {
    color: #E2B487;
}

html.dark-mode .fx-net .fx-net-vehicle-select:focus-visible {
    outline-color: #D49A63;
}


/* Selected information dividers */

html.dark-mode .fx-net .fx-net-selected-facts > div {
    border-left-color: rgba(243,230,208,.14);
}

html.dark-mode .fx-net .fx-net-selected-facts dt {
    color: #B8B0A6;
}


/* Timeline */

html.dark-mode .fx-net .fx-net-steps::before {
    background: rgba(243,230,208,.16);
}

html.dark-mode .fx-net .fx-net-steps::after {
    background: linear-gradient(
        90deg,
        transparent,
        #D49A63,
        transparent
    );
}

html.dark-mode .fx-net .fx-net-step-node {
    border-color: rgba(243,230,208,.18);
    background: #171717;
    color: #E2B487;
}


/* Bottom action banner deliberately stays dark in either mode */

html.dark-mode .fx-net .fx-net-outro {
    border-color: rgba(212,154,99,.25);
    background: #202020;
    color: #F3EDE5;
}

html.dark-mode .fx-net .fx-net-outro-copy > p {
    color: #E2B487;
}

html.dark-mode .fx-net .fx-net-outro-copy h3 {
    color: #F8F5F0;
}

html.dark-mode .fx-net .fx-net-outro-copy > span {
    color: #B8B0A6;
}

html.dark-mode .fx-net .fx-net-outro-mark {
    border-color: rgba(212,154,99,.3);
    background: rgba(184,115,51,.12);
    color: #E2B487;
}

html.dark-mode .fx-net .fx-net-cta {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode .fx-net .fx-net-cta:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
}


/* Mobile dividers */

@media (max-width: 480px) {
    html.dark-mode .fx-net .fx-net-selected-facts > div {
        border-left: 0;
        border-top-color: rgba(243,230,208,.13);
    }
}

/* =========================================================
   FLEETAXIS SERVICES HERO — DARK MODE ONLY
========================================================= */

html.dark-mode body.fx-services-page .fxs-hero {
    background:
        radial-gradient(
            ellipse at 5% 6%,
            rgba(212,154,99,.065),
            transparent 37%
        ),
        #171717;
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs-hero::before {
    border-color: rgba(212,154,99,.13);
}

html.dark-mode body.fx-services-page .fxs-eyebrow,
html.dark-mode body.fx-services-page .fxs-tile-number,
html.dark-mode body.fx-services-page .fxs-tile-bottom,
html.dark-mode body.fx-services-page .fxs-vehicle-tags > span > i {
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs-title,
html.dark-mode body.fx-services-page .fxs-service-tile h2,
html.dark-mode body.fx-services-page .fxs-service-note strong {
    color: #F8F5F0;
}

html.dark-mode body.fx-services-page .fxs-title > span {
    color: #D49A63;
}

html.dark-mode body.fx-services-page .fxs-description,
html.dark-mode body.fx-services-page .fxs-service-tile > p,
html.dark-mode body.fx-services-page .fxs-service-note p {
    color: #B8B0A6;
}

html.dark-mode body.fx-services-page .fxs-vehicle-tags > span,
html.dark-mode body.fx-services-page .fxs-service-tile,
html.dark-mode body.fx-services-page .fxs-button-secondary {
    border-color: rgba(243,230,208,.14);
    background: #1D1D1D;
    color: #F3EDE5;
    box-shadow: none;
}

html.dark-mode body.fx-services-page .fxs-vehicle-tags > span:hover,
html.dark-mode body.fx-services-page .fxs-button-secondary:hover {
    border-color: #D49A63;
    background: #302A24;
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs-service-tile:hover {
    border-color: rgba(212,154,99,.42);
    background: #202020;
    box-shadow: 0 15px 29px rgba(0,0,0,.35);
}

html.dark-mode body.fx-services-page .fxs-tile-icon {
    border-color: rgba(212,154,99,.26);
    background: rgba(212,154,99,.09);
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs-tile-bottom {
    border-top-color: rgba(243,230,208,.13);
}

html.dark-mode body.fx-services-page .fxs-note-check {
    background: rgba(212,154,99,.12);
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs-button-primary {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode body.fx-services-page .fxs-button-primary:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
}

html.dark-mode body.fx-services-page .fxs-button-secondary > i {
    color: #E2B487;
}


/* Image frame and floating image cards */

html.dark-mode body.fx-services-page .fxs-visual-frame {
    border-color: rgba(212,154,99,.24);
    background: #202020;
    box-shadow: 0 25px 70px rgba(0,0,0,.38);
}

html.dark-mode body.fx-services-page .fxs-image-label,
html.dark-mode body.fx-services-page .fxs-image-status {
    border-color: rgba(243,230,208,.22);
    background: rgba(17,17,17,.82);
    color: #F8F5F0;
}

html.dark-mode body.fx-services-page .fxs-image-label > i {
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs-image-tile {
    border-color: rgba(243,230,208,.18);
    background: rgba(17,17,17,.94);
    color: #F8F5F0;
    box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

html.dark-mode body.fx-services-page .fxs-floating-copy > span {
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs-floating-copy strong {
    color: #F8F5F0;
}

html.dark-mode body.fx-services-page .fxs-floating-copy small {
    color: #B8B0A6;
}

html.dark-mode body.fx-services-page .fxs-floating-icon {
    border-color: rgba(212,154,99,.3);
    background: rgba(184,115,51,.15);
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs-caption-kicker {
    color: #F3E6D0;
}

html.dark-mode body.fx-services-page .fxs-image-bottom p {
    color: #FFFFFF;
}

html.dark-mode body.fx-services-page .fxs-caption-mark {
    border-color: rgba(243,230,208,.25);
    background: rgba(17,17,17,.8);
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs-visual-footer > span {
    color: #B8B0A6;
}

html.dark-mode body.fx-services-page .fxs-visual-footer i {
    color: #E2B487;
}


/* Top controls */

html.dark-mode body.fx-services-page .fxs-controls .fx-icon-button,
html.dark-mode body.fx-services-page .fxs-controls .fx-rtl-button {
    border-color: rgba(243,230,208,.15);
    background: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs-controls .fx-icon-button:hover,
html.dark-mode body.fx-services-page .fxs-controls .fx-rtl-button:hover {
    border-color: #D49A63;
    background: #302A24;
    color: #E2B487;
}

/* =========================================================
   HOME 2 · SECTION 4 · FLEET SCAN : DARK
   The section is a dark scanner bay in both themes, so dark
   mode only deepens the surfaces a little.
========================================================= */

html.dark-mode .fx-scan {
    --scan-bg: #0F0F0F;
    --scan-tile: #191919;
    --scan-line: rgba(243, 230, 208, .12);
}

html.dark-mode .fx-scan-stage { background: #0A0A0A; border-color: rgba(243, 230, 208, .12); }
html.dark-mode .fx-scan-eyebrow { background: rgba(15, 15, 15, .9); }
html.dark-mode .fx-scan-btn { box-shadow: 0 10px 28px rgba(212, 154, 99, .22); }

@media (min-width: 1024px) {
    html.dark-mode .fx-scan-copy::before { background: linear-gradient(90deg, #0A0A0A 45%, transparent); }
}
/* =========================================================
   FLEETAXIS SERVICES — SECTIONS 01 + 02 / DARK MODE
   Scope limited to the two new Services sections
========================================================= */

html.dark-mode body.fx-services-page .fxs2-overview,
html.dark-mode body.fx-services-page .fxs2-lease {
    color: var(--fx-text);
    background:
        radial-gradient(ellipse at 100% 0%, rgba(212,154,99,.07), transparent 36%),
        var(--fx-champagne-light);
    border-color: var(--fx-border);
}

html.dark-mode body.fx-services-page .fxs2-section-title,
html.dark-mode body.fx-services-page .fxs2-head-aside strong,
html.dark-mode body.fx-services-page .fxs2-service-card h3,
html.dark-mode body.fx-services-page .fxs2-filter-panel-top h3,
html.dark-mode body.fx-services-page .fxs2-lease-card h3,
html.dark-mode body.fx-services-page .fxs2-card-detail-line > strong,
html.dark-mode body.fx-services-page .fxs2-shortlist-copy > strong,
html.dark-mode body.fx-services-page .fxs2-overview-bottom strong,
html.dark-mode body.fx-services-page .fxs2-no-results h3 {
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs2-eyebrow,
html.dark-mode body.fx-services-page .fxs2-section-title > span,
html.dark-mode body.fx-services-page .fxs2-filter-label,
html.dark-mode body.fx-services-page .fxs2-model-label,
html.dark-mode body.fx-services-page .fxs2-card-link,
html.dark-mode body.fx-services-page .fxs2-aside-icon,
html.dark-mode body.fx-services-page .fxs2-lease-benefits i,
html.dark-mode body.fx-services-page .fxs2-lease-icon,
html.dark-mode body.fx-services-page .fxs2-details-toggle i {
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs2-section-lede,
html.dark-mode body.fx-services-page .fxs2-head-aside p,
html.dark-mode body.fx-services-page .fxs2-service-card p,
html.dark-mode body.fx-services-page .fxs2-filter-count,
html.dark-mode body.fx-services-page .fxs2-overview-bottom > p,
html.dark-mode body.fx-services-page .fxs2-lease-card-content > p,
html.dark-mode body.fx-services-page .fxs2-card-detail-line > span,
html.dark-mode body.fx-services-page .fxs2-lease-more p,
html.dark-mode body.fx-services-page .fxs2-shortlist-copy p,
html.dark-mode body.fx-services-page .fxs2-lease-disclaimer,
html.dark-mode body.fx-services-page .fxs2-no-results p {
    color: #C1B8AD;
}

html.dark-mode body.fx-services-page .fxs2-head-aside,
html.dark-mode body.fx-services-page .fxs2-overview-toolbar,
html.dark-mode body.fx-services-page .fxs2-filter-chip,
html.dark-mode body.fx-services-page .fxs2-service-card,
html.dark-mode body.fx-services-page .fxs2-lease-filter-panel,
html.dark-mode body.fx-services-page .fxs2-lease-card,
html.dark-mode body.fx-services-page .fxs2-no-results,
html.dark-mode body.fx-services-page .fxs2-shortlist-copy > strong span {
    border-color: rgba(243,230,208,.14);
    background-color: #1D1D1D;
    box-shadow: none;
}

html.dark-mode body.fx-services-page .fxs2-aside-icon,
html.dark-mode body.fx-services-page .fxs2-lease-icon,
html.dark-mode body.fx-services-page .fxs2-lease-benefits > span,
html.dark-mode body.fx-services-page .fxs2-input-wrap,
html.dark-mode body.fx-services-page .fxs2-input-wrap input,
html.dark-mode body.fx-services-page .fxs2-control select,
html.dark-mode body.fx-services-page .fxs2-reset-filters,
html.dark-mode body.fx-services-page .fxs2-details-toggle,
html.dark-mode body.fx-services-page .fxs2-shortlist-copy > strong span,
html.dark-mode body.fx-services-page .fxs2-clear-shortlist {
    border-color: rgba(243,230,208,.15);
    background-color: #252321;
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs2-filter-chip:hover,
html.dark-mode body.fx-services-page .fxs2-reset-filters:hover,
html.dark-mode body.fx-services-page .fxs2-details-toggle:hover,
html.dark-mode body.fx-services-page .fxs2-shortlist-button:hover,
html.dark-mode body.fx-services-page .fxs2-clear-shortlist:hover:not(:disabled) {
    border-color: #D49A63;
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs2-filter-chip.is-active,
html.dark-mode body.fx-services-page .fxs2-shortlist-button[aria-pressed="true"],
html.dark-mode body.fx-services-page .fxs2-inline-cta,
html.dark-mode body.fx-services-page .fxs2-shortlist-cta,
html.dark-mode body.fx-services-page .fxs2-no-results button {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode body.fx-services-page .fxs2-filter-chip.is-active > span {
    background: rgba(255,255,255,.18);
    color: #FFFFFF;
}

html.dark-mode body.fx-services-page .fxs2-shortlist-button {
    border-color: rgba(212,154,99,.45);
    background: rgba(212,154,99,.08);
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs2-card-link:hover,
html.dark-mode body.fx-services-page .fxs2-inline-cta:hover,
html.dark-mode body.fx-services-page .fxs2-shortlist-cta:hover {
    border-color: #985A25;
    background-color: #985A25;
    color: #FFFFFF;
}

html.dark-mode body.fx-services-page .fxs2-lease-more {
    border-inline-start-color: #D49A63;
    background: rgba(212,154,99,.08);
}

html.dark-mode body.fx-services-page .fxs2-overview-bottom {
    border-color: rgba(212,154,99,.22);
    background: rgba(212,154,99,.06);
}

html.dark-mode body.fx-services-page .fxs2-shortlist-panel {
    border-color: rgba(212,154,99,.25);
    background: linear-gradient(100deg, rgba(212,154,99,.10), rgba(212,154,99,.035));
}

html.dark-mode body.fx-services-page .fxs2-shortlist-icon,
html.dark-mode body.fx-services-page .fxs2-bottom-check {
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode body.fx-services-page .fxs2-filter-feedback p,
html.dark-mode body.fx-services-page .fxs2-control,
html.dark-mode body.fx-services-page .fxs2-control > span:first-child {
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs2-filter-feedback-note {
    color: #B8B0A6;
}

html.dark-mode body.fx-services-page .fxs2-input-wrap input::placeholder {
    color: #B8B0A6;
}

/* =========================================================
   FLEETAXIS SERVICES — SECTIONS 03 + 04 / DARK MODE
========================================================= */

/* Maintenance section inherits the shared dark variables. */
html.dark-mode body.fx-services-page .fxs34-maintenance {
    color: var(--fx-text);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(212,154,99,.07), transparent 36%),
        var(--fx-off-white);
    border-color: var(--fx-border);
}

html.dark-mode body.fx-services-page .fxs34-heading h2,
html.dark-mode body.fx-services-page .fxs34-maintenance-content-head h3,
html.dark-mode body.fx-services-page .fxs34-maintenance-detail h4,
html.dark-mode body.fx-services-page .fxs34-care-flow-title > strong,
html.dark-mode body.fx-services-page .fxs34-option-text strong,
html.dark-mode body.fx-services-page .fxs34-care-flow-steps strong {
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs34-eyebrow,
html.dark-mode body.fx-services-page .fxs34-mini-label,
html.dark-mode body.fx-services-page .fxs34-detail-label {
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs34-intro,
html.dark-mode body.fx-services-page .fxs34-maintenance-content-head p,
html.dark-mode body.fx-services-page .fxs34-option-text small,
html.dark-mode body.fx-services-page .fxs34-maintenance-detail p,
html.dark-mode body.fx-services-page .fxs34-photo-bottom {
    color: #C1B8AD;
}

html.dark-mode body.fx-services-page .fxs34-maintenance-option,
html.dark-mode body.fx-services-page .fxs34-maintenance-detail,
html.dark-mode body.fx-services-page .fxs34-care-flow-steps > div {
    border-color: rgba(243,230,208,.14);
    background-color: #1D1D1D;
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs34-maintenance-option:hover,
html.dark-mode body.fx-services-page .fxs34-maintenance-option.is-active {
    border-color: #D49A63;
}

html.dark-mode body.fx-services-page .fxs34-maintenance-option.is-active {
    background: rgba(212,154,99,.10);
    box-shadow: inset 3px 0 0 #D49A63;
}

html.dark-mode body.fx-services-page .fxs34-option-icon {
    border-color: rgba(212,154,99,.28);
    background: rgba(212,154,99,.10);
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs34-option-arrow {
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs34-care-flow {
    border-color: rgba(243,230,208,.13);
    background: rgba(212,154,99,.055);
}

html.dark-mode body.fx-services-page .fxs34-care-flow-steps > div > span {
    border-color: rgba(212,154,99,.28);
    background: rgba(212,154,99,.10);
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs34-maintenance-detail {
    border-inline-start-color: #D49A63;
}

/* Section 04 remains deliberately dark in both modes. */
html.dark-mode body.fx-services-page .fxs34-categories {
    color: #F3EDE5;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(212,154,99,.15), transparent 36%),
        #151515;
    border-color: rgba(212,154,99,.25);
}

html.dark-mode body.fx-services-page .fxs34-category-heading h2,
html.dark-mode body.fx-services-page .fxs34-category-detail h3,
html.dark-mode body.fx-services-page .fxs34-category-considerations h4,
html.dark-mode body.fx-services-page .fxs34-category-footer strong {
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs34-category-intro,
html.dark-mode body.fx-services-page .fxs34-category-detail > p,
html.dark-mode body.fx-services-page .fxs34-category-considerations li,
html.dark-mode body.fx-services-page .fxs34-category-footer > p {
    color: #C1B8AD;
}

html.dark-mode body.fx-services-page .fxs34-category-tab {
    border-color: rgba(243,230,208,.16);
    background: #202020;
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs34-category-tab > span {
    color: #F3EDE5;
}

html.dark-mode body.fx-services-page .fxs34-category-tab:hover,
html.dark-mode body.fx-services-page .fxs34-category-tab.is-active {
    border-color: #D49A63;
    background: #302A24;
}

html.dark-mode body.fx-services-page .fxs34-category-tab > i:first-child,
html.dark-mode body.fx-services-page .fxs34-category-tab .fxs34-tab-arrow,
html.dark-mode body.fx-services-page .fxs34-category-note > i,
html.dark-mode body.fx-services-page .fxs34-category-footer > p > i {
    color: #D49A63;
}

html.dark-mode body.fx-services-page .fxs34-category-considerations {
    border-color: rgba(243,230,208,.14);
    background: #202020;
}

html.dark-mode body.fx-services-page .fxs34-category-footer {
    border-color: rgba(212,154,99,.26);
    background: rgba(212,154,99,.065);
}

html.dark-mode body.fx-services-page .fxs34-category-footer > a {
    border-color: rgba(212,154,99,.4);
    color: #E2B487;
}

html.dark-mode body.fx-services-page .fxs34-category-footer > a:hover {
    background: #B87333;
    color: #FFFFFF;
}

/* =========================================================
   FLEETAXIS — ABOUT · HERO — DARK MODE
   Paste at the end of your existing dark.css.
========================================================= */

html.dark-mode .fx-ab {
    --ab-a: #0B0B0B;
    --ab-b: #2D2823;
    --ab-glass: rgba(8, 8, 8, .66);
    --ab-line: rgba(243, 230, 208, .2);
}

html.dark-mode .fx-ab-panel {
    border-color: rgba(212, 154, 99, .42);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

html.dark-mode .fx-ab-eyebrow { background: rgba(243, 230, 208, .07); }

html.dark-mode .fx-ab-car img { filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .7)); }

/* =========================================================
   FLEETAXIS — CONTACT PAGE · HERO — DARK MODE
   Paste at the end of your existing dark.css
   (or link this file after dark.css).

   Only the local --ct-… variables change. The instrument
   cluster is already dark in both modes, so it needs nothing.
========================================================= */

html.dark-mode .fx-ct {
    --ct-bg: #171717;
    --ct-surface: #1D1D1D;
    --ct-ink: #F8F5F0;
    --ct-text: #F3EDE5;
    --ct-soft: #B8B0A6;
    --ct-copper: #D49A63;
    --ct-copper-light: #E2B487;
    --ct-accent-text: #E2B487;
    --ct-border: rgba(243, 230, 208, .13);
    --ct-border-2: rgba(243, 230, 208, .24);
    --ct-tint: rgba(212, 154, 99, .16);
    --ct-on: #151515;
    --ct-glow: rgba(212, 154, 99, .22);
}

html.dark-mode .fx-ct-btn-primary { box-shadow: 0 10px 28px rgba(212, 154, 99, .28); }
html.dark-mode .fx-ct-btn-primary:hover { background: #E2B487; color: #151515; }

html.dark-mode .fx-ct-bin {
    border-color: rgba(212, 154, 99, .5);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(212, 154, 99, .08), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 60px rgba(212, 154, 99, .06);
}

/* =========================================================
   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;
    }
}

/* =========================================================
   HOME 2 — FINAL CTA / DARK MODE
========================================================= */

html.dark-mode body.fx-home2-page .fxfinal-section {
    background: var(--fx-off-white);
    border-color: var(--fx-border);
}

html.dark-mode body.fx-home2-page .fxfinal-panel {
    border-color: rgba(212, 154, 99, .35);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(184, 115, 51, .10), transparent 56%),
        linear-gradient(145deg, #202020, #151515 72%);
    color: #F3EDE5;
}

html.dark-mode body.fx-home2-page .fxfinal-content h2 {
    color: #FFFFFF;
}

html.dark-mode body.fx-home2-page .fxfinal-content h2 > span,
html.dark-mode body.fx-home2-page .fxfinal-eyebrow,
html.dark-mode body.fx-home2-page .fxfinal-benefit-icon {
    color: #D49A63;
}

html.dark-mode body.fx-home2-page .fxfinal-eyebrow-dot,
html.dark-mode body.fx-home2-page .fxfinal-closing-line > span {
    background: #D49A63;
}

html.dark-mode body.fx-home2-page .fxfinal-description {
    color: #D0C8BE;
}

html.dark-mode body.fx-home2-page .fxfinal-button-primary {
    border-color: #B87333;
    background: #B87333;
    color: #FFFFFF;
}

html.dark-mode body.fx-home2-page .fxfinal-button-primary:hover {
    border-color: #985A25;
    background: #985A25;
    color: #FFFFFF;
}

html.dark-mode body.fx-home2-page .fxfinal-button-secondary {
    border-color: rgba(243, 230, 208, .3);
    background: rgba(255, 255, 255, .035);
    color: #F3EDE5;
}

html.dark-mode body.fx-home2-page .fxfinal-button-secondary:hover {
    border-color: #D49A63;
    background: rgba(212, 154, 99, .10);
    color: #FFFFFF;
}

html.dark-mode body.fx-home2-page .fxfinal-divider {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(243, 230, 208, .23) 20%,
        rgba(243, 230, 208, .23) 80%,
        transparent
    );
}

html.dark-mode body.fx-home2-page .fxfinal-benefit strong {
    color: #F3EDE5;
}

html.dark-mode body.fx-home2-page .fxfinal-benefit small,
html.dark-mode body.fx-home2-page .fxfinal-closing-line {
    color: #B8B0A6;
}

html.dark-mode body.fx-home2-page .fxfinal-benefit-icon {
    border-color: rgba(212, 154, 99, .32);
    background: rgba(212, 154, 99, .09);
}

html.dark-mode body.fx-home2-page .fxfinal-benefit-separator {
    background: rgba(243, 230, 208, .16);
}

html.dark-mode body.fx-home2-page .fxfinal-eyebrow-line {
    background: rgba(212, 154, 99, .65);
}

html.dark-mode body.fx-home2-page .fxfinal-panel::before {
    border-color: rgba(212, 154, 99, .08);
}

html.dark-mode body.fx-home2-page .fxfinal-button:focus-visible {
    outline-color: #E2B487;
}

/* =========================================================
   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;
    }
}

/* =========================================================
   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 SECTIONS — DARK MODE EXTENSION ONLY.
   The main site still owns html.dark-mode and its saved preference. */
html.dark-mode .fxcs-contact-sections {
  --fxcs-copper: var(--fx-copper, #D49A63);
  --fxcs-copper-dark: #D49A63;
  --fxcs-copper-light: #E2B487;
  --fxcs-bg: #171717;
  --fxcs-surface: #202020;
  --fxcs-heading: #F8F5F0;
  --fxcs-text: #F3EDE5;
  --fxcs-muted: #C1B8AD;
  --fxcs-border: rgba(243,230,208,.15);
  --fxcs-error: #FF8983;
  --fxcs-error-bg: rgba(180,35,24,.15);
  --fxcs-success: #A5E8C5;
  background: #171717;
  color: #F3EDE5;
}
html.dark-mode .fxcs-contact-sections .fxcs-info,
html.dark-mode .fxcs-contact-sections .fxcs-map-section,
html.dark-mode .fxcs-contact-sections .fxcs-process-section,
html.dark-mode .fxcs-contact-sections .fxcs-cta-section { background: #171717; }
html.dark-mode .fxcs-contact-sections .fxcs-form-section,
html.dark-mode .fxcs-contact-sections .fxcs-trust-section { background: #1B1B1B; border-color: rgba(243,230,208,.1); }
html.dark-mode .fxcs-contact-sections :where(h2,h3,h4) { color: #F8F5F0; }
html.dark-mode .fxcs-contact-sections :where(p) { color: #C1B8AD; }
html.dark-mode .fxcs-contact-sections .fxcs-eyebrow,
html.dark-mode .fxcs-contact-sections .fxcs-info h2 span,
html.dark-mode .fxcs-contact-sections .fxcs-section h2 span,
html.dark-mode .fxcs-contact-sections .fxcs-text-link,
html.dark-mode .fxcs-contact-sections .fxcs-image-card-copy > span,
html.dark-mode .fxcs-contact-sections .fxcs-step-number,
html.dark-mode .fxcs-contact-sections .fxcs-process-link,
html.dark-mode .fxcs-contact-sections .fxcs-map-aside-index { color: #D49A63; }
html.dark-mode .fxcs-contact-sections .fxcs-contact-panel,
html.dark-mode .fxcs-contact-sections .fxcs-cta-panel { background: #202020; }
html.dark-mode .fxcs-contact-sections .fxcs-contact-panel .fxcs-channel-text strong,
html.dark-mode .fxcs-contact-sections .fxcs-contact-panel .fxcs-channel,
html.dark-mode .fxcs-contact-sections .fxcs-cta-content h2 { color: #FFFFFF; }
html.dark-mode .fxcs-contact-sections .fxcs-contact-panel .fxcs-channel-text small,
html.dark-mode .fxcs-contact-sections .fxcs-contact-panel .fxcs-channel-text em,
html.dark-mode .fxcs-contact-sections .fxcs-panel-note,
html.dark-mode .fxcs-contact-sections .fxcs-cta-content > p:not(.fxcs-cta-eyebrow),
html.dark-mode .fxcs-contact-sections .fxcs-cta-benefits span { color: #D5CDC3; }
html.dark-mode .fxcs-contact-sections .fxcs-form,
html.dark-mode .fxcs-contact-sections .fxcs-form-side-note,
html.dark-mode .fxcs-contact-sections .fxcs-image-card,
html.dark-mode .fxcs-contact-sections .fxcs-process-card,
html.dark-mode .fxcs-contact-sections .fxcs-map-layout { background: #222222; border-color: rgba(243,230,208,.15); }
html.dark-mode .fxcs-contact-sections .fxcs-form-side-note strong,
html.dark-mode .fxcs-contact-sections .fxcs-field label,
html.dark-mode .fxcs-contact-sections .fxcs-map-aside-email a { color: #F3EDE5; }
html.dark-mode .fxcs-contact-sections .fxcs-form-side-note small,
html.dark-mode .fxcs-contact-sections .fxcs-form-note,
html.dark-mode .fxcs-contact-sections .fxcs-required-label,
html.dark-mode .fxcs-contact-sections .fxcs-field label span { color: #C1B8AD; }
html.dark-mode .fxcs-contact-sections .fxcs-field :where(input,select,textarea) { background: #191919; border-color: rgba(243,230,208,.22); color: #F8F5F0; color-scheme: dark; }
html.dark-mode .fxcs-contact-sections .fxcs-field :where(input,select,textarea)::placeholder { color: #AAA195; }
html.dark-mode .fxcs-contact-sections .fxcs-field :where(input,select,textarea):focus { border-color: #D49A63; box-shadow: 0 0 0 3px rgba(212,154,99,.15); }
html.dark-mode .fxcs-contact-sections .fxcs-field.is-invalid :where(input,select,textarea) { border-color: #FF8983 !important; background: rgba(180,35,24,.13); }
html.dark-mode .fxcs-contact-sections .fxcs-field.is-invalid label,
html.dark-mode .fxcs-contact-sections .fxcs-field.is-invalid .fxcs-error { color: #FF8983; }
html.dark-mode .fxcs-contact-sections .fxcs-field.is-valid :where(input,select,textarea) { border-color: #66C995; }
html.dark-mode .fxcs-contact-sections .fxcs-error { color: #FF8983; }
html.dark-mode .fxcs-contact-sections .fxcs-form-feedback { background: rgba(72,187,120,.1); border-color: rgba(136,221,180,.35); color: #A5E8C5; }
html.dark-mode .fxcs-contact-sections .fxcs-form-feedback.is-error { background: rgba(180,35,24,.15); border-color: rgba(255,137,131,.5); color: #FF8983; }
html.dark-mode .fxcs-contact-sections .fxcs-note-icon,
html.dark-mode .fxcs-contact-sections .fxcs-process-icon,
html.dark-mode .fxcs-contact-sections .fxcs-map-aside-email .fxcs-channel-icon { background: #302A24; color: #E2B487; }
html.dark-mode .fxcs-contact-sections .fxcs-outline-link { color: #E2B487; border-color: rgba(243,230,208,.22); }
html.dark-mode .fxcs-contact-sections .fxcs-outline-link:hover { background: #302A24; border-color: #D49A63; }
html.dark-mode .fxcs-contact-sections .fxcs-map-aside-email small,
html.dark-mode .fxcs-contact-sections .fxcs-process-card > p,
html.dark-mode .fxcs-contact-sections .fxcs-image-card-copy p { color: #C1B8AD; }
html.dark-mode .fxcs-contact-sections .fxcs-cta-mark span { color: #E6D3BD; }


/* =========================================================
   FLEETAXIS ABOUT — DARK MODE FOR SECTIONS 04–07
   No rules affect the rest of the website.
========================================================= */

html.dark-mode .fxa-about-sections {
    --fxa-bg: #171717;
    --fxa-surface: #1D1D1D;
    --fxa-surface-alt: #302A24;
    --fxa-text: #F3EDE5;
    --fxa-heading: #F8F5F0;
    --fxa-muted: #B8B0A6;
    --fxa-copper: #D49A63;
    --fxa-copper-dark: #D49A63;
    --fxa-copper-light: #E2B487;
    --fxa-border: rgba(243, 230, 208, .14);
    --fxa-error: #FF8983;

    background: #171717;
    color: #F3EDE5;
}

html.dark-mode .fxa-about-sections .fxa-story,
html.dark-mode .fxa-about-sections .fxa-team,
html.dark-mode .fxa-about-sections .fxa-ecosystem,
html.dark-mode .fxa-about-sections .fxa-difference {
    background: var(--fxa-bg);
}

html.dark-mode .fxa-about-sections .fxa-team,
html.dark-mode .fxa-about-sections .fxa-difference {
    background: #1B1B1B;
}

html.dark-mode .fxa-about-sections :where(
    .fxa-story-heading h2,
    .fxa-team-heading h2,
    .fxa-ecosystem-heading h2,
    .fxa-difference-heading h2
) {
    color: #F8F5F0;
}

html.dark-mode .fxa-about-sections :where(
    .fxa-story-intro,
    .fxa-team-heading > p,
    .fxa-ecosystem-heading > p:last-child,
    .fxa-difference-heading > p:last-child
) {
    color: #C1B8AD;
}

html.dark-mode .fxa-about-sections :where(
    .fxa-story-heading h2 span,
    .fxa-team-heading h2 span,
    .fxa-ecosystem-heading h2 span,
    .fxa-difference-heading h2 span
) {
    color: #D49A63;
}

/* Team cards and information strip */
html.dark-mode .fxa-about-sections .fxa-team-card {
    background: #222222;
    border-color: rgba(243, 230, 208, .15);
}

html.dark-mode .fxa-about-sections .fxa-team-card:hover,
html.dark-mode .fxa-about-sections .fxa-team-card.is-active {
    border-color: rgba(212, 154, 99, .65);
    box-shadow: 0 17px 35px rgba(0, 0, 0, .25);
}

html.dark-mode .fxa-about-sections .fxa-team-copy h3 {
    color: #F8F5F0;
}

html.dark-mode .fxa-about-sections .fxa-team-copy p,
html.dark-mode .fxa-about-sections .fxa-team-status {
    color: #C1B8AD;
}

html.dark-mode .fxa-about-sections .fxa-team-status {
    background: #222222;
    border-color: rgba(243, 230, 208, .14);
}

html.dark-mode .fxa-about-sections .fxa-team-role,
html.dark-mode .fxa-about-sections .fxa-team-focus {
    color: #D49A63;
}

/* Story canvas — preserve deliberate charcoal contrast */
html.dark-mode .fxa-about-sections .fxa-story-stage,
html.dark-mode .fxa-about-sections .fxa-story-canvas,
html.dark-mode .fxa-about-sections .fxa-story-narrative {
    background-color: #202020;
}

html.dark-mode .fxa-about-sections .fxa-story-narrative h3,
html.dark-mode .fxa-about-sections .fxa-story-tab .fxa-tab-text strong {
    color: #FFFFFF;
}

html.dark-mode .fxa-about-sections .fxa-story-narrative > p:not(.fxa-story-footnote),
html.dark-mode .fxa-about-sections .fxa-story-tab .fxa-tab-text small,
html.dark-mode .fxa-about-sections .fxa-story-footnote {
    color: #D5CDC3;
}

/* Ecosystem node contrast */
html.dark-mode .fxa-about-sections .fxa-ecosystem-node {
    background: #272727;
    border-color: rgba(243, 230, 208, .19);
}

html.dark-mode .fxa-about-sections .fxa-ecosystem-node.is-active {
    background: #302A24;
    border-color: #D49A63;
}

html.dark-mode .fxa-about-sections .fxa-ecosystem-detail {
    background: #1E1C1A;
    border-color: rgba(212, 154, 99, .27);
}

html.dark-mode .fxa-about-sections .fxa-ecosystem-detail h3 {
    color: #F8F5F0;
}

html.dark-mode .fxa-about-sections .fxa-ecosystem-detail p {
    color: #D5CDC3;
}

/* Comparison keeps a light before-state and dark after-state intentionally.
   Each side keeps its own high-contrast text and illustration colors. */
html.dark-mode .fxa-about-sections .fxa-difference-wrap {
    background: #202020;
    border-color: rgba(243, 230, 208, .16);
}

html.dark-mode .fxa-about-sections .fxa-difference-footer {
    background: #202020;
}

html.dark-mode .fxa-about-sections .fxa-difference-footer span {
    color: #D5CDC3;
}

html.dark-mode .fxa-about-sections .fxa-difference-divider {
    background: #E2B487;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 18px rgba(212, 154, 99, .28);
}

html.dark-mode .fxa-about-sections .fxa-difference-handle {
    background: #985A25;
    border-color: #E2B487;
    color: #FFFFFF;
}

html.dark-mode .fxa-about-sections .fxa-difference-range-label {
    background: rgba(23, 23, 23, .96);
    border-color: rgba(243, 230, 208, .22);
    color: #F8F5F0;
}

/* =========================================================
   FLEETAXIS OUR TEAM — DARK MODE ONLY
   Scoped to .fxat-team-section.
========================================================= */

html.dark-mode .fxat-team-section {
    --fxat-bg: #171717;
    --fxat-surface: #202020;
    --fxat-surface-alt: #302A24;
    --fxat-text: #F3EDE5;
    --fxat-heading: #F8F5F0;
    --fxat-muted: #C1B8AD;
    --fxat-copper: #D49A63;
    --fxat-copper-dark: #D49A63;
    --fxat-copper-light: #E2B487;
    --fxat-border: rgba(243, 230, 208, .15);

    background: #171717;
    color: #F3EDE5;
}

html.dark-mode .fxat-team-section .fxat-team-heading h2,
html.dark-mode .fxat-team-section .fxat-team-footer-copy h3 {
    color: #F8F5F0;
}

html.dark-mode .fxat-team-section .fxat-team-heading h2 span {
    color: #D49A63;
}

html.dark-mode .fxat-team-section .fxat-team-intro > p,
html.dark-mode .fxat-team-section .fxat-team-footer-copy p {
    color: #C1B8AD;
}

html.dark-mode .fxat-team-section .fxat-eyebrow,
html.dark-mode .fxat-team-section .fxat-team-role,
html.dark-mode .fxat-team-section .fxat-team-focus {
    color: #D49A63;
}

html.dark-mode .fxat-team-section .fxat-team-footer {
    background: #202020;
    border-color: rgba(243, 230, 208, .14);
}

html.dark-mode .fxat-team-section .fxat-footer-symbol {
    background: #302A24;
    color: #E2B487;
    border-color: rgba(212, 154, 99, .3);
}

html.dark-mode .fxat-team-section .fxat-capability-tags span {
    background: #262626;
    border-color: rgba(243, 230, 208, .17);
    color: #D5CDC3;
}

html.dark-mode .fxat-team-section .fxat-team-card {
    border-color: rgba(243, 230, 208, .13);
}

html.dark-mode .fxat-team-section .fxat-team-card:hover {
    border-color: rgba(212, 154, 99, .7);
}

html.dark-mode .fxat-team-section .fxat-card-content h3,
html.dark-mode .fxat-team-section .fxat-card-content p,
html.dark-mode .fxat-team-section .fxat-card-bottom,
html.dark-mode .fxat-team-section .fxat-image-topline {
    color: #FFFFFF;
}

html.dark-mode .fxat-team-section .fxat-card-kicker {
    color: #E2B487;
}

/* Keep photo overlays dark enough for consistent text contrast
   regardless of the image's brightness. */
html.dark-mode .fxat-team-section .fxat-image-shade {
    background: linear-gradient(
        180deg,
        rgba(12, 12, 12, .5) 0%,
        rgba(12, 12, 12, .13) 30%,
        rgba(12, 12, 12, .57) 61%,
        rgba(12, 12, 12, .96) 100%
    );
}

html.dark-mode .fxat-team-section .fxat-team-card:hover .fxat-image-shade {
    background: linear-gradient(
        180deg,
        rgba(12, 12, 12, .42) 0%,
        rgba(12, 12, 12, .08) 27%,
        rgba(12, 12, 12, .57) 58%,
        rgba(12, 12, 12, .98) 100%
    );
}

/* =========================================================
   FLEETAXIS ABOUT — MISSION / VISION / GOALS DARK MODE
   Scoped only to .fxmv-section.
========================================================= */

html.dark-mode .fxmv-section {
    --fxmv-bg: #171717;
    --fxmv-surface: #202020;
    --fxmv-surface-alt: #302A24;
    --fxmv-text: #F3EDE5;
    --fxmv-heading: #F8F5F0;
    --fxmv-muted: #C1B8AD;
    --fxmv-copper: #D49A63;
    --fxmv-copper-dark: #D49A63;
    --fxmv-copper-light: #E2B487;
    --fxmv-border: rgba(243, 230, 208, .14);

    background: #171717;
    color: #F3EDE5;
}

html.dark-mode .fxmv-section .fxmv-heading h2,
html.dark-mode .fxmv-section .fxmv-copy h3,
html.dark-mode .fxmv-section .fxmv-principles strong,
html.dark-mode .fxmv-section .fxmv-bottom-note strong {
    color: #F8F5F0;
}

html.dark-mode .fxmv-section .fxmv-heading h2 span,
html.dark-mode .fxmv-section .fxmv-copy h3 span {
    color: #D49A63;
}

html.dark-mode .fxmv-section .fxmv-heading-row > p,
html.dark-mode .fxmv-section .fxmv-description,
html.dark-mode .fxmv-section .fxmv-principles small,
html.dark-mode .fxmv-section .fxmv-bottom-note p {
    color: #C1B8AD;
}

html.dark-mode .fxmv-section .fxmv-eyebrow,
html.dark-mode .fxmv-section .fxmv-section-number,
html.dark-mode .fxmv-section .fxmv-principles-heading,
html.dark-mode .fxmv-section .fxmv-copy-footer,
html.dark-mode .fxmv-section .fxmv-bottom-index {
    color: #D49A63;
}

html.dark-mode .fxmv-section .fxmv-tabs {
    background: #222222;
    border-color: rgba(243, 230, 208, .16);
}

html.dark-mode .fxmv-section .fxmv-tab {
    color: #F3EDE5;
}

html.dark-mode .fxmv-section .fxmv-tab-label strong {
    color: #F3EDE5;
}

html.dark-mode .fxmv-section .fxmv-tab-label small {
    color: #C1B8AD;
}

html.dark-mode .fxmv-section .fxmv-tab-icon {
    background: #302A24;
    border-color: rgba(212, 154, 99, .25);
    color: #E2B487;
}

html.dark-mode .fxmv-section .fxmv-tab.is-active {
    color: #FFFFFF;
}

html.dark-mode .fxmv-section .fxmv-tab.is-active .fxmv-tab-label strong,
html.dark-mode .fxmv-section .fxmv-tab.is-active .fxmv-tab-label small,
html.dark-mode .fxmv-section .fxmv-tab.is-active .fxmv-tab-icon,
html.dark-mode .fxmv-section .fxmv-tab.is-active .fxmv-tab-arrow {
    color: #FFFFFF;
}

html.dark-mode .fxmv-section .fxmv-tab.is-active .fxmv-tab-icon {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .35);
}

html.dark-mode .fxmv-section .fxmv-tab-caption {
    color: #C1B8AD;
}

html.dark-mode .fxmv-section .fxmv-caption-line {
    background: rgba(243, 230, 208, .18);
}

html.dark-mode .fxmv-section .fxmv-panel,
html.dark-mode .fxmv-section .fxmv-copy {
    background: #202020;
    border-color: rgba(243, 230, 208, .14);
}

html.dark-mode .fxmv-section .fxmv-copy-topline,
html.dark-mode .fxmv-section .fxmv-principles-heading {
    border-color: rgba(243, 230, 208, .14);
}

html.dark-mode .fxmv-section .fxmv-copy-symbol,
html.dark-mode .fxmv-section .fxmv-check,
html.dark-mode .fxmv-section .fxmv-bottom-note-icon {
    background: #302A24;
    border-color: rgba(212, 154, 99, .35);
    color: #E2B487;
}

html.dark-mode .fxmv-section .fxmv-copy-footer {
    border-color: rgba(243, 230, 208, .14);
}

html.dark-mode .fxmv-section .fxmv-bottom-note {
    background: #202020;
    border-color: rgba(243, 230, 208, .14);
}

html.dark-mode .fxmv-section .fxmv-visual-index {
    background: rgba(20, 20, 20, .8);
    border-color: rgba(255, 255, 255, .5);
    color: #FFFFFF;
}

html.dark-mode .fxmv-section .fxmv-visual-caption,
html.dark-mode .fxmv-section .fxmv-visual-caption strong {
    color: #FFFFFF;
}

html.dark-mode .fxmv-section .fxmv-visual-kicker {
    color: #E2B487;
}

html.dark-mode .fxmv-section .fxmv-visual-description {
    color: #F0E8DF;
}

html.dark-mode .fxmv-section .fxmv-visual-shade {
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, .2) 0%,
        rgba(10, 10, 10, .08) 28%,
        rgba(10, 10, 10, .48) 60%,
        rgba(10, 10, 10, .94) 100%
    );
}

html.dark-mode .fxmv-section .fxmv-bottom-note-icon {
    color: #E2B487;
}

@media (prefers-contrast: more) {
    html.dark-mode .fxmv-section .fxmv-heading-row > p,
    html.dark-mode .fxmv-section .fxmv-description,
    html.dark-mode .fxmv-section .fxmv-principles small,
    html.dark-mode .fxmv-section .fxmv-bottom-note p {
        color: #E2DCD3;
    }
}

/* =========================================================
   FLEETAXIS ABOUT — OUR HISTORY DARK MODE
   Scoped only to .fxht-history-section.
========================================================= */

html.dark-mode .fxht-history-section {
    --fxht-bg: #171717;
    --fxht-surface: #202020;
    --fxht-heading: #F8F5F0;
    --fxht-text: #F3EDE5;
    --fxht-muted: #C1B8AD;
    --fxht-copper: #D49A63;
    --fxht-copper-dark: #D49A63;
    --fxht-copper-light: #E2B487;
    --fxht-border: rgba(243, 230, 208, .16);

    background: #171717;
    color: #F3EDE5;
}

html.dark-mode .fxht-history-section .fxht-heading h2 {
    color: #F8F5F0;
}

html.dark-mode .fxht-history-section .fxht-heading h2 span {
    color: #D49A63;
}

html.dark-mode .fxht-history-section .fxht-heading-row > p {
    color: #C1B8AD;
}

html.dark-mode .fxht-history-section .fxht-eyebrow,
html.dark-mode .fxht-history-section .fxht-chapter-label,
html.dark-mode .fxht-history-section .fxht-progress-count {
    color: #D49A63;
}

html.dark-mode .fxht-history-section .fxht-wave-base {
    stroke: rgba(243, 230, 208, .17);
}

html.dark-mode .fxht-history-section .fxht-wave-progress {
    stroke: url(#fxht-wave-gradient);
}

html.dark-mode .fxht-history-section .fxht-node {
    background: #171717;
    border-color: rgba(212, 154, 99, .65);
    color: #E2B487;
}

html.dark-mode .fxht-history-section .fxht-node:hover,
html.dark-mode .fxht-history-section .fxht-node.is-active {
    background: #B87333;
    border-color: #E2B487;
    color: #FFFFFF;
}

html.dark-mode .fxht-history-section .fxht-node-halo {
    border-color: #D49A63;
}

html.dark-mode .fxht-history-section .fxht-milestone-content h3 {
    color: #F8F5F0;
}

html.dark-mode .fxht-history-section .fxht-milestone-content p {
    color: #C1B8AD;
}

html.dark-mode .fxht-history-section .fxht-content-accent {
    background: #D49A63;
}

html.dark-mode .fxht-history-section .fxht-mobile-rail {
    background: rgba(243, 230, 208, .16);
}

html.dark-mode .fxht-history-section .fxht-mobile-rail > span {
    background: linear-gradient(180deg, #E2B487, #B87333);
}

html.dark-mode .fxht-history-section .fxht-timeline-footer {
    border-color: rgba(243, 230, 208, .16);
}

html.dark-mode .fxht-history-section .fxht-current-label {
    color: #F3EDE5;
}

html.dark-mode .fxht-history-section .fxht-current-dot {
    background: #D49A63;
}

html.dark-mode .fxht-history-section .fxht-progress-track {
    background: rgba(243, 230, 208, .17);
}

html.dark-mode .fxht-history-section .fxht-progress-fill {
    background: linear-gradient(90deg, #B87333, #E2B487);
}

/* =========================================================
   FLEETAXIS — ABOUT PAGE CTA / DARK MODE
========================================================= */

html.dark-mode .fxab-cta {
    background: #151515;
    color: #F8F5F0;
}

/* Maintain the same dark rectangular panel in both modes. */
html.dark-mode .fxab-cta .fxab-cta-shell {
    border-color: rgba(212, 154, 99, 0.42);

    background: linear-gradient(
        135deg,
        #202020 0%,
        #151515 52%,
        #202020 100%
    );

    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.30);
}

html.dark-mode .fxab-cta .fxab-cta-title {
    color: #FFFFFF;
}

html.dark-mode .fxab-cta .fxab-cta-title span,
html.dark-mode .fxab-cta .fxab-cta-eyebrow,
html.dark-mode .fxab-cta .fxab-cta-metric-icon {
    color: #D49A63;
}

html.dark-mode .fxab-cta .fxab-cta-description {
    color: #D8D0C5;
}

html.dark-mode .fxab-cta .fxab-cta-button-primary {
    color: #FFFFFF;
    background: #B87333;
    border-color: #B87333;
}

html.dark-mode .fxab-cta .fxab-cta-button-primary:hover {
    color: #FFFFFF;
    background: #985A25;
    border-color: #985A25;
}

html.dark-mode .fxab-cta .fxab-cta-button-secondary {
    color: #F8F5F0;
    background: rgba(243, 230, 208, 0.08);
    border-color: rgba(243, 230, 208, 0.30);
}

html.dark-mode .fxab-cta .fxab-cta-button-secondary:hover {
    color: #FFFFFF;
    background: rgba(243, 230, 208, 0.15);
    border-color: #D49A63;
}

html.dark-mode .fxab-cta .fxab-cta-metric-copy strong {
    color: #F8F5F0;
}

html.dark-mode .fxab-cta .fxab-cta-metric-copy small,
html.dark-mode .fxab-cta .fxab-cta-status-row {
    color: #C9C1B7;
}

html.dark-mode .fxab-cta .fxab-cta-metrics {
    border-top-color: rgba(243, 230, 208, 0.18);
}

html.dark-mode .fxab-cta .fxab-cta-divider {
    background: rgba(243, 230, 208, 0.20);
}

html.dark-mode .fxab-cta .fxab-cta-button:focus-visible {
    outline-color: #D49A63;
}

/* =========================================================
   HOME 1 · SECTION 05 · LEASE YOUR WAY — DARK MODE CONTRAST FIX
   Paste at the very END of your existing dark.css.

   Why it was unclear: the dark-mode rules for ordinary plan
   cards (grey text, copper button text) were stronger than the
   rules for the centre copper card, so on the copper card they
   turned "/vehicle/mo" grey and "Choose Business" copper-on-white.

   All text on the centre card now measures 4.5:1 or better.
========================================================= */

/* centre card: a slightly deeper copper so white text passes AA */
html.dark-mode .fx-lease-card.pos-center {
    background: #A5632B;
    border-color: #A5632B;
    color: #FFFFFF;
}

html.dark-mode .fx-lease-card.pos-center .fx-lease-name,
html.dark-mode .fx-lease-card.pos-center .fx-lease-desc,
html.dark-mode .fx-lease-card.pos-center .fx-lease-per,
html.dark-mode .fx-lease-card.pos-center .fx-lease-list li {
    color: #FFFFFF;
}

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

/* "Choose Business" button: dark text on the white button */
html.dark-mode .fx-lease-card.pos-center .fx-lease-cta {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #151515;
}

html.dark-mode .fx-lease-card.pos-center .fx-lease-cta:hover {
    background: #F3E6D0;
    border-color: #F3E6D0;
    color: #151515;
}

/* =========================================================
   HOME 2 · SECTION 03 — VEHICLES CENTRED (DARK MODE)
   Tablet, laptop and laptop-L only (768px and up).

   Paste at the very END of assets/css/dark.css.
========================================================= */

@media (min-width: 768px) {

    html.dark-mode .fx-sln .fx-sln-visual {
        background:
            radial-gradient(ellipse at 50% 52%, rgba(212, 154, 99, .22), transparent 64%),
            #0A0A0A;
    }
}

html.dark-mode .fx-back-to-top {
    background: #D49A63;
    border-color: rgba(226, 180, 135, .65);
    color: #151515;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .48);
}

html.dark-mode .fx-back-to-top:hover {
    background: #E2B487;
}

html.dark-mode .fx-back-to-top:focus-visible {
    outline-color: #E2B487;
}