#contact-page .hero {
	padding-top: 16vw;
	padding-bottom: 6vw;
}


.contact-grid {
	display: grid;
	grid-template-columns: .85fr 1fr;
	grid-column-gap: 5vw;
	margin: 6vw 4vw 0;
}


.contact-info {
	display: flex;
	flex-direction: column;
	gap: 5vw;
}

.contact-info__header p {
	display: flex;
	gap: 2vw;
	margin-top: 1.2vw;
	font-style: italic;
}

.contact-info__header h2 {
	font-size: var(--fs-h2);
	line-height: 1.1;
	text-transform: uppercase;
	margin-top: 3vw;
}


.contact-info__desc {
	line-height: 1.4;
	color: var(--color-text-dim);
	max-width: 80%;
}


.contact-info__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--color-border-accordion);
}

.contact-info__item {
	display: flex;
	flex-direction: column;
	gap: .4vw;
	padding: 1.8vw 0;
	border-bottom: 1px solid var(--color-border-accordion);
	transition: opacity var(--trans-std);
}

.contact-info__item:hover {
	opacity: 0.7;
}


.contact-info__item-label {
	font-style: italic;
	color: var(--color-text-dim);
	font-size: var(--fs-body);
}


.contact-info__item-value {
	font-size: 1.6vw;
	color: var(--color-text-main);
	text-transform: uppercase;
	line-height: 1.2;
	transition: color var(--trans-std);
}

a.contact-info__item-value:hover {
	color: var(--color-accent);
}


.contact-info__socials {
	display: flex;
	gap: 1vw;
	flex-wrap: wrap;
}


.contact-info__social-link {
	display: flex;
	align-items: center;
	gap: .6vw;
	padding: .35em .65em .35em .35em;
	background-color: var(--color-bg-secondary);
	color: var(--color-text-main);
	border-radius: var(--radius-pill);
	text-transform: uppercase;
	transition: background var(--trans-slow), color var(--trans-slow);
}
/*
.contact-info__social-link:hover {
	background: var(--color-accent);
	color: var(--color-text-inv);
}
*/
.contact-info__social-link svg {
	width: 1.8em;
	height: 1.8em;
	fill: currentColor;
	background: var(--color-bg-main);
	border-radius: var(--radius-circle);
	padding: .3em;
	transition: background var(--trans-slow), fill var(--trans-slow);
}

.contact-info__social-link:hover svg {
    background: var(--color-accent);
    fill: var(--color-text-inv);
    /*
	background: var(--color-text-inv);
	fill: var(--color-text-inv);
	*/
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 2vw;
}


.contact-form__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1vw;
}

.contact-form__title {
	font-size: 2vw;
	text-transform: uppercase;
	line-height: 1.2;
}


.contact-form__badge {
	display: inline-block;
	border: 1px solid var(--color-border-dark);
	padding: .48vw .9vw;
	border-radius: var(--radius-pill);
	text-transform: uppercase;
	font-size: var(--fs-body);
	color: var(--color-text-dim);
	white-space: nowrap;
}


.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2vw;
}


.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: .5vw;
}

.contact-form__field--full {
	grid-column: 1 / -1;
}

.contact-form__label {
	font-style: italic;
	color: var(--color-text-dim);
	font-size: var(--fs-body);
}


.contact-form__input,
.contact-form__textarea,
.contact-form__select {
	width: 100%;
	background: var(--color-bg-main);
	border: 1px solid var(--color-border-accordion);
	border-radius: calc(var(--radius-lg) / 1.5);
	padding: 1.1vw 1.4vw;
	color: var(--color-text-main);
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	line-height: 1.4;
	outline: none;
	transition: border-color var(--trans-std);
	appearance: none;
	-webkit-appearance: none;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
	color: var(--color-text-dim);
}

.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__select:focus {
	border-color: var(--color-accent);
}


.contact-form__select-wrap {
	position: relative;
}

.contact-form__select-wrap::after {
	content: "";
	pointer-events: none;
	position: absolute;
	right: 1.4vw;
	top: 50%;
	transform: translateY(-50%);
	width: .6vw;
	height: .6vw;
	border-right: 1px solid var(--color-text-dim);
	border-bottom: 1px solid var(--color-text-dim);
	rotate: 45deg;
}


.contact-form__textarea {
	resize: none;
	min-height: 12vw;
}


