/* ==========================================================================
   Motomarine v3 — Header
   Sticky header, nav with underline indicator, dropdown, megamenu, search
   panel, promo bar, top bar, mobile drawer. Square, flat, 1px borders.
   Variants: --solid (default), --dark, --transparent.
   ========================================================================== */

/* ---------- Shell ---------- */
.cs-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4990;
    background: var(--white);
    box-shadow: 0 2px 12px rgba(15, 23, 43, .06);
    transition: box-shadow .2s ease, background .2s ease;
}
.cs-header.is-stuck {
    box-shadow: var(--shadow-sm);
}
.cs-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 84px;
}

/* ---------- Nav ---------- */
.cs-nav {
    display: flex;
    align-items: center;
    align-self: stretch;
}
.cs-nav__head {
    display: none;
}
.cs-nav__list {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-nav__item {
    position: relative;
    display: flex;
}
.cs-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 7px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    color: var(--heading);
    white-space: nowrap;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cs-nav__link:hover,
.cs-nav__item:hover > .cs-nav__link {
    color: var(--primary);
}
.cs-nav__link .bi-chevron-down {
    position: relative;
    top: 1px;
    font-size: 10px;
    line-height: 1;
    transition: var(--transition);
}
.cs-nav__item:hover > .cs-nav__link .bi-chevron-down {
    top: 0;
    transform: rotate(180deg);
}

/* ---------- Dropdown ---------- */
.cs-nav__dropdown {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    min-width: 230px;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    box-shadow: var(--shadow);
    padding: 8px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: var(--transition);
    z-index: 5;
}
.cs-nav__item:hover > .cs-nav__dropdown,
.cs-nav__item:focus-within > .cs-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cs-nav__dropdown a {
    display: block;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
}
.cs-nav__dropdown a:hover {
    background: var(--light-bg);
    color: var(--heading);
}

/* ---------- Header actions ----------
   Controls are plain styleguide buttons: .cs-btn (phone) and
   .cs-btn.cs-btn-icon (search, menu toggle). No header-specific sizing. */
.cs-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cs-header__search.is-active {
    background: var(--heading);
    border-color: var(--heading);
    color: var(--white);
}

/* Drop-down search panel */
.cs-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 24px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
}
.cs-search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cs-search-panel form {
    display: flex;
    gap: 0;
}
.cs-search-panel .cs-input {
    flex: 1;
    border-right: 0;
}
/* Search field keeps its resting border while typing (no focus colour change) */
.cs-search-panel .cs-input:focus {
    border-color: var(--border-strong);
    box-shadow: none;
}

/* Mobile toggle — hidden on desktop, otherwise a plain icon button */
.cs-nav-toggle {
    display: none;
}

/* ---------- Promo announcement bar ---------- */
.cs-header-promo {
    background: var(--secondary);
    color: var(--white);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    line-height: 1.4;
}
.cs-header-promo i {
    margin-right: 6px;
}
.cs-header-promo strong {
    font-weight: 700;
}
.cs-header-promo a {
    color: var(--white);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 8px;
}

/* ---------- Top bar (contact + social) ---------- */
.cs-topbar {
    background: var(--secondary);
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
}
.cs-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    height: 40px;
}
.cs-topbar a {
    color: rgba(255, 255, 255, .75);
}
.cs-topbar a:hover {
    color: var(--white);
}
.cs-topbar__contact {
    display: flex;
    gap: 28px;
}
.cs-topbar__contact span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cs-topbar__contact i {
    display: inline-flex;
    line-height: 1;
    color: var(--primary);
}
.cs-topbar__contact a {
    display: inline-flex;
    align-items: center;
}
.cs-topbar .cs-social {
    gap: 4px;
}
.cs-topbar .cs-social a {
    width: 32px;
    height: 32px;
    background: none;
    color: rgba(255, 255, 255, .75);
    font-size: 16px;
    border-radius: 0;
}
.cs-topbar .cs-social a:hover {
    background: var(--primary);
    color: var(--white);
}

/* ---------- Variant: dark ---------- */
.cs-header--dark {
    background: var(--heading);
}
.cs-header--dark .cs-logo__img--dark {
    display: none;
}
.cs-header--dark .cs-logo__img--light {
    display: block;
}
.cs-header--dark .cs-nav__link {
    color: rgba(255, 255, 255, .8);
}
.cs-header--dark .cs-nav__link:hover,
.cs-header--dark .cs-nav__item:hover > .cs-nav__link {
    color: var(--white);
}

/* ---------- Variant: transparent over hero (turns solid when stuck) ---------- */
.cs-header--transparent {
    position: fixed;
    background: transparent;
}
.cs-header--transparent:not(.is-stuck) .cs-logo__img--dark {
    display: none;
}
.cs-header--transparent:not(.is-stuck) .cs-logo__img--light {
    display: block;
}
.cs-header--transparent:not(.is-stuck) .cs-nav__link {
    color: var(--white);
}
.cs-header--transparent.is-stuck {
    background: var(--white);
}

/* ---------- Variant: overlay, top bar and header sit on top of the hero ---------- */
.cs-overlaybar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4990;
}
.cs-topbarwrap .cs-topbar,
.cs-overlaybar .cs-topbar {
    background: var(--heading);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cs-header--overlay {
    position: static;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.cs-header--overlay .cs-logo__img--dark {
    display: none;
}
.cs-header--overlay .cs-logo__img--light {
    display: block;
}
.cs-header--overlay .cs-nav__link {
    color: var(--white);
}
.cs-header--overlay .cs-nav__link:hover,
.cs-header--overlay .cs-nav__item:hover > .cs-nav__link {
    color: var(--white);
    opacity: .75;
}
.cs-header--overlay .cs-btn-outline-light,
.cs-header--dark .cs-btn-outline-light {
    border-color: rgba(255, 255, 255, .35);
    color: var(--white);
}
.cs-header--overlay .cs-btn-outline-light:hover,
.cs-header--dark .cs-btn-outline-light:hover {
    border-color: var(--white);
    background: var(--white);
    color: var(--heading);
}

/* ==========================================================================
   Megamenu
   ========================================================================== */
.cs-nav__item--mega {
    position: static;
}
/* Panel is centred and capped at the container width (not edge-to-edge) */
.cs-megamenu {
    position: absolute;
    left: 50%;
    top: calc(100% - 2px);
    width: calc(100% - 48px);
    max-width: 1140px;
    background: var(--white);
    border-top: 2px solid var(--primary);
    box-shadow: var(--shadow-lg);
    padding: 36px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: var(--transition);
}
.cs-nav__item--mega:hover > .cs-megamenu,
.cs-nav__item--mega:focus-within > .cs-megamenu,
.cs-megamenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.cs-megamenu__inner {
    display: grid;
    gap: 40px;
}
.cs-megamenu h6,
.cs-megamenu .h6 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--heading);
    margin-bottom: 14px;
}

