/* =============================================================================
   Valunxt — the UAE Services mega menu

   Styles for UaeServicesMega.tsx, built to the supplied reference. Everything
   is under `.vxn-umega`, a class only that component renders, so this file is
   inert on every page that does not show it — which is why it can be listed
   globally in HeadAssets rather than threaded through a page config.

   AboutMega.tsx (20260915) renders the same sheet with a different body: its
   <li> carries `vxn-umega` too, so sections 1, 3 (the ✕) and 5 serve both,
   and its columns and card are section 7.

   ---------------------------------------------------------------------------
   THE PANEL IS A CENTRED BOX, NOT A FULL-BLEED SHEET

   That is the one structural difference from the existing .vxn-mega panels,
   and it is what the reference shows: the sheet stops at ~1216px and the page
   behind it is visible to either side. It still uses `position: fixed` off the
   bar's height, as those panels do — anchoring to the <li> would put it under
   the "Services" item rather than under the page.

   --vxn-navh is published by the header script and tracks the bar's real
   height; the fallback keeps the panel in the right place before that runs.

   ---------------------------------------------------------------------------
   PROPORTIONS, read off the reference (a 1893px-wide capture)

     panel            338 -> 1554     1216 wide, centred
     blue column      338 -> 722      384, i.e. 31.5% of the panel
     tab row          104 -> 162      58px tall
     link pane        162 -> 382
     accent rule      583 -> 590      7px

   The blue column is set as a fraction rather than a fixed width so the panel
   can narrow on smaller desktops without the copy in it re-wrapping oddly.

   The reference's grey footer band, 382 -> 583, is NOT built. It was, and it
   came out on client feedback together with both things in it; the height it
   took went back into the two columns — see the note on .vxn-umega__body.

   ---------------------------------------------------------------------------
   COLOUR is Valunxt's, not the reference's. The reference is another firm's
   brand; what was asked for is its layout and structure. The blue column takes
   the supplied ramp, the active tab takes a pale tint of it, and the accent
   rule at the foot takes the wordmark's violet.
   ============================================================================= */

