/* Muhaya — RTL layer. Loaded after muhaya-site.css/muhaya-dark.css on every
   page; everything here is scoped under [dir="rtl"] so it has zero effect on
   the English site. Flex/grid layouts already auto-mirror under dir="rtl"
   (browsers reverse the inline axis for free); what's here is only what does
   NOT auto-mirror: Arabic typography, absolute pixel positions, and the
   handful of physical (not logical) text-align/padding declarations. */

/* ---------- typography (System C: Changa display + Cairo body/UI) ---------- */
/* Archivo/Caveat have no Arabic glyph coverage. Cairo is the base: body
   copy, nav, buttons, labels, all UI chrome. Changa takes over wherever
   the English design already used font-weight 800/900 — every heading,
   mega-word and card title in this codebase is authored at one of those
   two weights and nothing else is, so the existing inline-style text is
   itself a reliable "this is a display element" signal, with no need to
   touch every template to add a class. The handwritten note accents also
   move to Changa: Cairo read correct but flat for them, and Changa gives
   them some of the personality Caveat has in the English version. */
/* !important: the root element itself carries an inline
   font-family:'Archivo' (set in the template for the English site), and
   inline styles beat an external rule of any selector specificity unless
   that rule is !important — without it, Cairo never actually wins on the
   root element, and every element that isn't individually caught by the
   Changa weight-800/900 rule below silently inherits Archivo instead. */
[dir="rtl"] [data-mfx-root]{font-family:'Cairo',sans-serif!important}
/* Same story one level down: on every page except Home the nav carries
   its own inline font-family:'Archivo', so the Arabic nav labels and the
   nav CTA fell back to a system font. The skip link sits outside the
   root and had no font at all. */
[dir="rtl"] nav[data-mfx-nav],
[dir="rtl"] .skip-link{font-family:'Cairo',sans-serif!important}
[dir="rtl"] [style*="font-weight: 800"],
[dir="rtl"] [style*="font-weight: 900"]{font-family:'Changa',sans-serif}
[dir="rtl"] [data-mfx-note]{font-family:'Changa',sans-serif!important;font-weight:700}
/* The English design tracks nearly every heading/label with inline
   letter-spacing (positive, e.g. .09em/.14em, for Archivo/uppercase
   tracking; negative, e.g. -.03em, for tight display sizing). Arabic
   letters must sit directly adjacent to join into their correct
   medial/final forms — any non-zero tracking visually pries them apart,
   even though shaping itself stays technically correct. Every such value
   is an inline style (so it always wins over a plain external rule) and
   there are too many of them across too many templates to chase one by
   one, so this resets every element that carries an inline
   letter-spacing, site-wide, rather than special-casing each one. */
[dir="rtl"] [style*="letter-spacing"]{letter-spacing:normal!important}
/* Arabic tashkeel (ḍamma/shadda/fatḥa etc., e.g. the ُ/ّ in "يُتعلَّم") stack
   above the base letter and need more vertical room than Latin caps do —
   the English headlines were authored at very tight line-heights (.82-.9)
   for all-caps Archivo, which has no ascending marks at all. At the same
   tight leading, Changa's diacritics collide with the line above instead
   of sitting on their own letter. Loosened for every Changa (800/900)
   element by default; hero-mega is a single short word with no tashkeel
   and no wrap, so its own rule below restores the tight value there. */
[dir="rtl"] [style*="font-weight: 800"],
[dir="rtl"] [style*="font-weight: 900"]{line-height:1.3!important}
/* Arabic script reads optically larger than Latin at the same pixel size
   (more going on vertically per letter, plus tashkeel), so the English
   sizes read oversized/heavy once mirrored verbatim, even where the line
   count doesn't change. Scaled down ~20-25% for the handful of repeated
   section-heading sizes used across Home/Method/Situations, matched the
   same way the rest of this file matches "is this a display element" —
   by the literal inline font-size text — rather than editing every
   template. Numeral-only elements (step numbers, stat values like "49%")
   are excluded: digits don't carry the same oversized-script problem, so
   they keep the original English scale. Tiered to follow muhaya-site.css's
   own tablet (<=1100px) and phone (<=700px) shrink steps — these rules
   have the same specificity and load later, so an untiered value would
   override the site's smaller phone sizes and leave 84px headings on a
   375px screen. */
