@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/cairo-variable.ttf") format("truetype");
}

html[lang="ar"] {
  direction: rtl;
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: "Cairo", Tahoma, Arial, sans-serif;
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] body {
  line-height: 1.75;
  word-spacing: 0.015em;
}

html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  line-height: 1.72;
}

html[lang="ar"] p {
  text-wrap: pretty;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  letter-spacing: 0;
}

html[lang="ar"] .hero-title,
html[lang="ar"] .section-intro h2,
html[lang="ar"] .project-name h3,
html[lang="ar"] .service-copy h3,
html[lang="ar"] .about-heading h2,
html[lang="ar"] .clients-heading h2,
html[lang="ar"] .contact-intro h2,
html[lang="ar"] .footer-cta h2,
html[lang="ar"] .project-dialog-heading h2 {
  font-family: "Cairo", Tahoma, Arial, sans-serif;
  font-weight: 750;
  letter-spacing: 0;
  text-wrap: balance;
}

html[lang="ar"] .section-intro h2 > span,
html[lang="ar"] .about-heading h2 > span,
html[lang="ar"] .clients-heading h2 > span,
html[lang="ar"] .contact-intro h2 > span,
html[lang="ar"] .footer-cta h2 > span {
  display: block;
}

html[lang="ar"] .section-intro h2 > span + span,
html[lang="ar"] .about-heading h2 > span + span,
html[lang="ar"] .clients-heading h2 > span + span,
html[lang="ar"] .contact-intro h2 > span + span,
html[lang="ar"] .footer-cta h2 > span + span {
  margin-top: 0.08em;
}

@media (min-width: 701px) {
  html[lang="ar"] .section-intro h2,
  html[lang="ar"] .about-heading h2 {
    font-size: clamp(3rem, 4.7vw, 5.6rem);
  }

  html[lang="ar"] .clients-heading h2,
  html[lang="ar"] .contact-intro h2 {
    font-size: clamp(3rem, 5.2vw, 6.4rem);
  }

  html[lang="ar"] .section-intro h2 > span,
  html[lang="ar"] .about-heading h2 > span,
  html[lang="ar"] .clients-heading h2 > span,
  html[lang="ar"] .contact-intro h2 > span {
    white-space: nowrap;
  }
}

html[lang="ar"] .section-index,
html[lang="ar"] .eyebrow,
html[lang="ar"] .hero-kicker,
html[lang="ar"] .project-name p,
html[lang="ar"] .project-meta dt,
html[lang="ar"] .service-topline,
html[lang="ar"] .contact-details-kicker,
html[lang="ar"] .form-heading > span,
html[lang="ar"] .contact-detail span,
html[lang="ar"] .footer-column-label,
html[lang="ar"] .mobile-menu-meta,
html[lang="ar"] .button {
  letter-spacing: 0;
  text-transform: none;
}

html[lang="ar"] .site-progress span {
  transform-origin: right;
}

html[lang="ar"] .site-nav a::after,
html[lang="ar"] .text-link::after {
  transform-origin: left;
}

html[lang="ar"] .site-nav a:hover::after,
html[lang="ar"] .site-nav a:focus-visible::after,
html[lang="ar"] .site-nav a.is-active::after,
html[lang="ar"] .text-link:hover::after,
html[lang="ar"] .text-link:focus-visible::after {
  transform-origin: right;
}

html[lang="ar"] .header-cta span,
html[lang="ar"] .text-link:hover span,
html[lang="ar"] .text-link:focus-visible span,
html[lang="ar"] .footer-project-link:hover > span:last-child,
html[lang="ar"] .footer-project-link:focus-visible > span:last-child {
  transform: translate(-0.18rem, -0.18rem);
}

html[lang="ar"] .hero::before {
  right: 33.333%;
  left: auto;
}

html[lang="ar"] .hero-kicker {
  margin-right: 34.5%;
  margin-left: 0;
}

html[lang="ar"] .hero-title {
  max-width: 15ch;
  font-size: clamp(3.35rem, 5.55vw, 6.75rem);
  font-weight: 780;
  line-height: 1.1;
  text-wrap: nowrap;
}

html[lang="ar"] .hero-title .hero-line-mask {
  clip-path: none;
  margin-block: -0.025em -0.09em;
  overflow: visible;
  padding-block: 0.025em 0.09em;
}

html[lang="ar"] .hero-title .hero-line-secondary {
  padding-right: clamp(0rem, 2.6vw, 2.75rem);
}

html[lang="ar"] .hero-title em {
  position: relative;
  color: var(--brand-blue);
  font-style: normal;
  font-weight: 820;
}

