@charset "utf-8";
/* ==========================================================================
   EuroEast Gateway — "The Meridian" design system
   One stylesheet for four language trees (en / ar / de / pt).
   Layout uses LOGICAL PROPERTIES ONLY, so dir="rtl" works with no extra CSS.
   --------------------------------------------------------------------------
   00 Fonts
   01 Tokens
   02 Reset & base
   03 Typography
   04 Arabic (:lang(ar)) overrides
   05 Layout primitives
   06 Rules, eyebrows, notes
   07 Header, navigation, language switcher, overlay menu
   08 Buttons & links
   09 Cards
   10 Stat counters
   11 Process steps
   12 Presence, trust, industries
   13 Hero & corridor map
   14 Forms
   15 Footer
   16 Motion: load stagger + scroll reveal
   17 Utilities
   18 Print
   ========================================================================== */

/* ============================================================ 00 Fonts ==== */
/* Self-hosted (GDPR: no Google Fonts CDN request is ever made from this site) */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 600;           /* variable file, wght axis */
  font-display: swap;
  src: url("../fonts/fraunces-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;           /* variable file, wght axis */
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "El Messiri";
  font-style: normal;
  font-weight: 500 600;           /* variable file, wght axis */
  font-display: swap;
  src: url("../fonts/el-messiri-arabic-var.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

/* =========================================================== 01 Tokens ==== */

:root {
  /* --- palette ------------------------------------------------------- */
  --ink: #16232B;
  --petrol-900: #0B2B3C;
  --petrol-800: #0E3348;
  --petrol-700: #123F55;
  --petrol-100: #DCE7EC;
  --sand: #F7F4EE;
  --sand-deep: #EFE9DD;
  --gold: #C9A227;
  /* Gold dark enough to pass WCAG 1.4.11 (3:1 non-text) on sand and on white:
     4.43:1 and 4.86:1. Used for focus rings and interactive borders on light,
     where --gold itself only reaches 2.2:1. */
  --gold-deep: #8A6E12;
  --gold-soft: #E5D9AF;
  --gold-bright: #F2E6BC;
  --emerald: #1A6B54;
  --slate: #5C6B73;
  --line: rgba(22, 35, 43, .12);
  --line-strong: rgba(22, 35, 43, .2);
  --line-dark: rgba(247, 244, 238, .16);
  --line-dark-strong: rgba(247, 244, 238, .3);
  --on-dark: #F7F4EE;
  --on-dark-soft: rgba(247, 244, 238, .74);
  --on-dark-faint: rgba(247, 244, 238, .55);

  /* --- contextual colour (flipped by .section--dark) ------------------ */
  --bg: var(--sand);
  --fg: var(--ink);
  --fg-soft: var(--slate);
  --hairline: var(--line);
  --hairline-strong: var(--line-strong);
  --link: var(--emerald);
  --surface: #FFFFFF;
  --surface-line: var(--line);
  /* Small-caps label colour. Gold is jewellery — hairlines, icon strokes,
     borders and map nodes — and it only reaches 2.2:1 on sand, so label TEXT
     on light uses emerald (5.8:1) and switches to gold-soft on petrol. */
  --label: var(--emerald);

  /* --- families ------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Times New Roman", Times, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: var(--font-display);

  /* --- fluid type scale ---------------------------------------------- */
  --fs-display: clamp(2.4rem, 1.35rem + 5.25vw, 4.5rem);
  --fs-h1: clamp(2.1rem, 1.35rem + 3.75vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.1rem + 3vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.09rem + .8vw, 1.6rem);
  --fs-h4: clamp(1.0625rem, 1.02rem + .22vw, 1.1875rem);
  --fs-lede: clamp(1.125rem, 1.03rem + .48vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-micro: .8125rem;
  --fs-eyebrow: .8125rem;
  --fs-stat: clamp(2.4rem, 1.5rem + 4.5vw, 4rem);
  --fs-ghost: clamp(4rem, 3rem + 8vw, 8.5rem);

  --lh-display: 1.12;
  --lh-heading: 1.18;
  --lh-body: 1.6;
  --track-eyebrow: .14em;
  --track-word: .1em;

  /* --- space & layout ------------------------------------------------- */
  --wrap: 75rem;                 /* 1200px */
  --wrap-narrow: 46rem;          /* 736px reading measure */
  --wrap-map: 112.5rem;          /* 1800px cap for the corridor map at 4K */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --space-section: clamp(4rem, 10vw, 8rem);
  --space-block: clamp(2rem, 5vw, 3.5rem);
  --gap: clamp(1.5rem, 3.2vw, 2.5rem);
  --gap-lg: clamp(2rem, 5vw, 4rem);
  --header-h: 4.25rem;
  --radius: 2px;

  /* --- motion --------------------------------------------------------- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: .55s;
  --dur-slow: .7s;
}

@media (min-width: 68rem) {
  :root { --header-h: 5.25rem; }
}

/* dark statement sections re-point the contextual tokens */
.section--dark,
.site-footer,
.page-head,
.hero {
  --bg: var(--petrol-900);
  --fg: var(--on-dark);
  --fg-soft: var(--on-dark-soft);
  --hairline: var(--line-dark);
  --hairline-strong: var(--line-dark-strong);
  --link: var(--gold-soft);
  --surface: var(--petrol-700);
  --surface-line: var(--line-dark);
  --label: var(--gold-soft);
  color-scheme: dark;
}

.section--tint { --bg: var(--sand-deep); --surface: var(--sand); }

/* ==================================================== 02 Reset & base ==== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + 1.5rem);
  -webkit-tap-highlight-color: rgba(201, 162, 39, .25);
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: hidden;
  /* Last-resort guard against horizontal scroll: a single word longer than
     its container (German compounds, long URLs, email addresses) breaks
     rather than pushing the document wider. Inherited, and inert until a
     word genuinely cannot fit. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums tabular-nums;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

img, svg, picture, video { max-inline-size: 100%; display: block; }
img { block-size: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

hr {
  border: 0;
  border-block-start: 1px solid var(--hairline);
  margin-block: var(--space-block);
}

::selection { background: var(--gold); color: var(--petrol-900); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 1px;
}
.section--dark :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.menu :focus-visible { outline-color: var(--gold-soft); }

/* ==================================================== 03 Typography ==== */

.display,
.h1, .h2, .h3, .h4,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--fg);
}

.display, h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  font-weight: 300;
}
.display { font-size: var(--fs-display); }

h2, .h2 { font-size: var(--fs-h2); font-weight: 600; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.006em; }
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--fg-soft);
  text-wrap: pretty;
  max-inline-size: 46ch;
}
.lede--wide { max-inline-size: 62ch; }

