/* Magnetrix - header, footer, logo lockup, hero media.
   Loaded after grid.css. Covers what Xpro widget style controls cannot
   express (their style tab is not writable through the API) plus the image
   aspect ratio, which the Elementor Image widget does not expose.
   Breakpoints: 1180 compress / 1024 drawer / 767 stack / 480 tight. */

/* =========================================================
   1. LOGO LOCKUP
   The mark is 43:24, so its optical centre sits above the
   midpoint of the two-line wordmark. Centre them, and track
   LOGISTICS to match the width of MAGNETRIX above it.
   ========================================================= */
.xpro-theme-builder-header .elementor-widget-xpro-site-logo,
#xpro-theme-builder-footer .elementor-widget-xpro-site-logo {
  display: flex;
  align-items: center;
  line-height: 0;
}
.xpro-theme-builder-header .elementor-widget-xpro-site-logo img {
  height: 34px !important; width: auto !important; display: block;
}
#xpro-theme-builder-footer .elementor-widget-xpro-site-logo img {
  height: 40px !important; width: auto !important; display: block;
}
.xpro-theme-builder-header .elementor-widget-xpro-heading h6,
#xpro-theme-builder-footer .elementor-widget-xpro-heading h6 { margin: 0 !important; }

/* =========================================================
   2. HEADER
   Equal flanks so the nav lands on true centre.
   ========================================================= */
.xpro-theme-builder-header { position: sticky; top: 0; z-index: 500; background: #04100F; }
.admin-bar .xpro-theme-builder-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .xpro-theme-builder-header { top: 46px; } }

.mx-header-row { align-items: center !important; }
.mx-header-row > .e-con-inner { align-items: center !important; flex-wrap: nowrap !important; }

/* Equal proportional flanks. Fixed widths failed because the CTA pair
   needs ~300px and the old clamp capped the flank at 290px, so the
   buttons overflowed and shoved the nav left of centre. With both
   flanks on flex 1 1 0 and the nav on flex 0 0 auto, the nav is dead
   centre regardless of how wide either side's content becomes. */
