/* TYPOGRAPHY: Loud editorial display fonts for English and Arabic headings */
:root {
  --display-font-en: "Outfit", Manrope, sans-serif;
  --display-font-ar: "IBM Plex Sans Arabic", Arial, sans-serif;
}

html[lang="en"] :is(h1, h2, h3),
html[lang="en"] :is(.work-card-copy strong, .case-content h3) {
  font-family:var(--display-font-en)!important;
  font-weight:700!important;
  letter-spacing:-.015em!important;
}

html[lang="en"] :is(h1, h2) {
  line-height:1!important;
}

html[lang="en"] h3 {
  line-height:1.12!important;
}

html[lang="en"] .story-opening h1 {
  line-height:1.02!important;
  letter-spacing:-.02em!important;
}

/* READABILITY: Keep the About statement concise and comfortable to scan */
.about-content {
  width:100%!important;
  max-width:none!important;
}

.about-description {
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  font-family:Manrope,Arial,sans-serif!important;
  font-size:clamp(1.8rem,2.55vw,3.4rem)!important;
  font-weight:400!important;
  line-height:1.3!important;
  letter-spacing:-.02em!important;
  text-align:left!important;
  text-wrap:wrap;
}

html[lang="ar"] .about-description {
  font-family:"IBM Plex Sans Arabic",Arial,sans-serif!important;
  line-height:1.65!important;
  letter-spacing:0!important;
  text-align:right!important;
}

/* SERVICES INTRO: Compact editorial composition without an empty viewport */
.services-section {
  min-height:auto!important;
  padding:clamp(5rem,7vw,8rem) 6vw clamp(4rem,6vw,7rem)!important;
}

.services-marquee {
  opacity:1!important;
}

.services-marquee .marquee-track span {
  color:rgba(255,255,255,.15)!important;
  font-weight:500!important;
}

.services-content {
  width:100%!important;
  padding-top:clamp(5rem,7vw,8rem)!important;
}

.services-header {
  width:100%!important;
  margin:0!important;
}

.services-header p {
  margin:0 0 clamp(1.5rem,2vw,2.5rem)!important;
  color:#73d6cf!important;
  font-family:Manrope,Arial,sans-serif!important;
  font-size:.78rem!important;
  font-weight:600!important;
  letter-spacing:.18em!important;
}

.services-header h2 {
  width:min(100%,1500px)!important;
  max-width:none!important;
  margin:0!important;
  font-size:clamp(3rem,4.6vw,5.5rem)!important;
  line-height:1.06!important;
  letter-spacing:-.025em!important;
  text-wrap:balance;
}

html[lang="ar"] .services-header {
  text-align:right!important;
}

html[lang="ar"] .services-header p {
  font-family:"IBM Plex Sans Arabic",Arial,sans-serif!important;
  letter-spacing:0!important;
}

html[lang="ar"] .services-header h2 {
  margin-right:0!important;
  margin-left:auto!important;
  line-height:1.35!important;
  letter-spacing:0!important;
}

/* SERVICE LIST INTRO: Balanced heading above the two-column card grid */
.service-details-section {
  background:
    radial-gradient(circle at 82% 18%,rgba(115,214,207,.10),transparent 30%),
    #fff!important;
  background-size:auto!important;
}

.service-details-header {
  width:100%!important;
  max-width:none!important;
  margin:0 auto clamp(4rem,6vw,7rem)!important;
  text-align:center!important;
}

.service-details-header p {
  margin:0 0 clamp(1.5rem,2vw,2.25rem)!important;
}

.service-details-header h2 {
  width:min(100%,1800px)!important;
  max-width:none!important;
  margin:0 auto!important;
  font-size:clamp(3rem,4.8vw,5.75rem)!important;
  line-height:1.06!important;
  letter-spacing:-.025em!important;
  text-align:center!important;
  text-wrap:balance;
}

html[lang="ar"] .service-details-header,
html[lang="ar"] .service-details-header h2 {
  text-align:center!important;
}

html[lang="ar"] .service-details-header h2 {
  line-height:1.35!important;
  letter-spacing:0!important;
}

/* CONTACT INTRO: Keep the title and supporting copy connected and balanced */
.contact-hub-inner {
  width:min(1500px,calc(100% - clamp(2.5rem,10vw,10rem)))!important;
  padding:clamp(5rem,7vw,7rem) 0!important;
}

.contact-hub-heading {
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr)!important;
  column-gap:clamp(3rem,7vw,8rem)!important;
  row-gap:clamp(1.5rem,2.5vw,2.5rem)!important;
  align-items:center!important;
  margin-bottom:clamp(3rem,5vw,5rem)!important;
}

.contact-hub-heading>p {
  grid-column:1/-1!important;
  margin:0!important;
}

