/* Typography v2 — AZR Holding-inspired, locally hosted and reversible. */

@font-face {
  font-family: "AZR Almarai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/almarai-arabic-700.woff2") format("woff2");
}

@font-face {
  font-family: "AZR Almarai";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/almarai-arabic-800.woff2") format("woff2");
}

@font-face {
  font-family: "AZR Cairo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/cairo-arabic-400-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "AZR Cairo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/cairo-latin-400-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "AZR Montserrat";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-500-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --type-ar-display: "AZR Almarai", "AZR Cairo", Tahoma, Arial, sans-serif;
  --type-ar-body: "AZR Cairo", Tahoma, Arial, sans-serif;
  --type-latin-display: "AZR Montserrat", Montserrat, Arial, sans-serif;
  --type-latin-body: "AZR Cairo", "AZR Montserrat", Arial, sans-serif;
  --type-display-weight: 700;
  --type-title-weight: 700;
  --type-body-weight: 400;
  --type-medium-weight: 500;
  --type-emphasis-weight: 700;
  --type-body-size: 1rem;
  --type-body-leading-ar: 1.9;
  --type-body-leading-en: 1.82;
  --type-display-ar: clamp(2.6rem, 4.75vw, 4.3rem);
  --type-display-en: clamp(2.55rem, 4.45vw, 4.05rem);
  --type-h2-ar: clamp(2.2rem, 3.9vw, 3.5rem);
  --type-h2-en: clamp(2.15rem, 3.75vw, 3.45rem);
}

.site-v5 {
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] .site-v5 {
  font-family: var(--type-ar-body);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading-ar);
  letter-spacing: 0;
}

html[lang="en"] .site-v5 {
  font-family: var(--type-latin-body);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading-en);
}

.site-v5 h1,
.site-v5 h2,
.site-v5 h3,
.site-v5 p,
.site-v5 li,
.site-v5 a,
.site-v5 strong,
.site-v5 span {
  font-family: inherit;
}

.site-v5 h1,
.site-v5 h2,
.site-v5 h3,
.site-v5 .market {
  overflow-wrap: break-word;
}

html[lang="ar"] .site-v5 h1,
html[lang="ar"] .site-v5 h2,
html[lang="ar"] .site-v5 h3,
html[lang="ar"] .site-v5 .brand-name strong {
  font-family: var(--type-ar-display);
  letter-spacing: 0;
}

html[lang="en"] .site-v5 h1,
html[lang="en"] .site-v5 h2,
html[lang="en"] .site-v5 h3,
html[lang="en"] .site-v5 .brand-name strong {
  font-family: var(--type-latin-display);
}

html[lang="ar"] .site-v5 .hero h1 {
  max-width: 760px;
  font-size: var(--type-display-ar);
  font-weight: var(--type-display-weight);
  line-height: 1.18;
  letter-spacing: 0;
  text-wrap: balance;
}