.contact-form__btn {
	border: 0;
	cursor: pointer;
	font-size: inherit;
}

.contact-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5vw;
	margin-top: .5vw;
}

.contact-form__note {
	font-style: italic;
	color: var(--color-text-dim);
	font-size: var(--fs-body);
	line-height: 1.4;
	max-width: 55%;
}


.contact-form__success {
	display: none;
	align-items: center;
	gap: 1vw;
	color: var(--color-accent);
	font-size: var(--fs-body);
	text-transform: uppercase;
}

.contact-form__success svg {
	width: 1.4em;
	height: 1.4em;
	fill: var(--color-accent);
	flex-shrink: 0;
}


.contact-form__btn:active~.contact-form__success {
	display: flex;
}


.contact-map {
	margin: 8vw 4vw 8vw;
	height: 28vw;
	border-radius: var(--radius-lg);
	background: var(--color-bg-secondary);
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-map__label {
	position: absolute;
	top: 2vw;
	left: 2.5vw;
	display: flex;
	flex-direction: column;
	gap: .5vw;
}

.contact-map__tag {
	display: inline-flex;
	align-items: center;
	gap: .6vw;
	background: var(--color-bg-main);
	border-radius: var(--radius-pill);
	padding: .5vw 1.1vw;
	font-size: var(--fs-body);
	text-transform: uppercase;
	color: var(--color-text-main);
}

.contact-map__tag svg {
	width: 1em;
	height: 1em;
	fill: var(--color-accent);
	flex-shrink: 0;
}


.contact-map__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--color-border-accordion) 1px, transparent 1px),
		linear-gradient(90deg, var(--color-border-accordion) 1px, transparent 1px);
	background-size: 5vw 5vw;
	opacity: .35;
}


.contact-map__pin {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3vw;
}

.contact-map__pin svg {
	width: 3vw;
	height: 3vw;
	fill: var(--color-accent);
	animation: wave 4s ease-in-out infinite;
	transform-origin: bottom center;
}

.contact-map__pin-label {
	background: var(--color-bg-main);
	border-radius: var(--radius-pill);
	padding: .4vw 1vw;
	font-size: var(--fs-body);
	text-transform: uppercase;
	white-space: nowrap;
}


@media screen and (max-width: 650px) {


	#contact-page .hero {
		padding-top: 50vw;
		padding-bottom: 15vw;
	}


	.contact-grid {
		display: flex;
		flex-direction: column;
		gap: 15vw;
		margin: 10vw 6vw 0;
	}


	.contact-info__header h2 {
		font-size: var(--fs-h2);
		margin-top: 5vw;
	}

	.contact-info__desc {
		max-width: 100%;
	}

	.contact-info__item {
		padding: 5vw 0;
		gap: 1.5vw;
	}

	.contact-info__item-label {
		font-size: var(--fs-desc);
	}

	.contact-info__item-value {
		font-size: 4.5vw;
	}

	.contact-info__socials {
		gap: 2.5vw;
	}
    /*
	.contact-info__social-link {
		padding: .4em .4em .4em 1.2em;
	}
    */

	.contact-form {
		gap: 5vw;
	}

	.contact-form__title {
		font-size: 6vw;
	}

	.contact-form__badge {
		padding: 1.5vw 3vw;
	}

	.contact-form__row {
		grid-template-columns: 1fr;
		gap: 5vw;
	}

	.contact-form__field--full {
		grid-column: unset;
	}

	.contact-form__input,
	.contact-form__textarea,
	.contact-form__select {
		padding: 4vw 4.5vw;
		border-radius: 3vw;
	}

	.contact-form__select-wrap::after {
		right: 4.5vw;
		width: 2vw;
		height: 2vw;
	}

	.contact-form__textarea {
		min-height: 35vw;
	}

	.contact-form__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 5vw;
	}

	.contact-form__note {
		max-width: 100%;
	}

	.contact-map {
		margin: 14vw 6vw 14vw;
		height: 90vw;
		border-radius: 4vw;
	}

	.contact-map__label {
		top: 5vw;
		left: 5vw;
	}

	.contact-map__tag {
		padding: 2vw 4vw;
		gap: 1.5vw;
	}

	.contact-map__pin svg {
		width: 10vw;
		height: 10vw;
	}

	.contact-map__pin-label {
		padding: 1.5vw 3.5vw;
	}

	.contact-map__grid {
		background-size: 12vw 12vw;
	}
}