/* ============================================================================
   Explore.com.sa — home page, refined (demo-1)
   Loaded only by /demo-1/index.html, after explore-i18n.css.

   A refinement of the live page, not a redesign: every section keeps its
   surface, layout, imagery, colour blocks and signature elements. Only what
   was wrong inside that look is fixed (type, rhythm, alignment, states,
   keyboard, touch, Arabic/RTL, phones, contrast).

   Rules of this file:
   - Colours: only the live palette (copied verbatim below), the stops that
     already exist inside its gradients, and those colours at a lower
     opacity. Sections use var(--xp-…) only.
   - Fonts: Archivo (Latin) and Cairo (Arabic, as on every explore.com.sa
     page). Icons stay on Webflow's "webflow-icons".
   - Presentation only: copy, markup and order are untouched, so CMS element
     addresses keep working and CMS overrides (inline, !important) still win.
   - Selectors start with .body (the <body> class) so they beat the Webflow
     rules and the style blocks embedded later in the page. !important is
     used only against explore-i18n.css's !important rules, inline styles
     written at runtime (navbar, IX2, Splide, infiniteslide, the slider
     jQuery) and in the reduced-motion block.

   Contents: palette · derived colours · layout and type tokens · fonts ·
   global · navbar · hero and brand line · about · scroll story · dividers ·
   services · why are we here · gallery · guarantees · logos · testimonials ·
   footer · large screens · reduced motion
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Palette: the live palette, verbatim (refine/inventory/palette.css)
   ------------------------------------------------------------------------ */
/* Explore home page: the LIVE palette (http://127.0.0.1:8080/ = main 381b530)
   Every colour actually painted at 1440x900 and 390x844, Arabic and English,
   including open, hover, focus and form states (see palette.json for where).
   This is the only palette the refinement may use. A colour may move to another
   place, a gradient may change angle or stops within these colours, and any
   colour may be used at a lower opacity. Nothing else. */