/* Plain link list */
.cs-mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px 10px;
}
.cs-mega-list a {
    font-size: 14px;
    color: var(--muted);
}
.cs-mega-list a:hover {
    color: var(--primary);
}
/* --- Brand megamenu --- */
.cs-mega-brandwrap {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: stretch;
}
.cs-mega-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.cs-mega-head h6,
.cs-mega-head .h6 {
    margin: 0;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--heading);
}
.cs-mega-headlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}
.cs-mega-headlink:hover i {
    transform: translateX(3px);
}
.cs-mega-headlink i {
    transition: var(--transition);
}
.cs-mega-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.cs-mega-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    padding: 35px;
    border: 1px solid var(--border);
    background: var(--white);
    transition: var(--transition);
}
.cs-mega-logo:hover {
    border-color: var(--heading);
}
.cs-mega-logo img {
    width: auto;
    height: auto;
    max-height: 46px;
    max-width: 100%;
}
.cs-mega-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* Promo image card (shared) */
.cs-mega-promo {
    position: relative;
    display: block;
    overflow: hidden;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    background: var(--heading);
}
.cs-mega-promo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease-out);
}
.cs-mega-promo:hover img {
    transform: scale(1.04);
}
.cs-mega-promo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 43, .1) 0%, rgba(15, 23, 43, .92) 100%);
}
.cs-mega-promo__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
}
.cs-mega-promo__eyebrow {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--primary);
}
.cs-mega-promo__title {
    font-family: var(--font-heading);
    color: var(--white);
    font-size: 1.4375rem;
    font-weight: 700;
    line-height: 1.15;
}
.cs-mega-promo__meta,
.cs-mega-promo__desc {
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    line-height: 1.4;
}
.cs-mega-promo .cs-btn {
    margin-top: 8px;
}

/* --- Locations megamenu: three photo cards with address rows and service chips --- */
.cs-mega-locs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.cs-mega-loc__img {
    position: relative;
}
.cs-mega-loc__badge {
    position: absolute;
    top: 10px;
    left: 10px;
}
.cs-mega-loc__rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}
.cs-mega-loc__rows span {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
}
.cs-mega-loc__rows i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 12px;
    color: var(--primary);
}
.cs-mega-loc {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--white);
    color: var(--heading);
    overflow: hidden;
    transition: var(--transition);
}
.cs-mega-loc:hover {
    border-color: var(--border-strong);
}
.cs-mega-loc__img {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--bg-light);
}
.cs-mega-loc__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .5s var(--ease-out);
}
.cs-mega-loc:hover .cs-mega-loc__img img {
    transform: scale(1.04);
}
.cs-mega-loc__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 18px 18px;
}
.cs-mega-loc__name {
    display: block;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 4px;
    transition: var(--transition);
}
.cs-mega-loc:hover .cs-mega-loc__name {
    color: var(--primary);
}
.cs-mega-loc__city {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
    margin-bottom: 12px;
}
.cs-mega-loc__city i {
    color: var(--primary);
    margin-right: 2px;
}
.cs-mega-loc__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.cs-mega-loc__tags span {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-light);
    font-size: 12px;
    line-height: 1.4;
    color: var(--heading);
}
.cs-mega-loc__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    margin-top: auto;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}
.cs-mega-loc__link i {
    transition: var(--transition);
}
.cs-mega-loc:hover .cs-mega-loc__link i {
    transform: translateX(3px);
}

/* --- Service megamenu --- */
/* Service megamenu: service tiles + help panel + promo tile */
.cs-mega-servicewrap {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: stretch;
}
.cs-mega-svc__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
}
.cs-mega-svc__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 0;
    color: var(--heading);
    transition: var(--transition);
}
.cs-mega-svc__item:hover {
    background: var(--bg-light);
}
.cs-mega-svc__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--primary-tint-10);
    color: var(--primary);
    font-size: 20px;
    transition: var(--transition);
}
.cs-mega-svc__icon i {
    display: flex;
    line-height: 1;
}
.cs-mega-svc__item:hover .cs-mega-svc__icon {
    background: var(--primary);
    color: var(--white);
}
.cs-mega-svc__text strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--heading);
}
.cs-mega-svc__text small {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
}
.cs-mega-svc__item:hover strong {
    color: var(--primary);
}
.cs-mega-promo--service {
    min-height: 240px;
    height: 100%;
}
.cs-mega-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 32px 0 0;
    padding: 16px 24px;
    border-radius: 0;
    background: var(--heading);
    color: var(--white);
}
.cs-mega-bar__body {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.cs-mega-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--primary);
    color: var(--white);
    font-size: 18px;
}
.cs-mega-bar__icon i {
    display: flex;
    line-height: 1;
}
.cs-mega-bar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cs-mega-bar__text strong {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white);
}
.cs-mega-bar__text small {
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .7);
}

/* --- Brands megamenu (tab style) --- */
/* Dark vertical tab column on the left, brand cards on the right, quick links in the footer */
.cs-megamenu--tabs {
    padding: 0;
    overflow: hidden;
}
.cs-mega-tabs {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: stretch;
}
.cs-mega-tabs__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--heading);
}
.cs-mega-tabs__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 24px 13px;
    border: 0;
    background: none;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    transition: var(--transition);
}
.cs-mega-tabs__tab i {
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    transform: translateX(-4px);
    transition: var(--transition);
}
.cs-mega-tabs__tab:hover {
    color: var(--white);
}
.cs-mega-tabs__tab.is-active {
    background: rgba(255, 255, 255, .06);
    color: var(--white);
}
.cs-mega-tabs__tab.is-active i {
    opacity: 1;
    transform: none;
}
.cs-mega-tabs__panels {
    padding: 28px 32px 32px;
}
.cs-mega-tabs__panel {
    display: none;
}
.cs-mega-tabs__panel.is-active {
    display: block;
}
.cs-mega-brands {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.cs-mega-brandcard {
    display: block;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--white);
    color: var(--heading);
    transition: var(--transition);
}
.cs-mega-brandcard:hover {
    border-color: var(--border-strong);
}
.cs-mega-brandcard__img {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg-light);
    margin-bottom: 12px;
}
.cs-mega-brandcard__img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .5s var(--ease-out);
}
.cs-mega-brandcard:hover .cs-mega-brandcard__img img {
    transform: scale(1.04);
}
.cs-mega-brandcard__name {
    display: block;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 4px;
    transition: var(--transition);
}
.cs-mega-brandcard:hover .cs-mega-brandcard__name {
    color: var(--primary);
}
.cs-mega-brandcard__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
}
.cs-mega-brandcard__meta i {
    font-size: 13px;
    color: var(--primary);
    margin-right: 2px;
}
.cs-mega-tabs__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 32px;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
}
.cs-mega-tabs__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cs-mega-tabs__links .cs-btn {
    background: var(--white);
}

