/* ==========================================================================
   Valunxt Capital — landing-page feature blocks (2026-09)

   Four additions to the home page, all additive: nothing here overrides a
   selector that valunxt-brand.css or the Elementor cascade already owns, so
   the rest of the page renders exactly as before. Loaded after
   valunxt-brand.css and reusing its tokens (--vxn-blue, --vxn-violet, …).

     1. .vxn-trio    three feature cards under "Who We Are"
     2. .vxn-klay    the x motif and hover states added to the services band
     3. .vxn-whyus   the glass banner
     4. .vxn-proof   the proof band that follows the services section

   And four more, added 2026-09, that only /en-ae/ renders:

     5. .vxn-impact     the dark impact strip
     6. .vxn-spotlight  one practice, copy beside artwork
     7. .vxn-mosaic     two split tiles beside a brand tile
     8. .vxn-careers    the split careers band

   And two more, added 2026-09 from supplied reference artwork, /en-ae/ only:

    19. .vxn-figs       the figures band, a glass panel on flowing ribbons
    20. .vxn-post       the poster trio, three portrait panels with the glass
    21. .vxn-xp         "Expertise Measured in Decades.", copy beside a wedge
                        photograph (20260915, replaces the careers band)

   The recurring device is the wordmark's "x" used as a window onto a
   photograph — see components/brand/LogoX.tsx for why the glyph is taken from
   the logo outline rather than drawn.
   ========================================================================== */

:root {
  /* The card gradient shared by the trio, the service panels and the proof
     band. One definition so the three read as the same family. */
  --vxn-grad-card: linear-gradient(150deg, #1B3FA8 0%, #3C22C4 46%, #9C00DD 100%);
  --vxn-grad-card-hi: linear-gradient(150deg, #234CC4 0%, #4A2BE0 46%, #B01DF2 100%);
  --vxn-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   The x window

   A photograph seen through the letterform. The <img> is clipped by the shared
   objectBoundingBox clipPath (LogoXClipDefs), which stretches to whatever box
   it lands in — so the span is held square and the image inside uses
   object-fit to fill it without distorting the glyph.
   -------------------------------------------------------------------------- */
.vxn-xwin {
  display: block;
  position: relative;
  aspect-ratio: 70.52 / 62.83;
  /* The glyph's own proportions, so the x is never stretched. */
  width: 100%;
}

.vxn-xwin__img {
  display: block;
  width: 100%;
  /* `.elementor img { height: auto }` is 0,1,1 and outranks a lone class, so
     every height this sheet sets has to be stated outright. */
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 1.1s var(--vxn-ease), filter .6s ease;
}

.vxn-x-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   1. .vxn-trio — the three cards under "Who We Are"

   Sits below the existing intro and the four-icon grid; neither is touched.
   The middle card is the gradient one carrying the x window, matching the
   reference; the outer two are cream cards with a plain photograph.
   -------------------------------------------------------------------------- */
.vxn-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 46px 0 0;
}

.vxn-trio__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 468px;
  padding: 24px 24px 26px;
  border-radius: 18px;
  background: var(--vxn-card);
  border: 1px solid var(--vxn-line);
  box-shadow: 0 1px 2px rgba(11, 44, 86, .04);
  text-decoration: none !important;
  overflow: hidden;
  transition: transform .55s var(--vxn-ease), box-shadow .55s var(--vxn-ease),
    border-color .45s ease;
}

.vxn-trio__card:hover,
.vxn-trio__card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(11, 44, 86, .14);
  border-color: rgba(0, 83, 183, .28);
}

.vxn-trio__card:focus-visible {
  outline: 2px solid var(--vxn-blue);
  outline-offset: 3px;
}

/* ---- The eyebrow pill and the corner arrow share a row ---- */
.vxn-trio__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.vxn-trio__tag {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--vxn-line);
  color: var(--vxn-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

.vxn-trio__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--vxn-line);
  color: var(--vxn-blue);
  transition: transform .45s var(--vxn-ease), background-color .35s ease,
    color .35s ease;
}

.vxn-trio__go svg {
  width: 15px;
  height: 15px;
  display: block;
}

.vxn-trio__card:hover .vxn-trio__go {
  transform: translate(3px, -3px);
  background: var(--vxn-blue);
  color: #FFFFFF;
}

.vxn-trio__title {
  margin: 0;
  color: var(--vxn-blue) !important;
  font-size: clamp(19px, 1.55vw, 23px) !important;
  font-weight: 600 !important;
  line-height: 1.32 !important;
  letter-spacing: -.01em;
}

/* ---- The photograph on the two cream cards ---- */
.vxn-trio__media {
  margin-top: auto;
  padding-top: 24px;
  border-radius: 12px;
  overflow: hidden;
}

.vxn-trio__media img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 1.1s var(--vxn-ease);
}

.vxn-trio__card:hover .vxn-trio__media img {
  transform: scale(1.05);
}

/* ---- The gradient middle card ---- */
.vxn-trio__card--brand {
  /* isolation, so a plate at z-index -1 paints ABOVE this background rather
     than behind it — see .vxn-trio__tex. The gradient stays as the ground: it
     is what the card looks like for the moment before the plate has loaded,
     and on any edition that sets no texture at all. */
  isolation: isolate;
  background: var(--vxn-grad-card);
  border-color: transparent;
  color: #FFFFFF;
}

.vxn-trio__card--brand:hover {
  background: var(--vxn-grad-card-hi);
  border-color: transparent;
  box-shadow: 0 20px 50px rgba(60, 34, 196, .34);
}

.vxn-trio__card--brand .vxn-trio__tag {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  color: #FFFFFF;
}

.vxn-trio__card--brand .vxn-trio__go {
  background: #FFFFFF;
  border-color: transparent;
  color: var(--vxn-blue);
}

.vxn-trio__card--brand:hover .vxn-trio__go {
  background: #FFFFFF;
  color: var(--vxn-violet);
}

.vxn-trio__card--brand .vxn-trio__title {
  color: #FFFFFF !important;
}

/* The x window is the card's centrepiece: it takes the space the cream cards
   give their heading, and the heading drops to the foot. */
.vxn-trio__x {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 6px 0 26px;
}

.vxn-trio__x .vxn-xwin {
  width: min(64%, 250px);
}

/* THE PLATE IS THE CARD'S BACKGROUND, not a panel inside it. It fills the card
   edge to edge behind the content — the card already clips to its own radius,
   so the plate needs no radius of its own.

   z-index:-1 inside the card's isolation puts it above the gradient and below
   the tag, the arrow and the heading. */
.vxn-trio__tex {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.vxn-trio__tex img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--vxn-ease);
}

/* A scrim weighted to the two ends and open through the middle. The plate runs
   from deep blue to bright arcs depending on where cover crops it, and both the
   pill at the head and the heading at the foot are white — the middle carries
   nothing, so it is left alone and the texture reads at full strength there. */
.vxn-trio__tex::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(8, 26, 92, .46) 0%,
      rgba(8, 26, 92, .12) 30%,
      rgba(8, 26, 92, .10) 58%,
      rgba(8, 26, 92, .58) 100%);
}

.vxn-trio__card--brand:hover .vxn-trio__tex img {
  transform: scale(1.06);
}

.vxn-trio__card--brand:hover .vxn-xwin__img {
  transform: scale(1.08);
}

.vxn-trio__card--brand .vxn-trio__title {
  margin-top: auto;
}

/* The UAE home page hangs the trio inside .vxn-plat__inner, which is a two
   column grid above 1024px — without this the cards would drop into one of
   those columns instead of running the full width of the section. */
.vxn-trio-span {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   2. The services band — x motif, index numbers, hover

   Additive only: .vxn-klay's layout, sizing and accordion behaviour are
   untouched in valunxt-brand.css. Collapsed panels gain a ghosted x and an
   index; the open panel keeps exactly the composition it had.
   -------------------------------------------------------------------------- */
.vxn-klay__panel {
  /* Was not set before; the accordion transitions flex-grow only. */
  transition: flex-grow .8s cubic-bezier(.4, 0, .2, 1),
    background-color .6s ease;
}

/* The x sits behind the vertical label on a collapsed panel and fades out as
   the panel opens, so it never competes with the copy. */
.vxn-klay__x {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 0;
  width: min(58%, 132px);
  transform: translate(-50%, -50%) scale(.94);
  color: rgba(255, 255, 255, .16);
  opacity: 1;
  pointer-events: none;
  transition: opacity .6s var(--vxn-ease), transform .8s var(--vxn-ease),
    color .6s ease;
}

.vxn-klay__x svg {
  display: block;
  width: 100%;
  height: auto;
}

.vxn-klay__panel:hover .vxn-klay__x {
  color: rgba(255, 255, 255, .3);
  transform: translate(-50%, -50%) scale(1.04);
}

.vxn-klay__panel.is-active .vxn-klay__x {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.3);
}

/* A collapsed panel lifts slightly under the pointer — the only cue the band
   had before was the label colour. */
.vxn-klay__panel:not(.is-active):hover .vxn-klay__bg img {
  opacity: .32;
  filter: grayscale(.3) brightness(.9);
}

.vxn-klay__panel:not(.is-active):hover .vxn-klay__label {
  transform: translateX(-50%) rotate(180deg) translateY(6px);
}

.vxn-klay__label {
  transition: opacity .45s ease, transform .55s var(--vxn-ease);
}

/* The index, top-left of every panel. */
.vxn-klay__num {
  position: absolute;
  top: 26px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: left .8s cubic-bezier(.4, 0, .2, 1),
    transform .8s cubic-bezier(.4, 0, .2, 1),
    background-color .5s ease;
}

/* Open, the index moves out of the centre and aligns with the copy. */
.vxn-klay__panel.is-active .vxn-klay__num {
  left: clamp(28px, 4.5vw, 72px);
  transform: translateX(0);
  background: rgba(255, 255, 255, .2);
}

.vxn-klay__panel:hover .vxn-klay__num {
  background: rgba(255, 255, 255, .24);
}

/* --------------------------------------------------------------------------
   3. .vxn-whyus — the glass banner

   A full-bleed photograph with a frosted panel over its left third. Runs
   alongside the existing "Every Investment Decision Counts" band, which is
   unchanged.
   -------------------------------------------------------------------------- */
.vxn-whyus {
  padding: clamp(40px, 5vw, 74px) clamp(16px, 4vw, 48px);
  background: var(--vxn-cream);
}

.vxn-whyus__frame {
  position: relative;
  max-width: 1520px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
}

.vxn-whyus__media {
  display: block;
  width: 100%;
  height: clamp(420px, 42vw, 560px) !important;
  object-fit: cover;
  border-radius: 20px !important;
}

/* Keeps the frosted panel legible over a bright photograph. */
.vxn-whyus__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(10, 24, 44, .52) 0%,
      rgba(10, 24, 44, .22) 46%,
      rgba(10, 24, 44, 0) 72%);
  pointer-events: none;
}

.vxn-whyus__panel {
  position: absolute;
  z-index: 1;
  left: clamp(18px, 2.6vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  width: min(440px, 42%);
  padding: 26px 28px 30px;
  border-radius: 18px;

  /* The glass. -webkit- included: Safari still needs it for backdrop-filter. */
  background: rgba(246, 244, 239, .58);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 20px 50px rgba(10, 24, 44, .22);
}

/* Where backdrop-filter is unavailable the panel would sit as flat translucent
   wash over the photo and the copy would be unreadable — so make it opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vxn-whyus__panel {
    background: rgba(246, 244, 239, .95);
  }
}

.vxn-whyus__tag {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--vxn-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

.vxn-whyus__spark {
  position: absolute;
  top: 26px;
  right: 26px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vxn-grad-card);
  color: #FFFFFF;
}

.vxn-whyus__spark svg {
  width: 17px;
  height: 17px;
  display: block;
}

.vxn-whyus__title {
  margin: 0 0 14px;
  color: var(--vxn-blue) !important;
  font-size: clamp(26px, 2.4vw, 36px) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: -.015em;
}

/* The highlighted clause, as a gradient-filled block in the reference. */
.vxn-whyus__mark {
  display: inline-block;
  padding: 2px 10px 4px;
  border-radius: 6px;
  background: var(--vxn-grad-card);
  color: #FFFFFF !important;
}

.vxn-whyus__copy {
  margin: 0 0 22px;
  color: var(--vxn-text);
  font-size: 15px;
  line-height: 1.65;
}

/* The one CTA (20260911): was an 8px-radius 15px/500 button with a lift. */
.vxn-whyus__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--vxn-cta-h, 46px);
  padding: 0 var(--vxn-cta-px, 28px);
  border-radius: var(--vxn-cta-r, 999px);
  background-image: var(--vxn-cta-grad);
  background-color: var(--vxn-cta-ink, #0B2DBE);
  color: #FFFFFF !important;
  font-size: var(--vxn-cta-fs, 14px);
  font-weight: var(--vxn-cta-fw, 400);
  letter-spacing: var(--vxn-cta-ls, .01em);
  line-height: 1;
  text-decoration: none !important;
  --vxn-cta-sweep: var(--vxn-cta-sweep-dark, #08248F);
}

.vxn-whyus__cta:hover {
  color: #FFFFFF !important;
}

.vxn-whyus__cta i {
  font-size: 13px;
  transition: transform .35s ease;
}

.vxn-whyus__cta:hover i {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   4. .vxn-proof — the band after the services section

   Two columns: a photograph carrying a frosted quote panel, and a stack of
   compact gradient cards. The reference's cards are half the page tall; these
   are deliberately smaller so more of them fit, per the brief.
   -------------------------------------------------------------------------- */
.vxn-proof {
  padding: clamp(48px, 6vw, 92px) clamp(16px, 4vw, 48px);
  background: var(--vxn-cream);
}

.vxn-proof__inner {
  max-width: 1520px;
  margin: 0 auto;
}

.vxn-proof__head {
  max-width: 60ch;
  margin: 0 0 34px;
}

.vxn-proof__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--vxn-ink);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

.vxn-proof__title {
  margin: 0;
  color: var(--vxn-ink) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  line-height: 1.16 !important;
}

.vxn-proof__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* ---- Left: photograph with the frosted panel ---- */
.vxn-proof__figure {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 400px;
}

.vxn-proof__figure img {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 400px;
  object-fit: cover;
  border-radius: 18px !important;
}

.vxn-proof__quote {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding: 22px 24px 20px;
  border-radius: 14px;
  background: rgba(246, 244, 239, .6);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 16px 40px rgba(10, 24, 44, .2);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vxn-proof__quote {
    background: rgba(246, 244, 239, .95);
  }
}

.vxn-proof__mark {
  display: block;
  margin-bottom: 10px;
  color: var(--vxn-blue);
  font-family: "Inter", sans-serif;
  font-size: 30px;
  line-height: .6;
}

.vxn-proof__text {
  margin: 0 0 16px;
  color: var(--vxn-ink);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
}

.vxn-proof__by {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vxn-proof__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vxn-grad-card);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}

