/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — NAVIGATION
   Full-width glassmorphic header, mega menu, mobile menu
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   SITE HEADER — full width
   ══════════════════════════════ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: var(--space-5) 0;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-base) ease,
              padding var(--duration-base) ease,
              box-shadow var(--duration-base) ease;
}

.site-header.is-scrolled {
  padding: var(--space-5) 0;
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-sm);
}

/* Full-width inner container with horizontal padding */
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  padding: 0 var(--space-8);
}


/* ══════════════════════════════
   LOGO
   ══════════════════════════════ */

.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-logo img,
.site-logo svg {
  height: 28px;
  width: auto;
  transition: opacity var(--duration-fast) ease;
}

.site-logo:hover img,
.site-logo:hover svg {
  opacity: 0.8;
}


/* ══════════════════════════════
   DESKTOP NAVIGATION
   ══════════════════════════════ */

.site-nav {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.site-nav .menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav .menu-item {
  position: relative;
}

.site-nav .menu-item > a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  /* Only the colour transitions; the hover background is INSTANT. The Customizer's global
     `* { transition-duration:.3s !important }` otherwise forces a 0.3s fade on the background that
     catches mid-fade (esp. on dropdown items as the panel opens), making a hovered dropdown look a
     lighter, half-faded grey than a flat item. !important is required to beat that universal rule. */
  transition: color var(--duration-fast) ease !important;
}

.site-nav .menu-item > a:hover,
.site-nav .menu-item.current-menu-item > a {
  color: var(--color-text);
  background: var(--color-surface-2);
}

/* Keep the parent nav item highlighted while its mega/dropdown is open. Once the cursor moves off the
   link into the open panel, `> a:hover` is lost and the pill would vanish; the panel is a descendant of
   the item so `.menu-item-has-children:hover` (and :focus-within) stays true — use that to hold the bg. */
.site-nav .menu-item-has-children:hover > a,
.site-nav .menu-item-has-children:focus-within > a {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.site-nav .menu-item.current-menu-item > a {
  color: var(--color-brand);
}

/* Dropdown caret — HugeIcons (injected by walker) */
.site-nav .menu-item-has-children > a::after {
  display: none; /* walker injects <i> instead */
}

.nav-caret {
  font-size: 14px;
  opacity: 0.5;
  transition: transform var(--duration-fast) ease;
}

.site-nav .menu-item-has-children:hover .nav-caret {
  transform: rotate(180deg);
}

/* Phone number */
.header-phone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) ease;
}

.header-phone:hover {
  color: var(--color-brand);
}

.header-phone svg,
.header-phone__icon {
  flex-shrink: 0;
}

/* Header icons are HugeIcons font glyphs: size comes from font-size. The caret keeps
   the rotate-on-open rule further down the file — same class, so both apply. */
.header-phone__icon { font-size: 17px; line-height: 1; }
.region-switch__globe { font-size: 15px; line-height: 1; flex: none; }
/* inline-flex is required, not cosmetic: transform (the rotate-on-open below) has no
   effect on a plain inline element, which is what a bare font glyph is. */
.region-switch__btn .region-switch__caret { display: inline-flex; font-size: 14px; line-height: 1; flex: none; }
.mobile-menu__close i { font-size: 20px; line-height: 1; }


/* ══════════════════════════════
   MEGA MENU
   ══════════════════════════════ */

/* Parent items need position:relative so the bridge pseudo-element works */
.site-nav .menu-item-has-children {
  position: static;
}

/* Invisible bridge between nav link and mega menu — prevents hover gap */
.site-nav .menu-item-has-children > a {
  position: relative;
}

.site-nav .menu-item-has-children > a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px; /* bridge the gap */
  display: none;
}

.site-nav .menu-item-has-children:hover > a::before {
  display: block;
}

.mega-menu {
  position: fixed;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility var(--duration-base);
  pointer-events: none;
}

.site-nav .menu-item-has-children:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-menu__inner {
  padding: var(--space-8);
}

/* Two-column layout: links on left, contact panel on right */
.mega-menu__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  align-items: start;
}

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

