/* ==========================================================================
   MEX MILES — Brand Design System
   Loaded LAST so it harmonises the three legacy palettes onto the logo.
   Palette is derived from logo-two.png:
     crimson #9C0001 (mark)  |  deep plum #230E35 (tagline)
   ========================================================================== */

:root {
    /* --- Brand: crimson (from the MEX mark) --- */
    --mex-red-50:  #FDF3F3;
    --mex-red-100: #FAE0E0;
    --mex-red-200: #F2BDBD;
    --mex-red-400: #C4272C;
    --mex-red-500: #B01419;
    --mex-red-600: #9C0001; /* logo red */
    --mex-red-700: #7C0001;
    --mex-red-900: #4E0001;

    /* --- Brand: deep plum (from the tagline) --- */
    --mex-plum-50:  #F6F4F8;
    --mex-plum-100: #EAE5EF;
    --mex-plum-200: #D3CADC;
    --mex-plum-400: #6B5480;
    --mex-plum-600: #3D2154;
    --mex-plum-800: #230E35; /* logo plum */
    --mex-plum-900: #180825;

    /* --- Semantic --- */
    --mex-ink:      #230E35;
    --mex-heading:  #1C0A2B;
    --mex-body:     #574C64;
    --mex-muted:    #837A90;
    --mex-line:     #E9E4EE;
    --mex-line-soft:#F1EDF4;
    --mex-surface:  #FFFFFF;
    --mex-surface-2:#FAF8FB;
    --mex-surface-3:#F5F2F7;

    --mex-primary:  var(--mex-red-600);
    --mex-primary-h:var(--mex-red-700);

    /* --- Radii (restrained, not childish) --- */
    --mex-r-sm: 6px;
    --mex-r-md: 10px;
    --mex-r-lg: 14px;
    --mex-r-xl: 20px;
    --mex-r-pill: 999px;

    /* --- Elevation (soft, plum-tinted) --- */
    --mex-sh-xs: 0 1px 2px rgba(35,14,53,.06);
    --mex-sh-sm: 0 2px 8px rgba(35,14,53,.06), 0 1px 2px rgba(35,14,53,.04);
    --mex-sh-md: 0 8px 24px rgba(35,14,53,.08), 0 2px 6px rgba(35,14,53,.04);
    --mex-sh-lg: 0 18px 46px rgba(35,14,53,.12), 0 4px 12px rgba(35,14,53,.06);
    --mex-sh-red:0 10px 28px rgba(156,0,1,.24);

    /* --- Motion --- */
    --mex-ease: cubic-bezier(.22,.61,.36,1);
    --mex-dur: .38s;

    /* --- Type --- */
    --mex-font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mex-font-body: "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   1. Palette reconciliation — retire off-brand blue / orange / slate
   ========================================================================== */

/* legacy template blue #24416B / #19345A -> plum */
.fun-blue-bg,
.counter-area-two,
.began-area .began-content,
.footer-bottom-area.fun-blue-bg { background-color: var(--mex-plum-800) !important; }

/* legacy custom orange #F96A1C + slate #1C2434 (parcel-service.css) -> brand */
.svc-scope { --svc-accent: var(--mex-red-600); }
.svc-solution:hover i,
.svc-reason i,
.svc-items li i,
.svc-stop.is-lit .svc-stop-dot { color: var(--mex-red-600); }
.svc-stop.is-lit .svc-stop-dot { background: var(--mex-red-600); border-color: var(--mex-red-600); }
.svc-route.is-running .svc-route-line span { background: var(--mex-red-600); }
.svc-solution h3, .svc-stop h3, .svc-reason h3, .svc-close h2 { color: var(--mex-heading); }
.svc-solution p, .svc-stop p, .svc-reason p, .svc-note p { color: var(--mex-body); }
.svc-surface { background: var(--mex-surface-2); }

/* ==========================================================================
   2. Typography
   ========================================================================== */

body {
    font-family: var(--mex-font-body);
    color: var(--mex-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    background: var(--mex-surface);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mex-font-head);
    color: var(--mex-heading);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.18;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.15rem + 1.7vw, 2.5rem); letter-spacing: -.018em; }
h3 { font-size: clamp(1.1rem, .98rem + .45vw, 1.3rem); letter-spacing: -.012em; }

p { color: var(--mex-body); }
p:last-child { margin-bottom: 0; }

a { transition: color var(--mex-dur) var(--mex-ease); }
a:hover { color: var(--mex-primary); }

/* Eyebrow label above section headings */
.section-title span,
.about-content span,
.svc-heading-left span {
    display: inline-block;
    font-family: var(--mex-font-head);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mex-red-600);
    margin-bottom: 12px;
}
.section-title span::after,
.about-content span::after { display: none; }