@media (min-width:1101px){
  [dir="rtl"] [style*="font-size: 128px"]{font-size:98px!important}
  [dir="rtl"] [style*="font-size: 112px"]{font-size:84px!important}
  /* situation-page headline (each situation's own title) */
  [dir="rtl"] [style*="font-size: 104px"]{font-size:76px!important}
  [dir="rtl"] [style*="font-size: 80px"]{font-size:62px!important}
}
@media (min-width:701px) and (max-width:1100px){
  [dir="rtl"] [style*="font-size: 128px"]{font-size:74px!important}
  [dir="rtl"] [style*="font-size: 112px"]{font-size:66px!important}
  [dir="rtl"] [style*="font-size: 104px"]{font-size:62px!important}
  [dir="rtl"] [style*="font-size: 80px"]{font-size:58px!important}
}
@media (max-width:700px){
  [dir="rtl"] [style*="font-size: 128px"],
  [dir="rtl"] [style*="font-size: 112px"],
  [dir="rtl"] [style*="font-size: 104px"]{font-size:44px!important}
  [dir="rtl"] [style*="font-size: 80px"]{font-size:36px!important}
}
/* The in-between heading sizes used on About / Insights (96/88/72/60px).
   Matched on weight 800 too: the same sizes are also used for weight-900
   numerals ("01", "49%"), which keep their English scale. */
@media (min-width:1101px){
  [dir="rtl"] [style*="font-size: 96px"][style*="font-weight: 800"]{font-size:72px!important}
  [dir="rtl"] [style*="font-size: 88px"][style*="font-weight: 800"]{font-size:66px!important}
  [dir="rtl"] [style*="font-size: 72px"][style*="font-weight: 800"]{font-size:54px!important}
  [dir="rtl"] [style*="font-size: 60px"][style*="font-weight: 800"]{font-size:46px!important}
}
@media (min-width:701px) and (max-width:1100px){
  [dir="rtl"] [style*="font-size: 96px"][style*="font-weight: 800"]{font-size:62px!important}
  [dir="rtl"] [style*="font-size: 88px"][style*="font-weight: 800"]{font-size:58px!important}
  [dir="rtl"] [style*="font-size: 72px"][style*="font-weight: 800"]{font-size:50px!important}
  [dir="rtl"] [style*="font-size: 60px"][style*="font-weight: 800"]{font-size:44px!important}
}
@media (max-width:700px){
  [dir="rtl"] [style*="font-size: 96px"][style*="font-weight: 800"],
  [dir="rtl"] [style*="font-size: 88px"][style*="font-weight: 800"]{font-size:40px!important}
  [dir="rtl"] [style*="font-size: 72px"][style*="font-weight: 800"]{font-size:36px!important}
  [dir="rtl"] [style*="font-size: 60px"][style*="font-weight: 800"]{font-size:32px!important}
}

/* Big stat numerals ("49%", "53.5%", "69%"). The English sets them in
   Archivo at font-stretch 62% — very condensed. Changa has no condensed
   width, so the same figures run ~40% wider and, in the three-up stat
   rows, pushed past their columns between ~700 and ~1300px (clipped off
   the left edge in RTL). Scaled with the viewport instead, reaching the
   original size only where the columns are wide enough for it. */
@media (min-width:701px){
  [dir="rtl"] [style*="font-size: 120px"][style*="font-weight: 900"]{font-size:min(120px,7.4vw)!important}
  [dir="rtl"] [style*="font-size: 176px"][style*="font-weight: 900"]{font-size:min(176px,11.5vw)!important}
  /* Home's stat row uses 96px figures in a three-up grid. */
  [dir="rtl"] [style*="repeat(3"] > * > [style*="font-size: 96px"][style*="font-weight: 900"]{font-size:min(96px,7vw)!important}
}
/* Same for the 150px weight-900 display lines (Insights' featured book
   title, the closing CTA) at the narrow end of desktop, where the book
   title's longest word otherwise widens its column past the page edge. */