/* Contact panel — right column */
.mega-menu__contact {
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mega-menu__contact-overline {
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.mega-menu__contact-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.mega-menu__contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.mega-menu__contact-row:hover {
  color: var(--color-brand);
}

.mega-menu__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-dim);
  color: var(--color-brand);
  font-size: 14px;
  flex-shrink: 0;
}

.mega-menu__contact-addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

.mega-menu__contact-addr address {
  font-style: normal;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

.mega-menu__contact-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-1);
}

.mega-menu__contact-cta {
  margin-top: var(--space-2);
  width: 100%;
  justify-content: center;
}

/* Mobile / tablet — stack contact panel below links */
@media (max-width: 900px) {
  .mega-menu__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Each child item — card-style link */
.mega-menu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--duration-fast) ease;
}

.mega-menu__item:hover {
  background: var(--color-surface-2);
}

/* Icon circle */
.mega-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-brand-dim);
  color: var(--color-brand);
  font-size: 18px;
}

.mega-menu__item:hover .mega-menu__icon {
  background: var(--color-brand);
  color: #ffffff;
}

/* Text content */
.mega-menu__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mega-menu__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: var(--line-height-snug);
}

.mega-menu__desc {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}


/* ══════════════════════════════
   MEGA MENU OVERLAY
   ══════════════════════════════ */

/* Overlay starts below the header — top is set by JS */
.mega-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: calc(var(--z-header) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) ease,
              visibility var(--duration-base);
  pointer-events: none;
}

.mega-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

[data-theme="dark"] .mega-overlay {
  background: rgba(0, 0, 0, 0.5);
}


/* ══════════════════════════════
   HEADER ACTIONS (right side)
   ══════════════════════════════ */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: auto;  /* keep actions right-aligned even when .site-nav (the flex:1 spacer) is hidden on mobile */
}

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.theme-toggle:hover {
  border-color: var(--color-border-brand);
  color: var(--color-brand);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  transition: transform var(--duration-base) var(--ease-spring);
}

[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: flex; }

/* ── Region switcher (UK / UAE) — replaces the header theme toggle ── */
.region-switch { position: relative; }
.region-switch__btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-text); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.region-switch__btn:hover { border-color: var(--color-border-strong); color: var(--color-brand); }
.region-switch::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } /* hover bridge to the menu */
.region-switch__caret { transition: transform .2s ease; }
.region-switch:hover .region-switch__caret, .region-switch:focus-within .region-switch__caret { transform: rotate(180deg); }
.region-switch__menu { position: absolute; right: 0; top: calc(100% + 12px); min-width: 210px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 22px 55px -22px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.03); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; z-index: 300; }
.region-switch:hover .region-switch__menu, .region-switch:focus-within .region-switch__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.region-switch__opt { display: block; padding: 10px 14px; color: var(--color-text); text-decoration: none; font-size: var(--font-size-sm); transition: background .15s ease, color .15s ease; }
.region-switch__opt + .region-switch__opt { border-top: 1px solid var(--color-border); }
.region-switch__opt:hover { background: var(--color-surface-2); color: var(--color-brand); }
.region-switch__opt.is-active { color: var(--color-brand); font-weight: var(--font-weight-medium); }
[data-theme="dark"] .region-switch__menu { background: #14141c; border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .region-switch__opt + .region-switch__opt { border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .region-switch__opt:hover { background: rgba(255,255,255,.06); color: #fff; }

/* Header CTA */
.header-cta {
  font-size: var(--font-size-sm) !important;
  padding: 0.7rem 1.6rem !important;
}


/* ══════════════════════════════
   MOBILE TOGGLE (hamburger)
   ══════════════════════════════ */

.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.mobile-toggle:hover {
  border-color: var(--color-border-brand);
  color: var(--color-brand);
}

.mobile-toggle__icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 18px;
}

.mobile-toggle__icon span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) ease;
}

