/* ============================================================
   Apex Air — main.css  ·  dark engineering theme  ·  Cairo type
   ============================================================ */

:root{
  --bg:#07182a;
  --bg-1:#0a2036;
  --bg-2:#0c273f;
  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.065);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  --green:#27c06a;
  --green-bright:#3ee389;
  --green-deep:#159a63;
  --teal:#15a0a6;

  --ink:#eef5fb;
  --ink-dim:#c6d5e2;
  --muted:#93a9bb;
  --muted-2:#66798b;

  --f-head:'Cairo','Segoe UI',Tahoma,sans-serif;
  --f-body:'Inter','Segoe UI',Tahoma,sans-serif;

  --step--1:clamp(.8rem, .77rem + .14vw, .88rem);
  --step-0:clamp(1rem, .955rem + .2vw, 1.12rem);
  --step-1:clamp(1.15rem, 1.03rem + .5vw, 1.4rem);
  --step-2:clamp(1.5rem, 1.22rem + 1.1vw, 2.15rem);
  --step-3:clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --step-4:clamp(2.5rem, 1.7rem + 3.6vw, 4.6rem);

  --radius:18px;
  --radius-sm:11px;
  --container:1240px;
  --gutter:clamp(20px, 5vw, 44px);
  --section-y:clamp(72px, 9vw, 128px);
  --header-h:80px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.55);
  --glow-green:0 12px 40px -10px rgba(39,192,106,.45);
}
html[lang^="ar"], body.apex-lang-ar{ --f-body:'Tajawal','Segoe UI',Tahoma,sans-serif; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{overflow-x:hidden}
body{
  margin:0;color:var(--ink-dim);
  font-family:var(--f-body);font-size:var(--step-0);line-height:1.8;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* ambient glow painted straight on the body — no fixed/blurred pseudo layers
     (those made mobile Chrome drop content on scroll) */
  background-color:var(--bg);
  background-image:
    radial-gradient(60vw 46vh at 88% 4%, rgba(39,192,106,.14), transparent 62%),
    radial-gradient(60vw 46vh at 2% 96%, rgba(21,160,166,.12), transparent 62%),
    linear-gradient(180deg,#061421,#07182a 40%,#08182b);
  background-repeat:no-repeat;
  background-attachment:scroll;
}
body.apex-lang-ar{line-height:1.95}

/* desktop only: a slow rotating accent behind everything */
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  body::after{
    content:"";position:fixed;inset:-25% -12% auto auto;width:72vmax;height:72vmax;z-index:-1;pointer-events:none;
    background:conic-gradient(from 210deg at 70% 30%,
      transparent 0deg, rgba(39,192,106,.08) 42deg, transparent 120deg,
      rgba(21,160,166,.08) 210deg, transparent 300deg);
    filter:blur(34px);opacity:.8;animation:ax-spin 70s linear infinite;
  }
  @keyframes ax-spin{to{transform:rotate(360deg)}}
}
/* mobile: no backdrop-filters (also a scroll-repaint trigger on Android) */
@media (max-width:960px){
  .site-header.is-scrolled{backdrop-filter:none;background:rgba(7,20,38,.98)}
  .primary-nav{backdrop-filter:none}
  .apex-stat-strip,.apex-card,.apex-marquee{backdrop-filter:none}
}

h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);line-height:1.18;margin:0 0 .5em;font-weight:800}
h1{font-size:var(--step-4);line-height:1.1}

/* Arabic headings need more leading so tails/diacritics don't touch the next line */
body.apex-lang-ar h1,
body.apex-lang-ar h2,
body.apex-lang-ar h3,
body.apex-lang-ar h4,
body.apex-lang-ar .apex-hero h1,
body.apex-lang-ar .section__head h2,
body.apex-lang-ar .apex-numlist__body h3,
body.apex-lang-ar .apex-cta h2,
body.apex-lang-ar .apex-quote p,
body.apex-lang-ar .elementor-widget-heading .elementor-heading-title{line-height:1.3}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{margin:0 0 1rem}
a{color:var(--green-bright);text-decoration:none;transition:color .18s}
a:hover{color:var(--green)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--green);color:#04121d}
:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px;border-radius:4px}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);width:100%}

/* every injected block sits in a padded section wrapper */
.ax-sec{padding-block:var(--section-y)}
.ax-sec--tight{padding-block:calc(var(--section-y) * .55)}
.ax-sec--band{background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  border-block:1px solid var(--line-soft)}
.ax-sec + .ax-sec{border-block-start:1px solid var(--line-soft)}
.ax-sec--band + .ax-sec, .ax-sec + .ax-sec--band{border-block-start:0}

.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:1000;background:var(--green);color:#04121d;
  padding:10px 18px;border-radius:0 0 var(--radius-sm) var(--radius-sm);font-weight:700}
.skip-link:focus{inset-inline-start:0}
.elementor-widget-html .elementor-widget-container{padding:0}
.elementor-element{background-color:transparent}

/* ---------- eyebrow + heads ---------- */
.apex-eyebrow,.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;font-family:var(--f-head);font-weight:700;
  font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--green-bright);
  margin:0 0 1rem;
}
body.apex-lang-ar .apex-eyebrow{letter-spacing:.04em}
.apex-eyebrow::before{content:"";width:32px;height:3px;flex:none;
  background:linear-gradient(90deg,var(--green),transparent);transform:skewX(-24deg)}

.section__head{max-width:820px;margin:0 auto clamp(36px,5vw,64px);text-align:center}
.section__head .apex-eyebrow{justify-content:center}
.section__head.is-left{margin-inline:0;text-align:start}
.section__head.is-left .apex-eyebrow{justify-content:flex-start}
.section__head h2{margin:0 0 .4em}
.section__head p{color:var(--muted);font-size:var(--step-1);margin:0}
.section__head.is-center{text-align:center}

/* ---------- buttons (longhand, immune to resets) ---------- */
.btn,.elementor-button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-head);font-weight:700;font-size:var(--step-0);letter-spacing:.01em;
  padding:.95em 1.85em;border-radius:var(--radius-sm);border:1.6px solid transparent;
  background-color:#27c06a;background-image:linear-gradient(120deg,#27c06a,#159a63);
  color:#03131e;cursor:pointer;line-height:1;text-align:center;
  box-shadow:var(--glow-green);
  transition:transform .16s, box-shadow .16s, filter .16s, background-color .16s, color .16s, border-color .16s;
}
.btn:hover,.elementor-button.btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 18px 48px -12px rgba(39,192,106,.6);color:#03131e}
.btn--ghost,.elementor-button.btn--ghost{background-color:transparent;background-image:none;
  color:var(--ink);border-color:rgba(255,255,255,.3);box-shadow:none}