.vxn-umega {
  --umega-blue: #0b2dbe;
  --umega-ramp: linear-gradient(150deg, #0e3fa8 0%, #1436d8 48%, #0b2dbe 100%);
  --umega-ink: #111a2b;
  --umega-body: #4d5863;
  --umega-tint: #dbe6ff;
  --umega-accent: #6d28d9;
}

/* =============================================================================
   1. THE PANEL
   ============================================================================= */

/* Hidden by default and shown on hover, exactly as the other panels are, so the
   menu works before hydration. React only owns the tab and the dismiss. */
.vxn-umega > .vxn-umega__panel {
  display: none;
}

@media (min-width: 1025px) {
  .elementor-nav-menu--main .vxn-umega {
    position: relative;
  }

  .elementor-nav-menu--main .elementor-nav-menu > li.vxn-umega > .vxn-umega__panel {
    position: fixed;
    top: var(--vxn-navh, 96px);
    right: 0;
    left: 0;
    z-index: 9999;
    /* No side padding: the sheet's inner box takes the page's container. */
    padding: 0 0 40px;
    /* A sheet taller than the space under the bar was being cut off at the
       viewport's foot with no way to reach the rest. Capped and scrolled
       instead — it only engages on short windows. */
    max-height: calc(100vh - var(--vxn-navh, 96px));
    overflow-y: auto;
    overscroll-behavior: contain;

    /* ---- THE BACKDROP, and why it lives on the panel ----------------------
       The reference is a centred box with the page showing around it, which
       works there because the page behind is flat colour. Ours is a hero
       headline at 58px, and the panel's left edge landed mid-word: the page
       read "Accou…" / "Confi…" beside the sheet, which looks like a rendering
       fault rather than like a page behind a menu. That is the reported bug.

       The obvious fix — a `position: fixed` scrim filling the viewport — DOES
       NOT WORK HERE, and it is worth writing down why. The sticky header sets a
       transform, which makes it the containing block for any fixed descendant.
       A scrim at `top: var(--vxn-navh); bottom: 0` therefore resolved against
       the 94px BAR rather than the viewport and computed to exactly 0px tall.
       Measured: position fixed, top 94px, bottom 0px, width 1424.8px,
       height 0px.

       So the backdrop is the panel's own background instead. The panel is
       already full-width and content-height, so it needs no positioning of its
       own, cannot be caught by the same trap, and costs one declaration. */
    background: rgba(6, 18, 44, 0.9);

    /* ---- WHY THIS IS NOT display:none ANY MORE ---------------------------
       It was, and that is why the panel snapped in and out. `display` is not
       an animatable property: there is no interpolation between `none` and
       `block`, so the sheet appeared at full opacity on the first frame of
       hover and vanished on the first frame after the close. What was asked
       for is a smooth close, and no easing on any other property can produce
       one while `display` is the thing being toggled.

       So the panel is laid out at all times on desktop and hidden by opacity
       instead. `visibility` carries the part `opacity` cannot: it takes the
       sheet out of the accessibility tree and the tab order while shut, which
       a transparent-but-present panel would not do. It is transitioned at 0s
       with a DELAY equal to the fade, so it flips to `hidden` only once the
       fade has finished — remove the delay and the panel disappears instantly
       again, which is the whole bug returning by another route.

       `pointer-events: none` is what lets the pointer through to the page
       while the sheet is shut, and it is also what makes the close button
       work: the moment the panel stops taking pointer events the <li> loses
       :hover, which is the signal the component listens for. */
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    /* The CLOSE: 300ms, matched to DUR.megaClose in
       components/motion/motion-tokens.ts. Once that bundle has run, Framer
       Motion writes these four properties inline and takes over from here
       (components/motion/MegaSheet.tsx); what is left in this rule is the
       no-JavaScript and reduced-motion path, kept in step with it. */
    transition:
      opacity 300ms ease,
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 320ms;
  }

  /* Open. This has to out-specify the block above — that one is (0,4,1) with
     the `li` in it, so a rule written the way the old `display:block` was, at
     (0,4,0), would now lose the opacity it is trying to set. Carrying the same
     `.elementor-nav-menu > li` prefix puts it at (0,5,1). */
  .elementor-nav-menu--main .elementor-nav-menu > li.vxn-umega:hover > .vxn-umega__panel,
  .elementor-nav-menu--main .elementor-nav-menu > li.vxn-umega:focus-within > .vxn-umega__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    /* The OPEN: 450ms, matched to DUR.megaOpen. It was 200ms, which read as
       the sheet appearing rather than opening. */
    transition:
      opacity 450ms ease,
      transform 470ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  /* ---- THE BRIDGE ---------------------------------------------------------
     Measured: the <li> ends at y=68 and the panel starts at y=94 (the bar's
     height) — a 26px band belonging to neither. Dragging the pointer from
     "Services" down to the sheet crossed it, `:hover` on the item was lost, and
     the panel closed before it could be reached. That is the reported bug.

     A transparent pad under the item fills the band so the pointer never leaves
     the hover region. It exists only while the menu is open, so it cannot widen
     the item's hit area at rest, and it is transparent so it paints nothing.
     40px rather than 26 gives headroom if the bar ever grows; the overshoot
     lands on the panel, which is inside the same hover region anyway.

     ::before, NOT ::after — and that is not a style choice. Elementor's nav
     widget already owns ::after on every item for its optional divider:

       .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child)::after

     which is (0,3,2) against this rule's (0,3,1). Written as ::after the bridge
     lost by exactly one component and never generated — measured, the computed
     `content` was `none` and the height came out as the divider's 35%. ::before
     on these items is untouched by anything but the universal reset. */
  .elementor-nav-menu--main .vxn-umega:hover::before,
  .elementor-nav-menu--main .vxn-umega:focus-within::before {
    content: "";
    position: absolute;
    top: 100%;
    right: -16px;
    left: -16px;
    z-index: 9998;
    height: 40px;
    background: transparent;
  }

  /* The close button's doing: it beats the open rule above (0,6,1 against
     0,5,1) for as long as the class is set, which is what shuts the sheet
     while the pointer is still inside it. Cleared when the pointer enters the
     trigger or focus arrives on it, and nowhere else: clearing it on pointer
     leave too reopened the sheet the ✕ had just shut (mega-dismiss.ts).

     It fades rather than cutting, so pressing the ✕ reads as the panel
     closing rather than as the panel breaking. Slightly quicker than the open
     because a dismissal is a deliberate act and should feel answered. */
  .elementor-nav-menu--main .elementor-nav-menu > li.vxn-umega.is-dismissed:hover > .vxn-umega__panel,
  .elementor-nav-menu--main .elementor-nav-menu > li.vxn-umega.is-dismissed:focus-within > .vxn-umega__panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity 260ms ease,
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 280ms;
  }
}

/* ---- SMARTMENUS' ARROW, KEPT OFF THE UAE BAR -------------------------------
   With the grid no longer crashing SmartMenus (see THE GRID IS NOT A <ul>),
   SmartMenus finishes its init on this menu and does what it already does on
   /en-in/: appends a span.sub-arrow to every item that owns a <ul> — About and
   Insights here. Its icon is blank, but Elementor pads the span by 10px, which
   pushed those two chevrons off their labels while "Services", which owns no
   <ul>, kept its tight one.

   The UAE bar never had the span, because SmartMenus never got that far, so
   hiding it keeps the bar exactly as it was. Scoped with :has() to the one menu
   that carries this mega item, so /en-in/ keeps its arrows. */