.mobile-toggle.is-active .mobile-toggle__icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-toggle.is-active .mobile-toggle__icon span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.is-active .mobile-toggle__icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ══════════════════════════════
   MOBILE MENU
   ══════════════════════════════ */

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 85vw);
  z-index: var(--z-modal); /* above the announcement bar + fixed header so the drawer covers the whole screen and the close button is never hidden */
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  padding: var(--space-16) var(--space-6) var(--space-6);
  overflow-y: auto;
  scrollbar-gutter: stable;  /* reserve scrollbar space so expanding a dropdown doesn't shift content sideways */
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu .menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-menu .menu-item > a,
.mobile-menu .menu-item > .mobile-menu__row > a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) ease;
  text-decoration: none;
}

.mobile-menu .menu-item > a:hover,
.mobile-menu .menu-item > .mobile-menu__row > a:hover {
  background: var(--color-brand-dim);
  color: var(--color-brand);
}

/* Parent row: link + chevron toggle */
.mobile-menu__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.mobile-menu__row > a {
  flex: 1;
  min-width: 0;
}

.mobile-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--duration-base) ease,
              color var(--duration-fast) ease;
}

.mobile-menu__toggle:hover {
  color: var(--color-brand);
}

.menu-item.is-expanded > .mobile-menu__row .mobile-menu__toggle {
  transform: rotate(180deg);
  color: var(--color-brand);
}

/* Collapse sub-menus by default, reveal when parent .is-expanded */
.mobile-menu .sub-menu {
  padding-left: var(--space-4);
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--duration-base) ease,
              opacity var(--duration-base) ease,
              margin-top var(--duration-base) ease;
}

.mobile-menu .menu-item.is-expanded > .sub-menu {
  max-height: 2000px;
  opacity: 1;
  margin-top: var(--space-1);
  padding-bottom: var(--space-2);
}

.mobile-menu .sub-menu .menu-item > a,
.mobile-menu .sub-menu .menu-item > .mobile-menu__row > a {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Contact panel in the mobile drawer — reuses .mega-menu__contact-* styles */
.mobile-menu__contact {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-menu__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 18px;
  cursor: pointer;
  z-index: 2; /* sit above the nav list */
}
.mobile-menu__close:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

/* Overlay behind mobile menu */
.mobile-overlay {
  position: fixed;
  top: 0; /* cover the FULL screen (incl. announcement bar + header), not just below the header */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-modal) - 201); /* sit behind the fixed header so the header stays visible/clickable */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) ease,
              visibility var(--duration-base);
}

.mobile-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

[data-theme="dark"] .mobile-overlay {
  background: rgba(0, 0, 0, 0.6);
}

/* Scroll-lock: freeze the REAL scroll element (<html>). This does NOT reposition anything,
   so the sticky header stays exactly where it is (no jump) and no gap can open behind it.
   Locking <body> instead (as before) broke the sticky header's reference and caused the jump.

   The rule itself now lives in reset.css alongside the other lock classes, because all three
   need the same scrollbar-width padding to stop the page shifting sideways. */

/* ══════════════════════════════════════════════════════════
   FLOATING HEADER → mobile menu drops DOWN as a floating card
   (instead of a full-height slide-in from the right). The animated
   hamburger in the header is the only toggle, so the in-menu close
   button is hidden in this variant.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .adm-header-floating .mobile-menu {
    /* drop from the header's real bottom (set by JS on open — honours the announcement bar at page top) */
    top: calc(var(--adm-menu-hdr-bottom, var(--adm-header-h, 72px)) + 4px);
    left: 8px;
    right: 8px;
    bottom: auto;
    width: auto;
    max-width: none;
    max-height: calc(100svh - var(--adm-menu-hdr-bottom, var(--adm-header-h, 72px)) - 20px);
    border: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    /* animate a floating drop-down from the top instead of an X-axis slide */
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--duration-base) var(--ease-out),
                opacity var(--duration-base) ease,
                visibility var(--duration-base);
  }
  .adm-header-floating .mobile-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* Floating variant: no in-menu close — the animated header hamburger toggles it. */
  .adm-header-floating .mobile-menu__close { display: none; }
}

/* ── Header spacer ── */
.header-spacer {
  height: 72px;
}

/* ══════════════════════════════════════════════════════════
   MEGA MENU v2 — contained card (pillars · sub-services · contact)
   ══════════════════════════════════════════════════════════ */