.section-title { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-title h2 { margin-bottom: 0; }
.section-title.text-start,
.svc-heading-left { text-align: left; margin-left: 0; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.default-btn,
.svc-close .default-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--mex-font-head);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 14px 30px;
    border: 1px solid transparent;
    border-radius: var(--mex-r-md);
    background: var(--mex-red-600);
    color: #fff;
    box-shadow: var(--mex-sh-sm);
    transition: transform var(--mex-dur) var(--mex-ease),
                box-shadow var(--mex-dur) var(--mex-ease),
                background-color var(--mex-dur) var(--mex-ease);
    overflow: hidden;
}
.default-btn::before,
.default-btn::after { display: none !important; }

.default-btn:hover,
.default-btn:focus-visible {
    background: var(--mex-red-700);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--mex-sh-red);
}
.default-btn:active { transform: translateY(0); }

/* Secondary / outline */
.default-btn.btn-two,
.default-btn.mex-btn-ghost {
    background: transparent;
    color: var(--mex-plum-800);
    border-color: var(--mex-line);
    box-shadow: none;
}
.default-btn.btn-two:hover,
.default-btn.mex-btn-ghost:hover {
    background: var(--mex-plum-800);
    border-color: var(--mex-plum-800);
    color: #fff;
    box-shadow: var(--mex-sh-md);
}

/* On dark/plum backgrounds */
.mex-on-dark .default-btn.mex-btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,.38);
}
.mex-on-dark .default-btn.mex-btn-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--mex-plum-800);
}

/* Circular "read more" arrow */
.circle-read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--mex-r-pill);
    background: var(--mex-red-50);
    color: var(--mex-red-600);
    border: 1px solid var(--mex-red-100);
    transition: all var(--mex-dur) var(--mex-ease);
}
.circle-read-more:hover {
    background: var(--mex-red-600);
    border-color: var(--mex-red-600);
    color: #fff;
    transform: translateX(4px);
}

/* ==========================================================================
   4. Header — sticky, modern nav
   ========================================================================== */

.top-header.header-style-two {
    background: var(--mex-plum-800);
    padding: 9px 0;
    font-size: .875rem;
}
.top-header .header-right-content ul li a,
.top-header .header-right-content ul li span { color: rgba(255,255,255,.86); }
.top-header .header-right-content ul li a:hover { color: #fff; }
.top-header .header-left-content img { max-height: 40px; width: auto; }

.prevoz-nav-style {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--mex-line-soft);
    transition: box-shadow var(--mex-dur) var(--mex-ease),
                padding var(--mex-dur) var(--mex-ease);
}
.prevoz-nav-style.mex-stuck {
    box-shadow: var(--mex-sh-md);
    border-bottom-color: transparent;
}
.prevoz-nav-style .navbar-brand img { max-height: 46px; width: auto; transition: max-height var(--mex-dur) var(--mex-ease); }
.prevoz-nav-style.mex-stuck .navbar-brand img { max-height: 38px; }

.main-nav { background: transparent; padding: 0; box-shadow: none; }
.main-nav nav { padding: 0; }

.navbar-nav { align-items: center; gap: 2px; }

.navbar-nav .nav-item > .nav-link {
    position: relative;
    font-family: var(--mex-font-head);
    font-size: .95rem;
    font-weight: 500;
    color: var(--mex-plum-800);
    padding: 26px 16px !important;
    transition: color var(--mex-dur) var(--mex-ease);
}
.navbar-nav .nav-item > .nav-link::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--mex-red-600);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--mex-dur) var(--mex-ease);
}
.navbar-nav .nav-item > .nav-link:hover { color: var(--mex-red-600); }
.navbar-nav .nav-item > .nav-link:hover::after { transform: scaleX(1); }

/* active page */
.navbar-nav .nav-item.mex-active > .nav-link { color: var(--mex-red-600); font-weight: 600; }
.navbar-nav .nav-item.mex-active > .nav-link::after { transform: scaleX(1); }

/* Header CTA */
.mex-nav-cta {
    margin-left: 12px;
    padding: 11px 22px !important;
    border-radius: var(--mex-r-md);
    background: var(--mex-red-600);
    color: #fff !important;
    font-weight: 600;
    box-shadow: var(--mex-sh-sm);
    transition: all var(--mex-dur) var(--mex-ease);
}
.mex-nav-cta::after { display: none !important; }
.mex-nav-cta:hover {
    background: var(--mex-red-700);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: var(--mex-sh-red);
}

/* Dropdown — modern, animated (fixes legacy left:500px bug) */
.nav-item.dropdown { position: relative; }
.nav-item.dropdown .service-dropdown,
.navbar-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    display: block;
    min-width: 288px;
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--mex-line-soft);
    border-radius: var(--mex-r-lg);
    box-shadow: var(--mex-sh-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--mex-dur) var(--mex-ease),
                transform var(--mex-dur) var(--mex-ease),
                visibility var(--mex-dur);
    z-index: 1040;
}
.nav-item.dropdown:hover > .service-dropdown,
.nav-item.dropdown:focus-within > .service-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.service-dropdown li { list-style: none; }
.service-dropdown li a {
    display: block;
    padding: 11px 14px;
    border-radius: var(--mex-r-sm);
    font-size: .93rem;
    font-weight: 500;
    color: var(--mex-plum-800);
    transition: all .2s var(--mex-ease);
}
.service-dropdown li a:hover,
.service-dropdown li a:focus-visible {
    background: var(--mex-red-50);
    color: var(--mex-red-600);
    padding-left: 20px;
}
.service-dropdown li.mex-active > a { background: var(--mex-red-50); color: var(--mex-red-600); }

