@charset "UTF-8";

@font-face {
  font-family: Aeonik;
  src: url(font/AeonikPro-Medium.otf);
  font-weight: 500;
}
@font-face {
  font-family: 'Basier';
  src: url(font/bas-reg.woff2);
  font-weight: 400;
}
@font-face {
  font-family: 'Basier';
  src: url(font/bas-reg-it.woff2);
  font-weight: 400;
	font-style: italic;
}
@font-face {
  font-family: 'Basier';
  src: url(font/bas-sem.woff2);
  font-weight: 600;
}
@font-face {
  font-family: 'Basier';
  src: url(font/bas-sem-it.woff2);
  font-weight: 600;
	font-style: italic;
}

@import url('https://fonts.googleapis.com/css2?family=Trirong:ital,wght@1,200;1,300&display=swap');


*::selection{ background: #0d9; color: #000; }
*::-moz-selection{ background: #0d9; color: #000; }

[data-bg~="LASER"] *::selection { background: #000; color: #0d9; }



:root {
	--color-bg: #E1EAE6;
	--color-bg-rgba: rgba(225, 234, 230, 1);
	--color-bg-rgba-b: rgba(225, 234, 230, 0.6);
	--color-bg-black: #09110D;
	--color-bg-black-rgba: rgba(9, 17, 13, 1);
	--color-bg-black-rgba-t:  rgba(9, 17, 13, 0);
	--color-bg-black-rgba-t10:  rgba(9, 17, 13, 0.1);
	--color-bg-black-rgba-t25: rgba(9, 17, 13, 0.25);
	--color-bg-black-rgba-t50: rgba(9, 17, 13, 0.5);
	--color-bg-semi-s: #D3DDD9;
	--color-bg-semi: rgba(133, 150, 141, 0.16);
	--color-bg-semi-b: rgba(133, 150, 141, 0.32);
	--color-bg-white: #FFF;
	--color-bg-fade: linear-gradient(270deg, #E1EAE5 0%, rgba(225, 234, 229, 0) 100%);
	--color-bg-fade-l: linear-gradient(90deg, #E1EAE5 0%, rgba(225, 234, 229, 0) 100%);
	--color-txt: #09110D;
	--color-txt-hover: #00C77A;
	--color-txt-off: #AEB4B0;
	--color-txt-grey: #828b85;
	--color-txt-on-dark: #E1EAE6;
	--color-txt-on-laser: #09110D;
	--color-txt-on-laser-hover: #FFF;
	--color-txt-on-white: #09110D;
	--color-line: rgba(144,144,144,.3);
	--color-line-strong: var(--color-txt);
	--color-accent: #0D9;
	--color-accent-b: #01B07C;
	--color-accent-rgba: rgba(0, 221, 153, 1);
	--color-accent-rgba-a: rgba(0, 221, 153, 0.8);
	--color-accent-rgba-b: rgba(0, 221, 153, 0.6);
	--color-accent-hover: #FFF;

	--space-p-lr: 48px;
	--space-xs: 2vh;
	--space-s: 4vh;
	--space-m: 8vh;
	--space-l: 8vh;
	--space-xl: 14vh;
	--space-xxl: 16vh;

	--size-topbar: 56px;
	--size-max-width: 1920px;
	--size-line-width: 1px;

	--font-basic: 400 15px/160% 'Basier', Helvetica, sans-serif;
	--font-header: 500 1em/130% Aeonik, Helvetica, sans-serif;
	--font-blog-p: clamp(16px, 1.85vh, 20px);
	--font-read-p: clamp(16px, 1.85vh, 20px);
}
@supports (color: color(display-p3 1 1 1)) {
	*::selection			{ background: color(display-p3 0 0.88 0.62); color: color(display-p3 0 0 0); }
	*::-moz-selection { background: color(display-p3 0 0.88 0.62); color: color(display-p3 0 0 0); }

	.LASER *::selection,
	.TESTIMONIAL *::selection { background: color(display-p3 0 0 0); color: color(display-p3 0 0.88 0.62); }

	:root {
		--color-bg: 			 color(display-p3 0.889 0.917 0.903);
		--color-bg-rgba: 	 color(display-p3 0.889 0.917 0.903 / 1);
		--color-bg-rgba-b: color(display-p3 0.889 0.917 0.903 / 0.6);

		--color-accent: 			 color(display-p3 0 0.88 0.62);
		--color-accent-b:			 color(display-p3 0.004 0.688 0.484);
		--color-accent-rgba: 	 color(display-p3 0 0.88 0.62 / 1);
		--color-accent-rgba-b: color(display-p3 0 0.88 0.62 / 0.6);
		--color-accent-hover:  color(display-p3 1 1 1);

		--color-txt:								color(display-p3 0.042 0.066 0.052);
		--color-txt-hover: 		 			color(display-p3 0.057 0.715 0.433);
		--color-txt-off:						color(display-p3 0.533 0.588 0.557);
		--color-txt-grey:						color(display-p3 0.44 0.515 0.472);
		--color-txt-on-dark:				color(display-p3 0.889 0.917 0.903);
		--color-txt-on-laser:				color(display-p3 0.042 0.066 0.052);
		--color-txt-on-laser-hover: color(display-p3 1 1 1);
		--color-txt-on-white:				color(display-p3 0.042 0.066 0.052);

		--color-bg-black: 			 color(display-p3 0.042 0.066 0.052);
		--color-bg-black-rgba: 	 color(display-p3 0.042 0.066 0.052 / 1);
		--color-bg-black-rgba-t: color(display-p3 0.042 0.066 0.052 / 0);
		--color-bg-semi:				 color(display-p3 0.527 0.578 0.551 / 0.2);
		--color-bg-semi-b:			 color(display-p3 0.527 0.578 0.551 / 0.3);
		--color-bg-white: 			 color(display-p3 1 1 1);
	}
}


:root [data-bg~="BLACK"] {

	--color-bg-semi-s: #242B27;
}


@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1) { 
  
  :root {
		--size-line-width: 0.5px;
	}

}

/* @media (prefers-color-scheme: dark) {
	:root {
		--color-bg: #0F1512;
		--color-bg-rgba: rgba(15, 21, 18, 1);
		--color-bg-rgba-b: rgba(15, 21, 18, 0.6);
		--color-bg-black: rgb(0,0,0);
		--color-bg-black-rgba: rgba(0,0,0, 1);
		--color-bg-black-rgba-t: rgba(0,0,0, 0.01);
		--color-bg-white: #8B948F;
		--color-bg-fade: linear-gradient(270deg, #0F1512 0%, rgba(15, 21, 18, 0.991353) 6.67%, rgba(15, 21, 18, 0.96449) 13.33%, rgba(15, 21, 18, 0.91834) 20%, rgba(15, 21, 18, 0.852589) 26.67%, rgba(15, 21, 18, 0.768225) 33.33%, rgba(15, 21, 18, 0.668116) 40%, rgba(15, 21, 18, 0.557309) 46.67%, rgba(15, 21, 18, 0.442691) 53.33%, rgba(15, 21, 18, 0.331884) 60%, rgba(15, 21, 18, 0.231775) 66.67%, rgba(15, 21, 18, 0.147411) 73.33%, rgba(15, 21, 18, 0.0816599) 80%, rgba(15, 21, 18, 0.03551) 86.67%, rgba(15, 21, 18, 0.0086472) 93.33%, rgba(15, 21, 18, 0) 100%);
		--color-txt: #8B948F;
		--color-txt-hover: #0C6;
		--color-txt-on-dark: #8B948F;
		--color-txt-on-laser: #0F1512;
		--color-txt-on-white: #0F1512;
		--color-line: rgba(144,144,144,.3);
		--color-accent: rgb(0, 153, 85);
		--color-accent-rgba: rgba(0, 153, 85, 1);
		--color-accent-hover: #0D7;

	}
} */

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

html {
	height: 100%;
}
html[data-demo]::-webkit-scrollbar {
  display: none;
}

body {
	height: 100%;
	font: 400 15px/160% 'Basier', Helvetica, sans-serif;
	letter-spacing: -0.01em;
	color: var(--color-txt);
	margin: 0;
	padding: 0px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--color-bg);
}
body *{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*---------------------------------------*/
.clear {display: block; clear: both;}




.ar {
	display: block;
	position: relative;
	width: 36px;
	height: 2px;
	border-color: var(--color-txt);
	border-top-width: 1px;
	border-top-style: solid;
	transition: all 0.2s;
}
.ar::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-top-width: 1px;
	border-top-style: solid;
	border-right-width: 1px;
	border-right-style: solid;
	border-color: inherit;
	position: absolute;
	top: -50%;
	right: -1px;
	transform-origin: top right;
	rotate: 45deg;
	transition: width 0.3s, height 0.3s;
}
.ar.n::before {
	content: '';
	display: block;
	width: 0px;
	height: 13px;
	border-left-width: 1px;
	border-left-style: solid;
	/* border-top-width: 1px;
	border-top-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid; */
	border-color: inherit;
	/* border-radius: 3px 0 0 3px; */
	position: absolute;
	top: -0.5px;
	left: 0px;
	translate: 0 -50%;
	scale: 1 0;
	transform-origin: center center;
	transition: scale 0.3s;
}
.ar.l::after {
	right: auto;
	left: -1px;
	border-right-width: 0;
	border-right-style: none;
	border-left-width: 1px;
	border-left-style: solid;
	transform-origin: top left;
	rotate: -45deg;
}
.ar.l.n::before {
	right: 0;
	left: auto;
}

.nowrap { white-space: nowrap; }

a {
	color: inherit;
	text-decoration: none;
}

a.link { position: relative; transition: translate 0.15s; }
a.link:hover { color: var(--color-txt-hover);  }

a.link svg {
	display: inline-block;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--color-txt);
	margin-left: 6px;
	margin-bottom: -1px;
}
a.link:hover svg { stroke: var(--color-txt-hover);}
a.link.h3 svg { margin-bottom: 1px; }
a.link svg.ext { height: 8px; }

/* a.intext { border-bottom: 1px solid var(--color-txt); margin-right: 8px; position: relative; }
a.intext[href]:not(:where(
  [href^="#"],
  [href^="/"]:not([href^="//"]),
  [href*="//ynd.co"]
))::after {
	display: block;
	position: absolute;
	right: -10px;
	top: 0.5em;
	width: 5px;
	height:5px;
	content: '';
	border-right: 1px solid var(--color-txt);
	border-top: 1px solid var(--color-txt);
	transition: all 0.2s;
}
a.intext[href]:not(:where(
  [href^="#"],
  [href^="/"]:not([href^="//"]),
  [href*="//ynd.co"]
))::before {
	display: block;
	position: absolute;
	right: -9.5px;
	top: 0.5em;
	width: 10px;
	content: '';
	border-bottom: 1px solid var(--color-txt);
	transform-origin: 100% 50%;
	rotate: -45deg;
	transition: all 0.2s;
}
a.intext:hover::after { width: 7px; height: 7px; border-color: var(--color-txt-hover);}
a.intext:hover::before { width: 8px; border-color: var(--color-txt-hover);}
a.intext:hover { border-color: var(--color-txt-hover);}
a.intext::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 5px;
	vertical-align: middle;
	margin-left: 4px;
	position: relative;
	border: 1px solid black;
}
a.intext:hover::after {
	border-color: var(--color-txt-hover);
	background-color: var(--color-txt-hover);
} */

a.button {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
	float: left;
	padding: 12px 24px;
	min-height: 48px;
	background: transparent;
	border: 1px solid var(--color-txt);
	color: inherit;
	border-radius: 60px;
	transition: all 0.3s;
}
a.button + a.button { margin-left: 16px; }

a.button:hover {
	background: var(--color-accent);
	color: var(--color-txt-on-laser);
	border-color: var(--color-accent);
}
a:hover > .ar { width: 48px; }
a:hover > .ar::after {
	width: 12px;
	height: 12px;
}
a:hover > .ar.n::before { scale: 1 1;}

a.button.ico { padding: 12px;  min-height: 48px; background: transparent; }
a.button.ico .ar { margin: 0; }

a:hover > .copy { display: inline-block; }
a > .copy {
	display: none;
	vertical-align: middle;
	font: var(--font-basic);
	font-size: 10px;
	line-height: 16px;
	border: 1px solid;
	border-radius: 16px;
	padding: 0 6px;
	margin-left: 6px;
}
a > .copy:hover {
	background-color: var(--color-txt-hover);
	border-color: var(--color-txt-hover);
	color: var(--color-bg);
}

p a { border-bottom: 1px solid; }
p a[href]:not(:where(
  [href^="#"],
  [href^="/"]:not([href^="//"]),
  [href*="//ynd.co"]
))::after {
	content: '';
	background-color: var(--color-txt);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 9.5L9.5 0.5' stroke='black'/%3E%3Cpath d='M3 0.5H9.5V7' stroke='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
		-webkit-mask-position: 0% 100%;
		mask-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 9.5L9.5 0.5' stroke='black'/%3E%3Cpath d='M3 0.5H9.5V7' stroke='black'/%3E%3C/svg%3E");
		mask-repeat: no-repeat;
		mask-position: 0% 100%;
	display: inline-block;
	height: 16px;
	width: 10px;
	margin: 0 0 0 2px;
	transition: translate 0.3s;
	vertical-align:text-top;
}
p a:hover { border-bottom: 1px dashed; color: var(--color-txt-hover); }
p a:hover::after { translate: 4px -4px; background-color: var(--color-txt-hover);}

[data-bg~="BLACK"] .ar,
[data-bg~="BLACK"] a.button,
[data-bg~="BLACK"] a.button .ar { border-color: var(--color-txt-on-dark); }
[data-bg~="BLACK"] a.button:hover {	border-color: var(--color-accent); }
[data-bg~="BLACK"] a:hover .ar,
[data-bg~="BLACK"] a.button:hover .ar {	border-color: var(--color-txt-on-laser); }
[data-bg~="BLACK"] p a::after { background-color: var(--color-txt-on-dark); }
[data-bg~="BLACK"] p a:hover::after { background-color: var(--color-txt-hover); }


.LASER a.button,
.LASER a.button .ar {	border-color: var(--color-txt-on-laser); }
.LASER a.button:hover {	background: var(--color-txt-on-laser); color: var(--color-txt-on-laser-hover);}
.LASER a.button:hover .ar {	border-color: var(--color-txt-on-laser-hover); }




.s-b      { opacity: 0; translate: 0 10vh; transition: translate 0.75s, opacity 0.4s; }
.s-b.s-on { opacity: 1; translate: 0 0; }

ul.s-l 		li { opacity: 0; translate: 0 50%; transition: translate 0.75s, opacity 0.4s; }
ul.s-l.s-on li { opacity: 1; translate: 0 0; }

ul.s-l.s-on li:nth-child(1) { transition-delay: 0s; }
ul.s-l.s-on li:nth-child(2) { transition-delay: 0.1s; }
ul.s-l.s-on li:nth-child(3) { transition-delay: 0.2s; }
ul.s-l.s-on li:nth-child(4) { transition-delay: 0.3s; }
ul.s-l.s-on li:nth-child(5) { transition-delay: 0.4s; }
ul.s-l.s-on li:nth-child(6) { transition-delay: 0.5s; }
ul.s-l.s-on li:nth-child(7) { transition-delay: 0.6s; }
ul.s-l.s-on li:nth-child(8) { transition-delay: 0.7s; }
ul.s-l.s-on li:nth-child(9) { transition-delay: 0.8s; }
ul.s-l.s-on li:nth-child(10){ transition-delay: 0.9s; }
ul.s-l.s-on li:nth-child(11){ transition-delay: 1.0s; }
ul.s-l.s-on li:nth-child(12){ transition-delay: 1.1s; }



h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	display: block;
	margin: 0;
	padding: 0;
	font-family: 'Aeonik', sans-serif;
	font-style: normal;
	font-weight: 500;
	letter-spacing: normal;
}

h1, .h1,
h2, .h2 {
	font-size: 4.5vmin;
	font-size: clamp(40px, 4.5vmin, 48px);
	line-height: 130%;
}
.midheader { width: 75%; margin-bottom: var(--space-xl); }
.midheader.b { width: 60%; margin-bottom: var(--space-xxl); margin-top: var(--space-xxl); }
.midheader:only-child {margin: 0;}
.midheader.s-b  { translate: none; transform: scale(0.95) translateY(10vh); transform-origin: center top; opacity: 0; transition: transform 1s, opacity 1s; }
.midheader.s-on { translate: none; transform: none; opacity: 1; }
.midheader.nomargin { margin-bottom: 0; }

h3, .h3,
h4, .h4 {
	font-size: 2.4vh;
	font-size: clamp(20px, 2.6vh, 26px);
	line-height: 140%;
}

.p-lr { padding-left: var(--space-p-lr); padding-right: var(--space-p-lr); }
.p-l { padding-left: var(--space-p-lr); }
.p-r { padding-right: var(--space-p-lr); }
.p-tb { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.p-t { padding-top: var(--space-xl); }
.p-b { padding-bottom: var(--space-xl); }
.p-tb-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }


.P-TB { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.P-T  { padding-top: var(--space-xl); }
.P-B  { padding-bottom: var(--space-xl); }



hr {
	display: block;
	border: none;
	margin: 0;
	width: 100%;
	padding: 0 var(--space-p-lr);
	background: transparent;
	position: relative;
}
hr.T { margin-top: var(--space-xl); }
hr.B { margin-bottom: var(--space-xl);; }
hr::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: var(--color-line);
}


.img-filter { position: relative; }
.img-filter::after {
	content: '';
	display: block;
	position: absolute;
	z-index: 2;
	inset: 0;
	background: var(--color-bg);
	mix-blend-mode: color;
	pointer-events: none;
	transition: background 1s 0s;
}
.img-filter.img-revealing:hover::after {
	transition: background 6s 2s;
	background: rgba(0,0,0,0);
}

/* ---------------------------------- REVISED ----------------- */


.M-MOCK {
	display: flex;
	container-name: mock;
	container-type: inline-size;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 40%;
	overflow: hidden;
	transform-style: preserve-3d;
	perspective: 72vmax;
}
.M-SET {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 4;
	width: 100%;
	transform-style: preserve-3d;
	transform-origin: 50% 50% 0;
	pointer-events: none;
	will-change: transform;
}
.M-MOCK.SQ { padding: var(--space-p-lr); }
.M-MOCK.SQ .M-SET { aspect-ratio: 1/1; }



.M-FRAME {
	display: flow-root;
	position: relative;
	z-index: 6;
	border: 1px solid rgba(0,0,0,0.75);
	overflow: hidden;
	transform-style: preserve-3d;
	backface-visibility: visible;
	background-color: rgba(180,180,180,.1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	padding: clamp(6px, 0.6vw, calc(0.006 * var(--size-max-width)));
	border-radius: clamp(16px, 2.1vw, calc(0.021 * var(--size-max-width)));
	will-change: transform;
}
.BLACK .M-FRAME { border-color: rgba(255,255,255,0.75); }
[data-bg~="BLACK"] .M-FRAME { border-color: rgba(255,255,255,0.75); }

.M-FRAME:nth-child(n+2) {
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.M-FRAME > div {
	width: 100%;
	position: relative;
	z-index: 2;
	height: auto;
	border-radius: clamp(10px, 1.5vw, calc(0.015 * var(--size-max-width)));
	overflow: hidden;
	transform: translate3d(0,0,1px);
}
.M-FRAME > div img { display: block; width: 100%; margin: 0; }

.FRAMELESS .M-FRAME {
	border: none;
	border-radius: 0;
	padding: 0;
	background: transparent;
}
.FRAMELESS .M-FRAME > div { border-radius: 15px; }
.SHARP .M-FRAME > div { border-radius: 0; }


.M-MOCK:not(.static):is(.mixed, .mobile, .desktop) :is(.M-FRAME, .M-SET) { transition: transform 0.6s cubic-bezier(.6,0,.2,1), border-color 0.6s cubic-bezier(.6,0,.2,1), background-color 0.6s cubic-bezier(.6,0,.2,1); }

@container mock (max-width: 25vw)  {
  .M-FRAME { border-radius: 5cqw; padding: 1.5cqw; }
  .M-FRAME > div { border-radius: 3.5cqw; }
}

@container mock (min-width: 25vw)  {
  .M-FRAME { border-radius: 6.5cqw; padding: 1.5cqw; }
  .M-FRAME > div { border-radius: 5cqw; }

}


/* ------------------------------------------------- */
.test-box-s { 	display: block; width: 10vw; }
.test-box-m { 	display: block; width: 20vw; }
.test-box-l { 	display: block; width: 40vw; }

.test-box-s .M-MOCK,
.test-box-m .M-MOCK,
.test-box-l .M-MOCK {
	width: 100%;
	border: 1px solid blue;
	aspect-ratio: 1/1;
}

.M-MOCK.mixed :is(.m1, .m2) {
	width: 40%;
	/* padding: 0.75vw;
	border-radius: 2.25vw; */
	transform: translate3d(-50%,0,0);
}
.M-MOCK.mixed .m2 { transform: translate3d(-105%,-50%,-10cqw); }
.M-MOCK.mixed :is(.d1, .d2) {
	width: 100%;
	transform: translate3d(-50%,-50%,-10vmax);
}
.M-MOCK.mixed .d2 { transform: translate3d(-50%,-50%,-20vmax); }


.M-MOCK.mixed.v-a:is(.static, :hover) .M-SET { transform: translate3d(0,0,5vmax);}
.M-MOCK.mixed.v-a:is(.static, :hover) .m1 { transform: translate3d(-45%,0,-5vmax) rotate3d(0,1,0,-25deg); }
.M-MOCK.mixed.v-a:is(.static, :hover) .m2 { transform: translate3d(-70%,-50%,-7vmax) rotate3d(0,1,0,-15deg); }
.M-MOCK.mixed.v-a:is(.static, :hover) .d1 { transform: translate3d(-50%,-50%,-15vmax); }

.M-MOCK.mixed.v-b:is(.static, :hover) .m1 { transform: translate3d(40%,0,20cqw) rotate3d(0,1,0,-25deg); }
.M-MOCK.mixed.v-b:is(.static, :hover) .m2 { transform: translate3d(25%,-50%,0) rotate3d(0,1,0,0); }
.M-MOCK.mixed.v-b:is(.static, :hover) .d1 { transform: translate3d(-52%,-50%,-90cqw) rotate3d(0,1,0,10deg); }
.M-MOCK.mixed.v-b:is(.static, :hover) .m1:nth-last-child(2) { transform: translate3d(60%,0,5vmax) rotate3d(0,1,0,-25deg); }

.M-MOCK.mixed.v-c:is(.static, :hover) .M-SET{ transform: translate3d(50%,0,10vmax) rotate3d(0,1,0,41deg);}
.M-MOCK.mixed.v-c:is(.static, :hover) .m1 { transform: translate3d(-50%,0,10vmax); }
.M-MOCK.mixed.v-c:is(.static, :hover) .m2 { transform: translate3d(-80%,-50%,-10vmax); }
.M-MOCK.mixed.v-c:is(.static, :hover) .d1 { transform: translate3d(-45%,-50%,-20vmax); }
.M-MOCK.mixed.v-c:is(.static, :hover) .d2 { transform: translate3d(-50%,-50%,-30vmax); }

.M-MOCK.mixed.v-d:is(.static, :hover) .M-SET{ transform: translate3d(10%,0,0) rotate3d(0,1,0,45deg);}
.M-MOCK.mixed.v-d:is(.static, :hover) .m1 { transform: translate3d(25%,0,8vmax); }
.M-MOCK.mixed.v-d:is(.static, :hover) .m2 { transform: translate3d(-25%,-50%,0vmax); }
.M-MOCK.mixed.v-d:is(.static, :hover) .d1 { transform: translate3d(-50%,-50%,-8vmax); }

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

.M-MOCK.mobile :is(.m1, .m2, .m3) {
	width: 44%;
	/* padding: 0.75vw;
	border-radius: 2.25vw; */
}
.M-MOCK.mobile .m2 { transform: translate3d(-50%,-50%,-5vmax); }
.M-MOCK.mobile .m3 { transform: translate3d(-50%,-50%,-10vmax); }

.FOLIO-GRID li:has(.cta:hover) .M-MOCK.mobile .M-SET { transform: translate(8%,0) rotate3d(0,1,0,35deg);}


.M-MOCK.mobile.v-a:is(.static, :hover) .M-SET { transform: translate(6%,0) rotate3d(0,1,0,35deg);}
.M-MOCK.mobile.v-a:is(.static, :hover) .m1 { transform: translate3d(0,0, 5vmax); }
.M-MOCK.mobile.v-a:is(.static, :hover) .m2 { transform: translate3d(-50%,-50%,-5vmax); }
.M-MOCK.mobile.v-a:is(.static, :hover) .m3 { transform: translate3d(-50%,-50%,-15vmax); }

.M-MOCK.mobile.v-b:is(.static, :hover) .M-SET { transform: translate3d(-12%,0,-10vmax) rotate3d(0,1,0,-25deg);}
.M-MOCK.mobile.v-b:is(.static, :hover) .m1 { transform: translate3d(0,0, 5vmax); }
.M-MOCK.mobile.v-b:is(.static, :hover) .m2 { transform: translate3d(-30%,-50%,-5vmax); }
.M-MOCK.mobile.v-b:is(.static, :hover) .m3 { transform: translate3d(-10%,-50%,-15vmax); }

.M-MOCK.mobile.v-c:is(.static, :hover) .M-SET { transform: translate3d(0,0,8vmax) rotate3d(1,0,0,-50deg) ; }
.M-MOCK.mobile.v-c:is(.static, :hover) .m1 { transform: translate3d(0,0, 16vmax); }
.M-MOCK.mobile.v-c:is(.static, :hover) .m2 { transform: translate3d(-50%,-50%,8vmax); }
.M-MOCK.mobile.v-c:is(.static, :hover) .m3 { transform: translate3d(-50%,-50%,0vmax); }

.M-MOCK.mobile.v-d:is(.static, :hover) .m1 { transform: translate3d(0,0, -4vmax); }
.M-MOCK.mobile.v-d:is(.static, :hover) .m2 { transform: translate3d(-115%,-50%,-10vmax) rotate3d(0,1,0,35deg); }
.M-MOCK.mobile.v-d:is(.static, :hover) .m3 { transform: translate3d(15%,-50%,-10vmax) rotate3d(0,1,0,-35deg); }

.M-MOCK.mobile.v-e:is(.static, :hover) .m1 { transform: translate3d(0,0, 3vmax); }
.M-MOCK.mobile.v-e:is(.static, :hover) .m2 { transform: translate3d(-105%,-50%,-10vmax) rotate3d(0,-1,0.3,-15deg); }
.M-MOCK.mobile.v-e:is(.static, :hover) .m3 { transform: translate3d(5%,-50%,-8vmax) rotate3d(0,-1,0.3,15deg) }

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

.M-MOCK.desktop :is(.d1, .d2, .d3) {
	width: 96%;
	/* padding: 0.75vw;
	border-radius: 2.25vw; */
}
.M-MOCK.desktop .d2 { transform: translate3d(-50%,-50%,-5vmax); }
.M-MOCK.desktop .d3 { transform: translate3d(-50%,-50%,-10vmax); }


.M-MOCK.desktop.v-a:is(.static, :hover) .M-SET { transform: translate3d(30%,0,15vmax) rotate3d(0,1,0,45deg);}
.M-MOCK.desktop.v-a:is(.static, :hover) .d1 { transform: translate3d(25%,0, 15vmax); }
.M-MOCK.desktop.v-a:is(.static, :hover) .d2 { transform: translate3d(-40%,-50%,0vmax); }
.M-MOCK.desktop.v-a:is(.static, :hover) .d3 { transform: translate3d(-50%,-50%,-15vmax); }

.M-MOCK.desktop.v-b:is(.static, :hover) .M-SET { transform: translate3d(-20%,0,-25vmax);}
.M-MOCK.desktop.v-b:is(.static, :hover) .d1 { transform: translate3d(-25%,0, 20vmax) rotate3d(0,1,0,-45deg); }
.M-MOCK.desktop.v-b:is(.static, :hover) .d2 { transform: translate3d(-50%,-50%,20vmax) rotate3d(0,1,0,-45deg); }
.M-MOCK.desktop.v-b:is(.static, :hover) .d3 { transform: translate3d(-25%,-50%,20vmax) rotate3d(0,1,0,-45deg); }

.M-MOCK.desktop.v-c:is(.static, :hover) .M-SET { transform: translate3d(0,0,8vmax) rotate3d(1,0,0,-50deg) ; }
.M-MOCK.desktop.v-c:is(.static, :hover) .d1 { transform: translate3d(0,0, 16vmax); }
.M-MOCK.desktop.v-c:is(.static, :hover) .d2 { transform: translate3d(-50%,-50%,8vmax); }
.M-MOCK.desktop.v-c:is(.static, :hover) .d3 { transform: translate3d(-50%,-50%,0vmax); }

.M-MOCK.desktop.v-d:is(.static, :hover) .M-SET { transform: rotate3d(0,1,0,-45deg) translate3d(0,0,-2.5vmax) ; }
.M-MOCK.desktop.v-d:is(.static, :hover) .d1 { transform: translate3d(0,0,0); }
.M-MOCK.desktop.v-d:is(.static, :hover) .d2 { transform: translate3d(-50%,-50%,3vmax); }
.M-MOCK.desktop.v-d:is(.static, :hover) .d3 { transform: translate3d(-50%,-50%,6vmax); }

.M-MOCK.desktop.v-e:is(.static, :hover) .M-SET { transform: rotate3d(1,0,0,-50deg) translate3d(0,0,-2.5vmax); margin-bottom: 25%; }
.M-MOCK.desktop.v-e:is(.static, :hover) .d1 { transform: translate3d(0,0,0); }
.M-MOCK.desktop.v-e:is(.static, :hover) .d2 { transform: translate3d(-50%,-40%,3vmax) ; }
.M-MOCK.desktop.v-e:is(.static, :hover) .d3 { transform: translate3d(-50%,-30%,6vmax) ; }

.M-MOCK.desktop.v-f:is(.static, :hover) .M-SET { transform: rotate3d(1,0,0,35deg) translate3d(0,0,2vmax); margin-bottom: 25%; }
.M-MOCK.desktop.v-f:is(.static, :hover) .d1 { transform: translate3d(0,0,0); }
.M-MOCK.desktop.v-f:is(.static, :hover) .d2 { transform: translate3d(-50%,-40%,-3vmax) ; }
.M-MOCK.desktop.v-f:is(.static, :hover) .d3 { transform: translate3d(-50%,-30%,-6vmax) ; }

/* ------------------------------------------------- */
.M-MOCK.browse {
	margin: calc(var(--space-xl) * -1) 0;
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}
.M-MOCK.browse .M-SET{
	width: 100%;
	transition: all 0.5s cubic-bezier(.6,0,.2,1);
	pointer-events: none;
}
.M-MOCK.browse .M-SET[data-frame="0"] { transform: translate3d(6%,0,0) rotate3d(0,1,0,20deg);}
.M-MOCK.browse .M-SET[data-frame="1"] { transform: translate3d(0,0,10vmax);}
.M-MOCK.browse .M-SET[data-frame="2"] { transform: translate3d(0,0,20vmax);}
.M-MOCK.browse .M-SET[data-frame="3"] { transform: translate3d(0,0,30vmax);}
.M-MOCK.browse .M-SET[data-frame="4"] { transform: translate3d(0,0,40vmax);}
.M-MOCK.browse .M-SET[data-frame="5"] { transform: translate3d(0,0,50vmax);}
.M-MOCK.browse .M-SET[data-frame="6"] { transform: translate3d(0,0,60vmax);}

.M-MOCK.browse .M-SET .M-FRAME {
	width: 56%;
	/* padding: min(1vw, calc(var(--size-max-width)*0.01));
	border-radius: min(4vw, calc(var(--size-max-width)*0.04)); */
	transition: all 0.5s cubic-bezier(.6,0,.2,1), opacity 0.15s 0s;;
}
.M-MOCK.browse .M-SET .M-FRAME:nth-child(n+2){
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	transform: translateZ(-10vmax);
	transform-origin: 50% 50% -10vmax;
}
.M-MOCK.browse .M-SET .M-FRAME:nth-child(3) { transform: translateZ(-20vmax); transform-origin: 50% 50% -20vmax; }
.M-MOCK.browse .M-SET .M-FRAME:nth-child(4) { transform: translateZ(-30vmax); transform-origin: 50% 50% -30vmax; }
.M-MOCK.browse .M-SET .M-FRAME:nth-child(5) { transform: translateZ(-40vmax); transform-origin: 50% 50% -40vmax; }

.M-MOCK.browse .M-SET .M-FRAME.off:first-child { translate: 110% 0;}
.M-MOCK.browse .M-SET .M-FRAME.off             { translate: 60% -50%; rotate: 0 1 0 60deg; opacity: 0; transition: all 0.5s cubic-bezier(.6,0,.2,1), opacity 0.75s 0.35s;}

.M-CONT .M-MOCK.browse a {
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	z-index: 10;
	padding: 20px;
	border-radius: 40px;
}
.M-CONT .M-MOCK.browse a[data-dir="n"] { left: auto; right: 0; }
.M-CONT .M-MOCK.browse a:hover {	background: var(--color-accent); }


#M-NAV {
	display: grid;
	grid-template-columns: 1fr repeat(5, min(20%, var(--size-max-width)*0.2)) 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "l logo nav nav nav cta r";
	justify-content: center;
	align-items: stretch;
	position: fixed;
	z-index: 99;
	inset: 0 0 auto 0;
	height: var(--size-topbar);
}
#M-NAV .BG {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--color-bg-rgba);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background 0.25s;
	isolation: isolate;
}
#M-NAV.top .BG {
	background: rgba(225, 234, 230, 0);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
}
#M-NAV.BLACK .BG {background: var(--color-bg-black-rgba); }


