/*
 * REACH Supply canonical Contact Us presentation.
 *
 * RS-DS-021: the general contact page uses one neutral request workspace,
 * stable field-identity layout, white/warm-neutral route cards, and centered
 * mobile navigation. Breakdance remains authoritative for form fields,
 * validation, stored submissions, email actions, and file handling.
 */

body.reach-design-system.reach-contact-design-page
.reach-contact-page {
	color: var(--rs-color-ink) !important;
	max-width: 100% !important;
	overflow-x: clip !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-jump-nav {
	align-items: center !important;
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	box-shadow: var(--rs-shadow-xs) !important;
	box-sizing: border-box !important;
	display: grid !important;
	gap: 0.375rem !important;
	grid-template-columns: auto repeat(5, minmax(0, 1fr)) !important;
	padding: 0.5rem !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-jump-nav > span {
	align-items: center !important;
	color: var(--rs-color-muted) !important;
	display: flex !important;
	font-size: var(--rs-font-size-xs) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	justify-content: center !important;
	letter-spacing: 0.07em !important;
	min-height: var(--rs-touch-target-min) !important;
	padding: 0.5rem 0.75rem !important;
	text-align: center !important;
	text-transform: uppercase !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-jump-nav a {
	align-items: center !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 0.625rem !important;
	color: var(--rs-color-ink) !important;
	display: inline-flex !important;
	font-size: 0.8125rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	justify-content: center !important;
	line-height: 1.35 !important;
	min-height: var(--rs-touch-target-min) !important;
	padding: 0.625rem 0.75rem !important;
	text-align: center !important;
	text-decoration: none !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-jump-nav a:hover {
	background: var(--rs-color-surface-hover) !important;
	border-color: var(--rs-color-border) !important;
}

body.reach-design-system.reach-contact-design-page :where(
	.reach-contact-summary,
	.reach-contact-route-strip,
	.reach-contact-info-card,
	.reach-contact-routes-card,
	.reach-contact-form-card,
	.reach-contact-faq-card
) {
	background: var(--rs-color-surface) !important;
	background-image: none !important;
	border-color: var(--rs-color-border) !important;
	box-shadow: none !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary {
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-lg) !important;
	box-shadow: var(--rs-shadow-sm) !important;
	overflow: hidden !important;
	position: relative !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary::before {
	background: var(--rs-color-gold) !important;
	content: "" !important;
	height: 3px !important;
	left: 0 !important;
	position: absolute !important;
	top: 0 !important;
	width: 6rem !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-grid {
	display: grid !important;
	gap: 0.75rem !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-grid > div {
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	box-shadow: none !important;
	min-width: 0 !important;
	padding: 1rem !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-grid :where(strong, h3) {
	color: var(--rs-color-ink) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-grid :where(span, small, p) {
	color: var(--rs-color-muted) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--rs-space-3) !important;
	margin-top: var(--rs-space-4) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-btn {
	align-items: center !important;
	border-radius: var(--rs-radius-sm) !important;
	display: inline-flex !important;
	font-size: 0.875rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	justify-content: center !important;
	min-height: var(--rs-control-height) !important;
	padding: 0.75rem 1rem !important;
	text-align: center !important;
	text-decoration: none !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-btn--gold {
	background: var(--rs-color-gold) !important;
	border: 1px solid var(--rs-color-gold-hover) !important;
	color: var(--rs-color-on-gold) !important;
}

body.reach-design-system.reach-contact-design-page :where(
	.reach-contact-summary-btn--outline,
	.reach-contact-summary-btn--dark
) {
	background: var(--rs-color-ink) !important;
	border: 1px solid var(--rs-color-ink) !important;
	color: var(--rs-color-on-ink) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-route-strip {
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-lg) !important;
	box-shadow: var(--rs-shadow-xs) !important;
	padding: clamp(1.25rem, 3vw, 1.75rem) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-checks {
	display: grid !important;
	gap: 0.75rem !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-checks > :where(a, div) {
	align-items: center !important;
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	box-shadow: none !important;
	color: var(--rs-color-ink) !important;
	display: grid !important;
	gap: 0.75rem !important;
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	min-height: 5rem !important;
	padding: 0.875rem !important;
	text-decoration: none !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-checks > a:hover {
	background: var(--rs-color-warning-soft) !important;
	border-color: rgb(226 166 60 / 58%) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-checks :where(b, [class*="number"]) {
	align-items: center !important;
	background: var(--rs-color-warning-soft) !important;
	border-radius: 0.625rem !important;
	color: var(--rs-color-warning) !important;
	display: inline-flex !important;
	font-size: var(--rs-font-size-xs) !important;
	font-weight: var(--rs-font-weight-bold) !important;
	height: 2.25rem !important;
	justify-content: center !important;
	min-width: 2.25rem !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-checks :where(strong, h3) {
	color: var(--rs-color-ink) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-checks :where(small, p) {
	color: var(--rs-color-muted) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-main-columns {
	align-items: stretch !important;
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-lg) !important;
	box-shadow: var(--rs-shadow-sm) !important;
	display: grid !important;
	gap: 0 !important;
	grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr) !important;
	overflow: hidden !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-main-columns > .bde-column {
	flex: none !important;
	margin: 0 !important;
	max-width: none !important;
	min-width: 0 !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-main-columns > .bde-column:first-child {
	background: var(--rs-color-surface-soft) !important;
	border-right: var(--rs-border-default) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-main-columns > .bde-column:last-child {
	background: var(--rs-color-surface) !important;
	padding: clamp(1.35rem, 3vw, 2rem) !important;
}

body.reach-design-system.reach-contact-design-page :where(
	.reach-contact-info-card,
	.reach-contact-routes-card
) {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-info-card + .reach-contact-routes-card {
	border-top: var(--rs-border-default) !important;
	margin-top: var(--rs-space-5) !important;
	padding-top: var(--rs-space-5) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-official :where(a, div) {
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-sm) !important;
	color: var(--rs-color-ink) !important;
	display: flex !important;
	min-height: var(--rs-touch-target-min) !important;
	padding: 0.625rem 0.75rem !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-routes-card :where(a, .reach-contact-route-link) {
	background: transparent !important;
	color: var(--rs-color-ink) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-routes-card a {
	border-bottom: var(--rs-border-default) !important;
	min-height: 3.25rem !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-routes-card a:last-child {
	border-bottom: 0 !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-form-card {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	overflow: visible !important;
	padding: 0 !important;
	position: relative !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-form-card::before {
	background: var(--rs-color-gold) !important;
	border-radius: var(--rs-radius-pill) !important;
	content: "" !important;
	display: block !important;
	height: 3px !important;
	margin: 0 0 var(--rs-space-5) !important;
	width: 5rem !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-form-card :where(h2, h3) {
	color: var(--rs-color-ink) !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form {
	box-sizing: border-box !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	.breakdance-form,
	.breakdance-form-fields,
	[class*="breakdance-form-fields"]
) {
	align-items: start !important;
	display: grid !important;
	gap: 1.125rem 1rem !important;
	grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field {
	box-sizing: border-box !important;
	grid-column: 1 / -1 !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: auto !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field:has(
	:is(#first_name, [name="first_name"], [name$="[first_name]"])
),
body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field:has(
	:is(#last_name, [name="last_name"], [name$="[last_name]"])
),
body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field:has(
	:is(#email, [name="email"], [name$="[email]"])
),
body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field:has(
	:is(#phone, [name="phone"], [name$="[phone]"])
) {
	grid-column: span 6 !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	.reach-contact-form-section,
	.reach-contact-route-guidance,
	.reach-contact-error-summary,
	.breakdance-form-button,
	.breakdance-form-message,
	[class*="form-message"]
) {
	grid-column: 1 / -1 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .reach-contact-form-section {
	align-items: center !important;
	background: var(--rs-color-surface-soft) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	display: grid !important;
	gap: 0.25rem 0.75rem !important;
	grid-template-columns: 2.5rem minmax(0, 1fr) !important;
	margin: 0.25rem 0 0 !important;
	padding: 0.875rem 1rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .reach-contact-form-section b {
	align-items: center !important;
	background: var(--rs-color-ink) !important;
	border-radius: 0.625rem !important;
	box-shadow: inset 0 -3px 0 var(--rs-color-gold) !important;
	color: var(--rs-color-on-ink) !important;
	display: flex !important;
	font-size: 0.75rem !important;
	grid-row: 1 / span 2 !important;
	height: 2.5rem !important;
	justify-content: center !important;
	width: 2.5rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .reach-contact-form-section strong {
	color: var(--rs-color-ink) !important;
	font-size: 0.9375rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	line-height: 1.35 !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .reach-contact-form-section small {
	color: var(--rs-color-muted) !important;
	font-size: 0.75rem !important;
	line-height: 1.45 !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field__label {
	color: var(--rs-color-ink) !important;
	display: flex !important;
	font-size: 0.875rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	gap: 0.25rem !important;
	line-height: 1.4 !important;
	margin: 0 0 0.5rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
	select,
	textarea
) {
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-strong) !important;
	border-radius: var(--rs-radius-md) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: var(--rs-color-ink) !important;
	font-size: 1rem !important;
	line-height: 1.45 !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-height: 3.125rem !important;
	min-width: 0 !important;
	padding: 0.75rem 0.875rem !important;
	transition:
		border-color var(--rs-transition-fast),
		box-shadow var(--rs-transition-fast) !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form textarea {
	min-height: 10rem !important;
	resize: vertical !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(input, textarea)::placeholder {
	color: var(--rs-color-subtle) !important;
	opacity: 1 !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(input, select, textarea):hover {
	border-color: var(--rs-color-focus) !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(input, select, textarea):focus {
	border-color: var(--rs-color-focus) !important;
	box-shadow: var(--rs-focus-ring) !important;
	outline: 0 !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .reach-contact-route-guidance {
	background: var(--rs-color-warning-soft) !important;
	border: 1px solid rgb(226 166 60 / 46%) !important;
	border-left: 4px solid var(--rs-color-gold) !important;
	border-radius: var(--rs-radius-md) !important;
	color: var(--rs-color-muted) !important;
	margin: -0.25rem 0 0 !important;
	padding: 0.875rem 1rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .reach-contact-route-guidance strong {
	color: var(--rs-color-ink) !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field:has(input[type="file"]) {
	background: var(--rs-color-surface-soft) !important;
	border: 1px dashed var(--rs-color-border-strong) !important;
	border-radius: var(--rs-radius-md) !important;
	grid-column: 1 / -1 !important;
	padding: 1rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form input[type="file"] {
	color: var(--rs-color-muted) !important;
	font-size: 0.875rem !important;
	max-width: 100% !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .reach-contact-file-status {
	color: var(--rs-color-muted) !important;
	display: block !important;
	font-size: 0.75rem !important;
	line-height: 1.5 !important;
	margin-top: 0.5rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field:has(input[type="checkbox"]) {
	background: var(--rs-color-surface-soft) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	grid-column: 1 / -1 !important;
	padding: 1rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-checkbox {
	align-items: flex-start !important;
	display: flex !important;
	gap: 0.75rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form input[type="checkbox"] {
	accent-color: var(--rs-color-ink) !important;
	flex: 0 0 1.25rem !important;
	height: 1.25rem !important;
	margin: 0.15rem 0 0 !important;
	min-height: 1.25rem !important;
	min-width: 1.25rem !important;
	width: 1.25rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	button[type="submit"],
	.breakdance-form-button__submit
) {
	align-items: center !important;
	background: var(--rs-color-ink) !important;
	border: 1px solid var(--rs-color-ink) !important;
	border-radius: var(--rs-radius-md) !important;
	box-shadow: var(--rs-shadow-sm) !important;
	color: var(--rs-color-on-ink) !important;
	display: inline-flex !important;
	font-size: 0.9375rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	justify-content: center !important;
	min-height: 3.25rem !important;
	padding: 0.75rem 1.25rem !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	button[type="submit"],
	.breakdance-form-button__submit
):hover {
	background: var(--rs-color-ink-hover) !important;
	border-color: var(--rs-color-ink-hover) !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	[aria-invalid="true"],
	.is-invalid
) {
	background: var(--rs-color-error-soft) !important;
	border-color: var(--rs-color-error) !important;
	box-shadow: 0 0 0 3px rgb(163 58 58 / 12%) !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	.breakdance-form-field__error,
	.field-error,
	.reach-field-error
) {
	color: var(--rs-color-error) !important;
	font-size: 0.75rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	line-height: 1.45 !important;
	margin-top: 0.375rem !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-checks > a,
body.reach-design-system.reach-contact-design-page
.reach-contact-faq-card {
	background: var(--rs-color-surface) !important;
	background-image: none !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-md) !important;
	box-shadow: none !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-faq-card[open] {
	background: var(--rs-color-surface) !important;
	border-color: rgb(226 166 60 / 58%) !important;
	box-shadow: var(--rs-shadow-xs) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-faq-card summary {
	color: var(--rs-color-ink) !important;
	font-weight: var(--rs-font-weight-bold) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-faq-card p {
	color: var(--rs-color-muted) !important;
}

@media (max-width: 1100px) {
	body.reach-design-system.reach-contact-design-page
	.reach-contact-jump-nav {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-jump-nav > span {
		grid-column: 1 / -1 !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-checks {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 900px) {
	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns {
		grid-template-columns: 1fr !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns > .bde-column:first-child {
		border-bottom: var(--rs-border-default) !important;
		border-right: 0 !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns > .bde-column:first-child {
		display: grid !important;
		gap: 1.25rem !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-info-card + .reach-contact-routes-card {
		border-left: var(--rs-border-default) !important;
		border-top: 0 !important;
		margin: 0 !important;
		padding: 0 0 0 1.25rem !important;
	}
}

@media (max-width: 767px) {
	body.reach-design-system.reach-contact-design-page
	.reach-contact-jump-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-jump-nav > span {
		grid-column: 1 / -1 !important;
		justify-content: center !important;
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-jump-nav a {
		justify-content: center !important;
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-summary {
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-summary :where(.bde-image, .bde-image2, img) {
		margin-inline: auto !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-summary-actions {
		justify-content: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-summary-grid,
	body.reach-design-system.reach-contact-design-page
	.reach-contact-checks {
		grid-template-columns: 1fr !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-checks > :where(a, div) {
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns > .bde-column:first-child {
		display: block !important;
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-info-card + .reach-contact-routes-card {
		border-left: 0 !important;
		border-top: var(--rs-border-default) !important;
		margin-top: 1.25rem !important;
		padding: 1.25rem 0 0 !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-official :where(a, div) {
		justify-content: center !important;
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-routes-card a {
		justify-content: center !important;
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	#reach-contact-form :where(
		.breakdance-form,
		.breakdance-form-fields,
		[class*="breakdance-form-fields"]
	) {
		grid-template-columns: 1fr !important;
	}

	body.reach-design-system.reach-contact-design-page
	#reach-contact-form .breakdance-form-field,
	body.reach-design-system.reach-contact-design-page
	#reach-contact-form .breakdance-form-field:has(
		:is(#first_name, #last_name, #email, #phone)
	) {
		grid-column: 1 !important;
	}

	body.reach-design-system.reach-contact-design-page
	#reach-contact-form :where(input, select, textarea) {
		font-size: 16px !important;
	}

	body.reach-design-system.reach-contact-design-page
	#reach-contact-form .reach-contact-form-section {
		text-align: left !important;
	}
}

@media (max-width: 520px) {
	body.reach-design-system.reach-contact-design-page
	.reach-contact-jump-nav {
		grid-template-columns: 1fr !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-jump-nav > span {
		grid-column: 1 !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-summary-actions {
		display: grid !important;
		grid-template-columns: 1fr !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-summary-btn {
		width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.reach-design-system.reach-contact-design-page * {
		transition: none !important;
	}
}