:root {
	--teal: #246675;
	--aqua: #00adb1;
	--aqua-deep: #0083a0;
	--ink: #333;
	--heading: #56656e;
	--night: #2b323a;
	--footer: #071426;
	--line: #e5e5e5;
	--header: 92px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header) + 12px);
}

body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font-family: "Encode Sans Semi Condensed", Verdana, sans-serif;
	font-size: 17px;
	line-height: 1.55;
}

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

a {
	color: var(--aqua);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--aqua-deep);
}

h1,
h2 {
	margin: 0 0 0.6rem;
	font-family: "Yanone Kaffeesatz", Arial, sans-serif;
	font-weight: 400;
	color: var(--heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.15;
}

h1 {
	font-size: 2.15rem;
}

h2 {
	font-size: 1.85rem;
}

p {
	margin: 0 0 1rem;
}

.wrap {
	width: min(980px, calc(100% - 32px));
	margin-inline: auto;
}

.narrow {
	width: min(640px, calc(100% - 32px));
	text-align: center;
}

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

.skip {
	position: absolute;
	left: 12px;
	top: -48px;
	z-index: 80;
	background: #fff;
	color: #000;
	padding: 8px 12px;
}

.skip:focus {
	top: 8px;
}

:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 26px;
	background: var(--teal);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0;
	touch-action: manipulation;
}

.btn:hover,
.btn:focus-visible {
	background: #444;
	color: #fff;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: #fefefe;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.header-bar {
	min-height: var(--header);
	display: flex;
	align-items: center;
	gap: 1rem;
}

.logo {
	margin-right: auto;
	display: flex;
}

.logo img {
	height: 64px;
	width: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.site-nav ul {
	display: flex;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a:not(.btn) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	color: #000;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	text-decoration: none;
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn).is-active {
	background: var(--teal);
	color: #fff;
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: #000;
	cursor: pointer;
}

.nav-toggle svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.nav-toggle .icon-close {
	display: none;
}

.nav-toggle[aria-expanded="true"] .icon-open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
	display: block;
	margin-inline: auto;
}

.hero {
	position: relative;
	background: #d5dde3;
	min-height: 280px;
	overflow: hidden;
}

.hero img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	object-position: 72% center;
}

.hero-label {
	position: absolute;
	left: max(16px, calc(50% - 490px));
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	padding: 10px 16px 14px;
	background: rgba(36, 102, 117, 0.88);
	color: #fff;
	font-family: "Loved by the King", cursive;
	font-size: 2.4rem;
	line-height: 1.15;
	font-weight: 400;
}

.intro {
	padding: 3.2rem 0 2.6rem;
}

.echos {
	background: var(--night);
	color: #fff;
	padding: 2.8rem 0 2.2rem;
}

.echos h2 {
	color: #fff;
	text-align: center;
	margin-bottom: 1.4rem;
}

.choices {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
}

.choices li {
	display: flex;
	gap: 0.9rem;
	align-items: center;
}

.mark {
	flex: 0 0 74px;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--aqua);
	color: #fff;
	display: grid;
	place-items: center;
	text-align: center;
	font-family: "Yanone Kaffeesatz", Arial, sans-serif;
	font-size: 1.15rem;
	line-height: 1;
	text-transform: uppercase;
	padding: 0 6px;
}

.choices li:nth-child(2) .mark {
	background: var(--aqua-deep);
}

.choices strong,
.choices span,
.choices b {
	display: block;
}

.choices strong {
	font-size: 1.15rem;
	text-transform: uppercase;
	font-weight: 700;
}

.choices span {
	color: #d5dde3;
	font-size: 0.98rem;
}

.choices b {
	margin-top: 0.15rem;
	font-size: 1.35rem;
}

.combi {
	margin: 1.4rem 0 0.6rem;
	text-align: center;
}

.fine {
	color: #c5ced6;
	text-align: center;
	font-size: 0.98rem;
	max-width: 46rem;
	margin-inline: auto;
}

.quote {
	padding: 2.8rem 0 2.2rem;
	text-align: center;
}

.who {
	margin: 0 0 0.35rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #000;
	font-size: 0.95rem;
}

.words {
	margin: 0;
	font-family: "Yanone Kaffeesatz", Arial, sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.15rem);
	line-height: 1.25;
	color: var(--aqua-deep);
	text-transform: none;
}

.about {
	padding: 0 0 2.4rem;
}

.about .narrow {
	text-align: center;
}

.visit {
	background: var(--footer);
	color: #fff;
	text-align: center;
	padding: 2.6rem 0 2.2rem;
}

.visit h2,
.visit a {
	color: #fff;
}

.visit a {
	font-weight: 700;
	text-decoration: none;
}

.visit a:hover {
	text-decoration: underline;
}

.visit .fine {
	color: #d5dde3;
}

@media (min-width: 760px) {
	.choices {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}

	.choices li {
		flex-direction: column;
		text-align: center;
	}

	.hero img {
		height: 420px;
	}
}

@media (max-width: 759px) {
	.nav-toggle {
		display: grid;
		place-items: center;
	}

	.site-header {
		position: sticky;
	}

	.js .site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		flex-direction: column;
		align-items: stretch;
		padding: 0.4rem 0 0.8rem;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
	}

	.js .site-nav.is-open {
		display: flex;
	}

	.site-nav ul {
		flex-direction: column;
	}

	.header-call {
		margin: 0.4rem 16px 0;
	}

	.header-bar {
		position: relative;
	}

	.hero-label {
		font-size: 2rem;
		left: 16px;
	}

	.hero img {
		height: 240px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}