#M-NAV:is(.TRANS, .BLACK.TRANS) .BG { 
	background: var(--color-bg-black-rgba-t10); 
	/* -webkit-mask-image: linear-gradient(180deg, #000000 22.32%, rgba(0, 0, 0, 0.991353) 27.5%, rgba(0, 0, 0, 0.96449) 32.68%, rgba(0, 0, 0, 0.91834) 37.86%, rgba(0, 0, 0, 0.852589) 43.04%, rgba(0, 0, 0, 0.768225) 48.21%, rgba(0, 0, 0, 0.668116) 53.39%, rgba(0, 0, 0, 0.557309) 58.57%, rgba(0, 0, 0, 0.442691) 63.75%, rgba(0, 0, 0, 0.331884) 68.93%, rgba(0, 0, 0, 0.231775) 74.11%, rgba(0, 0, 0, 0.147411) 79.29%, rgba(0, 0, 0, 0.0816599) 84.46%, rgba(0, 0, 0, 0.03551) 89.64%, rgba(0, 0, 0, 0.0086472) 94.82%, rgba(0, 0, 0, 0) 100%); */
	/* mask-image: linear-gradient(180deg, #000000 22.32%, rgba(0, 0, 0, 0.991353) 27.5%, rgba(0, 0, 0, 0.96449) 32.68%, rgba(0, 0, 0, 0.91834) 37.86%, rgba(0, 0, 0, 0.852589) 43.04%, rgba(0, 0, 0, 0.768225) 48.21%, rgba(0, 0, 0, 0.668116) 53.39%, rgba(0, 0, 0, 0.557309) 58.57%, rgba(0, 0, 0, 0.442691) 63.75%, rgba(0, 0, 0, 0.331884) 68.93%, rgba(0, 0, 0, 0.231775) 74.11%, rgba(0, 0, 0, 0.147411) 79.29%, rgba(0, 0, 0, 0.0816599) 84.46%, rgba(0, 0, 0, 0.03551) 89.64%, rgba(0, 0, 0, 0.0086472) 94.82%, rgba(0, 0, 0, 0) 100%); */
	mask-image: linear-gradient(180deg, 
	rgba(0,0,0,1) 15%,
	rgba(0,0,0,0.80) 40%,
	rgba(0,0,0,0.50) 60%,
	rgba(0,0,0,0.18) 80%,
	rgba(0,0,0,0) 100%);
}
#M-NAV:is(.TRANS, .BLACK) .LOGO svg path {stroke: white; }
#M-NAV:is(.TRANS, .BLACK) .NAV { color: white; }
#M-NAV:is(.TRANS, .BLACK) .NAV ul li a.sel::after { background-color: white; }


#M-NAV.LASER .BG {background: var(--color-accent-rgba); }
#M-NAV.LASER .LOGO svg path {stroke: var(--color-txt-on-laser); }
#M-NAV.LASER .LOGO a:hover svg path { stroke: var(--color-txt-on-laser-hover); }


	#M-NAV.LASER .NAV { color: var(--color-txt-on-laser); }
	#M-NAV.LASER .NAV ul li a.sel::after { background-color: var(--color-txt-on-laser); }
	#M-NAV.LASER .NAV ul li a:not(.sel):hover { color: var(--color-txt-on-laser-hover); }
	#M-NAV.LASER .CTA .main_cta { border-color: var(--color-txt-on-laser); background-color: var(--color-accent); }
	#M-NAV.LASER .CTA .main_cta:hover { background-color: var(--color-txt-on-laser); color: #FFF; }
	#M-NAV.LASER::after { border-color: var(--color-txt-on-laser); background-color: var(--color-accent); }



#M-NAV .LOGO {
	grid-area: logo;
	position: relative;
	z-index: 10;
	display: flex;
	padding: 0 var(--space-p-lr);
	align-items: center;
	justify-content: flex-start;
}
#M-NAV .LOGO a {
	display: flex;
	align-items: center;
}
#M-NAV .LOGO svg { height: 22px; margin: 0; display: block; }
#M-NAV .LOGO svg path{
	fill: none;
	stroke-width: 8px;
	stroke-linecap: square;
	stroke: var(--color-txt);
	transition: all 0.25s;
}
#M-NAV .LOGO a:hover svg path {
	stroke: var(--color-txt-hover);
	transition: all 0s;
}
/* #M-NAV .LOGO a:hover svg path:nth-child(1){
	d: path("M65 4H107C110.314 4 113 6.68629 113 10V10C113 13.3137 110.314 16 107 16H65V4Z");
}
#M-NAV .LOGO a:hover svg path:nth-child(2){
	d: path("M31 16V4H33L53 16H55V4");
} */
#M-NAV .NAV {
	grid-area: nav;
	position: relative;
	z-index: 6;
	display: flex;
	align-items: stretch;
	padding: 0;
}
#M-NAV .NAV .IN {
	display: flex;
	align-items: center;
}
#M-NAV .NAV ul {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0 var(--space-p-lr);
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
}
#M-NAV .NAV ul::-webkit-scrollbar { display: none; }
#M-NAV .NAV ul li {
	display: flex;
	align-items: center;
	position: relative;
}
#M-NAV .NAV ul li.mob { display: none; }
#M-NAV .NAV ul li a {
	position: relative;
	display: block;
	padding: 4px 0;
	white-space: nowrap;
	margin-right: 20px;
	transition: all 0.25s;
}
#M-NAV .NAV ul li a::after {
	content: '';
	display: block;
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background-color: var(--color-txt);
	scale: 0 1;
	transition: scale 0.5s cubic-bezier(.7,0,.4,2);
}
#M-NAV .NAV ul li a:not(.sel):hover {
	color: var(--color-txt-hover);
	transition: all 0s;
}
#M-NAV .NAV ul li a.sel::after { scale: 1 1; }
#M-NAV .CTA {
	grid-area: cta;
	position: relative;
	z-index: 5;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}
#M-NAV .CTA .main_cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--color-bg-white);
	color: var(--color-txt-on-white);
	border-left: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	transition: all 0.25s;
}
#M-NAV .CTA .main_cta:hover{ background: var(--color-accent); }
#M-NAV .MOBILE { display: none; }


.M {
	display: flow-root;
	width: 100%;
	position: relative;
}
.M.DEF {
	display: grid;
	grid-template-columns: repeat(5, min(20%, var(--size-max-width)*0.2));
	grid-template-rows: repeat(3, auto);
	justify-content: center;
	align-content: stretch;
}
.M.DEF.STRETCH-R {
	grid-template-columns: 1fr repeat(5, min(20%, var(--size-max-width)*0.2)) 1fr;
	grid-template-areas: "l title cont cont cont cont cont";
}


.M-W {
	display: flow-root;
	position: relative;
	width: 100%;
	max-width: var(--size-max-width);
	margin-left: auto;
	margin-right: auto;
}

.IMG-SPACER:not([data-bg]) + .M:not(.NL):not([data-bg]),
.IMG-SPACER[data-bg~="BLACK"] + .M[data-bg~="BLACK"]:not(.NL),
.IMG-SPACER[data-bg~="LASER"] + .M[data-bg~="LASER"]:not(.NL),
.M + .M:not(.NL):not([data-bg]) { border-top: 1px solid var(--color-line); }

.M[data-bg~="BLACK"]:not([data-toponly]) { background: var(--color-bg-black); color: var(--color-txt-on-dark); }
.M[data-bg~="LASER"]:not([data-toponly]) { background: var(--color-accent); color: var(--color-txt-on-laser); }

/* --------------------- M-TITLE - */
.M-TITLE {
	width: 100%;
	padding: var(--space-xl) var(--space-p-lr);
	grid-column: 1 / span 1;
	grid-row: 1 / -1;
}
.STRETCH-R .M-TITLE { grid-area: title;}