/* caret for dropdown parent */
.nav-item.dropdown > .nav-link::before {
    content: "\ea4e";
    font-family: "remixicon";
    font-size: .85em;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
    transition: transform var(--mex-dur) var(--mex-ease);
}
.nav-item.dropdown:hover > .nav-link::before { transform: rotate(180deg); }

/* ==========================================================================
   5. Cards & content blocks
   ========================================================================== */

.single-offer,
.single-service,
.single-address,
.svc-solution,
.svc-reason {
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--mex-line);
    border-radius: var(--mex-r-lg);
    padding: 34px 30px;
    box-shadow: var(--mex-sh-xs);
    transition: transform var(--mex-dur) var(--mex-ease),
                box-shadow var(--mex-dur) var(--mex-ease),
                border-color var(--mex-dur) var(--mex-ease);
}
.single-offer:hover,
.single-service:hover,
.single-address:hover,
.svc-solution:hover,
.svc-reason:hover {
    transform: translateY(-6px);
    box-shadow: var(--mex-sh-lg);
    border-color: var(--mex-red-100);
}

/* icon container */
.single-offer > i.icon,
.single-service i.icon,
.single-address > i,
.svc-solution > i,
.svc-reason > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px; height: 58px;
    margin-bottom: 20px;
    font-size: 26px;
    line-height: 1;
    border-radius: var(--mex-r-md);
    background: var(--mex-red-50);
    color: var(--mex-red-600);
    border: 1px solid var(--mex-red-100);
    transition: all var(--mex-dur) var(--mex-ease);
}
.single-offer:hover > i.icon,
.single-service:hover i.icon,
.single-address:hover > i,
.svc-solution:hover > i,
.svc-reason:hover > i {
    background: var(--mex-red-600);
    border-color: var(--mex-red-600);
    color: #fff;
    transform: translateY(-3px) scale(1.04);
}

.single-offer h3,
.single-service h3,
.single-address h3 { margin-bottom: 10px; }
.single-offer p,
.single-service p { margin-bottom: 18px; font-size: .95rem; }

/* the "what we offer" strip sits over the hero */
.what-offer-area-two .row { gap: 0; }
.what-offer-area-two .col-lg-3 { padding: 10px !important; }

/* ==========================================================================
   6. Sections, surfaces & separators
   ========================================================================== */

section { position: relative; }

.mex-surface-alt { background: var(--mex-surface-2); }
.mex-surface-plum { background: var(--mex-plum-800); }

/* light text when on plum */
.mex-on-dark, .mex-on-dark p, .mex-on-dark li { color: rgba(255,255,255,.82); }
.mex-on-dark h1, .mex-on-dark h2, .mex-on-dark h3, .mex-on-dark h4 { color: #fff; }
.mex-on-dark .section-title span { color: var(--mex-red-200); }

/* soft decorative blobs */
.mex-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
.mex-blob-red  { background: rgba(156,0,1,.14); }
.mex-blob-plum { background: rgba(61,33,84,.14); }

/* curved separator */
.mex-curve {
    position: absolute;
    left: 0; right: 0;
    width: 100%;
    height: 64px;
    line-height: 0;
    pointer-events: none;
    z-index: 1;
}
.mex-curve svg { display: block; width: 100%; height: 100%; }
.mex-curve-bottom { bottom: -1px; }
.mex-curve-top { top: -1px; }

/* keep real content above decoration */
.mex-curve + .container, section > .container { position: relative; z-index: 2; }

/* ==========================================================================
   7. Hero — shared system, per-page identity via modifier
   ========================================================================== */

.mex-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 8vw, 118px) 0 clamp(72px, 9vw, 130px);
    background: linear-gradient(168deg, var(--mex-surface-3) 0%, #fff 58%);
    border-bottom: 1px solid var(--mex-line-soft);
}
.mex-hero .container { position: relative; z-index: 2; }

.mex-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    margin-bottom: 20px;
    font-family: var(--mex-font-head);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mex-red-600);
    background: #fff;
    border: 1px solid var(--mex-red-100);
    border-radius: var(--mex-r-pill);
    box-shadow: var(--mex-sh-xs);
}
.mex-hero h1 { margin-bottom: 18px; }
.mex-hero-lead {
    font-size: clamp(1rem, .95rem + .25vw, 1.13rem);
    max-width: 56ch;
    margin-bottom: 30px;
}
.mex-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* breadcrumb */
.mex-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    list-style: none; padding: 0; margin: 0 0 20px;
    font-size: .86rem; color: var(--mex-muted);
}
.mex-crumb li { display: flex; align-items: center; gap: 8px; }
.mex-crumb li + li::before { content: "/"; color: var(--mex-line); }
.mex-crumb a { color: var(--mex-muted); }
.mex-crumb a:hover { color: var(--mex-red-600); }
.mex-crumb [aria-current="page"] { color: var(--mex-plum-800); font-weight: 600; }

