/* ==========================================================================
   MŌ — ARABIC / RIGHT-TO-LEFT LAYER                            assets/rtl.css
   Loaded AFTER style.css on every /ar/ page. Same brand, same components —
   this file only (1) swaps the type system for Arabic and (2) mirrors what
   is direction-sensitive.

   Arabic rules of thumb baked in below:
     • never letter-space Arabic (it breaks the joins)        → letter-spacing:0
     • no capitals in Arabic                                  → text-transform:none
     • taller line-height (marks above/below the line)        → 1.25–1.9
     • lighter weights read better than 900 in Arabic         → 700–800
   ========================================================================== */

/* ---- 1. Arabic type system --------------------------------------------- */

/* THE ARABIC BRAND FONT — GE SS (Two / Dinar / Text) family.
   It is a licensed font, so the files are not bundled. Drop them into assets/fonts/ with these names and they are used
   automatically (they are also picked up when installed on the visitor's device):
       ge-ss-dinar-light.woff2   (300–400)
       ge-ss-dinar-medium.woff2  (500–600)
       ge-ss-dinar-bold.woff2    (700–900)
   Until then the page uses Tajawal (a clean, geometric Arabic sans, loaded from Google Fonts), then the best system Arabic font. */
@font-face{font-family:"Arabic Brand";font-weight:300 400;font-display:swap;
  src:local("GE SS Two Light"),local("GE SS Two"),local("GE SS Text Light"),local("GE SS Text"),local("GE Dinar One Light"),local("GE Dinar One"),
      url("fonts/ge-ss-dinar-light.woff2") format("woff2"),url("fonts/ge-ss-dinar-light.otf") format("opentype"),url("fonts/ge-ss-dinar-light.ttf") format("truetype")}
@font-face{font-family:"Arabic Brand";font-weight:500 600;font-display:swap;
  src:local("GE SS Two Medium"),local("GE SS Text Medium"),local("GE Dinar One Medium"),
      url("fonts/ge-ss-dinar-medium.woff2") format("woff2"),url("fonts/ge-ss-dinar-medium.otf") format("opentype"),url("fonts/ge-ss-dinar-medium.ttf") format("truetype")}
@font-face{font-family:"Arabic Brand";font-weight:700 900;font-display:swap;
  src:local("GE SS Two Bold"),local("GE SS Text Bold"),local("GE Dinar One Bold"),
      url("fonts/ge-ss-dinar-bold.woff2") format("woff2"),url("fonts/ge-ss-dinar-bold.otf") format("opentype"),url("fonts/ge-ss-dinar-bold.ttf") format("truetype")}

html[lang="ar"]{
  --font-sans:"Arabic Brand","Tajawal","Dubai","SF Arabic","Segoe UI","Noto Sans Arabic","Geeza Pro","Tahoma","Arial",sans-serif;
  --font-accent:var(--font-sans);

  --fs-body:1.125rem;
  --fs-label:.875rem;
  --fs-lead:clamp(1.2rem,1.7vw,1.55rem);
  --fs-hero:clamp(2.3rem,7.4vw,7.2rem);
  --fs-xl:clamp(2.1rem,4.6vw,4.8rem);
  --fs-l:clamp(1.9rem,3.7vw,3.7rem);
  --fs-title:clamp(2rem,3.6vw,3.5rem);
  --fs-m:clamp(1.5rem,2.7vw,2.7rem);
}
html[lang="ar"] body{line-height:1.85}
html[lang="ar"] body{font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1}
/* names that stay in English (The Roots Method™, Mō…) keep the brand's Latin typeface */
html[lang="ar"] [lang="en"],html[lang="ar"] .lat{font-family:"Avenir Mo","Avenir Next","Avenir","Nunito Sans","Montserrat","Helvetica Neue",Arial,sans-serif}
html[lang="ar"] *,html[lang="ar"] *::before,html[lang="ar"] *::after{letter-spacing:0!important;text-transform:none!important}
html[lang="ar"] :is(h1,h2,h3,.display){font-weight:800;line-height:1.3;text-wrap:balance}
html[lang="ar"] .label,html[lang="ar"] .eyebrow,html[lang="ar"] .btn,html[lang="ar"] .link{font-weight:700}
html[lang="ar"] .hero__title{line-height:1.22}
html[lang="ar"] .hero__title .line{padding-block:.06em .12em}
html[lang="ar"] .hero__desc{font-weight:500;line-height:1.7}