:root {

  /* whites */
  --xp-white: #ffffff;           /* page surface, white text on the video/gradients, cards, logo tiles, lang pill hover, submit button, focus rings on the bar and the footer (123 el.) g01 */

  /* off-whites and tints */
  --xp-paper-rule: #f6f3f3;      /* 2px rule beside "AT EXPLORE" on guarantee cards (3 el.) g01 */
  --xp-paper-divider: #e4ebf3;   /* nav divider: the thin vertical line before Home on desktop, the rule atop the phone menu (2 el.) g08 */
  --xp-paper: #f9f9f9;           /* Why slider surface (1 el.) g01 */
  --xp-blush-tint: #fff6f4;      /* service plus/minus icon fill when open or hovered (1 el.) g09 */
  --xp-paper-cool: #e2e7f1;      /* Webflow form-fail message panel (1 el.) g08 */

  /* greys */
  --xp-text-muted: #5a5d66;      /* service subtitles, reviewer roles (15 el.) */
  --xp-grey-333: #333333;        /* testimonial quotes (11 el.) */
  --xp-text: #45474f;            /* story and service body paragraphs (6 el.) */
  --xp-line: #d3d4d4;            /* services row hairlines and the plus-icon ring (6 el.) */
  --xp-slate: #333742;           /* services 01/02/03 numbers and titles (6 el.) */
  --xp-grey-a1: #a1a1a1;         /* 1px hairline under the hero block (1 el.) */
  --xp-mist: #d5ddde;            /* brand-line marquee letters (EXPLORE A NEW HORIZON) (1 el.) */
  --xp-grey-4c: #4c4c4c;         /* About body copy (1 el.) */

  /* inks */
  --xp-ink: #1c1d21;             /* service rich-text headings, reviewer names, card/arrow inherited ink (16 el.) */
  --xp-ink-dropdown: #2a2b30;    /* divisions dropdown links (6 el.) */
  --xp-ink-222: #222222;         /* About intro <strong> lines (2 el.) */
  --xp-ink-navy: #090b19;        /* footer submit-button text, form-fail text (same value as the social-icon glyph fill in the SVG files) (2 el.) */
  --xp-black-band-warm: #080404; /* brand-line marquee band (desktop) (1 el.) g02 */
  --xp-black-band: #000002;      /* brand-line marquee band (phones) (1 el.) g02 */

  /* blacks */
  --xp-black: #000000;           /* Why copy and outline-title stroke, services plus/minus lines, logo-band base under the image, "100+ Companies", guarantee heading, gallery arrows at rest (49 el.) g02 */

  /* deep inks */
  --xp-ink-violet: #0d0628;      /* gallery arrow ring (2px) and its hover fill (6 el.) */
  --xp-ink-teal: #112631;        /* testimonials description paragraph (1 el.) */

  /* reds and corals */
  --xp-crimson: #ed2540;         /* About EXPLORE wordmark (1 el.) */
  --xp-lockup-grey: #656772;     /* About MARKETING line under EXPLORE (1 el.) */
  --xp-coral: #e35354;           /* About EXPLORE, story headlines, open/hovered service title, icon ring/lines when open (9 el.) g05 */
  --xp-coral-stop: #e35352;      /* end stop of the .w2 divider gradient (3 el.) g05 */
  --xp-red-deep: #a70202;        /* 1px underline of the marquee holder (1 el.) */
  --xp-coral-dim: #d05457;       /* 8px edge of the Why orange panel (1 el.) */

  /* flames */
  --xp-orange: #fa682a;          /* guarantee arrows, avatar rings, "What people Says" label + rule, testimonial card hover, Why button hover, gallery arrow hover (22 el.) */
  --xp-flame-dark: #c0391f;      /* focus ring on white surfaces, hovered dropdown link text (9 el.) */
  --xp-flame: #e0492a;           /* About "MARKETING", lang pill text on hover (2 el.) */
  --xp-red-fire: #e03000;        /* 10px band under the brand-line marquee (1 el.) */

  /* ambers */
  --xp-amber-stop: #fdc73d;      /* start stop of the .w2 divider gradient (3 el.) */
  --xp-amber: #f7941d;           /* About "GROUP" (1 el.) */

  /* yellows */
  --xp-yellow-line: #ffe676;     /* 5px top border of the guarantee statement block (6 el.) */
  --xp-yellow-bar: #fffd82;      /* 5px vertical bar beside the guarantee statement (6 el.) */

  /* tints */
  --xp-peach-tint: #fff1ea;      /* dropdown link hover (1 el.) g09 */

  /* translucent (same hues at lower opacity, as painted) */
  --xp-white-a15: rgba(255, 255, 255, 0.15); /* footer row hairlines (11 el.) g04 */
  --xp-white-a12: rgba(255, 255, 255, 0.12); /* footer column pin-stripes (4 el.) g04 */
  --xp-white-a85: rgba(255, 255, 255, 0.85); /* footer placeholders (3 el.) */
  --xp-white-a08: rgba(255, 255, 255, 0.08); /* footer inputs (3 el.) g07 */
  --xp-white-a16: rgba(255, 255, 255, 0.16); /* footer input border (3 el.) g04 */
  --xp-white-a14: rgba(255, 255, 255, 0.14); /* footer input focus fill (3 el.) g04 */
  --xp-white-a95: rgba(255, 255, 255, 0.95); /* hero scroll-cue gradient end (1 el.) g10 */
  --xp-white-a10: rgba(255, 255, 255, 0.1); /* lang pill fill (1 el.) g04 */
  --xp-white-a65: rgba(255, 255, 255, 0.65); /* lang pill border (1 el.) */
  --xp-white-a07: rgba(255, 255, 255, 0.07); /* footer link row hover (1 el.) g07 */
  --xp-white-a55: rgba(255, 255, 255, 0.55); /* footer input hover border (1 el.) */
  --xp-white-a20: rgba(255, 255, 255, 0.2); /* open menu button fill (1 el.) */
  --xp-white-a90: rgba(255, 255, 255, 0.9); /* success message body, footer input focus border (1 el.) g10 */
  --xp-line-a40: rgba(211, 212, 212, 0.4); /* open service row shadow (1 el.) */
  --xp-shadow-2: rgba(0, 0, 0, 0.05); /* soft card shadow, layer 2 (26 el.) g03 */
  --xp-shadow-1: rgba(0, 0, 0, 0.043); /* soft card shadow, layer 1 (story photo, guarantee cards and arrow, testimonial cards) (23 el.) g03 */
  --xp-shadow-3: rgba(0, 0, 0, 0.055); /* soft card shadow, layer 3 (23 el.) g03 */
  --xp-shadow-4: rgba(0, 0, 0, 0.06); /* soft card shadow, layer 4 (23 el.) g03 */
  --xp-shadow-5: rgba(0, 0, 0, 0.063); /* soft card shadow, layer 5 (23 el.) g03 */
  --xp-black-a10: rgba(0, 0, 0, 0.1); /* Why round buttons, guarantee card dark overlay (11 el.) g03 */
  --xp-umber-a80: rgba(90, 25, 10, 0.8); /* dark focus band inside white rings (bar, footer) (20 el.) */
  --xp-umber-a16: rgba(80, 15, 5, 0.16); /* logo tile shadow (15 el.) */
  --xp-umber-a22: rgba(80, 20, 10, 0.22); /* nav label text-shadow (9 el.) g06 */
  --xp-umber-a18: rgba(70, 20, 10, 0.18); /* dropdown panel shadow (far layer) (2 el.) g06 */
  --xp-umber-a08: rgba(70, 20, 10, 0.08); /* dropdown panel shadow (near layer) (2 el.) */
  --xp-umber-a28: rgba(80, 15, 5, 0.28); /* footer submit hover shadow (1 el.) */
  --xp-umber-a25: rgba(70, 20, 10, 0.25); /* phone menu panel shadow (1 el.) g06 */
  --xp-orange-a22: rgba(250, 104, 42, 0.22); /* text selection (150 el.) */
  --xp-orange-a35: rgba(250, 104, 42, 0.35); /* guarantee arrow hover glow (1 el.) */

  /* the soft card shadow, all five layers as the live page writes them */
  --xp-shadow-card: 0 1.8px 5.8px var(--xp-shadow-1), 0 3.9px 11.7px var(--xp-shadow-2), 0 6.7px 18px var(--xp-shadow-3), 0 11.5px 25.3px var(--xp-shadow-4), 0 22.6px 35.9px var(--xp-shadow-5);

  /* CSS gradients */
  --xp-grad-scroll-cue: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95)); /* hero scroll cue (2x52px line, ::after on .vid-2) */
  --xp-grad-divider: linear-gradient(97deg, #fdc73d, #e35352); /* .w2 hairline dividers (7px) between story/services, services/Why and Why/gallery */

  /* sampled from the UI imagery (median of patches; approximate) */
  --xp-sunset-000: #af2637; /* sunset image as painted on the 1440 bar, 0% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-010: #b52c35; /* sunset image as painted on the 1440 bar, 10% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-020: #be3433; /* sunset image as painted on the 1440 bar, 20% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-030: #c93d2e; /* sunset image as painted on the 1440 bar, 30% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-040: #d1482c; /* sunset image as painted on the 1440 bar, 40% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-050: #da542b; /* sunset image as painted on the 1440 bar, 50% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-060: #e3622b; /* sunset image as painted on the 1440 bar, 60% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-070: #ec742c; /* sunset image as painted on the 1440 bar, 70% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-080: #f38c31; /* sunset image as painted on the 1440 bar, 80% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-090: #f9aa3a; /* sunset image as painted on the 1440 bar, 90% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-100: #fbbf45; /* sunset image as painted on the 1440 bar, 100% from the left (same image under the footer, Why panel, logo band, phone menu, guarantee cards) */
  --xp-sunset-peach: #f5bd6c; /* sunset image, bottom-right corner (raw) */
  --xp-sunset-plum: #8c2838; /* sunset image, bottom-left corner (raw) */
  --xp-blob-1: #ebb6ac; /* services blob tint as painted on white (22% of tinted pixels) */
  --xp-blob-2: #e4ccc6; /* services blob tint as painted on white (19% of tinted pixels) */
  --xp-blob-3: #eaddd9; /* services blob tint as painted on white (16% of tinted pixels) */
  --xp-blob-4: #d5b8b3; /* services blob tint as painted on white (15% of tinted pixels) */
  --xp-blob-core-1: #6e1a0d; /* Ellipse 3 image before blur and opacity */
  --xp-blob-core-2: #dd2e08; /* Ellipse 3 image before blur and opacity */
  --xp-blob-core-3: #c01205; /* Ellipse 3 image before blur and opacity */
  --xp-blob-core-4: #d48141; /* Ellipse 3 image before blur and opacity */
  --xp-worldmap-1: #deb9cc; /* world-map overlay on the guarantee .add cards (raw) */
  --xp-worldmap-2: #e6aabb; /* world-map overlay on the guarantee .add cards (raw) */
  --xp-grad-sunset-bar: linear-gradient(90deg, #af2637 0%, #b52c35 10%, #be3433 20%, #c93d2e 30%, #d1482c 40%, #da542b 50%, #e3622b 60%, #ec742c 70%, #f38c31 80%, #f9aa3a 90%, #fbbf45 100%); /* navbar / phone-menu look (1440 bar midline) */
  --xp-grad-sunset-diagonal: linear-gradient(to top right, #832538 0%, #942b37 10%, #a83737 20%, #b84337 30%, #c35037 40%, #cc5c39 50%, #d4693a 60%, #dd7a3d 70%, #e59041 80%, #eba745 90%, #edb345 100%); /* the raw image, bottom-left to top-right */
  --xp-grad-sunset-footer: linear-gradient(90deg, #c13136 0%, #c83935 10%, #cc3f31 20%, #cf432e 30%, #d54c2c 40%, #dc562a 50%, #e16129 60%, #e96e29 70%, #ef802b 80%, #f5972e 90%, #f8aa34 100%); /* footer (1440) midline */
  --xp-grad-sunset-panel: linear-gradient(180deg, #e96227 0%, #de5829 20%, #db552a 40%, #db552c 60%, #db512f 80%, #d94934 100%); /* Why panel (1440) top to bottom */
  --xp-grad-sunset-card: linear-gradient(90deg, #a3282e 0%, #a92c2c 10%, #b1342b 20%, #b83b28 30%, #be4327 40%, #c44c26 50%, #ca5625 60%, #d16126 70%, #d66f29 80%, #db802c 90%, #de9232 100%); /* guarantee card (1440) midline */
}

/* ---------------------------------------------------------------------------
   Derived colours: names for stops that already exist inside the palette's
   gradients, and palette colours at a lower opacity. Nothing here is a new
   colour.
   ------------------------------------------------------------------------ */
:root {
  /* stops of --xp-grad-sunset-card (the guarantee-card painting) */
  --xp-card-000: #a3282e;
  --xp-card-020: #b1342b;
  --xp-card-040: #be4327;
  --xp-card-050: #c44c26;
  --xp-card-070: #d16126;
  /* stops of --xp-grad-sunset-footer */
  --xp-foot-000: #c13136;
  --xp-foot-070: #e96e29;
  --xp-foot-090: #f5972e;
  --xp-foot-100: #f8aa34;
  /* palette colours at lower opacity */
  --xp-black-a35: rgba(0, 0, 0, .35);       /* phone-sheet page dim */
  --xp-black-a45: rgba(0, 0, 0, .45);       /* Why button ring (3.3:1 on #f9f9f9) */
  --xp-white-a75: rgba(255, 255, 255, .75); /* footer field border (>= 3:1 on the footer) */
  --xp-white-a04: rgba(255, 255, 255, .04); /* footer field fill (text and placeholder >= 4.5:1 on it) */
  --xp-white-a06: rgba(255, 255, 255, .06); /* footer field fill, focused */
  /* the hero scrim and the guarantee veil: black only, at lower opacity */
  --xp-scrim-top: rgba(0, 0, 0, .42);
  --xp-scrim-low: rgba(0, 0, 0, .4);
  --xp-scrim-end: rgba(0, 0, 0, .85);
  --xp-black-a0: rgba(0, 0, 0, 0);
  --xp-veil-dark: rgba(0, 0, 0, .3);
}

/* ---------------------------------------------------------------------------
   Layout and type tokens
   ------------------------------------------------------------------------ */
:root {
  /* motion (not a colour) */
  --xp-ease: cubic-bezier(.2, .8, .2, 1);

  /* type: one fluid scale (the live page had 22 sizes) */
  --xp-t-xs: 13px;
  --xp-t-s: clamp(14px, .1vw + 13.6px, 15px);
  --xp-t-m: 16px;
  --xp-t-body: clamp(16px, .1vw + 15.6px, 17.5px);
  --xp-t-l: clamp(18px, .2vw + 17.2px, 21px);
  --xp-t-xl: clamp(22px, .6vw + 19.6px, 30px);
  --xp-t-2xl: clamp(26px, 1vw + 22px, 36px);
  --xp-t-3xl: clamp(30px, 1.6vw + 23.6px, 52px);
  --xp-t-4xl: clamp(40px, 2.4vw + 27px, 76px);
  --xp-t-5xl: clamp(30px, 4.4vw + 8px, 80px);
  --xp-t-6xl: clamp(52px, 5.6vw + 26px, 120px);
  --xp-t-band: clamp(44px, 3.2vw + 32px, 96px);
  --xp-t-lockup: clamp(40px, 3.1vw + 27px, 84px);

  /* rhythm: one container, one gutter, one section step */
  --xp-nav-h: 70px;
  --xp-gutter: clamp(20px, 4.2vw, 64px);
  --xp-wrap: 1240px;                              /* content edge at x = 100 at 1440 */
  --xp-section: clamp(56px, 4vw + 40px, 112px);   /* 56 at 390, 81 at 1024, 98 at 1440 */
  /* height of an open service's sticky header, measured from 820 to 2560
     (name + subtitle + 2 x 16px); Arabic's taller line-heights below */
  --xp-acc-open-h: clamp(144px, 3.85vw + 112px, 180px);

  /* radii: the live values, named */
  --xp-r-input: 10px;
  --xp-r-tile: 16px;
  --xp-r-card: 20px;
  --xp-r-photo: 24.8px;

  /* a ring drawn just inside a faded (masked) region covers the band 1-3px
     inside its edges; added to the fade as mask layers (alpha only), these
     let exactly that band through, so all four sides of the ring show */
  --xp-ring-band-x: linear-gradient(90deg, transparent 1px, #000 1px 3px, transparent 3px calc(100% - 3px), #000 calc(100% - 3px) calc(100% - 1px), transparent calc(100% - 1px));
  --xp-ring-band-y: linear-gradient(180deg, transparent 1px, #000 1px 3px, transparent 3px calc(100% - 3px), #000 calc(100% - 3px) calc(100% - 1px), transparent calc(100% - 1px));

  /* fonts */
  /* Arabic glyphs in English mode (the العربية pill) fall to Cairo. The
     sub-navigation's ▲ and the ▶ / ◀ of "More" are in neither Archivo nor
     Cairo: a three-glyph subset of Noto Sans Symbols 2 (index.html) draws
     them instead of the system's Arial or DejaVu */
  --xp-font-latin: "Archivo", "Noto Sans Symbols 2", "Cairo", Arial, sans-serif;
  --xp-font-arabic: "Cairo", "Tajawal", system-ui, sans-serif; /* = explore-i18n.css's stack; i18n already applies it */
}
html[dir="rtl"] { --xp-acc-open-h: clamp(150px, 6vw + 105px, 206px); }
@media screen and (max-width: 991px) { :root { --xp-nav-h: 64px; } }
@media screen and (min-width: 1920px) {
  :root {
    --xp-t-m: 17px;
    --xp-wrap: min(76vw, 1640px);
    --xp-section: clamp(112px, 6vw, 152px);
  }
}


/* ---------------------------------------------------------------------------
   Fonts
   English: Archivo by inheritance. Every Webflow class that sets its own
   family (Arial, Almarai, Open Sans) is listed, at (0,2,0) or more and later
   in the cascade. No generic element list, which would outrank the
   webflow-icons glyphs (chevron, hamburger).
   Arabic: explore-i18n.css applies Cairo (!important). Only the Latin runs
   (EXPLORE, AT EXPLORE, 01/02/03, the "English" pill, the @handles) are
   switched to Archivo, with more specificity and !important.
   ------------------------------------------------------------------------ */
.body { font-family: var(--xp-font-latin); }
.body :is(.heading-36, .heading-37, .heading-39, .heading-40, .heading-41, .link-text, .link-text._1.pause-on-hover,
  .text-block-62, .text-block-87, .slider-titles_heading, .slider-titles_heading.add-text, .slider-gallery_numbers,
  .tlc-small-head, .tlc-desc, .subtitle, .subtitle.white.add, .small-title, .field-label-2, .submit-button-3,
  .text-field-2, .ts-review, .triangle-text-b, .accordion-header, .text-size-h1) {
  font-family: var(--xp-font-latin);
}
.body.explore-rtl :is(.marketing .heading-36, .marketing .div-block-115 .heading-37, #ser .accordion-toggle-grid > div.accordion-header,
  .navbar .nav-link--lang, .menu-list-item.white.small:not(.add) > div:nth-child(2)),
.body.explore-rtl :is(.marketing .heading-36, .marketing .div-block-115 .heading-37, #ser .accordion-toggle-grid > div.accordion-header,
  .navbar .nav-link--lang, .menu-list-item.white.small:not(.add) > div:nth-child(2)) * {
  font-family: var(--xp-font-latin) !important;
}
/* Arabic: the sub-navigation's ▲ and the ◀ of "المزيد" fall to the same
   symbol subset after Cairo (i18n's stack would hand them to the system) */
.body.explore-rtl :is(.content-subnav .link.black-color, .accordion-icon.add .text-block-87) {
  font-family: "Cairo", "Noto Sans Symbols 2", "Tajawal", system-ui, sans-serif !important;
}
/* icon glyphs keep their own face (after the rules above) */
.body :is([class*="w-icon"], .nav-dropdown-icon) { font-family: "webflow-icons" !important; }
/* Archivo is loaded without italics, and Arabic is never slanted: no faux
   italic anywhere */
.body.explore-rtl :is(em, i) { font-style: normal; }

/* ---------------------------------------------------------------------------
   Global
   ------------------------------------------------------------------------ */
/* in-page anchors and keyboard focus land below the fixed bar; the bottom
   padding leaves room for a focused control's ring at the fold */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 72px;
  scroll-padding-bottom: 8px;
}
.body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
.body :not(img):not(svg)::selection { background: var(--xp-orange-a22); }

/* Webflow sets overflow:hidden on the page wrapper at <=991px, which makes it
   a scroll container and silently breaks every position:sticky inside it
   (the open service header, the story photo). clip keeps sideways overflow
   out without being one; hidden stays as the fallback. */
.body .page-wraper { overflow: hidden; overflow: clip; }

/* the hero's scroll-driven logo animation resizes itself as it scrubs; keep
   Chrome's scroll anchoring off it, or jumps near its end make the page shake */
.body [tr-scrollflip-element="component"] { overflow-anchor: none; }

/* balanced line breaks on display headings, tidy last lines on copy */
.body :is(.text-size-h1, .heading-40, .heading-41, .heading-39.no, h2.accordion-header) { text-wrap: balance; }
.body :is(.home-scroll_text-item p, .accordion-content .rich-text p, .slider-titles_heading.add-text, .tlc-desc, .ts-review) { text-wrap: pretty; }

/* keyboard focus: a flame-dark ring on white surfaces. The ring follows each
   element's own radius, so round buttons keep round rings. */
.body :is(a, button, input, textarea, [role="button"], [tabindex], .w-dropdown-toggle):focus-visible,
.body .splide :focus-visible,
.body :is(a, .w-dropdown-toggle)[data-wf-focus-visible] {
  outline: 2px solid var(--xp-flame-dark);
  outline-offset: 3px;
}
/* on the bar and the footer: a white ring with a dark umber band inside it,
   which reads on the video, the crimson and the amber alike. Footer rows
   keep it outside on phones too: they sit inside the gutter (the live
   inside ring, made for edge-to-edge rows, ran through the first letter,
   the icon and the arrow). */
.body .navbar :is(a, [role="button"], .w-dropdown-toggle, .menu-button):is(:focus-visible, [data-wf-focus-visible]),
.body .footer-section :is(a, input):is(:focus-visible, [data-wf-focus-visible]) {
  outline-color: var(--xp-white);
  box-shadow: 0 0 0 3px var(--xp-umber-a80);
}
/* Webflow turns focused nav items blue: they stay white */
.body .navbar :is(.nav-link, .nav-dropdown-toggle):is(:focus-visible, [data-wf-focus-visible]) { color: var(--xp-white); }
/* the divisions panel is white: its links keep dark text and the dark ring */
.body .navbar .nav-dropdown-link:is(:focus-visible, [data-wf-focus-visible]) {
  outline-color: var(--xp-flame-dark);
  color: var(--xp-ink-dropdown);
  box-shadow: none;
}
/* the gallery arrows are masked to their circle, so their ring goes inside */
.body .control:is(:focus-visible, [data-wf-focus-visible]) { outline-offset: -6px; }
/* the service rows run edge to edge: their ring goes inside */
.body .accordion-toggle:is(:focus-visible, [data-wf-focus-visible]) { outline-offset: -4px; }

/* Webflow's transition:all animated the focus ring in from nothing: name
   the properties that do animate */
.body :is(.accordion-toggle, .nav-link, .control, .slide_arrow, .slider-gallery_button, .menu-list-item) {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
}

/* hover: every colour, fill or transform change on :hover sits inside
   @media (hover: hover). The :hover rules outside it only restate a resting
   value, to cancel a Webflow hover that also fires on touch: the divisions
   toggle, the brand line, the plus icon and More rings, the sub-navigation,
   the testimonial card, the reviewer lines, the footer rows, the open
   service header and the brand line's band. */

/* the three carousels keep their own looks (grey disc, ink-violet ring,
   orange disc) and share one behaviour: pressed, disabled */
.body :is(.slider-gallery_button, .control, .slide_arrow):active { transform: scale(.94); }
.body .slide_arrow.is--disabled-arrow,
.body .slider-gallery_button.is-disabled { opacity: .35; pointer-events: none; cursor: default; }

/* ---------------------------------------------------------------------------
   Navbar
   Transparent with white labels over the hero; a solid sunset bar after it.
   Shown from load (Webflow hid it until the first scroll, so the first Tab
   jumped 4,500px down the page and Arabic visitors had no language switch).
   The page script writes display and background inline, hence !important.
   States:
     no inline style (load) or inline "transparent" (over the hero) = clear
     .xh-nav-solid (explore-home.js, as the hero's end passes under the bar)
     any other inline background (no-JS fallback, below the hero) = solid
   The solid bar has the /demo-1/ bar's colours (the sunset image's sampled
   stops), crimson on the left to amber on the right in both languages
   (owner decision, 2026-10-07).
   ------------------------------------------------------------------------ */
.body .navbar {
  display: block !important;
  background: transparent !important;
  transition: background-color .35s var(--xp-ease), box-shadow .35s var(--xp-ease);
}
.body .navbar.xh-nav-solid,
.body .navbar[style*="display"]:not([style*="transparent"]) {
  background: var(--xp-grad-sunset-bar) !important;
  box-shadow: 0 6px 18px var(--xp-black-a10);
}

/* one container: the menu's end edge is the page's content edge */
.body .navbar-logo-left-container.shadow-three {
  width: 100%;
  max-width: calc(var(--xp-wrap) + 2 * var(--xp-gutter));
  margin-inline: auto;
  padding: 0 var(--xp-gutter);
}
.body .container-7 { max-width: none; margin: 0; }
.body .navbar-wrapper { min-height: var(--xp-nav-h); }
/* the menu sits at the reading start: the left in English, the right in
   Arabic (owner decision, 2026-10-07) */
.body .navbar .nav-menu-wrapper { margin-inline-end: auto; }
/* Arabic: the menu reads from the right (explore-i18n.css pinned it LTR at
   (0,2,1); this is (0,4,0)) */
.body.explore-rtl .navbar :is(.navbar-wrapper, .nav-menu-wrapper, .nav-menu-two) { direction: rtl; }

/* the brand stays hidden, as live (explore-home.js takes it out of the tab
   order); the lone divider before Home goes */
.body .nav-menu-two > li.h { display: none; }
.body .nav-menu-two .nav-dropdown { margin-left: 0; margin-right: 0; }

/* labels: 16px, a 44px hit area, and the live warm text-shadow only over
   the hero (it is not needed, and blurs the labels, on the solid bar) */
.body .nav-link,
.body .text-block-88 {
  color: var(--xp-white);
  font-size: var(--xp-t-m);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 20px;
  text-shadow: 0 1px 2px var(--xp-umber-a22);
}
.body .navbar:is(.xh-nav-solid, [style*="display"]:not([style*="transparent"])) :is(.nav-link, .text-block-88) { text-shadow: none; }
.body.explore-rtl .navbar :is(.nav-link, .text-block-88) { letter-spacing: 0; }
.body .nav-link {
  position: relative;
  margin: 0;
  padding: 12px;
}
/* the centre-out underline (under the label only) */
.body .nav-link:not(.nav-link--lang)::after,
.body .navbar .nav-dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .35s var(--xp-ease);
  pointer-events: none;
}
.body .navbar .nav-dropdown-toggle::after { right: 34px; background: var(--xp-white); }
.body.explore-rtl .navbar .nav-dropdown-toggle::after { left: 34px; right: 12px; }
@media (hover: hover) {
  .body .nav-link:not(.nav-link--lang):hover::after,
  .body .navbar .nav-dropdown-toggle:hover::after { transform: scaleX(1); }
}
/* the current page is never marked in the bar (Home and About both carried it) */
.body .navbar .nav-link.w--current { color: var(--xp-white); }

/* the language item reads as a toggle: the live outlined pill, 30px to the
   eye with a 44px target. It names the other language, so in English it
   holds Arabic script, which is never tracked. */
.body .nav-link.nav-link--lang {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 4px 15px;
  border: 1px solid var(--xp-white-a65);
  border-radius: 999px;
  background: var(--xp-white-a10);
  font-size: var(--xp-t-s);
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  transition: background-color .25s, color .25s, border-color .25s;
}
.body .nav-link.nav-link--lang::before { content: ""; position: absolute; inset: -7px -2px; }
@media (hover: hover) {
  .body .nav-link.nav-link--lang:hover {
    background: var(--xp-white);
    border-color: var(--xp-white);
    color: var(--xp-flame);
    text-shadow: none;
  }
}

/* "Our divisions": same size and underline as the other labels; the chevron
   turns when open (mouse .x-open, or keyboard aria-expanded) */
.body .nav-dropdown-toggle {
  position: relative;
  margin: 0;
  padding: 12px 34px 12px 12px;
  color: var(--xp-white);
  font-size: var(--xp-t-m);
  line-height: 20px;
}
.body .nav-dropdown-toggle:hover,
.body .nav-dropdown-toggle:hover .text-block-88 { color: var(--xp-white); }
.body .nav-dropdown-icon { color: var(--xp-white); margin-right: 10px; transition: transform .3s var(--xp-ease); }
.body.explore-rtl .nav-dropdown-toggle { padding: 12px 12px 12px 34px; }
.body.explore-rtl .nav-dropdown-icon { right: auto; left: 0; margin-right: 0; margin-left: 10px; }
.body .nav-menu-two .nav-dropdown.x-open .nav-dropdown-icon,
.body .nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-icon { transform: rotate(180deg); }
.body .navbar .nav-dropdown-toggle[aria-expanded="true"]::after,
.body .navbar .nav-dropdown.x-open .nav-dropdown-toggle::after { transform: scaleX(1); }
/* opened from the keyboard (Webflow's aria-expanded) as well as by the mouse */
.body .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-list,
.body .nav-dropdown-list.w--open { display: block !important; }

/* the white dropdown card */
.body .nav-menu-two .nav-dropdown-list {
  min-width: 210px;
  padding: 8px;
  border-radius: var(--xp-r-tile);
  background: var(--xp-white);
  box-shadow: 0 18px 48px var(--xp-umber-a18), 0 2px 8px var(--xp-umber-a08);
}
.body .nav-menu-two .nav-dropdown.x-open .nav-dropdown-list,
.body .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown-list { animation: xh-drop .22s var(--xp-ease); }
.body .nav-dropdown-link {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--xp-ink-dropdown);
  font-size: var(--xp-t-s);
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  transition: background-color .2s, color .2s;
}
.body.explore-rtl .nav-dropdown-link { line-height: 1.5; text-align: right; }
@media (hover: hover) {
  .body .nav-dropdown-link:hover { background: var(--xp-peach-tint); color: var(--xp-flame-dark); }
}
/* Arabic: the panel hangs from the toggle's right edge */
.body.explore-rtl .nav-menu-two .nav-dropdown-list { left: auto; right: 0; }
@keyframes xh-drop { from { opacity: 0; transform: translateY(-6px); } }

@media screen and (min-width: 992px) {
  .body .nav-menu-two { column-gap: 4px; }
  .body .nav-menu-two .nav-dropdown-list { margin-top: 6px; }
  /* as inline boxes the English links were 41px tall (Archivo's content
     area plus the padding): a block keeps every target at 44px, level with
     the divisions toggle */
  .body .nav-menu-two > li > a.nav-link:not(.nav-link--lang) { display: inline-block; }
}

/* phones and tablets: one sheet flush under the bar, on the same sunset
   colours (the live tablet pill broke when Divisions opened, and the phone
   card floated 10px under the bar with nothing dimming the page) */
@media screen and (max-width: 991px) {
  .body .navbar.xh-nav-solid,
  .body .navbar[style*="display"]:not([style*="transparent"]),
  .body .navbar:has(.w-nav-button.w--open) {
    background: var(--xp-grad-sunset-bar) !important;
  }
  .body .navbar:has(.w-nav-button.w--open) :is(.nav-link, .text-block-88) { text-shadow: none; }
  .body .navbar-logo-left-container.shadow-three { padding: 0 12px 0 var(--xp-gutter); }
  .body.explore-rtl .navbar-logo-left-container.shadow-three { padding: 0 var(--xp-gutter) 0 12px; }
  /* the white, thumb-sized menu button at the reading end. The selector
     outranks Webflow's .w-nav[data-collapse] .w-nav-button { display: block }
     (0,3,0), which left the glyph in the button's top-left corner. */
  .body .navbar .menu-button.w-nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--xp-white);
    font-size: 24px;
    border-radius: 12px;
    transition: background-color .2s;
  }
  .body .menu-button.w--open { color: var(--xp-white); background-color: var(--xp-white-a20); }
  .body .nav-menu-two {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
    padding: 8px 0 24px;
    border-radius: 0 0 var(--xp-r-card) var(--xp-r-card);
    background: linear-gradient(160deg, var(--xp-card-000) 0%, var(--xp-card-020) 30%, var(--xp-card-040) 65%, var(--xp-card-050) 100%);
    box-shadow: 0 20px 50px var(--xp-umber-a25);
    /* never past the screen: the sheet scrolls on its own */
    max-height: calc(100vh - var(--xp-nav-h));
    max-height: calc(100dvh - var(--xp-nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-bottom: 24px;
  }
  .body .nav-menu-two > li { flex-shrink: 0; border-bottom: 1px solid var(--xp-white-a15); }
  .body .nav-menu-two > li.nav-lang-item { border-bottom: 0; }
  .body .nav-menu-two .nav-link,
  .body .nav-menu-two .nav-dropdown-toggle {
    display: block;
    min-height: 48px;
    padding: 14px var(--xp-gutter);
    font-size: 18px;
    line-height: 20px;
    text-align: center;
  }
  .body .nav-menu-two .nav-dropdown { display: block; }
  .body .nav-menu-two .text-block-88 { font-size: 18px; }
  .body.explore-rtl .nav-menu-two :is(.nav-link, .text-block-88) { font-weight: 600; }
  /* the chevron follows the centred label (it comes first in the markup)
     instead of sitting at the far edge */
  .body .nav-menu-two .nav-dropdown-toggle {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .body .nav-menu-two .nav-dropdown-icon,
  .body.explore-rtl .nav-menu-two .nav-dropdown-icon { position: static; margin: 0; }
  .body .nav-menu-two .nav-link:not(.nav-link--lang)::after,
  .body .navbar .nav-menu-two .nav-dropdown-toggle::after { display: none; }
  /* rows run edge to edge: their ring goes inside */
  .body .navbar .nav-menu-two :is(.nav-link:not(.nav-link--lang), .nav-dropdown-toggle):is(:focus-visible, [data-wf-focus-visible]) {
    outline-offset: -3px;
    box-shadow: inset 0 0 0 5px var(--xp-umber-a80);
  }
  /* the divisions open inline, on the same surface: no card inside the card */
  .body .nav-menu-two .nav-dropdown-list,
  .body .nav-menu-two .nav-dropdown-list.shadow-three.w--open {
    position: static !important;
    min-width: 0;
    margin: 0;
    padding: 0 0 8px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
  }
  /* 12 + 24 + 12 = 48px rows in both languages (Archivo's 1.3 left them
     at 45px) */
  .body .nav-menu-two .nav-dropdown-link {
    padding: 12px var(--xp-gutter);
    border-radius: 0;
    color: var(--xp-white);
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }
  .body.explore-rtl .nav-menu-two .nav-dropdown-link { text-align: center; }
  @media (hover: hover) {
    .body .nav-menu-two .nav-dropdown-link:hover { background: var(--xp-white-a07); color: var(--xp-white); }
    .body .navbar .nav-menu-two .nav-link.nav-link--lang:hover { background-color: var(--xp-white); }
  }
  .body .navbar .nav-menu-two .nav-dropdown-link:is(:focus-visible, [data-wf-focus-visible]) {
    outline-color: var(--xp-white);
    outline-offset: -3px;
    color: var(--xp-white);
    box-shadow: inset 0 0 0 5px var(--xp-umber-a80);
  }
  /* the language pill last: full width, outlined, 44px. Only the outline,
     as the live pill's ring: here it sits on the sheet's lightest stop,
     where its 10% white fill took the label to 4.2:1 (the hover above
     still fills it white) */
  .body .nav-menu-two .nav-link.nav-link--lang {
    display: block;
    min-height: 44px;
    margin: 16px var(--xp-gutter) 0;
    padding: 11px 20px;
    background-color: transparent;
    font-size: 16px;
    text-align: center;
  }
  .body .nav-menu-two .nav-link.nav-link--lang::before { content: none; }
  /* the page dims under the bar while the sheet is open (Webflow's overlay
     stays transparent) */
  .body .navbar:has(.w-nav-button.w--open)::before {
    content: "";
    position: fixed;
    inset: var(--xp-nav-h) 0 0;
    z-index: -1;
    background: var(--xp-black-a35);
  }
}

/* ---------------------------------------------------------------------------
   Hero: the city video, the ring and the big EXPLORE, the Flip onto the
   horizon photo, the scroll cue, and the brand line on its black band
   ------------------------------------------------------------------------ */
/* a scrim between the video and the white wordmark (Webflow puts the video
   at z-index -100): the wordmark dissolved into lit facades and the amber
   frames. Its lower end, near black, also dissolves the video into the
   horizon photo's dark top, so no hard seam travels up the screen. */
.body .background-video-8::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--xp-scrim-top) 0%, var(--xp-black-a0) 22%, var(--xp-black-a0) 46%,
    var(--xp-scrim-low) 76%, var(--xp-scrim-end) 92%, var(--xp-black) 100%);
}
/* the ring over the video read as a loading spinner at .61 */
.body .section-26 .image-28 { opacity: .85; }
/* the landed lockup sat on the brightest band, with 160-310px of dead black
   between the horizon and the brand line. The photo (1200x880, horizon at
   64.2% of its height) is sized so its horizon sits 24px above the band, at
   any aspect ratio and never narrower than the box: the glow is now under
   the lockup, and the black run is gone. 2.124 = (1 / .642) x (1200 / 880);
   recompute it if the CMS swaps the photo. */
.body .div-block-103 {
  --xp-band-h: calc(var(--xp-t-band) * 1.42 + 11px);
  background-size: max(100%, calc((100vh - var(--xp-band-h) - 24px) * 2.124)) auto;
  background-position: 50% 0;
}
/* phones and tablets: a bigger landing target (Flip reads its size), so the
   scroll ends on a logo and not a dot in the sky */
@media screen and (max-width: 767px) {
  .body .section-26 .logo-ani { width: 62%; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .body .section-26 .logo-ani { width: 44%; }
}

/* the opening lockup (the ring over EXPLORE) is sized by width only and sits
   on the hero's bottom edge: the ring is 40% of the width and the wordmark
   (1584x396) a quarter of it, so the lockup is .65 of its width tall. On
   wide or landscape screens that is taller than the 100vh hero and the
   ring's top went under the bar or off the screen (1366x657: 231px above
   it). Its width is capped so the whole ring clears the bar by 24px; the
   lockup keeps the full width wherever it already fits (phones and tablets
   upright). --xp-lockup-below is Webflow's space under it (the wordmark's
   bottom margin, plus .div-block-105's on phones). The Flip reads the
   origin's size, so the scroll still lands on the same target.
   Phones keep the hero at 100vh, the viewport with the browser's bars
   hidden, so its bottom strip sits behind the bars on load: the lockup is
   lifted by that strip and sized to 100svh (bars shown), so all of it is
   in view either way. Both are no-ops where the bars never hide. */
.body .vid-2 .background-video-8 { padding-bottom: calc(100vh - 100svh); }
.body .vid-2 .div-block-105 {
  --xp-lockup-below: 0px;
  width: min(100%, calc((100vh - var(--xp-nav-h) - 24px - var(--xp-lockup-below)) / .65));
  width: min(100%, calc((100svh - var(--xp-nav-h) - 24px - var(--xp-lockup-below)) / .65));
}
@media screen and (max-width: 991px) {
  .body .vid-2 .div-block-105 { --xp-lockup-below: 30px; }
}
@media screen and (max-width: 479px) {
  .body .vid-2 .div-block-105 { --xp-lockup-below: 80px; }
}

/* scroll cue: the live 2px line, retired on the first scroll (explore-home.js
   sets html.xh-scrolled; without it, the navbar's inline display written by
   the page's first scroll is the signal) */
.body .vid-2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  width: 2px;
  height: 52px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--xp-grad-scroll-cue);
  transform-origin: top;
  pointer-events: none;
  animation: xh-cue 2.4s var(--xp-ease) infinite;
  transition: opacity .4s;
}
html:not(.xh-cue-js) .body .navbar[style*="display"] ~ .text-animation .vid-2::after,
html.xh-scrolled .body .vid-2::after { opacity: 0; animation: none; }
@media screen and (max-width: 1024px) {
  /* clear of the wordmark's L on tablets */
  .body .vid-2::after { bottom: 10px; height: 34px; }
}
@keyframes xh-cue {
  0% { transform: scaleY(0); opacity: 0; }
  35% { opacity: 1; }
  65% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* the brand line: mist letters on the near-black band, the 1px deep-red
   underline and the 10px fire-red rule stay. The grey hairline under the
   whole hero goes (it doubled the red rule). One band colour at every width:
   the photo's own black, so the desktop #080404 seam goes too. */
.body .text-animation { border-bottom: 0; }
.body .single-text-div._1x { background-color: var(--xp-black-band); }
.body .single-text-div._1x:hover { color: var(--xp-black-band); }
/* the line runs on a CSS animation, which outranks IX2's inline transform
   (no !important needed) and can be paused and stopped. One loop moves the
   line by one phrase plus its gap, measured in em at the final font (the
   i18n rewrites the markup's separators, so never derive it from the markup) */
.body .link-text._1.pause-on-hover {
  --xp-line-period: 15.396em;  /* Archivo 700 / 112%, uppercase (15.394-15.397 from 390 to 1440) */
  --xp-line-dur: 11s;          /* the live pace: ~110px/s at 1440 */
  /* the line starts at the band's edge, so the loop is seamless: with the
     live 400px start offset, the band's start emptied at every restart */
  margin: 0;
  padding: .2em 0 .22em;
  color: var(--xp-mist);
  font-size: var(--xp-t-band);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  /* unhinted advances scale exactly with the size, so one period in em
     holds at every width (hinted, the loop drifted a pixel or two) */
  text-rendering: geometricPrecision;
  cursor: pointer;
  animation: xh-line-ltr var(--xp-line-dur) linear infinite;
}
/* Webflow recoloured the line on hover (#fd3846, touch included): keep it */
.body .link-text._1.pause-on-hover:hover { color: var(--xp-mist); }
@media (hover: hover) {
  .body .link-text._1.pause-on-hover:hover { animation-play-state: paused; }
}
/* a click, a tap, or Enter/Space on the focused band holds it (explore-home.js) */
.body .hero-section.xh-paused .link-text._1.pause-on-hover { animation-play-state: paused; }
.body .hero-section[role="button"]:is(:focus-visible, [data-wf-focus-visible]) {
  outline: 2px solid var(--xp-white);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 5px var(--xp-umber-a80);
}
/* Arabic runs rightward, so the next phrase arrives from its reading side;
   the taller line keeps the tanween inside the band. Cairo's ink sits high
   in its line box, so the padding is mostly above it: the ink is centred in
   the band (gaps within 4px), at the same band height as English (1.42em) */
.body.explore-rtl .link-text._1.pause-on-hover {
  --xp-line-period: 9.313em;   /* Cairo 700 (9.312-9.314 from 390 to 1440) */
  --xp-line-dur: 6.6s;
  letter-spacing: 0 !important;
  line-height: 1.3;
  padding-top: .11em;
  padding-bottom: .01em;
  animation-name: xh-line-rtl;
}
@keyframes xh-line-ltr { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--xp-line-period))); } }
@keyframes xh-line-rtl { from { transform: translateX(calc(-1 * var(--xp-line-period))); } to { transform: translateX(0); } }

