.contacts {
  width: min(960px, 92%);
  color: var(--navy);
  padding: 28px 0 36px;
}

.contacts h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
}

.contacts-lead {
  margin: 0 0 18px;
  color: var(--copy);
  font-size: 15px;
  line-height: 1.5;
}

.contacts-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-block: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.contacts-column { padding-inline: clamp(16px, 2.5vw, 24px); }
.contacts-column + .contacts-column { border-inline-start: 1px solid var(--line); }

.contacts-panel h2 {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.contacts h2 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: normal;
}

.contact-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  line-height: 1.45;
}

.contacts-column .contact-row {
  align-items: start;
  gap: 10px;
}
.contacts-column .contact-row + .contact-row { margin-top: 10px; }

.contact-icon {
  display: inline-flex;
  align-self: start;
  margin-top: 3px;
  color: var(--blue);
}
.contact-icon svg { width: 17px; height: 17px; }


.contact-row a { color: inherit; overflow-wrap: anywhere; }
.contact-row a:hover { text-decoration: underline; }

.contact-row .contact-phone {
  color: var(--blue);
  font-size: 19px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.015em;
  white-space: nowrap;
}

.contact-row small {
  display: block;
  margin-top: 2px;
  color: var(--copy);
  font-size: 13px;
  line-height: 1.45;
}

.office h3 { margin: 0; font-size: 15px; line-height: inherit; font-weight: 650; }
.office address {
  margin-top: 2px;
  max-width: 36ch;
  color: var(--copy);
  font-size: 14px;
  font-style: normal;
  line-height: 1.45;
}

.contacts-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.contacts-details .contact-row { align-items: start; font-size: 14px; }
.contacts-details h2 { margin-bottom: 3px; font-size: 14px; }

@media (max-width: 640px) {
  .contacts { padding-block: 20px 28px; }
  .contacts-panel, .contacts-details { grid-template-columns: minmax(0, 1fr); }
  .contacts-column + .contacts-column {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 14px;
  }
  .contacts-details { gap: 10px; }
}