/* ========================================================================== */
/* BODY WORK PAINTING TRUCK REPAIR PAGE HEADER GLASS — ported from home-header-glass.css (2026-06-10)   */
/* Loads after preloader-kill + mobile-menu-critical on body-work-painting.html            */
/* ========================================================================== */
html[data-body-work-painting-page] .header-section,
html[data-body-work-painting-page] .header__top {
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-body-work-painting-page] section.header__top,
html[data-body-work-painting-page] .header__top.topbar-v3 {
  display: block !important;
  z-index: 11990 !important;
  width: 100% !important;
  background-color: #ffffff !important;
}

html[data-body-work-painting-page] .header-section.header__one,
html[data-body-work-painting-page] .header-section.sticky-header.header__one {
  z-index: 12000 !important;
  background: #2c0e53 !important;
  background-color: #2c0e53 !important;
}

/* Supersede legacy global social pill rules above when topbar-v3 glass is active */
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li > a {
  width: var(--topbar-social-circle-size) !important;
  height: var(--topbar-social-circle-size) !important;
  border: none !important;
  color: inherit !important;
  background: transparent !important;
  transform: none !important;
}

/* body-work-painting.html — top header bar + main nav glass morphism (Discount reference pattern, Grenier purple/gold) */

html[data-body-work-painting-page] .header__top.topbar-v3 {
  --topbar-social-size: 28px;
  --topbar-social-gap: 5px;
  --topbar-social-center-index: 5;
  --topbar-social-youtube-offset: calc(
    (var(--topbar-social-center-index) - 1) * (var(--topbar-social-size) + var(--topbar-social-gap)) +
      var(--topbar-social-size) / 2
  );
  --topbar-flank-gap: clamp(16px, 2vw, 28px);
  position: relative;
  isolation: isolate;
  z-index: 2;
  overflow: visible !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  backdrop-filter: blur(26px) saturate(1.28);
  box-shadow:
    0 42px 84px rgba(46, 12, 94, 0.24),
    0 20px 40px rgba(46, 12, 94, 0.16),
    0 8px 18px rgba(46, 12, 94, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.84),
    inset 0 -2px 4px rgba(46, 12, 94, 0.06);
}

/* Topbar band — 3D glass shelf (card-stack backplate) */
html[data-body-work-painting-page] .header__top.topbar-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(250, 204, 21, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.14) 46%, rgba(46, 12, 94, 0.05) 100%);
  pointer-events: none;
  z-index: 0;
}

html[data-body-work-painting-page] .header__top.topbar-v3::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -7px;
  height: 100%;
  background: linear-gradient(180deg, rgba(46, 12, 94, 0.06), rgba(46, 12, 94, 0.16));
  box-shadow: 0 24px 52px rgba(46, 12, 94, 0.26);
  transform: translateY(7px) scale(0.98);
  z-index: -1;
  pointer-events: none;
}

