/* ==========================================================================
   FORGYEN — Arabic / RTL layer (loaded only on Arabic pages, after the
   section stylesheets). The shared CSS stays the source of the design; this
   file adapts it for Arabic: IBM Plex Sans Arabic, no Latin letter-spacing,
   taller line-heights for Arabic glyphs, and mirrored direction where a
   layout or a visual has one (forward = right to left). Decorative art is
   reviewed one piece at a time instead of flipping the page; photographs,
   the logo and the case-study covers are never mirrored.
   Everything is scoped to [dir="rtl"], so English pages are unaffected.
   Structure: 1 Typography · 2 Shared components · 3 Hero · 4 The Challenge
              5 Our Services · 6 Our Approach · 7 Case Studies
              8 Discovery Session · 9 Footer
   ========================================================================== */

/* 1. Typography ----------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] .btn,
[dir="rtl"] .text-link,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] button,
[dir="rtl"] .df__input,
[dir="rtl"] .df__submit { font-family: var(--fg-font-ar); }

/* Arabic letters join: tracking (positive or negative) breaks the script,
   and there are no capitals to transform */
[dir="rtl"] body * { letter-spacing: 0 !important; text-transform: none !important; }

/* Latin runs inside Arabic pages (EN switch, URLs, phone numbers) keep Manrope */
[dir="rtl"] [lang="en"],
[dir="rtl"] [dir="ltr"],
[dir="rtl"] [dir="ltr"] input { font-family: var(--fg-font-en); }

/* Arabic needs more vertical room than Latin display type (ascenders,
   descenders and dots); the English line-heights of ~1.05 would clip them */
[dir="rtl"] .hero__title { line-height: 1.32; }
[dir="rtl"] .challenge__title,
[dir="rtl"] .challenge__statement { line-height: 1.38; }
[dir="rtl"] .services__title,
[dir="rtl"] .approach__title,
[dir="rtl"] .cs__title,
[dir="rtl"] .dc__title,
[dir="rtl"] .sf__signature { line-height: 1.3; }
[dir="rtl"] .insight__word { line-height: 1.3; }
[dir="rtl"] .service__name,
[dir="rtl"] .approach__name,
[dir="rtl"] .cs-slide__title,
[dir="rtl"] .cs__info-title { line-height: 1.4; }
[dir="rtl"] .hero__lead,
[dir="rtl"] .approach__desc,
[dir="rtl"] .challenge__support,
[dir="rtl"] .dc__lead { line-height: 1.75; }

/* 2. Shared components ---------------------------------------------------- */
/* "forward" arrows point left; their hover nudge follows (scale applies after transform) */
[dir="rtl"] .btn__arrow,
[dir="rtl"] .text-link__arrow,
[dir="rtl"] .df__submit-arrow { scale: -1 1; }

/* header: the active-link underline grows from the reading start */
[dir="rtl"] .primary-nav__link::after { transform-origin: right center; }
[dir="rtl"] .lang-switch__link[lang="en"] { font-family: var(--fg-font-en); }

/* 3. Hero ----------------------------------------------------------------- */
/* frame and arcs belong to the visual's side, which is now the left */
[dir="rtl"] .hero__ribbon { right: auto; left: 0; scale: -1 1; }
[dir="rtl"] .hero__arcs { scale: -1 1; }

/* the Diagnosis visual flows in reading direction: signals enter from the
   copy (right) and the clearer direction leaves to the left. The strands are
   mirrored; the rendered sphere is flipped back so its light stays put; the
   labels (real text) are re-positioned, never mirrored. */
[dir="rtl"] .diagnostic__svg { scale: -1 1; }
[dir="rtl"] .dg-core__asset { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }
[dir="rtl"] .signal { left: calc(100% - var(--x)); }
[dir="rtl"] .diagnostic__label { left: calc(100% - var(--x)); }

/* tablet & phone: the visual sits in the column (no bleed) */
@media (max-width: 1099px) {
  [dir="rtl"] .hero__visual { margin-inline-start: auto; }
}
@media (max-width: 599px) {
  [dir="rtl"] .signal { left: calc(100% - var(--mx)); }
  [dir="rtl"] .hero__eyebrow { padding: 7px 12px 7px 14px; }
  [dir="rtl"] .hero__title { font-size: min(2.375rem, 9.4vw); line-height: 1.38; }
  [dir="rtl"] .hero__lead { line-height: 1.8; }
}
[dir="rtl"] .hero__eyebrow { padding: 8px 14px 8px 18px; }

/* 4. The Challenge -------------------------------------------------------- */
[dir="rtl"] .challenge__particle--a { left: auto; right: 9%; }
[dir="rtl"] .challenge__particle--b { right: auto; left: 11%; }
[dir="rtl"] .challenge__particle--c { left: auto; right: 15%; }
[dir="rtl"] .challenge__particle--d { right: auto; left: 12%; }