/* ---------------------------------------------------------------------------
   About: white, the coral / flame / amber lockup on one axis, one centred
   statement under it (the owner's centring edit now applies)
   ------------------------------------------------------------------------ */
/* the fixed 100vh left 225-543px of blank white before the story */
.body .marketing.add,
.body .marketing.add .div-block-83 { height: auto; min-height: 0; }
.body .marketing.add .div-block-83 {
  padding-top: var(--xp-section);
  padding-bottom: var(--xp-section);
}
@media screen and (min-width: 992px) {
  /* the story's photo is centred under the bar, so it already starts lower
     than its text: a shorter bottom keeps the two sections close */
  .body .marketing.add .div-block-83 { padding-bottom: calc(var(--xp-section) * .8); }
}
@media screen and (max-width: 767px) {
  /* the title sat 13px under the bar */
  .body .marketing.add .div-block-83 { padding-top: max(96px, var(--xp-section)); }
}
.body .marketing .div-block-115 {
  --xp-lockup-size: var(--xp-t-lockup);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 clamp(32px, 3vw, 48px);
  padding-inline: var(--xp-gutter);
}
/* EXPLORE: crimson, regular weight, widely tracked (the owner's reference
   lockup). The tracking leaves a gap after the last letter: the same padding
   before the first one keeps the ink on the axis. */
