/* ═══════════════════════════════════════════════════════════════
   MRS Developments — Arabic (RTL) layer
   Loaded AFTER ../style.css. Everything here is scoped to .ar-page
   so the English site is untouched.

   Contents
   0.  @font-face — Montserrat Arabic (9 weights)
   1.  Arabic typography (fonts, tracking, line-height)
   2.  Latin islands (brand lockups, numerals, e-mail)
   3.  Header / dropdown / burger
   4.  Mobile menu
   5.  Hero
   6.  Ticker
   7.  About showcase
   8.  Services
   9.  Future showcase
   10. Why MRS
   11. Footer
   12. Language switcher
   13. About page
   14. Contact page
   15. News
   16. Project pages (listing, category, detail)
═══════════════════════════════════════════════════════════════ */


/* ── 0. MONTSERRAT ARABIC ──────────────────────────────────────
   Mohamed Gaber's Arabic companion to Montserrat, self-hosted from
   ./fonts/ under the SIL Open Font License (see fonts/OFL.txt).

   All nine weights are declared under one family name, so anywhere on
   the page `font-weight: 100…900` just works:

     100 Thin        200 ExtraLight   300 Light
     400 Regular     500 Medium       600 SemiBold
     700 Bold        800 ExtraBold    900 Black

   Declaring a face does not download it — the browser fetches a weight
   only when something on the page actually renders in it. Adding a
   weight to a rule is all that is needed to bring it in.
─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Montserrat Arabic';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('fonts/Montserrat-Arabic-Thin.woff2') format('woff2'),
       url('fonts/Montserrat-Arabic-Thin.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat Arabic';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/Montserrat-Arabic-ExtraLight.woff2') format('woff2'),
       url('fonts/Montserrat-Arabic-ExtraLight.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat Arabic';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Montserrat-Arabic-Light.woff2') format('woff2'),
       url('fonts/Montserrat-Arabic-Light.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Montserrat-Arabic-Regular.woff2') format('woff2'),
       url('fonts/Montserrat-Arabic-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Montserrat-Arabic-Medium.woff2') format('woff2'),
       url('fonts/Montserrat-Arabic-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Montserrat-Arabic-SemiBold.woff2') format('woff2'),
       url('fonts/Montserrat-Arabic-SemiBold.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Montserrat-Arabic-Bold.woff2') format('woff2'),
       url('fonts/Montserrat-Arabic-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat Arabic';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Montserrat-Arabic-ExtraBold.woff2') format('woff2'),
       url('fonts/Montserrat-Arabic-ExtraBold.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat Arabic';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Montserrat-Arabic-Black.woff2') format('woff2'),
       url('fonts/Montserrat-Arabic-Black.woff') format('woff');
}


/* ── 1. ARABIC TYPOGRAPHY ──────────────────────────────────── */
.ar-page {
  --ff-display: 'Montserrat Arabic', 'Segoe UI', Tahoma, sans-serif;
  --ff-body: 'Montserrat Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* Arabic is a cursive script: letter-spacing pulls the joins apart.
   Reset it everywhere, then restore tracking only on Latin islands. */
.ar-page :is(h1, h2, h3, h4, h5, h6, p, span, a, li, em, strong, button, div) {
  letter-spacing: 0;
}

/* Arabic needs more leading than the Latin display sizes assume. */
.ar-page .section-title { line-height: 1.28; }
.ar-page .about-showcase__title { line-height: 1.2; }
.ar-page .future-showcase__title { line-height: 1.22; }
.ar-page .future-card__title { line-height: 1.3; }
.ar-page .svc-card__title { line-height: 1.4; }
.ar-page .why-row__title { line-height: 1.45; }
.ar-page .mob-link__text { line-height: 1.4; }
.ar-page .partner-card__name { line-height: 1.5; }
.ar-page .hero__sub { line-height: 1.9; }
.ar-page .footer__tagline { line-height: 1.9; }

/* No true italics exist for Arabic — synthetic oblique looks broken.
   Keep the accent colour, drop the slant. */
.ar-page :is(.section-title, .hero__title) em {
  font-style: normal;
  font-weight: 500;
}

/* Weights. Montserrat Arabic is drawn to match Montserrat's weight
   ramp, so these sit one step above the Latin values rather than two:
   Arabic reads lighter at the same nominal weight because of its thin
   connecting strokes, but the face is already sturdier than a typical
   Arabic text font. (Latin value in the comment.) */
.ar-page .section-title { font-weight: 500; }           /* 400 */
.ar-page .about-showcase__title { font-weight: 700; }   /* 700 */
.ar-page .future-showcase__title,
.ar-page .future-card__title { font-weight: 600; }      /* 500 */
.ar-page .svc-card__title { font-weight: 600; }         /* 600 — on photography */
.ar-page .why-row__title { font-weight: 500; }          /* 400 */

/* Eyebrows / labels: the 0.22–0.35em uppercase tracking was doing the
   visual work in Latin. With tracking removed for Arabic, weight has
   to carry that presence instead — hence SemiBold at these sizes. */
.ar-page :is(.section-label, .eyebrow__text, .hstat__l, .numstrip__label,
              .footer__col-h, .mob-menu__tag, .future-card__kicker,
              .hdr-dropdown__label, .mob-submenu__label, .scroll-label,
              .preloader__word, .tick) {
  font-weight: 600;
}
.ar-page .section-label { font-size: 12px; }
.ar-page .eyebrow__text { font-size: 12px; }
.ar-page .hstat__l { font-size: 11px; }
.ar-page .numstrip__label { font-size: 11px; }
.ar-page .footer__col-h { font-size: 11px; }
.ar-page .future-card__kicker { font-size: 12px; }
.ar-page .hdr-link { font-size: 13px; }
.ar-page .hdr-tel { font-size: 13px; }
.ar-page .logo__sub { font-size: 11px; }
.ar-page .btn { font-size: 13px; }
.ar-page .btn--lg { font-size: 14px; }
.ar-page .future-card__cta { font-size: 13px; }
.ar-page .about-showcase__cta { font-size: 13px; }
.ar-page .tick { font-size: 12px; }
.ar-page .mob-menu__tag { font-size: 11px; }
.ar-page .preloader__word { font-size: 12px; }


/* ── 2. LATIN ISLANDS ──────────────────────────────────────── */
/* Brand lockups, the giant outline words and the e-mail address stay
   in the Latin face with their original tracking. */
.ar-page .lat,
.ar-page .lat * {
  font-family: 'Reddit Sans', Georgia, 'Times New Roman', serif;
  direction: ltr;
  unicode-bidi: isolate;
}
.ar-page .logo__mark,
.ar-page .logo__mark * { letter-spacing: -0.01em; }
.ar-page .about-showcase__bg-word { letter-spacing: 0.04em; }

/* Numerals stay Latin digits in an LTR run so "22+" never flips. The
   face carries Montserrat's full Latin set, so they inherit it rather
   than switching to a second family. */
.ar-page :is(.hstat__n, .numstrip__big, .svc-card__num, .why-row__num,
              .future-count, .mob-link__num, .preloader__pct, .num) {
  direction: ltr;
  unicode-bidi: isolate;
}
.ar-page .hstat__n,
.ar-page .numstrip__big,
.ar-page .future-count { text-align: center; }
.ar-page .why-row__num,
.ar-page .svc-card__num { text-align: start; }


/* ── 3. HEADER / DROPDOWN / BURGER ─────────────────────────── */
.ar-page .logo__sub {
  margin-left: 0;
  margin-right: 8px;
}

.ar-page .hdr-link::after {
  left: auto;
  right: 0;
}

/* Caret sits at the inline start (right) of the label in RTL. */
.ar-page .hdr-dropdown > .hdr-link::before {
  margin-right: 0;
  margin-left: 7px;
}

.ar-page .hdr-dropdown__menu a:hover {
  transform: translateX(-4px);
}

.ar-page .burger__bar--bot {
  margin-left: 0;
  margin-right: auto;
}
.ar-page .burger.is-active .burger__bar--bot {
  margin-right: 0;
}


/* ── 4. MOBILE MENU ────────────────────────────────────────── */
/* Panel enters from the left edge in RTL. */
.ar-page .mob-menu__panel {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  border-left: none;
  border-right: 1px solid rgba(62, 92, 80, 0.12);
}
.ar-page .mob-menu.is-open .mob-menu__panel {
  transform: translateX(0);
}

.ar-page .mob-link {
  transform: translateX(-24px);
}
.ar-page .mob-menu.is-open .mob-link {
  transform: translateX(0);
}

.ar-page .mob-link__arrow {
  margin-left: 0;
  margin-right: auto;
}

.ar-page .mob-submenu__label,
.ar-page .mob-sublink {
  padding-left: 0;
  padding-right: 48px;
}

@media (max-width: 480px) {
  .ar-page .mob-menu__panel {
    border-right: none;
  }
}


/* ── 5. HERO ───────────────────────────────────────────────── */
/* The hero is a centred composition, so nothing needs mirroring here.
   Only the scroll cue needs a horizontal writing mode — vertical
   Arabic is unreadable. */
.ar-page .scroll-label {
  writing-mode: horizontal-tb;
  font-size: 10px;
}


/* ── 6. TICKER ─────────────────────────────────────────────── */
/* Natural RTL flow: items enter from the left and exit right, so the
   marquee travels the opposite way from the Latin version. */
.ar-page .ticker__track {
  direction: rtl;
  animation-name: tickerMoveRtl;
}

@keyframes tickerMoveRtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}


