/* NASJ Arabic layer (2026-09-25). Loaded only by /ar/ pages (ops/build-ar.py).
   Arabic type: Cairo (SIL Open Font License, /fonts/OFL-Cairo.txt), self-hosted, one variable file for weights 400-800.
   How it works: every family the site already names (Archivo, Instrument Serif, Inter and their fallbacks) gets an extra
   @font-face that covers ONLY the Arabic unicode-range and points at Cairo. So each Arabic letter renders in Cairo,
   and English words and numbers stay exactly as on the English site. Rules (Aman 2026-09-25): headings are one colour
   and bold; nothing in Arabic is lighter than regular (the variable file stops at 400, so a 300 request renders 400).
   The navigation (header + mobile menu) is dir="ltr" on purpose: same layout, same toggle position in both languages. */
/* One @font-face per family x weight x style: Chrome only mixes faces whose weight/style descriptors match exactly,
   so a single 100-900 range loses to Archivo's exact 400 and Arial fills the Arabic. Generated list, keep it exhaustive. */
@font-face { font-family: "Archivo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Archivo Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Inter"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Serif Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Serif Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Serif Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Serif Fallback"; src: url("/fonts/cairo-arabic-400-800.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* anything that names only a system stack still lands on Cairo for Arabic */
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea {
  font-family: Archivo, "Archivo Fallback", Cairo, -apple-system, "Segoe UI", sans-serif;
}
/* headings: bold, one colour */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-weight: 700; letter-spacing: 0; line-height: 1.35 !important; }
html[lang="ar"] h1 em, html[lang="ar"] h2 em, html[lang="ar"] h3 em, html[lang="ar"] em.accent, html[lang="ar"] .pv-h em {
  color: inherit !important; opacity: 1 !important; font-weight: inherit; font-style: normal; font-family: inherit !important;
}
/* Arabic has no true italic and no letter-case */
html[lang="ar"] em, html[lang="ar"] i, html[lang="ar"] .mg-head, html[lang="ar"] .pillar-num { font-style: normal; }
html[lang="ar"] .eyebrow, html[lang="ar"] .cs-meta, html[lang="ar"] .v-foot, html[lang="ar"] .matrix-head span { letter-spacing: 0; text-transform: none; }
html[lang="ar"] .pillar-num { font-size: .85em; font-weight: 500; }
html[lang="ar"] p, html[lang="ar"] li, html[lang="ar"] .lead { line-height: 1.8; }

/* navigation stays put: labels are Arabic, layout is the English one */
html[lang="ar"] .site-header, html[lang="ar"] #mobile-menu { direction: ltr; }
html[lang="ar"] .site-header .mega .mg-txt, html[lang="ar"] #mobile-menu li { text-align: left; }

/* body mirrors: physical left/right rules that dir="rtl" can't flip on its own */
html[dir="rtl"] main, html[dir="rtl"] footer { text-align: right; }
html[dir="rtl"] .center, html[dir="rtl"] .center * { text-align: center; }
html[dir="rtl"] main a > svg[viewBox="0 0 24 24"]:last-child, html[dir="rtl"] footer a > svg[viewBox="0 0 24 24"]:last-child { transform: scaleX(-1); }

/* hero: copy on the right, collage on the left; Arabic sets wider than Latin, keep the headline inside its half */
@media (min-width: 1024px) {
  html[dir="rtl"] .hero-copy { margin-left: 0; margin-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    padding-right: 0; padding-left: 48px; text-align: right; }
  html[dir="rtl"] .hero-collage { right: auto; left: 0; }
}
/* same size as the English hero (hero.css sets it per breakpoint); Arabic wraps to two lines like the English does */
html[lang="ar"] .hero h1 { white-space: normal; max-width: 100%; line-height: 1.25 !important; }

/* photo heroes (services pages): Arabic copy on the right, the photo's subject on the left (Aman 2026-09-25).
   The photo and its dark shade are mirrored so the dark side sits under the copy. */
html[dir="rtl"] .svx-hero-img, html[dir="rtl"] .svx-hero-shade { transform: scaleX(-1); }

/* big stats: the unit (ريال) sits on the left of an Arabic word, give it room; Arabic unit words set lighter than the digits */
html[lang="ar"] .numbers-sec .stat .v .cur { margin-right: .45em; margin-left: 0; letter-spacing: 0; font-size: .26em; }
html[lang="ar"] .numbers-sec .stat .v { letter-spacing: 0; }

/* counters: only the digits are huge; the unit word (مليون / ألف, added by work-tiles.js) sits small like the currency */
html[lang="ar"] .num + .unit { font: 500 max(.3em, 12px)/1 Archivo, "Archivo Fallback", sans-serif; letter-spacing: 0; margin: 0 .3em 0 0; vertical-align: .2em; }
html[lang="ar"] .numbers-sec .stat .v .unit + .cur { margin-right: .15em; }
html[lang="ar"] .cs-stats b .unit, html[lang="ar"] .cs-card-stats b .unit { font: 500 max(.38em, 13px)/1 Archivo, "Archivo Fallback", sans-serif; margin-right: .3em; vertical-align: .15em; white-space: nowrap; }

/* services flow (desktop): the light beam sweeps from the chips into the hub; chips sit on the right in Arabic */
@media (min-width: 901px) {
  html[dir="rtl"] .svc-beam { left: -40%; right: -60%; transform-origin: right center;
    background: radial-gradient(ellipse at 70% 50%, rgb(148 177 200 / .55), rgb(148 177 200 / 0) 70%); }
}

/* the one exception to one-colour headings (Aman 2026-09-25): the homepage hero highlights مربحا in ice, same bold weight */
html[lang="ar"] .hero h1 em { color: var(--ice, #94B1C8) !important; }

/* LAYOUT RULE (Aman 2026-09-25): in Arabic, text on the RIGHT and the image on the LEFT, whatever the English order.
   In an RTL grid the first column is on the right, so copy goes first (order 1) and media last (order 2 = left). */
@media (min-width: 768px) {
  html[dir="rtl"] .split > .team-media, html[dir="rtl"] .split > figure, html[dir="rtl"] .split > img, html[dir="rtl"] .split > picture { order: 2; }
}
@media (min-width: 901px) {
  html[dir="rtl"] .svx-split-grid > .svx-video, html[dir="rtl"] .svx-split-grid > img, html[dir="rtl"] .svx-split-grid > figure,
  html[dir="rtl"] .svx-split-grid > picture, html[dir="rtl"] .svx-split-grid > video { order: 2; }
}
@media (min-width: 1024px) {
  html[dir="rtl"] .project { grid-template-columns: 2fr 1.1fr; }
  html[dir="rtl"] .project > .cover, html[dir="rtl"] .project > :first-child:has(.cover) { order: 2; }
  html[dir="rtl"] .project > .cover { justify-self: end; width: 100%; }
}
@media (min-width: 861px) {
  html[dir="rtl"] .cs-row .cs-row-media, html[dir="rtl"] .cs-row.flip .cs-row-media { order: 2; }
  html[dir="rtl"] .cs-row .cs-row-copy, html[dir="rtl"] .cs-row.flip .cs-row-copy { order: 1; justify-self: start; }
}

/* case-study result table (2026-09-29): first column hugs the right edge, figures align to the left edge */
[dir="rtl"] .cs-table th, [dir="rtl"] .cs-table td { text-align: right; }
[dir="rtl"] .cs-table td:not(:first-child), [dir="rtl"] .cs-table th:not(:first-child) { text-align: left; }
[dir="rtl"] .cs-table-note { text-align: right; }