.body .marketing .div-block-115 .heading-36 {
  margin: 0;
  padding: 0;
  padding-inline-start: .5em;
  color: var(--xp-crimson);
  font-size: var(--xp-lockup-size);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: .5em !important;
  text-align: center;
}
.body.explore-rtl .marketing .div-block-115 .heading-36 { direction: ltr; unicode-bidi: isolate; }
/* MARKETING: small dark-grey capitals tracked out to the width of EXPLORE.
   Its size and tracking follow the wordmark's, so the two stay the same
   width at every breakpoint. (explore-i18n.css's HARMONY block sets size,
   weight and colour !important.) */
.body .marketing .div-block-115 .heading-37.plus {
  margin: 0;
  margin-top: calc(var(--xp-lockup-size) * .4);
  padding: 0;
  color: var(--xp-lockup-grey) !important;
  font-size: max(9px, calc(var(--xp-lockup-size) * .235)) !important;
  font-weight: 600 !important;
  font-stretch: 100%;
  line-height: 1.2;
  text-align: center;
}
/* the reference lockup has no third line */
.body .marketing .div-block-115 .heading-37.plus._1 { display: none !important; }
/* tracked caps, with the trailing tracking balanced; English on both
   languages (explore-i18n.js leaves the lockup untranslated) */
.body .marketing .div-block-115 .heading-37.plus {
  letter-spacing: 3.3em !important;
  padding-left: 3.3em;
  text-transform: uppercase;
}
.body.explore-rtl .marketing .div-block-115 .heading-37.plus { direction: ltr; unicode-bidi: isolate; }
@media screen and (max-width: 374px) {
  /* the tracked wordmark keeps inside the gutters on 320px phones */
  .body .marketing .div-block-115 { --xp-lockup-size: 34px; }
  /* MARKETING sits on its 9px floor here: less tracking keeps it as wide as EXPLORE */
  .body .marketing .div-block-115 .heading-37.plus { letter-spacing: 2.8em !important; padding-left: 2.8em; }
}

/* the statement: one centred block in reading grey under the lockup */
.body .marketing .text-block-62.normal {
  width: 100%;
  max-width: calc(42em + 2 * var(--xp-gutter));
  height: auto;
  margin: 0 auto;
  padding: 0 var(--xp-gutter);
  color: var(--xp-text) !important;
  font-size: var(--xp-t-body) !important;
  line-height: 1.7 !important;
  text-align: center;
  text-wrap: pretty;
}
.body.explore-rtl .marketing .text-block-62.normal {
  max-width: calc(38em + 2 * var(--xp-gutter));
  line-height: 1.95 !important;
  text-align: center;
  direction: rtl;
}
/* the bold intro becomes the lede, a block, so the owner's inline centring
   applies; the line breaks around it are hidden (CSS only, the DOM is
   unchanged) */
.body .marketing .text-block-62.normal > strong:first-child {
  display: block;
  max-width: 34em;
  margin: 0 auto 1em;
  color: var(--xp-ink);
  font-size: var(--xp-t-l);
  font-weight: 600;
  line-height: 1.55;
  text-wrap: balance;
}
.body.explore-rtl .marketing .text-block-62.normal > strong:first-child { font-weight: 700; line-height: 1.85; }
.body .marketing .text-block-62.normal > strong:first-child + br,
.body .marketing .text-block-62.normal > br:nth-last-child(-n+3) { display: none; }
/* the inline highlights are 600 in both languages; in Arabic they were
   700, as heavy as the lede above them */
.body .marketing .text-block-62.normal > strong:not(:first-child) { color: var(--xp-ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Scroll story: white, the sticky rounded photo, coral headlines, three
   steps with their illustrations, inactive steps ghosted
   ------------------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  /* The steps light up as they cross the middle of the screen, and the
     sticky photo lets go when the visual's end meets the section's end. With
     the steps ending one section step above the stripe, the photo let go
     before step 3 lit up, so the third photo was only ever seen scrolling
     away (live holds it 340-680px). Now:
     - the photo's edge comes to rest one section step plus 12px above the
       stripe: as far as the ink of the first service number sits below
       it (the services' section step plus the number's own leading), so
       the stripe has equal visible space on both sides (±6px, 992-2560,
       both languages). The visual (100vh less the bar, with Webflow's 40em
       photo centred in it) ends --xp-story-end before the section's end:
       negative on tall screens, where it hangs below the section (that
       part is empty), and positive on short ones;
     - the text column ends far enough under step 3 that the photo stays
       pinned while all of step 3 crosses the middle of the screen (the
       photo lets go when step 3's end reaches mid-screen, whatever
       --xp-story-end is). */
  .body .home-scroll_section { --xp-story-end: calc(var(--xp-section) + 12px - max(0px, (100vh - var(--xp-nav-h) - 40em) / 2)); }
  .body .home-scroll_content.page-padding { padding-top: 16vh; padding-bottom: max(var(--xp-section), calc(50vh + var(--xp-story-end))); }
  /* the sticky photo is centred in the part of the screen under the bar, not
     behind it */
  .body .home-scroll_visual.page-padding { top: var(--xp-nav-h); height: calc(100vh - var(--xp-nav-h)); margin-bottom: var(--xp-story-end); }
}
.body .home-scroll_text-item:last-child { padding-bottom: 0; }
/* the text column sits in the middle of its half, inside the page gutters
   (it hugged the centre line with 348px of dead margin outside, and from
   992 to ~1150px it filled the half up to the screen's edge) */
.body .home-scroll_text-wrap { max-width: min(32rem, calc(100% - 2 * var(--xp-gutter))); margin-inline: auto; }
/* the coral headlines are two-line blocks, as live, in both languages and
   at every width: in the wider column they ran on one line (all three in
   Arabic, the third in English). Their measure, 6.7em, lies between the
   longest word ("Opportunities", 6.4-6.5em) and the shortest headline
   (6.95em), and the balanced wrap breaks each one where live does; the
   copy under them keeps its 32em. */
.body .home-scroll_text-item .text-size-h1 {
  max-width: 6.7em;
  margin: 0;
  color: var(--xp-coral);
  font-size: var(--xp-t-4xl);
  font-weight: 600;
  font-stretch: 106%;
  line-height: 1.05;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.body.explore-rtl .home-scroll_text-item .text-size-h1 { line-height: 1.3; }
.body .home-scroll_text-item p {
  max-width: 32em;
  margin: 0;
  color: var(--xp-text);
  font-size: var(--xp-t-body);
  line-height: 1.7;
}
.body.explore-rtl .home-scroll_text-item p { line-height: 1.95; }
/* Arabic copy was laid out left-to-right here. explore-i18n.css pins the
   section's own classes LTR so the sticky photo keeps its column, so only the
   text children turn RTL and the column aligns to the right. */
.body.explore-rtl .home-scroll_text-item { align-items: flex-end; }
.body.explore-rtl .home-scroll_text-item > h2,
.body.explore-rtl .home-scroll_text-item > p { direction: rtl; }
/* the steps not yet reached: still a sequence, not faded leftovers */
@media screen and (min-width: 992px) {
  .body .home-scroll_text-item { opacity: .35; transition: opacity .5s var(--xp-ease); }
  .body .home-scroll_text-item.is-active { opacity: 1; }
  /* a step given a fixed height in the editor (680px on home) keeps its
     words in the middle of that height, so a step lights up with its words
     beside the middle of the sticky photo rather than at its top edge */
  .body .home-scroll_text-item { justify-content: center; }
}
/* the three illustrations share one box (they were at three scales, and the
   last one hung off the column) */
.body .image-39 { margin-left: 0; }
.body .home-scroll_text-item > img:last-child {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(64px, 3vw + 52px, 96px);
  object-fit: contain;
  object-position: left bottom;
}
.body.explore-rtl .home-scroll_text-item > img:last-child { object-position: right bottom; }

@media screen and (max-width: 374px) {
  /* keeps "Opportunities" inside the padded column on 320px phones */
  .body .home-scroll_text-item .text-size-h1 { font-size: 34px; }
}
@media screen and (max-width: 991px) {
  .body .home-scroll_content.page-padding { padding: 24px var(--xp-gutter) var(--xp-section); }
  .body .home-scroll_text-wrap { max-width: 560px; }
  .body .home-scroll_text-item { opacity: 1; }
  .body .home-scroll_photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--xp-r-card);
    box-shadow: var(--xp-shadow-card);
  }
  /* never show Webflow's placeholder graphic (explore-home.js swaps in the
     step's real photo) */
  .body .home-scroll_photo[src*="/plugins/Basic/assets/placeholder."] { display: none; }
}
/* A step's words start at the start edge unless the editor aligns them.
   Their <p> stays one block whatever its style attribute holds: the editor
   writes its styles there, and p[style*="text-align"] once took the <p> out
   of box generation, so an alignment set on it reached only its last,
   wrapping line in the editor, and nothing at all on the site. */
.body .home-scroll_text-item { text-align: start; }

/* ---------------------------------------------------------------------------
   The .w2 stripes: three 7px amber-to-coral hairlines on white, running the
   way the bar runs in each language, with equal space on both sides
   ------------------------------------------------------------------------ */
.body .w2 { background-image: var(--xp-grad-divider); }
/* the stripes paint above the scroll story's sticky photo column: on tall
   screens that column hangs below its section (--xp-story-end goes
   negative) and its white covered the stripe under the photo */
.body .w2 { position: relative; z-index: 2; }
.body.explore-rtl .w2 { background-image: linear-gradient(277deg, var(--xp-amber-stop), var(--xp-coral-stop)); }
/* the 50px spacer after the first stripe goes (its headings stay hidden) */
.body .w1.add { height: auto; padding: 0; }
.body .w2.add { margin-top: 0; margin-bottom: var(--xp-section); }
.body .we-are + .w2 { margin-top: var(--xp-section); }

/* ---------------------------------------------------------------------------
   Services: white with the soft orange-pink blobs, full-width rows on
   hairlines, the big 01/02/03, heavy slate names, round plus icons, coral
   when open. An open service flows in the page (it was a 90vh inner scroll
   box) and its header sticks under the bar.
   ------------------------------------------------------------------------ */
.body #ser.hero {
  width: 100%;
  height: auto;
  max-height: none;
  /* the rows carry their own padding: the content sits one section step
     from each stripe */
  padding-block: calc(var(--xp-section) - clamp(24px, 1.8vw + 8px, 48px));
  /* Webflow's overflow:hidden made the section a scroll container, so the
     open header could not stick; clip keeps the blobs in without that */
  overflow: hidden;
  overflow: clip;
}
/* Arabic: the first row's ink starts lower in its taller Cairo line box */
.body.explore-rtl #ser.hero { padding-top: calc(var(--xp-section) - clamp(24px, 1.8vw + 8px, 48px) - 4px); }
/* the blobs: normal blending under the rows (multiply over the text turned
   them into dusty smudges). The painted tints match the live ones: the
   column's own image is at .5, so .7 x .5 = .35 as live. The column's core
   moves out from behind the plus icons (English; in Arabic it is already on
   the side without icons). */
.body .blur-a, .body .blur-bl-a, .body .blur-tm-a { z-index: 0; mix-blend-mode: normal; }
.body .blur-bl-a, .body .blur-tm-a { opacity: .35; }
.body:not(.explore-rtl) .blur-a { right: -144px; }
.body .accordion-container {
  position: relative;
  z-index: 1;
  height: auto;
  min-height: 0;
  max-height: none;
  padding-top: 0;
}
/* rows size to their content. !important beats IX2's inline 0vh on the
   siblings and the click script's inline overflow (which froze the page
   scroll inside an open panel) */
.body .accordion-a {
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}
.body .accordion-a,
.body .accordion-a:hover { box-shadow: none; }
.body .accordion-toggle {
  position: relative;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: clamp(24px, 1.8vw + 8px, 48px) 0;
  overflow: visible;
  background-color: transparent;
  cursor: pointer;
  transition-duration: .35s;
}
.body .accordion-toggle.w--open {
  position: sticky;
  top: var(--xp-nav-h);
  z-index: 5;
  padding-block: 16px;
  background-color: var(--xp-white);
  box-shadow: 0 1px 0 var(--xp-line);
}
/* the number, the name with its subtitle, and the icon at the reading end,
   on the page's one content width (the hairlines stay full width) */
