/* =========================================================
   WHAT WE DO — MEGA MENU
   Premium service panel inspired by the supplied reference.
   Font Awesome supplies all menu/service/action icons.
   ========================================================= */

.nav-item--has-mega { position: static; }
.nav-link--button { appearance: none; color: inherit; font: inherit; cursor: pointer; border: 0; background: none; }
.nav-link__caret i { font-size: 11px; transition: transform 260ms ease; }
.nav-item--has-mega:hover .nav-link__caret i,
.nav-item--has-mega:focus-within .nav-link__caret i,
.nav-item--has-mega.is-open .nav-link__caret i { transform: rotate(180deg); }

.mega-menu {
  position: absolute;
  top: calc(100% + 0px);
  left: 50%;
  width: min(1540px, calc(100vw - 48px));
  padding: 16px;
  transform: translate(-50%, -12px) scale(.985);
  transform-origin: top center;
  background: rgba(255,255,255,.98);
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(16,21,34,.13);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, transform 360ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 360ms;
  z-index: calc(var(--z-header) + 5);
}

.nav-item--has-mega:hover ~ * { /* intentionally empty: keeps selector scope clear */ }
.nav-item--has-mega:hover,
.nav-item--has-mega:focus-within,
.nav-item--has-mega.is-open { z-index: 2; }

/* The trigger sits in the navbar, while the panel is a sibling after the
   navbar. JS adds .is-open to the nav item for click/touch behavior. */
.site-header:has(.nav-item--has-mega:hover) .mega-menu,
.site-header:has(.mega-menu:hover) .mega-menu,
.site-header:has(.nav-item--has-mega:focus-within) .mega-menu,
.site-header:has(.nav-item--has-mega.is-open) .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}

.mega-menu__grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(300px, .78fr); gap: 16px; height: min(490px, calc(100dvh - 180px)); min-height: 0; }
.mega-menu__services { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: minmax(0, 1fr); padding: 0; }
.mega-service { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 12px; align-items: center; padding: 10px 14px; border-right: 1px solid #e2e6ee; border-bottom: 1px solid #e2e6ee; transition: background-color 220ms ease, transform 220ms ease; }
.mega-service:nth-child(2n) { border-right: 0; }
.mega-service:nth-last-child(-n+2) { border-bottom: 0; }
.mega-service:hover { background: linear-gradient(90deg, #fff 0%, #faf8ff 100%); }
.mega-service__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: #f4efff; color: var(--color-primary-purple); font-size: 23px; transition: transform 220ms ease, background-color 220ms ease; }
.mega-service:hover .mega-service__icon { transform: translateY(-2px); background: #eee5ff; }
.mega-service__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.mega-service__copy strong { font-size: 15px; line-height: 1.18; font-weight: 800; color: var(--color-primary-text); letter-spacing: -.035em; }
.mega-service__copy small { display: block; max-width: 340px; margin-top: 4px; color: #66708a; font-size: 11.5px; line-height: 1.28; }
.mega-service__explore { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; color: var(--color-primary-purple); font-size: 12px; font-weight: 700; }
.mega-service__explore i { font-size: 11px; transition: transform 180ms ease; }
.mega-service:hover .mega-service__explore i { transform: translateX(4px); }

.mega-menu__visual { position: relative; min-height: 0; overflow: hidden; border-radius: 16px; background: #05040b; }
.mega-menu__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 700ms cubic-bezier(.22,.61,.36,1); }
.mega-menu:hover .mega-menu__visual img { transform: scale(1.035); }

.mobile-what-we-do-trigger { display: flex; width: 100%; justify-content: space-between; align-items: center; }
.mobile-what-we-do { display: none; grid-template-columns: minmax(0,1fr); gap: 8px; padding: 4px 0 8px; }
.mobile-what-we-do.is-open { display: grid; }
.mobile-what-we-do a { display: flex; align-items: flex-start; gap: 9px; width: 100%; min-height: 58px; padding: 8px 9px; border: 1px solid #ececf2; border-radius: 10px; font-size: 12px; line-height: 1.2; }
.mobile-service-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mobile-service-copy strong { font-size: 11.5px; line-height: 1.18; font-weight: 800; color: var(--color-primary-text); }
.mobile-service-copy small { font-size: 9.5px; line-height: 1.25; color: #66708a; }
.mobile-what-we-do a:hover { background: #faf8ff; border-color: #e5dcff; }
.mobile-service-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 8px; background: #f4efff; color: var(--color-primary-purple); }
.mobile-service-icon i { font-size: 14px; }
.mobile-what-we-do-trigger[aria-expanded="true"] .nav-link__caret i { transform: rotate(180deg); }

@media (max-width: 1280px) and (min-width: 1025px) {
  .mega-menu { width: min(1180px, calc(100vw - 32px)); padding: 14px; }
  .mega-menu__grid { gap: 14px; height: min(460px, calc(100dvh - 170px)); }
  .mega-service { grid-template-columns: 50px minmax(0,1fr); gap: 10px; padding: 8px 12px; }
  .mega-service__icon { width: 46px; height: 46px; font-size: 20px; border-radius: 12px; }
  .mega-service__copy strong { font-size: 14px; }
  .mega-service__copy small { font-size: 11px; line-height: 1.25; margin-top: 4px; }
  .mega-service__explore { font-size: 12px; margin-top: 4px; gap: 6px; }
  .mega-menu__visual { min-height: 0; border-radius: 14px; }
}


/* Page backdrop while the mega menu is open. It sits below the header
   controls/panel but above the page content, so the navigation remains
   crisp while the rest of the page is softly de-emphasized. */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgba(255,255,255,.34);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.site-header.menu-is-open + .menu-backdrop,
body.menu-is-open .menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms ease, visibility 0s linear 0s;
}

.navbar { position: relative; z-index: 3; }

@media (max-width: 1024px) {
  .menu-backdrop {
    background: rgba(255,255,255,.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 1024px) {
  .mega-menu { display: none; }
  .mobile-what-we-do-trigger { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mega-menu, .mega-service, .mega-service__icon, .mega-service__explore i, .mega-menu__visual img { transition: none; }
}


/* Mobile navbar dropdown indicators use the same Font Awesome chevron
   treatment as the desktop navbar. */
@media (max-width: 1024px) {
  .mobile-menu .nav-link__caret i {
    font-size: 11px;
    transition: transform 260ms ease;
  }
}


/* Keep the page visibly de-emphasized for BOTH hover-open and click-open states.
   The menu/header remain sharp. The explicit main filter is the reliable
   fallback for click-open states, while the fixed backdrop supplies the
   translucent glass/blur layer above the page. */
body > main#main-content {
  position: relative;
  z-index: 0;
  transition: filter 240ms ease;
}

body.menu-is-open > main#main-content {
  filter: none !important;
}

body:not(.menu-is-open) > main#main-content {
  filter: none !important;
}

/* Keep the backdrop above the page and below the header/menu in every
   open state, including a menu opened by clicking the trigger. */
.menu-backdrop {
  z-index: calc(var(--z-header) - 1) !important;
  background: rgba(255,255,255,.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Final alignment: keep the Explore arrow optically centered with the label. */
.mega-service__explore {
  align-items: center;
  line-height: 1;
}

.mega-service__explore i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
  transform: translateY(0.02em);
}

.mega-service:hover .mega-service__explore i {
  transform: translate(4px, 0.02em);
}