/* Header nav tabs + Services mega — brand red (#EE3D25) underline on hover */

.header .nav .head p {
  position: relative;
  display: inline-block;
}

.header .nav .head p::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.28vw;
  height: 2px;
  background: #ee3d25;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.header .nav .head:hover p::after,
.header .nav .head:focus-visible p::after,
.header .nav .head.is-open p::after,
.header .nav .head.active p::after,
.header.services-hover .nav .head.services p::after,
.header.company-hover .nav .head.company p::after,
.header.portfolio-hover .nav .head.portfolio p::after {
  transform: scaleX(1);
}

/* Sticky header — stay visible while scrolling (all pages) */
.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}
.header.header--hidden {
  transform: none !important;
}

/* Portfolio: no mega dropdown — plain link only (site-wide) */
.header .menu-desc-2,
#menu-desc-2 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.header.portfolio-hover .line-2 .menu-desc-2 {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mega open: white panel extends under bar — keep bar light + dark nav (readable) */
.header.services-hover .line-2,
.header.company-hover .line-2 {
  background: #fff !important;
  background-color: #fff !important;
}
.header.services-hover .line-2:before,
.header.company-hover .line-2:before {
  opacity: 0 !important;
}
.header:has(.header-open-btn.active) .line-2 {
  background: #233058 !important;
  background-color: #233058 !important;
}
.header:has(.header-open-btn.active) .line-2:before {
  opacity: 0 !important;
}

/* Top nav labels: navy on white mega (was white-on-white = invisible) */
.header.services-hover .nav .head,
.header.services-hover .nav .head p,
.header.company-hover .nav .head,
.header.company-hover .nav .head p,
.header.services-hover .nav .head:hover,
.header.services-hover .nav .head:hover p,
.header.company-hover .nav .head:hover,
.header.company-hover .nav .head:hover p,
.header.services-hover .nav .head.services,
.header.services-hover .nav .head.services p,
.header.company-hover .nav .head.company,
.header.company-hover .nav .head.company p {
  color: #233058 !important;
}

/* Services icon: dark mark on white mega bar */
.header.services-hover .nav .head.services span,
.header.company-hover .nav .head.services span,
.header.services-hover:not(.dark-block-bg) .nav .head.services span,
.header.company-hover:not(.dark-block-bg) .nav .head.services span {
  background: url("../img/service-icon-black.svg") center center / cover no-repeat !important;
  filter: none !important;
}

/* Logo: full-colour on white mega bar (do not invert to white) */
.header.services-hover .logo-box img,
.header.company-hover .logo-box img,
.header.services-hover:not(.dark-block-bg) .logo-box img,
.header.company-hover:not(.dark-block-bg) .logo-box img {
  object-fit: none !important;
  object-position: -9999px 0 !important;
  background: url("../img/Logo-Invention.png") center center / contain no-repeat !important;
  filter: none !important;
}

/* Hamburger → white on navy when mobile menu open (light pages) */
.header:has(.header-open-btn.active) .header-open-btn:before {
  background: url("../img/header-open-btn-white.svg") center center / cover no-repeat !important;
}
.header:has(.header-open-btn.active) .header-open-btn:after {
  background: url("../img/header-open-btn-close-white.svg") center center / cover no-repeat !important;
}

/* Services mega — white panel (clear contrast vs navy header) */
.header .menu-desc-1,
.header.services-hover .line-2 .menu-desc-1,
.header.dark-block-bg .menu-desc-1,
.header.dark-block-bg.services-hover .menu-desc-1 {
  background: #fff !important;
  background-color: #fff !important;
  --mg-fg: #233058 !important;
  --mg-mute: rgba(35, 48, 88, 0.62) !important;
  --mg-line: rgba(35, 48, 88, 0.12) !important;
  box-shadow: 0 18px 40px rgba(35, 48, 88, 0.12);
}
.header .menu-desc-1 .mg-head,
.header .menu-desc-1 .mg-list a,
.header .menu-desc-1 .mg-list a .mg-t,
.header .menu-desc-1 .mg-foot-note,
.header .menu-desc-1 .mg-foot a:not(.mg-all):not(.mg-cta) .mg-t {
  color: #233058 !important;
}
.header .menu-desc-1 .mg-n {
  color: #ee3d25 !important;
}
.header .menu-desc-1 .mg-col:hover {
  background: rgba(238, 61, 37, 0.05) !important;
}

