/**
 * Wimira header — Wimira layout & interactions, red theme.
 */

/* ── Keyframes (Wimira-matched) ── */
@keyframes wimira-fade-anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wimira-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wimira-progress1 {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes wimira-header-btn-gradient {
  to {
    transform: translateX(-90%);
  }
}

@keyframes wimira-header-btn-move {
  to {
    transform: translateX(0);
  }
}

@keyframes wimira-header-btn-text {
  to {
    transform: translateX(18px);
  }
}

/* ── Fixed header shell ── */
.header--new {
  position: fixed;
  top: calc(var(--admin-bar-offset) + var(--admin-bar-gap));
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 0 rgba(30, 29, 40, 0);
  transition:
    background-color 0.25s var(--wimira-ease),
    box-shadow 0.25s var(--wimira-ease);
  isolation: isolate;
}

/* Solid + lifted the instant scrolling starts (see header.js) — the
   resting state above stays translucent/blurred for the hero-overlay
   look, this is the immediate tactile feedback the user asked for. */
.header--new.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 24px rgba(30, 29, 40, 0.08);
}

.header--new::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.header--new__row,
.header--new__inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}

.header--new__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .header--new__row,
  .header--new__inner {
    padding: 10px 0;
  }
}

@media (min-width: 961px) {
  .header--new__row,
  .header--new__inner {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .header--new__info {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
  }

  /* EXPERIMENT: matching site-standard padding to test overlap. */
  .header--new .container-n {
    padding-left: 56px;
    padding-right: 56px;
  }
}

@media (min-width: 1600px) {
  /* Matches the site-standard .container-n padding used by every other
     section (hero, trusted-by, etc.) — see main.css — so the header's
     edge spacing is consistent with the rest of the page at wide widths. */
  .header--new .container-n {
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* No cap up to 1920px: the header stays genuinely full width there, same
   as every other section (hero, trusted-by, etc.) which use the site's
   standard .container-n. Past 1920px, .container-n (and this header
   override) cap at 1920px and center — see main.css. */
@media (min-width: 1921px) {
  .header--new .container-n {
    max-width: 1920px;
  }
}

.header--new__mask {
  height: calc(var(--header-height) + var(--admin-bar-offset) + var(--admin-bar-gap));
}

/* Homepage: clear the fixed header + 10px breathing room before the hero. */
body.home .header--new__mask {
  height: calc(var(--header-height) + var(--admin-bar-offset) + var(--admin-bar-gap) + 10px);
}

/* ── Preloader ── */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.site-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.site-preloader__video {
  display: block;
  width: 500px;
  max-width: 70vw;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .site-preloader {
    display: none;
  }
}

/* ── Logo ── */
.header--new__logo {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
  color: var(--wimira-red);
  text-decoration: none;
  outline: 0;
  position: relative;
  max-width: 160px;
}

.header--new__logo-img-wrap {
  display: block;
  position: relative;
  line-height: 0;
  max-width: 100%;
}

/* One rule for theme logo + Customizer logo (avoids full intrinsic size). */
.header--new__logo img,
.header--new__logo-img,
.header--new__logo .custom-logo {
  display: block;
  width: auto !important;
  max-width: 150px !important;
  height: auto !important;
  max-height: 40px !important;
}

@media (min-width: 768px) {
  .header--new__logo img,
  .header--new__logo-img,
  .header--new__logo .custom-logo {
    max-width: 150px !important;
    max-height: 40px !important;
  }
}

/* ── Info bar (nav + utilities) ── */
.header--new__info {
  display: none;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 961px) {
  .header--new__info {
    display: flex;
  }
}

/* ── Primary nav ── */
.header__menu--newWrap {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 960px) {
  body.mobile-menu-active {
    overflow: hidden;
  }

  body.mobile-menu-active .header--new {
    z-index: 101;
    background: #fff;
  }

  /* Dropdown card, not a full-screen takeover: pinned below the header row,
     rounded bottom corners, its own shadow — matches the Figma comp rather
     than the previous full-height dark overlay. */
  body.mobile-menu-active .header--new__info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: calc(57px + var(--admin-bar-offset) + var(--admin-bar-gap));
    left: 0;
    right: 0;
    max-height: calc(100vh - 57px - var(--admin-bar-offset) - var(--admin-bar-gap));
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4px 0 20px;
    background-color: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 24px 48px rgba(30, 29, 40, 0.18);
    overflow-y: auto;
    z-index: 99;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-menu-active .header__menu--newWrap {
    display: block;
    width: 100%;
    margin: 0;
    position: static;
    padding: 0;
    background: transparent;
  }

  /* Repurposed as the panel's own "Contact us" (the row-level
     .header--new__btn-wrap--mobile is hidden below while the panel is
     open, so there's no duplicate). */
  body.mobile-menu-active .header--new__btn-wrap--desktop {
    display: flex;
    width: 100%;
    /* Drop desktop margin-left:8px so Contact lines up with Search. */
    margin: 0;
    box-sizing: border-box;
  }

  body.mobile-menu-active .header--new__btn-wrap--mobile {
    display: none;
  }

  /* Always-visible pill field, not a toggle-triggered overlay. */
  body.mobile-menu-active .header--new__search {
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  body.mobile-menu-active .header--new__search .search--new__icon-wrap {
    display: none;
  }

  body.mobile-menu-active .header--new__search #site-search-panel[hidden],
  body.mobile-menu-active .header--new__search #site-search-panel {
    display: block;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 16px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    z-index: auto;
    box-sizing: border-box;
  }

  body.mobile-menu-active .header--new__search .search--new__form {
    width: 100%;
    margin: 0;
  }

  body.mobile-menu-active .search--new__field-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 16px;
    background: #f7f7fa;
  }

  body.mobile-menu-active .search--new__dropdown {
    margin-top: 12px;
    padding: 0 0 8px;
  }

  .header__menu--new > li:hover > .dropdown-menu__wrapper {
    display: none;
  }
}

@media (min-width: 961px) {
  .header__menu--newWrap {
    margin-left: 6px;
    margin-right: auto;
  }
}

@media (min-width: 1280px) {
  .header__menu--newWrap {
    margin-left: 6px;
  }
}

@media (min-width: 1440px) {
  .header__menu--newWrap {
    margin-left: 16px;
  }
}

@media (min-width: 961px) {
  /* Recovers space traded away by matching container-n's edge padding to
     the site-standard 56px (see the .header--new .container-n rules
     above) — without this the nav doesn't fit at 961-1439px specifically
     (verified empirically). No upper bound: rather than add another
     narrow sub-band at the next breakpoint edge (a recurring source of
     overlap bugs in this file), just keep it everywhere ≥961px — 2px vs
     the previous 6-16px costs nothing visible at wide widths. Comes after
     the rules above so it wins on source order. */
  .header__menu--newWrap {
    margin-left: 2px;
  }
}

/* No further margin-left growth past 1440px: .header--new .container-n
   caps out at max-width:1600px beyond 1600px viewport width (see above),
   so the content column itself stops growing — it doesn't need an
   increasingly large push to stay clear of the logo. */

.header__menu--new {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Keep tight below 1280 — nav barely fits at 961–1279. */
  column-gap: 2px;
  /* No position:relative — mega panels anchor to .header--new for full-width layout */
}

@media (min-width: 1280px) {
  .header__menu--new {
    column-gap: 10px;
  }
}

@media (min-width: 1440px) {
  .header__menu--new {
    column-gap: 14px;
  }
}

.header__menu--new > li {
  position: static;
}

.header__menu--new .nav-link {
  display: flex;
  align-items: center;
  position: relative;
  outline: 0;
  text-decoration: none;
  color: var(--wimira-ink);
  padding: 16px 0;
}

.header__menu--new .nav-link:focus-visible {
  outline: 2px solid var(--wimira-red);
  outline-offset: 4px;
  border-radius: 4px;
}


@media (min-width: 1280px) {
  .header__menu--new .nav-link {
    padding: 24px 8px;
  }
}

@media (min-width: 1440px) {
  .header__menu--new .nav-link {
    padding: 16px 16px;
  }
}

/* No further growth past 1440px: .header--new .container-n caps out at
   max-width:1440px beyond that viewport width, so the content column
   itself stops growing — nav-link padding doesn't need to keep scaling
   with a viewport that no longer changes the available space. */

.header__menu--new .nav-link .menu-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  position: relative;
}

@media (min-width: 1280px) {
  .header__menu--new .nav-link .menu-title {
    font-size: 14px;
  }
}

@media (min-width: 1440px) {
  .header__menu--new .nav-link .menu-title {
    font-size: 14px;
  }
}

.header__menu--new .nav-link .menu-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: 1px;
  background: var(--wimira-red);
  opacity: 0;
  transform: scaleX(0);
  transition:
    opacity 0.3s,
    transform 0.3s;
}