.vxn-proof__who {
  display: block;
  margin: 0;
  color: var(--vxn-blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.vxn-proof__where {
  display: block;
  margin: 0;
  color: var(--vxn-muted);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---- Right: the compact gradient cards ---- */
.vxn-proof__cards {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 22px;
}

.vxn-proof__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 26px 26px;
  border-radius: 18px;
  background: var(--vxn-grad-card);
  color: #FFFFFF;
  overflow: hidden;
  text-decoration: none !important;
  transition: transform .55s var(--vxn-ease), box-shadow .55s var(--vxn-ease),
    background-image .55s ease;
}

.vxn-proof__card:hover,
.vxn-proof__card:focus-visible {
  transform: translateY(-5px);
  background-image: var(--vxn-grad-card-hi);
  box-shadow: 0 20px 48px rgba(60, 34, 196, .3);
}

.vxn-proof__card:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* A ghosted x, bottom-right, so the cards carry the same motif as the trio. */
.vxn-proof__card .vxn-proof__x {
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 148px;
  color: rgba(255, 255, 255, .1);
  pointer-events: none;
  transition: transform .8s var(--vxn-ease), color .6s ease;
}

.vxn-proof__card .vxn-proof__x svg {
  display: block;
  width: 100%;
  height: auto;
}

.vxn-proof__card:hover .vxn-proof__x {
  transform: scale(1.1) rotate(-4deg);
  color: rgba(255, 255, 255, .16);
}

.vxn-proof__card .vxn-trio__tag {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  color: #FFFFFF;
}

.vxn-proof__card .vxn-trio__go {
  background: #FFFFFF;
  border-color: transparent;
  color: var(--vxn-blue);
}

.vxn-proof__card:hover .vxn-trio__go {
  transform: translate(3px, -3px);
  background: #FFFFFF;
  color: var(--vxn-violet);
}

.vxn-proof__stat {
  position: relative;
  z-index: 1;
  margin: 14px 0 6px;
  font-family: "Inter", sans-serif;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
}

.vxn-proof__label {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, .84);
  font-size: 14px;
  line-height: 1.55;
}

.vxn-proof__basis {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .6);
  font-size: 11.5px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .vxn-trio {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vxn-trio__card {
    min-height: 0;
  }

  .vxn-trio__x .vxn-xwin {
    width: min(50%, 210px);
  }

  .vxn-whyus__panel {
    position: static;
    transform: none;
    width: auto;
    margin: -70px 16px 0;
  }

  .vxn-whyus__frame {
    overflow: visible;
  }

  .vxn-whyus__frame::after {
    border-radius: 20px;
  }

  .vxn-whyus__media {
    height: clamp(300px, 46vw, 420px);
  }

  .vxn-proof__grid {
    grid-template-columns: 1fr;
  }

  /* The x is drawn centred on a tall collapsed panel; stacked panels are wide
     and short, so it would sit over the label. */
  .vxn-klay__x,
  .vxn-klay__num {
    display: none;
  }
}

@media (max-width: 767px) {

  .vxn-whyus__panel {
    padding: 22px 20px 24px;
  }

  .vxn-proof__quote {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 18px 18px 16px;
  }

  .vxn-proof__cards {
    grid-template-rows: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .vxn-trio__card,
  .vxn-trio__go,
  .vxn-trio__media img,
  .vxn-xwin__img,
  .vxn-klay__x,
  .vxn-klay__num,
  .vxn-whyus__cta,
  .vxn-proof__card,
  .vxn-proof__x {
    transition: none !important;
  }

  .vxn-trio__card:hover,
  .vxn-proof__card:hover {
    transform: none;
  }
}

/* ==========================================================================
   5-8. The UAE feature bands
   components/sections/UaeImpactBands.tsx

   Four blocks that run between the services accordion and the insights
   carousel on /en-ae/ only. The layouts came from supplied reference artwork;
   the palette is this build's own — every surface is mixed from the tokens in
   valunxt-brand.css, and the artwork is the abstract/texture set already in
   uploads.

     5. .vxn-impact     the dark impact strip
     6. .vxn-spotlight  one practice, copy beside artwork
     7. .vxn-mosaic     two split tiles beside a brand tile
     8. .vxn-careers    the split careers band

   Self-contained: the responsive and reduced-motion rules for these four are
   at the foot of this block rather than folded into the media queries above,
   so the set can be lifted out in one piece.
   ========================================================================== */
:root {
  /* The dark card surface. Deeper than --vxn-navy-2 so the texture washed over
     it still reads as texture rather than as a second colour. */
  --vxn-band-dark: #0B2C56;
  /* The tinted band behind the spotlight — the blue at the far end of its own
     ramp, light enough to sit between two cream sections without banding. */
  --vxn-band-tint: #EAF1FC;
}

/* The two shared pieces: the eyebrow and the pill CTA. */
.vxn-band__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--vxn-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* THE ONE CTA (20260911): the geometry is the site's, from the tokens in
   valunxt-brand.css (46px tall, 28px sides, 14px/600, a full pill); it was an
   11.5px uppercase pill of its own. The variants below only choose the fill
   for the ground they sit on, and the hover is the site's wedge, which
   valunxt-brand.css applies to this class. */
.vxn-band__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--vxn-cta-h, 46px);
  padding: 0 var(--vxn-cta-px, 28px);
  border-radius: var(--vxn-cta-r, 999px);
  border: 1px solid transparent;
  font-size: var(--vxn-cta-fs, 14px);
  font-weight: var(--vxn-cta-fw, 400);
  letter-spacing: var(--vxn-cta-ls, .01em);
  text-transform: none;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s var(--vxn-ease), background-color .25s var(--vxn-ease),
    border-color .25s var(--vxn-ease), color .25s var(--vxn-ease);
}

.vxn-band__pill i {
  font-size: 13px;
  line-height: 1;
  transition: transform .25s var(--vxn-ease);
}

.vxn-band__pill:hover i,
.vxn-band__pill:focus-visible i {
  transform: translateX(3px);
}

/* Every `color` below is asserted. The brand sheet carries `.elementor-kit-5 a`
   { color: #fff }, which is a class plus a type and so outranks a single class
   of ours — without !important an <a> pill takes white, which is invisible on
   the ghost variant and close to it on the accent. The <span> pills inside the
   mosaic cards are unaffected either way; this keeps the two spellings of the
   same pill rendering identically. */

/* On the dark surfaces (the impact card, the mosaic cards): the inverse pill,
   white with the brand ink, and a pale wedge on hover. It was blue on navy. */