.site-nav .menu-item-has-children { position: static; }
.site-nav .menu-item-has-children > a .nav-caret {
  display: inline-block; margin-left: 4px; font-size: 1em; line-height: 1;
  opacity: .5; vertical-align: middle; transition: transform .2s ease, opacity .2s ease;
}
.site-nav .menu-item-has-children:hover > a .nav-caret { transform: rotate(180deg); opacity: .9; }

/* Full-viewport-width transparent layer so there is a continuous hover surface from any
   (left-aligned) nav item down to the centred card — otherwise moving the cursor across the
   horizontal gap on wide screens drops the menu before you reach it. */
.mega {
  position: absolute; left: 50%; top: 100%; padding-top: 14px; transform: translateX(-50%) translateY(8px);
  width: 100vw; z-index: 200;
  display: flex; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.site-nav .menu-item-has-children:hover > .mega,
.site-nav .menu-item-has-children:focus-within > .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* Hover bridge across the ~25px gap from the nav item to the mega (floating-header mode: header 90px,
   pill nav ends ~65px, mega starts ~90px). MUST set display:block — the earlier caret rule
   `.site-nav .menu-item-has-children > a::after { display:none }` (same selector, so it wins on the
   `display` property) otherwise kills this pseudo and the menu drops in the gap. Height covers the gap
   with a small overlap; left/right:0 keeps it link-width (the mega itself is full-width below). */
.site-nav .menu-item-has-children > a::after {
  content: ''; display: block; position: absolute; left: 0; right: 0; top: 100%; height: 30px;
}

.mega__card {
  width: min(1180px, calc(100vw - 48px));
  display: grid; grid-template-columns: 260px 1fr 320px;
  background: #fff; border-radius: var(--radius-xl, 24px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 30px 80px -20px rgba(var(--color-brand-rgb,229,0,109), .45), 0 10px 40px rgba(0,0,0,.18);
  overflow: hidden;
}
/* Simple (2-level) megas use the same card + contact panel as Services */
.mega--simple .mega__card { grid-template-columns: 1fr 320px; }
.mega__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1) var(--space-6); align-content: start; padding: var(--space-6); }
.mega__links .mega__sublink { font-size: var(--font-size-base); padding: var(--space-2) 0; }
.mega__links .mega__viewall { grid-column: 1 / -1; margin-top: var(--space-3); }

/* ── Pillars (left) ── */
.mega__pillars { padding: var(--space-5); display: flex; flex-direction: column; gap: 2px; }
.mega__pillar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md, 10px);
  font-size: var(--font-size-lg, 1.0625rem); font-weight: var(--font-weight-medium, 500);
  color: var(--color-text); text-decoration: none; transition: background .15s ease, color .15s ease;
}
.mega__pillar svg { width: 18px; height: 18px; opacity: 0; transition: opacity .15s ease; color: var(--color-brand); }
.mega__pillar:hover, .mega__pillar.is-active {
  background: #fff; color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-border, #ececec), 0 6px 18px rgba(0,0,0,.06);
}
.mega__pillar.is-active svg, .mega__pillar:hover svg { opacity: 1; }

/* ── Sub-service panels (middle) ── */
.mega__subs { padding: var(--space-6) var(--space-6) var(--space-6) var(--space-4); border-left: 1px solid var(--color-border, #ececec); background-color: var(--color-surface-1); }
.mega__subpanel { display: none; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-6); }
.mega__subpanel.is-active { display: grid; }
.mega__sublink {
  display: block; padding: var(--space-2) 0; color: var(--color-text-secondary, #6b6b6b);
  font-size: var(--font-size-sm, .9375rem); text-decoration: none; transition: color .15s ease;
}
.mega__sublink:hover { color: var(--color-brand); }
.mega__viewall { grid-column: 1 / -1; margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 6px; color: var(--color-brand); font-weight: 500; font-size: var(--font-size-sm); text-decoration: none; }
.mega__viewall svg { width: 15px; height: 15px; }

/* ── Simple grid (Industries / About) ── */
.mega__simple-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-6); padding: var(--space-6); }
.mega--simple .mega__sublink { font-size: var(--font-size-base); }

