/* Arabic / RTL layer — loaded only by the pages under /ar/.

   This is an override sheet rather than a rewrite of styles.css. Converting the
   main stylesheet to logical properties would have been tidier in the abstract,
   but it would have touched every rule on a site that is already live and
   serving, to fix a direction it does not use. Everything here is scoped to
   [dir=rtl] so the English pages cannot regress.

   Load order matters: styles.css first, then this. */

/* ── Arabic type ────────────────────────────────────────
   IBM Plex Sans Arabic is the same superfamily as the Latin body face already
   in use, so the two sit together without a seam — matching x-height, stroke
   contrast and terminals. Self-hosted like everything else: the CSP is
   font-src 'self' and there are no external requests anywhere on this site.
   These are the Arabic unicode-range subsets only, ~134KB for three weights. */
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/ibmplexsansarabic-400.woff2) format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/ibmplexsansarabic-500.woff2) format("woff2");font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../fonts/ibmplexsansarabic-600.woff2) format("woff2");font-weight:600;font-display:swap;font-style:normal}

[dir=rtl]{
  /* Space Grotesk has no Arabic coverage, so the display face falls back to the
     Arabic family too. The size difference is deliberate: Arabic glyphs carry
     more visual weight at the same point size than Latin, and the display sizes
     were tuned for Space Grotesk. */
  --d:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --b:"IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;
  /* Mono labels keep Latin Plex Mono for any Latin/numeral runs, with the
     Arabic family behind it for Arabic label text. */
  --m:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,monospace;
}

/* Arabic has no uppercase. text-transform:uppercase is a no-op on Arabic
   glyphs but still applies to any Latin inside the same label, which produces
   an inconsistent mix. Tracking is also a Latin device — letter-spacing breaks
   the cursive joins that Arabic depends on, so it is removed outright. */
[dir=rtl] .micro,
[dir=rtl] .eyebrow,
[dir=rtl] .badge,
[dir=rtl] .legal__updated,
[dir=rtl] .wip__tag,
[dir=rtl] .cta__wip-tag,
[dir=rtl] .cap__meta,
[dir=rtl] .ba__tag{letter-spacing:0;text-transform:none}

/* Arabic needs more leading than Latin at the same size — ascenders and
   descenders travel further and diacritics sit above the line. */
[dir=rtl] body{line-height:1.85}
[dir=rtl] .d1,[dir=rtl] .d2,[dir=rtl] .d3{line-height:1.32;letter-spacing:0}
[dir=rtl] .lead,[dir=rtl] .legal__body p,[dir=rtl] .legal__body li{line-height:1.9}

/* ── direction flips ────────────────────────────────────
   Each of these mirrors one physical property in styles.css. */

[dir=rtl] .dot{margin-right:0;margin-left:.72em}
[dir=rtl] .eyebrow__n{margin-right:0;margin-left:1.1em}

[dir=rtl] .nav__links{margin-left:0;margin-right:auto}
[dir=rtl] .nav__burger{margin-left:0;margin-right:auto}

[dir=rtl] .hero__rail{border-left:0;border-right:1px solid var(--line);
  padding-left:0;padding-right:clamp(24px,3vw,42px)}
[dir=rtl] .cta__rail{border-left:0;border-right:1px solid var(--ink-line);
  padding-left:0;padding-right:clamp(24px,3vw,42px)}

[dir=rtl] .split__a{border-right:0;border-left:1px solid var(--line)}
[dir=rtl] .picker__list{border-right:0;border-left:1px solid var(--line)}
[dir=rtl] .picker__list button{text-align:right}
[dir=rtl] .picker__ar{margin-left:0;margin-right:auto;transform:scaleX(-1)}

[dir=rtl] .cap__n{right:auto;left:clamp(26px,2.8vw,34px)}
[dir=rtl] .cap .micro{padding-right:0;padding-left:2.4em}

