/* ============================================================
   WULING UK — NAVIGATION
   Nav bar · Mega menus · Mobile drawer
   ============================================================ */

nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 400;
    padding: 0 56px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 0 var(--border);
    transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}

/* ─── TRANSPARENT NAV (over a full-bleed hero video/image) ───
   Set via $nav_transparent = true before including header.php.
   Add class "nav-scrolled" (see js/main.js) once the visitor scrolls
   past the hero so the nav becomes solid again for the rest of the page. */
nav.nav-transparent {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
nav.nav-transparent .nav-logo .logo-white { opacity: 1; }
nav.nav-transparent .nav-logo .logo-dark  { opacity: 0; }
nav.nav-transparent .nav-links a,
nav.nav-transparent .nav-link-range { color: var(--white); }
nav.nav-transparent .nav-divider { background: rgba(255,255,255,0.25); }
nav.nav-transparent .btn-nav-secondary { color: var(--white); border-color: rgba(255,255,255,0.35); }
nav.nav-transparent .nav-burger span { background: var(--white); }
nav.nav-transparent.nav-scrolled {
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 0 var(--border);
}
nav.nav-transparent.nav-scrolled .nav-logo .logo-white { opacity: 0; }
nav.nav-transparent.nav-scrolled .nav-logo .logo-dark  { opacity: 1; }
nav.nav-transparent.nav-scrolled .nav-links a,
nav.nav-transparent.nav-scrolled .nav-link-range { color: var(--ink); }
nav.nav-transparent.nav-scrolled .nav-divider { background: var(--border2); }
nav.nav-transparent.nav-scrolled .btn-nav-secondary { color: var(--ink); border-color: var(--border2); }
nav.nav-transparent.nav-scrolled .nav-burger span { background: var(--ink); }

/* ─── ACTIVE PILLAR INDICATOR ─── */
.nav-links a.nav-link-active { color: var(--red); }
.nav-links a.nav-link-active::after { transform: scaleX(1); }

/* ─── LOGO ─── */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    width: 138px;
    height: 28px;
    flex-shrink: 0;
}
.nav-logo img {
    height: 28px;
    width: auto;
    display: block;
    position: absolute;
    top: 0; left: 0;
    transition: opacity 0.3s ease;
}
.nav-logo .logo-white { opacity: 0; }
.nav-logo .logo-dark  { opacity: 1; }

/* ─── LINKS ───
   Right-aligned within the flexible middle space, so the pillar words sit
   immediately to the left of the divider/CTA buttons rather than centred
   in the bar — leaves the logo as the only thing anchoring the left side,
   which the pillar sub-nav below lines up against (see PILLAR
   SUB-NAVIGATION further down). */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: flex-end;
}
.nav-links a {
    font-family: 'Epilogue', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: 8px 13px;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 13px; right: 13px;
    height: 1.5px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nav-links a:hover { color: var(--red); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ─── DIVIDER ─── */
.nav-divider {
    width: 1px;
    height: 28px;
    background: var(--border2);
    flex-shrink: 0;
}

/* ─── CTA BUTTONS ─── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.btn-nav-secondary {
    font-family: 'Epilogue', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--border2);
    padding: 10px 18px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
}
.btn-nav-secondary:hover { border-color: var(--ink); }

.btn-nav-primary {
    font-family: 'Epilogue', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--red);
    border: 1.5px solid var(--red);
    padding: 10px 18px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}
.btn-nav-primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

/* ─── HAMBURGER ─── */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px;
}
.nav-burger span {
    display: block;
    height: 1.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── OVERLAY ─── */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    /* Below #nav (400) on purpose, so the hamburger button itself — including
       its open/close (X) morph animation — stays visible and clickable on
       top of the drawer/overlay, exactly as before. The mobile-drawer-vs-
       sub-nav clash Jon reported wasn't this pair; it was .pillar-subnav
       sharing this same 398/399 tier and winning the stacking tie by DOM
       order. Fixed by moving .pillar-subnav down to its own lower tier
       instead — see the note there. */
    z-index: 398;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.nav-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* ─── SLIDE-IN DRAWER ─── */
.nav-drawer {
    position: fixed;
    top: 0; right: 0;
    width: min(420px, 100vw);
    height: 100dvh;
    background: var(--white);
    /* See note on .nav-overlay above — deliberately kept below #nav (400). */
    z-index: 399;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
    overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36px;
    height: 76px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.nav-drawer-logo {
    height: 22px;
    width: auto;
}
.nav-drawer-close {
    width: 36px;
    height: 36px;
    background: none;
    border: 1.5px solid var(--border2);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
    flex-shrink: 0;
}
.nav-drawer-close:hover { border-color: var(--ink); }
.nav-drawer-close svg { width: 14px; height: 14px; stroke: var(--ink); }

.nav-drawer-links {
    flex: 1;
    padding: 12px 36px 32px;
}
.nav-drawer-link {
    font-family: 'Epilogue', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.2s;
}
.nav-drawer-link::after {
    content: '→';
    font-size: 16px;
    font-weight: 400;
    color: var(--ink-mid);
    transition: transform 0.2s, color 0.2s;
}
.nav-drawer-link:hover { color: var(--red); }
.nav-drawer-link:hover::after { transform: translateX(4px); color: var(--red); }

/* ─── DRAWER ACCORDION ─── */
.drawer-expandable { border-bottom: 1px solid var(--border); }

.drawer-expand-btn {
    font-family: 'Epilogue', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    background: none;
    border: none;
    padding: 18px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s;
}
.drawer-expand-btn:hover,
.drawer-expand-btn[aria-expanded="true"] { color: var(--red); }

.drawer-expand-chevron {
    flex-shrink: 0;
    stroke: var(--ink-mid);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), stroke 0.2s;
}
.drawer-expand-btn[aria-expanded="true"] .drawer-expand-chevron {
    transform: rotate(180deg);
    stroke: var(--red);
}

.drawer-sub-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.4,0,0.2,1);
}
.drawer-sub-wrap.open { grid-template-rows: 1fr; }
.drawer-sub-inner { overflow: hidden; }