/* ---- 2. Mirroring: shared components ------------------------------------ */
[dir="rtl"] .skip{left:auto;right:16px}
[dir="rtl"] .dot{margin-left:0;margin-right:.035em}
[dir="rtl"] .arrow{transform:scaleX(-1)}                                    /* arrows point left */
[dir="rtl"] .btn:hover .arrow,[dir="rtl"] .btn:focus-visible .arrow,
[dir="rtl"] .link:hover .arrow,[dir="rtl"] .link:focus-visible .arrow{transform:scaleX(-1) translateX(9px)}

[dir="rtl"] .nav__links a::after{transform-origin:right}
[dir="rtl"] .nav__toggle{margin-left:0;margin-inline-start:auto}
[dir="rtl"] .nav__lang ~ .nav__toggle{margin-inline-start:-18px}
@media (max-width:900px){
  html[lang="ar"] .nav__links a{font-weight:800;line-height:1.35}
}

[dir="rtl"] .footer__social .arrow{transform:scaleX(-1) rotate(-45deg)}
[dir="rtl"] .footer__social a:hover .arrow,[dir="rtl"] .footer__social a:focus-visible .arrow{transform:scaleX(-1) rotate(-45deg) translateX(3px)}

/* ---- 3. HOME ------------------------------------------------------------ */
/* logo strip: label on the right, logos drift on the left */
[dir="rtl"] .proof__inner{padding-left:0;padding-right:var(--gutter)}
[dir="rtl"] .proof__label{padding-right:0;padding-left:clamp(20px,2.6vw,40px);border-right:0;border-left:1px solid var(--line-ink)}
[dir="rtl"] .proof__marquee{direction:ltr}                                    /* the drifting track keeps its own logic */
@media (max-width:700px){
  [dir="rtl"] .proof__inner{padding-right:0}
  [dir="rtl"] .proof__label{padding:0 var(--gutter);border-left:0}
}

/* paths */
[dir="rtl"] .path:hover .path__name,[dir="rtl"] .path:focus-within .path__name{transform:translateX(-14px)}
html[lang="ar"] .path__name{line-height:1.25}
html[lang="ar"] .path__line{line-height:1.6}
html[lang="ar"] .path__desc{line-height:1.8}

/* testimonials */
[dir="rtl"] .voices__row{direction:ltr}                                      /* track keeps its own direction… */
[dir="rtl"] .tcard{direction:rtl}                                            /* …the cards read right-to-left */
[dir="rtl"] .tcard mark{background-position:100% 100%}
[dir="rtl"] .voices__count{direction:ltr}
html[lang="ar"] .tcard__quote{font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.85}
html[lang="ar"] .tcard__tr{font-size:.9375rem;line-height:1.6}
html[lang="ar"] .tcard__tr[lang="en"]{direction:ltr;text-align:left}
html[lang="ar"] .tcard__tr small{font-size:.8125rem;font-weight:700;direction:rtl;text-align:right}
html[lang="ar"] .tcard__who strong{font-size:.9375rem;font-weight:700}
html[lang="ar"] .voices__toggle{font-size:.875rem;font-weight:700}

/* the Mō way */
[dir="rtl"] .moway__disc{right:auto;left:-17vw}
[dir="rtl"] .moway__body{border-left:0;padding-left:0;border-right:1px solid var(--line-light);padding-right:clamp(24px,3.4vw,56px)}
[dir="rtl"] .moway__cta{padding-left:0;padding-right:clamp(24px,3.4vw,56px)}
html[lang="ar"] .moway__close{font-weight:400;line-height:1.9;font-size:clamp(1.15rem,1.9vw,1.75rem)}
html[lang="ar"] .moway__statement{line-height:1.3}
html[lang="ar"] .moway__body p{line-height:1.85}
@media (max-width:900px){
  [dir="rtl"] .moway__body{border-right:0;border-top:1px solid var(--line-light);padding-right:0;padding-top:28px}
  [dir="rtl"] .moway__cta{padding-right:0}
  [dir="rtl"] .moway__disc{left:-50vw;right:auto}
}

/* roots teaser */
[dir="rtl"] .roots__why{text-align:left;margin-right:0;margin-left:-.03em}
html[lang="ar"] .roots__why{font-size:clamp(5rem,26vw,24rem);line-height:1.1;font-weight:800;padding-bottom:0}
html[lang="ar"] .roots__list li{font-weight:700;line-height:1.5}

/* meet Mō */
html[lang="ar"] .meet__title{line-height:1.2}
html[lang="ar"] .meet__intro{line-height:1.8}

