/* Shared Arabic presentation; keep the existing English layout and assets. */
@font-face{font-family:"29LT Idris Flat";src:url("/assets/fonts/29LTIdrisFlat-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"29LT Idris Flat";src:url("/assets/fonts/29LTIdrisFlat-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
html[dir="rtl"]{--display:"29LT Idris Flat",Arial,sans-serif}
html[dir="rtl"] body{font-family:"29LT Idris Flat",Arial,sans-serif}
html[dir="rtl"] :is(h1,h2,h3,p,a,span,small,li,label,button,summary,th,td){letter-spacing:normal!important;text-transform:none}
html[dir="rtl"] :is(h1,h2,h3){line-height:1.3!important}
html[dir="rtl"] :is(p,li,.faq-a,.policy-content){line-height:1.75}
html[dir="rtl"] :is(input,textarea,select,button){font-family:inherit}
html[dir="rtl"] :is(input,textarea,select,th,td){text-align:start}
html[dir="rtl"] :is(input[type="email"],input[type="tel"],input[type="url"]){direction:ltr;text-align:start}
bdi[dir="ltr"],.ltr{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] :is(.proof-grid strong,[data-step-count]){direction:ltr;unicode-bidi:isolate;display:inline-block}
html[dir="rtl"] .skip-link{left:auto;inset-inline-start:16px}
html[dir="rtl"] .opening__quick{padding-inline-start:0}
html[dir="rtl"] .illustration{transform:translateX(22vw)}
html[dir="rtl"] .chapter{margin-left:0;margin-right:auto}
html[dir="rtl"] .chapters>:is(.kicker,h2){margin-left:0!important;margin-right:auto!important;text-align:start!important}
html[dir="rtl"] .finale__mark{right:auto;inset-inline-end:-8vw}
html[dir="rtl"] :is(.baseline-note,.form-note,.form-status){border-left:0;border-inline-start:3px solid var(--blue)}
html[dir="rtl"] :is(.baseline-note,.form-status.is-success){border-inline-start-color:var(--red)}
html[dir="rtl"] .form-status.is-error{border-inline-start-color:var(--red-dark)}
html[dir="rtl"] .product-benefits li{padding-left:0;padding-inline-start:22px}
html[dir="rtl"] .product-benefits li::before{left:auto;inset-inline-start:0}
html[dir="rtl"] .who-list li::before{content:"←";margin-right:0;margin-inline-end:10px}
html[dir="rtl"] :is(.policy-content,.case-study-content) :is(ul,ol){padding-left:0;padding-inline-start:1.2rem}
html[dir="rtl"] .services-table :is(th,td){text-align:start}
html[dir="rtl"] .site-footer__base{flex-wrap:wrap}
html[dir="rtl"] .site-footer__contact a{overflow-wrap:anywhere}
/* SVG coordinates are geometric; isolate writing without reflecting glyphs. */
html[dir="rtl"] svg{direction:ltr}
html[dir="rtl"] svg text{font-family:"29LT Idris Flat",Arial,sans-serif;letter-spacing:normal;unicode-bidi:plaintext}
@media(max-width:900px){
 html[dir="rtl"] .illustration{transform:none}
 html[dir="rtl"] .story-nav__links{gap:8px}
 html[dir="rtl"] .story-nav__links a{white-space:nowrap}
 html[dir="rtl"] .chapter{margin-inline:auto}
}
@media(max-width:560px){
 html[dir="rtl"] .opening h1{font-size:clamp(2.5rem,10vw,3.5rem)}
 html[dir="rtl"] .opening__copy{min-height:0}
 html[dir="rtl"] .story-cta{max-width:150px}
 html[dir="rtl"] :is(.story-grid,.proof-grid,.site-footer__inner)>*{min-width:0}
}

/* Arabic has no uppercase/letter-spacing here, so the English 11px label is too small to read; bump to 13px for RTL only. */
html[dir="rtl"] .story-card__index{font-size:13px}

/* assets/story.css `.story-card p` sets rgba(62,46,17,.86); 86% opacity looks washed out in Arabic, so use the same ink at full opacity (font-size stays 16px). */
html[dir="rtl"] .story-card p{color:rgba(62,46,17,1)}

/* ---- Services pipeline illustration: staged reveal, draw-in, idle drift, station hover/focus ----
   Flow runs left->right (svg is direction:ltr), so reveal order follows DOM order 01..06.
   Individual `translate` property composes with each group's transform="translate(x y)" attribute,
   so the static geometry is never overridden. Only opacity, translate and stroke-dashoffset animate. */
html[dir="rtl"] .ar-pipeline .ar-hl,
html[dir="rtl"] .ar-pipeline .ar-ring{fill:none;opacity:0;pointer-events:none}
html[dir="rtl"] .ar-pipeline .ar-hl{fill:rgba(210,31,45,.07);stroke:var(--red);stroke-width:3}
html[dir="rtl"] .ar-pipeline .ar-ring{stroke:var(--blue);stroke-width:2.5}
html[dir="rtl"] .ar-pipeline .ar-station{outline:none;cursor:default}

@media (prefers-reduced-motion: no-preference){
 html[dir="rtl"] .ar-pipeline .ar-station{transition:translate 380ms cubic-bezier(.2,.8,.2,1)}
 html[dir="rtl"] .ar-pipeline .ar-hl,
 html[dir="rtl"] .ar-pipeline .ar-ring{transition:opacity 280ms cubic-bezier(.2,.8,.2,1)}

 /* Pre-reveal state exists only once ar-motion.js has armed the SVG, so no-JS stays fully visible. */
 html[dir="rtl"] .ar-pipeline.ar-motion:not(.is-in) :is(.ar-box,.ar-station,.ar-dot){opacity:0}
 html[dir="rtl"] .ar-pipeline.ar-motion:not(.is-in) .ar-draw{opacity:0;stroke-dashoffset:var(--len)}
 html[dir="rtl"] .ar-pipeline.ar-motion:not(.is-in) .ar-rail{opacity:0;stroke-dashoffset:420}
 html[dir="rtl"] .ar-pipeline.ar-motion:not(.is-in) .ar-curve{opacity:0;stroke-dashoffset:var(--len)}

 html[dir="rtl"] .ar-pipeline.is-in :is(.ar-box,.ar-station){animation:ar-rise 560ms cubic-bezier(.2,.8,.2,1) backwards}
 html[dir="rtl"] .ar-pipeline.is-in .ar-box:not(.ar-box--res){animation-delay:0ms}
 html[dir="rtl"] .ar-pipeline.is-in .ar-station{animation-delay:calc(420ms + var(--i) * 80ms)}
 html[dir="rtl"] .ar-pipeline.is-in .ar-box--res{animation-delay:1280ms}

 html[dir="rtl"] .ar-pipeline.is-in .ar-draw{stroke-dasharray:var(--len);animation:ar-draw 520ms cubic-bezier(.2,.8,.2,1) backwards}
 html[dir="rtl"] .ar-pipeline.is-in .ar-draw--src{animation-delay:140ms}
 html[dir="rtl"] .ar-pipeline.is-in .ar-draw--res{animation-delay:980ms}
 html[dir="rtl"] .ar-pipeline.is-in .ar-rail{stroke-dasharray:420;animation:ar-draw 900ms cubic-bezier(.2,.8,.2,1) 420ms backwards}
 html[dir="rtl"] .ar-pipeline.is-in .ar-curve{stroke-dasharray:var(--len);animation:ar-draw 1100ms cubic-bezier(.4,.1,.2,1) 1450ms backwards}
 html[dir="rtl"] .ar-pipeline.is-in .ar-dot{animation:ar-fade 400ms ease-out 2450ms backwards}

 /* Idle: barely perceptible float on the whole drawing, starts after the reveal has settled. */
 html[dir="rtl"] .ar-pipeline.is-in{animation:ar-float 8s ease-in-out 3200ms infinite alternate}

 @keyframes ar-rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
 @keyframes ar-draw{0%{opacity:0;stroke-dashoffset:var(--len,420)}35%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
 @keyframes ar-fade{from{opacity:0}to{opacity:1}}
 @keyframes ar-float{from{translate:0 0}to{translate:0 -2px}}
}

/* Station emphasis: hover (pointer devices only) and keyboard focus. */
@media (hover:hover){
 html[dir="rtl"] .ar-pipeline .ar-station:hover{translate:0 -4px}
 html[dir="rtl"] .ar-pipeline .ar-station:hover .ar-hl{opacity:1}
}
html[dir="rtl"] .ar-pipeline .ar-station:focus-visible{translate:0 -4px}
html[dir="rtl"] .ar-pipeline .ar-station:focus-visible :is(.ar-hl,.ar-ring){opacity:1}

/* Arabic legibility: 29LT Idris Flat has a short x-height (0.31), so Arabic
   reads noticeably smaller than its pixel size. Scale every glyph by 1.25x
   (0.31 x 1.25 = 0.388) without touching layout pixel values. Display
   headings and illustration text keep their designed size. */
/* Set on every element: the `font` shorthand used across the page CSS resets
   font-size-adjust, so inheritance alone misses those elements. */
html[dir="rtl"] body,html[dir="rtl"] body *{font-size-adjust:0.388}
html[dir="rtl"] body :is(h1,h2,svg,svg *){font-size-adjust:none}
/* Small UI labels (10-13px caps in the English design) get a stronger boost:
   1.4x (0.31 x 1.4 = 0.434). Proportional, so nothing can ever shrink. */
html[dir="rtl"] body :is(.kicker,.product-block__kicker,.story-cta,.button,.story-nav__links a,.brief-form label,option,small,.site-footer__registration,.baseline-tile__label,.chapter__number,.founder-card__title,.founder-focus__chip,.product-block__bestfor,.product-block__cta,.brief-preview__caption,.case-card__brand,.scroll-cue,.label){font-size-adjust:0.434}