.M-TITLE.XXL { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
.M-TITLE:not(.nonstick) :is(h3, p) {
	position: sticky;
	top: var(--space-xxl);
	/* top: 10vw; */
}
.M-TITLE.NO-P-T { padding-top: 0; }
.M-TITLE.NO-P-B { padding-bottom: 0; }
.M-TITLE ~ .M-TITLE {
	grid-row: auto / span 1;
	padding-top: 0;
}

/* --------------------- M-CONT - */
.M-CONT {
	display: flow-root;
	grid-column: 1 / 6;
	grid-row: auto / span 1;
}
.STRETCH-R .M-CONT { grid-area: cont;}
.M-CONT.COLS {
	grid-column: auto / span 4;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap: var(--space-xl);
	padding: var(--space-xl) 0;
}
.M-CONT.COLS.DOC { row-gap: var(--space-m); padding: var(--space-m) 0;}
.M.HEADER:has(.SCROLL-NAV) + .M.DEF .M-CONT.COLS.DOC { padding-top: var(--space-xl);}
.M-TITLE ~ .M-CONT { grid-column: 2 / 6; }
.STRETCH-R .M-TITLE ~ .M-CONT { grid-area: cont; }
.M-CONT.PRETITLE {
	grid-column: 2 / 6;
	grid-row: span 1 / 1;
	padding-top: var(--space-xl);
}

.M.NP-T .M-CONT.COLS { padding-top: 0;}
.M.NP-T .M-TITLE { padding-top: 0;}
.M.NP-B .M-CONT.COLS { padding-bottom: 0;}
.M.NP-B .M-TITLE { padding-bottom: 0;}


.M-CONT .columns {
	display: flow-root;
	margin: var(--space-l) 0;
	columns: 440px;
	column-fill: auto;
	column-gap: calc(var(--space-p-lr) * 2);
}
.M-CONT .wide .columns {max-width: 75%;}
.M-CONT .COL:only-child .columns {max-width: 75%;}
.M-CONT p {
	font-size: 20px;
	font-size: var(--font-read-p);
	line-height: 160%;
	margin-bottom: 1em; 
	margin-top: 1em;
	max-width: 48em;
}
.M-CONT p:only-child { margin: 0; }
.M-CONT.DOC p {
	columns: auto;
	max-width: none;
}
.M-CONT p.small {
	font-size: inherit ;
	columns: 240px;
	column-gap: calc(var(--space-p-lr) * 1);
}
.M-CONT.DOC p.small {
	font-size: inherit ;
	columns: 360px;
	column-gap: calc(var(--space-p-lr) * 2);
}

/* .M-CONT h2 + p  { margin-top: var(--space-l); }
.M-CONT h3 + p  { margin-top: var(--space-s); }
.M-CONT p  + p  { margin-top: var(--space-s); }
.M-CONT p  + h2 { margin-top: var(--space-l); }
.M-CONT p  + h3 { margin-top: var(--space-m); } */

.M-CONT.COLS h2 { margin-bottom: var(--space-l); margin-top: var(--space-l); text-wrap: balance; }
.M-CONT.COLS h3 { margin-bottom: var(--space-s); margin-top: var(--space-m); }
.M-CONT.COLS :is(h2, h3, p, ul, .columns):first-child {margin-top: 0;}
.M-CONT.COLS :is(h2, h3, p, ul, .columns):last-child  {margin-bottom: 0;}

.M-CONT blockquote {
	display: flow-root;
	margin: 0;
}
.M-CONT blockquote.sticky {
	position: sticky;
	bottom: var(--space-xl);
}
.M-CONT blockquote .author {
	display: block;
	margin-top: 24px;
}
.M-CONT blockquote:has(.author) h2 { margin-bottom: var(--space-s);}

.M-CONT ul.text {
	display: flow-root;
	margin: var(--space-s) 0 0 0;
	padding: 0;
	list-style: none;
	font-size: 24px;
	line-height: 160%;
}
.M-CONT ul.text li {
	display: flow-root;
	margin-left: 2em;
	position: relative;
}
.M-CONT ul.text li + li { margin-top: 0.5em;}
.M-CONT ul.text li::before {
	content: '';
	display: block;
	position: absolute;
	left: -2em;
	top: 0.8em;
	width: 1.2em;
	height: 3px;
	border-radius: 0.5em;
	background: transparent;
	border: 1px solid var(--color-txt);
	transition: all 0.5s cubic-bezier(.48,-0.88,.27,1);
	translate: 0 -50%;
}

	[data-bg~="BLACK"] .M-CONT ul.text li::before { border-color: var(--color-txt-on-dark);}
	[data-bg~="LASER"] .M-CONT ul.text li::before { border-color: var(--color-txt-on-laser);}
	.M-CONT ul.text li:hover::before {
		width: 0.5em;
		height: 0.5em;
		transition: all 0.4s cubic-bezier(.21,1.44,.76,1.56);
	}

.M-CONT ul.timeline {
	display: grid;
	grid-template-columns: [year] auto [quarter] auto [text] 1fr;
	grid-template-rows: auto;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.M-CONT ul.timeline li {
	display: contents;
}
.M-CONT ul.timeline li > div {
	display: grid;
	border-top: 1px solid var(--color-line);
	padding: 16px var(--space-p-lr) 16px 0;
	align-items: center;
}
/* .M-CONT ul.timeline li + li:not(.skip) > div { margin-top: var(--space-s);} */
.M-CONT ul.timeline li .y { grid-column: year; line-height: 100%;  }
.M-CONT ul.timeline li .q { grid-column: quarter; }
.M-CONT ul.timeline li .t { grid-column: text; padding: 4em 0; }

.M-CONT ul.timeline li .q > span:not(:empty) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	min-width: 3.4em;
	height: 3.4em;

	background-color: var(--color-accent);
	border-radius: 50px;
}
.M-CONT ul.timeline li.skip .y { border-top: none;}
.M-CONT ul.timeline li.skip :is(.q, .t) { border-top-style: dashed;}



.M-CONT .TIMECARD  {
	display: grid;
	width: 100%;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	/* column-gap: calc(var(--space-p-lr) * 1);
	grid-auto-columns: min((25% - var(--space-p-lr)*0.75), var(--size-max-width) * 0.2 - var(--space-p-lr)); */
	grid-template-rows: 1fr;
	grid-auto-columns: min(12.5% , var(--size-max-width) * 0.1);
	padding: 16px 0 44px 0;
	margin: 0;
	list-style-type: none;
}
/* .M-CONT .TIMECARD::-webkit-scrollbar { display: none; } */

.M-CONT .TIMECARD::-webkit-scrollbar {
  width: 30px;
	height: 30px;
}
.M-CONT .TIMECARD::-webkit-scrollbar-track {
}
.M-CONT .TIMECARD::-webkit-scrollbar-thumb {
  background: transparent;
	border-bottom: 1px solid var(--color-txt);
}
.M-CONT .TIMECARD:hover::-webkit-scrollbar-thumb {
	border-bottom: 1px solid var(--color-accent);
}

.M-CONT .TIMECARD > li.card {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: min-content;
	grid-row: 1;
	grid-column: auto / span 2;
	row-gap: var(--space-l);
	position: sticky;
	left: 40px;
	background-color: rgba(255,255,255,1);
	backdrop-filter: blur(24px);
	border-radius: 0 0 10vw 0;
	box-shadow: 0px 16px 44px -12px color(display-p3 0 0 0 / 0.15);
	padding: 5vw var(--space-p-lr) 10vw;
	transition: all 0.3s ease-in-out;
	transform-origin: 0% 50%;
}
.M-CONT .TIMECARD > li.gap {
	display: block;
	grid-row: 1;
	background: transparent;
	box-shadow: none;
	z-index: -1;
}
.M-CONT .TIMECARD > li.collapsed {
	transform: scale(0.8) ;
	background-color: rgba(255,255,255,0.2);
	box-shadow: 0px 8px 12px -4px color(display-p3 0 0 0 / 0.05);
}
.M-CONT .TIMECARD > li.collapsed + li:not(.collapsed) { 
	background-color: var(--color-accent-rgba-b);
}





.M-CONT ul.RESULTS {
	display: flex;
	column-gap: calc(var(--space-p-lr) * 2);
	row-gap: var(--space-xl);
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	list-style-type: none;

	--ch-radius: 50px;
}
.M-CONT ul.RESULTS > li {
	display: block;
	width: calc((100% - 6 * var(--space-p-lr))/4);
}
.M-CONT .COL:not(.wide):not(:only-child) ul.RESULTS > li {
	width: calc((100% - 2 * var(--space-p-lr))/2);
}
.M-CONT ul.RESULTS ul.CHART {
	display: block;
	width: 100%;
	aspect-ratio: 3/2;
	padding: 0;
	margin: 0 0 var(--space-xs);
	list-style-type: none;
	position: relative;
}

.M-CONT ul.RESULTS > li .TITLE { margin: 0 0 var(--space-xs); }
.M-CONT ul.RESULTS > li .NUMBER + .TITLE { margin: 0 0 var(--space-s); color: var(--color-txt-grey); }


.M-CONT ul.RESULTS > li:nth-child(4):not(:last-child, :nth-last-child(4)) { margin-left: calc((100% - 6 * var(--space-p-lr)) / 4 + var(--space-p-lr) * 2);}

.M-CONT ul.RESULTS ul.CHART > li {
	display: block;
	background: var(--color-accent);
	position: relative;
	border-radius: var(--ch-radius);
	box-shadow: 8px 0px 8px 0px rgba(0, 0, 0, 0.16);
	transition: all 0.2s ease-in-out;
}
.M-CONT ul.RESULTS ul.CHART > li.empty { background-color: var(--color-bg-semi); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08) inset !important;}
.M-CONT ul.RESULTS ul.CHART > li.hidden { background-color: transparent}

.M-CONT ul.RESULTS ul.CHART.s-l > li { transition: all 2s cubic-bezier(0.6, 0, 0.2, 1); }
.M-CONT ul.RESULTS ul.CHART.s-l > li:nth-child(1) { transition-delay: 0.1s; }
.M-CONT ul.RESULTS ul.CHART.s-l > li:nth-child(2) { transition-delay: 0.2s; }
.M-CONT ul.RESULTS ul.CHART.s-l > li:nth-child(3) { transition-delay: 0.3s; }
.M-CONT ul.RESULTS ul.CHART.s-l > li:nth-child(4) { transition-delay: 0.4s; }
.M-CONT ul.RESULTS ul.CHART.s-l > li:nth-child(5) { transition-delay: 0.5s; }
.M-CONT ul.RESULTS ul.CHART.s-l > li:nth-child(6) { transition-delay: 0.6s; }



