/* ===========================================================================
   RIGHT-TO-LEFT OVERRIDES  ·  loaded only on /ar/ pages
   ===========================================================================
   site.css is written with physical properties (left/right, padding-left…),
   so rather than rewrite 2,600 lines to logical properties this sheet mirrors
   the 60-odd rules that are actually direction-sensitive.

   THREE THINGS DELIBERATELY DO NOT MIRROR:

   1. Hotspots on the experience photograph (.hs-*). They mark real places in
      a real room — the sofa does not move to the other wall because the page
      is Arabic. Mirroring them would point at the wrong furniture.
   2. The WebGL room. It is a 3D scene; "left" has no meaning there. Only its
      HTML chrome (heading, caption, controls) mirrors.
   3. Anything centred with translateX(-50%) — already direction-agnostic.

   Latin runs inside Arabic text (phone numbers, "Care+", the brand mark) are
   handled with `direction:ltr; unicode-bidi:isolate` so they do not scramble.
   ========================================================================= */

[dir="rtl"] body { text-align: right; }

/* ---- nav ---------------------------------------------------------------- */
[dir="rtl"] .nav-links a:not(.btn)::after { left: auto; right: 50%; transform: translateX(50%) scale(0); }
[dir="rtl"] .nav-links a.active::after    { transform: translateX(50%) scale(1); }
[dir="rtl"] .nav-toggle span              { left: auto; right: 0; }
[dir="rtl"] .nav.scrolled .logo           { left: auto; right: 0; }
[dir="rtl"] .btn .arr                     { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arr               { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .skip-link                    { left: auto; right: 0; }

/* ---- hero ---------------------------------------------------------------
   Below 720px the "Start Your Project" bar is position:fixed over the hero.
   English clears it because .hero-foot is uppercase and two lines tall; Arabic
   has no uppercase, so that strip renders ~27px shorter — and since .hero-main
   is flex:1 it absorbs the slack and pushes the region labels down under the
   fixed bar. Give the height back below the regions instead. */
@media (max-width: 720px) {
  [dir="rtl"] .hero-regions { margin-bottom: 28px; }
}

[dir="rtl"] .hero-copy       { margin-left: auto; margin-right: 0; }
[dir="rtl"] .hero-foot .dot  { margin-right: 0; margin-left: 8px; }
/* the hero gutter is deliberately uneven (12 / 18) — swap, don't equalise */
[dir="rtl"] .hero-main .wrap {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

/* ---- experience --------------------------------------------------------- */
[dir="rtl"] .mode-list span        { padding-left: 0; padding-right: 21px; }
[dir="rtl"] .mode-list span::before{ left: auto; right: 0; }
[dir="rtl"] .sound-toggle          { margin-left: 0; margin-right: auto; }
/* .hs-* intentionally NOT mirrored — see header */

/* ---- ecosystems --------------------------------------------------------- */
[dir="rtl"] .eco-pick   { text-align: right; }
[dir="rtl"] .eco-title i{ margin-left: 0; margin-right: 2px; }

/* ---- products / projects ------------------------------------------------ */
[dir="rtl"] .project-content { text-align: right; }
[dir="rtl"] .pd-close        { right: auto; left: 18px; }
[dir="rtl"] .room-head       { left: auto; right: clamp(14px,1.6vw,28px); }
[dir="rtl"] .room-index button { text-align: right; }
[dir="rtl"] .room-index      { left: auto; right: -9999px; }
[dir="rtl"] .room-index:focus-within { right: clamp(14px,3vw,40px); left: auto; }
[dir="rtl"] .room-skip .arr  { margin-left: 0; margin-right: 6px; }
/* the caption rides the pointer in screen pixels from left:0 — room.js writes
   its transform, so the anchor must NOT move. Only the text inside flips. */
[dir="rtl"] .room-caption    { text-align: right; }

/* ---- process arc stage: the arc lives on the leading edge, so it swaps ---
   The markers keep left:0 as their anchor. They are positioned by a transform
   that home.js computes from the SVG's own geometry, and home.js mirrors that
   x itself when direction is rtl. Flipping the anchor to right:0 here as well
   would double the mirroring and push all five dots off the clipped stage. */
[dir="rtl"] .arc-stage   { direction: rtl; }
[dir="rtl"] .arc-curve svg { transform: scaleX(-1); }
[dir="rtl"] .arc-mark    { flex-direction: row-reverse; }
[dir="rtl"] .arc-mark span { transform-origin: right center; }
/* the visual sits flush against the leading edge, so the dropped border swaps */
[dir="rtl"] .arc-visual  { border-right: 1px solid var(--line); border-left: 0; }
@media (max-width: 860px) {
  [dir="rtl"] .arc-visual { border-left: 1px solid var(--line); }
}
[dir="rtl"] .arc-track.is-static .arc-visual { border-left: 1px solid var(--line); }

/* ---- timeline (the company history in #about) ---------------------------
   The spine is drawn inside the marker column, which grid places on the
   leading edge in either direction — so the line and dots need no mirroring.
   Only the media column's stacked position at narrow widths does. */
@media (max-width: 900px) {
  [dir="rtl"] .tl-media { grid-column: 2; }
}

/* ---- offices / footer hovers -------------------------------------------- */
[dir="rtl"] .office:hover       { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .foot-col a:hover   { padding-left: 0; padding-right: 5px; }

/* ---- support plans ------------------------------------------------------ */
[dir="rtl"] .sup-plan li         { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .sup-plan li::before { left: auto; right: 0; }

/* ---- testimonials ------------------------------------------------------- */
[dir="rtl"] .vq-count { margin-left: 0; margin-right: 8px; }
/* the quotation mark flips so it opens on the correct side */
[dir="rtl"] .vq-mark  { transform: scaleX(-1); transform-origin: right center; }
/* prev/next chevrons are drawn paths, not glyphs — flip them so "previous"
   still points back (right) and "next" points forward (left) */
[dir="rtl"] .vq-btn svg { transform: scaleX(-1); }
/* the progress rail is pinned with inset:0 auto 0 0, so it would fill from
   the wrong end */
[dir="rtl"] .vq-rail i  { inset: 0 0 0 auto; }

/* ---- contact ------------------------------------------------------------ */
[dir="rtl"] .wa      { margin-left: 0; margin-right: 12px; }
[dir="rtl"] .cf-hp   { left: auto; right: -9999px; }

/* ---- 404 ---------------------------------------------------------------- */
[dir="rtl"] .nf-links { justify-content: flex-start; }

/* ---- Latin runs inside Arabic ------------------------------------------
   Phone numbers, email, the brand name, plan names like "Care+" must keep
   LTR order or the digits and the plus sign jump to the wrong end. */
[dir="rtl"] .ltr,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .sup-figure,
[dir="rtl"] .arc-year,
[dir="rtl"] .arc-count,
[dir="rtl"] .vq-count,
[dir="rtl"] .trust-card .num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
[dir="rtl"] .foot-col a[href^="tel:"],
[dir="rtl"] .foot-col a[href^="mailto:"] { display: block; text-align: right; }

/* Arabic needs a little more line height than Jost/Inter were tuned for —
   but only for RUNNING TEXT. Putting it on body cascades into every label and
   band, and on mobile that pushed the hero region strip 7px under the fixed
   CTA. Paragraphs and list items only. */
[dir="rtl"] p,
[dir="rtl"] li { line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.35; letter-spacing: 0; }

/* Jost has no Arabic coverage; the system Arabic stack carries it and Latin
   fragments still fall back to Jost/Inter via the earlier families. */
[dir="rtl"] {
  --display: "Jost", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;}
[dir="rtl"] body {
  font-family: "Inter", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* the eyebrow's wide tracking looks broken in Arabic */
[dir="rtl"] .eyebrow { letter-spacing: .04em; }