.contact-map {
  position: relative;
  min-height: 520px;
  margin: 0 var(--site-gutter) 90px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: #102b38;
}
.contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.8) contrast(1.04); transition: filter .22s ease; }
:root[data-theme="dark"] .contact-map iframe { filter: invert(.88) hue-rotate(180deg) brightness(.7) contrast(1.12) saturate(.7); }
.contact-map > div {
  position: absolute;
  left: 24px;
  bottom: 24px;
  max-width: 460px;
  padding: 24px;
  color: #eef5f7;
  background: rgba(16, 43, 56, .94);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
}
.contact-map h2 { margin: 5px 0 6px; }
.contact-map p { margin: 0 0 18px; color: #c7d5dc; line-height: 1.6; }
@media (max-width: 640px) {
  .contact-map { min-height: 480px; margin: 0 14px 55px; }
  .contact-map > div { left: 12px; right: 12px; bottom: 12px; padding: 19px; }
}