.btn--ghost:hover,.elementor-button.btn--ghost:hover{background-color:rgba(255,255,255,.06);
  border-color:var(--green);color:#fff;filter:none}
.btn--wa,.elementor-button.btn--wa{background-color:#25D366;background-image:linear-gradient(120deg,#25D366,#128C4B);color:#04121d}
.btn--sm{padding:.62em 1.15em;font-size:var(--step--1)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.elementor-button.btn .elementor-button-text{color:inherit}

/* ============================================================ HEADER */
/* Pinning the bar — two separate things were stopping it.
   1. Hello Elementor's reset.css sets `body{overflow-x:clip}`, which makes
      position:sticky inert for EVERY descendant (no scrollport to stick in).
      html{overflow-x:hidden} above already contains horizontal overflow at the
      viewport, so body does not need to clip as well.
   2. With HFE the [apex_site_header] shortcode is buried under wrappers
      (#masthead > .elementor-NNN > .e-con > .elementor-widget-shortcode >
      .elementor-shortcode) that are EACH exactly as tall as the header. A
      sticky .site-header is confined to its parent's box, so with 0px of
      travel it scrolls off with them. #masthead is the one wrapper whose own
      parent (#page) spans the document, so that is what gets pinned. The
      doubled-up selector is there to outrank HFE's
      `.ehf-header #masthead{position:relative;z-index:99}` (0,1,1,0) in
      header-footer-elementor.css, which is what was actually unpinning it.
   Its reserved height is held at the unshrunk size so the shrink never
   reflows the page underneath, and the strip the bar vacates must not swallow
   clicks meant for the content sliding under it.
   header.php (no-HFE fallback) puts .site-header straight in <body>, where its
   own sticky works once (1) is fixed — both rules are needed. */
body{overflow-x:visible}
.ehf-header header#masthead,
header#masthead{
  position:sticky;top:0;z-index:100;
  min-height:calc(var(--header-h) + 1px);
  pointer-events:none;
}
#masthead .site-header{pointer-events:auto}

.site-header{position:sticky;top:0;z-index:100;background-color:transparent;
  border-block-end:1px solid transparent;
  transition:background-color .34s ease,border-color .34s ease,backdrop-filter .34s ease,box-shadow .34s ease}
/* scrolled = frosted glass panel + a 1px brand-green hairline + a shorter bar */
.site-header.is-scrolled{
  background-color:rgba(7,20,38,.6);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-block-end:1px solid rgba(39,192,106,.6);
  box-shadow:0 14px 38px -22px rgba(0,0,0,.8);
}
.site-header__inner{display:flex;align-items:center;gap:clamp(14px,3vw,40px);min-height:var(--header-h);padding-block:12px;
  transition:min-height .34s cubic-bezier(.2,.7,.3,1),padding-block .34s cubic-bezier(.2,.7,.3,1)}
.site-header.is-scrolled .site-header__inner{min-height:62px;padding-block:6px}
.site-brand{display:inline-flex;align-items:center;flex:none}
/* Height is the ONLY constraint so the mark keeps its true 1894x340 (5.57:1)
   proportions as it shrinks. The old `max-width:220px` capped the width while
   the height was fixed, which squashed the logo horizontally (220x54 = 4.07:1)
   and made it change shape on scroll. object-fit guards the ratio in case any
   other rule ever clamps the width again. */
.site-brand img{height:clamp(30px,2.9vw,42px);width:auto;max-width:none;object-fit:contain;
  transition:height .34s cubic-bezier(.2,.7,.3,1)}
.site-header.is-scrolled .site-brand img{height:clamp(25px,2.4vw,34px)}
.site-header.is-scrolled .header-actions .btn--sm{padding:.54em 1.05em}
.site-header.is-scrolled .lang-switch a{padding:.34rem .8rem}

.primary-nav{margin-inline-start:auto}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(6px,1.6vw,26px)}
.primary-nav a{display:block;padding:.55rem .4rem;color:var(--ink-dim);font-family:var(--f-head);
  font-weight:600;font-size:1rem;position:relative;white-space:nowrap}
.primary-nav a::after{content:"";position:absolute;inset-inline:.4rem;bottom:.18rem;height:2px;
  background:linear-gradient(90deg,var(--green),var(--teal));transform:scaleX(0);transform-origin:inline-start;transition:transform .22s}
.primary-nav a:hover,.primary-nav .current-menu-item>a{color:#fff}
.primary-nav a:hover::after,.primary-nav .current-menu-item>a::after{transform:scaleX(1)}
.primary-nav .sub-menu{display:none}

.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.primary-nav__foot{display:none}
.site-brand img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.lang-switch{display:flex;font-family:var(--f-head);font-weight:700;font-size:.86rem}
.lang-switch a{padding:.42rem .9rem;border-radius:999px;color:var(--ink-dim);border:1px solid var(--line);
  line-height:1;white-space:nowrap;transition:.16s}
.lang-switch a:hover{color:#04121d;background-color:#27c06a;border-color:#27c06a}
.lang-switch a[lang="ar"]{letter-spacing:0}
.header-phone{display:inline-flex;align-items:center;gap:.4em;color:var(--ink);font-family:var(--f-head);
  font-weight:700;font-size:.92rem;white-space:nowrap}
.header-phone svg{width:1em;height:1em;color:var(--green-bright)}

.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line)!important;border-radius:var(--radius-sm);
  background:var(--panel)!important;color:#fff!important;cursor:pointer;padding:0;place-items:center;
  transition:background .16s,border-color .16s}
.nav-toggle:hover,.nav-toggle:focus,.nav-toggle:active,
body.nav-open .nav-toggle{background:rgba(39,192,106,.2)!important;border-color:var(--green)!important}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:20px;height:2px;background:#fff;transition:.2s;position:relative}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:960px){
  .nav-toggle{display:grid}
  .site-brand img{height:28px}
  /* mobile header = logo (far inline-start) + hamburger (far inline-end) */
  .site-header__inner{justify-content:space-between}
  .header-actions{gap:0;margin-inline-start:0}
  .site-brand{order:-1}
  .header-actions > .lang-switch,
  .header-actions > .btn{display:none}
  /* Full-screen drawer. Closed = fixed off-screen layer; visibility:hidden
     lets the browser skip compositing it (an off-screen translated fixed
     layer otherwise made Chromium drop page tiles on scroll → blank). */
  .primary-nav{position:fixed;inset:0;background:#060f1a;z-index:120;
    margin:0;padding:calc(var(--header-h) + 20px) var(--gutter) max(28px, env(safe-area-inset-bottom));
    overflow-y:auto;transform:translateX(100%);visibility:hidden;
    transition:transform .28s ease, visibility 0s linear .28s;
    display:flex;flex-direction:column;justify-content:center;gap:26px}
  html[dir="rtl"] .primary-nav{transform:translateX(-100%)}
  body.nav-open .primary-nav{transform:translateX(0);visibility:visible;
    transition:transform .28s ease, visibility 0s}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .primary-nav a{padding:1.35rem .3rem;font-size:1.22rem;border-block-end:1px solid var(--line-soft);text-align:center}
  .primary-nav ul li:last-child a{border-block-end:0}
  .primary-nav a::after{display:none}
  /* drawer footer: one centred row of square icons (lang · phone · fb · ig) + CTA last */
  .primary-nav__foot{display:flex;flex-direction:column;align-items:center;gap:20px;
    padding-block-start:24px;border-block-start:1px solid var(--line-soft)}
  .primary-nav__icons{display:flex;gap:14px;justify-content:center;align-items:center;width:100%}
  .primary-nav__icons .lang-switch{display:flex;flex:none}
  .primary-nav__icons .nav-ico,
  .primary-nav__icons .lang-switch--icon a{
    width:46px;height:46px;flex:none;padding:0;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:12px;line-height:1;
    color:var(--ink-dim);transition:.16s;font-family:var(--f-head);font-weight:700;font-size:.9rem;letter-spacing:0}
  .primary-nav__icons .nav-ico:hover,
  .primary-nav__icons .lang-switch--icon a:hover{background:var(--green);border-color:var(--green);color:#04121d}
  .primary-nav__icons .nav-ico svg{width:20px;height:20px;display:block}
  .primary-nav__foot .btn{width:100%;padding:1.05em 1.4em}
  /* close (X) button — sits above the drawer, top corner */
  body.nav-open .nav-toggle{position:relative;z-index:130;width:48px;height:48px;
    background:rgba(39,192,106,.24)!important;border-color:var(--green)!important;
    box-shadow:0 8px 24px -8px rgba(39,192,106,.5)}
  body.nav-open .nav-toggle span::before,
  body.nav-open .nav-toggle span::after{width:24px;height:2.5px;background:#fff}
  /* hide the floating WhatsApp while the drawer is open */
  body.nav-open .wa-float{opacity:0;pointer-events:none}
}

/* ============================================================ HERO */
.apex-hero{position:relative;padding-block:clamp(40px,7vw,80px) clamp(56px,8vw,110px);overflow:hidden}
.apex-hero__inner{position:relative;z-index:2;max-width:56rem}
.apex-hero h1{margin:0 0 1.1rem;color:#fff}
.apex-hero h1 .hl,
.page-hero h1 .hl,
.section__head h2 .hl,
.ax-split__text h2 .hl,
.apex-cta h2 .hl{background:linear-gradient(110deg,var(--green-bright),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* plain green emphasis for inline words in body copy */
.ax-em{color:var(--green-bright);font-weight:700}
.apex-hero__lead{font-size:var(--step-1);color:var(--ink-dim);max-width:42rem;margin:0 0 2rem}
.apex-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-block-end:clamp(38px,6vw,60px)}
.apex-hero__bars{position:absolute;inset-block-start:0;inset-inline-end:-6vw;height:100%;width:44vw;z-index:1;pointer-events:none;opacity:.85}
.apex-hero__bars span{position:absolute;height:19%;inset-inline-end:0;transform:skewX(-22deg);border-radius:6px}
.apex-hero__bars span:nth-child(1){top:8%;width:58%;background:linear-gradient(90deg,transparent,rgba(39,192,106,.5))}
.apex-hero__bars span:nth-child(2){top:34%;width:76%;background:linear-gradient(90deg,transparent,rgba(21,160,166,.4))}
.apex-hero__bars span:nth-child(3){top:60%;width:46%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13))}
@media (max-width:820px){.apex-hero__bars{display:none}}

.apex-stat-strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:44rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  backdrop-filter:blur(8px);
}
.apex-stat-strip .st{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;
  padding:clamp(22px,3vw,32px) clamp(14px,2.4vw,24px);
}
.apex-stat-strip .st + .st{border-inline-start:1px solid var(--line)}
.apex-stat-strip .st::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:22%;height:2px;
  background:linear-gradient(90deg,transparent,var(--green-bright),transparent);
  opacity:.55;transition:opacity .22s,inset-inline .22s;
}
.apex-stat-strip .st:hover::before{opacity:1;inset-inline:8%}
.st-num{
  font-family:var(--f-head);font-weight:800;line-height:1;color:#fff;letter-spacing:-.01em;
  font-size:clamp(2.5rem, 1.6rem + 3.2vw, 3.7rem);
  display:inline-flex;align-items:flex-start;
  text-shadow:0 0 30px rgba(39,192,106,.28);
}
.st-num sup{
  font-size:.4em;font-weight:800;color:var(--green-bright);top:0;
  margin-inline-start:.16em;margin-block-start:.12em;line-height:1;
}
.st-label{
  font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.4;
  max-width:14ch;
}
body.apex-lang-ar .st-label{letter-spacing:.01em;text-transform:none}
@media (max-width:560px){
  .apex-stat-strip{grid-template-columns:1fr}
  .apex-stat-strip .st + .st{border-inline-start:0;border-block-start:1px solid var(--line)}
}

