/* Arabic keeps YMS's type family and visual hierarchy, with room to read.
   Load after the page, editorial, branding and flow styles. */
html[dir="rtl"] {
  --arabic-text: 'Alexandria', 'Inter', system-ui, sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] body.flow-home {
  font-family: var(--arabic-text);
  font-weight: 400;
  line-height: 1.85;
}
html[dir="rtl"] body :is(h1,h2,h3) {
  font-family: var(--arabic-text);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}
html[dir="rtl"] body :is(.kicker,.klabel,.mono,.case-label,.flow-eyebrow,.eyebrow,.scope i,.meta i,.vc,.fh,.ftag,.hint,.plate,.case-crumb,.nextcase .nk) {
  font-family: var(--arabic-text);
  letter-spacing: 0;
  line-height: 1.65;
}
html[dir="rtl"] body :is(.pill,.btn,.button,.ah,.work-filter,.langtoggle) {
  font-family: var(--arabic-text);
  letter-spacing: 0;
  font-weight: 600;
}
html[dir="rtl"] body :is(.lede,.sline,.yms-section-content p,.yms-section-content li) {
  font-weight: 400;
  line-height: 1.9;
  word-break: normal;
  text-wrap: pretty;
}
html[dir="rtl"] body :is(.yms-hero-copy,.case-chapter-copy,.route-main,.process-step-copy,.stext,.brand-card-copy) {
  min-width: 0;
}

/* The hero remains the first focus; the summary is a readable supporting line. */
html[dir="rtl"] .flow-home #hero h1 {
  font-size: clamp(2.25rem, 5.05vw, 4.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  max-width: 18em;
  margin-inline: auto;
}
html[dir="rtl"] .flow-home #hero .lm {
  padding-block: .1em;
  margin-block: -.1em;
}
html[dir="rtl"] .flow-home #hero .sub {
  max-width: 41em;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  font-weight: 400;
  line-height: 1.9;
  margin-top: 25px;
  text-wrap: pretty;
}
html[dir="rtl"] .flow-home #nav .links {
  font-weight: 500;
}
html[dir="rtl"] .flow-home #cta h2 {
  max-width: 17em;
  margin-inline: auto;
  font-size: clamp(2.05rem, 4.5vw, 4.2rem);
  font-weight: 600;
  line-height: 1.4;
}
html[dir="rtl"] .flow-home #cta p {
  max-width: 43em;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.9;
  font-weight: 400;
}