html[lang="ar"] .hero-title.is-arabic-title [data-letter-reveal] {
  display: inline-block;
  animation: arabic-title-enter 900ms var(--ease) both;
}

html[lang="ar"] .hero-title.is-arabic-title .hero-line-mask:nth-child(2) [data-letter-reveal] {
  animation-delay: 110ms;
}

html[lang="ar"] .hero-intro p,
html[lang="ar"] .section-copy,
html[lang="ar"] .about-copy p,
html[lang="ar"] .clients-heading #clients-copy,
html[lang="ar"] .contact-intro > p {
  line-height: 1.85;
}

html[lang="ar"] .project-name h3,
html[lang="ar"] .about-principle h3,
html[lang="ar"] .contact-step h3 {
  line-height: 1.32;
}

html[lang="ar"] .project-meta dd {
  line-height: 1.55;
}

html[lang="ar"] .work-footer > span {
  text-align: left;
}

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

html[lang="ar"] .service-copy h3 {
  line-height: 1.14;
}

html[lang="ar"] .about-heading h2,
html[lang="ar"] .clients-heading h2,
html[lang="ar"] .contact-intro h2 {
  line-height: 1.15;
}

html[lang="ar"] .about-principle:hover h3 {
  transform: translateX(-0.35rem);
}

html[lang="ar"] .client-grid {
  border-right: 1px solid rgba(8, 8, 8, 0.5);
  border-left: 0;
}

html[lang="ar"] .client-card {
  border-right: 0;
  border-left: 1px solid rgba(8, 8, 8, 0.5);
}

html[lang="ar"] .client-card::after {
  transform-origin: right;
}

html[lang="ar"] .contact-step {
  padding-right: 0;
  padding-left: clamp(1rem, 2vw, 1.8rem);
}

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

html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"] {
  direction: ltr;
  text-align: right;
}

html[lang="ar"] .footer-column a:hover,
html[lang="ar"] .footer-column a:focus-visible,
html[lang="ar"] a.contact-detail:hover strong,
html[lang="ar"] a.contact-detail:focus-visible strong {
  transform: translateX(-0.22rem);
}

html[lang="ar"] .footer-legal {
  text-align: right;
}

@keyframes arabic-title-enter {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.55em);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  html[lang="ar"] .mobile-menu nav a {
    letter-spacing: 0;
    line-height: 1.35;
    transition: color 220ms ease, padding-right 360ms var(--ease);
  }

  html[lang="ar"] .mobile-menu nav a:hover,
  html[lang="ar"] .mobile-menu nav a:focus-visible,
  html[lang="ar"] .mobile-menu nav a.is-active {
    padding-right: 0.45rem;
    padding-left: 0;
  }

  html[lang="ar"] .hero-title {
    max-width: 15ch;
    font-size: clamp(3.05rem, 8.2vw, 5.8rem);
  }
}

@media (max-width: 700px) {
  html[lang="ar"] .hero::before {
    right: 1.25rem;
    left: auto;
  }

  html[lang="ar"] .hero-kicker {
    margin-right: 1.5rem;
    margin-left: 0;
  }

  html[lang="ar"] .hero-title {
    max-width: none;
    font-size: clamp(2.55rem, 10.6vw, 3.8rem);
    line-height: 1.16;
  }

  html[lang="ar"] .hero-line {
    white-space: normal;
  }

  html[lang="ar"] .hero-title .hero-line-secondary {
    padding-right: clamp(0rem, 3.2vw, 0.75rem);
  }

  html[lang="ar"] .section-intro h2,
  html[lang="ar"] .about-heading h2,
  html[lang="ar"] .clients-heading h2,
  html[lang="ar"] .contact-intro h2 {
    font-size: clamp(2.25rem, 9vw, 3.4rem);
    line-height: 1.18;
  }

  html[lang="ar"] .section-intro h2 > span,
  html[lang="ar"] .about-heading h2 > span,
  html[lang="ar"] .clients-heading h2 > span,
  html[lang="ar"] .contact-intro h2 > span,
  html[lang="ar"] .footer-cta h2 > span {
    white-space: normal;
  }

  html[lang="ar"] .project-meta {
    grid-template-columns: 1fr 1.2fr 0.55fr;
  }

  html[lang="ar"] .work-footer > span {
    text-align: right;
  }

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

  html[lang="ar"] .service-copy h3,
  html[lang="ar"] .service-panel[data-active="false"] .service-copy h3 {
    font-size: clamp(2.45rem, 11.5vw, 4.6rem);
  }
}