/*
  Sowghati locale typography.
  Arabic intentionally inherits the original shared Sahel stack.
  English keeps an editorial display voice only where it adds value; middle-page
  content uses a restrained modern UI sans for a cleaner premium reading rhythm.
*/

:root {
  --font-en-ui: "Segoe UI Variable Text", "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-en-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --font-en-section: "Segoe UI Variable Display", "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html[lang="en"] body {
  font-family: var(--font-en-ui);
  line-height: 1.7;
  letter-spacing: -0.006em;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] .nav,
html[lang="en"] .langs,
html[lang="en"] .btn,
html[lang="en"] .chip {
  font-family: var(--font-en-ui);
}

/* Brand and hero retain an editorial display character. */
html[lang="en"] .brand {
  font-family: var(--font-en-display);
  font-weight: 700;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -0.035em;
}

html[lang="en"] .nav {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

html[lang="en"] .langs a {
  letter-spacing: 0.012em;
}

html[lang="en"] .hero .eyebrow {
  font-family: var(--font-en-ui);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[lang="en"] .hero h1,
html[lang="en"][data-mode="light"] .hero h1 {
  font-family: var(--font-en-display);
  max-width: 650px;
  font-size: clamp(50px, 4.35vw, 68px);
  font-weight: 700;
  line-height: 1.01;
  letter-spacing: -0.046em;
  text-wrap: balance;
}

html[lang="en"] .hero p,
html[lang="en"][data-mode="light"] .hero p {
  max-width: 620px;
  font-family: var(--font-en-ui);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: -0.004em;
}

html[lang="en"] .hero .btn {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.008em;
}

/* Middle-page hierarchy: modern sans rather than the heavy serif treatment. */
html[lang="en"] h2,
html[lang="en"] .panel h2,
html[lang="en"] .b2b h2,
html[lang="en"] .footer h2 {
  font-family: var(--font-en-section);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.028em;
}

html[lang="en"] section > .section-head h2 {
  font-size: clamp(30px, 2.55vw, 39px);
}

html[lang="en"] .lead {
  font-family: var(--font-en-ui);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -0.003em;
}

html[lang="en"] .city-copy h3,
html[lang="en"] .product-body h3,
html[lang="en"] .guide-card h3,
html[lang="en"] .value-card h3,
html[lang="en"] .benefit h3,
html[lang="en"] .person b {
  font-family: var(--font-en-section);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -0.022em;
}

html[lang="en"] .city-copy h3 {
  font-size: 27px;
}

html[lang="en"] .city-copy p {
  font-family: var(--font-en-ui);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

html[lang="en"] .chip {
  font-family: var(--font-en-ui);
  font-size: 13.5px;
  font-weight: 620;
  line-height: 1.4;
  letter-spacing: -0.006em;
  padding-inline: 13px;
}

html[lang="en"] .product-body h3,
html[lang="en"] .guide-card h3 {
  font-size: 20px;
}

html[lang="en"] .value-card h3 {
  font-size: 22px;
}

html[lang="en"] .product-body small,
html[lang="en"] .guide-card small {
  font-family: var(--font-en-ui);
  font-weight: 620;
  letter-spacing: 0.012em;
}

html[lang="en"] .product-body p,
html[lang="en"] .guide-card p,
html[lang="en"] .value-card p,
html[lang="en"] .person p,
html[lang="en"] .footer p,
html[lang="en"] .panel > p,
html[lang="en"] .benefit p,
html[lang="en"] .form-card p {
  font-family: var(--font-en-ui);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -0.002em;
}

html[lang="en"] .hero-copy > .badge {
  font-family: var(--font-en-ui);
  font-weight: 650;
  letter-spacing: 0.025em;
}

/* No html[lang="ar"] override by design: Arabic returns to the original Sahel system. */

@media (max-width: 1220px) {
  html[lang="en"] .brand { font-size: 29px; }
  html[lang="en"] .hero h1,
  html[lang="en"][data-mode="light"] .hero h1 {
    font-size: clamp(46px, 5vw, 62px);
  }
}

@media (max-width: 1000px) {
  html[lang="en"] .hero h1,
  html[lang="en"][data-mode="light"] .hero h1 {
    max-width: 700px;
    font-size: clamp(44px, 7vw, 58px);
  }
  html[lang="en"] .hero p,
  html[lang="en"][data-mode="light"] .hero p {
    max-width: 680px;
  }
  html[lang="en"] .city-copy h3 { font-size: 25px; }
}

@media (max-width: 680px) {
  html[lang="en"] .brand { font-size: 25px; }
  html[lang="en"] .hero .eyebrow {
    font-size: 11px;
    letter-spacing: 0.07em;
  }
  html[lang="en"] .hero h1,
  html[lang="en"][data-mode="light"] .hero h1 {
    font-size: clamp(35px, 10.5vw, 45px);
    line-height: 1.03;
    letter-spacing: -0.04em;
  }
  html[lang="en"] .hero p,
  html[lang="en"][data-mode="light"] .hero p {
    font-size: 15.5px;
    line-height: 1.68;
  }
  html[lang="en"] section > .section-head h2 {
    font-size: clamp(27px, 8vw, 34px);
  }
  html[lang="en"] .city-copy h3 { font-size: 24px; }
  html[lang="en"] .chip { font-size: 13px; }
}