:root {
	--font-sans: "IBM Plex Sans", "IBM Plex Sans Fallback", "Segoe UI", Roboto, Arial, sans-serif;
	--font-serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", Times, serif;

	font-size: clamp(1.05rem, .92rem + .3vw, 1.19rem);
	font-family: var(--font-sans);
	font-weight: 400;
	line-height: 1.62;

	--text-s: .833rem;
	--text-m: 1rem;
	--text-l: clamp(1.25rem, 1.15rem + .5vw, 1.44rem);
	--text-xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.488rem);
	--text-2xl: clamp(2.2rem, 1.5rem + 3.2vw, 3.583rem);

	--measure: 38rem;
	--wide: 69rem;
	--gutter: clamp(1.25rem, .4rem + 3.4vw, 4rem);

	--space-3xs: .25rem;
	--space-2xs: .45rem;
	--space-xs: .7rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.25rem;
	--space-xl: 3.25rem;
	--space-band: clamp(3rem, 1.8rem + 4.4vw, 6.25rem);

	--radius: 1.15rem;
	--radius-s: .65rem;
	--stroke: clamp(.094rem, .16vw, .156rem);
	--hairline: .0625rem;
	--heading-gap: .5em;
	--wave-height: clamp(.9rem, .55rem + 1.4vw, 1.7rem);
	--wave-lift: .618rem;

	--n-0: hsl(30 55% 99%);
	--n-50: hsl(30 45% 96%);
	--n-75: hsl(30 38% 93%);
	--n-100: hsl(30 32% 90%);
	--n-200: hsl(30 26% 83%);
	--n-300: hsl(30 18% 60%);
	--n-500: hsl(30 20% 34%);
	--n-700: hsl(30 15% 17%);
	--n-800: hsl(30 16% 11%);
	--n-900: hsl(30 18% 7%);

	--brand-blue: #1e3d59;
	--brand-blue-deep: hsl(208 51% 17%);
	--brand-orange: hsl(14 100% 63%);
	--brand-yellow: hsl(42 100% 61%);

	--brand-blue-light: hsl(208 40% 65%);
	--brand-orange-light: hsl(14 100% 73%);
	--brand-yellow-light: hsl(42 100% 65%);

	--color-surface: var(--n-50);
	--color-surface-raised: var(--n-0);
	--color-surface-tint: hsl(36 55% 93%);
	--color-line: var(--n-100);
	--color-line-strong: var(--n-200);
	--color-text: var(--n-900);
	--color-text-muted: var(--n-500);
	--color-link: var(--brand-blue);
	--color-primary: var(--brand-blue);
	--color-accent: var(--brand-orange);
	--color-signal: var(--brand-yellow);
	--color-on-primary: var(--n-0);
	--color-on-ink: hsl(208 30% 80%);
	--color-scrim: hsl(30 25% 10% / .55);
	--shadow-card: 0 .0625rem .125rem hsl(30 25% 20% / .05), 0 .5rem 1.5rem -1rem hsl(30 25% 20% / .3);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-surface: var(--n-800);
		--color-surface-raised: var(--n-700);
		--color-surface-tint: hsl(34 16% 15%);
		--color-line: hsl(30 12% 24%);
		--color-line-strong: hsl(30 12% 32%);
		--color-text: var(--n-50);
		--color-text-muted: var(--n-300);
		--color-link: var(--brand-blue-light);
		--color-primary: var(--brand-blue-light);
		--color-accent: var(--brand-orange-light);
		--color-signal: var(--brand-yellow-light);
		--color-on-primary: var(--n-900);
		--color-scrim: hsl(30 25% 3% / .68);
		--shadow-card: 0 .0625rem .125rem hsl(0 0% 0% / .3), 0 .5rem 1.5rem -1rem hsl(0 0% 0% / .8);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: inherit;
}

html {
	scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	background-color: var(--color-surface);
	color: var(--color-text);
	fill: var(--color-text);
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
}

img,
picture,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: var(--color-link);
	font-weight: 450;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: .1em;
	text-underline-offset: .22em;
}

a:hover {
	text-decoration-thickness: .2em;
}

:focus-visible {
	outline: var(--stroke) solid var(--color-accent);
	outline-offset: .1875rem;
	border-radius: var(--space-3xs);
}

h1,
h2,
h3 {
	font-family: var(--font-serif);
	line-height: 1.15;
	text-wrap: balance;
	font-variant-numeric: lining-nums;
}

h1 {
	font-size: var(--text-2xl);
	font-weight: 500;
	letter-spacing: -.014em;
}

