@layer reset, tokens, base, layout, components, utilities;
@font-face {
	font-family: "Familjen Grotesk";
	src: url("/assets/fonts/familjen-grotesk.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("/assets/fonts/atkinson-hyperlegible-next.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("/assets/fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}
@layer tokens {
	:root {
		--c-nebel: #f1f3f2;
		--c-tiefwasser: #0f2a33;
		--c-kobalt: #2b44d9;
		--c-kobalt-hell: #dde2fa;
		--c-schlick: #55635f;
		--c-weiss: #ffffff;
		--c-kobalt-nacht: #a9b6f5;
		--c-schlick-nacht: #9db0aa;
		--color-bg: var(--c-nebel);
		--color-surface: var(--c-weiss);
		--color-text: var(--c-tiefwasser);
		--color-text-muted: var(--c-schlick);
		--color-accent: var(--c-kobalt);
		--color-accent-soft: var(--c-kobalt-hell);
		--color-rule: color-mix(in srgb, var(--c-tiefwasser) 16%, transparent);
		--color-focus: var(--c-kobalt);
		--font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
		--font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
		--step--1: clamp(0.9rem, 0.87rem + 0.13vw, 0.98rem);
		--step-0: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);
		--step-1: clamp(1.35rem, 1.27rem + 0.37vw, 1.5625rem);
		--step-2: clamp(1.62rem, 1.48rem + 0.6vw, 1.95rem);
		--step-3: clamp(1.94rem, 1.71rem + 1.02vw, 2.44rem);
		--step-4: clamp(2.33rem, 1.94rem + 1.71vw, 3.05rem);
		--step-5: clamp(2.8rem, 2.1rem + 3vw, 4.77rem);
		--step-6: clamp(3rem, 1.6rem + 5vw, 6rem);
		--step-display: clamp(2.75rem, 1.4rem + 7vw, 8.5rem);
		--leading-tight: 1;
		--leading-snug: 1.2;
		--leading-body: 1.6;
		--tracking-display: -0.035em;
		--tracking-heading: -0.015em;
		--measure: 68ch;
		--space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
		--space-2xs: clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem);
		--space-xs: clamp(0.75rem, 0.71rem + 0.19vw, 0.94rem);
		--space-s: clamp(1rem, 0.94rem + 0.28vw, 1.25rem);
		--space-m: clamp(1.5rem, 1.41rem + 0.42vw, 1.88rem);
		--space-l: clamp(2rem, 1.88rem + 0.56vw, 2.5rem);
		--space-xl: clamp(3rem, 2.81rem + 0.83vw, 3.75rem);
		--space-2xl: clamp(4rem, 3.5rem + 2.2vw, 6rem);
		--space-3xl: clamp(5rem, 3.9rem + 4.9vw, 9.5rem);
		--wrap-max: 86rem;
		--wrap-gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
		--grid-gap: var(--space-m);
		--line-weight: 2px;
		--line-dot: 0.75rem;
		--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
		--duration-fast: 160ms;
		--duration-base: 260ms;
		--radius-control: 0.25rem;
		--radius-media: 0.375rem;
		--media-bg: color-mix(in srgb, var(--c-kobalt-hell) 55%, var(--c-nebel));
		--media-icon: color-mix(in srgb, var(--c-kobalt) 45%, transparent);
		--media-caption-bg: var(--c-nebel);
		--media-caption-fg: var(--c-schlick);
		--control-border: var(--color-rule);
		--header-h: 4.75rem;
		--course-index-h: 3.5rem;
	}
}
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	* {
		margin: 0;
	}
	html {
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}
	body {
		min-height: 100vh;
	}
	img,
	picture,
	svg,
	video {
		display: block;
		max-width: 100%;
	}
	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}
	ul[role="list"],
	ol[role="list"] {
		list-style: none;
		padding: 0;
	}
	p,
	h1,
	h2,
	h3,
	h4 {
		overflow-wrap: break-word;
	}
	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}
