/* Arabic edition. Loaded after styles.css, only by ar.html. */

:root[dir="rtl"] {
  --font-display: "Readex Pro Variable", "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Readex Pro Variable", "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-mono: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* Reading size and rhythm: Arabic needs more height than Latin at the same size */

:root[dir="rtl"] body {
  font-size: 1.125rem;
  line-height: 1.85;
}

:root[dir="rtl"] bdi { unicode-bidi: isolate; }

/* Display type: Kufam, a geometric Kufi with flat terminals that sits with the 47° chevron.
   No tracking, no negative leading cuts, heavier weight than Latin at the same size. */

:root[dir="rtl"] .display,
:root[dir="rtl"] .h2,
:root[dir="rtl"] .service__title,
:root[dir="rtl"] .step__title,
:root[dir="rtl"] .model__title,
:root[dir="rtl"] .case h3,
:root[dir="rtl"] .also strong,
:root[dir="rtl"] .faq dt,
:root[dir="rtl"] .quote__text,
:root[dir="rtl"] .hero__stats dd,
:root[dir="rtl"] .case__metric,
:root[dir="rtl"] .process__label {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

:root[dir="rtl"] .hero__title {
  max-width: 8em;
  font-size: clamp(3rem, 6.2vw, 6rem);
  line-height: 1.22;
}

:root[dir="rtl"] .h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.5rem);
  line-height: 1.3;
}

:root[dir="rtl"] .step__title {
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1.3;
}

:root[dir="rtl"] .service__title {
  font-size: clamp(1.45rem, 1.8vw, 1.7rem);
  line-height: 1.35;
}

:root[dir="rtl"] .model__title {
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.35;
}

:root[dir="rtl"] .faq dt {
  font-size: 1.2rem;
  line-height: 1.5;
}

:root[dir="rtl"] .quote__text {
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  line-height: 1.3;
}

:root[dir="rtl"] .hero__lede,
:root[dir="rtl"] .lede,
:root[dir="rtl"] .cta__lede,
:root[dir="rtl"] .step p {
  line-height: 1.9;
}

:root[dir="rtl"] .hero__lede {
  max-width: 38ch;
}

:root[dir="rtl"] .hero__stats dd {
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  line-height: 1.3;
}

:root[dir="rtl"] .case__metric {
  font-size: clamp(3.6rem, 6vw, 5.2rem);
  line-height: 1;
}

/* Labels: Arabic has no capitals and no mono face, so labels are plain medium weight,
   sentence-case, set a little larger than the Latin caps labels. */

:root[dir="rtl"] .eyebrow,
:root[dir="rtl"] .hero__label,
:root[dir="rtl"] .hero__stats dt,
:root[dir="rtl"] .case__meta,
:root[dir="rtl"] .case__metric small,
:root[dir="rtl"] .model__facts dt,
:root[dir="rtl"] .model__tag,
:root[dir="rtl"] .service__num,
:root[dir="rtl"] .step__deliverable,
:root[dir="rtl"] .process__counter,
:root[dir="rtl"] .footer h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}

:root[dir="rtl"] .hero__label { font-size: 0.9rem; }
:root[dir="rtl"] .tags li { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0; }
:root[dir="rtl"] .case__metric small { margin-top: 0.4rem; font-size: 0.9rem; }

/* Mirroring rule.
   Direction glyphs (bullets, arrows) follow the reading direction.
   The symbol itself is never flipped, only moved to the other side. */

:root[dir="rtl"] .chev,
:root[dir="rtl"] .eyebrow::before {
  transform: scaleX(-1);
}

/* The line field is imagery, not a mark: it moves to the open side of the headline. */
:root[dir="rtl"] .hero__scene {
  transform: scaleX(-1);
}

:root[dir="rtl"] .case__crop {
  right: auto;
  left: -46%;
}

:root[dir="rtl"] .quote {
  border-left: 0;
  border-right: 1px solid var(--line);
  padding-left: 0;
  padding-right: clamp(1.5rem, 5vw, 4.5rem);
}

:root[dir="rtl"] .quote__crop {
  right: auto;
  left: -4%;
}