/* Pill CTAs in mega foot — matching Royal Purple & Brand Red theme */
.header .menu-desc-1 .mg-foot a.mg-all {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border: 1.5px solid #8b78de !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(110, 92, 191, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.header .menu-desc-1 .mg-foot a.mg-all:hover,
.header .menu-desc-1 .mg-foot a.mg-all:focus-visible {
  background: #ee3d25 !important;
  border-color: #ee3d25 !important;
  box-shadow: 0 6px 18px rgba(238, 61, 37, 0.45) !important;
  transform: translate(-50%, calc(-50% - 3px)) scale(1.04) !important;
}

.header .menu-desc-1 .mg-foot a.mg-cta {
  background: #ee3d25 !important;
  border: 1.5px solid #ee3d25 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(238, 61, 37, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.header .menu-desc-1 .mg-foot a.mg-cta:hover,
.header .menu-desc-1 .mg-foot a.mg-cta:focus-visible {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border-color: #8b78de !important;
  box-shadow: 0 6px 18px rgba(110, 92, 191, 0.45) !important;
  transform: translateY(calc(-50% - 3px)) scale(1.04) !important;
}

.header .menu-desc-1 .mg-foot a.mg-all .mg-t,
.header .menu-desc-1 .mg-foot a.mg-cta .mg-t,
.header .menu-desc-1 .mg-foot a.mg-all:hover .mg-t,
.header .menu-desc-1 .mg-foot a.mg-cta:hover .mg-t {
  color: #fff !important;
}

/* Header CONTACT US — Brand Red default, Royal Purple gradient hover with lift */
.header #header-btn,
.header #header-btn.white-btn,
.header #header-btn.accent-btn,
.header a.white-btn#header-btn {
  background: #ee3d25 !important;
  border: 1.5px solid #ee3d25 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(238, 61, 37, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.header #header-btn p,
.header #header-btn.white-btn p,
.header #header-btn.accent-btn p,
.header a.white-btn#header-btn p {
  color: #fff !important;
}
.header #header-btn span,
.header #header-btn:hover span {
  filter: brightness(0) invert(1) !important;
}
.header #header-btn:hover,
.header #header-btn.white-btn:hover,
.header #header-btn.accent-btn:hover,
.header a.white-btn#header-btn:hover {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border-color: #8b78de !important;
  box-shadow: 0 8px 24px rgba(110, 92, 191, 0.5) !important;
  transform: translateY(-3px) scale(1.03) !important;
}
.header #header-btn:hover p,
.header #header-btn.white-btn:hover p,
.header #header-btn.accent-btn:hover p,
.header a.white-btn#header-btn:hover p {
  color: #fff !important;
}

