/* ═══════════════════════════════════════════════════════
   InnoDexis — Shared Section Heading Styles
   Used by all pages. CSS variables resolved per-page :root.
═══════════════════════════════════════════════════════ */

/* ── Section Eyebrow (light / on-cream backgrounds) ── */
.s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--purple);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.s-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--purple);
  flex-shrink: 0;
}

/* ── Section Title ── */
.s-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 44px);
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 16px;
}
.s-title em {
  font-style: italic;
  color: var(--purple);
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
}

/* ── Section Subtitle ── */
.s-sub {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--ink3);
  line-height: 1.8;
  font-weight: 300;
}

/* ── Hero Eyebrow (dark / on-dark backgrounds) ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #67E8F9;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: #67E8F9;
  flex-shrink: 0;
}