/* ============================================================
   80-contact-hero — Contact Us page hero + three-fold-approach
   intro copy. Structural/positioning styles for the compact hero
   shell come from css/sections/00-interior-hero.css; this file
   only adds what's unique to the Contact page.
   Scoped under .sec-80-contact-hero / .sec-80-contact-approach
   ============================================================ */

.sec-80-contact-hero .sec-00-inthero__chip strong {
  color: hsl(var(--accent-h) 70% 66%);
}

/* --- Three-fold approach intro copy --- */
.sec-80-contact-approach__grid {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.sec-80-contact-approach__lead h2 {
  margin-top: 0.75rem;
  max-width: 14ch;
}

.sec-80-contact-approach__body p {
  color: var(--text-on-bone-dim);
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 62ch;
  margin-bottom: 1.2rem;
}
.sec-80-contact-approach__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .sec-80-contact-approach__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}