@media (min-width:1101px){
  [dir="rtl"] [style*="font-size: 150px"][style*="font-weight: 900"]{font-size:min(150px,10.4vw)!important}
}

/* "Why" heading underline under بعد: Changa's line box keeps extra room below
   the letters, so the line is lifted to sit just under the word (and its dot). */
[dir="rtl"] [data-r="after-mark"]{bottom:.2em}

/* Hero glow: centred on the middle column, at the top of the photo. */
@media (min-width:1101px){
  [dir="rtl"] [data-r="hero"]{--glow-x:50%;--glow-y:calc(860px - var(--ph) * .627 + 10px)}
}

/* ---------- directional icons ---------- */
/* Arrows embedded directly in translated copy (e.g. "ابحث عن موقفك ←")
   already carry the correct glyph per string — only the standalone
   decorative arrow glyph markers need a CSS mirror. */
[dir="rtl"] [data-mfx-arrow]{display:inline-block;transform:scaleX(-1)}

/* ---------- nav ---------- */
/* Arabic labels set in Cairo run wider than the English ones; at the
   narrow end of desktop (~1101-1300px) the centre nav column ran ~26px
   short and wrapped two-word labels ("تعرّف على / مهيأ") onto two lines.
   Kept on one line, with the gap between links easing down at narrow
   widths only — back to the original 36px from ~1500px up. */
[dir="rtl"] [data-navlinks]{gap:clamp(20px,2.4vw,36px)!important}
[dir="rtl"] [data-navlinks] a{white-space:nowrap}

/* ---------- generic physical-value fixes ---------- */
[dir="rtl"] [data-menu-panel] [data-theme-toggle],
[dir="rtl"] [data-menu-panel] [data-lang-toggle]{text-align:right}
[dir="rtl"] [style*="padding-right: 12px"]{padding-right:0!important;padding-left:12px!important}
/* The remaining asymmetric physical spacing in the templates and
   JS-rendered markup (audited: these are the only ones). Their grids and
   flex rows already mirror, but the physical left/right values don't, so
   each one ends up on the wrong side: */
/* "why" text column — its 60px outer margin flipped to the inner side,
   leaving the heading and body copy flush against the right page edge. */
[dir="rtl"] [style*="padding: 64px 0px 64px 60px"]{padding:64px 60px 64px 0!important}
/* situations search box — the wider padding belongs on the icon side. */
[dir="rtl"] [style*="padding: 0px 10px 0px 26px"]{padding:0 26px 0 10px!important}
/* step number before each move tag ("01 حدد الموقف") — gap belongs
   between the number and the tag, not on the number's outer edge. */
[dir="rtl"] [style*="margin-right: 14px"]{margin-right:0!important;margin-left:14px!important}

/* ---------- Home hero (desktop, >1100px) ----------
   The Arabic hero follows the English composition mirrored — ما بين over
   the start of السطور, the subtitle and its kicker directly under the
   word's end, the two questions below them in the open lower-left, and
   من يقرر / the CTA / أتحدث down the right — but laid out on a
   proportional three-column frame instead of the English design's fixed
   canvas offsets. Those offsets only held at 1440px: the portrait sat a
   fixed 510px from the right edge, so on a narrower screen it slid toward
   the left edge until the left column all but disappeared (~96px at
   1101px), which is why the lower-left text used to clip and collide.

   The frame: the portrait sits between two equal side columns, all three
   derived from the hero's own width, with outer margins and gutters that
   scale with the viewport. Each text element is placed in its column and
   centred on its own natural width, so nothing depends on a guessed
   width. Vertically, the left-column stack is spaced from the mega
   word's actual size rather than fixed tops, so the rhythm holds as
   السطور scales. Past 1440px every clamp() below has reached its max and
   the hero itself is capped and centred, so the composition simply holds.

   !important throughout: every element here carries explicit inline
   left/top/width (several also a never-active inline "right" left over
   from the design tool), which beats a plain external declaration. */