.deck {
  font-size: clamp(1.0625rem, 1.01rem + .28vw, 1.1875rem);
  color: var(--fg-soft);
  max-inline-size: 62ch;
  text-wrap: pretty;
}

p { text-wrap: pretty; max-inline-size: 70ch; }
.prose p + p { margin-block-start: 1.1em; }
.prose { max-inline-size: 68ch; }

.small { font-size: var(--fs-small); line-height: 1.55; }
.micro { font-size: var(--fs-micro); line-height: 1.5; color: var(--fg-soft); }

strong, b { font-weight: 600; }

abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; }

bdi, .num { font-variant-numeric: lining-nums tabular-nums; }

/* ============================================ 04 Arabic overrides ==== */

:lang(ar) {
  --font-display: "El Messiri", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro",
    "Segoe UI", Tahoma, sans-serif;
  --font-num: "Fraunces", "Iowan Old Style", Palatino, serif;
  --fs-body: 1.126rem;          /* +6% over the Latin body size */
  --fs-small: .9275rem;         /* the same +6%, so secondary copy scales too */
  --fs-micro: .8613rem;
  --lh-body: 1.8;
  --lh-display: 1.35;
  --lh-heading: 1.4;
  --track-eyebrow: 0;
  --track-word: 0;
}

:lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) em, :lang(ar) i, :lang(ar) cite { font-style: normal; font-weight: 600; }
:lang(ar) .eyebrow,
:lang(ar) .stat__label,
:lang(ar) .btn { text-transform: none; }
/* The no-uppercase / no-tracking rules exist for Arabic script. The wordmark is
   Latin in every tree and must be the identical tracked capital lockup, so it
   opts back out; the Arabic descriptor beneath it (.brand__sub) does not. */
:lang(ar) .brand__word {
  text-transform: uppercase;
  letter-spacing: .1em !important;
}
:lang(ar) .brand__sub { text-transform: none; letter-spacing: 0 !important; }
:lang(ar) .eyebrow { font-weight: 600; color: var(--emerald); }
:lang(ar) .section--dark .eyebrow,
:lang(ar) .hero .eyebrow,
:lang(ar) .page-head .eyebrow { color: var(--gold-soft); }
:lang(ar) .display,
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { font-weight: 600; }
:lang(ar) .lede { max-inline-size: 42ch; }
:lang(ar) p { max-inline-size: 64ch; }

/* German compounds ("Handelsspezialisten", "Datenschutzerklärung") are wider
   than a 320px viewport at display sizes. Hyphenate them properly rather than
   letting the body-level break-word guard cut a word without a hyphen.
   Arabic is deliberately excluded: it does not hyphenate. */
:lang(de) .display,
:lang(de) .h1, :lang(de) .h2, :lang(de) .h3,
:lang(de) h1, :lang(de) h2, :lang(de) h3 {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 5 4;
}
/* Numerals, e-mail addresses, phone numbers and any other Latin run inside an
   Arabic paragraph must be isolated, or the bidi algorithm drags its trailing
   punctuation to the wrong end of the line. Defined globally, not under
   :lang(ar), so the helper behaves identically in every tree. */
.ltr { direction: ltr; unicode-bidi: isolate; }
bdi { unicode-bidi: isolate; }

/* ============================================== 05 Layout primitives ==== */

.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-inline-size: calc(var(--wrap-narrow) + var(--gutter) * 2); }

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--space-section);
  scroll-margin-block-start: var(--header-h);
}
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.section__head { max-inline-size: 62ch; margin-block-end: var(--space-block); }
.section__head > * + * { margin-block-start: .85rem; }
.section__head--center { margin-inline: auto; text-align: center; }

.stack > * + * { margin-block-start: var(--flow, 1.1rem); }
.stack--lg > * + * { margin-block-start: var(--space-block); }
.stack--sm > * + * { margin-block-start: .5rem; }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* editorial asymmetry — 5/7 and 7/5 splits */
.split { display: grid; gap: var(--gap-lg); align-items: start; }
@media (min-width: 60rem) {
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--7-5 { grid-template-columns: 7fr 5fr; }
  .split--6-6 { grid-template-columns: 1fr 1fr; }
  .split--sticky > :first-child {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2rem);
  }
}

/* ================================== 06 Rules, eyebrows, notes, dividers ==== */

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--emerald);
  margin-block-end: .9rem;
}
.section--dark .eyebrow,
.hero .eyebrow,
.page-head .eyebrow,
.site-footer .eyebrow { color: var(--gold-soft); }

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow--rule::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--gold);
  opacity: .4;
  max-inline-size: 5rem;
}

/* 1px gold hairline with a centred 8-point star */
.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: var(--space-block);
  color: var(--gold);
}
.rule::before, .rule::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: currentColor;
  opacity: .32;
}
.rule__star { inline-size: 14px; block-size: 14px; flex: none; opacity: .85; }
.rule--start::before { display: none; }
.rule--start { justify-content: flex-start; }

.note {
  border-block-start: 1px solid var(--gold);
  padding-block-start: 1.1rem;
  margin-block-start: var(--space-block);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--fg-soft);
  max-inline-size: 68ch;
}
.note strong, .note b { color: var(--fg); }
.note--inset { padding-inline-start: 0; }

.source {
  display: block;
  font-size: var(--fs-micro);
  /* no opacity: --fg-soft is 5.03:1 on sand and 5.06:1 on petrol, and any
     fade drops this 13px attribution line below the 4.5:1 AA minimum. */
  color: var(--fg-soft);
  margin-block-start: .5rem;
}