/* hero visual card */
.mex-hero-visual {
    position: relative;
    border-radius: var(--mex-r-xl);
    overflow: hidden;
    box-shadow: var(--mex-sh-lg);
    aspect-ratio: 4 / 3;
}
.mex-hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* floating stat chip over hero image */
.mex-float-card {
    position: absolute;
    background: #fff;
    border: 1px solid var(--mex-line);
    border-radius: var(--mex-r-lg);
    box-shadow: var(--mex-sh-lg);
    padding: 16px 20px;
    display: flex; align-items: center; gap: 13px;
    animation: mex-float 6s ease-in-out infinite;
}
.mex-float-card i { font-size: 22px; color: var(--mex-red-600); }
.mex-float-card strong { display: block; font-family: var(--mex-font-head); color: var(--mex-heading); font-size: .98rem; line-height: 1.25; }
.mex-float-card span { font-size: .8rem; color: var(--mex-muted); }

@keyframes mex-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-11px); }
}

/* ==========================================================================
   8. Scroll reveal (CSS-driven; JS only toggles a class)
   ========================================================================== */

/* Hidden state applies ONLY when JS is confirmed (html.mex-js), so a JS
   failure can never leave content permanently invisible. */
.mex-js [data-mex-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .68s var(--mex-ease), transform .68s var(--mex-ease);
    will-change: opacity, transform;
}
.mex-js [data-mex-reveal="left"]  { transform: translateX(-26px); }
.mex-js [data-mex-reveal="right"] { transform: translateX(26px); }
.mex-js [data-mex-reveal="zoom"]  { transform: scale(.965); }

.mex-js [data-mex-reveal].mex-in {
    opacity: 1;
    transform: none;
}

/* stagger children */
[data-mex-stagger] > * { transition-delay: calc(var(--mex-i, 0) * 90ms); }

/* ==========================================================================
   9. Counters / stat band
   ========================================================================== */

.mex-stats { background: var(--mex-plum-800); position: relative; overflow: hidden; }
.mex-stat {
    text-align: center;
    padding: 14px 10px;
}
.mex-stat .mex-stat-num {
    font-family: var(--mex-font-head);
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.mex-stat .mex-stat-num .mex-suffix { color: var(--mex-red-200); }
.mex-stat p {
    margin: 8px 0 0;
    font-size: .92rem;
    color: rgba(255,255,255,.72);
    letter-spacing: .01em;
}

/* ==========================================================================
   10. CTA band
   ========================================================================== */

.mex-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--mex-plum-800) 0%, var(--mex-plum-600) 100%);
    border-radius: var(--mex-r-xl);
    padding: clamp(38px, 5vw, 62px);
    text-align: center;
}
.mex-cta h2 { color: #fff; margin-bottom: 14px; }
.mex-cta p { color: rgba(255,255,255,.8); max-width: 60ch; margin: 0 auto 28px; }
.mex-cta .mex-hero-actions { justify-content: center; }

/* ==========================================================================
   11. Forms
   ========================================================================== */

.form-control {
    height: auto;
    padding: 13px 16px;
    font-size: .96rem;
    color: var(--mex-ink);
    background: #fff;
    border: 1px solid var(--mex-line);
    border-radius: var(--mex-r-md);
    box-shadow: none;
    transition: border-color .2s var(--mex-ease), box-shadow .2s var(--mex-ease);
}
.form-control::placeholder { color: var(--mex-muted); }
.form-control:focus {
    border-color: var(--mex-red-400);
    box-shadow: 0 0 0 4px var(--mex-red-50);
    outline: none;
}
.form-group { margin-bottom: 20px; }

.contact-wrap {
    background: #fff;
    border: 1px solid var(--mex-line);
    border-radius: var(--mex-r-xl);
    padding: clamp(26px, 4vw, 48px);
    box-shadow: var(--mex-sh-md);
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.footer-top-area {
    background: var(--mex-plum-800);
    padding-top: 76px;
    padding-bottom: 46px;
    color: rgba(255,255,255,.72);
}
.mex-footer-brand img { max-height: 46px; width: auto; margin-bottom: 18px; }
.mex-footer-about { font-size: .94rem; color: rgba(255,255,255,.66); max-width: 34ch; }

.footer-top-area .single-widget h3 {
    position: relative;
    font-size: 1.02rem;
    color: #fff;
    margin-bottom: 22px;
    padding-bottom: 12px;
}
.footer-top-area .single-widget h3::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34px; height: 2px;
    border-radius: 2px;
    background: var(--mex-red-500);
}
.footer-top-area .single-widget ul { list-style: none; padding: 0; margin: 0; }
.footer-top-area .single-widget ul li { margin-bottom: 11px; }
.footer-top-area .single-widget ul li a {
    display: inline-block;
    font-size: .94rem;
    color: rgba(255,255,255,.7);
    transition: color .25s var(--mex-ease), transform .25s var(--mex-ease);
}
.footer-top-area .single-widget ul li a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-bottom-area {
    background: var(--mex-plum-900);
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,.08);
}
.footer-bottom-area .footer-text p { color: rgba(255,255,255,.6); font-size: .9rem; }
.footer-bottom-area .footer-text strong { color: #fff; }

.social-link { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--mex-r-pill);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    transition: all var(--mex-dur) var(--mex-ease);
}
.social-link a:hover {
    background: var(--mex-red-600);
    color: #fff;
    transform: translateY(-3px);
}