@layer base {
	html {
		color-scheme: light;
		scroll-padding-top: 5rem;
		scrollbar-color: var(--c-schlick) var(--c-nebel);
		accent-color: var(--c-kobalt);
	}
	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
	}
	body {
		background: var(--color-bg);
		color: var(--color-text);
		font-family: var(--font-body);
		font-size: var(--step-0);
		line-height: var(--leading-body);
		font-kerning: normal;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		caret-color: var(--c-kobalt);
		overflow-x: clip;
	}
	h1,
	h2,
	h3,
	h4 {
		font-family: var(--font-display);
		font-weight: 600;
		line-height: var(--leading-snug);
		letter-spacing: var(--tracking-heading);
		text-wrap: balance;
	}
	h1 {
		font-size: var(--step-4);
	}
	h2 {
		font-size: var(--step-3);
	}
	h3 {
		font-size: var(--step-1);
	}
	p,
	dd {
		max-width: var(--measure);
		text-wrap: pretty;
	}
	a {
		color: var(--color-accent);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}
	a:hover {
		text-decoration-thickness: 2px;
	}
	:focus-visible {
		outline: 3px solid var(--color-focus);
		outline-offset: 3px;
	}
	strong {
		font-weight: 700;
	}
	::selection {
		background: var(--color-accent-soft);
		color: var(--c-tiefwasser);
	}
}
@layer layout {
	.wrap {
		width: 100%;
		max-width: var(--wrap-max);
		margin-inline: auto;
		padding-inline: var(--wrap-gutter);
	}
	.flow > * + * {
		margin-block-start: var(--flow-space, var(--space-s));
	}
	.flow--m {
		--flow-space: var(--space-m);
	}
	.flow--l {
		--flow-space: var(--space-l);
	}
	.section {
		padding-block: var(--space-3xl);
	}
	.section:not([class*="surface-"]) + .section:not([class*="surface-"]) {
		border-block-start: 1px solid var(--color-rule);
	}
	.section-sub {
		margin-block-start: var(--space-2xl);
	}
	.section-foot {
		margin-block-start: var(--space-xl);
	}
	.split {
		display: grid;
		gap: var(--space-l) var(--grid-gap);
	}
	@media (min-width: 60em) {
		.split {
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}
		.split > * {
			grid-column: 5 / -1;
		}
		.split > .split__aside {
			grid-column: 1 / 5;
		}
		.split > .split__full {
			grid-column: 1 / -1;
		}
	}
	.columns {
		display: grid;
		gap: var(--space-xl) var(--grid-gap);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--columns-min, 18rem)), 1fr));
	}
}
@layer components {
	.surface-light,
	.surface-dark,
	.surface-kobalt {
		background: var(--color-bg);
		color: var(--color-text);
	}
	.surface-light {
		--color-bg: var(--c-weiss);
		--media-bg: var(--c-nebel);
	}
	.surface-dark {
		--color-bg: var(--c-tiefwasser);
		--color-text: var(--c-nebel);
		--color-text-muted: var(--c-schlick-nacht);
		--color-accent: var(--c-kobalt-nacht);
		--color-rule: color-mix(in srgb, var(--c-nebel) 18%, transparent);
		--color-focus: var(--c-kobalt-nacht);
		--button-bg: var(--c-nebel);
		--button-fg: var(--c-tiefwasser);
		--button-bg-hover: var(--c-kobalt-hell);
		--media-bg: color-mix(in srgb, var(--c-nebel) 7%, var(--c-tiefwasser));
		--media-icon: color-mix(in srgb, var(--c-kobalt-nacht) 45%, transparent);
		--media-caption-bg: var(--c-tiefwasser);
		--media-caption-fg: var(--c-schlick-nacht);
		--control-border: color-mix(in srgb, var(--c-nebel) 35%, transparent);
	}
	.surface-kobalt {
		--color-bg: var(--c-kobalt);
		--color-text: var(--c-weiss);
		--color-text-muted: var(--c-kobalt-hell);
		--color-accent: var(--c-weiss);
		--color-rule: color-mix(in srgb, var(--c-weiss) 28%, transparent);
		--color-focus: var(--c-weiss);
		--button-bg: var(--c-weiss);
		--button-fg: var(--c-kobalt);
		--button-bg-hover: var(--c-kobalt-hell);
	}
}
@layer components {
	.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		padding: 0.7em 1.35em;
		border: 0;
		border-radius: var(--radius-control);
		background: var(--button-bg, var(--c-kobalt));
		color: var(--button-fg, var(--c-weiss));
		font-family: var(--font-body);
		font-size: var(--step-0);
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		transition: background-color var(--duration-fast) ease;
	}
	.button:hover {
		background: var(--button-bg-hover, var(--c-tiefwasser));
	}
	.button--small {
		min-height: 2.5rem;
		padding: 0.5em 1em;
		font-size: var(--step--1);
	}
	.text-link {
		color: var(--color-text);
		font-weight: 600;
		text-decoration-color: var(--color-accent);
		text-decoration-thickness: 2px;
		text-underline-offset: 0.3em;
	}
	.text-link:hover {
		color: var(--color-accent);
	}
	.actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-s) var(--space-l);
	}
}
@layer components {
	.skip-link {
		position: absolute;
		inset-block-start: var(--space-2xs);
		inset-inline-start: var(--space-2xs);
		z-index: 10;
		padding: var(--space-2xs) var(--space-s);
		background: var(--c-tiefwasser);
		color: var(--c-nebel);
		translate: 0 -200%;
	}
	.skip-link:focus {
		translate: 0 0;
	}
	.site-header {
		position: sticky;
		inset-block-start: 0;
		z-index: 20;
		padding-block: var(--space-xs);
		border-block-end: 1px solid var(--color-rule);
		background: color-mix(in srgb, var(--c-nebel) 88%, transparent);
		backdrop-filter: blur(12px) saturate(1.4);
	}
	.site-header__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s) var(--space-l);
	}
	.site-header__brand {
		display: inline-flex;
		align-items: center;
		gap: 0.55em;
		color: var(--color-text);
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: 700;
		letter-spacing: var(--tracking-heading);
		text-decoration: none;
	}
	.site-header__mark {
		width: 1.6em;
		height: auto;
		color: var(--c-kobalt);
	}
	.site-header__toggle {
		display: none;
		align-items: center;
		gap: var(--space-2xs);
		min-height: 2.75rem;
		padding-inline: var(--space-s);
		border: 1px solid var(--color-rule);
		border-radius: var(--radius-control);
		background: transparent;
		font-weight: 600;
		cursor: pointer;
	}
	.site-nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-s) var(--space-l);
	}
	.site-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-m);
	}
	.site-nav__link {
		display: inline-block;
		padding-block: var(--space-3xs);
		color: var(--color-text);
		font-weight: 500;
		text-decoration: none;
		background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left bottom / 0 var(--line-weight);
		transition: background-size var(--duration-base) var(--ease-out);
	}
	.site-nav__link:hover,
	.site-nav__link[aria-current] {
		background-size: 100% var(--line-weight);
	}
	.lang-switch {
		display: flex;
		gap: var(--space-2xs);
		font-size: var(--step--1);
	}
	.lang-switch__link {
		color: var(--color-text-muted);
		font-weight: 600;
	}
	@media (max-width: 55.99em) {
		.js .site-header__toggle {
			display: inline-flex;
		}
		.js .site-nav {
			display: none;
			flex-basis: 100%;
			flex-direction: column;
			align-items: flex-start;
			padding-block: var(--space-m);
		}
		.js .site-nav.is-open {
			display: flex;
		}
		.js .site-nav__list {
			flex-direction: column;
			font-size: var(--step-1);
		}
	}
}
@layer components {
	.hero {
		padding-block: var(--space-2xl) var(--space-xl);
	}
	.hero__title {
		font-size: var(--step-display);
		font-weight: 700;
		line-height: 0.9;
		letter-spacing: var(--tracking-display);
	}
	.hero__claim {
		display: block;
	}
	.hero__descriptor {
		display: block;
		max-width: 32ch;
		margin-block-start: var(--space-m);
		color: var(--color-text-muted);
		font-family: var(--font-body);
		font-size: var(--step-1);
		font-weight: 400;
		line-height: 1.35;
		letter-spacing: 0;
	}
	.hero__course {
		margin-block: var(--space-xl) var(--space-l);
		margin-inline-start: calc(50% - 50vw);
	}
	.hero__visual {
		margin-block-start: var(--space-2xl);
	}
	.course {
		position: relative;
		height: clamp(5rem, 3rem + 7vw, 9rem);
	}
	.course__svg {
		width: 100%;
		height: 100%;
		overflow: visible;
	}
	.course__path {
		fill: none;
		stroke: var(--color-accent);
		stroke-width: var(--line-weight);
		stroke-linecap: round;
		stroke-linejoin: round;
		vector-effect: non-scaling-stroke;
	}
	.course__dot {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: 0;
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: 50% -50%;
		transition:
			opacity var(--duration-base) ease,
			scale 420ms var(--ease-out);
	}
	.js .course:not(.is-ready) .course__path,
	.js .course:not(.is-done) .course__dot {
		opacity: 0;
		animation: course-fallback 0s 2.5s forwards;
	}
	.js .course:not(.is-done) .course__dot {
		scale: 0.2;
	}
	@keyframes course-fallback {
		to {
			opacity: 1;
			scale: 1;
		}
	}
}
@layer components {
	.page-hero {
		padding-block: var(--space-m) var(--space-3xl);
	}
	.page-hero__grid {
		display: grid;
		gap: var(--space-2xl) var(--grid-gap);
		margin-block-start: var(--space-m);
	}
	@media (min-width: 60em) {
		.page-hero__grid {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			align-items: start;
		}
		.page-hero__main {
			grid-column: 1 / 8;
		}
		.page-hero__media {
			grid-column: 9 / -1;
		}
	}
	@media (max-width: 59.99em) {
		.page-hero .page-hero__media {
			--media-ratio: 4 / 3;
		}
	}
	.page-hero__title {
		font-size: var(--step-6);
		font-weight: 700;
		line-height: 0.94;
		letter-spacing: var(--tracking-display);
	}
	.page-hero__claim {
		display: block;
	}
	.page-hero__lead {
		margin-block-start: var(--space-m);
	}
	.discipline-index {
		margin-block-start: var(--space-l);
		container-type: inline-size;
	}
	.discipline-index__list {
		border-block-start: 1px solid var(--color-rule);
	}
	.discipline-index__item {
		border-block-end: 1px solid var(--color-rule);
	}
	.discipline-index__link {
		display: grid;
		gap: var(--space-3xs) var(--grid-gap);
		padding-block: var(--space-xs);
		color: var(--color-text);
		text-decoration: none;
		background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left bottom / 0 var(--line-weight);
		transition: background-size var(--duration-base) var(--ease-out);
	}
	.discipline-index__link:hover {
		background-size: 100% var(--line-weight);
	}
	.discipline-index__name {
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: var(--tracking-heading);
		transition: color var(--duration-fast) ease;
	}
	.discipline-index__link:hover .discipline-index__name {
		color: var(--color-accent);
	}
	.discipline-index__course {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		font-size: var(--step--1);
		line-height: 1.4;
	}
	.discipline-index__from {
		color: var(--color-text-muted);
	}
	.discipline-index__to {
		font-weight: 600;
	}
	.discipline-index__line {
		position: relative;
		flex: 1 1 1.5rem;
		max-width: 6rem;
		height: var(--line-weight);
		margin-inline-end: calc(var(--line-dot) / 2);
		background: var(--color-accent);
	}
	.discipline-index__line::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: calc(var(--line-dot) / -2);
		width: calc(var(--line-dot) * 0.75);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: 0 -50%;
	}
	@container (min-width: 40rem) {
		.discipline-index__link {
			grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
			align-items: center;
		}
	}
}
@layer components {
	.breadcrumb__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3xs) var(--space-2xs);
		font-size: var(--step--1);
	}
	.breadcrumb__item:not(:last-child)::after {
		content: "/";
		margin-inline-start: var(--space-2xs);
		color: var(--color-text-muted);
	}
	.breadcrumb__link {
		color: var(--color-text-muted);
		text-decoration: none;
	}
	.breadcrumb__link:hover {
		color: var(--color-accent);
		text-decoration: underline;
	}
	.breadcrumb__link[aria-current] {
		color: var(--color-text);
		font-weight: 600;
	}
}
@layer components {
	.act__head {
		--bleed: max(var(--wrap-gutter), calc((100vw - var(--wrap-max)) / 2 + var(--wrap-gutter)));
		display: grid;
		gap: var(--space-l) var(--grid-gap);
		padding-block: var(--space-3xl) var(--space-2xl);
	}
	.act__line {
		position: relative;
		width: calc(var(--bleed) + 66%);
		height: var(--line-weight);
		margin-block-end: var(--space-m);
		margin-inline-start: calc(-1 * var(--bleed));
		background: var(--color-accent);
	}
	.act__line::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: 0;
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: 50% -50%;
	}
	.act__title {
		font-size: var(--step-6);
		font-weight: 700;
		line-height: 0.94;
		letter-spacing: var(--tracking-display);
	}
	.act__text {
		color: var(--color-text-muted);
		font-size: var(--step-1);
		line-height: 1.45;
	}
	@media (min-width: 60em) {
		.act__head {
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}
		.act__line,
		.act__title {
			grid-column: 1 / -1;
		}
		.act__text {
			grid-column: 5 / 11;
		}
	}
}
@layer components {
	.chapter {
		--bleed: max(var(--wrap-gutter), calc((100vw - var(--wrap-max)) / 2 + var(--wrap-gutter)));
		padding-block: var(--space-3xl);
	}
	.chapter + .chapter {
		border-block-start: 1px solid var(--color-rule);
	}
	.chapter__grid {
		display: grid;
		gap: var(--space-l) var(--grid-gap);
	}
	.chapter__title {
		font-size: var(--step-5);
		line-height: 1;
		letter-spacing: var(--tracking-display);
	}
	.chapter__proof {
		margin-inline: calc(-1 * var(--wrap-gutter));
	}
	.chapter__proof .chapter__media {
		border-radius: 0;
	}
	.chapter__project {
		margin-block-start: var(--space-s);
		padding-inline: var(--wrap-gutter);
		font-size: var(--step--1);
	}
	.chapter__course {
		display: grid;
		align-content: center;
		gap: var(--space-l);
		padding-inline-start: calc(var(--line-dot) + var(--space-s));
	}
	.chapter__course dd {
		position: relative;
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--step-2);
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: var(--tracking-heading);
		text-wrap: balance;
	}
	.chapter__from {
		color: var(--color-text-muted);
	}
	.chapter__from::before {
		content: "";
		position: absolute;
		inset-block: 0.45em calc(-1 * var(--space-l) - 0.45em);
		inset-inline-start: calc(-1 * (var(--line-dot) / 2 + var(--space-s) + var(--line-weight) / 2));
		width: var(--line-weight);
		background: var(--color-accent);
	}
	.chapter__to::before {
		content: "";
		position: absolute;
		inset-block-start: 0.45em;
		inset-inline-start: calc(-1 * (var(--line-dot) + var(--space-s)));
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: 0 -50%;
	}
	.chapter__text {
		max-width: var(--measure);
	}
	@media (min-width: 60em) {
		.chapter__grid {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			row-gap: var(--space-xl);
		}
		.chapter__proof {
			grid-row: 2;
			margin-inline: 0;
		}
		.chapter__course {
			grid-row: 2;
		}
		.chapter__project {
			padding-inline: 0;
		}
		.chapter__text {
			grid-column: 5 / -1;
		}
		.service-panel {
			grid-column: 1 / -1;
		}
		.chapter--left .chapter__title {
			grid-column: 1 / 9;
		}
		.chapter--left .chapter__proof {
			grid-column: 1 / 8;
			margin-inline-start: calc(-1 * var(--bleed));
		}
		.chapter--left .chapter__project {
			padding-inline-start: var(--bleed);
		}
		.chapter--left .chapter__course {
			grid-column: 9 / -1;
		}
		.chapter--right .chapter__title {
			grid-column: 6 / -1;
		}
		.chapter--right .chapter__proof {
			grid-column: 6 / -1;
			margin-inline-end: calc(-1 * var(--bleed));
		}
		.chapter--right .chapter__course {
			grid-column: 1 / 5;
		}
	}
}
@layer components {
	.service-panel {
		--color-bg: var(--c-kobalt-hell);
		--color-text-muted: var(--c-tiefwasser);
		display: grid;
		gap: var(--space-l) var(--grid-gap);
		margin-block-start: var(--space-m);
		padding: var(--space-l) var(--space-m);
		border-radius: var(--radius-media);
		background: var(--color-bg);
		color: var(--color-text);
	}
	.service-panel__intro {
		display: grid;
		align-content: start;
		justify-items: start;
		gap: var(--space-2xs);
	}
	.service-panel__count {
		color: var(--color-accent);
		font-family: var(--font-display);
		font-size: var(--step-6);
		font-weight: 700;
		line-height: 0.9;
		letter-spacing: var(--tracking-display);
		font-variant-numeric: tabular-nums;
	}
	.service-panel__title {
		font-size: var(--step-2);
		line-height: 1.1;
	}
	.service-panel__note {
		margin-block-start: var(--space-2xs);
		color: var(--color-text-muted);
	}
	.service-panel__list {
		column-gap: var(--space-xl);
	}
	.service-panel__item {
		position: relative;
		padding-inline-start: calc(var(--line-dot) + var(--space-s));
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: var(--tracking-heading);
		break-inside: avoid;
	}
	.service-panel__item + .service-panel__item {
		margin-block-start: var(--space-s);
	}
	.service-panel__item::before {
		content: "";
		position: absolute;
		inset-block-start: 0.65em;
		inset-inline-start: 0;
		width: calc(var(--line-dot) * 0.75);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: 0 -50%;
	}
	@media (min-width: 40em) {
		.service-panel__list {
			columns: 2;
		}
		.service-panel__item {
			margin-block-end: var(--space-s);
		}
		.service-panel__item + .service-panel__item {
			margin-block-start: 0;
		}
	}
	@media (min-width: 60em) {
		.service-panel {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			padding: var(--space-2xl) 0;
		}
		.service-panel__intro,
		.service-panel__action {
			grid-column: 1 / 5;
			padding-inline-start: var(--space-xl);
		}
		.service-panel__action {
			grid-row: 2;
			align-self: end;
		}
		.service-panel__list {
			grid-column: 5 / -1;
			grid-row: 1 / 3;
			padding-inline-end: var(--space-xl);
		}
	}
}
@layer components {
	.voices__title {
		margin-block-end: var(--space-xl);
		font-size: var(--step-5);
		line-height: 1;
		letter-spacing: var(--tracking-display);
	}
	.slider--voices .slider__track {
		grid-template-columns: none;
		grid-auto-columns: min(86vw, 52rem);
		column-gap: var(--space-2xl);
	}
	.voice {
		display: grid;
		gap: var(--space-l);
		padding-block-start: var(--space-m);
		border-block-start: var(--line-weight) solid var(--color-accent);
	}
	.voice__quote {
		font-family: var(--font-display);
		font-size: var(--step-3);
		font-weight: 500;
		line-height: 1.15;
		letter-spacing: var(--tracking-heading);
	}
	@media (min-width: 60em) {
		.voice__quote {
			font-size: var(--step-4);
		}
	}
	.voice__quote p {
		max-width: 26ch;
		text-wrap: balance;
	}
	.voice__source {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3xs) var(--space-s);
		color: var(--color-text-muted);
	}
	.voice__name {
		color: var(--color-text);
		font-weight: 600;
	}
	.voice__discipline {
		color: var(--color-accent);
		font-weight: 600;
	}
}
@layer components {
	.detail-hero__grid {
		display: grid;
		gap: var(--space-xl) var(--grid-gap);
		margin-block-start: var(--space-l);
	}
	.detail-course {
		display: grid;
		gap: var(--space-s);
		max-width: none;
		font-family: var(--font-display);
		font-size: var(--step-2);
		font-weight: 600;
		line-height: 1.15;
		letter-spacing: var(--tracking-heading);
	}
	.detail-course__from {
		color: var(--color-text-muted);
	}
	.detail-course__line {
		position: relative;
		width: min(12rem, 50%);
		height: var(--line-weight);
		margin-inline-end: calc(var(--line-dot) / 2);
		background: var(--color-accent);
	}
	.detail-course__line::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: calc(var(--line-dot) / -2);
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: 0 -50%;
	}
	@media (min-width: 60em) {
		.detail-hero__grid {
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}
		.detail-hero__title {
			grid-column: 1 / -1;
		}
		.detail-course {
			grid-column: 1 / -1;
			grid-template-columns: subgrid;
			align-items: start;
		}
		.detail-course__from {
			grid-column: 1 / 6;
		}
		.detail-course__line {
			grid-column: 6 / 8;
			width: auto;
			margin-block-start: 0.6em;
		}
		.detail-course__to {
			grid-column: 8 / -1;
		}
		.detail-hero__lead {
			grid-column: 5 / 12;
		}
	}
	.practice {
		--bleed: max(var(--wrap-gutter), calc((100vw - var(--wrap-max)) / 2 + var(--wrap-gutter)));
	}
	.practice__title {
		margin-block-end: var(--space-xl);
		font-size: var(--step-5);
		line-height: 1;
		letter-spacing: var(--tracking-display);
	}
	.practice__grid {
		display: grid;
		gap: var(--space-xl) var(--grid-gap);
	}
	.practice__proof {
		margin-inline: calc(-1 * var(--wrap-gutter));
	}
	.practice__proof .practice__media {
		border-radius: 0;
	}
	.practice__voice .voice__quote {
		font-size: var(--step-3);
	}
	.practice__project {
		margin-block-start: var(--space-s);
		padding-inline: var(--wrap-gutter);
		font-size: var(--step--1);
	}
	@media (min-width: 60em) {
		.practice__grid {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			align-items: center;
		}
		.practice__proof {
			grid-column: 1 / 8;
			margin-inline: calc(-1 * var(--bleed)) 0;
		}
		.practice__project {
			padding-inline: var(--bleed) 0;
		}
		.practice__voice {
			grid-column: 8 / -1;
		}
	}
}
@layer components {
	.lexicon {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
		gap: var(--space-xl) var(--grid-gap);
	}
	.lexicon__entry {
		display: grid;
		align-content: start;
		gap: var(--space-2xs);
		padding-block-start: var(--space-s);
		border-block-start: 1px solid var(--color-rule);
	}
	.lexicon__term {
		position: relative;
		padding-inline-start: calc(var(--line-dot) + var(--space-xs));
		font-size: var(--step-1);
		line-height: 1.2;
	}
	.lexicon__term::before {
		content: "";
		position: absolute;
		inset-block-start: 0.6em;
		inset-inline-start: 0;
		width: calc(var(--line-dot) * 0.75);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: 0 -50%;
	}
	.lexicon__text {
		padding-inline-start: calc(var(--line-dot) + var(--space-xs));
		color: var(--color-text-muted);
	}
}
@layer components {
	.faq {
		border-block-start: 1px solid var(--color-rule);
	}
	.faq__item {
		border-block-end: 1px solid var(--color-rule);
	}
	.faq__question {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-m);
		padding-block: var(--space-s);
		cursor: pointer;
		list-style: none;
	}
	.faq__question::-webkit-details-marker {
		display: none;
	}
	.faq__heading {
		font-size: var(--step-1);
		line-height: 1.25;
		transition: color var(--duration-fast) ease;
	}
	.faq__question:hover .faq__heading {
		color: var(--color-accent);
	}
	.faq__icon {
		position: relative;
		flex: none;
		width: 1.25rem;
		aspect-ratio: 1;
	}
	.faq__icon::before,
	.faq__icon::after {
		content: "";
		position: absolute;
		inset: 50% 0 auto;
		height: var(--line-weight);
		background: var(--color-accent);
		translate: 0 -50%;
		transition: rotate var(--duration-base) var(--ease-out);
	}
	.faq__icon::after {
		rotate: 90deg;
	}
	.faq__item[open] .faq__icon::after {
		rotate: 0deg;
	}
	.faq__answer {
		padding-block-end: var(--space-m);
	}
	@media (prefers-reduced-motion: reduce) {
		.faq__icon::after {
			transition: none;
		}
	}
}
@layer components {
	html:has(.course-index) {
		scroll-padding-top: calc(var(--header-h) + var(--course-index-h) + var(--space-s));
	}
	.course-index {
		position: sticky;
		inset-block-start: var(--header-h);
		z-index: 15;
		padding-block: var(--space-xs) 0;
		border-block-end: 1px solid var(--color-rule);
		background: color-mix(in srgb, var(--color-bg) 92%, transparent);
		backdrop-filter: blur(12px) saturate(1.4);
	}
	.course-index__track {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.course-index__track::-webkit-scrollbar {
		display: none;
	}
	.course-index__inner {
		position: relative;
		width: max-content;
		min-width: 100%;
	}
	.course-index__list {
		display: flex;
		justify-content: space-between;
		gap: var(--space-l);
	}
	.course-index__link {
		display: block;
		padding-block: var(--space-3xs) var(--space-xs);
		color: var(--color-text-muted);
		font-size: var(--step--1);
		font-weight: 600;
		white-space: nowrap;
		text-decoration: none;
		transition: color var(--duration-fast) ease;
	}
	.course-index__link:hover,
	.course-index__link[aria-current] {
		color: var(--color-text);
	}
	.course-index__link:focus-visible {
		outline-offset: -3px;
	}
	.course-index__rail {
		position: relative;
		height: var(--line-weight);
		margin-block-end: calc(var(--line-dot) / 2);
		background: var(--color-rule);
	}
	.course-index__fill,
	.course-index__dot {
		position: absolute;
		inset-block-start: 50%;
		translate: 0 -50%;
		transition:
			width var(--duration-base) var(--ease-out),
			inset-inline-start var(--duration-base) var(--ease-out),
			opacity var(--duration-base) ease;
	}
	.course-index__fill {
		inset-inline-start: 0;
		width: var(--course-x, 0px);
		height: 100%;
		background: var(--color-accent);
	}
	.course-index__dot {
		inset-inline-start: var(--course-x, 0px);
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: -50% -50%;
	}
	.course-index:not(.is-active) .course-index__dot {
		opacity: 0;
	}
	.course-index:not(.is-active) .course-index__fill {
		width: 0;
	}
	.no-js .course-index__rail {
		display: none;
	}
	@media (prefers-reduced-motion: reduce) {
		.course-index__fill,
		.course-index__dot {
			transition: none;
		}
	}
}
@layer components {
	.section-head {
		margin-block-end: var(--space-2xl);
	}
	.section-head__title {
		font-size: var(--step-3);
	}
	.section-head__title--statement {
		max-width: 14ch;
		font-size: var(--step-display);
		font-weight: 700;
		line-height: 0.95;
		letter-spacing: var(--tracking-display);
	}
	.section-head__intro {
		color: var(--color-text-muted);
		font-size: var(--step-1);
		line-height: 1.45;
	}
	@media (min-width: 60em) {
		.section-head__intro {
			padding-block-start: 0.35em;
		}
	}
}
@layer components {
	.media {
		position: relative;
		overflow: hidden;
		aspect-ratio: var(--media-ratio, 4 / 3);
		border-radius: var(--radius-media);
		background: var(--media-bg);
	}
	.media--4x3 {
		--media-ratio: 4 / 3;
	}
	.media--16x10 {
		--media-ratio: 16 / 10;
	}
	.media--21x9 {
		--media-ratio: 4 / 3;
	}
	@media (min-width: 48em) {
		.media--21x9 {
			--media-ratio: 21 / 9;
		}
	}
	.media--4x5 {
		--media-ratio: 4 / 5;
	}
	.media__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.media__placeholder {
		position: absolute;
		inset: 0;
		display: grid;
		align-content: end;
		gap: var(--space-xs);
		padding: var(--space-s);
	}
	.media__icon {
		position: absolute;
		inset: 50% auto auto 50%;
		width: clamp(2rem, 6%, 3.5rem);
		height: auto;
		color: var(--media-icon);
		translate: -50% -50%;
	}
	.media__caption {
		position: relative;
		justify-self: start;
		max-width: 32ch;
		padding: 0.3em 0.65em;
		border-radius: var(--radius-control);
		background: var(--media-caption-bg);
		color: var(--media-caption-fg);
		font-size: var(--step--1);
		line-height: 1.35;
	}
}
@layer components {
	.goals__list {
		display: grid;
		gap: var(--space-xl) var(--grid-gap);
	}
	@media (min-width: 48em) {
		.goals__list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
	.goal {
		display: grid;
		align-content: start;
		gap: var(--space-s);
		padding-block-start: var(--space-m);
		border-block-start: var(--line-weight) solid var(--color-accent);
	}
	.goal__name {
		font-size: var(--step-3);
		line-height: 1.05;
		letter-spacing: -0.025em;
	}
	.goal__text {
		color: var(--color-text-muted);
	}
}
@layer components {
	.references__head {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: var(--space-m) var(--space-xl);
		margin-block-end: var(--space-xl);
	}
	.references__title {
		font-size: var(--step-5);
		line-height: 1;
		letter-spacing: var(--tracking-display);
	}
	.references__intro {
		margin-block-start: var(--space-s);
		color: var(--color-text-muted);
		font-size: var(--step-1);
		line-height: 1.45;
	}
	.slider {
		--slider-inset: max(var(--wrap-gutter), calc((100vw - var(--wrap-max)) / 2 + var(--wrap-gutter)));
	}
	.slider__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min(82vw, 34rem);
		gap: var(--grid-gap);
		margin: 0;
		padding-block: var(--space-2xs) var(--space-m);
		padding-inline: var(--slider-inset);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--slider-inset);
		scrollbar-width: none;
	}
	.slider__track::-webkit-scrollbar {
		display: none;
	}
	.slider__track:focus-visible {
		outline-offset: -3px;
	}
	.slider__slide {
		scroll-snap-align: start;
	}
	@media (min-width: 60em) {
		.slider__track {
			grid-template-columns: 44rem;
			grid-auto-columns: 30rem;
			align-items: start;
		}
	}
	.slider__nav {
		display: flex;
		align-items: center;
		gap: var(--space-m);
	}
	.slider__progress {
		position: relative;
		flex: 1;
		height: var(--line-weight);
		background: var(--color-rule);
	}
	.slider__progress-dot {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: calc(var(--slider-progress, 0) * (100% - var(--line-dot)));
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: 0 -50%;
	}
	.slider__progress-fill {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: calc(var(--slider-progress, 0) * (100% - var(--line-dot)));
		background: var(--color-accent);
	}
	.slider__controls {
		display: flex;
		gap: var(--space-2xs);
	}
	.slider__button {
		display: grid;
		place-items: center;
		width: 3rem;
		aspect-ratio: 1;
		border: 1px solid var(--control-border);
		border-radius: 50%;
		background: transparent;
		color: var(--color-text);
		cursor: pointer;
		transition:
			background-color var(--duration-fast) ease,
			color var(--duration-fast) ease,
			opacity var(--duration-fast) ease;
	}
	.slider__button:hover:not([aria-disabled="true"]) {
		background: var(--color-text);
		color: var(--color-bg);
	}
	.slider__button[aria-disabled="true"] {
		opacity: 0.35;
		cursor: default;
	}
	.slider__button svg {
		width: 1.25rem;
		height: 1.25rem;
	}
	.no-js .slider__nav {
		display: none;
	}
	.case {
		position: relative;
		display: grid;
		gap: var(--space-xs);
	}
	.case__media {
		transition: opacity var(--duration-base) ease;
	}
	.case__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3xs) var(--space-s);
		margin-block-start: var(--space-2xs);
		color: var(--color-text-muted);
		font-size: var(--step--1);
	}
	.case__sector {
		color: var(--color-accent);
		font-weight: 600;
	}
	.case__title {
		max-width: 28ch;
		font-size: var(--step-2);
		line-height: 1.15;
	}
	.case__link {
		color: inherit;
		text-decoration: none;
	}
	.case__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	.case__link:focus-visible {
		outline: none;
	}
	.case:has(.case__link:focus-visible) {
		outline: 3px solid var(--color-focus);
		outline-offset: 6px;
	}
	.case:hover .case__media {
		opacity: 0.85;
	}
	.case:hover .case__title {
		text-decoration: underline;
		text-decoration-thickness: var(--line-weight);
		text-underline-offset: 0.18em;
		text-decoration-color: var(--color-accent);
	}
	.case__disciplines {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3xs) var(--space-2xs);
		font-size: var(--step--1);
	}
	.case__disciplines li {
		padding: 0.1em 0.6em;
		border: 1px solid var(--control-border);
		border-radius: 2em;
		color: var(--color-text-muted);
	}
	.logos {
		margin-block-start: var(--space-2xl);
		padding-block-start: var(--space-l);
		border-block-start: 1px solid var(--color-rule);
	}
	.logos__label {
		margin-block-end: var(--space-m);
		color: var(--color-text-muted);
		font-size: var(--step--1);
	}
	.logos__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
		gap: var(--grid-gap);
	}
	.logos__slot {
		display: grid;
		place-items: center;
		aspect-ratio: 5 / 2;
		border: 1px dashed var(--control-border);
		border-radius: var(--radius-media);
		color: var(--color-text-muted);
		font-size: var(--step--1);
	}
}
@layer components {
	.steps {
		--rail-x: calc(var(--line-dot) / 2);
		display: grid;
		gap: var(--space-2xl);
	}
	.steps__item {
		position: relative;
		display: grid;
		gap: var(--space-s) var(--grid-gap);
		padding-inline-start: calc(var(--line-dot) + var(--space-m));
	}
	.steps__item::before {
		content: "";
		position: absolute;
		inset-block-start: 0.55em;
		inset-inline-start: 0;
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
	}
	.steps__item:not(:last-child)::after {
		content: "";
		position: absolute;
		inset-block: calc(0.55em + var(--line-dot)) calc(-1 * var(--space-2xl) - 0.55em);
		inset-inline-start: calc(var(--rail-x) - var(--line-weight) / 2);
		width: var(--line-weight);
		background: var(--color-accent);
	}
	.steps__marker {
		display: flex;
		align-items: baseline;
		gap: var(--space-2xs);
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: 600;
	}
	.steps__num {
		color: var(--color-accent);
		font-variant-numeric: tabular-nums;
	}
	.steps__title {
		font-size: var(--step-3);
	}
	.steps__text {
		color: var(--color-text-muted);
	}
	.terms {
		display: grid;
		gap: var(--space-s);
	}
	.terms__row {
		display: grid;
		gap: var(--space-3xs) var(--grid-gap);
	}
	.terms__term {
		font-weight: 700;
	}
	.terms__def {
		margin: 0;
		color: var(--color-text-muted);
	}
	@media (min-width: 40em) {
		.terms__row {
			grid-template-columns: 10rem 1fr;
		}
	}
	@media (min-width: 60em) {
		.steps__item {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			padding-inline-start: 0;
		}
		.steps__marker {
			grid-column: 1 / 5;
			padding-inline-start: calc(var(--line-dot) + var(--space-m));
		}
		.steps__body {
			grid-column: 5 / -1;
		}
	}
}
@layer components {
	.service-table__head {
		display: none;
		color: var(--color-text-muted);
		font-size: var(--step--1);
		padding-block-end: var(--space-s);
		border-block-end: 1px solid var(--color-rule);
	}
	.service-row {
		position: relative;
		display: grid;
		gap: var(--space-2xs) var(--grid-gap);
		padding-block: var(--space-l);
		border-block-end: 1px solid var(--color-rule);
	}
	.service-row__name {
		font-size: var(--step-3);
		line-height: 1.05;
		letter-spacing: -0.025em;
	}
	.service-row__link {
		color: var(--color-text);
		text-decoration: none;
	}
	.service-row__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	.service-row__link:focus-visible {
		outline: none;
	}
	.service-row:has(.service-row__link:focus-visible) {
		outline: 3px solid var(--color-focus);
		outline-offset: 3px;
	}
	.service-row__course {
		display: grid;
		gap: var(--space-2xs) var(--grid-gap);
	}
	.service-row__from dd {
		color: var(--color-text-muted);
	}
	.service-row__to {
		position: relative;
		padding-inline-start: calc(var(--line-dot) + var(--space-xs));
	}
	.service-row__to dd {
		font-weight: 600;
	}
	.service-row__to::before {
		content: "";
		position: absolute;
		inset-block-start: 0.6em;
		inset-inline-start: 0;
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-text-muted);
		transition: background-color var(--duration-fast) ease;
	}
	.service-row:hover .service-row__link {
		color: var(--color-accent);
	}
	.service-row:hover .service-row__to::before {
		background: var(--color-accent);
	}
	.service-row dd {
		margin: 0;
	}
	@media (min-width: 60em) {
		.service-table__head,
		.service-row {
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}
		.service-table__head {
			display: grid;
			gap: var(--grid-gap);
		}
		.service-table__head > :nth-child(1),
		.service-row__name {
			grid-column: 1 / 5;
		}
		.service-table__head > :nth-child(2) {
			grid-column: 5 / 9;
		}
		.service-table__head > :nth-child(3) {
			grid-column: 9 / -1;
			padding-inline-start: calc(var(--line-dot) + var(--space-xs));
		}
		.service-row__course {
			grid-column: 5 / -1;
			grid-template-columns: subgrid;
		}
		.service-row__from {
			grid-column: span 4;
		}
		.service-row__to {
			grid-column: span 4;
		}
		.service-row__to::after {
			content: "";
			position: absolute;
			inset-block-start: calc(0.6em + var(--line-dot) / 2 - var(--line-weight) / 2);
			inset-inline-end: 100%;
			width: var(--grid-gap);
			height: var(--line-weight);
			background: var(--color-text-muted);
			transition: background-color var(--duration-fast) ease;
		}
		.service-row:hover .service-row__to::after {
			background: var(--color-accent);
		}
	}
}
@layer components {
	.industries {
		display: grid;
		gap: var(--space-xl) var(--grid-gap);
	}
	@media (min-width: 48em) {
		.industries {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			row-gap: var(--space-2xl);
		}
		.industry:nth-child(even) {
			margin-block-start: var(--space-3xl);
		}
	}
	.industry {
		display: grid;
		align-content: start;
		gap: var(--space-xs);
	}
	.industry__media {
		margin-block-end: var(--space-xs);
	}
	.industry__name {
		font-size: var(--step-3);
	}
	.industry__text {
		color: var(--color-text-muted);
	}
	.industry__links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-m);
		font-size: var(--step--1);
		line-height: 1.8;
		font-weight: 600;
	}
	.link-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
		column-gap: var(--grid-gap);
		border-block-start: 1px solid var(--color-rule);
	}
	.link-list__item {
		border-block-end: 1px solid var(--color-rule);
	}
	.link-list__link {
		display: block;
		padding-block: var(--space-xs);
		color: var(--color-text);
		font-weight: 600;
		text-decoration: none;
	}
	.link-list__link:hover {
		color: var(--color-accent);
		text-decoration: underline;
	}
}
@layer components {
	.process {
		position: relative;
		display: grid;
		gap: var(--space-l);
	}
	.process__step {
		position: relative;
		display: grid;
		gap: var(--space-2xs);
		align-content: start;
		padding-inline-start: calc(var(--line-dot) + var(--space-m));
	}
	.process__step::before {
		content: "";
		position: absolute;
		inset-block-start: 0.5rem;
		inset-inline-start: 0;
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-bg);
		box-shadow: inset 0 0 0 var(--line-weight) var(--color-accent);
	}
	.process__step:not(:last-child)::after {
		content: "";
		position: absolute;
		inset-block: calc(0.5rem + var(--line-dot)) calc(-1 * var(--space-l) - 0.5rem);
		inset-inline-start: calc(var(--line-dot) / 2 - var(--line-weight) / 2);
		width: var(--line-weight);
		background: var(--color-accent);
	}
	.process__step:last-child::before {
		background: var(--color-accent);
	}
	.process__name {
		display: flex;
		align-items: baseline;
		gap: var(--space-2xs);
		font-size: var(--step-2);
	}
	.process__num {
		color: var(--color-accent);
		font-variant-numeric: tabular-nums;
	}
	.process__text {
		color: var(--color-text-muted);
		font-size: var(--step--1);
	}
	@media (min-width: 75em) {
		.process {
			grid-template-columns: repeat(5, minmax(0, 1fr));
			gap: var(--grid-gap);
		}
		.process::before {
			content: "";
			position: absolute;
			inset-block-start: calc(var(--line-dot) / 2 - var(--line-weight) / 2);
			inset-inline: 0 calc((100% - 4 * var(--grid-gap)) / 5);
			height: var(--line-weight);
			background: var(--color-accent);
		}
		.process__step:not(:last-child)::after {
			content: none;
		}
		.process__step {
			padding-inline-start: 0;
			padding-block-start: calc(var(--line-dot) + var(--space-m));
		}
		.process__step::before {
			inset-block-start: 0;
		}
	}
}
@layer components {
	.team__grid {
		display: grid;
		gap: var(--space-xl) var(--grid-gap);
		align-items: center;
	}
	@media (min-width: 60em) {
		.team__grid {
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}
		.team__media {
			grid-column: 1 / 6;
		}
		.team__body {
			grid-column: 7 / -1;
		}
	}
	.team__title {
		font-size: var(--step-4);
		line-height: 1.05;
		letter-spacing: -0.025em;
	}
	.disciplines {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-l);
		font-family: var(--font-display);
		font-size: var(--step-2);
		font-weight: 600;
		letter-spacing: var(--tracking-heading);
	}
	.disciplines__label {
		margin-block-end: var(--space-2xs);
		color: var(--color-text-muted);
		font-family: var(--font-body);
		font-size: var(--step--1);
		font-weight: 400;
		letter-spacing: 0;
	}
}
@layer components {
	.cta {
		padding-block: var(--space-3xl) var(--space-2xl);
	}
	.cta__title {
		max-width: 16ch;
		font-size: var(--step-5);
	}
	.site-footer {
		padding-block: var(--space-2xl) var(--space-l);
		font-size: var(--step--1);
	}
	.route {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: start;
		gap: var(--space-s);
		margin-block-end: var(--space-2xl);
	}
	.route__city {
		font-family: var(--font-display);
		font-size: var(--step-2);
		font-weight: 600;
		line-height: 1;
	}
	.route__address {
		margin-block-start: var(--space-2xs);
		color: var(--color-text-muted);
		font-style: normal;
	}
	.route__stop:last-child {
		text-align: end;
	}
	.route__line {
		position: relative;
		height: var(--line-weight);
		margin-block-start: calc(var(--step-2) / 2);
		background: var(--color-accent);
	}
	.route__line::before,
	.route__line::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		width: var(--line-dot);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--color-accent);
		translate: 0 -50%;
	}
	.route__line::before {
		inset-inline-start: 0;
	}
	.route__line::after {
		inset-inline-end: 0;
	}
	.site-footer__nav {
		display: grid;
		gap: var(--space-l) var(--grid-gap);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
		padding-block: var(--space-l);
		border-block: 1px solid var(--color-rule);
	}
	.site-footer__heading {
		margin-block-end: var(--space-2xs);
		color: var(--color-text-muted);
		font-family: var(--font-body);
		font-size: var(--step--1);
		font-weight: 400;
		letter-spacing: 0;
	}
	.site-footer__list {
		display: grid;
		gap: var(--space-3xs);
	}
	.site-footer__list a {
		color: var(--color-text);
		text-decoration: none;
	}
	.site-footer__list a:hover {
		color: var(--color-accent);
		text-decoration: underline;
	}
	.site-footer__meta {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-s);
		padding-block-start: var(--space-l);
		color: var(--color-text-muted);
	}
}
@layer utilities {
	.visually-hidden:not(:focus):not(:active) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.text-muted {
		color: var(--color-text-muted);
	}
	.lead {
		font-size: var(--step-1);
		line-height: 1.45;
	}
}