.breadcrumb { font-size: var(--fs-micro); color: var(--fg-soft); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: .5rem; opacity: .5; }

/* ================================================ 07 Header & navigation ==== */

.skip-link {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--petrol-900);
  color: var(--sand);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
    box-shadow .35s var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  min-block-size: var(--header-h);
}

/* light-page default: the header is legible before any scroll */
.site-header--solid,
.site-header.is-stuck {
  background: rgba(247, 244, 238, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-end-color: var(--line);
}
.site-header--solid .brand,
.site-header.is-stuck .brand,
.site-header--solid .nav__link,
.site-header.is-stuck .nav__link,
.site-header--solid .lang,
.site-header.is-stuck .lang,
.site-header--solid .icon-btn,
.site-header.is-stuck .icon-btn { color: var(--ink); }

/* over the petrol hero the header is transparent with light type */
.site-header--over { color: var(--on-dark); }
.site-header--over .brand,
.site-header--over .nav__link,
.site-header--over .lang,
.site-header--over .icon-btn { color: var(--on-dark); }
.site-header--over.is-stuck {
  background: rgba(11, 43, 60, .88);
  border-block-end-color: var(--line-dark);
}
.site-header--over.is-stuck .brand,
.site-header--over.is-stuck .nav__link,
.site-header--over.is-stuck .lang,
.site-header--over.is-stuck .icon-btn { color: var(--on-dark); }

/* --- brand ---------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand__mark { inline-size: 2rem; block-size: 2rem; flex: none; color: var(--gold); }
.brand__mark svg { inline-size: 100%; block-size: 100%; }
.brand__word {
  font-family: var(--font-body);
  font-size: clamp(.8125rem, .74rem + .32vw, .9375rem);
  font-weight: 600;
  letter-spacing: var(--track-word);
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
/* Below ~400px a single-line wordmark eats the whole header row and shoves the
   menu toggle off-screen, so the lockup stacks instead. */
@media (max-width: 25rem) {
  .brand__word { white-space: normal; max-inline-size: 6.5em; }
  .brand { gap: .55rem; }
  .brand__mark { inline-size: 1.75rem; block-size: 1.75rem; }
}
.brand__sub {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: .72;
  margin-block-start: .1rem;
}

/* --- primary nav ---------------------------------------------------- */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: .35rem;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--gold);
  transform: scaleX(0);
  /* transform-origin takes no logical keywords, so RTL gets its own value */
  transform-origin: left center;
  transition: transform .3s var(--ease);
}
[dir="rtl"] .nav__link::after { transform-origin: right center; }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); opacity: .8; }

/* --- header actions -------------------------------------------------- */
.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(.4rem, 1.4vw, 1rem);
  margin-inline-start: auto;
}
/* the header CTA is a flex item and would otherwise shrink and wrap to two lines */
.header__actions .btn { flex: none; white-space: nowrap; }
/* On a phone there is no room for it beside the mark, the WhatsApp button and
   the menu toggle. It is repeated inside the overlay menu and in the hero. */
@media (max-width: 34rem) {
  .header__actions > .btn { display: none; }
}

/* the header switcher folds into the overlay menu below the desktop breakpoint;
   the footer and the menu always show it, so it is crawlable at every width */
.langs { display: none; }
.menu .langs, .site-footer .langs { display: block; }
.langs__list { display: flex; align-items: center; gap: .55rem; }
.langs__list li + li::before {
  content: "·";
  margin-inline-end: .55rem;
  opacity: .45;
}
.lang {
  font-size: var(--fs-micro);
  text-decoration: none;
  color: inherit;
  opacity: .72;
  white-space: nowrap;
  transition: opacity .25s var(--ease);
}
.lang:hover, .lang:focus-visible { opacity: 1; }
.lang[aria-current="true"] {
  opacity: 1;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
    color .25s var(--ease);
}
.icon-btn svg { inline-size: 1.25rem; block-size: 1.25rem; }
.icon-btn:hover, .icon-btn:focus-visible { border-color: var(--gold); color: var(--gold); }
.site-header--over .icon-btn { border-color: var(--line-dark-strong); }
.site-header--over .icon-btn:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

.menu-toggle { border-color: var(--hairline-strong); }

/* --- desktop --------------------------------------------------------- */
@media (min-width: 68rem) {
  .nav { display: block; }
  .langs { display: block; }
  .menu-toggle { display: none; }
  .header__actions { gap: 1rem; }
  .header__actions::before {
    content: "";
    inline-size: 1px;
    block-size: 1.5rem;
    background: var(--hairline-strong);
  }
}

/* --- full-screen overlay menu (mobile / tablet) ---------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--petrol-900);
  color: var(--on-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: var(--header-h);
  border-block-end: 1px solid var(--line-dark);
}
.menu__bar .brand { color: var(--on-dark); }
.menu__body { padding-block: clamp(1.5rem, 6vw, 3rem); }
.menu__list { display: grid; gap: .25rem; }
.menu__link {
  display: block;
  padding-block: .7rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.25rem);
  font-weight: 300;
  line-height: 1.2;
  text-decoration: none;
  color: var(--on-dark);
  border-block-end: 1px solid var(--line-dark);
  transition: color .25s var(--ease), padding-inline-start .3s var(--ease);
}
.menu__link:hover, .menu__link:focus-visible {
  color: var(--gold-soft);
  padding-inline-start: .5rem;
}
.menu__link[aria-current="page"] { color: var(--gold-soft); }
.menu__foot {
  padding-block: clamp(1.25rem, 4vw, 2rem);
  border-block-start: 1px solid var(--line-dark);
  display: grid;
  gap: 1rem;
}
.menu__langs .langs__list { flex-wrap: wrap; gap: .6rem; }
.menu__langs .lang { font-size: var(--fs-small); }
.menu .icon-btn { border-color: var(--line-dark-strong); }
.menu__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 68rem) { .menu { display: none !important; } }

/* ================================================= 08 Buttons & links ==== */