/* ==========================================================================
   13. Go-to-top
   ========================================================================== */

.go-top {
    width: 46px; height: 46px;
    border-radius: var(--mex-r-pill);
    background: var(--mex-red-600);
    color: #fff;
    box-shadow: var(--mex-sh-red);
    transition: all var(--mex-dur) var(--mex-ease);
}
.go-top:hover { background: var(--mex-plum-800); transform: translateY(-3px); }

/* ==========================================================================
   14. Accessibility
   ========================================================================== */

:focus-visible {
    outline: 3px solid var(--mex-red-400);
    outline-offset: 2px;
    border-radius: 3px;
}

.mex-skip-link {
    position: absolute;
    left: 12px; top: -60px;
    z-index: 2000;
    padding: 10px 18px;
    background: var(--mex-plum-800);
    color: #fff;
    border-radius: var(--mex-r-md);
    font-weight: 600;
    transition: top .22s var(--mex-ease);
}
.mex-skip-link:focus { top: 12px; color: #fff; }

.mex-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */

@media (max-width: 1199px) {
    .navbar-nav .nav-item > .nav-link { padding: 22px 12px !important; font-size: .9rem; }
}

@media (max-width: 991px) {
    .prevoz-nav-style { position: sticky; }
    .mex-hero { padding: 54px 0 62px; text-align: center; }
    .mex-hero-lead { margin-left: auto; margin-right: auto; }
    .mex-hero-actions { justify-content: center; }
    .mex-crumb { justify-content: center; }
    .mex-hero-visual { margin-top: 40px; }
    .mex-float-card { display: none; }
    .section-title { margin-bottom: 38px; }
    .single-offer, .single-service, .single-address { padding: 28px 24px; }
    .footer-top-area { padding-top: 56px; }
    .footer-top-area .single-widget { margin-bottom: 34px; }
    .mex-footer-about { max-width: none; }
    .footer-bottom-area .social-link { justify-content: center; margin-top: 14px; }
    .footer-bottom-area .footer-text p { text-align: center; }
}

@media (max-width: 767px) {
    body { font-size: 15.5px; }
    .mex-hero { padding: 44px 0 52px; }
    .mex-hero-actions .default-btn { width: 100%; }
    .mex-cta { padding: 34px 22px; border-radius: var(--mex-r-lg); }
    .mex-stat { padding: 12px 6px; }
    .what-offer-area-two { margin-top: 0 !important; }
    .what-offer-area-two .col-lg-3 { padding: 7px !important; }
}

/* mobile menu (meanmenu) polish */
@media (max-width: 991px) {
    .mean-container .mean-bar { background: #fff; border-bottom: 1px solid var(--mex-line); padding: 0; }
    .mean-container .mean-nav { background: #fff; margin-top: 62px; }
    .mean-container .mean-nav ul li a {
        color: var(--mex-plum-800);
        font-family: var(--mex-font-head);
        font-weight: 500;
        border-top: 1px solid var(--mex-line-soft);
        padding: 14px 5%;
    }
    .mean-container .mean-nav ul li a:hover { color: var(--mex-red-600); background: var(--mex-red-50); }
    .mean-container a.meanmenu-reveal { color: var(--mex-plum-800); }
    .mean-container a.meanmenu-reveal span { background: var(--mex-plum-800); }
}

/* ==========================================================================
   16. Reduced motion — honour the user's system setting
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-mex-reveal] { opacity: 1 !important; transform: none !important; }
    .mex-float-card { animation: none; }
}

/* ==========================================================================
   17. Hero tracking form (light hero variant)
   ========================================================================== */

.mex-track { margin-top: 6px; max-width: 520px; }
.mex-track .tracking-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--mex-line);
    border-radius: var(--mex-r-lg);
    box-shadow: var(--mex-sh-md);
    transition: border-color .25s var(--mex-ease), box-shadow .25s var(--mex-ease);
}
.mex-track .tracking-wrap:focus-within {
    border-color: var(--mex-red-400);
    box-shadow: 0 0 0 4px var(--mex-red-50), var(--mex-sh-md);
}
.mex-track .input-tracking {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    font-size: .96rem;
    color: var(--mex-ink);
}
.mex-track .input-tracking:focus { outline: none; }
.mex-track .input-tracking::placeholder { color: var(--mex-muted); }
.mex-track .default-btn { flex: 0 0 auto; padding: 13px 24px; }

@media (max-width: 575px) {
    .mex-track .tracking-wrap { flex-direction: column; align-items: stretch; }
    .mex-track .default-btn { width: 100%; }
}

/* ==========================================================================
   18. Service-page component polish (builds on parcel-service.css)
   ========================================================================== */

.svc-close {
    background: linear-gradient(135deg, var(--mex-plum-800) 0%, var(--mex-plum-600) 100%);
    border-radius: var(--mex-r-xl);
    padding: clamp(38px, 5vw, 62px);
    text-align: center;
    border: 0;
}
.svc-close h2 { color: #fff; }
.svc-close p { color: rgba(255,255,255,.8); max-width: 60ch; margin-left: auto; margin-right: auto; }

.svc-items li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mex-line-soft);
    color: var(--mex-body);
}
.svc-items li:last-child { border-bottom: 0; }
.svc-items li i { color: var(--mex-red-600); font-size: 1.1rem; margin-top: 2px; }