/* ============================================================ MARQUEE */
.apex-marquee{position:relative;overflow:hidden;padding-block:20px;
  border-block:1px solid var(--line);background:rgba(255,255,255,.02);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.apex-marquee__track{display:flex;width:max-content;gap:0;animation:ax-marquee 34s linear infinite}
.apex-marquee:hover .apex-marquee__track{animation-play-state:paused}
.apex-marquee__track > div{display:flex;gap:0;flex:none}
.apex-marquee__item{display:inline-flex;align-items:center;gap:.7em;padding:0 clamp(20px,4vw,44px);
  font-family:var(--f-head);font-weight:700;color:var(--ink);white-space:nowrap;font-size:clamp(.95rem,.8rem + .5vw,1.15rem)}
.apex-marquee__item::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-bright);
  box-shadow:0 0 10px var(--green);flex:none}
@keyframes ax-marquee{to{transform:translateX(-50%)}}
html[dir="rtl"] .apex-marquee__track{animation-name:ax-marquee-rtl}
@keyframes ax-marquee-rtl{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.apex-marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* logo variant of the marquee — square white cards */
.apex-marquee--logos{padding-block:clamp(24px,3.5vw,38px);background:rgba(255,255,255,.02)}
.apex-marquee--logos .apex-marquee__track{animation-duration:52s}
.apex-marquee--logos .apex-marquee__item{padding:0 9px}
.apex-marquee--logos .apex-marquee__item::before{display:none}
.apex-marquee--logos .apex-logo{width:132px;height:132px;aspect-ratio:auto;margin:0;padding:16px}
.apex-marquee--logos .apex-logo--text span{font-size:.9rem}

/* ============================================================ NUMBERED LIST */
.apex-numlist{display:flex;flex-direction:column;border-block-start:1px solid var(--line);margin-block-start:8px}
.apex-numlist__row{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,44px);
  align-items:center;padding-block:clamp(26px,3.4vw,40px);border-block-end:1px solid var(--line);
  color:inherit;transition:padding-inline .2s,background .2s}
.apex-numlist__row:hover{padding-inline-start:12px;background:linear-gradient(90deg,rgba(39,192,106,.06),transparent)}
.apex-numlist__num{font-family:var(--f-head);font-weight:800;
  font-size:clamp(2.4rem, 1.4rem + 4vw, 4.4rem);
  min-width:1.7em;line-height:1;color:rgba(255,255,255,.09);
  -webkit-text-stroke:2px rgba(255,255,255,.3);transition:.2s}
.apex-numlist__row:hover .apex-numlist__num{color:rgba(39,192,106,.14);-webkit-text-stroke-color:var(--green)}
.apex-numlist__body h3{margin:0 0 .35rem;color:var(--ink);font-size:var(--step-2);transition:color .18s}
.apex-numlist__row:hover .apex-numlist__body h3{color:var(--green-bright)}
.apex-numlist__body p{margin:0;color:var(--muted);font-size:var(--step-0);max-width:56ch}
.apex-numlist__chev{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  color:var(--ink-dim);transition:.2s;flex:none}
.apex-numlist__row:hover .apex-numlist__chev{background:var(--green);border-color:var(--green);color:#04121d;transform:translateX(4px)}
html[dir="rtl"] .apex-numlist__chev svg{transform:scaleX(-1)}
/* informational rows (no link) — no chevron, no slide */
div.apex-numlist__row .apex-numlist__chev{display:none}
div.apex-numlist__row:hover{padding-inline-start:0;background:none}
@media (max-width:640px){
  .apex-numlist__row{grid-template-columns:auto 1fr;gap:16px}
  .apex-numlist__chev{display:none}
  .apex-numlist__num{font-size:2.6rem;min-width:1.4em}
}

/* ============================================================ CARD GRID */
.apex-grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.apex-grid--2{grid-template-columns:repeat(2,1fr)}
.apex-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.apex-grid,.apex-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.apex-grid,.apex-grid--2,.apex-grid--4{grid-template-columns:1fr}}
.apex-card{position:relative;display:flex;flex-direction:column;gap:.65rem;padding:clamp(24px,3vw,34px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.apex-card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,var(--green),var(--teal));transform:scaleX(0);transform-origin:inline-start;transition:transform .28s}
.apex-card:hover{transform:translateY(-6px);border-color:rgba(39,192,106,.4);background:var(--panel-2);box-shadow:var(--shadow)}
.apex-card:hover::before{transform:scaleX(1)}
.apex-card h3,.apex-card h4{margin:0;color:var(--ink);font-size:var(--step-1)}
.apex-card p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.75}
.apex-card__num{font-family:var(--f-head);font-weight:800;font-size:1.9rem;color:var(--green-bright);line-height:1}
.apex-card__link{margin-block-start:auto;padding-block-start:.6rem;font-family:var(--f-head);font-weight:700;
  font-size:.92rem;color:var(--green-bright);display:inline-flex;align-items:center;gap:.4em}
