/* ==========================================================================
   TradeForma — Contact page ("Private Trading House" edition)
   The form column and the aside share one hairline baseline, and the map
   plate below closes the page on the same content width as the columns.
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

/* ---------- Column heads ----------
   Identical rule + leading on both columns, so the two heads sit on the
   same line instead of one rule floating above the other column's type. */
.form-wrapper,
.contact-info {
  border-top: 1px solid var(--ink);
  padding-top: 1.6rem;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.contact-info .ci-label {
  color: var(--smoke);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-info .ci-label .mark { width: 6px; height: 6px; }
.contact-info address { font-style: normal; color: var(--ink); }
.contact-info a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-l); padding-bottom: 2px; transition: color .25s ease, border-color .25s ease; }
.contact-info a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }

/* ---------- Map plate ----------
   figure carries a 40px inline margin from the UA stylesheet; zeroing it
   is what lets the plate run the full content width. */
.contact-map {
  margin: clamp(4rem, 7vw, 7rem) 0 0;
  border: 1px solid var(--rule);
  background: var(--paper);
}
/* Frame the image itself (not the caption), so the caption reads as a
   plate label on a hairline rather than a line cut across the picture. */
.contact-map picture {
  display: block;
  position: relative;
  width: 100%;
}
.contact-map picture::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--gold-soft);
  pointer-events: none;
}
.contact-map img {
  width: 100%;
  height: auto;
  filter: grayscale(0.6) contrast(1.04) sepia(0.18);
  pointer-events: none;
  user-select: none;
}
.contact-map figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--rule);
  color: var(--smoke);
}
.contact-map figcaption .tnum { font-feature-settings: "tnum" 1; }

@media (max-width: 820px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .contact-map { margin-top: 3rem; }
}