/* Dreamcore SAMPLE NAV chrome — parallel CSS (Sass pipeline has no node_modules).
   Tokens: Space Grotesk + JetBrains Mono; #0A0814 / #3B1A66 / #0FA8D2 / #F7F5FC
   Does not replace theme.css. Loaded after it. */

:root {
  --dc-ink: #0A0814;
  --dc-purple: #3B1A66;
  --dc-cyan: #0FA8D2;
  --dc-mist: #F7F5FC;
  --dc-violet: #6B3FCC;
  --dc-font: "Space Grotesk", system-ui, sans-serif !important;
  --dc-mono: "JetBrains Mono", ui-monospace, monospace !important;
  --dc-line: rgba(10, 8, 20, 0.1);
  --dc-line-soft: rgba(10, 8, 20, 0.08);
}

@keyframes dc-navFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  font-family: var(--dc-font);
  color: var(--dc-ink);
  transition: transform 0.1s ease;
}

.site-header.dc-mega-is-open,
.site-header.dc-mega-is-open.site-header--sticky {
  transform: translateY(0) !important;
}

@media (min-width: 992px) {
  .site-header.site-header--sticky:not(.site-header--visible):not(.dc-mega-is-open) {
    transform: translateY(-100%);
  }
}

/* 72px white bar, 1px border */
.dc-navbar,
.c-navbar.dc-navbar {
  background: #fff;
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-font);
  position: relative;
}

.dc-navbar__container,
.dc-navbar .c-navbar__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.dc-navbar__bar,
.dc-navbar .c-navbar__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
  min-width: 0;
  width: 100%;
  flex-wrap: nowrap;
}

.dc-navbar__logo,
.dc-navbar .c-navbar__logo {
  flex-shrink: 0;
}

.dc-navbar__logo .custom-logo-link,
.dc-navbar .c-navbar__logo .custom-logo-link {
  margin: 0;
  display: flex;
  align-items: center;
}

.dc-navbar__logo img,
.dc-navbar .c-navbar__logo img,
.dc-navbar .custom-logo-link img {
  height: 30px !important;
  width: auto !important;
  max-width: 200px;
  display: block;
}

.dc-navbar__logo .navbar-brand {
  font-family: var(--dc-font);
  font-weight: 600;
  font-size: 18px;
  color: var(--dc-ink);
  text-decoration: none;
  margin: 0;
}

/* Middle WP menu */
.dc-navbar__nav,
.dc-navbar .navbar-nav.dc-navbar__nav,
.dc-navbar .c-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-navbar .dc-nav__link,
.dc-navbar .navbar-nav > .nav-item > .nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--dc-font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dc-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.2;
}

.dc-navbar .dc-nav__link:hover,
.dc-navbar .navbar-nav > .nav-item > .nav-link:hover,
.dc-navbar .dc-mega-open > .dc-nav__link,
.dc-navbar .nav-item.active > .dc-nav__link,
.dc-navbar .nav-item.current-menu-item > .dc-nav__link {
  color: var(--dc-purple);
  background: var(--dc-mist);
}

.dc-nav__chevron,
.dc-navbar__chevron {
  font-size: 10px;
  display: inline-block;
  transition: transform 0.15s;
  line-height: 1;
}

.dc-mega-open > .dc-nav__link .dc-nav__chevron,
.dc-mega-open > .dc-navbar__trigger .dc-nav__chevron {
  transform: rotate(180deg);
}

/* Right chrome */
.dc-navbar__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  min-width: 0;
}

.dc-navbar__support {
  font-size: 13px;
  font-weight: 500;
  color: var(--dc-ink);
  text-decoration: none;
  opacity: 0.72;
  white-space: nowrap;
}

.dc-navbar__support:hover {
  opacity: 1;
  color: var(--dc-purple);
}

.dc-navbar__specialist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--dc-purple);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.dc-navbar__specialist:hover {
  background: #2d1350;
  color: #fff !important;
}

.dc-navbar__cart,
.dc-navbar .c-navbar__cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--dc-ink);
  font-size: 13px;
  font-weight: 500;
}

.dc-navbar__cart img,
.dc-navbar .c-navbar__cart img {
  width: 22px !important;
  height: 22px;
}

.dc-navbar__cart-text,
.dc-navbar .c-navbar__cart-text {
  display: none;
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .dc-navbar__cart-text,
  .dc-navbar .c-navbar__cart-text {
    display: inline;
  }
}