.elementor-nav-menu--main .elementor-nav-menu:has(> li.vxn-umega) > li > a > .sub-arrow {
  display: none;
}

.vxn-umega .vxn-umega__inner {
  /* z-index over the scrim, which is the panel's other child. */
  position: relative;
  z-index: 1;
  /* THE PAGE'S CONTAINER (20260911): the sheet's edges are the same lines the
     bar's logo and pill and every band on the home page sit on, rather than
     95% of the viewport. Same formula as .vxn-ae-home. */
  max-width: min(1520px, calc(100% - clamp(16px, 4vw, 48px) * 2));
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px rgba(6, 18, 44, 0.28);
}

/* =============================================================================
   2. THE TWO COLUMNS
   ============================================================================= */

/* ---- THE SHEET'S HEIGHT IS SET HERE, as a floor ---------------------------
   The grey footer band came out on client feedback and the sheet was asked to
   be taller in its place. Measured at 1400x900 before the change, the two
   columns were 287px and the band under them 264, of a 556px sheet. Without
   the band, 287 reads as a strip hanging off the bar rather than as a menu.

   A floor rather than more padding, for two reasons. The pane's content is not
   one height — the tab row wraps to two lines below 1180 and takes that out of
   the pane — and a floor holds the sheet still while it does. And the two
   links pinned to the foot of each column ("Learn More", "View all") need a
   known bottom to sit level on; see THE FLEX-GROW RESET in 4.

   min() hands the floor back on a short window, where the extra height would
   only push "View all" under the sheet's scroll. The 80 is the panel's own
   40px foot padding and the rule, with room to spare. */
.vxn-umega .vxn-umega__body {
  display: grid;
  grid-template-columns: 31.5% minmax(0, 1fr);
  align-items: stretch;
  min-height: min(440px, calc(100vh - var(--vxn-navh, 96px) - 80px));
}

/* ---- The blue column ----------------------------------------------------- */

/* The bottom padding matches the pane's, which is what puts "Learn More" on the
   same line as "View all" across the join. Change one, change both. */
.vxn-umega .vxn-umega__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  background: var(--umega-ramp);
}

/* THE PHOTOGRAPH (20260911, on client request, replacing the blue silk the
   column carried for a day): the clients photograph from uploads/banners,
   blended into the ramp by luminosity so it reads as a blue duotone of the
   brand rather than as a picture pasted on a panel, and faded towards the
   copy so the words sit on plain blue. A second layer deepens the foot so
   "Learn More" keeps its contrast. Both sit at z-index -1 inside the column's
   own stacking context: over its ramp, under its copy. The path is relative
   to this stylesheet, as the brand sheet's plates are. */
.vxn-umega .vxn-umega__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../content/uploads/banners/clients.webp") center / cover no-repeat;
  opacity: 0.75;
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(160deg, rgba(0, 0, 0, 0.25) 0%, #000 50%, #000 100%);
  mask-image: linear-gradient(160deg, rgba(0, 0, 0, 0.25) 0%, #000 50%, #000 100%);
}

.vxn-umega .vxn-umega__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(11, 45, 190, 0.12) 0%, rgba(8, 28, 120, 0.6) 100%);
}

/* ---- THE PLAIN ASIDE (20260917), every mega sheet ---------------------------
   The client photograph the two rules above show through the ramp (client
   request, 20260911) is switched off here, on every preset, and the ramp —
   the same gradient the column has always sat on — is left to read on its
   own, with the wordmark's own "x" (LogoXGlyph, brand/LogoX.tsx — the same
   mark WhoWeAreTrio and ProofBand use) as its only decoration. The rules
   above stay, rather than coming out, only because a future preset could set
   `aside.plain: false` and ask for the photograph back. */
.vxn-umega .vxn-umega__aside--plain::before,
.vxn-umega .vxn-umega__aside--plain::after {
  content: none;
}