.vxn-band__pill--accent {
  background: #FFFFFF;
  color: var(--vxn-cta-ink, #0B2DBE) !important;
  --vxn-cta-sweep: var(--vxn-cta-sweep-light, #EAF0FF);
}

.vxn-band__pill--accent:hover,
.vxn-band__pill--accent:focus-visible {
  color: var(--vxn-cta-ink, #0B2DBE) !important;
}

/* On the light surfaces: the gradient, and a deeper blue wedge. */
.vxn-band__pill--solid {
  background-image: var(--vxn-cta-grad);
  background-color: var(--vxn-cta-ink, #0B2DBE);
  color: #FFFFFF !important;
  --vxn-cta-sweep: var(--vxn-cta-sweep-dark, #08248F);
}

.vxn-band__pill--solid:hover,
.vxn-band__pill--solid:focus-visible {
  color: #FFFFFF !important;
}

/* The outline: the wedge fills it with the gradient. */
.vxn-band__pill--ghost {
  background: transparent;
  border-color: rgba(11, 45, 190, .35);
  color: var(--vxn-cta-ink, #0B2DBE) !important;
  --vxn-cta-sweep: var(--vxn-cta-grad);
}

.vxn-band__pill--ghost:hover,
.vxn-band__pill--ghost:focus-visible {
  border-color: transparent;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   5. .vxn-impact — the dark impact strip
   -------------------------------------------------------------------------- */
.vxn-impact {
  padding: clamp(26px, 3vw, 44px) clamp(16px, 4vw, 48px) 0;
  background: #fff;
}

/* Height and internal spacing raised on client feedback — the band was 206px
   tall at 1440 and the copy sat close to all four edges, which read as cramped
   against the width. The min-height is what does the work: the two columns are
   short enough that padding alone left the box governed by the taller of them. */
.vxn-impact__card {
  position: relative;
  max-width: 1520px;
  min-height: clamp(210px, 17.5vw, 286px);
  margin: 0 auto;
  padding: clamp(38px, 4.2vw, 64px) clamp(30px, 3.8vw, 66px);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  background: var(--vxn-band-dark);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 74px);
  align-items: center;
}

/* Washed right back: it is a surface, not a picture. */
.vxn-impact__texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  /* !important: Elementor's `.elementor img { height: auto }` is a class plus a
     type and outranks a single class of ours, which would leave the artwork at
     its own aspect ratio instead of filling the box. Same for every other
     cover image in this block. */
  height: 100% !important;
  object-fit: cover;
  opacity: .5;
  /* Fades out under the headline so the type never sits on the busiest part. */
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, #000 62%);
  mask-image: linear-gradient(100deg, transparent 6%, #000 62%);
}

/* No family on any title in bands 5-8. They were Forum; these four bands render
   on /en-ae/ only (UaeImpactBands), and that market's one face is set on <body>
   by valunxt-uae-face.css, so the titles inherit it. */
.vxn-impact__title {
  margin: 0;
  color: #FFFFFF !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 2.9vw, 44px) !important;
  line-height: 1.14 !important;
}

.vxn-impact__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(14px, 1.6vw, 22px);
}

.vxn-impact__copy {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   6. .vxn-spotlight — one practice, copy beside artwork
   -------------------------------------------------------------------------- */
.vxn-spotlight {
  padding: clamp(34px, 3.8vw, 60px) clamp(16px, 4vw, 48px);
  margin-top: clamp(26px, 3vw, 44px);
  background: var(--vxn-band-tint);
}

.vxn-spotlight__inner {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  /* Widened with the band's height, on client feedback. */
  gap: clamp(36px, 4.8vw, 92px);
  align-items: stretch;
}

.vxn-spotlight__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The reference sets the CTA at the foot of the column rather than under the
   paragraph — the gap is the point, so it is pushed, not margined. */
.vxn-spotlight__copy .vxn-band__pill {
  margin-top: auto;
}

.vxn-spotlight__title {
  margin: 0 0 14px;
  color: var(--vxn-ink) !important;
  font-weight: 400 !important;
  font-size: clamp(30px, 3.1vw, 48px) !important;
  line-height: 1.12 !important;
}

.vxn-spotlight__lede {
  margin: 0 0 clamp(20px, 2.2vw, 32px);
  max-width: 52ch;
  color: var(--vxn-text);
  font-size: 15px;
  line-height: 1.68;
}

.vxn-spotlight__media {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  /* Sets the height of the whole band: the copy column is shorter, and its CTA
     is pushed to the foot to meet this. Lower it and the band gets shorter.

     Raised on client feedback — 328px at 1440 left the artwork reading as a
     thumbnail beside its own paragraph. */
  min-height: clamp(300px, 31vw, 470px);
}

.vxn-spotlight__media img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* The wordmark's x, dropped in the corner the way the service panels use it. */
.vxn-spotlight__x {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: clamp(38px, 4vw, 58px);
  color: #FFFFFF;
  opacity: .5;
  pointer-events: none;
}

.vxn-spotlight__x svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   7. .vxn-mosaic — two split tiles beside a brand tile (layout 20260915)

   REBUILT on client feedback ("not looking good as expected, try a
   different, better layout"). It was a tall photograph beside two short
   cards, each title set over its picture under a dark scrim, so the pictures
   went muddy and the words ran across faces. The links and the words are
   unchanged; the arrangement is new:

     +------------+------------+------------+
     | photograph | About      |            |
     +------------+------------+  Research  |
     | Integrated | photograph |  on its    |
     | Advisory   |            |  texture   |
     +------------+------------+------------+

   The two photographs sit on the diagonal with nothing written over them,
   so no scrim, and each shows at full strength. The words sit on a pale
   tint of the brand blue with the ready band's corner glow. The Research
   tile runs the full height on its practice's own banner.

   Three equal columns: a split tile spans two of them and the brand tile is
   one. Stacked at 1024 and below with the split tiles keeping their halves;
   at 600 the halves stack as well, photograph first.

   SPECIFICITY. Written as .vxn-mosaic .vxn-mosaic__x at (0,2,0): the UAE
   type sheet sizes every h3 through body.vxn-uae-type h3 at (0,1,2) with
   !important, and the kit colours links and rounds images at (0,1,1).
   -------------------------------------------------------------------------- */
.vxn-mosaic {
  padding: clamp(44px, 5.5vw, 86px) clamp(16px, 4vw, 48px) 0;
  background: #fff;
}

.vxn-mosaic .vxn-mosaic__grid {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* A row is a split tile's words (eyebrow, a two-line title, the pill) on
     their padding, over a floor for the widths where the words run short.
     Kept near the old band's height, which the client had asked to come
     down from 548 at 1600 to 440: the grid is 504 there now, and the row
     grows if a title ever needs a third line. */
  grid-auto-rows: minmax(clamp(210px, 14vw, 260px), auto);
  gap: 20px;
}

.vxn-mosaic .vxn-mosaic__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
}

.vxn-mosaic .vxn-mosaic__card:focus-visible {
  outline: 2px solid var(--vxn-blue);
  outline-offset: 4px;
}

/* ---- The split tiles --------------------------------------------------------
   One link, two halves. The glow sits in the words' outer corner: top right
   on the first tile, bottom left on the flipped one. */
.vxn-mosaic .vxn-mosaic__card--split {
  grid-column: 1 / span 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background:
    radial-gradient(60% 95% at 100% 0%, rgba(11, 45, 190, .075) 0%, rgba(11, 45, 190, 0) 72%),
    #F1F5FC;
  transition: background-color .4s var(--vxn-ease);
}

.vxn-mosaic .vxn-mosaic__card--flip {
  grid-row: 2;
  background:
    radial-gradient(60% 95% at 0% 100%, rgba(11, 45, 190, .075) 0%, rgba(11, 45, 190, 0) 72%),
    #F1F5FC;
}

.vxn-mosaic .vxn-mosaic__card--flip .vxn-mosaic__shot {
  order: 2;
}

.vxn-mosaic .vxn-mosaic__shot {
  position: relative;
  display: block;
  min-height: 100%;
  overflow: hidden;
}

/* !important twice: `.elementor img { height: auto }` would leave the
   picture at its own aspect ratio, and the kit's 8px image radius would show
   at the seam, where the photograph meets the words square. The crop point
   comes from the markup (focus), per photograph. */
.vxn-mosaic .vxn-mosaic__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform .9s var(--vxn-ease);
}

/* Words from the top, pill at the foot, on the same padding in every tile:
   so the two eyebrows on the top row share a line, and so do the two pills
   on the bottom row (the Integrated tile's and the Research tile's). */
.vxn-mosaic .vxn-mosaic__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  padding: clamp(24px, 2.2vw, 40px);
}

.vxn-mosaic .vxn-mosaic__body .vxn-band__pill {
  margin-top: auto;
}

/* The ready band's eyebrow: a short rule, then the tracked capitals. */
.vxn-mosaic .vxn-mosaic__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(12px, 1vw, 16px);
  color: var(--vxn-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.vxn-mosaic .vxn-mosaic__eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.vxn-mosaic .vxn-mosaic__title {
  margin: 0 0 clamp(16px, 1.4vw, 24px);
  max-width: 17em;
  color: var(--vxn-ink) !important;
  font-size: clamp(22px, 1.9vw, 31px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
}

/* ---- The brand tile ----------------------------------------------------------
   The Research practice's banner (the vertical fins) under a wash of the
   brand's deep blue. The wash is blue, not the dark scrim the old cards
   carried, and it only runs as far as the words: the fins are brightest in
   the lower half, where only the white pill sits. */
.vxn-mosaic .vxn-mosaic__card--brand {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  background: var(--vxn-blue);
}

.vxn-mosaic .vxn-mosaic__card--brand .vxn-mosaic__shot {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.vxn-mosaic .vxn-mosaic__card--brand .vxn-mosaic__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(8, 36, 143, .74) 0%,
      rgba(8, 36, 143, .42) 38%,
      rgba(8, 36, 143, 0) 66%);
  pointer-events: none;
}

.vxn-mosaic .vxn-mosaic__card--brand .vxn-mosaic__body {
  flex: 1 1 auto;
}

.vxn-mosaic .vxn-mosaic__card--brand .vxn-mosaic__eyebrow {
  color: #FFFFFF;
}

/* Measured at 1600 with the words hidden: the texture under the title holds
   white at 9.1:1 at its 95th-percentile pixel, 8.1:1 at its brightest. */
.vxn-mosaic .vxn-mosaic__card--brand .vxn-mosaic__title {
  max-width: 12em;
  color: #FFFFFF !important;
  font-size: clamp(28px, 2.5vw, 40px) !important;
  line-height: 1.14 !important;
}

/* ---- Pointed at --------------------------------------------------------------
   The whole tile is the link, so pointing anywhere on it runs the pill's
   wedge, not only pointing at the pill; the picture eases in and the tint
   deepens a step. Nothing lifts: the tiles share their edges. */
.vxn-mosaic .vxn-mosaic__card--split:hover,
.vxn-mosaic .vxn-mosaic__card--split:focus-visible {
  background-color: #E8EFFB;
}

.vxn-mosaic .vxn-mosaic__card:hover .vxn-mosaic__media,
.vxn-mosaic .vxn-mosaic__card:focus-visible .vxn-mosaic__media {
  transform: scale(1.05);
}

.vxn-mosaic .vxn-mosaic__card:hover .vxn-band__pill::before,
.vxn-mosaic .vxn-mosaic__card:focus-visible .vxn-band__pill::before {
  width: 250%;
}

/* ---- Arrival -----------------------------------------------------------------
   Visible by default; hidden only while UaeBandMotion.tsx marks a tile
   pending. The tiles rise in reading order, 90ms apart. The transition list
   carries the tint as well, because this shorthand replaces the tile's own. */
.vxn-mosaic .vxn-mosaic__card[data-anim='pending'] {
  opacity: 0;
  transform: translateY(18px);
}

.vxn-mosaic .vxn-mosaic__card[data-anim='in'] {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s var(--vxn-ease) var(--vxn-anim-d, 0ms),
    transform .8s var(--vxn-ease) var(--vxn-anim-d, 0ms),
    background-color .4s var(--vxn-ease);
}

/* ---- Widths --------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .vxn-mosaic .vxn-mosaic__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
  }

  .vxn-mosaic .vxn-mosaic__card--split,
  .vxn-mosaic .vxn-mosaic__card--flip,
  .vxn-mosaic .vxn-mosaic__card--brand {
    grid-column: 1;
    grid-row: auto;
  }

  .vxn-mosaic .vxn-mosaic__card--split {
    min-height: clamp(240px, 28vw, 280px);
  }

  .vxn-mosaic .vxn-mosaic__card--brand {
    min-height: clamp(240px, 27vw, 280px);
  }

  .vxn-mosaic .vxn-mosaic__body {
    padding: clamp(24px, 3vw, 32px);
  }

  /* Full width now, so the titles take a size up: the desktop clamps would
     leave them at their 22 and 28px floors on a 942px tile. */
  .vxn-mosaic .vxn-mosaic__title {
    font-size: clamp(22px, 2.9vw, 28px) !important;
  }

  .vxn-mosaic .vxn-mosaic__card--brand .vxn-mosaic__title {
    font-size: clamp(28px, 3.8vw, 38px) !important;
  }
}

/* The halves stack, photograph first. Only the split tiles' photographs
   take the ratio: the brand tile's texture is absolutely placed, and a ratio
   on it would outrank its insets and stop it short of the tile's foot. */
@media (max-width: 600px) {

  .vxn-mosaic .vxn-mosaic__card--split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .vxn-mosaic .vxn-mosaic__card--split .vxn-mosaic__shot {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .vxn-mosaic .vxn-mosaic__card--flip .vxn-mosaic__shot {
    order: 0;
  }

  .vxn-mosaic .vxn-mosaic__body {
    padding: 22px 22px 26px;
  }

  .vxn-mosaic .vxn-mosaic__card--brand {
    min-height: 300px;
  }

  .vxn-mosaic .vxn-mosaic__card--brand .vxn-mosaic__body {
    padding: 26px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .vxn-mosaic .vxn-mosaic__card[data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }

  .vxn-mosaic .vxn-mosaic__media {
    transition: none;
  }

  .vxn-mosaic .vxn-mosaic__card:hover .vxn-mosaic__media,
  .vxn-mosaic .vxn-mosaic__card:focus-visible .vxn-mosaic__media {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   8. .vxn-careers — the split careers band
   -------------------------------------------------------------------------- */
.vxn-careers {
  display: grid;
  /* 65/35 — the copy carries the section, the artwork is the accent. */
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  margin-top: clamp(44px, 5.5vw, 86px);
  background: var(--vxn-cream);
}

.vxn-careers__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(40px, 5vw, 88px) clamp(20px, 4.5vw, 96px);
}

.vxn-careers__title {
  margin: 0 0 20px;
  max-width: 16ch;
  color: var(--vxn-ink) !important;
  font-weight: 400 !important;
  font-size: clamp(30px, 3.1vw, 48px) !important;
  line-height: 1.12 !important;
}

.vxn-careers__lede {
  margin: 0 0 30px;
  max-width: 100%;
  color: var(--vxn-text);
  font-size: 15px;
  line-height: 1.68;
}

.vxn-careers__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  justify-content: end;
}



/* ROUNDED ON THE LEFT ONLY, by request. The panel runs off the right edge of
   the viewport, so a radius on that side would round a corner nobody can see
   while leaving a 1px sliver of cream down the outside. Left corners rounded,
   right corners square: the band reads as a plate sliding in from off-screen.

   `overflow: hidden` is what clips the texture and the framed photo to it. */
.vxn-careers__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 34vw, 470px);
  overflow: hidden;
  border-radius: clamp(18px, 2vw, 32px) 0 0 clamp(18px, 2vw, 32px);
}

.vxn-careers__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* The framed photograph sitting over the texture. Square corners — at this size
   a radius reads as a rounding error rather than a decision. Wider share of the
   column than before, because the column itself is now 35%. */
.vxn-careers__inset {
  position: relative;
  width: min(80%, 360px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto !important;
  border: 10px solid #FFFFFF;
  /* !important: the kit sheet rounds every image to 8px via `.elementor-kit-5
     img`, which outranks a single class. */
  border-radius: 0 !important;
  box-shadow: 0 24px 54px rgba(8, 25, 48, .32);
}

/* --------------------------------------------------------------------------
   The bands — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* The mosaic keeps its responsive rules with the rest of section 7. */
  .vxn-impact__card,
  .vxn-spotlight__inner,
  .vxn-careers {
    grid-template-columns: minmax(0, 1fr);
  }

  .vxn-impact__side {
    align-items: flex-start;
  }

  /* One column, so the fade would run across the copy rather than away from
     it — take it back to a flat wash. */
  .vxn-impact__texture {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: .34;
  }

  .vxn-spotlight__copy .vxn-band__pill {
    margin-top: 0;
  }

  .vxn-spotlight__lede {
    margin-bottom: 26px;
  }

  /* SQUARE ONCE IT STACKS. The left-only radius is a two-column device: it
     works because the plate runs off the right edge of the viewport and the
     rounded side is the only one the reader can see. Stacked, the plate spans
     the full width and bleeds off BOTH edges, so one rounded side and one
     square side reads as a bug rather than as a decision. */
  .vxn-careers__media {
    min-height: clamp(280px, 56vw, 380px);
    border-radius: 0;
  }
}

@media (max-width: 767px) {

  .vxn-impact__card {
    padding: 26px 22px 30px;
    border-radius: 18px;
  }

  /* Two full-width pills would read as a stack of buttons; keep them inline
     and let them shrink a little at the sides. The height and the type stay
     the one CTA's. */
  .vxn-band__pill {
    padding: 0 22px;
  }

  .vxn-careers__inset {
    width: min(74%, 300px);
    border-width: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .vxn-band__pill,
  .vxn-band__pill i {
    transition: none !important;
  }
}

/* ==========================================================================
   9-12. UAE home page — services override, insights, closing bands, footer

     9.  .vxn-klay--six    the UAE services band, without the x and the numbers
     10. .vxn-insights-round  rounded post thumbnails, this page only
     11. .vxn-ready       "Ready when you are"
     12. .vxn-sub         the newsletter card
     13. .vxn-foot        the UAE home footer

   Every rule here is reached only from /en-ae/: .vxn-klay--six, .vxn-foot and
   the rest are classes no other template carries, so the India home and the
   interior pages are untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9. .vxn-klay--six — the UAE services band

   Same layout as the shared band; the difference is that this edition drops the
   index number and the x motif (both gone from the markup) and treats the
   collapsed panels as frosted glass rather than as a flat dark wash.

   The photograph now runs at nearly full strength and a blurred, translucent
   sheet sits over it — so the picture is still legible as a picture, which the
   old .30-opacity-over-navy treatment had killed. The labels keep the accent
   colours the shared band gives them; the frost is what makes them readable.
   -------------------------------------------------------------------------- */
.vxn-klay--six {
  /* Near-neutral, not navy: the panels read as glass over a photograph rather
     than as a blue filter. A trace of the brand blue is kept so the band still
     belongs to the page. */
  background: linear-gradient(115deg, #0D1622 0%, #080D15 100%);
}

/* Close to full strength — the glass above does the work. */
.vxn-klay--six .vxn-klay__panel:not(.is-active) .vxn-klay__bg img {
  opacity: .92;
  filter: grayscale(.22) brightness(.9) saturate(.95);
}

/* The glass.

   The tint is a neutral charcoal rather than the saturated navy it was, which
   is what takes the blue cast off the photographs. It is weighted hard to the
   foot and light at the head: the top of a closed panel sits at .24, where the
   picture reads clearly, and only the band the label crosses is dense.

   That density is not a style choice. With the chips gone the accents sit
   directly on the sheet, and #FF3B9A is the binding case — its relative
   luminance is .267, so it needs the backdrop under .021 to clear 4.5:1.
   Against the actual mortgages photograph that resolves to ~.80 through the
   label's span, which is what the first three stops hold. */
.vxn-klay--six .vxn-klay__panel:not(.is-active)::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(7px) saturate(105%);
  backdrop-filter: blur(7px) saturate(105%);
  background: linear-gradient(to top,
      rgba(16, 20, 28, .88) 0%,
      rgba(16, 20, 28, .84) 20%,
      rgba(17, 22, 31, .78) 40%,
      rgba(18, 24, 34, .45) 62%,
      rgba(20, 27, 38, .24) 100%);
  border-left: 1px solid rgba(255, 255, 255, .10);
  pointer-events: none;
  transition: backdrop-filter .6s cubic-bezier(.4, 0, .2, 1);
}

/* Without backdrop-filter the sheet is a flat film over a sharp photograph, so
   the head of the panel is brought up to carry the label on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vxn-klay--six .vxn-klay__panel:not(.is-active)::after {
    background: linear-gradient(to top,
        rgba(16, 20, 28, .92) 0%,
        rgba(16, 20, 28, .89) 20%,
        rgba(17, 22, 31, .84) 40%,
        rgba(18, 24, 34, .62) 62%,
        rgba(20, 27, 38, .48) 100%);
  }
}

/* Hovering a closed panel clears the frost, which is what tells you it is a
   live target. The tint is untouched — thinning that would take the pink under
   the threshold, and a hover state is still text someone has to read. */
.vxn-klay--six .vxn-klay__panel:not(.is-active):hover::after {
  -webkit-backdrop-filter: blur(3px) saturate(110%);
  backdrop-filter: blur(3px) saturate(110%);
}

/* THE OPEN PANEL GETS A SCRIM TOO. The base band fades one out to nothing by
   72% across, which is enough over a mid-toned photograph and not enough over
   the accounting shot — a bright window fills its right half, and the heading,
   the paragraph and the "Learn more" link all sit on it.

   Two layers: the base ramp, deepened and carried further across, plus a flat
   wash over the whole panel. The flat one does what the ramp cannot — it is
   the top-right corner that fails, and a left-to-right gradient has already
   given up by the time it reaches there. */
.vxn-klay--six .vxn-klay__panel.is-active .vxn-klay__bg::after {
  background:
    linear-gradient(90deg,
        rgba(9, 18, 30, .74) 0%,
        rgba(9, 18, 30, .50) 38%,
        rgba(9, 18, 30, .22) 70%,
        rgba(9, 18, 30, .12) 100%),
    linear-gradient(0deg, rgba(9, 18, 30, .22), rgba(9, 18, 30, .22));
}

/* Text only — no chip. The accent colours are exactly what the brand sheet
   sets; all this adds is a shadow to hold the letterforms' edges against the
   photograph, and the z-index that keeps the label out of the sheet's backdrop
   (::after is the panel's last child, so without it the label would be painted
   over and blurred along with the picture). */
.vxn-klay--six .vxn-klay__panel .vxn-klay__label {
  z-index: 2;
  text-shadow: 0 1px 14px rgba(6, 10, 18, .85), 0 0 4px rgba(6, 10, 18, .6);
}

/* --------------------------------------------------------------------------
   10. .vxn-insights-round — the post thumbnails in the insights carousel
   -------------------------------------------------------------------------- */
.vxn-insights-round .elementor-widget-theme-post-featured-image img,
.vxn-insights-round .elementor-widget-image img {
  border-radius: 16px !important;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   11. .vxn-ready — "Ready when you are"

   Redesigned from scratch on client request: the statement and its lede
   across the top, then the three ways to start as the rows of one white card.
   UaeReadyBand.tsx has the drawing, and the reason for rows rather than cards.

   THE BAND IS STILL. The last one drifted — two blurred blooms and six blurred
   ribbons on 30-46s loops, the only continuous motion on the page. The motion
   here is the reader's: a row fills when it is pointed at, and the rows rise
   into the card once, as the band scrolls in.

   ONE HOME. The base rule used to sit in valunxt-brand.css, after an unrelated
   mega-panel rule, while every other rule for the band lived here. It is here
   now, and gone from there.

   SPECIFICITY. Everything below is written as `.vxn-ready .vxn-ready__x`, at
   (0,2,0). The UAE type sheet sizes every h2 through `body.vxn-uae-type h2` at
   (0,1,2) with `!important`, and the kit colours every link at (0,1,1). One
   class loses to both — which is why the old title asked for 38px and rendered
   at 42 — and two clear them.
   -------------------------------------------------------------------------- */
.vxn-ready {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The same vertical figure the page's rhythm block gives this band in
     section 15, which is the one that applies on /en-ae/. */
  padding: clamp(64px, 6.6vw, 104px) clamp(16px, 4vw, 48px) !important;
  /* A cool paper tone, not white: the insights carousel above is on white and
     the band would otherwise run straight on from it. The glow in the top right
     corner is the only ornament, and it does not move. */
  background:
    radial-gradient(52% 88% at 100% 0%, rgba(0, 83, 183, .085) 0%, rgba(0, 83, 183, 0) 72%),
    #F3F6FB;
}

.vxn-ready .vxn-ready__inner {
  max-width: 1520px;
  margin: 0 auto;
}

/* ---- The head ------------------------------------------------------------- */

/* Bottom-aligned, so the lede's last line sits on the title's baseline row and
   the two read as one line of the page rather than as two blocks. */
.vxn-ready .vxn-ready__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(20px, 5vw, 88px);
  margin-bottom: clamp(30px, 3.4vw, 50px);
}

.vxn-ready .vxn-ready__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 1.4vw, 20px);
  color: var(--vxn-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.vxn-ready .vxn-ready__eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* Sized past the type sheet's h2 on purpose — this is the page's closing
   statement, not a section head. Family and weight are left to that sheet. */
.vxn-ready .vxn-ready__title {
  margin: 0;
  color: var(--vxn-ink) !important;
  font-size: clamp(32px, 3.7vw, 54px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.012em;
}

/* An <i>, not a <span> or an <em>. The UAE face sheet sets the family on every
   span and every em with `!important` and leaves <i> alone so icon fonts keep
   their glyphs — which makes <i> the one inline element guaranteed to inherit
   whatever face the heading has. The market runs one family now, so a span
   would happen to match; the <i> stays because it does not depend on that.

   display:block puts the clause on its own line at every width, rather than
   wherever the first clause happens to break. */
.vxn-ready .vxn-ready__accent {
  display: block;
  font-style: normal;
  color: var(--vxn-blue);
}

/* text-wrap: pretty keeps a single word off the last line — at 38ch the lede
   otherwise ended on "call." alone, under a two-line title it is set against. */
.vxn-ready .vxn-ready__lede {
  justify-self: end;
  max-width: 38ch;
  margin: 0;
  color: var(--vxn-text);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---- The card ------------------------------------------------------------- */

.vxn-ready .vxn-ready__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid rgba(11, 44, 86, .08);
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow:
    0 1px 2px rgba(11, 44, 86, .04),
    0 28px 60px -30px rgba(11, 44, 86, .22);
}

.vxn-ready .vxn-ready__item {
  margin: 0;
}

/* Each row is the whole of its link, and holds two faces of itself — see THE
   FILL below. */
.vxn-ready .vxn-ready__route {
  --vxn-ready-pad: clamp(20px, 2.8vw, 40px);
  position: relative;
  isolation: isolate;
  display: block;
  color: var(--vxn-ink) !important;
  text-decoration: none !important;
  transition: opacity .35s var(--vxn-ease);
}

/* Four tracks — glyph, name, note, end cap — so the notes start on one
   vertical line down the card whatever the names measure. Both faces take this
   rule, which is what lays the white copy exactly over the ink one. */
.vxn-ready .vxn-ready__face {
  display: grid;
  grid-template-columns: 52px minmax(0, .9fr) minmax(0, 1.1fr) 48px;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  padding: 26px var(--vxn-ready-pad);
}

/* ---- THE FILL -------------------------------------------------------------
   The second face: the same row in white on the brand ramp, laid over the
   first and uncovered by a clip that sweeps left to right.

   IT REPLACED A COLOUR FADE, for a measured reason. The first build wiped a
   plain fill in behind the row and faded the row's text to white at the same
   time. Those two cannot share a clock: the wipe's edge reaches each piece of
   text at a different moment, and the fade reaches all of it at once. Sampled
   frame by frame at 1402px, the note sat light on the still-white card for
   218ms of every hover and 50ms of every leave — it ends at 91% of the row,
   and an ease-out sweep spends most of its time on that last stretch.

   Uncovering a white copy under the fill's own edge makes them one event, so
   no text is ever white where the card is still white, in either direction or
   at any duration.

   A clip rather than a layer scaled up from zero width: the ramp is a 150deg
   gradient, and scaling it redraws the whole ramp inside the sliver. */
.vxn-ready .vxn-ready__face--fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .6s var(--vxn-ease);
  pointer-events: none;
}

/* The rule between rows, inset to the row padding so it reads as a rule in the
   card rather than as a seam across it. It clears on the row being pointed at
   and on the row under it, so a filled row never carries a line along its
   edge. */
.vxn-ready .vxn-ready__item + .vxn-ready__item .vxn-ready__route::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--vxn-ready-pad);
  left: var(--vxn-ready-pad);
  height: 1px;
  background: rgba(11, 44, 86, .1);
  transition: opacity .3s var(--vxn-ease);
}

.vxn-ready .vxn-ready__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 83, 183, .07);
  color: var(--vxn-blue);
}

.vxn-ready .vxn-ready__icon svg {
  display: block;
  width: 22px;
  height: 22px;
}

.vxn-ready .vxn-ready__name {
  color: var(--vxn-ink);
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
}

.vxn-ready .vxn-ready__note {
  color: var(--vxn-text);
  font-size: 15px;
  line-height: 1.55;
}

.vxn-ready .vxn-ready__go {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(11, 44, 86, .16);
  border-radius: 50%;
  color: var(--vxn-ink);
}

.vxn-ready .vxn-ready__go svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* The one solid control in the card, on the route the page is built toward. */
.vxn-ready .vxn-ready__route.is-lead .vxn-ready__go {
  border-color: var(--vxn-blue);
  background: var(--vxn-blue);
  color: #FFFFFF;
}

/* ---- The white face --------------------------------------------------------
   The cap rule is (0,4,0) and follows .is-lead, which is also (0,4,0), so the
   lead row's cap is white on the fill like the other two. */
.vxn-ready .vxn-ready__face--fill .vxn-ready__icon {
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
}

.vxn-ready .vxn-ready__face--fill .vxn-ready__name {
  color: #FFFFFF;
}

.vxn-ready .vxn-ready__face--fill .vxn-ready__note {
  color: rgba(255, 255, 255, .84);
}

.vxn-ready .vxn-ready__route .vxn-ready__face--fill .vxn-ready__go {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: var(--vxn-blue);
  transition: transform .45s var(--vxn-ease);
}

/* ---- Pointed at ------------------------------------------------------------
   Focus draws the same state, with a white ring inside the row — a blue one
   would vanish into the fill. Both clip endpoints are percentages, so the
   sweep interpolates as one length rather than as a calc() mix. */
.vxn-ready .vxn-ready__route:hover .vxn-ready__face--fill,
.vxn-ready .vxn-ready__route:focus-visible .vxn-ready__face--fill {
  clip-path: inset(0 0% 0 0);
}

/* The arrow turns to point along the row as the white face uncovers it. */
.vxn-ready .vxn-ready__route:hover .vxn-ready__face--fill .vxn-ready__go,
.vxn-ready .vxn-ready__route:focus-visible .vxn-ready__face--fill .vxn-ready__go {
  transform: rotate(45deg);
}

.vxn-ready .vxn-ready__route:hover::after,
.vxn-ready .vxn-ready__route:focus-visible::after,
.vxn-ready .vxn-ready__item:hover + .vxn-ready__item .vxn-ready__route::after,
.vxn-ready .vxn-ready__item:focus-within + .vxn-ready__item .vxn-ready__route::after {
  opacity: 0;
}

.vxn-ready .vxn-ready__route:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: -6px;
}

