/* Nasim Chemical, Arabic (right to left). Loaded after site.css on /ar/ only. */

/* ---------- type: Latin fonts first so DOP, PVC and numbers keep the English look; Arabic falls through ---------- */
[dir="rtl"]{
  --f-display:"Archivo", "Noto Kufi Arabic", "Arial Narrow", system-ui, sans-serif;
  --f-body:"Instrument Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  /* Arabic first here: a monospace space between Arabic words reads as a gap */
  --f-mono:"IBM Plex Sans Arabic", "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
/* formulas, CAS numbers and step numbers keep the technical monospace */
[dir="rtl"] .p-formula,[dir="rtl"] .node-no,[dir="rtl"] .formulas span,[dir="rtl"] .mono[dir="ltr"],[dir="rtl"] .mono [dir="ltr"],[dir="rtl"] .chips li[dir="ltr"],[dir="rtl"] .prop-no,[dir="rtl"] .spot-no,[dir="rtl"] .spot-list .mono{font-family:"IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace}
/* Arabic letters join, so tracking breaks words apart */
[dir="rtl"] *{letter-spacing:0!important}
[dir="rtl"] body{line-height:1.75}
[dir="rtl"] .b-title{line-height:1.32}
[dir="rtl"] .b-hero{max-width:15ch}
[dir="rtl"] .b-mid{line-height:1.35}
[dir="rtl"] .b-settle{line-height:1.32}
[dir="rtl"] .h2{line-height:1.3}
[dir="rtl"] .static-title{line-height:1.3}
[dir="rtl"] .body,[dir="rtl"] .faq details p,[dir="rtl"] .p-uses{line-height:1.8}
[dir="rtl"] .brand-name{line-height:1.25}
[dir="rtl"] .brand-text{gap:1px}
[dir="rtl"] .brand-sub{font-size:.7rem}
[dir="rtl"] .pill,[dir="rtl"] .chips li,[dir="rtl"] .step,[dir="rtl"] .kicker{font-size:.84rem}
[dir="rtl"] .static-copy .pill{font-size:.74rem}
[dir="rtl"] .mol-tag{font-size:.8rem}
[dir="rtl"] .seg text{font-size:13.5px}
[dir="rtl"] .p-name,[dir="rtl"] .p-role,[dir="rtl"] .fact dt,[dir="rtl"] .direct .mono,[dir="rtl"] .foot-h,[dir="rtl"] .foot-tag{font-size:.82rem}
[dir="rtl"] .p-uses .mono,[dir="rtl"] .soon-badge{font-size:.78rem}
[dir="rtl"] .wheel-title{font-size:23px}

/* ---------- nav ---------- */
[dir="rtl"] .brand{margin-right:0;margin-left:auto}
[dir="rtl"] .skip{left:auto;right:16px}

/* ---------- hero: the photo, scrim, words and molecule all mirror ---------- */
[dir="rtl"] .media{background-image:url(img/hero-1920-rtl.jpg);background-position:38% top;transform-origin:28% 58%}
@media (max-width:1280px){[dir="rtl"] .media{background-image:url(img/hero-1280-rtl.jpg)}}
[dir="rtl"] .scrim{background:linear-gradient(270deg,rgba(5,10,18,.72) 0,rgba(5,10,18,.42) 36%,rgba(5,10,18,0) 62%),radial-gradient(ellipse 120% 90% at 40% 45%,rgba(6,10,18,0) 40%,rgba(6,10,18,.6) 100%),linear-gradient(180deg,rgba(6,12,20,.6) 0,rgba(6,12,20,0) 18%)}
[dir="rtl"] .band-l{left:auto;right:clamp(20px,6vw,104px)}
[dir="rtl"] .band-l::before{left:-6%;right:-34%}
[dir="rtl"] .band-settle::before{background:radial-gradient(ellipse 58% 56% at 54% 52%,rgba(5,8,14,.84) 0%,rgba(5,8,14,.66) 50%,rgba(5,8,14,0) 80%)}
[dir="rtl"] .molecule-wrap{right:auto;left:3vw}
/* whole words scatter in Arabic (see splitBand) */
[dir="rtl"] .fx-scatter .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}

/* static hero gates, same five as site.css */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  [dir="rtl"] .media{background-position:38% 30%}
  [dir="rtl"] .scrim{background:linear-gradient(180deg,rgba(6,12,20,.55) 0,rgba(6,12,20,0) 22%,rgba(6,12,20,.2) 42%,rgba(6,12,20,.9) 72%,rgba(10,21,32,1) 100%)}
  [dir="rtl"] .molecule-wrap{left:0;right:0}
  [dir="rtl"] .static-title{line-height:1.3}
}
@media (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse){
  [dir="rtl"] .media{background-image:url(img/hero-portrait-rtl.jpg)}
}

/* ---------- stations: the process line runs down the right edge ---------- */
[dir="rtl"] .stations .wrap{padding-left:var(--pad);padding-right:calc(var(--pad) + 40px)}
[dir="rtl"] .node-no{margin-right:0;margin-left:.7em}

[dir="rtl"] .soon-badge{left:auto;right:14px}
[dir="rtl"] .p-link:hover span{transform:translateX(-4px)}
[dir="rtl"] .prop-detail{border-left:1px solid var(--line);border-right:3px solid var(--prop-c,var(--process))}
[dir="rtl"] .supply-img figcaption{left:auto;right:14px}

[dir="rtl"] .fact{padding:26px 0 0 22px}
[dir="rtl"] .fact + .fact{padding-right:22px;border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .fact .unit{margin-left:0;margin-right:.2em}
/* numbers that read left to right keep their order and sit at the start of the cell */
[dir="rtl"] .fact dd[dir="ltr"]{justify-content:flex-end}
[dir="rtl"] .fact dd[dir="ltr"] .unit{margin-right:0;margin-left:.2em}

[dir="rtl"] .hold{padding:8px 10px 8px 26px}
[dir="rtl"] .spot-card{border-left:1px solid var(--line);border-right:3px solid var(--accent)}
[dir="rtl"] .spot-list button{text-align:right}

/* the marquee loop is built left to right; only the words inside read right to left, and it runs the other way */
[dir="rtl"] .marquee{direction:ltr}
[dir="rtl"] .mq-track span{direction:rtl}
[dir="rtl"] .mq-track span::after{margin-left:0;margin-right:56px}
[dir="rtl"] .live .mq-track{animation-direction:reverse}
[dir="rtl"] .live .mq-rev{animation-direction:normal}

[dir="rtl"] .direct .mono{width:118px}
[dir="rtl"] .foot-ar{text-align:right}
[dir="rtl"] .f select{padding-right:14px;padding-left:40px;background-position:left 14px center}
[dir="rtl"] .f input[type="email"],[dir="rtl"] .f input[type="tel"]{direction:ltr;text-align:right}

@media (max-width:860px){
  [dir="rtl"] .fact:nth-child(3){padding-right:0;border-right:0}
}
@media (max-width:640px){
  [dir="rtl"] .stations .wrap{padding-left:var(--pad);padding-right:calc(var(--pad) + 22px)}
  [dir="rtl"] .fact{padding-right:0;padding-left:12px}
  [dir="rtl"] .fact + .fact{padding-right:12px}
  /* "مليون دولار" is longer than "M": let the unit drop under the number on narrow phones */
  [dir="rtl"] .fact dd{flex-wrap:wrap;row-gap:6px}
  [dir="rtl"] .direct .mono{width:96px}
}
@media (prefers-reduced-motion: reduce){
  [dir="rtl"] .fx-scatter .w{opacity:1;transform:none}
}