/* Shared vertical rhythm for every content section after the Hero. */
:root {
  --section-edge-space: clamp(48px, 6vw, 72px);
}

main > section[id]:not(.hero) {
  padding-block: var(--section-edge-space);
}

/* The About gradient belongs to its primary inner panel. Keep the shared
   section rhythm inside that panel so no unpainted band appears above it. */
main > section.about[id] {
  padding-block: 0;
}

.about__primary {
  padding-block: var(--section-edge-space);
}

/* Footer uses the same outer rhythm as the content sections. */
.site-footer { padding-block: var(--section-edge-space); }

/* Original olive leads; its brighter partner stays readable at heading sizes. */
.objectives__heading h2,
.results__intro h2,
.reviews__heading h2,
.instagram-showcase__heading h2,
.office__copy h2,
.faq__intro h2 {
  color: var(--color-brand-olive);
}

.objectives__heading h2 em,
.results__intro h2 em,
.reviews__heading h2 strong,
.instagram-showcase__heading h2 strong,
.office__copy h2 em,
.faq__intro h2 em {
  color: var(--color-heading-accent-on-light);
  font-weight: inherit;
}

/* A fading, tapered rule instead of a solid decorative stroke. */
.objectives__eyebrow::after,
.consultation__intro .eyebrow::after,
.results__eyebrow::after,
.reviews__eyebrow::after,
.instagram-showcase__eyebrow::after,
.about__heading .eyebrow::after,
.office__copy .eyebrow::after,
.faq__intro .eyebrow i,
.site-footer__eyebrow i {
  height: 2px;
  background: linear-gradient(90deg, currentColor, transparent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: .6;
}

@media (max-width: 767px) {
  :root { --section-edge-space: 48px; }
}