/* The rows not being pointed at step back. Pointer devices only: on touch a
   tap would leave the other two dimmed with nothing to lift them again. */
@media (hover: hover) {
  .vxn-ready .vxn-ready__list:hover .vxn-ready__route:not(:hover) {
    opacity: .55;
  }
}

/* The rows rise into the card as the band scrolls in. The card is overflow:
   hidden, so they come up from inside it rather than sliding over the page.
   Guarded: where `animation-timeline` is unsupported they are simply in place,
   because nothing outside this block sets their opacity. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .vxn-ready .vxn-ready__item {
      animation: vxn-ready-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}

@keyframes vxn-ready-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Narrower ---------------------------------------------------------------
   Below 1025 the note moves under the name — a third track would leave it a
   few words wide — and the glyph and the cap span both lines. */
@media (max-width: 1024px) {
  .vxn-ready .vxn-ready__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .vxn-ready .vxn-ready__lede {
    justify-self: start;
    max-width: 52ch;
  }

  /* On the faces, never on the route: padding on the <a> would move the ink
     face inside it while the white face, pinned to the route's edges, stayed
     put — and the two copies would no longer register. */
  .vxn-ready .vxn-ready__face {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    grid-template-areas:
      "icon name go"
      "icon note go";
    row-gap: 4px;
    column-gap: 18px;
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .vxn-ready .vxn-ready__icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
  }

  .vxn-ready .vxn-ready__name {
    grid-area: name;
    align-self: end;
  }

  .vxn-ready .vxn-ready__note {
    grid-area: note;
    align-self: start;
  }

  .vxn-ready .vxn-ready__go {
    grid-area: go;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 767px) {
  .vxn-ready .vxn-ready__list {
    border-radius: 18px;
  }

  /* The pad stays on the route: the faces inherit it, and so does the rule
     between rows. */
  .vxn-ready .vxn-ready__route {
    --vxn-ready-pad: 18px;
  }

  .vxn-ready .vxn-ready__face {
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    column-gap: 14px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .vxn-ready .vxn-ready__icon {
    width: 40px;
    height: 40px;
  }

  .vxn-ready .vxn-ready__icon svg {
    width: 19px;
    height: 19px;
  }

  .vxn-ready .vxn-ready__note {
    font-size: 14px;
  }

  .vxn-ready .vxn-ready__go {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vxn-ready .vxn-ready__route,
  .vxn-ready .vxn-ready__route::after,
  .vxn-ready .vxn-ready__face--fill,
  .vxn-ready .vxn-ready__route .vxn-ready__face--fill .vxn-ready__go {
    transition: none !important;
  }

  .vxn-ready .vxn-ready__route:hover .vxn-ready__face--fill .vxn-ready__go,
  .vxn-ready .vxn-ready__route:focus-visible .vxn-ready__face--fill .vxn-ready__go {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. .vxn-sub — the newsletter card
   -------------------------------------------------------------------------- */
/* Half brand gradient, half photograph, split down the middle, with a frosted
   bar overlapping the two near the bottom.

   THE HALVES MEET AT A HARD EDGE, on purpose. The bar is what crosses the join
   — it starts on the gradient and finishes over the photograph — and a blend
   between the two would leave it floating over mush instead of over a clean
   change of material.

   The dark colour stays as the ground under both halves: if the photograph is
   slow or missing, the section still reads as a deep navy field rather than as
   a hole in the page. */
.vxn-sub {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(360px, 33vw, 480px);
  background: #071E3C;
}

.vxn-sub__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The bottom padding is the bar's room, and it has to clear the bar's own
     height plus its inset — not just its inset. At 96px the four-line headline
     finished 14px above the bar, which read as a collision even though it was
     not one. */
  padding: clamp(34px, 4vw, 62px) clamp(24px, 4vw, 70px) clamp(118px, 11vw, 178px);
  background: linear-gradient(150deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%);
}

.vxn-sub__shot {
  position: relative;
  overflow: hidden;
}

/* Renamed from .vxn-sub__field once, because that name was also on the form's
   email field group and this rule was absolutely positioning the input to fill
   the card. The form has gone; the name is unambiguous. */
.vxn-sub__ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  object-position: center 30%;
}

.vxn-sub__eyebrow {
  display: block;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .82) !important;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.4;
}

.vxn-sub__head {
  margin: 0;
  max-width: 20ch;
  /* MARKED, and it is load-bearing. This is an h2, and the theme sets heading
     colour inside its own max-width media queries — so the headline was white
     on desktop and black under 1024px, which is where the section stacks and
     the type is largest. */
  color: #FFFFFF !important;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -.005em;
}

/* The bar. Frosted rather than solid, and denser at the left than the right:
   the copy sits on the left and needs the contrast, while the right end stays
   glassy enough to show the photograph moving under it. */
.vxn-sub__bar {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 4vw, 56px);
  right: clamp(16px, 4vw, 56px);
  bottom: clamp(18px, 2.4vw, 38px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(14px, 1.6vw, 24px) clamp(18px, 2.2vw, 38px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: linear-gradient(100deg,
      rgba(233, 238, 247, .95) 0%,
      rgba(233, 238, 247, .90) 46%,
      rgba(233, 238, 247, .66) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 18px 44px rgba(4, 16, 34, .28);
}

/* Where backdrop-filter is unavailable the bar would be a flat translucent film
   over a sharp photograph, so the fill goes solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vxn-sub__bar {
    background: #E9EEF7;
  }
}

.vxn-sub__copy {
  margin: 0;
  max-width: 34ch;
  color: var(--vxn-ink);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 500;
  line-height: 1.5;
}

/* The field and the line under it that reports what happened. The wrapper is
   what the bar lays out; the message sits below the well so appearing does not
   change the well's own size. */
.vxn-sub__formwrap {
  flex: none;
  width: min(440px, 100%);
}

/* The field. A white rounded well holding the input and the button, with the
   button inset a few pixels inside it rather than sitting beside it — one
   object on the bar instead of two. */
.vxn-sub__form {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(11, 45, 190, .14);
  box-shadow: 0 8px 22px rgba(4, 16, 34, .12);
  transition: border-color .25s var(--vxn-ease), box-shadow .25s var(--vxn-ease);
}

/* The focus ring belongs to the well, not to the bare input inside it: the
   input has no border of its own, so its own ring would draw inside the well
   and read as a second box. */
.vxn-sub__form:focus-within {
  border-color: rgba(11, 45, 190, .48);
  box-shadow: 0 8px 22px rgba(4, 16, 34, .12), 0 0 0 3px rgba(11, 45, 190, .16);
}

/* Present for screen readers and for the input's accessible name; the
   placeholder is not a label — it disappears on the first keystroke. */
.vxn-sub__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* MARKED, all of it, and for the same reason the headline above is: the theme
   styles bare input and button elements inside its own max-width media
   queries, at a specificity a single class cannot reach. Unmarked, this input
   picked up a border, a white fill, a 4px radius and 16px padding below 767px
   — a box drawn inside the box it is supposed to be part of — while looking
   correct on desktop. */
.vxn-sub__input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  padding: 11px 6px 11px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--vxn-ink) !important;
  font-family: inherit;
  font-size: 15px !important;
  line-height: 1.3;
}

.vxn-sub__input:focus {
  outline: none;
  border: 0 !important;
  box-shadow: none !important;
}

.vxn-sub__input::placeholder {
  color: #8A93A6;
  opacity: 1;
}

/* Inverted from the version that sat on blue glass: the well is white now, so a
   white pill would disappear into it. It is a submit button rather than a link,
   so it also has to shed the browser's own button styling. */
/* The one CTA (20260911): the gradient fill, the 14px/600 label and the 46px
   height (7px of well either side of a 32px chip). It keeps its chip and its
   26px label inset, because the pill is seated in the field's well and the
   chip is the arrow. */
.vxn-sub__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: var(--vxn-cta-h, 46px);
  padding: 7px 7px 7px 26px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-image: var(--vxn-cta-grad);
  background-color: var(--vxn-cta-ink, #0B2DBE);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none !important;
  --vxn-cta-sweep: var(--vxn-cta-sweep-dark, #08248F);
  transition: box-shadow .25s var(--vxn-ease), background-color .25s var(--vxn-ease);
}

/* NO LIFT ON HOVER. The pill sits inside the field's well now; raising it two
   pixels moved it out of a container it is supposed to be seated in. The
   site's wedge does the fill; this only adds the shadow. */
.vxn-sub__cta:hover,
.vxn-sub__cta:focus-visible {
  box-shadow: 0 10px 24px rgba(4, 16, 34, .28);
}

.vxn-sub__cta[disabled] {
  opacity: .72;
  cursor: default;
}

/* Empty until there is something to say, and it takes no room while empty:
   :empty rather than a hidden class, so the markup carries no state. */
.vxn-sub__msg {
  margin: 10px 2px 0;
  color: #14532D;
  font-size: 13px;
  line-height: 1.45;
}

.vxn-sub__msg:empty {
  display: none;
}

.vxn-sub__msg.is-error {
  color: #8A1C1C;
}

.vxn-sub__cta-label {
  color: #FFFFFF !important;
  font-size: var(--vxn-cta-fs, 14px);
  font-weight: var(--vxn-cta-fw, 400);
  letter-spacing: var(--vxn-cta-ls, .01em);
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}

.vxn-sub__cta-go {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0B2DBE;
  transition: background-color .25s var(--vxn-ease), transform .25s var(--vxn-ease);
}

.vxn-sub__cta-go svg {
  width: 17px;
  height: 17px;
  display: block;
}

.vxn-sub__cta:hover .vxn-sub__cta-go {
  background: #EAF0FF;
  transform: rotate(45deg);
}

/* ONE FACE ON BOTH HOME PAGES (20260915; Inter since 20260917, see
   valunxt-uae-face.css for the site-wide change). The band is back above the
   footer on /en-in/ as well as /en-ae/, in the same face on both, by
   instruction. The UAE pages declare the family in valunxt-uae-face.css,
   which India does not load, so the two cuts the band uses are declared here
   as well (the same files; a family declared twice with the same sources is
   one family). Three classes deep, !important: India's kit and the shared
   sections set their own faces on headings at up to (0,2,1) !important. The
   heading's size is pinned the same way, to the UAE type scale's h2 step, so
   the band draws one size in both markets. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.vxn-sub.vxn-sub.vxn-sub,
.vxn-sub.vxn-sub.vxn-sub :is(h2, p, span, label, input, button) {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important;
}

/* To the screenshot supplied with the request (1901 wide): the headline on
   a 62.5px line in five balanced lines ("Perspectives on / business,
   property, / markets and / the decisions / shaping the UAE."), which is
   about 49.6px type on the 1.26 line the base rule gives and a measure under
   a fifth of the sentence. */
.vxn-sub.vxn-sub.vxn-sub .vxn-sub__head {
  max-width: 100%;
  font-size: clamp(28px, 2.6vw, 50px) !important;
  font-weight: 400 !important;
  line-height: 1.26 !important;
  letter-spacing: -.008em;
  text-transform: none !important;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   13. .vxn-foot — the UAE home footer
   -------------------------------------------------------------------------- */
/* border-box stated outright: the theme leaves <footer> on content-box, so
   `width: 100%` plus the side padding put the blue panel 96px wider than its
   container. */
.vxn-foot {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: clamp(38px, 4.4vw, 72px) clamp(16px, 4vw, 48px) clamp(26px, 3vw, 44px);
  background: #0B2DBE;
  color: #FFFFFF;
}

.vxn-foot *,
.vxn-foot *::before,
.vxn-foot *::after {
  box-sizing: border-box;
}

.vxn-foot__inner {
  max-width: 1520px;
  margin: 0 auto;
}

.vxn-foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}

.vxn-foot__logo img {
  display: block;
  width: auto;
  height: 34px !important;
  border-radius: 0 !important;
}

.vxn-foot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
}

.vxn-foot__nav a {
  color: #FFFFFF !important;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none !important;
  transition: opacity .2s ease;
}

.vxn-foot__nav a:hover,
.vxn-foot__nav a:focus-visible {
  opacity: .72;
  text-decoration: underline !important;
}

.vxn-foot__rule {
  margin: clamp(20px, 2.4vw, 34px) 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .28);
}

/* Under the rule: the services block on the left and the social marks on
   the right (the positioning line that stood here went on 20260916). */
.vxn-foot__mid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 48px;
}

