.hop-contact-page {
	padding-bottom: 40px;
}

.hop-contact-page .hop-container {
	max-width: 1180px;
}

.hop-contact-hero {
	padding: 70px 0 55px;
}

.hop-contact-hero__grid {
	display: grid;
	grid-template-columns: 1fr 500px;
	gap: 70px;
	align-items: center;
}

.hop-contact-hero__content h1 {
	font-size: clamp(3.4rem, 6vw, 5.6rem);
	line-height: 0.95;
	margin: 0 0 22px;
	max-width: 620px;
}

.hop-contact-hero__content p {
	max-width: 540px;
	font-size: 1rem;
	line-height: 1.8;
	color: var(--hop-body);
}

.hop-contact-hero__image img {
	width: 100%;
	height: 430px;
	object-fit: cover;
	border-radius: 18px;
	display: block;
}

.hop-contact-section {
	padding: 20px 0 90px;
}

.hop-contact-card {
	background: #fbf6f3;
	border: 1px solid var(--hop-border);
	border-radius: 24px;
	padding: 55px;

	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	grid-template-areas:
		"info form"
		"image form";
	gap: 38px 55px;
	align-items: start;
}

.hop-contact-info {
	grid-area: info;
}

.hop-contact-info h2 {
	margin: 0 0 18px;
	font-size: clamp(2.4rem, 4vw, 3.5rem);
	line-height: 1;
}

.hop-contact-info p {
	line-height: 1.8;
	margin-bottom: 18px;
	color: var(--hop-body);
}

.hop-contact-details {
	margin-top: 26px;
	display: grid;
	gap: 18px;
}

.hop-contact-details div {
	padding-left: 18px;
	border-left: 2px solid var(--hop-accent);
}

.hop-contact-details span {
	display: block;
	margin-bottom: 4px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hop-accent);
}

.hop-contact-details p,
.hop-contact-details a {
	margin: 0;
	color: var(--hop-heading);
	text-decoration: none;
}

.hop-contact-details a:hover {
	color: var(--hop-accent);
}

.hop-contact-form-wrap {
	grid-area: form;
	background: #fff;
	border: 1px solid var(--hop-border);
	border-radius: 20px;
	padding: 34px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.04);
}

.hop-contact-form-wrap p {
	margin: 0 0 14px;
}

.hop-contact-form-wrap label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hop-heading);
}

.hop-contact-form-wrap input,
.hop-contact-form-wrap textarea,
.hop-contact-form-wrap select {
	width: 100%;
	border: 1px solid var(--hop-border);
	border-radius: 0;
	padding: 14px 16px;
	background: #fff;
	color: var(--hop-body);
	font-family: inherit;
	font-size: 0.95rem;
}

.hop-contact-form-wrap textarea {
	min-height: 165px;
	resize: vertical;
}

.hop-contact-form-wrap input:focus,
.hop-contact-form-wrap textarea:focus {
	outline: none;
	border-color: var(--hop-accent);
}

.hop-contact-form-wrap input[type="submit"] {
	width: auto;
	min-width: 190px;
	background: var(--hop-accent);
	border: 1px solid var(--hop-accent);
	color: #fff;
	padding: 15px 32px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: 0.25s ease;
}

.hop-contact-form-wrap input[type="submit"]:hover {
	background: #b98277;
	border-color: #b98277;
	color: #fff;
}

.hop-contact-image {
	grid-area: image;
}

.hop-contact-image img {
	width: 100%;
	height: 290px;
	object-fit: cover;
	border-radius: 18px;
	display: block;
}

@media (max-width: 920px) {
	.hop-contact-hero {
		padding: 50px 0 35px;
	}

	.hop-contact-hero__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.hop-contact-hero__image img {
		height: auto;
	}

	.hop-contact-card {
		padding: 32px;
		grid-template-columns: 1fr;
		grid-template-areas:
			"info"
			"form"
			"image";
		gap: 30px;
	}

	.hop-contact-image img {
		height: auto;
	}
}