.vxn-umega .vxn-umega__aside--plain .vxn-umega__asidex {
  position: absolute;
  right: -34px;
  bottom: -30px;
  width: 190px;
  height: auto;
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

/* The glyph is `position: absolute` with no z-index of its own, which by the
   ordinary stacking rules paints it OVER static, non-positioned text — the
   opposite of "decoration behind the copy". ProofBand's card carries the same
   mark the same way and answers it the same way: lift the copy onto its own
   stacking level instead of trying to sink the glyph below normal flow. */
.vxn-umega .vxn-umega__aside--plain .vxn-umega__asidetitle,
.vxn-umega .vxn-umega__aside--plain .vxn-umega__asidelede,
.vxn-umega .vxn-umega__aside--plain .vxn-umega__asidelink {
  position: relative;
  z-index: 1;
}

/* No family of its own. It was Forum, the market's display serif; the UAE runs
   one face now, set on <body> by valunxt-uae-face.css, and this inherits it.
   Sizes up on client feedback (20260911): 30px over 26, the lede 15 over 13. */
.vxn-umega .vxn-umega__asidetitle {
  display: block;
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

.vxn-umega .vxn-umega__asidelede {
  margin: 0;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

/* margin-top:auto pins it to the foot of the column, which is what makes the
   blue block the same height as the tabbed pane beside it however many links
   that pane is showing. It only lands ON the foot with the flex-grow reset in
   4 — without that, Elementor grows the anchor into the space above it. */
.vxn-umega .vxn-umega__asidelink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 14px;
  /* 500, not 600: Sanomat Sans has no 600 cut, so 600 drew the Bold face and
     the whole sheet read heavy (client, 20260911). The tabs, this link and
     "View all" sit at Medium; the links themselves at Regular. */
  font-weight: 500;
  color: #fff !important;
  text-decoration: none !important;
}

.vxn-umega .vxn-umega__asidelink .vxn-umega__chev {
  transition: transform 0.3s ease;
}

.vxn-umega .vxn-umega__asidelink:hover .vxn-umega__chev {
  transform: translateX(4px);
}

/* =============================================================================
   3. THE TAB ROW
   ============================================================================= */

.vxn-umega .vxn-umega__main {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.vxn-umega .vxn-umega__tabs {
  display: flex;
  align-items: stretch;
  min-height: 56px;
  border-bottom: 1px solid rgba(14, 53, 95, 0.14);
}

/* THE TABS ARE LINKS, each to its service's own page, and an anchor in this
   menu meets two rules a <button> never did:

     padding: 10px 0 !important   the anchor reset in 4 — ours, (0,2,1)
     flex-grow: 1                 .elementor-nav-menu--layout-horizontal
                                  .elementor-nav-menu a — Elementor's, (0,2,1)

   The first flattens every tab to the width of its text; the second stretches
   the six across the whole row and pushes the ✕ off its end. Written against
   a.vxn-umega__tab under the panel, the rule is (0,3,1) and clears both, with
   the padding `!important` because the reset's is. */
.vxn-umega .vxn-umega__panel a.vxn-umega__tab {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  padding: 0 26px !important;
  border: 0;
  /* The active marker. Transparent at rest rather than absent, so selecting a
     tab does not move the row by 3px. */
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: inherit;
  /* 15px over 13.5, on client feedback (20260911); six tabs at this size
     take ~880px of the 1010 the row has at 1600. Medium, not 600: there is
     no 600 cut and it drew Bold. */
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--umega-ink) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

/* A tab under the pointer lights a paler tint than the selected one, so the
   preview and the selection read as two states rather than one. */
.vxn-umega .vxn-umega__panel a.vxn-umega__tab:hover,
.vxn-umega .vxn-umega__panel a.vxn-umega__tab:focus-visible {
  background: #EEF3FF;
  color: var(--umega-blue) !important;
}

/* The same (0,4,1) as the hover rule and after it in the file, so the selected
   tab keeps its tint under the pointer. That ordering is load-bearing. */
.vxn-umega .vxn-umega__panel a.vxn-umega__tab.is-active {
  background: var(--umega-tint);
  border-bottom-color: var(--umega-blue);
  color: var(--umega-blue) !important;
}

/* Pushed to the far end of the row by the auto margin, as in the reference.

   THREE PROPERTIES HERE EXIST ONLY TO UNDO THE THEME, and dropping any of them
   brings back the reported bug — a filled blue box where a bare ✕ belongs:

     .elementor-kit-5 button  →  padding: 16px; border-radius: 6px

   16px of padding around a 15px glyph is a 47px-tall slab, and the row's
   `align-items: stretch` let it take the full height of the tab row on top of
   that. The rounded corners are the kit's too. So: padding zeroed, a real
   square box, and `align-self` to stop the stretch.

   The button is sized rather than left to its content because it now carries a
   hover disc, and a disc has to be round before it can be a disc. */
.vxn-umega .vxn-umega__close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  align-self: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-left: auto;
  margin-right: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--umega-body);
  cursor: pointer;
  transition:
    background-color 0.22s ease,
    color 0.22s ease;
}

/* The other half of the kit's doing. It paints EVERY button on hover and on
   focus —

     .elementor-kit-5 button:hover, .elementor-kit-5 button:focus { … }
       background-color: var(--e-global-color-vamtam_accent_1)

   — and a rule can only beat a declaration it actually makes, so `background`
   is set here rather than left to the base rule. `button:focus` is in the
   kit's list, so without this the ✕ stayed filled blue after it had been
   clicked, which read as the button being stuck rather than as the menu having
   closed. That is most of what "the close button UI is broken" looked like on
   screen. */
.vxn-umega .vxn-umega__close:focus {
  background: transparent;
  color: var(--umega-body);
}

.vxn-umega .vxn-umega__close:hover,
.vxn-umega .vxn-umega__close:focus-visible {
  background: var(--umega-tint);
  color: var(--umega-blue);
}

.vxn-umega .vxn-umega__close svg {
  width: 13px;
  height: 13px;
}

/* =============================================================================
   4. THE LINK PANE
   ============================================================================= */

.vxn-umega .vxn-umega__pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 36px 32px 32px;
}