.drawer-sub-section {
    font-family: 'Epilogue', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--red);
    padding: 20px 0 8px 14px;
}

.drawer-sub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Epilogue', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink-mid);
    text-decoration: none;
    padding: 13px 0 13px 14px;
    border-top: 1px solid var(--border);
    transition: color 0.2s, padding-left 0.18s;
}
.drawer-sub-link:hover { color: var(--ink); padding-left: 20px; }
.drawer-sub-link svg { opacity: 0.35; flex-shrink: 0; transition: opacity 0.2s, transform 0.2s; }
.drawer-sub-link:hover svg { opacity: 1; transform: translateX(2px); }
.drawer-sub-last { margin-bottom: 16px; }

.nav-drawer-foot {
    padding: 28px 36px 40px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.nav-drawer-foot .btn-nav-secondary,
.nav-drawer-foot .btn-nav-primary {
    display: block;
    text-align: center;
    padding: 14px 20px;
    font-size: 11px;
}

/* ─── MEGA MENU ─── */
.nav-link-range {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.mega-chevron {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    opacity: 0.55;
}
.mega-menu-open .mega-chevron { transform: rotate(180deg); opacity: 1; }

.mega-overlay {
    position: fixed;
    inset: 0;
    top: 76px;
    background: rgba(0,0,0,0.35);
    /* Above .pillar-subnav (z-index 399, sticky just under the main nav) so
       the mega menu and its backdrop always render on top of the pillar
       sub-nav strip rather than under it. See .pillar-subnav below. */
    z-index: 405;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mega-overlay.open { opacity: 1; visibility: visible; pointer-events: all; }

.mega-menu {
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 32px 64px rgba(0,0,0,0.14);
    /* Above .pillar-subnav (399) — see note on .mega-overlay above. */
    z-index: 406;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0.28s ease;
}
.mega-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.mega-inner {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 72px;
    padding: 52px 56px 56px;
    max-width: 1400px;
    margin: 0 auto;
}

.mega-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--border);
    padding-right: 72px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease 0.06s, transform 0.3s ease 0.06s;
}
.mega-menu.open .mega-intro { opacity: 1; transform: none; }

.mega-intro-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 14px;
}
.mega-intro-title {
    font-size: 26px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 14px;
}
.mega-intro-body {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-mid);
    line-height: 1.65;
    flex: 1;
}
.mega-intro-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    margin-top: 28px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border2);
    transition: color 0.2s, border-color 0.2s;
}
.mega-intro-link svg { transition: transform 0.2s; }
.mega-intro-link:hover { color: var(--red); border-color: var(--red); }
.mega-intro-link:hover svg { transform: translateX(3px); }