.body #ser .accordion-toggle-grid {
  grid-template-columns: minmax(max-content, 16%) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: clamp(16px, 3vw, 56px);
  row-gap: 12px;
  align-items: baseline;
  width: 100%;
  max-width: calc(var(--xp-wrap) + 2 * var(--xp-gutter));
  height: auto;
  margin-inline: auto;
  padding-inline: var(--xp-gutter);
}
.body #ser .accordion-toggle-grid > div.accordion-header { grid-area: 1 / 1 / 2 / 2; }
.body #ser .accordion-toggle-grid > h2.accordion-header { grid-area: 1 / 2 / 2 / 3; justify-self: start; min-width: 0; margin: 0; }
.body #ser .accordion-toggle-grid > .break-normal { grid-area: 2 / 2 / 3 / 3; justify-self: start; }
.body #ser .accordion-toggle-grid > .accordion-icon { grid-area: 1 / 3 / 2 / 4; align-self: center; justify-self: end; }
.body #ser .accordion-header {
  margin: 0;
  color: var(--xp-slate);
  font-size: var(--xp-t-5xl);
  font-stretch: 106%;
  letter-spacing: -.02em;
}
.body #ser div.accordion-header {
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.body.explore-rtl #ser div.accordion-header { direction: ltr; unicode-bidi: isolate; letter-spacing: -.02em !important; }
.body #ser h2.accordion-header,
.body #ser h2.accordion-header .black-text {
  color: var(--xp-slate);
  font-size: var(--xp-t-5xl);
  font-weight: 700;
  line-height: 1.05;
  transition: color .35s var(--xp-ease);
}
.body.explore-rtl #ser h2.accordion-header,
.body.explore-rtl #ser h2.accordion-header .black-text { line-height: 1.2; }
/* subtitles: start-aligned under the name (Arabic was left-aligned), never
   slanted, the three leads in one weight */
.body #ser .break-normal {
  max-width: 52ch;
  color: var(--xp-text-muted);
  font-size: var(--xp-t-s);
  line-height: 1.6;
  text-align: start;
}
.body.explore-rtl #ser .break-normal { line-height: 1.7; }
.body .break-normal :is(strong, em) { font-style: normal; font-weight: 600; }
.body.explore-rtl .break-normal :is(strong, em) { font-weight: 700; }
/* the round plus icon */
.body .accordion-toggle .accordion-icon {
  --xp-icon: clamp(52px, 1.4vw + 46px, 72px);
  width: var(--xp-icon);
  height: var(--xp-icon);
  padding: calc(var(--xp-icon) * .24);
  border: 1px solid var(--xp-line);
  background-color: transparent;
  transition: border-color .35s, background-color .35s;
}
.body .accordion-toggle .icon-line { top: calc(var(--xp-icon) * .24); bottom: calc(var(--xp-icon) * .24); }
.body .accordion-toggle :is(.icon-line, .icon-line-static) { background-color: var(--xp-black); transition: background-color .35s; }
/* Webflow's hovers (purple ring) also fire on touch: rest values here, the
   coral cue below only where hover exists */
.body .accordion-icon:hover { border-color: var(--xp-line); }
.body .link.black-color:hover { color: var(--xp-ink); }
/* open: coral name, blush minus with a coral ring and lines */
.body #ser .accordion-toggle.w--open .black-text { color: var(--xp-coral); }
.body .accordion-toggle.w--open .accordion-icon { border-color: var(--xp-coral); background-color: var(--xp-blush-tint); }
.body .accordion-toggle.w--open :is(.icon-line, .icon-line-static) { background-color: var(--xp-coral); }
/* hover and keyboard focus: the row tints blush, the name turns coral */
@media (hover: hover) {
  .body .accordion-toggle:hover { background-color: var(--xp-blush-tint); }
  .body #ser .accordion-toggle:hover .black-text { color: var(--xp-coral); }
  .body .accordion-toggle:hover .accordion-icon { border-color: var(--xp-coral); background-color: var(--xp-blush-tint); }
  .body .accordion-toggle:hover :is(.icon-line, .icon-line-static) { background-color: var(--xp-coral); }
}
.body .accordion-toggle:focus-visible { background-color: var(--xp-blush-tint); }
.body #ser .accordion-toggle:focus-visible .black-text { color: var(--xp-coral); }
.body .accordion-toggle:focus-visible .accordion-icon { border-color: var(--xp-coral); background-color: var(--xp-blush-tint); }
.body .accordion-toggle.w--open:hover,
.body .accordion-toggle.w--open:focus-visible { background-color: var(--xp-white); }

/* the open panel. Webflow keeps the closed panel rendered (it was clipped by
   the fixed 30vh row); now that rows size to content, hide it, which also
   takes its links out of the tab order */
.body .accordion-content { max-height: none !important; }
.body .accordion-a .accordion-content:not(.w--open) { display: none; }
.body .accordion-content.w--open { min-height: 0; }
@media (prefers-reduced-motion: no-preference) {
  .body .accordion-content.w--open { animation: xh-reveal .5s var(--xp-ease); }
}
@keyframes xh-reveal { from { opacity: 0; transform: translateY(12px); } }
.body #ser .accordion-content-grid {
  max-width: calc(var(--xp-wrap) + 2 * var(--xp-gutter));
  margin-inline: auto;
  padding: clamp(24px, 3vw, 40px) var(--xp-gutter) clamp(48px, 6vw, 88px);
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(32px, 3.4vw, 48px);
}
/* Webflow's areas end both side columns at line 4, but every panel has four
   content rows: the sticky sub-navigation and "More" lost their containing
   block in the fourth and slid under the open header. Span all four. */
.body #ser .accordion-content-grid > .content-subnav { grid-row: 1 / span 4; }
/* the sub-navigation: slate items that turn coral */
.body .link.black-color {
  padding: 6px 0;
  color: var(--xp-ink);
  font-size: var(--xp-t-s);
  font-weight: 600;
  line-height: 1.4;
  transition: color .25s;
}
.body .link.black-color:focus-visible { color: var(--xp-coral); }
@media (hover: hover) {
  .body .link.black-color:hover { color: var(--xp-coral); }
}
.body .spacer-15 { height: 6px; }
/* the sandstone illustration keeps to its own column: Webflow pulled it 20%
   into the text column and sized it past the screen's edge */
.body .content-subnav { --xp-sand-w: clamp(120px, 14vw, 220px); --xp-sand-h: calc(var(--xp-sand-w) * .41); }
.body .content-subnav-sticky.add-1 {
  position: relative;
  top: auto;
  bottom: auto;
  width: 100%;
  max-width: var(--xp-sand-w);
  margin: 32px 0 0;
}
/* the sub-navigation and "More" stick just under the open header, and the
   jump targets land below it. The sandstone travels with the sub-navigation,
   just under its four items (as live, where both stuck), so the two never
   slide over each other. */
@media screen and (min-width: 768px) {
  .body .content-subnav-sticky:not(.add-1),
  .body .content-subnav-sticky.add-2 { top: calc(var(--xp-nav-h) + var(--xp-acc-open-h) + 24px); }
  .body .content-subnav-sticky.add-1 {
    position: sticky;
    top: calc(var(--xp-nav-h) + var(--xp-acc-open-h) + 24px + 150px + 32px);
    /* pulled up by the room the sub-navigation keeps for it below */
    margin-top: calc(32px - var(--xp-sand-h) - 32px);
  }
  /* the sub-navigation keeps the sandstone's room in its bottom margin, so
     both reach the panel's end, and let go, at the same moment */
  .body .content-subnav > .content-subnav-sticky:first-child { margin-bottom: calc(32px + var(--xp-sand-h)); }
}
.body .accordion-content-jump { top: calc(-1 * (var(--xp-nav-h) + var(--xp-acc-open-h) + 16px)); }
/* while a service is open (and focus is in it) its header is pinned under
   the bar: PageDown and the jumps page by what is visible below it */
