html { font-family: "El Messiri", Tahoma, Arial, sans-serif; }
body {
  min-width: 320px;
  background: var(--wasla-ivory);
  color: var(--text-on-light);
  font-family: "El Messiri", Tahoma, Arial, sans-serif;
  line-height: 1.65;
}

body,
button, input, select, textarea,
a,
h1, h2, h3, h4, h5, h6 {
  font-family: "El Messiri", Tahoma, Arial, sans-serif;
}
.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.section { padding: 84px 0; }
.section__eyebrow { color: var(--wasla-gold); font-weight: 800; letter-spacing: .02em; margin-bottom: 10px; }
.section__title { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.15; margin-bottom: 18px; }
.section__lead { max-width: 720px; color: var(--text-muted-light); font-size: 1.08rem; }
.textured-zone {
  background:
    linear-gradient(rgba(34, 3, 9, .38), rgba(34, 3, 9, .52)),
    url('/assets/brand/wasla-texture-approved-v1.png') center/cover no-repeat;
  color: var(--text-on-dark);
}

/* v0.13 accessibility hardening */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wasla-gold);
  outline-offset: 3px;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .container { width: min(calc(100% - 24px), var(--container)); }
}