.mega-vehicles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Lifestyle/Adventure reuse the same .mega-vehicles grid with a single card
   in it (single-vehicle pillars) — same card size as Commercial's, just one
   instead of two, so the two/three menus stay visually consistent. */

.mega-vehicle {
    display: block;
    text-decoration: none;
    color: var(--ink);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.mega-menu.open .mega-vehicle:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.10s; }
.mega-menu.open .mega-vehicle:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.16s; }
.mega-menu.open .mega-vehicle:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.22s; }

.mega-vehicle-img {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 6px;
    background: var(--bg);
    margin-bottom: 18px;
}
.mega-vehicle-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.03);
    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.mega-vehicle:hover .mega-vehicle-img img { transform: scale(1.08); }

.mega-vehicle-img::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.mega-vehicle:hover .mega-vehicle-img::after { transform: scaleX(1); }

.mega-vehicle-cat {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-mid);
    margin-bottom: 6px;
}
.mega-vehicle-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 5px;
    transition: color 0.2s;
}
.mega-vehicle:hover .mega-vehicle-name { color: var(--red); }

.mega-vehicle-price {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-mid);
    margin-bottom: 14px;
}
.mega-vehicle-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border2);
    transition: color 0.2s, border-color 0.2s;
}
.mega-vehicle-cta svg { transition: transform 0.2s; }
.mega-vehicle:hover .mega-vehicle-cta { color: var(--red); border-color: var(--red); }
.mega-vehicle:hover .mega-vehicle-cta svg { transform: translateX(3px); }

/* ─── WHY WULING MEGA MENU ─── */
.mega-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 260px;
    padding: 48px 56px 56px;
    max-width: 1400px;
    margin: 0 auto;
}

.mega-why-col {
    padding-right: 48px;
    margin-right: 48px;
    border-right: 1px solid var(--border);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.mega-why-col:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}
.mega-menu.open .mega-why-col:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.06s; }
.mega-menu.open .mega-why-col:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.12s; }
.mega-menu.open .mega-why-col:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.18s; }
.mega-menu.open .mega-why-col:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.24s; }

/* ─── WULINGCARE FEATURED PANEL ─── */
.mega-wulingcare { padding-right: 0; margin-right: 0; border-right: none; }

.mega-wulingcare-card {
    display: flex;
    flex-direction: column;
    background: var(--red);
    border-radius: 6px;
    padding: 28px 28px 24px;
    text-decoration: none;
    height: calc(100% - 32px);
    transition: background 0.25s;
    margin-top: 32px;
}
.mega-wulingcare-card:hover { background: var(--red-deep); }

.mega-wulingcare-logo {
    font-family: 'Epilogue', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--white);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
}

.mega-wulingcare-desc {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 20px;
}

.mega-wulingcare-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--white);
}
.mega-wulingcare-cta svg { transition: transform 0.2s; }
.mega-wulingcare-card:hover .mega-wulingcare-cta svg { transform: translateX(3px); }

.mega-why-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 10px;
}

.mega-why-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.mega-why-links { list-style: none; }

.mega-why-links li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Epilogue', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-mid);
    text-decoration: none;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    transition: color 0.2s, padding-left 0.18s;
}
.mega-why-links li:last-child a { border-bottom: none; }
.mega-why-links li a:hover { color: var(--ink); padding-left: 5px; }
.mega-why-links li a svg { opacity: 0; transition: opacity 0.2s, transform 0.2s; flex-shrink: 0; }
.mega-why-links li a:hover svg { opacity: 1; transform: translateX(2px); }

/* ─── RESPONSIVE: NAV ─── */
@media (max-width: 1300px) {
    nav { padding: 0 40px; gap: 20px; }
    .btn-nav-secondary { display: none; }
    .nav-divider { display: none; }
}

@media (max-width: 1080px) {
    nav { padding: 0 32px; gap: 16px; }
    .nav-links { gap: 0; }
    .nav-links a { padding: 8px 9px; font-size: 10.5px; letter-spacing: 0.08em; }
}