html[dir="rtl"] .apex-card__link .ar-flip{display:inline-block;transform:scaleX(-1)}
.apex-card__link:hover{color:#fff}

/* ---------- mini feature cards (About: "in brief") ---------- */
.apex-mini{display:grid;gap:clamp(16px,1.8vw,22px);grid-template-columns:repeat(3,1fr);align-items:stretch}
@media (max-width:860px){.apex-mini{grid-template-columns:1fr}}
.ax-mini-card{
  position:relative;isolation:isolate;overflow:hidden;height:100%;
  display:flex;flex-direction:column;
  padding:clamp(26px,3vw,36px) clamp(24px,2.6vw,32px) clamp(30px,3.2vw,38px);
  border:1px solid var(--line);border-radius:20px;
  background-color:rgba(9,26,44,.72);
  background-image:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.01));
  transition:transform .45s cubic-bezier(.2,.75,.25,1),border-color .45s,box-shadow .45s,background-color .45s;
}
/* top accent that draws itself in */
.ax-mini-card::before{
  content:"";position:absolute;z-index:1;inset-block-start:0;inset-inline:0;height:2px;
  background-image:linear-gradient(90deg,var(--green),var(--teal));
  transform:scaleX(0);transform-origin:inline-start;transition:transform .55s cubic-bezier(.2,.8,.3,1);
}
/* pointer spotlight (JS feeds --mx / --my) */
.ax-mini-card::after{
  content:"";position:absolute;z-index:0;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(39,192,106,.18),transparent 60%);
  transition:opacity .4s;
}
.ax-mini-card > *{position:relative;z-index:1}
.ax-mini-card__idx{
  position:absolute;z-index:0;inset-block-start:.1em;inset-inline-end:.24em;
  font-family:var(--f-head);font-weight:800;font-size:clamp(3.4rem,2.2rem + 3.2vw,5.2rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.075);pointer-events:none;user-select:none;
  transition:-webkit-text-stroke-color .45s,transform .55s cubic-bezier(.2,.8,.3,1);
}
.ax-mini-card__ico{
  display:grid;place-items:center;width:52px;height:52px;flex:none;margin-block-end:1.15rem;
  border-radius:15px;color:var(--green-bright);
  border:1px solid rgba(39,192,106,.32);background-color:rgba(39,192,106,.09);
  transition:transform .5s cubic-bezier(.34,1.35,.5,1),color .35s,background-color .4s,border-color .4s,box-shadow .45s;
}
.ax-mini-card__ico svg{width:26px;height:26px}
.apex-mini h4{color:var(--ink);font-family:var(--f-head);font-size:var(--step-1);font-weight:800;
  letter-spacing:0;text-transform:none;margin:0 0 .6rem;transition:color .3s}
.apex-mini p{margin:0;color:var(--muted);font-size:.99rem;line-height:1.8}
.ax-mini-card__rule{
  position:absolute;z-index:1;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;
  background-image:linear-gradient(90deg,var(--teal),transparent);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .6s cubic-bezier(.2,.8,.3,1) .06s;
}
.ax-mini-card:hover,.ax-mini-card:focus-within{
  transform:translateY(-8px);border-color:rgba(39,192,106,.48);background-color:rgba(11,32,53,.86);
  box-shadow:0 32px 58px -30px rgba(0,0,0,.85),0 0 0 1px rgba(39,192,106,.14);
}
.ax-mini-card:hover::before,.ax-mini-card:focus-within::before{transform:scaleX(1)}
.ax-mini-card:hover::after,.ax-mini-card:focus-within::after{opacity:1}
.ax-mini-card:hover .ax-mini-card__idx{-webkit-text-stroke-color:rgba(39,192,106,.4);transform:translateY(4px) scale(1.05)}
.ax-mini-card:hover .ax-mini-card__ico{
  transform:translateY(-3px) rotate(-8deg) scale(1.06);color:#04121d;
  background-color:var(--green);border-color:var(--green);
  box-shadow:0 16px 32px -12px rgba(39,192,106,.8);
}
.ax-mini-card:hover h4{color:var(--green-bright)}
.ax-mini-card:hover .ax-mini-card__rule{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .ax-mini-card:hover,.ax-mini-card:focus-within{transform:none}
  .ax-mini-card:hover .ax-mini-card__ico{transform:none}
}

.apex-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem 2rem}
@media (max-width:640px){.apex-check{grid-template-columns:1fr}}
.apex-check li{position:relative;padding-inline-start:2em;color:var(--ink-dim);line-height:1.65}
.apex-check li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.3em;width:17px;height:17px;
  border-radius:5px;background:linear-gradient(135deg,var(--green),var(--green-deep));box-shadow:0 0 10px rgba(39,192,106,.5)}
.apex-check li::after{content:"";position:absolute;inset-inline-start:5px;inset-block-start:.5em;width:5px;height:9px;
  border:solid #04121d;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ============================================================ PROCESS STEPS
   Glass step cards threaded by an animated "duct" of moving air. The duct sits
   behind the cards, so it only reads in the gaps between them.
   ============================================================ */
.apex-timeline{
  --ax-duct-y:calc(clamp(24px, 2.8vw, 32px) + 32px); /* card pad-top + half the badge */
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,1.9vw,24px);
}
/* the static duct */
.apex-timeline::before{
  content:"";position:absolute;z-index:0;inset-inline:5%;inset-block-start:var(--ax-duct-y);height:2px;
  background:linear-gradient(90deg,transparent,rgba(39,192,106,.5) 10%,rgba(21,160,166,.5) 90%,transparent);
}
/* the pulse of air travelling down it */
.apex-timeline::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset-inline:5%;inset-block-start:calc(var(--ax-duct-y) - 3px);height:8px;
  background-image:radial-gradient(closest-side,rgba(62,227,137,.95),rgba(62,227,137,0) 72%);
  background-repeat:no-repeat;background-size:130px 100%;
  animation:ax-duct 5.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes ax-duct{
  0%{background-position:-14% 50%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{background-position:114% 50%;opacity:0}
}
html[dir="rtl"] .apex-timeline::after{animation-name:ax-duct-rtl}
@keyframes ax-duct-rtl{
  0%{background-position:114% 50%;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{background-position:-14% 50%;opacity:0}
}

.ax-step{position:relative;z-index:1;display:flex}
.ax-step__inner{
  position:relative;isolation:isolate;flex:1;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(24px,2.8vw,32px) clamp(18px,2vw,26px) clamp(26px,3vw,34px);
  border:1px solid var(--line);border-radius:20px;
  background-color:rgba(9,26,44,.86);
  background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.012));
  box-shadow:0 20px 44px -30px rgba(0,0,0,.8);
  transition:transform .45s cubic-bezier(.2,.75,.25,1),border-color .45s,box-shadow .45s,background-color .45s;
}
/* a diagonal sheen that sweeps across on hover */
.ax-step__inner::before{
  content:"";position:absolute;z-index:0;inset-block:-40%;width:55%;inset-inline-start:-70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);
  transform:skewX(-18deg);opacity:0;transition:opacity .3s;
}
/* pointer spotlight (JS feeds --mx / --my) */
.ax-step__inner::after{
  content:"";position:absolute;z-index:0;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(39,192,106,.2),transparent 62%);
  transition:opacity .4s;
}
.ax-step__inner > *{position:relative;z-index:1}

/* the oversized outline numeral in the card corner */
.ax-step__ghost{
  position:absolute;z-index:0;inset-block-start:-.12em;inset-inline-end:.06em;
  font-family:var(--f-head);font-weight:800;font-size:clamp(4.6rem,3rem + 4.4vw,7rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);
  transition:transform .55s cubic-bezier(.2,.75,.25,1),-webkit-text-stroke-color .45s,opacity .45s;
  pointer-events:none;user-select:none;
}

/* the badge: gradient tile, icon by default, index on hover */
.ax-step__badge{
  position:relative;display:grid;place-items:center;flex:none;
  width:64px;height:64px;border-radius:19px;margin-block-end:clamp(16px,2vw,22px);
  color:#04121d;background-image:linear-gradient(140deg,var(--green-bright),var(--green-deep));
  box-shadow:0 0 0 6px rgba(9,26,44,.92),0 14px 30px -12px rgba(39,192,106,.65);
  transition:transform .5s cubic-bezier(.34,1.4,.5,1),box-shadow .45s,border-radius .5s;
}
.ax-step__badge::before{
  content:"";position:absolute;inset:-9px;border-radius:26px;border:1px solid rgba(39,192,106,.42);
  opacity:0;transform:scale(.86);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.3,1);
}
.ax-step__ico,.ax-step__n{grid-area:1/1;display:grid;place-items:center;transition:opacity .34s,transform .44s cubic-bezier(.2,.8,.3,1)}
.ax-step__ico svg{width:30px;height:30px;stroke-width:1.7}
.ax-step__n{font-family:var(--f-head);font-weight:800;font-size:1.35rem;font-style:normal;
  opacity:0;transform:scale(.6) rotate(-16deg)}

.apex-timeline h4{margin:0 0 .5rem;color:var(--ink);font-size:var(--step-1);transition:color .3s}
.apex-timeline p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.75;max-width:32ch}
/* the fill bar that runs along the card foot */
.ax-step__rule{
  position:absolute;z-index:1;inset-block-end:0;inset-inline:0;height:3px;
  background-image:linear-gradient(90deg,var(--green),var(--teal));
  transform:scaleX(0);transform-origin:inline-start;transition:transform .55s cubic-bezier(.2,.8,.3,1);
}