@media (min-width: 1025px) {
  .mx-header-row > .e-con-inner > .e-con:first-child,
  .mx-header-row > .e-con-inner > .e-con:last-child {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }
  .mx-header-row > .e-con-inner > .e-con:first-child { justify-content: flex-start !important; }
  .mx-header-row > .e-con-inner > .e-con:last-child  { justify-content: flex-end !important; }
  .mx-header-row > .e-con-inner > .e-con:nth-child(2) {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* Nav */
.xpro-elementor-horizontal-navbar-nav { gap: 6px; align-items: center; }
.xpro-elementor-horizontal-navbar-nav > li > a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #9FBFBD;
  padding: 9px 14px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.xpro-elementor-horizontal-navbar-nav > li > a:hover,
.xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a,
.xpro-elementor-horizontal-navbar-nav > li.current-menu-ancestor > a,
.xpro-elementor-horizontal-navbar-nav > li.current_page_item > a { color: #20E6F2; }


/* The two service lines lead the submenu; rule them off from the six
   supporting capabilities. */


/* Compress before anything wraps. */
@media (max-width: 1180px) and (min-width: 1025px) {
  .xpro-elementor-horizontal-navbar-nav > li > a { font-size: 14px; padding: 9px 9px; }
}

/* =========================================================
   3. HEADER BUTTONS
   ========================================================= */
.mx-hbtn-row {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: flex-end !important;
  gap: 10px !important; flex-wrap: nowrap !important;
}
.mx-hbtn { display: flex; align-items: center; flex: 0 0 auto; }
.mx-hbtn .xpro-elementor-button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 42px; padding: 0 20px !important;
  border-radius: 999px !important; border: 1.5px solid transparent;
  background-image: none; box-shadow: none; text-decoration: none;
  white-space: nowrap !important; line-height: 1 !important;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.mx-hbtn .xpro-elementor-button-inner { display: inline-flex; align-items: center; gap: 8px; }
.mx-hbtn .xpro-button-text {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: -.01em !important; text-transform: none !important;
  line-height: 1 !important; white-space: nowrap !important;
}
.mx-hbtn .xpro-elementor-button:hover { transform: translateY(-1px); }
.mx-hbtn .xpro-elementor-button:focus-visible { outline: 3px solid #20E6F2; outline-offset: 3px; }

.mx-hbtn--ghost .xpro-elementor-button {
  background-color: transparent; color: #F7FCFC; border-color: rgba(255,255,255,.22);
}
.mx-hbtn--ghost .xpro-elementor-button:hover {
  background-color: rgba(32,230,242,.10); border-color: #20E6F2; color: #20E6F2;
}
.mx-hbtn--primary .xpro-elementor-button {
  background-color: #20E6F2; color: #04100F; border-color: #20E6F2;
  box-shadow: 0 6px 18px rgba(32,230,242,.28);
}
.mx-hbtn--primary .xpro-elementor-button:hover {
  background-color: #4CEDF6; border-color: #4CEDF6; color: #04100F;
  box-shadow: 0 10px 26px rgba(32,230,242,.36);
}

@media (max-width: 1180px) and (min-width: 1025px) {
  .mx-hbtn .xpro-elementor-button { height: 38px; padding: 0 15px !important; }
  .mx-hbtn .xpro-button-text { font-size: 13px !important; }
}

/* =========================================================
   5. FOOTER
   ========================================================= */
#xpro-theme-builder-footer { background: #04100F; }
#xpro-theme-builder-footer a { text-decoration: none; }

.mx-footer-cols { align-items: flex-start !important; }
.mx-footer-cols > .e-con { min-width: 0; }


/* Legal menu in the footer bar */
.mx-footer-bottom .xpro-elementor-horizontal-navbar-nav { gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.mx-footer-bottom .xpro-elementor-horizontal-navbar-nav > li > a {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px; color: #5E817F; padding: 0; border-radius: 0;
}
.mx-footer-bottom .xpro-elementor-horizontal-navbar-nav > li > a:hover { color: #20E6F2; }
.mx-footer-bottom .elementor-widget-text-editor { max-width: none; }
.mx-footer-bottom .elementor-widget-text-editor p { margin: 0; }

@media (max-width: 1024px) {
  .mx-footer-cols { gap: 36px 40px !important; }
}
@media (max-width: 767px) {
  .mx-footer-cols > .e-con { width: 100% !important; }
  .mx-footer-bottom { align-items: flex-start !important; gap: 16px !important; }
  .mx-footer-bottom .xpro-elementor-horizontal-navbar-nav { justify-content: flex-start; gap: 18px; }
  #xpro-theme-builder-footer .elementor-widget-xpro-site-logo img { height: 36px !important; }
}

/* =========================================================
   6. HERO
   The copy column and the media column are very different
   heights, so the row is top-aligned (set on the container).
   Everything below is what the widget panels cannot express.
   ========================================================= */

/* Image slot. The Elementor Image widget has no aspect-ratio control, and
   4:3 at this column width ran ~500px tall and pushed the stat strip off a
   900px viewport. Step it down as the column gets proportionally wider. */
.mx-glow .elementor-widget-image img,
.mx-glow .elementor-widget-image:has(img) {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* Hold the headline to a measure so it breaks in three lines rather than
   running the full column. text-wrap evens the rag where supported. */
.mx-glow h1 { max-width: 17ch; text-wrap: balance; }
.mx-glow .elementor-widget-text-editor { max-width: 46ch; }

/* -------- Hero buttons --------
   The ghost carries a 2px border and the primary does not, so on padding
   alone the ghost renders 4px taller. Fix the height on both and let the
   border sit inside it. */
.mx-glow .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-block: 0 !important;
  white-space: nowrap;
}
/* Cyan is the signal colour, so the primary earns a glow. Nothing else does.
   Matched on the rendered fill so it cannot catch the ghost. */
.mx-glow .elementor-button[style*="20E6F2"],
.mx-glow .elementor-button[style*="rgb(32, 230, 242)"] {
  box-shadow: 0 6px 18px rgba(32, 230, 242, .26) !important;
}
.mx-glow .elementor-button[style*="20E6F2"]:hover,
.mx-glow .elementor-button[style*="rgb(32, 230, 242)"]:hover {
  box-shadow: 0 10px 26px rgba(32, 230, 242, .34) !important;
}

/* -------- Live tracking card --------
   Stacked under the image rather than floating over it: an overlay is
   fiddly to re-position in the Elementor editor later. */
.mx-glow .mx-hcard { backdrop-filter: blur(2px); }

/* The status dot. A pseudo-element on the label keeps it out of the DOM so
   there is no empty widget for anyone to delete by accident. */
.mx-glow .mx-hcard__label { position: relative; padding-right: 18px; }
.mx-glow .mx-hcard__label::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #20E6F2;
  box-shadow: 0 0 0 0 rgba(32, 230, 242, .6);
  animation: mx-pulse 2.4s ease-out infinite;
}
@keyframes mx-pulse {
  70%  { box-shadow: 0 0 0 9px rgba(32, 230, 242, 0); }
  100% { box-shadow: 0 0 0 0  rgba(32, 230, 242, 0); }
}

/* The rail reads as origin -> destination, so it is a gradient that fades
   out rather than a flat line. */
.mx-glow .mx-hrail .elementor-divider-separator {
  border: 0 !important;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #20E6F2, #00636D 55%, rgba(94,129,127,.30));
}
.mx-glow .mx-hrail .elementor-divider { padding-block: 2px; }

/* Three labels on one line at every width: drop the tracking before wrapping. */
.mx-glow .mx-hcard__feet { flex-wrap: nowrap !important; }
.mx-glow .mx-hcard__foot { white-space: nowrap; }

/* -------- Hero: tablet --------
   At 768px the 54/42 split leaves the copy column too narrow for a 38px
   headline, so stack and let the image run full width. */
@media (max-width: 1024px) {
  .mx-glow .elementor-widget-image img,
.mx-glow .elementor-widget-image:has(img) { aspect-ratio: 16 / 9; }
  .mx-glow h1 { max-width: 24ch; }
}
@media (max-width: 900px) {
  /* The row is nowrap, so stacking has to come from the direction, not from
     the widths -- setting width:100% on a nowrap row just shrinks both. */
  .mx-glow > .e-con-inner > .e-con:first-child {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .mx-glow > .e-con-inner > .e-con:first-child > .e-con {
    width: 100% !important;
    flex-basis: auto !important;
  }
  .mx-glow .elementor-widget-image img,
.mx-glow .elementor-widget-image:has(img) { aspect-ratio: 16 / 8; }
}

/* -------- Hero: phone -------- */
@media (max-width: 767px) {
  .mx-glow h1 { max-width: none; }
  .mx-glow .elementor-widget-text-editor { max-width: none; }
  .mx-glow .elementor-widget-image img,
.mx-glow .elementor-widget-image:has(img) { aspect-ratio: 16 / 11; }
}
@media (max-width: 479px) {
  /* Two pills side by side get ~150px each and the labels wrap. Stack them. */
  .mx-glow .elementor-widget-button { width: 100%; }
  .mx-glow .elementor-widget-button .elementor-button { width: 100%; }
  .mx-glow .mx-hcard__foot { letter-spacing: .02em !important; font-size: 9px !important; }
  .mx-glow .mx-hcard__ref { font-size: 14px !important; }
}

/* -------- Hero: keep the media column on the right --------
   54% + 42% + a fixed 56px gap overflowed the 1160px box by ~10px, and the
   row was set to wrap -- so the image and tracking card dropped underneath
   the copy at every desktop width. Widths now leave 13px of slack and the
   row is pinned to nowrap, belt and braces. */
@media (min-width: 901px) {
  .mx-glow > .e-con-inner > .e-con:first-child {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  /* min-width:0 lets a flex child shrink below its content width instead of
     forcing the row wider than the container. */
  .mx-glow > .e-con-inner > .e-con:first-child > .e-con { min-width: 0; }
  .mx-glow > .e-con-inner > .e-con:first-child > .e-con:last-child { flex-shrink: 0; }
}

/* =========================================================
   7. LINE CARDS  ("Built for two audiences")
   Two cards side by side. Inside each: a full-bleed 16:9
   image on top, then the copy block. The card carries the
   radius and clips the image, so the image itself is square
   -- that is why its own border-radius is set to 0.
   ========================================================= */
.mx-linecard { overflow: hidden; }

/* Media bleeds edge to edge: no padding on the card, none here either. */
.mx-linecards .mx-cardmedia .elementor-widget-image img {
  width: 100%;
  display: block;
  border-radius: 0 !important;
  object-fit: cover;
}
.mx-linecards .mx-cardmedia .elementor-widget-image:has(img[src*="placeholder"]) {
  aspect-ratio: 16 / 9 !important;
  min-height: 0;
  border-radius: 0 !important;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

/* The label sits tight to the heading it introduces. */
.mx-linecards .mx-cardkicker { margin-bottom: -4px; }

/* Equal-height cards: stretch on the row, then push the CTA to the bottom so
   both buttons land on the same line even when the copy differs in length. */
.mx-linecards > .e-con,
.mx-linecards .mx-linecard { height: 100%; }
.mx-linecards .mx-cardcopy { flex-grow: 1; }
.mx-linecards .mx-cardcopy > .elementor-widget-button { margin-top: auto; padding-top: 8px; }
.mx-linecards .mx-cardcopy > .elementor-widget-button .elementor-button { display: inline-flex; }

/* -------- Line cards: tablet --------
   Two 48% cards still work at this width with the image on top, so they stay
   side by side; only the type steps down.  */
@media (max-width: 1024px) {
  .mx-linecards .mx-cardcopy .elementor-widget-heading h3 { font-size: 21px !important; }
}

/* -------- Line cards: phone --------
   The row's own mobile direction stacks the cards full width. */
@media (max-width: 767px) {
  .mx-linecards .mx-cardmedia .elementor-widget-image:has(img[src*="placeholder"]) {
    aspect-ratio: 16 / 10 !important;
  }
  .mx-linecards .mx-cardcopy > .elementor-widget-button { margin-top: 4px; }
}

/* =========================================================
   8. PROCESS TIMELINE ("From quote to your warehouse door")
   Six steps in one row under a single continuous hairline.
   The rail belongs to the ROW, not to each step: a per-step
   rule leaves a visible break at every 24px gap, which reads
   as six separate rules instead of one process.
   ========================================================= */
.mx-timeline { position: relative; }


/* Suppress the per-step rail from brand.css while the row rail is in play. */


/* Marker centred on the rail. Its fill matches the section ground (#F7FCFC),
   not white, or it reads as a lighter disc sitting on the surface. */
.mx-timeline .mx-step { position: relative; }


/* Mono label with the short rule the reference shows to its left. */
.mx-kicker-rule { position: relative; padding-left: 34px; }
.mx-kicker-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

/* Tablet: three across, two rows. Each row needs its own rail, so the row
   rule goes and the per-step rule comes back, bridged across the gap. */
@media (max-width: 1024px) {
  
  .mx-timeline .mx-step::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: -24px;
    height: 1px;
    background: var(--mx-border);
  }
  .mx-timeline .mx-step:nth-child(3n)::before { right: 0; }
}

/* Phone: a single column, so the rail becomes a short tick per step. */
@media (max-width: 767px) {
  .mx-timeline .mx-step::before { right: auto !important; width: 44px; }
  .mx-timeline .mx-step { padding-top: 22px; }
}

/* =========================================================
   9. HEADER: DRAWER RANGE (tablet and phone)
   Below 1025 the Xpro menu becomes off-canvas.

   The toggler is button.xpro-elementor-horizontal-menu-toggler
   with an i.fas.fa-bars inside. It is NOT
   .xpro-elementor-horizontal-menu-btn, which does not exist in
   Xpro 1.7.5 -- an earlier rule here used that name, never
   matched, and left the hamburger in the plugin default dark
   colour on a #04100F bar: effectively invisible.
   ========================================================= */
@media (max-width: 1024px) {
  .mx-header-row > .e-con-inner > .e-con:first-child,
  .mx-header-row > .e-con-inner > .e-con:last-child {
    flex: 0 0 auto !important; width: auto !important;
  }
  /* hamburger goes last and hard right */
  .mx-header-row > .e-con-inner > .e-con:nth-child(2) {
    flex: 0 0 auto !important; order: 3; margin-left: auto;
  }
  .mx-hbtn--ghost { display: none !important; }
  .mx-hbtn--primary .xpro-elementor-button { height: 38px; padding: 0 16px !important; }
  .mx-hbtn--primary .xpro-button-text { font-size: 13.5px !important; }

  /* Hamburger: 44px tap target, bars in brand mist. */
  .xpro-elementor-horizontal-menu-toggler-wrapper { display: flex; align-items: center; }


  /* Drawer panel */
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar {
    background: #04100F; padding: 68px 22px 28px;
  }
  .xpro-elementor-horizontal-navbar-nav { gap: 0; align-items: stretch; }
  .xpro-elementor-horizontal-navbar-nav > li > a {
    font-size: 17px; padding: 14px 0; border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.07); white-space: normal;
  }
  
  
}
/* ---- Drawer CTAs ----
   Get a Quote and Track Shipment are hidden from the bar on phones, so
   they are added to the nav menu as items carrying .mx-menu-cta and
   suppressed above 1024 where the real buttons are visible. That keeps
   the CTA reachable without a second widget the drawer cannot hold. */
@media (min-width: 1025px) {
  .mx-menu-cta { display: none !important; }
}
@media (max-width: 1024px) {
  .xpro-elementor-horizontal-navbar-nav > li.mx-menu-cta { margin-top: 14px; }
  .xpro-elementor-horizontal-navbar-nav > li.mx-menu-cta > a {
    border-bottom: 0 !important;
    display: flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 20px !important;
    border-radius: 999px; font-family: "Space Grotesk", sans-serif;
    font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  }


}

/* ---- Phone: brand and hamburger only ----
   At 375px the lockup (~150px) plus a Get a Quote pill (~110px) plus the
   toggler plus gaps and padding came to ~362px, so it overflowed on any
   narrower handset. The bar now carries the brand and the toggler only,
   which is what the reference does; both CTAs live in the drawer. */
@media (max-width: 767px) {
  .mx-hbtn-row { display: none !important; }
  .xpro-theme-builder-header .elementor-widget-xpro-site-logo img { height: 32px !important; }
}
@media (max-width: 480px) {
  .xpro-theme-builder-header .elementor-widget-xpro-site-logo img { height: 30px !important; }
  .xpro-theme-builder-header .elementor-widget-xpro-heading:first-of-type h6 { font-size: 16px !important; }
  .xpro-theme-builder-header .elementor-widget-xpro-heading:last-of-type h6 {
    font-size: 9px !important; letter-spacing: .26em !important;
  }
}
@media (max-width: 360px) {
  .xpro-theme-builder-header .elementor-widget-xpro-heading:last-of-type h6 {
    letter-spacing: .18em !important;
  }
}

/* =========================================================
   10. DRAWER PALETTE  (overrides Xpro defaults)

   Xpro paints the off-canvas panel light and its buttons grey:
     .xpro-elementor-horizontal-menu-responsive-tablet
         background-color: #f5f5f5; text-align: right
     button.xpro-elementor-horizontal-menu-close
         background-color: #e8e8e8; color: #2b2b2b
     button.xpro-elementor-horizontal-menu-toggler
         color: #2b2b2b
     .xpro-elementor-horizontal-navbar-nav > li > a
         color: #2b2b2b

   Two earlier fixes lost on specificity: Xpro qualifies its
   buttons with the element (button.xpro-...), which outranks a
   bare class. And the dark background went on the inner
   .xpro-elementor-horizontal-navbar rather than the wrapper,
   which is the actual panel -- hence a dark box floating inside
   a light one.
   ========================================================= */
@media (max-width: 1024px) {

  /* The panel IS the wrapper. */
  .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-tablet,
  .xpro-elementor-horizontal-navbar-wrapper.xpro-elementor-horizontal-menu-responsive-mobile {
    background-color: #04100F !important;
    text-align: left !important;
    padding: 20px 22px 32px !important;
    width: 340px;
    border-left: 1px solid rgba(255,255,255,.08);
  }

  /* Inner shells carry no colour of their own. */
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar,
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav,
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li {
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Links */
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li > a {
    color: #C9DEDC !important;
    background: transparent !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    font-family: "Space Grotesk", sans-serif;
    font-size: 17px; padding: 15px 0 !important; margin: 0 !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li:hover > a,
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a,
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a {
    color: #20E6F2 !important;
  }

  /* Submenu */
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-dropdown-menu,
  .xpro-elementor-horizontal-navbar-wrapper .sub-menu {
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    padding: 2px 0 8px 14px !important; min-width: 0 !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-dropdown-menu > li > a {
    background-color: transparent !important;
    color: #9FBFBD !important;
    border-bottom: 0 !important;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 15px !important; padding: 9px 0 !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-dropdown-menu > li > a:hover { color: #20E6F2 !important; }
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-dropdown-menu:after { display: none !important; }

  /* Buttons: element-qualified to beat Xpro. */
  button.xpro-elementor-horizontal-menu-close {
    background-color: transparent !important;
    color: #9FBFBD !important;
    width: 44px !important; height: 44px !important;
    border-radius: 10px;
  }
  button.xpro-elementor-horizontal-menu-close:hover {
    background-color: rgba(255,255,255,.06) !important; color: #20E6F2 !important;
  }
  button.xpro-elementor-horizontal-menu-toggler {
    background-color: transparent !important;
    color: #F7FCFC !important;
    width: 44px !important; height: 44px !important;
    font-size: 23px !important; border-radius: 10px;
  }
  button.xpro-elementor-horizontal-menu-toggler:hover {
    background-color: rgba(255,255,255,.06) !important; color: #20E6F2 !important;
  }
  .xpro-elementor-horizontal-menu-overlay { background-color: rgba(4,16,15,.66) !important; }
}
/* ---- Drawer CTA pills (must outrank the link rules above) ---- */
@media (max-width: 1024px) {
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.mx-menu-cta {
    margin-top: 12px !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.mx-menu-cta > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px;
    padding: 0 20px !important;
    border-radius: 999px !important;
    border-bottom: 0 !important;
    font-family: "Space Grotesk", sans-serif;
    font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  }
  /* Cyan fill, Abyss text. The earlier version set the fill without
     !important and the ghost text to mist -- so the pill stayed light and
     the ghost label went white-on-white. */
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.mx-menu-cta--primary > a {
    background-color: #20E6F2 !important;
    color: #04100F !important;
    border: 0 !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.mx-menu-cta--ghost > a {
    background-color: transparent !important;
    color: #F7FCFC !important;
    border: 1.5px solid rgba(255,255,255,.24) !important;
  }
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-horizontal-navbar-nav > li.mx-menu-cta--ghost > a:hover {
    border-color: #20E6F2 !important; color: #20E6F2 !important;
    background-color: rgba(32,230,242,.10) !important;
  }
  /* No chevron pseudo-element on a CTA. */
  .xpro-elementor-horizontal-navbar-nav > li.mx-menu-cta .xpro-dropdown-menu-toggle { display: none !important; }
}

/* =========================================================
   11. HERO STAT BAND
   Icon left of the copy, four cells divided by hairlines.

   The defect being fixed: the wrapper centred the icon against
   its own text block, so a cell whose description ran to two
   lines pushed its icon and title up relative to the other
   three. Aligning to flex-start puts all four on one baseline
   regardless of how the copy wraps.
   ========================================================= */
.mx-statband .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
}
.mx-statband .elementor-icon-box-icon {
  flex: 0 0 auto;
  margin: 0 !important;
}
.mx-statband .elementor-icon-box-content { min-width: 0; }
.mx-statband .elementor-icon-box-title { margin: 0 0 3px !important; line-height: 1.25 !important; }
.mx-statband .elementor-icon-box-description { margin: 0 !important; }

/* Nudge the tile down so its optical centre meets the title cap height
   rather than the very top of the line box. */
.mx-statband .elementor-icon-box-icon { margin-top: 1px !important; }

/* Hairline between cells. First cell has none; padding keeps the copy off
   the rule. box-sizing is border-box here, so this eats into the 25%. */
.mx-statband > .e-con + .e-con {
  border-left: 1px solid rgba(255,255,255,.09);
  padding-left: 22px;
}

/* Tablet: two across, so only the second of each pair keeps its rule. */
@media (max-width: 1024px) {
  .mx-statband > .e-con + .e-con { padding-left: 20px; }
  .mx-statband > .e-con:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .mx-statband > .e-con:nth-child(n+3) { padding-top: 22px; }
}

/* Phone: single column, so the divider becomes a rule above each cell. */
@media (max-width: 767px) {
  .mx-statband > .e-con + .e-con {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 18px;
  }
  .mx-statband > .e-con:nth-child(n+3) { padding-top: 18px; }
}

/* =========================================================
   12. VIDEO TESTIMONIAL SLIDER
   Elementor Pro is not installed -- media-carousel and
   nested-carousel are upsell stubs here -- so this is a
   scroll-snap track of containers, each holding a real
   Elementor Video widget. Per-slide the client can choose
   YouTube or Self Hosted in the widget panel, which is why
   this beats the free Image Carousel (one shared link).
   Swipe works natively; the arrows drive scrollBy.
   ========================================================= */
.mx-vslider-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  overscroll-behavior-x: contain;
}
.mx-vslider-track::-webkit-scrollbar { display: none; }

/* Three across, gap subtracted so the third slide is not clipped. */
.mx-vslider-track > .mx-vslide {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 1024px) {
  .mx-vslider-track > .mx-vslide { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
  /* A sliver of the next slide signals that the track scrolls. */
  .mx-vslider-track > .mx-vslide { flex: 0 0 86%; }
}

/* 3:4 portrait: the Video widget offers no 3:4 ratio option, only
   16:9 / 21:9 / 4:3 / 3:2 / 1:1 / 9:16. */
.mx-vslide .elementor-widget-video .elementor-wrapper {
  aspect-ratio: 3 / 4 !important;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--mx-border);
  background: #DCEAEA;
}
.mx-vslide .elementor-custom-embed-image-overlay {
  background-size: cover;
  background-position: center;
  min-height: 100%;
}
.mx-vslide .elementor-custom-embed-image-overlay img { width: 100%; height: 100%; object-fit: cover; }

/* Play button: cyan disc, Abyss glyph. */
.mx-vslide .elementor-custom-embed-play i {
  color: #04100F;
  background: #20E6F2;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 19px;
  box-shadow: 0 8px 26px rgba(4,16,15,.28);
  transition: transform .18s, background .18s;
}
.mx-vslide .elementor-wrapper:hover .elementor-custom-embed-play i { transform: scale(1.06); background: #4CEDF6; }
.mx-vslide__name { margin: 0 !important; }
.mx-vslide__role { margin: 0 !important; opacity: .9; }

/* Arrows. Icon widgets, upgraded to real buttons by brand.js. */
.mx-vnav .elementor-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--mx-border);
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, opacity .18s;
}
.mx-vnav .elementor-icon:hover { border-color: #00636D; background: #F7FCFC; }
.mx-vnav[aria-disabled="true"] { opacity: .34; pointer-events: none; }
.mx-vnav:focus-visible { outline: 3px solid #20E6F2; outline-offset: 3px; border-radius: 50%; }
/* Nothing to scroll: hide the controls rather than show dead buttons. */
.mx-vslider--static .mx-vnav-row { display: none !important; }
.mx-vnote p { margin: 0; }

/* ---- Slide posters ----
   Elementor Video renders NOTHING when its URL is empty (render() bails
   before the overlay), so an empty Video widget leaves an invisible slide.
   Each slide therefore carries an Image widget as the poster. Swapping it
   for a Video widget -- or dropping a Video widget in and pasting a
   YouTube URL / picking a self-hosted file -- activates the slide. The 3:4
   box and play badge below apply either way. */
.mx-vslide .mx-vposter { position: relative; }
.mx-vslide .elementor-widget-image:has(img) {
  aspect-ratio: 3 / 4 !important;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.mx-vslide .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }

/* Play badge, so an empty slot still reads as video rather than a photo. */
.mx-vslide .mx-vposter::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: #20E6F2;
  box-shadow: 0 8px 26px rgba(4,16,15,.26);
  transition: transform .18s, background .18s;
}
/* The triangle: a left-pointing border trick, offset to look optically centred. */
.mx-vslide .mx-vposter::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  z-index: 2;
  margin: -9px 0 0 -6px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #04100F;
}
.mx-vslide:hover .mx-vposter::after { transform: scale(1.06); background: #4CEDF6; }

/* =========================================================
   13. MOTION
   Design dial is 0.2 -- restrained. Two rules of thumb:
   1. Motion signals affordance, so only things you can click
      move. A card that lifts but does nothing is a lie, hence
      :has(a) on the lift.
   2. Reveal uses the `translate` property, hover uses
      `transform`. They are separate properties, so a
      fill-mode:both entry animation cannot cancel the hover
      transform -- which it would if both used transform.
   ========================================================= */

/* ---- Cards ---- */
.mx-card {
  transition: box-shadow .2s cubic-bezier(.4,0,.2,1),
              border-color .2s cubic-bezier(.4,0,.2,1),
              transform .2s cubic-bezier(.4,0,.2,1);
}
/* Only interactive cards lift. The hero tracking panel is not a card you
   can press, so it is excluded explicitly. */
.mx-card:has(a):hover:not(.mx-hcard) {
  transform: translateY(-3px);
  box-shadow: 0 3px 6px rgba(4,16,15,.05), 0 16px 38px rgba(4,16,15,.09);
  border-color: #C6E2E2 !important;
}
/* Non-interactive cards get a whisper of depth, no movement. */
.mx-card:not(:has(a)):hover:not(.mx-hcard) {
  box-shadow: 0 2px 5px rgba(4,16,15,.05), 0 10px 24px rgba(4,16,15,.06);
}

/* The icon tile picks up the card hover: tint and a nudge, no bounce. */
.mx-card .elementor-widget-icon-box .elementor-icon {
  transition: background .2s, border-color .2s, transform .2s;
}
.mx-card:hover .elementor-widget-icon-box .elementor-icon {
  background: rgba(32,230,242,.20);
  border-color: rgba(0,99,109,.34);
  transform: translateY(-1px);
}

/* ---- Buttons ---- */
/* Press state: the lift collapses and the pill compresses very slightly, so
   a tap feels acknowledged on touch where there is no hover. */
.elementor-button:active,
.xpro-elementor-button:active {
  transform: translateY(0) scale(.985);
  transition-duration: .08s;
}
.elementor-button:focus-visible,
.xpro-elementor-button:focus-visible {
  outline: 3px solid #20E6F2;
  outline-offset: 3px;
}
/* Arrow slides in the direction it points. */
.elementor-button .elementor-button-icon { transition: transform .2s cubic-bezier(.4,0,.2,1); }
.elementor-button:hover .elementor-button-icon { transform: translateX(3px); }
.mx-hbtn .xpro-elementor-button i,
.mx-hbtn .xpro-elementor-button svg { transition: transform .2s; }
.mx-hbtn .xpro-elementor-button:hover i,
.mx-hbtn .xpro-elementor-button:hover svg { transform: translateX(2px); }

/* ---- Inline links ---- */
.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .18s, text-underline-offset .18s, text-decoration-color .18s;
}
.elementor-widget-text-editor a:hover { color: #00636D; text-underline-offset: 4px; }

/* ---- Entry reveal ----
   Scroll-driven, so no JS and no IntersectionObserver. Gated three ways:
   @supports (so unsupporting browsers never see opacity:0 and lose the
   content), prefers-reduced-motion, and a 12px travel that is felt more
   than seen. Uses `translate`, never `transform` -- see note above. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes mx-rise {
      from { opacity: 0; translate: 0 12px; }
      to   { opacity: 1; translate: 0 0; }
    }
    .mx-card,
    .mx-vslide,
    .mx-statband > .e-con,
    .mx-timeline .mx-step {
      animation: mx-rise linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 44%;
    }
    /* The hero is above the fold: animating it would just delay the thing
       the visitor came for, and costs Largest Contentful Paint. */
    .mx-glow .mx-card,
    .mx-glow .mx-statband > .e-con,
    .mx-hcard { animation: none; opacity: 1; translate: 0 0; }

    /* A short stagger across a row reads as one gesture rather than four. */
    .mx-eq > .e-con:nth-child(2) .mx-card,
    .mx-statband > .e-con:nth-child(2) { animation-delay: .04s; }
    .mx-eq > .e-con:nth-child(3) .mx-card,
    .mx-statband > .e-con:nth-child(3) { animation-delay: .08s; }
    .mx-eq > .e-con:nth-child(4) .mx-card,
    .mx-statband > .e-con:nth-child(4) { animation-delay: .12s; }
  }
}

/* Belt and braces: if anything above ever animates opacity and the timeline
   fails to attach, force the visible state for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .mx-card, .mx-vslide, .mx-statband > .e-con, .mx-timeline .mx-step {
    animation: none !important;
    opacity: 1 !important;
    translate: 0 0 !important;
    transform: none !important;
  }
}

/* =========================================================
   14. SERVICES DROPDOWN
   Xpro renders the panel as .xpro-elementor-dropdown-menu,
   NOT .sub-menu -- the earlier rules keyed to .sub-menu never
   matched, so this panel was running Xpro defaults
   (var(--e-global-color-primary) fill, white text, a
   #ffffff69 rule under every row).
   Rows are built by magnetrix-core/includes/magnetrix-menu.php.
   ========================================================= */
@media (min-width: 1025px) {
  .xpro-elementor-horizontal-navbar-nav .xpro-elementor-dropdown-menu {
    background: #071210 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 16px !important;
    padding: 10px !important;
    min-width: 392px !important;
    box-shadow: 0 26px 60px rgba(0,0,0,.55) !important;
  }
  .xpro-elementor-horizontal-navbar-nav .xpro-elementor-dropdown-menu:after { display: none !important; }
}

/* ---- Rows: icon + title + description ---- */
.mx-mm__row > a.xpro-elementor-dropdown-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 13px;
  padding: 10px 11px !important;
  border-radius: 11px;
  background-color: transparent !important;
  border-bottom: 0 !important;
  transition: background-color .18s;
}
.mx-mm__row > a.xpro-elementor-dropdown-item:hover { background-color: rgba(32,230,242,.08) !important; }

/* Tile. Fixed box so a two-line description cannot stretch or centre it. */
.mx-mm__icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(32,230,242,.10);
  border: 1px solid rgba(32,230,242,.22);
  margin-top: 1px;
  transition: background .18s, border-color .18s;
}
.mx-mm__icon i { font-size: 14px; color: #20E6F2; line-height: 1; }
.mx-mm__row > a:hover .mx-mm__icon { background: rgba(32,230,242,.18); border-color: rgba(32,230,242,.42); }

.mx-mm__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-mm__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: #F7FCFC; line-height: 1.3;
  transition: color .18s;
}
.mx-mm__row > a:hover .mx-mm__title { color: #20E6F2; }
.mx-mm__desc {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0;
  color: #6C8A88; line-height: 1.42;
  text-transform: none;
}

/* The two service lines lead; rule them off from the six capabilities. */
.xpro-elementor-dropdown-menu > li:nth-child(2) {
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

/* In the drawer the panel is inline, so it needs no chrome of its own. */
@media (max-width: 1024px) {
  .mx-mm__row > a.xpro-elementor-dropdown-item { padding: 9px 0 !important; gap: 11px; }
  .mx-mm__icon { width: 32px; height: 32px; border-radius: 9px; }
  .mx-mm__icon i { font-size: 12.5px; }
  .mx-mm__title { font-size: 14.5px; }
  .mx-mm__desc { font-size: 12px; }
}

/* =========================================================
   15. PORTED SECTIONS
   Insights cards, content pillars, newsletter, and the
   Operator/Why split. Added when live was synced up to the
   original static build.
   ========================================================= */

/* Article cards: image bleeds to the card edge, card clips the radius. */
.mx-artcard { overflow: hidden; }
.mx-artmedia .elementor-widget-image:has(img) {
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  border-left: 0; border-right: 0; border-top: 0;
}
.mx-artcard .elementor-widget-image img { border-radius: 0 !important; width: 100%; object-fit: cover; }

/* Category / pillar tag above the article heading. */
.mx-artchip { margin: 0 0 2px !important; }

/* The Why split: image and copy top-aligned, stacked on phone. */
.mx-imgslot { width: 100%; }

/* =========================================================
   16. HERO VIDEO
   Elementor Video bails out of render() when its URL is
   empty -- it outputs nothing at all, not even the overlay.
   So the hero carries BOTH a Video widget and a poster
   image, and the poster removes itself as soon as the video
   has a source. Nothing to remember on upload.
   ========================================================= */
.mx-glow .mx-heromedia:has(.elementor-widget-video .elementor-wrapper) .mx-heroposter {
  display: none !important;
}

/* Match the poster box exactly, so swapping one for the other does not
   shift the tracking card below it. */
.mx-glow .mx-herovideo .elementor-wrapper {
  aspect-ratio: 16 / 10 !important;
  border-radius: var(--mx-r-lg, 20px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: #072021;
}
.mx-glow .mx-herovideo video,
.mx-glow .mx-herovideo iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mx-glow .mx-herovideo .elementor-custom-embed-image-overlay {
  background-size: cover;
  background-position: center;
}
.mx-glow .mx-herovideo .elementor-custom-embed-play i {
  color: #04100F;
  background: #20E6F2;
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px;
  box-shadow: 0 8px 28px rgba(4,16,15,.34);
  transition: transform .18s, background .18s;
}
.mx-glow .mx-herovideo .elementor-wrapper:hover .elementor-custom-embed-play i {
  transform: scale(1.06); background: #4CEDF6;
}

@media (max-width: 1024px) { .mx-glow .mx-herovideo .elementor-wrapper { aspect-ratio: 16 / 9 !important; } }
@media (max-width: 767px)  { .mx-glow .mx-herovideo .elementor-wrapper { aspect-ratio: 16 / 11 !important; } }

/* =========================================================
   17. FOOTER (Xpro widget palette)
   Xpro drops every style control written through the API,
   so the title_color / icon_color values stored on these
   widgets never reach the page -- the footer was rendering
   in Xpro and Astra defaults on a #04100F ground.

   Rendered classes are xpro-infolist-* and xpro-heading-*,
   NOT xpro-elementor-infolist-* (earlier rules used that and
   never matched). Semantic classes mx-fbrand / mx-fcolhead /
   mx-flist / mx-fsocial are set on the widgets so this does
   not depend on element ids.
   ========================================================= */

/* Brand lockup */
#xpro-theme-builder-footer .mx-fbrand:first-of-type .xpro-heading-title { color: #F7FCFC !important; }
#xpro-theme-builder-footer .mx-fbrand:last-of-type .xpro-heading-title { color: #9FBFBD !important; }

/* Column headings: mono label, cyan, wide tracking. */
#xpro-theme-builder-footer .mx-fcolhead .xpro-heading-title {
  color: #20E6F2 !important;
  font-family: "Space Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  margin: 0 0 2px !important;
}

/* Link lists */
#xpro-theme-builder-footer .mx-flist .xpro-infolist-wrapper { margin: 0; padding: 0; list-style: none; }
#xpro-theme-builder-footer .mx-flist .xpro-infolist-item { margin-bottom: 9px; }
#xpro-theme-builder-footer .mx-flist .xpro-infolist-item:last-child { margin-bottom: 0; }
#xpro-theme-builder-footer .mx-flist .xpro-infolist-item > a { display: flex; align-items: flex-start; gap: 10px; }
#xpro-theme-builder-footer .mx-flist .xpro-infolist-title {
  color: #9FBFBD !important;
  font-family: "Hanken Grotesk", sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  transition: color .18s;
}
#xpro-theme-builder-footer .mx-flist .xpro-infolist-item:hover .xpro-infolist-title { color: #20E6F2 !important; }

/* Contact column keeps its icons; the link columns have none by design. */


/* Social icons: tiles rather than bare glyphs, so they read as controls. */
#xpro-theme-builder-footer .mx-fsocial .xpro-social-icon-wrapper {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 4px 0 0; padding: 0; list-style: none;
}
#xpro-theme-builder-footer .mx-fsocial .xpro-social-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12);
  color: #9FBFBD !important;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
#xpro-theme-builder-footer .mx-fsocial .xpro-social-icon:hover {
  background: rgba(32,230,242,.12) !important;
  border-color: rgba(32,230,242,.40);
  color: #20E6F2 !important;
  transform: translateY(-2px);
}
#xpro-theme-builder-footer .mx-fsocial .xpro-social-icon svg {
  width: 15px; height: 15px; fill: currentColor;
}
#xpro-theme-builder-footer .mx-fsocial .xpro-social-icon i { font-size: 15px; color: inherit; }
#xpro-theme-builder-footer .mx-fsocial .xpro-social-icon:focus-visible { outline: 3px solid #20E6F2; outline-offset: 3px; }

/* Placeholder social links point at # until real profiles exist. Dim them
   so they read as pending rather than broken. Remove this rule once the
   real URLs are in. */
#xpro-theme-builder-footer .mx-fsocial .xpro-social-icon[href="#"] { opacity: .45; }
#xpro-theme-builder-footer .mx-fsocial .xpro-social-icon[href="#"]:hover { transform: none; }

/* Footer body copy + bottom bar */
#xpro-theme-builder-footer .elementor-widget-text-editor { color: #9FBFBD; }
#xpro-theme-builder-footer .elementor-widget-text-editor p { font-size: 14.5px; line-height: 1.6; }

@media (max-width: 767px) {
  #xpro-theme-builder-footer .mx-fcolhead .xpro-heading-title { margin-top: 6px !important; }
  #xpro-theme-builder-footer .mx-fsocial .xpro-social-icon { width: 42px; height: 42px; }
}

/* ---- Footer contact list: icons and alignment ----
   Xpro renders the icon as an SVG inside .xpro-infolist-media, not
   .xpro-infolist-icon. An SVG ignores `color` unless its fill is set to
   currentColor, which is why these were rendering black on black.

   Xpro also gives .xpro-infolist-media-type-icon a 25px circle with
   background-color: var(--e-global-color-primary), and a ::before that
   draws a vertical connector line between items -- that is the wide
   gutter and the tall gaps. Both are overridden below.
   Xpro also centres .xpro-infolist-item > a, so a two-line address
   floats its icon to the middle instead of the first line. */
#xpro-theme-builder-footer .mx-flist .xpro-infolist-wrapper { row-gap: 0 !important; }
#xpro-theme-builder-footer .mx-flist .xpro-infolist-item {
  align-items: flex-start !important;
  margin: 0 0 11px !important;
}
#xpro-theme-builder-footer .mx-flist .xpro-infolist-item:last-child { margin-bottom: 0 !important; }
#xpro-theme-builder-footer .mx-flist .xpro-infolist-item > a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  width: 100%;
}

/* The tile: brand colours, sized to the type, never a bare circle. */
#xpro-theme-builder-footer .mx-flist .xpro-infolist-media,
#xpro-theme-builder-footer .mx-flist .xpro-infolist-media-type-icon {
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  margin: 1px 0 0 !important;
  border-radius: 9px !important;
  background-color: rgba(32,230,242,.10) !important;
  border: 1px solid rgba(32,230,242,.20);
  color: #20E6F2 !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* An SVG needs fill, not color. */
#xpro-theme-builder-footer .mx-flist .xpro-infolist-media svg {
  width: 12px; height: 12px;
  fill: currentColor !important;
}
#xpro-theme-builder-footer .mx-flist .xpro-infolist-media i { color: currentColor !important; font-size: 12px; }

/* Kill the connector line Xpro draws under each icon. */
#xpro-theme-builder-footer .mx-flist .xpro-infolist-media-type-icon::before,
#xpro-theme-builder-footer .mx-flist .xpro-infolist-media-type-icon::after { content: none !important; display: none !important; }

/* Text sits on the same line as the icon it belongs to. */
#xpro-theme-builder-footer .mx-flist .xpro-infolist-content { padding-top: 3px; min-width: 0; }
#xpro-theme-builder-footer .mx-flist .xpro-infolist-title { display: block; }

/* ---- Wordmark: MAGNETRIX over LOGISTICS ----
   The gap was line-height, not a margin: an h6 inherits the theme body
   line-height (about 1.6), so each line reserved roughly half a line of
   air above and below its glyphs. Setting line-height to 1 on the two
   headings closes it without moving anything else.
   Scoped to .mx-wordmark so the footer column headings are untouched. */
.mx-wordmark { gap: 0 !important; }
.mx-wordmark .elementor-widget-xpro-heading { margin: 0 !important; padding: 0 !important; }
.mx-wordmark .xpro-heading-wrapper { margin: 0 !important; padding: 0 !important; }
.mx-wordmark .xpro-heading-title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: block;
}
/* A small deliberate gap under MAGNETRIX. Space Mono carries more internal
   leading than Space Grotesk, so the optical gap reads slightly larger than
   the number suggests -- 3px here sits about right against a 19px cap line.
   Tune this single value if you want it tighter or looser. */
