.text-gold { color: var(--color-gold); }
.text-orange { color: var(--color-orange); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-surface { background-color: var(--color-surface); }

.section-py { padding-block: var(--space-8); }
.section-py-sm { padding-block: var(--space-6); }

.gap-space-2 { gap: var(--space-2); }
.gap-space-3 { gap: var(--space-3); }

/* Gold reserved for accents/buttons/icons per BRANDING.md — never as standalone
   text color on light backgrounds (fails WCAG AA contrast). This label keeps
   the gold as a small accent bar instead of coloring the text itself. */
.eyebrow-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-charcoal);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.eyebrow-label::before {
  content: "";
  width: 24px;
  height: 3px;
  background-color: var(--color-gold);
  border-radius: 2px;
}