.btn {
  --btn-bg: var(--petrol-900);
  --btn-fg: var(--sand);
  --btn-bd: var(--petrol-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  min-block-size: 3rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
    border-color .3s var(--ease), transform .3s var(--ease);
}
.btn svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
.btn:hover, .btn:focus-visible {
  --btn-bg: transparent;
  --btn-fg: var(--petrol-900);
  --btn-bd: var(--gold);
}
.btn--sm { padding: .55rem 1.05rem; min-block-size: 2.5rem; font-size: .875rem; }
.btn--lg { padding: 1rem 1.9rem; min-block-size: 3.4rem; font-size: 1rem; }

/* ghost / secondary */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--gold);
}

/* on petrol */
.section--dark .btn, .hero .btn, .page-head .btn, .site-footer .btn, .menu .btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--petrol-900);
  --btn-bd: var(--gold);
}
.section--dark .btn:hover, .hero .btn:hover, .page-head .btn:hover,
.site-footer .btn:hover, .menu .btn:hover,
.section--dark .btn:focus-visible, .hero .btn:focus-visible,
.page-head .btn:focus-visible, .site-footer .btn:focus-visible,
.menu .btn:focus-visible {
  --btn-bg: transparent;
  --btn-fg: var(--gold-soft);
  --btn-bd: var(--gold-soft);
}
.section--dark .btn--ghost, .hero .btn--ghost, .page-head .btn--ghost,
.site-footer .btn--ghost, .menu .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-dark);
  --btn-bd: var(--line-dark-strong);
}
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover, .page-head .btn--ghost:hover,
.site-footer .btn--ghost:hover, .menu .btn--ghost:hover,
.section--dark .btn--ghost:focus-visible, .hero .btn--ghost:focus-visible,
.page-head .btn--ghost:focus-visible, .site-footer .btn--ghost:focus-visible,
.menu .btn--ghost:focus-visible {
  --btn-fg: var(--gold-soft);
  --btn-bd: var(--gold-soft);
}

/* the header sits over the petrol hero: its CTA has to read on dark */
.site-header--over .btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--petrol-900);
  --btn-bd: var(--gold);
}
.site-header--over .btn:hover,
.site-header--over .btn:focus-visible {
  --btn-bg: transparent;
  --btn-fg: var(--gold-soft);
  --btn-bd: var(--gold-soft);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1rem;
}
.cta-row .btn { flex: 0 1 auto; }
@media (max-width: 26rem) {
  .cta-row .btn { inline-size: 100%; }
}

.cta-note {
  font-size: var(--fs-small);
  color: var(--fg-soft);
  margin-block-start: 1rem;
}

/* text link with a gold underline that slides in */
.link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--link);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-block-end: 2px;
  transition: background-size .35s var(--ease), color .25s var(--ease);
}
[dir="rtl"] .link { background-position: 100% 100%; }
.link:hover, .link:focus-visible { background-size: 100% 1px; }
.link svg { inline-size: 1rem; block-size: 1rem; flex: none; }
.link--quiet { color: var(--fg); }

.prose a:not(.btn):not(.link),
.rich a:not(.btn):not(.link) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* directional decorative glyphs mirror in RTL — nothing else does */
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

/* ===================================================== 09 Cards ==== */

.card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease), transform .3s var(--ease),
    background-color .3s var(--ease);
}
.card__icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--gold);
  margin-block-end: .3rem;
}
.card__icon svg { inline-size: 100%; block-size: 100%; }
.card__kicker {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
}
:lang(ar) .card__kicker { text-transform: none; }
/* Once cards sit side by side, a kicker that wraps to two lines would push its
   heading down out of line with its neighbours. Reserve the second line. */
@media (min-width: 56rem) {
  .grid--3 .card__kicker,
  .grid--2 .card__kicker { min-block-size: 3.2em; }
}
.card__body { color: var(--fg-soft); max-inline-size: none; }
.card__foot { margin-block-start: auto; padding-block-start: .6rem; }

.card--link:hover, .card--link:focus-within { border-color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .card--link:hover, .card--link:focus-within { transform: translateY(-2px); }
}

/* whole-card click target that keeps the visible link semantic */
.card--link { position: relative; }
.card--link .card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card--plain { background: transparent; border: 0; padding: 0; }
.card--bordered {
  background: transparent;
  border: 0;
  border-block-start: 1px solid var(--hairline);
  border-radius: 0;
  padding: 1.5rem 0 0;
}

/* ============================================== 10 Stat counters ==== */

.stats {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--hairline);
}
.stat {
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
  border-block-end: 1px solid var(--hairline);
}
@media (min-width: 44rem) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gap);
    border-block-end: 1px solid var(--hairline);
  }
  .stat:nth-child(-n+2) { border-block-end: 1px solid var(--hairline); }
  .stat:nth-last-child(-n+2) { border-block-end: 0; }
}
@media (min-width: 68rem) {
  .stats { grid-template-columns: repeat(4, 1fr); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .stat, .stat:nth-child(-n+2) { border-block-end: 0; }
  .stat + .stat {
    border-inline-start: 1px solid var(--hairline);
    padding-inline-start: clamp(1.5rem, 3vw, 3rem);
  }
}

.stat__value {
  display: block;
  font-family: var(--font-num);
  font-size: var(--fs-stat);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  /* gold-soft never has enough contrast on sand, so light sections use petrol */
  color: var(--petrol-900);
  font-variant-numeric: lining-nums tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  /* The scale word sits on its own line (.stat__unit). Reserve that line in
     every stat — including the two that have no unit — so the four labels stay
     on one baseline. 1em numeral + .126em margin + .525em unit line. */
  min-block-size: 1.66em;
}
/* "Mrd. €", "mil M€", "bn", "مليار يورو": at --fs-stat these run 270–390px and
   overflowed the 4-column track, wrapping the figure onto two or three lines
   with line-height 1. Setting them as a smaller second line keeps the numeral
   at display size and the column intact in every language. */
.stat__unit {
  display: block;
  font-size: .42em;
  line-height: 1.25;
  letter-spacing: 0;
  margin-block-start: .3em;
}
.section--dark .stat__value,
.hero .stat__value,
.page-head .stat__value { color: var(--gold-soft); }
.stat__label {
  display: block;
  margin-block-start: .9rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-soft);
  max-inline-size: 30ch;
}
.stat__source {
  display: block;
  margin-block-start: .7rem;
  font-size: var(--fs-micro);
  color: var(--fg-soft);
}