/* Services mega list — underline instead of red fill */
.header .menu-desc-1 .mg-list a:hover,
.header .menu-desc-1 .mg-list a:focus-visible,
.header .menu-desc-1 .mg-list a.is-current {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.header .menu-desc-1 .mg-list a:hover .mg-t,
.header .menu-desc-1 .mg-list a:focus-visible .mg-t,
.header .menu-desc-1 .mg-list a.is-current .mg-t {
  color: #233058 !important;
}

.header .menu-desc-1 .mg-list a .mg-t {
  position: relative;
  display: inline-block;
}

.header .menu-desc-1 .mg-list a .mg-t::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12vw;
  height: 2px;
  background: #ee3d25;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.header .menu-desc-1 .mg-list a:hover .mg-t::after,
.header .menu-desc-1 .mg-list a:focus-visible .mg-t::after,
.header .menu-desc-1 .mg-list a.is-current .mg-t::after {
  transform: scaleX(1);
}

@media (max-width: 1024px) {
  .header .nav .head p::after {
    bottom: -1.2vw;
    height: 2px;
  }

  /* Mobile: header bar is CLEAN WHITE with black logo & black hamburger */
  .header,
  .header .line-2,
  .header .line-1,
  .header.dark-block-bg,
  .header.dark-block-bg .line-2,
  .header.dark-block-bg .line-1,
  .header:has(.header-open-btn.active) .line-2 {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(10, 8, 3, 0.08) !important;
  }
  .header:before,
  .header:after,
  .header .line-2:before,
  .header .line-2:after,
  .header .line-1:before,
  .header .line-1:after,
  .header.dark-block-bg:before,
  .header.dark-block-bg:after,
  .header.dark-block-bg .line-2:before,
  .header.dark-block-bg .line-2:after {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
  }
  .header .logo-box img,
  .header.dark-block-bg .logo-box img,
  .header:has(.header-open-btn.active) .logo-box img {
    object-fit: none !important;
    object-position: -9999px 0 !important;
    background: url("../img/Logo-Invention.png") center center / contain no-repeat !important;
    filter: none !important;
  }
  .header .header-open-btn:before,
  .header.dark-block-bg .header-open-btn:before,
  .header:has(.header-open-btn.active) .header-open-btn:before {
    background: url("../img/header-open-btn-black.svg") center center / cover no-repeat !important;
  }
  .header .header-open-btn:after,
  .header.dark-block-bg .header-open-btn:after,
  .header:has(.header-open-btn.active) .header-open-btn:after {
    background: url("../img/header-open-btn-close-black.svg") center center / cover no-repeat !important;
  }

  /* Mobile menu drawer: CLEAN WHITE background with dark text */
  .mob-menu,
  .mob-menu.active,
  .mob-menu.dark-block-bg {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0a0803 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  }
  .mob-menu:before,
  .mob-menu.dark-block-bg:before {
    opacity: 0.05 !important;
  }
  .mob-menu .box .head .h3,
  .mob-menu .box .head .h3 a,
  .mob-menu .home-nav,
  .mob-menu .blog-nav,
  .mob-menu .home-nav p,
  .mob-menu .blog-nav p,
  .mob-menu .up a,
  .mob-menu .up p {
    color: #0a0803 !important;
  }
  .mob-menu .box .close svg path {
    stroke: #0a0803 !important;
  }
  .mob-menu .up .home-nav svg path,
  .mob-menu .up .blog-nav svg path {
    fill: #ee3d25 !important;
  }
  .mob-menu .box .text .p p,
  .mob-menu .box .text .p a {
    color: #233058 !important;
  }
  .mob-menu .box .text .p a:hover,
  .mob-menu .box .text .p a.is-current {
    color: #ee3d25 !important;
  }
  .mob-menu .box .text .p p.grp {
    color: rgba(35, 48, 88, 0.6) !important;
  }
  .mob-menu .bottom .accent-btn,
  .mob-menu .accent-btn {
    background: #ee3d25 !important;
    border-color: #ee3d25 !important;
    border-radius: 8px !important;
  }
  .mob-menu .bottom .accent-btn p,
  .mob-menu .accent-btn p,
  .mob-menu .accent-btn:hover p {
    color: #ffffff !important;
  }
  .mob-menu .bottom .accent-btn span,
  .mob-menu .accent-btn span {
    filter: none !important;
    background-image: url("../img/accent-btn-arrow.svg") !important;
  }
}

/* Services mega titles size increase (01 Mobile App Development, etc.) */
.header .menu-desc-1 .mg-head {
  font-size: clamp(14px, 1.05vw, 17px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.35 !important;
}
.header .menu-desc-1 .mg-n {
  font-size: clamp(14px, 1.08vw, 18px) !important;
  font-weight: 800 !important;
}

/* ===== HEADER NAV HOVER & THEME SYNC (WHITE ON DARK, DARK ON LIGHT, RED UNDERLINE ONLY) ===== */
/* 1. Dark sections: text ALWAYS stays pure white (normal & hover) */
.header.dark-block-bg .nav .head,
.header.dark-block-bg .nav .head p,
.header.dark-block-bg .nav .head:hover,
.header.dark-block-bg .nav .head:hover p,
.header.dark-block-bg .nav .head:focus-visible,
.header.dark-block-bg .nav .head:focus-visible p,
.header:not(.dark-block-bg) .nav .head:hover,
.header:not(.dark-block-bg) .nav .head:hover p {
  /* fallback transition */
}

/* Base dark header text */
.header.dark-block-bg .nav .head,
.header.dark-block-bg .nav .head p,
.header.dark-block-bg .nav .head:hover,
.header.dark-block-bg .nav .head:hover p,
.header.dark-block-bg .nav .head:focus-visible,
.header.dark-block-bg .nav .head:focus-visible p {
  color: #ffffff !important;
}

/* 2. Light sections: text ALWAYS stays dark (normal & hover - NEVER turn white or red) */
.header:not(.dark-block-bg) .nav .head,
.header:not(.dark-block-bg) .nav .head p,
.header:not(.dark-block-bg) .nav .head:hover,
.header:not(.dark-block-bg) .nav .head:hover p,
.header:not(.dark-block-bg) .nav .head:focus-visible,
.header:not(.dark-block-bg) .nav .head:focus-visible p {
  color: #0a0803 !important;
}

/* 3. Mega-dropdown open: white bar, text ALWAYS stays dark (normal & hover) */
.header.services-hover .nav .head,
.header.services-hover .nav .head p,
.header.company-hover .nav .head,
.header.company-hover .nav .head p,
.header.services-hover .nav .head:hover,
.header.services-hover .nav .head:hover p,
.header.company-hover .nav .head:hover,
.header.company-hover .nav .head:hover p {
  color: #233058 !important;
}

/* Specific item protection: Industries, Portfolio, Company, Case Studies (only when mega menu is closed) */
.header.dark-block-bg:not(.services-hover):not(.company-hover) .nav a.head:hover,
.header.dark-block-bg:not(.services-hover):not(.company-hover) .nav a.head:hover p,
.header.dark-block-bg:not(.services-hover):not(.company-hover) #header-industries:hover,
.header.dark-block-bg:not(.services-hover):not(.company-hover) #header-industries:hover p {
  color: #ffffff !important;
}

/* Force dark text for all nav items when mega menu is open (white header background) */
.header.services-hover .nav .head,
.header.services-hover .nav .head p,
.header.services-hover .nav .head:hover,
.header.services-hover .nav .head:hover p,
.header.services-hover .nav a.head,
.header.services-hover .nav a.head p,
.header.services-hover .nav a.head:hover,
.header.services-hover .nav a.head:hover p,
.header.company-hover .nav .head,
.header.company-hover .nav .head p,
.header.company-hover .nav .head:hover,
.header.company-hover .nav .head:hover p,
.header.company-hover .nav a.head,
.header.company-hover .nav a.head p,
.header.company-hover .nav a.head:hover,
.header.company-hover .nav a.head:hover p {
  color: #233058 !important;
}
.header:not(.dark-block-bg) .nav a.head:hover,
.header:not(.dark-block-bg) .nav a.head:hover p,
.header:not(.dark-block-bg) #header-industries:hover,
.header:not(.dark-block-bg) #header-industries:hover p {
  color: #0a0803 !important;
}