html[data-body-work-painting-page] .header__top.topbar-v3 .container {
  position: relative;
  z-index: 1;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__row,
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left,
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right,
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social {
  overflow: visible !important;
}

/*
 * Topbar layout — YouTube (5th icon) pinned to logo axis on desktop:
 * social row absolute at 50%; pills flank left/right of social cluster.
 * Overrides custom-functions.css space-between + flex-wrap that stacked pills under social.
 */
html[data-body-work-painting-page] .header__top.topbar-v3 .container,
html[data-body-work-painting-page] .header__top.topbar-v3 .topbar-v3__row,
html[data-body-work-painting-page] .header__top.topbar-v3 .header__wrapper.topbar-v3__row {
  overflow: visible !important;
}

html[data-body-work-painting-page] .header__top.topbar-v3 .header__wrapper.topbar-v3__row {
  flex-wrap: nowrap !important;
}

html[data-body-work-painting-page] .header__top .info.topbar-v3__left li,
html[data-body-work-painting-page] .header__top .info.topbar-v3__right li {
  margin-right: 0 !important;
}

@media (min-width: 981px) {
  html[data-body-work-painting-page] body .header__top.topbar-v3 .container {
    position: static !important;
  }

  html[data-body-work-painting-page] body .header__top.topbar-v3 .header__wrapper.topbar-v3__row {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 42px !important;
    padding-inline: clamp(12px, 2vw, 24px) !important;
    box-sizing: border-box !important;
  }

  html[data-body-work-painting-page] body .header__top.topbar-v3 .topbar-v3__social.social__icon {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(calc(-1 * var(--topbar-social-youtube-offset)), -50%) !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: var(--topbar-social-gap) !important;
    z-index: 8 !important;
  }

  html[data-body-work-painting-page] body .header__top.topbar-v3 .topbar-v3__left {
    position: absolute !important;
    right: calc(50% + var(--topbar-social-youtube-offset) + var(--topbar-flank-gap)) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    width: auto !important;
    max-width: calc(50% - var(--topbar-social-youtube-offset) - var(--topbar-flank-gap) - 12px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  html[data-body-work-painting-page] body .header__top.topbar-v3 .topbar-v3__right {
    position: absolute !important;
    left: calc(50% + var(--topbar-social-youtube-offset) + var(--topbar-flank-gap)) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: auto !important;
    max-width: calc(50% - var(--topbar-social-youtube-offset) - var(--topbar-flank-gap) - 12px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  html[data-body-work-painting-page] body .header__top.topbar-v3 .social__icon li {
    margin-right: 0 !important;
  }
}

@media (max-width: 980px) {
  html[data-body-work-painting-page] body .header__top.topbar-v3 .header__wrapper.topbar-v3__row {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  html[data-body-work-painting-page] body .header__top.topbar-v3 .topbar-v3__social {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex-wrap: wrap !important;
    gap: clamp(6px, 1.4vw, 10px) !important;
    justify-content: center !important;
  }
}

/* Topbar info pills — prominent 3D pop-out (matches menu pill lift) */
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left li,
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right li {
  --topbar-pill-shadow: rgba(46, 12, 94, 0.34);
  --topbar-pill-mid: rgba(72, 27, 130, 0.24);
  position: relative !important;
  isolation: isolate;
  z-index: 1;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 14% 0%, rgba(250, 204, 21, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 255, 0.82));
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow:
    0 40px 76px var(--topbar-pill-shadow),
    0 18px 36px var(--topbar-pill-mid),
    0 7px 16px rgba(46, 12, 94, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 5px rgba(46, 12, 94, 0.1);
  transform: translateY(-4px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left li::after,
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right li::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -5px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(46, 12, 94, 0.1), rgba(46, 12, 94, 0.22));
  box-shadow: 0 20px 40px rgba(46, 12, 94, 0.32);
  transform: translateY(7px) scale(0.95);
  z-index: -1;
  pointer-events: none;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left li::before,
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, transparent 48%, rgba(46, 12, 94, 0.05) 100%);
  pointer-events: none;
  z-index: 1;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left li > *,
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right li > * {
  position: relative;
  z-index: 2;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left li:hover,
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right li:hover {
  transform: translateY(-10px);
  border-color: rgba(250, 204, 21, 0.28);
  box-shadow:
    0 52px 92px rgba(46, 12, 94, 0.38),
    0 24px 46px rgba(72, 27, 130, 0.28),
    0 9px 20px rgba(46, 12, 94, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 6px rgba(46, 12, 94, 0.12);
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left li:hover::after,
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right li:hover::after {
  transform: translateY(11px) scale(0.94);
  box-shadow: 0 24px 44px rgba(46, 12, 94, 0.32);
}

/* Social icon circles — prominent 3D pop-out (matches menu pill lift) */
html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li {
  position: relative !important;
  isolation: isolate;
  z-index: 1;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(250, 204, 21, 0.2), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 242, 255, 0.86)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow:
    0 38px 72px rgba(46, 12, 94, 0.34),
    0 16px 32px rgba(72, 27, 130, 0.24),
    0 6px 14px rgba(46, 12, 94, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 5px rgba(46, 12, 94, 0.1) !important;
  transform: translateY(-5px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(46, 12, 94, 0.1), rgba(46, 12, 94, 0.22));
  box-shadow: 0 18px 36px rgba(46, 12, 94, 0.32);
  transform: translateY(7px) scale(0.9);
  z-index: -1;
  pointer-events: none;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.65) 0%, transparent 50%, rgba(46, 12, 94, 0.06) 100%);
  pointer-events: none;
  z-index: 1;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li > a {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li:hover {
  transform: translateY(-11px) scale(1.06);
  border-color: rgba(250, 204, 21, 0.3) !important;
  box-shadow:
    0 48px 86px rgba(46, 12, 94, 0.4),
    0 20px 40px rgba(72, 27, 130, 0.3),
    0 8px 18px rgba(46, 12, 94, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 6px rgba(46, 12, 94, 0.12) !important;
}

html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li:hover::after {
  transform: translateY(10px) scale(0.88);
  box-shadow: 0 20px 38px rgba(46, 12, 94, 0.34);
}

/*
 * Large straddle logo — 15% lower than sitewide 160% anchor (home only, non-sticky).
 * Sticky/minimized logo — snap to nav-bottom straddle so small logo stays in view on scroll.
 */
@media (min-width: 981px) {
  html[data-body-work-painting-page] body .header-section.header__one:not(.sticky-header) .straddle-logo {
    top: 175% !important;
    transform: translate(-50%, -50%) translateZ(0) !important;
  }

  html[data-body-work-painting-page] body .header-section.header__one .straddle-logo {
    transition: none !important;
  }

  html[data-body-work-painting-page] body .header-section.header__one .straddle-logo img {
    transition: none !important;
  }

  html[data-body-work-painting-page] body .header-section.sticky-header.header__one {
    overflow: visible !important;
  }

  html[data-body-work-painting-page] body .header-section.sticky-header.header__one .straddle-logo {
    top: 100% !important;
    transform: translate(-50%, -50%) translateZ(0) !important;
  }

  html[data-body-work-painting-page] body .header-section.sticky-header.header__one .straddle-logo img {
    height: 100px !important;
    max-height: 100px !important;
  }
}

/* Main nav band */
html[data-body-work-painting-page] .header-section.header__one {
  position: relative;
  isolation: isolate;
  padding: 12px 0 !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
  box-shadow:
    inset 0 -1px 0 rgba(250, 204, 21, 0.45),
    0 32px 72px rgba(46, 12, 94, 0.28),
    0 14px 30px rgba(46, 12, 94, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-body-work-painting-page] .header-section.header__one::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 38%, rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
  z-index: 0;
}

html[data-body-work-painting-page] .header-section.header__one .container,
html[data-body-work-painting-page] .header-section.header__one .header-wrapper,
html[data-body-work-painting-page] .header-section.header__one .mega-shell {
  position: relative;
  z-index: 1;
}

/* Nav row — single line, straddle-logo gap on items 4/5 */
@media (min-width: 992px) {
  html[data-body-work-painting-page] .header-section .header-wrapper {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  html[data-body-work-painting-page] .header-section .logo__menuadjust {
    flex-grow: 1 !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  html[data-body-work-painting-page] .header-section .main-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-body-work-painting-page] .header-section .main-menu > li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Towing Services (4) / Truck Repairs (5) — logo straddle gap */
  html[data-body-work-painting-page] .header-section .main-menu > li:nth-child(4) {
    margin-right: 180px !important;
    margin-left: 0 !important;
  }

  html[data-body-work-painting-page] .header-section .main-menu > li:nth-child(5) {
    margin-left: 180px !important;
    margin-right: 0 !important;
  }
}

/* Menu link glass pills — prominent 3D pop-out (card-stack pattern) */
html[data-body-work-painting-page] .header-section .main-menu > li {
  overflow: visible !important;
}

html[data-body-work-painting-page] .header-section .main-menu > li > a,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item {
  --light-duty-towing-menu-shadow: rgba(0, 0, 0, 0.34);
  --light-duty-towing-menu-mid: rgba(23, 6, 47, 0.42);
  position: relative !important;
  isolation: isolate;
  z-index: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 14% 0%, rgba(250, 204, 21, 0.16), transparent 44%),
    linear-gradient(
      180deg,
      rgba(62, 24, 112, 0.86),
      rgba(38, 12, 74, 0.92)
    );
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow:
    0 34px 64px var(--light-duty-towing-menu-shadow),
    0 16px 30px var(--light-duty-towing-menu-mid),
    0 6px 14px rgba(46, 12, 94, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 5px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

html[data-body-work-painting-page] .header-section .main-menu > li > a::after,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -5px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(23, 6, 47, 0.18), rgba(0, 0, 0, 0.3));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
  transform: translateY(7px) scale(0.95);
  z-index: -1;
  pointer-events: none;
}

html[data-body-work-painting-page] .header-section .main-menu > li > a i,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item i {
  position: relative;
  z-index: 2;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

@media (min-width: 992px) and (max-width: 1366px) {
  html[data-body-work-painting-page] .header-section .main-menu {
    gap: 4px !important;
  }

  html[data-body-work-painting-page] .header-section .main-menu > li > a,
  html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item {
    padding: 8px 10px !important;
    font-size: 15px !important;
  }

  html[data-body-work-painting-page] .header-section .main-menu > li:nth-child(4) {
    margin-right: 150px !important;
  }

  html[data-body-work-painting-page] .header-section .main-menu > li:nth-child(5) {
    margin-left: 150px !important;
  }
}

html[data-body-work-painting-page] .header-section .main-menu > li > a:hover,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item:hover,
html[data-body-work-painting-page] .header-section .main-menu > li > a:focus-visible,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item:focus-visible {
  transform: translateY(-10px);
  background:
    radial-gradient(circle at 14% 0%, rgba(250, 204, 21, 0.22), transparent 44%),
    linear-gradient(
      180deg,
      rgba(72, 27, 130, 0.92),
      rgba(46, 12, 94, 0.96)
    );
  border-color: rgba(250, 204, 21, 0.32);
  box-shadow:
    0 46px 82px rgba(0, 0, 0, 0.38),
    0 22px 40px rgba(23, 6, 47, 0.44),
    0 8px 18px rgba(46, 12, 94, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.22);
}

html[data-body-work-painting-page] .header-section .main-menu > li > a:hover::after,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item:hover::after {
  transform: translateY(11px) scale(0.94);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.36);
}

/* Remove magnifying-glass search control from home header */
html[data-body-work-painting-page] .header-section .menu__components .search-icon,
html[data-body-work-painting-page] .header-section .menu__components .search-trigger {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Hamburger — 3D glass pop-out (matches menu pills); loads AFTER mobile-menu.css.
 */
html[data-body-work-painting-page] .header-section .menu__components {
  overflow: visible !important;
}

/* Desktop drawer toggle (#openButton) — Font Awesome bars centered in circle */
@media (min-width: 981px) {
  html[data-body-work-painting-page] body .header-wrapper .menu__components #openButton.fa-bars {
    --light-duty-towing-menu-shadow: rgba(0, 0, 0, 0.34);
    --light-duty-towing-menu-mid: rgba(23, 6, 47, 0.42);
    position: relative !important;
    isolation: isolate;
    z-index: 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-size: 26px !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 50% !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background:
      radial-gradient(circle at 22% 12%, rgba(250, 204, 21, 0.16), transparent 48%),
      linear-gradient(
        180deg,
        rgba(62, 24, 112, 0.86),
        rgba(38, 12, 74, 0.92)
      ) !important;
    color: #ffffff !important;
    box-shadow:
      0 34px 64px var(--light-duty-towing-menu-shadow),
      0 16px 30px var(--light-duty-towing-menu-mid),
      0 6px 14px rgba(46, 12, 94, 0.22),
      inset 0 2px 0 rgba(255, 255, 255, 0.24),
      inset 0 -2px 5px rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
    backdrop-filter: blur(20px) saturate(1.18) !important;
    transform: translateY(-4px) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s ease,
      background 0.3s ease,
      border-color 0.3s ease !important;
  }

  html[data-body-work-painting-page] body .header-wrapper .menu__components #openButton.fa-bars::after {
    content: "" !important;
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -4px;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(23, 6, 47, 0.18), rgba(0, 0, 0, 0.3));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
    transform: translateY(7px) scale(0.9);
    z-index: -1;
    pointer-events: none;
  }

  html[data-body-work-painting-page] body .header-wrapper .menu__components #openButton.fa-bars::before {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[data-body-work-painting-page] body .header-wrapper .menu__components #openButton.fa-bars:hover {
    background:
      radial-gradient(circle at 22% 12%, rgba(250, 204, 21, 0.22), transparent 48%),
      linear-gradient(
        180deg,
        rgba(72, 27, 130, 0.92),
        rgba(46, 12, 94, 0.96)
      ) !important;
    border-color: rgba(250, 204, 21, 0.32) !important;
    transform: translateY(-10px) !important;
    box-shadow:
      0 46px 82px rgba(0, 0, 0, 0.38),
      0 22px 40px rgba(23, 6, 47, 0.44),
      0 8px 18px rgba(46, 12, 94, 0.26),
      inset 0 2px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 6px rgba(0, 0, 0, 0.22) !important;
  }

  html[data-body-work-painting-page] body .header-wrapper .menu__components #openButton.fa-bars:hover::after {
    transform: translateY(11px) scale(0.88);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.36);
  }
}

/* Mobile toggle — flex-center three bars inside 3D glass button */
@media (max-width: 980px) {
  html[data-body-work-painting-page] body #mobileHeaderHamburger.mobile-nav-toggle,
  html[data-body-work-painting-page] body .header-wrapper > .mobile-nav-toggle {
    --light-duty-towing-menu-shadow: rgba(0, 0, 0, 0.34);
    --light-duty-towing-menu-mid: rgba(23, 6, 47, 0.42);
    position: relative !important;
    isolation: isolate;
    z-index: 1;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 48.6px !important;
    height: 54px !important;
    min-width: 48.6px !important;
    max-width: 48.6px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12.6px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background:
      radial-gradient(circle at 22% 12%, rgba(250, 204, 21, 0.16), transparent 48%),
      linear-gradient(
        180deg,
        rgba(62, 24, 112, 0.86),
        rgba(38, 12, 74, 0.92)
      ) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
    backdrop-filter: blur(20px) saturate(1.18) !important;
    box-shadow:
      0 34px 64px var(--light-duty-towing-menu-shadow),
      0 16px 30px var(--light-duty-towing-menu-mid),
      0 6px 14px rgba(46, 12, 94, 0.22),
      inset 0 2px 0 rgba(255, 255, 255, 0.24),
      inset 0 -2px 5px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-4px) !important;
    box-sizing: border-box !important;
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s ease,
      background 0.3s ease,
      border-color 0.3s ease !important;
  }

  html[data-body-work-painting-page] body #mobileHeaderHamburger.mobile-nav-toggle::after,
  html[data-body-work-painting-page] body .header-wrapper > .mobile-nav-toggle::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: -5px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(23, 6, 47, 0.18), rgba(0, 0, 0, 0.3));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
    transform: translateY(7px) scale(0.95);
    z-index: -1;
    pointer-events: none;
  }

  html[data-body-work-painting-page] body #mobileHeaderHamburger.mobile-nav-toggle:hover,
  html[data-body-work-painting-page] body .header-wrapper > .mobile-nav-toggle:hover {
    background:
      radial-gradient(circle at 22% 12%, rgba(250, 204, 21, 0.22), transparent 48%),
      linear-gradient(
        180deg,
        rgba(72, 27, 130, 0.92),
        rgba(46, 12, 94, 0.96)
      ) !important;
    border-color: rgba(250, 204, 21, 0.32) !important;
    transform: translateY(-10px) !important;
    box-shadow:
      0 46px 82px rgba(0, 0, 0, 0.38),
      0 22px 40px rgba(23, 6, 47, 0.44),
      0 8px 18px rgba(46, 12, 94, 0.26),
      inset 0 2px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 6px rgba(0, 0, 0, 0.22) !important;
  }

  html[data-body-work-painting-page] body #mobileHeaderHamburger.mobile-nav-toggle:hover::after,
  html[data-body-work-painting-page] body .header-wrapper > .mobile-nav-toggle:hover::after {
    transform: translateY(11px) scale(0.94);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.36);
  }

  html[data-body-work-painting-page] body #mobileHeaderHamburger.mobile-nav-toggle span,
  html[data-body-work-painting-page] body .header-wrapper > .mobile-nav-toggle span {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    background: #fff !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 640px) {
  html[data-body-work-painting-page] body #mobileHeaderHamburger.mobile-nav-toggle span,
  html[data-body-work-painting-page] body .header-wrapper > .mobile-nav-toggle span {
    width: 32px !important;
  }
}

@media (max-width: 384px) {
  html[data-body-work-painting-page] body #mobileHeaderHamburger.mobile-nav-toggle,
  html[data-body-work-painting-page] body .header-wrapper > .mobile-nav-toggle {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    gap: 4px !important;
  }

  html[data-body-work-painting-page] body #mobileHeaderHamburger.mobile-nav-toggle span,
  html[data-body-work-painting-page] body .header-wrapper > .mobile-nav-toggle span {
    width: 26px !important;
  }
}

html[data-body-work-painting-page] .header-section .site-header__mobile-brand {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  backdrop-filter: blur(18px) saturate(1.16);
  box-shadow:
    0 20px 40px rgba(23, 6, 47, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  padding: 6px 12px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

html[data-body-work-painting-page] .header-section .site-header__mobile-brand:hover {
  transform: translateY(-3px);
}

/* Mega menu panels — deepen existing glass */
html[data-body-work-painting-page] .header-section .mega-panel {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.2) !important;
  backdrop-filter: blur(28px) saturate(1.2) !important;
  box-shadow:
    0 56px 118px rgba(46, 12, 94, 0.28),
    0 22px 42px rgba(46, 12, 94, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html[data-body-work-painting-page] .header-section .mega-panel__header > div {
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(250, 248, 255, 0.68));
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
  backdrop-filter: blur(20px) saturate(1.16);
  box-shadow:
    0 28px 56px rgba(46, 12, 94, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-body-work-painting-page] .header-section .mega-link a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(46, 12, 94, 0.12);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  box-shadow:
    0 12px 24px rgba(46, 12, 94, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html[data-body-work-painting-page] .header-section .mega-link a:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 32px rgba(46, 12, 94, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

@media (prefers-reduced-motion: reduce) {
  html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left li,
  html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right li,
  html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li,
  html[data-body-work-painting-page] .header-section .main-menu > li > a,
  html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item,
  html[data-body-work-painting-page] .header-section .menu__components #openButton,
  html[data-body-work-painting-page] .header-section .mega-link a {
    transition: none !important;
  }

  html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left li,
  html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right li,
  html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li {
    transform: none !important;
  }

  html[data-body-work-painting-page] .topbar-v3 .topbar-v3__left li:hover,
  html[data-body-work-painting-page] .topbar-v3 .topbar-v3__right li:hover,
  html[data-body-work-painting-page] .topbar-v3 .topbar-v3__social > li:hover,
  html[data-body-work-painting-page] .header-section .main-menu > li > a:hover {
    transform: none !important;
  }
}

/* Light-duty towing menu link colors — yellow on purple glass pills */
html[data-body-work-painting-page] .header-section .main-menu > li > a,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item {
  color: #ffd901 !important;
}
html[data-body-work-painting-page] .header-section .main-menu > li > a:hover,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item:hover,
html[data-body-work-painting-page] .header-section .main-menu > li > a:focus-visible,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item:focus-visible {
  color: #facc15 !important;
}
html[data-body-work-painting-page] .header-section .main-menu > li > a i,
html[data-body-work-painting-page] .header-section .main-menu > li > .nav-item i {
  color: #ffffff !important;
}

/* Mega menu button card layer - dashboard SEO stat raised effect only */
.header-section .mega-panel__column {
  position: relative !important;
  z-index: 30 !important;
  -webkit-backdrop-filter: blur(28px) saturate(130%) !important;
  backdrop-filter: blur(28px) saturate(130%) !important;
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.34),
    0 10px 20px -8px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
}

.header-section .mega-panel__column:hover,
.header-section .mega-panel__column:focus-within {
  z-index: 40 !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.44),
    0 15px 30px -10px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.74) !important;
}

/* Mega menu item buttons above card layer - effect only */
.header-section .mega-panel__column,
.header-section .mega-panel__links,
.header-section .mega-link {
  overflow: visible !important;
}

.header-section .mega-link {
  position: relative !important;
  z-index: 50 !important;
}

.header-section .mega-link a {
  position: relative !important;
  z-index: 60 !important;
  -webkit-backdrop-filter: blur(28px) saturate(130%) !important;
  backdrop-filter: blur(28px) saturate(130%) !important;
  transform: translateY(-8px) !important;
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.34),
    0 10px 20px -8px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
}

.header-section .mega-link a:hover,
.header-section .mega-link a:focus-visible {
  z-index: 70 !important;
  transform: translateY(-14px) !important;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.44),
    0 15px 30px -10px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 255, 255, 0.74) !important;
}