/* ── 7. ABOUT SHOWCASE ─────────────────────────────────────── */
.ar-page .about-showcase__frame--main::after {
  background: linear-gradient(225deg, rgba(8, 10, 11, 0.08), rgba(8, 10, 11, 0.34));
}

/* Base / small-screen composition */
.ar-page .about-showcase__frame--main,
.ar-page .about-showcase .about__img-main {
  margin-left: 0;
  margin-right: auto;
}

.ar-page .about-showcase__frame--float,
.ar-page .about-showcase .about__img-accent {
  left: auto;
  right: clamp(0px, 4vw, 56px);
}

@media (max-width: 768px) {
  .ar-page .about-showcase__content,
  .ar-page .about-showcase .about__text {
    text-align: right;
  }

  .ar-page .about-showcase__frame--main,
  .ar-page .about-showcase .about__img-main {
    margin-left: 0;
    margin-right: auto;
  }

  .ar-page .about-showcase__frame--float,
  .ar-page .about-showcase .about__img-accent {
    left: auto;
    right: 0;
  }

  .ar-page .about-showcase__cta {
    left: auto;
    right: 54%;
    transform: translateX(50%);
  }
}

/* Desktop composition: title block, floating copy, button and media
   column all swap sides. */
@media (min-width: 769px) {
  .ar-page .about-showcase__bg-word {
    left: 55%;
  }

  .ar-page .about-showcase__content,
  .ar-page .about-showcase .about__text {
    text-align: right;
  }

  .ar-page .about-showcase__title {
    margin: 0 auto -0.22em 0;
    letter-spacing: 0;
  }

  .ar-page .about-showcase__copy,
  .ar-page .about-showcase .about__body {
    left: auto;
    right: 0;
    text-align: right;
  }

  .ar-page .about-showcase__button {
    left: auto;
    right: 0;
  }

  .ar-page .about-showcase__media,
  .ar-page .about-showcase .about__visual {
    margin: 0 auto 0 var(--gutter);
  }

  .ar-page .about-showcase__frame--float,
  .ar-page .about-showcase .about__img-accent {
    left: auto;
    right: clamp(-190px, -12vw, -92px);
  }

  .ar-page .about-showcase__cta {
    left: auto;
    right: clamp(-42px, -2vw, 18px);
    transform: none;
  }
}