[dir="rtl"] .cycle__step { padding: var(--ch-step-pad) var(--ch-step-pad) var(--ch-step-pad) 14px; }
[dir="rtl"] .insight__card { padding: 14px 14px 14px 48px; }
[dir="rtl"] .insight__rail { background: linear-gradient(270deg, transparent, rgba(184, 115, 51, 0.55)); }
[dir="rtl"] .insight__rail--end { background: linear-gradient(270deg, rgba(184, 115, 51, 0.55), transparent); }
[dir="rtl"] .insight__rail::after { right: auto; left: 22%; }
[dir="rtl"] .insight__rail--end::after { left: auto; right: 22%; }

@media (min-width: 1200px) {
  /* connector arrows sit in the gap on the left of each stage, pointing left */
  [dir="rtl"] .cycle__step:not(:last-child)::after { left: auto; right: 100%; scale: -1 1; }
  /* return loop: from Start Again (left) round to New Agency (right) */
  [dir="rtl"] .cycle__loop { left: auto; right: var(--icon-c); }
  [dir="rtl"] .cycle__loop::before { left: auto; right: -6.5px; }
  [dir="rtl"] .cycle__loop::after { right: auto; left: -4.5px; }
}
@media (max-width: 1399px) {
  [dir="rtl"] .cycle__step { padding-inline-end: 12px; }
}
@media (max-width: 1199px) {
  [dir="rtl"] .cycle__step { padding-inline-end: 22px; }
  /* vertical journey: the loop enters New Agency from the right */
  [dir="rtl"] .cycle__loop::before {
    left: auto;
    right: 22px;
    border-left: 0;
    border-right: 8px solid var(--fg-copper);
  }
  [dir="rtl"] .cycle__loop::after { right: auto; left: 26px; }
}
@media (max-width: 599px) {
  [dir="rtl"] .challenge__title { font-size: min(2rem, 7.8vw); line-height: 1.45; }
  [dir="rtl"] .cycle__loop::before { right: 14px; }
  [dir="rtl"] .cycle__loop::after { left: 18px; }
  [dir="rtl"] .insight__card { padding: 10px 10px 10px 28px; }
  [dir="rtl"] .challenge__particle--b { left: 9%; }
}

/* 5. Our Services --------------------------------------------------------- */
/* backdrop construction moves to the opposite margin */
[dir="rtl"] .services__orbit { right: auto; left: calc(-1 * min(760px, 52vw)); }
[dir="rtl"] .services__rule-v { left: auto; right: max(24px, calc(50% - 680px)); }
[dir="rtl"] .services__rule-h::after { right: auto; left: max(24px, calc(50% - 650px)); }