/* ---- THE GRID IS NOT A <ul> -----------------------------------------------
   It was, and a <ul> inside a nav menu item is two things to Elementor's nav
   widget, both of them wrong here.

   A DROPDOWN, to its stylesheet: display:none, position:absolute, top:100%
   !important and width:12em, at (0,2,1). Undoing that took a block of
   `!important` resets, and left alone the grid rendered as a 192px box 513px
   below the panel.

   A SUBMENU, to SmartMenus, which Elementor Pro runs over every <ul> in the
   menu. It finds a list's depth by climbing parentNode.parentNode until it
   lands on the menu root, which only works from an even depth. The grid sat
   seven levels down, so the climb stepped past the root and threw on
   `document`: a TypeError on every UAE page (the Next dev overlay's "1
   Issue"), thrown inside the nav widget's init, so SmartMenus never finished
   and initStretchElement(), stretchMenu() and the anchor-link handler queued
   after it never ran. Measured once the grid became a <div>: no error, and
   About and Insights pick up SmartMenus' `has-submenu`.

   As a <div role="list"> it is neither, and needs no reset at all. Turn it
   back into a <ul> and both problems come back with it. */

/* ---- THE ANCHOR RESET -----------------------------------------------------
   Elementor pads every anchor inside a nav menu:

     .elementor-nav-menu--main .elementor-nav-menu a { padding: 13px 20px }

   which is (0,2,1) and beats anything scoped to a single class of ours. That
   padding — not the grid's `gap` — is what made the rows look far apart:
   measured, each 13.5px/18px link occupied a 44px box and the row pitch came
   out at 57px against a 13px gap. With it cleared the pitch is ~31px and the
   panel loses about a third of its height for the same content.

   The blue column's link re-declares its own top padding after this, because
   that one is deliberate — it is the gap between the lede and "Learn More". */
.vxn-umega .vxn-umega__panel a {
  padding:10px 0 !important;
}

/* Written against the panel selector, not as `.vxn-umega .vxn-umega__asidelink`
   — that is (0,2,0) and the reset above is (0,2,1), so with both `!important`
   the reset won and this link lost the gap between it and the lede. */
.vxn-umega .vxn-umega__panel a.vxn-umega__asidelink {
  padding-top: 20px !important;
}

/* ---- THE FLEX-GROW RESET --------------------------------------------------
   Elementor's horizontal nav gives every anchor in the menu `flex-grow: 1`
   (.elementor-nav-menu--layout-horizontal .elementor-nav-menu a, 0,2,1). In
   the bar that is how the items share the row. In the two flex COLUMNS here it
   grows the last link into whatever height is left and centres the text in
   it: measured before the sheet grew, "Learn More" was a 134px-tall box with
   its label halfway down the blue column rather than on its foot.

   With the sheet taller, "View all" would have done the same. Both go back to
   their content size at (0,3,1), start-aligned so neither is a full-width hit
   area either. */
.vxn-umega .vxn-umega__panel a.vxn-umega__asidelink,
.vxn-umega .vxn-umega__panel a.vxn-umega__viewall {
  flex: 0 0 auto;
  align-self: flex-start;
}

.vxn-umega .vxn-umega__grid {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent;
  box-shadow: none;
}

/* Three columns, filled DOWN then across — `grid-auto-flow: column` with a
   fixed row count is what puts items 1-3 in the first column rather than
   across the top, which is the order the reference reads in.

   The bottom margin is the least room "View all" will close to. On a sheet at
   its floor the auto margin above that link opens far wider. */
