/* Contact is scoped to the final homepage section; established tokens are reused. */
.contact { padding-block: clamp(5rem, 8vw, 8rem); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem 1.5rem; border-top: 1px solid var(--border); padding-top: clamp(3rem, 5vw, 5rem); }
.contact__intro { grid-column: 1 / 7; }
.contact h2 { margin-block: 1.75rem; font-size: clamp(2.5rem, 4.4vw, 4rem); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.contact__copy { max-width: 38ch; color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.65; }
.contact__details { grid-column: 8 / -1; align-self: end; font-style: normal; min-width: 0; }
.contact__details > div { padding-block: 1.5rem; border-top: 1px solid var(--border); }
.contact__details .eyebrow { color: var(--muted-foreground); margin-bottom: .75rem; }
.contact__details a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; font-size: clamp(1.125rem, 1.7vw, 1.625rem); letter-spacing: -.025em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; overflow-wrap: anywhere; }
.contact__details .arrow { color: var(--accent); flex-shrink: 0; }
.contact__details a:hover { color: var(--accent); }
@media (max-width: 900px) {
  .contact__intro { grid-column: 1 / 8; }
  .contact__details { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 600px) {
  .contact { padding-block: 4rem; }
  .contact__grid { display: block; padding-top: 2.5rem; }
  .contact h2 { font-size: clamp(2rem, 8.5vw, 3rem); }
  .contact__copy { font-size: 1.0625rem; }
  .contact__details { display: block; margin-top: 2.5rem; }
  .contact__details a { font-size: clamp(1.125rem, 5vw, 1.5rem); }
}