.vxn-foot__mid .vxn-foot__social {
  margin-left: auto;
}

/* The social widget's own stylesheet sizes and colours these; on this ground
   they need to be plain white marks with no chip behind them. */
.vxn-foot__social .elementor-social-icons-wrapper {
  display: flex;
  gap: 22px;
}

.vxn-foot__social .elementor-grid-item {
  display: block;
}

.vxn-foot__social .elementor-social-icon {
  display: grid !important;
  place-items: center;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  transition: opacity .2s ease;
}

.vxn-foot__social .elementor-social-icon svg {
  width: 22px;
  height: 22px;
  fill: #FFFFFF;
}

.vxn-foot__social .elementor-social-icon:hover {
  opacity: .72;
}

/* The six services (20260912), one row under the rule: a small uppercase
   label, then the names. Two classes on the list and the label, over the
   kit's list and span rules. */
.vxn-foot__services {
  margin: 0;
  min-width: 0;
}

.vxn-foot .vxn-foot__servicesTitle {
  display: block;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.vxn-foot .vxn-foot__servicesList {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, auto));
  justify-content: start;
  gap: 12px clamp(24px, 3.2vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vxn-foot .vxn-foot__servicesList li {
  margin: 0;
  padding: 0;
}

.vxn-foot__servicesList a {
  color: #FFFFFF !important;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.vxn-foot__servicesList a:hover,
.vxn-foot__servicesList a:focus-visible {
  opacity: .72;
  text-decoration: underline !important;
}

.vxn-foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(28px, 5vw, 88px);
  margin-top: clamp(22px, 2.6vw, 36px);
}

.vxn-foot__legal a {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none !important;
}

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

.vxn-foot__copy {
  margin: clamp(18px, 2vw, 26px) 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: 13.5px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   9-13 — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* One column: the gradient, then the photograph, then the bar in flow under
     both. The bar is drawn overlapping a vertical join, and there is no
     vertical join left to overlap. */
  .vxn-sub {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .vxn-sub__panel {
    padding: clamp(30px, 5vw, 48px) clamp(20px, 5vw, 44px);
  }

  .vxn-sub__shot {
    aspect-ratio: 16 / 7;
  }

  .vxn-sub__bar {
    position: static;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .vxn-sub__formwrap {
    width: min(420px, 100%);
  }

  .vxn-foot__mid {
    flex-direction: column;
  }

  .vxn-foot__mid .vxn-foot__social {
    margin-left: 0;
  }

  /* Three and three: six names on one row need about 1100px. */
  .vxn-foot .vxn-foot__servicesList {
    grid-template-columns: repeat(3, minmax(0, auto));
  }
}

@media (max-width: 767px) {

  /* The bar's two halves stop fitting on one line well before the copy runs
     out of room. */
  .vxn-sub__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .vxn-sub__formwrap {
    width: 100%;
  }

  .vxn-sub__cta {
    padding: 6px 6px 6px 18px !important;
    gap: 10px;
  }

  /* The label is the first thing to go when the well is 320px wide: the pill
     already says what the button does. */
  .vxn-sub__cta-label {
    display: none;
  }

  .vxn-sub__cta {
    padding: 6px !important;
  }

  .vxn-sub__cta-go {
    width: 36px;
    height: 36px;
  }

  .vxn-foot__nav {
    gap: 12px 22px;
  }

  .vxn-foot .vxn-foot__servicesList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
  }

  .vxn-foot__servicesList a {
    white-space: normal;
  }

  .vxn-foot__legal {
    gap: 12px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .vxn-sub__cta,
  .vxn-sub__cta-go {
    transition: none !important;
  }

  .vxn-sub__cta:hover,
  .vxn-sub__cta:hover .vxn-sub__cta-go {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   14. The "Who We Are" trio, UAE only

   .vxn-trio-solo is the wrapper the UAE home puts round WhoWeAreTrio; the India
   home renders the same component inside its own section and is unaffected. The
   brand card's shared fill runs blue -> violet -> magenta; this edition keeps it
   in the blues.
   -------------------------------------------------------------------------- */
.vxn-trio-solo .vxn-trio__card--brand {
  background: linear-gradient(150deg, #0E3FA8 0%, #1436D8 48%, #0B2DBE 100%);
}

.vxn-trio-solo .vxn-trio__card--brand:hover {
  background: linear-gradient(150deg, #1549BE 0%, #1B44E6 48%, #1237D6 100%);
  box-shadow: 0 20px 50px rgba(11, 45, 190, .34);
}

/* The corner arrow went violet on hover to pick up the magenta stop that is no
   longer there. */
.vxn-trio-solo .vxn-trio__card--brand:hover .vxn-trio__go {
  color: var(--vxn-blue);
}

/* ==========================================================================
   15. /en-ae/ — one section rhythm

   Every section on the page gets `padding: 40px 0`. The horizontal inset that
   used to live on the section moves onto its inner wrapper, so the shorthand is
   literally 40px 0 and the content still never touches the viewport edge —
   without that move, every band would run flush to the screen on a phone.

   The old rhythm was built from per-section clamps (38-70px) plus margins that
   stacked on top of them, so the gaps between sections ran anywhere from 38px
   to 152px. Those margins are zeroed here; the padding is now the only thing
   setting the spacing.

   Scoped to .vxn-ae-home because .vxn-home-svc-section, the two insights
   containers and .elementor-17 are all shared with the India home.
   ========================================================================== */
.vxn-ae-home {
  /* One inset for the whole page, so every band lines up down the left edge. */
  --vxn-gutter: clamp(16px, 4vw, 48px);
}

.vxn-ae-home .vxn-trio-solo,
.vxn-ae-home .vxn-home-svc-section,
.vxn-ae-home .vxn-figs,
.vxn-ae-home .vxn-impact,
.vxn-ae-home .vxn-spotlight,
.vxn-ae-home .vxn-mosaic,
.vxn-ae-home .vxn-careers,
.vxn-ae-home .vxn-post,
.vxn-ae-home .vxn-ready,
.vxn-ae-home .elementor-element-c50d7c9,
.vxn-ae-home .elementor-element-413d07d {
  padding: 40px 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The insights heading and its carousel are two containers making one section,
   so they share a single 40px band rather than stacking two — but not with
   nothing between them. At 0 the first row of thumbnails began on the exact
   pixel the heading block ended, and the two read as one object: the heading's
   descenders sat on the images. */
.vxn-ae-home .elementor-element-c50d7c9 {
  padding-bottom: clamp(24px, 2.6vw, 44px) !important;
}

.vxn-ae-home .elementor-element-413d07d {
  padding-top: 0 !important;
}

/* ---- The inset, moved inward ----------------------------------------------
   max-width stays 1520px and the gutter is taken out of the available width, so
   the content column is exactly what it was before — the padding simply lives
   on a different box. */
.vxn-ae-home .vxn-figs__card,
.vxn-ae-home .vxn-impact__card,
.vxn-ae-home .vxn-spotlight__inner,
.vxn-ae-home .vxn-mosaic__grid,
.vxn-ae-home .vxn-post__grid,
.vxn-ae-home .vxn-ready__inner,
.vxn-ae-home .vxn-trio-solo .vxn-trio {
  max-width: min(1520px, calc(100% - var(--vxn-gutter) * 2));
  margin-left: auto;
  margin-right: auto;
}

/* The collapsed service names on the accordion, larger on client feedback.
   Those labels are the only wayfinding a closed panel has, and at
   clamp(19px, 1.6vw, 27px) — 23px at 1440 — they were losing to the artwork
   behind them.

   Scoped to .vxn-ae-home rather than changed at source: `.vxn-klay__label` in
   valunxt-brand.css is shared with the India home, which was not part of this
   request. */
.vxn-ae-home .vxn-klay__label {
  font-size: clamp(24px, 2.1vw, 34px);
}

/* .vxn-sub runs edge to edge and is inset by nothing: it is two full-bleed
   halves with a bar floating on them, so the band padding and the max-width
   inset the other sections take would both fight it. */
.vxn-ae-home .vxn-sub {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---- Client feedback: three bands come off the 40px rhythm ----------------
   The block above sets one 40px band for the whole page, which is what keeps
   the sections evenly spaced. These three are deliberate exceptions, and they
   are here rather than on the rules themselves because that block declares
   `padding … !important` and would otherwise win.

   CAREERS goes to 0. Its right-hand column is a full-height plate that runs off
   the edge of the viewport; the 40px left a strip of cream above and below it,
   so the plate read as a card sitting in the band rather than as the band's own
   right half. With 0 it meets the section's top and bottom, and the radius on
   .vxn-careers__media is what keeps the left corners from being a hard join.

   IMPACT, SPOTLIGHT and READY gain height instead. READY kept its figure
   through the band's redesign; section 11 declares the same one on the band
   itself, and the two should move together. */
.vxn-ae-home .vxn-careers {
  padding: 0 !important;
}

.vxn-ae-home .vxn-impact,
.vxn-ae-home .vxn-spotlight {
  padding: clamp(48px, 5vw, 76px) 0 !important;
}

.vxn-ae-home .vxn-ready {
  padding: clamp(64px, 6.6vw, 104px) 0 !important;
}

/* The insights containers keep their own Elementor inner, which already
   centres; it takes the page's width rule here in place of the kit's
   1280px --content-width. It used to keep the kit's cap and carry the gutter
   as padding inside it, which made this the one band on the page that did
   not line up: at 1920 the heading and the carousel ran 368 → 1552 while the
   trio, the impact card, the mosaic and the ready band all ran 200 → 1720,
   and at 1536 they started 176px in against everyone else's 48. Same
   formula as the block above, so the edges now sit on the same lines. Below
   1280px plus two gutters — every tablet and phone — the two formulas give
   the same width, so nothing moves there. */
.vxn-ae-home .elementor-element-c50d7c9 > .e-con-inner,
.vxn-ae-home .elementor-element-413d07d > .e-con-inner {
  max-width: min(1520px, calc(100% - var(--vxn-gutter) * 2));
  padding-left: 0;
  padding-right: 0;
}

/* The trio carried its spacing as a bottom padding on the section. */
.vxn-ae-home .vxn-trio-solo .vxn-trio {
  margin-top: 0;
}

/* .vxn-careers is a two-column split whose right half is artwork. With the
   section padded, that artwork is inset from the band's top and bottom edges
   rather than bleeding to them — the panel now sits in the cream rather than
   filling it. */
.vxn-ae-home .vxn-careers__copy {
  padding-top: 0;
  padding-bottom: 0;
}

/* The services band is full-bleed horizontally and sets its own height, so it
   takes the vertical rhythm from its wrapper and nothing else. */
.vxn-ae-home .vxn-home-svc-section .vxn-klay {
  margin-top: 40px;
}

/* TALLER on client feedback (20260915). The shared rule in valunxt-brand.css
   gives clamp(640px, 84vh, 840px), which was 728px on a 1901 x 867 window.
   The strip now takes the India home's desktop height, the full window
   between 760 and 1040px: 867 on that window, 1040 on a 1080 screen. Below
   1025px the panels stack to their own height, as before. Switch back: delete
   this block. */
@media (min-width: 1025px) {
  .vxn-ae-home .vxn-home-svc-section .vxn-klay {
    height: clamp(760px, 100vh, 1040px);
  }
}

/* The brand sheet caps .vxn-trio-solo at 1200px and centres it, which stacked
   a 32px auto-margin under this page's gutter and left the trio's cards 81px
   in while every other band starts at 48px. The cap is released here so the
   trio takes the same width rule as the rest of the page and the left edges
   line up. */
.vxn-ae-home .vxn-trio-solo {
  max-width: none;
}

/* --------------------------------------------------------------------------
   16. /en-ae/ — no purple in the services labels

   The shared band gives panels 1 and 3 a violet (#A97BFF) and a magenta
   (#FF3B9A). Neither belongs on this page.

   They are NOT replaced with #0B2DBE. That colour's relative luminance is
   .058, which means it cannot reach 4.5:1 against ANY backdrop darker than
   itself — on the glass here it measures 1.57:1, i.e. invisible. #0B2DBE works
   on this page as a fill with white on it, which is where it is used (the
   subscribe CTA, the mosaic card, the newsletter gradient); as type on a dark
   panel it needs a tint. These are two blues from the same family, at 6.9:1
   and 5.7:1 on the lightest backdrop the photographs produce.

   Panels 5 and 6 are already scoped this way in the brand sheet; matching that
   specificity plus a class is what wins here.
   -------------------------------------------------------------------------- */
.vxn-klay--six .vxn-klay__panel:nth-child(1) .vxn-klay__label {
  color: #8FB7FF;
}

.vxn-klay--six .vxn-klay__panel:nth-child(3) .vxn-klay__label {
  color: #5AA9FF;
}

/* --------------------------------------------------------------------------
   17. .vxn-answer — "Your Questions, Answered", the question band
   components/sections/UaeAnswerBand.tsx, UaeAnswerStage.tsx

   REBUILT 20260916 to the supplied recording (vxn-answer-section.mp4, a
   736 x 414 reel): a column of labels on the left, the lit one dark and the
   rest pale, a coloured dot beside the lit label that drops to the next as
   the reel turns, and on the right a rounded panel (340 x 378 of the 736
   frame, radius 22) whose photograph changes with the label and carries two
   glass cards, the first offset right (its left edge 15% in, its right 13%)
   and the second offset left (8% and 9%) and overlapping the first's foot,
   the first typed out and the second sliding up. Measured off the frame:
   the labels 40px on a 62px pitch (1.5), the dot 8px, the cards white at
   about 80% over a blur with a 14px radius and 9px type; all of it scaled
   to the container here through cqw.

   THE HEAD ROW above the reel (eyebrow and title left, sentence and pill
   right) is the band's own, kept from the earlier editions so no copy went.
   Its columns are the reel's, so the sentence and pill stand over the
   panel's left edge and the title over the labels.

   TIGHTENED 20260916 (client): the panel is no taller than the six labels
   need, so no white band opens above or below the list; the two cards
   stack with one gap and one inset instead of stepping and overlapping;
   the "Auto play" switch is not rendered (the reel still plays itself).

   WHERE IT DEPARTS FROM THE RECORDING, on purpose:
   - Six labels, not four, and they are the practices; the cards carry a
     question and the practice's own sentence, not a mail thread.
   - The recording's opening toggle ("Auto Pilot") is not shown; the reel
     plays itself, and a pointer on the panel or a press on a label holds it.
   - The ground is the page's white, not the recording's grey wash, so the
     band sits with its neighbours; the lit label takes the site's ink.
   - The call is the site's one pill, per the one-CTA rule.

   SPECIFICITY. The market scale sizes h2 at (0,1,2) with !important, so the
   title is sized through two classes; `.elementor-kit-5 a` paints links
   white and is asserted over the same way; the theme paints a focused
   <button> navy and is asserted over on the labels and the switch;
   `.elementor-kit-5 img` rounds every image, `.elementor img` sets height
   auto and the reset caps width at 100%: the photographs clear all three.
   -------------------------------------------------------------------------- */
.vxn-answer {
  padding: clamp(48px, 5vw, 84px) 0;
  background: #FFFFFF;
}

/* The page's inset (section 15), and the container the reel's cqw read. */
.vxn-answer__inner {
  max-width: min(1520px, calc(100% - var(--vxn-gutter, clamp(16px, 4vw, 48px)) * 2));
  margin: 0 auto;
  container-type: inline-size;
}

/* ---- The head row ------------------------------------------------------------ */
.vxn-answer__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: 24px clamp(32px, 4cqw, 72px);
  align-items: end;
}

.vxn-answer__eyebrow {
  display: block;
  margin: 0 0 14px;
  color: #0B2DBE;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
}

.vxn-answer .vxn-answer__title {
  margin: 0;
  color: #0B1633 !important;
  font-size: clamp(30px, 3cqw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -.012em;
  max-width: 18ch;
}

.vxn-answer__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vxn-answer .vxn-answer__lede {
  margin: 0 0 20px;
  max-width: 46ch;
  color: #4B5567;
  font-size: clamp(15px, 1.1cqw, 17px);
  line-height: 1.55 !important;
}

/* ---- The reel ---------------------------------------------------------------- */
.vxn-answer__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: clamp(32px, 4cqw, 72px);
  align-items: center;
  margin-top: clamp(28px, 2.6cqw, 44px);
}

.vxn-answer__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* The list: no marker, no theme reset, room on the left for nothing (the
   dot sits in the lit label's own indent, as in the recording). */
.vxn-answer .vxn-answer__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vxn-answer .vxn-answer__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each label is a button: the theme's button skin is cleared and the
   focused-button navy is asserted over. The lit one takes the ink and an
   indent the dot sits in. */
.vxn-answer .vxn-answer__label {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #B8BEC9 !important;
  font-family: inherit;
  font-size: clamp(26px, 2.75cqw, 42px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-align: left;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  transition: color .45s var(--vxn-ease), padding .55s var(--vxn-ease);
}

.vxn-answer .vxn-answer__label:hover {
  color: #6B7382 !important;
}

.vxn-answer .vxn-answer__label.is-on {
  color: #0B1633 !important;
  padding-left: 1.15em;
}

.vxn-answer .vxn-answer__label:focus-visible {
  outline: 2px solid #0B2DBE;
  outline-offset: 4px;
}

/* The dot: lands on the lit label's middle, and the curve overshoots so it
   bounces as the recording's does; recoloured as it goes. */
.vxn-answer__dot {
  position: absolute;
  left: .12em;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1D5CFF;
  transform: translateY(-50%);
  transition: top .6s cubic-bezier(.34, 1.56, .64, 1), background-color .4s ease, box-shadow .4s ease;
  pointer-events: none;
  font-size: clamp(26px, 2.75cqw, 42px);
}

/* ---- The panel -------------------------------------------------------------- */
/* The panel is as tall as the six labels (6 x 1.5 x the label size), no
   more: the reel's two rows sit level. */
.vxn-answer__panel {
  position: relative;
  isolation: isolate;
  min-height: clamp(380px, 25cqw, 400px);
  border-radius: 28px;
  overflow: hidden;
  background: #0B1633;
}

.vxn-answer__photos {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Each photograph fills the panel and clears the theme's image rules; the
   lit one is shown and drifts a little larger over its scene. */
.vxn-answer .vxn-answer__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0 !important;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .8s ease, transform .8s ease;
}

.vxn-answer .vxn-answer__photo[data-on] {
  opacity: 1;
  transform: scale(1.08);
  transition: opacity .8s ease, transform 9s linear;
}

/* A faint wash so the glass cards read on a bright picture. */
.vxn-answer__photos::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 22, 51, .04) 0%, rgba(11, 22, 51, .18) 100%);
  pointer-events: none;
}

/* The two cards: a column centred in the panel on one inset, one gap
   between them (the recording's step and overlap went on 20260916, on
   client instruction). Each rises when its turn comes. */
.vxn-answer__cards {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(20px, 3cqw, 40px) clamp(20px, 2.6cqw, 36px);
}

.vxn-answer__card {
  border-radius: 18px;
  padding: clamp(16px, 1.6cqw, 24px) clamp(18px, 1.8cqw, 26px);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 40px -18px rgba(4, 18, 72, .45);
  color: #0B1633;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s var(--vxn-ease), transform .6s var(--vxn-ease);
}

.vxn-answer__card[data-on] {
  opacity: 1;
  transform: none;
}

.vxn-answer__card--q,
.vxn-answer__card--a {
  margin: 0;
  position: relative;
}

.vxn-answer__from {
  display: block;
  margin: 0 0 8px;
  color: #5B6478;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.vxn-answer .vxn-answer__q {
  margin: 0;
  min-height: 1.5em;
  font-size: clamp(15px, 1.15cqw, 18px);
  line-height: 1.5 !important;
  color: #0B1633;
}

.vxn-answer__caret {
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-left: 2px;
  vertical-align: -.12em;
  background: #1D5CFF;
  animation: vxn-answer-blink 1s steps(2, start) infinite;
}

.vxn-answer__stage:not([data-phase='typing']) .vxn-answer__caret {
  display: none;
}

@keyframes vxn-answer-blink {
  to { opacity: 0; }
}

.vxn-answer .vxn-answer__a {
  margin: 0;
  font-size: clamp(14px, 1.05cqw, 16px);
  line-height: 1.55 !important;
  color: #2B3446;
}

.vxn-answer .vxn-answer__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: #0B2DBE !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.vxn-answer .vxn-answer__more:hover,
.vxn-answer .vxn-answer__more:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Tablets: the reel stacks, panel under the list --------------------------- */
@media (max-width: 1100px) {
  .vxn-answer__stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .vxn-answer__panel {
    min-height: clamp(400px, 52cqw, 480px);
  }

  .vxn-answer .vxn-answer__label {
    font-size: clamp(24px, 3.4cqw, 34px);
  }

  .vxn-answer__dot {
    font-size: clamp(24px, 3.4cqw, 34px);
  }
}

@media (max-width: 900px) {
  .vxn-answer__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .vxn-answer .vxn-answer__title {
    max-width: none;
  }
}

/* ---- Phones ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .vxn-answer {
    padding: 40px 0;
  }

  .vxn-answer .vxn-answer__label {
    font-size: 24px;
    line-height: 1.45;
  }

  .vxn-answer__dot {
    width: 10px;
    height: 10px;
    font-size: 24px;
  }

  .vxn-answer__panel {
    min-height: 0;
    border-radius: 22px;
  }

  /* The cards sit in the flow so the panel grows to whatever the answer
     needs; the photograph still fills behind them. */
  .vxn-answer__cards {
    position: relative;
    inset: auto;
    gap: 12px;
    padding: 24px 16px;
  }

  .vxn-answer__card {
    border-radius: 14px;
  }

  .vxn-answer .vxn-answer__q {
    min-height: 0;
  }
}

/* ---- Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .vxn-answer__dot,
  .vxn-answer .vxn-answer__label {
    transition: none;
  }

  .vxn-answer .vxn-answer__photo,
  .vxn-answer .vxn-answer__photo[data-on] {
    transform: none;
    transition: opacity .3s ease;
  }

  .vxn-answer__card {
    transform: none;
    transition: opacity .3s ease;
  }

  .vxn-answer__caret {
    animation: none;
  }
}


/* --------------------------------------------------------------------------
   19. .vxn-figs — the figures band (20260912)
   components/sections/UaeFigureBand.tsx

   Built to the reference supplied that day, measured off it: one rounded card
   at roughly 3.3:1, a lead panel inset about 3.5% from the left and taking
   just over a quarter of the card's width, and three figures filling the rest
   with a hairline between each. The reference's background is a set of broad
   blue ribbons, which is homepage/abstract-2.webp almost exactly, so that is
   the artwork here rather than anything new; the fill under it and the tint of
   the glass are the brand's.

   THE LEAD PANEL IS GLASS, as the reference's is, with the site's own recipe
   (see .vxn-whyus__panel, section 3) and the same opaque fallback where
   backdrop-filter is unavailable. It is the only panel on this page whose
   glass sits on a dark ground, so the tint is white rather than cream.

   NO FIGURES SINCE THE SAME DAY: the numbers went on client feedback and each
   cell is a short heading over one line, so the card is shallower than the
   reference's 3.3:1 and the type is a size down throughout. The arrival fade
   (UaeBandMotion.tsx) is kept; the count roll has nothing left to roll.
   -------------------------------------------------------------------------- */
.vxn-figs {
  background: #fff;
}

.vxn-figs__card {
  position: relative;
  /* Shallower than the reference's 3.3:1 now that the numbers are gone: three
     short headings do not need the height four figures did. About 4.4:1 from
     1280 to 1920. */
  min-height: clamp(240px, 21vw, 340px);
  padding: clamp(24px, 3vw, 44px);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  /* The band's own fill, deeper at the left so the glass panel has something
     to sit on and brighter where the ribbons run. */
  background: linear-gradient(112deg, #06184F 0%, #0B2DBE 52%, #1436D8 100%);
  display: grid;
  grid-template-columns: minmax(0, 28%) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 54px);
  align-items: stretch;
}

/* The ribbons. Full bleed, as in the reference: the panel is translucent and
   they run behind it. */
.vxn-figs__texture {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  /* !important: .elementor img { height: auto } is a class plus a type and
     outranks a single class of ours. */
  height: 100% !important;
  object-fit: cover;
  /* Subordinate, as in the reference: at .78 the brightest ribbon ran straight
     under the third caption and took it to about 2:1. */
  opacity: .56;
}

/* Three painted lights: the first darkens the ground under the glass panel so
   the type on it holds, the second is a veil across the figures for the same
   reason, and the third lifts the ribbons away from the fill at the top right,
   where nothing is set. */
.vxn-figs__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(124% 146% at 4% 50%, rgba(3, 12, 44, .76) 0%, rgba(3, 12, 44, .34) 42%, rgba(3, 12, 44, 0) 72%),
    linear-gradient(180deg, rgba(4, 16, 56, 0) 18%, rgba(4, 16, 56, .30) 52%, rgba(4, 16, 56, .12) 100%),
    radial-gradient(78% 116% at 88% 10%, rgba(126, 174, 255, .26) 0%, rgba(126, 174, 255, 0) 64%);
}

/* ---- The lead panel ---- */
.vxn-figs__lead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Top aligned, as the reference's panel is: its figure sits near the top and
     the clear space falls at the foot, about a third of the panel. Centred, the
     block floated and the panel read as a box with a caption in the middle. */
  justify-content: center;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 32px);
  border-radius: 20px;
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 18px 46px rgba(3, 12, 44, .34);
}

/* Without backdrop-filter the panel is a flat wash over the ribbons and the
   copy on it is unreadable, so it becomes opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  .vxn-figs__lead {
    background: rgba(8, 30, 94, .82);
  }
}

/* TWO CLASSES, NOT ONE. The market's type scale sets `body.vxn-uae-type h2` at
   (0,1,2) with !important, which beats a lone class however important it is, so
   this heading came out at the scale's 42px and broke the panel to three lines.
   (0,2,0) clears it; valunxt-uae-type.css names this as the way a band that
   sizes a heading on purpose is meant to opt out. Same below for the three
   points (h3) and the poster titles. */
.vxn-figs .vxn-figs__leadTitle {
  margin: 0;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: clamp(20px, 1.55vw, 26px) !important;
  line-height: 1.22 !important;
  letter-spacing: 0;
}

.vxn-figs__leadCopy {
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: 13.5px;
  line-height: 1.6;
}

/* A text link, not a pill: the band sits directly above the services section
   and a filled CTA here would compete with it. Text links are outside the one
   CTA system for that reason. */
.vxn-figs .vxn-figs__leadLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: #BFD6FF !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color .25s var(--vxn-ease);
}

.vxn-figs .vxn-figs__leadLink i {
  font-size: 12px;
  transition: transform .25s var(--vxn-ease);
}

.vxn-figs .vxn-figs__leadLink:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
  text-underline-offset: .22em;
}

.vxn-figs .vxn-figs__leadLink:hover i {
  transform: translateX(4px);
}

/* ---- The three points ---- */
/* TWO ROWS SHARED BY ALL THREE, not three independent stacks. The reference
   sets its headings on one line and its captions on another; with each cell
   laid out on its own, a heading that wrapped to two lines pushed its caption
   down and the rows stopped lining up. The cell is a grid item that takes the
   parent's two rows as its own (subgrid), so the headings share a baseline and
   the captions start on one whatever the heading wraps to, and the cell keeps
   the padding and the rule down its left edge. Where subgrid is unsupported
   the declaration is dropped and the cells fall back to stacking. (0,2,0) on
   the list, over the kit's list rules. */
.vxn-figs .vxn-figs__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-content: center;
  margin: 0;
  padding: clamp(4px, 1vw, 18px) 0;
  list-style: none;
}