@media (min-width:1101px){
  [dir="rtl"] [data-r="hero"]{
    max-width:1440px!important;margin-inline:auto!important;
    --pad:clamp(28px,4vw,64px);
    --gap:clamp(16px,2vw,32px);
    --ph:clamp(520px,47vw,680px);
    --pw:calc(var(--ph) * .54);
    --colw:calc((100% - 2 * var(--pad) - 2 * var(--gap) - var(--pw)) / 2);
    --mega:clamp(200px,19vw,280px);
    --subFs:clamp(30px,2.9vw,42px);
    --subTop:calc(120px + var(--mega) * 1.06);
    --tagTop:calc(var(--subTop) + var(--subFs) * 2.5 + 12px);
    --q1Top:calc(var(--tagTop) + 76px);
    --q2Top:calc(var(--q1Top) + var(--subFs) * 2.4);
  }

  /* -- top: ما بين over the start of السطور -- */
  /* Tied to the mega word rather than the page edge: scaled with it
     (≈83px at full size) and placed from the word's right end (السطور is
     centred and ≈3.27× its font size wide), so it sits just above and
     beside the alif at every width instead of landing on it when the
     word shrinks. Clamped so it never runs past the page margin; ≈.78×
     the mega size is its own width. Sized to its content (two words,
     unlike the single-word "The"), with tight leading — the blanket
     Changa line-height would push it down onto the alif, and it has no
     tashkeel to make room for. */
  [dir="rtl"] [data-r="hero-the"]{
    right:auto!important;top:47px!important;
    left:min(calc(50% + var(--mega) * 1.6), calc(100% - var(--pad) - var(--mega) * .78))!important;
    font-size:calc(var(--mega) * .3)!important;
    width:auto!important;height:auto!important;white-space:nowrap!important;line-height:1!important;
  }
  /* Scales with the viewport up to the 280px it was tuned at. A single
     word with no tashkeel and no wrap, so it keeps its tight leading. */
  [dir="rtl"] [data-r="hero-mega"]{font-size:var(--mega)!important;line-height:.82!important}

  /* -- centre: portrait -- */
  /* The box is sized to the image's own aspect (367×680, ≈.54) so the
     visible portrait, not a wider empty box, is what sits between the
     columns; bottom edge held where the design has it (800px). */
  [dir="rtl"] [data-r="hero"] > [data-mfx-img]{
    right:auto!important;left:calc(var(--pad) + var(--colw) + var(--gap))!important;
    width:var(--pw)!important;height:var(--ph)!important;top:calc(800px - var(--ph))!important;
  }
  /* the hero photo (landscape, 1.5:1) sits across the centre column, its
     pair of people centred on it and clear of both side columns; width tied
     to --ph so it scales with the rest of the Arabic hero */
  [dir="rtl"] [data-r="hero"] > [data-mfx-img][data-hero-photo]{
    left:calc(var(--pad) + var(--colw) + var(--gap) + var(--pw) / 2 - var(--ph) * .94 * .475)!important;
    width:calc(var(--ph) * .94)!important;height:calc(var(--ph) * .94 / 1.5)!important;
    top:calc(860px - var(--ph) * .94 / 1.5)!important;
  }

  /* -- left column: subtitle, kicker, then the two questions -- */
  [dir="rtl"] [data-r="hero-rest"],
  [dir="rtl"] [data-r="hero-tag"],
  [dir="rtl"] [data-r="hero"] > [data-mfx-note][style*="left: 1180px"],
  [dir="rtl"] [data-r="hero"] > [data-mfx-note][style*="left: 1150px"]{
    left:var(--pad)!important;right:calc(100% - var(--pad) - var(--colw))!important;
    width:fit-content!important;max-width:var(--colw)!important;margin-inline:auto!important;
  }
  /* في العمل، / بوضوح أكبر — directly under the end of السطور, clear of
     the ر's descender. */
  [dir="rtl"] [data-r="hero-rest"]{
    top:var(--subTop)!important;height:auto!important;overflow:visible!important;
    font-size:var(--subFs)!important;line-height:1.25!important;text-align:center!important;
  }
  /* The highlighted kicker line, directly under the subtitle. Set at a
     size that stays readable in Arabic (the English 10px is tuned for
     tracked uppercase Latin). */
  [dir="rtl"] [data-r="hero-tag"]{
    top:var(--tagTop)!important;height:auto!important;
    font-size:clamp(11px,.85vw,12.5px)!important;line-height:1.5!important;padding:3px 10px!important;
    text-align:center!important;white-space:nowrap!important;
  }
  /* أصعّد الأمر…؟ then هل هذا من مسؤوليتي؟, in the open lower-left. Sized
     down with the column at narrower widths so the longer question never
     outgrows it; a little inline padding keeps the rotated glyphs inside
     the box the write-on reveal clips to. */
  [dir="rtl"] [data-r="hero"] > [data-mfx-note][style*="left: 1180px"]{
    top:var(--q1Top)!important;font-size:clamp(23px,2.1vw,30px)!important;padding-inline:.15em!important;
  }
  [dir="rtl"] [data-r="hero"] > [data-mfx-note][style*="left: 1150px"]{
    top:var(--q2Top)!important;font-size:clamp(26px,2.4vw,34px)!important;padding-inline:.15em!important;
  }

  /* -- right column: من يقرر, CTA + credit, أتحدث -- */
  /* من يقرر هذا فعليًا؟ sits inside a zero-size wrapper; stretched to the
     hero so the note can be placed against the same columns, with pointer
     events passed through so it never covers the CTA. */
  [dir="rtl"] [data-r="hero"] > div[style*="top: 138px"]{
    inset:0!important;pointer-events:none;
  }
  [dir="rtl"] [data-r="hero"] > div[style*="top: 138px"] [data-mfx-note],
  [dir="rtl"] [data-r="hero"] > [data-mfx-note][style*="left: 130px"]{
    right:var(--pad)!important;left:calc(100% - var(--pad) - var(--colw))!important;
    width:fit-content!important;max-width:var(--colw)!important;margin-inline:auto!important;
    padding-inline:.15em!important;pointer-events:auto;
  }
  /* Level with the subtitle opposite, so the two sides answer each other. */
  [dir="rtl"] [data-r="hero"] > div[style*="top: 138px"] [data-mfx-note]{
    top:var(--subTop)!important;font-size:clamp(26px,2.4vw,34px)!important;
  }
  /* Spaced from the right column's own stack (CTA + credit, which wraps
     to two lines on narrower screens), not from the left column's. */
  [dir="rtl"] [data-r="hero"] > [data-mfx-note][style*="left: 130px"]{
    top:calc(var(--subTop) + 315px)!important;font-size:clamp(25px,2.25vw,32px)!important;
  }
  /* Buttons stay flush to the column's start edge; the credit line wraps
     inside the column instead of running under the portrait when the
     column is narrower than its one-line width. */
  [dir="rtl"] [data-r="hero-cta"]{
    left:auto!important;right:var(--pad)!important;width:var(--colw)!important;top:calc(var(--subTop) + 30px)!important;
  }
  [dir="rtl"] [data-r="hero-cta"] > div[style*="top: 200px"]{
    left:auto!important;right:0!important;max-width:100%;white-space:normal!important;line-height:1.5;
  }
  /* When it does wrap, break before the link, never inside it. */
  [dir="rtl"] [data-r="hero-cta"] > div[style*="top: 200px"] a{white-space:nowrap}
  /* Buttons scale down slightly at the narrow end so the pair always fits
     the column; full original size from ~1440px up. */
  [dir="rtl"] [data-r="hero-cta"] a[href="situations.html"]{
    font-size:clamp(14px,1.18vw,17px)!important;padding:clamp(12px,1.25vw,18px) clamp(16px,1.95vw,28px)!important;
  }
  [dir="rtl"] [data-r="hero-cta"] a[href="method.html"]{
    font-size:clamp(13.5px,1.1vw,16px)!important;padding:clamp(11px,1.1vw,16px) clamp(14px,1.67vw,24px)!important;
  }
}
}
/* Below 1100px muhaya-site.css hides it (both languages). */
/* The phone-size cap muhaya-site.css puts on the English featured book
   title ("ORGANIZATION") isn't needed for «المنظمة الجريئة», which wraps
   between its two words and fits at the site's normal 72px. */