/* ---- hover ---- */
.ax-step:hover .ax-step__inner,
.ax-step:focus-within .ax-step__inner{
  transform:translateY(-10px);border-color:rgba(39,192,106,.5);
  background-color:rgba(11,32,53,.92);
  box-shadow:0 34px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(39,192,106,.16);
}
.ax-step:hover .ax-step__inner::after,
.ax-step:focus-within .ax-step__inner::after{opacity:1}
.ax-step:hover .ax-step__inner::before{opacity:1;animation:ax-sheen .95s cubic-bezier(.3,.5,.3,1)}
@keyframes ax-sheen{from{inset-inline-start:-70%}to{inset-inline-start:130%}}
.ax-step:hover .ax-step__ghost{transform:translateY(6px) scale(1.06);-webkit-text-stroke-color:rgba(39,192,106,.42)}
.ax-step:hover .ax-step__badge{transform:translateY(-4px) rotate(-6deg);border-radius:24px;
  box-shadow:0 0 0 6px rgba(9,26,44,.92),0 20px 40px -12px rgba(39,192,106,.85)}
.ax-step:hover .ax-step__badge::before{opacity:1;transform:scale(1)}
.ax-step:hover .ax-step__ico{opacity:0;transform:scale(.55) rotate(16deg)}
.ax-step:hover .ax-step__n{opacity:1;transform:scale(1) rotate(6deg)}
.ax-step:hover h4{color:var(--green-bright)}
.ax-step:hover .ax-step__rule{transform:scaleX(1)}

@media (max-width:1080px){
  .apex-timeline{grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,22px)}
  .apex-timeline::before,.apex-timeline::after{display:none}
}
@media (max-width:560px){
  .apex-timeline{grid-template-columns:1fr}
  .ax-step__inner{align-items:flex-start;text-align:start}
  .apex-timeline p{max-width:none}
  .ax-step__badge{width:56px;height:56px;border-radius:17px}
  .ax-step__ico svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  .apex-timeline::after{display:none}
  .ax-step:hover .ax-step__inner{transform:none}
  .ax-step:hover .ax-step__inner::before{animation:none;opacity:0}
}

/* ============================================================ PARTNERS / TRUSTED */
.apex-trusted{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(22px,4vw,56px);
  padding:clamp(26px,3vw,40px) clamp(22px,4vw,48px);border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.apex-trusted span{font-family:var(--f-head);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-size:clamp(.95rem, .7rem + .8vw, 1.25rem);opacity:.72;transition:opacity .2s,color .2s}
body.apex-lang-ar .apex-trusted span{letter-spacing:.02em}
.apex-trusted span:hover{opacity:1;color:var(--ink)}

/* ============================================================ CLIENT LOGO WALL */
.apex-logo-group{margin-block-start:clamp(28px,4vw,44px)}
.apex-logo-group > h3{font-size:var(--step-1);color:var(--ink);margin:0 0 1rem;display:flex;align-items:center;gap:.6em}
.apex-logo-group > h3::before{content:"";width:26px;height:3px;background:linear-gradient(90deg,var(--green),transparent);
  transform:skewX(-24deg);flex:none}
.apex-logo-wall{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.apex-logo-wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.apex-logo-wall{grid-template-columns:repeat(2,1fr)}}
.apex-logo{aspect-ratio:1/1;display:grid;place-items:center;text-align:center;padding:12%;
  border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.5);transition:border-color .2s,transform .2s,box-shadow .2s}
.apex-logo:hover{border-color:rgba(39,192,106,.55);transform:translateY(-4px);box-shadow:0 18px 40px -14px rgba(39,192,106,.35)}
.apex-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.apex-logo--text span{font-family:var(--f-head);font-weight:800;font-size:.92rem;line-height:1.2;
  color:#0E2B47;letter-spacing:.005em}

/* ============================================================ QUOTE */
.apex-quote{position:relative;max-width:50rem;margin-inline:auto;text-align:center;padding-block:clamp(52px,7vw,84px)}
.apex-quote::before{content:"\201C";position:absolute;inset-block-start:-.05em;inset-inline-start:50%;transform:translateX(-50%);
  font-family:Georgia,serif;font-size:clamp(3.4rem, 8vw, 5.6rem);color:rgba(39,192,106,.24);line-height:1}
.apex-quote p{position:relative;font-family:var(--f-head);font-weight:800;color:#fff;
  font-size:clamp(1.35rem, 1rem + 2vw, 2.25rem);line-height:1.45;margin:0}
.apex-quote .hl{color:var(--green-bright)}
.apex-quote cite{display:block;margin-block-start:1.3rem;font-style:normal;color:var(--muted);
  letter-spacing:.14em;text-transform:uppercase;font-size:var(--step--1)}
body.apex-lang-ar .apex-quote cite{letter-spacing:.03em;text-transform:none}

/* ============================================================ CTA */
.apex-cta{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:24px;border:1px solid var(--line);
  padding:clamp(44px,6vw,76px) clamp(24px,6vw,72px);
  text-align:center;
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(39,192,106,.16), transparent 60%),
    linear-gradient(180deg,#0b2436,#081a2b);
}
/* single crisp top accent line */
.apex-cta::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--green),var(--teal),transparent)}

.apex-cta__inner{position:relative;z-index:1;max-width:40rem;margin-inline:auto;
  display:flex;flex-direction:column;align-items:center}
img.apex-cta__logo{height:clamp(34px,4vw,44px);width:auto;max-width:none;object-fit:contain;margin-block-end:1.4rem;opacity:.96}
.apex-cta__eyebrow{font-family:var(--f-head);font-weight:700;font-size:var(--step--1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--green-bright);margin-block-end:.7rem}
body.apex-lang-ar .apex-cta__eyebrow{letter-spacing:.06em}
.apex-cta h2{color:#fff;margin:0;font-size:clamp(1.7rem,1.15rem+2.2vw,2.7rem);line-height:1.22}
.apex-cta__sub{color:var(--ink-dim);font-size:var(--step-0);margin:.7rem 0 0;max-width:34rem}
.apex-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-block-start:1.9rem}
.apex-cta__btns .btn{gap:.55em}
.apex-cta__bico{display:inline-grid;place-items:center;width:1.2em;height:1.2em}
.apex-cta__bico svg{width:100%;height:100%}
.btn--lg{padding:1em 1.9em;font-size:var(--step-0)}
.apex-cta__trust{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;
  margin-block-start:1.7rem;padding-block-start:1.5rem;border-block-start:1px solid var(--line-soft);width:100%}
.apex-cta__chip{position:relative;display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-head);
  font-weight:600;font-size:.86rem;color:var(--ink-dim)}
.apex-cta__chip::before{content:"";width:16px;height:16px;border-radius:5px;flex:none;
  background:linear-gradient(135deg,var(--green),var(--green-deep));box-shadow:0 0 8px rgba(39,192,106,.45)}