/* The acid rule that closes a section, and the note under the quad grid. */
[dir=rtl] .closer{border-left:0;border-right:2px solid var(--acid);
  padding-left:0;padding-right:20px}
[dir=rtl] .quad__note{border-left:0;border-right:2px solid var(--acid);
  padding-left:0;padding-right:16px}

/* The timeline is a 5-column horizontal grid, so ::before is the connector
   running from each node to the next one across the gap — not a vertical rail.
   Mirroring it means the line has to leave from the other side of the node and
   reach backwards into the gap. */
[dir=rtl] .tl__node{left:auto;right:0}
[dir=rtl] .timeline li::before{left:calc(-1 * clamp(16px,2.2vw,30px));right:36px}

[dir=rtl] .hero::after{right:auto;left:-12%}
[dir=rtl] .cta::after{left:auto;right:6%}


/* Arrows are directional glyphs, not text — they must point the way the reader
   is going. Flipping the glyph rather than swapping it for ← keeps one string
   in the markup. */
[dir=rtl] .btn__ar,
[dir=rtl] .pair__ar,
[dir=rtl] .wip__link span[aria-hidden],
[dir=rtl] .cta__wip-link span[aria-hidden],
[dir=rtl] .e__ar{display:inline-block;transform:scaleX(-1)}
[dir=rtl] .btn:hover .btn__ar{transform:scaleX(-1) translateX(4px)}

/* ── the before/after sliders stay LTR ──────────────────
   main.js writes clipPath:inset(0 X% 0 0), which is physical and always reveals
   from the left edge. Mirroring the container would leave the handle travelling
   opposite to the reveal. The images are photographs, not text, so there is
   nothing directional about them — pinning the component to LTR is correct
   rather than a compromise, and the caption below it still reads RTL. */
[dir=rtl] .ba{direction:ltr}
[dir=rtl] .pair__note,[dir=rtl] .ba + figcaption{direction:rtl}

/* ── language switch ────────────────────────────────────
   Sits in the nav on both language versions. Small, quiet, always in the same
   place, and labelled in the language it switches TO — a reader who needs the
   Arabic version cannot necessarily read "Arabic". */
.lang{display:inline-flex;align-items:center;gap:.4em;flex-shrink:0;
  padding:7px 13px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--m);font-size:.75rem;color:var(--tx-2);
  transition:border-color .2s,color .2s,background .2s}
.lang:hover{border-color:var(--tx);color:var(--tx)}
.lang__globe{width:13px;height:13px;flex-shrink:0;opacity:.65}
.lang:hover .lang__globe{opacity:1}
/* The Arabic label always renders in the Arabic face regardless of which page
   it sits on, so "العربية" is never substituted by a fallback on the English
   page — where the body font has no Arabic coverage at all. */
.lang__ar{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-size:.8125rem}

/* The switch stays in the top bar on phones rather than hiding inside the
   burger — a language switch nobody can find is a language switch nobody uses,
   and the Arabic version is the whole point of the Saudi push. It shrinks to a
   two-character label instead, which is what makes it fit next to the brand and
   the burger at 320px. */
.lang__short{display:none}

@media (max-width:900px){
  .lang__full{display:none}
  .lang__short{display:inline}
  .lang{padding:9px 12px;gap:.35em}
  .lang__ar{font-size:.9375rem;line-height:1}
}

@media (max-width:900px){
  /* The rail borders become top borders on narrow screens in styles.css; the
     RTL side borders have to be cleared or they reappear on the wrong edge. */
  [dir=rtl] .hero__rail,[dir=rtl] .cta__rail{border-right:0;padding-right:0}
  [dir=rtl] .split__a,[dir=rtl] .picker__list{border-left:0}
}

@media (max-width:620px){
  /* Tighten the nav row so brand + switch + burger all fit at 320px. */
  .nav__in{gap:12px}
  .lang{padding:8px 10px}
}