@media (min-width: 1280px) {
  .header__menu--new .nav-link .menu-title::before {
    bottom: -12px;
  }
}

@media (min-width: 1440px) {
  .header__menu--new .nav-link .menu-title::before {
    bottom: -16px;
  }
}

.header__menu--new > li:hover > .nav-link .menu-title::before,
.header__menu--new > li.is-open > .nav-link .menu-title::before,
.header__menu--new > li.is-current > .nav-link .menu-title::before,
.header__menu--new > li.current-menu-item > .nav-link .menu-title::before,
.header__menu--new > li.current-menu-ancestor > .nav-link .menu-title::before,
.header__menu--new > li.current_page_item > .nav-link .menu-title::before,
.header__menu--new > li.current_page_ancestor > .nav-link .menu-title::before,
.header__menu--new > li.current_page_parent > .nav-link .menu-title::before {
  opacity: 1;
  transform: scaleX(1);
}

/* Active = same type as idle; only the red underline marks the page. */
.header__menu--new > li.is-current > .nav-link .menu-title,
.header__menu--new > li.current-menu-item > .nav-link .menu-title,
.header__menu--new > li.current-menu-ancestor > .nav-link .menu-title,
.header__menu--new > li.current_page_item > .nav-link .menu-title,
.header__menu--new > li.current_page_ancestor > .nav-link .menu-title,
.header__menu--new > li.current_page_parent > .nav-link .menu-title {
  color: inherit;
  font-weight: 500;
}

.header__menu--new .dropdown-menu-opener {
  display: none;
}

.header__menu--new > li.services .nav-link .menu-title,
.header__menu--new > li.solutions .nav-link .menu-title,
.header__menu--new > li.industries .nav-link .menu-title,
.header__menu--new > li.products .nav-link .menu-title,
.header__menu--new > li.resources .nav-link .menu-title,
.header__menu--new > li.clients .nav-link .menu-title,
.header__menu--new > li.about-us .nav-link .menu-title {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

@media (min-width: 1280px) {
  .header__menu--new > li.services .nav-link .menu-title,
  .header__menu--new > li.solutions .nav-link .menu-title,
  .header__menu--new > li.industries .nav-link .menu-title,
  .header__menu--new > li.products .nav-link .menu-title,
  .header__menu--new > li.resources .nav-link .menu-title,
  .header__menu--new > li.clients .nav-link .menu-title,
  .header__menu--new > li.about-us .nav-link .menu-title {
    gap: 4px;
  }
}

.header__menu--new > li.services .nav-link .menu-title::after,
.header__menu--new > li.solutions .nav-link .menu-title::after,
.header__menu--new > li.industries .nav-link .menu-title::after,
.header__menu--new > li.products .nav-link .menu-title::after,
.header__menu--new > li.resources .nav-link .menu-title::after,
.header__menu--new > li.clients .nav-link .menu-title::after,
.header__menu--new > li.about-us .nav-link .menu-title::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}

.header__menu--new > li.services:hover .nav-link .menu-title::after,
.header__menu--new > li.services.is-open .nav-link .menu-title::after,
.header__menu--new > li.solutions:hover .nav-link .menu-title::after,
.header__menu--new > li.solutions.is-open .nav-link .menu-title::after,
.header__menu--new > li.industries:hover .nav-link .menu-title::after,
.header__menu--new > li.industries.is-open .nav-link .menu-title::after,
.header__menu--new > li.products:hover .nav-link .menu-title::after,
.header__menu--new > li.products.is-open .nav-link .menu-title::after,
.header__menu--new > li.resources:hover .nav-link .menu-title::after,
.header__menu--new > li.resources.is-open .nav-link .menu-title::after,
.header__menu--new > li.clients:hover .nav-link .menu-title::after,
.header__menu--new > li.clients.is-open .nav-link .menu-title::after,
.header__menu--new > li.about-us:hover .nav-link .menu-title::after,
.header__menu--new > li.about-us.is-open .nav-link .menu-title::after {
  transform: rotate(225deg) translateY(2px);
}

.header__menu--new > li.nav-link--pill {
  display: flex;
  align-items: center;
}

.header__menu--new > li.nav-link--pill .nav-link {
  padding: 6px 10px;
  border: 1px solid var(--wimira-border);
  border-radius: 20px;
  transition: border-color 0.3s, background-color 0.3s;
}

@media (min-width: 1280px) {
  .header__menu--new > li.nav-link--pill .nav-link {
    padding: 6px 12px;
  }
}

/* Triggered off the <li>'s own :hover/.is-open rather than the nav-link's,
   because once its dropdown is open, the panel's full-width invisible
   hover-bridge (see .dropdown-menu__wrapper::before) sits directly above
   it and can end up the topmost element under the cursor at this compact
   header height — a sibling, not an ancestor of .nav-link, so .nav-link
   itself would silently stop matching :hover mid-hover (verified). The
   <li> stays hovered throughout since the bridge is still its descendant. */