h2 {
	font-size: var(--text-xl);
	font-weight: 560;
	letter-spacing: -.008em;
}

h3 {
	font-size: var(--text-l);
	font-weight: 620;
}

p {
	text-wrap: pretty;
}

abbr[title] {
	text-decoration: underline dotted var(--color-line-strong);
	text-underline-offset: .22em;
	cursor: help;
}

body>a.skip {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20;
	translate: 0 -200%;
	padding: var(--space-xs) var(--space-s);
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-radius: 0 0 var(--radius-s) 0;
	corner-shape: squircle;
}

body>a.skip:focus {
	translate: 0 0;
}

body>header.band,
body>main>section.band,
body>footer.band {
	padding-inline: var(--gutter);
}

body>main>section.band>.inner,
body>footer.band>.inner {
	max-width: var(--wide);
	margin-inline: auto;
	padding-block: var(--space-band);
}

body>main>section.tint {
	background: var(--color-surface-tint);
}

body>main>section.ink {
	background: var(--brand-blue-deep);
	color: var(--n-0);
	fill: var(--n-0);
}

.prose {
	max-width: var(--measure);
	margin-inline: auto;
}

.lead {
	font-size: var(--text-l);
	line-height: 1.5;
	color: var(--color-text-muted);
}

p.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-s);
	font-size: var(--text-s);
	font-weight: 550;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

p.eyebrow::before {
	content: "";
	width: 1.6rem;
	height: .42rem;
	border-radius: .16rem;
	background: linear-gradient(90deg, var(--color-accent) 0 56%, var(--color-signal) 56% 100%);
}

svg.mark {
	flex: none;
	width: 2.1rem;
	height: 1.05rem;
	--c-accent: var(--color-accent);
	--c-signal: var(--color-signal);
}

svg.logo>g>g.primary {
	fill: var(--color-primary);
}

svg.logo>g>path.accent {
	fill: var(--color-accent);
}

svg.logo>g>path.signal {
	fill: var(--color-signal);
}

body>header.site-head {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--color-surface);
}

body>header.site-head>svg.waves {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	width: 100%;
	height: var(--wave-height);
	pointer-events: none;
}

body>header.site-head>div.inner {
	display: flex;
	align-items: center;
	gap: var(--space-m);
	max-width: var(--wide);
	margin-inline: auto;
	padding-block: var(--space-xs) calc(var(--space-xs) - var(--wave-lift));
}

body>header.site-head>div.inner>a>svg.logo {
	width: clamp(5.75rem, 15vw, 7.25rem);
	height: auto;
}

body>header.site-head>div.inner>nav {
	display: flex;
	align-items: center;
	gap: clamp(.6rem, 1.8vw, 1.6rem);
	margin-left: auto;
}

body>header.site-head>div.inner>nav>a {
	position: relative;
	padding-block: .3rem;
	font-size: var(--text-m);
	font-weight: 500;
	text-decoration: none;
	color: var(--color-text-muted);
	white-space: nowrap;
}

body>header.site-head>div.inner>nav>a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: .17rem;
	border-radius: .09rem;
	background: linear-gradient(90deg, var(--color-accent) 0 55%, var(--color-signal) 55%);
	transform: scaleX(0);
	transform-origin: left center;
}

body>header.site-head>div.inner>nav>a:hover,
body>header.site-head>div.inner>nav>a:focus-visible {
	color: var(--color-text);
}

body>header.site-head>div.inner>nav>a:hover::after,
body>header.site-head>div.inner>nav>a:focus-visible::after {
	transform: scaleX(1);
}

body>header.site-head>div.inner>nav>a:active {
	color: var(--color-primary);
	translate: 0 var(--hairline);
}

body>header.site-head>div.inner>nav>a[aria-current] {
	color: var(--color-primary);
}

body>header.site-head>div.inner>nav>a[aria-current]::after {
	transform: scaleX(1);
}

body>header.site-head>div.inner>a:hover>svg.logo {
	opacity: .78;
}

body>header.site-head>div.inner>a:active>svg.logo {
	opacity: 1;
	translate: 0 var(--hairline);
}

@media (prefers-reduced-motion: no-preference) {

	body>header.site-head>div.inner>nav>a::after {
		transition: transform .24s cubic-bezier(.2, .7, .3, 1);
	}

	body>header.site-head>div.inner>a>svg.logo {
		transition: opacity .2s;
	}
}

@media (max-width: 46rem) {
	body>header.site-head>div.inner>nav>a.hide-s {
		display: none;
	}
}

a.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: .62em 1.15em;
	border-radius: 100vmax;
	font-size: var(--text-m);
	font-weight: 550;
	text-decoration: none;
	white-space: nowrap;
	border: var(--stroke) solid transparent;
}