.M-CONT ul.RESULTS ul.CHART.STEPS {
	display: grid;
	align-items: center;
	grid-auto-columns: 1fr;
	grid-template-rows: 100%;
}
.M-CONT ul.RESULTS ul.CHART.STEPS > li { height: 100%; grid-row: 1;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(1)  { grid-column: 1/2;  z-index: 20;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(2)  { grid-column: 1/3;  z-index: 19;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(3)  { grid-column: 1/4;  z-index: 18;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(4)  { grid-column: 1/5;  z-index: 17;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(5)  { grid-column: 1/6;  z-index: 16;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(6)  { grid-column: 1/7;  z-index: 15;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(7)  { grid-column: 1/8;  z-index: 14;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(8)  { grid-column: 1/9;  z-index: 13;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(9)  { grid-column: 1/10; z-index: 12;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(10) { grid-column: 1/11; z-index: 11;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-child(11) { grid-column: 1/12; z-index: 10;}
.M-CONT ul.RESULTS ul.CHART.STEPS > li:last-child { box-shadow: none;}

.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(1)  { height: 100%; }
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(2)  { height: 95%; }
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(3)  { height: 90%; }
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(4)  { height: 85%; }
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(5)  { height: 80%; }
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(6)  { height: 75%; }
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(7)  { height: 70%; }
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(8)  { height: 65%; }
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(9)  { height: 60%; }
.M-CONT ul.RESULTS ul.CHART.STEPS > li:nth-last-child(10)  { height: 55%; }

.M-CONT ul.RESULTS ul.CHART.STEPS > li:hover { height: 100%;}

.M-CONT ul.RESULTS ul.CHART.COUNT {
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
}
.M-CONT ul.RESULTS ul.CHART.COUNT > li {
	display: block;
	border-radius: 20vw;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 10%;
	width: 30%;
	min-height: 10px;
	box-shadow: 2px 0px 8px -4px color(display-p3 0 0 0 / 0.25) inset;
}
.M-CONT ul.RESULTS ul.CHART.COUNT.C2 > li { width: 50%; }
.M-CONT ul.RESULTS ul.CHART.COUNT.C3 > li { width: 33%; }
.M-CONT ul.RESULTS ul.CHART.COUNT.C4 > li { width: 25%; }
.M-CONT ul.RESULTS ul.CHART.COUNT.C5 > li { width: 20%; }
.M-CONT ul.RESULTS ul.CHART.COUNT.C6 > li { width: 15%; }
.M-CONT ul.RESULTS ul.CHART.COUNT.C7 > li { width: 13%; }
.M-CONT ul.RESULTS ul.CHART.COUNT.C8 > li { width: 11%; }

.M-CONT ul.RESULTS ul.CHART.COUNT.s-l > li { scale: 0 0; transform-origin: top center;}
.M-CONT ul.RESULTS ul.CHART.COUNT.s-l.s-on > li { scale: 1 1;}


.M-CONT ul.RESULTS ul.CHART.PROGRESS {
	background-color: var(--color-bg-semi);
	border-radius: var(--ch-radius);
	box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.08) inset;
	overflow: hidden;
}
.M-CONT ul.RESULTS ul.CHART.PROGRESS > li {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	height: 100%;
	max-width: 100%;
	/* box-shadow: -5px 0px 10px -4px color(display-p3 0.3588 1 0.8027 / 0.80) inset, 8px 2px 8px -6px color(display-p3 0 0.708 0.4012 / 0.66); */
	/* box-shadow: -5px 0px 10px -4px color(display-p3 0.3588 1 0.8027 / 0.80) inset, 4px 0px 8px -2px color(display-p3 0 0.708 0.4012 / 0.30), 12px 2px 28px -6px color(display-p3 0 0.708 0.4012 / 0.50); */
}
.M-CONT ul.RESULTS ul.CHART.PROGRESS.s-l > li { translate: calc(-100% - 16px) 0; opacity: 1; transform-origin: 0 0;}
.M-CONT ul.RESULTS ul.CHART.PROGRESS.s-l.s-on > li { translate: 0 0; }

.M-CONT ul.RESULTS ul.CHART.BARS {
	display: flex;
	justify-content: stretch;
	align-items: flex-end;
}
.M-CONT ul.RESULTS ul.CHART.BARS li {
	display: block;
	flex-grow: 1;
	/* box-shadow: -5px 0px 10px -4px color(display-p3 0.3588 1 0.8027 / 0.80) inset; */
}
.M-CONT ul.RESULTS ul.CHART.BARS.s-l > li { 
	animation: bars-grow 2s; 
	animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
	animation-fill-mode: both;
	animation-play-state: paused;
	translate: 0 0; 
	opacity: 1; 
	transform-origin: 0 0; 
}
.M-CONT ul.RESULTS ul.CHART.BARS.s-l.s-on > li { animation-play-state: running; }
.M-CONT ul.RESULTS ul.CHART.BARS.s-l.s-on > li:nth-child(1) { animation-delay: 0s; }
.M-CONT ul.RESULTS ul.CHART.BARS.s-l.s-on > li:nth-child(2) { animation-delay: 0.2s; }
.M-CONT ul.RESULTS ul.CHART.BARS.s-l.s-on > li:nth-child(3) { animation-delay: 0.4s; }
.M-CONT ul.RESULTS ul.CHART.BARS.s-l.s-on > li:nth-child(4) { animation-delay: 0.6s; }

@keyframes bars-grow {
  0% {height: 0;}
}

.M-CONT ul.RESULTS ul.CHART.PIECE {
	background-color: var(--color-accent);
	border-radius: calc(var(--ch-radius) + 2px) var(--ch-radius) var(--ch-radius) calc(var(--ch-radius) + 2px);
}
.M-CONT ul.RESULTS ul.CHART.PIECE > li{
	background-color: var(--color-bg-semi-s);
	height: 100%;
	position: absolute;
	inset: 0 auto 0 0;

	/* box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.08) inset; */
}
.M-CONT ul.RESULTS ul.CHART.PIECE.s-l > li { 
	animation: piece-uncover 2s; 
	animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
	animation-fill-mode: both;
	animation-play-state: paused;
	translate: 0 0; 
	opacity: 1; 
	transform-origin: 0 0; 
}
.M-CONT ul.RESULTS ul.CHART.PIECE.s-l.s-on > li { animation-play-state: running; }
.M-CONT ul.RESULTS ul.CHART.PIECE.s-l.s-on > li:nth-child(1) { animation-delay: 0s; }
.M-CONT ul.RESULTS ul.CHART.PIECE.s-l.s-on > li:nth-child(2) { animation-delay: 0.2s; }
.M-CONT ul.RESULTS ul.CHART.PIECE.s-l.s-on > li:nth-child(3) { animation-delay: 0.4s; }
.M-CONT ul.RESULTS ul.CHART.PIECE.s-l.s-on > li:nth-child(4) { animation-delay: 0.6s; }

@keyframes piece-uncover {
  0% {width: 100%;}
}





.M-CONT ul.grid {
	display: grid;
	margin: var(--space-l) 0;
	padding: 0;
	list-style: none;
	font-size: 20px;
	font-size: var(--font-read-p);
	line-height: 160%;
	/* grid-template-columns: repeat( auto-fit, minmax(min(20vw, var(--size-max-width)/5), 1fr) ); */
	grid-template-columns: 
	repeat( auto-fit, minmax(
		min(
			(20vw - var(--space-p-lr)*2), 
			(var(--size-max-width)/5 - var(--space-p-lr)*2)
		),
	  1fr) 
	);
	grid-auto-rows: 1fr;
	row-gap: var(--space-l);
	column-gap: calc(var(--space-p-lr) * 2);
}
.M-CONT ul.grid:not(.bullets) li {
	display: flow-root;
	position: relative;
	padding: var(--space-xs) 0 0;
	/* border-right: var(--size-line-width) solid var(--color-line); */
	border-top: 1px solid var(--color-line);
}
.M-CONT ul.grid.bullets li {
	display: flow-root;
	position: relative;
	padding: 48px 0 0;
}
.M-CONT ul.grid.bullets li::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0 auto auto 0;
	width: 32px;
	height: 32px;
	background-color: var(--color-accent);
	border-radius: 24px;
}

[data-bg~="BLACK"] .M-CONT ul.grid li::before { background-color: var(--color-accent);}


.M-CONT ul.grid li .big {
	display: flow-root;
	margin: 0 0 1.2em 0;
	padding: 0.4em 0 0 0;
	font-family: "Aeonik";
	font-weight: 500;
	line-height: 3vmax;
}
.M-CONT ul.grid li .big em {
	font-style: normal;
	font-size: 5vmax;
	line-height: 10px;
}
.M-CONT ul.grid li .big.m {font-size: 1.8vmax;}
.M-CONT ul.grid li .big.l {font-size: 3vmax;}


.M-CONT ul.list {
	display: block;
	margin: var(--space-s) 0;
	padding: 0;
	list-style: none;
	font-size: var(--font-read-p);
	line-height: 160%;
}
.M-CONT ul.list li {
	display: block;
	margin: 0;
	padding: 0 0 0 24px;
	position: relative;
}
.M-CONT ul.list li + li { margin-top: 1em;}
.M-CONT ul.list li::before {
	content: '';
	position: absolute;
	inset: 0.6em auto auto 0;
	width: 0.5em;
	height: 0.5em;
	background: var(--color-accent);
	border-radius: 50%;
}


.M-CONT .CTA {
	display: flex;
	align-items: stretch;
	margin-top: var(--space-xl);
}
.M-CONT .FIGS {
	display: flex;
	align-items: flex-end;
	align-content: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	row-gap: var(--space-s);
	width: 50%;
	flex-grow: 1;
	flex-shrink: 0;
	position: relative;
	/* box-shadow: 0px 0px 5px 0px color(display-p3 0 0.7058 0.1764 / 0.87) inset; */
	border-radius: 10px;

}
.M-CONT .FIGS-STICKY {
	display: flow-root;
	width: 50%;
	flex-grow: 1;
	flex-shrink: 0;
	position: relative;
}
.M-CONT .FIGS-STICKY > .FIGS { position: sticky; top: var(--space-xl);}

.M-CONT .FIGS:only-child,
.M-CONT .FIGS.wide { width: 100%; align-items: flex-end; justify-content: flex-start;}
.M-CONT .FIGS.top { align-items: flex-start;}
.M-CONT .FIGS figure {
	display: flow-root;
	flex-basis: min(20vw, var(--size-max-width)*0.2);
	flex-grow: 1;
	flex-shrink: 1;
	margin: 0;
	padding: 0 var(--space-p-lr);
}
.M-CONT .COL .FIGS figure { 	padding: 0; }
.M-CONT .FIGS figure.W1 { flex-basis: min(19.9vw, var(--size-max-width)*0.2); flex-grow: 0; }
.M-CONT .FIGS figure.W15{ flex-basis: min(27vw, var(--size-max-width)*0.27); flex-grow: 0; }
.M-CONT .FIGS figure.W2 { flex-basis: min(39.9vw, var(--size-max-width)*0.4); flex-grow: 0; }
.M-CONT .FIGS figure.W3 { flex-basis: min(59.9vw, var(--size-max-width)*0.6); flex-grow: 0; }
.M-CONT .FIGS figure.W4 { flex-basis: 100%; flex-grow: 0; }


.M-CONT .FIGS.stretch { justify-content: space-around;}

.M-CONT .FIGS figcaption {
	display: flow-root;
	font-style: italic;
	flex-basis: 100%;
	flex-grow: 1;
	flex-shrink: 0;
	padding: 0 var(--space-p-lr);
}


/*
.M-CONT > figure { margin: 0; padding: 0 var(--space-p-lr); }
.M-CONT > figure.W1 { width: 25% ;}
.M-CONT > figure.W2 { width: 50% ;}
.M-CONT > figure.W3 { width: 75% ;}
.M-CONT > figure.W4 { width: 100% ;}

.M-CONT .COL figure { display: flow-root; margin: 0;}
.M-CONT .COL figure:first-child { margin-top: 0;}
.M-CONT figure figcaption {
	font-style: italic;
	display: flow-root;
	padding: 0;
	margin: 24px 0 0 0;
	max-width: min(80%, 480px);
}

.M-CONT .COL.FIG {
	padding: 0;
	flex-direction: row;
	align-items: flex-end;
}
.M-CONT .COL.FIG figure {
	display: flow-root;
	padding: 0 var(--space-p-lr);
	flex-basis: 25%;
	flex-grow: 1;
	flex-shrink: 1;
}
.M-CONT .COL.FIG figure.W20 { flex-grow: 0;}
.M-CONT .COL.FIG figure.W40 { flex-grow: 0; flex-basis: 50%;} */

.M-CONT .ROW {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: red;
}
.M-CONT .COL {
	display: flow-root;
	width: 50%;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
}
.M-CONT .COL.CHAPTER { width: 25%; }
.M-CONT .COL.CHAPTER :is(h3, .h3, p) { position: sticky; top: var(--space-xl);}
.M-CONT .COL.CHAPTER ~ .COL:not(.CHAPTER) { width: 75%;}


.M-CONT .COL:not(.M-MOCK, .FIG) {
	padding: 0 var(--space-p-lr);
}
.M-CONT + .M-CONT .COL { padding-top: 0;}

.M-CONT .COL.wide { width: 100%; }
.M-CONT .COL.wide h2 { width: 66%; }
.M-CONT .COL.wide h2:only-child { width: 75%; }

.M-CONT .COL.third { width: 33.333%; }

.M-CONT .COL:only-child { width: 100%; }
.M-CONT .COL:only-child h2 { width: 66%; }
.M-CONT .COL:only-child h2:only-child { width: 75%; }

.M-CONT .COL .STICKY {
	display: flow-root;
	position: sticky;
	top: var(--space-xl);
}
.M-CONT .COL.FIG .STICKY { display: flex;}
.M-CONT .COL .STICK-BOX {
	display: flow-root;
	position: sticky;
	top: var(--space-xl);
}
.M-CONT .COL.V-BTM {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}


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



.M.HEADER hgroup {
	display: block;
	width: 60%;
	margin-left: 20%;
	padding-top: var(--space-xxl);
	padding-bottom: var(--space-m);
}
.M.HEADER hgroup:last-child { padding-bottom: var(--space-l); }
.M.HEADER hgroup:last-child h2:last-child { margin-bottom: var(--space-s); }
.M.HEADER hgroup h1 { margin-bottom: var(--space-l); }
.M.HEADER hgroup nav { display: flex; padding: 0; margin: 0; flex-wrap: wrap; }
.M.HEADER hgroup nav > a {color: var(--color-txt-off); }
.M.HEADER hgroup nav > a:hover {	color: var(--color-txt-hover); }
.M.HEADER hgroup nav > a .arrow {
	display: inline-block;
	position: relative;
	height: 0.6em;
	margin: 0 0.25em;
}
.M.HEADER hgroup nav > a .arrow > span {
	display: block;
	position: relative;
	margin-top: 0.3em;
	width: 1em;
	height: 1px;
	border-radius: 1px;
	background: var(--color-txt-off);
	transition: background-color 0.6s cubic-bezier(.6,.0,.2,1);
}
.M.HEADER hgroup nav > a .arrow > span::after,
.M.HEADER hgroup nav > a .arrow > span::before {
	content: '';
	display: block;
	width: 0.4em;
	height: 1px;
	border-radius: 1px;
	background: inherit;
	position: absolute;
	right: 0;
	transform-origin: calc(100% - 0.5px) 50%;
	transition: transform 0.6s cubic-bezier(.6,.0,.2,1);
}
.M.HEADER hgroup nav > a .arrow > span::after  { transform:  translate(0,0) rotate(45deg); }
.M.HEADER hgroup nav > a .arrow > span::before { transform:  translate(0,0) rotate(-45deg); }
.M.HEADER hgroup nav > a:hover .arrow > span { background-color: var(--color-txt-hover);}
.M.HEADER hgroup nav > a:hover .arrow > span::after  { transform: translate(calc(-1em + 1px),0) rotate(135deg); }
.M.HEADER hgroup nav > a:hover .arrow > span::before { transform: translate(calc(-1em + 1px),0) rotate(-135deg); }

.M.HEADER hgroup .ctas {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-top: var(--space-s);
}
.M.HEADER hgroup:last-child .ctas { margin-top: var(--space-m);}
.M.HEADER hgroup .ctas a {
	display: block;
	padding: clamp(40px, 4vw, 64px);
	border-radius: 90px;
	background: var(--color-bg-black);
	color: var(--color-txt-on-dark);
	transition: all 0.25s;
}
.M.HEADER hgroup .ctas a:nth-child(n+2) {
	background-color: var(--color-bg-white);
	color: var(--color-txt-on-white);
}
.M.HEADER hgroup .ctas a:hover {
	background-color: var(--color-accent);
	color: var(--color-txt-on-laser);
	padding-left: clamp(48px, 5vw, 72px);
	padding-right: clamp(48px, 5vw, 72px);
	border-radius: 0;
}


.M.HEADER .SCROLL-NAV {
	display: flow-root;
	width: 100%;
	padding-top: var(--space-s);
	padding-bottom: var(--space-s);
}
.M.HEADER .SCROLL-NAV > ul {
	display: flex;
	padding: 0;
	margin: 0;
}
.M.HEADER .SCROLL-NAV > ul li {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
}
.M.HEADER .SCROLL-NAV > ul li:nth-child(n+2) { margin-left: var(--space-s); }
.M.HEADER .SCROLL-NAV > ul li a { display: block; }
.M.HEADER .SCROLL-NAV > ul li a:hover { color: var(--color-txt-hover); }



.M-SUBNAV-WRAPPER {
	display: flow-root;
	position: sticky;
	z-index: 10;
	top: var(--size-topbar);
	margin: -0.5em 0 0 0;

	background: var(--color-bg-rgba-b);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.M-SUBNAV {
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
	z-index: 10;
	height: var(--size-topbar);
	overflow-x: auto;
	overflow-y: hidden;

	-webkit-mask-image:  linear-gradient(90deg, rgba(0,0,0,0) 0px, rgba(0,0,0,1) var(--space-p-lr), rgba(0,0,0,1) calc(100% - 10vw), rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0px, rgba(0,0,0,1) var(--space-p-lr), rgba(0,0,0,1) calc(100% - 10vw), rgba(0,0,0,0) 100%);
}
.M-SUBNAV::-webkit-scrollbar { display: none; }


.M-SUBNAV li {
	display: block;
	list-style: none;
}
.M-SUBNAV li:nth-child(n+2) { margin-left: 24px; }
.M-SUBNAV li:last-child { padding-right: 40px; }
.M-SUBNAV li a {
	display: block;
	position: relative;
	padding: 8px 0;
	white-space: nowrap;
	transition: color 0.25s, border 0.35s;
}
.M-SUBNAV li a::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-txt);
	scale: 0 1;
	transition: scale 0.5s cubic-bezier(.7,0,.4,2);
}
.M-SUBNAV a.sel::after { scale: 1 1;}
.M-SUBNAV a:not(.sel):hover { transition: color 0s; color: var(--color-txt-hover); }






.HOME_HEADER .IN-A{
	display: block;
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	z-index: 5;
}

.HOME_HEADER .CLAIM {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 50%;
	margin: var(--size-topbar) 30% 0 20%;
	position: sticky;
	left: 0;
	top: var(--size-topbar);
	min-height: calc(60svh - var(--size-topbar)*2);
	padding: var(--space-m) 0;
	z-index: 1;
	opacity: 1;
}

.HOME_HEADER .IMAGE {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
	z-index: 2;
	margin: 0 auto;
	height: 56%;
	width: 100%;
	scale: 0.96 1;
	border-radius: 8vw;
	overflow: hidden;
	will-change: width, height;
	transform-origin: center top;
}

.HOME_HEADER .IMAGE .IMG {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
}
.HOME_HEADER .IMAGE .IMG > div {
	display: block;
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	/* background-size: cover;
	background-position: center; */
	overflow: hidden;
}
.HOME_HEADER .IMAGE .IMG > div img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* .HOME_HEADER .IMAGE .IMG > div::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 3;
	inset: 0;
	background: var(--color-bg-black);
	opacity: 0.2;
	pointer-events: none;
} */
.HOME_HEADER .IMAGE .IMG video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.HOME_HEADER .IMAGE .SUBTITLE {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--size-max-width);
	height: 50%;
	position: relative;
	z-index: 4;
	translate: 0 0;
	opacity: 0;
	color: var(--color-txt-on-dark);
}
.HOME_HEADER .IMAGE .SUBTITLE h2 {
	max-width: min(60svw, var(--size-max-width) * 0.6);
	margin: 0 auto;
}

.HOME_HEADER .INFO {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
	position: relative;
	z-index: 5;
	transform: none;
	opacity: 1;
	height: var(--size-topbar);
	flex-wrap: wrap;
	will-change: transform, opacity;
}
.HOME_HEADER .INFO .L {
	display: flex;
	width: 20%;
	flex-grow: 0;
	position: relative;
	flex-shrink: 0;
}
.HOME_HEADER .INFO .M {
	display: flex;
	align-items: center;
	width: 60%;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
}
.HOME_HEADER .INFO .M .text {
	flex-shrink: 10;
	flex-grow: 0;
	width: fit-content;
}


.HOME_HEADER.trans .IMAGE { transition: all 1s cubic-bezier(.4,0,.2,1);}
.HOME_HEADER.trans .CLAIM { transition: all 0.75s cubic-bezier(.2,0.1,.2,1) 0.25s;}
.HOME_HEADER.trans .INFO  { transition: all 0.75s cubic-bezier(.2,0.1,.2,1) 0.5s;}

.HOME_HEADER.start .CLAIM { scale: 0.9 1.2; translate: 0 20%; opacity: 0; }
.HOME_HEADER.start .IMAGE {
	border-radius: 20vw;
	transform-origin: center center;
	translate: 0 50%;
}
.HOME_HEADER.start .INFO { opacity: 0; translate: 0 -100%; }


.HOME_SERVICES {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.HOME_SERVICES li {
	display: flow-root;
	width: 25%;
}
.HOME_SERVICES li a {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"image"
		"title"
		"desc";
	transition: all 0.25s;
}

.HOME_SERVICES li a > .image {
	display: flow-root;
	grid-area: image;
	place-self: start start;
	margin-bottom: calc(var(--space-s) + 1.4em);
	margin-bottom: 16px;
}
.HOME_SERVICES li a > .image svg {
	position: relative;
	z-index: 5;
	height: 48px;
	width: 114px;
	stroke: var(--color-txt);
	fill: none;
	transition: stroke 0.3s;
}

.HOME_SERVICES li a:hover { color: var(--color-txt-hover); transition: all 0.1s;}
.HOME_SERVICES li a:hover > .image svg {  stroke: var(--color-txt-hover);  transition: stroke 0.1s; }


.HOME_SERVICES li a > .desc {
	display: flex;
	width: 100%;
	grid-area: desc;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.HOME_SERVICES li a > .title {
	display: flex;
	width: 100%;
	grid-area: title;
	min-height: 2.8em;
	margin-bottom: var(--space-s);
}




ul.BIG-BALLS {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	padding: 1px 0;
	margin: 0;
	list-style: none;
	overflow: hidden;
}
ul.BIG-BALLS li {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-basis: 25%;
	flex-grow: 1;
	flex-shrink: 1;
	padding: 0 var(--space-p-lr);
}

ul.BIG-BALLS li h2 {
	max-width: calc(20vw - var(--space-p-lr)*2);
	font-size: 2.6vw;
	line-height: 125%;
}

ul.BIG-BALLS li:nth-child(2) { animation-direction: reverse;}
ul.BIG-BALLS li:nth-child(3) { animation-direction: reverse;}





.SERVICE-FORM {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 'form info';
}
.SERVICE-FORM .FORM-BOX {
	padding: 0 var(--space-p-lr);
}



.CONTACT-TOP {
	display: grid;
	grid-template-columns: 2fr 3fr;
	grid-template-areas: "text form";
	align-items: start;
	margin: 0 auto;
}
.CONTACT-TOP .text {
	position: sticky;
	top: var(--space-xxl);
	padding-right: 20%;
	grid-area: text;
}
.CONTACT-TOP .text .partners {
	display: flex;
	padding: 0;
	margin: var(--space-m) 0 0 0;
	list-style: none;
	justify-content: space-between;
}
.CONTACT-TOP .image {
	display: block;
	position: relative;
	grid-area: text;
	align-self: stretch;
	border-radius: 10vw;
	/* overflow: hidden; */
}
.CONTACT-TOP .image .test {
	display: block;
	position: absolute;
	inset: 0 0 0 0;
	border-radius: 20vw ;
	overflow: hidden;
}
.CONTACT-TOP .image video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.CONTACT-FORM {
	display: grid;
	grid-template-columns: 2fr 2fr 1fr;
	grid-template-areas: 'text form .';
}
.CONTACT-FORM .TEXT {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr auto;
	grid-template-areas:
	'text'
	'legal';
	padding: 0 var(--space-p-lr);
}
.CONTACT-FORM .TEXT h2 {
	grid-area: text;
	align-self: center;
}
.CONTACT-FORM .TEXT .disclaimer {
	grid-area: legal;
	width: 60%;
	color: var(--color-txt-grey);
	margin-top: var(--space-s);
	margin-bottom: var(--space-s);
}
.CONTACT-FORM .FORM-BOX input[type='submit'] {
	padding-top: 72px;
	padding-bottom: 72px;
	border-radius: 88px;
}
.CONTACT-FORM .FORM-BOX input[type='submit']:hover {
	padding-top: 72px;
	padding-bottom: 72px;
	border-radius: 0;
}
.CONTACT-FORM .FORM-BOX .MSG {
	padding-top: 80px;
	padding-bottom: 80px;
}

.FORM-BOX {
	display: flex;
	flex-wrap: wrap;
	grid-area: form;
	justify-self: stretch;
	width: 100%;
}
.FORM-BOX > div { width: 100%;}


.FORM-BOX fieldset { 
	display: contents; 
	padding: 0;
	margin: 0;
	border: none;
}
.FORM-BOX form {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: 
	'email'
	'name'
	'msg'
	'submit';
	padding: 0;
	margin: 0;
	border: none;
}
.FORM-BOX.XL form {
	grid-template-columns: 2fr 1fr;
	grid-template-areas: 
	'email name'
	'msg submit';
}


.FORM-BOX .MSG {
	display: block;
	align-self: end;
	padding: 72px 64px;
	background-color: var(--color-bg-black);
	border-radius: 160px;
	color: var(--color-txt-on-dark);
}
.FORM-BOX .MSG.SUCCESS {
	background-color: var(--color-accent);
	color: var(--color-txt-on-laser);
}

.FORM-BOX .form-input {
	display: block;
	position: relative;
}
.FORM-BOX.XL .form-input {
	background-color: var(--color-bg);
	border-radius: 10vw;
}
.FORM-BOX.VC .form-input.ema  { border-radius: 10vw 10vw 10vw 0; }
.FORM-BOX.VC .form-input.msg  { border-radius: 0 10vw 10vw 10vw; }
.FORM-BOX.VC .form-input.ema :is(input, textarea) { border-radius: 10vw 10vw 10vw 0; }
.FORM-BOX.VC .form-input.msg :is(input, textarea) { border-radius: 0 10vw 10vw 10vw; }

.FORM-BOX .form-input.ema { grid-area: email; }
.FORM-BOX .form-input.nam { grid-area: name; }
.FORM-BOX .form-input.msg { grid-area: msg; }
.FORM-BOX .form-input.autogrow {
	display: grid;
}
.FORM-BOX .form-input.autogrow::after {
	content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}
.FORM-BOX .form-input.autogrow::after,
.FORM-BOX .form-input.autogrow > textarea{
	grid-area: 1 / 1 / 2 / 2;
  resize: none;
  overflow: hidden;
}

.FORM-BOX label {
	display: block;
	position: absolute;
	inset: calc(50% - 1.2em) 48px auto;
	translate: 0 -50%;
	color: var(--color-txt-grey);
	transition: all 0.25s;
}
.FORM-BOX.XL label {
	inset: calc(50% - 1.2em) 3vw auto;
}
.FORM-BOX    textarea + label { inset: 48px 48px auto; }
.FORM-BOX.XL textarea + label { top: 8vw; }

.FORM-BOX    input:not(:focus):placeholder-shown + label,
.FORM-BOX textarea:not(:focus):placeholder-shown + label { 
	top: 50%;
	translate: 0 -50%; 
	color: var(--color-txt);
}
.FORM-BOX input[type='text'],
.FORM-BOX input[type='email'],
.FORM-BOX input[type='submit'],
.FORM-BOX textarea,
.FORM-BOX .autogrow::after {
	all: unset;
	box-sizing: border-box;
	display: block;
	background: var(--color-bg-semi);
	padding: 64px 48px 40px;
	margin: 0;
	border-radius: 68px;
	border: none;
	width: 100%;
	font-family: 'Aeonik', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: clamp(20px, 2.6vh, 26px);
	/* font: var(--font-basic); */
	line-height: 1.25em;
	/* font: inherit; */
	letter-spacing: normal;
	transition: all 0.15s;
}
.FORM-BOX.XL input[type='text'],
.FORM-BOX.XL input[type='email'],
.FORM-BOX.XL input[type='submit'],
.FORM-BOX.XL textarea,
.FORM-BOX.XL .autogrow::after {
	padding: 68px 16px 36px 3vw;
	border-radius: 10vw;
	line-height: 1.3em;
	min-height: min(20vw, var(--size-max-width)*0.2);
	height: 100%;
}
.FORM-BOX.XL textarea,
.FORM-BOX.XL .autogrow::after {
	padding: calc(25% - 0.65em) 3vw;
	padding: min((10vw - 0.65em), (var(--size-max-width)*0.1 - 0.65em)) 3vw;

}

.FORM-BOX input[type='text']:hover,
.FORM-BOX input[type='email']:hover,
.FORM-BOX textarea:hover {
	background-color: var(--color-bg-semi-b);
}
.FORM-BOX input[type='text']:focus,
.FORM-BOX input[type='email']:focus,
.FORM-BOX textarea:focus {
	background-color: var(--color-accent);
}
.FORM-BOX input[type='text']:user-invalid,
.FORM-BOX input[type='email']:user-invalid,
.FORM-BOX textarea:user-invalid {
	background-color: color(display-p3 1 0.27 0.315);
}
.FORM-BOX input[type='text']:user-invalid + label,
.FORM-BOX input[type='email']:user-invalid + label,
.FORM-BOX textarea:user-invalid + label {
	color: var(--color-txt);
}
.FORM-BOX input[type='text']:focus + label,
.FORM-BOX input[type='email']:focus + label,
.FORM-BOX textarea:focus + label {
	color: var(--color-txt-on-laser);
}


.FORM-BOX input[type='text']::placeholder,
.FORM-BOX input[type='email']::placeholder,
.FORM-BOX textarea::placeholder {
	color: red;
}
.FORM-BOX textarea {
	resize: vertical;
	white-space: pre-wrap;
}


.FORM-BOX input[type='submit'] {
	background: var(--color-bg-black);
	padding-top: 52px;
	padding-bottom: 52px;
	color: var(--color-txt-on-dark);
	cursor: pointer;
	position: relative;
}
/* .FORM-BOX .submit:has(input[type='submit']) */
.FORM-BOX .submit {
	position: relative;
	overflow: hidden;
}
.FORM-BOX .submit :is(.ico, .spinner) {
	display: block;
	position: absolute;
	z-index: 5;
	right: 48px;
	top: 50%;
	translate: 0 -50%;
	pointer-events: none;
	transition: all 0.3s;
}
.FORM-BOX.XL .submit :is(.ico, .spinner) {
	right: 50%;
	translate: 50% -50%;
}
.FORM-BOX.XL .submit .ico {
	opacity: 0;
	scale: 0.5;
}
.FORM-BOX .submit :is(.ico, .spinner) svg {
	display: block;
	margin: 0;
}
.FORM-BOX .submit :is(.ico, .spinner) svg path {
	stroke: var(--color-txt-on-dark);
	transition: all 0.3s;
}
.FORM-BOX .submit input[type='submit']:hover ~ :is(.ico, .spinner) svg path {
	stroke: var(--color-txt);
}
.FORM-BOX .submit .spinner {
	animation-name: spin;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
	opacity: 0;
}
.FORM-BOX input[type='submit']:hover {
	background: var(--color-accent);
	color: var(--color-txt-on-laser);
	padding-top: 64px;
	padding-bottom: 64px;
	border-radius: 0;
}
.FORM-BOX input[type='submit']:hover ~ .circular span { height: 80%; top: 10%;   }
.FORM-BOX input[type='submit']:hover ~ .circular { opacity: 0;  }
.FORM-BOX input[type='submit']:hover ~ .ico  { opacity: 1; scale: 1;  }
.FORM-BOX:is(.SUBMITTING, .LOADING) .submit .ico { opacity: 0; }
.FORM-BOX:is(.SUBMITTING, .LOADING) .submit .spinner { opacity: 1; visibility: visible; }

.FORM-BOX input:-webkit-autofill,
.FORM-BOX input:-webkit-autofill:hover,
.FORM-BOX input:-webkit-autofill:focus,
.FORM-BOX textarea:-webkit-autofill {
  /* -webkit-box-shadow: 0 0 0px 1000px color(display-p3 0.375 1 0.66) inset; */
  -webkit-box-shadow: 0 0 0px 1000px #72FFC0 inset;
}
.FORM-BOX input:-webkit-autofill + label,
.FORM-BOX textarea:-webkit-autofill + label {
  color: var(--color-txt);
}


.FORM-BOX .legal {
	color: var(--color-txt-grey);
	padding: var(--space-s) 16px 0;
}


.circular span:nth-child(1) { --nthchild: 1 }
.circular span:nth-child(2) { --nthchild: 2 }
.circular span:nth-child(3) { --nthchild: 3 }
.circular span:nth-child(4) { --nthchild: 4 }
.circular span:nth-child(5) { --nthchild: 5 }
.circular span:nth-child(6) { --nthchild: 5.9 }
.circular span:nth-child(7) { --nthchild: 7 }
.circular span:nth-child(8) { --nthchild: 7.9 }
.circular span:nth-child(9) { --nthchild: 9 }
.circular span:nth-child(10) { --nthchild: 10 }
.circular span:nth-child(11) { --nthchild: 11 }
.circular span:nth-child(12) { --nthchild: 12 }
.circular span:nth-child(13) { --nthchild: 13 }
.circular span:nth-child(14) { --nthchild: 14 }
.circular span:nth-child(15) { --nthchild: 14.7 }

.circular {
	display: block;
	position: absolute;
	width: 100%;
	aspect-ratio: 1/1;
	top: 50%;
	/* bottom: 0; */
	translate: 0 -50%;
	transition: opacity 0.4s;
	pointer-events: none;
	animation-duration: 25s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-direction: reverse;
	animation-timing-function: linear;
}
.circular span {
	display: block;
	position: absolute;
	font-size: 2vw;
	position: absolute;
	text-align: center;
	color: var(--color-txt-on-dark);
	height: 60%;
	inset: 20% auto auto 50%;
	translate: -50% 0;
	transition: color 0.3s, top 0.3s, height 0.3s;
	rotate: calc((var(--nthchild) - 7.5) * 17deg);
}
.circular:not(.stop) span {
	animation-duration: 8s;
  animation-name: spin_b;
  animation-iteration-count: infinite;
  animation-direction: reverse;
	animation-timing-function: cubic-bezier(.5,.0,.5,1);
	animation-delay: calc(var(--nthchild) * 0.03s);
}
.FORM-BOX:has(input:user-valid):not(:has(input:user-invalid, input:placeholder-shown, textarea:placeholder-shown)) .circular  {
	
} 
.FORM-BOX:has(input:user-valid):not(:has(input:user-invalid, input:placeholder-shown, textarea:placeholder-shown)) .circular span {
	
} 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin_b {
  0%  { transform: rotate(0deg); animation-timing-function: linear; }
  60% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.3,0,1,0.3); opacity: 1; }
  80% { transform: rotate(180deg) scaleX(1.6); animation-timing-function: cubic-bezier(0,.3,.3,1); opacity: 0; }
  100%{ transform: rotate(360deg); animation-timing-function: linear; opacity: 1; }
}
.SERVICE-FORM .INFO {
	display: block;
	grid-area: info;
}
.SERVICE-FORM .INFO .intro {
	display: block;
	margin-bottom: var(--space-s);
}
/* .SERVICE-FORM .INFO .intro h3 { margin-top: var(--space-m); width } */

.SERVICE-FORM .INFO > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	row-gap: var(--space-s);
	column-gap: calc(var(--space-p-lr) * 2);
	padding: 0 var(--space-p-lr);
	margin: 0;
}
.SERVICE-FORM .INFO > ul > li {
	display: block;
	position: relative;
	padding-left: 28px;
}
.SERVICE-FORM .INFO > ul > li::before {
	display: block;
	content: '';
	width: 16px;
	height: 40px;
	position: absolute;
	left: 0;
	top: 4px;
	background-image: url("data:image/svg+xml;utf8,<svg width='16' height='40' viewBox='0 0 16 40' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M15.5 8L15.5 32C15.5 36.1421 12.1421 39.5 8 39.5V39.5C3.85786 39.5 0.5 36.1421 0.5 32L0.5 6.5C0.5 3.18629 3.18629 0.5 6.5 0.5V0.5C9.81371 0.5 12.5 3.18629 12.5 6.5L12.5 26C12.5 28.4853 10.4853 30.5 8 30.5V30.5C5.51472 30.5 3.5 28.4853 3.5 26L3.5 7' stroke='black'/></svg>");
}
.SERVICE-FORM .INFO > ul > li:nth-child(odd):last-child { flex-grow: 0;}



ul.SERVICE-POINTS {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: var(--space-xxl);
	list-style: none;
	padding: var(--space-xxl) 0;
	margin: 0;
}
ul.SERVICE-POINTS li {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas:
	'a b';
	width: 100%;
	padding: 0 var(--space-p-lr);
	column-gap: calc(var(--space-p-lr) * 2);
}
/* ul.SERVICE-POINTS li:nth-child(n+2) > div {
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-l);
} */
ul.SERVICE-POINTS li .large { grid-area: a; }
ul.SERVICE-POINTS li .small { grid-area: b; padding-right: 30%; color: var(--color-txt-off); }





ul.SERVICE-VALUES {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-l);
	list-style: none;
	padding: var(--space-xl) 0;
	margin: 0;
}
ul.SERVICE-VALUES li {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
	'title title small image';
	width: 100%;
	padding: 0 var(--space-p-lr);
	column-gap: calc(var(--space-p-lr) * 2);
}
ul.SERVICE-VALUES li:nth-child(n+2) > div {
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-l);
}
ul.SERVICE-VALUES li .large { grid-area: title; }
ul.SERVICE-VALUES li .large:only-child { grid-column: 1/4; }
ul.SERVICE-VALUES li .small { grid-area: small; }
ul.SERVICE-VALUES li .image { grid-area: image; display: none; }
ul.SERVICE-VALUES li .image img { display: block; width: 100%; }
ul.SERVICE-VALUES li:nth-child(n+2) :is(.small, .image) { padding-top: var(--space-l); }


ul.SERVICE-STAGES {
	display: grid;
	position: relative;
	list-style: none;
	padding: 0 ;
	margin: 0;
	row-gap: var(--space-m);
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	grid-auto-flow: row dense;
	align-content: start;
}
ul.SERVICE-STAGES li {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		'title you case case'
		'title ynd case case';
	padding: 0;
	margin: 0;
}
ul.SERVICE-STAGES li.path {
	display: block;
	position: absolute;
	inset: 0 auto 0 0;
	border-left: 1px dashed;
	width: 0;
}
ul.SERVICE-STAGES li.path > div {
	display: block;
	position: sticky;
	top: var(--space-xl);
	width: 20px;
	height: 20%;
	height: calc((100% - var(--space-m)*4)/5);
	padding: 0;
	border-radius: 20px;
	transform: translateX(-50%);
	background: var(--color-accent);
	transition: width 0.2s ease-in-out;
}

ul.SERVICE-STAGES li > div { position: relative;}
ul.SERVICE-STAGES li .name { grid-area: title; padding: var(--space-p-lr); }
ul.SERVICE-STAGES li .name h3 {position: sticky; top: var(--space-xl);}
ul.SERVICE-STAGES li .you  { grid-area: you; padding: var(--space-p-lr); align-self: start; }
ul.SERVICE-STAGES li .ynd  { grid-area: ynd; padding: 0 var(--space-p-lr) var(--space-p-lr); }

ul.SERVICE-STAGES li .you::before,
ul.SERVICE-STAGES li .ynd::before {
	content: 'YND:';
	display: block;
	position: absolute;
	right: calc(100% - var(--space-p-lr) + 8px);
	top: 0;
	opacity: 0;
	font-size: 11px;
	line-height: 20px;
	padding: 0 6px;
	border-radius: 20px;
	/* border: 1px solid; */
	background: var(--color-accent);
	transition: opacity 0.4s;
}
ul.SERVICE-STAGES li .you::before {
	content: 'You:';
	background: rgba(0,0,0,0.1);
	top: var(--space-p-lr);
}
ul.SERVICE-STAGES li:hover :is(.you, .ynd)::before { opacity: 1;}
ul.SERVICE-STAGES li .case { grid-area: case; border-radius: 40px ; }
ul.SERVICE-STAGES li .case .banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: ' mock text';
}
ul.SERVICE-STAGES li .case .banner .M-MOCK {
	grid-area: mock;
	padding: calc(var(--space-p-lr)*1.5) 20px;
	width: 100%;
	perspective: 64vmax;
}
ul.SERVICE-STAGES li .case .banner .text {
	grid-area: text;
	padding: var(--space-p-lr);
	display: flex;
	flex-direction: column;
	gap: 20px;
}
ul.SERVICE-STAGES li .case .banner .text .off { color: var(--color-txt-off);}





.SERVICE-TOOLS {
	display: grid;
	grid-template-columns: repeat(4, 25%);
	grid-auto-rows: auto;
	grid-template-areas:
	'title-a title-b title-b title-c'
	'table table table nav';
	width: 100%;
	margin: 0;
}
.SERVICE-TOOLS :is(.title-a, .title-b, .title-c) {
	padding: 0 var(--space-p-lr) var(--space-l);
	position: relative;
}
.SERVICE-TOOLS :is(.title-a, .title-b, .title-c)::before {
	content: '';
	display: block;
	position: absolute;
	inset: 12px auto 20px 0;
	width: 30px;
	border-left: 1px dashed ;
	border-top: 1px dashed ;
	border-top-left-radius: 20px;
}
.SERVICE-TOOLS .title-a { grid-area: title-a;}
.SERVICE-TOOLS .title-b { grid-area: title-b;}
.SERVICE-TOOLS .title-c { grid-area: title-c;}
.SERVICE-TOOLS ul.TABLE {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	margin: 0;
	list-style: none;
	grid-area: table;
}
.SERVICE-TOOLS ul.TABLE > li {
	display: flex;
	margin: -1px 0 0 0;
	align-items: center;
	background-color: var(--color-accent-b);
	color: var(--color-txt-on-laser);
	border-radius: 0 var(--space-s) var(--space-s) 0;
}
.SERVICE-TOOLS ul.TABLE > li:first-child { border-top-left-radius: var(--space-s); }
.SERVICE-TOOLS ul.TABLE > li:last-child { border-bottom-left-radius: var(--space-s); }
.SERVICE-TOOLS ul.TABLE > li .TOOL {
	display: flex;
	align-items: center;
	flex-basis: 33.333%;
	padding: var(--space-p-lr);
}
.SERVICE-TOOLS ul.TABLE > li .DESC {
	display: flex;
	position: relative;
	z-index: 5;
	flex-direction: column;
	align-self: stretch;
	align-items: center;
	flex-basis: 66.666%;
	transition: height 0.75s cubic-bezier(.6,0,.3,1);
	overflow: hidden;
	background: var(--color-accent);
	border-radius: var(--space-s);
}
.SERVICE-TOOLS ul.TABLE > li .DESC::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0px 0px auto;
	border-top: 0.5px dashed var(--color-txt);
}
.SERVICE-TOOLS ul.TABLE > li .DESC .CARD {
	display: flex;
	padding: var(--space-p-lr);
	gap: var(--space-p-lr);
	width: 100%;
	opacity: 0;
	transition: opacity 0.75s cubic-bezier(.6,0,.6,1);
	position: absolute;
	transform-origin: top right;
}
.SERVICE-TOOLS ul.TABLE > li .DESC .CARD.on {
	display: flex;
	position: relative;
	opacity: 1;
}
.SERVICE-TOOLS ul.TABLE > li .DESC .CARD.hide {
	transition: opacity 0.25s ;
	opacity: 0;
}
.SERVICE-TOOLS ul.TABLE > li .DESC .CARD .text {
	flex-basis: 50%;
	flex-grow: 0;
	flex-shrink: 0;
}
.SERVICE-TOOLS ul.TABLE > li .DESC .CARD .details {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	font-size: 13px;
	line-height: 20px;
}
.SERVICE-TOOLS ul.TABLE > li .DESC .CARD .details .group {
	display: flex;
	/* flex-direction: column; */
	align-items: stretch;
	flex-basis: 50%;
	column-gap: 20px;
}
.SERVICE-TOOLS ul.TABLE > li .DESC .CARD .details .group .name {
	display: block;
	flex-basis: 32px;
}
.SERVICE-TOOLS ul.TABLE > li .DESC .CARD .details ul {
	display: flow-root;
	list-style: none;
	padding: 0;
	margin: 0;
}
.SERVICE-TOOLS ul.TABLE li.NAV {
	display: flex;
	justify-content: flex-end;
}
.SERVICE-TOOLS ul.TABLE li.NAV a {
	display: flex;
	align-items: center;
	text-align: center;
	padding: 24px var(--space-p-lr);
	flex-basis: 33.333%;
	flex-grow: 0;
	flex-shrink: 0;
}
.SERVICE-TOOLS ul.TABLE li.NAV a .ar {
	border-color: var(--color-txt);
	margin-right: 16px;
	float: left;
}

.SERVICE-TOOLS > .NAV {
	grid-area: nav;
	align-self: start;
	position: sticky;
	top: var(--space-xl);
}
.SERVICE-TOOLS > .NAV ul {
	padding: 0 var(--space-p-lr);
	margin: 0;
	list-style: none;
}
.SERVICE-TOOLS > .NAV ul li { display: flow-root; }
.SERVICE-TOOLS > .NAV ul li:nth-child(n+2) { margin-top: 8px;}
.SERVICE-TOOLS > .NAV ul li a {
	display: inline-block;
	color: var(--color-txt-off);
	padding: 4px 0;
	border-bottom: 1px solid transparent;
}
.SERVICE-TOOLS > .NAV ul li a:hover {color: var(--color-accent);}
.SERVICE-TOOLS > .NAV ul li a.sel {
	color: var(--color-txt-on-dark);
	border-bottom: 1px solid var(--color-txt-on-dark);
	opacity: 1;
}

/* .SERVICE-TOOLS .TABLE[data-type='ONE'] .CARD[data-type='ONE'] { display: block; }
.SERVICE-TOOLS .TABLE[data-type='TWO'] .CARD[data-type='TWO'] { display: block; } */




.MID-CONTACT {
	display: grid;
	grid-template-columns: 1fr repeat(5, min(20%, var(--size-max-width)*0.2)) 1fr;
	grid-template-areas: 'l l mid mid mid r r';
}
.MID-CONTACT[data-pad~="t"] { padding-top: var(--space-xl); }
.MID-CONTACT[data-pad~="b"] { padding-bottom: var(--space-xl); }

.MID-CONTACT .mid {
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-template-areas: 'pill text';
	grid-area: mid;
	transition: all 0.5s;
}
.MID-CONTACT .mid .body {
	display: flex;
	position: relative;
	z-index: 1;
	align-items: center;
	justify-content: space-between;
	grid-area: text;
	gap: 40px;
	padding: 40px 60px;
	/* background-color: var(--color-bg-semi); */
	background-color: var(--color-bg-white);
	border-radius: 150px;
	transition: scale 1.5s, background-color 0.5s, color 0.5s;
	scale: 0.8;
}
.MID-CONTACT .mid .body:only-child {
	grid-area: 1 / 1 / 2 / 3;
}
.MID-CONTACT .mid .body svg {
	display: block;
	margin: 0;
}
.MID-CONTACT .mid .body svg path{ transition: all 0.5s; stroke: var(--color-txt); }
.MID-CONTACT[data-bg~="BLACK"] .mid .body { background-color: var(--color-bg-semi); }
.MID-CONTACT[data-bg~="BLACK"] .mid .body svg path{stroke: var(--color-txt-on-dark); }
.MID-CONTACT .mid .body h3 { margin: 0;}
.MID-CONTACT .mid .body .off { color: var(--color-txt-off); transition: color 0.5s;}
.MID-CONTACT .mid .body .arrow {
	display: flex;
	align-items: center;
	gap: 20px;
	translate: -80px 0;
	transition: translate 1.5s cubic-bezier(.61,2.12,.6,1);
}

.MID-CONTACT .mid .pill {
	grid-area: pill;
	display: flow-root;
	aspect-ratio: 1/1;
	width: 100%;
	overflow: hidden;
	border-radius: 200px;
	align-self: stretch;
	position: relative;
	z-index: 2;
	transition: all 1.5s;
	scale: 1.25;
	transform-origin: center;
}
.MID-CONTACT .mid .pill .image {
	display: flow-root;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	overflow: hidden;
	border-radius: 200px;
	transition: all 0.8s;
	scale: 1.05;
}
.MID-CONTACT .mid .pill .image img {
	display: block;
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.MID-CONTACT .mid:hover .pill .image { scale: 1.2; }
.MID-CONTACT .mid:hover .body {
	color: var(--color-txt);
	background-color: var(--color-accent);
}
.MID-CONTACT .mid:hover .body .off{  color: var(--color-txt); }
.MID-CONTACT .mid:hover .body svg path{  stroke: var(--color-txt); }

.MID-CONTACT .mid.s-b.s-on .body { 
	scale: 1; 
	animation-name: contactBlink;
  animation-duration: 2000ms;
  animation-iteration-count: 1;
}
.MID-CONTACT .mid.s-b.s-on .body .off {
	animation-name: contactBlinkText;
  animation-duration: 2000ms;
  animation-iteration-count: 1;
}
.MID-CONTACT .mid.s-b.s-on .body .arrow { translate: 0; }
.MID-CONTACT .mid.s-b.s-on .pill { scale: 1; }
.MID-CONTACT .mid.s-b.s-on .pill .image { width: 100%; }

@keyframes contactBlink {
	20% {
		box-shadow: 0px 0px 0px 0px rgba(0, 221, 136, 0.0);
		animation-timing-function: cubic-bezier(.4,.3,.1,1);
	}
	60% {
		background-color: var(--color-accent);
		box-shadow: 0px 0px 0px 30px rgba(0, 221, 136, 0.3);
		animation-timing-function: cubic-bezier(.81,0,.44,1);
	}
	100% {
		box-shadow: 0px 0px 0px 80px rgba(0, 221, 136, 0.0);
	}
}

@keyframes contactBlinkText {
	20% {
		color: var(--color-txt-off);
		animation-timing-function: cubic-bezier(.4,.3,.1,1);
	}
	60% {
		color: inherit;
		animation-timing-function: cubic-bezier(.81,0,.44,1);
	}
	100% {
		color: var(--color-txt-off);
	}
}


/* ------ */
.CS-PROMO {
	display: grid;
	grid-template-columns: 75% 25%;
	grid-template-areas: "slides nav";
}
.CS-PROMO > .NAV {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	grid-area: nav;
	padding: var(--space-xl) var(--space-p-lr);
}
.CS-PROMO > .NAV a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 80px;
	padding: 12px 24px;
	border-radius: 40px;
	/* border: 1px solid var(--color-txt); */
	transition: all 0.3s;
}
.CS-PROMO > .NAV a:hover .ar { width: 80px; }
.CS-PROMO > .NAV a:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}
[data-bg~="BLACK"] .CS-PROMO > .NAV a {	border-color: var(--color-txt-on-dark); }
[data-bg~="BLACK"] .CS-PROMO > .NAV a:hover {	background: var(--color-accent); border-color: var(--color-accent); }
.CS-PROMO > .NAV a[data-dir="p"] { position: sticky; bottom: var(--size-topbar); }
.CS-PROMO > .NAV a[data-dir="n"] { position: sticky; top:    var(--size-topbar); }
.CS-PROMO > .SLIDES {
	display: flex;
	flex-wrap: wrap;
	grid-area: slides;
	align-items: flex-start;
	padding: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
.CS-PROMO > .SLIDES > li {
	display: flex;
	align-items: flex-start;
	width: 100%;
	flex-shrink: 0;
	flex-grow: 0;
	list-style-type: none;
	margin: 0;
	opacity: 1;
	transition: all 0.6s cubic-bezier(.2,.6,.3,1), opacity 0.2s ease;
}
.CS-PROMO > .SLIDES .TEXT {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	align-self: stretch;
	row-gap: var(--space-m);
	width: 33.333%;
	position: relative;
	z-index: 20;
	flex-grow: 0;
	flex-shrink: 0;
	order: 2;
	padding: var(--space-xl) var(--space-p-lr);

	transition: all 0.6s cubic-bezier(.2,.6,.3,1);
}
.CS-PROMO > .SLIDES .TEXT .title { display: flow-root; }
.CS-PROMO > .SLIDES .TEXT .title .pre { color: var(--color-txt-off); margin-bottom: 0.25em; }
.CS-PROMO > .SLIDES .M-MOCK {
	width: 66.666%;
	flex-grow: 0;
	flex-shrink: 0;
	order: 1;
	padding: var(--space-xl) 16px;
}
.CS-PROMO > .SLIDES .IMAGE::after {
	content: '';
	display: block;
	position: absolute;
	inset: var(--space-p-lr);
	z-index: 10;
	background-color: var(--color-bg);
	opacity: 0;
	transform: translateZ(15vmax);
	transition: opacity 0.6s cubic-bezier(.2,.6,.3,1);
}
[data-bg~="BLACK"] .CS-PROMO > .SLIDES .IMAGE::after { background-color: var(--color-bg-black); }


.CS-PROMO > .SLIDES.morph { transition: height 0.3s; }
.CS-PROMO > .SLIDES > li .M-SET {
	transition: all 0.3s cubic-bezier(.14,.7,.36,1)
}
.CS-PROMO > .SLIDES > li.p .M-SET {
	translate: 0 0 -20vmax;
	rotate: 0 1 0 20deg;
	transition: all 0.3s cubic-bezier(.4,0,.8,.5);
}
.CS-PROMO > .SLIDES > li.n .M-SET {
	translate: 0 0 -20vmax;
	rotate: 0 1 0 -20deg;
	transition: all 0.3s cubic-bezier(.4,0,.8,.5);
}
.CS-PROMO > .SLIDES > li.p .IMAGE::after,
.CS-PROMO > .SLIDES > li.n .IMAGE::after {
	opacity: 1;
	transition: opacity 0.3s cubic-bezier(.4,0,.8,.5);
}
.CS-PROMO > .SLIDES > li.p .TEXT {
	opacity: 0;
	scale: 1.2 1.1;
	transition: all 0.3s cubic-bezier(.4,0,.8,.5);
}
.CS-PROMO > .SLIDES > li.n .TEXT {
	opacity: 0;
	scale: 0.8 0.9;
	transition: all 0.3s cubic-bezier(.4,0,.8,.5);
}

.CS-PROMO > .SLIDES:only-child {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-auto-rows: auto;
}

.CS-PROMO > .SLIDES:only-child li:only-child {grid-column: 1/3;}
.CS-PROMO > .SLIDES:only-child li:only-child .TEXT  { width: 50%; justify-content: center;}
.CS-PROMO > .SLIDES:only-child li:only-child .IMAGE { width: 50%; }

.CS-PROMO > .SLIDES:only-child li:not(:only-child) { display: contents; }
.CS-PROMO > .SLIDES:only-child li:not(:only-child) .TEXT  { width: 85%; padding-top: 0; row-gap: var(--space-s); }
.CS-PROMO > .SLIDES:only-child li:not(:only-child) .IMAGE { width: 75%; padding: var(--space-m) var(--space-p-lr); justify-content: flex-start; }


.CS-MORE-HEAD {
	font: var(--font-header);
	font-size: 96px;
	line-height: 110%;
	padding: 0 var(--space-p-lr);
	margin-bottom: var(--space-s);
}

.CS-MORE {
	display: grid;
	position: relative;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: auto;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.CS-MORE > a {
	display: flex;
	position: relative;
	flex-direction: column;
	row-gap: var(--space-xs);
	width: 100%;
	padding: var(--space-s) var(--space-p-lr) 35% var(--space-p-lr);
	border-radius: 0 0 13vw 13vw;
	transition: all 0.2s ease-in-out;
}
.CS-MORE > a:nth-child(5n)::after { display: none;}
/* .CS-MORE > a::after{
	content: '';
	display: block;
	position: absolute;
	inset: 10vw 0 10vw auto;
	border-right: 1px solid var(--color-line);
	transition: opacity 0.2s ease-in-out;
} */
.CS-MORE > a .TEXT {
	display: flex;
	flex-direction: column;
	order: 2;
	row-gap: var(--space-xs);
}
.CS-MORE > a .TEXT .pre { color: var(--color-txt-grey); transition: color 0.2s ease-in-out;}
.CS-MORE > a .IMAGE {
	order: 1;
	width: 100%;
	padding: 0;
	aspect-ratio: 1/1.2;
}
.CS-MORE > a:hover { background: var(--color-accent);}
.CS-MORE > a:hover .pre { color: inherit; }
.CS-MORE > a:hover::after { opacity: 0;}

.CS-MORE:has(a:hover) > a:not(:hover) { 
	color: var(--color-txt-grey); 
}


.CS-INFO {
	display: grid;
	position: relative;
	z-index: 5;
	grid-template-columns: repeat(5, 1fr);
	grid-template-columns: 1fr repeat(5, min(20%, var(--size-max-width)*0.2)) 1fr;
	grid-template-areas: ". logo data scope . . .";
	padding: 0 0 var(--space-xl) 0;

}
.CS-INFO::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 0;
	inset: -80% 0 0 0;
	background: linear-gradient(180deg, var(--color-bg-black-rgba-t) 0%, var(--color-bg-black-rgba) 60%);
}
.CS-INFO > ul {
	display: flow-root;
	margin: 0;
	padding: 0 var(--space-p-lr);
	list-style: none;
	width: 100%;
	position: relative;
	z-index: 1;
}
.CS-INFO ul.logo img {
	filter: invert();
}
.CS-INFO ul.logo { grid-area: logo; }
.CS-INFO ul.data { grid-area: data; }
.CS-INFO ul.scope { grid-area: scope; }

.CS-INFO ul.data > li {
	display: grid;
	row-gap: 4px;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
}
.CS-INFO ul.data > li + li { margin-top: 16px;}
.CS-INFO ul.data > li .t {
	opacity: 0.6;
}
.CS-INFO ul.data ul {
	width: 100%;
	list-style-type:disc;
	margin: 0;
	padding: 0;
}
.CS-INFO ul.data ul > li { 
	display: block;
	width: 100% ;
	position: relative;
	padding-left: 20px;
}
.CS-INFO ul.data ul > li::before {
	content: '';
	display: block;
	position: absolute;
	width: 12px;
	height: var(--size-line-width);
	background-color: var(--color-txt-on-dark);
	inset: 0.75em auto auto 0;
}



/* ------ */

.CS-HERO-GROUP {
	display: block;
	position: relative;
	background: var(--color-bg-black-rgba);
	contain: paint;
}
.CS-HERO-GROUP .M.CS-HERO { 
	z-index: 2; 
	background: var(--color-bg-black-rgba-t25); 
	background: linear-gradient(180deg, var(--color-bg-black-rgba) 75%, var(--color-bg-black-rgba-t) 100%);

}
.CS-HERO-GROUP .CS-INFO {
	position: sticky;
	bottom: 0;
	z-index: 1;
}




.CS-HERO {
	width: 100%;
	/* aspect-ratio: 8/5; */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	transform-style: preserve-3d;
	perspective: 120vmax;
	overflow: hidden;
	position: relative;
}
.CS-HERO[data-bg~="BLACK"]:before{
	content: '';
	display: block;
	position: absolute;
	top: -100px;
	left: -100px;
	right: -100px;
	height: 100px;
	background-color: var(--color-bg-black);
	z-index: 5;
	box-shadow: 0px 16px 96px 0px var(--color-bg-black);
}
.CS-HERO.SUB {
	aspect-ratio: 1/1;
}

.CS-HERO .M-SET { padding: var(--space-xxl) 0; transition: all 0.3s cubic-bezier(.15,.6,.2,1); }
.CS-HERO .M-SET .M-FRAME { width: 20%; transition: all 0.5s cubic-bezier(.15,.6,.2,1);}


.CS-HERO .M-SET.wheel {	transform-origin: 50% 50% -40vmax; }
.CS-HERO .M-SET.wheel .M-FRAME:nth-child(n+2) { transform-origin: 0 0 -40vmax; transform: translate3d(-50%,-50%,0);}
.CS-HERO .M-SET.wheel .M-FRAME:nth-child(2)   { rotate: 0 1 0 72deg; }
.CS-HERO .M-SET.wheel .M-FRAME:nth-child(3)   { rotate: 0 1 0 144deg; }
.CS-HERO .M-SET.wheel .M-FRAME:nth-child(4)   { rotate: 0 1 0 216deg; }
.CS-HERO .M-SET.wheel .M-FRAME:nth-child(5)   { rotate: 0 1 0 288deg; }



.CS-HERO .M-SET.fan {	transform-origin: 86% 50% 0; align-self: center; }
.CS-HERO .M-SET.fan .M-FRAME { transform-origin: 110% 50% 0;}
/* .CS-HERO .M-SET.fan .M-FRAME:nth-child(1) { transform: translate3d(-60%,0,0);} */
/* .CS-HERO .M-SET.fan .M-FRAME:nth-child(n+2) {transform-origin: 100% 50% 0; } */
/* .CS-HERO .M-SET.fan .M-FRAME:nth-child(2)   { rotate: 0 1 0 72deg; }
.CS-HERO .M-SET.fan .M-FRAME:nth-child(3)   { rotate: 0 1 0 144deg; }
.CS-HERO .M-SET.fan .M-FRAME:nth-child(4)   { rotate: 0 1 0 216deg; }
.CS-HERO .M-SET.fan .M-FRAME:nth-child(5)   { rotate: 0 1 0 288deg; } */


.CS-HERO .M-SET.concave .M-FRAME:nth-child(n+2) { transform-origin: 0 110% 0; transform: translate3d(-50%,-50%,0);}

.CS-HERO .M-SET.wide .M-FRAME {
	width: 60%;
	padding: 0.75vw;
	/* border-radius: 3vw; */
}


/* .CS-HERO .set .frame.off:first-child { translate: 110% 0;}
.CS-HERO .set .frame.off             { translate: 60% -50%; rotate: 0 1 0 60deg; opacity: 0; transition: all 0.5s cubic-bezier(.6,0,.2,1), opacity 0.75s 0.35s;}

.CS-HERO .set.big { height: 100%; padding-top: 0; padding-bottom: 0; }
.CS-HERO .set.big .frame     { width: auto; height: 80%; }
.CS-HERO .set.big .frame div { width: auto; height: 100%; }
.CS-HERO .set.big .frame img { width: auto; height: 100%; max-height: fit-content; max-width: 90vw; object-fit:contain} */

/* ------ */


.CS-SLIDER { padding: var(--space-xl) 0; }
.CS-SLIDER.NP-T { padding-top: 0; }
.CS-SLIDER.NP-B { padding-bottom: 0; }
.CS-SLIDER nav{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: absolute;
	inset: 0 0 0 auto;
	padding: 0 var(--space-p-lr) calc(var(--space-xl) - ((96px - 3.6em)/2)) 0;
	z-index: 10;
	pointer-events: none;
}
.CS-SLIDER nav > div {
	display: flex;
	position: sticky;
	bottom: var(--space-p-lr);
	pointer-events: all;
}
.CS-SLIDER.NP-B nav { padding-bottom: 1em;}
.CS-SLIDER.NP-B nav > div { bottom: 1em;}

.CS-SLIDER nav a {
	display: flex;
	justify-content: center;
	position: relative;
	align-items: center;
	min-height: 96px;
	min-width: 96px;
	padding: 12px ;
	background-color: var(--color-bg-black);
	border-radius: 48px;
	transition: all 0.3s ease-in-out;
	backdrop-filter: blur(20px);
}

.CS-SLIDER nav a .ar { width: 32px; border-color: var(--color-txt-on-dark);}
.CS-SLIDER nav a:hover { background-color: var(--color-accent); }
.CS-SLIDER nav a:hover .ar { width: 40px; border-color: var(--color-txt-on-laser); }

.CS-SLIDER:has(.WRAP.first) nav a:first-child { border-radius: 0 48px 48px 0; pointer-events: none; background-color: var(--color-bg-black-rgba-t50); }
.CS-SLIDER:has(.WRAP.last)  nav a:last-child  { border-radius: 48px 0 0 48px; pointer-events: none; background-color: var(--color-bg-black-rgba-t50); }

.CS-SLIDER .TITLE {
	padding: 0 calc(min(20vw, var(--size-max-width) * 0.2) + max(0px, ((100vw - var(--size-max-width))/2)) + var(--space-p-lr));
	margin-bottom: var(--space-xl);
}
.CS-SLIDER .WRAP {
	display: flex;
	position: relative;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-snap-stop: always;
	scroll-behavior: smooth;
	scroll-padding-left: calc(min(20vw, var(--size-max-width) * 0.2) + max(0px, ((100vw - var(--size-max-width))/2)) + var(--space-p-lr));
	-webkit-overflow-scrolling: touch;
}
.CS-SLIDER .WRAP.active {
	scroll-snap-type: none;
	scroll-behavior: auto;
	scroll-snap-stop: normal;
	scroll-padding-left: 0;
	/* background-color: red; */
}
/* .CS-SLIDER .WRAP.moving { background-color: blue;}
.CS-SLIDER .WRAP.active.moving {background-color: pink;} */
.CS-SLIDER .WRAP::-webkit-scrollbar { display: none; }

.CS-SLIDER .WRAP .ROW {
	display: grid;
	grid-auto-columns: calc(min(20vw, var(--size-max-width)*0.2) - var(--space-p-lr)*2);
	grid-auto-flow: column;
	grid-template-rows: auto;
	grid-auto-rows: auto;
	column-gap: calc(var(--space-p-lr) * 2);
	row-gap: 10vh;
	position: relative;
	padding: 0 calc(min(20vw, var(--size-max-width) * 0.2) + max(0px, ((100vw - var(--size-max-width))/2)) + var(--space-p-lr));
}
.CS-SLIDER .ROW > section {
	display: contents;
	position: relative;
	width: 100%;
	padding: 0 var(--space-p-lr);
	scroll-snap-align: start;
	pointer-events: none;
}
.CS-SLIDER .ROW > section[data-width="w2"] {	grid-column: auto / span 2; }
.CS-SLIDER .ROW > section[data-width="w2"] .M-FRAME{	grid-column: auto / span 2; }
.CS-SLIDER .ROW > section[data-width="w2"] .text {	grid-column: auto / span 2; }

.CS-SLIDER .ROW > section[data-width="w3"] {	grid-column: auto / span 3; }
.CS-SLIDER .ROW > section[data-width="w3"] .M-FRAME{	grid-column: auto / span 3; }
.CS-SLIDER .ROW > section[data-width="w3"] .text {	grid-column: auto / span 3; }

.CS-SLIDER .ROW > section .txt {
	position: relative;
	grid-row: 2 / span 1;
	align-self: stretch;
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	max-width: 480px;
	transition: opacity 0.4s;
}
.CS-SLIDER .ROW > section .txt h3 { flex-grow: 0;}
.CS-SLIDER .ROW > section .txt p  { flex-grow: 1;}
.CS-SLIDER .ROW > section .txt a  { flex-grow: 0; margin-top: var(--space-s); margin-bottom: 1px;}
.CS-SLIDER .ROW > section .txt::before {
	content: '';
	display: block;
	position: absolute;
	bottom: calc(100% + 2vh);
	left: 0;
	min-height: 6vh;
	border-left: 1px dashed transparent;
	transition: border-color 0.5s;
}

.CS-SLIDER .ROW > section.sel .txt::before { border-color: var(--color-txt); }
.CS-SLIDER[data-bg="BLACK"] .ROW > section.sel .txt::before { border-color: var(--color-txt-on-dark); }

/* .CS-SLIDER .slide.sel + .slide + .slide ~ .slide .frame {
	transform: scale(0.8) translateX(-80%);
	z-index: 4;
} */

.CS-SLIDER .M-FRAME {
	scroll-snap-align: start;
	align-self: end;
	grid-row: 1 / span 1;
}



/* ------ */




.TESTIMONIALS {
	display: grid;
	grid-template-columns: min(80%, calc(var(--size-max-width)*0.8)) min(20%, calc(var(--size-max-width)*0.2));
	grid-template-rows: auto;
	grid-template-areas:
		"header nav"
		"main main";
	justify-content: center;
	position: relative;
	padding: var(--space-xl) 0 0;
}
.TESTIMONIALS > .TITLE {
	display: flow-root;
	grid-area: header;
	padding: 0 var(--space-p-lr) var(--space-xl);
}

.TESTIMONIALS > ul.SLIDES.s-b  { transform: scale(0.9); opacity: 0; transition: transform 1s, opacity 1s; }
.TESTIMONIALS > ul.SLIDES.s-on { transform: none; opacity: 1; }

.TESTIMONIALS > ul.SLIDES {
	display: flow-root;
	grid-area: main;
	padding: 0;
	margin: 0;
	list-style: none;
	transition: height 0.3s;
	overflow: hidden;
}
.TESTIMONIALS > ul.SLIDES.morph { transition: height 0.3s; }

.TESTIMONIALS > ul.SLIDES li {
	display: grid;
	grid-template-columns: repeat(5, min(20%, var(--size-max-width)*0.2));
	grid-template-areas: "text text text text image";
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	transform-origin: top center;
	transition: all 0.4s cubic-bezier(.2,.6,.3,1), opacity 0.4s ease;
}
.TESTIMONIALS > ul.SLIDES li.p  {
	translate: -10vw 0;
	opacity: 0;
	scale: 1.2 1;
	transition: all 0.2s cubic-bezier(.4,0,.8,.5);
}
.TESTIMONIALS > ul.SLIDES li.n  {
	translate: 10vw 0;
	opacity: 0;
	scale: 1.2 1;
	transition: all 0.2s cubic-bezier(.4,0,.8,.5);
}
.TESTIMONIALS > ul.SLIDES li .TEXT {
	grid-area: text;
	display: flex;
	width: 90%;
	padding: 0 var(--space-p-lr) var(--space-xl);
}
.TESTIMONIALS > ul.SLIDES li .TEXT .inner {
	display: block;
}
.TESTIMONIALS > ul.SLIDES li .IMAGE {
	position: relative;
	grid-area: image;
	padding-bottom: var(--space-xl);
}
.TESTIMONIALS > ul.SLIDES li .IMAGE .I {
	width: 100%;
	display: block;
	position: relative;
	height: 20vw;
	border-radius: 0 0 10vw 10vw;
	overflow: hidden;
}
.TESTIMONIALS > ul.SLIDES li .IMAGE .I > div {
	display: block;
	position: absolute;
	width: 130%;
	height: 130%;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: 1;
}
.TESTIMONIALS > ul.SLIDES li .IMAGE img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	padding: 0;
}
.TESTIMONIALS > ul.SLIDES li .IMAGE .person {
	display: flow-root;
	width: 100%;
	text-align: center;
	margin-top: 24px;
}