.header__menu--new > li.nav-link--pill:hover .nav-link,
.header__menu--new > li.nav-link--pill.is-open .nav-link,
.header__menu--new > li.nav-link--pill:focus-within .nav-link {
  background-color: var(--wimira-red);
  border-color: var(--wimira-red);
}

/* Pill uses a solid fill on hover instead of the underline every other
   nav item gets — higher specificity than the shared .menu-title::before
   rule above wins regardless of source order. */
.header__menu--new > li.nav-link--pill:hover > .nav-link .menu-title::before,
.header__menu--new > li.nav-link--pill.is-open > .nav-link .menu-title::before,
.header__menu--new > li.nav-link--pill:focus-within > .nav-link .menu-title::before {
  opacity: 0;
  transform: scaleX(0);
}

/* Scoped to > .nav-link (not a bare descendant) — .menu-title also appears
   inside this <li>'s dropdown panel (a sibling of .nav-link, not a
   descendant of it), and an unscoped selector here was winning against the
   panel's own hover-title rule on specificity, forcing every dropdown card
   title to white (verified via computed-style inspection). */
.header__menu--new > li.nav-link--pill:hover > .nav-link .menu-title,
.header__menu--new > li.nav-link--pill.is-open > .nav-link .menu-title,
.header__menu--new > li.nav-link--pill:focus-within > .nav-link .menu-title {
  color: #fff;
}

.header__menu--new > li.nav-link--pill:hover > .nav-link .menu-title__icon,
.header__menu--new > li.nav-link--pill.is-open > .nav-link .menu-title__icon,
.header__menu--new > li.nav-link--pill:focus-within > .nav-link .menu-title__icon {
  color: #fff;
}

.header__menu--new > li.nav-link--pill .menu-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px !important;
}

@media (min-width: 1440px) {
  /* Below 1440px there isn't enough room left for one line without the
     pill overlapping the Contact us button now that container-n matches
     the site-standard 56px edge padding (verified empirically) — let it
     wrap there; the icon/padding/gap trims elsewhere keep that wrap to
     two lines instead of three. */
  .header__menu--new > li.nav-link--pill .menu-title {
    white-space: nowrap;
  }
}

.header__menu--new > li.nav-link--pill .menu-title__icon {
  flex: 0 0 auto;
  color: var(--wimira-red);
}

/* Leading icon shown only in the mobile drill-down panel (see
   body.mobile-menu-active overrides further down) — desktop nav has no
   per-item icons. */
.menu-title__icon-mobile {
  display: none;
}

@media (min-width: 961px) and (max-width: 1279px) {
  /* nav-link padding squeezed to minimal to fit nav at this breakpoint
     while maintaining side padding for centered, balanced layout. Placed
     after the unconditional base rules above (not up near the other
     961-1279px block near .header__menu--new) because equal-specificity
     rules resolve by source order regardless of media query — putting an
     override before the base rule it's meant to override means the base
     rule silently wins. */
  .header__menu--new .nav-link {
    padding: 24px 4px;
  }

  .header__menu--new {
    column-gap: 4px;
  }

  .header__menu--new > li.nav-link--pill .nav-link {
    padding: 6px 6px;
  }

  .header__menu--new > li.nav-link--pill .menu-title__icon {
    display: none;
  }
}

@media (min-width: 1200px) and (max-width: 1279px) {
  /* Narrower sub-band of the 961-1279px tier above — a touch more room
     given back at this width before the 1280px tier takes over. Placed
     after that block (not merged into it) so it wins by source order at
     equal specificity. */
  .header__menu--new .nav-link {
    padding: 24px 5px;
  }

  .header__menu--new .nav-link .menu-title {
    font-size: 12.5px;
  }
}

@media (min-width: 961px) and (max-width: 1099px) {
  /* Same threshold gap as the container-n narrow band above (see that
     comment) — a bit more trimmed off the nav itself and the pill so
     "AI Solutions Advisor" doesn't overlap Contact us. Column-gap and pill
     padding here are compound-class/high-specificity or positioned after
     their base rules already, so this is safe wherever it sits. */
  .header__menu--new {
    column-gap: 2px;
  }

  .header__menu--new > li.nav-link--pill .nav-link {
    padding: 6px 3px;
  }

  .header--new__btn-wrap.header--new__btn-wrap--desktop {
    margin-left: 4px;
  }
}

@media (min-width: 961px) and (max-width: 1049px) {
  /* Matching container-n to the site-standard 56px edge padding (see
     above) reopened an overlap right at the bottom of this tier — still
     -34px short at 961px and -18px at 1000px even with every other trim
     in this file (verified empirically, then re-verified after each of
     these cuts — the deficit only closes with all of them combined).
     Shaves nav item padding/gap and the logo (the fallback
     .header--new__logo-img — this install has no WP Customizer logo set,
     so .custom-logo-link img never matches and doesn't need trimming
     here). The search icon gets its own cut further down, right after
     its own base rule, to avoid yet another source-order miss. */
  .header__menu--new .nav-link {
    padding: 24px 2px;
  }

  .header__menu--new {
    column-gap: 1px;
  }

  .header--new__logo img,
  .header--new__logo-img,
  .header--new__logo .custom-logo {
    max-width: 120px !important;
    max-height: 34px !important;
  }
}

@media (min-width: 961px) and (max-width: 999px) {
  /* Down to -4px right at 961px itself with every trim above applied
     (verified empirically) — one more small cut isolated to this exact
     edge rather than shaving the 1000-1049px range further, which is
     already comfortably positive. */
  .header--new__logo img,
  .header--new__logo-img,
  .header--new__logo .custom-logo {
    max-width: 104px !important;
    max-height: 30px !important;
  }
}

/* ── Mega dropdown panels (Wimira: full header width, inset margins) ── */
.header__menu--new > li > .dropdown-menu__wrapper {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: -1px;
  margin-left: 16px;
  margin-right: 16px;
  z-index: 2;
}

/* Invisible hover bridge: .dropdown-menu__wrapper sits at top:100% of
   .header--new (the fixed ancestor it anchors to for full-width layout),
   not of the <li> itself. Depending on breakpoint and whether a sibling nav
   item wraps to two lines, the header row can be taller than the <li>'s own
   nav-link, leaving a dead strip between the trigger and the panel where the
   mouse hovers neither — silently closing the dropdown while moving toward
   it. A generous invisible strip above the panel (still a descendant of the
   <li>, so it keeps li:hover alive) bridges that gap regardless of its size. */
.header__menu--new > li > .dropdown-menu__wrapper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 40px;
}

@media (min-width: 768px) {
  .header__menu--new > li > .dropdown-menu__wrapper {
    margin-left: 24px;
    margin-right: 24px;
  }
}

@media (min-width: 961px) {
  .header__menu--new > li > .dropdown-menu__wrapper {
    margin-left: 8px;
    margin-right: 8px;
  }
}

@media (min-width: 1280px) {
  .header__menu--new > li > .dropdown-menu__wrapper {
    margin-left: 24px;
    margin-right: 24px;
  }
}