a.btn-primary {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

a.btn-primary:hover,
a.btn-primary:focus-visible {
	background: var(--color-text);
	box-shadow: var(--shadow-card);
}

a.btn-ghost {
	border-color: var(--color-line-strong);
	color: var(--color-text);
}

a.btn-ghost:hover,
a.btn-ghost:focus-visible {
	border-color: var(--color-accent);
	background: var(--color-surface-raised);
}

a.btn:hover,
a.btn:focus-visible {
	translate: 0 -.1rem;
}

a.btn:active {
	translate: 0 .05rem;
	box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
	a.btn {
		transition:
			background-color .22s ease,
			border-color .22s ease,
			box-shadow .22s ease,
			translate .22s cubic-bezier(.2, .7, .3, 1);
	}
}

section.hero>div.inner {
	display: grid;
	gap: var(--space-xl) var(--space-l);
	align-items: center;
	padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) var(--space-band);
}

@media (min-width: 58rem) {
	section.hero>div.inner {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
	}
}

section.hero>div.inner>div>h1 {
	margin-bottom: var(--heading-gap);
}

section.hero>div.inner>div>h1>em {
	font-style: normal;
	background-image: linear-gradient(90deg, var(--color-accent), var(--color-signal));
	background-repeat: no-repeat;
	background-size: 100% .13em;
	background-position: 0 92%;
}

section.hero>div.inner>div>p.lead {
	max-width: 32rem;
}

section.hero>div.inner>div>div.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-l);
}

section.hero>div.inner>div>p.reassure {
	margin-top: var(--space-m);
	font-size: var(--text-m);
	color: var(--color-text-muted);
}

svg.motif {
	width: 100%;
	height: auto;
	max-width: 19rem;
	justify-self: center;
}

svg.waves>path.s-fill {
	fill: var(--color-surface);
	stroke: none;
}

svg.waves>path.s-primary,
svg.waves>path.s-accent,
svg.waves>path.s-signal {
	fill: none;
	vector-effect: non-scaling-stroke;
}

svg.waves>path.s-primary {
	stroke: var(--color-primary);
	stroke-width: var(--stroke);
}

svg.waves>path.s-accent {
	stroke: var(--color-accent);
	stroke-width: calc(var(--stroke) * .88);
}

svg.waves>path.s-signal {
	stroke: var(--color-signal);
	stroke-width: calc(var(--stroke) * .72);
}

@media (prefers-reduced-motion: reduce) {
	svg.waves animate {
		display: none;
	}
}