/* ==========================================================================
   Mobile drawer (≤ 1050px)
   Left-anchored panel: logo + close, accordion nav, pinned footer with the
   phone CTA and socials. Megamenus collapse to grouped link lists — promo
   cards, offer bars and brand logo grids are desktop-only.
   The backdrop is injected INSIDE .cs-header by main.js, so it sits in the
   header's stacking context: above the header bar, below the drawer.
   ========================================================================== */
.cs-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 43, .6);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 10;
}
.cs-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}
.cs-nav-close,
.cs-nav__foot {
    display: none;
}

/* Tight desktop (1051 to 1400): smaller logo and nav, phone button drops its number so nothing overflows */
@media (max-width: 1400px) and (min-width: 1051px) {
    .cs-header__inner {
        gap: 16px;
    }
    .cs-header .cs-logo__img {
        height: 28px;
    }
    .cs-nav__list {
        gap: 0;
    }
    .cs-nav__link {
        padding: 0 8px;
        font-size: 14px;
    }
    .cs-header__phone {
        width: 52px;
        min-width: 0;
        height: 52px;
        padding: 0;
        gap: 0;
        justify-content: center;
        font-size: 0;
        line-height: 0;
    }
    .cs-header__phone i {
        display: flex;
        font-size: 16px;
        line-height: 1;
    }
}
@media (max-width: 1050px) {
    .cs-header__inner {
        height: 72px;
        gap: 16px;
    }
    .cs-header__phone {
        display: none;
    }
    .cs-nav-toggle {
        display: inline-flex;
    }

    /* --- Drawer shell --- */
    .cs-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        width: calc(100% - 56px);
        max-width: 360px;
        height: 100%;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        align-self: auto;
        padding: 0;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .35s var(--ease-out), visibility 0s .35s;
        z-index: 20;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .cs-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .35s var(--ease-out), visibility 0s;
        box-shadow: var(--shadow-lg);
    }

    /* --- Head: logo + close --- */
    .cs-nav__head {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 72px;
        height: 72px;
        padding: 0 16px 0 24px;
        background: var(--white);
        border-bottom: 1px solid var(--border);
    }
    .cs-nav__head .cs-logo__img {
        height: 26px;
    }
    .cs-nav-close {
        display: inline-flex;
    }

    /* --- Accordion list --- */
    .cs-nav__list {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 0;
        width: 100%;
        padding: 0;
    }
    .cs-nav__item {
        flex-direction: column;
        border-bottom: 1px solid var(--border);
    }
    /* Drawer is always white, so dark and transparent headers drop their white links */
    .cs-nav__link,
    .cs-header--dark .cs-nav__link,
    .cs-header--overlay .cs-nav__link,
    .cs-header--transparent:not(.is-stuck) .cs-nav__link {
        justify-content: space-between;
        min-height: 58px;
        padding: 0 20px 0 24px;
        font-size: 13px;
        color: var(--heading);
    }
    .cs-header--dark .cs-nav__link:hover,
    .cs-header--dark .cs-nav__item:hover > .cs-nav__link {
        color: var(--primary);
    }
    .cs-nav__link .bi-chevron-down {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: var(--muted);
        transform: none;
    }
    .cs-nav__item:hover > .cs-nav__link {
        color: var(--heading);
    }
    .cs-nav__item.is-open > .cs-nav__link {
        color: var(--primary);
    }
    .cs-nav__item.is-open > .cs-nav__link .bi-chevron-down {
        transform: rotate(180deg);
        color: var(--primary);
    }

    /* --- Sub panels (dropdown + megamenu share one look) --- */
    .cs-nav__dropdown,
    .cs-megamenu {
        position: static;
        display: none;
        width: auto;
        max-width: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-top: 1px solid var(--border);
        padding: 8px 0 12px;
        background: var(--bg-light);
        z-index: auto;
    }
    .cs-nav__item.is-open > .cs-nav__dropdown,
    .cs-nav__item--mega.is-open > .cs-megamenu {
        display: block;
    }
    /* Beat the desktop hover/open rules (which translate the panels) */
    .cs-nav__item:hover > .cs-nav__dropdown,
    .cs-nav__item:focus-within > .cs-nav__dropdown,
    .cs-nav__item--mega:hover > .cs-megamenu,
    .cs-nav__item--mega:focus-within > .cs-megamenu,
    .cs-megamenu.is-open {
        transform: none;
        left: auto;
        width: auto;
    }
    .cs-nav__dropdown a {
        padding: 7px 24px;
        font-size: 15px;
    }
    .cs-nav__dropdown a:hover {
        background: none;
    }

    /* Megamenu → stacked groups (everything from desktop is kept) */
    .cs-megamenu__inner,
    .cs-mega-brandwrap,
    .cs-mega-servicewrap,
    .cs-mega-cols {
        display: block;
        padding: 0;
    }
    .cs-megamenu__inner > *,
    .cs-mega-brandmain {
        min-width: 0;
    }
    .cs-mega-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 12px 24px 10px;
        border: 0;
    }
    .cs-mega-head h6,
