/* Editorial section title — centered, generous, separated from
 * the section content by a thin cyan accent and clear vertical
 * rhythm. No numbered chips. No glued-on eyebrow.
 *
 *   <header class="section-title">
 *     <span class="section-title__kicker">
 *       <span class="section-title__rule"></span>
 *       <span class="section-title__label">About</span>
 *       <span class="section-title__rule"></span>
 *     </span>
 *     <h2 class="section-title__heading">…</h2>
 *     <p class="section-title__lead">…</p>
 *   </header>
 */

.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
  margin-block-end: clamp(56px, 8vw, 96px);
  padding-block-end: clamp(24px, 4vw, 40px);
  position: relative;
}
.section-title::after {
  /* a single cyan dot drops below the title block — quiet
   * visual punctuation separating title from content. */
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(19, 181, 243, 0.10);
}

/* "Kicker" = the small label flanked by thin rules. */
.section-title__kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--brand);
}
.section-title__rule {
  width: clamp(28px, 4vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand));
}
.section-title__rule + .section-title__label + .section-title__rule {
  background: linear-gradient(-90deg, transparent, var(--brand));
}
.section-title__label {
  font-family: var(--font-en);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand);
}
[lang="ar"] .section-title__label {
  font-family: var(--font-ar);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.95rem;
}

.section-title__heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-1);
  line-height: 1.08;
  max-width: 22ch;
}
[lang="ar"] .section-title__heading {
  letter-spacing: -0.005em;
  line-height: 1.18;
}

.section-title__lead {
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.7;
  max-width: 58ch;
  margin-block-start: 6px;
}