.vxn-umega .vxn-umega__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  /* The links carry 10px of their own above and below now (the highlight
     needs a shape), so the row gap is smaller than the 22 it was. */
  gap: 10px 20px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.vxn-umega .vxn-umega__grid > li {
  margin: 0;
  min-width: 0;
}

/* THE LINKS (20260911, on client feedback): 15px medium over 13.5 regular,
   and a highlight under the pointer, a tinted pill that the link's own
   padding gives a shape to. The pill is pulled 14px left so the text stays on
   the column's line at rest and the highlight grows outward. The padding is
   asserted because the anchor reset above (10px 0 !important) would flatten
   it; written against the panel at (0,3,1), as the tabs are. */
.vxn-umega .vxn-umega__panel a.vxn-umega__link {
  padding: 10px 14px !important;
}

.vxn-umega .vxn-umega__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: -14px;
  border-radius: 10px;
  font-size: 15px;
  /* Regular: Medium at this size read as bold beside the tabs (client). */
  font-weight: 400;
  line-height: 1.35;
  color: var(--umega-ink) !important;
  text-decoration: none !important;
  transition:
    color 0.22s ease,
    background-color 0.22s ease;
}

.vxn-umega .vxn-umega__link:hover,
.vxn-umega .vxn-umega__link:focus-visible {
  background: var(--umega-tint);
  color: var(--umega-blue) !important;
}

.vxn-umega .vxn-umega__link .vxn-umega__chev {
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}

.vxn-umega .vxn-umega__link:hover .vxn-umega__chev,
.vxn-umega .vxn-umega__link:focus-visible .vxn-umega__chev {
  transform: translateX(4px);
}

/* Pinned to the foot of the pane by the auto margin, level with "Learn More"
   across the join: the two columns share a 32px bottom padding, and both links
   the same 10px anchor pad and 13px type, so their baselines meet at any sheet
   height. */
.vxn-umega .vxn-umega__viewall {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--umega-blue) !important;
  text-decoration: none !important;
  text-underline-offset: 4px;
}

.vxn-umega .vxn-umega__viewall:hover,
.vxn-umega .vxn-umega__viewall:focus-visible {
  text-decoration: underline !important;
}

.vxn-umega .vxn-umega__viewall .vxn-umega__chev {
  transition: transform 0.3s ease;
}

.vxn-umega .vxn-umega__viewall:hover .vxn-umega__chev {
  transform: translateX(4px);
}

.vxn-umega .vxn-umega__chev {
  width: 11px;
  height: 11px;
}

/* =============================================================================
   5. THE ACCENT RULE
   ============================================================================= */

/* The rule that closes the sheet. It sat under the grey footer band until that
   came out; it now closes the two columns directly. */
.vxn-umega .vxn-umega__rule {
  display: block;
  height: 5px;
  background: var(--umega-accent);
}

/* =============================================================================
   5b. THE BURGER DRAWER — moved out (20260914)

   This panel used to render inline in the burger drawer, stacked to one
   column, and on a phone it came out 54px wide with every word broken letter
   by letter. The drawer's copy of the menu no longer renders this component at
   all: it renders Services and Insights as nested lists (MegaDrawerItem.tsx),
   styled by valunxt-mobile-menu.css. Nothing here applies below 1400 any more,
   where the desktop bar is hidden.
   ============================================================================= */

/* =============================================================================
   6. NARROWER DESKTOPS

   Below 1400 the bar becomes the burger drawer and this panel is not shown at
   all (see 5b). So the only breakpoints needed are the two where the panel is
   still on screen but the reference's proportions stop fitting.
   ============================================================================= */

@media (max-width: 1400px) {
  .vxn-umega .vxn-umega__body {
    grid-template-columns: 30% minmax(0, 1fr);
  }

  .vxn-umega .vxn-umega__panel a.vxn-umega__tab {
    padding: 0 18px !important;
    font-size: 14px;
  }
}