html:has(#ser:focus-within .accordion-toggle.w--open) { scroll-padding-top: calc(var(--xp-nav-h) + var(--xp-acc-open-h)); }
html:has(#ser:focus-within .accordion-toggle.w--open) .body .accordion-content-jump { top: -16px; }
html:has(#ser:focus-within .accordion-toggle.w--open) .body .accordion-toggle.w--open { scroll-margin-top: calc(-1 * var(--xp-acc-open-h)); }
/* "More": a pill with its label inside (the label spilled out of a circle) */
.body .accordion-icon.add {
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--xp-line);
  border-radius: 999px;
  background-color: var(--xp-white);
  gap: .5em;
  transition: border-color .25s, background-color .25s;
}
.body .accordion-icon.add:hover { border-color: var(--xp-line); }
.body .accordion-icon.add .text-block-87 {
  color: var(--xp-ink);
  font-size: var(--xp-t-m);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
@media (hover: hover) {
  .body .accordion-icon.add:hover { border-color: var(--xp-coral); background-color: var(--xp-blush-tint); }
}
.body .accordion-icon.add:focus-visible { border-color: var(--xp-coral); background-color: var(--xp-blush-tint); }
/* the rich text */
.body .accordion-content .rich-text :is(h1, h2) {
  margin: 0 0 .45em;
  color: var(--xp-ink);
  font-size: var(--xp-t-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.body .accordion-content .rich-text :is(h1, h2) strong { font-weight: inherit; }
.body.explore-rtl .accordion-content .rich-text :is(h1, h2) { font-weight: 700; line-height: 1.5; }
.body .accordion-content .rich-text p {
  max-width: 64ch;
  color: var(--xp-text);
  font-size: var(--xp-t-body);
  line-height: 1.7;
}
.body.explore-rtl .accordion-content .rich-text p { line-height: 1.95; }
.body .accordion-content-wrap > img { border-radius: var(--xp-r-tile); }

@media screen and (max-width: 767px) {
  /* number and icon in the first column, name and subtitle in the second */
  .body #ser .accordion-toggle-grid {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 14px;
  }
  .body #ser .accordion-toggle-grid > .accordion-icon { grid-area: 2 / 1 / 3 / 2; align-self: start; justify-self: center; }
  .body #ser .accordion-toggle-grid > .break-normal { align-self: center; }
  /* sized so the longest name keeps to one line */
  .body #ser .accordion-header,
  .body #ser h2.accordion-header .black-text { font-size: min(36px, calc((100vw - 136px) / 8.2)); }
  /* in one column the subtitles run over the pink blob (the Arabic lead fell
     to 3.4:1): the body grey, one step darker */
  .body #ser .break-normal,
  .body #ser .break-normal :is(em, strong, span) { color: var(--xp-text); }
  .body .accordion-toggle .accordion-icon { --xp-icon: 44px; }
  /* back to source order: sub-navigation, More, About with its image, then
     the rest (Webflow's phone grid put "Growth" first) */
  .body #ser .accordion-content-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .body #ser .accordion-content-grid > * { grid-area: auto; }
  .body #ser .content-subnav { height: auto; }
  /* the sub-navigation becomes a row of chips that scrolls sideways */
  .body #ser .content-subnav > .content-subnav-sticky:first-child {
    position: relative;
    top: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 2px 4px;
  }
  .body #ser .content-subnav > .content-subnav-sticky:first-child::-webkit-scrollbar { display: none; }
  .body #ser .spacer-15,
  .body #ser .content-subnav-sticky.add-1 { display: none; }
  .body #ser .link.black-color {
    display: flex;
    flex: none;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--xp-line);
    border-radius: 999px;
    background: var(--xp-white);
    font-size: 14px;
    white-space: nowrap;
  }
  .body #ser .content-subnav-sticky.add-2 { position: relative; top: auto; margin: 0; }
  /* the chip row scrolls and clips: rings go inside the pills */
  .body #ser :is(.link.black-color, .accordion-icon.add):is(:focus-visible, [data-wf-focus-visible]) { outline-offset: -4px; }
}
@media screen and (max-width: 374px) {
  /* 320px Arabic: the names were clipped 21px at the edge */
  .body #ser .accordion-header,
  .body #ser h2.accordion-header .black-text { font-size: 26px; }
  .body #ser .accordion-toggle-grid { column-gap: 10px; }
}

/* ---------------------------------------------------------------------------
   Why are we here: the orange sunset panel with its coral edge and big white
   title beside the #f9f9f9 slider; the giant black title with the next one
   ghosted; the grey round buttons, the counter and the two thumbnails
   ------------------------------------------------------------------------ */
.body .we-are {
  align-items: stretch;
  height: auto;
  min-height: min(90vh, 860px);
}
.body .div-block-77 {
  align-self: stretch;
  height: auto;
  min-height: min(90vh, 860px);
}
/* Arabic: the coral edge faces the slider (it was on the page's outer edge) */
.body.explore-rtl .div-block-77 { border-right: 0; border-left: 8px solid var(--xp-coral-dim); }
.body .heading-41 {
  display: block;
  margin: 0;
  color: var(--xp-white);
  font-size: var(--xp-t-5xl);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.05;
  letter-spacing: -.015em;
}
@media screen and (min-width: 768px) {
  /* the title fits its panel (24% of the row, less the 8px edge) with air on
     both sides: Archivo at 106% is wider than the live Almarai */
  .body .heading-41 { font-size: min(var(--xp-t-5xl), calc((24vw - 56px) / 4)); }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .body .heading-41 { font-size: min(var(--xp-t-5xl), calc((30vw - 56px) / 4)); }
}
.body.explore-rtl .heading-41 { line-height: 1.3; }
/* the panel keeps about its live share of the row (Webflow's 30vw basis,
   shrunk to 23% by the slider beside it), at every desktop width. At 24%
   its title reaches the scale's 5xl step at 1440 (at 23% it fell between
   two steps, a size of its own). */
@media screen and (min-width: 992px) {
  .body .div-block-77 { flex: 0 0 24%; width: auto; }
}
.body .page-wrapper-1 { flex: 1; min-width: 0; }
/* the slider grows with its content; the black rule under it goes (the
   stripe below already closes the section) */
.body .section-u { border-bottom: 0; }
.body .section-u.is-slider-gallery { height: auto; min-height: min(90vh, 860px); }
/* the slide content sits in the middle of the slider, not at its top */
.body .swiper-slide.is-slider-titles.up { justify-content: center; }
.body .swiper-slide.is-slider-titles { padding: clamp(32px, 4vw, 64px) var(--xp-gutter) 24px; }
.body .slider-titles_heading:not(.add-text) {
  margin-top: 0;
  font-size: var(--xp-t-6xl);
  font-weight: 400;
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: -.025em;
}
.body.explore-rtl .slider-titles_heading:not(.add-text) { line-height: 1.25; }
/* Arabic ghost titles: an opaque light grey instead of the outline, which
   drew broken contours inside the joined Arabic glyphs (a translucent tint
   double-paints the joins). English keeps its outline. */
.body.explore-rtl .swiper-slide.is-slider-titles:not(.is-active) .slider-titles_heading:not(.add-text) {
  -webkit-text-stroke: 0 !important;
  color: var(--xp-line);
}
.body .slider-titles_heading.add-text {
  width: auto;
  max-width: 32em;
  margin-top: clamp(20px, 2.2vw, 32px);
  font-size: var(--xp-t-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
}
.body .swiper-slide.is-active .slider-titles_heading.add-text { color: var(--xp-text); }
.body .slider-titles_heading.add-text strong { font-weight: 600; }
.body .swiper-slide.is-active .slider-titles_heading.add-text strong { color: var(--xp-ink); }
.body.explore-rtl .slider-titles_heading.add-text { line-height: 1.9; }
.body.explore-rtl .slider-titles_heading.add-text strong { font-weight: 700; }
/* Arabic: the title and the copy share the right edge */
.body.explore-rtl .swiper-slide.is-slider-titles { align-items: flex-end; }
@media screen and (min-width: 768px) {
  /* ...which put the next slide's title at its slide's far right, under the
     orange panel, and the ghost peek was gone. In both languages each slide
     is also as wide as its 32em copy plus the gutters, so the next title
     started far from the active one: at 1024 only a sliver of it, 5px past
     the cut's fade, reached the window, a stray stroke rather than a ghost
     (live: 80px). The next slide's title is drawn closer, and it glides
     home as it becomes active, with Swiper's own 600ms:
     - English: pulled back by its copy column's spare width (none from
       ~1400px, where the title is as wide as the copy), two gutters after
       the active title;
     - Arabic: from its copy's far edge to its slide's near edge, one
       gutter after the active title. */
  .body .swiper-slide.is-slider-titles .slider-titles_heading:not(.add-text) { transition: translate .6s ease; }
  .body:not(.explore-rtl) .swiper-slide.is-slider-titles .slider-titles_heading:not(.add-text) { width: fit-content; }
  .body:not(.explore-rtl) .swiper-slide.is-slider-titles.swiper-slide-next .slider-titles_heading:not(.add-text) { translate: min(0px, calc(100% - 32 * var(--xp-t-body))) 0; }
  .body.explore-rtl .swiper-slide.is-slider-titles.swiper-slide-next .slider-titles_heading:not(.add-text) { translate: calc(100% - 32 * var(--xp-t-body) - var(--xp-gutter)) 0; }
  /* the peek of the next title fades out at the cut instead of being sliced */
  .body .slider-titles_component {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
}
/* the controls grouped at the reading start: arrows, the counter after
   them, the thumbnails at the end */
.body .slider-gallery_bottom-wrapper {
  justify-content: flex-start;
  align-items: center;
  column-gap: 24px;
  row-gap: 16px;
  padding: 8px var(--xp-gutter) clamp(32px, 3.4vw, 48px);
}
.body .slider-gallery_button-wrapper { flex: none; flex-wrap: nowrap; width: auto; column-gap: 12px; }
/* the grey disc, now 52px with a visible ring (it was 1.25:1); hover fills
   it orange with a black arrow (the live white arrow was 2.97:1) */
.body .slider-gallery_button {
  width: 52px;
  height: 52px;
  background-color: var(--xp-black-a10);
  box-shadow: inset 0 0 0 1.5px var(--xp-black-a45);
  cursor: pointer;
  transition-duration: .25s;
}
.body .slider-gallery_button-icon { color: var(--xp-black); transition: color .25s; }
@media (hover: hover) {
  .body .slider-gallery_button:hover { background-color: var(--xp-orange); }
}
.body .slider-gallery_numbers {
  margin: 0;
  color: var(--xp-black);
  font-size: var(--xp-t-s);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.body .slider-gallery_numbers { flex: none; white-space: nowrap; }
.body .slider-thumbs_component { flex: 0 1 auto; min-width: 0; margin-inline-start: auto; }
/* Arabic: the arrows faced each other and the thumbnails ran off-screen.
   Pin each control group to how Swiper actually moves; the thumbnails are
   then pushed to the row's end with a physical margin */
.body.explore-rtl :is(.slider-gallery_button-wrapper, .slider-gallery_numbers, .slider-thumbs_component) { direction: ltr; unicode-bidi: isolate; }
.body.explore-rtl .slider-thumbs_component { margin-left: 0; margin-right: auto; }
/* Webflow's overflow trick widens the thumbnails' clip box by 100vw toward
   the inline end; pinned LTR in Arabic, that box lay over the arrows and
   swallowed their clicks. It catches no pointer; the thumbnails still do. */
.body .slider-thumbs_overflow { pointer-events: none; }
.body .slider-thumbs_overflow .swiper-slide { pointer-events: auto; }
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* the panel was squeezed to 191px at 820 */
  .body .div-block-77 { flex: 0 0 30%; }
  /* tall tablets: centred in an 860px block, the narrow copy column floated
     180-209px above its controls (over two section steps); a 720px floor
     keeps it within two. Shorter screens are unchanged (90vh wins). */
  .body .we-are,
  .body .div-block-77,
  .body .section-u.is-slider-gallery { min-height: min(90vh, 720px); }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  .body .section-u.is-slider-gallery { min-height: 0; }
}
@media screen and (max-width: 767px) {
  /* the copy was fixed at 500px and ran off both sides */
  .body .swiper-slide.is-slider-titles { max-width: 100%; }
  /* the panel becomes a banner above the slider (it vanished on phones,
     taking the section's title with it) */
  .body .we-are { flex-direction: column; height: auto; min-height: 0; }
  .body .div-block-77,
  .body.explore-rtl .div-block-77 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 40px var(--xp-gutter) 44px;
    border: 0;
    border-bottom: 8px solid var(--xp-coral-dim);
    background-image: var(--xp-grad-sunset-panel);
  }
  .body .heading-41 { font-size: clamp(34px, 9vw, 44px); }
  .body .page-wrapper-1 { width: 100%; }
  .body .section-u.is-slider-gallery { min-height: 0; }
  .body .slider-gallery_button { width: 44px; height: 44px; }
}
@media screen and (max-width: 479px) {
  .body .slider-titles_heading.add-text { max-width: calc(100vw - 48px); }
  .body .swiper-slide.is-slider-titles { padding: 36px var(--xp-gutter) 16px; }
  .body .slider-gallery_bottom-wrapper { flex-wrap: nowrap; column-gap: 16px; padding: 8px var(--xp-gutter) 40px; }
}

/* ---------------------------------------------------------------------------
   Gallery: the curved screen of tall photos between white waves, three per
   view, with the small ink-violet ring arrows centred under it
   ------------------------------------------------------------------------ */
/* the 16em margin under the strip left 306-736px of blank white */
.body .overflow {
  height: auto;
  min-height: 0;
  padding-top: var(--xp-section);
  padding-bottom: calc(var(--xp-section) * .5);
}
/* the white wave hides the top of the photos, by a band that grows with the
   screen's width (faster past 1920px, where the strip stops growing at
   2000px): the padding gives that band back, so the photos show one
   section step under the stripe, as the Why block ends one step above it
   (measured from 768 to 2560px) */
@media screen and (min-width: 768px) {
  .body .overflow { padding-top: calc(var(--xp-section) - 1.5vw); }
}
@media screen and (min-width: 1920px) {
  .body .overflow { padding-top: calc(var(--xp-section) - (7.5vw - 114px)); }
}
.body .sec.is--slider { margin-bottom: 0; }
/* the waves never catch a drag meant for the carousel */
.body .slider__wave svg path { pointer-events: none; }
.body .control { width: 48px; height: 48px; }
@media screen and (min-width: 992px) {
  /* the slivers of photos at the screen's edges fade out (alpha only) */
  .body .contin.is--slider {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .body .splide.con .splide__slide { height: clamp(300px, 44vw, 480px); min-height: 0; }
}
/* phones: one centred 4:5 photo with equal peeks (it sat off centre, and
   landscape photos were cut into tall strips). Splide locks the track height
   inline, hence !important */
@media screen and (max-width: 767px) {
  /* Webflow's 70vh boxes (<=479) and the container's one-sided padding put
     the photo off centre over a band of white */
  .body .sec.is--slider { height: auto; }
  .body .contin.is--slider { height: auto; padding-inline: 0; }
  .body .splide.con { width: 78vw; height: auto; margin-inline: auto; }
  .body .splide.con .splide__track { height: auto !important; }
  .body .splide.con .splide__list,
  .body .splide.con .splide__slide { height: auto; min-height: 0; }
  .body .splide.con .splide__img { height: auto; aspect-ratio: 4 / 5; }
  .body .control { width: 44px; height: 44px; }
  /* the arrows hung 67px below the strip, over the next section's title:
     they follow the photo in the flow */
  .body .controls { position: relative; inset: auto; margin: 20px auto 0; }
  /* ...which made the section 64px (gap + arrows) taller than the photos:
     lift the bottom wave by that much so it still carves their lower edge */
  .body .sec.is--slider .slider__wave.is--bottom { bottom: 64px; }
}

/* ---------------------------------------------------------------------------
   Guarantees: the black caps title, the sunset cards (veil, world map,
   AT EXPLORE with its pale rule, the yellow line and bar, the trees), and
   the orange round arrows under the cards at the reading start
   ------------------------------------------------------------------------ */
.body .section-30 .container-5 {
  max-width: calc(var(--xp-wrap) + 2 * var(--xp-gutter));
  margin-inline: auto;
  padding: calc(var(--xp-section) * .5) var(--xp-gutter) var(--xp-section);
}
/* grey section stripes, full width and 7px like the orange .w2 stripes: one
   above the title, one in the white under the arrows, above the logo band.
   Painted as backgrounds so no element is added (CMS addresses) and nothing
   is re-positioned */
.body .section-30 {
  background-image: linear-gradient(var(--xp-line), var(--xp-line)), linear-gradient(var(--xp-line), var(--xp-line));
  background-repeat: no-repeat;
  background-size: 100% 7px;
  background-position: center top, center bottom calc(var(--xp-section) * .5);
}
.body .section-30 .heading-40 {
  margin: 0 0 clamp(32px, 3.4vw, 56px);
  color: var(--xp-black);
  font-size: var(--xp-t-3xl);
  font-weight: 700;
  font-stretch: 106%;
  line-height: 1.12;
  letter-spacing: -.01em;
}
/* the English title is uppercase in the source: caps want a little air */
.body:not(.explore-rtl) .section-30 .heading-40 { letter-spacing: .02em; }
/* Arabic: the section is pinned LTR by explore-i18n.css; the title reads
   from the right edge, where the first card starts */
.body.explore-rtl .section-30 .heading-40 { direction: rtl; line-height: 1.4; }

/* CSS owns the card positions: the page's jQuery only moves .is--current.
   Its inline translateX (with a 20px deck offset that piled the passed cards
   up) is cancelled, and the row moves one card per step. translate
   percentages refer to each card's own width, and the cards are equal. Six
   cards: add a rule if the CMS adds more. */
.body .slide_item {
  height: auto;
  transform: none !important;
  transition: translate .35s var(--xp-ease), opacity .3s, visibility 0s;
}
.body .slide_list:has(> .slide_item:nth-child(2).is--current) > .slide_item { translate: -100% 0; }
.body .slide_list:has(> .slide_item:nth-child(3).is--current) > .slide_item { translate: -200% 0; }
.body .slide_list:has(> .slide_item:nth-child(4).is--current) > .slide_item { translate: -300% 0; }
.body .slide_list:has(> .slide_item:nth-child(5).is--current) > .slide_item { translate: -400% 0; }
.body .slide_list:has(> .slide_item:nth-child(6).is--current) > .slide_item { translate: -500% 0; }
/* passed cards leave instead of piling up */
.body .slide_item:has(~ .slide_item.is--current) {
  opacity: 0;
  visibility: hidden;
  transition: translate .35s var(--xp-ease), opacity .3s, visibility 0s .3s;
}
@media screen and (min-width: 992px) {
  /* two cards fill the row: the last step is the second-to-last card
     (explore-home.js disables "next" there). Without JS, if the last card
     becomes current, the row stays full. */
  .body .slide_list:has(> .slide_item:last-child.is--current) > .slide_item { translate: -400% 0; }
  .body .slide_item:has(+ .slide_item.is--current:last-child) { opacity: 1; visibility: visible; }
}
/* the cards size to their content, with room reserved for the trees (the
   statement ran into them) */
.body .slide_card._1,
.body .slide_card._1.add {
  height: auto;
  min-height: clamp(420px, 22vw + 180px, 520px);
  padding-bottom: calc(clamp(64px, 7vw, 110px) + 28px);
  border-radius: var(--xp-r-card);
  box-shadow: var(--xp-shadow-card);
}
.body .slide_card .image-38 {
  height: clamp(64px, 7vw, 110px);
  object-fit: cover;
  object-position: 50% 100%;
}
/* the live 10% black veil, deepened toward the amber corner where the white
   text fell under 3:1 (the same black, at a lower opacity) */
.body .slide_card .div-block-122 {
  border-radius: inherit;
  background: linear-gradient(200deg, var(--xp-veil-dark) 0%, var(--xp-black-a10) 52%, var(--xp-black-a10) 100%);
}
/* AT EXPLORE: a label, smaller than the statement it introduces */
.body .slide_card .heading-39:not(.no) {
  margin: 0;
  color: var(--xp-white);
  font-size: 24px;
  font-weight: 400;
  font-stretch: 112%;
  line-height: 1.2;
  letter-spacing: .04em;
}
.body .slide_card .heading-39:not(.no) strong { font-weight: 700; }
.body .slide_card .div-block-123 { margin-top: clamp(36px, 3.4vw, 56px); }
.body .slide_card .heading-39.no {
  margin: clamp(24px, 2.4vw, 36px) 0 0;
  padding-left: clamp(24px, 2.4vw, 40px);
  color: var(--xp-white);
  font-size: var(--xp-t-2xl);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.body .slide_card .heading-39.no strong { font-weight: 400; }
/* the third card's statement starts with an &nbsp; */
.body .bold-text-26 { margin-inline-start: -.28em; }
/* Arabic: the accents sit on the reading side; AT EXPLORE reads
   "في اكسبلور", right to left, in Cairo */
.body.explore-rtl .slide_card .heading-39 {
  border-left: 0;
  border-right: 2px solid var(--xp-paper-rule);
  padding-left: 0;
  padding-right: 10px;
}
.body.explore-rtl .slide_card .heading-39:not(.no) { direction: rtl; text-align: right; font-stretch: normal; letter-spacing: 0 !important; }
.body.explore-rtl .slide_card .heading-39.no { border-right: 0; padding-right: clamp(24px, 2.4vw, 40px); padding-left: 0; line-height: 1.5; }
.body.explore-rtl .slide_card .div-block-124 { left: auto; right: 0; }

/* the orange round arrows, just under the cards (they floated 147px below) */
.body .slide_arrows { padding-top: 24px; }
.body .slide_arrow {
  width: 62px;
  height: 62px;
  margin: 0 12px 0 0;
  transition-duration: .25s;
  transition-timing-function: var(--xp-ease);
}
@media (hover: hover) {
  .body .slide_arrow:not(.is--disabled-arrow):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px var(--xp-orange-a35);
  }
}
/* touch: vertical page scroll and pinch zoom stay with the browser; a
   horizontal swipe steps the cards (explore-home.js) */
.body .slide_wrap { touch-action: pan-y pinch-zoom; }
/* Arabic: the row ran left to right under a right-aligned title. Mirror the
   strip (it moves with a negative translate), then un-mirror each card;
   "next" sits on the left and points left */
.body.explore-rtl .slide_wrap { scale: -1 1; }
.body.explore-rtl .slide_card { scale: -1 1; }
.body.explore-rtl .slide_arrows { flex-direction: row-reverse; justify-content: flex-start; }
.body.explore-rtl .slide_arrow { margin: 0 0 0 12px; }
.body.explore-rtl .slide_svg { scale: -1 1; }
@media screen and (max-width: 479px) {
  /* Webflow's 104% card left a 6px sliver of the next one, which read as a
     glitch: a real peek instead */
  .body .slide_item { width: calc(100% - 24px); padding-right: 12px; }
  .body .slide_card._1, .body .slide_card._1.add { min-height: 420px; }
  .body .slide_arrow { width: 52px; height: 52px; }
}

/* ---------------------------------------------------------------------------
   Client logos: the sunset band, the centred "Trusted by 100+ Companies",
   the strip of white rounded tiles
   ------------------------------------------------------------------------ */
/* the band is painted from the bar's own stops, so the white title sits on
   the red-orange middle (it was 2.5-3.9:1 on the image's amber) */
.body .section-31 {
  padding-block: clamp(24px, 1.6vw + 16px, 40px);
  background-color: var(--xp-black);
  background-image: linear-gradient(90deg, var(--xp-sunset-000) 0%, var(--xp-sunset-010) 10%, var(--xp-sunset-020) 20%,
    var(--xp-sunset-030) 30%, var(--xp-sunset-040) 40%, var(--xp-sunset-050) 50%, var(--xp-sunset-060) 64%,
    var(--xp-sunset-070) 76%, var(--xp-sunset-080) 86%, var(--xp-sunset-090) 94%, var(--xp-sunset-100) 100%);
}
@media screen and (max-width: 767px) {
  .body .section-31 {
    background-image: linear-gradient(90deg, var(--xp-sunset-000) 0%, var(--xp-sunset-020) 14%, var(--xp-sunset-030) 26%,
      var(--xp-sunset-040) 40%, var(--xp-sunset-050) 56%, var(--xp-sunset-060) 86%, var(--xp-sunset-070) 92%,
      var(--xp-sunset-100) 100%);
  }
}
/* the title is large text (20px bold) */
.body .section-31 .small-title,
.body .section-31 .small-title .pink-color {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.body.explore-rtl .section-31 .small-title { line-height: 1.5; }
.body .section-31 .small-title { opacity: 1; color: var(--xp-white); }
.body .section-31 .small-title .pink-color { color: var(--xp-black); }
.body .section-31 .logo-carousel { margin-top: 16px; }
/* the strip is one tab stop, and focus pauses it (explore-home.js): its
   ring goes inside */
.body .section-31 .logo-carousel:focus-visible {
  outline: 2px solid var(--xp-white);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 5px var(--xp-umber-a80);
}
/* the moving list paints over the strip's own outline: the same ring again,
   above the tiles */
.body .section-31 .logo-carousel { position: relative; }
.body .section-31 .logo-carousel:focus-visible::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 2;
  border: 2px solid var(--xp-white);
  box-shadow: inset 0 0 0 3px var(--xp-umber-a80);
  pointer-events: none;
}
/* the Splide track clips at the slide box: room for the tile shadow */
.body .logo-carousel .splide__slide.aa,
.body .logo-carousel .splide__slide.aa.no { padding: 8px 9px 16px; }
/* one fixed tile (a fixed width keeps the auto-scrolling strip from jumping
   as lazy logos load) */
.body .logo-carousel .splide__slide.aa img {
  width: 220px;
  height: 92px;
  max-width: none;
  padding: 8px 12px;
  object-fit: contain;
  background: var(--xp-white);
  border-radius: var(--xp-r-tile);
  box-shadow: 0 4px 12px var(--xp-umber-a16);
}
/* per file, inside the fixed tile: the logos spread 7:1 in optical weight
   (Emerge is one solid wordmark; RDA, Asir and the emblems are thin). The
   heaviest are inset and the lightest given the tile, until the ink spread
   is under 3:1. */
.body .logo-carousel .splide__slide.aa img[src*="unnamed%20(11)"] { padding: 20px 46px; }
.body .logo-carousel .splide__slide.aa img[src*="unnamed%20(16)"] { padding: 15px 12px; }
.body .logo-carousel .splide__slide.aa img[src*="unnamed%20(6)"] { padding: 14px 12px; }
.body .logo-carousel .splide__slide.aa img[src*="unnamed%20(15)"] { padding: 4px 6px; }
.body .logo-carousel .splide__slide.aa :is(img[src*="unnamed%20(8)"], img[src*="unnamed%20(13)"], img[src*="unnamed%20(14)"]) { padding: 6px 8px; }
.body .logo-carousel .splide__slide.aa img[src*="unnamed%20(12)"] { padding: 6px 10px; }
@media screen and (max-width: 767px) {
  .body .logo-carousel .splide__slide.aa img { width: 168px; height: 72px; padding: 6px 10px; border-radius: 14px; }
  .body .logo-carousel .splide__slide.aa img[src*="unnamed%20(11)"] { padding: 16px 39px; }
  .body .logo-carousel .splide__slide.aa img[src*="unnamed%20(16)"] { padding: 13px 10px; }
  .body .logo-carousel .splide__slide.aa img[src*="unnamed%20(6)"] { padding: 12px 10px; }
  .body .logo-carousel .splide__slide.aa img[src*="unnamed%20(15)"] { padding: 2px; }
  .body .logo-carousel .splide__slide.aa :is(img[src*="unnamed%20(8)"], img[src*="unnamed%20(13)"], img[src*="unnamed%20(14)"], img[src*="unnamed%20(12)"]) { padding: 5px 6px; }
}

/* ---------------------------------------------------------------------------
   Testimonials: white; the orange eyebrow with its rule, the black heading
   and the description at the start; two columns of white cards moving in
   opposite directions, with orange-ringed avatars and the colour-flip hover
   ------------------------------------------------------------------------ */
/* one container, the page's content edge */
.body .container-8 {
  max-width: calc(var(--xp-wrap) + 2 * var(--xp-gutter));
  margin-inline: auto;
  padding-inline: var(--xp-gutter);
}
.body .tlc-line {
  margin-right: 0;
  margin-inline-end: 12px;
  background-color: var(--xp-flame);
}
.body .tlc-small-head {
  margin: 0;
  color: var(--xp-flame);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.body.explore-rtl .tlc-small-head { line-height: 1.5; }
.body .ts-left .heading-40 {
  margin: 18px 0 20px;
  color: var(--xp-black);
  font-size: var(--xp-t-3xl);
  font-weight: 700;
  /* normal width: the title breaks where live breaks it (three lines at
     1440 in English, two in Arabic) */
  font-stretch: 100%;
  line-height: 1.12;
  letter-spacing: -.01em;
}
.body.explore-rtl .ts-left .heading-40 { line-height: 1.4; }
.body .tlc-desc {
  max-width: 32em;
  color: var(--xp-text);
  font-size: var(--xp-t-body);
  line-height: 1.7;
}
.body.explore-rtl .tlc-desc { line-height: 1.9; }
/* logical gutters: they collapsed to 2-4px in Arabic */
.body .ts-right { padding-left: 0; padding-inline-start: clamp(32px, 4vw, 64px); }
/* between the columns: the plugin's wrap is pinned LTR, so in Arabic the
   gutter is a physical swap */
.body.explore-rtl .tesr-right { margin-left: 0; margin-right: clamp(16px, 2vw, 28px); }
.body .ts-card {
  border-radius: var(--xp-r-tile);
  background-color: var(--xp-white);
  box-shadow: var(--xp-shadow-card);
  cursor: default;
  transition: background-color .35s, color .35s;
}
.body .ts-content { padding-top: 52px; }
/* the quote mark: faint, at the card's top end, above the review's start */
.body .quote-img {
  top: 18px;
  left: auto;
  right: 22px;
  width: 30px;
  height: auto;
  opacity: .08;
}
.body.explore-rtl .quote-img { right: auto; left: 22px; }
.body .ts-review {
  color: var(--xp-text);
  font-size: var(--xp-t-s);
  line-height: 1.7;
}
.body.explore-rtl .ts-review { line-height: 1.9; }
.body .tc-img { border-color: var(--xp-orange); transition: border-color .35s; }
.body .ts-reviewer-name {
  margin: 0 0 2px;
  color: var(--xp-ink);
  font-size: var(--xp-t-m);
  font-weight: 600;
  line-height: 1.3;
}
.body.explore-rtl .ts-reviewer-name { line-height: 1.5; }
.body .ts-reviewer-desi {
  color: var(--xp-text-muted);
  font-size: var(--xp-t-s);
  font-weight: 400;
  line-height: 1.45;
}
.body.explore-rtl .ts-reviewer-desi { line-height: 1.6; }
/* Webflow's hover flip (orange at 2.97:1) fires on touch too: rest values
   here, the flip below only where hover exists */
.body .ts-card:hover { background-color: var(--xp-white); color: inherit; border-top-left-radius: var(--xp-r-tile); }
.body .ts-reviewer:hover { color: inherit; }
.body .ts-reviewer-desi:hover { color: var(--xp-text-muted); }
@media (hover: hover) {
  .body .ts-card:hover { background-color: var(--xp-flame-dark); border-top-left-radius: 0; }
  .body .ts-card:hover :is(.ts-reviewer-name, .ts-reviewer-desi, .ts-review) { color: var(--xp-white); }
  .body .ts-card:hover .tc-img { border-color: var(--xp-white); }
  .body.explore-rtl .ts-card:hover { border-top-left-radius: var(--xp-r-tile); border-top-right-radius: 0; }
}
/* the avatar keeps its circle: its wrapper shrank in the row (Webflow's
   flex 0 1 auto), and the 100%-wide photo with it, into 36-59px ovals */
.body .ts-imgblock { flex: none; }
/* cards are pinned LTR by explore-i18n.css: mirror the avatar row */
.body.explore-rtl .ts-bottom-content { flex-direction: row-reverse; }
.body.explore-rtl .ts-imgblock { margin-right: 0; margin-left: 12px; }
/* half the pace (live ~34s), and the columns can be held: a tap or click
   (.is-paused, explore-home.js), keyboard focus on the region, focus inside
   it, or a real hover. The plugin writes an inline animation and pauses
   inline on hover, hence !important. */
.body .infinite-scroll-1, .body .infinite-scroll-2 { animation-duration: 70s !important; }
/* one loop moves each column by exactly one set of cards. The plugin
   measured the set once, at load, into px keyframes and the window's
   height; the fonts and a live language switch change the card heights
   after that (a 28px jump at every loop in Arabic). A column holds its set
   and 4 clones, so one set is 20% of the column (sized to its cards here:
   Webflow's 100% height is released). explore-home.js refits the window.
   The plugin's timing and direction stay; reduced motion's "none" wins. */
@keyframes xh-ts-loop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -20%, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .body .infinite-scroll-1, .body .infinite-scroll-2 { height: auto !important; animation-name: xh-ts-loop !important; }
}
.body .ts-right:is(.is-paused, :focus-visible, :has(:focus)) :is(.infinite-scroll-1, .infinite-scroll-2) { animation-play-state: paused !important; }
@media (hover: hover) {
  .body .ts-right:hover :is(.infinite-scroll-1, .infinite-scroll-2) { animation-play-state: paused !important; }
}
/* touch: a tap also fires the plugin's hover pause (an emulated
   mouseenter, written inline) and no mouseleave ever follows, so a second
   tap could not resume the columns. Without hover, the tap toggle owns the
   state. */
@media (hover: none) {
  .body .ts-right:not(.is-paused):not(:focus-visible):not(:has(:focus)) :is(.infinite-scroll-1, .infinite-scroll-2) { animation-play-state: running !important; }
}
.body .ts-right:focus-visible { outline-offset: -3px; }
/* the moving cards paint over the region's own outline: the same ring again,
   above them */
.body .ts-right:focus-visible::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 2;
  border: 2px solid var(--xp-flame-dark);
  pointer-events: none;
}
/* desktop: the live 80vh window. The columns fade at both ends; the text
   block beside them stays fully opaque, centred in the window. */
@media screen and (min-width: 992px) {
  /* the % height chain broke at .container-8 (height auto): the window is
     the section's own height again (at >=1920 Webflow sizes it itself) */
  .body .ts-block { height: 100%; }
  .body .ts-left { display: flex; flex: 0 0 36%; align-items: center; align-self: stretch; }
  .body .ts-left-content { position: static; height: auto; margin-top: 0; overflow: visible; }
  .body .ts-right {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(min(80vh, 100%) - 96px), transparent min(80vh, 100%));
    mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(min(80vh, 100%) - 96px), transparent min(80vh, 100%));
  }
  /* ...but the focus ring's band at the edges stays visible */
  .body .ts-right:focus-visible {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(min(80vh, 100%) - 96px), transparent min(80vh, 100%)), var(--xp-ring-band-x), var(--xp-ring-band-y);
    mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(min(80vh, 100%) - 96px), transparent min(80vh, 100%)), var(--xp-ring-band-x), var(--xp-ring-band-y);
  }
}
@media screen and (min-width: 992px) and (max-width: 1919px) {
  .body .testimonial-section > .container-8 { height: 100%; }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  /* 992-1279: the cards were 213px wide with wrapped names. With 56px
     avatars, the columns get the room for one-line names and roles of two
     lines at most (cards ~285px at 1024) */
  .body .tc-img { flex: 0 0 auto; width: 56px; height: 56px; }
  .body .ts-left { flex: 0 0 31%; }
  .body .ts-right { padding-inline-start: 32px; }
}
/* stacked layout: everything starts at the reading edge (three alignments
   across the two languages). Webflow wrapped the column into side-by-side
   columns here. */
