/* RACE — right-to-left overrides. Loaded only by the Arabic pages, after styles.css.
   Nothing here applies unless the document carries dir="rtl", so the other languages
   are untouched. */

[dir="rtl"]{
  --font-display:"IBM Plex Sans Arabic","Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
  --font-body:"IBM Plex Sans Arabic","Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif;
  --font-mono:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
}

/* Arabic is cursive: letter-spacing breaks the joins, and the type needs more leading
   than the Latin setting. Western digits are the norm in Lebanon and West Africa. */
[dir="rtl"] body{line-height:1.85;font-size:17px}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  letter-spacing:0;font-stretch:normal;font-weight:600;line-height:1.35;
}
[dir="rtl"] h1{line-height:1.3}
[dir="rtl"] .mono,[dir="rtl"] .eyebrow,[dir="rtl"] .meta,[dir="rtl"] .chip,[dir="rtl"] .tb,
[dir="rtl"] .tb small,[dir="rtl"] .stat span,[dir="rtl"] .stat b,[dir="rtl"] .hero-tb,
[dir="rtl"] .tbl th,[dir="rtl"] .lbl,[dir="rtl"] .fbtn,[dir="rtl"] .fcount,
[dir="rtl"] .yr,[dir="rtl"] .pl,[dir="rtl"] .coord,[dir="rtl"] .gcount,[dir="rtl"] .gcap,
[dir="rtl"] .shots,[dir="rtl"] .footer,[dir="rtl"] .langs a{letter-spacing:0}
[dir="rtl"] .lede{line-height:1.75}
[dir="rtl"] p{line-height:1.85}

/* keep Latin runs (brand names, codes, addresses) reading left-to-right inside Arabic */
[dir="rtl"] .coord,[dir="rtl"] .langs,[dir="rtl"] .gcount{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] a[href^="tel:"],[dir="rtl"] a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---- directional rules from styles.css, mirrored ---- */
[dir="rtl"] .skip{left:auto;right:-999px}
[dir="rtl"] .skip:focus{left:auto;right:8px}

[dir="rtl"] .langs a{border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .langs a:first-child{border-right:0}

[dir="rtl"] .stat{border-left:0;border-right:1px solid var(--line);padding:28px 24px}
[dir="rtl"] .stat:first-child{border-right:0;padding-right:0;padding-left:24px}
@media (max-width:1080px){
  [dir="rtl"] .stat{border-right:0;border-top:1px solid var(--line);padding-right:0}
}

[dir="rtl"] .step::before{left:auto;right:0}
[dir="rtl"] .fbar{border-left:1px solid var(--night-line);border-right:4px solid #4F8FEA}

[dir="rtl"] .card{text-align:right}
[dir="rtl"] .chip{left:auto;right:12px}
[dir="rtl"] .card .pic .shots{right:auto;left:12px}
[dir="rtl"] .card .meta span+span::before{margin-right:0;margin-left:10px}

[dir="rtl"] .place{border-left:0;border-right:1px solid var(--line);padding:30px 28px 30px 0}
[dir="rtl"] .place:first-child{border-right:0;padding-right:0}
@media (max-width:760px){
  [dir="rtl"] .place{border-right:0;padding-right:0;border-top:1px solid var(--line)}
}

[dir="rtl"] .tbl th{text-align:right;padding:0 0 14px 20px}
[dir="rtl"] .tbl td{padding-right:0;padding-left:20px}

[dir="rtl"] .checks li{padding-left:0;padding-right:26px}
[dir="rtl"] .checks li::before{left:auto;right:0}

[dir="rtl"] .tb div{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .tb div:nth-child(2n){border-left:0}

[dir="rtl"] .modal-close{right:auto;left:12px}
[dir="rtl"] .gprev{left:auto;right:12px}
[dir="rtl"] .gnext{right:auto;left:12px}
[dir="rtl"] .gprev svg,[dir="rtl"] .gnext svg{transform:scaleX(-1)}
[dir="rtl"] .gcount{left:auto;right:12px}

[dir="rtl"] .timeline li::before{left:auto;right:0}
[dir="rtl"] .timeline li{padding:24px 0 28px 24px}

[dir="rtl"] .values{border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .value{border-right:0;border-left:1px solid var(--line)}

/* the hero shade darkens the side the copy sits on */
[dir="rtl"] .hero-shade{
  background:linear-gradient(270deg,rgba(14,19,23,.9) 0%,rgba(14,19,23,.62) 42%,rgba(14,19,23,.2) 100%),
             linear-gradient(0deg,rgba(14,19,23,.85) 0%,rgba(14,19,23,0) 40%);
}

/* arrows in buttons and links point the other way */
[dir="rtl"] .btn svg,[dir="rtl"] .link svg,[dir="rtl"] .cta svg{transform:scaleX(-1)}

/* the client marquee scrolls the other way */
@keyframes marquee-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
[dir="rtl"] .clients .track{animation-name:marquee-rtl;letter-spacing:0}