.apex-cta__chip::after{content:"";position:absolute;inset-inline-start:5px;top:50%;width:4px;height:8px;
  border:solid #04121d;border-width:0 2px 2px 0;transform:translateY(-60%) rotate(45deg)}
.apex-cta__phone{display:inline-flex;align-items:center;gap:.45em;margin-inline-start:.3rem;
  font-family:var(--f-head);font-weight:700;color:#fff}
.apex-cta__phone:hover{color:var(--green-bright)}
.apex-cta__phone svg{width:1.05em;height:1.05em;color:var(--green-bright)}
@media (max-width:560px){.apex-cta__trust{gap:.5rem .9rem}}

/* ============================================================ INNER PAGE */
.page-hero{position:relative;padding-block:clamp(24px,4vw,48px) clamp(44px,6vw,72px);overflow:hidden}
/* full-width container so the hero copy sits flush with the page start edge,
   like every other section — not a narrow centred column */
.page-hero .container{max-width:var(--container);position:relative;z-index:2}
.page-hero h1{color:#fff;margin:0;max-width:24ch}
.page-hero.is-oneline h1{max-width:none}
.page-hero p{color:var(--ink-dim);font-size:var(--step-1);margin:.9rem 0 0;max-width:46rem}
.page-hero::after{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-10%;width:48vmax;height:48vmax;
  background:radial-gradient(circle,rgba(21,160,166,.15),transparent 60%);pointer-events:none}

.page-content{max-width:54rem;margin-inline:auto}
.page-content h2{color:var(--ink);margin-block:1.8em .6em;font-size:var(--step-2)}
.page-content h2:first-child{margin-block-start:0}
.page-content p{color:var(--ink-dim)}
.page-content ul{padding-inline-start:0;list-style:none;display:grid;gap:.7rem;margin-block:1.1rem}
.page-content li{position:relative;padding-inline-start:1.8em;color:var(--ink-dim)}
.page-content li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.55em;width:12px;height:12px;
  border-radius:4px;background:linear-gradient(135deg,var(--green),var(--green-deep))}
.page-cta{margin-block-start:2.6rem;display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================ FOOTER */
.site-footer{background:#050f18;color:var(--muted);padding-block:clamp(54px,7vw,84px) 0;border-block-start:1px solid var(--line)}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:clamp(30px,4vw,54px);grid-template-columns:1.5fr 1fr 1.1fr;align-items:start}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-brand img{height:clamp(38px,4vw,52px);width:auto;max-width:none;object-fit:contain}
.footer-brand{margin-block-end:1.1rem;display:inline-flex}
.site-footer h4{color:#fff;font-size:.98rem;letter-spacing:.1em;text-transform:uppercase;margin-block-end:1.1rem}
body.apex-lang-ar .site-footer h4{letter-spacing:.02em;text-transform:none}
.footer-links,.footer-contact{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;font-size:.96rem}
.footer-contact li{display:flex;gap:.6em;align-items:flex-start}
.footer-contact svg{width:1.05em;height:1.05em;flex:none;margin-block-start:.3em;color:var(--green-bright)}
.footer-social{display:flex;gap:10px;margin-block-start:1.2rem}
.footer-social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;transition:.18s}
.footer-social a:hover{background:var(--green);border-color:var(--green);color:#04121d}
.footer-social svg{width:17px;height:17px}
.footer-bottom{border-block-start:1px solid var(--line);margin-block-start:clamp(32px,4vw,48px);padding-block:22px;
  font-size:.84rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted-2)}

/* ============================================================ WHATSAPP FLOAT */
.wa-float{position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:200;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C4B);display:grid;place-items:center;
  box-shadow:0 12px 36px -6px rgba(37,211,102,.6);transition:transform .18s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;color:#fff}
@media print{.wa-float,.site-header{display:none}}

/* ============================================================ ELEMENTOR HARMONY */
.elementor-widget-heading .elementor-heading-title{font-family:var(--f-head);color:var(--ink);font-weight:800}
.elementor-widget-text-editor{font-family:var(--f-body);color:var(--ink-dim)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   NATIVE-WIDGET HARMONY  ·  Pro Elements rebuild
   Maps real Elementor widget markup (heading / text-editor /
   button / icon-list) onto the design classes above so the
   dark theme is unchanged while every block stays editable.
   ============================================================ */

/* --- boxed inner container --- */
.e-con.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.e-con.container > .e-con-inner{width:100%}

/* --- heading widgets that borrow a wrapper's own typography --- */
.apex-eyebrow .elementor-heading-title,
.apex-cta__eyebrow .elementor-heading-title,
.apex-card__num .elementor-heading-title,
.apex-numlist__num .elementor-heading-title{
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;margin:0
}
.apex-eyebrow.elementor-widget-heading{margin:0 0 1rem}
.apex-hero .elementor-heading-title{color:#fff}
.apex-cta h2 .elementor-heading-title,.apex-cta .elementor-heading-title{color:#fff}

/* --- buttons --- */
.ax-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-head);font-weight:700;font-size:var(--step-0);letter-spacing:.01em;
  padding:.95em 1.85em;border-radius:var(--radius-sm);border:1.6px solid transparent;
  background-color:#27c06a;background-image:linear-gradient(120deg,#27c06a,#159a63);
  color:#03131e;line-height:1;text-align:center;box-shadow:var(--glow-green);
  transition:transform .16s,box-shadow .16s,filter .16s,background-color .16s,color .16s,border-color .16s;
}
.ax-btn .elementor-button:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 18px 48px -12px rgba(39,192,106,.6);color:#03131e}
.ax-btn .elementor-button .elementor-button-text{color:inherit;font-size:inherit}
.ax-btn--ghost .elementor-button{background-color:transparent;background-image:none;color:var(--ink);
  border-color:rgba(255,255,255,.3);box-shadow:none}
.ax-btn--ghost .elementor-button:hover{background-color:rgba(255,255,255,.06);border-color:var(--green);color:#fff;filter:none}
.ax-btn--wa .elementor-button{background-color:#25D366;background-image:linear-gradient(120deg,#25D366,#128C4B);color:#04121d}
.ax-btn--lg .elementor-button{padding:1em 1.9em;font-size:var(--step-0)}
.apex-hero__cta.e-con,.apex-cta__btns.e-con{flex-wrap:wrap}

/* --- checklist (icon-list widget, icons drawn by CSS) --- */
.apex-check .elementor-icon-list-items{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem 2rem}
.apex-check .elementor-icon-list-item{margin:0;padding:0;border:0;position:static}
.apex-check .elementor-icon-list-icon{display:none}
/* kill the plain-<li> checkmark rules (and any Elementor divider) that would
   otherwise leak onto the list item and streak across the block */
.apex-check .elementor-icon-list-item::before,
.apex-check .elementor-icon-list-item::after{content:none !important;display:none !important;border:0 !important;transform:none !important}
.apex-check .elementor-icon-list-text{position:relative;padding-inline-start:2em;
  color:var(--ink-dim);line-height:1.65;font-family:var(--f-body);font-size:var(--step-0)}
.apex-check .elementor-icon-list-text::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.3em;
  width:17px;height:17px;border-radius:5px;background:linear-gradient(135deg,var(--green),var(--green-deep));
  box-shadow:0 0 10px rgba(39,192,106,.5)}
.apex-check .elementor-icon-list-text::after{content:"";position:absolute;inset-inline-start:5px;inset-block-start:.5em;
  width:5px;height:9px;border:solid #04121d;border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (max-width:640px){.apex-check .elementor-icon-list-items{grid-template-columns:1fr}}
/* checklist sitting in a half-width grid column has no room for two columns */
.apex-grid--2 .apex-check .elementor-icon-list-items{grid-template-columns:1fr}

/* --- numbered list rebuilt as containers --- */
.apex-numlist.e-con{display:flex;flex-direction:column}
.apex-numlist__row.e-con{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.apex-numlist__row.is-info .apex-numlist__chev,
.apex-numlist__row.is-info::after{display:none}
.apex-numlist__row.is-info:hover{padding-inline-start:0;background:none}
a.apex-numlist__row::after{content:"";width:46px;height:46px;flex:none;align-self:center;
  border:1px solid var(--line);border-radius:50%;background:var(--ink-dim);transition:.2s;
  -webkit-mask:no-repeat center/18px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>');
  mask:no-repeat center/18px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>')}
html[dir="rtl"] a.apex-numlist__row::after{transform:scaleX(-1)}
a.apex-numlist__row:hover::after{background:var(--green-bright);transform:translateX(4px)}
html[dir="rtl"] a.apex-numlist__row:hover::after{transform:scaleX(-1) translateX(4px)}
.apex-numlist__body.e-con{gap:.35rem}

/* --- timeline rebuilt as containers --- */
.apex-timeline::before{display:none}   /* drop the horizontal connector line */
.apex-timeline > .e-con{position:relative;text-align:center;padding-block-start:78px;
  display:flex;flex-direction:column;align-items:center}
.apex-timeline > .e-con::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-head);font-weight:800;font-size:1.05rem;color:#04121d;
  background:linear-gradient(135deg,var(--green),var(--green-deep));
  box-shadow:var(--glow-green),0 0 0 6px rgba(7,24,42,1)}
@media (max-width:860px){.apex-timeline > .e-con{padding-block-start:64px}}

/* --- card grid children --- */
.elementor-element.apex-card{background:var(--panel)}
.apex-card .elementor-heading-title{color:var(--ink);font-size:var(--step-1)}
.apex-card__num .elementor-heading-title{color:var(--green-bright);font-size:1.9rem;font-weight:800}

/* --- section head as a container --- */
.section__head.e-con{display:flex;flex-direction:column}
.section__head.is-center.e-con{align-items:center}

/* --- CTA inner --- */
.apex-cta__inner.e-con{align-items:center}
.apex-cta__trust.elementor-widget-html{width:100%}

/* ============================================================
   IMAGE COMPONENTS  ·  .ax-figure / .ax-split / .ax-media-card
   .ax-splithero / .ax-why  — added for the About / Services /
   Sectors visual rebuild. Dark-theme consistent, RTL-safe.
   ============================================================ */

/* ---------- framed image ---------- */
.ax-figure{
  position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  box-shadow:0 22px 54px -26px rgba(0,0,0,.62);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.ax-figure::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--green),var(--teal))}
.ax-figure::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;height:40%;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(4,12,20,.55))}
.ax-figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.ax-figure--tall img{aspect-ratio:3/4}
.ax-figure--wide img{aspect-ratio:16/10}
.ax-figure--sq img{aspect-ratio:1/1}
.ax-figure--banner img{aspect-ratio:auto;height:clamp(220px, 34vw, 420px)}
.ax-figure:hover{transform:translateY(-4px);border-color:rgba(39,192,106,.4);
  box-shadow:0 30px 64px -26px rgba(0,0,0,.72)}
@media (prefers-reduced-motion:reduce){.ax-figure:hover{transform:none}}

/* ---------- split image / text row ---------- */
.ax-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.ax-split__media{min-width:0}
.ax-split__text{min-width:0;max-width:40rem}
.ax-split--flip .ax-split__media{order:2}
.ax-split__text > .apex-eyebrow{margin-block-end:.9rem}
.ax-split__text h2{margin:0 0 .55em}
.ax-split__text > p{color:var(--ink-dim);font-size:var(--step-1);margin:0 0 1rem}
.ax-split__text .apex-check{grid-template-columns:1fr;gap:.7rem;margin-block-start:1.1rem}
.ax-split__text .btn,.ax-split__text .apex-btn-row{margin-block-start:1.6rem}
@media (max-width:860px){
  .ax-split{grid-template-columns:1fr;gap:26px}
  .ax-split--flip .ax-split__media{order:0}
  .ax-split__text{max-width:none}
}

/* ---------- media card (image on top) ---------- */
.ax-media-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.ax-media-card:hover{transform:translateY(-6px);border-color:rgba(39,192,106,.4);box-shadow:var(--shadow)}
.ax-media-card .ax-figure{border:0;border-radius:0;box-shadow:none}
.ax-media-card .ax-figure:hover{transform:none}
.ax-media-card .ax-figure::after{height:52%}
.ax-media-card .ax-figure img{aspect-ratio:16/10}
.ax-media-card__body{display:flex;flex-direction:column;gap:.55rem;padding:clamp(20px,2.6vw,28px)}
.ax-media-card__body .apex-eyebrow{margin:0 0 .2rem}
.ax-media-card__body h3{margin:0;color:var(--ink);font-size:var(--step-1)}
.ax-media-card__body p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.7}
.ax-media-card__body .apex-check{grid-template-columns:1fr;gap:.5rem;margin-block-start:.35rem}
.ax-media-card__body .apex-check li{font-size:.92rem;padding-inline-start:1.8em}
@media (prefers-reduced-motion:reduce){.ax-media-card:hover{transform:none}}

/* ---------- page hero with a side image ---------- */
.page-hero.ax-splithero .container{
  max-width:var(--container);display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,64px);align-items:center;
}
.page-hero.ax-splithero h1{font-size:clamp(2rem, 1.3rem + 2.6vw, 3.4rem)}
.page-hero.ax-splithero .ax-splithero__copy{max-width:38rem}
@media (max-width:900px){
  .page-hero.ax-splithero .container{grid-template-columns:1fr;gap:30px}
  .page-hero.ax-splithero .ax-figure{order:-1}
  .page-hero.ax-splithero .ax-figure img{aspect-ratio:16/10}
}

/* ---------- hero title forced onto one line (Services / Sectors) ---------- */
.page-hero.is-oneline h1{text-wrap:balance;font-size:clamp(1.9rem, 1.15rem + 2.4vw, 3.2rem)}
@media (min-width:1024px){.page-hero.is-oneline h1{white-space:nowrap}}

/* ---------- "Why Apex Air" spec-sheet ---------- */
.ax-why{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,5vw,64px);align-items:start}
.ax-why__media{position:sticky;top:calc(var(--header-h) + 20px)}
.ax-why__media .ax-figure img{aspect-ratio:3/4}
.ax-why__chips{position:absolute;inset-block-end:16px;inset-inline:16px;z-index:3;
  display:flex;gap:10px;flex-wrap:wrap}
