.contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.contact-info { display: flex; flex-direction: column; gap: 28px; }
.contact-info__heading { font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--color-accent); }
.contact-info a { color: var(--color-accent); }
.contact-info a:hover { text-decoration: underline; }
.contact-media { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.contact-media__figure { margin: 0; }
.contact-media__photo { width: 100%; aspect-ratio: 1; object-fit: cover; }
.contact-media__caption { margin-top: 8px; font-size: 14px; line-height: 1.4; }
.contact-media__caption b { display: block; font-weight: 700; }
.map { margin: 0; }
.map__attribution { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--color-muted); }
.map__attribution a { text-decoration: underline; }

/* ── Google Maps embed ─────────────────────────────────────── */
/* Full-width band at the bottom of the page. On a tall screen the page's main grows, so push the map
   to the bottom of it: it then always touches the footer. */
main:has(> .contact-map) { display: flex; flex-direction: column; }
.contact-map { margin-top: auto; height: max(200px, 50vh); background: var(--color-sand); }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .contact-media { grid-template-columns: 1fr; }
}