@media (max-width: 1180px) {
  /* Bottom padding kept equal to the pane's — see the blue column's note. */
  .vxn-umega .vxn-umega__aside {
    padding: 30px 26px 32px;
  }

  .vxn-umega__asidetitle {
    font-size: 27px;
  }

  /* The tab row is the first thing to run out of width — six services do not
     fit on one line at this size, so it wraps rather than clipping a tab. */
  .vxn-umega .vxn-umega__tabs {
    flex-wrap: wrap;
    padding-top: 4px;
  }

  .vxn-umega .vxn-umega__panel a.vxn-umega__tab {
    border-bottom-width: 2px;
    padding: 8px 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vxn-umega .vxn-umega__chev,
  .vxn-umega__tab,
  .vxn-umega__close,
  .vxn-umega .vxn-umega__link {
    transition: none !important;
  }

  /* The panel's open and close are the one transition here that cannot simply
     be dropped: `visibility` is transitioned with a delay so the sheet stays
     on screen for the length of the fade, and killing the transition outright
     would leave `opacity` snapping while `visibility` waited on nothing. The
     motion is removed by zeroing the durations and the translate instead, so
     the sheet still appears and disappears in one frame — which is what
     reduced motion asks for — with visibility still switching in step. */
  .elementor-nav-menu--main .elementor-nav-menu > li.vxn-umega > .vxn-umega__panel,
  .elementor-nav-menu--main .elementor-nav-menu > li.vxn-umega:hover > .vxn-umega__panel,
  .elementor-nav-menu--main .elementor-nav-menu > li.vxn-umega:focus-within > .vxn-umega__panel,
  .elementor-nav-menu--main
    .elementor-nav-menu
    > li.vxn-umega.is-dismissed:hover
    > .vxn-umega__panel {
    transform: none;
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

/* =============================================================================
   7. THE ABOUT PANEL (20260915)

   AboutMega.tsx. The sheet around it is sections 1 and 5 and its ✕ is section
   3's, all reached through the `vxn-umega` class its <li> carries; this is the
   body, `.vxn-amega`, built from the two references the client supplied:

     Reliant Surveyors, "About Us"   headed columns of links, each on its own
                                     hairline with a chevron at the end, and a
                                     card whose artwork carries a figure
     Savills, "Why Savills"          a sentence under each entry

   In Valunxt's colours and one face, as the other panels are: the sheet's ink
   and body greys, the brand blue for whatever is lit, the ramp under the
   artwork, and the violet rule closing the sheet.

   THREE COLUMNS, the third a little wider for the card. Every column opens
   with a heading row of one fixed height, so the ✕ on the third one's row
   cannot push that column down: the first link rows and the top of the
   artwork start on one line.

   THE ANCHOR RULES THIS HAS TO CLEAR are the ones section 4 lists: the reset
   `.vxn-umega .vxn-umega__panel a { padding: 10px 0 !important }` at (0,2,1),
   and Elementor's own on every anchor in a nav menu, `display: flex`,
   `line-height: 20px`, `white-space: nowrap` and `flex-grow: 1`. So the two
   links here are written as `.vxn-umega .vxn-umega__panel a.x` at (0,3,1),
   with the padding asserted, and `white-space` put back: nowrap would run a
   described link off the sheet on one line.

   The desktop bar only shows from 1400px, so the sheet is 1304 to 1520px wide
   wherever this is seen, and the proportions hold across it without a
   breakpoint.
   ============================================================================= */

.vxn-umega .vxn-amega {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr);
  column-gap: clamp(36px, 3.4vw, 64px);
  align-items: start;
  padding: 34px 48px 40px;
}

.vxn-umega .vxn-amega__col {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.vxn-umega .vxn-amega__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  margin: 0 0 12px;
}

/* The Services column's title, in the sheet's ink rather than on blue. */
.vxn-umega .vxn-amega__title {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--umega-ink);
}

/* ---- The link rows ---------------------------------------------------------
   Name over its sentence, the chevron centred on both. A hairline under every
   row; pointed at, a blue line draws along it from the left, the name turns
   blue and the chevron steps on, the way the Services links move. */

.vxn-umega .vxn-umega__panel a.vxn-amega__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 4px;
  padding: 15px 2px 16px 0 !important;
  border-bottom: 1px solid rgba(14, 53, 95, 0.12);
  line-height: normal;
  white-space: normal;
  color: var(--umega-ink) !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}

.vxn-umega .vxn-amega__row::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--umega-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.vxn-umega .vxn-amega__name {
  grid-column: 1;
  grid-row: 1;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--umega-ink);
  transition: color 0.25s ease;
}

/* `pretty` keeps a lone word off the second line ("advise.", "and Noida."
   both came out that way at 1600). */
.vxn-umega .vxn-amega__text {
  grid-column: 1;
  grid-row: 2;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--umega-body);
  text-wrap: pretty;
}

.vxn-umega .vxn-amega__row .vxn-umega__chev {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--umega-ink);
  transition:
    transform 0.3s ease,
    color 0.25s ease;
}

.vxn-umega .vxn-amega__row:hover .vxn-amega__name,
.vxn-umega .vxn-amega__row:focus-visible .vxn-amega__name,
.vxn-umega .vxn-amega__row:hover .vxn-umega__chev,
.vxn-umega .vxn-amega__row:focus-visible .vxn-umega__chev {
  color: var(--umega-blue);
}