/* ── 8. SERVICES ───────────────────────────────────────────── */
/* Cards are borderless image tiles; only the diagonal tint and the
   hover underline carry a direction. */
.ar-page .svc-card::before {
  background:
    linear-gradient(to top, rgba(8, 10, 11, 0.88) 0%, rgba(8, 10, 11, 0.48) 54%, rgba(62, 92, 80, 0.18) 100%),
    linear-gradient(225deg, rgba(62, 92, 80, 0.38), transparent 58%);
}

.ar-page .svc-card::after {
  transform-origin: right;
}


/* ── 9. FUTURE SHOWCASE ────────────────────────────────────── */
/* The track is driven by pixel transforms in main.js, so it stays LTR;
   each card re-establishes RTL for its own content. */
.ar-page .future-showcase__slider {
  direction: ltr;
}
.ar-page .future-card {
  direction: rtl;
}

.ar-page .future-card__content {
  left: auto;
  right: clamp(28px, 5vw, 72px);
}

.ar-page .future-card__shade {
  background:
    linear-gradient(270deg, rgba(8, 10, 11, 0.82) 0%, rgba(8, 10, 11, 0.48) 42%, rgba(8, 10, 11, 0.12) 100%),
    linear-gradient(to top, rgba(8, 10, 11, 0.56), transparent 55%);
}