@media (max-width: 935px) {
    nav { padding: 0 24px; gap: 12px; }
    .nav-links { display: none; }
    .nav-divider { display: none; }
    .nav-burger { display: flex; }
    .nav-actions { display: flex; margin-left: auto; }
    .btn-nav-secondary { padding: 9px 14px; }
    .btn-nav-primary   { padding: 9px 14px; }
}

@media (max-width: 600px) {
    .btn-nav-secondary { display: none; }
}

@media (max-width: 480px) {
    .nav-actions { display: none; }
}

/* ─── PILLAR SUB-NAVIGATION ───
   Persistent, always-on sub-page links for a single-vehicle pillar page
   (Bingo first). Sticks to the top of the viewport directly under the main
   nav — never a hover menu — so every related page is visible without a
   visitor having to look for it. Links only, deliberately no pillar label
   and no CTA button — the main nav above already carries the pillar
   switcher and the one "Book a Test Drive" button (pillar-aware, see
   $nav_test_drive_href in header.php), so there's never a second Test Drive
   button competing with it. See partials/pillar-subnav.php. */
.pillar-subnav {
    position: sticky;
    top: 76px;
    /* Deliberately well below both the mega menu / its overlay (405/406,
       so a hover dropdown from the main nav always renders on top of this
       strip) AND the mobile nav-drawer / nav-overlay (398/399, so the
       hamburger drawer always renders cleanly on top of this strip too,
       instead of the two tying at the same z-index and the winner coming
       down to DOM order — which is what let this strip poke over the
       drawer near "Lifestyle" before). */
    z-index: 350;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}
.pillar-subnav-inner {
    /* No max-width/centring here on purpose. Note the horizontal inset that
       used to live here (matching nav's own left padding so the first
       sub-nav link lines up with the logo above it) now lives on
       .pillar-subnav-links instead — see the comment there for why. This
       element just centres the row vertically. */
    height: 58px;
    display: flex;
    align-items: center;
}

.pillar-subnav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* The horizontal inset lives here, on the scrollable element itself,
       not on the non-scrolling .pillar-subnav-inner above — padding on a
       scroll container is part of its scrollable range, so it shows as an
       inset at rest (keeping the logo alignment, and a bit of breathing
       room before "Overview") but scrolls away as the user drags, letting
       the links reach the true screen edge at either scroll extreme on
       mobile. Matches nav's own left padding at every breakpoint (see
       "RESPONSIVE: NAV" above and the overrides below) so the alignment
       with the logo holds exactly as before. */
    padding: 0 56px;
}
.pillar-subnav-links::-webkit-scrollbar { display: none; }

.pillar-subnav-links a {
    font-family: 'Epilogue', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-mid);
    text-decoration: none;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 20px;
    transition: color 0.2s, background 0.2s;
}
.pillar-subnav-links a:hover { color: var(--ink); background: var(--bg); }
.pillar-subnav-links a.active {
    color: var(--white);
    background: var(--red);
    font-weight: 600;
}
.pillar-subnav-links a.active:hover { background: var(--red); }

/* Padding here mirrors nav's own breakpoints exactly (see "RESPONSIVE: NAV"
   above: 56px → 40px → 32px → 24px) so the logo/sub-nav alignment holds at
   every viewport width, not just the default and mobile ones. */
@media (max-width: 1300px) {
    .pillar-subnav-links { padding: 0 40px; }
}

@media (max-width: 1080px) {
    .pillar-subnav-links { padding: 0 32px; }
}

@media (max-width: 935px) {
    /* This is also where the burger/drawer mobile nav kicks in (see
       "RESPONSIVE: NAV" further up) — i.e. touch-scroll territory. No
       right-hand padding from here down: the left inset still shows at
       rest (matching the logo, and giving "Overview" a bit of breathing
       room), but with nothing reserved on the right the row can be
       dragged all the way so the last link reaches the true screen edge,
       instead of stopping short with a leftover white margin. */
    .pillar-subnav { top: 76px; }
    .pillar-subnav-links { padding: 0 0 0 24px; }
}

@media (max-width: 480px) {
    .pillar-subnav-inner { height: 54px; }
    .pillar-subnav-links { padding: 0 0 0 24px; }
    .pillar-subnav-links a { padding: 7px 12px; font-size: 12.5px; }
}