/* Arabic-only typography and direction refinements. Shared layout remains in
   styles.css and pages.css so the two languages keep the same page structure. */
@font-face {
  font-family: "Hacen Saudi Arabia";
  src: url("assets/fonts/hacen-saudi-arabia-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html[lang="ar"] {
  --font-display: "Hacen Saudi Arabia", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-body: "Hacen Saudi Arabia", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
}

html[lang="ar"] body {
  direction: rtl;
  text-align: right;
}

html[lang="ar"] .site-announcement {
  letter-spacing: 0;
}

html[lang="ar"] [dir="ltr"],
html[lang="ar"] bdi {
  unicode-bidi: isolate;
}

html[lang="ar"] :is(input[type="tel"], input[type="email"], .hero-number) {
  direction: ltr;
  unicode-bidi: isolate;
}

html[lang="ar"] :is(.stat-item dt, .scale-grid strong) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The fully written Arabic area unit needs to wrap inside narrow proof cells;
   page-level overflow checks alone do not catch clipping by the grid frame. */
html[lang="ar"] .proof-chapter .scale-grid article:nth-child(2) strong {
  white-space: normal;
  line-height: 1.08;
}

html[lang="ar"] :is(h1, h2) {
  /* Hacen's tall Arabic glyphs need a roomier line box than the Latin
     display face. Keep this global so every wrapped page title stays clear. */
  line-height: 1.22;
  letter-spacing: 0;
}

/* Mirror the homepage's directional artwork for RTL without transforming any
   readable content or controls. The animated paths keep their shared runtime. */
html[lang="ar"] .hero::before {
  right: -14%;
  left: auto;
}

html[lang="ar"] .hero-rays {
  transform: scaleX(-1);
  transform-origin: center;
}

/* Complete bidirectional layout pass. The shared English styles intentionally
   remain untouched; only their physical left/right assumptions are mirrored
   here for the Arabic surface. */
html[lang="ar"] :is(input[type="tel"], input[type="email"]) {
  text-align: left;
}

/* Keep embedded Latin names and standards visually separated inside Arabic
   sentences without turning them into block-level fragments. */
html[lang="ar"] :is(p, li, dd, figcaption, .site-announcement) bdi[lang="en"] {
  margin-inline: .1em;
  white-space: nowrap;
}

html[lang="ar"] .skip-link {
  right: 0;
  left: auto;
}

html[lang="ar"] .skip-link:focus,
html[lang="ar"] .skip-link:focus-visible {
  right: 1rem;
  left: auto;
}

html[lang="ar"] :is(.client-proof-list, .content-points) li {
  padding-inline: 2rem .4rem;
}

html[lang="ar"] .client-proof-list li {
  padding-inline: 1.65rem 0;
}

html[lang="ar"] .client-proof-list li::before {
  flex: 0 0 auto;
  margin-inline: -1.65rem 1.1rem;
}

html[lang="ar"] .content-points li::before {
  right: .3rem;
  left: auto;
}

html[lang="ar"] .layout-brand-wall .content-points li {
  padding-inline: 2rem 1rem;
}

html[lang="ar"] .layout-brand-wall .content-points li::before {
  right: .85rem;
  left: auto;
}

html[lang="ar"] .faq-list summary {
  padding-inline: 1.25rem 4rem;
}

html[lang="ar"] .faq-list summary::after {
  right: auto;
  left: 1rem;
}

html[lang="ar"] .faq-list details > div {
  padding-inline: 1.25rem 4rem;
}

html[lang="ar"] .mobile-brand-disclosure summary::after,
html[lang="ar"] .mobile-brand-disclosure summary small {
  margin-right: auto;
  margin-left: 0;
}

html[lang="ar"] .mobile-brand-disclosure summary::after {
  transform: translateY(-.16rem) rotate(135deg);
}

html[lang="ar"] .mobile-brand-disclosure[open] summary::after {
  transform: translateY(.16rem) rotate(315deg);
}

html[lang="ar"] :is(.form-status.is-success, .form-status.is-error) {
  border-right-width: 4px;
  border-right-style: solid;
  border-left: 0;
}

html[lang="ar"] .form-status.is-success {
  border-right-color: var(--yellow-400);
}

html[lang="ar"] .form-status.is-error {
  border-right-color: var(--page-red);
}

html[lang="ar"] :is(.contact-route-actions a, .brand-ranges .content-card) {
  transition-property: color, background-color, padding-right;
}

html[lang="ar"] .contact-route-actions a:hover,
html[lang="ar"] .contact-route-actions a:focus-visible,
html[lang="ar"] .brand-ranges .content-card:hover {
  padding-right: 1rem;
  padding-left: .2rem;
}

html[lang="ar"] .brand-ranges .content-card:hover {
  padding-left: 0;
}

html[lang="ar"] .section-media-index,
html[lang="ar"] .gateway-index,
html[lang="ar"] .brand-quality-watermark {
  right: auto;
  left: 1rem;
}

html[lang="ar"] .gateway-route h3 {
  padding-right: 0;
  padding-left: 2.5rem;
}

html[lang="ar"] .product-stage figcaption {
  right: 1.5rem;
  left: auto;
}

html[lang="ar"] .brand-secondary-visual figcaption {
  right: 1rem;
  left: auto;
}

html[lang="ar"] :is(.page-hero-rays, .brand-hero-rays) {
  inset: auto 30% -5rem -13vw;
  transform: rotate(5deg) scaleX(-1);
}

html[lang="ar"] .hero-network li {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .14);
}

