/* Arabic (right-to-left) overrides. Loaded after style.css and inner.css on every page under /ar/. */
:root { --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] body { line-height: 1.85; }
html[lang="ar"] em, html[lang="ar"] i { font-style: normal; }
html[lang="ar"] .mono, html[lang="ar"] .eyebrow, html[lang="ar"] .label { text-transform: none; }
html[lang="ar"] .mono { font-size: 12.5px; }
[dir="rtl"] .skip { left: auto; right: 12px; }
[dir="rtl"] .btn:hover b { transform: translateX(-4px); }

/* header */
[dir="rtl"] .nav__links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav__en { font-family: "Segoe UI", system-ui, sans-serif; }
[dir="rtl"] .sub { left: auto; right: -18px; }
[dir="rtl"] .nv:nth-last-child(-n+3) > .sub { right: auto; left: -18px; }
[dir="rtl"] .nv--mega .sub { left: var(--pad); right: var(--pad); }
[dir="rtl"] .nv.has-sub > a::after { margin: 0 8px 3px 0; }
[dir="rtl"] .sub a { white-space: normal; }
[dir="rtl"] .progress { transform-origin: right; }
[dir="rtl"] .totop { right: auto; left: clamp(16px, 2.4vw, 32px); }
@media (max-width: 900px) { [dir="rtl"] .nav__cta { margin-left: 0; margin-right: auto; } }

/* inner pages */
[dir="rtl"] .prose li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .prose li::before { left: auto; right: 0; }
[dir="rtl"] .faq summary { padding: 18px 22px 18px 56px; }
[dir="rtl"] .faq summary::after { right: auto; left: 22px; }
[dir="rtl"] .fam li a:hover { padding-left: 0; padding-right: 10px; }
[dir="rtl"] .fam li a:hover em { transform: translateX(-4px); }
[dir="rtl"] .ccard { padding: clamp(18px, 1.8vw, 26px) 56px clamp(18px, 1.8vw, 26px) clamp(20px, 2.2vw, 30px); }
[dir="rtl"] .ccard i { right: auto; left: 22px; }
[dir="rtl"] .ccard:hover i { transform: translateX(-6px); }
[dir="rtl"] .pull footer { text-transform: none; }
[dir="rtl"] .trio, [dir="rtl"] .trio > div { text-align: start; }
.trio, .trio > div { }
[dir="rtl"] .trio { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
[dir="rtl"] .trio > div { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
[dir="rtl"] .trio b { display: block; font: 700 18px/1.3 var(--font); color: var(--navy); margin-bottom: 8px; }
[dir="rtl"] .trio p { margin: 0; font-size: 15px; line-height: 1.7; }
@media (max-width: 640px) { [dir="rtl"] .trio { grid-template-columns: minmax(0, 1fr); } }
[dir="rtl"] .icard2__t .mono { text-transform: none; }

/* home: hero is mirrored so the text sits on the dark facade side and the cards on the sky side */
[dir="rtl"] .hero__scene { left: calc((100vw - max(100vw, 177.78svh)) * .4); transform-origin: 80% 46%; }
[dir="rtl"] .hero__scene img { transform: scaleX(-1); }
[dir="rtl"] .hero__stage::before { left: auto; right: var(--pad); border-width: 1px 1px 0 0; }
[dir="rtl"] .hero__inner { padding: 120px var(--pad) 130px 0; }
[dir="rtl"] .hero__ruler { left: calc(var(--L) + var(--W) * .57); }
[dir="rtl"] .hero__coord { left: auto; right: calc(100% - var(--L) - var(--W) * .57 + 18px); }
[dir="rtl"] .hero__live { right: auto; left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); }
[dir="rtl"] .proof { right: auto; left: var(--pad); }
[dir="rtl"] .proof li::after { right: auto; left: 16px; }
[dir="rtl"] .hero__bloom { left: 70%; }
@media (max-width: 900px) {
  [dir="rtl"] .hero__inner { padding: 110px var(--pad) 340px; }
  [dir="rtl"] .proof { right: var(--pad); left: var(--pad); }
  [dir="rtl"] .proof li::after { right: auto; left: 12px; }
}

/* home: the years scene runs from the right */
[dir="rtl"] .yr__num { margin-left: 0; margin-right: -.04em; direction: ltr; text-align: right; }
[dir="rtl"] .yr__line { transform-origin: right; }
[dir="rtl"] .yr__dot { left: auto; right: 0; margin-left: 0; margin-right: -5px; }
[dir="rtl"] .yr__ticks em { transform: translateX(50%); }
[dir="rtl"] .yr__ticks em.first { transform: none; }
[dir="rtl"] .yr__ticks em.last { transform: translateX(100%); }
[dir="rtl"] .yr__flag { left: auto; right: 0; }
[dir="rtl"] .yr__flag::before { left: auto; right: 0; }
[dir="rtl"] .yr__flag p { left: auto; right: 10px; text-align: right; }
[dir="rtl"] .yr__flag.r p { right: auto; left: 10px; text-align: left; }
[dir="rtl"] .yr__yrs { text-align: left; }
@media (max-width: 900px) { [dir="rtl"] .yr__yrs { text-align: right; } }

/* home: firm, rail, why */
[dir="rtl"] .bento__facts { padding-left: 0; padding-right: 38px; }
[dir="rtl"] .rail { left: auto; right: 9px; }
[dir="rtl"] .fact::before { left: auto; right: -36px; }
[dir="rtl"] .fact b sup { margin-left: 0; margin-right: 2px; }
@media (max-width: 900px) { [dir="rtl"] .bento__facts { padding-right: 30px; } [dir="rtl"] .fact::before { right: -28px; } [dir="rtl"] .rail { right: 5px; } }
[dir="rtl"] .wcard__big { right: auto; left: -1vw; }
[dir="rtl"] .wcard details summary::after { margin-left: 0; }

/* home: practice orbit and sectors */
[dir="rtl"] .orbit__glow { left: 42%; }
[dir="rtl"] .orbit__head { left: auto; right: var(--pad); }
[dir="rtl"] .orbit__system { left: 40%; }
[dir="rtl"] .orbit__detail { left: auto; right: var(--pad); }
[dir="rtl"] .orbit__all { margin-left: 0; margin-right: 22px; }
[dir="rtl"] .orbit__items li { text-transform: none; font-size: 13px; }
[dir="rtl"] .orbit__items li::before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .orbit__legend { right: auto; left: var(--pad); text-transform: none; }
[dir="rtl"] .orbit__fam { text-transform: none; }
@media (max-width: 900px) {
  [dir="rtl"] .orbit__head { right: var(--pad); left: var(--pad); }
  [dir="rtl"] .orbit__system, [dir="rtl"] .orbit__glow { left: 50%; }
  [dir="rtl"] .orbit__detail { right: var(--pad); left: var(--pad); }
}
[dir="rtl"] .pano, [dir="rtl"] .pano__strip { direction: ltr; }
[dir="rtl"] .pv { direction: rtl; }
[dir="rtl"] .card { left: auto; right: var(--pad); }
@media (max-width: 900px) { [dir="rtl"] .card { left: var(--pad); right: var(--pad); } }
[dir="rtl"] .sw__nav li i::after { transform-origin: right; }
[dir="rtl"] .proof b, [dir="rtl"] .fact b, [dir="rtl"] .glance b, [dir="rtl"] .yr__yrs b { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[dir="rtl"] .glance b, [dir="rtl"] .yr__yrs b { display: block; }
[dir="rtl"] .orbit__num, [dir="rtl"] .card__n { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[dir="rtl"] .ccard b[dir="ltr"] { text-align: right; }