/* closer */
[dir="rtl"] .closer__ring{right:auto;left:-20vw}
html[lang="ar"] .closer__title{line-height:1.3;font-size:clamp(2.3rem,6.6vw,7rem)}
html[lang="ar"] .closer__text{line-height:1.85}
@media (max-width:900px){
  [dir="rtl"] .closer__ring{left:-70vw;right:auto}
}

/* small phones: primary buttons full-width, arrows still on the reading-end side */
@media (max-width:520px){
  html[lang="ar"] .hero__cta .btn{justify-content:space-between}
}


/* ==========================================================================
   4. THE OTHER PAGES — mirrors
   ========================================================================== */

/* ---- ABOUT --------------------------------------------------------------- */
[dir="rtl"] .about-hero__figure{right:auto;left:0}
[dir="rtl"] .about-hero__figure img{transform:scaleX(-1);object-position:70% 20%}              /* he still faces the headline */
[dir="rtl"] .about-hero__figure::after{
  background:
    linear-gradient(270deg, var(--night) 0%, rgba(5,4,9,.55) 8%, rgba(5,4,9,0) 25%),
    linear-gradient(180deg, var(--night) 0%, rgba(5,4,9,0) 14%),
    linear-gradient(0deg, var(--night) 0%, rgba(5,4,9,0) 10%);
}
[dir="rtl"] .cred__seal{direction:ltr}
[dir="rtl"] .cred__seal text{font-family:"Avenir Mo","Avenir Next","Avenir","Nunito Sans","Montserrat","Helvetica Neue",Arial,sans-serif}                                                   /* the ring text runs clockwise along its path */
html[lang="ar"] .credrow__big{font-size:clamp(1.9rem,3.6vw,3.6rem);font-weight:800;line-height:1.25}
html[lang="ar"] .creds__lead{font-weight:800;line-height:1.3}
html[lang="ar"] .creds__lead mark{background-position:100% 96%}
html[lang="ar"] .credrow__title{line-height:1.35}
[dir="rtl"] .step__walker{left:auto;right:clamp(14px,1.6vw,26px);transform:scaleX(-1)}
[dir="rtl"] .stage:nth-child(odd) .stage__body{text-align:start;padding-right:0;padding-left:clamp(16px,3vw,52px)}
[dir="rtl"] .stage:nth-child(even) .stage__body{padding-left:0;padding-right:clamp(16px,3vw,52px)}
[dir="rtl"] .stage--final .stage__body{margin-left:0;margin-right:clamp(16px,3vw,52px)}
@media (max-width:1000px){
  [dir="rtl"] .about-hero__figure{left:auto}
  [dir="rtl"] .about-hero__figure::after{background:linear-gradient(180deg, var(--night) 0%, rgba(5,4,9,.6) 16%, rgba(5,4,9,0) 34%)}
  [dir="rtl"] .stage::before{left:auto;right:28px}
  [dir="rtl"] .stage:nth-child(odd) .stage__body,[dir="rtl"] .stage:nth-child(even) .stage__body{text-align:start;padding:0}
  [dir="rtl"] .stage--final .stage__body{margin-right:0}
}

/* ---- BUSINESS ------------------------------------------------------------ */
[dir="rtl"] .strike{background-position:100% 58%}                                      /* the old way is crossed out right→left */
[dir="rtl"] .loop{margin-left:0;margin-right:.5em}
[dir="rtl"] .lens__ring::after{left:14.6%;transform:translateY(-50%) rotate(135deg)}    /* magnifier handle points toward the page centre */
[dir="rtl"] .builder__preview{padding:6px 16px 6px 0;border-left:0;border-right:3px solid var(--blue)}
[dir="rtl"] .cta-pill{right:auto;left:clamp(16px,2vw,28px)}
@media (max-width:560px){[dir="rtl"] .cta-pill{left:16px;right:16px}}

/* ---- PEOPLE -------------------------------------------------------------- */
[dir="rtl"] .ripples{right:auto;left:-8vw}
[dir="rtl"] .pq__feel li:nth-child(even){padding-left:0;padding-right:clamp(14px,3.4vw,52px)}
[dir="rtl"] .pq__feel .pq__echo{padding-right:0}
[dir="rtl"] .grow li:not(:last-child) .grow__word::after{transform:scaleX(-1)}
[dir="rtl"] .pfinal__sun{right:auto;left:-14vw}
@media (max-width:1000px){[dir="rtl"] .ripples{left:-40vw;right:auto}}