/* ============================================== 11 Process steps ==== */

.steps { display: grid; gap: 0; counter-reset: step; }
.step {
  position: relative;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  padding-inline-start: clamp(3.25rem, 8vw, 6.5rem);
  border-block-start: 1px solid var(--hairline);
}
.step:last-child { border-block-end: 1px solid var(--hairline); }

/* the vertical gold connector */
.step::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: clamp(1.1rem, 2.6vw, 2.1rem);
  inline-size: 1px;
  background: linear-gradient(var(--gold), var(--gold));
  opacity: .35;
}
.step:first-child::before { inset-block-start: clamp(1.75rem, 4vw, 2.75rem); }
.step:last-child::before { inset-block-end: calc(100% - clamp(3.2rem, 7vw, 4.6rem)); }

.step__dot {
  position: absolute;
  inset-block-start: clamp(1.9rem, 4.2vw, 3rem);
  inset-inline-start: clamp(.72rem, 2.1vw, 1.72rem);
  inline-size: .78rem;
  block-size: .78rem;
  border: 1px solid var(--gold);
  background: var(--bg);
  border-radius: 50%;
}
.step__dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--gold);
  border-radius: 50%;
}

/* oversized ghost numeral behind the content */
.step__num {
  position: absolute;
  inset-block-start: clamp(.5rem, 2vw, 1.1rem);
  inset-inline-end: 0;
  font-family: var(--font-display);
  font-size: var(--fs-ghost);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--petrol-100);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  direction: ltr;
}
.section--dark .step__num,
.page-head .step__num { color: var(--on-dark); opacity: .07; }
.step > * { position: relative; z-index: 1; }
.step__title { margin-block-end: .7rem; }
.step__title .step__index {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--label);
  margin-block-end: .5rem;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
:lang(ar) .step__title .step__index { text-transform: none; }
.step__body { color: var(--fg-soft); max-inline-size: 62ch; }
.step__deliverable {
  margin-block-start: 1.1rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--gold);
  font-size: var(--fs-small);
}
.step__deliverable dt {
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-block-end: .3rem;
}
:lang(ar) .step__deliverable dt { text-transform: none; }
.step__deliverable dd { margin: 0; color: var(--fg); }

/* condensed variant used on the homepage */
.steps--condensed .step { padding-block: clamp(1.35rem, 3vw, 1.9rem); }
.steps--condensed .step__num { font-size: clamp(3rem, 2rem + 5vw, 5rem); }

/* =========================== 12 Presence, trust, industries, FAQ ==== */

.places { display: grid; gap: 0; border-block-start: 1px solid var(--hairline); }
.place {
  display: grid;
  gap: .3rem;
  padding-block: 1.3rem;
  border-block-end: 1px solid var(--hairline);
}
@media (min-width: 40rem) {
  .places { grid-template-columns: repeat(2, 1fr); column-gap: var(--gap); }
}
@media (min-width: 68rem) {
  .places { grid-template-columns: repeat(3, 1fr); }
}
.place__city {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}
.place__country {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--label);
}
:lang(ar) .place__country { text-transform: none; }
.place__note { font-size: var(--fs-small); color: var(--fg-soft); max-inline-size: 34ch; }

.trust { display: grid; gap: var(--gap); }
@media (min-width: 56rem) { .trust { grid-template-columns: repeat(3, 1fr); } }
.trust__item {
  display: grid;
  gap: .75rem;
  align-content: start;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--gold);
}
.trust__icon { inline-size: 2rem; block-size: 2rem; color: var(--gold); }
.trust__icon svg { inline-size: 100%; block-size: 100%; }
.trust__body { color: var(--fg-soft); font-size: var(--fs-small); }

.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  display: inline-block;
  padding: .4rem .8rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  font-size: var(--fs-micro);
  color: var(--fg-soft);
}

.checklist { display: grid; gap: .8rem; }
.checklist li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: .75rem;
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.6;
}
.checklist li::before {
  content: "";
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: .1rem;
  background: currentColor;
  color: var(--gold);
  -webkit-mask: var(--tick) center / contain no-repeat;
  mask: var(--tick) center / contain no-repeat;
  --tick: url("../assets/icons/check.svg");
}

.bullets { display: grid; gap: .7rem; }
.bullets li {
  position: relative;
  padding-inline-start: 1.35rem;
  color: var(--fg-soft);
}
.bullets li::before {
  content: "";
  position: absolute;
  inset-block-start: .62em;
  inset-inline-start: 0;
  inline-size: .4rem;
  block-size: .4rem;
  background: var(--gold);
  transform: rotate(45deg);
}

.faq { display: grid; gap: 0; border-block-start: 1px solid var(--hairline); }
.faq__item { border-block-end: 1px solid var(--hairline); padding-block: clamp(1.3rem, 3vw, 1.9rem); }
.faq__q { margin-block-end: .7rem; }
.faq__a { color: var(--fg-soft); max-inline-size: 68ch; }