.vxn-umega .vxn-amega__row:hover .vxn-umega__chev,
.vxn-umega .vxn-amega__row:focus-visible .vxn-umega__chev {
  transform: translateX(4px);
}

.vxn-umega .vxn-amega__row:hover::after,
.vxn-umega .vxn-amega__row:focus-visible::after {
  transform: scaleX(1);
}

.vxn-umega .vxn-amega__row:focus-visible,
.vxn-umega .vxn-umega__panel a.vxn-amega__card:focus-visible {
  outline: 2px solid var(--umega-blue);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---- The card ---------------------------------------------------------------
   One link. `flex: 0 0 auto` is THE FLEX-GROW RESET of section 4: without it
   Elementor grows the anchor down the column. */

.vxn-umega .vxn-umega__panel a.vxn-amega__card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 !important;
  line-height: normal;
  white-space: normal;
  color: var(--umega-ink) !important;
  text-decoration: none !important;
}

/* THE ARTWORK is the client's texture (uae/home/expertise-abstract.webp,
   supplied for the expertise band) laid over the brand ramp by luminosity,
   the treatment the Services column gives its photograph, so the waves come
   out in the brand's blues whatever blue the file itself is. A wash from the
   left deepens the side away from the figure. Both layers sit at z-index -1
   inside the box's own stacking context: over the ramp, under the figure. */
.vxn-umega .vxn-amega__art {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--umega-ramp);
}

.vxn-umega .vxn-amega__art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../content/uploads/uae/home/expertise-abstract.webp") center / cover no-repeat;
  opacity: 0.9;
  mix-blend-mode: luminosity;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.vxn-umega .vxn-amega__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, rgba(8, 28, 120, 0.42) 0%, rgba(11, 45, 190, 0) 62%);
}

/* THE FIGURE, as a stamp: the reference's device. The perforations are two
   background layers, not a mask, so nothing clips its shadow: a grid of
   10px tiles with a hole at every tile corner, and a solid centre laid over
   it 5px in from each edge. Only the half-holes on the edges stay open, and
   they show the artwork through. The box is 100 x 110, whole tiles both
   ways, so the corners come out alike. A hairline 9px inside finishes it. */
.vxn-umega .vxn-amega__stamp {
  position: absolute;
  top: 50%;
  right: 8%;
  display: flex;
  box-sizing: border-box;
  width: 100px;
  height: 110px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  background:
    linear-gradient(#fff, #fff) center / calc(100% - 10px) calc(100% - 10px) no-repeat,
    radial-gradient(circle, transparent 2.4px, #fff 2.9px) -5px -5px / 10px 10px;
  filter: drop-shadow(0 10px 18px rgba(6, 18, 44, 0.28));
  text-align: center;
  transform: translateY(-50%);
}

.vxn-umega .vxn-amega__stamp::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(11, 45, 190, 0.22);
  pointer-events: none;
}

.vxn-umega .vxn-amega__num {
  display: block;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--umega-blue);
}

.vxn-umega .vxn-amega__label {
  display: block;
  max-width: 70px;
  margin-top: 7px;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--umega-ink);
}

.vxn-umega .vxn-amega__cardtitle {
  display: block;
  margin: 18px 0 8px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--umega-ink);
  transition: color 0.25s ease;
}

.vxn-umega .vxn-amega__cardtext {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--umega-body);
  text-wrap: pretty;
}

/* Section 4's "View all": the same size, weight and blue, and the underline
   when lit. The arrow is the site's one arrow, which nudges on its own. */
.vxn-umega .vxn-amega__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--umega-blue);
  text-underline-offset: 4px;
}

.vxn-umega .vxn-amega__card:hover .vxn-amega__art::before,
.vxn-umega .vxn-amega__card:focus-visible .vxn-amega__art::before {
  transform: scale(1.05);
}

.vxn-umega .vxn-amega__card:hover .vxn-amega__cardtitle,
.vxn-umega .vxn-amega__card:focus-visible .vxn-amega__cardtitle {
  color: var(--umega-blue);
}

.vxn-umega .vxn-amega__card:hover .vxn-amega__morelabel,
.vxn-umega .vxn-amega__card:focus-visible .vxn-amega__morelabel {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .vxn-umega .vxn-amega__row::after,
  .vxn-umega .vxn-amega__art::before,
  .vxn-umega .vxn-amega__row .vxn-umega__chev {
    transition: none !important;
  }

  .vxn-umega .vxn-amega__card:hover .vxn-amega__art::before,
  .vxn-umega .vxn-amega__card:focus-visible .vxn-amega__art::before {
    transform: none;
  }
}