@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');
html[dir="rtl"] body,body.rtl{font-family:"Cairo",var(--font-body)}
body.rtl h1,body.rtl h2,body.rtl h3,body.rtl h4,body.rtl .nav-brand,body.rtl .foot-brand,body.rtl .stat b,body.rtl .f-num{font-family:"Cairo",var(--font-heading)}
body.rtl .eyebrow::before{left:auto;right:-64px}
body.rtl .nav-brand{margin-right:0;margin-inline-end:auto}
body.rtl .foot-grid>div:first-child p{margin-inline-start:0}
body.rtl .kicker::before{left:auto;right:-64px}
body.rtl .display,body.rtl .hero-title{margin-left:0;margin-right:-.02em}

/* Marquee tracks (client logos, industry pills) rest right-anchored in an
   RTL flex row, so the LTR keyframe's translateX(-50%) slides the whole
   track past the left edge with nothing left to show. Mirror it: shift
   right instead, which keeps the loop seamless under RTL. The "secondary"
   ticker row normally plays that keyframe in reverse for a visual
   back-and-forth effect; reversed against the mirrored keyframe it would
   reintroduce the same blank-track bug, so force it back to normal here. */
body.rtl .marquee-track{animation-name:marquee-rtl}
body.rtl .ticker-row.secondary .marquee-track{animation-direction:normal}
@keyframes marquee-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* The clients showcase lays two identical tracks side by side and slides the
   pair by one full track width plus the flex gap. Under RTL the row is
   right-anchored, so the LTR keyframe walks the tracks off-screen to the left
   with nothing following. Mirror the travel direction; the selector is a level
   more specific than the generic body.rtl .marquee-track rule above so it wins
   for this section only, leaving the plain marquees on marquee-rtl. */
body.rtl .clients-showcase .marquee-track{animation-name:marquee-full-rtl}
@keyframes marquee-full-rtl{from{transform:translateX(0)}to{transform:translateX(calc(100% + var(--client-gap)))}}

/* Service-page scope list: the bullet and its indent are set with physical
   left properties, so mirror both rather than leaving the dots overlapping
   the text at the end of each line. */
body.rtl .svc-scope li{padding-left:0;padding-right:22px}
body.rtl .svc-scope li::before{left:auto;right:0}

/* Hover arrows slide in from the reading edge, which flips under RTL. */
body.rtl .fm-row__go{transform:translateX(4px)}
body.rtl .fm-row a:hover .fm-row__go,body.rtl .fm-row a:focus-visible .fm-row__go{transform:translateX(0)}

body.rtl .project-feature__label{left:auto;right:22px}
@media (max-width:820px){body.rtl .project-feature__label{left:auto;right:18px}}