/* Contact page — mobile-first. Layout rhythm follows tokens/layout.css + tokens/spacing.css;
   typography follows the token system's two-tier (mobile / desktop) contract in tokens/typography.css.
   Only two tiers beyond mobile are used (834px, 1440px) — the source mockup has no 1200px frame. */

/* ---------- Contact hero ---------- */
.contact-hero {
  padding: var(--dl-space-4) var(--dl-gutter-mobile) var(--dl-space-3);
  border-top: var(--dl-border-hairline) solid var(--dl-border-default);
  display: flex; flex-direction: column; gap: var(--dl-space-3);
}
.contact-hero__copy { display: flex; flex-direction: column; gap: var(--dl-space-2); }
.contact-hero__eyebrow {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--dl-text-accent); text-transform: uppercase;
}
.contact-hero__title {
  font-size: var(--dl-h1-size-mobile); font-weight: var(--dl-weight-semibold);
  line-height: var(--dl-h1-lh); letter-spacing: var(--dl-h1-tracking);
  text-wrap: pretty;
}
.contact-hero__lead { font-size: var(--dl-body-size-mobile); line-height: var(--dl-body-lh); color: var(--dl-text-body); max-width: 46ch; }
.contact-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dl-space-2); }
.contact-hero__note { font-size: var(--dl-body-small-size-mobile); color: var(--dl-text-secondary); }

.contact-hero__details {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: var(--dl-space-3); border-top: var(--dl-border-hairline) solid var(--dl-border-default);
  font-size: var(--dl-body-small-size-mobile);
}
.contact-hero__details dt {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  color: var(--dl-text-secondary); text-transform: uppercase; margin-top: var(--dl-space-2);
}
.contact-hero__details dt:first-child { margin-top: 0; }
.contact-hero__details dd { margin: 0; color: var(--dl-text-primary); }

@media (min-width: 834px) {
  .contact-hero { padding: var(--dl-space-6) var(--dl-gutter-tablet) var(--dl-space-5); gap: var(--dl-space-4); }
  .contact-hero__actions { flex-direction: row; align-items: center; gap: var(--dl-space-3); }
}

@media (min-width: 1440px) {
  .contact-hero {
    padding: var(--dl-space-8) var(--dl-gutter-desktop) var(--dl-space-7);
    display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--dl-space-6); align-items: start;
  }
  .contact-hero__title { font-size: var(--dl-h1-size); }
  .contact-hero__lead { font-size: var(--dl-body-size); max-width: 38ch; }
  .contact-hero__actions { align-items: flex-start; flex-direction: row; }
  .contact-hero__details { border-top: none; padding-top: 0; align-self: start; max-width: 360px; }
}

/* ---------- Reasons to contact ---------- */
.contact-reasons {
  padding: var(--dl-space-4) var(--dl-gutter-mobile) var(--dl-space-5);
  border-top: var(--dl-border-hairline) solid var(--dl-border-default);
  display: flex; flex-direction: column; gap: var(--dl-space-3);
}
.contact-reasons__label {
  font-family: var(--dl-font-mono); font-size: 11px; letter-spacing: var(--dl-label-tracking);
  color: var(--dl-text-accent); text-transform: uppercase;
}
.contact-reasons__grid {
  display: flex; flex-direction: column; gap: 0;
  border-top: var(--dl-border-hairline) solid var(--dl-border-default);
}
.contact-reasons__item {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--dl-space-2) 0;
  border-bottom: var(--dl-border-hairline) solid var(--dl-border-default);
}
.contact-reasons__title { font-size: var(--dl-body-size-mobile); font-weight: var(--dl-weight-medium); color: var(--dl-text-primary); }
.contact-reasons__text { font-size: var(--dl-body-small-size-mobile); color: var(--dl-text-body); }
.contact-reasons__footnote {
  font-family: var(--dl-font-mono); font-size: 12px; color: var(--dl-text-secondary);
}

@media (min-width: 834px) {
  .contact-reasons { padding: var(--dl-space-5) var(--dl-gutter-tablet) var(--dl-space-6); }
  .contact-reasons__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--dl-space-4);
    border-top: none;
  }
  .contact-reasons__item {
    border-top: var(--dl-border-hairline) solid var(--dl-border-default);
    border-bottom: none;
    padding: var(--dl-space-3) 0;
  }
}

@media (min-width: 1440px) {
  .contact-reasons { padding: var(--dl-space-6) var(--dl-gutter-desktop) var(--dl-space-7); gap: var(--dl-space-4); }
  .contact-reasons__grid { grid-template-columns: repeat(3, 1fr); gap: 0 var(--dl-space-5); }
  .contact-reasons__title { font-size: var(--dl-body-size); }
  .contact-reasons__text { font-size: var(--dl-body-small-size); }
}