/* Case headings no longer read as one heavy, edge-to-edge sentence. */
html[dir="rtl"] body.flow-case main > h1 {
  width: min(1180px, 100%);
  max-width: 18em;
  margin-inline-start: max(0px, calc((100% - 1180px) / 2));
  margin-inline-end: auto;
  font-size: clamp(2.15rem, 4.2vw, 4.25rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}
html[dir="rtl"] body.flow-case main > .lede {
  max-width: 790px;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  font-weight: 400;
  line-height: 1.95;
}
html[dir="rtl"] body.flow-case .case-chapter-head h2,
html[dir="rtl"] body.flow-case main > h2 {
  font-size: clamp(1.6rem, 2.55vw, 2.6rem);
  font-weight: 600;
  line-height: 1.5;
  max-width: 20em;
}
html[dir="rtl"] body.flow-case .case-chapter-copy p {
  max-width: 36em;
  font-size: clamp(1rem, 1.12vw, 1.08rem);
  font-weight: 400;
  line-height: 1.95;
}
html[dir="rtl"] body.flow-case :is(.case-overview .scope i,.metrics .mt span,.case-quicklinks a,.nextcase-action) {
  font-family: var(--arabic-text);
  letter-spacing: 0;
  line-height: 1.7;
}
html[dir="rtl"] body.flow-case .metrics .mt p {
  font-size: 1rem;
  line-height: 1.85;
}
html[dir="rtl"] body.flow-case main > .cta h2 {
  font-size: clamp(2rem, 3.9vw, 3.7rem);
  max-width: 18em;
  font-weight: 600;
  line-height: 1.4;
}
html[dir="rtl"] body.flow-case .nextcase-description {
  line-height: 1.85;
}
html[dir="rtl"] body.flow-case blockquote p {
  font-family: var(--arabic-text);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.8;
}

/* A clean source needs normal scaling, without filtering or a hover transform. */
body.flow-case .chrow .clogo[src*="igbs"][src*="-quality"] {
  display: block;
  width: 230px;
  max-width: 48%;
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: none;
  transform: none;
}

/* The shorter sections keep the same hierarchy at a calmer Arabic scale. */
html[dir="rtl"] :is(.flow-routes h2,.flow-process h2,.flow-service-path-head h2,.flow-home #work .head h2,.flow-home #reviews .head h2,.flow-home #services h2,.faq-head h2) {
  font-size: clamp(2.05rem, 3.55vw, 3.45rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}
html[dir="rtl"] :is(.flow-home .route-main strong,.flow-home .process-step-copy strong,.flow-home .process-display-result,.flow-service-path strong) {
  font-family: var(--arabic-text);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: normal;
}
html[dir="rtl"] :is(.flow-home .route-main strong,.flow-service-path strong) {
  font-size: clamp(1.55rem, 2.8vw, 2.6rem);
}
html[dir="rtl"] :is(.flow-home .route-main small,.flow-home .process-step-copy > span,.flow-home #reviews .rev p,.flow-home .faq-row p,.flow-home #work .head p) {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
}
html[dir="rtl"] .flow-home #founder blockquote {
  font-family: var(--arabic-text);
  font-size: clamp(1.55rem, 2.6vw, 2.6rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  max-width: 27em;
}
html[dir="rtl"] .flow-home #reviews .rev h3 {
  font-size: clamp(1.3rem, 1.65vw, 1.65rem);
  font-weight: 600;
  line-height: 1.6;
}
html[dir="rtl"] .flow-home #reviews .rev p {
  direction: rtl;
  text-align: start;
}
html[dir="rtl"] .flow-home #work .card .ctitle,
html[dir="rtl"] .flow-work-page .card .ctitle {
  font-family: var(--arabic-text);
  font-size: clamp(1.5rem, 2.25vw, 2.25rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
html[dir="rtl"] .flow-home #work .card:first-child .ctitle,
html[dir="rtl"] :is(.flow-home #work,.flow-work-page) .card.card-brand-feature .bg-zb .ctitle {
  font-size: clamp(1.75rem, 3.1vw, 2.7rem);
  font-weight: 600;
  line-height: 1.5;
}
html[dir="rtl"] :is(.flow-home #work,.flow-work-page) .card .cap {
  font-size: 1rem;
  line-height: 1.85;
}
html[dir="rtl"] .flow-work-page header.page h1,
html[dir="rtl"] body.flow-notebook main > h1,
html[dir="rtl"] :is(body.flow-services,body.flow-about) #hero h1 {
  font-size: clamp(2.2rem, 4.35vw, 4.2rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}
html[dir="rtl"] body.flow-services .stitle,
html[dir="rtl"] body.flow-about h2.big {
  font-size: clamp(1.8rem, 3.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.5;
}
html[dir="rtl"] .yms-page h1,
html[dir="rtl"] .yms-service .yms-hero h1 {
  font-size: clamp(2.05rem, 3.8vw, 3.7rem);
  max-width: 16em;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}
html[dir="rtl"] .yms-page .yms-section-title h2 {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.55;
}
html[dir="rtl"] .yms-page .yms-section-content :is(p,li),
html[dir="rtl"] .yms-service .yms-hero .lede {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.95;
}
html[dir="rtl"] main .step h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 760px) {
  html[dir="rtl"] .flow-home #hero h1 {
    font-size: clamp(2.1rem, 7.75vw, 3.1rem);
    line-height: 1.4;
  }
  html[dir="rtl"] .flow-home #hero .sub {
    max-width: 28em;
    font-size: 1rem;
    line-height: 1.85;
    margin-top: 22px;
  }
  html[dir="rtl"] body.flow-case main > h1 {
    font-size: clamp(2rem, 7.5vw, 3.1rem);
    line-height: 1.5;
    margin-inline: auto;
  }
  html[dir="rtl"] body.flow-case .case-chapter-head h2 {
    font-size: clamp(1.6rem, 5.5vw, 2.15rem);
  }
  body.flow-case .chrow .clogo[src*="igbs"][src*="-quality"] {
    width: 190px;
    max-width: 56%;
  }
  html[dir="rtl"] .flow-home #work .card:first-child .ctitle,
  html[dir="rtl"] :is(.flow-home #work,.flow-work-page) .card.card-brand-feature .bg-zb .ctitle {
    font-size: clamp(1.55rem, 5.5vw, 2.25rem);
  }
  html[dir="rtl"] .yms-page h1,
  html[dir="rtl"] .yms-service .yms-hero h1 {
    font-size: clamp(2rem, 7.5vw, 3rem);
    line-height: 1.5;
  }
  html[dir="rtl"] :is(.flow-routes h2,.flow-process h2,.flow-service-path-head h2) {
    font-size: clamp(2rem, 6.7vw, 2.8rem);
  }
}

