/**
 * Contact Us Row — Figma testimonials-section (475:1723).
 */

.contact-row {
	--contact-row-pad-block: var(--space-80); /* 80px */
	--contact-row-header-gap: var(--space-16);
	--contact-row-stack-gap: var(--space-32);
	--contact-row-lede-max: 50.625rem; /* 810px */
	--contact-row-lede-size: 1.25rem; /* 20px Regular */
	--contact-row-cell-w: 13.4375rem; /* 215px */
	--contact-row-cell-gap: var(--space-16);
	--contact-row-cell-pad-block: var(--space-40);
	--contact-row-cell-pad-inline: 0.625rem; /* 10px */
	--contact-row-cols: 4;
	--contact-row-rule: color-mix(in srgb, var(--color-near-black) 30%, transparent);

	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding-block: var(--contact-row-pad-block);
	background-color: var(--color-bg-grey);
	border-block: 0.5px solid var(--color-blue-200);
}

.contact-row__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--contact-row-stack-gap);
}

.contact-row__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--contact-row-header-gap);
	width: 100%;
	text-align: center;
}

.contact-row__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem; /* 10px */
	margin: 0;
	padding-block: 0.625rem;
	font-family: var(--font-sans);
	font-size: var(--text-eyebrow-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-eyebrow-line-height);
	letter-spacing: var(--text-eyebrow-letter-spacing);
	text-transform: uppercase;
	color: var(--color-brand-secondary);
}

.contact-row__eyebrow::before {
	content: '';
	width: 1rem;
	height: 0.5px;
	background-color: currentColor;
	flex-shrink: 0;
}

.contact-row__heading {
	margin: 0;
	max-width: 100%;
	font-family: var(--font-sans);
	font-size: var(--text-display-md-size);
	font-weight: var(--text-display-md-weight);
	line-height: var(--text-heading-line-height);
	letter-spacing: var(--text-heading-letter-spacing);
	text-transform: uppercase;
	color: var(--color-near-black);
}

.contact-row__lede {
	margin: 0;
	max-width: var(--contact-row-lede-max);
	font-family: var(--font-sans);
	font-size: var(--contact-row-lede-size);
	font-weight: var(--text-body-lg-weight);
	line-height: var(--text-body-line-height);
	letter-spacing: var(--text-body-letter-spacing);
	color: var(--color-text-tertiary);
}

.contact-row__lede > *:first-child {
	margin-block-start: 0;
}

.contact-row__lede > *:last-child {
	margin-block-end: 0;
}

.contact-row__lede p {
	margin-block: 0 0.75em;
}

.contact-row__lede p:last-child {
	margin-block-end: 0;
}

.contact-row__lede a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.contact-row__lede a:hover,
.contact-row__lede a:focus-visible {
	color: var(--color-brand-secondary);
}

.contact-row__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	width: 100%;
	max-width: calc(
		(var(--contact-row-cols) * var(--contact-row-cell-w)) +
			((var(--contact-row-cols) - 1) * var(--contact-row-cell-gap))
	);
	margin: 0;
	padding: 0;
	column-gap: var(--contact-row-cell-gap);
	row-gap: 0;
}

.contact-row__item {
	position: relative;
	flex: 0 0 var(--contact-row-cell-w);
	width: var(--contact-row-cell-w);
	margin: 0;
	border-inline-end: 1px solid var(--color-bg-blue-light);
}

.contact-row__item:nth-child(4n),
.contact-row__item:last-child {
	border-inline-end: none;
}

.contact-row__item:nth-child(-n + 4)::after {
	content: '';
	position: absolute;
	left: 0;
	right: calc(-1 * var(--contact-row-cell-gap));
	bottom: 0;
	height: 1px;
	background-color: var(--contact-row-rule);
	pointer-events: none;
}

.contact-row__item:nth-child(4)::after,
.contact-row__item:last-child::after {
	right: 0;
}

.contact-row__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	width: 100%;
	padding: var(--contact-row-cell-pad-block) var(--contact-row-cell-pad-inline);
	text-align: center;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}

a.contact-row__cell:hover .contact-row__city,
a.contact-row__cell:focus-visible .contact-row__city {
	color: var(--color-brand-secondary);
}

a.contact-row__cell:focus-visible {
	outline: 2px solid var(--color-brand-secondary);
	outline-offset: 4px;
}

.contact-row__city,
.contact-row__region {
	margin: 0;
	font-family: var(--font-sans);
	line-height: var(--text-heading-line-height);
}

.contact-row__city {
	font-size: var(--text-h3-size);
	font-weight: var(--text-h3-weight);
	letter-spacing: var(--text-heading-letter-spacing);
	text-transform: uppercase;
	color: var(--color-near-black);
	transition: color 0.2s ease;
}

.contact-row__region {
	font-size: var(--text-body-lg-size);
	font-weight: var(--text-body-lg-weight-light);
	letter-spacing: var(--text-eyebrow-letter-spacing);
	color: var(--color-grey-blue-1);
}

.contact-row__cta {
	flex-shrink: 0;
}

.contact-row__cta:focus-visible {
	outline-color: var(--color-brand-secondary);
}

@media (max-width: 1439px) {
	.contact-row {
		--contact-row-pad-block: var(--space-64);
		--contact-row-cols: 2;
	}

	.contact-row__item:nth-child(4n) {
		border-inline-end: 1px solid var(--color-bg-blue-light);
	}

	.contact-row__item:nth-child(even),
	.contact-row__item:last-child {
		border-inline-end: none;
	}

	.contact-row__item:nth-child(-n + 4)::after {
		content: none;
	}

	.contact-row__item:nth-child(odd)::after {
		content: '';
		position: absolute;
		left: 0;
		right: calc(-1 * (var(--contact-row-cell-w) + var(--contact-row-cell-gap)));
		bottom: 0;
		height: 1px;
		background-color: var(--contact-row-rule);
		pointer-events: none;
	}

	.contact-row__item:nth-last-child(-n + 2):nth-child(odd)::after,
	.contact-row__item:last-child::after {
		content: none;
	}
}

@media (max-width: 767px) {
	.contact-row {
		--contact-row-pad-block: var(--space-48);
		--contact-row-cols: 1;
		--contact-row-cell-w: 100%;
		--contact-row-stack-gap: var(--space-24);
	}

	.contact-row__heading {
		font-size: var(--text-h2-size);
	}

	.contact-row__lede {
		font-size: var(--text-body-lg-size);
	}

	.contact-row__list {
		max-width: none;
	}

	.contact-row__item {
		flex-basis: 100%;
		width: 100%;
		border-inline-end: none;
	}

	.contact-row__item::after,
	.contact-row__item:nth-child(-n + 4)::after,
	.contact-row__item:nth-child(odd)::after {
		content: '';
		left: 0;
		right: 0;
		background-color: var(--contact-row-rule);
	}

	.contact-row__item:last-child::after {
		content: none;
	}

	.contact-row__cta {
		min-width: 0;
		width: 100%;
		max-width: 17.625rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-row .btn--angled {
		transition: none;
	}
}