/* The cut is a layout device, so it takes the start side like any other block. */
:root[dir="rtl"] .cta__field {
  right: auto;
  left: -40%;
  box-shadow: 12px 0 0 var(--paper);
  transform: skewX(43deg);
}

:root[dir="rtl"] .cta__form input {
  text-align: start;
}

:root[dir="rtl"] .accent-pop {
  right: auto;
  left: 0;
}

/* The wordmark stays Latin and left-to-right everywhere. */
:root[dir="rtl"] .footer__wordmark,
:root[dir="rtl"] .brand {
  direction: ltr;
}

@media (max-width: 760px) {
  :root[dir="rtl"] .cta__field {
    left: 0;
    right: 0;
    box-shadow: 0 -10px 0 var(--paper);
    transform: none;
  }
}

/* Narrow screens: Arabic display type is wider than Latin, so give it less room to overflow */

:root[dir="rtl"] .process__label { font-size: 1.75rem; line-height: 1.3; }

@media (max-width: 760px) {
  :root[dir="rtl"] .process__bars span { width: 26px; }
  :root[dir="rtl"] .cta__form input { flex-basis: 100%; min-width: 0; }
  :root[dir="rtl"] .hero__stats dd { font-size: 1.35rem; }
}

/* Layout rule: text sits on the right (start side), visuals on the left (end side). */

@media (min-width: 901px) {
  :root[dir="rtl"] .process__stage { grid-column: 2; grid-row: 1; }
  :root[dir="rtl"] .process__steps { grid-column: 1; grid-row: 1; }
}

/* Step counter reads 02 / 04 in every direction. */
:root[dir="rtl"] .process__counter { direction: ltr; text-align: start; }

/* Cinematic principle line in Arabic: short, so it can be much larger */
:root[dir="rtl"].cin .section--quote .quote__text {
  font-size: clamp(3.2rem, 9.5vw, 9rem);
  line-height: 1.25;
  letter-spacing: 0;
}
:root[dir="rtl"].cin .section--quote .quote__text { max-width: 8em; }

/* Hero: mirrored. The mark sits on the left, labels open toward the left. */
:root[dir="rtl"] .hx__title { max-width: 8em; font-size: clamp(3rem, 6.2vw, 6rem); line-height: 1.22; }
:root[dir="rtl"] .hx__lede { max-width: 38ch; line-height: 1.9; }
:root[dir="rtl"] .hx__label > div { transform: translate(calc(-100% - 18px), -50%); border-left: 1px solid var(--line); border-right: 2px solid var(--accent); }
:root[dir="rtl"] .hx__label::before { left: auto; right: -4px; }
:root[dir="rtl"] .hx__label span,
:root[dir="rtl"] .hx__cap { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0; text-transform: none; }
:root[dir="rtl"] .hx--nogl .hx__poster { right: auto; left: -8%; }
@media (max-width: 760px) {
  :root[dir="rtl"] .hx__title { font-size: clamp(2.5rem, 10.5vw, 3.2rem); }
}


/* selected work, RTL */
:root[dir="rtl"] .wk__idx, :root[dir="rtl"] .wk__meta, :root[dir="rtl"] .wk__unit, :root[dir="rtl"] .wk__facts dt,
:root[dir="rtl"] .wk__fig figcaption, :root[dir="rtl"] .more__h, :root[dir="rtl"] .more__t, :root[dir="rtl"] .spec__bar,
:root[dir="rtl"] .spec .k, :root[dir="rtl"] .ledger th, :root[dir="rtl"] .chip {
  font-family: var(--font-body); letter-spacing: 0; text-transform: none;
}
:root[dir="rtl"] .wk__name { line-height: 1.3; letter-spacing: 0; }
:root[dir="rtl"] .wk__txt, :root[dir="rtl"] .more__d { line-height: 1.9; }
:root[dir="rtl"] .wk__facts dt { font-size: 0.82rem; }
:root[dir="rtl"] .more__list strong { letter-spacing: 0; }
:root[dir="rtl"] .spec .tree .fields i, :root[dir="rtl"] .spec .perm { letter-spacing: 0; }

/* Arabic must never be letter-spaced: it breaks the joins. */
:root[dir="rtl"] .spec .pill { letter-spacing: 0; }