@media (max-width:700px){
  [dir="rtl"] [data-screen-label="Featured"] h2[style*="font-size: 150px"],
  [dir="rtl"] [data-screen-label="Insights"] h3[style*="font-size: 150px"]{font-size:72px!important}
}

/* ---------- handwritten notes without data-mfx-note ---------- */
/* Same Changa treatment as [data-mfx-note] above, for the Caveat accents
   that aren't write-on animated (Method header, About, Insights, Reference
   Point, the "not listed" page). Caveat has no Arabic glyphs, so without
   this they fall back to the system font. */
[dir="rtl"] [style*="Caveat"]{font-family:'Changa',sans-serif!important;font-weight:700}

/* ---------- arrows next to text ---------- */
/* "افتح ↗" on the Insights source cards is one span carrying both text and
   the arrow, so the glyph mirror above would flip the Arabic word too.
   Kept unmirrored; the hover nudge goes toward the reading direction. */
[dir="rtl"] [data-mfx-arrow="text"]{transform:none}
[dir="rtl"] [data-mfx-card]:hover [data-mfx-arrow]{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] [data-mfx-card]:hover [data-mfx-arrow="text"]{transform:translateX(-4px)}
/* About "The reasoning": the → between the rejected/surviving cards. On a
   phone the site already rotates them to point down. */
