/* =========================================================
   SWIFTROUTE GLOBAL LIGHT / DARK THEME
   ========================================================= */

:root{
    --theme-page:#fffdf8;
    --theme-surface:#ffffff;
    --theme-surface-soft:#f7f1e7;
    --theme-surface-alt:#f2eee7;
    --theme-text:#142533;
    --theme-muted:#6b7881;
    --theme-line:#d8cdbd;
    --theme-header:rgba(255,255,255,.97);
    --theme-shadow:0 22px 60px rgba(3,20,34,.12);
}

html[data-theme="dark"]{
    --theme-page:#07121c;
    --theme-surface:#0d1c29;
    --theme-surface-soft:#112635;
    --theme-surface-alt:#0b1824;
    --theme-text:#eef3f6;
    --theme-muted:#9eb0bb;
    --theme-line:#29404f;
    --theme-header:rgba(7,18,28,.97);
    --theme-shadow:0 22px 60px rgba(0,0,0,.30);
}

html,
body{
    background:var(--theme-page);
    color:var(--theme-text);
}

body,
.new-header,
.new-footer,
.dashboard-card,
.panel,
.auth-card,
.trk-summary,
.trk-map-panel,
.trk-info-card,
.trk-history,
.section,
.editable-page-intro{
    transition:
        background-color .22s ease,
        color .22s ease,
        border-color .22s ease;
}


/* =========================================================
   HEADER
   ========================================================= */

.new-header{
    background:var(--theme-header)!important;
    border-color:var(--theme-line)!important;
}

.new-nav nav a,
.new-actions > a{
    color:var(--theme-text)!important;
}

