/* ═══════════════════════════════════════════════════════════════════
   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 {
  flex-shrink: 0;
}


/* ══════════════════════════════
   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. */
html.menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ══════════════════════════════════════════════════════════
   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; }
.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 */
}