.mx-wordmark .elementor-widget-xpro-heading:last-of-type .xpro-heading-title {
  margin-top: 3px !important;
}
/* The footer wordmark is a couple of px larger, so it takes a touch more. */
#xpro-theme-builder-footer .mx-wordmark .elementor-widget-xpro-heading:last-of-type .xpro-heading-title {
  margin-top: 4px !important;
}

/* =========================================================
   19. CLOSING CTA BAND
   A rounded card inset on the white page rather than a
   full-bleed dark strip. The section is boxed at 820px, so
   the copy stays narrow while the card itself runs wide --
   the card is the section background, not an inner wrapper.
   ========================================================= */
.mx-ctaband {
  background: linear-gradient(135deg, #0E565D 0%, #073034 42%, #04100F 100%) !important;
  border-radius: 28px !important;
  /* Elementor writes .elementor-NNN .elementor-element.elementor-element-XXX
     for this container, which is (0,3,0) and beats a single class -- so the
     width rules need !important or the card renders edge to edge. */
  width: calc(100% - 80px) !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
  margin-block: 0 66px !important;
  overflow: hidden;
  position: relative;
}

/* The mx-glow radial would fight the diagonal gradient; replace it with a
   single soft highlight in the top-left corner where the teal begins. */
.mx-ctaband::before {
  background: radial-gradient(760px 420px at 8% 0%, rgba(32,230,242,.16), transparent 62%) !important;
}

/* Hairline catches the light along the top edge. */
.mx-ctaband::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.07);
  pointer-events: none;
  z-index: 2;
}

/* Cyan is the signal colour, so the primary earns a glow here. */
.mx-ctaband .elementor-widget-button .elementor-button[style*="20E6F2"],
.mx-ctaband .elementor-button[style*="rgb(32, 230, 242)"] {
  box-shadow: 0 8px 30px rgba(32,230,242,.34) !important;
  transition: box-shadow .3s ease, background-color .3s ease, transform .3s ease;
}
.mx-ctaband .elementor-widget-button .elementor-button[style*="20E6F2"]:hover {
  box-shadow: 0 12px 40px rgba(32,230,242,.46) !important;
}

@media (max-width: 1024px) {
  .mx-ctaband { width: calc(100% - 40px) !important; margin-inline: auto !important; border-radius: 24px !important; }
  .mx-ctaband::after { border-radius: 24px; }
}
@media (max-width: 767px) {
  .mx-ctaband { width: calc(100% - 28px) !important; margin-inline: auto !important; margin-block: 0 40px !important; border-radius: 20px !important; }
  .mx-ctaband::after { border-radius: 20px; }
}

/* =========================================================
   20. NEWSLETTER
   Copy stacked, then one full-width field with the button on
   its right. A two-column split left the field too short to
   read a typed address in.
   ========================================================= */
.mx-newsletter {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 48px 52px !important;
  border-radius: 22px !important;
}
.mx-newsletter > .elementor-widget-shortcode { margin-top: 18px; width: 100%; }
.mx-newsletter .elementor-widget-container { width: 100%; }

.mx-newsletter .wpforms-container { margin: 0 !important; max-width: none !important; }
.mx-newsletter .wpforms-form {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
}
/* min-width:0 lets the field shrink inside a nowrap row instead of
   forcing the button off the edge. */
.mx-newsletter .wpforms-form .wpforms-field {
  flex: 1 1 auto; min-width: 0; padding: 0 !important; margin: 0 !important;
}
.mx-newsletter .wpforms-form .wpforms-submit-container {
  flex: 0 0 auto; padding: 0 !important; margin: 0 !important;
}
.mx-newsletter .wpforms-form .wpforms-field-label { display: none !important; }
.mx-newsletter .wpforms-form input[type="email"],
.mx-newsletter .wpforms-form input[type="text"] {
  width: 100%; height: 56px; line-height: normal;
  box-sizing: border-box; border-radius: 14px;
}
.mx-newsletter .wpforms-form button[type="submit"] {
  height: 56px; white-space: nowrap; padding-inline: 30px; border-radius: 999px;
}

@media (max-width: 700px) {
  .mx-newsletter { padding: 34px 24px !important; }
  .mx-newsletter .wpforms-form { flex-wrap: wrap; }
  .mx-newsletter .wpforms-form .wpforms-field,
  .mx-newsletter .wpforms-form .wpforms-submit-container { flex: 1 1 100%; }
  .mx-newsletter .wpforms-form button[type="submit"] { width: 100%; }
}

/* =========================================================
   21. MOBILE: MEDIA-FIRST STACKING (320-767px only)
   Every two-column media + copy row now reads image,
   heading, content, button on a phone. Desktop and tablet
   are untouched -- nothing here exists above 767px.

   Rows carry .mx-mediarow and the media column carries
   .mx-mediarow__media, applied by an audit of the Elementor
   tree rather than by a broad :has() selector, which would
   also have caught the card grids.
   ========================================================= */
@media (max-width: 767px) {

  .mx-mediarow {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    row-gap: 26px !important;
    align-items: stretch !important;
  }
  .mx-mediarow > .e-con { width: 100% !important; flex-basis: auto !important; }

  /* The one line that does the reordering. */
  .mx-mediarow > .mx-mediarow__media { order: -1; }

  /* Image centred, full width, ratio intact. */
  .mx-mediarow__media img {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: cover;
  }

  /* Consistent rhythm inside the copy column: heading, content, button. */
  .mx-mediarow > .e-con:not(.mx-mediarow__media) { row-gap: 14px !important; }
  .mx-mediarow .elementor-widget-button { margin-top: 6px; }

  /* ---- Hero ----
     The hero media column also holds the live-tracking card, so hoisting the
     whole column would drag that above the headline too. display:contents
     dissolves the column box so its children become siblings of the copy,
     letting the image lead and the tracking card stay last.
     Order on a phone: image, H1, lead, buttons, tracking card. */
  .mx-glow > .e-con-inner > .e-con:first-child { flex-direction: column !important; row-gap: 22px !important; }
  .mx-glow .mx-heromedia { display: contents; }
  .mx-glow .mx-herovideo,
  .mx-glow .mx-heroposter { order: -1; }
  .mx-glow .mx-hcard { order: 9; }

  /* ---- No horizontal scroll ---- */
  html, body { overflow-x: hidden; }
  .e-con, .e-con-inner { max-width: 100% !important; }
  img, video, iframe, table { max-width: 100%; }
  /* Long unbroken strings (tracking refs, emails) must not push the page wide. */
  .mx-mediarow p, .mx-mediarow h1, .mx-mediarow h2, .mx-mediarow h3 { overflow-wrap: anywhere; }
}

/* =========================================================
   22. CLIENT LOGO MARQUEE
   A continuous strip rather than a paged slider: with six to
   twelve logos there is nothing to page through, and arrows
   on a logo bar look like a control the visitor should use.

   brand.js duplicates the track once, so the animation can
   translate exactly -50% and loop with no visible seam. The
   logos stay ordinary Elementor widgets: add or remove one in
   the editor and the strip adapts on its own.
   ========================================================= */
.mx-logos { overflow: hidden; }

/* Only animate once the clone exists, otherwise the strip would scroll
   into empty space on first paint. */

.mx-logos.is-marquee > .e-con-inner { overflow: hidden; }
.mx-logos.is-marquee .mx-logos__track {
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: mx-marquee var(--mx-marquee, 34s) linear infinite;
}
.mx-logos.is-marquee:hover .mx-logos__track,
.mx-logos.is-marquee:focus-within .mx-logos__track { animation-play-state: paused; }

@keyframes mx-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.mx-logos__item {
  flex: 0 0 auto !important;
  width: auto !important;
  align-items: center;
  justify-content: center;
}
.mx-logos__item .elementor-widget-heading .elementor-heading-title,
.mx-logos__item .elementor-widget-image img {
  white-space: nowrap;
  transition: opacity .25s ease, filter .25s ease;
}
/* Real logos sit back until hovered; placeholder text is unaffected. */
.mx-logos__item .elementor-widget-image img { opacity: .62; filter: grayscale(1); max-height: 34px; width: auto; }
.mx-logos__item:hover .elementor-widget-image img { opacity: 1; filter: none; }

/* Fade the strip into the page at both edges so items do not pop. */
.mx-logos.is-marquee > .e-con-inner {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

@media (max-width: 767px) {
  .mx-logos.is-marquee .mx-logos__track { --mx-marquee: 24s; }
  .mx-logos.is-marquee .mx-logos__item { margin-right: 26px; }
}

/* Anyone asking for less motion gets a static, scrollable strip. */
@media (prefers-reduced-motion: reduce) {
  .mx-logos.is-marquee .mx-logos__track { animation: none; }
  .mx-logos.is-marquee > .e-con-inner { overflow-x: auto; }
}

/* ---- Logo marquee: sizing, hover, tooltip ----
   Item widths are fixed per breakpoint so the number of logos on screen is
   predictable (about 7 desktop, 5 tablet, 2 to 3 phone) regardless of how
   wide any individual logo file is. */
.mx-logos__item {
  width: 150px !important;
  transition: transform .34s cubic-bezier(.22,.61,.36,1), filter .34s ease;
}
@media (max-width: 1024px) { .mx-logos__item { width: 140px !important; } }
@media (max-width: 767px)  { .mx-logos__item { width: 118px !important; } }

/* The item is the hover target; the whole track pauses via .mx-logos:hover. */
.mx-logos__item { position: relative; }
.mx-logos.is-marquee .mx-logos__item:hover { transform: scale(1.1); z-index: 2; }

/* Glow uses the brand accent rather than a neutral drop shadow. */
.mx-logos__item:hover .elementor-widget-image img {
  opacity: 1;
  filter: brightness(1.04);
  box-shadow: 0 6px 22px rgba(32,230,242,.30);
  border-radius: 6px;
}
.mx-logos__item:hover .elementor-widget-heading .elementor-heading-title {
  color: var(--mx-teal-600, #00636D);
  text-shadow: 0 4px 18px rgba(32,230,242,.35);
}

/* Pointer only when the logo actually links somewhere. */
.mx-logos__item:has(a) { cursor: pointer; }
.mx-logos__item a { display: block; }

/* Client name on hover. Populated by brand.js from the image alt text, or
   the heading text for the current placeholders. */
.mx-logos__item[data-mx-name]::after {
  content: attr(data-mx-name);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translate(-50%, 4px);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--mx-ink, #04100F);
  color: #F7FCFC;
  font-family: var(--mx-font-mono, monospace);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 3;
}
.mx-logos__item[data-mx-name]:hover::after { opacity: 1; transform: translate(-50%, 0); }

/* The strip needs room for the tooltip to sit below it. */
.mx-logos.is-marquee > .e-con-inner { padding-bottom: 34px; }

@media (prefers-reduced-motion: reduce) {
  .mx-logos.is-marquee .mx-logos__item:hover { transform: none; }
}

/* ---- Seamless repeat geometry ----
   With flex `gap`, a track of 12 items has 11 gaps, so half its width is
   6 items + 5.5 gaps -- half a gap short of the distance from item 1 to
   its clone. Translating -50% therefore jumped by half a gap every cycle.
   Using margin-right instead makes each item exactly item+margin wide, so
   half the track is precisely one full set and -50% loops invisibly. */
.mx-logos.is-marquee .mx-logos__track { gap: 0 !important; }
.mx-logos.is-marquee .mx-logos__item { margin-right: 30px; }

/* ---- Logo marquee: horizontal at every width ----
   The row carried flex_direction_mobile:column, which stacked the logos
   vertically on phones. Fixed in the Elementor setting; these rules are
   the safety net in case the row is ever rebuilt in the editor. */
.mx-logos .mx-logos__track {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.mx-logos .mx-logos__item { flex-direction: column !important; }

@media (max-width: 767px) {
  /* Smaller cells and a shorter cycle keep the pace feeling the same on a
     narrow screen, where far less of the strip is visible at once. */
  .mx-logos.is-marquee .mx-logos__item { margin-right: 26px; }
  .mx-logos__item .elementor-heading-title { font-size: 12px !important; letter-spacing: .1em !important; }
  .mx-logos__item .elementor-widget-image img { max-height: 26px; }
  .mx-logos > .e-con-inner { padding-block: 22px !important; }

  /* Touch has no hover, so the tooltip would never resolve. */
  .mx-logos__item[data-mx-name]::after { display: none; }
}

@media (max-width: 400px) {
  .mx-logos__item { width: 104px !important; }
  .mx-logos.is-marquee .mx-logos__item { margin-right: 20px; }
}

/* Nothing here may create page-level horizontal scroll. */
.mx-logos, .mx-logos > .e-con-inner { max-width: 100%; overflow-x: hidden; }

/* =========================================================
   23. HOW IT WORKS -- icon rail + step cards

   Every hook is an explicit class: mx-flow__icon, __num,
   __title, __text, __more. Positional selectors were wrong
   here -- :nth-of-type counts every sibling div, not just the
   headings, so the accent rule landed under the number.
   ========================================================= */
.mx-flow { align-items: stretch !important; }

.mx-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 88px 0 0 0 !important;
}

/* Connector drawn per step, so it cannot desync when the row wraps. */
.mx-flow__step::before {
  content: "";
  position: absolute;
  top: 33px;
  left: calc(50% + 38px);
  right: -14px;
  height: 1px;
  background: #C8E1E1;
  z-index: 0;
}
.mx-flow__step:last-child::before { display: none; }
/* Final leg dashed: that stage is the one still ahead. */
.mx-flow__step:nth-last-child(2)::before {
  background: none;
  border-top: 1px dashed #C8E1E1;
}

/* The card sits behind the copy so the icon node can overlap its edge. */
.mx-flow__step::after {
  content: "";
  position: absolute;
  inset: 88px 0 0 0;
  background: #fff;
  border: 1px solid var(--mx-border, #DCEAEA);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(4,16,15,.04), 0 6px 18px rgba(4,16,15,.05);
  transition: border-color .3s ease, box-shadow .3s ease;
  z-index: 0;
}
.mx-flow__step:hover::after {
  border-color: #BCDCDC;
  box-shadow: 0 3px 8px rgba(4,16,15,.05), 0 18px 38px rgba(4,16,15,.09);
}

/* Icon node */
.mx-flow__icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0 !important;
}
.mx-flow__icon .elementor-icon-wrapper { line-height: 0; }
.mx-flow__icon .elementor-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #DCEAEA;
  box-shadow: 0 2px 6px rgba(4,16,15,.05), 0 10px 22px rgba(4,16,15,.06);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.mx-flow__icon .elementor-icon svg { width: 23px; height: 23px; fill: currentColor; }
.mx-flow__step:hover .mx-flow__icon .elementor-icon {
  transform: translateY(-4px);
  border-color: rgba(32,230,242,.55);
  box-shadow: 0 10px 28px rgba(32,230,242,.26);
}
/* Card contents. Padding lives on the widgets, not the pseudo-element, so
   the absolutely positioned icon is unaffected by it. */
.mx-flow__step > .elementor-widget { position: relative; z-index: 1; }
.mx-flow__num   { padding: 24px 24px 0 !important; }
.mx-flow__title { padding: 0 24px !important; }
.mx-flow__text  { padding: 0 24px !important; }
.mx-flow__more  { padding: 0 24px 24px !important; margin-top: auto; }

.mx-flow__num .elementor-heading-title { margin: 0 !important; line-height: 1 !important; }
.mx-flow__title .elementor-heading-title { margin: 10px 0 0 !important; }

/* Accent rule under the title, drawn on the title widget itself so it
   travels with the heading if the copy wraps to two lines. */
.mx-flow__title::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--mx-accent, #20E6F2);
  margin: 13px 0 15px;
  transition: width .3s cubic-bezier(.22,.61,.36,1);
}
.mx-flow__step:hover .mx-flow__title::after { width: 46px; }

.mx-flow__text p { margin: 0 !important; }

/* Learn More reads as a link, not a button. */
.mx-flow__more .elementor-button {
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  justify-content: flex-start;
  min-height: 0 !important;
  margin-top: 16px;
}
.mx-flow__more .elementor-button:hover { transform: none !important; box-shadow: none !important; }
.mx-flow__more .elementor-button-icon svg { width: 12px; height: 12px; }
.mx-flow__more .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ---- Tablet: three across, two rows ---- */
@media (max-width: 1024px) and (min-width: 768px) {
  .mx-flow__step:nth-child(3)::before { display: none; }
  .mx-flow__step:nth-child(3n)::before { display: none; }
}

/* ---- Mobile: horizontal swipe track ----
   scroll-snap gives native momentum and swipe with no JavaScript. */
@media (max-width: 767px) {
  .mx-flow {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px !important;
    margin-inline: -18px;
    padding: 0 18px 6px !important;
  }
  .mx-flow::-webkit-scrollbar { display: none; }

  .mx-flow__step {
    flex: 0 0 76% !important;
    max-width: 76% !important;
    scroll-snap-align: start;
    padding-top: 76px !important;
  }
  .mx-flow__step::before { display: none !important; }
  .mx-flow__step::after { inset: 76px 0 0 0; }
  /* Left-aligned node: a centred circle over a wide card looks unmoored. */
  .mx-flow__icon { left: 24px; transform: none; }
  .mx-flow__icon .elementor-icon { width: 58px; height: 58px; }
  .mx-flow__num   { padding: 22px 20px 0 !important; }
  .mx-flow__title, .mx-flow__text { padding: 0 20px !important; }
  .mx-flow__more  { padding: 0 20px 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-flow__step:hover .mx-flow__icon .elementor-icon { transform: none; }
  .mx-flow__step:hover .mx-flow__title::after { width: 30px; }
}

/* ---- Line icons ----
   Stroke SVGs drawn with currentColor, so weight and hue are controlled
   here rather than baked into six separate files. */
.mx-flow__icon .elementor-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), stroke-width .3s ease;
}
.mx-flow__step:hover .mx-flow__icon .elementor-icon svg { transform: scale(1.08); stroke-width: 1.7; }