.new-nav nav a.active,
.new-nav nav a:hover{
    color:var(--brand-accent)!important;
}


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.theme-toggle{
    width:42px;
    height:42px;
    min-width:42px;

    display:inline-grid;
    place-items:center;

    position:relative;

    border:1px solid var(--theme-line);

    border-radius:50%;

    background:var(--theme-surface);

    color:var(--theme-text);

    cursor:pointer;

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

.theme-toggle:hover{
    transform:translateY(-1px);
}

.theme-toggle span{
    position:absolute;

    line-height:1;

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

.theme-toggle .theme-sun{
    opacity:1;
    transform:scale(1);
}

.theme-toggle .theme-moon{
    opacity:0;
    transform:scale(.55);
}

.theme-toggle.is-dark .theme-sun{
    opacity:0;
    transform:scale(.55);
}

.theme-toggle.is-dark .theme-moon{
    opacity:1;
    transform:scale(1);
}


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

.mobile-header-actions{
    display:none;
    align-items:center;
    gap:4px;
}

.mobile-theme-toggle{
    display:none;
}

.mobile-menu-toggle{
    display:none;
    width:46px;
    height:46px;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:8px;
    z-index:10070;
}

.mobile-menu-toggle span{
    display:block;
    width:27px;
    height:2px;
    margin:6px auto;
    background:var(--theme-text);
    transition:transform .25s ease,opacity .25s ease;
}

.mobile-menu-toggle.is-open span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.is-open span:nth-child(2){
    opacity:0;
}

.mobile-menu-toggle.is-open span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

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

.mobile-menu-backdrop{
    display:none;
}


/* =========================================================
   GENERIC DARK MODE SURFACES
   ========================================================= */

html[data-theme="dark"] body{
    background:var(--theme-page)!important;
    color:var(--theme-text)!important;
}

html[data-theme="dark"] .section.light,
html[data-theme="dark"] .section.admin-bg,
html[data-theme="dark"] .editable-page-intro,
html[data-theme="dark"] .trk-main{
    background:var(--theme-page)!important;
}

html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .trk-summary,
html[data-theme="dark"] .trk-map-panel,
html[data-theme="dark"] .trk-info-card,
html[data-theme="dark"] .trk-history,
html[data-theme="dark"] .route-map-card{
    background:var(--theme-surface)!important;
    color:var(--theme-text)!important;
    border-color:var(--theme-line)!important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .trk-reference h2,
html[data-theme="dark"] .trk-panel-head h2,
html[data-theme="dark"] .trk-history-head h2,
html[data-theme="dark"] .trk-event-title h3{
    color:#f6f8f9!important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .trk-event-body p,
html[data-theme="dark"] .section-heading p{
    color:var(--theme-muted)!important;
}

html[data-theme="dark"] .trk-event-body,
html[data-theme="dark"] .trk-history-head,
html[data-theme="dark"] .trk-summary > div,
html[data-theme="dark"] .route-map-ledger > div{
    border-color:var(--theme-line)!important;
}


/* =========================================================
   FORMS
   ========================================================= */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
    background:#07131e!important;
    color:#f0f4f6!important;
    border-color:#38505f!important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:#758b99!important;
}


/* =========================================================
   LOGIN PAGE IMAGE
   ========================================================= */

.swiftroute-login-shell{
    min-height:calc(100vh - 82px);
}

.swiftroute-login-visual{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(3,21,34,.93),
            rgba(5,31,48,.72)
        ),
        url('/assets/images/login-logistics.png')
        center center / cover no-repeat!important;
}

.swiftroute-login-visual::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    background:
        linear-gradient(
            180deg,
            rgba(198,154,85,.08),
            rgba(3,21,34,.15)
        );
}

.login-visual-inner{
    position:relative;
    z-index:2;

    width:min(560px,100%);
}

.swiftroute-login-visual h1{
    text-shadow:
        0 3px 18px rgba(0,0,0,.32);
}

.swiftroute-login-visual p{
    color:#e0e8ec!important;
    text-shadow:
        0 2px 10px rgba(0,0,0,.25);
}

.login-visual-badge{
    max-width:440px;

    margin-top:32px;

    padding:18px 20px;

    border:
        1px solid rgba(255,255,255,.26);

    background:
        rgba(3,21,34,.44);

    backdrop-filter:
        blur(8px);

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

.login-visual-badge span{
    display:block;

    color:#e4bd78;

    font:
        700 9px Arial,sans-serif;

    letter-spacing:.14em;
}

.login-visual-badge strong{
    display:block;

    margin-top:7px;

    color:#fff;

    font:
        400 16px/1.45 Georgia,serif;
}

.swiftroute-login-form-side{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:70px 35px;

    background:var(--theme-surface-alt);
}

.swiftroute-login-form-side .auth-card{
    width:min(520px,100%);
}


/* =========================================================
   FOOTER
   ========================================================= */

html[data-theme="dark"] .new-footer{
    background:#020b12!important;
}


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

@media(max-width:900px){

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

    .new-nav{
        display:flex!important;
        align-items:center;
        justify-content:space-between;
        min-height:78px;
        gap:14px;
    }

    .new-actions{
        display:none!important;
    }

    .mobile-header-actions{
        display:flex;
        margin-left:auto;
    }

    .mobile-theme-toggle,
    .mobile-menu-toggle{
        display:inline-grid!important;
    }

    .mobile-menu-toggle{
        display:block!important;
    }

    .new-nav nav{
        position:fixed!important;

        top:78px;
        left:0;
        right:0;

        width:100%;

        max-height:
            calc(100vh - 78px);

        overflow-y:auto;

        display:flex!important;

        flex-direction:column!important;

        align-items:stretch!important;

        justify-content:flex-start!important;

        gap:0!important;

        padding:18px 28px 28px;

        background:
            var(--theme-surface)!important;

        border-top:
            1px solid var(--theme-line);

        box-shadow:
            0 20px 45px rgba(0,0,0,.16);

        transform:
            translateY(-120%);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
            transform .28s ease,
            opacity .22s ease,
            visibility .22s ease;

        z-index:10060;
    }

    .new-nav nav.is-open{
        transform:translateY(0);
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .new-nav nav > a{
        display:block!important;

        width:100%;

        padding:16px 6px!important;

        color:
            var(--theme-text)!important;

        border-bottom:
            1px solid var(--theme-line);

        font:
            700 16px/1.3 Arial,sans-serif!important;
    }

    .new-nav nav > a::after{
        display:none!important;
    }

    .mobile-nav-actions{
        display:flex!important;
        flex-direction:column;
        gap:12px;
        margin-top:20px;
    }

    .mobile-login,
    .mobile-quote{
        min-height:56px;

        display:flex!important;

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

        text-align:center;

        font:
            700 15px Arial,sans-serif!important;
    }

    .mobile-login{
        color:
            var(--theme-text)!important;

        border:
            1px solid var(--theme-line);

        background:
            var(--theme-surface);
    }

    .mobile-quote{
        color:#071c2e!important;
        background:
            var(--brand-accent)!important;
    }

    .mobile-menu-backdrop{
        position:fixed;

        top:78px;
        left:0;
        right:0;
        bottom:0;

        background:
            rgba(0,12,22,.72);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .22s ease,
            visibility .22s ease;

        z-index:10040;
    }

    .mobile-menu-backdrop.is-open{
        display:block!important;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .swiftroute-login-shell{
        grid-template-columns:1fr!important;
    }

    .swiftroute-login-visual{
        min-height:520px;
    }

    .swiftroute-login-form-side{
        padding:45px 22px;
    }
}


@media(max-width:520px){

    .new-nav{
        min-height:72px;
    }

    .new-nav nav{
        top:72px;
        max-height:
            calc(100vh - 72px);
    }

    .mobile-menu-backdrop{
        top:72px;
    }

    .theme-toggle{
        width:40px;
        height:40px;
        min-width:40px;
    }

    .swiftroute-login-visual{
        min-height:430px;
        padding:50px 26px!important;
    }

    .swiftroute-login-visual h1{
        font-size:42px!important;
    }
}
/* =========================================================
   SWIFTROUTE DARK MODE VISIBILITY + STICKY HEADER FIX
   KEEP THIS AT THE VERY END OF theme.css
   ========================================================= */


/* =========================================================
   STICKY HEADER
   ========================================================= */

.new-header{
    position:sticky !important;
    top:0 !important;
    left:0;
    right:0;

    width:100%;

    z-index:99999 !important;

    background:var(--theme-header,#ffffff);

    box-shadow:
        0 1px 0 rgba(6,27,45,.08);

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


/*
 * Prevent transformed parents from interfering
 * with the sticky header.
 */
body{
    overflow-x:hidden;
}


/* =========================================================
   LIGHT MODE HEADER
   ========================================================= */

html[data-theme="light"] .new-header{
    background:rgba(255,255,255,.97) !important;
}

html[data-theme="light"] .new-nav nav a,
html[data-theme="light"] .new-actions > a{
    color:#071c2e !important;
}


/* =========================================================
   DARK MODE HEADER
   ========================================================= */

html[data-theme="dark"] .new-header{
    background:rgba(4,18,29,.98) !important;

    border-bottom:
        1px solid rgba(255,255,255,.10) !important;
}


html[data-theme="dark"] .new-nav nav a,
html[data-theme="dark"] .new-actions > a{
    color:#f1f5f7 !important;
}


html[data-theme="dark"] .new-nav nav a:hover,
html[data-theme="dark"] .new-nav nav a.active{
    color:#d4aa67 !important;
}


html[data-theme="dark"] .new-nav nav a.active::after{
    background:#c69a55 !important;
}


/* =========================================================
   DARK MODE PAGE BACKGROUNDS
   ========================================================= */

html[data-theme="dark"] body,
html[data-theme="dark"] main{
    background:#07121c !important;
    color:#e8eef2 !important;
}


/*
 * Standard light/cream sections
 */
html[data-theme="dark"] .section,
html[data-theme="dark"] .section.light,
html[data-theme="dark"] .section.admin-bg,
html[data-theme="dark"] .editable-page-intro,
html[data-theme="dark"] .trk-main,
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .services-section,
html[data-theme="dark"] .cms-services,
html[data-theme="dark"] .home-services,
html[data-theme="dark"] .service-section{
    background:#07121c !important;
    color:#e8eef2 !important;
}


/* =========================================================
   SERVICE AREA
   ========================================================= */

html[data-theme="dark"] .cms-service,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .service-item,
html[data-theme="dark"] .home-service-card{
    background:#0d1c29 !important;

    border-color:#29404f !important;

    color:#edf3f6 !important;
}


/*
 * SERVICE TITLES
 */
html[data-theme="dark"] .cms-service h2,
html[data-theme="dark"] .cms-service h3,
html[data-theme="dark"] .service-card h2,
html[data-theme="dark"] .service-card h3,
html[data-theme="dark"] .service-item h2,
html[data-theme="dark"] .service-item h3{
    color:#f6f8f9 !important;
}


/*
 * SERVICE PARAGRAPHS
 */
html[data-theme="dark"] .cms-service p,
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .service-item p{
    color:#aebdc6 !important;
}


/*
 * SERVICE LINKS
 */
html[data-theme="dark"] .cms-service a,
html[data-theme="dark"] .service-card a,
html[data-theme="dark"] .service-item a{
    color:#d4aa67 !important;
}


/* =========================================================
   HOMEPAGE SECTION HEADINGS
   ========================================================= */

html[data-theme="dark"] .section-heading h1,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .section-heading h3,

html[data-theme="dark"] .services-heading h1,
html[data-theme="dark"] .services-heading h2,

html[data-theme="dark"] .cms-section-heading h1,
html[data-theme="dark"] .cms-section-heading h2,

html[data-theme="dark"] .home-section-title,

html[data-theme="dark"] .home-services h1,
html[data-theme="dark"] .home-services h2,

html[data-theme="dark"] .cms-services h1,
html[data-theme="dark"] .cms-services h2{
    color:#f4f7f8 !important;
}


/* =========================================================
   HOMEPAGE SECTION COPY
   ========================================================= */

html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .services-heading p,
html[data-theme="dark"] .cms-section-heading p,
html[data-theme="dark"] .home-services p,
html[data-theme="dark"] .cms-services p{
    color:#9eafb9 !important;
}


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

html[data-theme="dark"] main h1,
html[data-theme="dark"] main h2,
html[data-theme="dark"] main h3,
html[data-theme="dark"] main h4,
html[data-theme="dark"] main h5{
    color:#f4f7f9;
}


/* =========================================================
   GENERIC BODY COPY
   ========================================================= */

html[data-theme="dark"] main p,
html[data-theme="dark"] main li,
html[data-theme="dark"] main span:not(.eyebrow):not(.trk-kicker){
    color:#aebdc6;
}


/* =========================================================
   EYEBROWS / SMALL GOLD OR RED LABELS
   ========================================================= */

html[data-theme="dark"] .eyebrow{
    color:#d4aa67 !important;
}


html[data-theme="dark"] .eyebrow.dark,
html[data-theme="dark"] .trk-kicker.dark{
    color:#d9a068 !important;
}


/* =========================================================
   CARDS / PANELS
   ========================================================= */

html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .trk-summary,
html[data-theme="dark"] .trk-map-panel,
html[data-theme="dark"] .trk-info-card,
html[data-theme="dark"] .trk-history,
html[data-theme="dark"] .route-map-card{
    background:#0d1c29 !important;

    color:#edf3f6 !important;

    border-color:#29404f !important;
}


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

html[data-theme="dark"] .trk-reference h2,
html[data-theme="dark"] .trk-panel-head h2,
html[data-theme="dark"] .trk-history-head h2,
html[data-theme="dark"] .trk-event-title h3{
    color:#f5f8fa !important;
}


html[data-theme="dark"] .trk-event-body p,
html[data-theme="dark"] .trk-history-head p{
    color:#9fb1bc !important;
}


html[data-theme="dark"] .trk-event-body,
html[data-theme="dark"] .trk-history-head,
html[data-theme="dark"] .trk-summary > div{
    border-color:#29404f !important;
}


/* =========================================================
   ROUTE MAP LEDGER
   ========================================================= */

html[data-theme="dark"] .route-map-ledger{
    background:#0d1c29 !important;
}


html[data-theme="dark"] .route-map-ledger > div{
    background:#112432 !important;

    border-color:#29404f !important;
}


html[data-theme="dark"] .route-map-ledger > div.current{
    background:#182c3a !important;

    border-color:#79613c !important;
}


html[data-theme="dark"] .route-map-ledger strong{
    color:#f4f7f8 !important;
}


/* =========================================================
   FORMS
   ========================================================= */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
    background:#07131e !important;

    color:#f3f6f8 !important;

    border-color:#38505f !important;
}


html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:#8294a0 !important;
}


/* =========================================================
   TRACKING CARD ON HERO
   Keep this readable in BOTH themes
   ========================================================= */

html[data-theme="dark"] .hero-tracking-card,
html[data-theme="dark"] .tracking-card,
html[data-theme="dark"] .home-tracking-card{
    background:#0d1c29 !important;

    border-color:#29404f !important;
}


html[data-theme="dark"] .hero-tracking-card h2,
html[data-theme="dark"] .hero-tracking-card h3,
html[data-theme="dark"] .tracking-card h2,
html[data-theme="dark"] .tracking-card h3,
html[data-theme="dark"] .home-tracking-card h2,
html[data-theme="dark"] .home-tracking-card h3{
    color:#f4f7f9 !important;
}


html[data-theme="dark"] .hero-tracking-card p,
html[data-theme="dark"] .tracking-card p,
html[data-theme="dark"] .home-tracking-card p{
    color:#aebdc6 !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

html[data-theme="dark"] .btn-outline{
    border-color:#587080 !important;

    color:#eef3f6 !important;
}


html[data-theme="dark"] .nav-quote,
html[data-theme="dark"] .btn-navy{
    background:#08253a !important;

    color:#fff !important;
}


html[data-theme="dark"] .btn-gold{
    background:#c69a55 !important;

    color:#071c2e !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

html[data-theme="dark"] .new-footer{
    background:#020b12 !important;
}


/* =========================================================
   MOBILE MENU + STICKY HEADER
   ========================================================= */

@media(max-width:900px){

    .new-header{
        position:sticky !important;
        top:0 !important;

        z-index:99999 !important;
    }


    html[data-theme="dark"] .new-nav nav{
        background:#0d1c29 !important;

        border-color:#29404f !important;
    }


    html[data-theme="dark"] .new-nav nav > a{
        color:#edf3f6 !important;

        border-color:#29404f !important;
    }


    html[data-theme="dark"] .mobile-menu-toggle span{
        background:#fff !important;
    }

}


/* =========================================================
   FINAL VISIBILITY + STICKY HEADER OVERRIDES
   KEEP THIS AS THE LAST BLOCK IN theme.css
   ========================================================= */

.new-header{
    position:sticky !important;
    top:0 !important;
    z-index:2147483000 !important;
    width:100% !important;
    isolation:isolate;
}

.new-header .new-nav{
    position:relative;
    z-index:2;
}

html,
body{
    overflow-x:hidden;
}

body{
    overflow-y:visible;
}

html[data-theme="light"] .new-header{
    background:rgba(255,255,255,.98) !important;
    border-bottom:1px solid rgba(6,27,45,.10) !important;
    box-shadow:0 2px 18px rgba(6,27,45,.06) !important;
}

html[data-theme="dark"] .new-header{
    background:rgba(4,18,29,.98) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 2px 22px rgba(0,0,0,.24) !important;
}

html[data-theme="light"] .new-header a{
    color:#071c2e;
}

html[data-theme="dark"] .new-header a{
    color:#eef3f6;
}

html[data-theme="dark"] .new-header .nav-quote{
    color:#fff !important;
}

html[data-theme="dark"] main .section:not(.home-hero):not(.trk-hero),
html[data-theme="dark"] main .home-services,
html[data-theme="dark"] main .cms-services,
html[data-theme="dark"] main .services-section,
html[data-theme="dark"] main .service-section,
html[data-theme="dark"] main .service-grid-section,
html[data-theme="dark"] main .why-section,
html[data-theme="dark"] main .process-section,
html[data-theme="dark"] main .stats-section,
html[data-theme="dark"] main .testimonials-section,
html[data-theme="dark"] main .faq-section{
    background:#07121c !important;
    color:#eef3f6 !important;
}

html[data-theme="dark"] main .section-heading h1,
html[data-theme="dark"] main .section-heading h2,
html[data-theme="dark"] main .section-heading h3,
html[data-theme="dark"] main .services-heading h1,
html[data-theme="dark"] main .services-heading h2,
html[data-theme="dark"] main .services-heading h3,
html[data-theme="dark"] main .cms-section-heading h1,
html[data-theme="dark"] main .cms-section-heading h2,
html[data-theme="dark"] main .cms-section-heading h3,
html[data-theme="dark"] main .home-section-title,
html[data-theme="dark"] main .section-title{
    color:#f7f9fa !important;
    opacity:1 !important;
}

html[data-theme="dark"] main .section-heading p,
html[data-theme="dark"] main .services-heading p,
html[data-theme="dark"] main .cms-section-heading p,
html[data-theme="dark"] main .section-copy,
html[data-theme="dark"] main .lead,
html[data-theme="dark"] main .intro-copy{
    color:#aebdc6 !important;
    opacity:1 !important;
}

html[data-theme="dark"] .cms-service,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .service-item,
html[data-theme="dark"] .home-service-card,
html[data-theme="dark"] .service-tile{
    background:#0d1c29 !important;
    border-color:#29404f !important;
    color:#eef3f6 !important;
}

html[data-theme="dark"] .cms-service h1,
html[data-theme="dark"] .cms-service h2,
html[data-theme="dark"] .cms-service h3,
html[data-theme="dark"] .service-card h1,
html[data-theme="dark"] .service-card h2,
html[data-theme="dark"] .service-card h3,
html[data-theme="dark"] .service-item h1,
html[data-theme="dark"] .service-item h2,
html[data-theme="dark"] .service-item h3,
html[data-theme="dark"] .home-service-card h1,
html[data-theme="dark"] .home-service-card h2,
html[data-theme="dark"] .home-service-card h3,
html[data-theme="dark"] .service-tile h1,
html[data-theme="dark"] .service-tile h2,
html[data-theme="dark"] .service-tile h3{
    color:#f7f9fa !important;
    opacity:1 !important;
}

html[data-theme="dark"] .cms-service p,
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .service-item p,
html[data-theme="dark"] .home-service-card p,
html[data-theme="dark"] .service-tile p{
    color:#aebdc6 !important;
    opacity:1 !important;
}

html[data-theme="dark"] .cms-service a,
html[data-theme="dark"] .service-card a,
html[data-theme="dark"] .service-item a,
html[data-theme="dark"] .home-service-card a,
html[data-theme="dark"] .service-tile a{
    color:#d7ae6d !important;
    opacity:1 !important;
}

html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .admin-form,
html[data-theme="dark"] .event-editor,
html[data-theme="dark"] .event-list,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .trk-summary,
html[data-theme="dark"] .trk-map-panel,
html[data-theme="dark"] .trk-info-card,
html[data-theme="dark"] .trk-history,
html[data-theme="dark"] .route-map-card{
    background:#0d1c29 !important;
    color:#eef3f6 !important;
    border-color:#29404f !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
    background:#07131e !important;
    color:#eef3f6 !important;
    border-color:#38505f !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:#81939f !important;
}

html[data-theme="dark"] .hero-tracking-card,
html[data-theme="dark"] .tracking-card,
html[data-theme="dark"] .home-tracking-card{
    background:#0d1c29 !important;
    color:#eef3f6 !important;
    border-color:#29404f !important;
}

html[data-theme="dark"] .hero-tracking-card h1,
html[data-theme="dark"] .hero-tracking-card h2,
html[data-theme="dark"] .hero-tracking-card h3,
html[data-theme="dark"] .tracking-card h1,
html[data-theme="dark"] .tracking-card h2,
html[data-theme="dark"] .tracking-card h3,
html[data-theme="dark"] .home-tracking-card h1,
html[data-theme="dark"] .home-tracking-card h2,
html[data-theme="dark"] .home-tracking-card h3{
    color:#f7f9fa !important;
}

html[data-theme="dark"] .hero-tracking-card p,
html[data-theme="dark"] .tracking-card p,
html[data-theme="dark"] .home-tracking-card p{
    color:#aebdc6 !important;
}

@media(max-width:900px){

    .new-header{
        position:sticky !important;
        top:0 !important;
        z-index:2147483000 !important;
    }

    .new-nav nav{
        z-index:2147482999 !important;
    }

    .mobile-menu-backdrop{
        z-index:2147482998 !important;
    }

    html[data-theme="dark"] .new-nav nav{
        background:#0d1c29 !important;
        border-color:#29404f !important;
    }

    html[data-theme="dark"] .new-nav nav > a{
        color:#eef3f6 !important;
        border-color:#29404f !important;
    }

    html[data-theme="dark"] .mobile-menu-toggle span{
        background:#fff !important;
    }
}
/* =========================================================
   SWIFTROUTE HEADER — FINAL PREMIUM POLISH
   ========================================================= */

.new-header{
    position:sticky !important;
    top:0 !important;

    width:100%;

    z-index:2147483000 !important;

    background:rgba(255,255,255,.98) !important;

    border-bottom:
        1px solid rgba(6,27,45,.08) !important;

    box-shadow:
        0 6px 24px rgba(6,27,45,.06) !important;

    backdrop-filter:
        blur(14px);

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


/* =========================================================
   NAV WRAPPER
   ========================================================= */

.new-nav{
    min-height:82px;

    display:flex !important;

    align-items:center;

    gap:32px;
}


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

.new-brand{
    flex:
        0 0 auto;
}


.new-brand-logo{
    width:220px !important;

    max-width:220px !important;

    height:54px !important;

    object-fit:contain !important;

    object-position:left center !important;
}


/* =========================================================
   MAIN NAV
   ========================================================= */

.new-nav > nav{
    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;
}


.new-nav > nav > a{
    position:relative;

    padding:
        30px 0 27px;

    color:#071c2e !important;

    text-decoration:none;

    font:
        700 14px/1
        Arial,
        Helvetica,
        sans-serif !important;

    transition:
        color .2s ease;
}


.new-nav > nav > a:hover{
    color:#b6853d !important;
}


.new-nav > nav > a.active{
    color:#b6853d !important;
}


.new-nav > nav > a::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:18px;

    height:2px;

    background:
        var(--brand-accent,#c69a55);

    transform:
        scaleX(0);

    transform-origin:center;

    transition:
        transform .22s ease;
}


.new-nav > nav > a:hover::after,
.new-nav > nav > a.active::after{
    transform:
        scaleX(1);
}


/* =========================================================
   RIGHT ACTIONS
   ========================================================= */

.new-actions{
    display:flex !important;

    align-items:center;

    gap:14px;

    flex:
        0 0 auto;
}


.new-actions > a:not(.nav-quote){
    color:#071c2e !important;

    text-decoration:none;

    font:
        700 14px Arial,
        Helvetica,
        sans-serif !important;
}


/* =========================================================
   THEME BUTTON
   ========================================================= */

.theme-toggle{
    width:42px !important;
    height:42px !important;

    min-width:42px !important;

    border:
        1px solid #d8cdbd !important;

    background:
        #fff !important;

    color:
        #071c2e !important;

    box-shadow:
        none !important;
}


.theme-toggle:hover{
    border-color:
        var(--brand-accent,#c69a55) !important;

    background:
        #faf6ef !important;
}


/* =========================================================
   GET QUOTE
   ========================================================= */

.new-header .nav-quote{
    min-width:112px;

    min-height:44px;

    display:inline-flex !important;

    align-items:center;

    justify-content:center;

    padding:
        0 21px !important;

    border:
        1px solid #061b2d !important;

    border-radius:
        6px;

    background:
        #061b2d !important;

    color:
        #ffffff !important;

    text-decoration:
        none !important;

    font:
        700 13px/1
        Arial,
        Helvetica,
        sans-serif !important;

    letter-spacing:
        .01em;

    white-space:
        nowrap;

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


.new-header .nav-quote:hover{
    background:
        var(--brand-accent,#c69a55) !important;

    border-color:
        var(--brand-accent,#c69a55) !important;

    color:
        #071c2e !important;

    transform:
        translateY(-1px);
}


/* =========================================================
   DARK MODE HEADER
   ========================================================= */

html[data-theme="dark"] .new-header{
    background:
        rgba(3,17,28,.98) !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.10) !important;

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


html[data-theme="dark"]
.new-nav > nav > a{
    color:
        #eef3f6 !important;
}


html[data-theme="dark"]
.new-nav > nav > a:hover,
html[data-theme="dark"]
.new-nav > nav > a.active{
    color:
        #d7ae6d !important;
}


html[data-theme="dark"]
.new-actions > a:not(.nav-quote){
    color:
        #eef3f6 !important;
}


html[data-theme="dark"]
.theme-toggle{
    background:
        #102432 !important;

    border-color:
        #334b5a !important;

    color:
        #ffffff !important;
}


html[data-theme="dark"]
.theme-toggle:hover{
    background:
        #162d3d !important;

    border-color:
        #c69a55 !important;
}


html[data-theme="dark"]
.new-header .nav-quote{
    background:
        #c69a55 !important;

    border-color:
        #c69a55 !important;

    color:
        #071c2e !important;
}


html[data-theme="dark"]
.new-header .nav-quote:hover{
    background:
        #e0bd82 !important;

    border-color:
        #e0bd82 !important;
}


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

@media(max-width:900px){

    .new-nav{
        min-height:
            74px;

        gap:
            8px;
    }


    .new-brand-logo{
        width:
            185px !important;

        max-width:
            185px !important;

        height:
            46px !important;
    }


    .new-nav > nav{
        position:fixed !important;

        top:
            74px;

        left:
            0;

        right:
            0;

        display:flex !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        justify-content:
            flex-start !important;

        gap:
            0 !important;

        max-height:
            calc(100vh - 74px);

        overflow-y:
            auto;

        padding:
            14px 24px 28px;

        background:
            var(--theme-surface,#fff) !important;

        transform:
            translateY(-120%);

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        z-index:
            2147482999 !important;
    }


    .new-nav > nav.is-open{
        transform:
            translateY(0);

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;
    }


    .new-nav > nav > a{
        padding:
            16px 5px !important;

        border-bottom:
            1px solid
            var(--theme-line,#ddd);

        font-size:
            16px !important;
    }


    .new-nav > nav > a::after{
        display:none !important;
    }


    .new-actions{
        display:
            none !important;
    }


    .mobile-header-actions{
        display:
            flex !important;

        align-items:
            center;

        gap:
            5px;

        margin-left:
            auto;
    }


    .mobile-theme-toggle,
    .mobile-menu-toggle{
        display:
            inline-grid !important;
    }


    .mobile-menu-backdrop{
        top:
            74px !important;
    }

}


@media(max-width:520px){

    .new-nav{
        min-height:
            70px;
    }


    .new-brand-logo{
        width:
            165px !important;

        max-width:
            165px !important;

        height:
            42px !important;
    }


    .new-nav > nav{
        top:
            70px;
    }


    .mobile-menu-backdrop{
        top:
            70px !important;
    }

}



/* =========================================================
   SWIFTROUTE HEADER — FINAL OVERRIDE
   This block must remain LAST in theme.css.
   It resolves conflicting earlier header rules.
   ========================================================= */

:root{
    --sr-header-height:82px;
}

/* Keep header visible while scrolling */
.new-header{
    position:sticky !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    z-index:2147483000 !important;

    background:rgba(255,255,255,.985) !important;

    border-bottom:1px solid rgba(6,27,45,.08) !important;

    box-shadow:0 6px 26px rgba(6,27,45,.07) !important;

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

.new-header .new-nav{
    min-height:var(--sr-header-height) !important;

    display:grid !important;

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

    align-items:center !important;

    gap:30px !important;

    position:relative !important;
}

/* Logo */
.new-header .new-brand{
    display:flex !important;
    align-items:center !important;
    min-width:0;
}

.new-header .new-brand-logo{
    display:block !important;

    width:205px !important;
    max-width:205px !important;
    height:52px !important;

    object-fit:contain !important;
    object-position:left center !important;
}

/* Desktop navigation */
.new-header .new-nav > nav{
    display:flex !important;

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

    gap:31px !important;

    min-width:0;
}

.new-header .new-nav > nav > a{
    display:inline-flex !important;

    align-items:center !important;

    position:relative !important;

    min-height:var(--sr-header-height) !important;

    padding:0 !important;

    color:#071c2e !important;

    font:
        700 14px/1
        Arial,
        Helvetica,
        sans-serif !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    opacity:1 !important;
    visibility:visible !important;
}

.new-header .new-nav > nav > a::after{
    content:"" !important;

    position:absolute !important;

    left:0 !important;
    right:0 !important;
    bottom:18px !important;

    height:2px !important;

    background:var(--brand-accent,#c69a55) !important;

    transform:scaleX(0) !important;

    transform-origin:center !important;

    transition:transform .2s ease !important;
}

.new-header .new-nav > nav > a:hover,
.new-header .new-nav > nav > a.active{
    color:#aa7c37 !important;
}

.new-header .new-nav > nav > a:hover::after,
.new-header .new-nav > nav > a.active::after{
    transform:scaleX(1) !important;
}

/* Right actions */
.new-header .new-actions{
    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;

    gap:13px !important;

    min-width:max-content !important;
}

.new-header .new-actions > a:not(.nav-quote){
    display:inline-flex !important;

    align-items:center !important;

    min-height:44px !important;

    color:#071c2e !important;

    font:
        700 14px/1
        Arial,
        Helvetica,
        sans-serif !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    opacity:1 !important;
    visibility:visible !important;
}

/* Theme toggle */
.new-header .theme-toggle{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;

    display:inline-grid !important;
    place-items:center !important;

    border:1px solid #d8cdbd !important;
    border-radius:50% !important;

    background:#fff !important;
    color:#071c2e !important;

    opacity:1 !important;
    visibility:visible !important;
}

/* Get Quote — force text visibility */
.new-header .new-actions .nav-quote{
    min-width:112px !important;
    min-height:44px !important;

    display:inline-flex !important;

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

    padding:0 20px !important;

    border:1px solid #061b2d !important;
    border-radius:6px !important;

    background:#061b2d !important;

    color:#ffffff !important;

    -webkit-text-fill-color:#ffffff !important;

    font:
        700 13px/1
        Arial,
        Helvetica,
        sans-serif !important;

    letter-spacing:.01em !important;

    text-decoration:none !important;
    text-indent:0 !important;
    text-transform:none !important;

    opacity:1 !important;
    visibility:visible !important;

    overflow:visible !important;

    white-space:nowrap !important;
}

/* Also force any nested node inside the quote button to show */
.new-header .new-actions .nav-quote *,
.new-header .new-actions .nav-quote span{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
    visibility:visible !important;
}

.new-header .new-actions .nav-quote:hover{
    background:var(--brand-accent,#c69a55) !important;
    border-color:var(--brand-accent,#c69a55) !important;

    color:#071c2e !important;
    -webkit-text-fill-color:#071c2e !important;
}

.new-header .new-actions .nav-quote:hover *,
.new-header .new-actions .nav-quote:hover span{
    color:#071c2e !important;
    -webkit-text-fill-color:#071c2e !important;
}

/* Dark mode */
html[data-theme="dark"] .new-header{
    background:rgba(3,17,28,.985) !important;

    border-bottom:1px solid rgba(255,255,255,.10) !important;

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

html[data-theme="dark"] .new-header .new-nav > nav > a,
html[data-theme="dark"] .new-header .new-actions > a:not(.nav-quote){
    color:#eef3f6 !important;
}

html[data-theme="dark"] .new-header .new-nav > nav > a:hover,
html[data-theme="dark"] .new-header .new-nav > nav > a.active{
    color:#d7ae6d !important;
}

html[data-theme="dark"] .new-header .theme-toggle{
    background:#102432 !important;
    border-color:#334b5a !important;
    color:#fff !important;
}

html[data-theme="dark"] .new-header .new-actions .nav-quote{
    background:#c69a55 !important;
    border-color:#c69a55 !important;

    color:#071c2e !important;
    -webkit-text-fill-color:#071c2e !important;
}

html[data-theme="dark"] .new-header .new-actions .nav-quote *,
html[data-theme="dark"] .new-header .new-actions .nav-quote span{
    color:#071c2e !important;
    -webkit-text-fill-color:#071c2e !important;
}

/* Avoid sticky-header clipping */
html,
body{
    overflow-x:hidden !important;
}

body{
    overflow-y:visible !important;
}

/* Mobile */
@media(max-width:900px){

    :root{
        --sr-header-height:74px;
    }

    .new-header .new-nav{
        display:flex !important;

        align-items:center !important;

        gap:8px !important;

        min-height:var(--sr-header-height) !important;
    }

    .new-header .new-brand-logo{
        width:180px !important;
        max-width:180px !important;
        height:46px !important;
    }

    .new-header .new-actions{
        display:none !important;
    }

    .new-header .mobile-header-actions{
        display:flex !important;

        align-items:center !important;

        gap:5px !important;

        margin-left:auto !important;
    }

    .new-header .mobile-theme-toggle{
        display:inline-grid !important;
    }

    .new-header .mobile-menu-toggle{
        display:block !important;
    }

    .new-header .new-nav > nav{
        position:fixed !important;

        top:var(--sr-header-height) !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;

        max-height:
            calc(100vh - var(--sr-header-height)) !important;

        overflow-y:auto !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;

        justify-content:flex-start !important;

        gap:0 !important;

        padding:14px 24px 28px !important;

        background:var(--theme-surface,#fff) !important;

        transform:translateY(-120%) !important;

        opacity:0 !important;

        visibility:hidden !important;

        pointer-events:none !important;

        z-index:2147482999 !important;
    }

    .new-header .new-nav > nav.is-open{
        transform:translateY(0) !important;

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;
    }

    .new-header .new-nav > nav > a{
        width:100% !important;

        min-height:auto !important;

        padding:16px 5px !important;

        border-bottom:
            1px solid var(--theme-line,#ddd) !important;

        font-size:16px !important;
    }

    .new-header .new-nav > nav > a::after{
        display:none !important;
    }

    .mobile-menu-backdrop{
        top:var(--sr-header-height) !important;

        z-index:2147482998 !important;
    }

    html[data-theme="dark"] .new-header .new-nav > nav{
        background:#0d1c29 !important;

        border-color:#29404f !important;
    }

    html[data-theme="dark"] .new-header .new-nav > nav > a{
        color:#eef3f6 !important;

        border-color:#29404f !important;
    }

    html[data-theme="dark"] .new-header .mobile-menu-toggle span{
        background:#fff !important;
    }
}

@media(max-width:520px){

    :root{
        --sr-header-height:70px;
    }

    .new-header .new-brand-logo{
        width:160px !important;
        max-width:160px !important;
        height:42px !important;
    }
}

/* =========================================================
   FIXED HEADER — ALWAYS STAYS ON TOP
   ========================================================= */

:root{
    --swiftroute-header-height:82px;
}


/* HEADER */

.new-header{
    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    z-index:2147483000 !important;

    background:rgba(255,255,255,.98) !important;

    border-bottom:
        1px solid rgba(6,27,45,.08) !important;

    box-shadow:
        0 5px 24px rgba(6,27,45,.08) !important;

    backdrop-filter:blur(14px);

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


/* Push the page below the fixed header */

body{
    padding-top:
        var(--swiftroute-header-height) !important;
}


/* Prevent hero from adding another unwanted gap */

main{
    margin-top:0 !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .new-header{
    background:
        rgba(3,17,28,.98) !important;

    border-bottom:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 5px 28px rgba(0,0,0,.28) !important;
}


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

@media(max-width:900px){

    :root{
        --swiftroute-header-height:74px;
    }


    .new-header{
        position:fixed !important;

        top:0 !important;

        z-index:2147483000 !important;
    }


    body{
        padding-top:
            var(--swiftroute-header-height) !important;
    }


    .new-header .new-nav > nav{
        top:
            var(--swiftroute-header-height) !important;

        max-height:
            calc(
                100vh
                -
                var(--swiftroute-header-height)
            ) !important;
    }


    .mobile-menu-backdrop{
        top:
            var(--swiftroute-header-height) !important;
    }

}


@media(max-width:520px){

    :root{
        --swiftroute-header-height:70px;
    }

}