@layer components {
	.site-header {
		--topbar-height: 2.25rem;

		position: sticky;
		/* The contact bar scrolls away; the name and navigation stay pinned. */
		inset-block-start: calc(var(--topbar-height) * -1);
		z-index: 30;
		background: var(--color-surface);
		border-block-end: 1px solid var(--color-line);
		view-transition-name: site-header;
	}

	.topbar {
		background: var(--color-ink);
		color: var(--color-base);
		font-size: var(--text-s);
	}

	.topbar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		height: var(--topbar-height);
	}

	.topbar a {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		min-width: 0;
		color: inherit;
		text-decoration: none;
	}

	.topbar a span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.topbar__icon {
		flex: none;
		width: 1.15rem;
		height: 1.15rem;
		color: #fff;
	}

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

	.topbar a:focus-visible {
		outline-color: var(--color-base);
	}

	.site-header__bar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s) var(--space-m);
		padding-block: var(--space-s);
	}

	.site-brand {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		min-width: 0;
		color: inherit;
		text-decoration: none;
	}

	.site-brand:hover {
		color: inherit;
	}

	.site-title {
		font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1.05;
	}

	.site-role {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		min-width: 0;
	}

	.site-role__logo {
		width: auto;
		height: 1.65rem;
		max-height: 1.65rem;
	}

	.site-role__mark {
		color: var(--color-accent);
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.04em;
	}

	.site-role__label {
		color: var(--color-ink);
		font-size: 0.68rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.site-nav summary {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.45rem 0.7rem;
		border: 1px solid var(--color-line);
		border-radius: 999px;
		background: var(--color-surface);
		list-style: none;
		cursor: pointer;
	}

	.site-nav summary::-webkit-details-marker {
		display: none;
	}

	.site-nav__icon,
	.site-nav__icon::before,
	.site-nav__icon::after {
		display: block;
		width: 1rem;
		height: 1.5px;
		border-radius: 1px;
		background: var(--color-ink);
	}

	.site-nav__icon {
		position: relative;
	}

	.site-nav__icon::before,
	.site-nav__icon::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
	}

	.site-nav__icon::before {
		inset-block-start: -5px;
	}

	.site-nav__icon::after {
		inset-block-start: 5px;
	}

	.site-nav[open] .site-nav__icon {
		background: transparent;
	}

	.site-nav[open] .site-nav__icon::before {
		inset-block-start: 0;
		rotate: 45deg;
	}

	.site-nav[open] .site-nav__icon::after {
		inset-block-start: 0;
		rotate: -45deg;
	}

	.site-nav__text {
		font-size: var(--text-s);
		font-weight: 600;
	}

	.site-nav__text--close,
	.site-nav[open] .site-nav__text--open {
		display: none;
	}

	.site-nav[open] .site-nav__text--close {
		display: inline;
	}

	.site-nav__panel {
		display: none;
	}

	.site-nav__panel .menu {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-nav__panel .menu a {
		position: relative;
		display: inline-block;
		color: var(--color-ink);
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}

	.site-nav__panel .menu a::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: -0.35rem;
		height: 2px;
		border-radius: 2px;
		background: var(--color-accent);
		scale: 0 1;
		transform-origin: left center;
		transition: scale var(--duration) var(--ease-out);
	}

	.site-nav__panel .menu a:hover {
		color: var(--color-ink);
	}

	.site-nav__panel .menu a:hover::after,
	.site-nav__panel .menu a:focus-visible::after,
	.site-nav__panel .current-menu-item > a::after,
	.site-nav__panel .current-menu-ancestor > a::after,
	.site-nav__panel .current_page_parent > a::after {
		scale: 1 1;
	}

	.site-nav__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.45rem;
		width: fit-content;
		padding: 0.7rem 1.2rem;
		border: 1px solid var(--color-ink);
		border-radius: 999px;
		background: var(--color-ink);
		color: var(--color-surface);
		font-size: var(--text-s);
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
	}

	.site-nav__cta:hover {
		background: #002a5e;
		border-color: #002a5e;
		color: var(--color-surface);
	}

	.site-nav__cta-arrow {
		transition: translate var(--duration) var(--ease-out);
	}

	.site-nav__cta:hover .site-nav__cta-arrow {
		translate: 0.2rem 0;
	}

	@media (width < 64rem) {
		html:has(.site-nav[open]) {
			overflow: hidden;
		}

		.site-nav[open] + .site-nav__panel {
			display: flex;
			flex-direction: column;
			gap: var(--space-l);
			position: absolute;
			/* Below 64rem the bar is the viewport minus one gutter per side. */
			inset-inline: calc(var(--gutter) * -1);
			inset-block-start: 100%;
			z-index: 40;
			height: 100dvh;
			padding: var(--space-s) var(--gutter) var(--space-xl);
			overflow-y: auto;
			background: var(--color-surface);
			border-block-start: 1px solid var(--color-line);
		}

		.site-nav__panel .menu li {
			padding-block: 0.9rem;
			border-block-end: 1px solid var(--color-line);
		}

		.site-nav__panel .menu a {
			font-size: var(--text-l);
			letter-spacing: -0.02em;
		}

		.site-nav__panel .site-nav__cta {
			width: 100%;
			padding-block: 1rem;
			font-size: var(--text-m);
		}
	}

	@media (width < 64rem) and (prefers-reduced-motion: no-preference) {
		.site-nav__icon,
		.site-nav__icon::before,
		.site-nav__icon::after {
			transition: rotate var(--duration) var(--ease-out), inset-block-start var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
		}

		.site-nav[open] + .site-nav__panel,
		.site-nav[open] + .site-nav__panel .menu li,
		.site-nav[open] + .site-nav__panel .site-nav__cta {
			transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out);
		}

		.site-nav[open] + .site-nav__panel .menu li:nth-child(2) { transition-delay: 40ms; }
		.site-nav[open] + .site-nav__panel .menu li:nth-child(3) { transition-delay: 80ms; }
		.site-nav[open] + .site-nav__panel .menu li:nth-child(4) { transition-delay: 120ms; }
		.site-nav[open] + .site-nav__panel .menu li:nth-child(5) { transition-delay: 160ms; }
		.site-nav[open] + .site-nav__panel .menu li:nth-child(n + 6),
		.site-nav[open] + .site-nav__panel .site-nav__cta { transition-delay: 200ms; }

		@starting-style {
			.site-nav[open] + .site-nav__panel {
				opacity: 0;
				translate: 0 -0.5rem;
			}

			.site-nav[open] + .site-nav__panel .menu li,
			.site-nav[open] + .site-nav__panel .site-nav__cta {
				opacity: 0;
				translate: 0 0.75rem;
			}
		}
	}

	@supports (animation-timeline: scroll()) {
		@media (prefers-reduced-motion: no-preference) {
			.site-header {
				animation: header-pinned linear both;
				animation-timeline: scroll(root);
				animation-range: 0 8rem;
			}

			.site-title {
				transform-origin: left bottom;
				animation: brand-pinned linear both;
				animation-timeline: scroll(root);
				animation-range: 0 8rem;
			}
		}
	}

	@keyframes header-pinned {
		to {
			border-block-end-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-line));
		}
	}

	@keyframes brand-pinned {
		to {
			scale: 0.9;
		}
	}

	@media (min-width: 64rem) {
		.site-header .site-nav {
			display: none;
		}

		.site-header .site-nav__panel,
		.site-header .site-nav[open] + .site-nav__panel {
			display: flex;
			align-items: center;
			gap: var(--space-l);
			position: static;
			flex: 0 0 auto;
			width: auto;
			margin-inline-start: auto;
			padding: 0;
			border: 0;
			background: transparent;
		}

		.site-nav__panel .menu {
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-end;
			gap: var(--space-m);
		}
	}
}