/* Applied only when both language versions have complete translated content. */
.language-switch { order: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 58px; min-height: 42px; flex: 0 0 auto; color: white; border: 1px solid #ffffff35; border-radius: 999px; padding: 0 12px; font: 600 14px/1.3 Arial, sans-serif; }
.language-switch:hover { background: #ffffff18; }
.site-header > .site-nav { order: 1; }
.site-header > .menu-button { order: 3; }
html[lang="ar-SA"] body { font-family: "IBM Plex Sans Arabic", Arial, sans-serif; line-height: 1.7; }
html[lang="ar-SA"] body * { letter-spacing: normal; }
html[lang="ar-SA"] :is(h1, h2, h3) { line-height: 1.25; }
html[lang="ar-SA"] :is(h1, h2, h3) em { font-family: inherit; font-style: normal; }
html[lang="ar-SA"] :is(.hero-meta, .eyebrow, .portrait-note, .clients-intro) { font-family: inherit; }
html[lang="ar-SA"] .hero h1 { font-size: clamp(68px, 7.3vw, 118px); line-height: 1.18; }
html[lang="ar-SA"] .hero h1 .accent-line { margin-left: 0; margin-right: clamp(40px, 7vw, 120px); }
/* Move the artwork, frame and labels together without changing their proportions. */
html[lang="ar-SA"] .portrait-stage { right: auto; left: max(-16px, calc((100vw - 1500px) / 2 - 48px)); }
html[lang="ar-SA"] :is(.about h2, .services h2, .contact h2) { font-size: clamp(48px, 5.4vw, 88px); }
html[lang="ar-SA"] :is(.hero-bottom > p, .case-story p, .about-statement > p) { line-height: 1.8; }
html[lang="ar-SA"] :is(.about-facts strong, .contact-cta small, .viewer-counter, .case-frame figcaption > span:last-child) { direction: ltr; unicode-bidi: isolate; }
html[lang="ar-SA"] :is(.about-facts strong, .contact-cta small) { text-align: right; }
/* The oversized animated track must start at the left edge of its clipping container. */
html[lang="ar-SA"] :is(.logo-marquee, .logo-track) { direction: ltr; }
html[lang="ar-SA"] .logo-set { flex-shrink: 0; }
html[lang="ar-SA"] .about-facts article { border-right: 0; border-left: 1px solid var(--line); }
html[lang="ar-SA"] .about-facts article:first-child { border-right: 1px solid var(--line); }
html[lang="ar-SA"] .service-row:hover { padding-left: 0; padding-right: 10px; }
html[lang="ar-SA"] .case-heading .case-subtitle { line-height: 1.5; }
html[lang="ar-SA"] .case-frame figcaption > span:last-child { white-space: nowrap; flex-shrink: 0; }
html[lang="ar-SA"] :is(.pill i, .nav-contact > span, .simple-link > span, .project-open i, .service-row i, .contact-cta i) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
html[lang="ar-SA"] .floating-whatsapp { right: auto; left: 22px; }
html[lang="ar-SA"] .case-progress { transform-origin: right; }
html[lang="ar-SA"] .viewer-navigation { direction: ltr; }
html[lang="ar-SA"] .motion-label { left: auto; right: 16px; }
html[lang="ar-SA"] .motion-control { right: auto; left: 18px; }
@media (max-width: 1180px) {
  html[lang="ar-SA"] .portrait-stage { left: -24px; }
  /* Arabic titles can wrap; keep their descriptions in a separate grid row. */
  html[lang="ar-SA"] .service-row { row-gap: 8px; padding-block: 22px; }
  html[lang="ar-SA"] .service-row > span { grid-row: 1 / span 2; }
  html[lang="ar-SA"] .service-row h3 { grid-column: 2; grid-row: 1; }
  html[lang="ar-SA"] .service-row p { grid-column: 2; grid-row: 2; margin: 0; transform: none; }
}
@media (max-width: 860px) {
  .language-switch { margin-inline-start: auto; position: relative; z-index: 4; }
  .site-header { gap: 10px; }
  html[lang="ar-SA"] .hero h1 { font-size: clamp(60px, 11vw, 88px); }
  html[lang="ar-SA"] .hero h1 .accent-line { margin-right: 0; }
  html[lang="ar-SA"] .portrait-stage { left: 3vw; }
  html[lang="ar-SA"] .about-facts article:nth-child(odd) { border-right: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .language-switch { min-width: 54px; min-height: 38px; padding-inline: 9px; font-size: 13px; }
  html[lang="ar-SA"] .hero h1 { font-size: clamp(43px, 12.5vw, 67px); }
  html[lang="ar-SA"] .portrait-stage { left: -7vw; }
  html[lang="ar-SA"] :is(.about h2, .services h2, .contact h2) { font-size: clamp(36px, 10vw, 52px); }
  html[lang="ar-SA"] .floating-whatsapp { left: 16px; }
}