/* sections/contact-main.php */
.cm-section {
	box-sizing: border-box; width: 100%;
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--space-gutter);
	--cm-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	background: var(--c-bg-alt); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.cm-section *, .cm-section *::before, .cm-section *::after { box-sizing: border-box; }
.cm-icon { flex: none; width: 1.25rem; height: 1.25rem; }
.cm-wrap { display: grid; gap: var(--space-6); max-width: var(--container); margin: 0 auto; }
.cm-wrap > * { min-width: 0; }
.cm-inner { display: grid; gap: var(--space-6); }
.cm-inner > * { min-width: 0; }

/* Contact details: a row of cards above the form and the map */
.cm-cards { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.cm-cards > li { display: grid; min-width: 0; }
/* Dark cards: the site's reference navy (#061e48) */
.cm-section .cm-card {
	display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-3); align-items: center;
	padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--c-on-dark) 10%, transparent); border-radius: var(--radius);
	background: var(--cm-blue); color: var(--c-on-dark); box-shadow: var(--shadow-md); text-decoration: none;
	transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.cm-card-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--c-on-dark) 10%, transparent); color: var(--c-primary-light); transition: background-color 0.25s, color 0.25s; }
.cm-card--urgent .cm-card-icon { background: var(--c-accent); color: var(--c-on-accent); }
.cm-card-label { display: block; color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); font-size: var(--fs-xs); font-weight: 600; }
.cm-card-value { display: block; color: var(--c-on-dark); font: 700 var(--fs-base)/1.3 var(--f-heading); overflow-wrap: anywhere; }
.cm-section a.cm-card:hover, .cm-section a.cm-card:focus { border-color: var(--c-primary-light); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
a.cm-card:not(.cm-card--urgent):hover .cm-card-icon, a.cm-card:not(.cm-card--urgent):focus .cm-card-icon { background: var(--c-primary-light); color: var(--cm-blue); }
.cm-section a.cm-card:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }

/* The shared form card and the map, same height */
.cm-form-col { display: grid; grid-template-columns: minmax(0, 1fr); }
.cm-form-col > .qf-card { min-width: 0; scroll-margin-top: 6rem; }
.cm-map {
	position: relative; overflow: hidden; min-height: 20rem; margin: 0;
	border-radius: var(--radius-lg) 3rem var(--radius-lg) 3rem; background: var(--c-primary-soft); box-shadow: var(--shadow-md);
}
.cm-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cm-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 600; }
.cm-trust span { display: inline-flex; align-items: center; gap: var(--space-2); }
.cm-trust strong { color: var(--c-heading); }
.cm-trust .cm-logo { width: 1.125rem; height: 1.125rem; }
.cm-trust .cm-stars { display: inline-flex; color: var(--c-star); }
.cm-trust .cm-stars .cm-icon { width: 0.875rem; height: 0.875rem; fill: currentColor; stroke: none; }
.cm-trust .cm-check .cm-icon { width: 1rem; height: 1rem; color: var(--c-success); }

@media (min-width: 480px) {
	.cm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.cm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
	.cm-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); align-items: stretch; }
	.cm-map { min-height: 0; } /* the map is exactly as tall as the form */
}
@media (prefers-reduced-motion: reduce) {
	.cm-section * { transition: none !important; }
}