/* ====================================================================== */
/* =========================== Default Screen =========================== */
/* ====================================================================== */

@font-face {
	font-family: 'Mona Sans';
	src: url('../fonts/MS_000.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Vastago Grotesk';
	src: url('../fonts/VG_500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Vastago Grotesk';
	src: url('../fonts/VG_600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------- */
/* ----- >>> CSS Variables Root ----------- */
/* ---------------------------------------- */

:root {
	--font-size-base: max(clamp(9.6px, calc(9.4px + 0.041667vw), 10px), 0.6945vw);

	--font-title: 'Vastago Grotesk', Helvetica, Arial, sans-serif;
	--font-texts: 'Mona Sans', 'Helvetica', Helvetica, Arial, sans-serif;
	--main-texts: 1.6rem;
	--main-sizes: 3.2rem;
	--fs-min: 1;
	--fs-max: 1;

	--base-lite: 253, 252, 249;
	--base-dark: 033, 033, 033;
	--reds-lite: 242, 025, 005;
	--reds-dark: 201, 005, 005;
	--teal-lite: 060, 166, 166;
	--teal-dark: 017, 107, 114;
	--sand-lite: 243, 240, 228;
	--sand-dark: 242, 220, 194;
}

/* ---------------------------------------- */
/* ----- >>> Color Scheme ----------------- */
/* ---------------------------------------- */

[data-color="FDFCF9"] { --main: var(--base-lite); --alts: var(--teal-dark); --border: var(--teal-dark); }
[data-color="F3F0E4"] { --main: var(--sand-lite); --alts: var(--teal-dark); --border: var(--sand-dark); }
[data-color="F21905"] { --main: var(--reds-lite); --alts: var(--sand-lite); --border: var(--reds-dark); }
[data-color="C90505"] { --main: var(--reds-dark); --alts: var(--sand-lite); --border: var(--reds-lite); }
[data-color="3CA6A6"] { --main: var(--teal-lite); --alts: var(--sand-lite); --border: var(--teal-dark); }
[data-color="116B72"] { --main: var(--teal-dark); --alts: var(--sand-lite); --border: var(--teal-lite); }
[data-color="319799"] { --main: 049, 151, 153; --alts: var(--sand-lite); --border: var(--teal-lite); }
[data-color="27898C"] { --main: 039, 137, 140;; --alts: var(--sand-lite); --border: var(--teal-lite); }
[data-color="1C7A7F"] { --main: 028, 122, 127;; --alts: var(--sand-lite); --border: var(--teal-lite); }

section[data-color] {
	background: rgb(var(--main));
	color: rgb(var(--alts));
	--outgoing-border: var(--border);
}

section[data-color] .isButton {
	background: rgb(var(--alts));
	color: rgb(var(--main));
}


[data-color="F3F0E4"] *:is(h1, h2, h5, tagline, .isH1, .isH2, .isH5, .isTagline) { color: rgba(var(--reds-dark), 1.0); }
[data-color="F3F0E4"] *:is(.isH3, .isH4, .isH6) { color: inherit; }


/* ---------------------------------------- */
/* ----- >>> Base Styles ------------------- */
/* ---------------------------------------- */

html {
	height: 100%;
	font-size: var(--font-size-base);
	scroll-behavior: smooth;
	overflow-y: scroll;
	cursor: default;
}

body {
	height: 100%;
	-webkit-font-smoothing: antialiased !important;
	-webkit-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;
	font-smoothing: antialiased !important;
	scroll-padding-top: 32rem;
	overflow-x: hidden;
	line-height: 0;
	padding: 0;
	margin: 0;
}

/* ---------------------------------------- */
/* ----- >>> Structure -------------------- */
/* ---------------------------------------- */

header,
section,
footer {
	width: calc(100% - calc(var(--main-sizes) * 6.0));
	padding: calc(var(--main-sizes) * 4.0) calc(var(--main-sizes) * 3.0) calc(var(--main-sizes) * 4.0);
	gap: calc(var(--main-sizes) * 4.0);
	flex-direction: column;
	position: relative;
	display: flex;
}

header {
	transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
	padding-bottom: calc(var(--main-sizes) * 0.5);
	padding-top: calc(var(--main-sizes) * 0.5);
	color: rgba(var(--base-lite), 1.0);
	justify-content: space-between;
	transform: translateY(0);
	will-change: transform;
	flex-direction: row;
	align-items: center;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
}

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

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

footer {
	padding-bottom: calc(var(--main-sizes) * 0.0);
	padding-top: calc(var(--main-sizes) * 3.0);
	background: rgba(var(--base-dark), 1.0);
	color: rgba(var(--base-lite), 1.0);
	gap: calc(var(--main-sizes) * 2.0);
}

/* ---------------------------------------- */
/* ----- >>> Miscelaneas ------------------ */
/* ---------------------------------------- */


main {
	position: relative;
	overflow: clip;
}

main:before {
	width: 120%;
	height: calc(100% - 10vh);
	background-image: url(../assets/SVG/SVG_S00.svg?004);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	mix-blend-mode: multiply;
	position: absolute;
	pointer-events: none;
	opacity: 0.4;
	z-index: 100;
	content: "";
	right: 0;
	top: 10vh;
}

/* ---------------------------------------- */
/* ----- >>> Typography -------------------- */
/* ---------------------------------------- */

h1, .isH1 { font: 600 calc(var(--main-texts) * 0.8750)/1.00em var(--font-title); margin-bottom: calc(var(--main-sizes) * 1.0); }
h2, .isH2 { font: 600 calc(var(--main-texts) * 4.5000)/1.00em var(--font-title); margin-bottom: calc(var(--main-sizes) * 1.0); }
h3, .isH3 { font: 600 calc(var(--main-texts) * 3.5000)/1.00em var(--font-title); margin-bottom: calc(var(--main-sizes) * 1.0); }
h4, .isH4 { font: 600 calc(var(--main-texts) * 2.5000)/1.10em var(--font-title); margin-bottom: calc(var(--main-sizes) * 1.0); }
h5, .isH5 { font: 600 calc(var(--main-texts) * 1.7500)/1.25em var(--font-title); margin-bottom: calc(var(--main-sizes) * 1.0); }
h6, .isH6 { font: 500 calc(var(--main-texts) * 1.2500)/1.50em var(--font-title); margin-bottom: calc(var(--main-sizes) * 1.0); }
p, ul, ol { font: 400 calc(var(--main-texts) * 1.0000)/1.50em var(--font-texts); margin-bottom: calc(var(--main-sizes) * 0.5); }
small		 { font: 400 calc(var(--main-texts) * 0.8750)/2.00em var(--font-texts); margin-bottom: calc(var(--main-sizes) * 1.0); }
strong	 { font-weight: 600; }

h1, .isH1 {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

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

h4, h5, h6, p, .isH4, .isH5, .isH6 {
	max-width: calc(var(--main-sizes) * 24.0);
}

:is(.isH1, .isH2, .isH3, .isTagline) {
	max-width: none;
}

p:last-of-type {
	margin-bottom: calc(var(--main-sizes) * 1.0);
}

blockquote	{ 
	max-width: 75%;
	font: 600 calc(var(--main-texts) * 2.5000)/1.10em var(--font-title);
	margin: calc(var(--main-sizes) * -2.0) auto 0.0rem auto;
	text-align: center;
}

tagline, .isTagline {
	width: 90%;
	font: 600 calc(var(--main-texts) * 6.50)/0.8em var(--font-title); 
	margin-bottom: calc(var(--main-sizes) * 2.0); 
	flex-direction: column;
	display: flex;
}

mark {
	background: rgb(from currentColor r g b / 0.1);
	padding: 0.0rem 0.8rem;
	color: inherit;
}

/* ---------------------------------------- */
/* ----- >>> Navigation ------------------- */
/* ---------------------------------------- */

nav > ul {
	font: 700 calc(var(--main-texts) * 0.70)/1.50em var(--font-texts);
	gap: calc(var(--main-texts) * 2.0);
	text-transform: uppercase;
	align-items: center;
	margin-bottom: 0;	
	display: flex;
}

header nav > ul > li > ul {
	display: none;
}

.isMenu {
	display: none;
}

/* ---------------------------------------- */

footer .isBND {
	margin-bottom: calc( var(--main-sizes) * 1.25);
	width: calc(var(--main-sizes) * 2);
}

footer small {
	opacity: 0.5;
}

footer nav > ul {
	align-items: flex-start;
	text-transform: unset;
}

footer nav > ul > li > a {
	font: 600 calc(var(--main-texts) * 1.25)/1.50em var(--font-title);
	color: rgba(var(--reds-lite), 1.0);
}

footer nav > ul > li > ul {
	font: 400 calc(var(--main-texts) * 1.00)/1.00em var(--font-texts);
	margin-top: calc(var(--main-sizes) * 1);
	gap: calc(var(--main-sizes) * 0.5);
	flex-direction: column;
	display: flex;
}

footer legal {
	border-top: thin solid rgba(var(--base-lite), 0.1);
	padding-top: calc(var(--main-sizes) * 1.5);
	justify-content: space-between;
	align-items: center;
	display: flex;
}

footer legal > ul {
	gap: calc(var(--main-sizes) * 0.25);
	justify-content: center;
	align-items: center;
	display: flex;
}

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

/* ---------------------------------------- */
/* ----- >>> General Styles --------------- */
/* ---------------------------------------- */

section *:not(tide) {
	position: relative;
	z-index: 100;
}

block {
	flex-direction: column;
	position: relative;
	display: flex;
}

block > h2:has(+ h3) {
	margin-bottom: calc(var(--main-sizes) * 0.5);
}

[data-center] { 
	align-items: center;
	text-align: center;
}

mask[data-shape] {
	transform: scale(1.2);
	margin: 00vh auto 10vh auto;
}

mask[data-shape]:last-child {
	margin-bottom: 0;
}

grid > item > mask {
	display: block;
}

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


/* ---------------------------------------- */

section :is(ol, ul)  {
	gap: calc(var(--main-sizes) * 1.0);
	flex-direction: column;
	display: flex;
	padding: 0;
	margin: 0;
}

section :is(ul) {
	gap: calc(var(--main-sizes) * 0.25);
}

section :is(ol, ul) > li {
	position: relative;
}

section :is(ol, ul) > li::before {
	background: url(../assets/SVG/SVG_SHP.svg?0001) no-repeat calc(var(--i, 0) * 20%) 0 / 600% 100%;
	font: 600 calc(var(--main-texts) * 1.4)/calc(var(--main-sizes) * 1.25) var(--font-title);
	width: calc(var(--main-sizes) * 1.25);
	color: rgba(var(--base-lite), 1.0);
	content: counter(index);
	aspect-ratio: 1 / 1;
	text-align: center;
	position: absolute;
	left: 0;
}

section :is(ol, ul) > li:nth-child(6n + 1) { --i: 0; }
section :is(ol, ul) > li:nth-child(6n + 2) { --i: 1; }
section :is(ol, ul) > li:nth-child(6n + 3) { --i: 2; }
section :is(ol, ul) > li:nth-child(6n + 4) { --i: 3; }
section :is(ol, ul) > li:nth-child(6n + 5) { --i: 4; }
section :is(ol, ul) > li:nth-child(6n)     { --i: 5; }

section ol {
	counter-reset: index;
}

section ol > li {
	padding-left: calc(var(--main-sizes) * 2.0);
	counter-increment: index;
}

section ul > li:nth-child(odd) {
	border-radius: calc(var(--main-sizes) * 0.15);
	background: rgba(0, 0, 0, 0.05);
}

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.8);
	margin-left: calc(var(--main-sizes) * 0.4)
}

section ul > li::before {
	transform: translateX(-50%);
	width:  1.6rem;
	content: "";
	top: 1.0rem;
}

/* ---------------------------------------- */

brand {
	width: 110vw;
	font: 600 calc(var(--main-texts) * 16.0)/0.80em var(--font-title);
	padding-top: calc(var(--main-sizes) * 8.0);
	transform: translateX(-50%);
	flex-direction: column;
	position: relative;
	color: #A60000;
	display: flex;
	left: 50%;
}

brand > span:nth-child(1) { align-self: flex-start; }
brand > span:nth-child(2) { align-self: flex-end;   }

brand > i {
	clip-path: url(#isShape);
	background: url(../assets/SVG/SVG_ISO.svg) no-repeat center center / 75% rgba(var(--sand-lite), 1.0);
	width: calc(var(--main-sizes) * 24.0);
	position: absolute;
	z-index: -1;
	top: 10%;
}

/* ---------------------------------------- */

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

grid:has(> item:only-of-type) {
	--cols: 1;
}

grid[data-size] {
	--cols: 3;
}

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

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

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

/* ---------------------------------------- */

stats {
	margin-top: calc(var(--main-sizes) * 1.0);
	display: flex;
}

stats > item > * {
	margin-bottom: calc(var(--main-sizes) * 0.25);
	display: inline-block;
}

stats > item > span  { font: 600 calc(var(--main-texts) * 8.0)/1.00em var(--font-title); min-width: 34rem; }
stats > item > p 	   { font: 600 calc(var(--main-texts) * 1.0)/1.00em var(--font-title); margin-bottom: 0.8rem !important; }
stats > item > small { font: 400 calc(var(--main-texts) * 0.8)/1.50em var(--font-title); max-width: 24rem; }

stats > item > span:before {
	vertical-align: middle;
	font-size: 50%;
	content: "+";
}

stats > item:nth-child(1) > span { color: rgba(var(--reds-lite), 1.0); }
stats > item:nth-child(2) > span { color: rgba(var(--reds-dark), 1.0); }
stats > item:nth-child(3) > span { color: rgba(var(--teal-lite), 1.0); }
stats > item:nth-child(4) > span { color: rgba(var(--teal-dark), 1.0); }

/* ---------------------------------------- */

scroll,
scroll > items {
	width: 100%;
	display: flex;
}


scroll > items {
	animation: marquee 20s linear infinite;
	gap: calc(var(--main-sizes) * 2.0);
	animation-delay: -10s;
	width: max-content;
}

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

scroll > items > item picture {
	width: max-content;
}

scroll > items > item img {
	max-width: none;
}

scroll > items > item {
	background: url('../assets/SVG/SVG_B01.svg?0001') no-repeat 0% 0% / cover;
	margin-top: calc(var(--main-sizes) * 1.0);
}

scroll > items > item:nth-child(4n+1) { background-position: 00.000% 0%; }
scroll > items > item:nth-child(4n+2) { background-position: 33.333% 0%; }
scroll > items > item:nth-child(4n+3) { background-position: 66.666% 0%; }
scroll > items > item:nth-child(4n+4) { background-position: 100.00% 0%; }

@keyframes marquee {
	to { transform: translateX(-50%); }
}

/* ---------------------------------------- */
/* ----- >>> Blobs ------------------------ */
/* ---------------------------------------- */

blobs {
	--blob-basis: 45%;
	--blob-step: calc(var(--main-sizes) * 7.0);
	align-items: flex-start;
	counter-reset: step;
	display: flex;
}

blobs > item {
	background: var(--bg) no-repeat 50% 50% / cover;
	margin-top: calc(var(--blob-step) * var(--y, 0));
	padding: var(--main-sizes) calc(var(--main-sizes) * 3.5) ;
	flex: 0 0 var(--blob-basis);
	margin-left: var(--x, 0%);
	counter-increment: step;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	box-sizing: border-box;
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: hidden;
	display: flex;
}

blobs > item::before {
	background: url(../assets/SVG/SVG_SHP.svg?0001) no-repeat calc(var(--i, 0) * 20%) 0 / 600% 100%;
	font: 600 calc(var(--main-texts) * 2.0)/calc(var(--main-sizes) * 2.0) var(--font-title);
	left: calc(var(--main-sizes) * var(--tag-x, 1.0));
	top: calc(var(--main-sizes) * var(--tag-y, 1.5));
	width: calc(var(--main-sizes) * 2.0);
	color: rgba(var(--base-lite), 1.0);
	content: counter(step);
	text-align: center;
	position: absolute;
	aspect-ratio: 1;
	z-index: 110;
}

blobs > item:nth-child(1) {
	--x: 4%;
	--i: 0;
}

blobs > item:nth-child(2) {
	--tag-x: 0.5;
	--tag-y: 3.0;
	--x: 2.5%;
	--y: 0.6;
	--i: 0;
}

blobs > item:nth-child(3) {
	--tag-y: 1.0;
	--x: -85%;
	--y: 2;
	--i: 0;
}

blobs > item:nth-child(4) {
	--tag-x: 0.5;
	--tag-y: 3.0;
	--x: -0%;
	--y: 2.6;
	--i: 0;
}

blobs[data-base] > item:nth-child(1) { --bg: url('../assets/SVG/SVG_S02.svg?0002'); }
blobs[data-base] > item:nth-child(2) { --bg: url('../assets/SVG/SVG_S02.svg?0002'); }
blobs[data-base] > item:nth-child(3) { --bg: url('../assets/SVG/SVG_S02.svg?0002'); }
blobs[data-base] > item:nth-child(4) { --bg: url('../assets/SVG/SVG_S02.svg?0002'); }


blobs[data-alts] > item:nth-child(1) { --bg: url('../assets/SVG/SVG_S12.svg?0002'); }
blobs[data-alts] > item:nth-child(2) { --bg: url('../assets/SVG/SVG_S12.svg?0002'); }
blobs[data-alts] > item:nth-child(3) { --bg: url('../assets/SVG/SVG_S12.svg?0002'); }
blobs[data-alts] > item:nth-child(4) { --bg: url('../assets/SVG/SVG_S12.svg?0002'); }

blobs > item > *:not(a) {
	margin-bottom: calc(var(--main-sizes) * 0.5);
	width: 100%;
}

blobs > item > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------- */


blob {
	display: block;
}
blob[data-layer] {
	pointer-events: none;
	position: absolute;
	overflow: hidden;
	z-index: 0;
	inset: 0;
}
blob[data-scroll],
blob[data-inner],
blob[data-inner] svg {
	width:  100%;
	height: 100%;
}

blob[data-inner] {
	will-change: transform;
}

blob[data-inner] svg {
	overflow: visible;
	display: block;
}
blob[data-slot] {
	transition: opacity 900ms ease, transform 900ms ease;
	transform: scale(0.85);
	opacity: 0;
}
blob[data-slot][data-visible] {
	transform: scale(1);
	opacity: 1;
}

/* ---------------------------------------- */
/* ----- >>> Steps ------------------------ */
/* ---------------------------------------- */

steps {
	--arrow-n: 1.25;
	--tall-n:  3.00;
	--arrow: calc(var(--main-sizes) * var(--arrow-n));
	--tall:  calc(var(--main-sizes) * var(--tall-n));
	--inset: calc(var(--main-sizes) * 1.00);
	--drop:  calc(var(--main-sizes) * 1.00);
	--round: calc(var(--main-sizes) * 0.25);
	--point: calc(var(--main-sizes) * 0.30);
	--slope: atan2(calc(var(--tall-n) / 2), var(--arrow-n));
	--round-x: calc(var(--round) * cos(var(--slope)));
	--round-y: calc(var(--round) * sin(var(--slope)));
	--point-x: calc(var(--point) * cos(var(--slope)));
	--point-y: calc(var(--point) * sin(var(--slope)));
	--from: color-mix(in srgb, rgb(var(--base-dark)) 06%, rgb(var(--base-lite)));
	--to:   color-mix(in srgb, rgb(var(--base-dark)) 22%, rgb(var(--base-lite)));
	--ink:  rgba(var(--teal-dark), 1.0);
	display: flex;
	gap: 0;
}

steps[data-tone="1"] {
	--from: rgb(var(--reds-lite));
	--to:   rgb(var(--reds-dark));
	--ink:  rgba(var(--base-lite), 1.0);
}

steps[data-tone="2"] {
	--from: rgb(var(--teal-lite));
	--to:   rgb(var(--teal-dark));
	--ink:  rgba(var(--base-lite), 1.0);
}

steps > item {
	--shift: var(--arrow);
	--tint: 0%;
	margin-left: calc(var(--arrow) * -0.8);
	flex-direction: column;
	display: flex;
	flex: 1;
}

steps > item:first-child {
	--shift: 0rem;
	margin-left: 0;
}

steps > item:before {
	left: calc(var(--shift) + var(--inset));
	height: calc(var(--drop) + 1.0rem);
	background: rgb(from currentColor r g b / 0.45);
	position: absolute;
	top: var(--tall);
	width: 0.1rem;
	content: "";
}

steps > item > p {
	padding: 0 calc(var(--arrow) + var(--inset)) 0 calc(var(--shift) + var(--inset));
	clip-path: polygon(0 0, calc(100% - var(--arrow)) 0, 100% 50%, calc(100% - var(--arrow)) 100%, 0 100%, var(--arrow) 50%);
	background: color-mix(in srgb, var(--from), var(--to) var(--tint));
	font: 600 calc(var(--main-texts) * 1.20)/1.15em var(--font-title);
	margin-bottom: 0 !important;
	flex: 0 0 var(--tall);
	height: var(--tall);
	align-items: center;
	color: var(--ink);
	display: flex;
}

steps > item:first-child > p {
	clip-path: polygon(0 0, calc(100% - var(--arrow)) 0, 100% 50%, calc(100% - var(--arrow)) 100%, 0 100%);
	border-radius: var(--round) 0 0 var(--round);
}

steps > item:last-child > p {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--arrow) 50%);
	border-radius: 0 var(--round) var(--round) 0;
	padding-right: var(--inset);
}

steps > item > small {
	padding-left: calc(var(--shift) + var(--inset) + calc(var(--main-sizes) * 0.5));
	font: 400 calc(var(--main-texts) * 0.90)/1.50em var(--font-texts);
	margin-top: calc(var(--drop) * 0.75);
	display: block;
}

steps > item:last-child > small {
	padding-right: var(--inset);
}

steps > item > small > br {
	margin-bottom: calc(var(--main-sizes) * 0.5);
	display: block;
	content: "";
}

steps > item > small > strong {
	display: block;
}

steps > item:nth-child(1) { --tint: 000%; }
steps > item:nth-child(2) { --tint: 025%; }
steps > item:nth-child(3) { --tint: 050%; }
steps > item:nth-child(4) { --tint: 075%; }
steps > item:nth-child(5) { --tint: 100%; }
steps:has(> item:nth-child(2):last-child) > item:nth-child(2) { --tint: 100%; }
steps:has(> item:nth-child(3):last-child) > item:nth-child(2) { --tint: 050%; }
steps:has(> item:nth-child(3):last-child) > item:nth-child(3) { --tint: 100%; }
steps:has(> item:nth-child(4):last-child) > item:nth-child(2) { --tint: 033%; }
steps:has(> item:nth-child(4):last-child) > item:nth-child(3) { --tint: 066%; }
steps:has(> item:nth-child(4):last-child) > item:nth-child(4) { --tint: 100%; }

@supports (clip-path: shape(from 0 0, close)) {
	steps > item > p {
		clip-path: shape(
			from var(--round) 0,
			line to calc(100% - var(--arrow) - var(--round)) 0,
			curve to calc(100% - var(--arrow) + var(--round-x)) var(--round-y) with calc(100% - var(--arrow)) 0,
			line to calc(100% - var(--point-x)) calc(50% - var(--point-y)),
			curve to calc(100% - var(--point-x)) calc(50% + var(--point-y)) with 100% 50%,
			line to calc(100% - var(--arrow) + var(--round-x)) calc(100% - var(--round-y)),
			curve to calc(100% - var(--arrow) - var(--round)) 100% with calc(100% - var(--arrow)) 100%,
			line to var(--round) 100%,
			curve to var(--round-x) calc(100% - var(--round-y)) with 0 100%,
			line to calc(var(--arrow) - var(--point-x)) calc(50% + var(--point-y)),
			curve to calc(var(--arrow) - var(--point-x)) calc(50% - var(--point-y)) with var(--arrow) 50%,
			line to var(--round-x) var(--round-y),
			curve to var(--round) 0 with 0 0,
			close
		);
	}
	steps > item:first-child > p {
		clip-path: shape(
			from 0 0,
			line to calc(100% - var(--arrow) - var(--round)) 0,
			curve to calc(100% - var(--arrow) + var(--round-x)) var(--round-y) with calc(100% - var(--arrow)) 0,
			line to calc(100% - var(--point-x)) calc(50% - var(--point-y)),
			curve to calc(100% - var(--point-x)) calc(50% + var(--point-y)) with 100% 50%,
			line to calc(100% - var(--arrow) + var(--round-x)) calc(100% - var(--round-y)),
			curve to calc(100% - var(--arrow) - var(--round)) 100% with calc(100% - var(--arrow)) 100%,
			line to 0 100%,
			close
		);
	}
	steps > item:last-child > p {
		clip-path: shape(
			from 0 0,
			line to 100% 0,
			line to 100% 100%,
			line to var(--round) 100%,
			curve to var(--round-x) calc(100% - var(--round-y)) with 0 100%,
			line to calc(var(--arrow) - var(--point-x)) calc(50% + var(--point-y)),
			curve to calc(var(--arrow) - var(--point-x)) calc(50% - var(--point-y)) with var(--arrow) 50%,
			line to var(--round-x) var(--round-y),
			curve to var(--round) 0 with 0 0,
			close
		);
	}
}

/* ---------------------------------------- */
/* ----- >>> General Styles --------------- */
/* ---------------------------------------- */

img,
picture {
	width: 100%;
	height: auto !important;
	display: block;
}

/* ---------------------------------------- */
/* ----- >>> Animations ------------------- */
/* ---------------------------------------- */

a,
button {
	transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

header[data-hide] {
	transform: translateY(-150%);
}

@media (prefers-reduced-motion: reduce) {
	header {
		transition: none;
	}
}


/* ---------------------------------------- */
/* ----- >>> Icon Sets -------------------- */
/* ---------------------------------------- */

i {
	width:  calc(var(--main-sizes) * 0.75);
	display: inline-block;
	aspect-ratio: 1 / 1;
}

svg {
	fill: currentColor;
}

.isBND {
	width: calc(var(--main-sizes) * 4);
	display: block;
}


#isWSP {
	width: calc(var(--main-sizes) * 1.5);
	background: url(../assets/SVG/SVG_WSP.svg) no-repeat center center / 60% #25D366;
	bottom: calc(var(--main-sizes) * 1.0);
	right: calc(var(--main-sizes) * 1.0);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	position: fixed;
	z-index: 9999;
}

/* ---------------------------------------- */
/* ----- >>> Forms ------------------------ */
/* ---------------------------------------- */

actions {
	margin-top: calc(var(--main-sizes) * 1.0);
	gap: calc(var(--main-sizes) * 0.5);
	display: flex;
	width: auto;
}

actions:not(:last-child) {
	margin-bottom: calc(var(--main-sizes) * 2.0);
	margin-top: 0;
}
	
header .isButton {
	margin-top: 0;
}

.isLinks {
	font: 700 calc(var(--main-texts) * 0.7500)/1.50em var(--font-texts);
	border-bottom: thin solid currentColor;
	text-transform: uppercase;
	display: inline-block;
}

button,
.isButton {
	min-width: calc(var(--main-sizes) * 3);
	padding: calc(var(--main-sizes) * 0.5) calc(var(--main-sizes) * 1.0);
	font: 700 calc(var(--main-texts) * 0.7)/1.25em var(--font-texts);
	border-radius: calc(var(--main-sizes) * 1.0);
	background: rgba(var(--base-dark), 1.0);
	color: rgba(var(--base-lite), 1.0);
	text-transform: uppercase;
	display: inline-block;
	text-align: center;
	border: none;
}

.isButton.isAlt {
	border: thin solid currentColor;
	background: transparent;
}


/* ---------------------------------------- */
/* ----- >>> Forms ------------------------ */
/* ---------------------------------------- */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

h1, h2, h3, h4, h5, h6,
.isH1, .isH2, .isH3, .isH4, .isH5, .isH6,
blockquote,
tagline,
.isTagline,
brand,
stats > item > span,
section :is(ol, ul) > li::before {
	font-size: clamp(
		calc(var(--main-texts) * var(--fs-min)),
		calc(var(--main-texts) * var(--fs-min) + (100vw - 480px) * (var(--fs-max) - var(--fs-min)) / 60),
		calc(var(--main-texts) * var(--fs-max))
	);
}

h1, .isH1 { --fs-min: 0.80; --fs-max: 0.875; }
h2, .isH2 { --fs-min: 2.00; --fs-max: 4.50; }
h3, .isH3 { --fs-min: 1.80; --fs-max: 3.50; }
h4, .isH4 { --fs-min: 1.50; --fs-max: 2.50; }
h5, .isH5 { --fs-min: 1.30; --fs-max: 1.75; }
h6, .isH6 { --fs-min: 1.05; --fs-max: 1.25; }

blockquote { --fs-min: 1.40; --fs-max: 2.50; }
tagline, .isTagline { --fs-min: 2.60; --fs-max: 6.50; }
brand      { --fs-min: 4.60; --fs-max: 16.0; }

stats > item > span { --fs-min: 4.00; --fs-max: 8.00; }

section :is(ol, ul) > li::before { --fs-min: 1.20; --fs-max: 1.40; }


/* ---------------------------------------- */
/* ----- >>> CSS Hacks -------------------- */
/* ---------------------------------------- */

*:is(h1, h2, h3, h4, h5, h6, p, small):last-child {
	margin-bottom: 0;
}


/* ---------------------------------------- */
/* ----- >>> Locomotive Scroll 5.0.1 ------ */
/* ---------------------------------------- */

html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-behavior:allow-discrete;transition-duration:1ms;transition-property:overflow}

/* ---------------------------------------- */
/* ----- >>> Dev Tools -------------------- */
/* ---------------------------------------- */

.isDev * {
	box-shadow: inset 0rem 0rem 0rem 0.05rem #FF1DFF;
}

.isDev wrapper {
	background-color: rgba(255, 0, 0, 0.1);
}

.isDev header:before {
	width: 0.1rem;
	height: 100vh;
	background-color: rgba(255, 0, 0, 1);
	position: fixed;
	content: "";
	left: 50%;
	top: 0;
}