/* Arabic layer — loaded only by the pages under /ar.
   Two jobs: give Arabic its own typefaces, and mirror the handful of
   rules in styles.css that are genuinely side-specific. Rules that pair
   left:0 with right:0 already span the full width and are left alone. */

:root {
  /* Tajawal carries the geometric, industrial character Archivo has in
     the Latin sheet; Amiri plays the editorial role Newsreader plays,
     and appears only inside <em>. */
  --font-sans: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Amiri", "Times New Roman", serif;
}

body {
  /* Arabic runs taller and denser than Latin at the same size. */
  font-size: 17px;
  line-height: 1.75;
}

em {
  font-family: var(--font-display);
}

/* Arabic has no uppercase, so letter-spaced small caps read as broken
   words. Those labels get weight and size instead. */
[dir="rtl"] .section-index,
[dir="rtl"] .eyebrow,
[dir="rtl"] .footer-label,
[dir="rtl"] .method-switch label,
[dir="rtl"] .selectfield-label,
[dir="rtl"] .datefield-label,
[dir="rtl"] .inquiry-form label > span:first-child,
[dir="rtl"] .service-label,
[dir="rtl"] .datepicker-weekdays span,
[dir="rtl"] .datepicker-foot button,
[dir="rtl"] .case-chain li,
[dir="rtl"] .footer-bottom {
  letter-spacing: 0;
  text-transform: none;
}

[dir="rtl"] .section-index,
[dir="rtl"] .eyebrow {
  font-size: 12px;
}

[dir="rtl"] .inquiry-form label > span:first-child,
[dir="rtl"] .selectfield-label,
[dir="rtl"] .datefield-label,
[dir="rtl"] .footer-label,
[dir="rtl"] .method-switch label,
[dir="rtl"] .service-label {
  font-size: 11px;
}

/* Headlines are set tighter in Latin than Arabic can take without the
   descenders colliding. */
[dir="rtl"] .statement,
[dir="rtl"] .occasions-header h2,
[dir="rtl"] .process-heading h2,
[dir="rtl"] .deliverables-copy h2,
[dir="rtl"] .inquiry-copy h2,
[dir="rtl"] .point-copy h2,
[dir="rtl"] .section-heading h2,
[dir="rtl"] .page-hero h1,
[dir="rtl"] .prose-grid h2,
[dir="rtl"] .page-cta h2,
[dir="rtl"] .faq-heading h2,
[dir="rtl"] .service-head h2,
[dir="rtl"] .hero h1 {
  line-height: 1.18;
}

[dir="rtl"] .mobile-menu a {
  line-height: 1.3;
}

/* ---------------------------------------------------------------- */
/* Mirrored positioning                                              */
/* ---------------------------------------------------------------- */

[dir="rtl"] .skip-link {
  left: auto;
  right: 16px;
}

[dir="rtl"] .scroll-progress span,
[dir="rtl"] .reel-timeline span {
  transform-origin: right;
}

[dir="rtl"] .desktop-nav a::after {
  left: auto;
  right: 0;
  transform-origin: left;
}

[dir="rtl"] .desktop-nav a:hover::after {
  transform-origin: right;
}

[dir="rtl"] .hero-content {
  left: auto;
  right: max(32px, calc((100vw - 1440px) / 2));
}

/* The hero copy moves to the right, so the heavy side of the wash has to
   move with it — otherwise the headline lands on the brightest part of
   the frame. Only the horizontal pass flips; the bottom lift does not. */
[dir="rtl"] .hero-wash {
  background:
    linear-gradient(
      to left,
      rgba(18, 17, 15, 0.74) 0%,
      rgba(18, 17, 15, 0.52) 34%,
      rgba(18, 17, 15, 0.18) 66%,
      rgba(18, 17, 15, 0.08) 100%
    ),
    linear-gradient(
      to top,
      rgba(18, 17, 15, 0.58) 0%,
      rgba(18, 17, 15, 0) 46%
    );
}

[dir="rtl"] .hero-meta {
  left: auto;
  right: 32px;
}

[dir="rtl"] .hero-timecode {
  left: 32px;
  right: auto;
}

[dir="rtl"] .manifesto-copy {
  margin-left: 0;
  margin-right: 25%;
}

[dir="rtl"] .filter-tab::after {
  left: auto;
  right: 0;
}

[dir="rtl"] .frame-corners::before {
  left: auto;
  right: 14px;
}

[dir="rtl"] .frame-corners::after {
  left: 14px;
  right: auto;
}

[dir="rtl"] .occasion-list {
  border-left: 1px solid var(--line);
  border-right: 0;
}

[dir="rtl"] .occasion-tab,
[dir="rtl"] .datefield-trigger,
[dir="rtl"] .selectfield-trigger {
  text-align: right;
}

[dir="rtl"] .occasion-number {
  left: auto;
  right: 0;
}

/* Lucide draws its arrows pointing right, which reads as "forward" in
   the Latin sheet. Forward is leftward here, so every directional arrow
   is mirrored: arrow-right becomes ←, arrow-up-right becomes ↖, and
   arrow-down-right becomes ↙. Matched on the classes lucide writes onto
   the <svg> it swaps in, not on data-lucide — that attribute is gone by
   the time the icon exists. */
