.site-main--contact {
	padding-block: 2.5rem 4rem;
}

.page-contact__panel {
	display: grid;
	justify-items: start;
	gap: 1.25rem;
	padding: 1.75rem;
	border-radius: var(--r-lg);
	background: #f3f4f1;
}

.page-contact__panel h1 {
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 1.12;
}

.page-contact__text {
	max-width: none;
}

.page-contact__text > * + * {
	margin-top: 0.85rem;
}

.page-contact__text p {
	font-size: 1.05rem;
	line-height: 1.65;
}

.page-contact__form {
	display: grid;
	gap: 0.95rem;
	width: 100%;
}

.page-contact__grid {
	display: grid;
	gap: 0.95rem;
}

.page-contact__field {
	display: grid;
	gap: 0.4rem;
	margin: 0;
}

.page-contact__field label {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ink);
}

.page-contact__field label span {
	margin-left: 0.35rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--ink-soft);
	text-transform: none;
}

.page-contact__field input,
.page-contact__field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1.15rem;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--white);
	color: var(--ink);
}

.page-contact__field textarea {
	min-height: 8.5rem;
	border-radius: var(--r-md);
	resize: vertical;
}

.page-contact__field input:focus-visible,
.page-contact__field textarea:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 2px;
}

.page-contact__field input::placeholder,
.page-contact__field textarea::placeholder {
	color: var(--ink-soft);
}

.page-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.page-contact__status {
	margin: 0;
	font-size: 0.975rem;
	line-height: 1.5;
}

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

.page-contact__status.is-error {
	color: var(--rose-deep);
}

.page-contact__form .btn {
	justify-self: start;
	margin-top: 0.15rem;
}

.page-contact__form.is-sent .page-contact__grid,
.page-contact__form.is-sent .page-contact__field,
.page-contact__form.is-sent .page-contact__hp,
.page-contact__form.is-sent .btn {
	display: none;
}

@media (min-width: 768px) {
	.site-main--contact {
		padding-block: 3.25rem 4.5rem;
	}

	.page-contact__panel {
		gap: 1.45rem;
		padding: 2.5rem 2.75rem;
	}

	.page-contact__text p {
		font-size: 1.125rem;
	}

	.page-contact__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.site-main--contact {
		padding-block: 4rem 5.5rem;
	}

	.page-contact__panel {
		width: 70%;
		max-width: 46rem;
		margin-inline: auto;
		gap: 1.6rem;
		padding: 3rem 3.25rem;
		border-radius: var(--r-hero);
	}
}