@media (min-width: 1600px) {
  .header__menu--new > li > .dropdown-menu__wrapper {
    margin-left: 168px;
    margin-right: 168px;
  }
}

@media (min-width: 1920px) {
  .header__menu--new > li > .dropdown-menu__wrapper {
    margin-left: 208px;
    margin-right: 208px;
  }
}

.header__menu--new > li:hover > .dropdown-menu__wrapper,
.header__menu--new > li.is-open > .dropdown-menu__wrapper,
.header__menu--new > li:focus-within > .dropdown-menu__wrapper {
  display: block;
}

/* Desktop: animate the mega panel open/close. The wrapper stays rendered
   (visibility swap instead of display:none) so opacity/transform can
   transition; the visibility delay keeps it interactive until the fade-out
   ends, and pointer-events guards the closed panel + its hover bridge from
   catching the mouse while invisible. */
@media (min-width: 961px) {
  .header__menu--new > li > .dropdown-menu__wrapper {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
      opacity 0.28s var(--wimira-ease),
      transform 0.28s var(--wimira-ease),
      visibility 0s linear 0.28s;
  }

  .header__menu--new > li:hover > .dropdown-menu__wrapper,
  .header__menu--new > li.is-open > .dropdown-menu__wrapper,
  .header__menu--new > li:focus-within > .dropdown-menu__wrapper {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      opacity 0.28s var(--wimira-ease),
      transform 0.28s var(--wimira-ease),
      visibility 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .header__menu--new > li > .dropdown-menu__wrapper {
      transition: none;
      transform: none;
    }
  }
}

/* Nested mega sub-panels (CSR) — always visible inside open mega */
.header__menu--new > li.about-us .dropdown-menu .dropdown-menu__wrapper {
  display: flex;
  position: static;
  margin: 0;
  left: auto;
  right: auto;
  top: auto;
  z-index: auto;
}

.header__menu--new > li > .dropdown-menu__wrapper > .dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(30, 29, 40, 0.1);
}

.header__menu--new .dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__menu--new .dropdown-item {
  display: block;
  text-decoration: none;
  color: var(--wimira-ink);
  outline: 0;
}

.header__menu--new .description {
  display: none;
  color: var(--wimira-muted);
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}

@media (min-width: 961px) {
  .header__menu--new .description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-width: 360px;
    margin-top: auto;
    font-size: 12px;
    line-height: 14px;
    height: 42px;
  }
}

.header__menu--new .long-title,
.header__menu--new .image-wrap {
  display: none;
}

.header__menu--new .icon-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 1px solid var(--wimira-red-muted);
  border-radius: 8px;
  background: var(--wimira-red-light);
  overflow: hidden;
  transition:
    background 0.35s var(--wimira-ease),
    border-color 0.35s var(--wimira-ease),
    box-shadow 0.35s var(--wimira-ease);
}

.header__menu--new .dropdown-menu .icon {
  filter: var(--wimira-icon-filter);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* :not(.intro-grid-mega__grid) on all four hover rules below: this
   solid-color-swap + sliding-arrow treatment was built for the plain
   dropdown lists (About Us CSR links etc). The icon-chip grid also
   carries the shared .dropdown-menu class for its list-reset, so without
   the exclusion this jarring effect bled into it too (verified — hovering
   a capability card flipped its pastel icon solid red and shoved the
   title sideways to make room for an arrow that doesn't fit that card
   style). The grid gets its own quieter hover treatment further down. */
.header__menu--new .dropdown-menu:not(.intro-grid-mega__grid) a:hover .icon,
.header__menu--new .dropdown-menu:not(.intro-grid-mega__grid) a:focus-visible .icon {
  filter: brightness(0) invert(1);
}

@media (min-width: 961px) {
  .header__menu--new .icon-wrap {
    display: flex;
  }
}

.header__menu--new .icon--placeholder {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--wimira-red);
  opacity: 0.85;
}

.header__menu--new .dropdown-menu a > .menu-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding-right: 25px;
  position: relative;
  transition:
    color 0.35s var(--wimira-ease),
    padding-left 0.35s var(--wimira-ease),
    padding-right 0.35s var(--wimira-ease);
}

.header__menu--new .dropdown-menu a > .menu-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: translateX(-10px);
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9h10M14 9l-4-4M14 9l-4 4' stroke='%23d1435b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition:
    opacity 0.35s var(--wimira-ease),
    transform 0.35s var(--wimira-ease);
}

.header__menu--new .dropdown-menu:not(.intro-grid-mega__grid) a:hover > .menu-title,
.header__menu--new .dropdown-menu:not(.intro-grid-mega__grid) a:focus-visible > .menu-title {
  color: var(--wimira-red);
  padding-left: 25px;
  padding-right: 0;
}

.header__menu--new .dropdown-menu:not(.intro-grid-mega__grid) a:hover > .menu-title::before,
.header__menu--new .dropdown-menu:not(.intro-grid-mega__grid) a:focus-visible > .menu-title::before {
  opacity: 1;
  transform: translateX(0);
}

.header__menu--new .dropdown-menu:not(.intro-grid-mega__grid) a:hover > .icon-wrap,
.header__menu--new .dropdown-menu:not(.intro-grid-mega__grid) a:focus-visible > .icon-wrap {
  background: var(--wimira-red-gradient);
  border-color: transparent;
}

.header__menu--new .dropdown-menu:not(.intro-grid-mega__grid) a:hover > .icon-wrap .icon--placeholder,
.header__menu--new
  .dropdown-menu:not(.intro-grid-mega__grid)
  a:focus-visible
  > .icon-wrap
  .icon--placeholder {
  background: #fff;
}

/* ── Icon-chip grid's own hover: quiet row highlight instead of the
   solid-color icon swap above — title turns red (already set elsewhere)
   and the whole card gets a soft tinted background so the row reads as
   interactive. Only actually reaches the .intro-grid-mega__grid--divided
   variant (AI Solutions Advisor) — the standard bordered-card variant has
   its own more specific hover rule (border + lift + shadow) further down
   that wins for everything else. */
/* ── Mega-panel accent — every category panel now shares the same red
   identity color (the Capabilities/services look) instead of each having
   its own hue, per explicit request. Nothing sets --mega-accent-rgb /
   --mega-accent-solid anymore, so every panel falls through to the
   rgba(var(--mega-accent-rgb, 226, 44, 40)) / var(--mega-accent-solid,
   var(--wimira-red)) fallbacks used throughout this file. */