/* ---- ON STAGE ------------------------------------------------------------ */
[dir="rtl"] .vid-toggle{right:auto;left:var(--gutter)}
[dir="rtl"] .showrow:hover .showrow__title,[dir="rtl"] .showrow:focus-within .showrow__title{transform:translateX(-14px)}
[dir="rtl"] .topics__marquee{direction:ltr}
[dir="rtl"] .topics__list li{direction:rtl}
html[lang="ar"] .topics__list li:nth-child(even){color:rgba(255,255,255,.55);-webkit-text-stroke:0}   /* outlined Arabic shows its joins — use a quiet tone instead */
[dir="rtl"] .progress__bar i{inset:0 0 0 auto}
[dir="rtl"] input[type="date"],[dir="rtl"] [name="contact-reach"]{direction:ltr;text-align:right}
html[lang="ar"] .stage-hero__not{font-weight:700}

/* ---- ROOTS METHOD -------------------------------------------------------- */
[dir="rtl"] .roots-svg--hero{transform:scaleX(-1)}                                     /* roots grow on the side away from the headline */
[dir="rtl"] .steps4{padding-left:0;padding-right:clamp(44px,5.4vw,84px)}
[dir="rtl"] .steps4::before,[dir="rtl"] .steps4::after{left:auto;right:6px}
[dir="rtl"] .step4__node{left:auto;right:calc(-1 * clamp(44px,5.4vw,84px))}
[dir="rtl"] .lensx__who li:hover{padding-left:0;padding-right:14px}
html[lang="ar"] .lensx__not{color:rgba(39,37,40,.34);-webkit-text-stroke:0}
[dir="rtl"] .branch::before{left:auto;right:0}
[dir="rtl"] .branch::after{left:auto;right:-6px}
[dir="rtl"] .tm{margin-left:0;margin-right:.05em}
[dir="rtl"] .belief__mark{right:auto;left:-5vw}
@media (max-width:1000px){
  [dir="rtl"] .branches{padding-left:0;padding-right:30px}
  [dir="rtl"] .branches::before{left:auto;right:6px}
  [dir="rtl"] .branch::after{left:auto;right:-30px}
}

/* ---- PRESS & APPEARANCES (Home) ------------------------------------------ */
[dir="rtl"] .press__marquee{direction:ltr}                 /* the track keeps its own scroll logic… */
[dir="rtl"] .pcard{direction:rtl}                           /* …the caption on each card reads right-to-left */

/* ---- CONTACT ------------------------------------------------------------- */
[dir="rtl"] .ct-dial__num small{margin-left:0;margin-right:.06em}
[dir="rtl"] .crow:hover .arrow,[dir="rtl"] .crow:focus-visible .arrow{transform:scaleX(-1) translateX(9px)}
[dir="rtl"] .crow__value[dir="ltr"]{text-align:right}

/* ---- auto: display styles with tight line-heights get room for Arabic marks ---- */
html[lang="ar"] .about-close__title,
html[lang="ar"] .about-hero__name,
html[lang="ar"] .about-hero__title,
html[lang="ar"] .belief__lines p,
html[lang="ar"] .biz-hero__start,
html[lang="ar"] .biz-hero__stop,
html[lang="ar"] .branch__title,
html[lang="ar"] .closer__title,
html[lang="ar"] .cred__title,
html[lang="ar"] .ct-hero__title,
html[lang="ar"] .ct-where__city,
html[lang="ar"] .ground__question,
html[lang="ar"] .hero__title,
html[lang="ar"] .idea__because,
html[lang="ar"] .idea__list li,
html[lang="ar"] .lens__why,
html[lang="ar"] .lensx__behind,
html[lang="ar"] .lensx__who li,
html[lang="ar"] .lensx__why,
html[lang="ar"] .pfinal__soft,
html[lang="ar"] .pfinal__why,
html[lang="ar"] .poffer__title,
html[lang="ar"] .ppl-hero__title,
html[lang="ar"] .pq__begin,
html[lang="ar"] .pq__feel li,
html[lang="ar"] .pwork__grid h3,
html[lang="ar"] .rm-final__title,
html[lang="ar"] .rm-hero__own,
html[lang="ar"] .rm-hero__title,
html[lang="ar"] .roots__list li,
html[lang="ar"] .roots__why,
html[lang="ar"] .sig-tile__text,
html[lang="ar"] .stage-close__title,
html[lang="ar"] .stage-hero__not,
html[lang="ar"] .stage-hero__title,
html[lang="ar"] .stage__title,
html[lang="ar"] .step4__word,
html[lang="ar"] .step__title,
html[lang="ar"] .symptoms li,
html[lang="ar"] .talk__say,
html[lang="ar"] .topics__list li,
html[lang="ar"] .work__grid h3{line-height:1.32}