.TESTIMONIALS > .NAV {
	display: flex;
	grid-area: nav;
	align-self: end;
	align-items: stretch;
	justify-content: flex-end;
	width: 100%;
	position: sticky;
	z-index: 10;
	top: var(--size-topbar);
}
.TESTIMONIALS > .NAV a{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 20px;
	width: 50%;
	flex-shrink: 0;
	flex-grow: 0;
	height: calc(var(--size-topbar)*2);
	border: none;
	transition: all 0.3s;
}
.TESTIMONIALS > .NAV a .ar { width: 75%; }
.TESTIMONIALS > .NAV a:hover { border-radius: 0; border-color: var(--color-txt-on-laser); background: var(--color-txt-on-laser); }
.TESTIMONIALS > .NAV a:hover .ar { width: 50%; border-color: var(--color-txt-on-laser-hover);}
.TESTIMONIALS > .NAV a:last-child { justify-content: flex-end; }



.TESTIMONIAL {
	grid-column: 2 / span 4;
	grid-row: 1 / span 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto auto;
	grid-auto-rows: auto;
	grid-template-areas:
		"text text text image"
		"person person person image";
}
.TESTIMONIAL .TEXT {
	display: flow-root;
	padding: var(--space-xl) var(--space-p-lr);
	grid-area: text;
	width: 95%;
}
.TESTIMONIAL .IMAGE {
	grid-area: image;
	max-height: min(80vh - var(--space-xl) - var(--size-topbar), 60vw);
	position: sticky;
	top: var(--size-topbar);
	flex-grow: 0;
	display: flow-root;
	overflow: hidden;
	flex-grow: 1;
	border-radius: 0 0 10vw 10vw;
	margin: 0 0 var(--space-xl) 0;

}
.TESTIMONIAL .IMAGE > div {
	display: block;
	position: absolute;
	width: 130%;
	height: 130%;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: 1;
}
.TESTIMONIAL .IMAGE > div img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	padding: 0;
}