/* 4. Red underline on hover remains active for all items */
.header .nav .head p::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -0.28vw !important;
  height: 2px !important;
  background: #ee3d25 !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.25s ease !important;
  pointer-events: none !important;
}

.header .nav .head:hover p::after,
.header .nav .head:focus-visible p::after,
.header .nav .head.is-open p::after,
.header .nav .head.active p::after,
.header.services-hover .nav .head.services p::after,
.header.company-hover .nav .head.company p::after,
.header.portfolio-hover .nav .head.portfolio p::after {
  transform: scaleX(1) !important;
}

/* ===== DESKTOP SAFEGUARD (min-width: 1025px) ===== */
@media (min-width: 1025px) {
  .header .line-2 .nav {
    display: flex !important;
  }
  .header #header-btn,
  .header #header-btn.white-btn {
    display: inline-flex !important;
  }
  .header .header-open-btn {
    display: none !important;
  }
}

/* Tablet header: keep hamburger through 1024px, give the logo room */
@media (max-width: 1024px) {
  .header .line-2 {
    min-height: 64px;
    overflow: visible !important;
  }
  .header .logo-box {
    display: flex;
    align-items: center;
    min-height: 48px;
    overflow: visible !important;
  }
  .header .logo-box img,
  .header.dark-block-bg .logo-box img,
  .header:has(.header-open-btn.active) .logo-box img {
    height: 40px !important;
    width: 132px !important;
    max-width: 132px !important;
  }
}