.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

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

.container--wide {
	max-width: calc(var(--container-hero) + 2 * var(--sp-12));
	padding-inline: var(--sp-12);
}

@media (max-width: 782px) {
	.container--wide { padding-inline: var(--sp-4); }
}

.skip-link:focus-visible {
	position: absolute;
	left: var(--sp-4);
	top: var(--sp-4);
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	padding: var(--sp-2) var(--sp-4);
	background: var(--c-surface);
	color: var(--c-ink);
	border-radius: var(--radius);
}

.site-header {
	background: var(--c-brand);
	padding-inline: var(--sp-12);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	min-height: var(--header-height);
	max-width: var(--container-hero);
	margin-inline: auto;
	padding-block: var(--sp-2);
}

.site-header__logo {
	display: inline-flex;
	align-items: center;
}

.site-header__logo img {
	display: block;
	width: var(--logo-width);
	height: auto;
	max-width: 100%;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-ui);
	font-size: var(--fs-base);
	font-weight: 700;
	text-transform: uppercase;
}

.site-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-inline: var(--sp-4);
	color: var(--c-on-brand);
	text-decoration: none;
}

.site-nav__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	color: var(--c-on-brand-hover);
}

.site-main { min-height: 50vh; }

@media (max-width: 782px) {
	.site-header { padding-inline: var(--sp-4); }
	.site-header__logo img { width: var(--logo-width-small); }
	.site-header__inner { flex-wrap: wrap; gap: var(--sp-4); padding-inline: var(--sp-4); }
	.site-nav__list a { padding-inline: var(--sp-2); }
	.site-nav__list { font-size: var(--fs-sm); }
	.site-nav__icon { width: 16px; height: 16px; }
}

.site-footer {
	margin-top: var(--sp-24);
	background: var(--c-brand);
	padding-inline: var(--sp-12);
	border-radius: 5rem 5rem 0 0;
	color: var(--c-on-brand);
	font-family: var(--font-ui);
}

.site-footer__inner {
	max-width: var(--container-hero);
	margin-inline: auto;
	padding-block: var(--sp-12);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: var(--sp-6);
}

.site-footer__logo {
	display: inline-flex;
}

.site-footer__logo img {
	display: block;
	height: auto;
	width: 248px;
	max-width: 100%;
}

.site-footer__social {
	display: flex;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sp-8);
	height: var(--sp-8);
	border-radius: 50%;
	background: var(--c-on-brand);
	color: var(--c-brand);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	background: var(--c-on-brand-hover);
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
	font-weight: 500;
}

.site-footer__list li {
	display: flex;
	align-items: center;
}

.site-footer__list li:not(:last-child)::after {
	content: "";
	width: 2px;
	height: 1em;
	margin-inline: var(--sp-4);
	background: var(--c-on-brand);
}

.site-footer__list a {
	color: var(--c-on-brand);
	text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
	color: var(--c-on-brand-hover);
}

.site-footer__legal {
	font-family: var(--font-ui);
	font-size: var(--fs-sm);
	max-width: var(--container-narrow);
}

.site-footer__legal p {
	margin: 0 0 var(--sp-4);
}

.site-footer__legal p:last-child { margin-bottom: 0; }

@media (max-width: 782px) {
	.site-footer__inner { padding: var(--sp-6) var(--sp-4); }
}