@media screen and (max-width: 991px) {
  .body .ts-block { flex-flow: column nowrap; align-items: stretch; height: auto; }
  .body .ts-left { width: 100%; padding: 0; }
  /* the cards sit under the text, on its edge: the desktop gutter between
     the two columns does not apply */
  .body .ts-right { padding-inline-start: 0; }
  .body :is(.ts-left, .ts-left .heading-40, .tlc-desc, .ts-left-content) { text-align: start; }
  .body .tlc-head-block { justify-content: flex-start; }
  .body .tlc-line { display: block; }
  .body .div-block-119 {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent 100%);
  }
}
@media screen and (max-width: 991px) and (max-height: 430px) {
  /* phones held sideways: the fade would land on the description, not cards */
  .body .div-block-119 { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------------------
   Footer: the sunset surface, three columns with tracked caps heads, white
   rows on faint hairlines, the form, the white social circles, the faint
   pin-stripes and the giant white EXPLORE wordmark at the bottom.
   The /demo-1/ footer's colours: the full sweep, crimson on the left to amber
   on the right in both languages, with the wordmark on it (owner decision,
   2026-10-07).
   ------------------------------------------------------------------------ */
.body .footer-section { background-image: var(--xp-grad-sunset-footer); }
.body .footer-section.add { padding: var(--xp-section) 0 0; }
.body .footer-section > .wrapper {
  max-width: calc(var(--xp-wrap) + 2 * var(--xp-gutter));
  margin-inline: auto;
  padding-inline: var(--xp-gutter);
}
/* the pin-stripes fall in the gaps between the columns and 24px outside them */
.body .footer-section .stripe-wrapper {
  left: calc(var(--xp-gutter) - 24px);
  right: calc(var(--xp-gutter) - 24px);
  width: auto;
  max-width: none;
}
/* the live column order (owner decision, H-14d): Contact us, Navigation,
   Follow us from the reading start (left to right in English; the grid
   mirrors itself in Arabic), and on phones the contact column with its form
   first. The markup is untouched, so the Tab order stays Follow us,
   Navigation, Contact (the accepted deviation). Explicit areas beat
   Webflow's #w-node placements; the empty first row goes. */
.body #footer .footer-wrapper {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  column-gap: 48px;
  row-gap: 48px;
  align-content: start;
}
.body #footer .footer-wrapper > .about-description { grid-area: 1 / 1 / 2 / 2; align-content: start; }
.body #footer .footer-wrapper > .stacked-description:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
.body #footer .footer-wrapper > .stacked-description:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
/* one edge per column: headings, rows, contact lines and the form */
.body .footer-section :is(.subtitle.white, .newsletter-form-wrapper, .menu-list-item.white, .form-column.right) { padding-inline: 0; }
.body .about-description { padding: 0; row-gap: 12px; }
.body .stacked-description { row-gap: 18px; }
.body .service-menu-list.white { margin: 0; }
/* column heads: white tracked caps in English, a real heading size in Arabic */
.body .subtitle.white:not(.add) {
  color: var(--xp-white);
  font-size: var(--xp-t-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.body.explore-rtl .subtitle.white:not(.add) { font-size: 16px; }
/* rows: white 16px on the faint hairlines, the arrow at the end; the hover
   tint reaches 12px past the text on both sides */
.body .menu-list-item.white {
  position: relative;
  padding-block: 22px;
  color: var(--xp-white);
  font-size: var(--xp-t-m);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
  transition-duration: .25s;
}
.body .menu-list-item.white.small { padding-block: 15px; }
.body .menu-list-item.white::before {
  content: "";
  position: absolute;
  inset: 0 -12px;
  z-index: -1;
  background-color: transparent;
  transition: background-color .25s;
  pointer-events: none;
}
.body .menu-list-item.white:hover { color: var(--xp-white); }
.body .menu-list-item.white.w--current { padding-left: 0; color: var(--xp-white); font-weight: 600; }
.body.explore-rtl .menu-list-item.white.w--current { font-weight: 700; }
.body .team-social-icon { transition: transform .25s var(--xp-ease); }
@media (hover: hover) {
  .body .menu-list-item.white:hover::before { background-color: var(--xp-white-a07); }
  .body .menu-list-item.white:hover .team-social-icon { transform: scale(1.08); }
}
/* arrows point along the reading direction in Arabic ('scale' composes with
   the inline transform Webflow's hover animation writes on desktop) */
.body.explore-rtl .list-item-arrow { scale: -1 1; }
/* the social handles are Latin: the @ stays first */
.body.explore-rtl .menu-list-item.white.small:not(.add) > div:nth-child(2) { direction: ltr; unicode-bidi: isolate; }
/* the rights line is not a link target (explore-home.js takes it out of the
   tab order) */
.body .menu-list-item.white.small.add {
  padding-top: 20px;
  font-size: var(--xp-t-xs);
  pointer-events: none;
  cursor: default;
}
.body.explore-rtl .menu-list-item.white.small.add { font-size: 14px; }
/* contact lines: sentence case and untracked, so they can be read */
.body .subtitle.white.add {
  padding-top: 0;
  color: var(--xp-white);
  font-size: var(--xp-t-s);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
.body.explore-rtl .subtitle.white.add { line-height: 1.8; }
/* the form sizes to its content (a shown fail message overlapped the next
   block) and keeps its focus rings */
.body .newsletter-form-wrapper { height: auto; padding-block: 28px 0; overflow: visible; }
.body .form-2 { row-gap: 20px; }
.body .field-wrapper { row-gap: 10px; }
.body .field-label-2 {
  margin-bottom: 0;
  color: var(--xp-white);
  font-size: var(--xp-t-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.body.explore-rtl :is(.field-label-2, .submit-button-3) { letter-spacing: 0 !important; }
.body.explore-rtl .field-label-2 { font-size: 14px; }
/* the translucent fields: the placeholders are white, as the labels ("Last
   name" has no other visible name; at .85 they were 3.6-3.8:1), and the
   fill is fainter (.04, .06 when focused), so placeholders and typed text
   reach 4.5:1 on the red. The white border and the umber band mark the
   fields and the focus. */
.body .text-field-2.light {
  min-height: 54px;
  border: 1px solid var(--xp-white-a75);
  border-radius: var(--xp-r-input);
  background-color: var(--xp-white-a04);
  color: var(--xp-white);
  font-size: var(--xp-t-m);
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.body .text-field-2.light::placeholder { color: var(--xp-white); }
@media (hover: hover) {
  .body .text-field-2.light:hover { border-color: var(--xp-white-a90); }
}
.body .text-field-2.light:focus {
  border-color: var(--xp-white);
  background-color: var(--xp-white-a06);
}
.body .footer-section .text-field-2.light:focus-visible { box-shadow: 0 0 0 3px var(--xp-umber-a80); }
/* the white pill */
.body .submit-button-3.white {
  min-width: 160px;
  min-height: 52px;
  padding: 14px 32px;
  border-radius: 999px;
  background-color: var(--xp-white);
  color: var(--xp-ink-navy);
  font-size: var(--xp-t-s);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  transition: transform .25s var(--xp-ease), box-shadow .25s;
}
@media (hover: hover) {
  .body .submit-button-3.white:hover { transform: translateY(-2px); box-shadow: 0 12px 28px var(--xp-umber-a28); }
}
.body .footer-section .submit-button-3:focus-visible { outline-color: var(--xp-white); box-shadow: 0 0 0 3px var(--xp-umber-a80); }
/* the fail message: Webflow's cool panel, below the form, never over the
   next block; its sentence takes its direction from its own text */
.body #footer .form-block .w-form-fail { margin-top: 16px; }
.body #footer .form-block .w-form-fail > div { unicode-bidi: plaintext; }
/* the success message reads like the rest of the column, on its reading
   edge (the start of the grid is the right in Arabic). Its English lines
   keep their own direction (plaintext), so in Arabic they are set to the
   right, level with the contact lines and the form. */
.body #footer .form-block .w-form-done { padding: 28px 0 0; text-align: start; }
.body #footer .form-block .w-form-done .success-wrapper { min-height: 0; padding: 0; align-content: start; justify-items: start; text-align: inherit; }
.body #footer .form-block .w-form-done :is(.large-heading, .body-display) { unicode-bidi: plaintext; text-align: inherit; }
.body.explore-rtl #footer .form-block .w-form-done :is(.large-heading, .body-display) { text-align: right; }
.body #footer .form-block .w-form-done .large-heading { margin: 0 0 8px; color: var(--xp-white); font-size: var(--xp-t-xl); font-weight: 700; }
/* the wordmark, 40 to 56px under the columns */
.body .div-block-117 {
  align-self: stretch;
  width: auto;
  margin: clamp(40px, 4vw, 56px) 0 0;
  /* Webflow reveals the wordmark once its top is 10% above the viewport's
     bottom: on phones, at the very end of the page, it never got there and
     stayed invisible. The floor keeps it reachable on any screen. */
  padding: 0 1vw max(clamp(12px, 1.5vw, 24px), calc(10vh - 17vw + 8px));
  overflow: hidden;
}
/* the wordmark file carries a band of empty padding above and below the
   letters: trimmed, so the letters start just inside the block's top (the
   hero reuses .footer-logo11, hence the scope) */
.body .div-block-117 .footer-logo11 { display: block; margin: -5.8% auto -7.6%; pointer-events: none; }
/* 300px of empty footer under the columns (less on narrow screens, about
   a fifth of the width), then the line, just over the letters and stretched
   across them (owner requests, 2026-10-15/16). explore-home.js sets the
   size and the tracking (--xh-wm-fs, --xh-wm-ls; word spacing in Arabic,
   where tracking would break the joined letters) so the line spans the
   letters at about .2em of tracking; these values are the fallback. The
   negative end margin takes back the tracking after the last letter, so
   the line stays centred. */
.body .div-block-117 { margin-top: clamp(120px, 21vw, 300px); }
.body .div-block-117 .xh-wm-tagline {
  margin: 0 calc(-1 * var(--xh-wm-ls, 0em)) clamp(16px, 2vw, 32px) 0;
  color: var(--xp-white);
  font-size: var(--xh-wm-fs, clamp(10px, 2.6vw, 20px));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--xh-wm-ls, .02em);
  word-spacing: var(--xh-wm-ws, 0em);
  text-align: center;
  white-space: nowrap;
}
.body.explore-rtl .div-block-117 .xh-wm-tagline { margin-right: 0; font-size: var(--xh-wm-fs, clamp(12px, 3.4vw, 22px)); letter-spacing: 0; }
/* narrow phones: two balanced lines across the letters, not tiny type */
.body .footer-section.xh-wm-wrap .xh-wm-tagline {
  max-width: var(--xh-wm-lw, none);
  margin-inline: auto;
  line-height: 1.45;
  white-space: normal;
  text-wrap: balance;
}
/* Footer wordmark (explore-home.js footerWordmark, owner requests 2026-10-11
   and 2026-10-15): as the page scrolls on to its end, the wordmark grows
   from small, right under the columns, down through the 300px to full width
   in its place, while the glow (orange to amber, the horizon) rises from
   the footer's bottom edge behind it, across the full width; at the end the
   line rises and fades in just over it. The script sets --xh-wm-p (0 to 1
   with the scroll), --xh-wm-dy (the small wordmark's lift to the columns)
   and --xh-wm-glow (the letters' top to the footer's bottom). The class is
   set by the script, so without it everything just sits in place; the
   editor and reduced motion get p = 1. Webflow's own reveal on the image is
   replaced by this one. */
.body .footer-section.xh-wm { --xh-wm-p: 1; position: relative; overflow: clip; }
.body .footer-section.xh-wm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--xh-wm-glow, 0px);
  background: linear-gradient(180deg, rgba(209, 97, 38, 0) 0%, var(--xp-card-070) 30%, var(--xp-foot-070) 55%,
    var(--xp-foot-090) 80%, var(--xp-foot-100) 100%);
  transform: translateY(calc(100% * (1 - var(--xh-wm-p))));
  pointer-events: none;
}
.body .footer-section.xh-wm > :is(.wrapper, .div-block-117) { position: relative; z-index: 1; }
/* the image's empty band overlaps the columns' bottom margin: it takes no
   clicks (above), and the footer clips the bottom */
.body .footer-section.xh-wm .div-block-117 { overflow: visible; background: none; }
.body .footer-section.xh-wm .div-block-117 .footer-logo11 {
  opacity: 1 !important;
  transform: translateY(calc(var(--xh-wm-dy, 0px) * (1 - var(--xh-wm-p)))) scale(calc(.3 + .7 * var(--xh-wm-p))) !important;
  will-change: transform;
}
/* the line: in over the last fifth of the growth */
.body .footer-section.xh-wm .xh-wm-tagline {
  --xh-wm-t: clamp(0, (var(--xh-wm-p) - .8) * 5, 1);
  opacity: var(--xh-wm-t);
  transform: translateY(calc(18px * (1 - var(--xh-wm-t))));
}

@media screen and (max-width: 991px) {
  .body #footer .footer-wrapper { grid-template-columns: 1fr; row-gap: 40px; }
  .body #footer .footer-wrapper > .about-description { grid-area: 1 / 1 / 2 / 2; }
  .body #footer .footer-wrapper > .stacked-description:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
  .body #footer .footer-wrapper > .stacked-description:nth-child(2) { grid-area: 3 / 1 / 4 / 2; }
  /* below 992px Webflow has no arrow animation: a small nudge */
  .body .list-item-arrow { transition: transform .3s var(--xp-ease); }
}
@media screen and (max-width: 991px) and (hover: hover) {
  .body .menu-list-item.white:hover .list-item-arrow { transform: translateX(4px); }
  .body.explore-rtl .menu-list-item.white:hover .list-item-arrow { transform: translateX(-4px); }
}
@media screen and (max-width: 767px) {
  /* one column: the stripes ran through the text */
  .body .footer-section .stripe-wrapper { display: none; }
  .body .menu-list-item.white { min-height: 52px; padding-block: 14px; }
  .body .menu-list-item.white.small { padding-block: 11px; }
  .body .menu-list-item.white.small.add { min-height: 0; }
  .body .newsletter-form-wrapper { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   Large screens (>= 1920px): the content width and the section step grow
   (tokens above); the type scale is already capped in its clamps
   ------------------------------------------------------------------------ */
@media screen and (min-width: 1920px) {
  .body .nav-dropdown-link { font-size: 16px; }
  .body .slide_item { padding-right: 2em; }
}

/* ---------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .body *, .body *::before, .body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .body .infinite-scroll-1, .body .infinite-scroll-2 { animation: none !important; }
  .body .vid-2::after { animation: none !important; transform: none; opacity: .8; }
  html.xh-scrolled .body .vid-2::after { opacity: 0; }
  /* the brand line stands still at the reading edge. IX2 writes an inline
     transform: a stylesheet !important outranks it. English starts at the
     gutter on the left; Arabic (a right-to-left run in a box pinned LTR) ends
     at the viewport's right edge. Later repeats may be cut at the far edge. */
  .body .link-text._1.pause-on-hover {
    margin-left: 0;
    padding-inline-start: var(--xp-gutter);
    animation: none !important;
    transform: none !important;
  }
  .body.explore-rtl .link-text._1.pause-on-hover {
    padding-inline-start: 0;
    padding-right: var(--xp-gutter);
    transform: translateX(calc(100vw - 100%)) !important;
  }
  /* the logo strip stops (Splide writes an inline transform) and can be
     swiped instead */
  .body .logo-carousel .splide__list { transform: none !important; }
  .body .section-31 .logo-carousel { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .body .section-31 .logo-carousel::-webkit-scrollbar { display: none; }
  /* the strip is the scroller here: an ::after ring would scroll away */
  .body .section-31 .logo-carousel:focus-visible::after { content: none; }
  /* Webflow IX2 ignores reduced motion: opening a service slides, grows and
     fades its panel. Hold IX2's inline end states. */
  .body .accordion-content-grid { height: auto !important; transform: none !important; opacity: 1 !important; }
  .body .home-scroll_text-item { transition: none; }
  /* a focused control draws its ring in the first frame */
  .body :is(a, button, input, textarea, [tabindex], .w-dropdown-toggle):is(:focus-visible, [data-wf-focus-visible]) { transition-property: none !important; }
}
/* tablets and up: the testimonial columns stand still, so release the window
   and show every real card once (the plugin's clones hidden, its inline wrap
   height beaten), with no fades */
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .body .div-block-119 { height: auto; padding-bottom: calc(var(--xp-section) * .5); -webkit-mask-image: none; mask-image: none; }
  .body .testimonial-section, .body .testimonial-section > .container-8, .body .ts-block { height: auto; max-height: none; }
  .body .ts-right { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .body .ts-right .infiniteslide_wrap { height: auto !important; overflow: visible !important; }
  .body .ts-right .infiniteslide_clone { display: none !important; }
}