/* Contact hierarchy and company information. */
.contact-layout {
  padding-bottom: var(--section-space);
}
.contact-details {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}
.contact-email {
  color: var(--color-brand);
  font-size: var(--text-card);
  line-height: var(--leading-card);
  letter-spacing: var(--tracking-heading);
}
.phone {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}
.contact-details h2,
.company-details h2 {
  font-size: var(--text-card);
  line-height: var(--leading-card);
}
.company-details {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-6);
  margin-bottom: var(--section-space);
  background: var(--color-surface);
  border-radius: var(--radius-panel);
}
.company-heading {
  display: grid;
  gap: var(--space-4);
}
.company-details dl {
  display: grid;
  gap: var(--space-6);
}
.company-details dl > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}
.company-details dt {
  color: var(--color-muted);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}
.company-details dd {
  font-variant-numeric: tabular-nums;
}
@media (min-width: 48rem) {
  .company-details {
    padding: var(--space-12);
  }
  .company-details dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .company-details dl > div {
    display: grid;
    align-content: start;
    gap: var(--space-3);
  }
}