html[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Syne", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "DM Sans", sans-serif;
}

html.counttable-i18n-pending body {
  visibility: hidden;
}

html.language-transition *,
html.language-transition *::before,
html.language-transition *::after {
  transition:
    text-align 0.18s ease,
    margin 0.18s ease,
    padding 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease !important;
}

.language-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 86px;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field-bg);
  color: var(--text);
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: 0;
  cursor: none;
}

.language-toggle:hover,
.language-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--field-bg));
  transform: translateY(-1px);
}

.language-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.language-toggle span {
  display: inline-flex;
  align-items: center;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0.52;
}

.language-toggle .language-toggle-ar {
  font-family: "IBM Plex Sans Arabic", "Noto Kufi Arabic", var(--font-body);
  font-weight: 800;
}

.language-toggle .language-toggle-separator {
  opacity: 0.28;
}

html[lang="en"] .language-toggle-en,
html[lang="ar"] .language-toggle-ar {
  color: var(--accent);
  opacity: 1;
}

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
}

html[dir="rtl"] {
  overflow-x: hidden;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .section-title,
html[lang="ar"] .contact-title,
html[lang="ar"] .footer-brand,
html[lang="ar"] .footer-clarity {
  letter-spacing: 0;
}

html[lang="ar"] h1,
html[lang="ar"] .hero h1,
html[lang="ar"] .hero-copy h1 {
  line-height: 1.28;
}

html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] .lede,
html[lang="ar"] .hero-sub,
html[lang="ar"] .section-body,
html[lang="ar"] .contact-summary {
  line-height: 1.82;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .section-title,
html[lang="ar"] .contact-title,
html[lang="ar"] .statement-band strong {
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
}

html[lang="ar"] .hero h1 {
  font-size: clamp(46px, 6.25vw, 86px);
  line-height: 1.24;
  margin-bottom: 30px;
}

html[lang="ar"] .hero-sub {
  max-width: min(660px, calc(100vw - 44px));
  margin-inline: auto;
  font-size: clamp(16px, 1.45vw, 19px);
}

html[lang="ar"] .section-title {
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.3;
}

html[lang="ar"] .hero-copy h1 {
  font-size: clamp(38px, 3.55vw, 58px);
  line-height: 1.3;
}

html[lang="ar"] .hero-copy .lede {
  line-height: 1.82;
}

html[lang="ar"] .contact-title {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.28;
}

html[lang="ar"] .statement-band strong {
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.28;
}

html[lang="ar"] .stat-val,
html[lang="ar"] .flow-step span,
html[lang="ar"] .metric-card strong,
html[lang="ar"] .stage-node {
  font-family: "Syne", var(--font-display);
  line-height: 1.15;
  letter-spacing: 0;
}

html[lang="ar"] .stat-val {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

html[lang="ar"] .section-eyebrow,
html[lang="ar"] .section-kicker,
html[lang="ar"] .contact-card-kicker,
html[lang="ar"] .contact-modal-label,
html[lang="ar"] .contact-modal-eyebrow,
html[lang="ar"] .switcher-label,
html[lang="ar"] .hero-badge {
  letter-spacing: 0;
  text-transform: none;
}

html[lang="ar"] .nav-cta,
html[lang="ar"] .btn-primary,
html[lang="ar"] .btn-secondary,
html[lang="ar"] .btn-ghost,
html[lang="ar"] .contact-copy-button,
html[lang="ar"] .contact-mail-link {
  letter-spacing: 0;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  padding-block: 12px;
  padding-inline: 22px;
}

html[lang="ar"] .nav-links {
  gap: clamp(18px, 2.6vw, 34px);
}

html[lang="ar"] .nav-links a,
html[lang="ar"] .footer-col a,
html[lang="ar"] .site-link,
html[lang="ar"] .division-badge,
html[lang="ar"] .chip,
html[lang="ar"] .phase-tag,
html[lang="ar"] .status-badge {
  line-height: 1.45;
}

html[lang="ar"] .chip,
html[lang="ar"] .phase-tag,
html[lang="ar"] .status-badge {
  padding-block: 7px;
}

html[lang="ar"] .stage-panel,
html[lang="ar"] .stage-chip,
html[lang="ar"] .tool-cell,
html[lang="ar"] .mini-card,
html[lang="ar"] .metric-card,
html[lang="ar"] .capability-card,
html[lang="ar"] .process-step,
html[lang="ar"] .academy-track,
html[lang="ar"] .case-card,
html[lang="ar"] .what-card,
html[lang="ar"] .phase-card,
html[lang="ar"] .product-card,
html[lang="ar"] .use-card {
  overflow-wrap: break-word;
}

html[lang="ar"] .stage-panel strong,
html[lang="ar"] .stage-chip strong,
html[lang="ar"] .tool-cell strong,
html[lang="ar"] .capability-card h3,
html[lang="ar"] .process-step h3,
html[lang="ar"] .academy-track h3,
html[lang="ar"] .case-card h3,
html[lang="ar"] .phase-card h3,
html[lang="ar"] .product-card h3,
html[lang="ar"] .use-card h3,
html[lang="ar"] .step h3 {
  line-height: 1.45;
}

html[lang="ar"] .stage-panel span,
html[lang="ar"] .stage-chip span,
html[lang="ar"] .tool-cell span,
html[lang="ar"] .metric-card span,
html[lang="ar"] .capability-card p,
html[lang="ar"] .process-step p,
html[lang="ar"] .academy-track p,
html[lang="ar"] .case-card p,
html[lang="ar"] .what-card p,
html[lang="ar"] .phase-card p,
html[lang="ar"] .product-card p,
html[lang="ar"] .use-card p,
html[lang="ar"] .step p {
  line-height: 1.78;
}

html[dir="rtl"] section,
html[dir="rtl"] main,
html[dir="rtl"] .container,
html[dir="rtl"] .page-shell,
html[dir="rtl"] .page-hero,
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .contact-shell,
html[dir="rtl"] .footer-grid,
html[dir="rtl"] .footer-bottom {
  min-width: 0;
}

html[dir="rtl"] .container,
html[dir="rtl"] main {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

html[dir="rtl"] section .container {
  width: min(100%, 1120px);
}

html[dir="rtl"] .canvas-label {
  left: auto;
  right: 56px;
}

html[dir="rtl"] nav#nav,
html[dir="rtl"] .site-nav,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .chip-row,
html[dir="rtl"] .contact-actions,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .division-badge,
html[dir="rtl"] .site-link {
  direction: rtl;
}

html[dir="rtl"] .hero,
html[dir="rtl"] .hero-content,
html[dir="rtl"] .scroll-hint,
html[dir="rtl"] .canvas-label {
  text-align: center;
}

html[dir="rtl"] .hero-copy,
html[dir="rtl"] .panel,
html[dir="rtl"] .what-card,
html[dir="rtl"] .phase-card,
html[dir="rtl"] .product-card,
html[dir="rtl"] .use-card,
html[dir="rtl"] .mini-card,
html[dir="rtl"] .academy-track,
html[dir="rtl"] .capability-card,
html[dir="rtl"] .metric-card,
html[dir="rtl"] .process-step,
html[dir="rtl"] .flow-step,
html[dir="rtl"] .tool-cell,
html[dir="rtl"] .stage-panel,
html[dir="rtl"] .stage-chip,
html[dir="rtl"] .statement-band,
html[dir="rtl"] .contact-copy,
html[dir="rtl"] .contact-direct-card,
html[dir="rtl"] .contact-modal,
html[dir="rtl"] .contact-modal-heading,
html[dir="rtl"] footer,
html[dir="rtl"] .footer-col {
  text-align: right;
}

html[dir="rtl"] .contact-modal-brand {
  text-align: right;
}

html[dir="rtl"] .phase-case {
  text-align: right;
}

html[dir="rtl"] .nav-links a::after {
  left: auto;
  right: 0;
}

html[dir="rtl"] .feature-list li {
  padding-left: 0;
  padding-right: 22px;
}

html[dir="rtl"] .feature-list li::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .phase-card::before {
  transform-origin: right;
}

html[dir="rtl"] .phase-card.pre::before {
  background: linear-gradient(270deg, var(--accent), transparent);
}

html[dir="rtl"] .phase-card.during::before {
  background: linear-gradient(270deg, var(--accent2), transparent);
}

html[dir="rtl"] .phase-card.post::before {
  background: linear-gradient(270deg, var(--post), transparent);
}

html[dir="rtl"] .phase-features li {
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
}

html[dir="rtl"] .use-card::after {
  right: auto;
  left: 32px;
}

html[dir="rtl"] .product-glow {
  right: auto;
  left: -60px;
}

html[dir="rtl"] .site-link:hover,
html[dir="rtl"] .site-link:focus-visible,
html[dir="rtl"] .division-badge:hover,
html[dir="rtl"] .division-badge:focus-visible {
  transform: translateX(-2px);
}

html[dir="rtl"] .reveal-left {
  transform: translateX(40px);
}

html[dir="rtl"] .reveal-left.visible {
  transform: translateX(0);
}

html[dir="rtl"] .contact-email-value,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

html[dir="rtl"] input:not([type="email"]):not([type="url"]):not([type="tel"]),
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  direction: rtl;
  text-align: right;
}

@media (max-width: 720px) {
  nav#nav {
    gap: 8px;
    padding: 12px 14px;
  }

  nav#nav .nav-logo img {
    height: 58px;
  }

  nav#nav .nav-cta {
    padding: 9px 13px;
    font-size: 12px;
    white-space: nowrap;
  }

  .language-toggle {
    min-width: 78px;
    height: 40px;
    padding: 0 10px;
    border-radius: 11px;
    cursor: pointer;
  }

  .site-nav {
    grid-template-columns: auto auto auto auto;
  }

  .site-nav .language-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .site-nav .theme-toggle {
    grid-column: 3;
    grid-row: 1;
  }

  .site-nav .nav-cta {
    grid-column: 4;
    grid-row: 1;
  }

  html[lang="ar"] .site-nav nav {
    min-width: 0;
    overflow: visible;
  }

  html[lang="ar"] .site-nav .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    overflow: visible;
    padding-bottom: 0;
  }

  html[lang="ar"] .site-nav .nav-links a {
    min-height: 34px;
    white-space: normal;
    text-align: center;
  }

  html[lang="ar"] .hero h1 {
    font-size: clamp(42px, 11vw, 58px);
    line-height: 1.24;
  }

  html[lang="ar"] .section-title {
    font-size: clamp(28px, 7.5vw, 36px);
    line-height: 1.34;
  }

  html[lang="ar"] .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(28px, 7.6vw, 34px);
    line-height: 1.34;
  }

  html[lang="ar"] .hero-copy .lede {
    max-width: 100%;
    font-size: 14.5px;
    line-height: 1.8;
  }

  html[lang="ar"] .hero-actions {
    max-width: 100%;
  }

  html[lang="ar"] .stat {
    padding-inline: 22px;
  }

  html[lang="ar"] .stage-panel strong,
  html[lang="ar"] .stage-chip strong {
    font-size: 12px;
    line-height: 1.45;
  }

  html[lang="ar"] .stage-panel span,
  html[lang="ar"] .stage-chip span {
    font-size: 10.5px;
    line-height: 1.55;
  }

  html[dir="rtl"] .canvas-label {
    right: 24px;
  }
}

@media (max-width: 480px) {
  nav#nav {
    padding: 10px 12px;
  }

  nav#nav .nav-logo img {
    height: 46px;
    max-width: 116px;
  }

  nav#nav .nav-cta {
    padding: 8px 11px;
  }

  .language-toggle {
    min-width: 74px;
    gap: 4px;
    font-size: 11px;
  }

  html[lang="ar"] .hero-sub {
    max-width: calc(100vw - 48px);
    font-size: 15.5px;
    line-height: 1.86;
  }

  html[lang="ar"] .btn-primary,
  html[lang="ar"] .btn-secondary,
  html[lang="ar"] .btn-ghost,
  html[lang="ar"] .nav-cta {
    padding-inline: 14px;
  }

  nav#nav,
  .site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  nav#nav .nav-logo,
  .site-nav .nav-logo {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  nav#nav .language-toggle,
  .site-nav .language-toggle {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  nav#nav .theme-toggle,
  .site-nav .theme-toggle {
    grid-column: 3;
    grid-row: 1;
  }

  nav#nav .nav-cta,
  .site-nav .nav-cta {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
  }

  .site-nav nav {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}