/* ============================================ 13 Hero & corridor map ==== */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--petrol-900);
  color: var(--on-dark);
  padding-block-start: calc(var(--header-h) + clamp(2.5rem, 8vw, 6rem));
  /* Enough room below the caption that the map's transparent tail — which the
     caption is pulled up over — still ends inside the clipped box. Without it
     overflow:hidden severs the map mid-fade in a hard horizontal line. */
  padding-block-end: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 34rem at 78% 12%, rgba(201, 162, 39, .13), transparent 62%),
    radial-gradient(48rem 40rem at 6% 78%, rgba(26, 107, 84, .22), transparent 66%),
    linear-gradient(180deg, #0E3348 0%, #0B2B3C 55%, #082330 100%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__copy { max-inline-size: 54rem; }
.hero .display { margin-block-end: 1.5rem; }
.hero .lede { max-inline-size: 52ch; color: var(--on-dark-soft); }
.hero .cta-row { margin-block-start: clamp(1.75rem, 4vw, 2.5rem); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.25rem;
  margin-block-start: 1.4rem;
  font-size: var(--fs-small);
  color: var(--on-dark-faint);
}

.hero__map {
  position: relative;
  z-index: 0;
  margin-block-start: clamp(1.5rem, 5vw, 3.5rem);
  margin-inline: auto;
  max-inline-size: var(--wrap-map);
}
.hero__map .cm {
  inline-size: 100%;
  block-size: auto;
  display: block;
  /* The bottom of the map is a transparent fade band (see the mask below), so
     it is pulled back up rather than left as dead space. The negative margin
     sits on the SVG, NOT on the <figure>: on the figure it shortened the whole
     hero, and since .hero clips with overflow:hidden that cut the map off
     mid-fade in a hard horizontal line and clipped the caption underneath it
     away entirely — at every width, in every tree. */
  margin-block-end: calc(-1 * clamp(1.5rem, 6vw, 5rem));
  /* The map carries its own sea gradient, which would otherwise meet the hero
     gradient in a hard edge — horizontally once the viewport is wider than the
     1800px cap, vertically where the hero gradient continues past it. Fading
     all four sides makes the petrol field read as one continuous night sea.
     The fade zones hold no nodes, arcs or labels: the outermost are Lisbon at
     8.6% and Dubai at 89%. Browsers without mask-composite simply get the
     unfaded map, which is the previous behaviour. */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 8%, #000 86%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0, #000 8%, #000 86%, transparent 100%),
    linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__caption {
  margin-block-start: 1rem;
  padding-inline: var(--gutter);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
  text-align: center;
  direction: ltr;
}
:lang(ar) .hero__caption { text-transform: none; letter-spacing: 0; }

/* The map's font-size is in user units of a 1440-wide viewBox, so a label
   renders at 15 x viewportWidth / 1440 — 8px at 768px, 10.7px at 1024px. Hide
   the labels until they can be read (the caption names all eight cities in the
   meantime) and enlarge them through the mid range so they never fall below
   ~13px. */
@media (max-width: 63.99rem) {
  .cm-labels { display: none; }
}
@media (max-width: 47.99rem) {
  .cm-arc { stroke-width: 2.6; }
  .cm-chain { stroke-width: 1.6; }
}
@media (min-width: 64rem) and (max-width: 90rem) {
  .cm-label { font-size: 19px; }
}

/* The dark section directly under the map. It opens on the exact tone the hero
   gradient closes on, so the two petrol fields read as one continuous sea
   instead of meeting at a visible horizontal edge. */
.section--after-map {
  padding-block-start: clamp(3rem, 9vw, 7rem);
  background: linear-gradient(180deg, #082330 0%, var(--petrol-900) 24rem);
}

/* page header used on inner pages — dark tokens come from the shared group */
.page-head {
  position: relative;
  background: var(--petrol-900);
  color: var(--on-dark);
  padding-block-start: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem));
  padding-block-end: clamp(3rem, 8vw, 5.5rem);
}
.page-head .display,
.page-head h1 { margin-block-end: 1.5rem; }
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52rem 30rem at 82% 0%, rgba(201, 162, 39, .12), transparent 60%),
    linear-gradient(180deg, #0E3348, #0B2B3C);
}
.page-head > * { position: relative; }
.page-head .breadcrumb { margin-block-end: 1.75rem; color: var(--on-dark-faint); }
.page-head .lede { color: var(--on-dark-soft); max-inline-size: 58ch; }

/* the corridor-map artwork: colours live in the SVG, motion lives here */
.cm-arc, .cm-arc-halo { stroke-dashoffset: 0; }
.cm-comet { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cm-arc, .cm-arc-halo {
    animation-duration: 1900ms;
    animation-timing-function: cubic-bezier(.2, .6, .2, 1);
    animation-fill-mode: both;
  }
  .cm-a1 { animation-name: cm-draw1; animation-delay: 260ms; }
  .cm-a2 { animation-name: cm-draw2; animation-delay: 460ms; }
  .cm-a3 { animation-name: cm-draw3; animation-delay: 660ms; }
  .cm-a4 { animation-name: cm-draw4; animation-delay: 860ms; }
  .cm-node { animation: cm-in 700ms ease both; }
  .cm-n1 { animation-delay: 820ms; }
  .cm-n2 { animation-delay: 900ms; }
  .cm-n3 { animation-delay: 980ms; }
  .cm-n4 { animation-delay: 1060ms; }
  .cm-n5 { animation-delay: 1140ms; }
  .cm-n6 { animation-delay: 1220ms; }
  .cm-n7 { animation-delay: 1300ms; }
  .cm-n8 { animation-delay: 1380ms; }
  .cm-pulse {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: cm-pulse 3400ms ease-out infinite;
  }
  .cm-n2 .cm-pulse { animation-delay: 420ms; }
  .cm-n3 .cm-pulse { animation-delay: 840ms; }
  .cm-n4 .cm-pulse { animation-delay: 1260ms; }
  .cm-n5 .cm-pulse { animation-delay: 1680ms; }
  .cm-n6 .cm-pulse { animation-delay: 2100ms; }
  .cm-n7 .cm-pulse { animation-delay: 2520ms; }
  .cm-n8 .cm-pulse { animation-delay: 2940ms; }
  .cm-labels { animation: cm-in 900ms ease 1480ms both; }
  .cm-comet {
    display: block;
    offset-rotate: 0deg;
    animation: cm-run 9s cubic-bezier(.5, 0, .5, 1) infinite;
  }
  .cm-comet--east {
    offset-path: path("M467.8 74.2 Q875.4 127.2 1282.9 400.2");
    animation-delay: 2.4s;
  }
  .cm-comet--west {
    offset-path: path("M133.0 216.8 Q631.0 256.3 1129.0 405.8");
    animation-delay: 6s;
    animation-direction: reverse;
  }
}
@keyframes cm-draw1 { from { stroke-dashoffset: 829; } to { stroke-dashoffset: 0; } }
@keyframes cm-draw2 { from { stroke-dashoffset: 1016; } to { stroke-dashoffset: 0; } }
@keyframes cm-draw3 { from { stroke-dashoffset: 886; } to { stroke-dashoffset: 0; } }
@keyframes cm-draw4 { from { stroke-dashoffset: 755; } to { stroke-dashoffset: 0; } }
@keyframes cm-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-pulse {
  0% { transform: scale(1); opacity: .75; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
@keyframes cm-run {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ===================================================== 14 Forms ==== */

.form { display: grid; gap: 1.35rem; }
.form__intro { color: var(--fg-soft); font-size: var(--fs-small); }

.field { display: grid; gap: .45rem; }
.field__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg);
}
.field__req { color: var(--emerald); }
.field__hint { font-size: var(--fs-micro); color: var(--fg-soft); }

.field__input,
.field__select,
.field__textarea {
  inline-size: 100%;
  padding: .8rem .9rem;
  background: var(--surface);
  /* The boundary of a form control must clear 3:1 (WCAG 1.4.11). --line-strong
     resolves to rgb(208,211,213) on white — 1.5:1 — and the white fill on sand
     is only 1.1:1, so there is no second affordance. Slate gives 5.5:1. */
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  text-align: start;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field__textarea { min-block-size: 10rem; resize: vertical; }
.field__input::placeholder, .field__textarea::placeholder {
  color: var(--slate);
  opacity: .7;
}
.field__input:hover, .field__select:hover, .field__textarea:hover {
  border-color: var(--ink);
}
.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
  outline: 2px solid var(--gold-deep);
  outline-offset: 1px;
}
.field__input:user-invalid,
.field__textarea:user-invalid { border-color: #A2412F; }
.field__error {
  display: none;
  font-size: var(--fs-micro);
  color: #A2412F;
}
.field__input:user-invalid ~ .field__error--any,
.field__textarea:user-invalid ~ .field__error--any { display: block; }
/* an empty required field and a malformed one get different wording */
.field__input:user-invalid:placeholder-shown ~ .field__error--empty { display: block; }
.field__input:user-invalid:not(:placeholder-shown) ~ .field__error--invalid { display: block; }

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%),
    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - .8rem) 1.35rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