/* Word-level reveal: the boxes must contain Arabic descenders or the
   clip-path animation shears them off. */
.ar-page .future-title-word {
  overflow: visible;
}
.ar-page .future-title-char {
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

@media (max-width: 992px) {
  .ar-page .future-showcase__intro {
    text-align: right;
    margin-left: auto;
    margin-right: 0;
  }

  .ar-page .future-card__shade {
    background:
      linear-gradient(to top, rgba(8, 10, 11, 0.88) 0%, rgba(8, 10, 11, 0.46) 54%, rgba(8, 10, 11, 0.16) 100%);
  }
}

@media (max-width: 768px) {
  .ar-page .future-showcase__slider {
    margin-left: 0;
    margin-right: -8px;
  }

  .ar-page .future-card__content {
    left: auto;
    right: 24px;
  }
}


/* ── 10. WHY MRS ───────────────────────────────────────────── */
.ar-page .why-row {
  transition: padding-right 0.4s var(--ease);
}
.ar-page .why-row:hover {
  padding-left: 0;
  padding-right: 10px;
}

.ar-page .why-row::after {
  left: auto;
  right: 0;
}


/* ── 11. FOOTER ────────────────────────────────────────────── */
.ar-page .footer__logo .logo__sub {
  margin-right: 8px;
  margin-left: 0;
}

.ar-page .footer__contact-list a,
.ar-page .footer__contact-list span {
  line-height: 1.7;
}


/* ── 12. LANGUAGE SWITCHER ─────────────────────────────────── */
/* The component itself lives in ../style.css so both languages share
   it. Only the Latin tracking needs restoring after the Arabic reset. */
.ar-page .lang-switch,
.ar-page .mob-menu__lang {
  letter-spacing: 0.12em;
}


/* ── 13. ABOUT PAGE ────────────────────────────────────────── */
/* Decorative outline words sit on the opposite margin. */
.ar-page .about-story__outline {
  left: auto;
  right: -4vw;
}

.ar-page .about-split__mark {
  left: auto;
  right: -3vw;
}

.ar-page .about-experience__pattern {
  right: auto;
  left: -3vw;
}

/* Story image bleeds off the left edge; round the corner that now
   faces into the page. */
.ar-page .about-story__media {
  right: auto;
  left: 0;
  border-radius: 0 34px 0 0;
}

/* Values panel: the dark end of the wash follows the text. */
.ar-page .about-values-panel__overlay {
  background:
    linear-gradient(270deg, rgba(8, 10, 11, 0.74), rgba(62, 92, 80, 0.5) 48%, rgba(201, 169, 110, 0.28)),
    linear-gradient(180deg, rgba(8, 10, 11, 0.25), rgba(8, 10, 11, 0.55));
}

.ar-page .about-value-panel__button {
  text-align: right;
}

.ar-page .about-values__list {
  padding-left: 0;
  padding-right: 1.1em;
}

/* Pill has a tighter inset on the icon side. */
.ar-page .about-floating-cta {
  padding: 0 18px 0 30px;
}

.ar-page .about-inner__title,
.ar-page .about-inner__subtitle {
  text-align: center;
}

@media (max-width: 992px) {
  .ar-page .about-story__media {
    left: auto;
    right: auto;
  }
}

@media (max-width: 768px) {
  .ar-page .about-inner__content {
    text-align: right;
  }

  .ar-page .about-inner__outline {
    left: auto;
    right: 42%;
    transform: translate(50%, -50%);
  }

  .ar-page .about-floating-cta {
    left: auto;
    right: auto;
  }

  .ar-page .about-value-panel p {
    padding-left: 0;
    padding-right: 48px;
  }
}


/* ── 14. CONTACT PAGE ──────────────────────────────────────── */
.ar-page .contact-touch__outline,
.ar-page .news-feed__outline,
.ar-page .project-category-intro__outline {
  left: auto;
  right: -4vw;
}

.ar-page .contact-offices__mark,
.ar-page .project-overview__outline {
  right: auto;
  left: -4vw;
}

.ar-page .contact-touch__inner {
  transform-origin: right;
}

.ar-page .contact-story__overlay {
  background:
    linear-gradient(270deg, rgba(8, 10, 11, 0.78), rgba(62, 92, 80, 0.48) 52%, rgba(8, 10, 11, 0.38)),
    linear-gradient(180deg, rgba(8, 10, 11, 0.1), rgba(8, 10, 11, 0.58));
}

/* Map pins are a stylised layout, not a real projection — mirror them
   so the composition reads the same way round. */
.ar-page .contact-map__pin--uae { left: auto; right: 24%; }
.ar-page .contact-map__pin--cairo { left: auto; right: 52%; }
.ar-page .contact-map__pin--capital { right: auto; left: 10%; }


/* ── 15. NEWS ──────────────────────────────────────────────── */
.ar-page .news-card__media::after {
  background:
    linear-gradient(180deg, rgba(8, 10, 11, 0.08), rgba(8, 10, 11, 0.86)),
    linear-gradient(270deg, rgba(62, 92, 80, 0.58), rgba(8, 10, 11, 0.18));
}

.ar-page .news-article-content blockquote {
  border-left: 0;
  border-right: 3px solid var(--green);
}

.ar-page .news-article-content ul {
  padding-left: 0;
  padding-right: 1.15em;
}

.ar-page .news-sidebar,
.ar-page .news-article-content {
  text-align: right;
}

/* The tab indicator is pinned left and slid right by --active-tab. In
   RTL the first tab is on the right, so pin it right and slide left. */
.ar-page .news-filter::before {
  inset: 5px 5px 5px auto;
  transform: translateX(calc(var(--active-tab, 0) * -100%));
}


/* ── 16. PROJECT PAGES (listing, category, detail) ─────────── */
.ar-page .projects-intro__word {
  left: auto;
  right: -4vw;
}

.ar-page .projects-unit__word {
  right: auto;
  left: -2vw;
}

.ar-page .projects-unit--right .projects-unit__word {
  left: auto;
  right: -4vw;
}

.ar-page .projects-unit--right .projects-unit__media,
.ar-page .projects-unit--right .projects-unit__copy {
  margin-left: 0;
  margin-right: auto;
}

.ar-page .project-cat-card__media::after,
.ar-page .project-category-hero__overlay {
  background:
    linear-gradient(180deg, rgba(8, 10, 11, 0.06), rgba(8, 10, 11, 0.82)),
    linear-gradient(270deg, rgba(62, 92, 80, 0.42), rgba(8, 10, 11, 0.12));
}

/* Lightbox: close stays at the inline end, arrows swap so "next"
   advances leftwards with the reading direction. */
.ar-page .project-lightbox__close {
  right: auto;
  left: 24px;
}

.ar-page .project-lightbox__prev { left: auto; right: 20px; }
.ar-page .project-lightbox__next { right: auto; left: 20px; }

@media (max-width: 768px) {
  .ar-page .project-lightbox__close { left: 8px; right: auto; }
  .ar-page .project-lightbox__prev { left: auto; right: 8px; }
  .ar-page .project-lightbox__next { right: auto; left: 8px; }
}