.TESTIMONIAL .PERSON {
	display: grid;
	align-items: end;
	grid-template-columns: 1fr 2fr;
	grid-area: person;
	padding: 0 var(--space-p-lr) var(--space-xl);
}
.TESTIMONIAL .PERSON .NAME {
	grid-column: 1/span 1;
	display: flex;
	align-items: center;
	position: relative;
}
.TESTIMONIAL .PERSON .NAME > span { display: block; flex-grow: 0;}
.TESTIMONIAL .PERSON .NAME::after {
	content: '';
	display: block;
	flex-grow: 1;
	border-top: 1px solid var(--color-txt);
	position: relative;
	margin: 0 16px;
}

.TESTIMONIAL .PERSON .POSITION { grid-column: 2/span 1; }
.TESTIMONIAL .PERSON .POSITION > span { display: flow-root;}

[data-bg~="BLACK"] .TESTIMONIAL .PERSON .NAME::after { border-top-color: var(--color-txt-on-dark);}



.GRID-TEXT {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap: var(--space-xl);
	padding: 0;
	margin: 0;
}
.GRID-TEXT.half { width: 50%; row-gap: var(--space-l); }
.GRID-TEXT.half li { width: 50%; }
.GRID-TEXT li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 25%;
	padding: 0 var(--space-p-lr);
	margin: 0;
	list-style: none;
}
.GRID-TEXT li > div { width: 100%;}
:only-child > .GRID-TEXT li { width: 20%; }
.GRID-TEXT li h3 { margin-bottom: var(--space-s); }
.M-CONT.COLS .GRID-TEXT li h3 {  margin-top: 0; var(--space-s); }