svg.motif>g.stack>g>path.plate {
	fill: var(--color-surface-raised);
	stroke: var(--color-line-strong);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

svg.motif>g.stack>g>rect.bar {
	fill: url(#shine);
}

svg.motif>defs>linearGradient>stop.shine-base {
	stop-color: var(--color-line);
}

svg.motif>defs>linearGradient>stop.shine-peak {
	stop-color: color-mix(in oklab, var(--color-line) 62%, var(--n-0));
}

@media (prefers-reduced-motion: reduce) {
	svg.motif animate {
		display: none;
	}
}

svg.motif>g.stack>g>rect.bar-accent {
	fill: var(--color-accent);
}

svg.motif>g.stack>g>rect.bar-signal {
	fill: var(--color-signal);
}

svg.motif>g.stack>g>rect.bar-primary {
	fill: var(--color-primary);
}

section.facts>dl.inner {
	display: grid;
	gap: var(--space-l);
	padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

@media (min-width: 46rem) {
	section.facts>dl.inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-3xs) var(--space-xl);
	}

	section.facts>dl.inner>div+div {
		padding-left: var(--space-l);
		margin-left: calc(var(--space-l) * -1 + var(--space-xl) / 2);
		border-left: var(--hairline) solid hsl(208 30% 80% / .22);
	}
}

section.facts>dl.inner>div {
	display: grid;
	align-content: start;
}

section.facts>dl.inner>div::before {
	content: "";
	width: 2.4rem;
	height: .42rem;
	margin-bottom: var(--space-s);
	border-radius: .16rem;
	background: linear-gradient(90deg, var(--color-accent) 0 56%, var(--color-signal) 56% 100%);
}

section.facts>dl.inner>div>dt {
	font-family: var(--font-serif);
	font-size: var(--text-l);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	line-height: 1.18;
	text-wrap: balance;
	margin-bottom: var(--heading-gap);
}

section.facts>dl.inner>div>dd {
	max-width: 26rem;
	font-size: var(--text-m);
	line-height: 1.6;
	color: var(--color-on-ink);
}

div.inner.split {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 64rem) {
	div.inner.split {
		grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
	}
}

div.inner.split>svg.topic {
	order: 2;
	width: 100%;
	max-width: 17rem;
	height: auto;
	justify-self: center;
}

svg.topic>rect.plate,
svg.topic>g>rect.plate {
	fill: var(--color-surface-raised);
	stroke: var(--color-line-strong);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

svg.topic>rect.bar,
svg.topic>g>rect.bar {
	fill: var(--color-line);
}

svg.topic>rect.bar-accent,
svg.topic>g>rect.bar-accent {
	fill: var(--color-accent);
}

svg.topic>rect.bar-signal,
svg.topic>g>rect.bar-signal {
	fill: var(--color-signal);
}

svg.topic>rect.bar-primary,
svg.topic>g>rect.bar-primary {
	fill: var(--color-primary);
}

svg.topic>rect.cell,
svg.topic>g>rect.cell {
	fill: var(--color-line);
	opacity: .55;
}

svg.topic>rect.slot {
	fill: var(--color-line);
	opacity: .4;
}

svg.topic>rect.note {
	fill: var(--color-primary);
}

svg.topic>rect.field {
	fill: none;
	stroke: var(--color-line-strong);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

svg.topic>rect.ring {
	fill: none;
	stroke: var(--color-primary);
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
	opacity: 0;
}

svg.topic>rect.ring.r1 {
	opacity: 1;
}

svg.topic>circle.badge {
	fill: var(--color-accent);
	transform-box: fill-box;
	transform-origin: center;
}

svg.topic>g>circle.token {
	fill: var(--color-line-strong);
}

svg.topic>g.kept>circle.token {
	fill: var(--color-accent);
}

svg.topic>path.rule,
svg.topic>g>path.rule {
	fill: none;
	stroke: var(--color-line-strong);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

svg.topic>path.scan {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: .6;
	vector-effect: non-scaling-stroke;
}

svg.topic>rect.travel {
	translate: 100px 38px;
}

svg.topic>path.gone {
	opacity: 0;
}

svg.topic>g.copy {
	translate: 106px -20px;
}

svg.topic>g.e2 {
	--dx: -32px;
	--dy: 36px;
}

svg.topic>g.e3 {
	--dx: -64px;
	--dy: 72px;
}

@keyframes topic-step {

	0%,
	6% {
		opacity: 0;
	}

	18%,
	100% {
		opacity: 1;
	}
}

@keyframes topic-badge {

	0%,
	4% {
		scale: 0;
	}

	12%,
	40% {
		scale: 1;
	}

	52%,
	100% {
		scale: 0;
	}
}

@keyframes topic-travel {

	0%,
	6% {
		translate: 0 0;
		opacity: 0;
	}

	14% {
		opacity: 1;
	}

	52%,
	88% {
		translate: 100px 38px;
		opacity: 1;
	}

	100% {
		translate: 100px 38px;
		opacity: 0;
	}
}

@keyframes topic-fokus {

	0%,
	2% {
		opacity: 0;
	}

	8%,
	26% {
		opacity: 1;
	}

	32%,
	100% {
		opacity: 0;
	}
}

@keyframes topic-scan {
	from {
		translate: 0 0;
	}

	to {
		translate: 0 100px;
	}
}

@keyframes topic-copy {

	0%,
	8% {
		translate: 0 0;
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	58%,
	86% {
		translate: 106px -20px;
		opacity: 1;
	}

	100% {
		translate: 106px -20px;
		opacity: 0;
	}
}

@keyframes topic-indent {

	0%,
	20% {
		translate: 0 0;
	}

	42%,
	90% {
		translate: 32px 0;
	}

	100% {
		translate: 0 0;
	}
}

@keyframes topic-decline {

	0%,
	18% {
		opacity: 1;
	}

	38%,
	88% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes topic-choose {

	0%,
	24% {
		fill: var(--color-line-strong);
	}

	44%,
	88% {
		fill: var(--color-accent);
	}

	100% {
		fill: var(--color-line-strong);
	}
}

@keyframes topic-emerge {

	0%,
	8% {
		translate: var(--dx) var(--dy);
		opacity: 0;
	}

	40%,
	84% {
		translate: 0 0;
		opacity: 1;
	}

	100% {
		translate: var(--dx) var(--dy);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {

	svg.topic-window>rect.step {
		animation: topic-step 7s ease-in-out infinite;
	}

	svg.topic-window>rect.step-2 {
		animation-delay: .55s;
	}

	svg.topic-window>rect.step-3 {
		animation-delay: 1.1s;
	}

	svg.topic-bauweise>circle.badge {
		animation: topic-badge 4.8s ease-in-out infinite backwards;
	}

	svg.topic-bauweise>circle.b2 {
		animation-delay: 1.6s;
	}

	svg.topic-bauweise>circle.b3 {
		animation-delay: 3.2s;
	}

	svg.topic-result>rect.travel {
		animation: topic-travel 6s ease-in-out infinite;
	}

	svg.topic-fokus>rect.ring {
		animation: topic-fokus 6s ease-in-out infinite;
	}

	svg.topic-fokus>rect.r2 {
		animation-delay: 2s;
	}

	svg.topic-fokus>rect.r3 {
		animation-delay: 4s;
	}

	svg.topic-cookies>g.o1,
	svg.topic-cookies>g.o3 {
		animation: topic-decline 7s ease-in-out infinite;
	}

	svg.topic-cookies>g.o3 {
		animation-delay: .5s;
	}

	svg.topic-cookies>g.kept>circle.token {
		animation: topic-choose 7s ease-in-out infinite;
	}

	svg.topic-ruhe>path.scan {
		animation: topic-scan 9s ease-in-out infinite alternate;
	}

	svg.topic-bestand>rect.step {
		animation: topic-step 7s ease-in-out infinite;
	}

	svg.topic-bestand>rect.step-2 {
		animation-delay: .5s;
	}

	svg.topic-bestand>rect.step-3 {
		animation-delay: 1s;
	}

	svg.topic-bestand>rect.step-4 {
		animation-delay: 1.5s;
	}

	svg.topic-sicherung>g.copy {
		animation: topic-copy 6.5s ease-in-out infinite;
	}

	svg.topic-bruch>path.gone {
		animation: topic-decline 7s ease-in-out infinite;
	}

	svg.topic-struktur>rect.indent {
		animation: topic-indent 6s ease-in-out infinite;
	}

	svg.topic-ballast>rect.drop {
		animation: topic-decline 8s ease-in-out infinite;
	}

	svg.topic-ballast>rect.d2 {
		animation-delay: .25s;
	}

	svg.topic-ballast>rect.d3 {
		animation-delay: .5s;
	}

	svg.topic-ballast>rect.d4 {
		animation-delay: .75s;
	}

	svg.topic-system>g.emerge {
		animation: topic-emerge 7s ease-in-out infinite;
	}

	svg.topic-system>g.e2 {
		animation-delay: .4s;
	}

	svg.topic-system>g.e3 {
		animation-delay: .8s;
	}
}

section.page-head>div.inner {
	padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem) var(--space-xl);
}

section.page-head>div.inner>div.prose>p.lead {
	margin-top: var(--space-m);
}

div.prose>h2 {
	margin-bottom: var(--heading-gap);
}

div.prose>*+h2 {
	margin-top: var(--space-xl);
}

div.prose>p+p,
div.prose>ul+p,
div.prose>p+ul {
	margin-top: var(--space-s);
}

div.prose>dl+p {
	margin-top: var(--space-m);
}

div.prose>ul {
	display: grid;
	gap: var(--space-2xs);
	padding-left: 1.1em;
	color: var(--color-text-muted);
}

div.prose>ul>li::marker {
	color: var(--color-accent);
}

div.prose>*+dl {
	margin-top: var(--space-m);
}

div.prose>dl {
	display: grid;
	gap: var(--space-m);
}

div.prose>dl>div {
	display: grid;
	gap: var(--space-3xs);
}

div.prose>dl>div>dt {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	font-weight: 560;
	color: var(--color-primary);
}

div.prose>dl>div>dt::before {
	content: "";
	flex: none;
	align-self: center;
	width: 1.1rem;
	height: .32rem;
	border-radius: .16rem;
	background: linear-gradient(90deg, var(--color-accent) 0 56%, var(--color-signal) 56%);
}

div.prose>dl>div>dd {
	padding-left: calc(1.1rem + var(--space-xs));
	color: var(--color-text-muted);
}

dfn {
	font-style: normal;
	font-weight: 560;
	background-image: linear-gradient(90deg, var(--color-accent), var(--color-signal));
	background-repeat: no-repeat;
	background-size: 100% .1em;
	background-position: 0 100%;
}

ul.services>li.card>a.more {
	position: relative;
	justify-self: start;
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2xs);
	margin-top: var(--space-xs);
	padding-bottom: .22rem;
	font-weight: 560;
	text-decoration: none;
	color: var(--color-primary);
}

ul.services>li.card>a.more::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: .13rem;
	border-radius: .065rem;
	background: linear-gradient(90deg, var(--color-accent) 0 55%, var(--color-signal) 55%);
	transform: scaleX(0);
	transform-origin: left center;
}

ul.services>li.card>a.more:hover::after,
ul.services>li.card>a.more:focus-visible::after {
	transform: scaleX(1);
}

ul.services>li.card>a.more:hover>span,
ul.services>li.card>a.more:focus-visible>span {
	translate: .25rem 0;
}

@media (prefers-reduced-motion: no-preference) {

	ul.services>li.card>a.more::after {
		transition: transform .24s cubic-bezier(.2, .7, .3, 1);
	}

	ul.services>li.card>a.more>span {
		transition: translate .24s cubic-bezier(.2, .7, .3, 1);
	}
}

header.section-head {
	max-width: var(--measure);
	margin-bottom: var(--space-xl);
}

header.section-head>h2 {
	margin-bottom: var(--heading-gap);
}

header.section-head>p:not(.eyebrow) {
	color: var(--color-text-muted);
}

ul.services {
	display: grid;
	gap: var(--space-m);
	list-style: none;
}

@media (min-width: 50rem) {
	ul.services {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: start;
		gap: var(--space-xl) var(--space-l);
	}

	ul.services>li.card {
		grid-column: span 6;
	}

	ul.services>li.w7 {
		grid-column: span 7;
	}

	ul.services>li.w5 {
		grid-column: span 5;
	}

	ul.services>li.wide {
		grid-column: 1 / -1;
	}
}

ul.services>li.card {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--space-xs);
	padding: var(--space-l);
	background: var(--color-surface-raised);
	border: var(--hairline) solid var(--color-line);
	border-radius: var(--radius);
	corner-shape: squircle;
	box-shadow: var(--shadow-card);
	overflow: hidden;
	scroll-margin-top: 5rem;
}

ul.services>li.card:not(.plain)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: .32rem;
	background: linear-gradient(90deg, var(--color-accent) 0 55%, var(--color-signal) 55%);
}

ul.services>li.plain {
	padding: var(--space-m) 0 0;
	background: none;
	border: 0;
	border-top: var(--hairline) solid var(--color-line-strong);
	border-radius: 0;
	box-shadow: none;
}

ul.services>li.card>svg.mark {
	margin-bottom: var(--space-2xs);
}

ul.services>li.card>h3 {
	color: var(--color-primary);
}

ul.services>li.card>p {
	font-size: var(--text-m);
	color: var(--color-text-muted);
}

ul.services>li.card>p.promise {
	font-weight: 560;
	color: var(--color-text);
}

ul.services>li.card>ul {
	display: grid;
	gap: var(--space-3xs);
	margin-block: var(--space-2xs);
	padding-left: 1.1em;
	font-size: var(--text-m);
	color: var(--color-text-muted);
}

ul.services>li.card>ul>li::marker {
	color: var(--color-accent);
}

section.feature>div.inner {
	display: grid;
	gap: var(--space-xl) var(--space-l);
	align-items: start;
}

@media (min-width: 56rem) {
	section.feature>div.inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

section.feature>div.inner>div>h2 {
	margin-bottom: var(--heading-gap);
}

section.feature>div.inner>div>p+p {
	margin-top: var(--space-s);
}

ol.steps {
	display: grid;
	gap: var(--space-m);
	counter-reset: step;
	list-style: none;
}

ol.steps>li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-s);
	align-items: start;
	counter-increment: step;
}

ol.steps>li::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--color-surface-raised);
	border: var(--hairline) solid var(--color-line);
	font-family: var(--font-sans);
	font-size: var(--text-m);
	font-weight: 560;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1;
	color: var(--color-primary);
}