/* ── Capabilities mega — intro panel + grid + contact bar (desktop only) ── */
@media (min-width: 961px) {
.intro-grid-mega__grid .dropdown-item:hover,
.intro-grid-mega__grid .dropdown-item:focus-visible {
  background: rgba(var(--mega-accent-rgb, 226, 44, 40), 0.1);
  border-radius: 8px;
}

.header__menu--new > li > .dropdown-menu__wrapper > .intro-grid-mega {
  display: grid;
  grid-template-columns: 34% 66%;
  /* minmax(0,1fr): the item row takes whatever space is left after the
     footer row (auto) claims its own height, capped by max-height below.
     The 0 minimum is required for the grid item to be allowed to shrink
     and actually scroll instead of just growing to fit its content. */
  grid-template-rows: minmax(0, 1fr) auto;
  /* Caps the whole panel (items + footer) to fit under the fixed header
     within the viewport — without this, a category with more items than
     Capabilities' 6 (e.g. Solutions' 12) runs off the bottom of the
     screen with its "Contact us" footer unreachable (verified: this
     genuinely happened before this fix). */
  max-height: calc(100vh - var(--header-height) - var(--admin-bar-offset) - var(--admin-bar-gap) - 24px);
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: var(--wimira-night);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.header__menu--new > li > .dropdown-menu__wrapper > .intro-grid-mega::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--mega-accent-rgb, 226, 44, 40)), transparent);
}

.intro-grid-mega__intro {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 40px 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.intro-grid-mega__eyebrow {
  display: block;
  margin-bottom: 12px;
  color: rgb(var(--mega-accent-rgb, 226, 44, 40));
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.intro-grid-mega__heading {
  margin: 0 0 16px;
  font-family: var(--wimira-font-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

.intro-grid-mega__desc {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #b8b7c9;
}

.intro-grid-mega__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 48px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition:
    background-color 0.3s var(--wimira-ease),
    color 0.3s var(--wimira-ease);
}

.intro-grid-mega__cta:hover,
.intro-grid-mega__cta:focus-visible {
  background: #fff;
  color: var(--wimira-ink);
}

/* Stat callout — fills the space left under the intro panel's CTA on
   categories whose item grid is a plain directory (e.g. Industries) with
   no room for per-item descriptions, instead of leaving that column
   visually empty next to a much taller grid. */
.intro-grid-mega__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.intro-grid-mega__stat dt {
  font-family: var(--wimira-font-heading);
  font-size: 32px;
  font-weight: 700;
  color: rgb(var(--mega-accent-rgb, 226, 44, 40));
}

.intro-grid-mega__stat dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #b8b7c9;
  max-width: 14ch;
}

.intro-grid-mega__grid {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: center;
  gap: 6px 22px;
  margin: 0;
  list-style: none;
}

/* This grid also carries the generic .dropdown-menu class (for the
   list-reset), whose own padding:0 (see that rule) is 2 classes deep and
   otherwise beats this rule's single class regardless of source order —
   match its specificity here so the grid's own padding actually applies. */
.intro-grid-mega__grid.dropdown-menu {
  padding: 22px;
}

/* Compact chip variant — for directory-style categories (e.g. Industries)
   that skip per-item descriptions on purpose; tighter rows and a smaller
   icon read as a deliberately dense list rather than an unfinished card
   grid with description text missing. */
.intro-grid-mega__grid--compact .dropdown-item {
  padding: 4px 10px;
}

.intro-grid-mega__grid--compact .icon-wrap {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
}

.intro-grid-mega__grid--compact .icon-wrap svg {
  width: 14px;
  height: 14px;
}

.intro-grid-mega__grid--compact .menu-title {
  font-size: 13.5px;
}

.intro-grid-mega__grid > .menu-item {
  /* No min-height:0 here (was previously used to keep the overall grid
     within its old height budget) — with each item now a bordered card,
     letting items shrink below their content's natural height compresses
     the card shorter than its own border+padding+description, so the
     description visually spills out past the (too-short) border into the
     next row (verified — reproduced at a constrained viewport height).
     Items should keep their full natural height; if the whole grid still
     doesn't fit, .intro-grid-mega__grid's own overflow-y:auto scrolls
     instead. */
  min-height: min-content;
}

.intro-grid-mega__grid .dropdown-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  height: 100%;
  box-sizing: border-box;
  gap: 2px 14px;
  color: #fff;
}

/* Borderless row per item (no card/box) — icon, title (with its own
   trailing arrow, see .menu-title::after below) and description sit
   directly on the panel background; only a hover tint below indicates
   interactivity, matching the flat reference layout. */
.intro-grid-mega__grid:not(.intro-grid-mega__grid--divided) .dropdown-item {
  border-radius: 10px;
  padding: 6px 12px;
  transition: background-color 0.3s var(--wimira-ease);
}

/* Icon sits neutral white on the solid panel at rest; hover swaps it to
   the shared accent color (see rule below) for interactive feedback. */
.intro-grid-mega__grid .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  transition:
    background-color 0.3s var(--wimira-ease),
    border-color 0.3s var(--wimira-ease),
    color 0.3s var(--wimira-ease);
}

.intro-grid-mega__grid .dropdown-item:hover .icon-wrap,
.intro-grid-mega__grid .dropdown-item:focus-visible .icon-wrap {
  background: rgba(30, 29, 40, 0.06);
  border-color: rgba(30, 29, 40, 0.16);
  color: var(--wimira-ink);
}

.intro-grid-mega__grid .icon-wrap svg {
  width: 16px;
  height: 16px;
}

.intro-grid-mega__grid .menu-title {
  flex: 1 1 calc(100% - 46px);
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  align-self: center;
  transition: color 0.3s var(--wimira-ease);
}

/* Trailing arrow inline with the title (not a card corner decoration) —
   as .menu-title::after inside a flex title, it lands as a normal flex
   item at the row's end, vertically centered with the title text. Scoped
   off --divided (AI Solutions Advisor already renders its own explicit
   .intro-grid-mega__item-arrow element for that layout). */
.intro-grid-mega__grid:not(.intro-grid-mega__grid--divided) .menu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.intro-grid-mega__grid:not(.intro-grid-mega__grid--divided) .menu-title::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: rgb(var(--mega-accent-rgb, 226, 44, 40));
  opacity: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 12 12 4M12 4H5M12 4V11' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 12 12 4M12 4H5M12 4V11' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: opacity 0.3s var(--wimira-ease);
}

.intro-grid-mega__grid .dropdown-item:hover .menu-title::after,
.intro-grid-mega__grid .dropdown-item:focus-visible .menu-title::after {
  background-color: var(--wimira-ink);
  opacity: 1;
}

.intro-grid-mega__grid .description {
  flex: 1 1 100%;
  margin: 0;
  padding-left: 46px;
  max-width: none;
  height: auto;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: #b8b7c9;
}

.intro-grid-mega__grid .dropdown-item:hover .menu-title,
.intro-grid-mega__grid .dropdown-item:focus-visible .menu-title {
  color: var(--wimira-ink);
}

.intro-grid-mega__grid .dropdown-item:hover .description,
.intro-grid-mega__grid .dropdown-item:focus-visible .description {
  color: #55536a;
}

/* Hover: solid white row instead of an accent tint, with title/description/
   icons all flipping to dark ink so they stay legible on the light card. */
