@media (max-width: 1280px) {
	html {
		scroll-padding-top: calc(var(--main-sizes) * 5.0);
	}

	body {
		-webkit-text-size-adjust: 100% !important;
		text-size-adjust: 100% !important;
		scroll-padding-top: 0;
		max-width: 100%;
	}

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

	a,
	button,
	.isButton {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
	}

	header,
	section,
	footer {
		width: calc(100% - calc(var(--main-sizes) * 4.0));
		padding: calc(var(--main-sizes) * 3.0) calc(var(--main-sizes) * 2.0) calc(var(--main-sizes) * 6.0);
		gap: calc(var(--main-sizes) * 3.0);
	}

	header {
		padding-bottom: calc(var(--main-sizes) * 0.5);
		padding-top: calc(var(--main-sizes) * 0.5);
	}

	footer {
		padding-top: calc(var(--main-sizes) * 3.0);
		gap: calc(var(--main-sizes) * 2.0);
		padding-bottom: 0;
	}

	section:first-of-type {
		padding-top: calc(var(--main-sizes) * 6.0);
	}

	section:last-of-type {
		padding-bottom: calc(var(--main-sizes) * 3.0);
	}

	brand > i {
		width: calc(var(--main-sizes) * 18.0);
	}

	stats {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(var(--main-sizes) * 1.5);
		display: grid;
	}

	stats > item > span {
		min-width: 0;
	}

	stats > item > * {
		display: block;
	}

	stats > item > small {
		margin-inline: auto;
	}
}

@media (max-width: 1024px) {
	main:before {
		background-size: 150% auto;
		opacity: 0.30;
		width: 190%;
	}

	grid            { --cols: 2; }
	grid[data-size] { --cols: 2; }
	grid[data-alts] { --cols: 2; row-gap: calc(var(--main-sizes) * 1.5); }

	grid[data-alts] > item:nth-child(1),
	grid[data-alts] > item:nth-child(2),
	grid[data-alts] > item:nth-child(3) {
		grid-column: auto;
	}

	grid > item:empty {
		display: none;
	}

	grid > item:nth-child(odd)  mask { transform: translate(calc(var(--main-sizes) * -1.0), calc(var(--main-sizes) * +0.0)); }
	grid > item:nth-child(even) mask { transform: translate(calc(var(--main-sizes) * +1.0), calc(var(--main-sizes) * -0.0)); }


	mask[data-shape] {
		margin: 0 auto calc(var(--main-sizes) * 2.0);
		display: block;
	}

	blobs {
		--blob-basis: calc(50% - calc(var(--main-sizes) * 0.75));
		gap: calc(var(--main-sizes) * 1.5);
		align-items: stretch;
		flex-wrap: wrap;
	}

	blobs > item,
	blobs > item:nth-child(n) {
		padding: calc(var(--main-sizes) * 2.5) calc(var(--main-sizes) * 1.75) calc(var(--main-sizes) * 2.0);
		background-size: 100% 100%;
		min-width: 0;
		justify-content: center;
		aspect-ratio: 4 / 3;
		overflow: visible;
		margin-left: 0;
		margin-top: 0;
		--x: 0%;
		--y: 0;
	}

	blobs > item::before {
		margin-bottom: calc(var(--main-sizes) * 0.5);
		line-height: calc(var(--main-sizes) * 1.75);
		width: calc(var(--main-sizes) * 1.75);
		font-size: calc(var(--main-texts) * 1.75);
		position: relative;
		flex: none;
		left: auto;
		top: auto;
	}

	steps {
		--inset: calc(var(--main-sizes) * 0.75);
		--arrow-n: 0.90;
		--tall-n: 3.40;
	}

	steps > item > p {
		font-size: calc(var(--main-texts) * 1.00);
	}

	steps > item > small {
		font-size: calc(var(--main-texts) * 0.85);
	}

	brand > i {
		width: calc(var(--main-sizes) * 14.0);
	}
}