/* ── Plain dropdown (About) — narrow panel under the item, no mega card / contact ── */
.site-nav .menu-item--dropdown { position: relative; }
.nav-drop {
  position: absolute; left: -12px; top: 100%; padding-top: 32px; /* aligns panel top with the mega card; -12px lines dropdown text up with the nav item text */
  transform: translateY(8px);
  min-width: 220px; z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.site-nav .menu-item--dropdown:hover > .nav-drop,
.site-nav .menu-item--dropdown:focus-within > .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nav-drop__list {
  list-style: none; margin: 0; padding: var(--space-2);
  background: #fff; border-radius: var(--radius-lg, 16px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 20px 50px -20px rgba(var(--color-brand-rgb,229,0,109), .35), 0 8px 30px rgba(0,0,0,.15);
}
.nav-drop__link {
  display: block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md, 10px);
  color: var(--color-text); text-decoration: none; font-size: var(--font-size-base); white-space: nowrap;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}
.nav-drop__link:hover { background: var(--color-surface-2); color: var(--color-brand); }
[data-theme="dark"] .nav-drop__list { background: #14141c; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 50px -20px rgba(0,0,0,.6); }
[data-theme="dark"] .nav-drop__link { color: rgba(255,255,255,.85); }
[data-theme="dark"] .nav-drop__link:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ── Contact panel (right) ── */
.mega__contact { background: var(--color-bg, #f5f5f7); padding: var(--space-6); display: flex; flex-direction: column; }
.mega__contact-overline { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand); }
.mega__contact-title { font-size: var(--font-size-lg); font-weight: 500; margin: var(--space-1) 0 var(--space-4); }
.mega__contact-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--color-text); text-decoration: none; font-size: var(--font-size-sm); }
.mega__contact-row:hover { color: var(--color-brand); }
.mega__contact-icon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-brand-dim); color: var(--color-brand); }
.mega__contact-icon svg { width: 15px; height: 15px; }
.mega__contact-addresses { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); }
.mega__contact-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-secondary); }
.mega__contact-label svg { width: 13px; height: 13px; }
.mega__contact-addr address { font-style: normal; font-size: var(--font-size-xs); line-height: 1.5; color: var(--color-text-muted); margin-top: 2px; }
/* Per-office number, under its address in both the mega panel and the mobile panel. No icon:
   the label's pin hangs to the left of the text, so an icon here made a THIRD left edge
   (label text 19px, address 0, number 17px). Flush with the address instead. */
.mega__contact-tel,
.mega-menu__contact-tel { display: block; width: fit-content; margin-top: 3px; font-size: var(--font-size-xs); font-weight: 500; line-height: 1.5; color: var(--color-text); text-decoration: none; transition: color .18s ease; }
.mega__contact-tel:hover, .mega__contact-tel:focus-visible,
.mega-menu__contact-tel:hover, .mega-menu__contact-tel:focus-visible { color: var(--color-primary); }
.mega__contact-cta { margin-top: var(--space-6); width: 100%; justify-content: center; }

/* ── Dark mode ──
   The card bg is hardcoded #fff; without these overrides the panel stays white
   in dark mode, inactive pillars (now light text) vanish on it, and only the
   brand-coloured active pillar shows — reading as a stray floating button. */
