/* Contact hero */
.contact-hero {
  padding: var(--hero-top) 0 calc(60 * var(--u));
  border-bottom: 1px solid var(--color-sage-line);
  margin: 0 var(--page-gutter);
}

/* Contact info */
.contact-body {
  padding: calc(100 * var(--u)) var(--page-gutter) var(--section-space);
  display: flex;
  justify-content: center;
}

.contact-box {
  width: 100%;
  max-width: calc(920 * var(--u));
}

.contact-intro {
  font-weight: var(--body-r-weight);
  font-size: max(var(--font-min), calc(24 * var(--fu)));
  line-height: 1.4;
  margin-bottom: calc(70 * var(--u));
}

/* heading + WhatsApp button, side by side */
.contact-quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  margin-bottom: calc(36 * var(--u));
}

.contact-quick-title {
  font-weight: var(--body-b-weight);
  font-size: var(--h3-size);
  color: var(--color-persian-plum);
}

.contact-list {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: calc(28 * var(--u)) 0;
  border-top: 1px solid var(--color-rose-line);
  font-size: max(var(--font-min), calc(16 * var(--fu)));
}

.contact-list .contact-row:last-child {
  border-bottom: 1px solid var(--color-rose-line);
}

.contact-label {
  color: var(--color-black);
}

.contact-value {
  text-align: right;
  font-weight: var(--body-b-weight);
  font-size: max(var(--font-min), calc(20 * var(--fu)));
  color: var(--color-persian-plum);
}

/* hours + reply-time note, under the list */
.contact-hours {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(40 * var(--u));
  padding-top: calc(28 * var(--u));
}

.contact-hours-text {
  font-weight: var(--body-b-weight);
  font-size: max(var(--font-min), calc(16 * var(--fu)));
  color: var(--color-persian-plum);
}

.contact-hours-note {
  font-size: max(var(--font-min), calc(16 * var(--fu)));
  color: var(--color-pine-forest);
  text-align: right;
}

@media (max-width: 600px) {
  .contact-quick {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(24 * var(--u));
  }

  .contact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8 * var(--u));
  }

  .contact-value {
    text-align: left;
  }

  .contact-hours {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(12 * var(--u));
  }

  .contact-hours-note {
    text-align: left;
  }
}