/*
 * REACH Supply Contact Us adaptive refinement.
 *
 * RS-DS-022: inquiry-type progressive disclosure preserves the native
 * Breakdance fields, validation, file handling, submission actions, and email
 * actions.
 *
 * RS-DS-025: form enhancement targets only complete outer field wrappers,
 * injects no section cards, and consolidates the duplicate route navigation
 * and summary into one accessible route chooser.
 */

body.reach-design-system.reach-contact-design-page
.reach-contact-page {
	overflow-x: clip !important;
}

/* =========================================================
 * Unified route chooser
 * ====================================================== */

body.reach-design-system.reach-contact-design-page
.reach-contact-page.rs-contact-routes-unified
.reach-contact-jump-nav,
body.reach-design-system.reach-contact-design-page
.reach-contact-jump-nav[hidden] {
	display: none !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-page.rs-contact-routes-unified
.reach-contact-summary {
	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: block !important;
	grid-template-columns: 1fr !important;
	overflow: hidden !important;
	padding: clamp(1.25rem, 2.7vw, 1.875rem) !important;
	position: relative !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-page.rs-contact-routes-unified
.reach-contact-summary > :where(.bde-image, .bde-image2, [class*="bde-image"]) {
	display: none !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-page.rs-contact-routes-unified
.reach-contact-summary > .bde-text,
body.reach-design-system.reach-contact-design-page
.reach-contact-page.rs-contact-routes-unified
.reach-contact-summary-copy {
	margin: 0 !important;
	max-width: none !important;
	min-width: 0 !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-page.rs-contact-routes-unified
.reach-contact-summary-copy > p {
	max-width: 62rem !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-page.rs-contact-routes-unified
.reach-contact-summary-grid {
	display: grid !important;
	gap: 0.75rem !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	margin-top: 1.125rem !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-grid > .rs-contact-route-card {
	align-content: start !important;
	background: var(--rs-color-surface-soft) !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.35rem !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	grid-template-rows: auto 1fr !important;
	min-height: 7.25rem !important;
	padding: 1rem !important;
	position: relative !important;
	text-decoration: none !important;
	transition:
		background-color var(--rs-transition-fast),
		border-color var(--rs-transition-fast),
		box-shadow var(--rs-transition-fast) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-grid > .rs-contact-route-card:hover {
	background: var(--rs-color-warning-soft) !important;
	border-color: rgb(226 166 60 / 60%) !important;
	box-shadow: var(--rs-shadow-xs) !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-grid > .rs-contact-route-card :where(b, strong, h3) {
	color: var(--rs-color-ink) !important;
	font-size: 0.9375rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	grid-column: 1 !important;
	line-height: 1.35 !important;
	margin: 0 !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-summary-grid > .rs-contact-route-card
:where(span:not(.rs-contact-route-card__arrow), small, p) {
	color: var(--rs-color-muted) !important;
	font-size: 0.8125rem !important;
	grid-column: 1 !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

body.reach-design-system.reach-contact-design-page
.rs-contact-route-card__arrow {
	align-items: center !important;
	align-self: center !important;
	background: var(--rs-color-surface) !important;
	border: var(--rs-border-default) !important;
	border-radius: var(--rs-radius-pill) !important;
	color: var(--rs-color-warning) !important;
	display: inline-flex !important;
	font-size: 1rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	grid-column: 2 !important;
	grid-row: 1 / span 2 !important;
	height: 2rem !important;
	justify-content: center !important;
	width: 2rem !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-page.rs-contact-routes-unified
.reach-contact-summary-actions,
body.reach-design-system.reach-contact-design-page
.reach-contact-summary-actions[hidden] {
	display: none !important;
}

/* =========================================================
 * Main request workspace
 * ====================================================== */

body.reach-design-system.reach-contact-design-page
.reach-contact-main-columns {
	align-items: start !important;
}

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

body.reach-design-system.reach-contact-design-page
.reach-contact-form-card {
	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;
	margin: 0 !important;
	overflow: visible !important;
	padding: clamp(1.25rem, 3vw, 2rem) !important;
	position: relative !important;
	width: 100% !important;
}

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

body.reach-design-system.reach-contact-design-page
.reach-contact-form-card > :where(h2, .bde-heading) {
	margin-top: 0.25rem !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;
	position: relative !important;
	scroll-margin-top: 8rem !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: 0.95rem 1rem !important;
	grid-auto-flow: row !important;
	grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
}

/* Legacy helper cards were inserted into inner field controls and caused the
 * labels and controls to overlap. The stable component does not use them. */
body.reach-design-system.reach-contact-design-page
#reach-contact-form .reach-contact-form-section {
	display: none !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field {
	box-sizing: border-box !important;
	clear: none !important;
	float: none !important;
	flex: none !important;
	grid-column: 1 / -1 !important;
	inset: auto !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	position: relative !important;
	transform: none !important;
	width: auto !important;
	z-index: auto !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field:not([hidden]) {
	display: block !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(
	.rs-contact-context-hidden,
	[hidden]
) {
	display: none !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .rs-contact-context-visible {
	animation: rsContactFieldIn 160ms ease both;
}

body.reach-design-system.reach-contact-design-page
.rs-contact-adaptive-intro {
	align-items: center !important;
	background: var(--rs-color-surface-soft) !important;
	border: var(--rs-border-default) !important;
	border-left: 4px solid var(--rs-color-focus) !important;
	border-radius: var(--rs-radius-md) !important;
	display: grid !important;
	gap: 0.125rem 0.875rem !important;
	grid-column: 1 / -1 !important;
	grid-template-columns: 2.5rem minmax(0, 1fr) !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding: 0.875rem 1rem !important;
	position: relative !important;
	transform: none !important;
	width: 100% !important;
}

body.reach-design-system.reach-contact-design-page
.rs-contact-adaptive-intro::before {
	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;
	content: "i" !important;
	display: flex !important;
	font-size: 0.875rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	grid-row: 1 / span 3 !important;
	height: 2.5rem !important;
	justify-content: center !important;
	width: 2.5rem !important;
}

body.reach-design-system.reach-contact-design-page
.rs-contact-adaptive-intro[data-state="selected"] {
	background: var(--rs-color-warning-soft) !important;
	border-color: rgb(226 166 60 / 48%) !important;
	border-left-color: var(--rs-color-gold) !important;
}

body.reach-design-system.reach-contact-design-page
.rs-contact-adaptive-intro__eyebrow {
	color: var(--rs-color-warning) !important;
	font-size: 0.6875rem !important;
	font-weight: var(--rs-font-weight-bold) !important;
	letter-spacing: 0.07em !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
}

body.reach-design-system.reach-contact-design-page
.rs-contact-adaptive-intro 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
.rs-contact-adaptive-intro p {
	color: var(--rs-color-muted) !important;
	font-size: 0.8125rem !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

body.reach-design-system.reach-contact-design-page
.reach-contact-form-card.rs-contact-adaptive-pending
> .bde-text:last-child {
	display: none !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;
	position: static !important;
	transform: none !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	.breakdance-form-field__input,
	.breakdance-form-field__control,
	[class*="form-field__input"],
	[class*="form-field__control"]
) {
	inset: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	position: static !important;
	transform: none !important;
	width: 100% !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;
	position: static !important;
	transform: none !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):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 .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 .breakdance-form-field:has(input[type="checkbox"]) {
	background: var(--rs-color-surface) !important;
	border: 1px solid rgb(226 166 60 / 52%) !important;
	border-radius: var(--rs-radius-md) !important;
	box-shadow: var(--rs-shadow-xs) !important;
	grid-column: 1 / -1 !important;
	padding: 1rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	.breakdance-form-checkbox,
	.breakdance-form-field:has(input[type="checkbox"]) label
) {
	align-items: flex-start !important;
	display: flex !important;
	gap: 0.75rem !important;
	margin: 0 !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--rs-color-surface) !important;
	border: 2px solid var(--rs-color-border-strong) !important;
	border-radius: 0.375rem !important;
	box-shadow: none !important;
	cursor: pointer !important;
	display: grid !important;
	flex: 0 0 1.375rem !important;
	height: 1.375rem !important;
	margin: 0.125rem 0 0 !important;
	min-height: 1.375rem !important;
	min-width: 1.375rem !important;
	padding: 0 !important;
	place-content: center !important;
	width: 1.375rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form input[type="checkbox"]::before {
	border: solid var(--rs-color-on-ink) !important;
	border-width: 0 2px 2px 0 !important;
	content: "" !important;
	height: 0.625rem !important;
	transform: rotate(45deg) scale(0) !important;
	transform-origin: center !important;
	transition: transform var(--rs-transition-fast) !important;
	width: 0.3125rem !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form input[type="checkbox"]:checked {
	background: var(--rs-color-ink) !important;
	border-color: var(--rs-color-ink) !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form input[type="checkbox"]:checked::before {
	transform: rotate(45deg) scale(1) !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form input[type="checkbox"]:focus-visible {
	box-shadow: var(--rs-focus-ring) !important;
	outline: 0 !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form .breakdance-form-field:has(input[type="checkbox"])
:where(.breakdance-form-checkbox__text, span, label) {
	color: var(--rs-color-ink) !important;
	font-size: 0.875rem !important;
	font-weight: var(--rs-font-weight-semibold) !important;
	line-height: 1.55 !important;
}

body.reach-design-system.reach-contact-design-page
#reach-contact-form :where(
	.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 :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;
}

/* =========================================================
 * Responsive geometry
 * ====================================================== */

@media (max-width: 1100px) {
	body.reach-design-system.reach-contact-design-page
	.reach-contact-page.rs-contact-routes-unified
	.reach-contact-summary-grid {
		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 {
		align-items: start !important;
		grid-auto-rows: auto !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns > .bde-column:first-child,
	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns > .bde-column:first-child > *,
	body.reach-design-system.reach-contact-design-page :where(
		.reach-contact-info-card,
		.reach-contact-routes-card
	) {
		align-self: start !important;
		flex: 0 0 auto !important;
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
	}
}

@media (max-width: 767px) {
	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero {
		align-items: center !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero > .bde-div:first-child,
	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero > .bde-div:last-child {
		align-items: center !important;
		align-self: center !important;
		margin-inline: auto !important;
		max-width: 32rem !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero :where(
		h1,
		.bde-heading,
		.bde-text,
		.reach-contact-eyebrow
	) {
		margin-inline: auto !important;
		max-width: 100% !important;
		text-align: center !important;
	}

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

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero-contact {
		justify-items: stretch !important;
		margin-inline: auto !important;
		max-width: 27rem !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-hero-contact a {
		justify-items: center !important;
		text-align: center !important;
		width: 100% !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-page.rs-contact-routes-unified
	.reach-contact-summary {
		padding: 1.125rem !important;
		text-align: center !important;
	}

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

	body.reach-design-system.reach-contact-design-page
	.reach-contact-summary-grid > .rs-contact-route-card {
		grid-template-columns: minmax(0, 1fr) auto !important;
		min-height: 0 !important;
		text-align: left !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		gap: 1rem !important;
		overflow: visible !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns > .bde-column:first-child {
		background: var(--rs-color-surface) !important;
		border: var(--rs-border-default) !important;
		border-radius: var(--rs-radius-lg) !important;
		box-shadow: var(--rs-shadow-xs) !important;
		padding: 1rem !important;
		text-align: center !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-main-columns > .bde-column:last-child {
		background: transparent !important;
		padding: 0 !important;
	}

	body.reach-design-system.reach-contact-design-page
	.reach-contact-form-card {
		padding: 1.125rem !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
	.rs-contact-adaptive-intro {
		align-items: start !important;
		grid-template-columns: 2.25rem minmax(0, 1fr) !important;
		padding: 0.75rem !important;
		text-align: left !important;
	}

	body.reach-design-system.reach-contact-design-page
	.rs-contact-adaptive-intro::before {
		height: 2.25rem !important;
		width: 2.25rem !important;
	}

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

@media (max-width: 520px) {
	body.reach-design-system.reach-contact-design-page
	.reach-contact-summary-grid > .rs-contact-route-card {
		padding: 0.875rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.reach-design-system.reach-contact-design-page
	#reach-contact-form .rs-contact-context-visible {
		animation: none !important;
	}
}

@keyframes rsContactFieldIn {
	from {
		opacity: 0;
		transform: translateY(-0.2rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}