.contact-page__eyebrow {
	margin: 0 auto var(--spacing-5);
	color: var(--color-secondary);
	font-size: var(--font-small);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.contact-page__content {
	margin-top: calc(var(--layout--gap) * -1 + var(--spacing-9));
	padding-top: var(--layout--gap);
	border-top: 1px solid var(--color-border);
}

.contact-page__panel {
	width: 100%;
	max-width: var(--container-narrow--width);
	margin: 0 auto;
}

.contact-page__panel--form {
	padding: var(--spacing-9);
	background: var(--color-contrast-0);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-8);
	box-shadow: var(--shadow);
}

.ra-contact__form {
	display: grid;
	gap: var(--spacing-8);
	min-height: auto;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.ra-contact__required,
.ra-contact__hint,
.ra-contact__privacy,
.ra-contact__status,
.ra-contact__noscript {
	color: var(--color-secondary);
}

.ra-contact__required,
.ra-contact__hint,
.ra-contact__privacy,
.ra-contact__error,
.contact-page__prose {
	font-size: var(--font-small);
}

.ra-contact__field {
	display: grid;
	gap: var(--spacing-4);
	min-width: 0;
}

.ra-contact__label,
.ra-contact__checkbox-row label {
	color: var(--color-contrast);
	font-size: 1rem;
	font-weight: var(--font-weight-semibold);
}

.ra-contact__control {
	margin-top: 0;
	border: 1px solid transparent;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.ra-contact__control:hover {
	border-color: var(--color-border);
}

.ra-contact__control[aria-invalid="true"] {
	border-color: var(--color-error);
	box-shadow: 0 0 0 1px var(--color-error);
}

.ra-contact__message {
	min-height: 11rem;
	resize: vertical;
}

.ra-contact__checkbox-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--spacing-5);
	align-items: start;
}

.ra-contact__checkbox-row input {
	margin-top: 0.1rem;
}

.ra-contact__privacy {
	margin: 0;
	padding-left: calc(1.25rem + var(--spacing-5));
}

.ra-contact__error {
	color: var(--color-error);
	font-weight: var(--font-weight-semibold);
}

.ra-contact__summary {
	padding: var(--spacing-8);
	background: var(--color-background-100);
	border: 1px solid var(--color-error);
	border-radius: var(--radius-6);
}

.ra-contact__summary h2 {
	margin: 0;
	font-size: 1.25rem;
}

.ra-contact__summary ul {
	margin: var(--spacing-5) 0 0;
	padding-left: 1.25rem;
}

.ra-contact__summary li + li {
	margin-top: var(--spacing-3);
}

.ra-contact__summary a {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.ra-contact__actions {
	display: grid;
	gap: var(--spacing-5);
}

.ra-contact__submit {
	width: fit-content;
	min-width: 10rem;
}

.ra-contact__status {
	min-height: 1.5rem;
	margin: 0;
	font-weight: var(--font-weight-semibold);
}

.ra-contact__status.ra-is-success {
	color: var(--color-success);
}

.ra-contact__status.ra-is-error {
	color: var(--color-error);
}

.ra-contact__status.ra-is-ambiguous {
	color: var(--color-secondary);
}

.ra-contact__control:focus-visible,
.ra-contact__checkbox-row input:focus-visible,
.ra-contact__submit:focus-visible,
.ra-contact__summary:focus-visible {
	outline: 2px solid var(--ghost-accent-color);
	outline-offset: 3px;
}

.ra-contact__honeypot,
.ra-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.contact-page__prose {
	max-width: var(--container--width);
	margin: 0 auto;
}

.contact-privacy__section + .contact-privacy__section {
	margin-top: calc(var(--vertical-rhythm) * 2.5);
}

.contact-privacy__updated {
	margin-top: calc(var(--vertical-rhythm) * 2.5);
	padding-top: var(--spacing-8);
	border-top: 1px solid var(--color-border);
	color: var(--color-secondary);
}

@media (max-width: 767px) {
	.contact-page__panel--form {
		padding: var(--spacing-8);
		border-radius: var(--radius-6);
	}

	.ra-contact__submit {
		width: 100%;
	}

	.ra-contact__privacy {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ra-contact__control,
	.ra-contact__submit {
		transition: none;
	}
}

@media (forced-colors: active) {
	.contact-page__panel--form,
	.ra-contact__control,
	.ra-contact__summary,
	.ra-contact__submit {
		border-color: CanvasText;
		box-shadow: none;
	}

	.ra-contact__control:focus-visible,
	.ra-contact__checkbox-row input:focus-visible,
	.ra-contact__submit:focus-visible,
	.ra-contact__summary:focus-visible {
		outline-color: Highlight;
	}
}