/* ---- Scroll reveal, scoped to this section only ----
   Applied by brand.js. Because the class is added by script, a visitor
   without JavaScript never sees opacity:0 -- the cards are simply there. */
.mx-flow__step.mx-rise {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), translate .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
}
.mx-flow__step.mx-rise.mx-in { opacity: 1; translate: 0 0; }

/* The connector draws itself once the row is in view. */
.mx-flow__step::before { transform-origin: left center; }
.mx-flow.mx-rise .mx-flow__step::before { transform: scaleX(0); }
.mx-flow.mx-rise.mx-in .mx-flow__step::before {
  transform: scaleX(1);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--d, 0ms) + 180ms);
}

/* ---- CTA banner ---- */
.mx-flow-cta {
  margin-top: 44px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0E565D 0%, #073034 46%, #04100F 100%);
  position: relative;
  overflow: hidden;
}
.mx-flow-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  pointer-events: none;
}
.mx-flow-cta__copy { max-width: 62ch; }
.mx-flow-cta__head .elementor-heading-title { margin: 0 !important; }
.mx-flow-cta__sub p { margin: 0 !important; }
.mx-flow-cta__action { flex: 0 0 auto; }
.mx-flow-cta__btn .elementor-button {
  box-shadow: 0 8px 26px rgba(32,230,242,.30);
  white-space: nowrap;
}
.mx-flow-cta__btn .elementor-button:hover { box-shadow: 0 12px 34px rgba(32,230,242,.42); }
.mx-flow-cta__btn .elementor-button-icon svg { width: 13px; height: 13px; }

@media (max-width: 767px) {
  .mx-flow-cta { margin-top: 30px; border-radius: 16px; text-align: left; }
  .mx-flow-cta__action { width: 100%; justify-content: flex-start !important; }
  .mx-flow-cta__btn .elementor-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-flow__step.mx-rise { opacity: 1 !important; translate: 0 0 !important; }
  .mx-flow.mx-rise .mx-flow__step::before { transform: none !important; }
}

/* =========================================================
   23b. HOW IT WORKS -- corrections

   Three faults, all specificity:

   1. .mx-flow__step > .elementor-widget { position: relative }
      is two classes and came later, so it beat .mx-flow__icon
      and dropped the icon out of absolute positioning. Every-
      thing shifted down and the connector drew above the nodes.

   2. Elementor writes .elementor-171 .elementor-element.
      elementor-element-XXX ... .elementor-icon svg { fill: ... }
      from the widget colour control. That outranks any class
      selector, so the stroke icons rendered as solid shapes.

   3. A global rule was uppercasing and letter-spacing the
      button label, breaking Learn More onto two lines.
   ========================================================= */

/* 1. Icon node back to absolute, stated more specifically than the
      generic widget rule it lost to. */
.mx-flow .mx-flow__step > .elementor-widget.mx-flow__icon {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 3;
}

/* 2. Stroke, not fill. Colour moves to the wrapper so currentColor works. */
.mx-flow .mx-flow__icon .elementor-icon { color: #00636D !important; }
.mx-flow .mx-flow__icon .elementor-icon svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  width: 27px !important;
  height: 27px !important;
}
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon { color: #04100F !important; }

/* 3. Sentence case, on one line. */
.mx-flow__more .elementor-button,
.mx-flow__more .elementor-button-text {
  text-transform: none !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  font-size: 14px !important;
}

/* The card needs to read as a card against the #F7FCFC band. */
.mx-flow .mx-flow__step::after {
  background: #FFFFFF !important;
  border: 1px solid #D7E9E9 !important;
  box-shadow: 0 1px 2px rgba(4,16,15,.04), 0 8px 24px rgba(4,16,15,.06) !important;
}
.mx-flow .mx-flow__step:hover::after {
  border-color: rgba(32,230,242,.55) !important;
  box-shadow: 0 4px 10px rgba(4,16,15,.05), 0 20px 40px rgba(4,16,15,.10) !important;
}

/* =========================================================
   23c. HOW IT WORKS -- matched to the reference
   Solid glyphs in white discs sitting above the cards, a
   hairline running through the disc centres, and the final
   leg dashed. Values are read off the reference rather than
   invented: 64px disc, 16px gap, 12px card radius.
   ========================================================= */

/* Disc + gap = 80px of head room above each card. */
.mx-flow .mx-flow__step { padding-top: 80px !important; }
.mx-flow .mx-flow__step::after { inset: 80px 0 0 0 !important; }

/* Hairline through the disc centres (32px = half of 64). */
.mx-flow .mx-flow__step::before {
  top: 32px !important;
  left: calc(50% + 36px) !important;
  right: -16px !important;
  background: #BFD9E4 !important;
  height: 1px !important;
}
.mx-flow .mx-flow__step:nth-last-child(2)::before {
  background: none !important;
  border-top: 1px dashed #BFD9E4 !important;
}

/* The disc: white, thin cool ring, soft halo. */
.mx-flow .mx-flow__icon .elementor-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1px solid #CFE4EC !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,.9), 0 6px 18px rgba(16,74,92,.10) !important;
  color: #14566B !important;
}
/* Solid glyphs again: fill, not stroke. */
.mx-flow .mx-flow__icon .elementor-icon svg {
  width: 24px !important;
  height: 24px !important;
  fill: currentColor !important;
  stroke: none !important;
}
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon {
  border-color: rgba(32,230,242,.6) !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,.9), 0 10px 26px rgba(32,230,242,.26) !important;
}

/* Card: light, quiet, 12px radius. */
.mx-flow .mx-flow__step::after {
  background: #FFFFFF !important;
  border: 1px solid #E7F0F2 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16,74,92,.04), 0 6px 20px rgba(16,74,92,.05) !important;
}
.mx-flow .mx-flow__step:hover::after {
  border-color: rgba(32,230,242,.45) !important;
  box-shadow: 0 3px 8px rgba(16,74,92,.05), 0 16px 34px rgba(16,74,92,.09) !important;
}

/* Card contents, spaced as in the reference. */
.mx-flow .mx-flow__num   { padding: 22px 22px 0 !important; }
.mx-flow .mx-flow__title { padding: 0 22px !important; }
.mx-flow .mx-flow__text  { padding: 0 22px !important; }
.mx-flow .mx-flow__more  { padding: 0 22px 22px !important; }
.mx-flow .mx-flow__title .elementor-heading-title { margin: 6px 0 0 !important; }
.mx-flow .mx-flow__title::after { width: 26px; height: 3px; margin: 11px 0 13px; }
.mx-flow .mx-flow__more .elementor-button { margin-top: 14px; }

/* =========================================================
   23d. HOW IT WORKS -- premium pass
   The stale .mx-step class was removed from the markup, so
   the legacy rail and node in brand.css no longer apply --
   that was the stray vertical line on the far left.
   ========================================================= */

/* Belt and braces in case the class returns via the editor. */
.mx-flow .mx-flow__step.mx-step::before,
.mx-flow .mx-flow__step.mx-step::after { border: 0; }

/* ---- 1. Connector: thicker, gradient, brand accent ---- */
.mx-flow .mx-flow__step::before {
  top: 37px !important;
  left: calc(50% + 42px) !important;
  right: -18px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(32,230,242,.55), rgba(0,99,109,.28)) !important;
}
/* Final leg reads as pending: same gradient, dotted mask. */
.mx-flow .mx-flow__step:nth-last-child(2)::before {
  background: none !important;
  height: 0 !important;
  border-top: 2px dotted rgba(0,99,109,.34) !important;
}

/* ---- 2. Icon disc: 74px, glass, soft shadow ---- */
.mx-flow .mx-flow__step { padding-top: 96px !important; }
.mx-flow .mx-flow__step::after { inset: 96px 0 0 0 !important; }
.mx-flow .mx-flow__icon .elementor-icon {
  width: 74px !important;
  height: 74px !important;
  background: linear-gradient(150deg, #FFFFFF 0%, #F2FAFB 100%) !important;
  border: 1px solid rgba(0,99,109,.14) !important;
  box-shadow:
    0 0 0 7px rgba(255,255,255,.92),
    0 2px 6px rgba(16,74,92,.06),
    0 14px 30px rgba(16,74,92,.10) !important;
  color: #0E4F60 !important;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease, color .35s ease !important;
}
.mx-flow .mx-flow__icon .elementor-icon svg { width: 27px !important; height: 27px !important; fill: currentColor !important; }

/* ---- 8. The first node leads; the rest stay quiet ---- */
.mx-flow .mx-flow__step.is-active .mx-flow__icon .elementor-icon {
  background: linear-gradient(150deg, #20E6F2 0%, #00A8BA 100%) !important;
  border-color: rgba(32,230,242,.55) !important;
  color: #04100F !important;
  box-shadow:
    0 0 0 7px rgba(255,255,255,.92),
    0 10px 28px rgba(32,230,242,.34) !important;
}

/* ---- 6. Hover: lift, scale, glow ---- */
.mx-flow .mx-flow__step { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.mx-flow .mx-flow__step:hover { transform: translateY(-6px); }
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon {
  transform: scale(1.1);
  border-color: rgba(32,230,242,.65) !important;
  box-shadow:
    0 0 0 7px rgba(255,255,255,.92),
    0 14px 34px rgba(32,230,242,.32) !important;
}
.mx-flow .mx-flow__more .elementor-button:hover .elementor-button-icon { transform: translateX(5px); }
/* ---- 5. Typography and 4. breathing room ---- */
.mx-flow { margin-top: 12px; }
.mx-flow .mx-flow__num .elementor-heading-title {
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  color: #7FA3A8 !important;
}
.mx-flow .mx-flow__title .elementor-heading-title {
  font-size: 21px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.22 !important;
  margin: 8px 0 0 !important;
}
.mx-flow .mx-flow__text, .mx-flow .mx-flow__text p {
  font-size: 14.5px !important;
  line-height: 1.72 !important;
  color: #6C8A88 !important;
}
.mx-flow .mx-flow__num   { padding: 26px 24px 0 !important; }
.mx-flow .mx-flow__title { padding: 0 24px !important; }
.mx-flow .mx-flow__text  { padding: 0 24px !important; }
.mx-flow .mx-flow__more  { padding: 0 24px 26px !important; }
.mx-flow .mx-flow__title::after { width: 28px; height: 3px; margin: 13px 0 15px; }
/* Space between the timeline and whatever follows. */
.mx-flow-cta { margin-top: 56px !important; }

/* ---- 7. Staggered reveal: line draws, icons scale in, copy follows ---- */
.mx-flow.mx-rise .mx-flow__icon .elementor-icon { opacity: 0; transform: scale(.86); }
.mx-flow.mx-rise.mx-in .mx-flow__step .mx-flow__icon .elementor-icon {
  opacity: 1;
  transform: scale(1);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  transition-delay: var(--d, 0ms);
}
/* Copy trails its own icon by 120ms. */
.mx-flow__step.mx-rise { transition-delay: calc(var(--d, 0ms) + 120ms) !important; }

/* ---- 10. Tablet: three per row ---- */
@media (max-width: 1024px) and (min-width: 768px) {
  .mx-flow .mx-flow__step:nth-child(3n)::before { display: none !important; }
  .mx-flow .mx-flow__step:nth-child(n+4) { margin-top: 34px; }
}

/* ---- 10. Mobile: one per view, swipeable ---- */
@media (max-width: 767px) {
  .mx-flow .mx-flow__step { padding-top: 90px !important; }
  .mx-flow .mx-flow__step::after { inset: 90px 0 0 0 !important; }
  .mx-flow .mx-flow__icon .elementor-icon { width: 66px !important; height: 66px !important; }
  .mx-flow .mx-flow__icon .elementor-icon svg { width: 25px !important; height: 25px !important; }
  .mx-flow .mx-flow__step:hover { transform: none; }
  .mx-flow-cta { margin-top: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-flow.mx-rise .mx-flow__icon .elementor-icon { opacity: 1; transform: none; }
  .mx-flow .mx-flow__step:hover { transform: none; }
}

/* =========================================================
   23e. HOW IT WORKS -- smaller node, quieter finish
   74px read as heavy against a 21px title. 60px sits closer
   to the type scale and lets the card lead. Geometry is kept
   in step: disc 60 + 22 gap = 82px of head room, and the
   connector at 30px is the disc centre.
   ========================================================= */
.mx-flow .mx-flow__step { padding-top: 82px !important; }
.mx-flow .mx-flow__step::after { inset: 82px 0 0 0 !important; }
.mx-flow .mx-flow__step::before { top: 30px !important; left: calc(50% + 36px) !important; right: -18px !important; }

.mx-flow .mx-flow__icon .elementor-icon {
  width: 60px !important;
  height: 60px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0,99,109,.13) !important;
  /* One tight halo to mask the connector, then a single soft shadow.
     Three stacked shadows at 74px looked heavy rather than premium. */
  box-shadow:
    0 0 0 5px #FFFFFF,
    0 6px 16px rgba(16,74,92,.09) !important;
  color: #0E4F60 !important;
}
.mx-flow .mx-flow__icon .elementor-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

/* Active node: cyan ring and tint rather than a solid fill, so it leads
   without turning into a button. */
.mx-flow .mx-flow__step.is-active .mx-flow__icon .elementor-icon {
  background: #F2FDFE !important;
  border-color: rgba(32,230,242,.75) !important;
  color: #00636D !important;
  box-shadow:
    0 0 0 5px #FFFFFF,
    0 6px 18px rgba(32,230,242,.28) !important;
}

.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon {
  transform: scale(1.08);
  border-color: rgba(32,230,242,.7) !important;
  color: #00636D !important;
  box-shadow:
    0 0 0 5px #FFFFFF,
    0 10px 24px rgba(32,230,242,.26) !important;
}

/* Card lifts less; the node now carries the interaction. */
.mx-flow .mx-flow__step:hover { transform: translateY(-4px); }

@media (max-width: 767px) {
  .mx-flow .mx-flow__step { padding-top: 74px !important; }
  .mx-flow .mx-flow__step::after { inset: 74px 0 0 0 !important; }
  .mx-flow .mx-flow__icon .elementor-icon { width: 54px !important; height: 54px !important; }
  .mx-flow .mx-flow__icon .elementor-icon svg { width: 20px !important; height: 20px !important; }
}

/* =========================================================
   23f. HOW IT WORKS -- mobile track and pagination
   Dots are injected by brand.js and hidden above 767px, so
   desktop and tablet are untouched.
   ========================================================= */
.mx-flow__dots { display: none; }

@media (max-width: 767px) {
  .mx-flow {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px !important;
    margin-inline: -18px;
    padding: 4px 18px 8px !important;
  }
  .mx-flow::-webkit-scrollbar { display: none; }

  /* 84% leaves a deliberate sliver of the next card, which is what tells
     a reader the row scrolls without needing an affordance drawn on it. */
  .mx-flow .mx-flow__step {
    flex: 0 0 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start;
  }
  .mx-flow .mx-flow__step::before { display: none !important; }

  /* Node left-aligned on mobile: a centred disc over a wide card floats. */
  .mx-flow .mx-flow__step > .elementor-widget.mx-flow__icon {
    left: 24px !important;
    transform: none !important;
  }

  .mx-flow__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
  }
  .mx-flow__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #CFE0E0;
    cursor: pointer;
    transition: width .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
  }
  .mx-flow__dot.is-on {
    width: 24px;
    border-radius: 999px;
    background: linear-gradient(90deg, #20E6F2, #00636D);
  }
  .mx-flow__dot:focus-visible { outline: 2px solid #20E6F2; outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-flow { scroll-behavior: auto; }
  .mx-flow__dot { transition: none; }
}

/* =========================================================
   24. FOOTER NEWSLETTER (inside the Contact column)
   Sits beneath the contact infolist, separated by a hairline:
   kicker, one line of copy, a joined field + Subscribe pill,
   and a padlock privacy note. Spacing is controlled here, so
   Elementor's default 20px widget margin is zeroed first.
   ========================================================= */

/* kill the stacked default margins — rhythm is set explicitly below */
#xpro-theme-builder-footer .mx-fnews__rule,
#xpro-theme-builder-footer .mx-fnews__kicker,
#xpro-theme-builder-footer .mx-fnews__sub,
#xpro-theme-builder-footer .mx-fnews__form,
#xpro-theme-builder-footer .mx-fnews__privacy { margin-bottom: 0 !important; }

#xpro-theme-builder-footer .mx-fnews__rule {
  width: 100%;
  margin-top: 26px !important;
  padding: 0 !important;
}
#xpro-theme-builder-footer .mx-fnews__rule .elementor-divider {
  padding-block: 0 !important;
}
#xpro-theme-builder-footer .mx-fnews__rule .elementor-divider-separator {
  border-top-color: rgba(255,255,255,.10) !important;
}

#xpro-theme-builder-footer .mx-fnews__kicker { margin-top: 22px !important; }
#xpro-theme-builder-footer .mx-fnews__kicker .elementor-heading-title { line-height: 1.2; }

#xpro-theme-builder-footer .mx-fnews__sub {
  margin-top: 10px !important;
  max-width: 300px;
}
#xpro-theme-builder-footer .mx-fnews__sub p { margin: 0; }

/* ---- the joined field + button group ---- */
#xpro-theme-builder-footer .mx-fnews__form {
  width: 100%;
  max-width: 330px;
  margin-top: 16px !important;
}
#xpro-theme-builder-footer .mx-fnews__form .wpforms-container { margin: 0 !important; }
#xpro-theme-builder-footer .mx-fnews__form .wpforms-head-container { display: none; }

#xpro-theme-builder-footer .mx-fnews__form .wpforms-form {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .2s ease, background .2s ease;
}
#xpro-theme-builder-footer .mx-fnews__form .wpforms-form:focus-within {
  border-color: rgba(32,230,242,.5);
  background: rgba(32,230,242,.05);
}

/* dissolve WPForms' wrappers so field and button become flex siblings */
#xpro-theme-builder-footer .mx-fnews__form .wpforms-field-container { display: contents; }
#xpro-theme-builder-footer .mx-fnews__form .wpforms-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}
#xpro-theme-builder-footer .mx-fnews__form .wpforms-field label,
#xpro-theme-builder-footer .mx-fnews__form .wpforms-field-description,
#xpro-theme-builder-footer .mx-fnews__form .wpforms-required-label { display: none !important; }