.vxn-figs .vxn-figs__stat {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: clamp(8px, .9vw, 12px);
  align-content: end;
  margin: 0;
  padding: 0 clamp(16px, 2.4vw, 40px);
  /* Between the figures only, as in the reference: the first is separated from
     the lead panel by the grid gap instead. */
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.vxn-figs__stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.vxn-figs__stat:last-child {
  padding-right: 0;
}

/* (0,2,0) with !important, over the market scale's h3 step (27px). */
.vxn-figs .vxn-figs__num {
  margin: 0;
  align-self: end;
  color: #FFFFFF !important;
  font-size: clamp(18px, 1.4vw, 23px) !important;
  font-weight: 500 !important;
  line-height: 1.22 !important;
  letter-spacing: 0;
}

/* (0,2,0) over the scale sheet's paragraph rule and the brand sheet's phone
   `article p` line-height. */
.vxn-figs .vxn-figs__lbl {
  margin: 0;
  max-width: 28ch;
  color: rgba(255, 255, 255, .76);
  font-size: 13.5px;
  line-height: 1.55 !important;
}

/* ---- Arrival ----
   The stylesheet's default is visible. The hidden state exists only under
   [data-anim='pending'], which UaeBandMotion.tsx sets, so a blocked or broken
   bundle leaves the band on the page. */
.vxn-figs__lead[data-anim='pending'],
.vxn-figs__stat[data-anim='pending'] {
  opacity: 0;
  transform: translateY(18px);
}

.vxn-figs__lead[data-anim='in'],
.vxn-figs__stat[data-anim='in'] {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s var(--vxn-ease) var(--vxn-anim-d, 0ms),
    transform .7s var(--vxn-ease) var(--vxn-anim-d, 0ms);
}

@media (max-width: 1180px) {

  /* The panel goes above the figures rather than beside them: at a quarter of
     a 1100px card it was 260px wide and the headline broke to four lines. */
  .vxn-figs__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .vxn-figs .vxn-figs__stats {
    padding: 0;
  }
}

@media (max-width: 720px) {

  .vxn-figs .vxn-figs__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .vxn-figs .vxn-figs__stat {
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
  }

  .vxn-figs .vxn-figs__stat:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .vxn-figs .vxn-figs__lbl {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   20. .vxn-post — the bento
   components/sections/UaePosterTrio.tsx

   REBUILT 20260914 on client instruction: no dark cards, no scrims, no words
   over photographs. Four light cards on a twelve-column track: the story
   card (8 of 12) splits into a words column and a photograph column; the
   figure card (4) is the brand's pale tint with the figure in the brand
   blue; the About card (5) keeps its photograph as a strip along the foot,
   under the words; the services card (7) carries the house pills. The
   ground is a cool tint so the white cards read as cards.

   Headings are sized through two classes, (0,2,0) with !important, over the
   market scale's (0,1,2) — see section 17. The reveal (UaeBandMotion.tsx)
   is unchanged: a card is visible by default and hidden only while it is
   marked pending, so a blocked or broken script never leaves a blank band.
   -------------------------------------------------------------------------- */
.vxn-post {
  background: #F3F6FB;
}

.vxn-ae-home .vxn-post__grid,
.vxn-post__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(14px, 1.4vw, 22px);
  max-width: min(1520px, calc(100% - var(--vxn-gutter, clamp(16px, 4vw, 48px)) * 2));
  margin-left: auto;
  margin-right: auto;
}

.vxn-post .vxn-post__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: clamp(24px, 2.2vw, 36px);
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid rgba(14, 53, 95, .08);
  color: var(--vxn-ink) !important;
  text-decoration: none !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(6, 20, 54, .05);
  transition:
    transform .5s var(--vxn-ease),
    box-shadow .5s var(--vxn-ease),
    border-color .5s var(--vxn-ease);
}

.vxn-post a.vxn-post__card:hover,
.vxn-post a.vxn-post__card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(11, 45, 190, .25);
  box-shadow: 0 24px 48px rgba(6, 20, 54, .12);
  outline: none;
}

