/* ==========================================================================
   OPERION — Arabic (RTL) layer.
   Loaded after style.css on ar.html only.
   Type: Cairo throughout — Regular for body, Bold for headings.
   ========================================================================== */

html[dir="rtl"] body{
  font-family:'Cairo','Poppins',system-ui,sans-serif;
  line-height:1.75;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .h1,html[dir="rtl"] .h2,html[dir="rtl"] .h3,
html[dir="rtl"] .btn,html[dir="rtl"] b,html[dir="rtl"] .lab,
html[dir="rtl"] .impact h5,html[dir="rtl"] .panel h4,html[dir="rtl"] .cols-3 h5,
html[dir="rtl"] .footer h6{
  font-family:'Cairo',sans-serif;
  font-weight:700;
  letter-spacing:0;
}
html[dir="rtl"] .h1{line-height:1.25}
html[dir="rtl"] .h2{line-height:1.3}
html[dir="rtl"] .h3{line-height:1.35}

/* Arabic sits optically smaller than Poppins at the same size */
html[dir="rtl"] .body{font-size:16.5px}
html[dir="rtl"] .hero .sub{font-size:21px}
html[dir="rtl"] .eyebrow{letter-spacing:0;font-size:13px;font-weight:700}
html[dir="rtl"] .live-tag,html[dir="rtl"] .mn{letter-spacing:0}
html[dir="rtl"] .mini span span,html[dir="rtl"] .sol-list span span,
html[dir="rtl"] .mod span,html[dir="rtl"] .step span,html[dir="rtl"] .rail-card span,
html[dir="rtl"] .feat span span,html[dir="rtl"] .trust span,
html[dir="rtl"] .impact span{font-size:13.8px;line-height:1.7}
html[dir="rtl"] .faq button{font-size:15.5px}
html[dir="rtl"] .faq .ans p{font-size:14.5px;line-height:1.9}
html[dir="rtl"] .checks li,html[dir="rtl"] .contact-info li{font-size:15.5px}
html[dir="rtl"] .cols-3 li{font-size:13.8px;line-height:1.7}
html[dir="rtl"] .tile .tl{font-size:13.5px}
html[dir="rtl"] .kpi .k,html[dir="rtl"] .stat-card .k,html[dir="rtl"] .stat-box .k,
html[dir="rtl"] .live-split .k,html[dir="rtl"] .mini-donuts .k{font-size:12.5px}

/* ---------- direction-flipped bits ---------- */
html[dir="rtl"] .nav-links{margin-left:0;margin-right:auto}
html[dir="rtl"] .nav-cta{margin-left:0;margin-right:24px}
html[dir="rtl"] .nav-toggle{margin-left:0;margin-right:auto}
html[dir="rtl"] .nav-links a::after{left:auto;right:0;left:100%}
html[dir="rtl"] .nav-links a:hover::after{left:0}

html[dir="rtl"] .cta .btn{margin-left:0;margin-right:auto}
html[dir="rtl"] .act .pr{margin-left:0;margin-right:auto}
html[dir="rtl"] .pill-select{margin-left:0;margin-right:auto}

html[dir="rtl"] .timeline li{padding-left:0;padding-right:20px}
html[dir="rtl"] .timeline li::before{left:auto;right:0}

html[dir="rtl"] .twin-legend i{margin-right:0;margin-left:7px}
html[dir="rtl"] .phone-list .ch{margin-left:0;margin-right:auto;transform:scaleX(-1)}
html[dir="rtl"] .chain .arw{transform:scaleX(-1)}
html[dir="rtl"] .badge{left:auto;right:22px}
html[dir="rtl"] .tile .tl{text-align:right}
html[dir="rtl"] .hero p.body{max-width:430px}

/* Latin strings inside Arabic text keep their own direction */
html[dir="rtl"] .ltr{direction:ltr;unicode-bidi:embed;display:inline-block}

@media (max-width:1080px){
  html[dir="rtl"] .nav-links,html[dir="rtl"] .nav-cta{margin-right:0}
}

/* hero key visual mirrors to the left edge */
@media (min-width:901px){
  html[dir="rtl"] .hero > .wrap{
    background-image:
      linear-gradient(270deg,#fff 0%,rgba(255,255,255,.95) 26%,
                      rgba(255,255,255,.42) 56%,rgba(255,255,255,.06) 82%),
      url('../img/hero_kv.jpg');
    background-position:center,left center;
  }
}
@media (min-width:1181px){
  html[dir="rtl"] .hero .live-card{grid-column:3/4}
}
@media (max-width:1180px) and (min-width:901px){
  html[dir="rtl"] .hero > .wrap{background-position:center,28% center}
  html[dir="rtl"] .hero .live-card{grid-column:2/3}
}