.intro-grid-mega__grid:not(.intro-grid-mega__grid--divided) .dropdown-item:hover,
.intro-grid-mega__grid:not(.intro-grid-mega__grid--divided) .dropdown-item:focus-visible {
  background: #fff;
}

/* Column-wise fill variant (2 tall columns instead of paired rows) — pair with an inline
   grid-template-rows set to ceil(item-count / 2) so the browser knows where to wrap. */
.intro-grid-mega__grid--flow-col {
  grid-auto-flow: column;
  align-content: start;
}

/* Title + trailing arrow on the same line (used by AI Solutions Advisor) */
.intro-grid-mega__item-row {
  flex: 1 1 calc(100% - 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.intro-grid-mega__item-row .menu-title {
  flex: initial;
}

.intro-grid-mega__item-arrow {
  display: flex;
  flex: 0 0 auto;
  color: #fff;
  transition: transform 0.3s var(--wimira-ease);
}

.intro-grid-mega__item-arrow svg {
  width: 16px;
  height: 16px;
}

.intro-grid-mega__grid .dropdown-item:hover .intro-grid-mega__item-arrow,
.intro-grid-mega__grid .dropdown-item:focus-visible .intro-grid-mega__item-arrow {
  color: var(--wimira-ink);
  transform: translateX(4px);
}

/* 2x2 grid with a divider line between columns and between rows */
.intro-grid-mega__grid--divided {
  gap: 0;
}

.intro-grid-mega__grid--divided > .intro-grid-mega__item .dropdown-item {
  padding: 22px 32px;
  transition: background-color 0.3s var(--wimira-ease);
}

/* Same solid-white hover treatment as the standard grid — title/description/
   icons/arrow already flip to dark ink via the shared selectors above. */
.intro-grid-mega__grid--divided > .intro-grid-mega__item .dropdown-item:hover,
.intro-grid-mega__grid--divided > .intro-grid-mega__item .dropdown-item:focus-visible {
  background: #fff;
}

.intro-grid-mega__grid--divided > .intro-grid-mega__item:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.intro-grid-mega__grid--divided > .intro-grid-mega__item:nth-child(-n+2) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.intro-grid-mega__footer {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 24px 20px;
  padding: 12px 22px;
  border-radius: 12px;
  background: var(--wimira-night-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.intro-grid-mega__footer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

.intro-grid-mega__footer-icon svg {
  width: 15px;
  height: 15px;
}

.intro-grid-mega__footer-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.intro-grid-mega__footer-text strong {
  font-weight: 700;
  color: #fff;
}

.intro-grid-mega__footer-text span {
  color: #b8b7c9;
}

.intro-grid-mega__footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 24px;
  background: var(--mega-accent-solid, var(--wimira-red));
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.3s var(--wimira-ease);
}

.intro-grid-mega__footer-link:hover,
.intro-grid-mega__footer-link:focus-visible {
  filter: brightness(0.88);
}
}


/* ── CTA button ── */
.header--new__btn-wrap {
  display: flex;
  margin-left: 8px;
}

.header--new__btn-wrap--desktop {
  display: none;
}

@media (min-width: 961px) {
  .header--new__btn-wrap--desktop {
    display: flex;
  }
}

.header--new__btn-wrap--mobile {
  margin-left: auto;
}

@media (min-width: 961px) {
  .header--new__btn-wrap--mobile {
    display: none;
  }
}

.header--new__btn-wrap .btn-n--black {
  background-color: #e22c28;
  padding: 10px 14px;
  font-size: 13px;
}

.header--new__btn-wrap .btn-n--black:hover,
.header--new__btn-wrap .btn-n--black:focus-visible {
  background: #36383b;
}

@media (min-width: 961px) {
  /* Same space-recovery reasoning as .header__menu--newWrap's margin-left
     above (no upper bound, same reason: avoids another breakpoint-edge
     overlap bug) — trims the CTA's own margin/padding so container-n can
     match the site-standard 56px edge padding without the pill
     overlapping. */
  .header--new__btn-wrap.header--new__btn-wrap--desktop {
    margin-left: 4px;
  }

  .header--new__btn-wrap .btn-n--black {
    padding: 10px 8px;
  }
}

/* ── Search ── */
.header--new__search {
  position: relative;
}

.search--new__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
  padding: 11px 19px;
  border-radius: 40px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  appearance: none;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}

.search--new__icon-wrap:focus-visible {
  outline: 2px solid var(--wimira-red);
  outline-offset: 2px;
}

@media (min-width: 961px) {
  .search--new__icon-wrap {
    padding: 15px 24px;
  }
}

@media (min-width: 961px) {
  /* Same space-recovery reasoning as the nav-wrap/CTA trims above (no
     upper bound — see that comment). */
  .header--new__search .search--new__icon-wrap {
    padding: 15px 8px;
  }
}

@media (min-width: 961px) and (max-width: 1049px) {
  /* Still short at the bottom of this tier even with every other trim in
     this file (verified empirically — see the .header__menu--new .nav-
     link padding/column-gap cut earlier for the fuller explanation).
     Positioned after the rule directly above so it wins on source order. */
  .header--new__search .search--new__icon-wrap {
    padding: 15px 4px;
  }
}

.search--new__icon-wrap:hover,
.search--new__icon-wrap.active {
  background: #c7c7d6;
}

.search--new {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 24px);
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.06);
  z-index: 40;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.search--new__icon-wrap.active ~ .search--new,
.search--new.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.search--new__form {
  margin: 0;
}

.search--new__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.search--new__field-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #f7f8fb;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.search--new__field-wrap:focus-within {
  border-color: rgba(226, 44, 40, 0.35);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(226, 44, 40, 0.08);
}

.search--new__field-icon {
  display: block;
  flex: 0 0 auto;
  color: #94a3b8;
}

.search--new__field {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1.4;
  color: #0f172a;
  padding: 0;
  outline: 0;
  appearance: none;
}

.search--new__field::-webkit-search-decoration,
.search--new__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search--new__field::placeholder {
  color: #94a3b8;
}

.search--new__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  color: #64748b;
  cursor: pointer;
}

.search--new__clear[hidden] {
  display: none;
}

.search--new__clear:hover {
  background: rgba(15, 23, 42, 0.1);
  color: #0f172a;
}

.search--new__dropdown {
  margin-top: 10px;
  padding-top: 4px;
}

.search--new__dropdown[hidden] {
  display: none;
}

.search--new__tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  overflow-x: auto;
}

.search--new__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}

.search--new__tab:hover {
  color: #0f172a;
}

.search--new__tab.is-active {
  color: #0f172a;
  border-bottom-color: #0f172a;
}

.search--new__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #eef1f6;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.search--new__tab.is-active .search--new__tab-count {
  background: #e8eaf0;
  color: #334155;
}

.search--new__status {
  margin: 0;
  padding: 18px 12px;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}

.search--new__status[hidden] {
  display: none;
}