[data-theme="dark"] .mega__card {
  background: #121316;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08),
              0 30px 80px -20px rgba(var(--color-brand-rgb,229,0,109), .40),
              0 10px 40px rgba(0,0,0,.55);
}
[data-theme="dark"] .mega__pillar { color: rgba(255,255,255,.82); }
[data-theme="dark"] .mega__pillar:hover,
[data-theme="dark"] .mega__pillar.is-active {
  background: rgba(255,255,255,.06);
  color: var(--color-brand);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
[data-theme="dark"] .mega__subs { border-left-color: rgba(255,255,255,.08); }
[data-theme="dark"] .mega__sublink,
[data-theme="dark"] .mega__links .mega__sublink { color: rgba(255,255,255,.68); }
[data-theme="dark"] .mega__sublink:hover { color: var(--color-brand); }
[data-theme="dark"] .mega__contact { background: rgba(255,255,255,.035); }
[data-theme="dark"] .mega__contact-row { color: rgba(255,255,255,.82); }
[data-theme="dark"] .mega__contact-addresses { border-top-color: rgba(255,255,255,.10); }

@media (max-width: 1024px) { .mega { display: none; } }

/* ══════════════════════════════
   ADM Control — header layout variants (driven by body class)
   ══════════════════════════════ */
/* Centered: logo left · nav centred · actions right */
.adm-header-centered .header-inner { position: relative; }
.adm-header-centered .site-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* Split: logo centred · nav left · actions right */
.adm-header-split .header-inner { position: relative; }
.adm-header-split .site-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.adm-header-split .site-nav { margin-right: auto; }
/* Sticky toggle — header is fixed by default; un-stick = scroll away */
body:not(.adm-header-sticky) .site-header { position: absolute; }
/* Transparent over hero until scrolled (uses the existing .is-scrolled JS hook) */
.adm-header-transparent .site-header:not(.is-scrolled) { background: transparent; box-shadow: none; border-bottom-color: transparent; }
@media (max-width: 1024px) {
  .adm-header-centered .site-nav, .adm-header-split .site-logo { position: static; transform: none; }
}

/* ══════════════════════════════
   FLOATING CARD HEADER (ADM Control → Header → "Floating card header")
   Detaches .header-inner into a rounded, contained, glass card that floats with a
   gap from the edges — the header equivalent of the section "card" container option.
   ══════════════════════════════ */
.adm-header-floating .site-header {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none; /* the blur belongs to the card, not the full-width bar */
  padding: 8px; /* even 8px gap from the viewport edges */
}
.adm-header-floating .header-inner {
  max-width: none; /* full width — only the site-header padding sets the edge gap */
  margin: 0;
  padding: var(--space-4) var(--space-8);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-base) ease, background var(--duration-base) ease;
}
.adm-header-floating .site-header.is-scrolled { background: transparent; box-shadow: none; }
.adm-header-floating .site-header.is-scrolled .header-inner { box-shadow: var(--shadow-lg); }
/* Transparent-over-heroes + floating: keep the floating pill readable over the hero. */
.adm-header-transparent.adm-header-floating .site-header:not(.is-scrolled) .header-inner { background: var(--glass-bg); }
/* While a mega/dropdown menu is open (JS adds .mega-open), make the header's glass surface OPAQUE so the
   dim .mega-overlay behind it can't bleed through and darken it — that darkening is what made hovered
   dropdown pills look lighter than flat items. Covers the floating pill (.header-inner) and the standard
   full-width bar (.site-header). !important beats the transparent/glass floating + transparent-hero rules. */
.site-header.mega-open .header-inner,
body:not(.adm-header-floating) .site-header.mega-open {
  background: var(--color-bg) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  transition: none !important; /* apply instantly — the global `* {transition:.3s}` otherwise leaves it mid-fade (translucent) so the overlay still bleeds through */
}

/* Empty pillar panel.
   Four UAE pillars have no sub-services by design of the keyword map, so an empty panel is a
   normal state rather than an edge case. The --empty modifier MUST be scoped to .is-active,
   because .mega__subpanel is display:none by default and an unscoped rule showed all the empty
   panels stacked on top of each other at once. */
.mega__subpanel--empty.is-active { display: block; }
.mega__empty { max-width: 46ch; }
.mega__empty-title { margin: 0 0 6px; font-weight: 500; color: var(--color-text-primary); }
.mega__empty-desc { margin: 0 0 14px; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.55; }


/* ── Narrow phones: stop the header actions overhanging ──────────────────────
   The bar is logo + region picker + burger with a 24px gap inside 32px padding: 372px of
   demand in a 359px bar at 375px wide, so the actions hung 14px past the padding, against the
   rounded edge of the floating pill. Only viewports under ~390px are affected, so the gutter
   and gap give way rather than the controls, which are touch targets.

   Last in the file on purpose. .adm-header-floating .header-inner sets the pill's padding at
   the same (0,2,0) specificity, so this only wins by coming after it; padding-inline leaves
   that rule's vertical padding alone. */
@media (max-width: 420px) {
  .header-inner,
  .adm-header-floating .header-inner {
    gap: var(--space-3);
    padding-inline: var(--space-4);
  }
}