.svc-note {
    background: var(--mex-red-50);
    border: 1px solid var(--mex-red-100);
    border-left: 3px solid var(--mex-red-600);
    border-radius: var(--mex-r-md);
    padding: 20px 24px;
}

.svc-stop-dot { box-shadow: 0 0 0 5px rgba(156,0,1,.10); }

/* ==========================================================================
   19. About / choose-us tabs
   ========================================================================== */

.choose-tab-wrap { background: #fff; border-radius: var(--mex-r-xl); }
.quote-list-tab .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    border-bottom: 1px solid var(--mex-line);
}
.quote-list-tab .tabs li a {
    display: inline-block;
    padding: 12px 20px;
    font-family: var(--mex-font-head);
    font-weight: 600;
    font-size: .95rem;
    color: var(--mex-muted);
    border-bottom: 2px solid transparent;
    transition: all var(--mex-dur) var(--mex-ease);
}
.quote-list-tab .tabs li a:hover { color: var(--mex-red-600); }
.quote-list-tab .tabs li.current a,
.quote-list-tab .tabs li.active a {
    color: var(--mex-red-600);
    border-bottom-color: var(--mex-red-600);
}

/* ==========================================================================
   20. Address cards (Contact)
   ========================================================================== */

.single-address { text-align: left; }
.single-address a { color: var(--mex-plum-800); font-weight: 600; }
.single-address a:hover { color: var(--mex-red-600); }
.single-address span { display: block; font-size: .85rem; color: var(--mex-muted); margin-bottom: 4px; }

/* ==========================================================================
   21. Logo placement fix
   The template hid .navbar-brand on desktop and showed the logo in the top
   utility bar. That bar is now plum, and the logo's tagline is plum too, so
   it disappeared. Logo belongs in the white nav bar instead.
   ========================================================================== */

@media (min-width: 992px) {
    .main-nav .navbar-brand {
        display: inline-flex !important;
        align-items: center;
        padding: 10px 0;
        margin-right: 34px;
    }
    .main-nav .navbar .container { display: flex; align-items: center; }
    .main-nav .navbar-collapse { display: flex !important; align-items: center; width: 100%; }
    .navbar-nav { margin-left: auto !important; }
}

/* top utility bar now holds contact details only */
.top-header .header-right-content > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.top-header .header-right-content > ul > li { margin: 0; }

@media (max-width: 991px) {
    .top-header .header-right-content > ul { justify-content: center; gap: 16px; }
}

/* ==========================================================================
   22. Hero brand panel
   Used where the stock library has no honest match for the page subject
   (the bundled photos are identifiable third-party vessels and generic
   office shots). A designed panel reads as custom work and claims nothing.
   ========================================================================== */

.mex-hero-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--mex-r-xl);
    padding: clamp(30px, 4vw, 46px);
    background: linear-gradient(140deg, var(--mex-plum-800) 0%, var(--mex-plum-600) 62%, #4A2865 100%);
    box-shadow: var(--mex-sh-lg);
    min-height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* dot-grid texture */
.mex-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .5;
    pointer-events: none;
}
/* warm brand glow */
.mex-hero-panel::after {
    content: "";
    position: absolute;
    width: 300px; height: 300px;
    right: -90px; top: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(156,0,1,.55) 0%, rgba(156,0,1,0) 70%);
    pointer-events: none;
}

.mex-hero-panel > * { position: relative; z-index: 1; }

.mex-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px; height: 66px;
    border-radius: var(--mex-r-lg);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 30px;
    backdrop-filter: blur(4px);
}

.mex-panel-title {
    margin: 22px 0 0;
    color: #fff;
    font-size: 1.28rem;
    letter-spacing: -.015em;
}
.mex-panel-sub { color: rgba(255,255,255,.68); font-size: .95rem; margin-top: 8px; }

.mex-panel-list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.mex-panel-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border-radius: var(--mex-r-md);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
    color: rgba(255,255,255,.9);
    font-size: .92rem;
    transition: background var(--mex-dur) var(--mex-ease), transform var(--mex-dur) var(--mex-ease);
}
.mex-panel-list li:hover { background: rgba(255,255,255,.13); transform: translateX(4px); }
.mex-panel-list li i { color: var(--mex-red-200); font-size: 1.05rem; }