.search--new__status.is-loading {
  color: #94a3b8;
}

.search--new__results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(360px, 50vh);
  overflow-y: auto;
}

.search--new__result {
  margin: 0;
}

.search--new__result a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.search--new__result a:hover,
.search--new__result a:focus-visible {
  background: #f4f6fa;
  outline: none;
}

.search--new__result-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f4f9;
  color: #64748b;
}

.search--new__result--page .search--new__result-icon {
  color: var(--wimira-red);
  background: rgba(226, 44, 40, 0.08);
}

.search--new__result-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search--new__result-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.search--new__result-meta {
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

.search--new__more {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--wimira-red);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.search--new__more:not([hidden]) {
  display: flex;
}

.search--new__more:hover {
  background: rgba(226, 44, 40, 0.06);
}

/* ── Mobile menu toggle (Wimira pill) ── */
.hide-show-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 15px 20px 14px;
  border: 0;
  border-radius: 40px;
  background-color: #e9edf3;
  cursor: pointer;
}

@media (min-width: 961px) {
  .hide-show-menu {
    display: none;
  }
}

.hide-show-menu:focus-visible {
  outline: 2px solid var(--wimira-red);
  outline-offset: 1px;
}

.hide-show-menu-icon {
  position: relative;
  width: 16px;
  height: 11px;
  border-width: 1px 0;
  border-style: solid;
  border-color: var(--wimira-ink);
  transition: all 0.15s cubic-bezier(0.67, -0.03, 0.45, 1.89);
}

.hide-show-menu-icon::before,
.hide-show-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  display: block;
  width: 16px;
  height: 1px;
  background-color: var(--wimira-ink);
  transition: all 0.35s cubic-bezier(0.67, -0.03, 0.45, 1.89);
}

.hide-show-menu-icon::before,
.hide-show-menu-icon::after {
  top: 4px;
}

/* ── Mobile menu panel (Figma: white drill-down card) — v1.8.0 ── */
@media (max-width: 960px) {
body.mobile-menu-active .hide-show-menu {
  background-color: #f2f2f6;
  /* Normally this button is pushed to the right edge by the preceding
     .header--new__btn-wrap--mobile's margin-left:auto — but that button
     is hidden while the panel is open (avoids a duplicate "Contact us"),
     so without its own auto margin here this button collapses back next
     to the logo instead of staying in the hamburger's usual spot. */
  margin-left: auto;
}

body.mobile-menu-active .hide-show-menu-icon {
  border-width: 0;
  margin-left: -1px;
  transform: rotate(90deg);
}

body.mobile-menu-active .hide-show-menu-icon::before,
body.mobile-menu-active .hide-show-menu-icon::after {
  background-color: var(--wimira-ink);
}

body.mobile-menu-active .hide-show-menu-icon::after {
  transform: rotate(45deg);
}

body.mobile-menu-active .hide-show-menu-icon::before {
  transform: rotate(-45deg);
}

body.mobile-menu-active .header--new {
  background: #fff;
}

body.mobile-menu-active .header--new::before {
  display: none;
}

body.mobile-menu-active .header--new__row,
body.mobile-menu-active .header--new__inner {
  border-bottom-color: transparent;
}

body.mobile-menu-active .header--new__logo {
  color: var(--wimira-red);
}

/* ── Nav list: continuous rows with hairline dividers, icon + label + chevron ── */
body.mobile-menu-active .header__menu--new {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0;
  padding: 4px 12px 8px;
}

body.mobile-menu-active .header__menu--new > li {
  margin: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #f0f0f5;
  background: transparent;
  overflow: visible;
}

body.mobile-menu-active .header__menu--new > li:last-child {
  border-bottom: 0;
}

body.mobile-menu-active .header__menu--new .nav-link {
  display: flex;
  color: var(--wimira-ink);
  min-height: 0;
  padding: 13px 4px;
  align-items: center;
  gap: 12px;
  background: transparent;
  transition: color 0.2s;
}

body.mobile-menu-active .menu-title__icon-mobile {
  display: flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--wimira-muted);
}

body.mobile-menu-active .header__menu--new > li.is-current .nav-link,
body.mobile-menu-active .header__menu--new > li.is-current .menu-title__icon-mobile,
body.mobile-menu-active .header__menu--new > li.current-menu-item .nav-link,
body.mobile-menu-active .header__menu--new > li.current-menu-item .menu-title__icon-mobile,
body.mobile-menu-active .header__menu--new > li.current-menu-ancestor .nav-link,
body.mobile-menu-active .header__menu--new > li.current-menu-ancestor .menu-title__icon-mobile {
  color: var(--wimira-red);
}

body.mobile-menu-active .header__menu--new .nav-link .menu-title {
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

body.mobile-menu-active .header__menu--new .nav-link .menu-title::before,
body.mobile-menu-active .header__menu--new .nav-link .menu-title::after {
  display: none;
}

body.mobile-menu-active .header__menu--new > li > .nav-link .long-title,
body.mobile-menu-active .header__menu--new > li > .nav-link > .description,
body.mobile-menu-active .header__menu--new > li > .nav-link > .image-wrap {
  display: none !important;
}

body.mobile-menu-active .header__menu--new .dropdown-menu a > .menu-title::before,
body.mobile-menu-active .header__menu--new .dropdown-item > .menu-title::before {
  display: none;
}

body.mobile-menu-active .header__menu--new > li.menu-item-has-children > .nav-link::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.6px solid var(--wimira-muted);
  border-bottom: 1.6px solid var(--wimira-muted);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}

body.mobile-menu-active .header__menu--new > li.nav-link--pill > .nav-link::after {
  display: none;
}

body.mobile-menu-active .header__menu--new .dropdown-menu-opener {
  display: none !important;
}

/* ── AI Solutions Advisor: purple accent, no pill chrome on mobile ── */
body.mobile-menu-active .header__menu--new > li.nav-link--pill .nav-link {
  border: 0;
  border-radius: 0;
  padding: 13px 4px;
}

body.mobile-menu-active .header__menu--new > li.nav-link--pill .menu-title,
body.mobile-menu-active .header__menu--new > li.nav-link--pill .menu-title__icon-mobile {
  color: #7c4fe0;
}

body.mobile-menu-active .header__menu--new > li.nav-link--pill .menu-title {
  font-size: 16px !important;
  font-weight: 500;
  white-space: normal;
}

body.mobile-menu-active .header__menu--new > li.nav-link--pill .menu-title__icon {
  display: none;
}

/* ── Drill-down: hide everything except the open category, replace its
   row with the Back button + heading (see .mobile-submenu-nav below) ── */
body.mobile-menu-active .header__menu--new.has-open-submenu > li:not(.is-open) {
  display: none;
}

body.mobile-menu-active .header__menu--new.has-open-submenu > li.is-open > .nav-link {
  display: none;
}

.mobile-submenu-nav {
  display: none;
}