/* Hamburger */
.dc-navbar__toggler,
.dc-navbar .c-navbar__toggler {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  order: 3;
}

.dc-navbar__toggler span,
.dc-navbar .c-navbar__toggler span {
  height: 2px;
  width: 100%;
  background: var(--dc-ink);
  display: block;
}

/* Mega panel — works with ul.dc-mega or wrapped .dc-mega__sheet */
.dc-navbar .menu-item.dropdown,
.dc-navbar .dc-nav__item--has-mega {
  position: static;
}

.dc-navbar .dropdown-menu.dc-mega,
.dc-navbar .dc-mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--dc-line);
  background: #fff;
  box-shadow: none;
  z-index: 40;
  animation: dc-navFade 0.16s ease;
}

.dc-navbar .dc-mega-open > .dc-mega {
  display: block;
}

.dc-mega__sheet {
  background: #fff;
}

.dc-mega__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 32px 44px;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 280px);
  column-gap: 40px;
  align-items: start;
}

.dc-mega__cols,
.dc-mega > .dc-mega__cols,
ul.dc-mega {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* When the mega IS the ul (no inner grid), lay out children as columns + feature */
ul.dc-mega.dropdown-menu {
  max-width: none;
}

.dc-navbar ul.dc-mega.dropdown-menu {
  padding: 40px 32px 0;
}

.dc-navbar ul.dc-mega.dropdown-menu::before {
  content: "";
  display: block;
  max-width: 1280px;
}

.dc-navbar .dc-mega-open > ul.dc-mega.dropdown-menu,
.dc-navbar .menu-item.show > ul.dc-mega.dropdown-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 280px;
  column-gap: 40px;
  max-width: none;
  margin: 0;
  padding: 40px max(32px, calc((100% - 1280px) / 2)) 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
}

.dc-mega__cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  column-gap: 40px;
}

.dc-mega__cols:not(:has(> .dc-mega__col)) {
  display: block;
  column-count: 2;
  column-gap: 40px;
}

@media (min-width: 1100px) {
  .dc-mega__cols:not(:has(> .dc-mega__col)) {
    column-count: 3;
  }
}

.dc-mega__col,
.dc-mega > li.dc-mega__col,
.dc-mega__cols > li {
  padding-right: 32px;
  border-right: 1px solid var(--dc-line-soft);
  break-inside: avoid;
  list-style: none;
}

.dc-mega__col:last-child,
.dc-mega__cols > li:last-child {
  border-right: 0;
}

.dc-mega__col-title,
.dc-mega .dc-mega__col > a.dc-mega__col-title,
.dc-mega .menu-item.dropdown > a.dc-mega__col-title {
  font-family: var(--dc-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-violet);
  font-weight: 500;
  margin-bottom: 16px;
  display: block;
  text-decoration: none;
  padding: 0;
  pointer-events: none;
}

.dc-mega__link,
.dc-mega .dropdown-item.dc-mega__link,
.dc-mega .dropdown-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--dc-ink);
  font-size: 13.5px;
  font-family: var(--dc-font);
  white-space: nowrap;
  background: transparent;
  border: 0;
}

.dc-mega__link:hover,
.dc-mega .dropdown-item.dc-mega__link:hover,
.dc-mega .dropdown-item:hover {
  background: var(--dc-mist);
  color: var(--dc-purple);
}

.dc-mega__tag {
  font-family: var(--dc-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dc-cyan);
  white-space: nowrap;
}

.dc-mega .slider-img,
.dc-mega .menu-item-description {
  display: none;
}

.dc-mega__links,
.dc-mega .dc-mega__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Featured card — WP/ACF image + description only */
.dc-mega__feature,
.dc-mega__featured {
  padding-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-column: -2;
}

.dc-mega__feature-kicker,
.dc-mega__col-title.dc-mega__feature-kicker,
.dc-mega__featured .dc-mega__col-title {
  font-family: var(--dc-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dc-violet);
  font-weight: 500;
  margin-bottom: 2px;
}

.dc-mega__feature-card,
.dc-mega__card {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--dc-line);
  text-decoration: none;
  color: var(--dc-ink);
  background: #fff;
}

.dc-mega__feature-img,
.dc-mega__card-img {
  height: 120px;
  background: var(--dc-mist);
  overflow: hidden;
}

.dc-mega__feature-img.is-empty {
  display: none;
}

