/* ============================================================
   SURFYTECH ELECTRONICS — MODERN HEADER / MEGA MENU
   Ported from the corporate header design so the electronics
   site shares the same spotlight mega-menu experience.
   Load AFTER css/style.css.
   ============================================================ */

/* Brand design tokens (mirrors the corporate :root palette). */
:root {
  --brand-blue: #0057D9;
  --brand-sky: #00ADEE;
  --brand-cyan: #61E7C2;
  --brand-green: #6EE787;
  --brand-purple: #BA2BE2;
  --brand-ink: #231F20;
  --brand-grey: #555B71;
  --brand-gradient: linear-gradient(135deg, #0057D9 0%, #00ADEE 38%, #61E7C2 72%, #6EE787 100%);
  --brand-gradient-purple: linear-gradient(135deg, #0057D9 0%, #BA2BE2 55%, #00ADEE 100%);
  /* Motion tokens. These mirror the corporate :root block (css/style.css
     lines 33-35). They were missing here, so every `var(--transition-*)` in
     this file resolved to nothing — a custom property used without a fallback
     is invalid at computed-value time, which silently drops the whole
     `transition` declaration. That is what left the menu hover underline
     rendering as a gradient bar with no grow/shrink animation. */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}


/* ------------------------------------------------------------
   Brand header shell, logo, nav column and header CTA
   (source: corporate style.css lines 11797-12000)
   ------------------------------------------------------------ */
/* ============================================================
   SURFYTECH BRAND OVERRIDES — logo-matched header/nav + hero
   Palette: #0057D9 blue, #00ADEE sky, #61E7C2 teal,
   #6EE787 green, #BA2BE2 purple, ink #231F20, grey #555B71
   ============================================================ */

/* ---------- Header shell: glassy white, brand border ----------
   Base state overlays the hero (corporate pattern: absolute), the
   `.fixed` state pins to the viewport top (corporate pattern: fixed).
   NOTE: `position: sticky` was tried here before and the bar scrolled
   away — `html { overflow-x: hidden }` in css/style.css breaks sticky
   in Chrome/Safari, so fixed-on-scroll is the reliable contract. */
.menu-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #E6ECF7;
  padding: 12px 0 !important;
  z-index: 1000;
  overflow: visible;
  display: block;
}
.menu-wrap::before, .menu-wrap::after { content: ""; display: table; }
/* Two bars exist in the markup: the DESKTOP bar (.menu-wrap) and the PHONE bar
   (.menu-wrap.mobile). Each one is only allowed to render in its own range, so
   the desktop navigation can never be pushed below the mobile bar (and the
   mobile bar never shows above the tablet breakpoint). */
@media (min-width: 768px) {
  .menu-wrap:not(.mobile) { display: flow-root !important; }
  .menu-wrap.mobile { display: none !important; }
}
@media (max-width: 767px) {
  .menu-wrap:not(.mobile) { display: none !important; }
}
/* Standard navigation height (desktop): fixed 76px shell in BOTH normal and
   fixed states so the bar never jumps when scrolling.
   Logo fills the bar with 5px top/bottom breathing room: 76 - 2x5 = 66px. */
.menu-wrap:not(.mobile) { height: 76px !important; padding: 5px 0 !important; }
.menu-wrap:not(.mobile).fixed,
.menu-wrap.fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 8px 28px rgba(0, 87, 217, 0.12) !important;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #0057D9, #00ADEE, #61E7C2, #6EE787) 1;
  height: 76px !important;
  padding: 5px 0 !important;
  animation: none !important;
  opacity: 1 !important;
}
.menu-wrap:not(.mobile) .header-nav-col { overflow: visible !important; }
.menu-wrap:not(.mobile) .container > .row { overflow: visible !important; }
.menu-wrap:not(.mobile) .navigation { overflow: visible !important; }

/* Logo sizing — SVG stays crisp at all sizes: sized by HEIGHT (66px) with
   width:auto so aspect is never squashed and text stays sharp at full
   bar height. 76px bar - 2x5px padding = 66px content box. */
.menu-wrap:not(.mobile) .header-logo-col { display: flex; align-items: center; overflow: visible !important; flex: 0 0 auto; width: auto; max-width: 220px; height: 66px !important; }
.menu-wrap:not(.mobile) .header-logo-col a { display: flex; align-items: center; line-height: 0; overflow: visible !important; flex: 0 0 auto; max-width: 220px; height: 66px !important; }
.menu-wrap:not(.mobile) .header-logo-col img.newlogo { overflow: visible !important; }
/* Right-side nav cluster: logo left, menu + Contact button together on the right.
   Desktop uses the ORIGINAL float model (float:right wrapper + floated <li>s):
   the mega-menu .sub-menu is absolutely positioned relative to .navigation, so
   turning .navigation into flex would break dropdown anchoring and can trigger
   the vertical-stack fallback. Keep floats here; flex only inside the CTA. */
.menu-wrap:not(.mobile) .header-logo-col { justify-content: flex-start; }
.menu-wrap:not(.mobile) .header-nav-col {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.menu-wrap:not(.mobile) .header-nav-col .navigation {
  position: relative;
  float: none !important;
  width: auto !important;
  max-width: 100%;
  padding-top: 0 !important;
  /* Kill the legacy electronics offset (.nav-menu .navigation { margin-left:150px })
     that shoved the whole nav outside the bar. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}
/* Legacy grid/padding from the old electronics stylesheet squashes .nav-menu
   into a narrow column; reset it so the horizontal menu fits the bar. */
.menu-wrap:not(.mobile) .nav-menu {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100%;
}
/* Keep the header row on ONE line (Bootstrap .row wraps by default, which
   drops the whole nav below the logo and outside the 76px bar). */
@media (min-width: 768px) {
  .menu-wrap:not(.mobile) .container > .row { flex-wrap: nowrap !important; }
}
@media (min-width: 992px) {
  .menu-wrap:not(.mobile) .header-nav-col {
    flex: 1 1 0% !important;
    max-width: 100% !important;
    width: auto !important;
  }
}
.menu-wrap:not(.mobile) .header-nav-col .navigation::after { content: ''; display: table; clear: both; }
.menu-wrap:not(.mobile) .header-nav-col .navigation > ul.main-menu.desktop-menu,
.menu-wrap:not(.mobile) .header-nav-col .navigation > ul.main-menu {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  list-style: none !important;
}
.menu-wrap:not(.mobile) .header-nav-col .navigation > ul.main-menu > li.menu-item,
.menu-wrap:not(.mobile) .header-nav-col .main-menu > .menu-item {
  float: none !important;
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  width: auto !important;
}
.menu-wrap:not(.mobile) .header-nav-col .main-menu > .menu-item > a { line-height: 1.25; }
/* Contact item rides inside the menu list so it can never wrap/hide behind it */
.menu-wrap:not(.mobile) .main-menu > .menu-item-cta { display: flex !important; align-items: center; margin-left: 16px !important; }
/* Header Contact CTA — opens existing #mailModal form.
   Lives INSIDE ul.main-menu as li.menu-item-cta, so it follows the nav flow. */
.menu-wrap:not(.mobile) .main-menu > .menu-item-cta > .header-contact-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--brand-gradient) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.2px;
  padding: 12px 28px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 10px 26px rgba(0, 87, 217, 0.35);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal) !important;
}
.menu-wrap:not(.mobile) .main-menu > .menu-item-cta > .header-contact-btn::before { display: none !important; }
.menu-wrap:not(.mobile) .main-menu > .menu-item-cta > .header-contact-btn:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 87, 217, 0.45);
  text-decoration: none !important;
}
/* Mobile header pill (separate .navigation wrapper beside hamburger) */
.menu-wrap.mobile .navigation > .header-contact-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: var(--brand-gradient) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: none !important;
}
.newlogo {
  width: auto !important;
  max-width: none !important;
  height: 66px !important;
  max-height: 66px !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0;
  vertical-align: middle;
}
/* Keep the scroll-triggered legacy logo class inside the desktop header too. */
.newlogo.logosize {
  width: auto !important;
  max-width: none !important;
  height: 66px !important;
  max-height: 66px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
/* kill legacy negative-margin logo hack from base stylesheet */
.nav-menu .newlogo, .menu-wrap .newlogo, img.newlogo { margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }

/* ---------- Modern dropdown chevron (desktop + mobile) ---------- */
/* Inline SVG chevron next to every parent menu label. currentColor keeps it
   in sync with the link, including the brand-blue hover state. */
.nav-menu a .dropdown-icon,
.mobile-nav .menu a .dropdown-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 7px;
  flex: 0 0 auto;
  vertical-align: -1px;
  color: inherit;
  opacity: 0.72;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  pointer-events: none;
}
/* Desktop parent links become flex rows so the label + chevron stay aligned
   without disturbing the absolutely-positioned gradient underline (::before)
   or the leading Font Awesome ::before category icon. */
.menu-wrap:not(.mobile) .main-menu > .menu-item > a.v-stroke.has-dropdown-icon {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
}
/* i18n replaces only the label span, so the SVG icon is never removed. */
.menu-wrap:not(.mobile) .main-menu > .menu-item > a.v-stroke.has-dropdown-icon > span {
  display: inline-block;
}
/* Chevron points up while its mega-menu is open (hover / focus-within). */
.menu-wrap:not(.mobile) .main-menu > .menu-item:hover > a .dropdown-icon,
.menu-wrap:not(.mobile) .main-menu > .menu-item:focus-within > a .dropdown-icon,
.menu-wrap:not(.mobile) .main-menu > .menu-item > a[aria-expanded="true"] .dropdown-icon {
  transform: rotate(180deg);
  opacity: 1;
}
/* Mobile accordion: chevron sits at the row edge and rotates when open. */
.menu-wrap.mobile .mobile-nav .menu > li > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.menu-wrap.mobile .mobile-nav .menu > li > a .dropdown-icon {
  margin-left: auto;
  opacity: 0.65;
}
.menu-wrap.mobile .mobile-nav .menu > li.open > a .dropdown-icon,
.menu-wrap.mobile .mobile-nav .menu > li > a.active .dropdown-icon,
.menu-wrap.mobile .mobile-nav .menu > li > a[aria-expanded="true"] .dropdown-icon {
  transform: rotate(180deg);
  opacity: 1;
}
/* Never show a dropdown chevron on nested submenu links (mobile only —
   desktop top-level icons live inside .sub-menu parents by design). */
.mobile-nav .submenu a .dropdown-icon {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu a .dropdown-icon,
  .mobile-nav .menu a .dropdown-icon {
    transition: none;
  }
}
/* ---------- Desktop nav links (.v-stroke) ---------- */
.nav-menu .main-menu a {
  color: var(--brand-ink) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.1px;
}
.nav-menu .main-menu > .menu-item > a.v-stroke { padding: 14px 24px 14px 0 !important; line-height: 1.25; display: block; }