.cs-mega-head .h6 {
        margin: 0;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--muted);
    }
    .cs-mega-headlink {
        font-size: 14px;
    }
    .cs-mega-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
        padding: 0 24px 12px;
    }
    .cs-mega-logo {
        height: 52px;
        padding: 8px;
    }
    .cs-mega-logo img {
        max-height: 28px;
        max-width: 100%;
    }
    .cs-mega-cols {
        border: 0;
    }
    .cs-mega-cols > div {
        padding: 6px 24px 8px;
    }
    /* Locations megamenu → full cards stacked, nothing dropped */
    .cs-megamenu--locations .cs-mega-head .h6,
    .cs-megamenu--locations .cs-mega-headlink {
        white-space: nowrap;
    }
    .cs-megamenu--locations .cs-mega-headlink {
        font-size: 13px;
    }
    .cs-mega-locs {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 24px 12px;
    }
    .cs-mega-loc__img img {
        aspect-ratio: 2 / 1;
    }
    .cs-mega-loc__body {
        padding: 14px 16px 16px;
    }
    .cs-mega-loc__name {
        font-size: 15px;
    }
    /* Promo image card — fixed height, text sized to fit */
    .cs-mega-promo {
        min-height: 0;
        height: 200px;
        margin: 8px 24px 4px;
    }
    .cs-mega-promo__body {
        padding: 18px;
        gap: 6px;
    }
    .cs-mega-promo__title {
        font-size: 1.1875rem;
    }
    .cs-mega-promo__desc,
    .cs-mega-promo__meta {
        font-size: 12px;
        line-height: 1.5;
    }
    .cs-mega-promo .cs-btn {
        margin-top: 4px;
    }
    /* Offer bar — stacked */
    .cs-mega-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin: 8px 24px 4px;
        padding: 16px;
    }
    .cs-mega-bar__icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .cs-mega-bar__text strong {
        font-size: 15px;
    }
    .cs-mega-bar__text small {
        font-size: 13px;
    }
    .cs-mega-bar .cs-btn {
        width: 100%;
    }
    /* Group headings get a separator line above, so each group reads as its own block */
    .cs-mega-cols h6,
    .cs-mega-cols .h6 {
        margin: 0 0 8px;
        padding-top: 14px;
        border-top: 1px solid var(--border);
    }
    .cs-mega-list {
        gap: 0;
    }
    .cs-mega-list a {
        display: block;
        padding: 5px 0;
    }
    .cs-mega-svc__grid {
        display: block;
        padding: 0 24px 8px;
    }
    .cs-mega-svc__item {
        padding: 8px 0;
        border-radius: 0;
    }
    .cs-mega-svc__item:hover {
        background: none;
    }
    .cs-mega-svc__icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    .cs-mega-svc__text small {
        display: none;
    }

    /* Brands megamenu → scrollable tab chips + brand rows (images hidden) */
    .cs-megamenu--tabs {
        padding: 12px 0;
        overflow: visible;
    }
    .cs-mega-tabs {
        display: block;
    }
    .cs-mega-tabs__nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 24px 12px;
        background: none;
        scrollbar-width: none;
    }
    .cs-mega-tabs__nav::-webkit-scrollbar {
        display: none;
    }
    .cs-mega-tabs__nav li {
        flex: 0 0 auto;
    }
    .cs-mega-tabs__tab {
        width: auto;
        padding: 6px 14px 7px;
        border: 1px solid var(--border);
        border-radius: 0;
        background: var(--white);
        font-size: 13px;
        white-space: nowrap;
        color: var(--heading);
    }
    .cs-mega-tabs__tab i {
        display: none;
    }
    .cs-mega-tabs__tab:hover {
        color: var(--heading);
    }
    .cs-mega-tabs__tab.is-active {
        border-color: var(--heading);
        background: var(--heading);
        color: var(--white);
    }
    .cs-mega-tabs__panels {
        padding: 0;
    }
    .cs-mega-brands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 0 24px 8px;
    }
    .cs-mega-brandcard {
        padding: 10px;
    }
    .cs-mega-brandcard__img {
        margin-bottom: 10px;
    }
    .cs-mega-brandcard__name {
        font-size: 15px;
    }
    .cs-mega-brandcard__meta {
        font-size: 12px;
    }
    .cs-mega-tabs__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin: 8px 24px 4px;
        padding: 0;
        border: 0;
        background: none;
    }
    .cs-mega-tabs__links {
        gap: 6px;
    }
    .cs-mega-tabs__links .cs-btn {
        flex: 1 1 auto;
    }
    .cs-mega-tabs__foot > .cs-btn {
        width: 100%;
    }

    /* --- Footer: phone CTA + socials, pinned to the bottom --- */
    .cs-nav__foot {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: auto;
        padding: 24px;
        border-top: 1px solid var(--border);
    }
    .cs-nav__foot .cs-btn {
        width: 100%;
    }
    .cs-nav__foot .cs-social {
        justify-content: center;
    }

    .cs-topbar__contact {
        gap: 16px;
    }
    .cs-topbar__contact span:first-child {
        display: none;
    }
}
@media (max-width: 575px) {
    .cs-header__inner {
        height: 68px;
    }
    .cs-logo__img {
        height: 28px;
    }
    .cs-topbar {
        font-size: 13px;
    }
    .cs-topbar__inner {
        justify-content: center;
    }
    .cs-topbar__contact span {
        gap: 6px;
    }
    .cs-topbar .cs-social {
        display: none;
    }
    .cs-header-promo {
        font-size: 12px;
        padding: 8px 12px;
    }
}

/* The drawer is always white, so the overlay header's white buttons flip back inside it */
@media (max-width: 1050px) {
    .cs-header--overlay .cs-nav .cs-btn-outline-light,
    .cs-header--dark .cs-nav .cs-btn-outline-light,
    .cs-header--overlay .cs-nav-close,
    .cs-header--dark .cs-nav-close {
        border-color: var(--border);
        color: var(--secondary);
    }
    .cs-header--overlay .cs-nav .cs-btn-outline-light:hover,
    .cs-header--dark .cs-nav .cs-btn-outline-light:hover,
    .cs-header--overlay .cs-nav-close:hover,
    .cs-header--dark .cs-nav-close:hover {
        border-color: var(--border-strong);
        background: var(--bg-light);
        color: var(--secondary);
    }
    .cs-header--overlay .cs-nav__link:hover,
    .cs-header--dark .cs-nav__link:hover,
    .cs-header--overlay .cs-nav__item:hover > .cs-nav__link,
    .cs-header--dark .cs-nav__item:hover > .cs-nav__link,
    .cs-header--overlay .cs-nav__item.is-open > .cs-nav__link,
    .cs-header--dark .cs-nav__item.is-open > .cs-nav__link {
        color: var(--primary);
        opacity: 1;
    }
}

/* --- The mega panels are always light, so the overlay and dark header's white text must not leak in --- */
.cs-header--overlay .cs-megamenu a:not(.cs-btn):not(.cs-mega-headlink),
.cs-header--dark .cs-megamenu a:not(.cs-btn):not(.cs-mega-headlink) {
    color: var(--secondary);
}
.cs-header--overlay .cs-megamenu a:not(.cs-btn):not(.cs-mega-headlink):hover,
.cs-header--dark .cs-megamenu a:not(.cs-btn):not(.cs-mega-headlink):hover {
    color: var(--primary);
}
.cs-header--overlay .cs-megamenu h6,
.cs-header--overlay .cs-megamenu .h6,
.cs-header--dark .cs-megamenu h6,
.cs-header--dark .cs-megamenu .h6 {
    color: var(--heading);
}
.cs-header--overlay .cs-mega-tabs__nav a,
.cs-header--dark .cs-mega-tabs__nav a {
    color: rgba(255, 255, 255, .72);
}
.cs-header--overlay .cs-megamenu .cs-btn-outline-light,
.cs-header--dark .cs-megamenu .cs-btn-outline-light {
    border-color: var(--border);
    color: var(--secondary);
}
.cs-header--overlay .cs-megamenu .cs-btn-outline-light:hover,
.cs-header--dark .cs-megamenu .cs-btn-outline-light:hover {
    border-color: var(--border-strong);
    background: var(--bg-light);
    color: var(--secondary);
}