@media (max-width: 800px) {
	header,
	section,
	footer {
		width: calc(100% - calc(var(--main-sizes) * 2.5));
		padding: calc(var(--main-sizes) * 2.5) calc(var(--main-sizes) * 1.25) calc(var(--main-sizes) * 4.0);
		gap: calc(var(--main-sizes) * 2.5);
	}

	header {
		padding-bottom: calc(var(--main-sizes) * 0.5);
		padding-top: calc(var(--main-sizes) * 0.5);
		gap: calc(var(--main-sizes) * 1.0);
	}

	footer {
		padding-top: calc(var(--main-sizes) * 2.5);
		gap: calc(var(--main-sizes) * 2.0);
		padding-bottom: 0;
	}

	section:first-of-type {
		padding-top: calc(var(--main-sizes) * 5.0);
	}

	section:last-of-type {
		padding-bottom: calc(var(--main-sizes) * 2.5);
	}

	header .isBND {
		width: calc(var(--main-sizes) * 2.4);
		flex: 0 0 auto;
	}

	header {
		transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1), background-color 250ms ease;
	}

	header[data-menu] {
		background: rgba(var(--reds-lite), 1.0);
		color: rgba(var(--sand-lite), 1.0) !important;
	}

	.isMenu {
		width: calc(var(--main-sizes) * 1.5);
		height: calc(var(--main-sizes) * 1.5);
		margin-right: calc(var(--main-sizes) * -0.35);
		border-radius: 0;
		background: transparent;
		color: inherit;
		position: relative;
		flex: 0 0 auto;
		min-width: 0;
		display: block;
		padding: 0;
	}

	.isMenu > i {
		width: calc(var(--main-sizes) * 0.8);
		height: 0.2rem;
		transition: background-color 200ms ease;
		transform: translate(-50%, -50%);
		background: currentColor;
		border-radius: 0.2rem;
		aspect-ratio: auto;
		position: absolute;
		display: block;
		left: 50%;
		top: 50%;
	}

	.isMenu > i::before,
	.isMenu > i::after {
		width: 100%;
		height: 100%;
		transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
		background: currentColor;
		border-radius: inherit;
		position: absolute;
		content: "";
		left: 0;
		top: 0;
	}

	.isMenu > i::before { transform: translateY(-0.7rem); }
	.isMenu > i::after  { transform: translateY(+0.7rem); }

	header[data-menu] .isMenu > i { background-color: transparent; }
	header[data-menu] .isMenu > i::before { transform: rotate(45deg); }
	header[data-menu] .isMenu > i::after  { transform: rotate(-45deg); }

	header nav {
		width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: calc(var(--main-sizes) * 1.5) calc(var(--main-sizes) * 1.25) calc(var(--main-sizes) * 5.0);
		transition: opacity 250ms ease, transform 250ms ease, visibility 0s linear 250ms;
		background: rgba(var(--reds-lite), 1.0);
		color: rgba(var(--sand-lite), 1.0);
		transform: translateY(-1.0rem);
		overscroll-behavior: contain;
		box-sizing: border-box;
		visibility: hidden;
		position: absolute;
		overflow-y: auto;
		opacity: 0;
		left: 0;
		top: 100%;
	}

	header[data-menu] nav {
		transition: opacity 250ms ease, transform 250ms ease, visibility 0s linear 0s;
		visibility: visible;
		transform: none;
		opacity: 1;
	}

	header nav > ul {
		font: 600 calc(var(--main-texts) * 2.0)/1.15em var(--font-title);
		gap: calc(var(--main-sizes) * 0.9);
		align-items: flex-start;
		flex-direction: column;
		text-transform: none;
	}

	header nav > ul > li > ul {
		font: 400 calc(var(--main-texts) * 1.0)/1.40em var(--font-texts);
		border-left: thin solid rgba(var(--sand-lite), 0.35);
		padding-left: calc(var(--main-sizes) * 0.6);
		margin-top: calc(var(--main-sizes) * 0.5);
		gap: calc(var(--main-sizes) * 0.35);
		flex-direction: column;
		display: flex;
	}

	header nav > ul > li.isButton {
		margin-top: calc(var(--main-sizes) * 0.5);
		background: rgba(var(--base-dark), 1.0);
		color: rgba(var(--base-lite), 1.0);
	}

	html[data-lock],
	html[data-lock] body {
		overflow: hidden;
	}

	html[data-lock] #isWSP {
		visibility: hidden;
	}

	footer nav > ul {
		gap: calc(var(--main-sizes) * 1.5);
		flex-direction: column;
	}

	grid,
	grid[data-size],
	grid[data-alts] {
		gap: calc(var(--main-sizes) * 1.5);
		--cols: 1;
	}

	block > grid > item:only-of-type {
		justify-self: stretch;
		width: 100%;
	}


	steps {
		gap: calc(var(--main-sizes) * 1.0);
		flex-direction: column;
	}

	steps > item {
		--shift: 0rem;
		margin-left: 0;
		flex: none;
	}

	steps > item:before {
		display: none;
	}

	steps > item > p,
	steps > item:first-child > p,
	steps > item:last-child > p {
		padding: calc(var(--main-sizes) * 0.6) calc(var(--main-sizes) * 0.9);
		border-radius: calc(var(--main-sizes) * 0.3);
		font-size: calc(var(--main-texts) * 1.10);
		clip-path: none;
		height: auto;
		flex: none;
	}

	steps > item > small,
	steps > item:last-child > small {
		padding: 0 calc(var(--main-sizes) * 0.35);
		margin-top: calc(var(--main-sizes) * 0.5);
	}

	footer legal {
		padding-top: calc(var(--main-sizes) * 1.25);
	}

	blockquote {
		margin: calc(var(--main-sizes) * 1.0) auto 0;
		max-width: 100%;
	}

	brand > i {
		width: calc(var(--main-sizes) * 11.0);
	}

}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
	scroll > items {
		animation: none;
	}
}