@media (max-width: 991px) {
    .mex-hero-panel { margin-top: 40px; min-height: 0; }
}

/* ==========================================================================
   23. Mobile refinements
   Not a shrunk desktop: left-aligned reading, clear field affordances,
   and clearance for the meanmenu bar.
   ========================================================================== */

@media (max-width: 991px) {
    /* meanmenu renders its own bar over the top of the page — give it room */
    .mex-hero { padding-top: 96px; }

    /* Left-align body copy: centred multi-line paragraphs are hard to read
       on a narrow column. Headlines stay centred for impact. */
    .mex-hero { text-align: left; }
    .mex-hero h1 { text-align: left; }
    .mex-hero-lead { margin-left: 0; margin-right: 0; max-width: none; }
    .mex-hero-actions { justify-content: flex-start; }
    .mex-crumb { justify-content: flex-start; }

    .section-title { text-align: center; }

    /* the tracking field needs a visible boundary once it stacks */
    .mex-track .tracking-wrap { padding: 10px; gap: 10px; }
    .mex-track .input-tracking {
        height: 50px;
        background: var(--mex-surface-3);
        border: 1px solid var(--mex-line);
        border-radius: var(--mex-r-md);
        padding: 0 15px;
    }
    .mex-track .input-tracking:focus {
        background: #fff;
        border-color: var(--mex-red-400);
    }
}

@media (max-width: 575px) {
    .mex-hero { padding-top: 88px; }
    .mex-hero-actions { flex-direction: column; align-items: stretch; }
    .mex-hero-actions .default-btn { width: 100%; }
}

/* ==========================================================================
   24. Tracking form — override legacy absolute-positioned button
   style.css positions .tracking-wrap .default-btn absolutely (top/right),
   which overlays the input once the wrap becomes a flex row/column.
   ========================================================================== */

.mex-track .tracking-wrap { position: relative; }

.mex-track .tracking-wrap .default-btn {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
    height: auto;
}
.mex-track .tracking-wrap .default-btn:hover { transform: translateY(-2px); }

.mex-track .tracking-wrap .input-tracking {
    border: 1px solid var(--mex-line);
    background: var(--mex-surface-3);
    border-radius: var(--mex-r-md);
    height: 50px;
    padding: 0 15px;
    width: auto;
}
.mex-track .tracking-wrap .input-tracking:focus {
    background: #fff;
    border-color: var(--mex-red-400);
    box-shadow: 0 0 0 3px var(--mex-red-50);
}

@media (min-width: 576px) {
    .mex-track .tracking-wrap .input-tracking { flex: 1 1 auto; min-width: 0; }
}

/* ==========================================================================
   25. Numbered process steps (Franchise)
   ========================================================================== */

.mex-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    counter-reset: mexstep;
}

.mex-step {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid var(--mex-line);
    border-radius: var(--mex-r-lg);
    box-shadow: var(--mex-sh-xs);
    transition: transform var(--mex-dur) var(--mex-ease),
                box-shadow var(--mex-dur) var(--mex-ease),
                border-color var(--mex-dur) var(--mex-ease);
}
.mex-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--mex-sh-lg);
    border-color: var(--mex-red-100);
}

.mex-step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: var(--mex-r-md);
    background: var(--mex-red-50);
    border: 1px solid var(--mex-red-100);
    color: var(--mex-red-600);
    font-family: var(--mex-font-head);
    font-weight: 700;
    font-size: 1.05rem;
    transition: all var(--mex-dur) var(--mex-ease);
}
.mex-step:hover .mex-step-num {
    background: var(--mex-red-600);
    border-color: var(--mex-red-600);
    color: #fff;
}
.mex-step h3 { margin-bottom: 8px; }
.mex-step p { font-size: .95rem; margin: 0; }

/* ==========================================================================
   26. Form labels, alerts, honeypot (Franchise application)
   ========================================================================== */

.mex-form-legend {
    font-size: 1.05rem;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mex-line);
}

.mex-label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--mex-font-head);
    font-size: .88rem;
    font-weight: 600;
    color: var(--mex-plum-800);
}
.mex-req { color: var(--mex-red-600); }

.mex-field-error {
    display: block;
    margin-top: 6px;
    font-size: .85rem;
    color: var(--mex-red-600);
}
/* only colour the box once the server has flagged it */
.form-control.input-validation-error {
    border-color: var(--mex-red-400);
    background: var(--mex-red-50);
}

.mex-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    margin-bottom: 28px;
    border-radius: var(--mex-r-md);
    font-size: .95rem;
}
.mex-alert i { font-size: 1.35rem; line-height: 1.3; }
.mex-alert strong { display: block; font-family: var(--mex-font-head); margin-bottom: 4px; }
.mex-alert p { margin: 0; font-size: .93rem; }