.GRID-TEXT li .i {
	display: flow-root;
	margin-bottom: 32px;
}
.GRID-TEXT li .i img {
	display: block;
	height: 48px;
}
.GRID-TEXT li .i.big img {
	display: block;
	height: auto;
	width: 100%;
}
.GRID-TEXT li .i svg {
	display: block;
	height: 48px;
	width: 114px;
	align-self: flex-start;
	stroke: var(--color-txt);
	fill: none;
	stroke-width: 1px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.GRID-TEXT:has(li:nth-child(5):last-child) li:nth-child(3) { margin-right: 25%;}
[data-bg~="LASER"] .GRID-TEXT li .i svg { stroke: var(--color-txt-on-laser);  }
[data-bg~="BLACK"] .GRID-TEXT li .i svg { stroke: var(--color-txt-on-dark);  }
[data-bg~="BLACK"] .GRID-TEXT li .i img { filter: invert(0.9); }

.GRID-TEXT li a.button { margin-top: var(--space-s);}




.LOGO-WALL {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	row-gap: var(--space-xl);
	padding: 0;
	margin: 0;
}
.LOGO-WALL li {
	display: block;
	margin: 0;
	width: 25%;
	position: relative;
	/* border-left: 1px solid var(--color-line); */
}
.LOGO-WALL li .logo {
	display: flex;
	align-items: center;
	margin-bottom: 32px;
}

.LOGO-WALL li .logo img { display: block; margin: 0; height: 48px;}
.LOGO-WALL li .name { display: block;}
.LOGO-WALL li .desc { display: block;}

.LOGO-WALL.XS { row-gap: var(--space-l); }
.LOGO-WALL.XS li { width: 20%; }
.LOGO-WALL.XS li .logo { margin-bottom: 0; }
.LOGO-WALL.XS li .name { display: none; }
.LOGO-WALL.XS li .desc { display: none; }

.FOLIO-GRID {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	list-style: none;
}

.FOLIO-GRID li  {
	display: flex;
	align-items: stretch;
	width: 100%;
	position: relative;
}
.FOLIO-GRID li .M-MOCK {
	width: 40%;
	min-height: min(40vw, calc(var(--size-max-width)*0.4));
	/* aspect-ratio: 6/5; */
	background: var(--color-bg-black);
	flex-grow: 0;
	flex-shrink: 0;
	transition: background-color 1s;
}

.FOLIO-GRID li .M-MOCK:hover { background: var(--color-accent); }
.FOLIO-GRID li .M-MOCK:hover .M-FRAME { border-color: rgba(0,0,0,0.75); }

.FOLIO-GRID li .T {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20%;
	margin-right: 0;
	flex-grow: 1;
	flex-shrink: 1;
	padding-top: var(--space-s);
	padding-bottom: var(--space-s);
}
.FOLIO-GRID li .T .name { margin-bottom: 16px; }
.FOLIO-GRID li .T .year { margin-bottom: var(--space-m); }
.FOLIO-GRID li .T .cta { margin-top: var(--space-s); }
/* .FOLIO-GRID li .T .line {
	display: block;
	width: 200px;
	height: 1px;
	background: var(--color-bg-black);
} */
.FOLIO-GRID li .Y {
	display: block;
	text-align: right;
	width: 40%;
	flex-grow: 0;
	flex-shrink: 0;
}


/* .FOLIO-GRID li:nth-child(n+2) { margin-top: var(--space-xxl); } */


@media screen and (min-width: 721px) {
	.FOLIO-GRID li:nth-child(10n + 2) .I {order: 2;}
	.FOLIO-GRID li:nth-child(10n + 2) .T {order: 3;}
	.FOLIO-GRID li:nth-child(10n + 2) .Y {order: 1;}

	/* .FOLIO-GRID li:nth-child(10n + 3) .I {order: 2; }
	.FOLIO-GRID li:nth-child(10n + 3) .T {order: 3; margin-right: 0; }
	.FOLIO-GRID li:nth-child(10n + 3) .Y {order: 1;} */

	.FOLIO-GRID li:nth-child(10n + 4) { width: 60%; text-align: right; }
	.FOLIO-GRID li:nth-child(10n + 4) .M-MOCK { aspect-ratio: 3/5 ;}
	.FOLIO-GRID li:nth-child(10n + 4) .M-MOCK .M-SET { width: auto;	height: 60%; }
	.FOLIO-GRID li:nth-child(10n + 4) .I {order: 3; width: 33.333%; }
	.FOLIO-GRID li:nth-child(10n + 4) .T {order: 2; width: 33.333%; }
	.FOLIO-GRID li:nth-child(10n + 4) .Y {order: 1; width: 33.333%; }

	.FOLIO-GRID li:nth-child(10n + 5) { width: 40%; text-align: right; }
	.FOLIO-GRID li:nth-child(10n + 5) .M-MOCK { aspect-ratio: 3/5 ;}
	.FOLIO-GRID li:nth-child(10n + 5) .M-MOCK .M-SET { width: auto;	height: 60%; }
	.FOLIO-GRID li:nth-child(10n + 5) .I {order: 3; width: 50%; }
	.FOLIO-GRID li:nth-child(10n + 5) .T {order: 2; width: 50%; }
	.FOLIO-GRID li:nth-child(10n + 5) .Y {order: 1; display: none; }

	/* .FOLIO-GRID li:nth-child(10n + 6) .I {order: 2;}
	.FOLIO-GRID li:nth-child(10n + 6) .T {order: 1; background-color: red; }
	.FOLIO-GRID li:nth-child(10n + 6) .Y {order: 3;} */

	.FOLIO-GRID li:nth-child(10n + 7) .I {order: 3;}
	.FOLIO-GRID li:nth-child(10n + 7) .T {order: 2; margin-right: 0; }
	.FOLIO-GRID li:nth-child(10n + 7) .Y {order: 1;}

	.FOLIO-GRID li:nth-child(10n + 9) .I {order: 3;}
	.FOLIO-GRID li:nth-child(10n + 9) .T {order: 2; margin-right: 0;}
	.FOLIO-GRID li:nth-child(10n + 9) .Y {order: 1; }

	.FOLIO-GRID li:nth-child(10n + 10) .I {order: 2; }
	.FOLIO-GRID li:nth-child(10n + 10) .T {order: 3; }
	.FOLIO-GRID li:nth-child(10n + 10) .Y {order: 1; }
}



.CAREER-PROCESS { display: flow-root; }

.CAREER-PROCESS .steps {
	display: flow-root;
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: career-steps;
}
/* .CAREER-PROCESS .steps.play { background: pink; } */
.CAREER-PROCESS .steps li {
	display: block;
	width: 100%;
	padding: 0;
	margin: var(--space-m) 0 0 0;
}
.CAREER-PROCESS .steps li > .row {
	display: flex;
	align-items: flex-start;
}
.CAREER-PROCESS .steps li .label {
	display: flex;
	align-items: flex-start;
	width: 50%;
	flex-grow: 0;
	flex-shrink: 0;
 }
.CAREER-PROCESS .steps li .label > span {
	display: block;
	flex-grow: 1;
	flex-shrink: 1;
}
.CAREER-PROCESS .steps li .label::before {
	content: '';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	min-height: 2em;
	margin: 0.25em 1em 0 0;
	font: 500 0.5em/130% 'Aeonik';
	flex-grow: 0;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.5s;
	border: 1px solid var(--color-txt);
	border-radius: 1em;
}
.CAREER-PROCESS .steps li.on { counter-increment: career-steps; }
.CAREER-PROCESS .steps li.on .label::before {
	content: counter(career-steps);
	opacity: 1;
}
.CAREER-PROCESS .steps.play li:not(.on) ~ li.on .label::before { opacity: 0; }
.CAREER-PROCESS .steps li > span {
	display: block;
	width: 50%;
}
.CAREER-PROCESS .steps li .desc {
	display: flex;
	width: 50%;
	flex-grow: 0;
	flex-shrink: 0;
	margin-top: 1.4vh;
}



.CAREER-POSITIONS {
	display: flow-root;
	padding: 0;
	margin: 0;
	list-style: none;
}
.CAREER-POSITIONS li {
	display: block;
	padding: 0;
	margin: var(--space-l) 0 0 0;
}
.CAREER-POSITIONS li > a {
	display: flex;
	align-items: center;
}
.CAREER-POSITIONS li > a .name { width: 75%; position: relative; padding: 0 var(--space-p-lr); }
.CAREER-POSITIONS li > a .name > span { display: inline-block; position: relative;}
.CAREER-POSITIONS li > a .name svg {
	stroke: var(--color-txt-hover);
	display: none;
	fill: none;
	width: 16px;
	height: 8px;
	position: absolute;
	left: calc(100% + 8px);
	top: 50%;
	margin-top: -4px;
	z-index: 2;
}
.CAREER-POSITIONS li > a .details { width: 25%; padding: 0 var(--space-p-lr); }
.CAREER-POSITIONS li > a:hover { color: var(--color-txt-hover); }
.CAREER-POSITIONS li > a:hover .name svg { display: block; }



.CAREER-FAQ {
	display: flow-root;
	padding: 0;
	margin: 0;
	list-style: none;
}
.CAREER-FAQ li {
	display: flow-root;
	padding: 0;
	margin: 0;
}
.CAREER-FAQ li a {
	display: flow-root;
	position: relative;
	padding: 0 var(--space-p-lr);
	margin-top: var(--space-l);
}
.CAREER-FAQ li a::before {
	border: 1px solid transparent;
	border-right: none;
	content: '';
	display: block;
	position: absolute;
	right: 100%;
	bottom: 0;
	height: 8px;
	width: 16px;
	border-radius: 9px 0 0 9px;
	transition: all 0.2s;
}
.CAREER-FAQ li a.open:before {
	border-color: var(--color-txt);
	height: calc(100% - 1vh);
}
.CAREER-FAQ li:first-child a { margin-top: 0; }

.CAREER-FAQ li a:not(.open):hover .faq { color: var(--color-txt-hover); }

.CAREER-FAQ li a .faq {
	display: flow-root;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	width: 75%;
}
.CAREER-FAQ li a .answer {
	display: none;
	margin: 0;
	opacity: 0;
	width: 75%;
	padding-top: var(--space-m);
}





.IMG-SPACER {
	display: grid;
	grid-template-columns: 1fr repeat(10, min(10%, var(--size-max-width)*0.1)) 1fr;
	grid-template-rows: 85vh auto;
	justify-content: center;
	align-items: stretch;
	position: relative;
}
.IMG-SPACER.H60 { grid-template-rows: 60vh auto; }
.IMG-SPACER.H100 { grid-template-rows: 100vh auto; }
.IMG-SPACER.ABOUT { grid-template-rows: 110vh auto; }

.IMG-SPACER[data-bg~="BLACK"] { background: var(--color-bg-black); color: var(--color-txt-on-dark)}

.IMG-SPACER > figure {
	display: block;
	position: relative;
	grid-row: 1 / span 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0 0 -1px 0;
	padding: 0;
	background: var(--color-bg-black);
}
.IMG-SPACER > figure .BG {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: 140%;
	height: 140%;
	background: var(--color-bg-black);
}
.IMG-SPACER > figure img,
.IMG-SPACER > figure video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(.1,.8,.15,1);
}
.IMG-SPACER > figure.top img,
.IMG-SPACER > figure.top video { object-position: center top; }
.IMG-SPACER > figure.bottom img,
.IMG-SPACER > figure.bottom video { object-position: center bottom; }


.IMG-SPACER figure:first-child { grid-column-start: 1;}

.IMG-SPACER .W100 { grid-column: auto / span 12; }

.IMG-SPACER .W60 { grid-column: auto / span 7; }
.IMG-SPACER .W60:is(:first-child, :last-of-type) { grid-column: auto / span 7; }
.IMG-SPACER .W50 { grid-column: auto / span 6; }
/* .IMG-SPACER .W50:is(:first-child, :last-of-type) { grid-column: auto / span 6; } */
.IMG-SPACER .W40 { grid-column: auto / span 4; }
.IMG-SPACER .W40:is(:first-child, :last-of-type) { grid-column: auto / span 5; }
.IMG-SPACER .W20 { grid-column: auto / span 2; }
.IMG-SPACER .W20:is(:first-child, :last-of-type) { grid-column: auto / span 3; }

.IMG-SPACER .W33 { grid-column: auto / span 4; }

.IMG-SPACER figcaption {
	grid-row: 2 / span 1;
	grid-column: 4 / span 4;
	padding: var(--space-s) var(--space-p-lr) 0;
	display: flow-root;
	margin-bottom: var(--space-xl);
}





.CONTACT-LIST {
	display: flow-root;
	padding: 0;
	margin: 0;
	list-style: none;
}
.CONTACT-LIST li {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}
.CONTACT-LIST li:not(:last-child) { margin-bottom: 8px;}
.CONTACT-LIST li.gap { margin-top: var(--space-s); }
.CONTACT-LIST li.line {
	margin-top: var(--space-m);
	margin-bottom: var(--space-m);
}
.CONTACT-LIST li.line:first-child {margin-top: 0; }
.CONTACT-LIST li.line:last-child {margin-bottom: 0; }
.CONTACT-LIST li.line:before {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: var(--color-line);
}
.CONTACT-LIST li .label {
	width: 25%;
	padding: 4px var(--space-p-lr);
}
.CONTACT-LIST li .value:nth-child(2):last-child { width: 75%; }
.CONTACT-LIST li .value {
	width: 25%;
	display: flex;
	flex-direction: column;
	padding: 0 var(--space-p-lr);
}
.CONTACT-LIST li .value a { display: flow-root; }
.CONTACT-LIST li .value.city > a {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	justify-content: space-between;
}
.CONTACT-LIST li .value a:not(:last-child) { margin-bottom: 8px; }
.CONTACT-LIST li .value a:hover .skyline svg { stroke: var(--color-txt-hover)}
.CONTACT-LIST li .value .skyline {
	display: flex;
	padding: 0;
	margin-top: 16px;
}
.CONTACT-LIST li .value .skyline svg {
	display: block;
	width: 114px;
	height: 56px;
	stroke: var(--color-txt);
}


.CONTACT-PEOPLE {
	display: flex;
	align-items: stretch;
	padding: 0;
	margin: 0;
	list-style: none;
}
.CONTACT-PEOPLE li {
	display: flex;
	row-gap: var(--space-s);
	flex-direction: column;
	width: 50%;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
}
.CONTACT-PEOPLE li .image {
	display: flow-root;
	position: relative;
	width: 100%;
}
.CONTACT-PEOPLE li .image .p {
	display: flow-root;
	width: 100%;
	aspect-ratio: 5/3;
	position: relative;
	z-index: 5;
	transition: translate 0.4s cubic-bezier(.6,0,.2,1);
}
.CONTACT-PEOPLE li .image .p .i {
	display: block;
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	border-radius: 30% / 50%;
	overflow: hidden;
}
.CONTACT-PEOPLE li .image .p .i div  {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	transition: scale 0.4s cubic-bezier(.6,0,.2,1);
}
.CONTACT-PEOPLE li .image .p .i div img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}
.CONTACT-PEOPLE li .image .p::after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	inset: -1px 0 50% 0;
	background-color: var(--color-bg);
}
.CONTACT-PEOPLE li .image .b {
	display: block;
	position: absolute;
	z-index: 1;
	inset: 0 0 0 0;
	border-radius: 0 0 30% 30% / 50%;
	background-color: var(--color-accent);
}

.CONTACT-PEOPLE li:has(.text a:hover) .image .p {
	translate: 0 -60px;
	transition: translate 0.8s cubic-bezier(.8,.0,.3,1.8);
}
.CONTACT-PEOPLE li:has(.text a:hover) .image .p .i div { scale: 1.2; transition: scale 0.8s cubic-bezier(.8,.0,.3,1.8);}

.CONTACT-PEOPLE li .text {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--space-s);
	padding: 0 var(--space-p-lr);
}
.CONTACT-PEOPLE li .text .t { width: 100%; }
.CONTACT-PEOPLE li .text .b { width: 75%; }
.CONTACT-PEOPLE li .text .b div + div { margin-top: 16px; }
.CONTACT-PEOPLE li .text .b div a { display: block;}


.ABOUT-BANNER {
	display: block;
	position: absolute;
	z-index: 5;
	inset: auto 0 20vw 0;
	color: var(--color-txt-on-dark);
}
.ABOUT-BANNER > div {
	display: block;
	position: relative;
	margin: 0 auto;
	max-width: var(--size-max-width);
}
.ABOUT-BANNER h2 {
	display: block;
	width: 40%;
}

/* @keyframes aboutPoint {
	0% {
		background: var(--color-bg-black);
		color: var(--color-txt-on-dark);
		border-radius: 10vw;
	}
	15% {
		background: var(--color-accent);
		color: var(--color-txt-on-laser);
		border-radius: 0;
		animation-timing-function: cubic-bezier(.7,.0,.3,1);
	}
	30% {
		background: var(--color-bg-black);
		color: var(--color-txt-on-dark);
		border-radius: 10vw;
		animation-timing-function: cubic-bezier(.7,.0,.3,1);
	}
} */

.ABOUT-POINTS {
	padding: 0;
	margin: -10vw 0 0 0;
	list-style: none;
	display: flex;
	align-items: stretch;
}
.ABOUT-POINTS li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: var(--color-bg-black);
	width: 20%;
	padding-top: 8vw;
	padding-bottom: 8vw;
	flex-grow: 0;
	flex-shrink: 0;
	border-radius: 10vw;
	color: var(--color-txt-on-dark);
	transition: all 0.4s;
	/* animation-name: aboutPoint;
	animation-duration: 5s;
	animation-iteration-count: infinite; */
}
.ABOUT-POINTS li:nth-child(1) { animation-delay: 0s; }
.ABOUT-POINTS li:nth-child(2) { animation-delay: 1s; }
.ABOUT-POINTS li:nth-child(3) { animation-delay: 2s; }
.ABOUT-POINTS li:nth-child(4) { animation-delay: 3s; }
.ABOUT-POINTS li:nth-child(5) { animation-delay: 4s; }

