/* ============================================================
   TRIPLVI — Arabic / RTL layer  (rtl.css)  v1.0
   Loaded ONLY on Arabic pages (html[lang="ar"][dir="rtl"]).
   Mirrors the LTR design to RTL and swaps to an Arabic typeface,
   without touching the base stylesheets. Latin brand marks
   (TRIPLVI wordmark, Roman numerals) stay LTR by design.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

/* ---------- Typography ---------- */
html[dir="rtl"]{ --sans: 'Tajawal','Archivo','Helvetica Neue',Arial,sans-serif; }
html[dir="rtl"] body{ direction:rtl; text-align:right; font-family:var(--sans); }

/* Arabic runs a touch larger visually — nudge line-height for readability */
html[dir="rtl"] .lede,
html[dir="rtl"] .svc-desc,
html[dir="rtl"] p{ line-height:1.85; }
html[dir="rtl"] .hero-h1{ line-height:1.12; }

/* Keep Latin brand marks & numerals left-to-right */
html[dir="rtl"] .logo,
html[dir="rtl"] .f2-brand-name,
html[dir="rtl"] .f2-wordmark,
html[dir="rtl"] .lang-label,
html[dir="rtl"] .svc-rn,
html[dir="rtl"] .eco-node-dot,
html[dir="rtl"] .ind-n,
html[dir="rtl"] .pkg-card .wm,
html[dir="rtl"] .work-idx,
html[dir="rtl"] .wm,
html[dir="rtl"] .num,
html[dir="rtl"] .cta-label,
html[dir="rtl"] .marq-item,
html[dir="rtl"] time,
html[dir="rtl"] .f2-mail,
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"]{ direction:ltr; unicode-bidi:isolate; }

/* ---------- NAV (absolute side clusters swap) ---------- */
html[dir="rtl"] .nav-left{ left:auto; right:var(--pad); }
html[dir="rtl"] .nav-right{ right:auto; left:var(--pad); }
html[dir="rtl"] .lang-menu{ left:auto; right:0; text-align:right; }
html[dir="rtl"] .lang-menu button{ text-align:right; }
html[dir="rtl"] .nav-drawer a{ flex-direction:row; text-align:right; }

/* nav underline sweep */
html[dir="rtl"] .nav-links a::after{ left:auto; right:0; }

/* ---------- HERO ---------- */
html[dir="rtl"] .hero-glow{ right:auto; left:-10%; }
html[dir="rtl"] .hero-photo,
html[dir="rtl"] .home-hero-photo{ right:auto; left:0; }
html[dir="rtl"] .hero-scroll{ right:auto; left:var(--pad); }
html[dir="rtl"] .hero-inner{ text-align:right; }

/* ---------- MARQUEE (reverse travel) ---------- */
html[dir="rtl"] .marq-track{ animation-name:marq-rtl; padding-right:0; padding-left:34px; }
@keyframes marq-rtl{ to{ transform:translateX(50%); } }

/* ---------- ECO / process nodes ---------- */
html[dir="rtl"] .eco-node{ border-right:none; border-left:1px solid var(--line-soft); }
html[dir="rtl"] .eco-node:last-child{ border-left:none; }

/* ---------- SERVICES (home accordion + spine) ---------- */
html[dir="rtl"] .svc-short{ text-align:left; }
html[dir="rtl"] .svc-row:hover .svc-bar,
html[dir="rtl"] .svc-row.open .svc-bar{ padding-left:0; padding-right:22px; }
html[dir="rtl"] .svc-toggle::before{ left:auto; right:0; }
html[dir="rtl"] .svc-toggle::after{ left:auto; right:7px; }

html[dir="rtl"] .spine::before{ left:auto; right:25px; }
html[dir="rtl"] .spine-row:hover .spine-go{ transform:translateX(-6px); }
html[dir="rtl"] .svc-fig .cap{ left:auto; right:0; border-right:none; border-left:1px solid var(--line); }
html[dir="rtl"] .svc-ph .label{ left:auto; right:18px; }
@media (min-width:781px){ html[dir="rtl"] .spine::before{ right:19px; left:auto; } }

/* ---------- SELECTED WORK / cards ---------- */
html[dir="rtl"] .work-toggle{ right:auto; left:18px; }
html[dir="rtl"] .work-result b{ margin-right:0; margin-left:8px; }
html[dir="rtl"] .work-idx{ left:auto; right:16px; }
html[dir="rtl"] .work-count{ text-align:left; }
html[dir="rtl"] .work-card:hover .work-more{ transform:translateX(-4px); }
html[dir="rtl"] .work-next:hover span{ transform:translateX(-6px); }

/* ---------- INDUSTRIES index wall ---------- */
html[dir="rtl"] .ind-item::before{ left:auto; right:0; }
html[dir="rtl"] a.ind-item:hover .ind-n{ transform:translateX(-2px); }

/* ---------- PACKAGES / pricing ---------- */
html[dir="rtl"] .pkg-card .wm{ right:auto; left:6px; }
html[dir="rtl"] .pkg-badge{ right:auto; left:18px; }
html[dir="rtl"] .pkg-stat + .pkg-stat{ border-left:none; border-right:1px solid var(--line); }
html[dir="rtl"] .pkg-list li{ padding-left:0; padding-right:20px; }
html[dir="rtl"] .pkg-list li::before{ left:auto; right:0; }
html[dir="rtl"] .stat-cell + .stat-cell{ border-left:none; border-right:1px solid var(--line); }
@media (max-width:640px){
  html[dir="rtl"] .stat-band .stat-cell:nth-child(even){ border-left:none; border-right:1px solid var(--line); }
}

/* ---------- COMPARISON TABLE ---------- */
html[dir="rtl"] .cmp td:first-child,
html[dir="rtl"] .cmp th:first-child{ text-align:right; }

/* ---------- PULL QUOTE ---------- */
html[dir="rtl"] .pull-quote{ border-left:none; border-right:2px solid var(--crimson); padding:6px 26px 6px 0; }

/* ---------- FAQ ---------- */
html[dir="rtl"] .faq-q{ text-align:right; }

/* ---------- INSIGHTS / articles ---------- */
html[dir="rtl"] .art-body,
html[dir="rtl"] .art-meta{ text-align:right; }

/* ---------- FOOTER ---------- */
html[dir="rtl"] .f2-top > div[style*="text-align:right"]{ text-align:left !important; }
html[dir="rtl"] .f2-social{ justify-content:flex-start; }
html[dir="rtl"] .f2-col a:hover{ padding-left:0; padding-right:6px; }
html[dir="rtl"] .f2-glow,
html[dir="rtl"] .f2::after{ right:auto; left:-15%; }
html[dir="rtl"] .f2-legal{ flex-direction:row; }

/* ---------- FORM ---------- */
html[dir="rtl"] .field label,
html[dir="rtl"] .form input,
html[dir="rtl"] .form textarea,
html[dir="rtl"] .form select,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select{ text-align:right; direction:rtl; }

/* ---------- ARROWS (mirror the → glyph wrappers) ---------- */
html[dir="rtl"] .btn-arrow,
html[dir="rtl"] .ind-go{ display:inline-block; transform:scaleX(-1); }

/* ---------- MOBILE refinements ---------- */
@media (max-width:820px){
  html[dir="rtl"] .nav-drawer a{ text-align:right; }
  html[dir="rtl"] .hero-inner{ text-align:right; }
}