.mex-alert-success {
    background: #EEF7F0;
    border: 1px solid #CBE5D2;
    border-left: 3px solid #2E7D46;
    color: #1E5730;
}
.mex-alert-success i, .mex-alert-success strong { color: #2E7D46; }
.mex-alert-success p { color: #1E5730; }
.mex-alert-success a { color: #1E5730; text-decoration: underline; }

.mex-alert-error {
    background: var(--mex-red-50);
    border: 1px solid var(--mex-red-100);
    border-left: 3px solid var(--mex-red-600);
    color: var(--mex-red-700);
}
.mex-alert-error ul { margin: 0; padding-left: 18px; }
/* the validation-summary div is emitted even when empty — don't show a bare box */
.mex-alert-error:empty,
.mex-alert-error.validation-summary-valid { display: none; }

/* honeypot: off-screen but still focusable-free for bots */
.mex-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23837A90' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 40px;
}

@media (max-width: 767px) {
    .mex-steps { grid-template-columns: 1fr; }
    .mex-step { padding: 22px 20px; }
}

/* ==========================================================================
   27. Footer social icons
   style.css decorates EVERY `.single-widget ul li` with a dashed bottom
   border and a 30px red ::before bar. The social list is nested inside a
   widget, so it inherited both — the dots and red dashes under each icon.
   ========================================================================== */

.social-link li,
.footer-top-area .single-widget .social-link li,
.footer-bottom-area .single-widget-bottom .social-link li {
    margin-bottom: 0;
    padding: 0;
    border-bottom: 0 !important;
}
.social-link li::before,
.social-link li::after,
.footer-top-area .single-widget .social-link li::before,
.footer-bottom-area .single-widget-bottom .social-link li::before {
    content: none !important;
    display: none !important;
}

.social-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.social-link li { display: inline-flex; }

.social-link a {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    line-height: 1;
    font-size: 1.05rem;
    border: 1px solid rgba(255,255,255,.12);
}
.social-link a i { line-height: 1; }
.footer-top-area .single-widget .social-link a:hover { transform: translateY(-3px); }

/* the top utility bar sits on plum too */
.top-header .social-link a {
    width: 30px; height: 30px; flex: 0 0 30px;
    font-size: .95rem;
}

/* ==========================================================================
   28. Nav: primary CTA (Track Now) + secondary (Get a Quote)
   ========================================================================== */

.mex-nav-quote {
    margin-left: 6px;
    padding: 11px 20px !important;
    border-radius: var(--mex-r-md);
    border: 1px solid var(--mex-line);
    color: var(--mex-plum-800) !important;
    font-weight: 600;
    transition: all var(--mex-dur) var(--mex-ease);
}
.mex-nav-quote::after { display: none !important; }
.mex-nav-quote:hover {
    background: var(--mex-plum-800);
    border-color: var(--mex-plum-800);
    color: #fff !important;
}

.mex-nav-cta i { font-size: 1.02em; margin-right: 2px; }

@media (max-width: 1299px) {
    .navbar-nav .nav-item > .nav-link { padding: 24px 11px !important; font-size: .9rem; }
    .mex-nav-quote, .mex-nav-cta { padding: 10px 15px !important; }
}

/* in the mobile (meanmenu) drawer both should read as plain links */
@media (max-width: 991px) {
    .mean-nav .mex-nav-cta,
    .mean-nav .mex-nav-quote {
        background: none !important;
        border: 0 !important;
        color: var(--mex-plum-800) !important;
        box-shadow: none !important;
        padding: 14px 5% !important;
        margin-left: 0;
    }
}

/* ==========================================================================
   29. Nav fit — 6 links + 2 buttons must hold one line down to ~992px
   ========================================================================== */

@media (min-width: 992px) {
    .main-nav .navbar-nav {
        flex-wrap: nowrap;
        gap: 0;
    }
    .navbar-nav .nav-item { flex: 0 0 auto; }
    .navbar-nav .nav-item > .nav-link { white-space: nowrap; }

    .navbar-nav .nav-item > .nav-link { padding: 26px 13px !important; }
    .navbar-nav .nav-item > .nav-link::after { left: 13px; right: 13px; }
}

@media (min-width: 992px) and (max-width: 1399px) {
    .navbar-nav .nav-item > .nav-link { padding: 24px 9px !important; font-size: .875rem; }
    .navbar-nav .nav-item > .nav-link::after { left: 9px; right: 9px; }
    .mex-nav-quote { padding: 10px 14px !important; margin-left: 4px; }
    .mex-nav-cta   { padding: 10px 14px !important; margin-left: 6px; }
    .main-nav .navbar-brand { margin-right: 18px; }
    .main-nav .navbar-brand img { max-height: 40px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-nav .nav-item > .nav-link { padding: 22px 7px !important; font-size: .84rem; }
    .navbar-nav .nav-item > .nav-link::after { left: 7px; right: 7px; }
    .mex-nav-quote, .mex-nav-cta { padding: 9px 12px !important; font-size: .84rem; }
    .mex-nav-cta i { display: none; }
    .main-nav .navbar-brand img { max-height: 34px; }
}