#xpro-theme-builder-footer .mx-fnews__form input[type="email"],
#xpro-theme-builder-footer .mx-fnews__form input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 40px;
  margin: 0 !important;
  padding: 0 4px 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0;
  color: #F7FCFC !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 14px;
  line-height: normal;
}
#xpro-theme-builder-footer .mx-fnews__form input::placeholder { color: #6E908E; opacity: 1; }

#xpro-theme-builder-footer .mx-fnews__form .wpforms-submit-container {
  flex: 0 0 auto;
  padding: 0 !important;
  margin: 0 !important;
}
#xpro-theme-builder-footer .mx-fnews__form button[type="submit"] {
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #20E6F2;
  color: #04100F !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease;
}
#xpro-theme-builder-footer .mx-fnews__form button[type="submit"]:hover { background: #58F0F9; }
#xpro-theme-builder-footer .mx-fnews__form .wpforms-submit-spinner { display: none !important; }

/* ---- padlock privacy note ---- */
#xpro-theme-builder-footer .mx-fnews__privacy { margin-top: 14px !important; }
#xpro-theme-builder-footer .mx-fnews__privacy p {
  margin: 0;
  position: relative;
  padding-left: 19px;
  max-width: 290px;
}
#xpro-theme-builder-footer .mx-fnews__privacy p:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3.5px;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236E908E%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ---- validation + success, kept inside the column ---- */
#xpro-theme-builder-footer .mx-fnews__form .wpforms-error {
  font-size: 12px !important;
  color: #FF9B8A !important;
  margin: 8px 0 0 !important;
}
#xpro-theme-builder-footer .mx-fnews__form .wpforms-confirmation-container-full {
  background: rgba(32,230,242,.08) !important;
  border: 1px solid rgba(32,230,242,.28) !important;
  color: #C9DEDC !important;
  border-radius: 12px;
  padding: 12px 14px !important;
  font-size: 13.5px;
}

/* ---- stacked footer ---- */
@media (max-width: 900px) {
  #xpro-theme-builder-footer .mx-fnews__rule { margin-top: 22px !important; }
  #xpro-theme-builder-footer .mx-fnews__sub,
  #xpro-theme-builder-footer .mx-fnews__privacy p { max-width: 340px; }
  #xpro-theme-builder-footer .mx-fnews__form { max-width: 340px; }
}
@media (max-width: 400px) {
  #xpro-theme-builder-footer .mx-fnews__form button[type="submit"] { padding: 0 17px; }
  #xpro-theme-builder-footer .mx-fnews__form input[type="email"] { padding-left: 14px !important; }
}

/* =========================================================
   25. PULL QUOTE
   Elementor's Blockquote widget is a Pro promotion stub and
   renders nothing, so quotes are text editors carrying
   .mx-pullquote and the rule lives here.
   ========================================================= */

.mx-pullquote {
  border-left: 3px solid #20E6F2;
  padding-left: 18px;
  margin-block: 4px 6px;
}
.mx-pullquote p { margin: 0; }
.mx-dark .mx-pullquote,
.mx-ctaband .mx-pullquote { border-left-color: #20E6F2; }
@media (max-width: 767px) {
  .mx-pullquote { padding-left: 14px; }
}


/* =========================================================
   26. HOW IT WORKS -- left-aligned node
   The disc moves from the centre of the card to its left
   edge, matching the mobile track. Geometry follows it:
   the disc spans 24-84px, so the rail now starts at 90px
   instead of calc(50% + 36px). Vertical values are
   unchanged -- disc at top:0, rail through its centre at 30px.
   ========================================================= */

.mx-flow .mx-flow__step > .elementor-widget.mx-flow__icon {
  left: 24px !important;
  transform: none !important;
}

/* Rail leaves the right edge of the disc, not the card centre. */
.mx-flow .mx-flow__step::before {
  left: 90px !important;
  right: -18px !important;
  top: 30px !important;
}

/* Hover no longer has to preserve a centring translate. */
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon { transform: scale(1.08); }

@media (max-width: 1024px) and (min-width: 768px) {
  .mx-flow .mx-flow__step > .elementor-widget.mx-flow__icon { left: 24px !important; }
  .mx-flow .mx-flow__step::before { left: 90px !important; }
}

/* Mobile disc is 54px, so its rail starts 6px earlier. */
@media (max-width: 767px) {
  .mx-flow .mx-flow__step > .elementor-widget.mx-flow__icon { left: 24px !important; }
  .mx-flow .mx-flow__step::before { left: 84px !important; }
}


/* =========================================================
   27. HOW IT WORKS -- card padding independent of the CTA
   The card's bottom padding used to live on .mx-flow__more.
   Brands and Agencies have no Learn More link, so their copy
   ran into the bottom edge. Padding now hangs off whichever
   widget ends the card, and the copy block stretches so a
   short step does not leave a hollow card beneath it.
   ========================================================= */

.mx-flow .mx-flow__step > .elementor-widget:last-child {
  padding-bottom: 26px !important;
}

/* Text is the last widget when there is no CTA: keep its side
   padding and let it absorb the leftover height. */
.mx-flow .mx-flow__step > .mx-flow__text:last-child {
  padding: 0 24px 26px !important;
  flex: 1 1 auto;
}

/* Slightly firmer edge: #E7F0F2 on a #F7FCFC band read as no
   border at all once the shadow was softened. */
.mx-flow .mx-flow__step::after {
  border-color: #DDEAEC !important;
  box-shadow: 0 1px 2px rgba(16,74,92,.05), 0 8px 24px rgba(16,74,92,.07) !important;
}

@media (max-width: 767px) {
  .mx-flow .mx-flow__step > .elementor-widget:last-child { padding-bottom: 22px !important; }
  .mx-flow .mx-flow__step > .mx-flow__text:last-child { padding: 0 22px 22px !important; }
}


/* =========================================================
   28. HOW IT WORKS -- the truck departs
   The delivery step drives out of frame and a fresh run
   enters from the left. The disc clips its own contents, so
   the glyph genuinely leaves rather than fading in place.
   Hooked to the Font Awesome class Elementor prints on the
   inline SVG, so no markup change and no extra request.
   Long rest, short run: 7s cycle with ~1.2s of movement.
   ========================================================= */

.mx-flow .mx-flow__icon .elementor-icon:has(svg.e-fas-truck) { overflow: hidden; }

@keyframes mx-truck-depart {
  0%, 62%   { transform: translateX(0);     opacity: 1; }
  73%       { transform: translateX(30px);  opacity: 0; }
  73.5%     { transform: translateX(-30px); opacity: 0; }
  85%, 100% { transform: translateX(0);     opacity: 1; }
}

.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-truck {
  animation: mx-truck-depart 7s cubic-bezier(.45,.05,.35,1) infinite;
  will-change: transform, opacity;
}

/* Hover shortens the cycle so the step feels responsive rather
   than merely decorative. */
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-truck {
  animation-duration: 2.6s;
}

/* Section 23's hover rule scales the glyph; that would fight the
   keyframes, so it is cancelled for this one icon. */
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-truck {
  transform: none;
}

/* Fallback for engines without :has() -- clipping is the only
   part that needs it, and the opacity keyframes already hide
   the glyph at the edges. */
@supports not selector(:has(svg)) {
  .mx-flow .mx-flow__icon .elementor-icon { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-flow .mx-flow__icon .elementor-icon svg.e-fas-truck,
  .mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-truck {
    animation: none;
  }
}


/* =========================================================
   29. HOW IT WORKS -- icon micro-motion
   One gesture per glyph, chosen to match the work the step
   describes. Same shape as the truck: a long rest with the
   movement compressed into the last quarter of the cycle, so
   a row of six never reads as a row of six looping GIFs.
   Durations are deliberately mismatched -- equal ones would
   drift into sync and start beating together.
   Hooked to the Font Awesome class on the inline SVG, so
   there is no markup to maintain and nothing to break in
   the editor. Pure CSS: no JS, no libraries, no requests.
   ========================================================= */

/* Quote: the sheet lifts and is handed across. */
@keyframes mx-i-offer {
  0%, 68%   { transform: translateY(0) rotate(0); }
  77%       { transform: translateY(-4px) rotate(-4deg); }
  87%       { transform: translateY(0) rotate(1.5deg); }
  100%      { transform: translateY(0) rotate(0); }
}

/* Production: the line runs -- two short pulses from the base. */
@keyframes mx-i-run {
  0%, 60%   { transform: scaleY(1); }
  68%       { transform: scaleY(1.07); }
  75%       { transform: scaleY(1); }
  82%       { transform: scaleY(1.05); }
  90%, 100% { transform: scaleY(1); }
}

/* Inspection: the lens sweeps the surface. */
@keyframes mx-i-scan {
  0%, 58%   { transform: translate(0,0) rotate(0); }
  68%       { transform: translate(-4px,-2px) rotate(-9deg); }
  79%       { transform: translate(4px,1px) rotate(7deg); }
  90%, 100% { transform: translate(0,0) rotate(0); }
}

/* Freight: a slow rock on the swell. Continuous, because a
   hull that rests looks moored rather than sailing. */
@keyframes mx-i-sail {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-2px); }
}

/* Customs: the stamp comes down and lifts. */
@keyframes mx-i-stamp {
  0%, 66%   { transform: scale(1); }
  74%       { transform: scale(.85); }
  83%       { transform: scale(1.08); }
  92%, 100% { transform: scale(1); }
}

/* Checklist: ticked off with a short flick. */
@keyframes mx-i-tick {
  0%, 64%   { transform: rotate(0); }
  73%       { transform: rotate(-6deg); }
  82%       { transform: rotate(4deg); }
  91%, 100% { transform: rotate(0); }
}

/* Agreement: the clasp, then it settles. */
@keyframes mx-i-clasp {
  0%, 64%   { transform: translateX(0); }
  71%       { transform: translateX(-3px); }
  78%       { transform: translateX(2px); }
  85%       { transform: translateX(-1px); }
  92%, 100% { transform: translateX(0); }
}

/* Pilot: the sample is swirled, pivoting on the base. */
@keyframes mx-i-swirl {
  0%, 62%   { transform: rotate(0); }
  71%       { transform: rotate(-11deg); }
  81%       { transform: rotate(9deg); }
  91%, 100% { transform: rotate(0); }
}

/* Onboarding: the group draws together and steps up. */
@keyframes mx-i-gather {
  0%, 64%   { transform: scale(1) translateY(0); }
  73%       { transform: scale(1.09) translateY(-2px); }
  85%       { transform: scale(.98) translateY(0); }
  93%, 100% { transform: scale(1) translateY(0); }
}

/* ---- assignment ---- */
.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-file-invoice   { animation: mx-i-offer  6.2s cubic-bezier(.45,.05,.35,1) infinite; }
.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-industry       { animation: mx-i-run    5.8s ease-in-out infinite; transform-origin: 50% 100%; }
.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-search         { animation: mx-i-scan   6.6s cubic-bezier(.45,.05,.35,1) infinite; }
.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-ship           { animation: mx-i-sail   4.6s ease-in-out infinite; }
.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-clipboard-list { animation: mx-i-tick   7.1s cubic-bezier(.45,.05,.35,1) infinite; }
.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-clipboard-check{ animation: mx-i-stamp  6.4s cubic-bezier(.34,1.4,.64,1) infinite; }
.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-handshake      { animation: mx-i-clasp  6.9s cubic-bezier(.45,.05,.35,1) infinite; }
.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-flask          { animation: mx-i-swirl  7.3s cubic-bezier(.45,.05,.35,1) infinite; transform-origin: 50% 90%; }
.mx-flow .mx-flow__icon .elementor-icon svg.e-fas-users          { animation: mx-i-gather 6.7s cubic-bezier(.34,1.4,.64,1) infinite; }

.mx-flow .mx-flow__icon .elementor-icon svg[class*='e-fas-'] { will-change: transform; }

/* Hover tightens the cycle on the step being read. */
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-file-invoice,
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-industry,
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-search,
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-clipboard-list,
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-clipboard-check,
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-handshake,
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-flask,
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-users {
  animation-duration: 2.4s;
  transform: none;
}
.mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg.e-fas-ship { animation-duration: 2.2s; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mx-flow .mx-flow__icon .elementor-icon svg[class*='e-fas-'],
  .mx-flow .mx-flow__step:hover .mx-flow__icon .elementor-icon svg[class*='e-fas-'] {
    animation: none !important;
  }
}


/* =========================================================
   30. FOOTER INFOLIST -- gap on the row, not just the link
   Only the email item is wrapped in an <a> (it is a mailto),
   and the 11px gap was declared on that anchor. The other
   three rows put media and content directly in the <li>, and
   section 17 had already zeroed the media margin Xpro used
   for spacing -- so those rows had no gap at all and their
   text sat hard against the icon.
   The gap now lives on the row itself, which covers both
   shapes: when an anchor is present it is the row's only
   flex child, so the row gap is inert and the anchor's own
   gap does the work.
   ========================================================= */

#xpro-theme-builder-footer .mx-flist .xpro-infolist-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
}

#xpro-theme-builder-footer .mx-flist .xpro-infolist-item > a {
  gap: 11px !important;
  align-items: flex-start !important;
  text-decoration: none;
}

/* Optical centring against a 28px tile: flex-start plus a 3px
   nudge reads better than align-items:center once the address
   wraps to two lines. */
#xpro-theme-builder-footer .mx-flist .xpro-infolist-content {
  padding-top: 3px !important;
  min-width: 0;
}