@media (max-width: 640px) {
	html {
		scroll-padding-top: calc(var(--main-sizes) * 4.0);
	}

	main:before {
		background-size: 220% auto;
		height: calc(100% - 6vh);
		width: 240%;
		opacity: 0.22;
		right: -70%;
		top: 6vh;
	}

	header,
	section,
	footer {
		width: calc(100% - calc(var(--main-sizes) * 2.0));
		padding: calc(var(--main-sizes) * 2.0) calc(var(--main-sizes) * 1.0) calc(var(--main-sizes) * 3.0);
		gap: calc(var(--main-sizes) * 2.0);
	}

	header {
		padding-bottom: calc(var(--main-sizes) * 0.5);
		padding-top: calc(var(--main-sizes) * 0.5);
		gap: calc(var(--main-sizes) * 0.75);
	}

	footer {
		padding-top: calc(var(--main-sizes) * 2.0);
		gap: calc(var(--main-sizes) * 1.75);
		padding-bottom: 0;
	}

	section:first-of-type {
		padding-top: calc(var(--main-sizes) * 4.5);
	}

	section:last-of-type {
		padding-bottom: calc(var(--main-sizes) * 2.0);
	}

	h1, .isH1 { letter-spacing: 0.04em; }

	h1:is(.isH2, .isH3, .isH4, .isH5, .isH6, .isTagline) { letter-spacing: normal; }

	h4, h5, h6, p, .isH4, .isH5, .isH6 {
		max-width: 100%;
	}

	blockquote {
		max-width: 100%;
	}

	tagline, .isTagline {
		margin-bottom: calc(var(--main-sizes) * 1.5);
		width: 100%;
	}

	brand {
		padding-top: calc(var(--main-sizes) * 3.0);
		transform: none;
		width: 100%;
		left: 0;
	}

	brand > i {
		width: calc(var(--main-sizes) * 9.0);
		top: 6%;
	}

	scroll > items {
		gap: calc(var(--main-sizes) * 1.0);
	}

	scroll > items > item img {
		width: 12rem;
	}

	actions {
		gap: calc(var(--main-sizes) * 0.5);
		flex-wrap: wrap;
	}

	[data-center] :is(h2, h3, p) br {
		display: none;
	}

	blobs {
		--blob-basis: auto;
		flex-direction: column;
	}

	blobs > item,
	blobs > item:nth-child(n) {
		padding: 16% 13% 13%;
		flex: none;
		width: 100%;
	}

	button,
	.isButton {
		padding: calc(var(--main-sizes) * 0.55) calc(var(--main-sizes) * 1.0);
		font-size: calc(var(--main-texts) * 0.75);
	}

	#isWSP {
		bottom: calc(var(--main-sizes) * 0.75);
		width: calc(var(--main-sizes) * 1.75);
		right: calc(var(--main-sizes) * 0.75);
	}

	footer legal {
		gap: calc(var(--main-sizes) * 1.0);
		align-items: flex-start;
		flex-direction: column;
	}

	footer legal > ul {
		gap: calc(var(--main-sizes) * 0.5);
	}

	footer legal > ul > li,
	footer legal > ul > li > a,
	footer legal > ul > li > a > i,
	footer legal > ul > li > a > i > svg {
		height: 3.0rem;
		width: 3.0rem;
	}
}