/* ============================================================
   DESKTOP HOVER / MEGA-MENU BEHAVIOUR (port from corporate style.css)
   The electronics stylesheet (css/style.css) ships with the legacy
   mega-menu rules below, so this block re-states the hover states
   explicitly to win the cascade for the modern design.
   ============================================================ */

/* Top-level nav links — brand-blue on hover/active (corporate: lines 12001-12003) */
.nav-menu .main-menu > .menu-item > a.v-stroke:hover,
.nav-menu .main-menu > .menu-item.active > a.v-stroke,
.nav-menu .main-menu > .menu-item:hover > a.v-stroke {
  color: var(--brand-blue) !important;
}
/* Gradient underline bar (corporate: lines 12005-12014) */
.nav-menu .main-menu a.v-stroke::before,
.nav-menu .main-menu a.h-stroke::before {
  background: var(--brand-gradient) !important;
  width: 0% !important; height: 3px !important;
  top: auto !important; bottom: 8px !important; left: 0 !important;
  border-radius: 99px; content: '' !important; position: absolute;
  /* Fallback guards the animation if this file is served without the :root
     motion tokens above (e.g. cached CSS). */
  transition: width var(--transition-normal, 0.3s ease) !important;
  will-change: width;
}
.nav-menu .main-menu a.v-stroke:hover::before,
.nav-menu .main-menu > .menu-item:hover > a.v-stroke::before {
  width: calc(100% - 26px) !important; height: 3px !important;
}
/* Active section marker */
.activ2, .nav-menu .main-menu a.active { color: var(--brand-blue) !important; }
.activ2 { font-weight: 700 !important; }

/* Mega-menu panel chrome (corporate: lines 12020-12026) */
.nav-menu .main-menu > .menu-item > .sub-menu {
  border: 1px solid #E6ECF7 !important;
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg, #0057D9, #00ADEE, #61E7C2) 1 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 24px 60px rgba(0, 87, 217, 0.16) !important;
}
.nav-menu .main-menu > .menu-item.company-mega-wrap > .sub-menu {
  border: none !important; border-top: none !important;
  border-image: none !important; border-radius: 0 !important;
  box-shadow: none !important;
}

/* Mega-menu link hovers (corporate: lines 12031-12033) */
.nav-menu .main-menu .menu-item .menu-large .service-list .service .media-body a:hover,
.nav-menu .main-menu > .menu-item > .sub-menu > .menu-item a:hover {
  color: var(--brand-blue) !important;
}
/* Service icon lift (corporate: lines 12034-12037) */
.nav-menu .main-menu .menu-item .menu-large .service-list .service:hover .svg {
  transform: translateY(-3px); transition: transform var(--transition-normal);
  filter: drop-shadow(0 8px 14px rgba(0, 87, 217, 0.25));
}