.dc-mega__feature-img img,
.dc-mega__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dc-mega__feature-copy,
.dc-mega__card-body {
  padding: 14px 16px;
}

.dc-mega__feature-title,
.dc-mega__card-title {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--dc-font);
}

.dc-mega__feature-sub,
.dc-mega__card-sub {
  font-size: 12.5px;
  color: rgba(10, 8, 20, 0.55);
  margin-top: 2px;
}

.dc-mega__feature-cta,
.dc-mega__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 6px;
  border: 1.5px solid var(--dc-purple);
  color: var(--dc-purple);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  background: #fff;
  font-family: var(--dc-font);
}

.dc-mega__feature-cta:hover,
.dc-mega__cta:hover {
  background: var(--dc-mist);
  color: var(--dc-purple);
}

/* Quick actions */
.dc-mega__quick {
  flex: 1 1 100%;
  grid-column: 1 / -1;
  border-top: 1px solid var(--dc-line-soft);
  background: var(--dc-mist);
  margin: 0 -32px;
  width: calc(100% + 64px);
}

.dc-mega__quick-inner,
.dc-mega__quick {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.dc-mega__quick-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 32px;
  width: 100%;
}

ul.dc-mega > .dc-mega__quick {
  margin: 24px -32px 0;
  padding: 14px 32px;
  width: calc(100% + 64px);
}

.dc-mega__quick-kicker,
.dc-mega__quick-label {
  font-family: var(--dc-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 8, 20, 0.45);
}

.dc-mega__quick a {
  font-size: 13px;
  font-weight: 600;
  color: var(--dc-purple);
  text-decoration: none;
  font-family: var(--dc-font);
}

.dc-mega__quick a:hover {
  color: var(--dc-cyan);
}

/* Collapse / mobile */
@media (max-width: 991.98px) {
  .dc-navbar__toggler,
  .dc-navbar .c-navbar__toggler {
    display: flex;
  }

  .dc-navbar__support {
    display: none;
  }

  .dc-navbar__specialist {
    padding: 8px 12px;
    font-size: 12px;
  }

  .dc-navbar .dc-navbar__collapse,
  .dc-navbar .c-navbar__collapse {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--dc-line);
    padding: 12px 20px 24px;
    z-index: 30;
  }

  .dc-navbar .dc-navbar__collapse.collapse:not(.show) {
    display: none;
  }

  .dc-navbar .navbar-nav.dc-navbar__nav,
  .dc-navbar .c-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .dc-navbar .dropdown-menu.dc-mega,
  .dc-navbar .dc-mega {
    position: static;
    transform: none;
    width: 100%;
    left: auto;
    border-top: 0;
    box-shadow: none;
    padding: 8px 0 16px;
  }

  .dc-navbar .dc-mega-open > ul.dc-mega.dropdown-menu,
  .dc-navbar .menu-item.show > ul.dc-mega.dropdown-menu {
    display: block;
    transform: none;
    width: 100%;
    left: auto;
    padding: 8px 0 16px;
  }

  .dc-mega__grid {
    display: block;
    padding: 12px 0;
  }

  .dc-mega__col,
  .dc-mega > li.dc-mega__col {
    border-right: 0;
    padding-right: 0;
    margin-bottom: 16px;
  }

  .dc-mega__quick {
    margin: 12px 0 0;
    width: 100%;
  }
}


