/* ───────────────────────────────────────────────────────────────────────────
   Caviar Maison — Contact page
   ─────────────────────────────────────────────────────────────────────────── */

.m-contact { padding-bottom: 120px; }

.m-contact__header { max-width: var(--content-max); margin: 0 auto; padding: 88px var(--gutter) 0; }
.m-contact__title { font-family: var(--serif); font-weight: 400; font-size: var(--display-m); color: var(--ivory); margin: 14px 0 0; line-height: 1.02; }
.m-contact__intro { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.6; color: var(--mute); margin-top: 18px; max-width: 560px; }

.m-contact__grid {
  max-width: var(--content-max); margin: 0 auto; padding: 56px var(--gutter) 0;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start;
}

/* Details column */
.m-contact__row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.m-contact__row dt { font-family: var(--sans); font-size: var(--micro); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin: 0; padding-top: 4px; }
.m-contact__row dd { margin: 0; font-family: var(--serif); font-size: 18px; color: var(--ivory); line-height: 1.55; }
.m-contact__row dd a { border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.m-contact__row dd a:hover { color: var(--gold-light); border-color: var(--gold-light); }

/* Form column */
.m-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.m-contact-form__submit { margin-top: 8px; padding-left: 40px; padding-right: 40px; }

/* Map band — Google embed darkened to sit in the Maison palette. */
.m-contact__map { max-width: var(--content-max); margin: 0 auto; padding: 72px var(--gutter) 100px; }
.m-contact__map-label { margin-bottom: 18px; }
.m-contact__map-frame { position: relative; aspect-ratio: 2.4 / 1; border: 1px solid var(--line-solid); background: var(--bg-2); overflow: hidden; }
.m-contact__map-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0;
  filter: grayscale(1) invert(0.9) contrast(0.86) brightness(0.96);
}

@media (max-width: 900px) {
  .m-contact__grid { grid-template-columns: 1fr; gap: 48px; }
  .m-contact__details { order: 2; }
  .m-contact-form__row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .m-contact__header { padding-top: 56px; }
  .m-contact__row { grid-template-columns: 90px 1fr; gap: 14px; }
  .m-contact__map { padding: 56px var(--gutter) 72px; }
  .m-contact__map-frame { aspect-ratio: 4 / 3; }
}