/* ========================================================================== rtl.css — Arabic / right-to-left overrides. Loaded only when . Most layout uses logical properties already; this handles the physical bits. ========================================================================== */ [dir="rtl"]{text-align:right;} [dir="rtl"] body{font-feature-settings:normal;} /* eyebrow tick flips to the right of the text */ [dir="rtl"] .eyebrow{flex-direction:row-reverse;} /* hero / section numerals move to the left edge */ [dir="rtl"] .sec-num{right:auto;left:var(--margin-x);} [dir="rtl"] .hero-scroll{left:auto;right:var(--margin-x);} [dir="rtl"] .hero-stats{right:auto;left:var(--margin-x);} [dir="rtl"] .hero-stat{text-align:left;} /* X-Blade mirrors to the left edge */ [dir="rtl"] .xblade{transform:scaleX(-1);} [dir="rtl"] .xblade--corner{right:auto;left:0;} [dir="rtl"] .xblade--rise{right:auto;left:6%;} [dir="rtl"] .xblade--edge{right:auto;left:0;} /* practice card accent bar + number */ [dir="rtl"] .prac-card::before{left:auto;right:0;} [dir="rtl"] .prac-num{right:auto;left:clamp(2rem,3.5vw,3.2rem);} [dir="rtl"] .val-row::before{left:auto;right:0;} [dir="rtl"] .val-row:hover{padding-left:0;padding-right:1.2rem;} /* button arrow flips */ [dir="rtl"] .btn svg{transform:scaleX(-1);} [dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px);} /* services media flip logic inverts */ [dir="rtl"] .svc-row--flip .svc-media{order:0;} [dir="rtl"] .svc-row .svc-media{order:2;} [dir="rtl"] .svc-row--flip .svc-media{order:2;} /* hero grid mask flips */ [dir="rtl"] .hero-grid{-webkit-mask-image:linear-gradient(270deg,transparent,#000 55%); mask-image:linear-gradient(270deg,transparent,#000 55%);} /* footer numerals / alignment */ [dir="rtl"] .nav-link::after{left:auto;right:0;} /* drawer slides from the left */ [dir="rtl"] .drawer{inset:0 auto 0 0;transform:translateX(-100%);} [dir="rtl"] body.menu-open .drawer{transform:translateX(0);} [dir="rtl"] .drawer a:hover{padding-left:0;padding-right:.6rem;} /* Arabic reads a touch larger/looser for legibility */ [dir="rtl"] .hero-lead,[dir="rtl"] .lead{line-height:1.7;}