.site-main--contact {
	width: 100%;
	max-width: none;
	padding: 0;
	overflow: clip;
}

.contact-hero {
	position: relative;
	display: grid;
	min-height: clamp(36rem, 68vh, 48rem);
	align-items: end;
	padding: var(--ewh-internal-hero-space-top) max(var(--ewh-gutter), calc((100vw - var(--ewh-content-width)) / 2 + var(--ewh-gutter))) var(--ewh-internal-hero-space-bottom);
	overflow: hidden;
	background: var(--ewh-color-black);
	color: var(--ewh-color-white);
}

.contact-hero__content {
	position: relative;
	z-index: 1;
	max-width: 72rem;
}

.contact-hero :where(.ewh-eyebrow, h1) {
	color: var(--ewh-color-white);
}

.contact-hero h1 {
	max-width: 12ch;
	font-size: clamp(3.75rem, 6.5vw, 6rem);
}

.contact-hero p {
	max-width: 52rem;
	margin: var(--ewh-space-4) 0 0;
	color: rgb(255 255 255 / 74%);
	font-size: var(--ewh-font-size-large);
}

.contact-hero__geometry {
	position: absolute;
	inset: 0 0 0 52%;
	display: grid;
	grid-template-columns: 1.1fr 0.65fr 1fr;
	transform: skewX(-17deg) scale(1.25);
}

.contact-hero__geometry span {
	border-left: 1px solid rgb(255 255 255 / 18%);
	background: linear-gradient(180deg, transparent, rgb(255 255 255 / 9%));
}

.contact-hero__geometry span:nth-child(2) {
	background: var(--ewh-color-navy);
	opacity: 0.7;
}

.contact-details,
.contact-enquiry {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--ewh-space-4);
	padding: var(--ewh-section-space) max(var(--ewh-gutter), calc((100vw - var(--ewh-content-width)) / 2 + var(--ewh-gutter)));
}

.contact-details header {
	grid-column: 1 / span 5;
}

.contact-details h2,
.contact-enquiry h2 {
	max-width: 13ch;
}

.contact-details dl {
	grid-column: 7 / -1;
	margin: 0;
}

.contact-details dl > div {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr);
	gap: var(--ewh-space-3);
	padding-block: var(--ewh-space-3);
	border-bottom: var(--ewh-border);
}

.contact-details dl > div:first-child {
	border-top: var(--ewh-border);
}

.contact-details dt {
	color: var(--ewh-color-muted-text);
	font-size: var(--ewh-font-size-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.contact-details dd {
	margin: 0;
	font-family: var(--ewh-font-display);
	font-size: var(--ewh-font-size-h4);
}

.contact-details a {
	color: var(--ewh-color-black);
	text-decoration: none;
}

.contact-enquiry {
	background: var(--ewh-color-off-white);
	scroll-margin-top: 6rem;
}

.contact-enquiry__intro {
	grid-column: 1 / span 5;
}

.contact-enquiry__intro > p {
	max-width: 32rem;
	color: var(--ewh-color-muted-text);
}

.contact-enquiry__form-wrap {
	grid-column: 7 / -1;
}

.contact-form-status {
	margin-bottom: var(--ewh-space-4);
	padding: var(--ewh-space-3);
	border: 1px solid currentcolor;
}

.contact-form-status--success {
	border-left: 0.4rem solid var(--ewh-color-navy);
	background: var(--ewh-color-white);
	color: var(--ewh-color-charcoal);
}

.contact-form-status--error {
	border-left: 0.4rem solid var(--ewh-color-black);
	background: var(--ewh-color-white);
	color: var(--ewh-color-black);
}

.contact-form {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ewh-space-3) var(--ewh-space-4);
}

.contact-form__honeypot {
	position: absolute;
	top: auto;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: var(--ewh-space-1);
}

.contact-field--full,
.contact-form__submit {
	grid-column: 1 / -1;
}

.contact-field label {
	font-size: var(--ewh-font-size-small);
	font-weight: 600;
}

.contact-field label span {
	color: var(--ewh-color-navy);
}

.contact-field :where(input, select, textarea) {
	width: 100%;
	min-height: 3.5rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--ewh-color-gray);
	border-radius: 0;
	background: var(--ewh-color-white);
	color: var(--ewh-color-black);
	font: inherit;
}

.contact-field textarea {
	min-height: 12rem;
	resize: vertical;
}

.contact-field :where(input, select, textarea):focus {
	border-color: var(--ewh-color-navy);
	outline: var(--ewh-focus-ring);
	outline-offset: 2px;
}

.contact-field.has-error :where(input, select, textarea),
.contact-field [aria-invalid="true"] {
	border-width: 2px;
	border-color: var(--ewh-color-black);
}

.contact-field__error {
	margin-block: 0.35rem 0;
	color: var(--ewh-color-black);
	font-size: var(--ewh-font-size-small);
	font-weight: 600;
}

.contact-form__submit {
	display: flex;
	gap: var(--ewh-space-3);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--ewh-space-2);
}

.contact-form__submit p {
	margin: 0;
	color: var(--ewh-color-muted-text);
	font-size: var(--ewh-font-size-small);
}

.contact-form__submit .ewh-button {
	border-color: var(--ewh-color-navy);
	background: var(--ewh-color-navy);
	color: var(--ewh-color-white);
}

.site-main--contact + .site-footer {
	margin-top: 0;
}

@media (max-width: 64rem) {
	.contact-details,
	.contact-enquiry {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.contact-details header,
	.contact-details dl,
	.contact-enquiry__intro,
	.contact-enquiry__form-wrap {
		grid-column: 1 / -1;
	}
}

@media (max-width: 48rem) {
	.contact-hero {
		min-height: 38rem;
	}

	.contact-hero h1 {
		font-size: clamp(3.25rem, 14vw, 4.5rem);
	}

	.contact-details dl > div,
	.contact-form {
		grid-template-columns: 1fr;
	}

	.contact-field--full,
	.contact-form__submit {
		grid-column: auto;
	}

	.contact-form__submit {
		align-items: stretch;
		flex-direction: column;
	}

	.contact-form__submit .ewh-button {
		width: 100%;
	}
}