.ax-why__chip{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:12px;
  background:rgba(6,15,26,.72);border:1px solid var(--line);backdrop-filter:blur(6px)}
.ax-why__chip b{font-family:var(--f-head);font-weight:800;color:#fff;font-size:1.3rem;line-height:1}
.ax-why__chip span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
body.apex-lang-ar .ax-why__chip span{letter-spacing:0;text-transform:none}
.ax-why__list{display:flex;flex-direction:column}
.ax-why__row{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,30px);
  align-items:baseline;padding-block:clamp(18px,2.5vw,26px);border-block-end:1px solid var(--line);
  transition:padding-inline .2s}
.ax-why__row:first-child{padding-block-start:0}
.ax-why__row:last-child{border-block-end:0;padding-block-end:0}
.ax-why__row:hover{padding-inline-start:8px}
.ax-why__num{font-family:var(--f-head);font-weight:800;line-height:1;
  font-size:clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  color:var(--green);transition:color .2s}
.ax-why__row:hover .ax-why__num{color:var(--green-bright)}
.ax-why__row h3{margin:0 0 .3rem;color:var(--ink);font-size:var(--step-1)}
.ax-why__row p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.7;max-width:54ch}
@media (max-width:900px){
  .ax-why{grid-template-columns:1fr;gap:28px}
  .ax-why__media{position:static}
  .ax-why__media .ax-figure img{aspect-ratio:16/10}
}

/* ---------- stat strip: 4 up ---------- */
.apex-stat-strip{grid-template-columns:repeat(4,1fr);max-width:54rem}
.apex-stat-strip .st-num{font-size:clamp(1.85rem, 1.15rem + 2.3vw, 3rem);letter-spacing:-.02em}
@media (max-width:900px){
  .apex-stat-strip{grid-template-columns:repeat(2,1fr)}
  .apex-stat-strip .st:nth-child(odd){border-inline-start:0}
  .apex-stat-strip .st:nth-child(n+3){border-block-start:1px solid var(--line)}
}

/* ---------- header: centred primary nav (desktop only) ---------- */
@media (min-width:961px){
  .site-header__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .site-header__inner .primary-nav{margin-inline-start:0;justify-self:center}
  .site-header__inner .header-actions{justify-self:end}
  .primary-nav > ul{justify-content:center}
}

/* ============================================================
   CONTACT  ·  two columns that always match in height
   The grid stretches both cards; inside each card the textarea
   (form) and the map (info) are the flexible rows that soak up
   the difference, so the two panels stay level at every width.
   ============================================================ */
.ax-contact{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);align-items:stretch;
  /* every row resolves to the tallest card in it, so the pair matches
     side by side AND stacked */
  grid-auto-rows:1fr;
}
@media (max-width:900px){.ax-contact{grid-template-columns:1fr}}

.ax-contact__col{height:100%;display:flex;flex-direction:column;gap:0;
  padding:clamp(24px,3vw,38px);border-radius:20px}
.ax-contact__col > .apex-eyebrow{margin:0 0 .7rem}
.ax-contact__col > h3{margin:0 0 1.3rem;color:var(--ink);font-size:var(--step-2)}