.vxn-post__eyebrow {
  display: block;
  color: var(--vxn-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
}

.vxn-post__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-width: 0;
}

.vxn-post__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- 1. The story: words | photograph -------------------------------------- */
.vxn-post .vxn-post__card--story {
  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: stretch;
}

.vxn-ae-home .vxn-post__quote {
  margin: 0;
  color: var(--vxn-ink) !important;
  font-weight: 400 !important;
  font-size: clamp(23px, 2vw, 31px) !important;
  line-height: 1.14 !important;
  letter-spacing: -.01em;
}

.vxn-post .vxn-post__by {
  display: block;
  color: var(--vxn-text);
  font-size: 14px;
  line-height: 1.5;
}

/* Texture, not a photograph (20260914): the brand blue abstract, cover
   fit, nothing over it. */
.vxn-post__figure {
  position: relative;
  display: block;
  min-height: 240px;
  border-radius: 18px;
  overflow: hidden;
  background: #1436D8;
}

.vxn-post__figure .vxn-post__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform .8s var(--vxn-ease);
}

.vxn-post .vxn-post__card--story:hover .vxn-post__figure .vxn-post__media {
  transform: scale(1.04);
}

/* ---- 2. The figure ----------------------------------------------------------- */
.vxn-post .vxn-post__card--fact {
  grid-column: 9 / span 4;
  justify-content: space-between;
  background: #EEF3FF;
  border-color: rgba(11, 45, 190, .12);
}

.vxn-post .vxn-post__big {
  display: block;
  color: var(--vxn-blue);
  font-weight: 300;
  font-size: clamp(56px, 5.6vw, 88px);
  line-height: .95;
  letter-spacing: -.02em;
}

.vxn-ae-home .vxn-post__fact {
  margin: 0;
  max-width: 24ch;
  color: var(--vxn-ink);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.4 !important;
}

/* ---- 3. About: words, then the texture strip ----------------------------------- */
.vxn-post .vxn-post__card--dark {
  grid-column: 1 / span 5;
  justify-content: space-between;
}

.vxn-ae-home .vxn-post__title {
  margin: 0;
  color: var(--vxn-ink) !important;
  font-weight: 400 !important;
  font-size: clamp(21px, 1.75vw, 28px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.01em;
}

.vxn-post__band {
  position: relative;
  display: block;
  margin-top: auto;
  aspect-ratio: 16 / 6;
  border-radius: 16px;
  overflow: hidden;
  background: #071B4F;
}

.vxn-post__band .vxn-post__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 60%;
  transition: transform .8s var(--vxn-ease);
}

