/* Variables */
:root {
	--site-pad: 2rem;
	--container: 60rem;
	--container-sm: 52.875rem;
	--display-font: neulis-neue, sans-serif;
	--body-font: "Open Sans", sans-serif;
	--blue-light: #209abc;
	--blue-dark: #154656;
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-family: var(--body-font);
}

body {
	min-height: 100vh;
	line-height: 1.5;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
textarea,
select {
	font: inherit;
	border: none;
	background: none;
}

button {
	cursor: pointer;
}

input,
textarea,
select {
	width: 100%;
	min-width: 0;
}

html {
	scroll-behavior: smooth;
}

/* Utility */
.container,
.container-sm {
	width: 100%;
	max-width: calc(var(--container) + var(--site-pad) + var(--site-pad));
	margin: 0 auto;
	padding: 0 var(--site-pad);
}

.container-sm {
	max-width: var(--container-sm);
}

.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.headline,
.headline-lg {
	color: var(--blue-light);
	font-family: var(--display-font);
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.1em;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.15rem;
	margin: 0 0 3.125rem 0;
}

.headline-lg {
	font-size: 2rem;
	color: var(--blue-dark);
	font-weight: 600;
	margin: 0 0 1rem 0;
}

.btn,
.btn2 {
	background: var(--blue-dark);
	color: #fff;
	text-decoration: none;
	padding: 0.75rem 1rem;
	border-radius: 0.625rem;
	display: inline-block;

	&:hover,
	&:focus-visible {
		background: var(--blue-light);
	}
}

.btn2 {
	font-weight: 700;
	background: var(--blue-light);

	&:hover,
	&:focus-visible {
		background: #fff;
		color: var(--blue-dark);
	}
}

.hero {
	background: url("./img/hero.webp") center center / cover no-repeat;
	padding: 3.125rem 0 11.625rem 0;
	position: relative;
	overflow: clip;

	nav {
		display: flex;
		justify-content: flex-end;
		gap: 2rem;

		a {
			color: #fff;
			text-decoration: none;
			text-transform: uppercase;
			font-size: 0.75rem;
			letter-spacing: 0.1rem;
		}
	}

	.group {
		display: flex;
		align-items: center;
		margin: 10rem 0 0 0;
		gap: 4rem;

		> div {
			flex: 1;

			&:first-child {
				animation: slideInLeft 0.5s ease-out forwards;
			}

			&:last-child {
				animation: slideInRight 0.5s ease-out forwards;
				opacity: 0;
			}
		}

		h1 {
			font-family: var(--display-font);
			color: #fff;
			font-weight: 300;
			font-size: 4.8125rem;
			line-height: 1.1em;

			strong {
				font-weight: 500;
			}
		}

		p {
			font-size: 1.25rem;
			line-height: 1.5em;
			color: #fff;
			margin: 0 0 1.5rem 0;
		}

		@media (width < 1040px) {
			flex-direction: column;
			text-align: center;
			max-width: 40rem;
			margin: 220px auto 0 auto;

			h1 {
				font-size: clamp(3rem, 6vw, 4.8125rem);
			}
		}

		@media (width < 700px) {
			margin: 5rem 0 0 0;
		}
	}

	.lock {
		max-width: 2.3125rem;
		position: absolute;
		inset: auto auto 2rem 50%;
		translate: -50% 0;

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: auto auto calc(100% + 1rem) 50%;
			translate: -50% 0;
			height: 480px;
			border-left: 4px dotted #fff;
		}
		&::after {
			inset: calc(100% + 1rem) auto auto 50%;
			height: 20px;
		}

		@media (width < 1040px) {
			max-width: 1.2rem;

			&::before {
				height: 100px;
				inset: auto auto calc(100% + 0.5rem) 50%;
			}

			&::after {
				inset: calc(100% + 0.5rem) auto auto 50%;
			}
		}
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.opening {
	padding: 6.25rem 0;
	position: relative;
	margin: 0 0 1.25rem 0;

	&::before,
	&::after {
		content: "";
		position: absolute;
		inset: 0.2rem auto auto 50%;
		translate: -50% 0;
		width: 0;
		height: 5.2rem;
		border-left: 4px dotted var(--blue-light);
		opacity: 0.3;
	}

	&::after {
		inset: auto auto 0.2rem 50%;
		height: 3.125rem;
	}

	p {
		font-family: var(--display-font);
		font-size: 1.4375rem;
		line-height: 1.6em;
		text-align: center;

		&:not(:last-child) {
			margin: 0 0 1.5rem 0;
		}

		@media (width < 700px) {
			font-size: 1.25rem;
		}
	}
}

.map {
	scroll-margin-top: 3.125rem;

	.img {
		border-radius: 1.25rem;
		overflow: clip;
		margin: 0 0 1.875rem 0;

		img {
			object-fit: cover;
		}
	}

	p {
		font-family: var(--display-font);
		font-size: 0.875rem;
		line-height: 24px;
		margin: 0 0 11.25rem 0;
		text-align: center;
		text-wrap: balance;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			inset: calc(100% + 1.875rem) auto 1.875rem 50%;
			translate: -50% 0;
			width: 0;
			height: 7.5rem;
			border-left: 4px dotted var(--blue-light);
			opacity: 0.3;
		}

		span {
			white-space: nowrap;
		}

		.purple {
			color: #775b95;
		}

		.blue {
			color: #0485b8;
		}

		.red {
			color: #c73421;
		}

		.orange {
			color: #ffb400;
		}
	}
}

.faq {
	padding: 0 0 6.25rem 0;

	details {
		border: 1px solid #ececec;
		border-radius: 0.625rem;
		margin: 0 0 1rem 0;
		overflow: clip;
		transition: transform 0.2s ease;
		transform-origin: top;
		container-type: inline-size;

		&:hover {
			border-color: var(--blue-light);
		}

		summary {
			font-family: var(--display-font);
			font-size: 1.4375rem;
			line-height: 1.5em;
			color: var(--blue-dark);
			cursor: pointer;
			list-style: none;
			position: relative;
			padding: 1rem 1rem 1rem 4rem;
			outline-offset: -1px;
			border-radius: 0.625rem;

			&::before {
				content: "";
				position: absolute;
				inset: 1rem auto auto 1rem;
				background-color: var(--blue-light);
				border-radius: 50%;
				width: 2.1875rem;
				height: 2.1875rem;
				opacity: 0.4;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3V13M3 8H13' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-position: center;
				transition: all 0.2s ease;
			}
		}

		&[open] summary::before {
			background-color: var(--blue-dark);
			background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8H13' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
			transform: rotate(180deg);
		}

		> div {
			padding: 0 2rem 1rem 4rem;
			height: 0;
			opacity: 0;
			transition: height 0.2s ease, opacity 0.2s ease;
		}

		&[open] > div {
			height: auto;
			opacity: 1;
		}
	}
}

@keyframes slide {
	from {
		height: 0;
		opacity: 0;
	}
	to {
		height: var(--content-height);
		opacity: 1;
	}
}

.email {
	scroll-margin-top: 3.125rem;
	margin: 0 0 6.25rem 0;

	h2 {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			inset: auto auto calc(100% + 1rem) 50%;
			translate: -50% 0;
			width: 0;
			height: 5.2rem;
			border-left: 4px dotted var(--blue-light);
			opacity: 0.3;
		}
	}
	.txt {
		text-align: center;
		margin: 0 0 2rem 0;
	}

	.group {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;

		> div {
			flex: 1;
			min-width: 12.5rem;
			border: 1px solid var(--blue-light);
			border-radius: 0.625rem;
			padding: 1.5rem;
			text-align: center;
		}

		h3 {
			line-height: 1.2em;
		}

		.info {
			margin: 0 0 2rem 0;
		}
	}
}
.share {
	margin: 0 0 6.25rem 0;
	text-align: center;

	h2 {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			inset: auto auto calc(100% + 1rem) 50%;
			translate: -50% 0;
			width: 0;
			height: 4rem;
			border-left: 4px dotted var(--blue-light);
			opacity: 0.3;
		}
	}
}
.fb-share {
	background: #ececec;
	padding: 0.75rem 1.5rem 0.75rem 1rem;
	border-radius: 6.25rem;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: fit-content;
	margin: 0 auto;

	img {
		width: 30px;
		display: inline-block;
	}

	&:hover,
	&:focus-visible {
		background: var(--blue-dark);
		color: #fff;
	}
}