/* ----------------------------------------------------------------------
   styles-en.css — English-only LTR overrides.
   Loaded AFTER styles.css in the English deck. Cancels out the hard
   `direction: rtl` rules and the RTL-specific flex/grid orderings so
   the layout truly mirrors horizontally for left-to-right reading.
   ---------------------------------------------------------------------- */

/* Reset the body's hardcoded RTL */
body { direction: ltr; }

/* NOT overriding .chrome's flex-direction: row-reverse.
   In Arabic RTL + row-reverse → brand renders at the visual LEFT.
   In English LTR + row-reverse → brand renders at the visual RIGHT.
   That horizontal mirror is exactly what we want for the English deck.
*/

/* Every selector in styles.css that hard-codes `direction: rtl` needs an
   LTR-mode counterpart. Order mirrors the source for traceability. */
.about-v2__topline,
.about-v2__services-head,
.about-v2__service,
.about-v2__service__body,
.team-grid,
.founder,
.market__head,
.market__split,
.market__intl-banner,
.dash2__webnav,
.dash2-hero,
.dash2-hero__title,
.dash2-hero__lead,
.dash2-kpi,
.dash2-kpi .v,
.dash2-kpi .k,
.dash2-kpi__hint,
.dash2-bar,
.dash2-bar__source,
.dash2-bar__value,
.dash2-widget__cols-head,
.dash2-row,
.dash2-row--lead,
.dash2-row__lead,
.dash2-widget__head,
.dash2-widget__rows,
.dash2-heat__head,
.dash2-heat__row,
.proof-quad__overlay,
.proof-quad__overlay > *,
.proof-stamp,
.proof-sources,
.asset__head,
.asset-compare__row,
.asset-compare__col,
.thankyou-split__panel,
.thankyou-split__body,
.thankyou-split__contact,
.cover-v3__body,
.cover-v3__panel,
.frame,
.frame--market,
.frame--split,
.eyebrow,
.title,
.lead,
.body,
.checks,
.source,
.qr-corner,
.qr-corner__label,
.divider__frame,
.divider__copy,
.divider__title,
.divider__sub,
.divider__list,
.agenda-grid,
.agenda-card {
  direction: ltr;
  text-align: start;
}

/* For two specific RTL composition choices in the proof slide (q2 + q4)
   that used `direction: rtl; text-align: left;` to push the content to
   the LEFT corner of those quadrants — in LTR we want the inverse
   (text on the RIGHT corner of those quadrants for symmetry). Faris
   2026-05-17: also include the overlay itself so the eyebrow pill
   (inline-block, position depends on parent text-align) lands on the
   right corner instead of the left. */
.proof-quad[data-bg="q2"] .proof-quad__overlay,
.proof-quad[data-bg="q4"] .proof-quad__overlay,
.proof-quad[data-bg="q2"] .proof-quad__overlay > *,
.proof-quad[data-bg="q4"] .proof-quad__overlay > * {
  direction: ltr;
  text-align: right;
}
/* The detail + add elements have max-width: 640px and sit at the
   block's left by default. For the right quadrants, push the limited-
   width box to the RIGHT edge so the text truly hugs the right corner
   (Faris 2026-05-17). */
.proof-quad[data-bg="q2"] .proof-quad__detail,
.proof-quad[data-bg="q4"] .proof-quad__detail,
.proof-quad[data-bg="q2"] .proof-quad__add,
.proof-quad[data-bg="q4"] .proof-quad__add {
  margin-left: auto;
  margin-right: 0;
}

/* The market chart's SVG annotation, callouts, and labels were rendered
   with implicit Arabic-script positioning. Force LTR text rendering
   inside the chart so 2024/2030 labels and "+6.7% YoY" annotation read
   the right way. */
.market-chart text {
  direction: ltr;
  unicode-bidi: bidi-override;
}

/* The cover-v3 split layout: in Arabic the image is on the LEFT and the
   slate panel on the RIGHT (RTL flexes flip the DOM order). In LTR they
   stay in DOM order — image LEFT, panel RIGHT. That's already the
   correct LTR mirror, so nothing to do here. (Note kept for clarity.) */

/* The service split layout uses `frame--split` (flex). In Arabic the
   image was on the RIGHT (DOM order [image, text] flipped to render
   image-right in RTL). In LTR same DOM puts image on the LEFT.
   That IS the horizontal mirror we want — image moves to the opposite
   side. No override needed; just documenting. */

/* All inset-inline-* and margin-inline-* properties auto-flip with
   direction, so the chrome (top-LEFT in Arabic → top-RIGHT in English),
   the QR card, the corner numbers, the brand strip on dividers, etc.,
   all reposition automatically. No overrides needed for those. */

/* ----------------------------------------------------------------------
   English fits — Arabic strings compress; English needs slightly smaller
   type or tighter padding on the slides where translation expanded.
   ---------------------------------------------------------------------- */

/* Thanks slide: 156px h1 fits "شكرا لوقتكم" in one line but blows
   "Thank you for your time / We look forward to working together" into
   4+ lines. Shrink for English. */
.thankyou-split__body h1 { font-size: 88px; line-height: 1.08; }

/* About slide: lead paragraph + service descriptions run longer in English. */
.about-v2__lead { font-size: 26px !important; }
.about-v2__service__desc { font-size: 15px; line-height: 1.45; }
.about-v2__service__title { font-size: 19px; }

/* Team slide founder bios run longer in English. */
.founder__bio { font-size: 20px; line-height: 1.45; }

/* Asset slide: bumped fonts were tight in Arabic, English needs a touch
   less because "Photos and videos" / "Full navigation · Interactive
   hotspots" run wider than the Arabic. */
.asset-compare__cell-value { font-size: 32px; }
.asset-compare__col-tag { font-size: 28px; }

/* Market slide stats: longer English captions push the column taller
   than the chart column, causing the 57K stat to overlap the
   international banner below. Shrink numbers a touch + tighten caption. */
.market__stats--unified .market__stat-num { font-size: 84px; }
.market__stats--unified .market__stat-unit { font-size: 30px; }
.market__stats--unified .market__stat-cap  { font-size: 18px; max-width: 460px; }
.market__stats--unified .market__stat + .market__stat {
  padding-top: 16px; margin-top: 16px;
}

/* ----------------------------------------------------------------------
   Service slides — slide 9 (built) and slide 11 (off-plan).
   In Arabic the QR card sat at the BOTTOM-LEFT of the slide (over the
   left edge of the image, which was on the RIGHT side of the slide due
   to RTL flex). Horizontal mirror for English: QR moves to BOTTOM-RIGHT.
   ---------------------------------------------------------------------- */
.qr-corner {
  left: auto;
  right: 48px;
}

/* The asymmetric padding on the text column (was `70px 88px 60px 280px`
   with the big 280px buffer on the LEFT to clear the QR area in Arabic)
   needs to swap in English so the buffer is now on the RIGHT side. */
#service-built .frame--split > div:nth-child(2),
#service-offplan .frame--split > div:nth-child(2) {
  padding: 70px 280px 60px 88px !important;
}