@media (min-width:701px){
  [dir="rtl"] [style*="1fr 40px 1fr"] > [aria-hidden="true"]{transform:scaleX(-1)}
}

/* ---------- About / Insights / Reference Point / Not listed ---------- */
/* About "at a glance" strip: the outer cells' flush edge and the column
   separators are physical left/right; mirrored so the first cell is
   flush with the right edge and separators sit between cells. */
[dir="rtl"] [style*="padding: 22px 20px 22px 0px"]{padding:22px 0 22px 20px!important}
[dir="rtl"] [style*="padding: 22px 0px 22px 20px"]{padding:22px 20px 22px 0!important}
[dir="rtl"] [style*="border-left: 1px solid rgba(18, 24, 38, 0.18)"]{border-left:0!important;border-right:1px solid rgba(18,24,38,.18)!important}
/* About "why" text column (same as Home's, at a different padding). */
[dir="rtl"] [style*="padding: 72px 0px 72px 60px"]{padding:72px 60px 72px 0!important}
/* "Why" section on Home and About: the portrait and the «لم يخبرني أحد»
   note are placed with physical offsets inside the portrait column. In
   English the note sits on the column's inner edge, next to the text;
   mirrored so it does the same instead of hanging off the page edge —
   held a little off that edge, as the hand-drawn ellipse around بعد
   reaches just past the end of its line. The woman in the photo faces into
   the page there, so the note sits just above her head (anchored to the
   faded top of the photo, which is 640px tall from the column's foot). */
@media (min-width:1101px){
  [dir="rtl"] [data-r="portrait"]{right:auto!important;left:24px!important}
  [dir="rtl"] [style*="top: 130px"][style*="left: 0px"]{left:auto!important;right:64px!important;top:auto!important;bottom:556px!important}
}
/* Insights "working principle" callout: the accent rule belongs on the
   reading-start side. */
