/* Reusable components: text styles, buttons, reveal animation. */
.eyebrow {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.eyebrow--muted { color: var(--color-muted); letter-spacing: var(--tracking-wide); }
.eyebrow--soft { color: var(--color-on-dark-soft); }

.section-title { font-size: var(--text-h2); line-height: 1; }

.lead { font-size: var(--text-md); line-height: 1.7; font-weight: 300; }

/* Buttons */
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn--solid { background: var(--color-ink); color: var(--color-bg); }
.btn--solid:hover { background: var(--color-muted); }
.btn--outline { border: 1px solid var(--color-ink); }
.btn--outline:hover { background: var(--color-ink); color: var(--color-bg); }
.btn--light { background: var(--color-on-dark); color: var(--color-ink); min-height: 52px; padding: 0 36px; }
.btn--light:hover { background: var(--color-on-dark-soft); }

/* Scroll reveal — only active when JS has loaded (html.js), so content never stays hidden. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}