html[lang="ar"] .hero-network li::after {
  right: auto;
  left: .8rem;
  border-right: 0;
  border-left: 1px solid currentColor;
  transform: rotate(-45deg);
}

html[lang="ar"] .hero-network li:hover span,
html[lang="ar"] .layout-manifesto .content-points li:hover,
html[lang="ar"] .layout-checklist .content-points li:hover {
  transform: translateX(-.25rem);
}

html[lang="ar"] .partner-route li:nth-child(odd) {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .17);
}

html[lang="ar"] .company-intro-copy li::before {
  right: 1.25rem;
  left: auto;
}

html[lang="ar"] .client-support-section .client-values-grid .content-card-mark {
  right: auto;
  left: clamp(1.35rem, 2.2vw, 2rem);
}

html[lang="ar"] .client-support-section .client-values-grid h3 {
  padding-right: 0;
  padding-left: 2rem;
}

html[lang="ar"] .official-product + .official-product {
  border-right: 1px solid var(--line);
  border-left: 0;
}

html[lang="ar"] .scale-grid article {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .16);
}

@media (max-width: 43.99rem) {
  html[lang="ar"] .audience-gateway-heading h2 span {
    padding-right: 1.4rem;
    padding-left: 0;
  }

  html[lang="ar"] .audience-gateway-heading h2 span::before {
    right: 0;
    left: auto;
  }

  html[lang="ar"] .gateway-route > .gateway-index {
    inset: 1rem auto auto 1rem;
  }

  html[lang="ar"] .gateway-route h3 {
    padding-right: 0;
    padding-left: 2.75rem;
  }

  html[lang="ar"] .brand-logo-panel {
    right: .8rem;
    left: auto;
  }
}

@media (min-width: 40rem) {
  html[lang="ar"] .content-card {
    border-right: 0;
    border-left: 1px solid var(--page-line);
  }

  html[lang="ar"] .content-card:nth-child(2n) {
    border-left: 0;
  }

  html[lang="ar"] .stat-item {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .2);
  }

  html[lang="ar"] .stat-item:nth-child(2n) {
    border-left: 0;
  }
}