.vxn-post .vxn-post__card--dark:hover .vxn-post__band .vxn-post__media {
  transform: scale(1.04);
}

/* ---- 4. The services card ------------------------------------------------------ */
.vxn-post .vxn-post__card--review {
  grid-column: 6 / span 7;
  justify-content: flex-start;
}

/* The line and the pills sit in the middle of what is left under the label,
   not pinned to the foot with the label alone at the top. */
.vxn-post .vxn-post__card--review .vxn-post__body {
  margin: auto 0;
}

.vxn-ae-home .vxn-post__say {
  margin: 0;
  max-width: 18ch;
  color: var(--vxn-ink) !important;
  font-weight: 400 !important;
  font-size: clamp(23px, 2vw, 31px) !important;
  line-height: 1.14 !important;
  letter-spacing: -.01em;
}

/* The description (20260914), between the line and the pills. (0,2,0) over
   the scale sheet's paragraph rule and the brand sheet's phone line-height. */
.vxn-ae-home .vxn-post__desc {
  margin: 0;
  max-width: 52ch;
  color: var(--vxn-text);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55 !important;
}

.vxn-post__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* ---- Arrival --------------------------------------------------------------- */
.vxn-post__card[data-anim='pending'] {
  opacity: 0;
  transform: translateY(16px);
}

.vxn-post__card[data-anim='in'] {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s var(--vxn-ease) var(--vxn-anim-d, 0ms),
    transform .8s var(--vxn-ease) var(--vxn-anim-d, 0ms),
    box-shadow .5s var(--vxn-ease),
    border-color .5s var(--vxn-ease);
}

/* ---- Widths ------------------------------------------------------------------ */
@media (max-width: 1100px) {

  .vxn-post .vxn-post__card--story {
    grid-column: 1 / -1;
  }

  .vxn-post .vxn-post__card--fact {
    grid-column: 1 / span 6;
  }

  .vxn-post .vxn-post__card--dark {
    grid-column: 7 / span 6;
  }

  .vxn-post .vxn-post__card--review {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {

  .vxn-post .vxn-post__card--story,
  .vxn-post .vxn-post__card--fact,
  .vxn-post .vxn-post__card--dark,
  .vxn-post .vxn-post__card--review {
    grid-column: 1 / -1;
  }

  .vxn-post .vxn-post__card--story {
    grid-template-columns: minmax(0, 1fr);
  }

  .vxn-post__figure {
    min-height: 0;
    aspect-ratio: 16 / 7;
  }

  .vxn-post__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .vxn-post__ctas .vxn-band__pill {
    justify-content: center;
  }
}

/* Nothing here is load bearing, so with motion reduced every card is simply
   where it lands: no stagger, no drift. The figures band's rules live here
   too because the two bands share one reveal. */
@media (prefers-reduced-motion: reduce) {

  .vxn-figs__lead[data-anim='pending'],
  .vxn-figs__stat[data-anim='pending'],
  .vxn-post__card[data-anim='pending'] {
    opacity: 1;
    transform: none;
  }

  .vxn-post a.vxn-post__card:hover,
  .vxn-post .vxn-post__card--story:hover .vxn-post__figure .vxn-post__media,
  .vxn-post .vxn-post__card--dark:hover .vxn-post__band .vxn-post__media {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   21. .vxn-xp — "Expertise Measured in Decades." (20260915)
   components/sections/UaeExpertiseBand.tsx

   Built to the client's reference (1717 x 916) and measured off it. Every
   length here is written in that image's pixels times --r, one reference
   pixel at this band's width (100cqw / 1717), which stops growing at 1920.
   At 1717 the band is the reference; at any other width it is the reference
   scaled, with floors under the type so nothing drops below a readable size
   (the band then grows taller, never tighter).

   MEASURED, in reference pixels, and where each rule below puts it:
     eyebrow   cap 11 (15.5px on Sanomat's .71 cap), cap top 138; a 45 x 2
               rule 19px after the text
     title     cap 59 (83px), baselines 252 and 338; last word #3AA6FF to
               #1C68FF
     bar       81 x 6 at 382, #2A98FF to #0D48F7
     sentence  20px on 31, digits from 431, three lines to 509
     figures   icons 46 x 40 at 569 (#2A93FF); numbers 27 tall (38.6px)
               from 638; labels cap 10 (14px) on 23 from 684; hairlines
               from 567 to 719, brightest 60% down, each 52 before its
               column's content; columns start 81, 295, 520
     link      cap 15 (21px) from 794; 2px underline at 822
     wedge     diagonal x = 1447 - 0.987y (44.6 degrees), foot
               y = 0.1666x + 559.3 (9.5 degrees), meeting at (769, 687),
               corner rounded; outline 2px, 38px outside the diagonal
     band      916 tall, background #022D9B to #012688
   The type sizes were set from Sanomat's measured cap height (.71em) and
   digit height (.70em) so the caps land on the reference's, and the widths
   come out within 2% of it ("Expertise Measured" 705px against 717). The
   weights were then matched by measuring the ink in each line against the
   reference's: the sentence is Light, the eyebrow, figures, labels and link
   Regular.

   DEPARTURES, all small: the fill is the brand's own ramp (#0B2DBE to
   #08248F) rather than the reference's slightly greyer blue; the title is
   Sanomat at 400, the market's heading weight, where the reference's face is
   heavier; the eyebrow reads "ABOUT Valunxt", since the name is never set in
   capitals; the link ends in the site's one arrow (13px, 10px after the
   label) where the reference draws a 22px arrow 40px along.
   -------------------------------------------------------------------------- */
.vxn-xp {
  --r: min(calc(100cqw / 1717), 1.1182px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  color: #FFFFFF;
  /* The brand ramp, weighted to its deep end: the reference's ground reads
     #022D9B to #012688, and a ramp that stayed near #0B2DBE measured a fifth
     brighter than it and thinned the type. */
  background: linear-gradient(120deg, #0B2DBE 0%, #0928A8 38%, #08248F 100%);
}

/* ---- The photograph and its line -------------------------------------------- */
.vxn-xp__art {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: calc(1037 * var(--r));
  height: calc(916 * var(--r));
  pointer-events: none;
}

.vxn-xp__art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vxn-xp__outline {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* ---- The copy ------------------------------------------------------------------
   134.35 above the eyebrow's line box puts its cap top on 138; 92 below the
   underline ends the band on 916. */
.vxn-xp__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: min(1520px, calc(100% - var(--vxn-gutter, clamp(16px, 4vw, 48px)) * 2));
  min-height: calc(916 * var(--r));
  margin: 0 auto;
  padding: calc(134.35 * var(--r)) 0 calc(92 * var(--r));
}

.vxn-xp__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vxn-xp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: max(12px, calc(19 * var(--r)));
  color: #FFFFFF;
  font-size: max(12px, calc(15.5 * var(--r)));
  font-weight: 400;
  letter-spacing: .15em;
  line-height: 1;
  text-transform: uppercase;
}

/* The short rule after the eyebrow, bright where it starts. */
.vxn-xp__eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: max(30px, calc(45 * var(--r)));
  height: 2px;
  background: linear-gradient(90deg, #1E86F8 0%, rgba(11, 69, 214, .55) 100%);
}

/* 23.15 after the eyebrow (its box ends at 149.85) opens an 86px line whose
   cap top falls on 194; the second line's baseline lands on 338.9. Two
   classes: the market scale sizes h2 at (0,1,2) with !important. */
.vxn-xp .vxn-xp__title {
  margin: max(16px, calc(23.15 * var(--r))) 0 0;
  color: #FFFFFF !important;
  font-size: max(38px, calc(83 * var(--r))) !important;
  font-weight: 400 !important;
  line-height: 1.036 !important;
  /* Sanomat sets "Expertise Measured" 2% narrower than the reference. */
  letter-spacing: .01em;
}

/* NO ACCENT BAR, AND THE TITLE ALL WHITE (client, 20260915). The reference's
   81 x 6 bar sat 37px under the title and its last word was light blue; both
   went. The sentence now opens 44px under the title's box, about the gap the
   title keeps from the eyebrow above it, and the copy is centred in the
   band's height (see .vxn-xp__inner) so the 43px the bar took is shared
   above and below rather than left at the foot.

   The measure breaks the sentence after "experience." and "every", as the
   reference does: in Regular at 20px the first line plus "10+" is 548px and
   the second line 528, so 27em (540) holds both. */
.vxn-xp .vxn-xp__lede {
  margin: max(24px, calc(44 * var(--r))) 0 0;
  max-width: 27em;
  /* Regular, the weight every other paragraph on the page is set in (it was
     Light, 20260915 morning, matched to the reference's ink). */
  color: rgba(255, 255, 255, .88);
  font-size: max(16px, calc(20 * var(--r)));
  font-weight: 400;
  line-height: 1.55 !important;
}

/* ---- The figures ------------------------------------------------------------------
   The sentence ends at 513.6; the icons start at 569. */
.vxn-xp .vxn-xp__stats {
  display: flex;
  align-items: stretch;
  margin: max(36px, calc(55.4 * var(--r))) 0 0;
  padding: 0;
  list-style: none;
}

/* The first column runs from 81 to the hairline at 242, the second from there
   to 468.5; a column is never narrower than its words plus a gutter. */
.vxn-xp .vxn-xp__stat {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: max-content;
  margin: 0;
  padding: 0 max(18px, calc(24 * var(--r))) 0 0;
}

.vxn-xp .vxn-xp__stat:nth-child(1) {
  width: calc(161 * var(--r));
}

.vxn-xp .vxn-xp__stat:nth-child(2) {
  width: calc(226.5 * var(--r));
}

.vxn-xp .vxn-xp__stat + .vxn-xp__stat {
  padding-left: max(22px, calc(52 * var(--r)));
}

/* The hairline: faint at its ends, brightest 60% of the way down, from 2px
   above the icons to 3px under the labels. */
.vxn-xp .vxn-xp__stat + .vxn-xp__stat::before {
  content: "";
  position: absolute;
  top: calc(-2 * var(--r));
  bottom: calc(-3 * var(--r));
  left: 0;
  width: 2px;
  background: linear-gradient(180deg,
      rgba(28, 110, 232, .35) 0%,
      rgba(50, 140, 242, .8) 45%,
      #52A6F7 62%,
      rgba(36, 126, 235, .75) 78%,
      rgba(22, 100, 225, .5) 100%);
}

.vxn-xp__icon {
  display: block;
  width: max(34px, calc(46 * var(--r)));
  color: #2A93FF;
  line-height: 0;
}

.vxn-xp__icon svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 19.5 under the icon (it ends at 609) opens a 38.6px line with the digits
   from 638. */
.vxn-xp .vxn-xp__num {
  display: block;
  margin-top: max(14px, calc(19.5 * var(--r)));
  color: #FFFFFF;
  font-size: max(28px, calc(38.6 * var(--r)));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* 9.1 under the figure (it ends at 667.1) opens a 23px line with its cap top
   on 684. */
.vxn-xp .vxn-xp__lbl {
  display: block;
  margin-top: max(6px, calc(9.1 * var(--r)));
  color: #FFFFFF;
  font-size: max(12px, calc(14 * var(--r)));
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.643;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- The link ---------------------------------------------------------------------
   66.8 under the labels (they end at 722.2) opens its 21px line with the cap
   top on 794. No underline since 20260915 (client): the reference's 2px rule
   under the words and the arrow is gone, so it is the site's plain text link
   with the one arrow. The arrow keeps the light blue; pointed at, the words
   take it too. */
.vxn-xp .vxn-xp__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: max(40px, calc(66.8 * var(--r)));
  padding: 0;
  color: #FFFFFF !important;
  font-size: max(17px, calc(21 * var(--r)));
  font-weight: 400;
  line-height: 1;
  text-decoration: none !important;
  background: none;
  transition: color .25s var(--vxn-ease);
}

.vxn-xp .vxn-xp__link .vxn-cta__arrow {
  color: #2F8BFF;
}

.vxn-xp .vxn-xp__link:hover,
.vxn-xp .vxn-xp__link:focus-visible {
  color: #BFD9FF !important;
  outline: none;
}

/* ---- Arrival ------------------------------------------------------------------------
   Visible by default; hidden only while UaeBandMotion.tsx marks a piece
   pending. The copy rises in order, 90ms apart, and the figures roll; the
   photograph slides in from the right edge it runs off. */
.vxn-xp__copy > [data-anim='pending'] {
  opacity: 0;
  transform: translateY(18px);
}

.vxn-xp__copy > [data-anim='in'] {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s var(--vxn-ease) var(--vxn-anim-d, 0ms),
    transform .8s var(--vxn-ease) var(--vxn-anim-d, 0ms);
}

.vxn-xp__art[data-anim='pending'] {
  opacity: 0;
  transform: translateX(calc(60 * var(--r)));
}

.vxn-xp__art[data-anim='in'] {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--vxn-ease), transform 1.2s var(--vxn-ease);
}

/* ---- Stacked ---------------------------------------------------------------------------
   Beside the wedge the copy stays clear of the outline down to 900px
   (measured: every line's end tested against the line's region; the
   sentence first touches it at 860), so the split holds to 960 with room to
   spare. Below that the photograph comes first, still meeting the band's
   top edge as it does in the reference, then the copy under it. */
@media (max-width: 959px) {

  .vxn-xp {
    display: flex;
    flex-direction: column;
  }

  .vxn-xp__art {
    position: relative;
    align-self: flex-end;
    width: min(100%, 820px);
    height: auto;
    aspect-ratio: 1037 / 916;
  }

  .vxn-xp__art svg {
    overflow: hidden;
  }

  .vxn-xp__inner {
    width: 100%;
    min-height: 0;
    padding: clamp(24px, 4vw, 40px) 0 clamp(56px, 9vw, 88px);
  }
}

/* Phones: the three figures keep their row, their labels wrap. */
@media (max-width: 640px) {

  .vxn-xp .vxn-xp__stat,
  .vxn-xp .vxn-xp__stat:nth-child(1),
  .vxn-xp .vxn-xp__stat:nth-child(2) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-right: 10px;
  }

  .vxn-xp .vxn-xp__stat + .vxn-xp__stat {
    padding-left: 14px;
  }

  .vxn-xp .vxn-xp__lbl {
    letter-spacing: .06em;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {

  .vxn-xp__copy > [data-anim],
  .vxn-xp__art[data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}