html[lang="en"] .site-v5 .hero h1 {
  max-width: 730px;
  font-size: var(--type-display-en);
  font-weight: var(--type-display-weight);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.site-v5 .hero-lead {
  max-width: 66ch;
  font-size: clamp(1rem, 1.22vw, 1.14rem);
  font-weight: var(--type-body-weight);
  text-wrap: pretty;
}

html[lang="ar"] .site-v5 .hero-lead {
  line-height: 1.95;
}

html[lang="en"] .site-v5 .hero-lead {
  max-width: 65ch;
  line-height: 1.82;
}

.site-v5 .hero .eyebrow,
.site-v5 .section-kicker,
.site-v5 .card-index,
.site-v5 .brand-stage__meta p {
  font-family: var(--type-latin-display);
  font-size: 0.78rem;
  font-weight: var(--type-emphasis-weight);
  line-height: 1.55;
  letter-spacing: 0.085em;
}

html[lang="ar"] .site-v5 .hero .eyebrow,
html[lang="ar"] .site-v5 .section-kicker {
  font-family: var(--type-ar-body);
  letter-spacing: 0;
}

html[lang="ar"] .site-v5 .section-heading h2,
html[lang="ar"] .site-v5 .contact h2 {
  font-size: var(--type-h2-ar);
  font-weight: var(--type-title-weight);
  line-height: 1.24;
  letter-spacing: 0;
  text-wrap: balance;
}

html[lang="en"] .site-v5 .section-heading h2,
html[lang="en"] .site-v5 .contact h2 {
  font-size: var(--type-h2-en);
  font-weight: var(--type-title-weight);
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.site-v5 .section-heading > p,
.site-v5 .product-card > p,
.site-v5 .service-card p,
.site-v5 .workflow-step p,
.site-v5 .contact-panel > div:first-child > p:last-child {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  text-wrap: pretty;
}

html[lang="ar"] .site-v5 .section-heading > p,
html[lang="ar"] .site-v5 .product-card > p,
html[lang="ar"] .site-v5 .service-card p,
html[lang="ar"] .site-v5 .workflow-step p,
html[lang="ar"] .site-v5 .contact-panel > div:first-child > p:last-child {
  line-height: var(--type-body-leading-ar);
}

html[lang="en"] .site-v5 .section-heading > p,
html[lang="en"] .site-v5 .product-card > p,
html[lang="en"] .site-v5 .service-card p,
html[lang="en"] .site-v5 .workflow-step p,
html[lang="en"] .site-v5 .contact-panel > div:first-child > p:last-child {
  line-height: var(--type-body-leading-en);
}

.site-v5 .product-card h3,
.site-v5 .service-card h3,
.site-v5 .workflow-step h3 {
  font-weight: var(--type-title-weight);
  text-wrap: balance;
}

html[lang="ar"] .site-v5 .product-card h3,
html[lang="ar"] .site-v5 .service-card h3,
html[lang="ar"] .site-v5 .workflow-step h3 {
  line-height: 1.55;
  letter-spacing: 0;
}

html[lang="en"] .site-v5 .product-card h3,
html[lang="en"] .site-v5 .service-card h3,
html[lang="en"] .site-v5 .workflow-step h3 {
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.site-v5 .header-nav a,
.site-v5 .mobile-section-nav a,
.site-v5 .header-actions a,
.site-v5 .button {
  font-family: var(--type-ar-body);
  font-size: 0.88rem;
  font-weight: var(--type-emphasis-weight);
  line-height: 1.45;
}

html[lang="en"] .site-v5 .header-nav a,
html[lang="en"] .site-v5 .mobile-section-nav a,
html[lang="en"] .site-v5 .header-actions a,
html[lang="en"] .site-v5 .button {
  font-family: var(--type-latin-body);
}

.site-v5 .brand-name strong {
  font-weight: var(--type-title-weight);
  line-height: 1.35;
}

.site-v5 .brand-name span,
.site-v5 .proof-item span,
.site-v5 .contact-link span {
  line-height: 1.6;
}

.site-v5 .proof-item strong,
.site-v5 .market,
.site-v5 .product-card li {
  font-weight: var(--type-emphasis-weight);
  line-height: 1.6;
}

.site-v5 .proof-item strong,
.site-v5 .contact-link strong {
  font-family: var(--type-latin-display);
}

.site-v5 .market {
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.site-v5 .product-card li {
  font-size: 0.8rem;
}

.site-v5 .contact-link strong {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}

.site-v5 .contact-link[href^="tel:"],
.site-v5 .contact-link[href^="mailto:"] {
  font-variant-numeric: tabular-nums;
}

.v5-enhanced:not(.v5-reduced) .site-v5 .hero-copy h1 {
  transition-duration: 620ms, 760ms;
}

@media (max-width: 640px) {
  :root {
    --type-display-ar: clamp(2.45rem, 10.6vw, 2.75rem);
    --type-display-en: clamp(2.35rem, 9.9vw, 2.65rem);
    --type-h2-ar: clamp(2rem, 8.8vw, 2.35rem);
    --type-h2-en: clamp(1.95rem, 8.4vw, 2.3rem);
  }

  .site-v5 .hero-lead,
  .site-v5 .section-heading > p,
  .site-v5 .product-card > p,
  .site-v5 .service-card p,
  .site-v5 .workflow-step p {
    font-size: 0.96rem;
  }

  .site-v5 .brand-name strong {
    font-size: 0.78rem;
    line-height: 1.3;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .site-v5 .header-actions .language-link {
    width: auto;
    min-width: 46px;
    min-height: 52px;
    padding-inline: 0.5rem;
    line-height: 1;
    overflow: visible;
    white-space: nowrap;
  }

  html[lang="en"] .site-v5 .hero h1 {
    line-height: 1.14;
  }

  .site-v5 .mobile-section-nav__inner {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-v5 *,
  .site-v5 *::before,
  .site-v5 *::after {
    transition-duration: 0.01ms !important;
  }
}