/* Narrow phones: the logo and the action buttons together were wider than the
   viewport, which pushed the whole page sideways. Cap the logo instead. */
@media (max-width: 400px) {
    .cs-header__inner {
        gap: 10px;
    }
    .cs-header .cs-logo__img {
        height: 24px;
        max-width: 165px;
        object-fit: contain;
        object-position: left center;
    }
    .cs-header__actions {
        gap: 8px;
    }
}


/* ==========================================================================
   v5 · Modern header (.cs-header--modern on every header module)
   Frosted glass bar, nav links with a red underline that grows from the
   centre, round search button, megamenu slides in under a red rule. The top
   bar and promo bar above a modern header pick up a navy gradient and
   round social chips.
   ========================================================================== */
.cs-header--modern {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(15, 23, 43, .06), 0 8px 24px rgba(15, 23, 43, .05);
}
.cs-header--modern.cs-header--dark {
    background: rgba(15, 23, 43, .92);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.cs-header--modern.cs-header--overlay:not(.is-stuck) {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.cs-header--modern .cs-header__search {
    border-radius: 0;
}
@media (min-width: 1051px) {
    .cs-header--modern .cs-nav__link::after {
        content: '';
        position: absolute;
        right: 7px;
        bottom: calc(50% - 18px);
        left: 7px;
        height: 2px;
        background: var(--primary);
        transform: scaleX(0);
        transition: transform .3s var(--ease-out);
    }
    .cs-header--modern .cs-nav__link:hover::after,
    .cs-header--modern .cs-nav__item:hover > .cs-nav__link::after,
    .cs-header--modern .cs-nav__link.is-active::after,
    .cs-header--modern .cs-nav__link[aria-current="page"]::after {
        transform: scaleX(1);
    }
    .cs-header--modern .cs-megamenu {
        border-top-width: 3px;
        box-shadow: 0 30px 60px rgba(15, 23, 43, .16);
    }
}

/* --- Top bar and promo bar above a modern header --- */
.cs-topbar:has(+ .cs-header--modern),
.cs-overlaybar:has(.cs-header--modern) .cs-topbar {
    background: linear-gradient(90deg, var(--heading) 0%, var(--secondary) 100%);
}
.cs-overlaybar:has(.cs-header--modern) .cs-topbar {
    background: rgba(15, 23, 43, .35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.cs-topbar:has(+ .cs-header--modern) .cs-social a,
.cs-overlaybar:has(.cs-header--modern) .cs-social a {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    background: rgba(255, 255, 255, .08);
    transition: background .2s ease, transform .2s ease;
}
.cs-topbar:has(+ .cs-header--modern) .cs-social a:hover,
.cs-overlaybar:has(.cs-header--modern) .cs-social a:hover {
    background: var(--primary);
    transform: translateY(-1px);
}
.cs-header-promo:has(+ .cs-header--modern) {
    background: linear-gradient(90deg, var(--secondary) 0%, var(--heading) 50%, var(--secondary) 100%);
}
.cs-header-promo:has(+ .cs-header--modern) a {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 40px;
    color: var(--heading);
    text-decoration: none;
    background: var(--white);
    transition: background .2s ease, color .2s ease;
}
.cs-header-promo:has(+ .cs-header--modern) a:hover {
    color: var(--white);
    background: var(--primary);
}


/* ==========================================================================
   v5 · Modern megamenus (inside .cs-header--modern, desktop only)
   Soft white to grey panel under a red rule, the "see all" link as a pill, list links that slide in behind a red dash,
   greyscale logos that colour up on hover, round service icons, the offer
   bar on a navy gradient with a corner of dots, a light tab rail with a red edge on the
   active tab, open brand cards with spec pills, and location cards that lift. Only links react to the pointer.
   ========================================================================== */
@media (min-width: 1051px) {
    .cs-header--modern .cs-megamenu {
        background: linear-gradient(180deg, var(--white) 0%, var(--white) 60%, var(--bg-light) 100%);
    }
    .cs-header--modern .cs-mega-headlink {
        padding: 6px 14px;
        border-radius: 40px;
        background: var(--primary-tint-08);
        transition: background .2s ease, color .2s ease;
    }
    .cs-header--modern .cs-mega-headlink:hover {
        color: var(--white);
        background: var(--primary);
    }

    /* List links */
    .cs-header--modern .cs-mega-list a {
        display: inline-flex;
        align-items: center;
    }
    .cs-header--modern .cs-mega-list a::before {
        content: '';
        width: 0;
        height: 2px;
        margin-right: 0;
        background: var(--primary);
        transition: width .25s var(--ease-out), margin .25s var(--ease-out);
    }
    .cs-header--modern .cs-mega-list a:hover::before {
        width: 10px;
        margin-right: 8px;
    }

    /* Brand logos */
    .cs-header--modern .cs-mega-logo img {
        opacity: .75;
        filter: grayscale(1);
        transition: filter .25s ease, opacity .25s ease;
    }
    .cs-header--modern .cs-mega-logo:hover {
        border-color: transparent;
        box-shadow: var(--shadow);
        transform: translateY(-2px);
    }
    .cs-header--modern .cs-mega-logo:hover img {
        opacity: 1;
        filter: none;
    }

    /* Service links */
    .cs-header--modern .cs-mega-svc__icon {
        border-radius: 50%;
    }

    /* Offer bar */
    .cs-header--modern .cs-mega-bar {
        position: relative;
        overflow: hidden;
        background: linear-gradient(110deg, var(--heading) 0%, var(--secondary) 100%);
    }
    .cs-header--modern .cs-mega-bar::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 140px;
        height: 140px;
        background-image: radial-gradient(rgba(255, 255, 255, .18) 1.5px, transparent 1.6px);
        background-size: 14px 14px;
        -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%);
        mask-image: linear-gradient(225deg, #000, transparent 70%);
        pointer-events: none;
    }
    .cs-header--modern .cs-mega-bar > * {
        position: relative;
        z-index: 1;
    }
    .cs-header--modern .cs-mega-bar__icon {
        border-radius: 50%;
    }

    /* Tabs: dark rail, the active type gets a red edge and a lighter row */
    .cs-header--modern .cs-mega-tabs {
        grid-template-columns: 250px minmax(0, 1fr);
    }
    .cs-header--modern .cs-mega-tabs__nav {
        padding: 16px 0;
        background: linear-gradient(180deg, var(--heading) 0%, #16203a 100%);
    }
    .cs-header--modern .cs-mega-tabs__tab {
        padding: 13px 22px 13px 28px;
    }
    .cs-header--modern .cs-mega-tabs__tab.is-active {
        background: rgba(255, 255, 255, .08);
        box-shadow: inset 3px 0 0 var(--primary);
    }
    .cs-header--modern .cs-mega-tabs__panels {
        padding: 30px 34px 34px;
    }
    .cs-header--modern .cs-mega-tabs__foot {
        padding: 16px 34px;
        background: var(--white);
    }
    .cs-header--modern .cs-mega-tabs__links .cs-btn {
        border-radius: 40px;
    }

    /* Brand cards: full-bleed photo on top, name with an arrow and two spec
       pills below, the card lifts when the pointer is on it */
    .cs-header--modern .cs-mega-brands {
        gap: 18px;
    }
    .cs-header--modern .cs-mega-brandcard {
        padding: 0 0 16px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--white);
        transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
    }
    .cs-header--modern .cs-mega-brandcard:hover {
        border-color: transparent;
        box-shadow: 0 16px 36px rgba(15, 23, 43, .14);
        transform: translateY(-3px);
    }
    .cs-header--modern .cs-mega-brandcard__img {
        position: relative;
        margin-bottom: 14px;
        border-radius: 0;
    }
    .cs-header--modern .cs-mega-brandcard__img::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(15, 23, 43, .35) 0%, transparent 45%);
        pointer-events: none;
    }
    .cs-header--modern .cs-mega-brandcard__name,
    .cs-header--modern .cs-mega-brandcard__meta {
        padding-right: 16px;
        padding-left: 16px;
    }
    .cs-header--modern .cs-mega-brandcard__img img {
        aspect-ratio: 16 / 10;
        transition: transform .8s var(--ease-out);
    }
    .cs-header--modern .cs-mega-brandcard:hover .cs-mega-brandcard__img img {
        transform: scale(1.06);
    }
    .cs-header--modern .cs-mega-brandcard__name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .cs-header--modern .cs-mega-brandcard__name::after {
        content: '\F138';
        font-family: 'bootstrap-icons';
        font-size: 16px;
        font-weight: 400;
        color: var(--primary);
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity .25s ease, transform .25s var(--ease-out);
    }
    .cs-header--modern .cs-mega-brandcard:hover .cs-mega-brandcard__name::after {
        opacity: 1;
        transform: none;
    }
    .cs-header--modern .cs-mega-brandcard__meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 12px;
    }
    .cs-header--modern .cs-mega-brandcard__meta > span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 10px;
        border-radius: 40px;
        color: var(--heading);
        background: var(--bg-light);
    }
    .cs-header--modern .cs-mega-brandcard__meta i {
        margin-right: 0;
        font-size: 12px;
    }

    /* Link cards */
    .cs-header--modern .cs-mega-loc {
        transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
    }
    .cs-header--modern .cs-mega-loc:hover {
        border-color: transparent;
        box-shadow: var(--shadow);
        transform: translateY(-3px);
    }
    .cs-header--modern .cs-mega-loc__tags span {
        border-radius: 40px;
        padding-right: 10px;
        padding-left: 10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cs-header--modern .cs-mega-list a::before,
    .cs-header--modern .cs-mega-logo,
    .cs-header--modern .cs-mega-brandcard,
    .cs-header--modern .cs-mega-loc {
        transition: none;
    }
}