[dir="rtl"] .field__select {
  background-position: 1.15rem 1.35rem, .8rem 1.35rem;
  background-image: linear-gradient(135deg, transparent 50%, var(--slate) 50%),
    linear-gradient(45deg, var(--slate) 50%, transparent 50%);
}

/* honeypot: present for bots, gone for humans and screen readers alike */
.hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__foot { display: grid; gap: .9rem; }
.form__privacy { font-size: var(--fs-micro); color: var(--fg-soft); max-inline-size: 56ch; }

.channels { display: grid; gap: 0; }
.channel {
  display: grid;
  gap: .5rem;
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  border-block-start: 1px solid var(--hairline);
}
.channel:last-child { border-block-end: 1px solid var(--hairline); }
.channel__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--label);
}
:lang(ar) .channel__label { text-transform: none; }
.channel__value {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .7vw, 1.4rem);
  font-weight: 600;
  word-break: break-word;
}
.channel__value a { text-decoration: none; }
.channel__note { font-size: var(--fs-small); color: var(--fg-soft); }

.numbered { display: grid; gap: 1.4rem; counter-reset: n; }
.numbered li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  align-items: start;
  counter-increment: n;
}
.numbered li::before {
  content: counter(n, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--label);
  direction: ltr;
}

/* ==================================================== 15 Footer ==== */

.site-footer {
  background: var(--petrol-900);
  color: var(--on-dark);
  border-block-start: 1px solid var(--gold);
  padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
}
.foot-grid { display: grid; gap: var(--gap-lg); }
@media (min-width: 44rem) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .foot-grid { grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; } }

.foot-col__head {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-block-end: 1rem;
}
:lang(ar) .foot-col__head { text-transform: none; }
.foot-list { display: grid; gap: .6rem; font-size: var(--fs-small); }
.foot-list a { text-decoration: none; color: var(--on-dark-soft); }
.foot-list a:hover, .foot-list a:focus-visible {
  color: var(--gold-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.foot-brand .brand { color: var(--on-dark); margin-block-end: 1.1rem; }
.foot-brand p { font-size: var(--fs-small); color: var(--on-dark-soft); max-inline-size: 34ch; }
.foot-brand p + p { margin-block-start: .5rem; }
.foot-langs .langs__list { flex-wrap: wrap; gap: .55rem; }
.foot-langs .lang { color: var(--on-dark-soft); }

.foot-small {
  margin-block-start: clamp(2.5rem, 6vw, 4rem);
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--line-dark);
  display: grid;
  gap: .4rem;
  font-size: var(--fs-micro);
  color: var(--on-dark-faint);
}
.foot-small p { max-inline-size: 90ch; }

/* ============================== 16 Motion: load stagger + reveal ==== */

/* Elements are visible by default. Motion is added only when the visitor has
   not asked for reduced motion; noscript.css restores .reveal if JS is off. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--dur-slow) var(--ease) var(--delay, 0s),
      transform var(--dur-slow) var(--ease) var(--delay, 0s);
    will-change: opacity, transform;
  }
  .reveal.is-in { opacity: 1; transform: none; }

  .d1 { --delay: .08s; }
  .d2 { --delay: .16s; }
  .d3 { --delay: .24s; }
  .d4 { --delay: .32s; }
  .d5 { --delay: .4s; }
  .d6 { --delay: .48s; }
  .d7 { --delay: .56s; }
  .d8 { --delay: .64s; }

  /* orchestrated hero entrance */
  .load-up { animation: load-up .7s var(--ease) both; }
  .load-up.d1 { animation-delay: .08s; }
  .load-up.d2 { animation-delay: .2s; }
  .load-up.d3 { animation-delay: .32s; }
  .load-up.d4 { animation-delay: .44s; }
  .load-up.d5 { animation-delay: .56s; }
  .load-fade { animation: load-fade 1s var(--ease) .5s both; }
}

/* Belt and braces: every keyframe and every transition on the site is either
   authored inside a no-preference query or neutralised here, so "reduce" is
   honoured even for a hover transform we add later and forget to wrap. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

@keyframes load-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes load-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ================================================== 17 Utilities ==== */

