/* ============================================================
   ARABIC — right to left
   Loaded last, on Arabic pages only (<html lang="ar" dir="rtl">).
   Grids and flex rows already follow the reading direction; this
   file mirrors what is placed with physical left/right, flips the
   direction things settle from, and adjusts type for Arabic.
   The diamond cluster itself keeps its geometry: it is the mark,
   not a sentence, so it is not mirrored.
   ============================================================ */

/* ---------- Type ----------
   Urbanist has no Arabic letters, so Arabic falls through to Tajawal
   glyph by glyph while Latin words and figures stay in Urbanist.
   Arabic is cursive: letter-spacing breaks the joins between letters,
   so every tracking value in the system is reset here (the !important
   overrides the per-component values without repeating each one).
   Arabic also needs more leading than Latin display type: its marks
   rise above and fall below the Latin x-height. */
.roari,.boards{font-family:Urbanist,Tajawal,sans-serif}
[dir="rtl"] *{letter-spacing:0 !important}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,
[dir="rtl"] .tip__line,[dir="rtl"] .next b,[dir="rtl"] .sub,
[dir="rtl"] .prose blockquote{line-height:1.3}
[dir="rtl"] .hero h1,[dir="rtl"] .contact h2,[dir="rtl"] .closer h2{line-height:1.25}
[dir="rtl"] .tile span,[dir="rtl"] .chain span,[dir="rtl"] .next__in{line-height:1.35}
[dir="rtl"] body{line-height:1.7}
[dir="rtl"] .lede,[dir="rtl"] .hero__lede,[dir="rtl"] .prose{line-height:1.8}

/* ---------- Shared chrome ---------- */
[dir="rtl"] .skip{left:auto;right:var(--pad)}
[dir="rtl"] .contact__row dd{text-align:left}
/* The diamond cluster keeps the same 2×2 geometry in both languages. */
[dir="rtl"] .cluster{direction:ltr}
[dir="rtl"] .cluster span{direction:rtl}

/* ---------- Home: contact panel ----------
   The gold corner and sign-off move to the bottom right, the dark block
   and the profile download to the opposite corners, and each still
   slides in from its own edge. */
[dir="rtl"] .contact__corner{left:auto;right:calc(var(--s) * -.406)}
[dir="rtl"] .contact__block{right:auto;left:-160px}
.js[dir="rtl"] .contact:has(.signoff[data-reveal]:not(.is-in)) .contact__corner{transform:translate(24%,24%) rotate(0deg)}
.js[dir="rtl"] .contact:has(.label[data-reveal]:not(.is-in)) .contact__block{transform:translate(-24%,-24%) rotate(0deg)}
[dir="rtl"] .signoff{left:auto;right:calc(var(--s) * .09)}
[dir="rtl"] .dl{right:auto;left:calc(var(--s) * .09);transform-origin:left bottom}
[dir="rtl"] .dl__cover{margin-left:0;margin-right:16px}
[dir="rtl"] .plat--lead .shape{right:auto;left:-70px}
@media (max-width:860px){
  [dir="rtl"] .dl{margin:40px var(--pad) 0 0;transform-origin:right top}
}
@media (max-width:620px){
  [dir="rtl"] .plat--lead .shape{left:-60px}
  [dir="rtl"] .chain span,.js[dir="rtl"] .chain[data-reveal]:not(.is-in) span{text-align:right}
}

/* ---------- Practice pages ---------- */
[dir="rtl"] .stages__link{left:calc(var(--n) * -.2);right:calc(var(--n) * 1.6)}
[dir="rtl"] .prog th{text-align:right}
[dir="rtl"] .prog td:first-child{border-radius:0 18px 18px 0}
[dir="rtl"] .prog td:last-child{border-radius:18px 0 0 18px}
[dir="rtl"] .prog small{margin:3px 22px 0 0}
[dir="rtl"] .proj .shape{right:auto;left:-56px}
/* Project cards deal outward from the centre: the grid is mirrored, so
   each card comes from the other side. */
.js[dir="rtl"] .projects[data-reveal]:not(.is-in)>li{transform:translate(calc(var(--fx,0%) * -1),0) scale(.88)}
[dir="rtl"] .closer__block{right:auto;left:-170px}
.js[dir="rtl"] .closer:has(.label[data-reveal]:not(.is-in)) .closer__block{transform:translate(-24%,-24%) rotate(0deg)}
@media (max-width:620px){
  [dir="rtl"] .prog td:first-child{border-radius:16px 16px 0 0}
  [dir="rtl"] .prog td:last-child{border-radius:0 0 16px 16px;padding-left:20px;padding-right:42px}
  .js[dir="rtl"] .projects[data-reveal]:not(.is-in)>li{transform:translateY(14px)}
}

/* ---------- Company profile (A4) ---------- */
[dir="rtl"] .cover__block{right:auto;left:-220px}
[dir="rtl"] .cover__ring{right:auto;left:120px}
[dir="rtl"] .cover__corner{left:auto;right:-180px}
[dir="rtl"] .cover__mark{right:auto;left:170px}
[dir="rtl"] .cover__brand,[dir="rtl"] .cover__copy{left:auto;right:56px}
[dir="rtl"] .cover__url{right:auto;left:56px}
[dir="rtl"] .history__ring{right:auto;left:-200px}
[dir="rtl"] .banner__ring{right:auto;left:-80px}
[dir="rtl"] .leader__ring{right:auto;left:-70px}
[dir="rtl"] .roari .contact__corner{left:auto;right:-260px}
[dir="rtl"] .roari .contact__block{right:auto;left:-160px}
[dir="rtl"] .roari .contact__row--top dd{text-align:left}

/* ---------- Identity board ---------- */
[dir="rtl"] .roari .hero__copy{left:auto;right:40px}
[dir="rtl"] .roari .hero__tiles{right:auto;left:120px}
[dir="rtl"] .card__ring{right:auto;left:-50px}
[dir="rtl"] .card__contact{left:auto;right:22px}
[dir="rtl"] .card__mark{right:auto;left:20px}
[dir="rtl"] .mini-cover__corner{right:auto;left:-90px}
[dir="rtl"] .slide__block{right:auto;left:-70px}
[dir="rtl"] .signature{font-family:Urbanist,Tajawal,Arial,sans-serif}