/* Aliases: PHP uses c-navbar__* ; chrome CSS uses dc-navbar__* */
.c-navbar.dc-navbar .c-navbar__bar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; width: 100%; }
.c-navbar.dc-navbar .c-navbar__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.c-navbar.dc-navbar .c-navbar__support { font-size: 13px; font-weight: 500; color: #0A0814; text-decoration: none; opacity: .72; white-space: nowrap; }
.c-navbar.dc-navbar .c-navbar__support:hover { opacity: 1; color: #3B1A66; }
.c-navbar.dc-navbar .c-navbar__cta { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 6px; background: #3B1A66; color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.c-navbar.dc-navbar .c-navbar__cta:hover { background: #2d1350; color: #fff !important; }

/* Aliases if markup uses dc-nav__* alongside dc-navbar__* */
.dc-nav { background: #fff; border-bottom: 1px solid var(--dc-line); font-family: var(--dc-font); position: relative; }
.dc-nav__bar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 0 20px; width: 100%; }
.dc-nav__logo img { height: 30px !important; width: auto !important; }
.dc-nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.dc-nav__actions { display: flex; align-items: center; gap: 14px; }
.dc-nav__support { font-size: 13px; font-weight: 500; color: var(--dc-ink); text-decoration: none; opacity: .72; }
.dc-nav__cta { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 6px; background: var(--dc-purple); color: #fff !important; font-size: 13px; font-weight: 600; text-decoration: none; }
.dc-nav__cart { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--dc-ink); }


/* If Max Mega Menu still outputs on primary, paint SAMPLE chrome (dev fallback). */
#mega-menu-wrap-primary,
#mega-menu-wrap-primary #mega-menu-primary {
  font-family: var(--dc-font);
  background: #fff;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--dc-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--dc-ink) !important;
  background: none !important;
  padding: 9px 12px !important;
  border-radius: 8px;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
  color: var(--dc-purple) !important;
  background: var(--dc-mist) !important;
}
#mega-menu-wrap-primary .mega-sub-menu {
  background: #fff !important;
  border-top: 1px solid var(--dc-line);
  box-shadow: none !important;
}
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link {
  font-family: var(--dc-font) !important;
  font-size: 13.5px !important;
  color: var(--dc-ink) !important;
  border-radius: 8px;
}
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link:hover {
  background: var(--dc-mist) !important;
  color: var(--dc-purple) !important;
}

/* Beat leftover mega-menu.min.css / theme.min.css header chrome. */
html body .site-header,
html body header#wrapper-header.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: #fff !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  color: #0A0814 !important;
}
html body .dc-navbar,
html body .c-navbar.dc-navbar,
html body nav#main-nav.dc-navbar,
html body nav#main-nav.c-navbar {
  background: #fff !important;
  border-bottom: 1px solid rgba(10, 8, 20, 0.10) !important;
  min-height: 72px !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
}
html body .dc-navbar__bar,
html body .c-navbar__bar,
html body .dc-nav__bar,
html body .c-navbar.dc-navbar .c-navbar__wrapper,
html body .c-navbar.dc-navbar .c-navbar__bar {
  height: 72px !important;
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
}
html body .dc-navbar__specialist,
html body .c-navbar__cta,
html body .dc-nav__cta {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  background: #3B1A66 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
html body .dc-navbar__support,
html body .c-navbar__support,
html body .dc-nav__support {
  display: inline-flex !important;
  visibility: visible !important;
  color: #0A0814 !important;
  opacity: 0.72 !important;
}
html body .dc-navbar .dc-nav__link,
html body .dc-navbar .navbar-nav > .nav-item > .nav-link {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #0A0814 !important;
}
#mega-menu-wrap-primary,
#mega-menu-wrap-header,
#mega-menu-wrap-header_mobile,
#mega-menu-wrap {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* 20260819f — Space Grotesk wins the header even vs Custom CSS Inter */
html, body, .site,
.site-header,
.site-header *,
.dc-navbar,
.dc-navbar *,
.c-navbar,
.c-navbar *,
#wrapper-header,
#wrapper-header a,
#wrapper-header button {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
}
.dc-navbar .dc-nav__link,
.dc-navbar .navbar-nav > .nav-item > .nav-link,
.dc-navbar__support,
.dc-navbar__specialist,
.dc-navbar__cart,
.dc-navbar__cart-text {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  color: #0A0814 !important;
}
.dc-navbar__specialist,
.dc-navbar__specialist:hover {
  color: #fff !important;
}
.dc-mega__kicker,
.dc-mega__feature-kicker,
.dc-mega [class*="kicker"] {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  color: #6B3FCC !important;
}
.dc-mega__tag,
.dc-mega [class*="tag"] {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  color: #0FA8D2 !important;
}

/* 20260820 — HTML hover mega grid. Beat auto-fit row + leftover BS flex.
   Only the OPEN parent may paint a sheet — never .show alone (that stacked Service). */
