/* ArrowTech — Arabic (RTL) layer.
   Layout direction is handled by logical properties in site.css; this file only
   covers Arabic typography and the few visuals that must be mirrored. */

/* Typography: system Arabic faces first (no external font requests). */
html[dir="rtl"]{--font:"SF Arabic","Geeza Pro","Segoe UI","Noto Sans Arabic","Noto Kufi Arabic",Tahoma,Arial,sans-serif}
html[dir="rtl"] body{line-height:1.85;letter-spacing:0}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{letter-spacing:0;line-height:1.35}
html[dir="rtl"] h1{line-height:1.25}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .label,html[dir="rtl"] .mega-title,html[dir="rtl"] .facts dt,
html[dir="rtl"] .hero-card dt,html[dir="rtl"] .contact-details dt,html[dir="rtl"] .footer-col h2{letter-spacing:0;text-transform:none;font-size:.8125rem}
html[dir="rtl"] .lede{line-height:1.9}
html[dir="rtl"] .hero h1{max-width:18ch}

/* Latin fragments (tech names, phone numbers) keep their own direction. */
html[dir="rtl"] .chips li,html[dir="rtl"] [dir="ltr"]{unicode-bidi:isolate}

/* Mirror directional visuals. */
html[dir="rtl"] .btn .arrow,html[dir="rtl"] .text-link .arrow{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .arrow,html[dir="rtl"] .text-link:hover .arrow{transform:translateX(-3px) scaleX(-1)}
html[dir="rtl"] .hero::before{background:linear-gradient(270deg,rgba(4,18,42,.96) 0%,rgba(7,27,53,.9) 38%,rgba(7,27,53,.55) 66%,rgba(7,27,53,.2) 100%),linear-gradient(0deg,rgba(4,18,42,.55),transparent 40%)}
html[dir="rtl"] .hero-media img{transform-origin:left center}

/* Logo strip scrolls the same way in both languages. */
html[dir="rtl"] .marquee-track{direction:ltr}

/* Steps counter uses Arabic-Indic digits without the leading zero. */
html[dir="rtl"] .steps li::before{content:counter(step,arabic-indic)}
html[dir="rtl"] .steps li::after{inset-inline-start:30px}

/* Portrait screenshots inside landscape card frames. */
.case-media--portrait{background:linear-gradient(160deg,var(--blue-50),var(--blue-100))}
.case-media--portrait img{object-fit:contain;padding:14px 0}
/* Arabic overview pages keep the visitor in the Arabic journey. */
.en-flag{display:none}

html[dir="rtl"] .page-hero .wrap{max-width:var(--wrap)}
html[dir="rtl"] .contact-details dd{overflow-wrap:anywhere}