/* =========================================================
   Contact (.mlp-contact-2)

   Nothing on this page sits on a solid fill: the form, its fields,
   the note and the closing band are all outlines on the paper. The
   map rides down the right-hand column beside the form, and the note
   arrives beneath it as the form ends.
   ========================================================= */

/* -------------------- hero -------------------- */

.mlp-contact-2 .mlp-hero-band { padding: 40px 0 26px; }
.mlp-contact-2 .mlp-hero-band-inner { gap: 36px; }

/* Matched to the home / About Zainab heading scale. */
.mlp-contact-2 .mlp-page-title {
	font-size: clamp(40px, 8vh, 68px);
	line-height: 1;
	margin: 0;
}
.mlp-contact-2 .mlp-collage { max-width: 452px; }

/* -------------------- the form, on paper -------------------- */

.mlp-contact-2 .mlp-form-card {
	background: transparent;
	border: 1px solid rgba(30, 27, 22, 0.12);
	padding: 36px 34px 30px;
}
.mlp-contact-2 .mlp-form-card h2 {
	max-width: 18ch;
	margin: 0 0 24px;
}

/* Fields are outlines only: the paper shows through, the border does
   the work of saying "type here". */
.mlp-contact-2 .mlp-field input,
.mlp-contact-2 .mlp-field select,
.mlp-contact-2 .mlp-field textarea {
	background: transparent;
	border: 1px solid rgba(30, 27, 22, 0.3);
	box-shadow: none;
}
.mlp-contact-2 .mlp-field input:hover,
.mlp-contact-2 .mlp-field select:hover,
.mlp-contact-2 .mlp-field textarea:hover {
	border-color: rgba(30, 27, 22, 0.48);
}
.mlp-contact-2 .mlp-field input:focus,
.mlp-contact-2 .mlp-field select:focus,
.mlp-contact-2 .mlp-field textarea:focus {
	background: transparent;
	border-color: var(--mlp-cobalt);
	box-shadow: 0 0 0 3px rgba(18, 56, 143, 0.10);
}
.mlp-contact-2 .mlp-field input::placeholder,
.mlp-contact-2 .mlp-field textarea::placeholder { color: #8F887C; }
.mlp-contact-2 .mlp-field select option { background: #F7F2E9; color: var(--mlp-ink); }

/* Browsers paint autofilled fields a solid colour; keep the paper. */
.mlp-contact-2 .mlp-field input:-webkit-autofill,
.mlp-contact-2 .mlp-field input:-webkit-autofill:hover,
.mlp-contact-2 .mlp-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--mlp-ink);
	transition: background-color 99999s ease 0s;
}

/* -------------------- the right-hand column --------------------
 * The column stretches to the form's height. The map lives in a rail
 * that takes all of that height except the note's, and sticks inside
 * it, so it travels down beside the form and comes to rest directly
 * above the note just as the form ends.
 */

.mlp-contact-2 .mlp-contact-grid { align-items: stretch; }

.mlp-contact-2 .mlp-contact-side {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mlp-contact-2 .mlp-map-rail { flex: 1 1 auto; }

.mlp-contact-2 .mlp-map-card {
	position: -webkit-sticky;
	position: sticky;
	top: 84px; /* clears the sticky logo bar */
	background: transparent;
	border: 1px solid rgba(30, 27, 22, 0.12);
	padding: 7px;
}
.mlp-contact-2 .mlp-map-card iframe {
	display: block;
	width: 100%;
	height: clamp(320px, 56vh, 470px);
	border: 0;
	filter: saturate(0.9);
}

.mlp-contact-2 .mlp-note-card {
	flex: 0 0 auto;
	background: transparent;
	border: 1px solid rgba(30, 27, 22, 0.12);
}

/* -------------------- the band, on paper -------------------- */

.mlp-contact-2 .mlp-cta-band {
	background: transparent;
	border: 1px solid rgba(30, 27, 22, 0.12);
}

/* -------------------- responsive -------------------- */

@media (max-width: 1024px) {
	.mlp-contact-2 .mlp-collage { max-width: 440px; }
	/* One column: the map follows the form rather than riding beside it. */
	.mlp-contact-2 .mlp-map-card { position: static; }
	.mlp-contact-2 .mlp-map-card iframe { height: 320px; }
}

@media (max-width: 760px) {
	.mlp-contact-2 .mlp-hero-band { padding: 30px 0 22px; }
	.mlp-contact-2 .mlp-hero-band-inner { gap: 22px; }
	.mlp-contact-2 .mlp-collage { max-width: 100%; min-height: 0; }
	.mlp-contact-2 .mlp-form-card { padding: 26px 18px 22px; }
	.mlp-contact-2 .mlp-form-card h2 { margin-bottom: 18px; }
	.mlp-contact-2 .mlp-map-card iframe { height: 260px; }
	.mlp-contact-2 .mlp-field input,
	.mlp-contact-2 .mlp-field select,
	.mlp-contact-2 .mlp-field textarea { font-size: 16px; } /* no iOS zoom on focus */
}