/* Arabic: rules that only apply under :lang(ar) / [dir="rtl"] and make the Arabic page as strong as the English one.
   Noto Kufi has weights 400-900 but no width axis, so where English speaks with width (narrow = thinking,
   wide = managing), Arabic speaks with weight: a quiet 500 for thinking, a heavy 800-900 for managing.
   :where(:lang(ar)) keeps a rule at plain-class weight where mobile.css (loaded later) must still win. */

/* Arabic paragraphs: no one-word last lines (classes that ask for balance keep it; this is weaker). */
:where(:lang(ar)) p { text-wrap: pretty; }

/* ---------- hero ---------- */
/* Same composition and scale as English (review 2026-09-30): the small Arabic voice sits right above its
   giant English word (dir=ltr, so "BUSINESS." keeps its period on the word), everything on the right edge,
   and fitLockup sizes MARKETING to BUSINESS in both languages. The voice is quiet like "I think": medium
   weight, steel. Kufi needs a 1.5 line for the hamza and shadda in أفكّر (the intro's line masks clip at
   the line box); the negative margins give that height back, so the voice takes the same room as the
   English one (line-height 1) and the numbers strip stays in the first screen. */
:where(:lang(ar)) .lockup__voice { font-family: var(--font-ar); font-weight: 500; line-height: 1.5; margin-block: -0.2em -0.3em; }
@media (min-width: 768px) {
  /* Kufi's letters sit smaller on the line than Latin lowercase: ~20% more size reads as the same voice.
     Capped by the height too, so a short laptop screen doesn't get the largest voice. */
  :where(:lang(ar)) .lockup__voice { font-size: clamp(1.15rem, min(1.45vw, 2.8svh), 1.4rem); }
}
@media (max-width: 767px) {
  /* Phone gaps are tight (8px): pulling the voice up would sit وأدير on BUSINESS. */
  :where(:lang(ar)) .lockup__voice { font-size: 15px; margin-block-start: 0; }
}
/* The big words are English: they keep the English tracking (the Arabic zero is for Arabic letters),
   so they measure exactly as wide as on the English page. The inner elements too: the intro's line
   wrappers are measured by fitLockup, and base.css zeroes tracking on every Arabic-page element. */
:lang(ar) .lockup__big, :lang(ar) .lockup__big * { letter-spacing: -0.005em !important; }
:lang(ar) .hero__trust-label { font-weight: 500; }
@media (min-width: 1024px) and (max-height: 780px) {
  :lang(ar) .hero__sub { line-height: 1.7; } /* the English short-screen squeeze, at an Arabic-safe line */
}

/* ---------- numbers ---------- */
:lang(ar) .numbers__val { direction: ltr; unicode-bidi: isolate; } /* "5+", not "+5" */

/* ---------- headings ---------- */
/* Same floor as the English display type: at 2rem the Arabic titles read a size smaller on phones. */
:lang(ar) .h2 { font-size: clamp(2.25rem, 4vw, 3.75rem); }

/* ---------- section labels ---------- */
/* The English labels are spaced mono capitals; the Arabic ones carry the same presence with weight. */
:lang(ar) .eyebrow { font-weight: 700; }

/* ---------- about: the two minds inside the sentence ---------- */
:lang(ar) .mf--think { font-weight: 400; }
:lang(ar) .mf--manage { font-weight: 900; }
:lang(ar) .about__belief { line-height: 1.8; }

/* ---------- services ---------- */
/* English widens the active title; Arabic thickens it. */
:lang(ar) .service__title { font-weight: 500; transition: color 0.4s var(--ease-ui), font-weight 0.5s var(--ease-ui); }
:lang(ar) .service.is-open .service__title { font-weight: 800; }
:lang(ar) .services__intro { line-height: 1.75; }

/* ---------- on stage ---------- */
/* The counter is an LTR island ("1 / 3"); left alone it takes the left side of the caption. */
:lang(ar) .reel__count { align-self: flex-start; }

/* ---------- insights ---------- */
:lang(ar) .insight__sub { line-height: 1.7; }

/* ---------- contact + footer ---------- */
/* The console's labels are spaced mono capitals in English; in Arabic they are Kufi at a readable size,
   carried by weight instead of case and tracking. */
:lang(ar) .launch__lede { line-height: 1.8; }
:lang(ar) :is(.step__lab, .obj__k, .preview__lab, .tile dt, .launch__left) { font-family: var(--font-ar); text-transform: none; }
:lang(ar) .step__lab, :lang(ar) .preview__lab { font-size: 12.5px; font-weight: 500; }
:lang(ar) :is(.obj__k, .tile dt) { font-size: 11.5px; font-weight: 500; }
:lang(ar) .launch__left { font-size: 12px; font-weight: 600; }
:lang(ar) .step__q { font-family: var(--font-ar); font-size: 14px; }
:lang(ar) .obj__t { font-size: 14.5px; line-height: 1.6; }
:lang(ar) .obj__d { line-height: 1.7; }
:lang(ar) :is(.seg__opt, .chip) { line-height: 1.5; }
:lang(ar) .bubble { font-size: 14.5px; line-height: 1.9; }
:lang(ar) .tile b { font-family: var(--font-ar); font-size: 17px; font-weight: 800; line-height: 1.5; }
/* The sign mixes Arabic and English: the display stack gives the English words Anybody (and its width
   voice) while the Arabic letters fall through to Kufi, where weight carries the same contrast.
   The periods stay plain: in a running RTL line the sentence ends on the left, so ".Business" is the
   right place (gluing the period to the word's right put it between Business and أفكّر; tried, reverted). */
:lang(ar) .footer__sign { font-family: var(--font-display); }
:lang(ar) .footer__think { font-weight: 600; }
:lang(ar) .footer__manage { font-weight: 800; }

/* Launch section, Arabic on desktops. Kufi sets taller than Anybody: at the English size the Arabic
   headline and the two-line KPI descriptions pushed the console past one screen (1440x900 by 10px,
   1536x705 by ~50px), so the headline is a step smaller and the card lines sit tighter. */
@media (min-width: 1024px) {
  :lang(ar) .launch__title { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.22; }
  :lang(ar) .obj__t { line-height: 1.45; }
  :lang(ar) .obj__d { line-height: 1.5; }
}
/* Short desktop screens (his 1536x705): the headline also follows the height. This comes after the rule
   above on purpose - same specificity, the later one wins. (:lang(ar) .h2 in base.css outranks a plain
   .launch__title rule, hence :lang(ar) here too.) */
@media (min-width: 1024px) and (max-height: 940px) {
  :lang(ar) .launch__title { font-size: clamp(1.7rem, 4.6svh, 2.4rem); }
  :lang(ar) .obj__t { line-height: 1.3; }
  :lang(ar) .step__lab { line-height: 1.3; }
  :lang(ar) .obj__card { padding-block: 5px; }
  :lang(ar) .chat__thread { padding-block: 10px; }
  :lang(ar) .chat__who { padding-block: 8px; }
}