@media (min-width: 992px) {
  html body .dc-navbar .dc-mega-open > ul.dc-mega.dropdown-menu,
  html body .dc-navbar .dc-mega-open > ul.dropdown-menu.dc-mega,
  html body .dc-navbar .dc-mega-open > ul.dc-mega {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 280px !important;
    align-items: start !important;
    justify-content: stretch !important;
    column-gap: 40px !important;
    row-gap: 0 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    animation: dc-navFade 0.16s ease forwards !important;
    flex-direction: unset !important;
    padding: 40px max(32px, calc((100% - 1280px) / 2)) 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid rgba(10, 8, 20, 0.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  html body .dc-navbar ul.dc-mega.dc-mega--cols-3,
  html body .dc-navbar .dc-mega-open > ul.dc-mega.dc-mega--cols-3,
  html body .dc-navbar ul.dc-mega:has(> .dc-mega__col + .dc-mega__col + .dc-mega__col) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 280px !important;
  }
  html body .dc-navbar ul.dc-mega.dc-mega--cols-1,
  html body .dc-navbar .dc-mega-open > ul.dc-mega.dc-mega--cols-1 {
    grid-template-columns: minmax(0, 1fr) 280px !important;
  }
  html body .dc-navbar ul.dc-mega > li.dc-mega__col,
  html body .dc-navbar ul.dc-mega > li.dc-mega__feature {
    padding-bottom: 44px !important;
  }
  html body .dc-navbar ul.dc-mega > li {
    display: block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
    position: static !important;
  }
  html body .dc-navbar ul.dc-mega > li.dc-mega__col {
    padding-right: 32px !important;
    border-right: 1px solid rgba(10, 8, 20, 0.08) !important;
    list-style: none !important;
  }
  html body .dc-navbar ul.dc-mega > li.dc-mega__col > .dc-mega__col-title,
  html body .dc-navbar .dc-mega__col-title {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #6B3FCC !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
    display: block !important;
    pointer-events: none !important;
    padding: 0 !important;
    text-decoration: none !important;
  }
  html body .dc-navbar ul.dc-mega > li.dc-mega__col > ul,
  html body .dc-navbar ul.dc-mega .dc-mega__links,
  html body .dc-navbar ul.dc-mega ul.dc-mega__links {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    list-style: none !important;
  }
  html body .dc-navbar ul.dc-mega > li.dc-mega__feature {
    padding-left: 8px !important;
    border-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  html body .dc-navbar ul.dc-mega > li.dc-mega__quick {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    margin-left: calc(-1 * max(32px, calc((100% - 1280px) / 2))) !important;
    margin-right: calc(-1 * max(32px, calc((100% - 1280px) / 2))) !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(10, 8, 20, 0.08) !important;
    background: #F7F5FC !important;
  }
  html body .dc-navbar .dc-mega__quick-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 14px 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
  }
}



/* 20260820b — no right-slide. navFade = opacity + slight translateY only.
   Redefine leftover dcNavFade from _navbar.scss / theme.css. */
@keyframes dc-navFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dcNavFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
html body .dc-navbar .dropdown-menu.dc-mega,
html body .dc-navbar .dc-mega,
html body .dc-nav .dropdown-menu.dc-mega,
html body .dc-nav .dc-mega,
html body .c-navbar .dropdown-menu.dc-mega {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  animation-name: dc-navFade !important;
  animation-duration: 0.16s !important;
  animation-timing-function: ease !important;
  animation-fill-mode: forwards !important;
}


/* 20260820c — Featured is a RIGHT column on .dc-mega__grid (columns + feature).
   Do not stack Featured under the links. Keep the panel short.
   ul.dc-mega is a sheet, not a wrapping grid of every <li>. */
@media (min-width: 992px) {
  html body .dc-navbar .dc-mega-open > ul.dc-mega.dropdown-menu,
  html body .dc-navbar .menu-item.dc-mega-open > ul.dc-mega.dropdown-menu,
  html body .dc-navbar .menu-item.show.dc-mega-open > ul.dc-mega.dropdown-menu,
  html body .dc-navbar .dc-mega-open > ul.dropdown-menu.dc-mega,
  html body .dc-navbar .dc-mega-open > ul.dc-mega {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid rgba(10, 8, 20, 0.10) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 100% !important;
  }
  html body .dc-navbar ul.dc-mega > li.dc-mega__sheet {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  html body .dc-navbar .dc-mega__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
    grid-template-rows: auto !important;
    column-gap: 40px !important;
    row-gap: 0 !important;
    align-items: start !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 32px 32px 28px !important;
    box-sizing: border-box !important;
  }
  html body .dc-navbar .dc-mega__cols,
  html body .dc-navbar ul.dc-mega__cols {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-template-columns: none !important;
    column-gap: 40px !important;
    row-gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
    position: static !important;
  }
  html body .dc-navbar .dc-mega__cols:not(:has(> .dc-mega__col)) {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-columns: unset !important;
    column-gap: 40px !important;
  }
  html body .dc-navbar .dc-mega__col,
  html body .dc-navbar ul.dc-mega__cols > li.dc-mega__col {
    display: block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding-right: 32px !important;
    padding-bottom: 0 !important;
    border-right: 1px solid rgba(10, 8, 20, 0.08) !important;
    list-style: none !important;
    position: static !important;
  }
  html body .dc-navbar .dc-mega__col:last-child,
  html body .dc-navbar ul.dc-mega__cols > li.dc-mega__col:last-child {
    border-right: 0 !important;
    padding-right: 0 !important;
  }
  html body .dc-navbar .dc-mega__feature,
  html body .dc-navbar ul.dc-mega > li.dc-mega__feature,
  html body .dc-navbar .dc-mega__grid > .dc-mega__feature {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 0 0 8px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 280px !important;
    float: none !important;
    border: 0 !important;
  }
  html body .dc-navbar .dc-mega__quick,
  html body .dc-navbar ul.dc-mega > li.dc-mega__quick {
    grid-column: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(10, 8, 20, 0.08) !important;
    background: #F7F5FC !important;
    float: none !important;
  }
  html body .dc-navbar .dc-mega__quick-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 14px 32px !important;
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    flex-wrap: wrap !important;
  }

  /* Switching Gaming <-> AI must not replay navFade (that is the blink). */
  html body .dc-navbar .dc-mega.dc-mega--instant,
  html body .dc-navbar .dc-mega-open > .dc-mega.dc-mega--instant,
  html body .dc-navbar ul.dc-mega.dc-mega--instant.show {
    animation: none !important;
  }
}

