/**
 * Contact Us page — Figma frame `106:15037`.
 * A centered title over a 1026px inquiry form, then the teal "Our Locations" band
 * holding two rows of three office cards.
 */

.contact {
  padding-top: 60px;
}

.contact__title {
  margin-bottom: 60px;
  font-size: var(--text-h2);
  line-height: 64px;
  font-weight: var(--weight-medium);
  letter-spacing: -1.12px;
  text-align: center;
  color: var(--color-grey-dark);
}

/* ============================================================
   Inquiry form
   ============================================================ */

/* Figma `106:15041`: the shared form card, held to 1026px and centered, with the Send
   button pulled to the right edge. Everything else comes from `.form-card`. */
.contact-form {
  align-items: flex-end;
  width: 1026px;
  max-width: 100%;
  margin-inline: auto;
}

.contact-form__submit {
  min-width: 153px;
  height: 50px;
  font-size: 18px;
  letter-spacing: 1.26px;
  box-shadow: var(--shadow-cta);
}

/* Neither of the next two blocks is in the design. The inquiry endpoint rejects a
   request with no reCAPTCHA token, so the widget has to be on the page, and a form that
   sends by fetch has to say what happened. */
.contact-form__captcha {
  align-self: flex-end;
}

.contact-form__status {
  align-self: stretch;
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-green-primary);
  text-align: right;
}

.contact-form__status.is-error {
  color: var(--color-rose);
}

/* ============================================================
   Our locations
   ============================================================ */

/* The band runs full-bleed teal behind the white cards. */
.offices {
  margin-top: 60px;
  padding: 60px var(--gutter);
  background: linear-gradient(120deg, var(--color-green-primary) 0%, #016470 60%, #015a66 100%);
}

.offices__title {
  margin-bottom: 60px;
  font-size: var(--text-h2);
  line-height: 64px;
  font-weight: var(--weight-semibold);
  text-align: center;
  color: var(--text-inverse);
}

.offices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  width: min(1286px, 100%);
  margin-inline: auto;
}

/* Figma `106:15068`: a white card on a 0.8px hairline, 30px padding, 14px radius. */
.office {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px;
  border: 0.8px solid #e5e7eb;
  border-radius: var(--radius-control-lg);
  background: var(--color-white);
}

.office__name {
  padding-bottom: 5px;
  border-bottom: 0.8px solid var(--color-grey-light);
  font-size: var(--text-h3);
  line-height: 28px;
  font-weight: var(--weight-semibold);
  color: var(--color-green-primary);
}

/* Pushes the emergency strip to the foot however tall the address runs. */
.office__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
}

.office__where {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.office__address {
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-grey-secondary);
}

.office__note {
  font-size: var(--text-xs);
  line-height: 16px;
  color: var(--color-grey);
}

.office__reach {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.office__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  line-height: 20px;
  font-weight: 300;
  color: var(--color-grey-dark);
}

.office__row .icon {
  margin-top: 2px;
  color: var(--color-green-primary);
}

.office__row a {
  color: inherit;
}

.office__emergency {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-top: 15px;
  border-top: 0.8px solid var(--color-grey-light);
}

.office__emergency .icon {
  color: #8c6f5a;
}

.office__emergency-label {
  display: block;
  font-size: 9px;
  line-height: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: #8c6f5a;
}

.office__emergency-number {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  line-height: 20px;
  font-weight: var(--weight-medium);
  color: #364153;
}

.office__pin {
  flex: none;
  width: 30px;
  height: 30px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1180px) {
  .offices__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .contact {
    padding-top: var(--space-22);
  }

  .contact__title,
  .offices__title {
    margin-bottom: var(--space-8);
    line-height: normal;
  }

  .contact-form__submit {
    width: 100%;
  }

  .offices {
    margin-top: var(--space-10);
    padding-block: var(--space-22);
  }

  .offices__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}