ol.steps>li>div>p.step-title {
	font-weight: 560;
}

ol.steps>li>div>p.step-detail {
	font-size: var(--text-m);
	color: var(--color-text-muted);
}

section.about>div.inner {
	display: grid;
	gap: var(--space-xl) var(--space-l);
	align-items: center;
}

@media (min-width: 52rem) {
	section.about>div.inner {
		grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
	}
}

figure.portrait {
	position: relative;
	width: min(100%, 19rem);
	justify-self: center;
	isolation: isolate;
}

figure.portrait>picture>img {
	width: 100%;
	height: auto;
	clip-path: url(#squircle);
	background: var(--color-surface-tint);
}

figure.portrait::after {
	content: "";
	position: absolute;
	inset: auto -.7rem -.7rem auto;
	width: 38%;
	aspect-ratio: 1;
	border-radius: 30%;
	corner-shape: squircle;
	background: linear-gradient(135deg, var(--color-accent), var(--color-signal));
	z-index: -1;
}

section.about>div.inner>div>h2 {
	margin-bottom: var(--heading-gap);
}

section.about>div.inner>div>p+p {
	margin-top: var(--space-s);
}

section.about>div.inner>div>p.statement {
	margin-top: var(--space-m);
	padding-left: var(--space-m);
	border-left: var(--stroke) solid var(--color-accent);
	font-family: var(--font-serif);
	font-size: var(--text-l);
	font-weight: 500;
	line-height: 1.3;
}

body>main>section.contact.tint {
	--color-text: hsl(28 60% 11%);
	--color-text-muted: hsl(28 55% 22%);
	--color-primary: hsl(208 65% 22%);
	--color-accent: hsl(14 88% 44%);
	--color-signal: hsl(208 65% 22%);
	background: var(--brand-yellow);
	color: var(--color-text);
}

@media (prefers-color-scheme: dark) {
	body>main>section.contact.tint {
		background: hsl(42 74% 52%);
	}
}

section.contact>div.inner {
	display: grid;
	gap: var(--space-l);
}

@media (min-width: 52rem) {
	section.contact>div.inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-xl);
		align-items: center;
	}
}