@media (max-width: 480px) {
	header,
	section,
	footer {
		width: calc(100% - calc(var(--main-sizes) * 1.7));
		padding: calc(var(--main-sizes) * 1.75) calc(var(--main-sizes) * 0.85) calc(var(--main-sizes) * 2.5);
		gap: calc(var(--main-sizes) * 1.75);
	}

	header {
		padding-bottom: calc(var(--main-sizes) * 0.5);
		padding-top: calc(var(--main-sizes) * 0.5);
		gap: calc(var(--main-sizes) * 0.5);
	}

	footer {
		padding-top: calc(var(--main-sizes) * 1.75);
		gap: calc(var(--main-sizes) * 1.5);
		padding-bottom: 0;
	}

	section:first-of-type {
		padding-top: calc(var(--main-sizes) * 4.0);
	}

	section:last-of-type {
		padding-bottom: calc(var(--main-sizes) * 1.75);
	}

	brand > i {
		width: calc(var(--main-sizes) * 8.0);
	}

	stats {
		gap: calc(var(--main-sizes) * 1.25);
		grid-template-columns: 1fr;
	}

	steps > item > p,
	steps > item:first-child > p,
	steps > item:last-child > p {
		padding: calc(var(--main-sizes) * 0.55) calc(var(--main-sizes) * 0.75);
		font-size: calc(var(--main-texts) * 1.05);
	}

	section ol > li {
		padding-left: calc(var(--main-sizes) * 1.75);
	}

	section :is(ol, ul) > li::before {
		line-height: calc(var(--main-sizes) * 0.5);
		width: calc(var(--main-sizes) * 0.5);
	}

	section ul > li {
		padding: calc(var(--main-sizes) * 0.2) calc(var(--main-sizes) * 0.2) calc(var(--main-sizes) * 0.2) calc(var(--main-sizes) * 0.7);
		margin-left: calc(var(--main-sizes) * 0.3);
	}
}

@media (max-width: 360px) {
	:root {
		--font-size-base: clamp(8.8px, 0.575em, 12px);
	}

	header .isBND {
		width: calc(var(--main-sizes) * 2.1);
	}

	h2, .isH2 { font-size: calc(var(--main-texts) * 1.85); }
	h3, .isH3 { font-size: calc(var(--main-texts) * 1.70); }

	tagline, .isTagline { font-size: calc(var(--main-texts) * 2.30); }
	brand   { font-size: calc(var(--main-texts) * 4.10); }

	brand > i {
		width: calc(var(--main-sizes) * 7.0);
	}

	stats > item > span {
		font-size: calc(var(--main-texts) * 3.60);
	}

	scroll > items > item img {
		width: 10rem;
	}
}