@media (max-width: 991.98px) {
  html body .dc-navbar .dc-mega__grid {
    display: block !important;
    padding: 12px 0 !important;
  }
  html body .dc-navbar .dc-mega__cols,
  html body .dc-navbar ul.dc-mega__cols {
    display: block !important;
  }
  html body .dc-navbar .dc-mega__feature {
    max-width: none !important;
    padding: 12px 0 0 !important;
  }
}

/* 20260820w — ONE sheet only. Inactive panels are display:none + z-index 0.
   Bootstrap .dropdown-menu is z-index:1000; a leftover display:block on Service
   sat on top of Gaming/AI. .show / .menu-item.show must NOT keep a sibling open. */
@media (min-width: 992px) {
  html body .dc-navbar ul.dc-mega,
  html body .dc-navbar ul.dc-mega.dropdown-menu,
  html body .dc-navbar ul.dropdown-menu.dc-mega,
  html body .dc-navbar ul.dropdown-menu.dc-mega.show,
  html body .dc-navbar .dropdown-menu.dc-mega,
  html body .dc-navbar .dropdown-menu.dc-mega.show,
  html body .dc-navbar .dc-mega,
  html body .dc-navbar .dc-mega.show,
  html body .dc-navbar .menu-item.show > ul.dc-mega,
  html body .dc-navbar .menu-item.show > .dropdown-menu.dc-mega,
  html body .dc-navbar li:not(.dc-mega-open) > ul.dc-mega,
  html body .dc-navbar li:not(.dc-mega-open) > .dropdown-menu.dc-mega,
  html body .dc-navbar li:not(.dc-mega-open) > .dc-mega,
  html body .dc-nav .dc-mega,
  html body .dc-nav .dropdown-menu.dc-mega,
  html body .c-navbar .dropdown-menu.dc-mega,
  html body .c-navbar .dc-mega {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  html body .dc-navbar .dc-nav__item--has-mega.dc-mega-open > ul.dc-mega,
  html body .dc-navbar .dc-nav__item--has-mega.dc-mega-open > .dc-mega,
  html body .dc-navbar .menu-item.dc-mega-open > ul.dc-mega,
  html body .dc-navbar .menu-item.dc-mega-open > .dropdown-menu.dc-mega,
  html body .dc-navbar li.dc-mega-open > ul.dropdown-menu.dc-mega,
  html body .dc-navbar li.dc-mega-open > ul.dc-mega,
  html body .dc-navbar .dc-mega-open > .dc-mega {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 50 !important;
  }
}


/* 20260901go — phone hamburger: hide Support+CTA in the 390 bar so toggler is tappable */
@media (max-width: 991.98px) {
  html body .dc-navbar__support,
  html body .c-navbar__support,
  html body .dc-nav__support {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body .dc-navbar__specialist,
  html body .c-navbar__cta,
  html body .dc-nav__cta {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body .dc-navbar__bar,
  html body .c-navbar__bar,
  html body .dc-nav__bar,
  html body .c-navbar.dc-navbar .c-navbar__wrapper {
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  html body .dc-navbar__toggler,
  html body .dc-navbar .c-navbar__toggler,
  html body .c-navbar__toggler.dc-navbar__toggler {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 14px 10px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    z-index: 40 !important;
    position: relative !important;
  }
  html body .dc-navbar__toggler span,
  html body .dc-navbar .c-navbar__toggler span,
  html body .c-navbar__toggler span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: #0A0814 !important;
    margin: 0 auto !important;
  }
}

/* 20260901go item 3 — logo 1.5x DESKTOP >=992 only. Phone stays 30px. */
@media (min-width: 992px) {
  html body .dc-navbar__logo img,
  html body .dc-navbar .c-navbar__logo img,
  html body .dc-navbar .custom-logo-link img,
  html body .dc-nav__logo img {
    height: 45px !important;
    max-width: 300px !important;
    width: auto !important;
  }
}

/* 20260901k — cols-1: links hug Featured on the RIGHT
   Same 1fr | 280px shell as Gaming/AI so Featured stays on the fixed
   right track. Only change: park the lone link column at the END of
   the left track (justify-self:end) so there is no canyon — short
   mouse path from Service & Info. */
@media (min-width: 992px) {
  html body .dc-navbar .dc-mega--cols-1 .dc-mega__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
    grid-template-rows: auto !important;
    column-gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 32px 32px 28px !important;
    box-sizing: border-box !important;
  }
  html body .dc-navbar .dc-mega--cols-1 .dc-mega__cols,
  html body .dc-navbar .dc-mega--cols-1 ul.dc-mega__cols {
    justify-self: end !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
  }
  html body .dc-navbar .dc-mega--cols-1 .dc-mega__col,
  html body .dc-navbar .dc-mega--cols-1 ul.dc-mega__cols > li.dc-mega__col {
    width: max-content !important;
    min-width: 200px !important;
    max-width: 320px !important;
  }
  html body .dc-navbar .dc-mega--cols-1 .dc-mega__feature,
  html body .dc-navbar .dc-mega--cols-1 .dc-mega__grid > .dc-mega__feature {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    max-width: 280px !important;
  }
}

/* 20260901l — mobile hamburger only: hide Featured across ALL megas
   (Gaming / AI & HPC / Service & Info / any other). Desktop ≥992 unchanged. */
@media (max-width: 991.98px) {
  html body .dc-navbar .dc-mega__feature,
  html body .dc-navbar .dc-mega__featured,
  html body .dc-navbar .dc-mega__grid > .dc-mega__feature,
  html body .dc-navbar ul.dc-mega > li.dc-mega__feature,
  html body .dc-navbar .dc-mega > li.dc-mega__feature,
  html body .c-navbar .dc-mega__feature,
  html body .c-navbar .dc-mega__featured {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
}

/* 20260901m — mobile hamburger polish (≤991 only)
   1) panel scrolls (not the page behind)
   2) indent mega sub-links under category titles
   3) cart hugs hamburger (not mid-bar)
   4) thin dividers between top segments; chevrons right-aligned
   5) soft shadow + thin bottom line so open panel clearly ends
*/
@media (max-width: 991.98px) {
  /* --- 3) cart next to burger --- */
  html body .dc-navbar__bar,
  html body .c-navbar__bar,
  html body .dc-nav__bar,
  html body .c-navbar.dc-navbar .c-navbar__bar {
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  html body .dc-navbar__actions,
  html body .c-navbar__actions,
  html body .dc-nav__actions {
    margin-left: auto !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  html body .dc-navbar__cart,
  html body .c-navbar__cart,
  html body .dc-nav__cart {
    margin: 0 !important;
    padding: 8px !important;
  }
  html body .dc-navbar__cart-text,
  html body .c-navbar__cart-text {
    display: none !important;
  }
  html body .dc-navbar__toggler,
  html body .c-navbar__toggler {
    order: 3 !important;
    margin-left: 0 !important;
  }

  /* --- 1 + 5) scrollable sheet + clear ending --- */
  html body .dc-navbar .dc-navbar__collapse.show,
  html body .dc-navbar .c-navbar__collapse.show,
  html body .c-navbar .c-navbar__collapse.show,
  html body #navbarNavDropdown.show {
    display: block !important;
    max-height: calc(100dvh - 72px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: #fff !important;
    box-shadow: 0 14px 32px rgba(10, 8, 20, 0.14) !important;
    border-bottom: 1px solid rgba(10, 8, 20, 0.12) !important;
    z-index: 40 !important;
  }

  /* Lock page scroll while hamburger open */
  html body:has(#navbarNavDropdown.show),
  html body:has(.dc-navbar__collapse.show),
  html body:has(.c-navbar__collapse.show) {
    overflow: hidden !important;
    touch-action: none !important;
  }
  html body:has(#navbarNavDropdown.show) .site-content,
  html body:has(.dc-navbar__collapse.show) .site-content {
    pointer-events: none !important;
  }

  /* --- 4) segment dividers + chevrons right --- */
  html body .dc-navbar .navbar-nav.dc-navbar__nav > .nav-item,
  html body .dc-navbar .navbar-nav.dc-navbar__nav > .menu-item,
  html body .dc-navbar .c-nav > .nav-item,
  html body .dc-navbar .c-nav > .menu-item {
    border-bottom: 1px solid rgba(10, 8, 20, 0.10) !important;
  }
  html body .dc-navbar .navbar-nav.dc-navbar__nav > .nav-item:last-child,
  html body .dc-navbar .navbar-nav.dc-navbar__nav > .menu-item:last-child,
  html body .dc-navbar .c-nav > .nav-item:last-child,
  html body .dc-navbar .c-nav > .menu-item:last-child {
    border-bottom: 0 !important;
  }
  html body .dc-navbar .dc-nav__link,
  html body .dc-navbar .navbar-nav > .nav-item > .nav-link,
  html body .dc-navbar .navbar-nav > .menu-item > .nav-link,
  html body .dc-navbar .c-nav > .nav-item > .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }
  html body .dc-navbar .dc-nav__chevron,
  html body .dc-navbar .dc-navbar__chevron {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* --- 2) indent mega sub-links under category titles --- */
  html body .dc-navbar .dc-mega__col-title,
  html body .dc-navbar .dc-mega .dc-mega__col > a.dc-mega__col-title,
  html body .dc-navbar .dc-mega .menu-item.dropdown > a.dc-mega__col-title {
    padding-left: 0 !important;
  }
  html body .dc-navbar .dc-mega__link,
  html body .dc-navbar .dc-mega .dropdown-item.dc-mega__link,
  html body .dc-navbar .dc-mega .dropdown-item,
  html body .dc-navbar .dc-mega__links > li > a,
  html body .dc-navbar .dc-mega__sublist > li > a {
    padding-left: 16px !important;
  }

  /* Mega section rhythm when drilled open */
  html body .dc-navbar .dc-mega__col,
  html body .dc-navbar .dc-mega > li.dc-mega__col {
    border-bottom: 1px solid rgba(10, 8, 20, 0.08) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }
  html body .dc-navbar .dc-mega__col:last-child,
  html body .dc-navbar .dc-mega > li.dc-mega__col:last-child {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* 20260901n — mobile: kill sticky :hover on Monitors/Contact taps.
   Hover mist only when the device can truly hover. Current-page
   (current-menu-item / .active) still gets the mist pill. */
@media (max-width: 991.98px) {
  html body .dc-navbar .dc-nav__link:hover,
  html body .dc-navbar .navbar-nav > .nav-item > .nav-link:hover,
  html body .dc-navbar .navbar-nav > .menu-item > .nav-link:hover,
  html body .dc-navbar .c-nav > .nav-item > .nav-link:hover {
    background: transparent !important;
    color: #0A0814 !important;
  }
  html body .dc-navbar .nav-item.current-menu-item > .dc-nav__link,
  html body .dc-navbar .menu-item.current-menu-item > .dc-nav__link,
  html body .dc-navbar .nav-item.current-menu-ancestor > .dc-nav__link,
  html body .dc-navbar .menu-item.current-menu-ancestor > .dc-nav__link,
  html body .dc-navbar .nav-item.active > .dc-nav__link,
  html body .dc-navbar .dc-mega-open > .dc-nav__link {
    background: var(--dc-mist, #F3EEF9) !important;
    color: var(--dc-purple, #3B1A66) !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  html body .dc-navbar .dc-nav__link:hover,
  html body .dc-navbar .navbar-nav > .nav-item > .nav-link:hover {
    color: var(--dc-purple, #3B1A66);
    background: var(--dc-mist, #F3EEF9);
  }
}