/* ==========================================================================
   Module: contact — intro + form/aside + office maps.
   Reproduces design_files/Contact.dc.html. Tokens only; no hardcoded hex.
   ========================================================================== */

/* ---------- Intro ---------- */
.m-contact__intro { padding-bottom: clamp(40px, 6vh, 64px); }
.m-contact__eyebrow { color: var(--muted); margin-bottom: clamp(26px, 4vh, 42px); }
.m-contact__title { max-width: 12ch; }
.m-contact__lead { margin-top: clamp(24px, 3.4vh, 36px); max-width: 50ch; }

/* ---------- Form + aside ---------- */
.m-contact__main { padding-top: clamp(20px, 3vh, 40px); }
.m-contact__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(40px, 6vw, 100px);
  border-top: 1px solid var(--ink);
  padding-top: clamp(40px, 5vh, 64px);
}
.m-contact__form { flex: 1 1 520px; max-width: 760px; }

/* Stack of fields. Mirrors the GF spacing too via the wrapping div. */
.m-contact__static {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.2vh, 34px);
}
.m-contact__row { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 40px); }
.m-contact__field { flex: 1 1 240px; }
.m-contact__static select { cursor: pointer; }
.m-contact__static .btn { align-self: flex-start; margin-top: 8px; }

/* ---------- Aside ---------- */
.m-contact__aside {
  flex: 1 1 280px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 40px);
}
.m-contact__emergency {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--bd-light-2);
  padding: 16px 18px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.m-contact__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.m-contact__emergency-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mono-muted);
}
.m-contact__emergency-phone { font-weight: 500; font-size: 1.4rem; color: var(--ink); }

.m-contact__office-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.m-contact__office-addr {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-strong-2);
}

.m-contact__people {
  border-top: 1px solid var(--bd-light-2);
  padding-top: clamp(20px, 3vh, 28px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.m-contact__person-name { font-weight: 600; font-size: 15px; }
.m-contact__person-phone {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  transition: color var(--t-fast);
}
.m-contact__person-phone:hover { color: var(--accent); }
.m-contact__person-email { display: block; margin-top: 4px; overflow-wrap: anywhere; }

/* ---------- (01) Our offices: maps ---------- */
.m-contact__maps { padding-top: clamp(8px, 1.5vh, 20px); }
.m-contact__maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
}
.m-contact__map { display: flex; flex-direction: column; }
.m-contact__map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.m-contact__map-head .m-contact__office-label { margin-bottom: 8px; }
.m-contact__directions {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--bd-light-3);
  padding: 8px 12px;
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.m-contact__directions:hover { border-color: var(--accent); color: var(--ink); }
.m-contact__map-frame {
  position: relative;
  height: clamp(300px, 42vh, 440px);
  border: 1px solid var(--bd-light-2);
  overflow: hidden;
  background: var(--dark);
}
.m-contact__map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4) contrast(1.03);
}