section.contact>div.inner>div>h2 {
	margin-bottom: var(--heading-gap);
}

section.contact>div.inner>div>p.eyebrow::before {
	background: var(--n-0);
}

dl.contact-list {
	display: grid;
	gap: var(--space-m);
}

dl.contact-list>div>dt {
	margin-bottom: var(--space-3xs);
	font-size: var(--text-s);
	font-weight: 550;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

dl.contact-list>div>dd>a {
	display: block;
	font-size: var(--text-l);
	font-weight: 560;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -.01em;
	text-decoration: none;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

dl.contact-list>div>dd>a:hover {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
}

dl.contact-list+address {
	margin-top: var(--space-l);
	font-style: normal;
	color: var(--color-text-muted);
}

body>footer.site-foot {
	border-top: var(--hairline) solid var(--color-line);
	font-size: var(--text-m);
}

body>footer.site-foot>div.inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s) var(--space-m);
	padding-block: var(--space-l);
}

body>footer.site-foot>div.inner>p {
	color: var(--color-text-muted);
}

body>footer.site-foot>div.inner>nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m);
	margin-left: auto;
}

body>footer.site-foot>div.inner>nav>a {
	font-weight: 400;
	text-decoration: none;
	color: var(--color-text-muted);
}

body>footer.site-foot>div.inner>nav>a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