/* --- Top bar above a modern header: round icon chips, hairline dividers --- */
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__inner,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__inner {
    height: 44px;
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact {
    gap: 0;
    font-size: 13px;
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact > span,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact > span {
    gap: 9px;
    padding: 0 18px;
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact > span + span,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact > span + span {
    border-left: 1px solid rgba(255, 255, 255, .14);
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact > span:last-child,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact > span:last-child {
    padding-right: 0;
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact i,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact i {
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    color: var(--white);
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .22);
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact a,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact a {
    font-weight: 600;
    color: var(--white);
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact a:hover,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact a:hover {
    color: var(--primary-on-dark);
}

/* ==========================================================================
   v5 · Search panel: one field with the search icon inside at the end,
   no separate button. The icon is the submit control.
   ========================================================================== */
.cs-search-panel form {
    position: relative;
}
.cs-search-panel .cs-input {
    padding-right: 56px;
    border-right: 1px solid var(--border);
}
.cs-search-panel__submit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 0;
    border: 0;
    font-size: 18px;
    color: var(--muted);
    background: none;
    cursor: pointer;
    transition: color .2s ease;
}
.cs-search-panel__submit:hover,
.cs-search-panel__submit:focus-visible {
    color: var(--primary);
}

/* Top bar icon chips: centre the glyph exactly */
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact i,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact i {
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 1;
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact i::before,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact i::before {
    display: block;
    line-height: 1;
    vertical-align: 0;
}
/* Even chip and glyph sizes so the icon lands on whole pixels at 100% zoom */
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact i,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact i {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 12px;
}

/* Top bar chips: the icons are drawn as masks, so they stay centred in the
   red circle at every zoom level (font glyphs snap to the pixel grid on
   their own and drift by half a pixel at 100%) */
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact i::before,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact i::before {
    content: '';
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact .bi-geo-alt-fill::before,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact .bi-geo-alt-fill::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M150 300Q159 291 168 282Q189 260 206 237Q231 204 245 176Q263 140 263 112Q263 82 247.5 56Q232 30 206.5 15Q181 0 150 0Q119 0 93.5 15Q68 30 52.5 56Q37 82 37 112Q37 140 55 176Q69 204 94 237Q111 260 132 282ZM150 169Q127 169 110.5 152.5Q94 136 94 112.5Q94 89 110.5 72.5Q127 56 150 56Q173 56 189.5 72.5Q206 89 206 112.5Q206 136 189.5 152.5Q173 169 150 169Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M150 300Q159 291 168 282Q189 260 206 237Q231 204 245 176Q263 140 263 112Q263 82 247.5 56Q232 30 206.5 15Q181 0 150 0Q119 0 93.5 15Q68 30 52.5 56Q37 82 37 112Q37 140 55 176Q69 204 94 237Q111 260 132 282ZM150 169Q127 169 110.5 152.5Q94 136 94 112.5Q94 89 110.5 72.5Q127 56 150 56Q173 56 189.5 72.5Q206 89 206 112.5Q206 136 189.5 152.5Q173 169 150 169Z'/%3E%3C/svg%3E");
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact .bi-telephone::before,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact .bi-telephone::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M69 25Q65 20 59.5 20Q54 20 49 24L30 43Q23 50 21 59Q19 68 22 76Q47 147 100 200Q153 253 224 278Q232 281 241 279Q250 277 257 270L276 251Q280 246 280 240.5Q280 235 275 232L232 198Q227 194 221 196L180 206Q172 208 163.5 205.5Q155 203 149 197L103 151Q97 145 94.5 136.5Q92 128 94 120L104 79Q106 73 102 68ZM35 10Q46 -1 60.5 0Q75 1 84 13L118 56Q123 62 124.5 69.5Q126 77 124 84L114 125Q112 132 117 137L163 183Q168 188 175 186L216 176Q223 174 230.5 175.5Q238 177 244 182L287 216Q299 225 300 239.5Q301 254 290 265L271 284Q260 295 245.5 298.5Q231 302 217 297Q142 271 85.5 214.5Q29 158 3 83Q-2 69 1.5 54.5Q5 40 16 29Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M69 25Q65 20 59.5 20Q54 20 49 24L30 43Q23 50 21 59Q19 68 22 76Q47 147 100 200Q153 253 224 278Q232 281 241 279Q250 277 257 270L276 251Q280 246 280 240.5Q280 235 275 232L232 198Q227 194 221 196L180 206Q172 208 163.5 205.5Q155 203 149 197L103 151Q97 145 94.5 136.5Q92 128 94 120L104 79Q106 73 102 68ZM35 10Q46 -1 60.5 0Q75 1 84 13L118 56Q123 62 124.5 69.5Q126 77 124 84L114 125Q112 132 117 137L163 183Q168 188 175 186L216 176Q223 174 230.5 175.5Q238 177 244 182L287 216Q299 225 300 239.5Q301 254 290 265L271 284Q260 295 245.5 298.5Q231 302 217 297Q142 271 85.5 214.5Q29 158 3 83Q-2 69 1.5 54.5Q5 40 16 29Z'/%3E%3C/svg%3E");
}
.cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact .bi-clock-fill::before,
.cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact .bi-clock-fill::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M300 150Q300 191 280 225.5Q260 260 225.5 280Q191 300 150 300Q109 300 74.5 280Q40 260 20 225.5Q0 191 0 150Q0 109 20 74.5Q40 40 74.5 20Q109 0 150 0Q191 0 225.5 20Q260 40 280 74.5Q300 109 300 150ZM150 66Q150 62 147.5 59Q145 56 141 56Q137 56 134 59Q131 62 131 66V169Q131 174 136 177L202 214Q205 216 208.5 215Q212 214 214 210.5Q216 207 215 203.5Q214 200 211 198L150 163Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M300 150Q300 191 280 225.5Q260 260 225.5 280Q191 300 150 300Q109 300 74.5 280Q40 260 20 225.5Q0 191 0 150Q0 109 20 74.5Q40 40 74.5 20Q109 0 150 0Q191 0 225.5 20Q260 40 280 74.5Q300 109 300 150ZM150 66Q150 62 147.5 59Q145 56 141 56Q137 56 134 59Q131 62 131 66V169Q131 174 136 177L202 214Q205 216 208.5 215Q212 214 214 210.5Q216 207 215 203.5Q214 200 211 198L150 163Z'/%3E%3C/svg%3E");
}

/* Brands megamenu rail: solid navy, hairline between items, hover and
   active rows in a lighter shade of the same navy */
@media (min-width: 1051px) {
    .cs-header--modern .cs-mega-tabs__nav {
        padding: 0;
        border-right: 1px solid rgba(255, 255, 255, .06);
        background: var(--heading);
    }
    .cs-header--modern .cs-mega-tabs__nav li + li .cs-mega-tabs__tab {
        border-top: 1px solid rgba(255, 255, 255, .07);
    }
    .cs-header--modern .cs-mega-tabs__tab {
        padding: 15px 22px 15px 28px;
        transition: background .2s ease, color .2s ease;
    }
    .cs-header--modern .cs-mega-tabs__tab:hover {
        background: #16213b;
        color: var(--white);
    }
    .cs-header--modern .cs-mega-tabs__tab.is-active {
        background: #1b2744;
        color: var(--white);
        box-shadow: inset 3px 0 0 var(--primary);
    }
}
/* Rail items share the full rail height, no red edge, 1px smaller text */
@media (min-width: 1051px) {
    .cs-header--modern .cs-mega-tabs__nav {
        display: flex;
        flex-direction: column;
    }
    .cs-header--modern .cs-mega-tabs__nav li {
        display: flex;
        flex: 1 1 0;
    }
    .cs-header--modern .cs-mega-tabs__tab {
        height: 100%;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 14px;
    }
    .cs-header--modern .cs-mega-tabs__tab.is-active {
        box-shadow: none;
    }
}

/* Brand cards: photo on top, name with a "View models" line below and a
   round arrow chip on the right that fills red when the card is hovered */
@media (min-width: 1051px) {
    .cs-header--modern .cs-mega-brandcard {
        position: relative;
        padding: 0;
        border: 1px solid var(--border-light);
        background: var(--white);
    }
    .cs-header--modern .cs-mega-brandcard__img {
        margin: 0;
    }
    .cs-header--modern .cs-mega-brandcard__img::after {
        content: none;
    }
    .cs-header--modern .cs-mega-brandcard__img img {
        aspect-ratio: 4 / 3;
    }
    .cs-header--modern .cs-mega-brandcard__name {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        margin: 0;
        padding: 14px 56px 16px 16px;
        font-size: 16px;
        color: var(--heading);
    }
    .cs-header--modern .cs-mega-brandcard__name small {
        font-family: var(--font-primary);
        font-size: 12px;
        font-weight: 500;
        color: var(--muted);
    }
    .cs-header--modern .cs-mega-brandcard__name::after {
        position: absolute;
        top: 50%;
        right: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        border-radius: 50%;
        font-size: 12px;
        color: var(--primary);
        background: var(--primary-tint-10);
        opacity: 1;
        transform: none;
        transition: background .25s ease, color .25s ease;
    }
    .cs-header--modern .cs-mega-brandcard:hover .cs-mega-brandcard__name {
        color: var(--primary);
    }
    .cs-header--modern .cs-mega-brandcard:hover .cs-mega-brandcard__name::after {
        color: var(--white);
        background: var(--primary);
        transform: none;
    }
}

/* Location cards: shorter photo with a pill badge, contact rows split by
   hairlines, outlined service pills, and a foot row with a round arrow
   chip that fills red on hover (matches the brand cards) */
@media (min-width: 1051px) {
    .cs-header--modern .cs-mega-loc {
        border-color: var(--border-light);
    }
    .cs-header--modern .cs-mega-loc__img img {
        aspect-ratio: 16 / 8;
    }
    .cs-header--modern .cs-mega-loc__badge {
        top: 12px;
        left: 12px;
        height: 24px;
        padding: 0 10px;
        border-radius: 40px;
        font-size: 10px;
        line-height: 24px;
        box-shadow: rgba(15, 23, 43, .15) 0 2px 6px 0;
    }
    .cs-header--modern .cs-mega-loc__body {
        padding: 16px 18px 0;
    }
    .cs-header--modern .cs-mega-loc__name {
        margin-bottom: 10px;
        font-size: 16px;
    }
    .cs-header--modern .cs-mega-loc__rows {
        gap: 0;
        margin-bottom: 14px;
    }
    .cs-header--modern .cs-mega-loc__rows span {
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        color: var(--body);
    }
    .cs-header--modern .cs-mega-loc__rows span + span {
        border-top: 1px solid var(--border-light);
    }
    .cs-header--modern .cs-mega-loc__rows i {
        margin-top: 0;
        font-size: 13px;
    }
    .cs-header--modern .cs-mega-loc__tags span {
        border: 1px solid var(--border-light);
        font-size: 11px;
        color: var(--heading);
        background: var(--white);
    }
    .cs-header--modern .cs-mega-loc__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 16px -18px 0;
        padding: 12px 18px;
        border-top: 1px solid var(--border-light);
        font-size: 13px;
        font-weight: 600;
        color: var(--heading);
        background: var(--bg-light);
        transition: color .2s ease;
    }
    .cs-header--modern .cs-mega-loc__link i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-size: 12px;
        color: var(--primary);
        background: var(--primary-tint-10);
        transition: background .25s ease, color .25s ease;
    }
    .cs-header--modern .cs-mega-loc:hover .cs-mega-loc__link {
        color: var(--primary);
    }
    .cs-header--modern .cs-mega-loc:hover .cs-mega-loc__link i {
        color: var(--white);
        background: var(--primary);
        transform: none;
    }
}
@media (min-width: 1051px) {
    .cs-header--modern .cs-mega-loc__link {
        align-self: stretch;
        width: auto;
        margin-top: auto;
    }
    .cs-header--modern .cs-mega-loc__tags {
        margin-bottom: 16px;
    }
}
@media (min-width: 1051px) {
    .cs-header--modern .cs-mega-loc {
        border-color: var(--border);
    }
}
@media (min-width: 1051px) {
    .cs-header--modern .cs-mega-loc__link {
        color: var(--primary);
    }
}

/* Modern top bar on phones: compact one-line items, smaller chips,
   no wrapping */
@media (max-width: 575px) {
    .cs-topbar:has(+ .cs-header--modern) .cs-topbar__inner,
    .cs-overlaybar:has(.cs-header--modern) .cs-topbar__inner {
        height: 40px;
        justify-content: center;
    }
    .cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact,
    .cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact {
        font-size: 12px;
    }
    .cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact > span,
    .cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact > span {
        gap: 7px;
        padding: 0 12px;
        white-space: nowrap;
    }
    .cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact > span:first-of-type,
    .cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact > span:first-of-type {
        padding-left: 0;
    }
    .cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact i,
    .cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact i {
        width: 20px;
        height: 20px;
        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .22);
    }
    .cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact i::before,
    .cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact i::before {
        width: 10px;
        height: 10px;
    }
}
/* The address is hidden below 992px, so the phone is the first item shown:
   drop its divider */
@media (max-width: 991px) {
    .cs-topbar:has(+ .cs-header--modern) .cs-topbar__contact > span:nth-child(2),
    .cs-overlaybar:has(.cs-header--modern) .cs-topbar__contact > span:nth-child(2) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 1050px) {
    .cs-mega-headlink {
        font-size: 12px;
    }
}

/* Mobile brands menu: name on its own line with "View models" under it */
@media (max-width: 1050px) {
    .cs-mega-brandcard__name {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        line-height: 1.25;
    }
    .cs-mega-brandcard__name small {
        font-family: var(--font-primary);
        font-size: 12px;
        font-weight: 500;
        color: var(--muted);
    }
}

/* ==========================================================================
   Mobile drawer: same card styles as the desktop menus
   ========================================================================== */
@media (max-width: 1050px) {
    /* Location cards */
    .cs-header--modern .cs-mega-loc {
        border: 1px solid var(--border);
        background: var(--white);
    }
    .cs-header--modern .cs-mega-loc__img img {
        aspect-ratio: 16 / 8;
    }
    .cs-header--modern .cs-mega-loc__badge {
        top: 10px;
        left: 10px;
        height: 22px;
        padding: 0 9px;
        border-radius: 40px;
        font-size: 10px;
        line-height: 22px;
    }
    .cs-header--modern .cs-mega-loc__body {
        padding: 14px 16px 0;
    }
    .cs-header--modern .cs-mega-loc__name {
        margin-bottom: 8px;
        font-size: 16px;
    }
    .cs-header--modern .cs-mega-loc__rows {
        gap: 0;
        margin-bottom: 12px;
    }
    .cs-header--modern .cs-mega-loc__rows span {
        align-items: center;
        gap: 10px;
        padding: 7px 0;
        font-size: 13px;
        color: var(--body);
    }
    .cs-header--modern .cs-mega-loc__rows span + span {
        border-top: 1px solid var(--border-light);
    }
    .cs-header--modern .cs-mega-loc__rows i {
        margin-top: 0;
    }
    .cs-header--modern .cs-mega-loc__tags {
        margin-bottom: 14px;
    }
    .cs-header--modern .cs-mega-loc__tags span {
        padding-right: 10px;
        padding-left: 10px;
        border: 1px solid var(--border-light);
        border-radius: 40px;
        font-size: 11px;
        color: var(--heading);
        background: var(--white);
    }
    .cs-header--modern .cs-mega-loc__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-self: stretch;
        margin: auto -16px 0;
        padding: 11px 16px;
        border-top: 1px solid var(--border-light);
        font-size: 13px;
        font-weight: 600;
        color: var(--primary);
        background: var(--bg-light);
    }
    .cs-header--modern .cs-mega-loc__link i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        font-size: 12px;
        color: var(--primary);
        background: var(--primary-tint-10);
    }

    /* Brand cards */
    .cs-header--modern .cs-mega-brandcard {
        padding: 0;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--white);
    }
    .cs-header--modern .cs-mega-brandcard__img {
        margin: 0;
    }
    .cs-header--modern .cs-mega-brandcard__img img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    .cs-header--modern .cs-mega-brandcard__name {
        position: relative;
        margin: 0;
        padding: 10px 40px 12px 12px;
        font-size: 14px;
        color: var(--heading);
    }
    .cs-header--modern .cs-mega-brandcard__name small {
        font-size: 11px;
    }
    .cs-header--modern .cs-mega-brandcard__name::after {
        content: '\F138';
        position: absolute;
        top: 50%;
        right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-top: -12px;
        border-radius: 50%;
        font-family: 'bootstrap-icons';
        font-size: 11px;
        font-weight: 400;
        color: var(--primary);
        background: var(--primary-tint-10);
    }
}

/* Overlay header scrolls away with the hero (it is not sticky), so it
   stays transparent even once the page sets .is-stuck on scroll */
.cs-header--modern.cs-header--overlay,
.cs-header--modern.cs-header--overlay.is-stuck {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}