.ABOUT-POINTS li:hover {
	background: var(--color-accent);
	color: var(--color-txt-on-laser);
	border-radius: 0;
}
.ABOUT-POINTS li .top { margin-bottom: 8vw; }
.ABOUT-POINTS li .top span { display: block; }


.ABOUT-AREAS {
	display: flex;
	align-items: stretch;
	padding: 0;
	margin: 0;
	list-style: none;
}
.ABOUT-AREAS li {
	display: flex;
	align-items: stretch;
	width: calc(33.333% + 2vw);
	position: relative;
	z-index: 2;
}
.ABOUT-AREAS li > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 8vw 6vw;
	border: 1px solid var(--color-txt);
	border-radius: 9vw;
	transition: all 0.35s;
}
.ABOUT-AREAS li:not(:first-child) { margin-left: -3vw;}
.ABOUT-AREAS li .label { text-align: center; transition: all 0.5s; }
.ABOUT-AREAS li .text { display: none; opacity: 0; padding-top: 6vw; }
.ABOUT-AREAS li .mark {
	display: block;
	width: 15px;
	height: 1px;
	background: var(--color-txt);
	position: absolute;
	bottom: 32px;
	left: 50%;
	translate: -50% 0;
	transition: all 0.35s;
}
.ABOUT-AREAS li .mark::after {
	content: '';
	display: block;
	width: 1px;
	height: 15px;
	background: var(--color-txt);
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	transition: all 0.6s;
}
.ABOUT-AREAS li > a:hover { border-radius: 0; }
.ABOUT-AREAS li > a:hover .mark { translate: -50% -10px; }

.ABOUT-AREAS li.open { z-index: 1; }
.ABOUT-AREAS li.open a{
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-txt-on-laser);
}
.ABOUT-AREAS li.open > a:hover .mark { rotate: 0deg;  }
.ABOUT-AREAS li.open > a .mark::after { rotate: 90deg; }

.ABOUT-VALUES {
	display: flow-root;
	padding: 0;
	margin: 0;
	list-style: none;
}




.BLOG-GRID {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
	padding: var(--space-m) 0 0 0;
	margin: 0;
	row-gap: var(--space-xl);
}
.BLOG-GRID.nopad { padding: 0; }
.BLOG-GRID li {
	display: flow-root;
	width: 25%;
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
	list-style: none;
	transition: scale 0.4s;
	transform-origin: center top;
	padding: 0 var(--space-p-lr);
	/* border-left: 1px solid var(--color-line); */
}
.BLOG-GRID li:only-child { width: 75%; margin-top: 0; }
.BLOG-GRID li:only-child .image { padding-top: 40%; }
.BLOG-GRID li:only-child .text { width: 75%; }
.BLOG-GRID li > a {
	display: flow-root;
	position: relative;
}
.BLOG-GRID li > a:hover .image > div { transform: scale(1.1); }
.BLOG-GRID li > a:hover { color: var(--color-txt-hover); }
.BLOG-GRID li > a:hover .cat{ border-color: var(--color-txt-hover);  }

.BLOG-GRID li .image {
	display: block;
	position: relative;
	width: 100%;
	background: var(--color-bg-black); ;
	padding-top: 50%;
	overflow: hidden;
}
.BLOG-GRID li .image > div {
	display: block;
	position: absolute;
	inset: 0;
	transition: transform 0.4s;
}

.BLOG-GRID li .image > div img {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.BLOG-GRID li .info {
	display: flex;
	margin-top: 16px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 94%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 94%);

}
.BLOG-GRID li .info .cat {
	display: flow-root;
	font-size: 11px;
	line-height: 20px;
	position: relative;
	text-transform: capitalize;
	border: 1px solid var(--color-txt);
	padding: 0 8px;
	border-radius: 20px;
	white-space: nowrap;
}
.BLOG-GRID li .info .cat:nth-child(n+2) { margin-left: 4px; }
.BLOG-GRID li .text { margin-top: var(--space-s); }
.BLOG-GRID.off li { scale: 0.95; }

.GRID-WRAPPER { display: flow-root; overflow: hidden; }


article.blog {
	display: grid;
	grid-template-columns: 1fr repeat(5, min(20%, var(--size-max-width)*0.2)) 1fr;
	grid-template-areas:
	"cover cover cover cover cover next r"
	"l details article article article side r";
	justify-content: center;
	align-items: stretch;
	width: 100%;
	z-index: 0;
}


.blog .cover {
	display: flow-root;
	grid-area: cover;
}
.blog .cover img {
	display: block;
	width: 100%;
	margin: 0;
}

.blog .details {
	display: flex;
	flex-direction: column;
	grid-area: details;
	padding: var(--space-m) 0;
	position: relative;
	font-size: 14px;
	line-height: 1.6em;
}
.blog .details > .sticky {
	display: flex;
	flex-direction: column;
	padding: 0 var(--space-p-lr);
	position: sticky;
	top: var(--space-xl);
}
.blog .details .author {
	display: flex;
	align-items: center;
}
.blog .details .author .avatar {
	display: block;
	width: 48px;
	margin-right: 16px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background-image: url(gfx/avatar.svg);
	background-color: var(--color-bg-black);
}
.blog .details .author .avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blog .details .author:nth-child(n+2) { margin-top: 16px;}
.blog .details .date {
	display: flow-root;
	margin-top: 24px;
}

.blog .content {
	grid-area: article;
	padding: var(--space-m) 0 var(--space-m) var(--space-p-lr);
	font-size: var(--font-blog-p);
	font-weight: 400;
	line-height: 1.6em;
}

.blog .content p {
	margin: var(--space-s) 0;
	max-width: 38em;
}
.blog .content > *:first-child { margin-top: 0;}
.blog .content > *:last-child { margin-bottom: 0;}
.blog .content p strong {
	font-weight: 700;
}

.blog .content h1,
.blog .content h2 { margin-top: var(--space-l); margin-bottom: 6vh; }
.blog .content h3,
.blog .content h4 {
	font-size: 4vh;
	font-size: clamp(28px, 4vh, 40px);
	line-height: 140%;
	margin-top: var(--space-m);
}
.blog .content :is(h1, h2, h3, h4) + :is(h1, h2, h3, h4) { margin-top: var(--space-m);}
.blog .content h2 strong,
.blog .content h3 strong,
.blog .content h4 strong { font-weight: 400;}

.blog .content blockquote {
	display: flow-root;
	font-family: 'Trirong', serif;
	font-style: italic;
	font-weight: 300;
	font-size: 3.6vh;
	font-size: clamp(28px, 3.6vh, 40px);
	line-height: 140%;
	letter-spacing: normal;
	position: relative;
	margin: var(--space-m) 0;
	max-width: 28em;
	padding-left: 32px;
	border-left: 8px solid var(--color-accent);
}
.blog .content blockquote.kg-blockquote-alt {
	font-family: initial;
	font-style: initial;
	font-weight: 400;
	font-size: 1em;
	line-height: 150%;
	margin: var(--space-s) 0
}
.blog .content blockquote::before {
	content: open-quote;
	position: absolute;
	left: 14px;
}
.blog .content blockquote:not(:has(.author))::after { content: close-quote; }
.blog .content blockquote .author {
	display: flow-root;
	font: var(--font-basic);
	margin-top: 2.4em;
}

.blog .content ul {
	display: flow-root;
	margin: var(--space-s) 0 0 0;
	padding: 0;
	list-style: none;
}
.blog .content ul li {
	display: flow-root;
	margin-left: 2em;
	position: relative;
}
.blog .content ul li + li { margin-top: 0.75em;}
.blog .content ul li::before {
	content: '';
	display: block;
	position: absolute;
	left: -2em;
	top: 0.8em;
	width: 1.2em;
	height: 3px;
	border-radius: 0.5em;
	background: transparent;
	border: 1px solid var(--color-txt);
	transition: all 0.5s cubic-bezier(.48,-0.88,.27,1);
	translate: 0 -50%;
}
.blog .content ul li:hover::before {
	width: 0.5em;
	height: 0.5em;
	transition: all 0.4s cubic-bezier(.21,1.44,.76,1.56);
}



.blog .content figure {
	position: relative;
	display: flow-root;
	margin: var(--space-m) 0;
	padding: 0;
	width: 100%;
}
.blog .content figure figcaption {
	display: flow-root;
	font-size: initial;
	margin-top: 8px;
}

.blog .content img {
	display: flow-root;
	margin: 0 auto;
	max-width: 100%;
	overflow: hidden;
	height: auto;
}
.blog .content iframe {
	width: 100% !important;
	position: relative !important;
}

.blog .content iframe:where(
	[src*="youtube.com"],
	[src*="youtu.be"]) {
	aspect-ratio: 16/9;
	height: auto !important;
}

.blog .kg-gallery-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.blog .kg-gallery-row:nth-child(n+2) { margin-top: 16px;}
.blog .kg-gallery-image {
	display: flow-root;
	flex-grow: 1;
	width: calc(50% - 8px);
}
.blog hr { padding: 0; margin: var(--space-m) 0;}

.blog .kg-bookmark-card {
	display: flow-root;
}
.blog .kg-bookmark-container {
	display: flex;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);

}
.blog .kg-bookmark-content{
	display: flex;
	flex-basis: 65%;
	flex-shrink: 0;
	flex-grow: 1;
	flex-wrap: wrap;
	padding: 24px 24px 24px 0;
	row-gap: 24px;
}
.blog .kg-bookmark-content .kg-bookmark-title{
	flex-basis: calc(100% - 40px);
	order: 2;
}
.blog .kg-bookmark-content .kg-bookmark-description{
	flex-basis: 100%;
	font: initial;
	order: 3;
}
.blog .kg-bookmark-content .kg-bookmark-description:empty{ display: none; }
.blog .kg-bookmark-content .kg-bookmark-metadata {
	flex-basis: 32px;
	margin-right: 8px;
	height: 1.5em;
	display: flex;
	align-items: center;
	order: 1;

}
.blog .kg-bookmark-content .kg-bookmark-metadata .kg-bookmark-icon{
	display: block;
	width: 100%;
	margin: 0;
}
.blog .kg-bookmark-content .kg-bookmark-metadata .kg-bookmark-author{ display: none;}


.blog .kg-bookmark-thumbnail{
	flex-basis: 35%;
	display: flow-root;
	position: relative;
}
.blog .kg-bookmark-thumbnail img {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.blog a.kg-btn {
	display: inline-block;
	align-items: center;
	padding: 0.5em 1em;
	border: 1px solid var(--color-txt);
	border-radius: 2em;
}
.blog a.kg-btn:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}
.blog .kg-callout-card {
	display: flex;
	background-color: rgba(0,0,0,0.05);
	padding: var(--space-s);
	gap: var(--space-s);
	margin-top: var(--space-s);
}
.blog .kg-callout-card + .kg-callout-card { margin-top: 4px;}
.blog .kg-callout-card.kg-callout-card-accent { background-color: var(--color-accent);}
.blog .kg-callout-emoji {
	font-size: 4em;
	line-height: 0.8em;
}


.C2 {
	display: grid;
	grid-template-columns: 1fr repeat(5, min(20vw, var(--size-max-width)*0.2)) 1fr;
	grid-template-areas: ". text text cta cta . .";

	z-index: 1;
	position: relative;
	padding-top: var(--space-xxl);
	border-top: 1px solid var(--color-line);
}
[data-bg] + .C2 { border-top: none;}

.C2 .TEXT {
	grid-area: text;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0 var(--space-p-lr);
}
.C2 .TEXT h3 { max-width: 600px;}
.C2 .CTA {
	grid-area: cta;
	display: block;
	width: 100%;
	aspect-ratio: 2/1;
	position: relative;
}
.C2 .CTA a.C-CTA {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: var(--color-txt-on-white);
	background: var(--color-bg-white);
	border-radius: 10vw 10vw 10vw 0;
	transition: all 0.6s cubic-bezier(.4,0,.15,1);
}
.C2 .CTA a.C-CTA > span {
	display: flow-root;
	width: 50%;
	padding: 0 var(--space-p-lr);
}
.C2 .CTA a .arrow { transition: rotate 0.5s cubic-bezier(.6,0,.2,1); }
.C2 .CTA a .arrow .ar {
	width: 50%;
	transition: width 1s cubic-bezier(.6,0,.2,1);
	will-change: width;
}

.C2 .CTA a.C-CTA:hover {
	border-radius: 10vw 0 10vw 10vw;
	color: var(--color-txt-on-laser);
	background: var(--color-accent);
}
.C2 .CTA a.C-CTA:hover  .arrow .ar { width: 100%;}
.C2 .CTA a.C-CTA:hover  .arrow { rotate: -45deg; }




#cookie {
	display: none;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	grid-template-areas:
	"head buttons"
	"text buttons";
	align-items: center;
	column-gap: var(--space-p-lr);
	position: fixed;
	left: 50%;
	translate: -50% 0;
	bottom: var(--space-p-lr);
	z-index: 80;
	width: min(60vw, var(--size-max-width)*0.6);
	padding: 2vw 2vw 2vw 4vw;
	font-size: 0.8em;
	line-height: 140%;
	border-radius: 200px;
	background-color: rgba(60,70,65,0.4);
	-webkit-backdrop-filter: blur(64px);
	backdrop-filter: blur(64px);
	color: var(--color-txt-on-dark);
}
#cookie.initial {  display: none; }
#cookie.unaccepted { display: grid; }


#cookie .head { grid-area: head; margin-bottom: 0.5em; }
#cookie .text { grid-area: text; }
#cookie .btns { 
	grid-area: buttons; 
	display: grid; 
	grid-auto-columns: 1fr 1fr; 
}
#cookie .btns a { 
	grid-column: auto; 
	grid-row: 1/2; 
	text-align: center; 
	border-radius: 0;
}
#cookie .btns a.button:first-child { 
	border-top-left-radius: 50px;  
	border-bottom-left-radius: 50px;
}
#cookie .btns a.button:last-child  { 
	border-top-right-radius: 50px;  
	border-bottom-right-radius: 50px;
	margin-left: -1px; 
	margin-top: 0;
}


footer.M {
	display: grid;
	grid-template-columns: 1fr repeat(5, min(20%, var(--size-max-width)*0.2)) 1fr;
	grid-template-areas: "l foot foot foot foot graphic r";
	justify-content: center;
	width: 100%;
	z-index: 0;
	color: var(--color-txt-on-dark);
	overflow: hidden;
}

footer .LINKS {
	grid-area: foot;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr auto 1fr auto;
	grid-template-areas:
	  ". . . ."
		"website social warsaw berlin"
		". . . ."
		"lang terms . code";
	/* row-gap: var(--space-xl); */
	align-items: start;
	align-content: end;
	position: relative;
	min-height: 100vh;
	padding-top: var(--size-topbar);
	padding-bottom: var(--space-l);
	border-top-right-radius: 10vw;
	background: var(--color-bg-black);
}
footer .LINKS ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	width: 100%;
}
footer .LINKS ul li {
	display: block;
	padding: 0;
	margin: 0;
	list-style: none;
}
footer .LINKS ul li .tag {
	display: inline-block;
	font-size: 10px;
	line-height: 16px;
	padding: 0px 6px;
	border: 1px solid var(--color-txt-on-dark);
	border-radius: 1em;
	margin-left: 0.5em;
	vertical-align: middle;
	position: relative;
	top: -2px;

}
footer .LINKS ul li.h3 { margin-bottom: 24px; }
footer .LINKS ul li.h { margin-bottom: 24px; }
footer .LINKS ul li a {
	display: inline-block;
	position: relative;
	color: var(--color-txt-on-dark);
	padding-right: 4px;
}
footer .LINKS ul li a.sel {
	/* opacity: 0.3; */
	color: var(--color-accent);
}
footer .LINKS ul li a svg {
	stroke: var(--color-txt-hover);
	display: none;
	fill: none;
	width: 16px;
	height: 8px;
	position: absolute;
	left: 100%;
	top: 50%;
	margin-top: -4px;
}

footer .LINKS ul li a:not(.sel):hover { color: var(--color-txt-hover);}
footer .LINKS ul li a:not(.sel):hover svg { display: block;}

footer .LINKS ul.warsaw { grid-area: warsaw; }
footer .LINKS ul.berlin { grid-area: berlin; }
footer .LINKS ul.nav 	 { grid-area: website; }
footer .LINKS ul.terms { grid-area: terms; }
footer .LINKS ul.social { grid-area: social; }
footer .LINKS ul.code { grid-area: code; }
footer .LINKS ul.lang { grid-area: lang; }

footer .LINKS ul.lang { 
	flex-direction: row;
	align-items: center;
}

footer .LINKS ul.lang a.language {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0;
	margin: 0;
	min-width: 32px;
	min-height: 32px;
	font-size: 11px;
	line-height: 12px;
	border: 1px solid var(--color-txt-on-dark);
	transition: all 0.5s cubic-bezier(.25,0,0,1);
	background: transparent;
	color: var(--color-txt-on-dark);
	cursor: pointer;
}
footer .LINKS ul.lang a.language:not(.sel):hover {
	border-radius: 3em;
	border-color: var(--color-accent);
	color: var(--color-accent);
}
footer .LINKS ul.lang a.language.sel {
	opacity: 1;
	color: var(--color-bg-black);
	background: var(--color-txt-on-dark);
	border-radius: 3em;
	min-width: 34px;
	min-height: 34px;
}

footer .R {
	width: 100%;
	position: relative;
	grid-area: graphic;
	padding-top: 30%;
	background: var(--color-bg);
	border-radius: 10vw 10vw 0 20vw;
}
footer .R::before {
	content: '';
	display: block;
	width: 100%;
	padding-top: 100%;
	background: var(--color-bg-black);
	position: absolute;
	bottom: 0;
	left: -1px;
	z-index: -1;
}
footer::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0 -1px;
	grid-area: l;
	background: var(--color-bg-black);
}

.calendly-inline-widget {
		height:100%;
}



.BOOK-TOPBAR {
	display: flex;
	min-height: var(--bar-size);
	align-items: center;
	gap: 24px;
	max-width: 1560px;
	margin: 0 auto;
	padding: 24px min(var(--space-m), 5vw);
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-bg-rgba-b);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.BOOK-TOPBAR svg path{
	fill: none;
	stroke-width: 8px;
	stroke-linecap: square;
	stroke: var(--color-txt);
	transition: all 0.25s;
}

.BOOK-PAGE {
	display: grid;
	/* grid-template-columns: minmax(25%, 1fr) minmax(25%, 1fr) minmax(360px, 500px); */
	grid-template-columns: 1fr 1fr minmax(360px, 1fr);
	grid-template-rows: auto;
	grid-template-areas: 
	'person person form'
	'title title form'
	'subtitle note form'
	'footer footer footer';
	column-gap: calc(var(--space-p-lr) * 2);
	row-gap: var(--space-s);
	margin: 0;
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 min(var(--space-m), 5vw);
	--bar-size: 72px;
}



.BOOK-PAGE .PERSON {
	display: grid;
	grid-area: person;
	grid-template-columns: 1fr 2fr;
	grid-template-areas: 'avatar data';
	align-items: center;
	column-gap: 20px;
	margin-top: var(--space-l);
}
.BOOK-PAGE .PERSON .avatar {
	display: block;
	grid-area: avatar;
	position: relative;
	width: 100%;
	aspect-ratio: 2/1;
	overflow: hidden;
	border-radius: 160px;
}
.BOOK-PAGE .PERSON .avatar img {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.BOOK-PAGE .TITLE { 
	grid-area: title;
	margin-bottom: var(--space-m); 
}
.BOOK-PAGE .SUBTITLE { 
	grid-area: subtitle;
}
.BOOK-PAGE .NOTE { 
	grid-area: note;

}
.BOOK-PAGE .NOTE a.button {
	font: var(--font-basic);
	margin-top: var(--space-xs);
	float: none;
}



.BOOK-PAGE .FORM {
	grid-area: form;
	border-radius: 32px;
	overflow: hidden;
	background-color: var(--color-bg-black);
	transition: box-shadow 0.35s cubic-bezier(.6,0,0,0.8);
	min-height: 500px;
	max-height: calc(100vh - var(--bar-size)*2);
	position: sticky;
	top: var(--bar-size);
}
.BOOK-PAGE .FORM:hover {
	box-shadow:
	4px 4px 0px 1px rgba(0, 221, 136, 1),
	8px 8px 0px 1px rgba(0, 221, 136, 1),
	12px 12px 0px 1px rgba(0, 221, 136, 1),
	16px 16px 0px 1px rgba(0, 221, 136, 1),
	20px 20px 0px 1px rgba(0, 221, 136, 1);
}

.BOOK-PAGE .FOOTER {
	display: flex;
	align-items: center;
	grid-area: footer;
	min-height: var(--bar-size);
}