html {
	scroll-behavior: smooth;
}

header {
	top: 0;
}

main {
	position: relative;
}

main > section {
	display: block;
	padding-inline: var(--vem-500);
	position: sticky;
	top: var(--header-height);
	margin: 0 auto var(--vem-1000);
	scroll-padding-top: var(--header-height);
}

.contact__intro div {
	display: flex;
	height: min-content;
	align-items: center;
	justify-content: space-between;
	gap: var(--vem-300);
}

.contact__title {
	font-size: var(--vem-800);
	line-height: 1.2;
}

.contact__title span {
	font-weight: 800;
	font-size: var(--vem-1050);
	white-space: nowrap;
}

.contact__intro img {
	aspect-ratio: 1;
	max-height: calc(22 * var(--vem));
}

.contact__description {
	font-size: var(--vem-550);
	max-width: 50ch;
	padding-left: 0.1ch;
}

.contact__form {
	font-size: var(--vem-400);
	background: var(--gradient-300);
	border-radius: var(--vem-500);
	padding: var(--vem-700) var(--vem-800);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--vem-400);
}

.contact__form input,
.contact__form textarea,
.contact__form button {
	width: 100%;
	margin-block: var(--vem-10);
	padding: var(--vem-75);
	border: none;
	border-radius: var(--vem-75);
	font-size: max(var(--vem-300), 16px);
	accent-color: var(--acc-blue-500);
}

.form__submit,
.form-group--stretch {
	grid-column: 1/-1;
}

#privacy {
	width: 1.25ch;
	margin-right: 0.5ch;
}

#privacy + label {
	font-size: max(var(--vem), 12px);
}

.form-group--stretch:last-of-type {
	display: flex;
}

.form__submit {
	display: grid;
	place-items: center;
	position: relative;
	border: none;
	cursor: pointer;
	background: var(--acc-blue-400);
	box-shadow: 0 0.1em 0.4em -0.05em var(--acc-blue-400),
		inset 0 -0.1em 0.3em -0.1em var(--acc-blue-500),
		inset 0 0.05em 0 var(--acc-blue-300);
	transition: scale 0.2s, box-shadow 0.2s, background 0.2s;
	transform-origin: bottom;
	border-radius: 50vw !important;
	padding-block: 0.75em !important;
}

.form__submit span {
	color: var(--white-100);
	font-weight: 500;
	transition: opacity 0.2s;
}

.form__submit:hover,
.form__submit:focus-visible {
	scale: 1.05;
	background: var(--acc-blue-500);
	box-shadow: 0 0.3em 0.5em -0.1em var(--acc-blue-400),
		inset 0 -0.3em 0.1em -0.2em var(--acc-blue-500),
		inset 0 0.1em 0.2em var(--acc-blue-300);
}

.form__submit img {
	position: absolute;
	opacity: 0;
	scale: 0;
	height: 60%;
	transition: opacity 0.2s, scale 0.2s;
}

.form__submit--loading span,
.form__submit--submitted span {
	opacity: 0;
}

.form__submit--loading .loader {
	opacity: 1;
	scale: 1;
	animation: spin 1s infinite steps(8);
}

.form__submit--submitted .tick {
	opacity: 1;
	scale: 1;
}

@keyframes spin {
	to {
		rotate: 360deg;
	}
}

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--acc-blue-500);
	outline: none;
}

.extra {
	height: var(--vem-950);
}

.booking-card {
	display: grid;
	align-content: center;
	font-size: var(--vem-400);
	background: var(--gradient-500);
	border-radius: var(--vem-500);
	padding: var(--vem-1050) var(--vem-800);
	text-align: center;
	height: var(--form-height, auto);
}

.booking-card h2 {
	font-size: var(--vem-800);
	line-height: 1.2;
	padding-bottom: 0.3em;
}

.booking-card p {
	font-size: max(var(--vem-400), 16px);
	text-wrap: balance;
}

.booking-card b {
	font-weight: 600;
}

.booking-wrapper a {
	text-decoration: none;
	display: inline-block;
	font-size: var(--vem-550);
	margin-block: var(--vem-600) var(--vem);
}

.booking-wrapper a svg {
	height: 0.7em;
	display: none;
}

.booking-wrapper p {
	font-size: max(var(--vem), 12px);
	color: var(--white-100);
}

.calendly-overlay {
	backdrop-filter: blur(3px);
}

.calendly-overlay div.calendly-popup {
	max-width: 100% !important;
	max-height: 100% !important;
	width: 100% !important;
	height: 100% !important;
}

.calendly-overlay .calendly-popup-close {
	height: var(--vem-400) !important;
	width: var(--vem-400) !important;
	right: var(--vem-600) !important;
	top: var(--vem-500) !important;
}

footer {
	min-height: auto;
}

@media (width < 770px) {

	.contact__intro {
		min-height: 0;
		padding-block: var(--vem-800);
	}

	.contact__title {
		font-size: var(--vem-700);
	}

	.contact__title span {
		font-size: var(--vem-900);
	}

	.contact__intro img {
		flex: 1;
		max-height: calc(16 * var(--vem));
	}

	.contact__form {
		grid-template-columns: 1fr;
		font-size: var(--vem-500);
		padding: var(--vem-600);
	}

	.contact__form input {
		margin-top: 0.2em;
	}

	main > section {
		position: static;
		margin: 0 auto;
	}

	#booking {
		padding-bottom: 0;
		min-height: 0;
	}

	.booking-card {
		background: none;
		padding: var(--vem-800) 0 0;
		height: max-content;
	}

	.booking-card h2 {
		font-size: var(--vem-700);
	}

	.booking-wrapper {
		/* margin-left: auto; */
	}

	.booking-wrapper a {
		border-radius: 0;
		text-decoration: underline;
		background: var(--gradient-500) !important;
		background-clip: text !important;
		-webkit-background-clip: text !important;
		-webkit-text-fill-color: transparent !important;
		color: var(--text);
		box-shadow: none !important;
		font-weight: 800;
		margin: 0;
		padding: var(--vem-400) 0 var(--vem-10);
	}

	.booking-wrapper a:hover {
		scale: 1;
	}

	.booking-wrapper a svg {
		display: inline;
		padding-left: 0.5ch;
	}

	.booking-wrapper p {
		color: var(--text);
		text-align: center;
	}

	footer {
		padding-top: var(--vem-800);
		/* background: linear-gradient(var(--bg), var(--white-100) 15%); */
	}
}