/* Read Arabic as a continuous thought. Accent colour stays on UI details. */
html[dir="rtl"] .flow-home #hero h1 em,
html[dir="rtl"] .flow-home #cta h2 em,
html[dir="rtl"] .flow-home .flow-routes h2 em,
html[dir="rtl"] .flow-home .flow-process h2 em,
html[dir="rtl"] .flow-home #founder blockquote em,
html[dir="rtl"] body.flow-about h2.big em,
html[dir="rtl"] body.flow-about .shout em,
html[dir="rtl"] body.flow-about #founder blockquote em,
html[dir="rtl"] body.flow-about #cta h2 em,
html[dir="rtl"] body.flow-services #pricing h2 em,
html[dir="rtl"] .yms-page .yms-hero h1 em { color: inherit; }

/* Comfortable text measure, regular weight, and enough room for Arabic marks. */
html[dir="rtl"] .flow-home #hero h1 { font-weight:500; font-size:clamp(2.1rem,4.5vw,4rem); line-height:1.5; }
html[dir="rtl"] .flow-home #hero .sub { max-width:36em; line-height:1.95; color:rgba(255,255,255,.82); }
html[dir="rtl"] .yms-page .yms-section-content :is(p,ul,ol) { max-width:36em; text-align:start; }
html[dir="rtl"] :is(body.flow-about,body.flow-services) #hero .lm { padding-block:.1em; margin-block:-.1em; }
html[dir="rtl"] body.flow-services .ab p {
  direction:rtl; text-align:start; font-family:var(--arabic-text);
  font-size:1rem; font-weight:400; line-height:1.9; max-width:36em;
}
html[dir="rtl"] body.flow-services .ah { text-align:start; }
html[dir="rtl"] body.flow-about .shout,
html[dir="rtl"] body.flow-about #founder blockquote {
  font-family:var(--arabic-text); font-weight:500; letter-spacing:0; line-height:1.6; text-wrap:pretty;
}
html[dir="rtl"] body.flow-services .backend-links span {
  font-family:var(--arabic-text); font-size:clamp(.85rem,1vw,1rem); letter-spacing:0; line-height:1.7;
}
html[dir="rtl"] main :is(input,textarea,.chipset button) { font-family:var(--arabic-text); letter-spacing:0; }
html[dir="rtl"] main :is(input[type="email"],input[type="tel"],input[type="url"]) { direction:ltr; text-align:left; }
html[dir="rtl"] body.flow-case .plate .sid { direction:rtl; }
html[dir="rtl"] :is(body.flow-about,body.flow-services) #hero .hint,
html[dir="rtl"] body.flow-about :is(.cap,.fitcard:not(.yes) .t,#founder .by span) { color:rgba(255,255,255,.62); }
html[dir="rtl"] main :is(.step .why,.step .hint,.review .rk) { color:rgba(14,14,14,.68); }
html[dir="rtl"] main :is(input,textarea)::placeholder { color:rgba(14,14,14,.68); opacity:1; }
html[dir="rtl"] body.flow-case :is(.case-crumb span,.meta i) { color:rgba(14,14,14,.68); }
@media(max-width:760px) {
  html[dir="rtl"] .flow-home #hero h1 { font-size:clamp(2rem,7.4vw,3rem); line-height:1.5; }
}
@media(max-width:700px) {
  html[dir="rtl"] .flow-home #hero h1 {
    font-size:clamp(2.125rem,8.6vw,2.6rem);
    line-height:1.5;
    letter-spacing:0;
  }
  html[dir="rtl"] .flow-home #hero .sub { font-size:1.0625rem; line-height:1.9; margin-top:26px; }
}