@media (min-width: 48rem) {
  html[lang="ar"] .company-intro-copy li + li {
    border-right: 1px solid rgba(106, 0, 16, .16);
    border-left: 0;
  }

  html[lang="ar"] .iso-proof figcaption span {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .27);
  }

  html[lang="ar"] .iso-proof figcaption span:last-child {
    border-left: 0;
  }

  html[lang="ar"] .process li {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .22);
  }

  html[lang="ar"] .process li:last-child {
    border-left: 0;
  }

  html[lang="ar"] .hero-network > p {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .14);
  }

  html[lang="ar"] .define-card + .define-card {
    padding-right: clamp(1.25rem, 2.4vw, 2rem);
    padding-left: 0;
    border-right: 1px solid var(--line);
    border-left: 0;
  }

  html[lang="ar"] .define-card:not(:last-child) {
    padding-right: 0;
    padding-left: clamp(1.25rem, 2.4vw, 2rem);
  }

  html[lang="ar"] .content-card:nth-child(2n) {
    border-left: 1px solid var(--page-line);
  }

  html[lang="ar"] .content-card:nth-child(3n),
  html[lang="ar"] .layout-partnerships .content-card:last-child,
  html[lang="ar"] .brand-ranges .content-card:nth-child(2n) {
    border-left: 0;
  }

  html[lang="ar"] .brand-ranges .content-card:nth-child(2n + 1) {
    border-right: 0;
    border-left: 1px solid var(--page-line);
  }

  html[lang="ar"] .client-support-section .client-roadmap-grid > .content-card,
  html[lang="ar"] .layout-feature-pair .content-card,
  html[lang="ar"] .layout-partnerships .content-card {
    border-right: 0;
    border-left: 1px solid var(--page-line);
  }

  html[lang="ar"] .client-support-section .client-roadmap-grid > .content-card:last-child,
  html[lang="ar"] .layout-partnerships .content-card:last-child {
    border-left: 0;
  }

  html[lang="ar"] .layout-checklist .content-points li:nth-child(odd) {
    padding-right: 2rem;
    padding-left: 2rem;
    border-right: 0;
    border-left: 1px solid var(--page-line);
  }

  html[lang="ar"] .layout-checklist .content-points li:nth-child(even) {
    padding-right: 3rem;
    padding-left: .4rem;
  }

  html[lang="ar"] .layout-checklist .content-points li:nth-child(even)::before {
    right: 1.3rem;
    left: auto;
  }

  html[lang="ar"] .stat-item,
  html[lang="ar"] .stat-item:nth-child(2n) {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .2);
  }

  html[lang="ar"] .stat-item:last-child,
  html[lang="ar"] .stats-rail:has(.stat-item:nth-child(6)) .stat-item:nth-child(3n) {
    border-left: 0;
  }

  html[lang="ar"] .stats-rail:has(.stat-item:nth-child(6)) .stat-item,
  html[lang="ar"] .stats-rail:has(.stat-item:nth-child(6)) .stat-item:nth-child(2n) {
    border-right: 0;
    border-left: 1px solid rgba(255, 255, 255, .2);
  }

  html[lang="ar"] .stats-rail:has(.stat-item:nth-child(6)) .stat-item:nth-child(3n) {
    border-left: 0;
  }

  html[lang="ar"] .proof-chapter .scale-grid article,
  html[lang="ar"] .proof-chapter .scale-grid article:nth-child(2n) {
    border-right: 0;
    border-left: 1px solid var(--line);
  }

  html[lang="ar"] .proof-chapter .scale-grid article:nth-child(3n) {
    border-left: 0;
  }
}

@media (max-width: 47.99rem) {
  html[lang="ar"] .proof-chapter .scale-grid article,
  html[lang="ar"] .proof-chapter .scale-grid article:nth-child(2n) {
    padding: .9rem;
    border-right: 0;
    border-left: 1px solid var(--line);
  }

  html[lang="ar"] .proof-chapter .scale-grid article:nth-child(2n) {
    border-left: 0;
  }
}

/* Arabic headings are wider than their English equivalents at the same
   character count; keep them inside the real mobile content column. */
@media (max-width: 30rem) {
  html[lang="ar"] .client-feature-sticky h2,
  html[lang="ar"] .client-section-heading h2,
  html[lang="ar"] .client-media-story h2 {
    max-width: 100%;
  }
}