/* Large graphics; readable text stays outside the moving artwork. */
main:has(.home-hero) {
	overflow-x: clip;
}
.brand-stage {
	position: relative;
	isolation: isolate;
	min-width: 0;
	background: #b5a1ed;
	border-radius: 32px;
	overflow: hidden;
	color: #241a33;
}
.brand-art {
	position: relative;
	height: clamp(340px, 36vw, 540px);
	perspective: 1000px;
	display: grid;
	place-items: center;
	background: radial-gradient(ellipse at 50% 50%, #d6c8ff 0%, transparent 65%);
}
.brand-ring {
	position: absolute;
	width: 90%;
	aspect-ratio: 1;
	border: 34px solid #382252;
	border-radius: 50%;
	transform: rotateX(62deg) rotate(-25deg);
	animation: brand-ring-turn 18s ease-in-out infinite;
}
.ring-b {
	width: 76%;
	border: 20px solid #d4ff53;
	transform: rotateY(65deg) rotate(25deg);
	animation-name: brand-ring-cross;
	animation-duration: 23s;
}
.brand-float {
	position: relative;
	width: 83%;
	animation: none;
	filter: drop-shadow(0 28px 18px #2b174d55);
}
.brand-tilt {
	transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: none;
	transform-style: preserve-3d;
}
.brand-metal {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.brand-stage-caption {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #38225240;
	margin: 0 30px;
	padding: 22px 0;
	font-size: clamp(21px, 2vw, 28px);
	font-weight: 600;
	gap: 20px;
}
.brand-stage-caption > span:last-child {
	font-size: 40px;
	line-height: 1;
}
.hero-brand {
	min-width: 0;
}
.home-hero .hero-grid {
	grid-template-columns: 1.1fr 1fr;
	gap: 50px;
	align-items: center;
}
.home-hero .hero-copy .lead {
	font-size: 21px;
	line-height: 1.65;
	max-width: 540px;
}
.home-hero .hero-meta {
	font-size: 15px;
}
.home-hero .hero-eyebrow {
	font-size: 14px;
}
.approach-intro {
	padding: 48px 0 88px;
}
.approach-kicker {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid #ffffff30;
	padding-bottom: 24px;
	font-size: 17px;
	color: #d5d6cd;
}
.approach-intro-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 52px;
	align-items: center;
	padding-top: 48px;
}
.approach-copy h1 {
	font-size: clamp(48px, 5.1vw, 78px);
	line-height: 1.12 !important;
	margin: 0 0 30px;
}
.approach-copy h1 em {
	font-style: normal;
	color: #ceff47;
}
.approach-copy .lead {
	font-size: 22px;
	line-height: 1.65;
	max-width: 570px;
	margin-bottom: 30px;
	color: #e0e1d8;
}
.method-manifesto {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #ceff47;
	color: #182010;
	padding: 70px 0 80px;
}
.method-manifesto .container {
	position: relative;
	z-index: 1;
}
.method-manifesto span {
	font-size: 17px;
}
.method-manifesto h2 {
	font-size: clamp(44px, 6.5vw, 94px);
	margin: 26px 0;
	max-width: 900px;
	line-height: 1.12 !important;
}
.method-manifesto em {
	font-style: normal;
	color: #3a512a;
}
.method-manifesto p {
	font-size: 23px;
	line-height: 1.6;
	max-width: 650px;
}
.manifesto-ring {
	position: absolute;
	width: 650px;
	height: 650px;
	border: 105px solid #a7d832;
	border-radius: 50%;
	right: -220px;
	top: -130px;
	animation: manifesto-drift 12s ease-in-out infinite;
}
.roadmap-heading {
	margin-bottom: 50px;
}
.roadmap-heading .eyebrow {
	font-size: 16px;
	color: #cfcec4;
}
.roadmap-heading h2 {
	font-size: clamp(36px, 4.7vw, 64px);
	margin: 18px 0 22px;
}
.roadmap-heading > p {
	font-size: 21px;
	color: #d5d5cc;
}
.roadmap-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 18px;
}
.roadmap-step {
	display: grid;
	grid-template-columns: 100px minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 32px;
	padding: 42px;
	background: #242721;
	border: 1px solid #414638;
	border-radius: 24px;
	align-items: start;
}
.roadmap-number {
	font-size: 66px;
	color: #ceff47;
	line-height: 1.1;
	font-weight: 500;
}
.roadmap-tag {
	font-size: 16px;
	color: #c3b1fa;
}
.roadmap-copy h3 {
	font-size: 32px;
	margin: 12px 0 18px;
}
.roadmap-copy p,
.roadmap-result p {
	font-size: 20px;
	line-height: 1.7;
	margin: 0;
	color: #e0e0d7;
}
.roadmap-result {
	border-left: 1px solid #62684d;
	padding-left: 30px;
}
.roadmap-result > span {
	display: block;
	font-size: 16px;
	color: #ceff47;
	margin-bottom: 14px;
}
.roadmap-step:nth-child(2) .roadmap-number,
.roadmap-step:nth-child(4) .roadmap-number {
	color: #bda5ff;
}
.roadmap-step:last-child {
	background: #ceff47;
	color: #182010;
	border-color: transparent;
}
.roadmap-step:last-child
	:is(.roadmap-number, .roadmap-tag, .roadmap-result > span, .roadmap-copy p, .roadmap-result p) {
	color: #243215;
}
.method-partnership {
	padding-top: 20px;
}
.partnership-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.partnership-grid article {
	background: #b5a1ed;
	color: #21182c;
	border-radius: 24px;
	padding: 44px;
}
.partnership-grid article:nth-child(2) {
	background: #f1ebdc;
	color: #24271e;
}
.partnership-grid article > span {
	font-size: 17px;
}
.partnership-grid h3 {
	font-size: clamp(28px, 3vw, 40px);
	margin: 38px 0 24px;
}
.partnership-grid p {
	font-size: 21px;
	line-height: 1.7;
	margin: 0;
}
body:has(.approach-bold) #bg-canvas,
body:has(.home-hero) #bg-canvas {
	display: none;
}
.motion-paused :is(.brand-ring, .brand-float, .manifesto-ring) {
	animation-play-state: paused !important;
}
@keyframes brand-hover {
	0%,
	100% {
		transform: translateY(0) rotate(-7deg);
	}
	50% {
		transform: translateY(-15px) rotate(3deg);
	}
}
@keyframes brand-ring-turn {
	0%,
	100% {
		transform: rotateX(62deg) rotate(-25deg);
	}
	50% {
		transform: rotateX(48deg) rotate(35deg);
	}
}
@keyframes brand-ring-cross {
	0%,
	100% {
		transform: rotateY(65deg) rotate(25deg);
	}
	50% {
		transform: rotateY(48deg) rotate(-30deg);
	}
}
@keyframes manifesto-drift {
	50% {
		transform: translate(-65px, 45px);
	}
}
@media (min-width: 1600px) {
	.approach-bold .container,
	.home-hero .container {
		max-width: 1480px;
	}
	.approach-copy .lead,
	.home-hero .hero-copy .lead {
		font-size: 24px;
	}
}
@media (max-width: 1050px) {
	.approach-intro-grid {
		gap: 28px;
		grid-template-columns: 1fr 1fr;
	}
	.approach-copy h1 {
		font-size: 46px;
	}
	.roadmap-step {
		grid-template-columns: 70px 1fr;
		gap: 24px;
		padding: 32px;
	}
	.roadmap-result {
		grid-column: 2;
		border-left: 0;
		border-top: 1px solid #62684d;
		padding: 20px 0 0;
	}
	.home-hero .hero-grid {
		gap: 28px;
	}
	.brand-ring {
		border-width: 24px;
	}
	.ring-b {
		border-width: 15px;
	}
}
@media (max-width: 700px) {
	.approach-intro {
		padding: 30px 0 48px;
	}
	.approach-kicker {
		font-size: 14px;
	}
	.approach-kicker > span:last-child {
		max-width: 145px;
		text-align: right;
	}
	.approach-intro-grid,
	.home-hero .hero-grid {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-top: 30px;
	}
	.approach-copy h1 {
		font-size: clamp(36px, 8.7vw, 58px);
	}
	.approach-copy .lead,
	.home-hero .hero-copy .lead {
		font-size: 19px;
	}
	.brand-art {
		height: 340px;
	}
	.brand-stage {
		border-radius: 24px;
	}
	.brand-stage-caption {
		margin: 0 24px;
		font-size: 22px;
	}
	.brand-ring {
		width: 88%;
	}
	.method-manifesto {
		padding: 42px 0;
	}
	.method-manifesto p {
		font-size: 20px;
	}
	.manifesto-ring {
		opacity: 0.45;
		right: -490px;
	}
	.roadmap-heading > p {
		font-size: 19px;
	}
	.roadmap-step {
		grid-template-columns: 1fr;
		padding: 26px;
		gap: 20px;
	}
	.roadmap-number {
		font-size: 54px;
	}
	.roadmap-result {
		grid-column: auto;
	}
	.roadmap-copy h3 {
		font-size: 29px;
	}
	.roadmap-copy p,
	.roadmap-result p {
		font-size: 18px;
	}
	.partnership-grid {
		grid-template-columns: 1fr;
	}
	.partnership-grid article {
		padding: 28px;
	}
	.partnership-grid p {
		font-size: 19px;
	}
	.partnership-grid h3 {
		margin-top: 28px;
	}
	.home-hero .hero-meta {
		font-size: 14px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.brand-ring,
	.brand-float,
	.manifesto-ring {
		animation: none !important;
	}
	.brand-tilt {
		transition: none;
		transform: none;
	}
}