/*
 * Contact grid, map card and steps card (spec §4.19) [M computed] [M js:1802190c].
 * Grid: 1 column (gap 32); from 1024 12 columns, gap 48: aside spans 5 (space-y 32), form spans 7.
 */
.contact-grid { display: grid; gap: calc(var(--spacing) * 8); }
.contact-grid__aside { display: flex; flex-direction: column; gap: calc(var(--spacing) * 8); }
@media (min-width: 64rem) {
	.contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--spacing) * 12); }
	.contact-grid__aside { grid-column: span 5 / span 5; }
	.contact-grid__form { grid-column: span 7 / span 7; }
}

/* Map card: radius 16, border gray-100, shadow-lg, overflow hidden; map 200 tall; body p 16 white. 425.3×315 at 1440 */
.contact-map { overflow: hidden; border: 1px solid var(--color-gray-100); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }

/*
 * Map area: the self-hosted OSM image at native size (object-fit: none, centred = the pin on the address; the file is
 * 1000 wide, wider than the card at any width), 200 tall as live. The OSM credit sits in the corner the way OSM's own
 * map shows it [D: anchor = OSM's attribution control: bottom corner, small, white/0.8 backing → here 12/16 on white-80,
 * gray-600 text, the card's radius-lg].
 */
.contact-map__media { position: relative; height: 200px; overflow: hidden; background-color: var(--color-gray-100); }
.contact-map__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: none; object-position: center; }
.contact-map__credit {
	position: absolute;
	inset-inline-end: 0;
	bottom: 0;
	padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
	border-start-start-radius: var(--radius-lg);
	background-color: var(--color-white-80);
	font-size: var(--text-xs);
	line-height: var(--text-xs-lh);
	color: var(--color-gray-600);
}
.contact-map__credit a { text-decoration: underline; text-decoration-color: var(--color-gray-300); }
.contact-map__credit a:hover { color: var(--color-brand-dark); }
.contact-map__body { padding: calc(var(--spacing) * 4); background-color: var(--color-white); }
.contact-map__title { margin-bottom: calc(var(--spacing) * 1); font-weight: var(--font-weight-bold); color: var(--color-brand-dark); }
.contact-map__address { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-gray-600); }
.contact-map__link {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	margin-top: calc(var(--spacing) * 3);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	font-weight: var(--font-weight-semibold);
	color: var(--color-brand-orange);
	transition: color var(--duration-fast) var(--ease-default);
}
.contact-map__link:hover { color: var(--color-orange-600); }

/* Steps card: gray-50, radius 16, p 24; H3 16/24 bold mb 16; list space-y 12; 24×24 #222 circles, 12/16 bold white, mt 2 */
.contact-steps { padding: calc(var(--spacing) * 6); border-radius: var(--radius-2xl); background-color: var(--color-gray-50); }
.contact-steps__title { margin-bottom: calc(var(--spacing) * 4); font-weight: var(--font-weight-bold); color: var(--color-brand-dark); }
.contact-steps__list { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); }
.contact-steps__item { display: flex; align-items: flex-start; gap: calc(var(--spacing) * 3); }
.contact-steps__num {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: calc(var(--spacing) * 6);
	height: calc(var(--spacing) * 6);
	margin-top: calc(var(--spacing) * 0.5);
	border-radius: var(--radius-full);
	background-color: var(--color-brand-dark);
	color: var(--color-white);
	font-size: var(--text-xs);
	line-height: var(--text-xs-lh);
	font-weight: var(--font-weight-bold);
}
.contact-steps__text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-gray-700); }