/* Spotlight mega-menu open/close (corporate: lines 12764-12778) */
.menu-wrap:not(.mobile) .services-mega-wrap:hover > .sub-menu.services-mega,
.menu-wrap:not(.mobile) .services-mega-wrap:focus-within > .sub-menu.services-mega,
.menu-wrap:not(.mobile) .solutions-mega-wrap:hover > .sub-menu.solutions-mega,
.menu-wrap:not(.mobile) .solutions-mega-wrap:focus-within > .sub-menu.solutions-mega,
.menu-wrap:not(.mobile) .industries-mega-wrap:hover > .sub-menu.industries-mega,
.menu-wrap:not(.mobile) .industries-mega-wrap:focus-within > .sub-menu.industries-mega,
.menu-wrap:not(.mobile) .technologies-mega-wrap:hover > .sub-menu.technologies-mega,
.menu-wrap:not(.mobile) .technologies-mega-wrap:focus-within > .sub-menu.technologies-mega,
.menu-wrap:not(.mobile) .resources-mega-wrap:hover > .sub-menu.resources-mega,
.menu-wrap:not(.mobile) .resources-mega-wrap:focus-within > .sub-menu.resources-mega,
.menu-wrap:not(.mobile) .company-mega-wrap:hover > .sub-menu.company-mega,
.menu-wrap:not(.mobile) .company-mega-wrap:focus-within > .sub-menu.company-mega {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Service spotlight link hovers (corporate: lines 12869-12876) */
.menu-wrap:not(.mobile) .srv-links li a:hover {
  background: linear-gradient(90deg, rgba(0,87,217,.09), rgba(0,173,238,.07)) !important;
  color: #0057D9 !important;
  transform: translateX(3px);
}
.menu-wrap:not(.mobile) .srv-links li a:hover::before {
  color: #0057D9; transform: translateX(2px);
}
.menu-wrap:not(.mobile) .srv-head:hover .srv-head-text {
  color: #0057D9 !important;
}
.menu-wrap:not(.mobile) .srv-head:hover .srv-head-icon {
  border-color: #0057D9; box-shadow: 0 8px 18px rgba(0, 87, 217, 0.22);
}

/* Spotlight CTA hovers (corporate: lines 12053-12054) */
.menu-item-content.ml-4 a.btn:hover,
.srv-viewall:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

/* ------------------------------------------------------------
   Mobile header bar + contact button
   (source: corporate style.css lines 12450-12520)
   ------------------------------------------------------------ */
/* ---------- Mobile bar surface + hero typography (≤767px) ---------- */
@media (max-width: 767px) {
  .menu-wrap.mobile .nav-menu .main-menu .menu-item > a { color: var(--brand-ink) !important; font-weight: 700 !important; font-size: 17px !important; }
  .menu-wrap.mobile .nav-menu .main-menu > .menu-item.active > .sub-menu { background: #fff !important; border-radius: 14px; margin: 8px 16px; }
  .menu-wrap.mobile .menu-item.active.menu-item-has-children { background: transparent !important; }
  /* hero stacks above photo on phones */
  #owl-demo .animatype, #owl-demo .animatype span, #typed3 { text-shadow: 0 2px 14px rgba(0,20,60,0.65); font-size: 24px}
}

/* ---------- Tablet (768–991px): compact standard-height bar ----------
   Full desktop menu must fit with the logo + Contact in one row without
   wrapping at narrow tablet widths (768px container ≈ 690px content). */
@media (min-width: 768px) and (max-width: 991px) {
  .menu-wrap:not(.mobile), .menu-wrap:not(.mobile).fixed { height: 64px !important; padding: 4px 0 !important; }
  .menu-wrap:not(.mobile) .container > .row { padding-left: 8px; padding-right: 8px; }
  .menu-wrap:not(.mobile) .header-logo-col img.newlogo,
  .menu-wrap:not(.mobile) .header-logo-col img.newlogo.logosize { width: auto !important; max-width: none !important; height: 56px !important; max-height: 56px !important; }
  .nav-menu .main-menu > .menu-item > a.v-stroke {
    padding: 11px 10px 11px 0 !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
    margin-right: 0 !important;
  }
  .menu-wrap:not(.mobile) .main-menu > .menu-item-cta { margin-left: 10px !important; }
  .menu-wrap:not(.mobile) .main-menu > .menu-item-cta > .header-contact-btn {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .menu-wrap:not(.mobile) .header-nav-col { flex-wrap: nowrap !important; }
}

/* ============================================================
   MOBILE HEADER FIX (≤767px) — mirrors corporate header.html design:
   Logo | Get Quote pill | hamburger on ONE 55px fixed bar, dropdown
   panel pinned below the bar. Electronics logo sized by HEIGHT (45px)
   with 5px top/bottom padding, same as desktop contract.
   ============================================================ */
@media (max-width: 767px) {

  /* --- 1. Header bar: one aligned row, fixed on scroll ----------- */
  .menu-wrap.mobile { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1200 !important; }
  .menu-wrap.mobile, .menu-wrap.mobile.fixed { padding: 5px 0 !important; height: 55px !important; min-height: 55px !important; }
  .menu-wrap.mobile .container { padding-left: 12px !important; padding-right: 12px !important; }
  .menu-wrap.mobile .container > .row { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 10px !important; flex-wrap: nowrap !important; }
  .menu-wrap.mobile [class*="col-"] { padding: 0 !important; }
  .menu-wrap.mobile .col-6.col-sm-6 { display: flex !important; align-items: center !important; height: 45px !important; min-height: 45px !important; }
  .menu-wrap.mobile .col-6.col-sm-6:last-child { justify-content: flex-end !important; }
  .menu-wrap.mobile .col-6.col-sm-6:first-child a { display: flex !important; align-items: center !important; line-height: 0 !important; height: 45px !important; }
  /* Mobile logo: same SVG as desktop, full 45px height, sharp (not the
     blurry 140px-wide PNG forced into an 85x60 box). */
  .menu-wrap.mobile .newlogo,
  #header .menu-wrap.mobile .newlogo,
  .menu-wrap.mobile img.newlogo {
    width: auto !important;
    max-width: none !important;
    height: 90px !important;
    max-height: 90px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 -24px !important;
  }
  .menu-wrap.mobile .menu-toggle { background: #F2F6FF !important; line-height: 1; flex: 0 0 auto; align-self: center !important; margin: 0 !important; }
  .menu-wrap.mobile .col-6.col-sm-6:last-child .nav-menu { display: flex; align-items: center; justify-content: flex-end; height: 45px !important; }
  .menu-wrap.mobile .col-6.col-sm-6:last-child .nav-menu .navigation { display: flex; align-items: center; height: 45px !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  /* keep the initial white surface when scrolled — the legacy
     .menu-wrap.fixed rule paints a blue gradient on scroll */
  .menu-wrap.mobile.fixed, .menu-wrap.mobile {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 4px 16px rgba(7, 28, 82, 0.10) !important;
  }
  /* the global .menu-wrap.fixed blue gradient must never touch the mobile bar */
  .menu-wrap.mobile.fixed { background: rgba(255, 255, 255, 0.97) !important; }
  .menu-wrap.mobile .nav-menu { position: relative; }
  /* legacy 15px padding pushed Contact/hamburger below the logo line */
  .menu-wrap.mobile .nav-menu .navigation { padding-top: 0 !important; flex-wrap: nowrap; gap: 0px; align-items: center; }
  /* mobile header: compact Get Quote pill beside the hamburger (corporate),
     vertically centred with the 45px logo */
  .menu-wrap.mobile .navigation > .header-contact-btn {
    margin-right: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    align-self: center !important;
    flex: 0 0 auto;
    min-width: 0;
    box-shadow: 0 6px 16px rgba(0, 87, 217, 0.3);
  }
  .menu-wrap.mobile .navigation > .menu-toggle { flex: 0 0 auto; }
  /* while the menu is open, keep the bar pinned so the hamburger stays reachable */
  .menu-wrap.mobile.active {
    position: fixed !important;
    top: 0; left: 0; width: 100%;
    z-index: 1200 !important;
  }

  /* --- 2. Hamburger: real 3-bar icon, vertically centred with logo --- */
  .menu-wrap.mobile .navigation > .menu-toggle,
  .menu-wrap.mobile #nav-toggle {
    position: relative;
    box-sizing: border-box;
    width: 44px;
    height: 40px;
    margin: 0 !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #D7E4FF;
    border-radius: 10px;
    background: #F2F6FF !important;
  }
  .menu-wrap.mobile #nav-toggle .icon,
  .menu-wrap.mobile #nav-toggle span {
    position: static !important;
    display: block !important;
    width: 20px !important;
    height: 2.5px !important;
    margin: 3.5px auto !important;
    padding: 0 !important;
    border-radius: 99px;
    background: var(--brand-blue) !important;
  }
  /* kill the legacy pseudo-element bars (3 spans + 6 pseudo bars = 9 overlapping
     absolute bars, which left the button looking empty) */
  .menu-wrap.mobile #nav-toggle span:before,
  .menu-wrap.mobile #nav-toggle span:after {
    content: none !important;
    display: none !important;
  }
  /* morph to an X while the menu is open */
  .menu-wrap.mobile.active #nav-toggle .icon:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-wrap.mobile.active #nav-toggle .icon:nth-child(2) { opacity: 0; }
  .menu-wrap.mobile.active #nav-toggle .icon:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* --- 3. Dropdown panel: pinned below the 55px bar (corporate) --- */
  .menu-wrap.mobile .nav-menu .main-menu {
    position: fixed !important;
    top: 55px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 55px) !important;
    max-height: calc(100dvh - 55px) !important;
    padding: 10px 20px 30px !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FF 55%, #E4F6F0 100%) !important;
    box-shadow: 0 24px 40px rgba(7, 28, 82, 0.18);
    overflow-y: auto !important;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0s linear 0.26s, opacity 0.26s ease;
    z-index: 1199 !important;
  }
  .menu-wrap.mobile.active .nav-menu .main-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: visibility 0s linear 0s, opacity 0.26s ease;
  }
  /* legacy dark #15212a strip sat on top of the brand surface */
  .menu-wrap.mobile .nav-menu .main-menu .mobile-nav { background: transparent !important; color: var(--brand-ink); }
  .menu-wrap.mobile .mobile-nav .menu li { border-bottom: 1px solid #E6ECF7 !important; }
  .menu-wrap.mobile .mobile-nav .menu li:last-child { border-bottom: none; }
  .menu-wrap.mobile .mobile-nav .menu > li > a {
    color: var(--brand-ink) !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    /* Chevron is pushed to the edge by `margin-left:auto` (see the
       `.dropdown-icon` rule), so the row only needs a normal right pad.
       The old 42px reserved a second gap on top of that, leaving the
       chevron floating well short of the right edge. */
    padding: 14px 12px 14px 2px !important;
    min-height: 52px;
    background: transparent !important;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  /* Keep the chevron hard against the right edge of the row. */
  .menu-wrap.mobile .mobile-nav .menu > li > a .dropdown-icon {
    margin-left: auto !important;
    flex: 0 0 auto;
    opacity: .8 !important;
  }
  .menu-wrap.mobile .mobile-nav .menu > li > a.active,
  .menu-wrap.mobile .mobile-nav .menu > li.open > a { color: var(--brand-blue) !important; }
  .menu-wrap.mobile .mobile-nav .menu > li.open > a {
    background: linear-gradient(90deg, rgba(0, 87, 217, 0.07), rgba(0, 87, 217, 0)) !important;
  }
  /* kill old FA pseudo-icons; keep the inline SVG chevron at row edge */
  .menu-wrap.mobile .mobile-nav .menu > li > a::before,
  .menu-wrap.mobile .mobile-nav .submenu a::before {
    content: none !important;
    display: none !important;
  }
  .menu-wrap.mobile .mobile-nav .submenu {
    background: #fff;
    border-radius: 12px;
  }
  .menu-wrap.mobile .mobile-nav .submenu a {
    color: var(--brand-grey) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 9px 12px 9px 18px !important;
    background: transparent !important;
  }
  .menu-wrap.mobile .mobile-nav .menu a:hover { background: transparent !important; color: var(--brand-blue) !important; }

  /* --- Contact sub-menu: labelled rows with a leading icon ------------
     The sub-menu was four plain text links with no icons, so the channels
     were hard to scan and the tap targets carried no visual affordance.
     Each is now a tinted icon chip plus a bold label with a supporting
     detail line. Scoped to `.submenu-contact` so no other sub-menu moves. */
  .menu-wrap.mobile .mobile-nav .submenu-contact a.m-contact-link {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 9px 14px 9px 12px !important;
    background: transparent !important;
    text-align: left;
  }
  .menu-wrap.mobile .mobile-nav .submenu-contact .m-contact-ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #EFF5FF;
    color: var(--brand-blue);
    transition: background .25s ease, color .25s ease;
  }
  .menu-wrap.mobile .mobile-nav .submenu-contact .m-contact-ico svg { display: block; }
  .menu-wrap.mobile .mobile-nav .submenu-contact .m-contact-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .menu-wrap.mobile .mobile-nav .submenu-contact .m-contact-txt strong {
    color: var(--brand-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25;
  }
  .menu-wrap.mobile .mobile-nav .submenu-contact .m-contact-txt em {
    font-style: normal;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--brand-grey);
    overflow-wrap: anywhere;
  }
  .menu-wrap.mobile .mobile-nav .submenu-contact a.m-contact-link:hover,
  .menu-wrap.mobile .mobile-nav .submenu-contact a.m-contact-link:focus-visible {
    background: #F5F8FF !important;
  }
  .menu-wrap.mobile .mobile-nav .submenu-contact a.m-contact-link:hover .m-contact-ico,
  .menu-wrap.mobile .mobile-nav .submenu-contact a.m-contact-link:focus-visible .m-contact-ico {
    background: var(--brand-blue);
    color: #fff;
  }
  .menu-wrap.mobile .mobile-nav .submenu-contact a.m-contact-link:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: -2px;
    border-radius: 10px;
  }
  .menu-wrap.mobile .soc-icons { text-align: center; padding: 12px 2px 0; }
  .menu-wrap.mobile .soc-icons i { margin-top: 0 !important; color: var(--brand-grey); }

  /* --- 4. Hamburger / close (X) icon: kill the legacy 9-bar stack ------
     style.css turns every #nav-toggle span into an absolutely positioned
     bar AND adds a :before and :after bar, so one hamburger painted 9
     overlapping bars (3 spans x 3). The mid-stack rules hid the pseudo
     bars, but style.css also paints them #fdd700 (yellow) with
     !important, and its `#nav-toggle span { position:absolute }` rules
     kept re-asserting themselves, so the close icon rendered as a yellow
     smear instead of a clean X.

     Everything here is !important and scoped to `.menu-wrap.mobile
     #nav-toggle` so it beats those legacy rules outright. The three real
     bars are laid out with flex (no absolute positioning, no pseudo
     elements at all), and the open state rotates bar 1 and bar 3 into a
     true X by exactly one gap + one bar height. */
  .menu-wrap.mobile #nav-toggle,
  .menu-wrap.mobile .navigation > .menu-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 44px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1.5px solid #D7E4FF !important;
    border-radius: 10px !important;
    background: #F2F6FF !important;
    cursor: pointer;
  }
  /* Real bars: static in flow, 2px tall, brand blue. */
  .menu-wrap.mobile #nav-toggle .icon {
    position: static !important;
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 99px !important;
    background: var(--brand-blue) !important;
    transition: transform .25s ease-in-out, opacity .18s ease-in-out !important;
  }
  /* Remove the legacy :before/:after bars for good. `content:none` plus a
     zero-size box stops them painting even where a background is forced. */
  .menu-wrap.mobile #nav-toggle .icon::before,
  .menu-wrap.mobile #nav-toggle .icon::after,
  .menu-wrap.mobile #nav-toggle span::before,
  .menu-wrap.mobile #nav-toggle span::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border: 0 !important;
  }
  /* Open state -> close (X). 6px = one 2px bar + one 4px gap, so the two
     rotated bars cross exactly on the button's centre line. */
  .menu-wrap.mobile.active #nav-toggle .icon:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
  .menu-wrap.mobile.active #nav-toggle .icon:nth-child(2) { opacity: 0 !important; }
  .menu-wrap.mobile.active #nav-toggle .icon:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }

  /* --- 5. Drawer open/close is driven ONLY by .active ----------------
     menuToggle() used to call .slideToggle() on the <ul> while panel
     visibility is controlled by .menu-wrap.mobile.active in CSS. The two
     fought each other: the <ul> could be left display:block while the
     panel was still visibility:hidden, and a tap right after a submenu
     was expanded could re-open a panel the user had closed. The list is
     now shown/hidden purely by the .active class, so there is a single
     source of truth. */
  .menu-wrap.mobile .nav-menu .main-menu .mobile-nav > .menu {
    display: block !important;
    height: auto !important;
  }
  .menu-wrap.mobile .nav-menu .main-menu .mobile-nav > .menu > li,
  .menu-wrap.mobile .nav-menu .main-menu .mobile-nav > .menu > li > .submenu {
    height: auto !important;
  }
  /* Accordion animates max-height rather than height so a long grouped
     submenu (Services alone has 40+ links) can fully expand.

     `display: block !important` is REQUIRED here. The legacy
     `.mobile-nav .submenu { display: none }` in style.css hides every
     submenu, and the old jQuery .slideDown() used to clear that with an
     inline `display:block`. Once the animation moved to CSS there was
     nothing left clearing the legacy rule, so every accordion panel
     stayed at display:none and tapping a menu row did nothing.

     With display:block restored, .sh-closed collapses the panel to zero
     height via max-height + overflow:hidden, and .sh-open lets it grow. */
  .menu-wrap.mobile .mobile-nav .menu > li > .submenu {
    display: block !important;
    overflow: hidden;
    transition: max-height .28s ease-in-out !important;
  }
  .menu-wrap.mobile .mobile-nav .menu > li > .submenu.sh-closed { max-height: 0 !important; }
  .menu-wrap.mobile .mobile-nav .menu > li > .submenu.sh-open { max-height: 2800px !important; }

  /* --- 6. Certifications row at the foot of the drawer ---------------
     The drawer ended on a lone MSME image. This puts the Clutch badge
     beside it in a two-up row, matching the desktop footer. Scoped to
     `.menu-wrap.mobile` so the desktop header and desktop footer are
     untouched. */
  .menu-wrap.mobile .m-cert-row {
    display: flex;
    align-items: stretch;
    justify-content: center;   /* whole row centred in the drawer */
    gap: 10px;
    margin: 14px auto 4px;
    padding: 0;
    border: 0;
    list-style: none;
    max-width: 100%;
  }
  .menu-wrap.mobile .m-cert-row .cert-card {
    flex: 0 1 152px;
    max-width: 152px;
    min-height: 92px;
    background: #fff;
    border: 1px solid rgba(0, 87, 217, .16);
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;       /* caption + logo centred inside the card */
    justify-content: center;
    text-align: center;        /* belt-and-braces for the text nodes */
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(26, 54, 93, .08);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .menu-wrap.mobile .m-cert-row .cert-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 87, 217, .18);
    text-decoration: none;
  }
  .menu-wrap.mobile .m-cert-row .msme-card img { max-width: 112px; width: 100%; height: auto; display: block; margin: 0 auto; }
  .menu-wrap.mobile .m-cert-row .msme-caption { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #1a365d; margin: 6px 0 0; line-height: 1.2; text-align: center; }
  .menu-wrap.mobile .m-cert-row .clutch-card { background: #17313b; border-color: #17313b; }
  .menu-wrap.mobile .m-cert-row .clutch-brand { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #fff; line-height: 1; }
  .menu-wrap.mobile .m-cert-row .clutch-stars { color: #ff3d2e; font-size: 11px; letter-spacing: 2px; margin: 6px 0 5px; display: flex; gap: 2px; justify-content: center; }
  .menu-wrap.mobile .m-cert-row .clutch-stars i { font-size: 10px; }
  .menu-wrap.mobile .m-cert-row .clutch-text { font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, .92); text-align: center; }
  .menu-wrap.mobile .m-cert-row .clutch-text strong { color: #fff; }
  /* Replaced by the row above. */
  .menu-wrap.mobile .mobile-nav > .footer-certificate { display: none !important; }

  /* --- 7. Drawer CTA + link labels are centred ----------------------
     #header .menu-wrap a:is(.m-cta, .m-viewall, ...) sets
     `display:inline-flex !important` and, for the icon rows, a left
     icon as the first flex child. justify-content:center alone does not
     centre the label when an icon sits beside it, so the label is
     wrapped by an auto left margin so the icon+text pair reads as one
     centred group. */
  .menu-wrap.mobile .m-cta,
  .menu-wrap.mobile .m-viewall {
    text-align: center !important;
    justify-content: center !important;
  }
  .menu-wrap.mobile .m-cta > span,
  .menu-wrap.mobile .m-viewall > span { margin-inline: auto; }
  /* The bottom CTA row is a full-bleed grid; centre every cell's text. */
  .menu-wrap.mobile .m-srv-cta-row .m-cta,
  .menu-wrap.mobile .m-srv-cta-row .m-viewall {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    width: 100%;
  }
  /* With the 3 CTA buttons removed the row holds only the "View all"
     link, so it reads as a full-width closing action. */
  .menu-wrap.mobile .m-srv-cta-row { padding: 14px 12px 8px !important; display: block; }
  .menu-wrap.mobile .m-srv-cta-row .m-viewall { display: flex !important; width: 100%; }
  /* Icon-only CTA tiles (call / WhatsApp / email) keep their fixed box and
     centre just the glyph — they must not stretch to a text column. */
  .menu-wrap.mobile .m-cta.m-cta-icon {
    width: 44px !important;
    flex: 0 0 44px;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center;
  }
  .menu-wrap.mobile .m-srv-cta-row { justify-items: center; }
  .menu-wrap.mobile .m-srv-cta-row > a { margin-inline: auto; }
}

/* ------------------------------------------------------------
   Mega-menu panels + services-mega-v2 spotlight layout
   (source: corporate style.css lines 12719-13280)
   ------------------------------------------------------------ */
/* ============================================================
   SERVICES MEGA MENU — full-width hover panel (desktop)
   7 groups: Software / Website / Cloud&DevOps / AI&Automation /
   Integration&Consulting / Quality&Support / Digital Marketing
   + View All + CTA row. Scoped to .services-mega only so
   Solutions / Industries / Technologies / Resources are untouched.
   ============================================================ */
/* Top-level FA icons — mapped for the ELECTRONICS menu order
   (Services, Solutions, Technologies, Industries, Products, Resources) so each
   nav label keeps the right icon: Services=cog, Solutions=lightbulb,
   Technologies=laptop, Industries=industry, Products=microchip,
   Resources=question.
   NOTE: these selectors need one element carrying BOTH `.desktop-menu` and
   `.menu-item-has-children`. The markup puts `.desktop-menu` on the <ul> and
   `.menu-item-has-children` on each <li>, so the rules are inert and are kept
   only as a reference map for the label order. */
.desktop-menu.menu-item-has-children:nth-child(1) > a::before { content: "\f0ad"; } /* Services */
.desktop-menu.menu-item-has-children:nth-child(2) > a::before { content: "\f109"; } /* Solutions */
.desktop-menu.menu-item-has-children:nth-child(3) > a::before { content: "\f4fe"; } /* Technologies */
.desktop-menu.menu-item-has-children:nth-child(4) > a::before { content: "\f2db"; } /* Industries */
.desktop-menu.menu-item-has-children:nth-child(5) > a::before { content: "\f013"; } /* Products */
.desktop-menu.menu-item-has-children:nth-child(6) > a::before { content: "\f02d"; } /* Resources */

@media (min-width: 768px) {
  .menu-wrap:not(.mobile) .services-mega-wrap > .sub-menu.services-mega,
  .menu-wrap:not(.mobile) .solutions-mega-wrap > .sub-menu.solutions-mega,
  .menu-wrap:not(.mobile) .industries-mega-wrap > .sub-menu.industries-mega,
  .menu-wrap:not(.mobile) .technologies-mega-wrap > .sub-menu.technologies-mega,
  .menu-wrap:not(.mobile) .resources-mega-wrap > .sub-menu.resources-mega,
  .menu-wrap:not(.mobile) .products-mega-wrap > .sub-menu.products-mega,
  .menu-wrap:not(.mobile) .support-mega-wrap > .sub-menu.support-mega {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 100% !important;
    width: max-content !important;
    min-width: min(1200px, calc(100vw - 48px)) !important;
    max-width: min(1400px, calc(100vw - 48px)) !important;
    transform: translateY(10px) !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s !important;
    z-index: 1001;
    pointer-events: none;
  }
}
.menu-wrap:not(.mobile) .services-mega-wrap:hover > .sub-menu.services-mega,
.menu-wrap:not(.mobile) .services-mega-wrap:focus-within > .sub-menu.services-mega,
.menu-wrap:not(.mobile) .solutions-mega-wrap:hover > .sub-menu.solutions-mega,
.menu-wrap:not(.mobile) .solutions-mega-wrap:focus-within > .sub-menu.solutions-mega,
.menu-wrap:not(.mobile) .industries-mega-wrap:hover > .sub-menu.industries-mega,
.menu-wrap:not(.mobile) .industries-mega-wrap:focus-within > .sub-menu.industries-mega,
.menu-wrap:not(.mobile) .technologies-mega-wrap:hover > .sub-menu.technologies-mega,
.menu-wrap:not(.mobile) .technologies-mega-wrap:focus-within > .sub-menu.technologies-mega,
.menu-wrap:not(.mobile) .resources-mega-wrap:hover > .sub-menu.resources-mega,
.menu-wrap:not(.mobile) .resources-mega-wrap:focus-within > .sub-menu.resources-mega,
.menu-wrap:not(.mobile) .products-mega-wrap:hover > .sub-menu.products-mega,
.menu-wrap:not(.mobile) .products-mega-wrap:focus-within > .sub-menu.products-mega,
.menu-wrap:not(.mobile) .support-mega-wrap:hover > .sub-menu.support-mega,
.menu-wrap:not(.mobile) .support-mega-wrap:focus-within > .sub-menu.support-mega {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
.menu-wrap:not(.mobile) .services-mega-wrap > .sub-menu.services-mega::before,
.menu-wrap:not(.mobile) .solutions-mega-wrap > .sub-menu.solutions-mega::before,
.menu-wrap:not(.mobile) .industries-mega-wrap > .sub-menu.industries-mega::before,
.menu-wrap:not(.mobile) .technologies-mega-wrap > .sub-menu.technologies-mega::before,
.menu-wrap:not(.mobile) .resources-mega-wrap > .sub-menu.resources-mega::before,
.menu-wrap:not(.mobile) .products-mega-wrap > .sub-menu.products-mega::before,
.menu-wrap:not(.mobile) .support-mega-wrap > .sub-menu.support-mega::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
  background: transparent;
}
.services-mega-inner {
  background: #fff;
  border: 1px solid #E6ECF7;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 30px 70px rgba(0, 87, 217, .18);
  padding: 26px 30px 22px;
  position: relative;
  overflow: hidden;
}
.services-mega-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0057D9, #00ADEE 38%, #61E7C2 72%, #6EE787);
}
.services-mega-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 22px;
}
.srv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.srv-grid-tech { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.srv-grid-res { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.srv-col { min-width: 0; padding-right: 18px; border-right: 1px solid #EEF2F9; }
.srv-col:last-child { border-right: none; padding-right: 0; }
.srv-head {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 10px !important;
  margin: 0 0 8px !important;
  border-bottom: 2px solid #EAF0FB;
  line-height: 1.25 !important;
  text-decoration: none !important;
}
.srv-head-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EAF2FF, #E6FBF3);
  border: 1px solid #DCE7FB;
}
.srv-head-icon img { width: 24px; height: 24px; object-fit: contain; }
.srv-head-text { color: #16213A !important; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .2px; text-transform: uppercase; display: block; }
.srv-head-text small { display: block; color: #6B7693 !important; font-size: 11px !important; font-weight: 500 !important; text-transform: none; letter-spacing: 0; margin-top: 3px; line-height: 1.45; }
.srv-links { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.srv-links li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.menu-wrap:not(.mobile) .srv-links li a {
  display: flex !important;
  align-items: center;
  gap: 7px;
  color: #3A4560 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 6px 8px !important;
  margin: 0 -8px !important;
  border-radius: 8px;
  white-space: normal !important;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
.menu-wrap:not(.mobile) .srv-links li a::before {
  content: '\203A';
  color: #B9C6E4;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  transition: color .18s ease, transform .18s ease;
}
.menu-wrap:not(.mobile) .srv-links li a:hover {
  background: linear-gradient(90deg, rgba(0,87,217,.09), rgba(0,173,238,.07)) !important;
  color: #0057D9 !important;
  transform: translateX(3px);
}
.menu-wrap:not(.mobile) .srv-links li a:hover::before { color: #0057D9; transform: translateX(2px); }
.menu-wrap:not(.mobile) .srv-head:hover .srv-head-text { color: #0057D9 !important; }
.menu-wrap:not(.mobile) .srv-head:hover .srv-head-icon { border-color: #0057D9; box-shadow: 0 8px 18px rgba(0,87,217,.22); }
.services-mega-cta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #EAF0FB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.srv-viewall {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0057D9 0%, #00ADEE 60%, #00ADEE 100%) !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0,87,217,.32);
  white-space: nowrap;
}
.srv-viewall span { font-size: 16px; line-height: 1; }
.srv-viewall:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,87,217,.42); color: #fff !important; }
.srv-cta-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.srv-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
.srv-cta-primary { background: #0B1B33 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(11,27,51,.28); }
.srv-cta-primary:hover { transform: translateY(-2px); color: #fff !important; }
.srv-cta-ghost { background: #fff !important; color: #0057D9 !important; border-color: #C9DBFF !important; }
.srv-cta-ghost:hover { background: #EFF5FF !important; transform: translateY(-2px); color: #0057D9 !important; }
.srv-cta-link { background: #F2F6FF !important; color: #233252 !important; border-color: #E2EAFB !important; }
.srv-cta-link:hover { background: #E7F0FF !important; color: #0057D9 !important; transform: translateY(-2px); }
@media (max-width: 1380px) {
  .services-mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
  .srv-grid-res { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .srv-col:nth-child(4) { border-right: none; }
}
@media (max-width: 1020px) {
  .services-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srv-col { border-right: none; border-bottom: 1px solid #EEF2F9; padding-bottom: 16px; }
}
/* Mobile grouped accordion (Services/Solutions/Technologies/Industries/
   Products/Resources + plain Contact): label, indented links under the
   label, and CTA row. One shared scope so every submenu aligns alike —
   works with the existing .mobile-nav accordion JS. These rules win over
   the generic .mobile-nav .submenu rules that load above them. */

.menu-wrap.mobile .mobile-nav .submenu, .menu-wrap.mobile .mobile-nav .submenu-services-mega {
  padding: 0 !important;
}
   
.menu-wrap.mobile .mobile-nav .submenu,
.menu-wrap.mobile .mobile-nav .submenu-services-mega, .menu-wrap.mobile .mobile-nav .submenu-solutions-mega, .menu-wrap.mobile .mobile-nav .submenu-industries-mega, .menu-wrap.mobile .mobile-nav .submenu-technologies-mega, .menu-wrap.mobile .mobile-nav .submenu-resources-mega { padding: 6px 0 10px; }
.menu-wrap.mobile .mobile-nav .submenu .m-srv-group,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-srv-group,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-srv-group,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-srv-group, .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-srv-group, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-srv-group { border-bottom: 1px solid #E6ECF7 !important; padding: 2px 0 10px !important; margin-bottom: 4px !important; }
.menu-wrap.mobile .mobile-nav .submenu .m-srv-label,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-srv-label,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-srv-label,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-srv-label,
  .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-srv-label, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-srv-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--brand-blue);
  padding: 10px 18px 6px;
}
/* Links + section headings sit UNDER their label: same 18px left gutter,
   26px text inset with the › marker — fixes the left-shifted look. */
.menu-wrap.mobile .mobile-nav .submenu .m-srv-sub,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-srv-sub,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-srv-sub,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-srv-sub,
  .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-srv-sub, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-srv-sub { margin: 0; padding: 0 0 0 18px; }
.menu-wrap.mobile .mobile-nav .submenu .m-srv-sub .m-srv-heading,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-srv-sub .m-srv-heading,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-srv-sub .m-srv-heading,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-srv-sub .m-srv-heading,
  .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-srv-sub .m-srv-heading, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-srv-sub .m-srv-heading {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--brand-grey);
  padding: 10px 18px 2px 8px;
  margin: 0;
}
.menu-wrap.mobile .mobile-nav .submenu .m-srv-sub a,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-srv-sub a,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-srv-sub a,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-srv-sub a,
  .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-srv-sub a, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-srv-sub a {
  display: block;
  padding: 7px 18px 7px 8px !important;
  font-size: 14px !important;
  color: var(--brand-ink) !important;
  position: relative;
}
.menu-wrap.mobile .mobile-nav .submenu .m-srv-sub a::before,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-srv-sub a::before,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-srv-sub a::before,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-srv-sub a::before,
  .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-srv-sub a::before, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-srv-sub a::before {
  content: '\203A';
  position: absolute;
  left: -4px;
  top: 7px;
  color: var(--brand-blue);
  font-weight: 800;
}
.menu-wrap.mobile .mobile-nav .submenu .m-srv-cta-row,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-srv-cta-row,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-srv-cta-row,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-srv-cta-row,
  .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-srv-cta-row, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-srv-cta-row { padding: 12px 10px 6px !important; display: grid; gap: 8px; }
.menu-wrap.mobile .mobile-nav .submenu .m-viewall,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-viewall,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-viewall,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-viewall,
  .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-viewall, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-viewall {
  display: block;
  text-align: center;
  font-weight: 800 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0057D9, #00ADEE) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
}
.menu-wrap.mobile .mobile-nav .submenu .m-cta,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-cta,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-cta,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-cta,
  .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-cta, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-cta {
  display: block;
  text-align: center;
  font-weight: 700 !important;
  color: var(--brand-blue) !important;
  background: #F1F5FF !important;
  border: 1px solid #DCE7FB !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}
.menu-wrap.mobile .mobile-nav .submenu .m-cta-primary,
.menu-wrap.mobile .mobile-nav .submenu-services-mega .m-cta-primary,
  .menu-wrap.mobile .mobile-nav .submenu-solutions-mega .m-cta-primary,
  .menu-wrap.mobile .mobile-nav .submenu-industries-mega .m-cta-primary,
  .menu-wrap.mobile .mobile-nav .submenu-technologies-mega .m-cta-primary, .menu-wrap.mobile .mobile-nav .submenu-resources-mega .m-cta-primary {
  background: var(--brand-ink) !important; color: #fff !important; border-color: var(--brand-ink) !important;
}



/* ============ SERVICES MEGA v2 — full-width spotlight layout ============ */
.services-mega-wrap, .solutions-mega-wrap, .industries-mega-wrap, .technologies-mega-wrap, .resources-mega-wrap, .company-mega-wrap { position: static !important; }
.menu-wrap:not(.mobile) .nav-menu .main-menu .menu-item.services-mega-wrap, .menu-wrap:not(.mobile) .nav-menu .main-menu .menu-item.solutions-mega-wrap, .menu-wrap:not(.mobile) .nav-menu .main-menu .menu-item.industries-mega-wrap, .menu-wrap:not(.mobile) .nav-menu .main-menu .menu-item.technologies-mega-wrap, .menu-wrap:not(.mobile) .nav-menu .main-menu .menu-item.resources-mega-wrap, .menu-wrap:not(.mobile) .nav-menu .main-menu .menu-item.company-mega-wrap { position: static; }
.services-mega-v2 { left: 50% !important; transform: translateX(-50%) !important; width: min(1400px,94vw) !important; max-width: 1400px !important; padding: 0 !important; overflow: hidden; border-radius: 18px !important; }
.company-mega.services-mega-v2 { width: 100% !important; max-width: none !important; left: 0 !important; transform: none !important; border-radius: 0 !important; }
.services-mega-v2-inner { padding: 0 !important; max-width: 1400px !important; }
.company-mega .services-mega-v2-inner { max-width: none !important; }
.services-mega-v2-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; align-items: stretch; }
.srv-spotlight { background: linear-gradient(160deg,#0B1B33 0%,#123B8F 46%,#0057D9 72%,#00ADEE 100%); color: #fff; padding: 28px 26px 24px; position: relative; overflow: hidden; }
.srv-spotlight::after { content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -120px; background: radial-gradient(circle,rgba(255,255,255,.22),transparent 65%); pointer-events: none; }
.srv-spot-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #BFE3FF; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: 5px 10px; border-radius: 100px; margin-bottom: 14px; }
.srv-spot-title { font-size: 24px; line-height: 1.25; font-weight: 800; color: #fff !important; margin: 0 0 8px; }
.srv-spot-title span { background: linear-gradient(90deg,#6EE787,#61E7C2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.srv-spot-desc { font-size: 13.5px; line-height: 1.6; color: #D6E6FF !important; margin: 0 0 16px; }
.srv-spot-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 10px 6px; margin-bottom: 16px; text-align: center; }
.srv-spot-stats strong { display: block; font-size: 17px; color: #fff; }
.srv-spot-stats span { font-size: 11px; color: #C9DDFF; }
.srv-spot-ctas { display: grid; gap: 10px; }
.srv-spot-btn { justify-content: center; background: var(--brand-gradient) !important; color: #fff !important; font-weight: 800 !important; box-shadow: 0 8px 20px rgba(0,87,217,.4); }
.srv-spot-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,87,217,.55); color: #fff !important; filter: brightness(1.06); }
.srv-spot-link { color: #fff !important; font-weight: 700; font-size: 13.5px; text-align: center; }
.srv-spot-link:hover { color: #6EE787 !important; }
.srv-main { padding: 18px 22px 16px; background: #fff; min-width: 0; }
.srv-trending { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px 10px; background: #F2F6FF !important; border: 1px solid #E2EAFB; border-radius: 12px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.4; }
.menu-wrap:not(.mobile) .nav-menu .main-menu .srv-trending-label { display: inline-flex !important; align-items: center; gap: 6px; font-size: 11.5px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .6px; color: #0057D9 !important; margin: 0 2px 0 0 !important; padding: 0 !important; line-height: 1 !important; min-height: 32px; white-space: nowrap; }
.menu-wrap:not(.mobile) .nav-menu .main-menu .srv-trending-label svg { display: block; flex: none; }
.menu-wrap:not(.mobile) .nav-menu .main-menu .srv-trending a,
.menu-wrap:not(.mobile) .nav-menu .main-menu .srv-trending a:active,
.menu-wrap:not(.mobile) .nav-menu .main-menu .srv-trending a:focus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #233252 !important;
  background: #fff !important;
  border: 1px solid #E2EAFB !important;
  border-radius: 100px !important;
  padding: 5px 12px !important;
  margin: 0 !important;
  min-height: 32px;
  text-decoration: none !important;
  white-space: nowrap;
}
.menu-wrap:not(.mobile) .nav-menu .main-menu .srv-trending a:hover {
  border-color: #0057D9 !important;
  color: #0057D9 !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(0,87,217,.14);
}
.menu-wrap:not(.mobile) .nav-menu .main-menu .srv-trending a em.srv-badge { display: inline-flex !important; align-items: center; line-height: 1.3; }
.srv-badge { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; line-height: 1.4; }
.srv-badge-new { background: #E7F9EF; color: #0E9F5B; border: 1px solid #B9E9CD; }
.srv-badge-hot { background: #FFF1E8; color: #E0621A; border: 1px solid #FFD3B3; }
.srv-grid-v2 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 18px !important; padding: 4px 2px 10px !important; }
.srv-col-v2 { padding-right: 16px !important; }
.services-mega-cta-v2 { align-items: flex-start; gap: 10px; background: linear-gradient(180deg,#F7FAFF,#EFF4FF); margin: 0 -22px -16px; padding: 12px 22px 14px; }
.company-mega .services-mega-cta-v2 { border-top: none !important; }
.srv-cta-note { margin: 0; font-size: 13px; color: #3A4763 !important; }
.srv-cta-note strong { color: #0B1B33; }
.menu-wrap:not(.mobile) .services-mega-wrap:hover .services-mega-v2, .menu-wrap:not(.mobile) .services-mega-wrap:focus-within .services-mega-v2, .menu-wrap:not(.mobile) .solutions-mega-wrap:hover .services-mega-v2, .menu-wrap:not(.mobile) .solutions-mega-wrap:focus-within .services-mega-v2, .menu-wrap:not(.mobile) .industries-mega-wrap:hover .services-mega-v2, .menu-wrap:not(.mobile) .industries-mega-wrap:focus-within .services-mega-v2, .menu-wrap:not(.mobile) .technologies-mega-wrap:hover .services-mega-v2, .menu-wrap:not(.mobile) .technologies-mega-wrap:focus-within .services-mega-v2, .menu-wrap:not(.mobile) .resources-mega-wrap:hover .services-mega-v2, .menu-wrap:not(.mobile) .resources-mega-wrap:focus-within .services-mega-v2, .menu-wrap:not(.mobile) .company-mega-wrap:hover .services-mega-v2, .menu-wrap:not(.mobile) .company-mega-wrap:focus-within .services-mega-v2, .menu-wrap:not(.mobile) .products-mega-wrap:hover .services-mega-v2, .menu-wrap:not(.mobile) .products-mega-wrap:focus-within .services-mega-v2, .menu-wrap:not(.mobile) .support-mega-wrap:hover .services-mega-v2, .menu-wrap:not(.mobile) .support-mega-wrap:focus-within .services-mega-v2 { opacity: 1; visibility: visible; transform: none !important; pointer-events: auto; }
/* Industries: lighter 5-column variant of the full grid */
.srv-grid-ind { grid-template-columns: repeat(5,minmax(0,1fr)) !important; max-height: none !important; overflow: visible !important; }
.srv-spot-eyebrow .srv-pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6EE787; margin-right: 7px; box-shadow: 0 0 0 0 rgba(110,231,135,.7); animation: srvPulse 1.8s infinite; vertical-align: 1px; }
@keyframes srvPulse { 0% { box-shadow: 0 0 0 0 rgba(110,231,135,.7); } 70% { box-shadow: 0 0 0 8px rgba(110,231,135,0); } 100% { box-shadow: 0 0 0 0 rgba(110,231,135,0); } }
.srv-spot-quote { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 11px 12px; margin: 0 0 16px; }
.srv-spot-quote blockquote { margin: 0 0 8px; font-size: 13px; font-style: italic; line-height: 1.55; color: #fff !important; }
.srv-spot-quote figcaption { display: flex; gap: 9px; align-items: center; font-size: 12px; color: #D6E6FF; }
.srv-spot-quote strong { display: block; color: #fff; font-size: 12.5px; }
.srv-spot-quote small { color: #B9CFF5; }
.srv-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#6EE787,#00ADEE); color: #0B1B33; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.srv-stars { color: #FFC531; letter-spacing: 1px; }
.srv-spot-meta { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12px; color: #B9CFF5 !important; }
.srv-cta-xl { flex-direction: row !important; align-items: center !important; gap: 10px !important; line-height: 1.25; min-height: 54px; padding: 8px 18px 8px 10px !important; border-radius: 14px !important; }
.srv-cta-xl .srv-cta-ico { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.22); }
.srv-cta-xl .srv-cta-ico svg { display: block; }
.srv-cta-ghost.srv-cta-xl .srv-cta-ico { background: #EFF5FF; }
.srv-cta-xl .srv-cta-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-weight: 800; }
.srv-cta-xl em { font-style: normal; font-weight: 600; font-size: 11px; opacity: .78; line-height: 1.3; }
.srv-cta-primary.srv-cta-xl { background: var(--brand-gradient) !important; color: #fff !important; border: none !important; box-shadow: 0 8px 22px rgba(0,87,217,.35); }
.srv-cta-primary.srv-cta-xl:hover { box-shadow: 0 12px 28px rgba(0,87,217,.5); filter: brightness(1.05); color: #fff !important; transform: translateY(-2px); }
.srv-cta-ghost.srv-cta-xl { background: #fff !important; }
.srv-cta-call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #0B1B33 !important; color: #fff !important; border: none !important; border-radius: 14px; padding: 8px 16px; min-height: 54px; font-size: 13px; font-weight: 800; line-height: 1.2; }
.srv-cta-call:hover { background: #123B8F !important; color: #fff !important; transform: translateY(-2px); }
.srv-cta-call svg, .srv-cta-wa svg { flex: none; display: block; }
.services-mega-cta-v2 .srv-cta-call, .services-mega-cta-v2 .srv-cta-call, .services-mega-cta-v2 .srv-cta-wa, .services-mega-cta-v2 .srv-cta-link { min-height: 54px; border-radius: 14px; }
.services-mega-cta-v2 .srv-cta-call { background: var(--brand-gradient) !important; color: #fff !important; }
.services-mega-cta-v2 .srv-cta-call:hover { filter: brightness(1.06); transform: translateY(-2px); }
.services-mega-cta-v2 .srv-cta-wa, .services-mega-cta-v2 .srv-cta-link { background: #fff !important; color: #0B1B33 !important; border: 1px solid #C9DBFF !important; }
/* Header CTA refresh: shared colors, keyboard states and motion preferences. */
#header .menu-wrap a:is(.srv-cta, .header-contact-btn, .m-cta, .m-viewall, .srv-spot-link) {
  --cta-start: #1648a0;
  --cta-end: #0876a5;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  min-height: 44px;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: linear-gradient(115deg, var(--cta-start), var(--cta-end), var(--cta-start)) !important;
  background-size: 220% 100% !important;
  background-position: 0% 50% !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: normal;
  line-height: 1.35;
  box-shadow: 0 4px 12px rgba(11,27,51,.12);
  transition: background-position .45s ease, transform .2s ease, box-shadow .2s ease !important;
}
#header .menu-wrap a:is(.srv-cta-primary, .header-contact-btn, .m-cta-primary) {
  --cta-start: #0057c2;
  --cta-end: #075e88;
}
#header .menu-wrap a:is(.srv-cta-ghost, .m-cta):where(:not(.m-cta-primary)) {
  --cta-start: #5136a6;
  --cta-end: #7635a0;
}
#header .menu-wrap a:is(.srv-cta-call, .m-cta[href^="tel:"]) {
  --cta-start: #153451;
  --cta-end: #25607b;
}
#header .menu-wrap a:is(.srv-cta-wa, .m-cta-wa) {
  --cta-start: #075e54;
  --cta-end: #128046;
}
#header .menu-wrap a:is(.srv-cta-email, .m-cta-email) {
  --cta-start: #075b78;
  --cta-end: #087970;
  overflow-wrap: anywhere;
}
#header .menu-wrap a.srv-spot-link {
  --cta-start: #183b70;
  --cta-end: #225293;
  padding: 10px 12px;
  border-color: rgba(255,255,255,.3) !important;
}
#header .menu-wrap a:is(.srv-cta, .header-contact-btn, .m-cta, .m-viewall, .srv-spot-link):is(:hover, :focus-visible) {
  background-position: 100% 50% !important;
  transform: translateY(-2px);
  filter: none;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(11,27,51,.22);
}
#header .menu-wrap a:is(.srv-cta, .header-contact-btn, .m-cta, .m-viewall, .srv-spot-link):focus-visible {
  outline: 3px solid #0057d9;
  outline-offset: 3px;
}
#header .srv-spotlight a:focus-visible { outline-color: #a9f5df !important; }
#header .menu-wrap a:is(.srv-cta, .header-contact-btn, .m-cta, .m-viewall, .srv-spot-link):active {
  transform: translateY(0);
}
#header .srv-cta svg, #header .m-cta svg { display: block; flex-shrink: 0; }
#header .srv-cta-xl .srv-cta-ico { background: rgba(255,255,255,.16); }
#header .srv-cta-xl em { color: #fff; opacity: .95; }
#header .services-mega-cta-full {
  margin: 16px 0 0;
  padding: 18px;
  border: 1px solid #dce7f5 !important;
  border-radius: 16px;
  background: linear-gradient(120deg, #f0f6ff, #f1fbf8);
  gap: 14px;
}
#header .srv-cta-group-full {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
}
#header .srv-cta-group-full .srv-cta {
  min-height: 44px;
  margin: 0 !important;
}
#header .srv-cta-group-full .srv-cta-xl {
  flex: 1 1 180px;
  padding: 8px 12px !important;
}
#header .srv-cta-group-full a.srv-cta-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 !important;
  border-radius: 12px !important;
}
#header .srv-cta-icon svg, #header .m-cta-icon svg { width: 21px; height: 21px; }
#header .menu-wrap .m-srv-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#header .m-srv-cta-row > a:not(.m-cta-icon) { flex: 1 1 100%; }
/* Drawer-top CTA: centered intro row with full-width stacked CTAs (≤767px). */
#header .menu-wrap.mobile .m-drawer-cta-row {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 12px 14px 14px !important;
  border-bottom: 1px solid #E6ECF7 !important;
}
#header .menu-wrap.mobile .m-drawer-cta-row .m-cta { display: inline-flex !important; width: 100%; justify-content: center; text-align: center; margin: 0 !important; padding: 10px 14px !important; }
#header .menu-wrap a.m-cta-icon {
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px;
  min-height: 44px;
  padding: 0 !important;
  margin: 0;
}
@media (min-width: 1199px) {
  #header .srv-grid-full { max-height: max(120px, calc(100dvh - 450px)); }
}
#header .srv-cta-group-full .srv-cta-link:not(.srv-cta-icon) {
  flex: 0 0 auto;
  padding: 10px 12px !important;
  white-space: nowrap;
}
/* Keep every action reachable on laptops and short viewports. */
#header .menu-wrap:not(.mobile) .services-mega-v2 {
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#header .services-mega-cta-full { padding: 12px; margin-top: 40px; gap: 10px; display: flex; flex-direction: row-reverse; justify-content: flex-end; height: auto;}
#header .menu-wrap .srv-links a:focus-visible {
  outline: 2px solid #0057d9;
  outline-offset: 2px;
  background: #edf4ff !important;
}
@media (prefers-reduced-motion: reduce) {
  #header .menu-wrap a:is(.srv-cta, .header-contact-btn, .m-cta, .m-viewall, .srv-spot-link) {
    transition: none !important;
    transform: none !important;
  }
  #header .srv-pulse-dot { animation: none !important; }
}
/* Company mega: 6-column grid + subtle column dividers */
.company-mega .srv-grid-full { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.company-mega .srv-col-v2:not(:last-child) { border-right: none !important; }
@media (max-width: 1380px) { .company-mega .srv-grid-full { grid-template-columns: repeat(3,minmax(0,1fr)) !important; } }
@media (max-width: 1180px) { .company-mega .srv-grid-full { grid-template-columns: 1fr !important; } .company-mega .srv-col-v2 { border-right: none !important; } }
.srv-search-row { margin-bottom: 12px; }
.srv-search { display: flex !important; align-items: center; gap: 9px; background: #fff; border: 1.5px solid #E2EAFB; border-radius: 12px; padding: 0 13px; min-height: 42px; color: #6B7693; cursor: text; }
.srv-search > svg { flex: none; display: block; }
.srv-search:focus-within { border-color: #0057D9; box-shadow: 0 0 0 3px rgba(0,87,217,.12); }
.srv-search input { border: none !important; outline: none !important; box-shadow: none !important; width: 100%; height: 40px; line-height: 40px; font-size: 13.5px; color: #16213A; background: transparent !important; padding: 0 !important; margin: 0 !important; }
.srv-search-count { flex: none; font-size: 11.5px; font-weight: 700; color: #0057D9; background: #EFF5FF; border: 1px solid #D7E6FF; border-radius: 100px; padding: 3px 9px; white-space: nowrap; }
.srv-links li.srv-hide { display: none; }
.srv-col.srv-dim { opacity: .35; }
.srv-no-result { display: none; background: #FFF7ED; border: 1px solid #FED7AA; color: #9A3412; font-size: 13px; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.srv-no-result.show { display: block; }
.srv-grid-full { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 14px !important; max-height: 46vh; overflow-y: auto; scrollbar-width: thin; padding-right: 6px !important; }
.srv-grid-full .srv-col { min-width: 0; padding-right: 12px !important; }
.srv-grid-full .srv-head-text { font-size: 11.5px !important; }
.srv-grid-full .srv-links a { font-size: 12px !important; padding: 4px 0 4px 14px !important; }
.services-mega-cta-full { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.srv-cta-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srv-cta-proof { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #233252; flex-wrap: wrap; }
.srv-cta-avatars { display: inline-flex; }
.srv-cta-avatars span { width: 30px; height: 30px; border-radius: 50%; background: #0B1B33; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -8px; }
.srv-cta-avatars span:first-child { margin-left: 0; background: #0057D9; }
.srv-cta-avatars span:nth-child(2) { background: #00ADEE; }
.srv-cta-avatars span:nth-child(3) { background: #123B8F; }
.srv-cta-avatars span:last-child { background: #6EE787; color: #0B1B33; }
.srv-cta-group-full { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 1380px) { .services-mega-v2-layout { grid-template-columns: 280px 1fr; } .srv-grid-full { grid-template-columns: repeat(4,minmax(0,1fr)) !important; max-height: 52vh; } .services-mega-cta-full { flex-direction: column; align-items: flex-start; } .srv-cta-group-full { justify-content: flex-start; } }
@media (min-width: 768px) {
  /* Services v2 uses a centered panel. Keep horizontal centering and the

/* ============================================================
   FINAL SERVICES DESKTOP HOVER CONTRACT
   The v2 Services panel is a full-width spotlight dropdown. Keep
   its positioning context on the full-width nav-menu (not the
   narrow right-aligned navigation) so the panel is centered under
   the header and never renders off the viewport.
   ============================================================ */
@media (min-width: 768px) {
  #header .menu-wrap:not(.mobile) .nav-menu {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
  }

  #header .menu-wrap:not(.mobile) .header-nav-col .navigation {
    position: static !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap,
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > a {
    position: static !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2 {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    display: block !important;
    width: min(1400px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, 10px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1002 !important;
    overflow: hidden;
    border-radius: 18px !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:focus-within > .sub-menu.services-mega-v2 {
    top: 100% !important;
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* ---------- Restore the underline's positioning context ----------
     The rule above (lines 1261-1264) puts BOTH the <li> and its trigger <a>
     at `position: static`, so the panel centres against the full-width
     `.nav-menu`. That is correct for the PANEL, but the <a> carries the
     gradient underline as an absolutely positioned ::before. With the <a>
     un-positioned, that pseudo-element resolved against `.nav-menu`
     (position: relative; width: 100%) and stretched across the whole header
     instead of tracking the "Services" label.

     Giving the trigger <a> its own context back makes the underline track the
     link, which is what `width: calc(100% - 26px)` always intended. The <a> is
     a SIBLING of .sub-menu inside the <li>, never an ancestor, so this cannot
     change the panel's containing block — centring is untouched.
     (Same contract as the corporate site, css/style.css line 12755.) */
  #header .menu-wrap:not(.mobile) .header-nav-col .navigation > ul.main-menu > .menu-item > a {
    position: relative !important;
  }
}

     vertical entrance animation in the same transform; the legacy generic
     sub-menu rule only knows how to animate translateY(). */
  #header .menu-wrap:not(.mobile) .services-mega-wrap > .sub-menu.services-mega.services-mega-v2 {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 10px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1001 !important;
  }
  #header .menu-wrap:not(.mobile) .services-mega-wrap:hover > .sub-menu.services-mega.services-mega-v2,
  #header .menu-wrap:not(.mobile) .services-mega-wrap:focus-within > .sub-menu.services-mega.services-mega-v2 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
    pointer-events: auto !important;
  }
  /* The transition gap is bridged so moving the pointer from the trigger
     into the panel does not close it. */
  #header .menu-wrap:not(.mobile) .services-mega-wrap > .sub-menu.services-mega.services-mega-v2::before {
    content: '' !important;
    position: absolute !important;
    top: -18px !important;
    left: 0 !important;
    right: 0 !important;
    height: 18px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
  }
}

/* ---------- Final desktop Services hover contract ----------
   The v2 panel is centered with translateX(-50%). Keep that translation
   in the closed state and during hover/focus; the generic open-state rule
   must not replace it with translateY(0), or the panel shifts right and
   extends outside the navigation. Mobile is intentionally excluded. */
@media (min-width: 768px) {
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2 {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    display: block !important;
    width: min(1400px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, 10px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:focus-within > .sub-menu.services-mega-v2 {
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* ---------- Header-bar / panel seam: match the main site ----------
     Both sites paint the same 4px gradient accent on the card via
     .services-mega-inner::before, and both give the bar a bottom border
     (1px #E6ECF7, becoming a 3px gradient once .fixed). The main site
     separates the two with `padding: 10px 0 0` on the .sub-menu wrapper
     (css/style.css), so the bar's border reads as one clean line and the
     card's accent sits clearly below it.

     Here the wrapper was `padding: 0` with `overflow: hidden` and an 18px
     radius, which pulled the card flush against the bar — the bar's border
     and the card's 4px gradient then collided into a doubled/broken seam,
     and the wrapper clipped the card's square top corners.

     Restoring main's treatment: the same 10px gap, and no clipping or
     rounding on the wrapper, so .services-mega-inner
     (border-radius: 0 0 18px 18px) paints the card exactly as it does on
     the main site. Desktop only — the mobile drawer is unaffected. */
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item > .sub-menu {
    padding: 10px 0 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
}


/* ============================================================
   FINAL DESKTOP SERVICE-MEGA POSITIONING
   The legacy stylesheet changes .sub-menu to top:50px when
   .menu-wrap.fixed is added. Keep every v2 panel attached to
   the navigation row and centered like the corporate header.
   ============================================================ */
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.services-mega-wrap > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.technologies-mega-wrap > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.industries-mega-wrap > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.products-mega-wrap > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.support-mega-wrap > .sub-menu.services-mega-v2 {
  position: absolute !important;
  top: 100% !important;
  right: auto !important;
  left: 50% !important;
  width: min(1400px, calc(100vw - 32px)) !important;
  max-width: 1400px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, 10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 1002 !important;
  overflow: hidden;
  border-radius: 18px !important;
  transition: opacity .22s ease, transform .22s ease, visibility .22s !important;
}

#header .menu-wrap:not(.mobile) .main-menu > .menu-item.services-mega-wrap:hover > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.services-mega-wrap:focus-within > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.technologies-mega-wrap:hover > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.technologies-mega-wrap:focus-within > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.industries-mega-wrap:hover > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.industries-mega-wrap:focus-within > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.products-mega-wrap:hover > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.products-mega-wrap:focus-within > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.support-mega-wrap:hover > .sub-menu.services-mega-v2,
#header .menu-wrap:not(.mobile) .main-menu > .menu-item.support-mega-wrap:focus-within > .sub-menu.services-mega-v2 {
  top: 100% !important;
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 1380px) {
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item.services-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item.technologies-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item.industries-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item.products-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item.support-mega-wrap > .sub-menu.services-mega-v2 {
    width: calc(100vw - 24px) !important;
  }
}


/* ============================================================
   FINAL DESKTOP MEGA-MENU POSITIONING
   One containing block for the complete electronics navigation.
   The v2 panels open below the 76px header, not on top of the banner.
   ============================================================ */
@media (min-width: 768px) {
  #header .menu-wrap:not(.mobile) {
    /* No position here on purpose: the base `.menu-wrap` (absolute) and
       `.menu-wrap.fixed` (fixed) rules above own the positioning contract.
       This block only locks the box model so mega-menus anchor correctly. */
    box-sizing: border-box !important;
    height: 76px !important;
    overflow: visible !important;
  }

  #header .menu-wrap:not(.mobile) .nav-menu,
  #header .menu-wrap:not(.mobile) #menu,
  #header .menu-wrap:not(.mobile) .header-nav-col,
  #header .menu-wrap:not(.mobile) .navigation,
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap {
    position: static !important;
  }

  #header .menu-wrap:not(.mobile) .nav-menu {
    width: 100% !important;
    height: auto !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap > .sub-menu.services-mega-v2 {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    display: block !important;
    width: min(1400px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, 10px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1002 !important;
    overflow: hidden;
    border-radius: 18px !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap:focus-within > .sub-menu.services-mega-v2 {
    top: 100% !important;
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2::before,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap > .sub-menu.services-mega-v2::before,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap > .sub-menu.services-mega-v2::before,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap > .sub-menu.services-mega-v2::before,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap > .sub-menu.services-mega-v2::before {
    content: '' !important;
    position: absolute !important;
    top: -18px !important;
    left: 0 !important;
    right: 0 !important;
    height: 18px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 1001 !important;
  }
}

@media (min-width: 768px) and (max-width: 1380px) {
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap > .sub-menu.services-mega-v2 {
    width: calc(100vw - 24px) !important;
  }
}

/* ============================================================
   AUTHORITATIVE ELECTRONICS DESKTOP MEGA-MENU CONTRACT
   The v2 markup is rendered from header.html. Keep every panel
   anchored to the complete 76px header shell, not to a narrow
   nav column or a legacy floated sub-menu.
   ============================================================ */
@media (min-width: 768px) {
  #header .menu-wrap:not(.mobile) {
    /* Same as above: no position declaration — base + .fixed own it. */
    top: 0 !important;
    z-index: 1000 !important;
    height: 76px !important;
    min-height: 76px !important;
    overflow: visible !important;
  }

  #header .menu-wrap:not(.mobile) .nav-menu,
  #header .menu-wrap:not(.mobile) #menu,
  #header .menu-wrap:not(.mobile) .header-nav-col,
  #header .menu-wrap:not(.mobile) .navigation,
  #header .menu-wrap:not(.mobile) .main-menu,
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item {
    position: static !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap > .sub-menu.services-mega-v2 {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    display: block !important;
    float: none !important;
    width: min(1400px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1002 !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 18px !important;
    transition: opacity .22s ease, visibility .22s ease !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap:focus-within > .sub-menu.services-mega-v2 {
    top: 100% !important;
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 1380px) {
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap > .sub-menu.services-mega-v2 {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}



/* ============================================================
   FINAL AUTHORITATIVE DESKTOP MEGA-MENU POSITION
   The electronics header is dynamically loaded into #header.
   Use the viewport as the stable positioning context so the
   panel cannot resolve against a legacy floated nav column or
   appear over the page banner. Mobile remains accordion-based.
   ============================================================ */
@media (min-width: 768px) {
  #header .menu-wrap:not(.mobile) {
    /* Same as above: no position declaration — base + .fixed own it. */
    top: 0 !important;
    z-index: 1200 !important;
    overflow: visible !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap > .sub-menu.services-mega-v2 {
    position: fixed !important;
    top: 76px !important;
    left: 50vw !important;
    right: auto !important;
    display: block !important;
    float: none !important;
    width: min(1400px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, 10px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1199 !important;
    max-height: calc(100dvh - 76px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 18px !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap:focus-within > .sub-menu.services-mega-v2 {
    top: 76px !important;
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Keep hover active while the pointer crosses the transition gap. */
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2::before,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap > .sub-menu.services-mega-v2::before,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap > .sub-menu.services-mega-v2::before,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap > .sub-menu.services-mega-v2::before,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap > .sub-menu.services-mega-v2::before {
    content: '' !important;
    position: absolute !important;
    top: -18px !important;
    left: 0 !important;
    right: 0 !important;
    height: 18px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 1198 !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap > .sub-menu.services-mega-v2 {
    top: 64px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 64px) !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .services-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .technologies-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .industries-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .products-mega-wrap:focus-within > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .support-mega-wrap:focus-within > .sub-menu.services-mega-v2 {
    top: 64px !important;
  }
}


/* ============================================================
   HEADER POLISH PASS — logo sizing, even nav spacing, centred panels.
   Appended last on purpose: these rules must win the cascade over the
   earlier (and now partly stale) positioning blocks above.
   ============================================================ */

/* ---------- 1. Logo: full-height 66px with 5px top/bottom padding ----------
   Bar = 76px tall with 5px vertical padding -> 66px content box. Size the
   SVG by HEIGHT (66px) with width:auto so aspect is never squashed —
   this is the sharpest presentation because the vector renders at full
   bar height instead of downscaling to 52px. At 1.89:1 the lockup is
   ~125px wide. The `.logosize` scroll class keeps the same height so the
   bar never jumps when js/scripts.js toggles it past 100px of scroll. */
.menu-wrap:not(.mobile) .header-logo-col,
.menu-wrap:not(.mobile) .header-logo-col a { max-width: 220px; }
.menu-wrap:not(.mobile) .header-logo-col img.newlogo {
  width: auto !important;
  max-width: none !important;
  height: 66px !important;
  max-height: 66px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
/* Scrolled state: js/scripts.js adds `.logosize` past 100px of scroll, so the
   same full height is kept and the bar never jumps. */
.menu-wrap:not(.mobile) .header-logo-col img.newlogo.logosize {
  width: auto !important;
  max-width: none !important;
  height: 66px !important;
  max-height: 66px !important;
}

/* ---------- 2. Even spacing between top-level nav items ----------
   The old rule was `padding: 14px 24px 14px 0` — zero inset on the left,
   24px on the right — so labels sat flush against the logo side and the gap
   before the CTA was 24px + 16px margin. Each breakpoint below now gives every
   item the SAME inset on both sides, keeps the gap before the CTA in the same
   rhythm, and re-aligns the gradient underline to the padded label. */
@media (min-width: 1200px) {
  .nav-menu .main-menu > .menu-item > a.v-stroke { padding: 14px 16px !important; }
  .nav-menu .main-menu a.v-stroke::before,
  .nav-menu .main-menu a.h-stroke::before { left: 16px !important; }
  .nav-menu .main-menu a.v-stroke:hover::before,
  .nav-menu .main-menu > .menu-item:hover > a.v-stroke::before { width: calc(100% - 32px) !important; }
  .menu-wrap:not(.mobile) .main-menu > .menu-item-cta { margin-left: 6px !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .nav-menu .main-menu > .menu-item > a.v-stroke {
    padding: 14px 11px !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
  }
  .nav-menu .main-menu a.v-stroke::before,
  .nav-menu .main-menu a.h-stroke::before { left: 11px !important; }
  .nav-menu .main-menu a.v-stroke:hover::before,
  .nav-menu .main-menu > .menu-item:hover > a.v-stroke::before { width: calc(100% - 22px) !important; }
  .menu-wrap:not(.mobile) .main-menu > .menu-item-cta { margin-left: 4px !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .nav-menu .main-menu > .menu-item > a.v-stroke {
    padding: 11px 9px !important;
    font-size: 13.5px !important;
    letter-spacing: 0 !important;
  }
  .nav-menu .main-menu a.v-stroke::before,
  .nav-menu .main-menu a.h-stroke::before { left: 9px !important; }
  .nav-menu .main-menu a.v-stroke:hover::before,
  .nav-menu .main-menu > .menu-item:hover > a.v-stroke::before { width: calc(100% - 18px) !important; }
  .menu-wrap:not(.mobile) .main-menu > .menu-item-cta { margin-left: 3px !important; }
}

/* ---------- 3. Centre EVERY mega panel under the bar ----------
   Root cause of the right-aligned panels: the authoritative `#header` blocks
   above enumerate wrappers by name — services / technologies / industries /
   products / support — and never `solutions-mega-wrap` or `resources-mega-wrap`.
   Both new panels therefore fell through to the generic rule that pins them
   with `right: 0`.

   Matching on the shared `.sub-menu.services-mega-v2` class (present on all six
   desktop panels) instead of the wrapper names fixes Solutions and Resources,
   and automatically covers any panel added later. Selector specificity matches
   the `#header` blocks exactly, so source order lets these win. */
@media (min-width: 768px) {
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item > .sub-menu.services-mega-v2,
  .menu-wrap:not(.mobile) .main-menu > .menu-item > .sub-menu.services-mega-v2 {
    position: fixed !important;
    top: 76px !important;
    left: 50vw !important;
    right: auto !important;
    display: block !important;
    float: none !important;
    width: min(1400px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, 10px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1199 !important;
    max-height: calc(100dvh - 76px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 18px !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
  }

  #header .menu-wrap:not(.mobile) .main-menu > .menu-item:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item:focus-within > .sub-menu.services-mega-v2,
  .menu-wrap:not(.mobile) .main-menu > .menu-item:hover > .sub-menu.services-mega-v2,
  .menu-wrap:not(.mobile) .main-menu > .menu-item:focus-within > .sub-menu.services-mega-v2 {
    top: 76px !important;
    left: 50vw !important;
    right: auto !important;
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Invisible bridge: keeps the panel open while the pointer crosses the gap. */
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item > .sub-menu.services-mega-v2::before,
  .menu-wrap:not(.mobile) .main-menu > .menu-item > .sub-menu.services-mega-v2::before {
    content: '' !important;
    position: absolute !important;
    top: -18px !important;
    left: 0 !important;
    right: 0 !important;
    height: 18px !important;
    display: block !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 1198 !important;
  }
}

/* Tablet: bar is 64px tall, so the panel docks at 64px and uses the width. */
@media (min-width: 768px) and (max-width: 991px) {
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item > .sub-menu.services-mega-v2,
  .menu-wrap:not(.mobile) .main-menu > .menu-item > .sub-menu.services-mega-v2 {
    top: 64px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 64px) !important;
  }
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item:hover > .sub-menu.services-mega-v2,
  #header .menu-wrap:not(.mobile) .main-menu > .menu-item:focus-within > .sub-menu.services-mega-v2,
  .menu-wrap:not(.mobile) .main-menu > .menu-item:hover > .sub-menu.services-mega-v2,
  .menu-wrap:not(.mobile) .main-menu > .menu-item:focus-within > .sub-menu.services-mega-v2 {
    top: 64px !important;
  }
}

/* ============================================================
   HEADER PIN CONTRACT — fixed from first paint, logo full height.
   Must stay LAST so it wins over every legacy/absolute/sticky rule.
   - Desktop/mobile bars are fixed at all scroll positions (no more
     absolute -> fixed swap that made the bar "disappear" on scroll).
   - body gets top padding equal to the visible bar so page content
     is never hidden underneath.
   - z-index must clear the page content that sits directly beneath
     the bar. It was `1`, which put the header BELOW the homepage hero:
     `#owl-demo` is `position: relative` and its `.st-visual` layer is
     `z-index: 1`, so with equal z-index the later-in-DOM hero painted
     over the bar and swallowed every hover, and the dropdown panel
     (a fixed-position child) could not rise above it either. 1000
     keeps the bar above all page content while staying under the
     mega panel's own 1199 and the modal layer (1060).
   ============================================================ */
#header .menu-wrap:not(.mobile),
.menu-wrap:not(.mobile) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  height: 76px !important;
  min-height: 76px !important;
  padding: 4px 0 !important;
}
#header .menu-wrap:not(.mobile).fixed,
.menu-wrap:not(.mobile).fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  height: 76px !important;
  padding: 3px 0 !important;
}
/* Logo: fills the 66px content box (76 - 2x5), sharp at full height. */
#header .menu-wrap:not(.mobile) .header-logo-col,
.menu-wrap:not(.mobile) .header-logo-col { height: 66px !important; }
#header .menu-wrap:not(.mobile) .header-logo-col a,
.menu-wrap:not(.mobile) .header-logo-col a { height: 66px !important; max-width: 220px !important; }
#header .menu-wrap:not(.mobile) .header-logo-col img.newlogo,
#header .menu-wrap:not(.mobile) .header-logo-col img.newlogo.logosize,
.menu-wrap:not(.mobile) .header-logo-col img.newlogo,
.menu-wrap:not(.mobile) .header-logo-col img.newlogo.logosize,
#header img.newlogo,
img.newlogo {
  width: auto !important;
  max-width: none !important;
  height: 120px !important;
  max-height: 120px !important;
  margin-left: -20px !important;
}
/* Reserve header space so the fixed bar never covers the hero. */
body { padding-top: 76px !important; }
@media (min-width: 768px) and (max-width: 991px) {
  #header .menu-wrap:not(.mobile),
  .menu-wrap:not(.mobile) { height: 64px !important; min-height: 64px !important; padding: 4px 0 !important; }
  #header .menu-wrap:not(.mobile) .header-logo-col,
  .menu-wrap:not(.mobile) .header-logo-col,
  #header .menu-wrap:not(.mobile) .header-logo-col a,
  .menu-wrap:not(.mobile) .header-logo-col a { height: 56px !important; }
  #header .menu-wrap:not(.mobile) .header-logo-col img.newlogo,
  #header .menu-wrap:not(.mobile) .header-logo-col img.newlogo.logosize,
  .menu-wrap:not(.mobile) .header-logo-col img.newlogo,
  .menu-wrap:not(.mobile) .header-logo-col img.newlogo.logosize { height: 56px !important; max-height: 56px !important; }
  body { padding-top: 64px !important; }
}
@media (max-width: 767px) {
  body { padding-top: 55px !important; }
}