/* ============================================================
   Arabic / RTL layer. Loads after style.css and only flips what
   direction actually affects — the grid, colours and components
   are shared with the English site.
   ============================================================ */

:root { --font: 'Tajawal', 'Manrope', -apple-system, sans-serif; }

body { direction: rtl; text-align: right; }

/* Latin brand name and numerals stay LTR inside Arabic sentences */
.ltr, .stat-num, .stat-plus, .result b, .aside-stat b, .mm-num {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ---- Typography: Arabic needs a little more line height ---- */

.mega { line-height: 1.15; letter-spacing: 0; }
.section-title, .page-title, .contact-title { letter-spacing: 0; line-height: 1.25; }
.eyebrow { letter-spacing: 0.08em; }
.h1-tag { letter-spacing: 0; }
.hero-sub, .section-sub, .page-lede, .prose p { line-height: 1.85; }

/* the outlined display treatment reads poorly in Arabic script */
.mega-outline, .t-outline {
  -webkit-text-stroke: 0;
  color: var(--ice);
}

/* ---- Nav ---- */

.nav-links { margin-left: 0; margin-right: auto; }
.nav-links a::after { transform-origin: right; }
.nav-drop-panel { text-align: right; }
.nav-drop-panel a { align-items: flex-end; }
.nav-drop-all { text-align: center; }

/* ---- Hero ---- */

.hero-pattern { right: auto; left: -10%; }
.hero-glow-1 { right: auto; left: -8%; }
.hero-glow-2 { left: auto; right: -10%; }
.stage-sticker { right: auto; left: 6%; transform: rotate(-6deg); }

@keyframes stickerBob {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-7.5deg) translateY(-7px); }
}

.phone { transform: perspective(1200px) rotateY(9deg) rotateX(3deg) rotate(-1.5deg); }
.post-top, .post-act { text-align: right; }

/* the feed is a real Instagram surface — keep its chrome LTR */
.post-act { direction: ltr; text-align: left; }

/* ---- Horizontal tracks ----
   The logo bar and the work carousel hold images only, which have no reading
   direction. Their JS physics (offsetLeft, translateX, wrap point) all assume
   LTR ordering, and under RTL the cards laid out right-to-left and got pushed
   off-screen. Keeping these two tracks LTR is both correct and simpler than
   mirroring the maths. */

.marquee, .marquee-track,
.strip, .strip-track { direction: ltr; }

/* the big word band is real Arabic text, so it stays RTL and reverses */
@keyframes marqueeRTL {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.mega-marquee-track { animation-name: marqueeRTL; }

/* ---- Lists and cards ---- */

.incl li::before, .inf-list li::before { margin-left: 0; }
.step { padding: 1.4rem 4.2rem 1.4rem 1.5rem; }
.step::before { left: auto; right: 1.4rem; }
.faq summary { padding: 1.3rem 0 1.3rem 2.5rem; }
.faq summary::after { right: auto; left: 0.2rem; }
.crumb { direction: rtl; }

.svc-head:hover { padding-left: 0; padding-right: 1.4rem; }
.svc-idx { direction: ltr; }

.deliver li::before { order: 2; }

/* ---- Work / team captions ---- */

.work-item figcaption, .member figcaption, .book figcaption { text-align: right; }
.wi-dots { right: auto; left: 0.95rem; }

/* ---- Testimonials ---- */

.q-card blockquote { text-align: right; }
.q-mark { align-self: flex-start; }

/* ---- Footer ---- */

.footer-inner { text-align: center; }

/* ---- Cursor label stays LTR ---- */
.cur-ring span { direction: ltr; }

@media (max-width: 680px) {
  .step { padding-right: 3.6rem; padding-left: 1.2rem; }
  .stage-sticker { left: 2%; right: auto; }
  /* inside the full-screen menu these should centre like every other item —
     the desktop RTL rule pins them to the edge */
  .nav-drop-panel a { align-items: center; text-align: center; }
}

/* ---- Handwritten annotations ----
   Caveat is a Latin-only face, so Arabic in these lines fell back to whatever
   cursive the OS had lying around. Use Tajawal instead, kept light and spaced
   so it still reads as a soft aside rather than body copy. */

.phone-hint,
.strip-hint,
.spot-copy p,
.deck-hint {
  font-family: var(--font);
  font-weight: 300;
  letter-spacing: 0.04em;
  transform: none;
}

.phone-hint { font-size: clamp(0.92rem, 1.4vw, 1.05rem); color: var(--graphite); }
.strip-hint { font-size: clamp(0.88rem, 1.3vw, 1rem); color: var(--graphite); }
.spot-copy p { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 400; }