/* card art mirrors so it stays clear of the (now right-aligned) titles */
[dir="rtl"] .service--arcs::before { right: auto; left: -34cqi; }
[dir="rtl"] .service--arcs::after { right: auto; left: -48cqi; }
[dir="rtl"] .service--peach::before { right: auto; left: -82cqi; }
[dir="rtl"] .service--orb::before { right: auto; left: -24cqi; }
[dir="rtl"] .service--orb::after { right: auto; left: -16cqi; }
[dir="rtl"] .service--copper::before { clip-path: polygon(46% 0, 0 0, 0 74%); }
[dir="rtl"] .service--copper::after { right: auto; left: -34cqi; }
[dir="rtl"] .service--split::before {
  right: auto;
  left: 0;
  border-left: 0;
  border-right: 1px solid var(--sv-line);
  background:
    radial-gradient(circle 24cqi at 0 24%, #EAD6C2 99%, transparent 100%),
    radial-gradient(circle 24cqi at 0 82%, #E5CBB2 99%, transparent 100%),
    linear-gradient(180deg, #F5EADF, #EFE0D1);
}
[dir="rtl"] .service--wedge::before { clip-path: polygon(38% 0, 0 0, 0 58%); }
[dir="rtl"] .service--wedge::after { right: auto; left: -56cqi; }
[dir="rtl"] .service__name { text-wrap: balance; }

@media (max-width: 1099px) {
  [dir="rtl"] .services__orbit { left: -96vw; }
}
@media (max-width: 599px) {
  [dir="rtl"] .service--orb::before { right: auto; left: -26cqi; }
  [dir="rtl"] .service--orb::after { right: auto; left: -20cqi; }
}

/* 6. Our Approach --------------------------------------------------------- */
/* the route climbs in reading direction: 01 bottom right → 05 top left */
[dir="rtl"] .approach__bead--a { left: auto; right: 2.5%; }
[dir="rtl"] .approach__bead--b { right: auto; left: 4%; }
[dir="rtl"] .approach__bead--c { right: auto; left: 9%; }
[dir="rtl"] .approach__sweeps { scale: -1 1; }

@media (min-width: 1200px) {
  [dir="rtl"] .approach__intro { left: auto; right: 0; }
  [dir="rtl"] .approach__route { scale: -1 1; }
  [dir="rtl"] .approach__stage { left: calc(100% - var(--x)); }
  [dir="rtl"] .approach__content { left: auto; right: -3.44cqi; }
  [dir="rtl"] .approach__content::before { left: auto; right: -14px; }
}
@media (max-width: 1199px) {
  /* winding vertical route: the node column is on the right */
  [dir="rtl"] .approach__seg { left: auto; right: 0; scale: -1 1; }
  [dir="rtl"] .approach__node { margin: var(--ap-node-off) var(--nx) 0 0; }
}
@media (max-width: 767px) {
  [dir="rtl"] .approach__bead--b { left: 7%; }
  [dir="rtl"] .approach__title { font-size: min(2.5rem, 10vw); }
}

/* 7. Case Studies --------------------------------------------------------- */
[dir="rtl"] .cs__arc--a { right: auto; left: -720px; }
[dir="rtl"] .cs__arc--b { right: auto; left: -1060px; }
[dir="rtl"] .cs__bead--a { right: auto; left: 27%; }
[dir="rtl"] .cs__bead--b { right: auto; left: 1.5%; }
@media (max-width: 767px) {
  /* phone carousel: the info area lines up under the cover from the right */
  [dir="rtl"] .cs.is-carousel .cs__info { margin: -36px var(--cs-edge) 0 0; }
}
@media (max-width: 599px) {
  [dir="rtl"] .cs__arc--a { left: -420px; }
  [dir="rtl"] .cs__bead--a { left: 10%; }
}

/* 8. Discovery Session ---------------------------------------------------- */
/* Arabic fields: icon on the right; LTR values (phone, website) keep the
   English treatment so digits, + and URLs read left to right */
[dir="rtl"] .df__control:not([dir="ltr"]) > .df__icon { left: auto; right: 18px; }
[dir="rtl"] .df__control:not([dir="ltr"]) > .df__input:not([dir="ltr"]) { padding: 0 58px 0 18px; }
[dir="rtl"] .df__control:not([dir="ltr"]) > .df__textarea { padding-top: 16px; padding-bottom: 14px; }
[dir="rtl"] .df__control:has(> .df__input[dir="ltr"]) > .df__icon { right: auto; left: 18px; }
[dir="rtl"] .df__input[dir="ltr"] { text-align: left; }
[dir="rtl"] .df__control--phone .df__input::placeholder { font-family: var(--fg-font-ar); }
[dir="rtl"] .df__label { line-height: 1.6; }

[dir="rtl"] .df__status { border-left: 0; border-right: 3px solid var(--fg-copper); }
[dir="rtl"] .df__status.is-sending { border-right-color: rgba(11, 19, 32, 0.2); }
[dir="rtl"] .df__status.is-failure { border-right-color: #B8452B; }
[dir="rtl"] .df__note { padding-left: 0; padding-right: 6px; }
[dir="rtl"] .df__privacy { padding-left: 0; padding-right: 48px; line-height: 1.7; }

[dir="rtl"] .dc__navy { left: auto; right: -30%; }
[dir="rtl"] .dc__lines { scale: -1 1; }

@media (max-width: 599px) {
  [dir="rtl"] .df__control:not([dir="ltr"]) > .df__icon { right: 16px; }
  [dir="rtl"] .df__control:not([dir="ltr"]) > .df__input:not([dir="ltr"]) { padding-right: 52px; padding-left: 16px; }
  [dir="rtl"] .df__control:has(> .df__input[dir="ltr"]) > .df__icon { left: 16px; }
  [dir="rtl"] .df__note { padding-right: 0; }
  [dir="rtl"] .df__privacy { padding-right: 36px; }
  [dir="rtl"] .dc__navy { right: -60%; }
}

/* 9. Footer --------------------------------------------------------------- */
[dir="rtl"] .sf__signature { padding-bottom: 0.08em; }
[dir="rtl"] .sf__en { font-family: var(--fg-font-en); }

/* ==========================================================================
   Inner pages (Phase 02 + 03)
   10 About Us · 11 Case studies · 12 Insights · 13 Privacy · 14 404
   ========================================================================== */

/* headings wrap evenly in Arabic (no lonely last word) */
[dir="rtl"] h1,
[dir="rtl"] h2 { text-wrap: balance; }

/* 10. About Us -------------------------------------------------------------- */
[dir="rtl"] .ab-hero__title,
[dir="rtl"] .ab-exp__title,
[dir="rtl"] .ab-why__title,
[dir="rtl"] .ab-name__title,
[dir="rtl"] .ab-phil__title,
[dir="rtl"] .ab-res__title,
[dir="rtl"] .ab-build__title,
[dir="rtl"] .ab-cta__title { line-height: 1.3; }
[dir="rtl"] .ab-real__question { line-height: 1.4; }
[dir="rtl"] .ab-eyebrow { padding: 9px 18px 9px 20px; }

/* 02: Campaigns → Platforms → Activities reads right to left; tilts mirror */
[dir="rtl"] .ab-panel--campaigns  { left: auto; right: 0;     rotate: 3.2deg; }
[dir="rtl"] .ab-panel--platforms  { left: auto; right: 43.5%; rotate: -2.4deg; }
[dir="rtl"] .ab-panel--activities { left: auto; right: 78.4%; rotate: -4.2deg; }
[dir="rtl"] .ab-copper { rotate: 4deg; translate: -0.4em -0.8em; scale: -1 1; }

/* 03: the principles artwork has no text; mirrored so understanding → action
   runs right to left above 01 · 02 · 03 */
[dir="rtl"] .ab-why__strip img,
[dir="rtl"] .ab-step__art img { scale: -1 1; }

/* 04: the ribbon (no text) mirrored: rough on the right, polished on the left;
   its labels move with their markers */
[dir="rtl"] .ab-name__visual img { scale: -1 1; }
[dir="rtl"] .ab-name__label { padding-inline-start: 0; font-size: clamp(0.8125rem, 0.65rem + 0.3vw, 1.0625rem); }
[dir="rtl"] .ab-name__label--shape      { left: 88.6%; }
[dir="rtl"] .ab-name__label--strengthen { left: 50.8%; }
[dir="rtl"] .ab-name__label--refine     { left: 19.3%; }

/* 05: the landscape press (no text) is mirrored so Business Reality enters on
   the right and Clearer Direction leaves on the left. The portrait (phone)
   artwork flows top to bottom and keeps its baked-in marker, so it is not. */
@media (min-width: 768px) {
  [dir="rtl"] .ab-phil__machine img { scale: -1 1; }
  [dir="rtl"] .ab-phil__label--in { left: auto; right: 0; }
  [dir="rtl"] .ab-phil__label--out { left: auto; right: 78%; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  [dir="rtl"] .ab-phil__label--out { right: auto; left: 0; }
}
@media (min-width: 768px) { [dir="rtl"] .ab-phil__label--out { padding: 0.1em 20px 2.4em 0; } }

@media (max-width: 767px) {
  [dir="rtl"] .ab-panel--campaigns  { left: auto; right: 0;   rotate: 5deg; }
  [dir="rtl"] .ab-panel--platforms  { left: auto; right: 36%; rotate: -2deg; }
  [dir="rtl"] .ab-panel--activities { left: auto; right: 69%; rotate: -6deg; }
  [dir="rtl"] .ab-copper { rotate: 0deg; translate: none; }
  [dir="rtl"] .ab-hero__title { font-size: min(2.25rem, 9vw); line-height: 1.35; }
  [dir="rtl"] .ab-exp__title { font-size: min(2.125rem, 8.6vw); line-height: 1.38; }
  [dir="rtl"] .ab-name__label { font-size: 0.8125rem; }
  [dir="rtl"] .ab-phil__label--out { padding: 1.3em 22px 0 0; }
}

/* CTA buttons on inner pages: their arrows point the reading way too */
[dir="rtl"] .ab-cta__button svg,
[dir="rtl"] .ca-cta__button svg,
[dir="rtl"] .bl-cta__button svg { scale: -1 1; }

/* 11. Case studies ---------------------------------------------------------- */
/* Arabic values carry their units in words (ريال سعودي, ألف), so they wrap
   inside the metric cards instead of running out of them */
[dir="rtl"] .csp-metric__value {
  white-space: normal;
  font-size: clamp(1.125rem, 0.95rem + 0.45vw, 1.375rem);
  line-height: 1.35;
}
[dir="rtl"] .csp-metric::before { left: auto; right: 22px; }
[dir="rtl"] .csp-primary__value { line-height: 1.25; font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
[dir="rtl"] .csp-title,
[dir="rtl"] .ca-title,
[dir="rtl"] .ca-item__title,
[dir="rtl"] .csp-next__title { line-height: 1.3; }
[dir="rtl"] .ca-item__value { line-height: 1.3; }
@media (max-width: 767px) {
  [dir="rtl"] .csp-metric::before { right: 16px; }
}
[dir="rtl"] .csp-scope li { padding: 14px 26px 14px 0; line-height: 1.6; }
[dir="rtl"] .csp-scope li::before { left: auto; right: 2px; top: calc(14px + 0.8em - 4px); }
[dir="rtl"] .csp-prose li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .csp-prose li::before { left: auto; right: 2px; }
/* gradient-filled text only paints inside its box: room for Arabic descender dots */
[dir="rtl"] .csp-primary__value { padding-bottom: 0.18em; }