.contact-hub-heading h2 {
  grid-column:1!important;
  margin:0!important;
  font-size:clamp(3.25rem,4.6vw,5.5rem)!important;
  font-weight:700!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
}

.contact-hub-heading>span {
  grid-column:2!important;
  max-width:34ch!important;
  margin:0!important;
  font-size:clamp(.95rem,1.15vw,1.15rem)!important;
  line-height:1.8!important;
}

html[lang="ar"] .contact-hub-heading {
  direction:rtl!important;
}

html[lang="ar"] .contact-hub-heading h2 {
  font-family:"IBM Plex Sans Arabic",Arial,sans-serif!important;
  font-size:clamp(3rem,4.1vw,5rem)!important;
  line-height:1.32!important;
  letter-spacing:0!important;
  text-align:right!important;
}

html[lang="ar"] .contact-hub-heading>span {
  text-align:right!important;
}

html[lang="ar"] :is(h1, h2, h3),
html[lang="ar"] :is(.work-card-copy strong, .case-content h3) {
  font-family:var(--display-font-ar)!important;
  font-weight:600!important;
}

html[lang="ar"] :is(h1, h2, h3, .work-card-copy strong, .case-content h3) {
  letter-spacing:0!important;
}

html[lang="ar"] :is(h1, h2) {
  line-height:1.28!important;
}

html[lang="ar"] h3 {
  line-height:1.4!important;
}

/* ARABIC PROCESS INTRO: Centered two-line title with safe glyph spacing */
html[lang="ar"] .process-heading {
  display:block!important;
  width:min(1200px,100%)!important;
  margin:0 auto clamp(3.5rem,6vw,5.5rem)!important;
  text-align:center!important;
}

html[lang="ar"] .process-heading>p {
  margin:0 0 clamp(1.5rem,2.5vw,2.25rem)!important;
  text-align:center!important;
  white-space:normal!important;
}

html[lang="ar"] .process-title-wrap {
  width:100%!important;
  max-width:1100px!important;
  margin:0 auto!important;
}

html[lang="ar"] .process-heading h2 {
  margin:0!important;
  font-family:"IBM Plex Sans Arabic",Arial,sans-serif!important;
  font-size:clamp(3.1rem,4.8vw,5.5rem)!important;
  font-weight:600!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-wrap:balance;
}

html[lang="ar"] .process-lede {
  max-width:48ch!important;
  margin:clamp(1.25rem,2vw,1.75rem) auto 0!important;
  font-size:clamp(1rem,1.2vw,1.15rem)!important;
  line-height:1.9!important;
  text-align:center!important;
}

@media (max-width:768px) {
  html[lang="ar"] .process-heading {
    margin-bottom:3rem!important;
  }

  html[lang="ar"] .process-heading h2 {
    font-size:clamp(2.45rem,10.5vw,3.6rem)!important;
    line-height:1.5!important;
  }

  html[lang="ar"] .process-lede {
    max-width:32ch!important;
    font-size:.96rem!important;
  }

  .contact-hub-inner {
    width:calc(100% - 2.5rem)!important;
    padding:4.5rem 0!important;
  }

  .contact-hub-heading {
    display:block!important;
    margin-bottom:2.75rem!important;
  }

  .contact-hub-heading h2,
  html[lang="ar"] .contact-hub-heading h2 {
    margin-top:1.25rem!important;
    font-size:clamp(2.65rem,11vw,4rem)!important;
  }

  .contact-hub-heading>span {
    display:block!important;
    max-width:36ch!important;
    margin-top:1.5rem!important;
  }

  .services-section {
    padding:5rem 1.25rem 3.5rem!important;
  }

  .services-content {
    padding-top:0!important;
  }

  .services-header p {
    margin-bottom:1.25rem!important;
  }

  .services-header h2 {
    font-size:clamp(2.25rem,10vw,3.5rem)!important;
    line-height:1.08!important;
    text-wrap:pretty;
  }

  html[lang="ar"] .services-header h2 {
    line-height:1.4!important;
  }

  .service-details-header {
    margin-bottom:3rem!important;
  }

  .service-details-header h2 {
    font-size:clamp(2.25rem,10vw,3.5rem)!important;
    line-height:1.1!important;
    text-wrap:pretty;
  }

  html[lang="ar"] .service-details-header h2 {
    line-height:1.45!important;
  }

  .about-description {
    width:100%!important;
    font-size:clamp(1.15rem,5.4vw,1.5rem)!important;
    line-height:1.55!important;
    letter-spacing:-.01em!important;
  }

  html[lang="ar"] .about-description {
    line-height:1.75!important;
    letter-spacing:0!important;
  }

  html[lang="en"] :is(h1, h2) {
    line-height:1.04!important;
    letter-spacing:-.01em!important;
  }

  html[lang="ar"] :is(h1, h2, h3) {
    letter-spacing:-.025em!important;
  }
}