/* =========================================================
   31. TABLET (768-1024px)
   The band was never addressed: every row was sized for the
   1160px desktop box and then overridden again for phones,
   so tablets inherited desktop widths inside a ~984px or
   ~728px content area. grid.css already steps .mx-eq down,
   so what is left is the two-column rows, the footer, the
   flow connectors and the vertical rhythm.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

  /* ---- rhythm: 104px of section padding is desktop-scale ---- */
  .elementor-section > .e-con,
  body .e-con.e-parent { --padding-top: 76px; --padding-bottom: 76px; }

  /* ---- two-column rows ----
     94% plus a 56px gap is 981px inside 984px of content. It technically
     fits at 1024 and overflows below it, and either way the text column
     is too narrow to read well. Rebalanced with a tighter gap. */
  .mx-mediarow,
  .mx-splitrow {
    gap: 34px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .mx-mediarow > .e-con,
  .mx-splitrow > .e-con { width: auto !important; min-width: 0; }
  .mx-mediarow > .e-con:first-child,
  .mx-splitrow > .e-con:first-child { flex: 1 1 54%; }
  .mx-mediarow > .e-con:last-child,
  .mx-splitrow > .e-con:last-child  { flex: 1 1 42%; }

  /* ---- footer: four columns plus 120px of gaps overflows ---- */
  .mx-footer-cols { flex-wrap: wrap !important; gap: 32px 30px !important; }
  .mx-footer-cols > .e-con { width: calc(50% - 15px) !important; flex: 0 0 auto !important; }

  /* ---- timeline connectors ----
     grid.css puts six across on three and four across on two, so the
     rail has to break at a different child in each case. */
  .mx-eq-6.mx-flow .mx-flow__step:nth-child(3n)::before { display: none; }
  .mx-eq-6.mx-flow .mx-flow__step:nth-child(n+4) { margin-top: 26px; }
  .mx-eq-4.mx-flow .mx-flow__step:nth-child(3n)::before { display: block; }
  .mx-eq-4.mx-flow .mx-flow__step:nth-child(2n)::before { display: none; }
  .mx-eq-4.mx-flow .mx-flow__step:nth-child(n+3) { margin-top: 26px; }
  .mx-eq-4.mx-flow .mx-flow__step:nth-child(n+4) { margin-top: 26px; }

  /* ---- type: desktop display sizes crowd a 984px measure ---- */
  .elementor-widget-heading h1 { font-size: 40px !important; line-height: 1.1 !important; }
  .elementor-widget-heading h2 { font-size: 32px !important; line-height: 1.14 !important; }
  .elementor-widget-heading h3 { font-size: 19px !important; }

  /* ---- stat band ---- */
  .mx-statband .elementor-counter-number-wrapper,
  .mx-statband .elementor-counter { font-size: 38px !important; }

  /* ---- CTA band and flow banner stack rather than squeeze ---- */
  .mx-flow-cta { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .mx-flow-cta__action { width: 100%; }
}

/* Portrait tablets: a 728px content area cannot carry two columns and
   still leave a readable measure, so the media rows stack -- image first,
   matching the phone order. */
@media (min-width: 768px) and (max-width: 900px) {
  .mx-mediarow,
  .mx-splitrow {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 26px !important;
  }
  .mx-mediarow > .e-con,
  .mx-splitrow > .e-con { flex: 1 1 100% !important; width: 100% !important; }
  .mx-mediarow > .mx-mediarow__media { order: -1; }
  .mx-mediarow__media img { width: 100%; }

  .elementor-widget-heading h1 { font-size: 34px !important; }
  .elementor-widget-heading h2 { font-size: 28px !important; }
}


/* =========================================================
   32. HEADER FIT
   Amazon Brands and Amazon Agencies moved up to the top level,
   which added roughly 250px of labels to a row whose content
   box is capped at 1160px however wide the screen is. All three
   header columns were flex:0 0 auto inside a nowrap row, so
   nothing could give and the nav ran under the buttons.

   Fixed by tightening the nav metrics across the whole desktop
   range rather than in a band -- a wider viewport does not buy
   more room here -- and by letting the menu column be the one
   that shrinks, so the logo and the two CTAs stay intact.
   ========================================================= */

@media (min-width: 1025px) {

  /* The menu column yields first; logo and buttons hold their size. */
  .mx-header-row > .e-con-inner > .e-con:nth-child(2) {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  .mx-header-row > .e-con-inner > .e-con:first-child,
  .mx-header-row > .e-con-inner > .e-con:last-child {
    flex: 0 0 auto !important;
    min-width: 0;
  }

  .xpro-elementor-horizontal-navbar-nav { gap: 2px !important; }
  .xpro-elementor-horizontal-navbar-nav > li > a {
    font-size: 14px !important;
    padding: 9px 10px !important;
  }

  /* The CTAs carry the same weight in less room. */
  .mx-hbtn .xpro-button,
  .mx-hbtn a.xpro-button { padding: 11px 20px !important; font-size: 14px !important; }
  .mx-hbtn-row { gap: 10px !important; }
}

/* Between the drawer breakpoint and 1200 the labels are still the
   widest thing in the row, so one more step down. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .xpro-elementor-horizontal-navbar-nav > li > a {
    font-size: 13.5px !important;
    padding: 9px 7px !important;
    letter-spacing: -.015em !important;
  }
  .mx-hbtn .xpro-button,
  .mx-hbtn a.xpro-button { padding: 10px 15px !important; font-size: 13.5px !important; }
  .mx-hbtn-row { gap: 8px !important; }
}


/* =========================================================
   33. HERO SLIDER
   A full-bleed cross-fade behind the hero copy. The slider is
   the first child of the section and is taken out of flow, so
   it fills the band edge to edge while the boxed inner row
   keeps its 1160px measure.

   The scrim is a left-to-right gradient rather than a flat
   wash: the copy sits on near-solid ground while the ship
   stays legible on the right. A second vertical pass keeps the
   header readable where it overlaps the sky.
   ========================================================= */

.mx-glow { position: relative; overflow: hidden; }

.mx-heroslider {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mx-glow > .elementor-element:has(.mx-heroslider) {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.mx-heroslide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity;
}

/* Navy gradient: solid enough to carry 44px display type on the left,
   clearing by 62% so the vessel is not muddied. */
.mx-heroscrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #04100F 0%, rgba(4,16,15,.94) 26%, rgba(4,16,15,.72) 44%, rgba(4,16,15,.28) 62%, rgba(4,16,15,.10) 100%),
    linear-gradient(180deg, rgba(4,16,15,.55) 0%, rgba(4,16,15,0) 22%, rgba(4,16,15,0) 70%, rgba(4,16,15,.45) 100%);
}

/* Copy and card sit above the slider. */
.mx-glow > .e-con-inner,
.mx-glow > .elementor-element:not(:has(.mx-heroslider)) { position: relative; z-index: 1; }

/* The hero card reads as glass over a photo rather than over flat navy. */
.mx-hcard {
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(4,16,15,.42) !important;
}

/* ---- tablet: the text column widens, so the scrim follows it ---- */
@media (max-width: 1024px) {
  .mx-heroscrim {
    background:
      linear-gradient(90deg, #04100F 0%, rgba(4,16,15,.95) 34%, rgba(4,16,15,.80) 56%, rgba(4,16,15,.42) 78%, rgba(4,16,15,.22) 100%),
      linear-gradient(180deg, rgba(4,16,15,.55) 0%, rgba(4,16,15,0) 24%, rgba(4,16,15,0) 68%, rgba(4,16,15,.5) 100%);
  }
  .mx-heroslide { background-position: 72% center !important; }
}

/* ---- phone: copy stacks over the photo, so the scrim goes vertical ---- */
@media (max-width: 767px) {
  .mx-heroscrim {
    background: linear-gradient(180deg, rgba(4,16,15,.86) 0%, rgba(4,16,15,.74) 42%, rgba(4,16,15,.88) 100%);
  }
  /* Anchor the crop on the vessel rather than the empty water. */
  .mx-heroslide { background-position: 66% center !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-heroslide { animation: none !important; opacity: 0 !important; }
  .mx-heroslide:first-child { opacity: 1 !important; }
}


/* =========================================================
   34. HERO SLIDER -- anchoring
   Section 33 assumed the slider widget was a direct child of
   the section. Elementor renders boxed containers as
   .mx-glow > .e-con-inner > .elementor-element, so the child
   combinator never matched: the wrapper stayed in flow, and
   the slides -- absolute inside a zero-height box -- had
   nothing to size against and rendered as nothing.

   Anchored explicitly by class instead, with the inner box set
   static so the slider resolves against the section and goes
   full-bleed rather than being trapped in the 1160px measure.
   No :has() anywhere, so support is not a factor.
   ========================================================= */

.mx-glow { position: relative !important; overflow: hidden; }

/* Static, so the absolutely positioned slot resolves against .mx-glow. */
.mx-glow > .e-con-inner { position: static !important; }

.mx-heroslider-slot {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0;
}
.mx-heroslider-slot > .elementor-widget-container,
.mx-heroslider-slot .elementor-shortcode {
  position: static !important;
  height: 100%;
}

.mx-heroslider { position: absolute; inset: 0; overflow: hidden; }

/* The copy row follows the slider in source order, so it paints above
   without needing a stacking context of its own. Stated anyway, because
   the slot carries z-index. */
.mx-glow > .e-con-inner > .elementor-element:not(.mx-heroslider-slot) {
  position: relative;
  z-index: 1;
}


/* =========================================================
   35. HERO HEIGHT
   With the media column gone and the tracking card moved into
   the copy stack, the hero grew past the viewport and pushed
   the card below the fold -- the one element that most wants
   to be seen without scrolling.

   Scoped to .mx-hero, not .mx-glow: the closing CTA bands and
   the page heroes share that class and must not inherit a
   viewport height.
   ========================================================= */

.mx-hero {
  min-height: clamp(560px, 78vh, 820px);
  display: flex;
  align-items: center;
}
.mx-hero > .e-con-inner { width: 100%; justify-content: center; }

/* Four lines of 48px display type is most of the height on its own. */
.mx-hero .elementor-widget-heading h1,
.mx-hero .elementor-widget-heading h2 {
  font-size: clamp(34px, 3.1vw, 44px) !important;
  line-height: 1.08 !important;
}
.mx-hero .elementor-widget-text-editor p { margin-bottom: 0; }

/* Tighter stack: kicker, headline, lede, buttons, card. */
.mx-hero .mx-splitrow > .e-con { gap: 16px !important; }
.mx-hero .mx-hcard { margin-top: 6px; padding: 16px 18px !important; }

@media (max-width: 1024px) {
  .mx-hero { min-height: clamp(520px, 70vh, 720px); }
  .mx-hero .elementor-widget-heading h1 { font-size: clamp(30px, 4.4vw, 38px) !important; }
}
@media (max-width: 767px) {
  .mx-hero { min-height: 0; align-items: flex-start; }
  .mx-hero .elementor-widget-heading h1 { font-size: 28px !important; }
  .mx-hero .mx-splitrow > .e-con { gap: 14px !important; }
}


/* =========================================================
   36. SLIDE-IN FROM RIGHT
   Opt-in per element via .mx-slidein. The class is only added
   to the DOM by brand.js, so a visitor without JavaScript
   never meets opacity:0 -- the image is simply there.

   The offset is 40px, not a viewport unit: the parent row
   clips on the x axis, so nothing can widen the document and
   produce a horizontal scrollbar.
   ========================================================= */

.mx-mediarow, .mx-splitrow { overflow-x: clip; }
@supports not (overflow-x: clip) {
  .mx-mediarow, .mx-splitrow { overflow-x: hidden; }
}

.mx-xr {
  opacity: 0;
  transform: translate3d(104px, 0, 0);
  will-change: opacity, transform;
}
.mx-xr.mx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.15s ease-out, transform 1.2s cubic-bezier(.16, 1, .3, 1);
}

/* Tablet: proportional travel */
@media (min-width: 768px) and (max-width: 1024px) {
  .mx-xr { transform: translate3d(72px, 0, 0); }
}

@media (max-width: 767px) {
  .mx-xr { transform: translate3d(44px, 0, 0); }
  .mx-xr.mx-in { transition-duration: .95s, 1s; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-xr,
  .mx-xr.mx-in { opacity: 1; transform: none; transition: none; }
}


/* =========================================================
   37. HERO ENTRANCE
   Kicker, headline, lede and buttons rise into place on load.

   Pure CSS rather than the IntersectionObserver used further
   down the page, and deliberately so: the hero is above the
   fold. Priming it from brand.js -- which loads in the footer
   -- would paint the text, then hide it, then animate it. CSS
   applies before first paint, so there is no flash.

   animation-fill-mode: both holds the from-state before the
   delay elapses, which is what makes the stagger read as
   sequence rather than four things twitching.
   ========================================================= */

@keyframes mx-hero-rise {
  from { opacity: 0; transform: translate3d(0, 38px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.mx-hero .mx-splitrow > .e-con > .elementor-element {
  animation: mx-hero-rise .92s cubic-bezier(.16, 1, .3, 1) both;
}

/* kicker, headline, lede, buttons */
.mx-hero .mx-splitrow > .e-con > .elementor-element:nth-child(1) { animation-delay: .06s; }
.mx-hero .mx-splitrow > .e-con > .elementor-element:nth-child(2) { animation-delay: .22s; }
.mx-hero .mx-splitrow > .e-con > .elementor-element:nth-child(3) { animation-delay: .40s; }
.mx-hero .mx-splitrow > .e-con > .elementor-element:nth-child(4) { animation-delay: .58s; }

/* The slider itself should already be in place behind them. */
.mx-hero .mx-heroslider-slot { animation: none !important; }

@media (max-width: 1024px) {
  @keyframes mx-hero-rise {
    from { opacity: 0; transform: translate3d(0, 30px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}

@media (max-width: 767px) {
  .mx-hero .mx-splitrow > .e-con > .elementor-element {
    animation-duration: .8s;
  }
  /* Tighter stagger on a phone: the whole stack is in view at once,
     so a long sequence reads as slow rather than considered. */
  .mx-hero .mx-splitrow > .e-con > .elementor-element:nth-child(1) { animation-delay: .04s; }
  .mx-hero .mx-splitrow > .e-con > .elementor-element:nth-child(2) { animation-delay: .16s; }
  .mx-hero .mx-splitrow > .e-con > .elementor-element:nth-child(3) { animation-delay: .30s; }
  .mx-hero .mx-splitrow > .e-con > .elementor-element:nth-child(4) { animation-delay: .44s; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-hero .mx-splitrow > .e-con > .elementor-element {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================================================
   38. PAGE BANNER ENTRANCE
   The same rise as the homepage hero, on the ten page
   banners. All of them share one shape -- breadcrumb, kicker,
   headline, lede, and on the 404 a pair of buttons -- so a
   single nth-child ladder covers every page.

   Elementor renders a boxed container as .e-con-inner and a
   full one as direct children, so both paths are declared.
   ========================================================= */

.mx-pagehero > .e-con-inner > .elementor-element,
.mx-pagehero > .elementor-element {
  animation: mx-hero-rise 1s cubic-bezier(.16, 1, .3, 1) both;
}

.mx-pagehero > .e-con-inner > .elementor-element:nth-child(1),
.mx-pagehero > .elementor-element:nth-child(1) { animation-delay: .05s; }
.mx-pagehero > .e-con-inner > .elementor-element:nth-child(2),
.mx-pagehero > .elementor-element:nth-child(2) { animation-delay: .19s; }
.mx-pagehero > .e-con-inner > .elementor-element:nth-child(3),
.mx-pagehero > .elementor-element:nth-child(3) { animation-delay: .35s; }
.mx-pagehero > .e-con-inner > .elementor-element:nth-child(4),
.mx-pagehero > .elementor-element:nth-child(4) { animation-delay: .51s; }
.mx-pagehero > .e-con-inner > .elementor-element:nth-child(5),
.mx-pagehero > .elementor-element:nth-child(5) { animation-delay: .65s; }
.mx-pagehero > .e-con-inner > .elementor-element:nth-child(6),
.mx-pagehero > .elementor-element:nth-child(6) { animation-delay: .78s; }

@media (max-width: 767px) {
  .mx-pagehero > .e-con-inner > .elementor-element,
  .mx-pagehero > .elementor-element { animation-duration: .82s; }
  .mx-pagehero > .e-con-inner > .elementor-element:nth-child(3),
  .mx-pagehero > .elementor-element:nth-child(3) { animation-delay: .26s; }
  .mx-pagehero > .e-con-inner > .elementor-element:nth-child(4),
  .mx-pagehero > .elementor-element:nth-child(4) { animation-delay: .38s; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-pagehero > .e-con-inner > .elementor-element,
  .mx-pagehero > .elementor-element {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================================================
   39. CARDS RISE INTO PLACE
   Equal-column cards rise from below as their row
   enters view, staggered across the row so it reads as a
   sequence rather than one block arriving.

   Primed by brand.js, like the image reveal, so a visitor
   without JavaScript never meets opacity:0.
   ========================================================= */

/* Scroll tracks must not be clipped: .mx-flow and .mx-statband become
   horizontal swipe rows on mobile, and overflow-x:clip disables
   scrolling outright rather than just hiding the overflow. */
.mx-eq:not(.mx-flow):not(.mx-statband) { overflow-x: clip; }
@supports not (overflow-x: clip) {
  .mx-eq:not(.mx-flow):not(.mx-statband) { overflow-x: hidden; }
}

.mx-up {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  will-change: opacity, transform;
}
.mx-up.mx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .85s ease-out, transform .95s cubic-bezier(.16, 1, .3, 1);
}

/* Cascade across the row. */
.mx-up:nth-child(1) { transition-delay: 0s, 0s; }
.mx-up:nth-child(2) { transition-delay: .10s, .10s; }
.mx-up:nth-child(3) { transition-delay: .20s, .20s; }
.mx-up:nth-child(4) { transition-delay: .30s, .30s; }
.mx-up:nth-child(5) { transition-delay: .40s, .40s; }
.mx-up:nth-child(6) { transition-delay: .50s, .50s; }

@media (max-width: 1024px) {
  .mx-up { transform: translate3d(0, 38px, 0); }
}
@media (max-width: 767px) {
  /* One card per row on a phone, so the cascade would just be a
     wait. Shorter travel, no delay. */
  .mx-up { transform: translate3d(0, 26px, 0); }
  .mx-up.mx-in { transition-duration: .7s, .75s; }
  .mx-up:nth-child(n) { transition-delay: 0s, 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-up, .mx-up.mx-in {
    opacity: 1; transform: none; transition: none;
  }
}


/* =========================================================
   40. HERO VIDEO LAYER
   The cross-fade is replaced by one looping file. The wrapper
   and the scrim are unchanged, so the band, the gradient and
   the copy above it are identical -- only what sits behind
   the scrim is different.
   ========================================================= */

.mx-herovid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none;
}

@media (max-width: 1024px) { .mx-herovid { object-position: 72% center; } }
@media (max-width: 767px)  { .mx-herovid { object-position: 66% center; } }

/* A looping background video is decoration. If the visitor has asked
   for less motion, hold the poster frame instead. */
@media (prefers-reduced-motion: reduce) {
  .mx-herovid { display: none; }
  .mx-heroslider--video {
    background-image: var(--mx-heroposter, none);
    background-size: cover;
    background-position: center;
  }
}


/* =========================================================
   41. HERO VIDEO FADE-UP
   A poster frame that is not the video's own first frame
   guarantees a visible cut the moment playback starts. The
   server has no ffmpeg delegate, so a matching still cannot be
   generated here.

   Instead the band holds brand navy -- which is what the scrim
   renders over anyway -- and the footage fades up once it is
   genuinely playing. Nothing swaps; one layer arrives.
   ========================================================= */

.mx-heroslider--video { background: #04100F; }

.mx-herovid {
  opacity: 0;
  transition: opacity .75s ease-out;
}
.mx-herovid.is-playing { opacity: 1; }

/* Without JavaScript the video still autoplays, so it must not be
   left invisible waiting for a class that never arrives. */
.no-js .mx-herovid { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mx-herovid { display: none; }
}


/* =========================================================
   42. VIDEO SLIDER -- real players
   The slots used to be Image widgets standing in for video,
   with a play button drawn in CSS so they read as playable.
   Now that three of them are genuine <video> elements, that
   decoration sits on top of the native controls: it looks
   clickable, is not, and swallows the click that would have
   started playback.

   The drawn button is removed from converted slots only. The
   three still awaiting footage keep it, so the row stays
   visually consistent.
   ========================================================= */

.mx-vslide .mx-vplayer::before,
.mx-vslide .mx-vplayer::after {
  content: none !important;
  display: none !important;
}

/* Elementor wraps the player; the video must fill the 3:4 frame the
   slider is built around rather than letterboxing inside it. */
.mx-vslide .mx-vplayer .elementor-wrapper {
  aspect-ratio: 3 / 4 !important;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--mx-border);
  background: #04100F;
}
.mx-vslide .mx-vplayer video.elementor-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

/* Nothing decorative may intercept the pointer over a real player. */
.mx-vslide .mx-vplayer,
.mx-vslide .mx-vplayer * { pointer-events: auto; }


/* =========================================================
   43. LINE CARDS -- equal height, buttons on one baseline
   An earlier pass set margin-top: auto on the card button so
   it would sit at the foot of the card whatever the copy
   length. A later rule set margin-top: 4px on the same
   selector and, being last, won -- so the buttons rode up under
   the list and the two cards stopped ending together.

   The chain is restated here in full rather than patched, so
   the stretch is not dependent on which rule appears last.
   ========================================================= */

.mx-linecards { align-items: stretch !important; }

.mx-linecards > .e-con {
  display: flex;
  flex-direction: column;
}

.mx-linecards .mx-linecard {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* The copy block absorbs the slack, so the shorter card grows
   rather than the taller one being cropped. */
.mx-linecards .mx-cardcopy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.mx-linecards .mx-cardcopy > .elementor-widget-button {
  margin-top: auto !important;
  padding-top: 14px;
}

/* Section 31 centres two-column rows on tablet. That is right for a
   media row and wrong here: centring stops the cards stretching, which
   is the whole mechanism. */
@media (min-width: 768px) and (max-width: 1024px) {
  .mx-linecards.mx-splitrow {
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
  .mx-linecards.mx-splitrow > .e-con:first-child,
  .mx-linecards.mx-splitrow > .e-con:last-child { flex: 1 1 50%; }
}


/* =========================================================
   44. LINE CARDS -- media height
   Section 43 made the cards stretch to match, but the two
   photographs are different shapes -- 2560x1707 against
   2560x1628 -- so each media block resolved to a different
   height and pushed its copy down by a different amount.

   An aspect ratio was already enforced, but only via a
   :has(img[src*="placeholder"]) selector, so it stopped
   applying the moment real photographs went in. Fixed to the
   frame rather than the file: both crop to the same box.
   ========================================================= */

.mx-linecards .mx-cardmedia { flex: 0 0 auto; }

.mx-linecards .mx-cardmedia .elementor-widget-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
  width: 100%;
}

/* Elementor renders the img as a direct child of the widget -- there is
   no .elementor-widget-container in this version -- so the fill rule
   targets the image itself. */
.mx-linecards .mx-cardmedia .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}

@media (max-width: 767px) {
  .mx-linecards .mx-cardmedia .elementor-widget-image { aspect-ratio: 16 / 10; }
}


/* =========================================================
   45. MOBILE HARDENING
   Final pass. Two-column rows were tagged .mx-splitrow during
   the tablet work and given a stacking rule between 768 and
   900px, but nothing below that -- most also carry
   .mx-mediarow, which stacks, so the gap only shows on the few
   that do not. Stated explicitly here so no row can end up as
   two 48% columns on a 360px screen.
   ========================================================= */

@media (max-width: 767px) {
  .mx-splitrow {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    row-gap: 22px !important;
  }
  .mx-splitrow > .e-con {
    width: 100% !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }

  /* Card grids: one per row, full width. */
  .mx-linecards > .e-con { width: 100% !important; }

  /* Testimonial players: fill the slide rather than the 3:4 frame,
     which is taller than most phone viewports. */
  .mx-vslide .mx-vplayer .elementor-wrapper { aspect-ratio: 4 / 5 !important; }

  /* Nothing may exceed the viewport once transforms are in play. */
  .mx-hero, .mx-pagehero { overflow-x: clip; }
}

/* Very small phones: the header lockup and the hero headline are the
   two things that overflow first. */
@media (max-width: 380px) {
  .mx-hero .elementor-widget-heading h1 { font-size: 25px !important; }
  .mx-pagehero .elementor-widget-heading h1 { font-size: 24px !important; }
}


/* =========================================================
   46. STAT BAND -- horizontal on mobile
   Four cells stacked vertically ate most of a phone screen and
   pushed the hero video out of view. Same treatment as the
   timeline: a scroll-snap track, swiped rather than scrolled
   past, with the next card just visible so the row reads as
   continuing.

   The stacked rules used borders between rows to separate the
   cells. Those are cancelled here -- a top border on a
   horizontal track draws a line across the middle of nothing.
   ========================================================= */

@media (max-width: 767px) {
  .mx-statband {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px !important;
    margin-inline: -18px;
    padding: 2px 18px 8px !important;
  }
  .mx-statband::-webkit-scrollbar { display: none; }

  /* 74% leaves a sliver of the next cell, which is what tells a
     reader the row moves without drawing an arrow on it. */
  .mx-statband > .e-con {
    flex: 0 0 74% !important;
    width: 74% !important;
    max-width: 74% !important;
    scroll-snap-align: start;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10) !important;
    padding: 16px 16px !important;
  }

  /* Cancel every separator the stacked layout relied on. */
  .mx-statband > .e-con + .e-con,
  .mx-statband > .e-con:nth-child(2n+1),
  .mx-statband > .e-con:nth-child(n+3) {
    border-top: 0 !important;
    border-left: 0 !important;
    padding-top: 16px !important;
    padding-left: 16px !important;
  }

  .mx-statband .elementor-icon-box-wrapper {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .mx-statband .elementor-icon-box-title { font-size: 16px !important; }
  .mx-statband .elementor-icon-box-description { font-size: 13.5px !important; }
}


/* =========================================================
   47. STAT BAND -- tighter cells (mobile)
   The horizontal track worked but each cell was still built to
   stacked proportions: a 56px icon disc, 16px padding all
   round and a stacked icon-over-text arrangement. On a phone
   that is a 150px-tall card carrying two short lines.

   Back to icon beside text, smaller disc, tighter padding. The
   full-width hairline above the row was the border-top the
   stacked layout put on the second cell -- section 46 cancelled
   it on the cells but the row itself still carried one.
   ========================================================= */

@media (max-width: 767px) {
  .mx-statband { border-top: 0 !important; padding-top: 0 !important; }

  .mx-statband > .e-con {
    flex: 0 0 68% !important;
    width: 68% !important;
    max-width: 68% !important;
    padding: 13px 14px !important;
    border-radius: 13px;
  }
  .mx-statband > .e-con + .e-con,
  .mx-statband > .e-con:nth-child(2n+1),
  .mx-statband > .e-con:nth-child(n+3) {
    padding: 13px 14px !important;
  }

  /* Icon beside the text again: stacked doubled the card height for
     no gain once the disc came down in size. */
  .mx-statband .elementor-icon-box-wrapper {
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
  }

  .mx-statband .elementor-icon-box-icon,
  .mx-statband .elementor-icon-box-icon .elementor-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  .mx-statband .elementor-icon-box-icon svg,
  .mx-statband .elementor-icon-box-icon i {
    width: 17px !important;
    height: 17px !important;
    font-size: 17px !important;
  }

  .mx-statband .elementor-icon-box-title {
    font-size: 14.5px !important;
    margin: 0 0 2px !important;
    line-height: 1.2 !important;
  }
  .mx-statband .elementor-icon-box-description {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
}


/* =========================================================
   48. SWIPE TRACKS RESTORED
   Stated last so nothing added later can clip them again.
   ========================================================= */

@media (max-width: 767px) {
  .mx-flow,
  .mx-statband,
  .mx-vslider-track {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .mx-flow { flex-wrap: nowrap !important; }
}


/* =========================================================
   49. MOBILE MEDIA ROWS -- overlap fix
   Copy was painting over the photograph above it on phones.

   Cause: overflow-x:clip was added to these rows so the
   slide-in transform could not widen the page. Per spec, when
   one axis is clip and the other is visible, the visible axis
   computes to auto -- so every media row quietly became a
   scroll container, and the stacked children stopped resolving
   their heights predictably.

   The clip is not needed on mobile anyway: html/body already
   carry overflow-x:hidden, and the travel there is 44px.
   ========================================================= */

@media (max-width: 767px) {
  .mx-mediarow,
  .mx-splitrow,
  .mx-eq:not(.mx-flow):not(.mx-statband) {
    overflow: visible !important;
  }

  /* The media column must own its height so nothing can ride up into
     it while an image is still lazy-loading or mid-animation. */
  .mx-mediarow > .mx-mediarow__media {
    display: block !important;
    width: 100% !important;
    position: relative;
    z-index: 0;
  }
  .mx-mediarow > .mx-mediarow__media .elementor-widget-image {
    display: block !important;
    width: 100%;
  }
  .mx-mediarow > .mx-mediarow__media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  /* Copy sits after the media in the stack, never over it. */
  .mx-mediarow > .e-con:not(.mx-mediarow__media) {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
  }
}


/* =========================================================
   50. AUDIENCE CHOOSER  (/who-are-you/)
   Full-viewport gate on Elementor Canvas, so there is no header
   or footer competing with it. Same tokens as the rest of the
   site: #04100F ground, #20E6F2 accent, Space Grotesk display.
   ========================================================= */

.mx-pick { min-height: 100vh; min-height: 100svh; display: flex; position: relative; overflow: hidden; }

.mx-pick::before {
  content: "";
  position: absolute;
  top: -18%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(32,230,242,.10) 0%, rgba(32,230,242,0) 62%);
  pointer-events: none;
}
.mx-pick > .e-con-inner { position: relative; z-index: 1; width: 100%; }

.mx-pick__logo img { width: 132px; height: auto; display: block; margin-inline: auto; }
.mx-pick__head { margin-top: 26px !important; }
.mx-pick__sub { margin-top: 12px !important; max-width: 460px; margin-inline: auto !important; }
.mx-pick__row { margin-top: 40px !important; }
.mx-pick__skip { margin-top: 26px !important; }
.mx-pick__skip a { color: #9FBFBD; text-decoration: underline; text-underline-offset: 3px; }
.mx-pick__skip a:hover { color: #20E6F2; }

/* ---- cards ---- */
.mx-pick__card {
  padding: 30px 28px 28px !important;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease, box-shadow .35s ease;
}
.mx-pick__card:hover {
  transform: translateY(-6px);
  background: rgba(32,230,242,.06);
  border-color: rgba(32,230,242,.42);
  box-shadow: 0 18px 44px rgba(4,16,15,.45), 0 0 0 1px rgba(32,230,242,.18);
}

.mx-pick__icon { margin-bottom: 18px; }
.mx-pick__icon .elementor-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(32,230,242,.10);
  border: 1px solid rgba(32,230,242,.22);
  color: #20E6F2;
  transition: transform .3s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.mx-pick__icon .elementor-icon svg { width: 22px; height: 22px; fill: currentColor; }
.mx-pick__card:hover .mx-pick__icon .elementor-icon { transform: scale(1.06); background: rgba(32,230,242,.16); }

.mx-pick__kicker { margin-bottom: 8px; }
.mx-pick__title { margin-bottom: 10px; }
.mx-pick__copy { margin-bottom: 20px; }
.mx-pick__copy p { margin: 0; }

/* CTA pinned to the foot so both cards line up whatever the copy length. */
.mx-pick__cta { margin-top: auto !important; }
.mx-pick__cta .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: #20E6F2;
  color: #04100F;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}
.mx-pick__card:hover .mx-pick__cta .elementor-button { background: #58F0F9; }
.mx-pick__cta .elementor-button-icon svg { width: 14px; height: 14px; fill: currentColor; transition: transform .2s ease; }
.mx-pick__card:hover .mx-pick__cta .elementor-button-icon svg { transform: translateX(4px); }

/* The agencies card reads as the quieter of the two. */
.mx-pick__card.is-agencies .mx-pick__cta .elementor-button {
  background: transparent;
  color: #F7FCFC;
  border: 1.5px solid rgba(255,255,255,.28);
}
.mx-pick__card.is-agencies:hover .mx-pick__cta .elementor-button {
  border-color: #20E6F2;
  color: #20E6F2;
}

/* ---- entrance ---- */
@keyframes mx-pick-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
.mx-pick > .e-con-inner > .elementor-element,
.mx-pick__row > .e-con { animation: mx-pick-rise .85s cubic-bezier(.16,1,.3,1) both; }
.mx-pick > .e-con-inner > .elementor-element:nth-child(1) { animation-delay: .05s; }
.mx-pick > .e-con-inner > .elementor-element:nth-child(2) { animation-delay: .16s; }
.mx-pick > .e-con-inner > .elementor-element:nth-child(3) { animation-delay: .27s; }
.mx-pick > .e-con-inner > .elementor-element:nth-child(4) { animation-delay: 0s; }
.mx-pick > .e-con-inner > .elementor-element:nth-child(5) { animation-delay: .62s; }
.mx-pick__row > .e-con:nth-child(1) { animation-delay: .38s; }
.mx-pick__row > .e-con:nth-child(2) { animation-delay: .50s; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .mx-pick__card { padding: 26px 22px 24px !important; }
  .mx-pick__logo img { width: 116px; }
}
@media (max-width: 767px) {
  .mx-pick { min-height: auto; padding-block: 44px !important; }
  .mx-pick__row { margin-top: 28px !important; }
  .mx-pick__card { padding: 22px 20px 22px !important; }
  .mx-pick__logo img { width: 104px; }
  .mx-pick__icon .elementor-icon { width: 46px; height: 46px; border-radius: 13px; }
  .mx-pick__icon .elementor-icon svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-pick > .e-con-inner > .elementor-element,
  .mx-pick__row > .e-con { animation: none !important; opacity: 1 !important; transform: none !important; }
  .mx-pick__card:hover { transform: none; }
}


/* =========================================================
   51. SWITCH EXPERIENCE
   Sits in the footer legal bar. Deliberately quiet: it is a
   way back, not a call to action.
   ========================================================= */

#xpro-theme-builder-footer .mx-switchwrap { display: inline-block; }
.mx-switch {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  color: #5E817F;
  text-decoration: none;
  transition: color .18s ease;
}
.mx-switch:hover { color: #20E6F2; }
#xpro-theme-builder-footer .mx-switch { color: #5E817F; }
#xpro-theme-builder-footer .mx-switch:hover { color: #20E6F2; }


/* =========================================================
   52. AUDIENCE CHOOSER -- light theme
   Brief section 13: light/white ground, teal and cyan accents,
   dark navy type, and no dark-only pages. Overrides section 50
   rather than replacing it, so the layout, hover and entrance
   are untouched -- only the palette changes.
   ========================================================= */

.mx-pick { background: #FFFFFF !important; }

/* Mist wash instead of a cyan bloom on black. */
.mx-pick::before {
  background: radial-gradient(circle, rgba(32,230,242,.16) 0%, rgba(247,252,252,0) 64%);
}
.mx-pick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #F7FCFC 0%, #FFFFFF 46%);
  z-index: 0;
  pointer-events: none;
}
.mx-pick > .e-con-inner { z-index: 2; }

.mx-pick__card {
  background: #FFFFFF;
  border: 1px solid #DCEAEA;
  box-shadow: 0 1px 2px rgba(16,74,92,.04), 0 10px 30px rgba(16,74,92,.06);
}
.mx-pick__card:hover {
  background: #FFFFFF;
  border-color: rgba(0,99,109,.45);
  box-shadow: 0 20px 46px rgba(16,74,92,.13), 0 0 0 3px rgba(32,230,242,.16);
}

.mx-pick__icon .elementor-icon {
  background: #ECF6F6;
  border: 1px solid #CFE6E6;
  color: #00636D;
}
.mx-pick__card:hover .mx-pick__icon .elementor-icon { background: #E1F7F9; }

/* Brands leads in cyan; agencies takes the outlined treatment. */
.mx-pick__cta .elementor-button { background: #20E6F2; color: #04100F; }
.mx-pick__card:hover .mx-pick__cta .elementor-button { background: #12D3E0; }
.mx-pick__card.is-agencies .mx-pick__cta .elementor-button {
  background: transparent;
  color: #00636D;
  border: 1.5px solid #BFDEDE;
}
.mx-pick__card.is-agencies:hover .mx-pick__cta .elementor-button {
  border-color: #00636D;
  color: #003B41;
  background: #F7FCFC;
}

.mx-pick__skip a { color: #6C8A88; }
.mx-pick__skip a:hover { color: #00636D; }


/* =========================================================
   53. OFFER PAGES  (Brand + Agency homepages)
   Risk-reversal band, 12-step shipment grid and the hero
   Learn More CTA. Everything reuses existing tokens so the two
   audience pages stay recognisably one brand.
   ========================================================= */

/* ---- hero offer CTA ---- */
.mx-offercta { margin-top: 8px; }
.mx-offercta .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  background: #20E6F2;
  color: #04100F;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}
.mx-offercta .elementor-button:hover { background: #58F0F9; transform: translateY(-1px); }
.mx-offercta .elementor-button-icon svg { width: 14px; height: 14px; fill: currentColor; }

/* ---- risk reversal ---- */
.mx-riskband { position: relative; overflow: hidden; }
.mx-riskband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 340px at 18% 0%, rgba(32,230,242,.12) 0%, rgba(4,16,15,0) 70%);
  pointer-events: none;
}
.mx-riskband > .e-con-inner { position: relative; z-index: 1; }
.mx-riskband .elementor-widget-heading h2 {
  border-left: 3px solid #20E6F2;
  padding-left: 20px;
}
@media (max-width: 767px) {
  .mx-riskband .elementor-widget-heading h2 { padding-left: 14px; }
}

/* ---- 12-step shipment grid ---- */
.mx-shipgrid .mx-shipstep {
  height: 100%;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid #DDEAEC;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.mx-shipgrid .mx-shipstep:hover {
  transform: translateY(-3px);
  border-color: rgba(0,99,109,.35);
  box-shadow: 0 10px 26px rgba(16,74,92,.09);
}
.mx-shipgrid .mx-shipstep__n .elementor-heading-title { letter-spacing: .18em; }
.mx-shipgrid .mx-shipstep__t p { margin: 0; }

/* The grid is a sequence, so it keeps reading order on every width. */
@media (max-width: 1024px) and (min-width: 768px) {
  .mx-shipgrid > .e-con { width: calc(50% - 11px) !important; }
}


/* =========================================================
   54. TOOL CARDS
   The tools band on the two audience homepages. Same card as
   everywhere else, with the link pinned to the foot so four
   cards of uneven copy still line up.
   ========================================================= */

.mx-toolgrid .mx-toolcard { height: 100%; display: flex; flex-direction: column; }
.mx-toolgrid .mx-toollink { margin-top: auto !important; padding-top: 6px; }
.mx-toollink .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  color: #00636D;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
}
.mx-toollink .elementor-button:hover { color: #003B41; }
.mx-toollink .elementor-button-icon svg { width: 13px; height: 13px; fill: currentColor; transition: transform .2s ease; }
.mx-toolcard:hover .mx-toollink .elementor-button-icon svg { transform: translateX(4px); }


/* =========================================================
   55. ANCHOR OFFSET
   Xpro turns the header to position:fixed once .xtb-appear is
   added on scroll. Anything reached by an in-page anchor then
   lands underneath it -- the Services dropdown links to
   /services/#freight and friends, so this is not theoretical.
   scroll-margin-top reserves the header height on the target
   rather than moving anything visually.
   ========================================================= */

:root { --mx-headh: 86px; }

[id]:not(body) { scroll-margin-top: var(--mx-headh); }
html { scroll-behavior: smooth; }

@media (max-width: 1024px) { :root { --mx-headh: 76px; } }
@media (max-width: 767px)  { :root { --mx-headh: 68px; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* =========================================================
   56. SOURCING + LOGISTICS pages
   The client supplied these as three image panels. Section 8
   of the brief asks for clean sections rather than reproduced
   graphics, so each row is label / detail / outcome, which is
   the structure the panels actually used.
   ========================================================= */

.mx-bblock {
  border: 1px solid #E4EFF0;
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
}
.mx-bblock__head {
  padding: 22px 24px 18px !important;
  background: #F7FCFC;
  border-bottom: 1px solid #E4EFF0;
}

.mx-brow {
  padding: 18px 24px !important;
  align-items: center !important;
  gap: 0 20px !important;
}
.mx-brow + .mx-brow { border-top: 1px solid #ECF6F6; }
.mx-brow:hover { background: #FAFDFD; }

.mx-brow__detail p { margin: 0; }

/* The outcome reads as a chip: it is the payoff, not a third column
   of body copy. */
.mx-brow__out { align-items: flex-start; }
.mx-brow__out .elementor-widget-heading .elementor-heading-title {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ECF6F6;
  border: 1px solid #D3E9EA;
}

/* ---- DPS process cards ---- */
.mx-dpsgrid .mx-dps { height: 100%; display: flex; flex-direction: column; }
.mx-dpsgrid .mx-dps__meta { margin-top: auto !important; padding-top: 6px; }
.mx-dpsgrid .mx-dps__meta .elementor-heading-title {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 8px;
  background: #ECF6F6;
  font-size: 13px;
}

@media (max-width: 900px) {
  .mx-brow { flex-direction: column !important; align-items: stretch !important; gap: 8px 0 !important; }
  .mx-brow > .e-con { width: 100% !important; }
}


/* =========================================================
   57. 17TRACK HAND-OFF
   A link builder, not an integration: the number goes into
   17track's own query string. Styled to match the calculators
   so the two tracking routes read as one family.
   ========================================================= */

.mx17 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  background: #FFFFFF;
  border: 1px solid #E4EFF0;
  border-radius: 16px;
  padding: 22px 22px 20px;
  box-shadow: 0 1px 2px rgba(16,74,92,.04), 0 8px 24px rgba(16,74,92,.05);
}
.mx17__f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mx17__f > span { font-family: 'Hanken Grotesk', sans-serif; font-size: 13.5px; font-weight: 600; color: #3F5C5A; }
.mx17__f input {
  height: 50px;
  padding: 0 14px;
  border: 1px solid #DCEAEA;
  border-radius: 11px;
  background: #FFFFFF;
  color: #04100F;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 15px;
  line-height: normal;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mx17__f input:focus { outline: none; border-color: #20E6F2; box-shadow: 0 0 0 3px rgba(32,230,242,.18); }
.mx17__go {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  border-radius: 11px;
  background: #0E6F76;
  color: #FFFFFF !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.mx17__go:hover { background: #08535A; transform: translateY(-1px); color: #FFFFFF !important; }
.mx17__note { grid-column: 1 / -1; margin: 4px 0 0; font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; color: #6C8A88; }
@media (max-width: 640px) {
  .mx17 { grid-template-columns: 1fr; }
  .mx17__go { width: 100%; justify-content: center; }
}


/* =========================================================
   58. AUDIENCE CHOOSER -- contrast and parity
   Two faults on the light ground. The icons were still
   inheriting the dark-theme cyan, which on a #ECF6F6 tile is
   about 1.4:1 -- effectively invisible. And the agencies card
   kept its quieter outlined button, which on white reads as
   disabled rather than secondary. This is a gateway: the two
   doors are equal, so they now look equal.
   ========================================================= */

.mx-pick__icon .elementor-icon {
  background: #E6F7F8 !important;
  border: 1px solid #B4E4E9 !important;
  color: #00636D !important;
}
.mx-pick__card:hover .mx-pick__icon .elementor-icon {
  background: #D2F2F6 !important;
  border-color: #8FD8DF !important;
  color: #004E57 !important;
}
.mx-pick__icon .elementor-icon svg,
.mx-pick__icon .elementor-icon svg path,
.mx-pick__icon .elementor-icon i {
  fill: currentColor !important;
  color: inherit !important;
}

/* Equal weight, and the same teal as every other solid button on the
   site -- these were the last cyan CTAs left. */
.mx-pick__card .mx-pick__cta .elementor-button,
.mx-pick__card.is-agencies .mx-pick__cta .elementor-button {
  background: #00636D !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(4,16,15,.05);
}
.mx-pick__card:hover .mx-pick__cta .elementor-button,
.mx-pick__card.is-agencies:hover .mx-pick__cta .elementor-button {
  background: #004E57 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(0,99,109,.24);
}
.mx-pick__cta .elementor-button-icon svg { fill: currentColor !important; }


/* =========================================================
   59. DESIGN STANDARD
   One page was carrying thirteen button treatments -- heights
   from 45 to 92px, letter-spacing from -0.15px to 3.7px, two
   fill colours and three kinds of "quiet" link. This section
   ends that. Every button widget now carries mx-b plus one of
   --solid, --ghost or --text, written into the Elementor data,
   so the variant travels with the widget and stays editable.

   Values are taken from the four-card row the client approved:
   card 28px / radius 20 / #DCEAEA, icon tile 48px / radius 13,
   teal #00636D on a 12% cyan wash. !important is deliberate --
   Elementor writes per-widget CSS that would otherwise win.
   ========================================================= */

:root {
  --mxs-teal: #00636D;
  --mxs-teal-dark: #004E57;
  --mxs-line: #DCEAEA;
  --mxs-wash: rgba(32,230,242,.12);
  --mxs-shadow: 0 2px 8px rgba(4,16,15,.05);
}

/* ---- buttons: shared geometry ---- */
.mx-b .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  text-align: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .25s ease, transform .2s ease;
}
.mx-b .elementor-button-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor !important;
  transition: transform .2s ease;
}
.mx-b .elementor-button:hover .elementor-button-icon svg { transform: translateX(4px); }

/* ---- solid ---- */
.mx-b--solid .elementor-button {
  background: var(--mxs-teal) !important;
  color: #FFFFFF !important;
  border: 0 !important;
}
.mx-b--solid .elementor-button:hover,
.mx-b--solid .elementor-button:focus-visible {
  background: var(--mxs-teal-dark) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(0,99,109,.24);
  transform: translateY(-1px);
}

/* ---- ghost ---- */
.mx-b--ghost .elementor-button {
  background: transparent !important;
  color: var(--mxs-teal) !important;
  border: 2px solid #CFE3E4 !important;
}
.mx-b--ghost .elementor-button:hover,
.mx-b--ghost .elementor-button:focus-visible {
  background: #F2FAFA !important;
  color: var(--mxs-teal-dark) !important;
  border-color: var(--mxs-teal) !important;
}

/* ---- text link: a micro-label, not a button ---- */
.mx-b--text .elementor-button {
  background: transparent !important;
  color: var(--mxs-teal) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  gap: 8px;
  font-size: 12.5px !important;
  letter-spacing: .14em !important;
}
.mx-b--text .elementor-button:hover { color: var(--mxs-teal-dark) !important; }
.mx-b--text .elementor-button-icon svg { width: 12px; height: 12px; }

/* ---- on the dark bands ---- */
/* Solid keeps the standard fill on dark grounds too -- one teal, everywhere.
   White on #00636D is 5.6:1, so the label stays legible on the dark bands. */
.mx-dark .mx-b--solid .elementor-button,
.mx-hero .mx-b--solid .elementor-button,
.mx-pagehero .mx-b--solid .elementor-button {
  background: var(--mxs-teal) !important;
}
.mx-dark .mx-b--solid .elementor-button:hover,
.mx-hero .mx-b--solid .elementor-button:hover,
.mx-pagehero .mx-b--solid .elementor-button:hover { background: var(--mxs-teal-dark) !important; }

.mx-dark .mx-b--ghost .elementor-button,
.mx-hero .mx-b--ghost .elementor-button,
.mx-pagehero .mx-b--ghost .elementor-button,
.mx-ctaband .mx-b--ghost .elementor-button {
  color: #F7FCFC !important;
  border-color: rgba(255,255,255,.30) !important;
}
.mx-dark .mx-b--ghost .elementor-button:hover,
.mx-hero .mx-b--ghost .elementor-button:hover,
.mx-pagehero .mx-b--ghost .elementor-button:hover,
.mx-ctaband .mx-b--ghost .elementor-button:hover {
  color: #20E6F2 !important;
  border-color: #20E6F2 !important;
  background: transparent !important;
}
.mx-dark .mx-b--text .elementor-button,
.mx-hero .mx-b--text .elementor-button,
.mx-pagehero .mx-b--text .elementor-button,
.mx-ctaband .mx-b--text .elementor-button { color: #7FE9F2 !important; }

/* ---- icon tiles ---- */
.mx-featicon .elementor-icon,
.mx-pick__icon .elementor-icon {
  width: 48px !important;
  height: 48px !important;
  display: grid;
  place-items: center;
  border-radius: 13px !important;
  background: var(--mxs-wash) !important;
  border: 1px solid var(--mxs-teal) !important;
  color: var(--mxs-teal) !important;
  padding: 0 !important;
}
.mx-featicon .elementor-icon svg,
.mx-pick__icon .elementor-icon svg {
  width: 21px !important;
  height: 21px !important;
  fill: currentColor !important;
}
.mx-pick__card:hover .mx-pick__icon .elementor-icon {
  background: rgba(32,230,242,.20) !important;
  border-color: var(--mxs-teal-dark) !important;
  color: var(--mxs-teal-dark) !important;
}

/* Timeline nodes keep their circle -- they sit on a drawn line --
   but take the same wash and ink as every other icon. */
.mx-flow .mx-flow__icon .elementor-icon,
.mx-flow__icon .elementor-icon {
  background: var(--mxs-wash) !important;
  border: 1px solid var(--mxs-teal) !important;
  color: var(--mxs-teal) !important;
}
.mx-flow .mx-flow__icon .elementor-icon svg,
.mx-flow__icon .elementor-icon svg { fill: currentColor !important; }

/* ---- cards ---- */
.mx-card:not(.mxr-card) {
  background: #FFFFFF !important;
  border: 1px solid var(--mxs-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--mxs-shadow) !important;
  padding: 28px !important;
}
/* The twelve-step shipment grid stays tighter, same tokens. */
.mx-card.mx-shipstep {
  padding: 20px !important;
  border-radius: 14px !important;
}
.mx-dark .mx-card:not(.mxr-card) {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .mx-b:not(.mx-b--text) .elementor-button { min-height: 50px !important; padding: 0 22px !important; font-size: 14px !important; }
  .mx-b--text .elementor-button { font-size: 12px !important; }
  .mx-card:not(.mxr-card) { padding: 22px !important; border-radius: 16px !important; }
  .mx-card.mx-shipstep { padding: 16px !important; }
}

/* ---- the buttons Elementor does not own ----
   Form submits, the tracking form, the calculators, the 17track
   hand-off and the portal all render their own markup, so they
   never picked up the mx-b classes. Same standard, applied by
   selector instead. */
.mx-btn,
.wpforms-submit,
.mxcalc__go,
.mxp__gcta,
.mx17__go {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px !important;
  height: auto !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--mxs-teal) !important;
  color: #FFFFFF !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, box-shadow .25s ease, transform .2s ease;
}
.mx-btn:hover,
.wpforms-submit:hover,
.mxcalc__go:hover,
.mxp__gcta:hover,
.mx17__go:hover {
  background: var(--mxs-teal-dark) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(0,99,109,.24);
  transform: translateY(-1px);
}

/* The portal sign-out is a quiet control, not a call to action. */
.mxp__out {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 767px) {
  .mx-btn,
  .wpforms-submit,
  .mxcalc__go,
  .mxp__gcta,
  .mx17__go {
    min-height: 50px !important;
    padding: 0 22px !important;
    font-size: 14px !important;
  }
}

/* WPForms paints its submit from its own custom properties and marks the
   rule !important, so the standard is applied by resetting the variables
   rather than by out-shouting the rule. */
.wpforms-container,
.wpforms-container-full {
  --wpforms-button-background-color: #00636D;
  --wpforms-button-background-color-alt: #004E57;
  --wpforms-button-text-color: #FFFFFF;
  --wpforms-button-text-color-alt: #FFFFFF;
  --wpforms-button-border-color: #00636D;
  --wpforms-button-border-color-alt: #004E57;
  --wpforms-button-border-radius: 999px;
  --wpforms-button-border-size: 0px;
}

/* The quote and newsletter submits resisted the selector above; something in
   the form stack paints them directly. Raised specificity rather than left
   inconsistent. The footer subscribe stays on the dark-band teal. */
html body .wpforms-container button.wpforms-submit,
html body .wpforms-container input.wpforms-submit,
html body .wpforms-container-full button[type="submit"] {
  background: #00636D !important;
  background-color: #00636D !important;
  color: #FFFFFF !important;
  border-color: #00636D !important;
}
html body .wpforms-container button.wpforms-submit:hover,
html body .wpforms-container input.wpforms-submit:hover,
html body .wpforms-container-full button[type="submit"]:hover {
  background: #004E57 !important;
  background-color: #004E57 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(0,99,109,.24) !important;
}
html body #xpro-theme-builder-footer .mx-fnews__form button[type="submit"],
html body #xpro-theme-builder-footer .wpforms-container button.wpforms-submit {
  background: #00636D !important;
  background-color: #00636D !important;
  color: #FFFFFF !important;
}
html body #xpro-theme-builder-footer .mx-fnews__form button[type="submit"]:hover,
html body #xpro-theme-builder-footer .wpforms-container button.wpforms-submit:hover {
  background: #004E57 !important;
  background-color: #004E57 !important;
}

/* The footer subscribe sits inside a 288px pill next to its field, so it
   keeps the row height rather than the 54px page standard -- forcing the
   full size here left the button taller than its own input. */
html body #xpro-theme-builder-footer .mx-fnews__form button[type="submit"],
html body #xpro-theme-builder-footer .wpforms-container button.wpforms-submit,
html body .mx-newsletter .wpforms-form button[type="submit"] {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 18px !important;
  font-size: 12.5px !important;
  letter-spacing: .1em !important;
}


/* =========================================================
   60. AUDIENCE CHOOSER -- vertical rhythm
   The card was inheriting Elementor's default 20px widget
   margin on some children and an explicit margin on others,
   so the spacing stacked unevenly: a large gap under the icon,
   almost none between kicker and title, and a dead band under
   the button. Every gap is now stated once, in one place.
   ========================================================= */

.mx-pick__card {
  padding: 32px 30px 30px !important;
  gap: 0 !important;
}

/* Nothing inside the card keeps a default margin. The reset is scoped to
   the inner container so it cannot outrank the per-element gaps below --
   which it did on the first pass, flattening every gap to zero. */
.mx-pick__card > .elementor-element > .elementor-widget-container { margin: 0 !important; }

.mx-pick__card > .mx-pick__icon { margin: 0 0 20px !important; }
.mx-pick__card > .mx-pick__kicker { margin: 0 0 7px !important; }
.mx-pick__card > .mx-pick__title { margin: 0 0 12px !important; }
.mx-pick__card > .mx-pick__copy { margin: 0 0 24px !important; }

.mx-pick__kicker .elementor-heading-title,
.mx-pick__title .elementor-heading-title { margin: 0 !important; }
.mx-pick__copy p:last-child { margin-bottom: 0 !important; }

/* The CTA is pinned to the foot so both cards line up whatever the
   copy length, but it no longer carries a margin of its own. */
.mx-pick__card > .mx-pick__cta {
  margin: auto 0 0 !important;
  padding: 0 !important;
}

@media (max-width: 1024px) {
  .mx-pick__card { padding: 28px 24px 26px !important; }
  .mx-pick__card > .mx-pick__icon { margin-bottom: 18px !important; }
  .mx-pick__card > .mx-pick__copy { margin-bottom: 22px !important; }
}
@media (max-width: 767px) {
  .mx-pick__card { padding: 24px 22px 24px !important; }
  .mx-pick__card > .mx-pick__icon { margin-bottom: 16px !important; }
  .mx-pick__card > .mx-pick__title { margin-bottom: 10px !important; }
  .mx-pick__card > .mx-pick__copy { margin-bottom: 20px !important; }
}


/* =========================================================
   61. PAGE HERO -- one rhythm
   Sourcing, Logistics, Inspection and Tools were built after
   the others and drifted: 36px gaps where the rest use 16px,
   a 44px headline against 50px, and 88/88 padding against
   84/90. Stated once here so every page hero matches and any
   new one inherits it.
   ========================================================= */

.mx-pagehero {
  padding-top: 84px !important;
  padding-bottom: 90px !important;
}
/* The inner container is a flex column with its own row-gap, which was
   stacking on top of any child margin -- 36px of gap plus 16px of margin
   on the later pages. Gap owns the rhythm; children carry none. */
.mx-pagehero > .e-con-inner {
  gap: 16px !important;
  row-gap: 16px !important;
  /* The inner container carried its own 88px vertical padding on some
     pages, stacking on the hero's 84/90 -- 172px of dead space above
     the breadcrumb. The hero owns the vertical inset, not the inner. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.mx-pagehero > .e-con-inner > .elementor-element {
  margin: 0 !important;
}
.mx-pagehero > .e-con-inner > .elementor-element > .elementor-widget-container {
  margin: 0 !important;
}

.mx-pagehero h1.elementor-heading-title,
.mx-pagehero h2.elementor-heading-title {
  font-size: 50px !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .mx-pagehero { padding-top: 64px !important; padding-bottom: 68px !important; }
  .mx-pagehero h1.elementor-heading-title,
  .mx-pagehero h2.elementor-heading-title { font-size: 40px !important; }
}
@media (max-width: 767px) {
  .mx-pagehero { padding-top: 48px !important; padding-bottom: 52px !important; }
  .mx-pagehero > .e-con-inner { gap: 13px !important; row-gap: 13px !important; }
  .mx-pagehero h1.elementor-heading-title,
  .mx-pagehero h2.elementor-heading-title { font-size: 31px !important; line-height: 1.16 !important; }
}


/* =========================================================
   62. SHIPMENT PROCESS -- numbered timeline
   Built to the supplied reference: six across in two rows, the
   number lifted out of the card into a node on a connecting
   line, alternating solid and dotted segments with arrow heads,
   a wrap elbow from 06 down to 12, and the shield strip below.
   Measurements taken from the reference at a 1200px measure:
   166px cards, 40px gutters, 52px nodes, 36px between rows.
   ========================================================= */

/* ---- intro block: the short rule under the sub line ---- */
.mx-shiphead { position: relative; padding-bottom: 30px !important; }
.mx-shiphead::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: #0E6F76;
}

/* ---- the track ---- */
.mx-shipgrid {
  display: flex !important;
  /* the shared grid helper sets flex-basis 100% and flips to a column at
     mobile; either would stack all twelve steps. */
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch;
  gap: 36px 40px !important;
  margin-top: 14px !important;
}
.mx-shipgrid > .e-con {
  flex: 0 0 auto !important;
  width: calc((100% - 204px) / 6) !important;
  position: relative;
  padding-top: 58px !important;
  overflow: visible !important;
}

/* ---- connector: line, then the arrow head in the gutter ---- */
.mx-shipgrid > .e-con::before {
  content: "";
  position: absolute;
  top: 25px;
  left: calc(50% + 26px);
  width: calc(100% - 12px);
  height: 0;
  border-top: 2px solid #A9CFD2;
  z-index: 0;
}
.mx-shipgrid > .e-con::after {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(100% + 22px);
  width: 9px;
  height: 9px;
  border-top: 2px solid #A9CFD2;
  border-right: 2px solid #A9CFD2;
  transform: rotate(45deg);
  z-index: 1;
}
/* the reference dots every third segment */
.mx-shipgrid > .e-con:nth-child(3n+2)::before { border-top-style: dotted; border-top-width: 3px; }

/* no connector off the end of a row */
.mx-shipgrid > .e-con:nth-child(6n)::before,
.mx-shipgrid > .e-con:nth-child(6n)::after,
.mx-shipgrid > .e-con:last-child::before,
.mx-shipgrid > .e-con:last-child::after { display: none; }

/* ---- the wrap elbow, 06 round to 12 ----
   Only drawn in the six-across layout, where the two nodes share
   a column; below that the rows regroup and it would not line up. */
@media (min-width: 1201px) {
  .mx-shipgrid > .e-con:nth-child(6)::after {
    content: "";
    display: block;
    position: absolute;
    top: 25px;
    left: calc(50% + 26px);
    width: calc(50% - 4px);
    height: calc(100% + 37px);
    border-top: 2px solid #A9CFD2;
    border-right: 2px solid #A9CFD2;
    border-bottom: 2px solid #A9CFD2;
    border-radius: 0 22px 22px 0;
    transform: none;
    z-index: 0;
  }
}

/* ---- the node ---- */
.mx-shipgrid .mx-shipstep__n {
  position: absolute;
  top: -58px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  margin: 0 !important;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #0E6F76;
  display: grid;
  place-items: center;
  z-index: 2;
}
.mx-shipgrid .mx-shipstep__n .elementor-heading-title {
  margin: 0 !important;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em !important;
  color: #0E6F76;
}

/* ---- the card ---- */
.mx-shipgrid .mx-card.mx-shipstep {
  padding: 22px 16px 20px !important;
  border-radius: 10px !important;
  border: 1px solid #E1EDEF !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: center;
  align-items: center;
  justify-content: flex-start;
  gap: 14px !important;
  height: 100%;
}
.mx-shipgrid .mx-card.mx-shipstep:hover {
  transform: none;
  border-color: rgba(14,111,118,.38) !important;
  box-shadow: 0 8px 22px rgba(16,74,92,.07) !important;
}

.mx-shipgrid .mx-shipstep__i { margin: 0 !important; }
.mx-shipgrid .mx-shipstep__i .elementor-icon {
  color: #0E6F76 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.mx-shipgrid .mx-shipstep__i .elementor-icon svg {
  width: 34px !important;
  height: 34px !important;
  fill: currentColor !important;
}
.mx-shipgrid .mx-shipstep__t { margin: 0 !important; }
.mx-shipgrid .mx-shipstep__t p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #3F5C5A;
}

/* ---- the strip below ---- */
.mx-shipnote {
  margin-top: 40px !important;
  padding-top: 26px !important;
  border-top: 1px solid #E1EDEF;
  gap: 12px !important;
}
.mx-shipnote .mx-shipnote__i { margin: 0 !important; width: auto !important; }
.mx-shipnote .mx-shipnote__i .elementor-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(32,230,242,.14) !important;
  border: 0 !important;
  color: #0E6F76 !important;
}
.mx-shipnote .mx-shipnote__i .elementor-icon svg {
  width: 15px !important;
  height: 15px !important;
  fill: currentColor !important;
}
.mx-shipnote .mx-shipnote__t { margin: 0 !important; width: auto !important; }
.mx-shipnote .mx-shipnote__t p { margin: 0; font-size: 14.5px; color: #3F5C5A; }

/* ---- regrouping below the six-across measure ---- */
@media (max-width: 1200px) {
  .mx-shipgrid { gap: 34px 30px !important; }
  .mx-shipgrid > .e-con { width: calc((100% - 94px) / 4) !important; }
  .mx-shipgrid > .e-con:nth-child(6n)::before,
  .mx-shipgrid > .e-con:nth-child(6n)::after { display: block; }
  .mx-shipgrid > .e-con:nth-child(4n)::before,
  .mx-shipgrid > .e-con:nth-child(4n)::after { display: none; }
  .mx-shipgrid > .e-con::before { width: calc(100% - 22px); }
  .mx-shipgrid > .e-con::after { left: calc(100% + 16px); }
}
@media (max-width: 900px) {
  .mx-shipgrid { gap: 32px 24px !important; }
  .mx-shipgrid > .e-con { width: calc((100% - 51px) / 3) !important; }
  .mx-shipgrid > .e-con:nth-child(4n)::before,
  .mx-shipgrid > .e-con:nth-child(4n)::after { display: block; }
  .mx-shipgrid > .e-con:nth-child(3n)::before,
  .mx-shipgrid > .e-con:nth-child(3n)::after { display: none; }
  .mx-shipgrid > .e-con::before { width: calc(100% - 28px); }
  .mx-shipgrid > .e-con::after { left: calc(100% + 11px); }
}
@media (max-width: 600px) {
  .mx-shipgrid { gap: 30px 16px !important; }
  .mx-shipgrid > .e-con {
    width: calc((100% - 18px) / 2) !important;
    padding-top: 50px !important;
  }
  .mx-shipgrid > .e-con:nth-child(3n)::before,
  .mx-shipgrid > .e-con:nth-child(3n)::after { display: block; }
  .mx-shipgrid > .e-con:nth-child(2n)::before,
  .mx-shipgrid > .e-con:nth-child(2n)::after { display: none; }
  .mx-shipgrid > .e-con::before { top: 21px; left: calc(50% + 22px); width: calc(100% - 28px); }
  .mx-shipgrid > .e-con::after { top: 17px; left: calc(100% + 5px); }
  .mx-shipgrid .mx-shipstep__n { width: 44px; height: 44px; top: -50px; }
  .mx-shipgrid .mx-shipstep__n .elementor-heading-title { font-size: 14px !important; }
  .mx-shipgrid .mx-card.mx-shipstep { padding: 18px 12px 16px !important; gap: 11px !important; }
  .mx-shipgrid .mx-shipstep__i .elementor-icon svg { width: 28px !important; height: 28px !important; }
  .mx-shipgrid .mx-shipstep__t p { font-size: 12.5px; }
  .mx-shipnote { margin-top: 32px !important; }
  .mx-shipnote .mx-shipnote__t p { font-size: 13.5px; }
}


/* =========================================================
   63. CTA BAND -- restore the ground
   The band is declared in section 53 with a diagonal gradient,
   and the overflow, position and radius from that same block
   all land -- but the computed background was coming back as
   none on every page, leaving white type on a white page.
   Restated here as longhands, last, so nothing can reset it
   through the background shorthand.
   ========================================================= */

.mx-ctaband,
.e-con.mx-ctaband,
.elementor .mx-ctaband {
  background-color: #04100F !important;
}

/* Something later in the cascade refuses a gradient on the container itself
   -- the solid colour lands, background-image comes back as none. The overlay
   renders gradients perfectly well, so the diagonal is layered there instead,
   under the corner highlight that was already on it. */
.mx-ctaband::before {
  background-image:
    radial-gradient(760px 420px at 8% 0%, rgba(32,230,242,.18), transparent 62%),
    linear-gradient(135deg, #0E565D 0%, #073034 42%, #04100F 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
  opacity: 1 !important;
}

/* content above the overlay */
.mx-ctaband > .e-con-inner,
.mx-ctaband > .elementor-element { position: relative; z-index: 1; }


/* =========================================================
   64. MOBILE HEADER -- keep the burger on screen
   The nav block inside the header row is set to 100% width and
   will not shrink, so with the logo beside it the row runs 155px
   wider than its container and the menu button lands 9px past
   the right edge of a 375px screen. It is clipped rather than
   scrollable, so the tap target was simply cut off.
   ========================================================= */

@media (max-width: 767px) {
  #xpro-theme-builder-header .e-con-inner,
  header .e-con-inner {
    flex-wrap: nowrap;
  }
  #xpro-theme-builder-header .e-con-inner > .e-con,
  header .e-con-inner > .e-con {
    min-width: 0;
  }
  #xpro-theme-builder-header .e-con-inner > .e-con:not(:first-child),
  header .e-con-inner > .e-con:not(:first-child) {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    justify-content: flex-end !important;
  }
}