body>div.layer {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: grid;
	place-items: center;
	padding: var(--gutter);
	background: var(--color-scrim);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s;
}

body>div.layer:target {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

body>div.layer>section.modal {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	width: min(100%, 44rem);
	max-height: min(84vh, 50rem);
	background: var(--color-surface-raised);
	border-radius: var(--radius);
	corner-shape: squircle;
	box-shadow: 0 1.5rem 3.75rem -1.25rem hsl(30 25% 10% / .45);
	overflow: hidden;
}

body>div.layer>section.modal>header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding: var(--space-m) var(--space-l);
	border-bottom: var(--hairline) solid var(--color-line);
}

body>div.layer>section.modal>header>h2 {
	font-size: var(--text-l);
}

body>div.layer>section.modal>header>a.close {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	text-decoration: none;
	color: var(--color-text-muted);
	background: var(--color-surface-tint);
}

body>div.layer>section.modal>header>a.close::before,
body>div.layer>section.modal>header>a.close::after {
	content: "";
	grid-area: 1 / 1;
	width: .85rem;
	height: .09rem;
	border-radius: .045rem;
	background: currentColor;
}

body>div.layer>section.modal>header>a.close::before {
	rotate: 45deg;
}

body>div.layer>section.modal>header>a.close::after {
	rotate: -45deg;
}

body>div.layer>section.modal>header>a.close:hover {
	color: var(--color-text);
}

body>div.layer>section.modal>div.modal-body {
	padding: var(--space-l);
	overflow-y: auto;
	overscroll-behavior: contain;
	font-size: var(--text-m);
}

body>div.layer>section.modal>div.modal-body>h3 {
	margin: var(--space-m) 0 var(--space-2xs);
	font-family: var(--font-sans);
	font-size: var(--text-m);
	font-weight: 560;
	color: var(--color-primary);
}

body>div.layer>section.modal>div.modal-body>h3:first-child {
	margin-top: 0;
}

body>div.layer>section.modal>div.modal-body>p+p {
	margin-top: var(--space-xs);
}