body.mobile-menu-active .mobile-submenu-nav:not([hidden]) {
  display: block;
  padding: 8px 8px 4px;
}

.mobile-submenu-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--wimira-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.mobile-submenu-nav__title {
  margin: 6px 0 4px;
  padding: 0 4px;
  font-family: var(--wimira-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--wimira-ink);
}

/* ── Capability-style megas (services/solutions/industries/products/
   clients/resources/ai-advisor) ── */
body.mobile-menu-active .header__menu--new > li > .dropdown-menu__wrapper > .intro-grid-mega {
  display: block !important;
  background: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__intro {
  display: none !important;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__grid {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  padding: 0 8px !important;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__grid > .menu-item {
  border: 0 !important;
  margin: 0 !important;
  display: block !important;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__grid .dropdown-item {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 12px 4px !important;
  border-bottom: 1px solid #f0f0f5;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__grid > .menu-item:last-child .dropdown-item {
  border-bottom: 0;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__grid .menu-title {
  color: var(--wimira-ink) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__item-row {
  flex: 1 1 auto;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__item-arrow {
  display: none;
}

/* Contact card — the footer bar on each capability mega (hidden on
   desktop mobile view previously; shown here as a card matching Figma). */
body.mobile-menu-active .header__menu--new .intro-grid-mega__footer {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 8px 4px;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--wimira-red-light);
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__footer-icon {
  background: #fff;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__footer-text {
  flex: 1 1 auto;
  min-width: 0;
}

body.mobile-menu-active .header__menu--new .intro-grid-mega__footer-link {
  flex: 0 0 100%;
  justify-content: center;
  margin-top: 4px;
  padding: 12px 16px;
  border-radius: 40px;
  background: var(--wimira-red);
  color: #fff;
  text-decoration: none;
}

body.mobile-menu-active .header--new__btn-wrap--mobile .btn-n--black {
  background: transparent;
  color: #fff;
  padding: 8px 0;
  font-weight: 400;
}

body.mobile-menu-active .header--new__btn-wrap--mobile .btn-n--black::before,
body.mobile-menu-active .header--new__btn-wrap--mobile .btn-n--black::after {
  filter: brightness(0) invert(1);
}

body.mobile-menu-active .header--new__btn-wrap--mobile .btn-n--black::before {
  transform: scale(1);
  margin-right: 0;
}

/* Panel's own "Contact us" — full-width red pill (display:flex override
   is set earlier, near .header--new__info). Hidden while a submenu is
   drilled into, since its own contact card (.intro-grid-mega__footer)
   already covers that — avoids two "Contact us" buttons stacked below
   each other, which Figma's submenu comp doesn't show. */
body.mobile-submenu-open.mobile-menu-active .header--new__btn-wrap--desktop,
body.mobile-submenu-open.mobile-menu-active .header--new__search {
  display: none;
}

body.mobile-menu-active .header--new__btn-wrap--desktop {
  padding: 8px 16px 0;
}

body.mobile-menu-active .header--new__btn-wrap--desktop .btn-n--black {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--wimira-red);
}

body.mobile-menu-active .header--new__btn-wrap--desktop .btn-n--black::before,
body.mobile-menu-active .header--new__btn-wrap--desktop .btn-n--black::after {
  filter: brightness(0) invert(1);
}

/* ── Mobile search pill (always visible, not a toggle overlay) ── */
body.mobile-menu-active .search--new__field {
  font-size: 15px;
}

body.mobile-menu-active .header__menu--new > li > .dropdown-menu__wrapper {
  display: none;
  position: static;
  margin: 0;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none;
  background: #fff;
}

body.mobile-menu-active .header__menu--new > li.is-open > .dropdown-menu__wrapper {
  display: block;
  padding: 0;
}

body.mobile-menu-active .header__menu--new > li > .dropdown-menu__wrapper > .dropdown-menu,
body.mobile-menu-active .header__menu--new > li > .dropdown-menu__wrapper > .intro-grid-mega,
body.mobile-menu-active .header__menu--new > li > .dropdown-menu__wrapper > .about-us-mega {
  position: static;
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: #fff;
  list-style: none;
}

body.mobile-menu-active .header__menu--new .dropdown-menu,
body.mobile-menu-active .header__menu--new .intro-grid-mega__grid,
body.mobile-menu-active .header__menu--new .about-us-mega__grid {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.mobile-menu-active .header__menu--new .dropdown-menu > li,
body.mobile-menu-active .header__menu--new .intro-grid-mega__grid > li {
  display: block;
  width: 100%;
}

body.mobile-menu-active .header__menu--new .dropdown-menu a,
body.mobile-menu-active .header__menu--new a.dropdown-item,
body.mobile-menu-active .header__menu--new span.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  color: var(--wimira-ink);
  text-decoration: none;
  border-bottom: 1px solid #f0f0f5;
}

body.mobile-menu-active .header__menu--new .dropdown-menu > li:last-child a,
body.mobile-menu-active .header__menu--new .dropdown-menu > li:last-child > .dropdown-item {
  border-bottom: 0;
}

body.mobile-menu-active .header__menu--new .dropdown-menu a > .menu-title,
body.mobile-menu-active .header__menu--new .dropdown-item > .menu-title,
body.mobile-menu-active .header__menu--new .dropdown-item .menu-title {
  color: var(--wimira-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

body.mobile-menu-active .header__menu--new .description,
body.mobile-menu-active .header__menu--new .image-wrap,
body.mobile-menu-active .header__menu--new .long-title {
  display: none !important;
}

/* Small round icon before each sub-item label, matching the Figma comp
   (overrides the desktop-only display:none on .icon-wrap). */
body.mobile-menu-active .header__menu--new .icon-wrap {
  display: flex !important;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0 !important;
  border-radius: 8px;
}

body.mobile-menu-active .header__menu--new .icon-wrap svg,
body.mobile-menu-active .header__menu--new .icon--placeholder {
  width: 16px;
  height: 16px;
}

body.mobile-menu-active .header__menu--new .dropdown-menu a::after,
body.mobile-menu-active .header__menu--new a.dropdown-item::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid var(--wimira-muted);
  border-bottom: 1.5px solid var(--wimira-muted);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}

body.mobile-menu-active .header__menu--new > li > .dropdown-menu__wrapper .dropdown-menu__wrapper {
  display: block !important;
  position: static;
  margin: 0;
  padding: 0 0 0 12px;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none;
  background: transparent;
}

body.mobile-menu-active .header__menu--new > li > .dropdown-menu__wrapper .dropdown-menu__wrapper > .dropdown-menu {
  display: flex;
  flex-direction: column;
  padding: 0;
}

body.mobile-menu-active .header__menu--new span.dropdown-item {
  cursor: default;
}
}

/* ── Skip link ── */
.header--new__screen-reader-shortcut {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: var(--wimira-red);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-101%);
  transition: transform 0.3s;
}

.header--new__screen-reader-shortcut:focus-visible {
  transform: translateY(0);
}