/* ---- form ---- */
.ax-form{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
.ax-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:520px){.ax-form__row{grid-template-columns:1fr}}
.ax-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.ax-field--grow{flex:1;min-height:118px}
.ax-field__label{font-family:var(--f-head);font-weight:700;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
body.apex-lang-ar .ax-field__label{letter-spacing:0;text-transform:none;font-size:.88rem}
.ax-field input,.ax-field textarea{
  width:100%;font-family:inherit;font-size:.98rem;line-height:1.6;color:var(--ink);
  padding:.85em 1em;border-radius:12px;border:1px solid var(--line);
  background-color:rgba(255,255,255,.035);
  transition:border-color .22s,background-color .22s,box-shadow .22s;
}
.ax-field textarea{flex:1;min-height:110px;resize:vertical}
.ax-field input::placeholder,.ax-field textarea::placeholder{color:var(--muted-2)}
.ax-field input:hover,.ax-field textarea:hover{border-color:rgba(255,255,255,.2)}
.ax-field input:focus,.ax-field textarea:focus{
  outline:none;border-color:var(--green);background-color:rgba(39,192,106,.06);
  box-shadow:0 0 0 3px rgba(39,192,106,.16);
}
.ax-form__foot{display:flex;flex-direction:column;gap:.7rem;margin-block-start:auto;padding-block-start:.35rem}
.ax-form__foot .btn{width:100%}
.ax-form__foot small{color:var(--muted-2);font-size:.85rem;line-height:1.6}
.ax-btn-ico{display:inline-grid;place-items:center;width:1.15em;height:1.15em;flex:none}
.ax-btn-ico svg{width:100%;height:100%}

/* ---- details + map ---- */
.ax-contact__list{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.85rem}
.ax-contact__list li{display:flex;gap:.85rem;align-items:flex-start;
  padding:.85rem 1rem;border:1px solid var(--line-soft);border-radius:14px;
  background-color:rgba(255,255,255,.025);transition:border-color .25s,background-color .25s}
.ax-contact__list li:hover{border-color:rgba(39,192,106,.4);background-color:rgba(39,192,106,.06)}
.ax-contact__ico{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;
  color:var(--green-bright);border:1px solid rgba(39,192,106,.28);background-color:rgba(39,192,106,.08);
  transition:background-color .25s,color .25s}
.ax-contact__ico svg{width:17px;height:17px}
.ax-contact__list li:hover .ax-contact__ico{background-color:var(--green);color:#04121d}
.ax-contact__txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ax-contact__txt b{font-family:var(--f-head);font-weight:700;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
body.apex-lang-ar .ax-contact__txt b{letter-spacing:0;text-transform:none;font-size:.86rem}
.ax-contact__txt a,.ax-contact__txt span{color:var(--ink);font-size:.99rem;word-break:break-word}
.ax-contact__txt a:hover{color:var(--green-bright)}
.ax-contact__map{flex:1;min-height:220px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background-color:rgba(255,255,255,.03)}
.ax-contact__map iframe{width:100%;height:100%;min-height:220px;border:0;display:block;filter:grayscale(.25) contrast(1.05)}
.ax-contact__cta{margin-block-start:1rem;width:100%}

/* pointer spotlight on the two contact panels */
.apex-card.ax-spot::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(39,192,106,.14),transparent 62%);
  transition:opacity .4s;
}
.apex-card.ax-spot:hover::after,.apex-card.ax-spot:focus-within::after{opacity:1}
.apex-card.ax-spot > *{position:relative;z-index:1}
/* the contact panels are containers, not teasers: no lift, keep them level */
.apex-card.ax-contact__col:hover{transform:none;box-shadow:var(--shadow)}

/* ============================================================ FOOTER CREDIT */
.footer-bottom{align-items:center}
.footer-bottom__mid{flex:1 1 auto;text-align:center}
@media (max-width:900px){.footer-bottom__mid{display:none}}
.footer-credit{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.footer-credit__link{
  position:relative;font-family:var(--f-head);font-weight:700;letter-spacing:.02em;
  color:var(--ink);transition:color .22s;
}
.footer-credit__link::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-3px;height:1.5px;
  background-image:linear-gradient(90deg,var(--green),var(--teal));
  transform:scaleX(0);transform-origin:inline-start;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.footer-credit__link:hover{color:var(--green-bright)}
.footer-credit__link:hover::after{transform:scaleX(1)}

/* ============================================================ HERO AIRFLOW FX */
.apex-hero__fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(125% 105% at 50% 42%,#000 52%,transparent 100%);
  mask-image:radial-gradient(125% 105% at 50% 42%,#000 52%,transparent 100%)}
.apex-hero__fx canvas{display:block;width:100%;height:100%}
.apex-hero__bars{z-index:1}
.apex-hero__inner{z-index:2}

/* ============================================================
   SCROLL REVEAL
   The resting (hidden) state is written against real selectors and
   armed only by the .ax-anim class that a tiny inline head script
   adds before first paint — so nothing ever flashes in and back
   out, and the page stays fully readable if the JS never runs
   (the same head script drops .ax-anim again after a timeout if
   main.js has not reported in).
   JS only adds .is-in and the per-item --ax-d delay.
   ============================================================ */

/* --- group 1: rise --- */
html.ax-anim .ax-split__text > *,
html.ax-anim .apex-card,
html.ax-anim .ax-media-card,
html.ax-anim .ax-mini-card,
html.ax-anim .ax-step,
html.ax-anim .apex-numlist__row,
html.ax-anim .ax-why__row,
html.ax-anim .ax-why__media,
html.ax-anim .apex-trusted,
html.ax-anim .apex-logo-group,
html.ax-anim .footer-col,
html.ax-anim .apex-quote{
  opacity:0;transform:translate3d(0,28px,0);
}
/* --- group 2: soft rise + defocus (headings / hero copy) --- */
html.ax-anim .section__head,
html.ax-anim .apex-hero__inner > *,
html.ax-anim .page-hero .container > *{
  opacity:0;transform:translate3d(0,20px,0);filter:blur(9px);
}
/* --- group 3: glide in from the side (paired image rows) --- */
html.ax-anim .ax-split__media{
  opacity:0;transform:translate3d(var(--ax-x,-52px),0,0);
}
/* --- group 4: settle forward (banners) --- */
html.ax-anim .apex-cta,
html.ax-anim .apex-marquee{
  opacity:0;transform:translate3d(0,22px,0) scale(.968);
}

html.ax-anim .ax-split__text > *,
html.ax-anim .apex-card,
html.ax-anim .ax-media-card,
html.ax-anim .ax-mini-card,
html.ax-anim .ax-step,
html.ax-anim .apex-numlist__row,
html.ax-anim .ax-why__row,
html.ax-anim .ax-why__media,
html.ax-anim .apex-trusted,
html.ax-anim .apex-logo-group,
html.ax-anim .footer-col,
html.ax-anim .apex-quote,
html.ax-anim .section__head,
html.ax-anim .apex-hero__inner > *,
html.ax-anim .page-hero .container > *,
html.ax-anim .ax-split__media,
html.ax-anim .apex-cta,
html.ax-anim .apex-marquee{
  transition:opacity .8s cubic-bezier(.22,.62,.28,1),
             transform .8s cubic-bezier(.22,.62,.28,1),
             filter .8s ease;
  transition-delay:var(--ax-d,0ms);
}
/* the resting states above are deliberately more specific, so the
   revealed state has to shout to win. */
html.ax-anim .is-in{opacity:1!important;transform:none!important;filter:none!important}
/* .ax-anim is never armed under reduced motion (the head script checks first);
   if the preference flips after load, the global reduced-motion rule near the
   top of this file collapses the durations, so items still land instantly. */

/* the eyebrow rule draws itself once its block is in view */
html.ax-anim .section__head .apex-eyebrow::before,
html.ax-anim .ax-split__text > .apex-eyebrow::before{
  transform:skewX(-24deg) scaleX(0);transform-origin:inline-start;
  transition:transform .7s cubic-bezier(.2,.8,.3,1) .22s}
html.ax-anim .section__head.is-in .apex-eyebrow::before,
html.ax-anim .ax-split__text > .apex-eyebrow.is-in::before{transform:skewX(-24deg) scaleX(1)}

/* ============================================================ MOBILE HEADER
   Keep backdrop-filter off on small screens (it was a scroll-repaint
   trigger on Android) - the glass is faked with a more opaque ground and
   the green hairline stays. Placed last so it wins the cascade.
   ============================================================ */
@media (max-width:960px){
  .site-header.is-scrolled{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background-color:rgba(7,20,38,.96);
    border-block-end:1px solid rgba(39,192,106,.6);
  }
  .site-header.is-scrolled .site-header__inner{min-height:56px}
  .site-brand img{height:30px}
  .site-header.is-scrolled .site-brand img{height:24px}
}