body>div.layer>section.modal>div.modal-body>ul {
	margin: var(--space-xs) 0;
	padding-left: 1.2em;
}

ul.services>li.card>p,
ul.services>li.wide>div>p,
ul.services>li.wide>div.col-list>ul>li,
ol.steps>li>div>p.step-detail,
body>div.layer>section.modal>div.modal-body>p,
body>div.layer>section.modal>div.modal-body>ul>li {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 8 4 4;
}

section.hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

section.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(52rem 30rem at 80% 14%, hsl(42 100% 61% / .38), transparent 64%),
		radial-gradient(38rem 26rem at 94% 68%, hsl(30 98% 60% / .26), transparent 62%),
		radial-gradient(44rem 30rem at 0% 2%, hsl(208 51% 34% / .12), transparent 58%);
}

@media (prefers-color-scheme: dark) {
	section.hero::before {
		background:
			radial-gradient(52rem 30rem at 80% 14%, hsl(42 100% 61% / .16), transparent 64%),
			radial-gradient(38rem 26rem at 94% 68%, hsl(30 98% 60% / .12), transparent 62%),
			radial-gradient(44rem 30rem at 0% 2%, hsl(208 60% 55% / .22), transparent 58%);
	}
}

@keyframes rise-in {
	from {
		opacity: 0;
		transform: translateY(2.75rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes wash-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}

	to {
		transform: translate3d(-3%, 2%, 0) scale(1.08);
	}
}

@keyframes breathe {

	0%,
	100% {
		opacity: .55;
	}

	50% {
		opacity: 1;
	}
}

@keyframes mark-set {
	from {
		opacity: 0;
		transform: scale(.55);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	section.hero::before {
		animation: wash-drift 26s ease-in-out infinite alternate;
	}

	section.hero>div.inner>div>p.eyebrow,
	section.hero>div.inner>div>h1,
	section.hero>div.inner>div>p.lead,
	section.hero>div.inner>div>div.actions,
	section.hero>div.inner>div>p.reassure,
	svg.motif {
		animation: rise-in .72s cubic-bezier(.2, .7, .3, 1) both;
	}

	section.hero>div.inner>div>h1 {
		animation-delay: .07s;
	}

	section.hero>div.inner>div>p.lead {
		animation-delay: .15s;
	}

	section.hero>div.inner>div>div.actions {
		animation-delay: .23s;
	}

	section.hero>div.inner>div>p.reassure {
		animation-delay: .31s;
	}

	svg.motif {
		animation-delay: .13s;
		animation-duration: .95s;
	}

	svg.motif>g.stack>g>rect.pulse {
		animation: breathe 11s ease-in-out infinite;
	}

	svg.motif>g.stack>g>rect.pulse.b {
		animation-delay: -3.7s;
	}

	svg.motif>g.stack>g>rect.pulse.c {
		animation-delay: -7.4s;
	}

	svg.logo>g>path.accent,
	svg.logo>g>path.signal {
		transform-box: fill-box;
		transform-origin: center;
		animation: mark-set .46s cubic-bezier(.2, .7, .3, 1) both;
	}

	svg.logo>g>path.accent {
		animation-delay: .22s;
	}

	svg.logo>g>path.signal {
		animation-delay: .32s;
	}

	@supports (animation-timeline: view()) {

		header.section-head,
		ul.services>li.card,
		section.facts>dl.inner>div,
		ol.steps>li,
		section.feature>div.inner>div,
		section.about>div.inner>figure,
		section.about>div.inner>div,
		section.contact>div.inner>div {
			animation: rise-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 58%;
		}
	}

	html.reveal-js header.section-head,
	html.reveal-js ul.services>li.card,
	html.reveal-js section.facts>dl.inner>div,
	html.reveal-js ol.steps>li,
	html.reveal-js section.feature>div.inner>div,
	html.reveal-js section.about>div.inner>figure,
	html.reveal-js section.about>div.inner>div,
	html.reveal-js section.contact>div.inner>div {
		opacity: 0;
		transform: translateY(2.75rem);
		transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
	}

	html.reveal-js header.section-head.is-in,
	html.reveal-js ul.services>li.card.is-in,
	html.reveal-js section.facts>dl.inner>div.is-in,
	html.reveal-js ol.steps>li.is-in,
	html.reveal-js section.feature>div.inner>div.is-in,
	html.reveal-js section.about>div.inner>figure.is-in,
	html.reveal-js section.about>div.inner>div.is-in,
	html.reveal-js section.contact>div.inner>div.is-in {
		opacity: 1;
		transform: none;
	}
}

@media print {

	body>header.site-head,
	svg.motif,
	body>div.layer {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}