[dir="rtl"] [style*="border-left: 3px solid"]{border-left:0!important;border-right:3px solid #2F68FF!important}
/* Insights statistic card: the "هذا يغيّر نظرتك للأمر" tab hangs off the
   card's top end corner. */
[dir="rtl"] [style*="right: 24px"][style*="top: -30px"]{right:auto!important;left:24px!important}
/* Reference Point bridge line «اعرف ما تستند إليه، ثم اقرأ الصورة» is
   ~1240px long at the English 84px and kept on one line above 1100px, so
   below ~1440px its ends were clipped by the section. Scaled with the
   viewport (full 84px from ~1500px up) so it always fits on one line. */
@media (min-width:701px){
  [dir="rtl"] [data-screen-label="Bridge"] [style*="Caveat"]{font-size:min(84px,5.6vw)!important}
}
/* Reference Point header: the Arabic eyebrow is intentionally empty
   (it would repeat «ما تستند إليه» from the heading); drop its box. */
[dir="rtl"] [data-screen-label="Reference header"] > div:empty{display:none}
/* Insights 02: the "96.1% ← 53.5%" range must read as one unit; Changa's
   numerals run wider than Archivo's condensed ones, so it is set a size
   down and kept on one line. */
[dir="rtl"] [data-range]{font-size:clamp(40px,3.6vw,54px)!important;white-space:nowrap}
/* Not listed: the send button keeps its label on one line («جارٍ الإرسال…»
   is wider than the English) next to the privacy note. */
[dir="rtl"] #nl-submit{white-space:nowrap;flex:none}
/* Not listed: the character counter sits at the end of the field. */
[dir="rtl"] [style*="text-align: right"]:not([data-r]){text-align:left!important}
/* Reference Point: expanded shelf content is indented to line up with the
   shelf title, past the numeral column — that column is on the right in
   Arabic. (On a phone the site removes the indent altogether.) */
@media (min-width:701px){
  [dir="rtl"] [style*="padding: 6px 0px 48px 104px"]{padding:6px 104px 48px 0!important}
  [dir="rtl"] [style*="margin: 0px 0px 48px 104px"]{margin:0 104px 48px 0!important}
}
/* ---------- Home hero (mobile, <=1100px) ----
   muhaya-site.css collapses the hero to a static flex column and hard-codes
   text-align:left for readability at that breakpoint — the RTL equivalent
   is right, not the mirrored-canvas math above (which only applies once
   absolute positioning is back, above 1100px). */
@media (max-width:1100px){
  [dir="rtl"][data-r="hero"] [data-r="hero-mega"],
  [dir="rtl"] [data-r="hero"] [data-r="hero-mega"],
  [dir="rtl"] [data-r="hero"] [data-r="hero-the"],
  [dir="rtl"] [data-r="hero"] [data-r="hero-rest"],
  [dir="rtl"] [data-r="hero"] [data-r="hero-tag"]{text-align:right!important}
  /* The English 10px is tuned for tracked uppercase Latin; Arabic needs a
     little more to stay readable on the highlight. */
  [dir="rtl"] [data-r="hero"] [data-r="hero-tag"]{font-size:12px!important}
}

/* ---------- wide screens (1441px+), Arabic ----------
   Variables come from muhaya-site.css. The Arabic hero is laid out on
   three proportional columns, so it takes the whole hero field (frame +
   its 60px margins, up to 1880px) and redistributes naturally; its type
   and portrait, which stopped growing at 1440px, grow with the same hero
   width as the English hero (up to 1600px, about +11%). */
@media (min-width:1441px){
  [dir="rtl"] [data-r="hero"]{
    max-width:var(--hero-field)!important;
    --ph:calc(680px + (var(--hero-w) - 1440px) * .4722);
    --mega:calc(280px + (var(--hero-w) - 1440px) * .1944);
    --subFs:calc(42px + (var(--hero-w) - 1440px) * .0292);
  }
  /* the dotted line keeps its drawn size and stays centred under the wider composition */
  [dir="rtl"] [data-r="hero"] > svg[width="1440"]{left:50%!important;translate:-50% 0}
}


/* Home "Behind the concept" process line: the step grid already runs right
   to left, so the path is mirrored to start (with its wave) at step ١. */
[dir="rtl"] [data-r="concept-line"] svg{transform:scaleX(-1)}
/* Method move illustrations (Home and Method cards): the cards run right to
   left, so moves 2-4 are mirrored to read the same way: Self leads in
   See Clearly, the Consider streams converge toward Act, and the Act arrow
   points forward (left). Move 1's scatter has no direction. */
[dir="rtl"] :is([data-mfx-step="2"],[data-mfx-step="3"],[data-mfx-step="4"],a[href="#move-2"],a[href="#move-3"],a[href="#move-4"]) svg{transform:scaleX(-1)}

/* Method header: «ضوضاء ← اتجاه ← وضوح ← فعل» reads as a structured sequence
   in Arabic, so it sits on one straight baseline instead of the English
   handwritten tilt. */
[dir="rtl"] [data-r="flow-note"]{transform:none!important}

/* About (calm layout): Changa for the display lines, Cairo for the rest, no
   tracking, and the leading Arabic needs. */
[dir="rtl"] :is(.ab-h1,.ab-k1,.ab-k3,.ab-q li,.ab-st1,.ab-st2,.ab-guide,.ab-outcomes,.ab-name){font-family:"Changa",sans-serif}
[dir="rtl"] [data-about] :is(.ab-label,.ab-h1,.ab-knew,.ab-q li,.ab-statement,.ab-guide,.ab-outcomes,.ab-name){letter-spacing:0}
[dir="rtl"] .ab-label{font-size:16px}
[dir="rtl"] .ab-h1{font-weight:700;font-size:72px;line-height:1.25}
[dir="rtl"] .ab-lead{line-height:1.8}
[dir="rtl"] .ab-body{line-height:1.9}
[dir="rtl"] :is(.ab-k1,.ab-k3){font-weight:700;font-size:44px;line-height:1.45}
[dir="rtl"] .ab-k2{font-size:30px;line-height:1.6;margin:0}
[dir="rtl"] .ab-q li{font-weight:600;font-size:28px;line-height:1.5}
[dir="rtl"] .ab-st1{font-weight:600;font-size:50px;line-height:1.35}
[dir="rtl"] .ab-st2{margin-top:4px;font-size:84px;line-height:1.3}
[dir="rtl"] .ab-gap{font-size:23px;line-height:1.7}
[dir="rtl"] .ab-built{line-height:1.8}
[dir="rtl"] .ab-guide{font-weight:700;font-size:46px;line-height:1.4}
[dir="rtl"] .ab-outcomes{font-weight:600;font-size:30px;line-height:1.6}
[dir="rtl"] .ab-name{font-weight:700;font-size:44px;line-height:1.3}
[dir="rtl"] [data-r="hand-circle"]>svg{left:-14%;width:128%;top:8%;height:100%}
@media (max-width:1100px){
  [dir="rtl"] .ab-h1{font-size:54px}
  [dir="rtl"] :is(.ab-k1,.ab-k3){font-size:34px}
  [dir="rtl"] .ab-k2{font-size:25px}
  [dir="rtl"] .ab-q li{font-size:26px}
  [dir="rtl"] .ab-st1{font-size:36px}
  [dir="rtl"] .ab-st2{font-size:58px}
  [dir="rtl"] .ab-guide{font-size:38px}
  [dir="rtl"] .ab-outcomes{font-size:26px}
}
@media (max-width:700px){
  [dir="rtl"] .ab-h1{font-size:38px}
  [dir="rtl"] :is(.ab-k1,.ab-k3){font-size:28px}
  [dir="rtl"] .ab-k2{font-size:21px}
  [dir="rtl"] .ab-q li{font-size:24px}
  [dir="rtl"] .ab-st1{font-size:min(27px,calc((100vw - 40px) / 10))}
  [dir="rtl"] .ab-st2{font-size:min(44px,calc((100vw - 40px) / 6.6))}
  [dir="rtl"] .ab-guide{font-size:30px}
  [dir="rtl"] .ab-outcomes{font-size:22px}
  [dir="rtl"] .ab-name{font-size:34px}
}