.vh {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.vh-focusable:focus-visible {
  position: static !important;
  inline-size: auto;
  block-size: auto;
  clip-path: none;
  margin: 0;
}

.center { text-align: center; }
.center .lede, .center .deck, .center p { margin-inline: auto; }
.measure { max-inline-size: 62ch; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-block-start: 0; }
.mt-1 { margin-block-start: .75rem; }
.mt-2 { margin-block-start: 1.5rem; }
.mt-3 { margin-block-start: var(--space-block); }
.print-only, .print-foot { display: none; }

/* ===================================================== 18 Print ==== */

@media print {
  @page { margin: 16mm; }

  /* Scroll-reveal elements below the fold never intersect, so the observer
     never marks them .is-in and they would print as blank space. Same for the
     hero load animations if printing starts before they finish. */
  .reveal, .load-up, .load-fade {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  html { font-size: 11pt; }
  body {
    background: #fff;
    color: #000;
    overflow: visible;
  }
  .site-header, .menu, .menu-toggle, .skip-link, .hero__map, .site-footer,
  .cta-band, .btn, .icon-btn, .langs, .nav, .breadcrumb, .form__foot,
  .section--dark .rule { display: none !important; }

  .print-only { display: block; }

  .hero, .page-head, .section, .section--dark, .section--tint {
    background: #fff !important;
    color: #000 !important;
    padding-block: 0 0 !important;
    --bg: #fff;
    --fg: #000;
    --fg-soft: #333;
    --hairline: #bbb;
    --on-dark: #000;
    --on-dark-soft: #333;
    --on-dark-faint: #555;
  }
  /* the petrol fields are painted by pseudo-elements, which would otherwise
     survive the rule above and print as a solid black-on-navy slab */
  .hero::before, .page-head::before { display: none !important; }
  .page-head, .hero { padding-block-start: 0 !important; }
  /* no break-inside on the section itself: a section taller than a sheet would
     be pushed whole onto the next page and leave the first one blank */
  .section { padding-block: 8mm !important; }

  .display, h1, h2, h3 { color: #000 !important; }
  .eyebrow, .channel__label, .place__country { color: #444 !important; }
  a { color: #000; text-decoration: none; }
  .channel, .field, .place { break-inside: avoid; }

  /* the form is not useful on paper; the direct channels are */
  .form, .form__intro { display: none !important; }

  .print-foot {
    display: block;
    margin-block-start: 8mm;
    padding-block-start: 3mm;
    border-block-start: 1px solid #000;
    font-size: 9pt;
  }
}

/* ================================ 19 Addenda (services & process) ==== */

/* §11 ends with `.step > * { position: relative; z-index: 1; }`, which sits
   AFTER .step__num / .step__dot in the cascade at equal specificity and so
   cancels their `position: absolute`. Restored here with a descendant
   selector: the ghost numeral belongs behind the content (z-index 0) and the
   connector dot on the gold line, not in the text flow. */
.step > .step__num { position: absolute; z-index: 0; }
.step > .step__dot { position: absolute; }

/* Services page: the oversized ghost numeral that opens each service block.
   Same treatment as .step__num — petrol-100 on light, decorative only
   (aria-hidden) — but it sits in the flow of the sticky column rather than
   behind a step, so it needs no positioning. */
.svc__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-ghost);
  font-weight: 300;
  line-height: .78;
  letter-spacing: -.04em;
  color: var(--petrol-100);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  user-select: none;
}
.section--dark .svc__num { color: var(--on-dark); opacity: .09; }

/* .card__icon is sized as a flex item inside .card; standalone in a section
   head it is an inline box, where inline-size/block-size would not apply. */
.section__head > .card__icon { display: block; }


/* == AGENT-BLOCK: markets/about/privacy/legal (do not merge into sections above) ==
   The legal notice uses <address> for the responsible person. UA default is
   italic; the design system forbids italics (and Arabic has no italic form). */
address { font-style: normal; }


/* == AR-TREE ADDENDA: extends §04 (:lang(ar)); do not merge upward ==========
   Two gaps found while building /ar/.

   1. Latin inside Arabic. Both Arabic faces are declared with an Arabic-only
      unicode-range, so every Latin run in the Arabic tree — the wordmark, the
      e-mail address, SABER / SASO / ECAS / G-Mark / EXW / FOB, and, critically,
      every Western numeral, which the language rules mandate — skipped straight
      past them to a system fallback (Geeza Pro, Tahoma). Re-declaring the two
      family stacks with the Latin webfaces slotted in behind the Arabic ones
      lets each script pick its own face: Arabic glyphs still resolve to IBM
      Plex Sans Arabic / El Messiri (their unicode-ranges come first and match),
      Latin glyphs and digits now resolve to IBM Plex Sans / Fraunces exactly as
      in the Latin trees, instead of to whatever the OS happens to ship. */
:lang(ar) {
  --font-display: "El Messiri", "Fraunces", "Noto Naskh Arabic", "Geeza Pro",
    "Times New Roman", serif;
  --font-body: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic",
    "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  /* Same reasoning for the stat figures: Fraunces covers the Latin digits, but
     the Arabic scale word ("مليار") is outside its unicode-range, so El Messiri
     has to sit behind it or the word drops to Times / Geeza Pro. */
  --font-num: "Fraunces", "El Messiri", "Noto Naskh Arabic", "Geeza Pro",
    "Times New Roman", serif;
}

/*   2. The elements that pin `direction: ltr` so a numeral can never render
      reversed also carry `text-align: start`, which under a forced LTR
      direction resolves to the LEFT edge — the wrong edge of an RTL page — and,
      for the stat figures, puts the Arabic scale word ("مليار") on the wrong
      side of its number. Restoring the paragraph direction fixes both. Digits
      are untouched: bidi always renders a numeric run left to right, so 1,600
      and 165.6 read correctly either way. The corridor map is NOT in this list
      and is mirrored by nothing — a map does not flip. */
:lang(ar) .stat__value,
:lang(ar) .svc__num,
:lang(ar) .step__title .step__index,
:lang(ar) .hero__caption { direction: rtl; }