[dir="rtl"] .lucide-arrow-right,
[dir="rtl"] .lucide-arrow-up-right,
[dir="rtl"] .lucide-arrow-down-right {
  transform: scaleX(-1);
}

/* The occasion tab arrow also slides in when its tab goes active, so
   both of its states are restated with the mirror composed in first.
   translateX then runs in mirrored space and the arrow still enters
   from the outer edge of the row. */
[dir="rtl"] .occasion-tab svg {
  transform: scaleX(-1) translateX(-7px);
}

[dir="rtl"] .occasion-tab.is-active svg {
  transform: scaleX(-1) translateX(0);
}

[dir="rtl"] .frame-one {
  left: 1%;
  right: auto;
}

[dir="rtl"] .frame-two {
  left: auto;
  right: -2%;
}

[dir="rtl"] .deliverables-image > p {
  left: auto;
  right: 24px;
}

[dir="rtl"] .select-wrap svg {
  left: 0;
  right: auto;
}

[dir="rtl"] .reel-title-wrap {
  left: auto;
  right: 5vw;
}

[dir="rtl"] .reel-timeline span {
  left: auto;
  right: 0;
}

[dir="rtl"] .datepicker,
[dir="rtl"] .selectlist {
  left: auto;
  right: 0;
}

[dir="rtl"] .prose-emphasis {
  border-left: 0;
  border-right: 2px solid var(--coral);
  padding-left: 0;
  padding-right: 22px;
}

[dir="rtl"] .service-list li {
  padding-left: 0;
  padding-right: 18px;
}

[dir="rtl"] .service-list li::before {
  left: auto;
  right: 0;
}

/* The chain reads right to left, so the arrow has to point that way. */
[dir="rtl"] .case-chain li:not(:last-child)::after {
  content: "←";
}

[dir="rtl"] .success-mark {
  transform: scaleX(-1);
}

@media (max-width: 820px) {
  [dir="rtl"] .skip-link {
    left: auto;
    right: 16px;
  }

  [dir="rtl"] .hero-content {
    left: auto;
    right: 16px;
  }

  [dir="rtl"] .hero-meta {
    left: auto;
    right: 16px;
  }

  [dir="rtl"] .hero-timecode {
    left: 16px;
    right: auto;
  }

  [dir="rtl"] .manifesto-copy {
    margin-left: 0;
    margin-right: 0;
  }

  [dir="rtl"] .occasion-list {
    border-left: 0;
    border-right: 0;
  }

  [dir="rtl"] .frame-one {
    left: 2%;
    right: auto;
  }
}

@media (max-width: 560px) {
  /* The mobile wash is a floor rather than a side, so the RTL flip
     further up must not carry into it — it outranks the mobile rule in
     styles.css on specificity alone, and would otherwise win here. */
  [dir="rtl"] .hero-wash {
    background: linear-gradient(
      to top,
      rgba(18, 17, 15, 0.82) 0%,
      rgba(18, 17, 15, 0.56) 34%,
      rgba(18, 17, 15, 0.3) 62%,
      rgba(18, 17, 15, 0.24) 100%
    );
  }

  [dir="rtl"] .manifesto-copy {
    margin-left: 0;
    margin-right: 14%;
  }

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

  [dir="rtl"] .reel-controls {
    left: 20px;
    right: 20px;
  }

  [dir="rtl"] .frame-corners::before {
    left: auto;
    right: 14px;
  }

  [dir="rtl"] .frame-corners::after {
    left: 14px;
    right: auto;
  }
}

/* ---------------------------------------------------------------- */
/* Language switch                                                   */
/* ---------------------------------------------------------------- */

/* Latin runs keep their own direction. Without this the wordmark's two
   spans swap under RTL and TURWA reads WATUR — and the same happens to
   every timecode, slate line and film title on the page. Numerals stay
   Western too, so a date means the same thing in both versions. */
[dir="rtl"] .wordmark,
[dir="rtl"] .hero-timecode,
[dir="rtl"] .step-number,
[dir="rtl"] .datepicker-day,
[dir="rtl"] .footer-contact a[href^="tel"],
[dir="rtl"] .deliverables-copy li > span,
[dir="rtl"] .mobile-menu a span,
[dir="rtl"] .film-frame figcaption,
[dir="rtl"] .deliverables-image > p,
[dir="rtl"] .project-caption h3,
[dir="rtl"] .lang-switch,
[dir="rtl"] .footer-bottom > p:first-child {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The wordmark and the numerals keep the Arabic sans; the film titles
   and slate lines are English copy and keep the Latin face. */
[dir="rtl"] .wordmark,
[dir="rtl"] .step-number,
[dir="rtl"] .datepicker-day,
[dir="rtl"] .footer-contact a[href^="tel"],
[dir="rtl"] .deliverables-copy li > span,
[dir="rtl"] .mobile-menu a span {
  font-family: "Archivo", var(--font-sans);
}

[dir="rtl"] .project-caption h3 {
  font-family: "Newsreader", var(--font-display);
}

/* Isolated LTR runs still need to sit on the correct side of their box. */
[dir="rtl"] .film-frame figcaption,
[dir="rtl"] .deliverables-image > p,
[dir="rtl"] .project-caption h3,
[dir="rtl"] .footer-bottom > p:first-child {
  text-align: right;
}

[dir="rtl"] .datepicker-grid,
[dir="rtl"] .datepicker-weekdays {
  direction: ltr;
}