/* ==========================================================================
   Responsive Styles
   Media queries are grouped by width from largest to smallest.
   ========================================================================== */

/* Tablet and narrow desktop: 960px and below. */
@media (max-width: 960px) {
	/* Stack broad layout grids. */
	.cm-header-shell,
	.cm-top-cards,
	.cm-help-grid,
	.cm-experience,
	.cm-query .cm-post-grid,
	.cm-book-feature,
	.cm-footer-grid {
		grid-template-columns: 1fr;
	}

	.cm-header-shell {
		border-radius: 18px;
	}

	.cm-primary-nav {
		justify-content: flex-start;
	}

	.cm-top-cards {
		margin-top: -4rem;
	}

	.cm-help article {
		border-right: 0;
		border-bottom: 1px solid var(--cm-border);
	}

	.cm-cta-strip,
	.cm-final-cta {
		align-items: flex-start;
		flex-direction: column;
	}

	.cm-what-heading {
		align-items: flex-start;
	}

	.cm-post-card {
		min-height: 0;
	}

	/* Header layout refinement. */
	.cm-header-shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0.8rem 1rem;
		padding: 0.8rem clamp(0.8rem, 3vw, 1.25rem);
		border-radius: 24px;
		/* DEBUG: 960px header refinement. Remove after breakpoint work.
		background: blue; */
	}

	.cm-brand {
		min-width: 0;
	}

	.cm-brand img {
		width: clamp(140px, 24vw, 170px);
	}

	.cm-header-cta {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		white-space: nowrap;
	}

	.cm-primary-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		gap: clamp(0.7rem, 2.4vw, 1.2rem);
		overflow: visible;
		font-size: 0.92rem;
	}

	.cm-top-cards article {
		height: auto;
	}

	.cm-top-cards p {
		min-height: 0 !important;
	}
}

/* Mobile: 640px and below. */
@media (max-width: 640px) {
	:root {
		--cm-shell-gutter: 0.75rem;
	}

	.cm-what-service {
		padding: 1.25rem;
	}

	.cm-what-heading {
		flex-direction: column;
		gap: 0.55rem;
	}

	.cm-top-cards article {
		grid-template-columns: 1fr;
	}

	.cm-card-icon {
		margin-bottom: 0.8rem;
	}

	.cm-testimonial-placeholder p {
		font-size: clamp(2rem, 13vw, 1.8rem);
	}

	/* Mobile header offset and first-pass sizing. */
	.cm-site-header {
		position: fixed;
		padding: var(--cm-shell-gutter);
	}

	.cm-header-shell {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem 0.8rem;
		padding: 0.65rem 0.75rem;
		border-radius: 22px;
		/* DEBUG: first 640px mobile header pass. Later 640px rules override this.
		background: yellow; */
	}

	.cm-brand img {
		width: min(160px, 52vw);
	}

	.cm-primary-nav {
		order: 3;
		width: 100%;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		overflow-x: auto;
		gap: 1rem;
		padding-bottom: 0.5rem;
		font-size: 0.86rem;
	}

	.cm-header-cta {
		margin-left: auto;
		min-height: 38px;
		padding: 0.58rem 0.9rem;
		font-size: 0.86rem;
	}

	/* Final mobile header sizing. */
	.cm-header-shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.55rem 0.7rem;
		padding: 0.58rem 0.7rem 0.52rem;
		border-radius: 22px;
		/* DEBUG: final 640px mobile header pass. Remove after breakpoint work.
		background: green; */
	}

	.cm-brand img {
		width: clamp(128px, 40vw, 150px);
	}

	.cm-header-cta {
		min-height: 38px;
		padding: 0.56rem 0.84rem;
		font-size: 0.82rem;
	}

	.cm-primary-nav {
		order: 0;
		gap: 0.75rem;
		padding-bottom: 0.18rem;
		overflow: visible;
		font-size: 0.82rem;
	}

	.cm-primary-nav a {
		white-space: nowrap;
	}

	/* Mobile top-card stack. */
	.cm-top-cards article {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
	}

	.cm-top-cards .cm-card-icon,
	.cm-top-cards h2,
	.cm-top-cards p,
	.cm-top-cards .cm-card-button {
		grid-column: 1;
	}

	.cm-top-cards .cm-card-icon {
		grid-row: 1;
	}

	.cm-top-cards h2 {
		grid-row: 2;
	}

	.cm-top-cards p {
		grid-row: 3;
		min-height: 0;
	}

	.cm-top-cards .cm-card-button {
		grid-row: 4;
	}
}

/* Compact phones: 380px and below. */
@media (max-width: 380px) {
	.cm-header-shell {
		gap: 0.45rem 0.5rem;
		padding: 0.48rem 0.55rem;
		border-radius: 18px;
	}

	.cm-brand img {
		width: 118px;
	}

	.cm-header-cta {
		min-height: 34px;
		padding: 0.48rem 0.62rem;
		font-size: 0.75rem;
	}

	.cm-primary-nav {
		justify-content: space-between;
		gap: 0.35rem;
		font-size: 0.72rem;
	}

	.cm-primary-nav a::after {
		bottom: -0.32rem;
	}
}