/* Core Values :: Front-end */

.cvl-section {
	--cvl-hs: 1;
	--cvl-bs: 1;
	--cvl-descent: 1;
	--cvl-gutter: calc( ( var( --cvl-canvas, 1440px ) - var( --cvl-content, 1200px ) ) / 2 );

	width: 100%;
	padding: var( --cvl-pad-y, 40px ) 0;
	background-color: var( --cvl-section-bg, #FFFFFF );
	font-family: 'Google Sans', sans-serif;
	box-sizing: border-box;

}
.cvl-section * { box-sizing: border-box; }

.cvl-container {
	max-width: var( --cvl-canvas, 1440px );
	margin: 0 auto;
	padding: 0 var( --cvl-gutter );
}

/* Theme reset guards */
.cvl-section h2,
.cvl-section h3,
.cvl-section p { margin: 0; padding: 0; }
.cvl-section h2,
.cvl-section h3 { font-family: inherit; letter-spacing: 0; }

/* Headline */

.cvl-head { text-align: center; }

.cvl-heading {
	font-family: 'Anybody', sans-serif !important;
	font-weight: 700;
	line-height: 1.025;
	text-transform: uppercase;
	color: var( --cvl-heading, #333333 );
	font-size: max( 22px, calc( var( --cvl-heading-fs, 40px ) * var( --cvl-hs ) ) );
}

.cvl-section .cvl-subtitle {
	max-width: var( --cvl-subtitle-w, 484px );
	margin: var( --cvl-gap-subtitle, 10px ) auto 0;
	font-weight: 400;
	line-height: 1.25;
	color: var( --cvl-subtitle, #9F9F9F );
	font-size: max( 14px, calc( var( --cvl-subtitle-fs, 20px ) * var( --cvl-bs ) ) );
}

/* The run: the values, and the waves between them */
.cvl-run {
	position: relative;
	margin-top: var( --cvl-gap-values, 16px );

	min-height: calc( var( --cvl-curve-top, 32px ) + var( --cvl-curve-box-h, 335px ) );
}

.cvl-curve-holder {
	position: absolute;
	top: calc( var( --cvl-curve-top, 32px ) - var( --cvl-curve-pad, 4px ) );
	height: calc( var( --cvl-curve-box-h, 335px ) + 2 * var( --cvl-curve-pad, 4px ) );
	left: var( --cvl-bleed, calc( -1 * var( --cvl-gutter ) ) );
	transform: var( --cvl-shift, none );
	z-index: 0;
	width: var( --cvl-vw, calc( 100% + 2 * var( --cvl-gutter ) ) );
	min-width: 100vw;
	pointer-events: none;
}



.cvl-sep {
	display: none;
	position: relative;
	left: var( --cvl-bleed, calc( -1 * var( --cvl-gutter ) ) );
	transform: var( --cvl-shift, none );
	width: var( --cvl-vw, calc( 100% + 2 * var( --cvl-gutter ) ) );
	min-width: 100vw;
	height: calc( var( --cvl-vw, 100vw ) * var( --cvl-sep-ratio, .176 ) );
	z-index: 0;
	pointer-events: none;
}

.cvl-curve-holder > .cvl-curve,
.cvl-sep .cvl-curve {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
}

.cvl-curve-holder > .cvl-curve { overflow: hidden; }

.cvl-sep .cvl-curve { overflow: visible; }

.cvl-values {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	row-gap: var( --cvl-row-gap, 24px );
}

.cvl-value {
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	width: var( --cvl-item-w, 350px );
	max-width: 100%;
	margin-left: var( --cvl-across, 0% );
	margin-top: calc( var( --cvl-drop, 0px ) * var( --cvl-descent ) );
	padding-top: var( --cvl-gap-title, 32px );
}

/* The numeral */
.cvl-num {
	position: absolute;
	top: 0;
	left: var( --cvl-num-offset, 242px );
	z-index: -1;

	font-family: 'Anybody', sans-serif !important;
	font-weight: 700;
	line-height: 1.03;
	font-size: max( 48px, calc( var( --cvl-num-fs, 128px ) * var( --cvl-hs ) ) );
	opacity: var( --cvl-num-opacity, .4 );
	pointer-events: none;
	user-select: none;

	color: var( --cvl-num-from, #E0EAFF );
}

@supports ( ( -webkit-background-clip: text ) or ( background-clip: text ) ) {
	.cvl-num {
		background: linear-gradient(
			180deg,
			var( --cvl-num-from, #E0EAFF ) 0%,
			transparent var( --cvl-num-fade, 77% )
		);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* The value's own words */

.cvl-value-title {
	position: relative;
	font-family: 'Anybody', sans-serif !important;
	font-weight: 700;
	line-height: 1.04;
	text-transform: uppercase;
	color: var( --cvl-title, #333333 );
	font-size: max( 15px, calc( var( --cvl-title-fs, 24px ) * var( --cvl-hs ) ) );

	width: min-content;

	max-width: var( --cvl-title-w, 185px );

	min-height: calc( var( --cvl-title-lines, 2 ) * 1.04em );
}

.cvl-section .cvl-value-body {
	position: relative;
	margin-top: var( --cvl-gap-body, 20px );
	font-weight: 400;
	line-height: 1.25;
	color: var( --cvl-body, #9F9F9F );
	font-size: max( 13px, calc( var( --cvl-body-fs, 16px ) * var( --cvl-bs ) ) );
}

/* REVEAL - "the sweep" */

.cvl-section { --cvl-draw: 1.9s; }

.cvl-js .cvl-rv { opacity: 0; }

.cvl-js .cvl-rv--rise.cvl-rv-in {
	animation: cvl-rise .7s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( var( --cvl-rv-i, 0 ) * 85ms );
}
@keyframes cvl-rise {
	0% {
		opacity: 0;
		transform: translate3d( 0, 18px, 0 );
	}
	55% { opacity: 1; }
	100% {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
	}
}

.cvl-js .cvl-value.cvl-rv-in {
	animation: cvl-hang .8s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( 260ms + var( --cvl-at, 0 ) * var( --cvl-draw ) + 90ms );
}
@keyframes cvl-hang {
	0% {
		opacity: 0;
		transform: translate3d( 0, -14px, 0 );
	}
	60% { opacity: 1; }
	100% {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
	}
}

.cvl-js .cvl-value .cvl-num { opacity: 0; }
.cvl-js .cvl-value.cvl-rv-in .cvl-num {
	animation: cvl-mark .9s cubic-bezier( .22, .8, .26, 1 ) both;
	animation-delay: calc( 260ms + var( --cvl-at, 0 ) * var( --cvl-draw ) + 260ms );
}
@keyframes cvl-mark {
	0% {
		opacity: 0;
		transform: scale( .82 );
	}
	100% {
		opacity: var( --cvl-num-opacity, 1 );
		transform: scale( 1 );
	}
}

.cvl-js .cvl-rv--draw.cvl-rv-in { animation: cvl-fade .3s ease both; }
@keyframes cvl-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cvl-js .cvl-rv--draw .cvl-curve path {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
}
.cvl-js .cvl-rv--draw.cvl-rv-in .cvl-curve path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset var( --cvl-draw ) cubic-bezier( .37, .16, .3, 1 ) 260ms;
}
.cvl-js .cvl-rv--draw.cvl-rv-in .cvl-curve g path {
	transition-delay: 180ms;
}

@media ( prefers-reduced-motion: reduce ) {
	.cvl-js .cvl-rv,
	.cvl-js .cvl-rv.cvl-rv-in,
	.cvl-js .cvl-value .cvl-num,
	.cvl-js .cvl-value.cvl-rv-in .cvl-num {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
	.cvl-js .cvl-value .cvl-num,
	.cvl-js .cvl-value.cvl-rv-in .cvl-num { opacity: var( --cvl-num-opacity, 1 ); }
	.cvl-js .cvl-rv--draw .cvl-curve path,
	.cvl-js .cvl-rv--draw.cvl-rv-in .cvl-curve path {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		transition: none !important;
	}
}

/* Breakpoints */

@media ( max-width: 1439px ) {
	.cvl-section { --cvl-gutter: clamp( 40px, 6vw, 120px ); }
}

@media ( max-width: 1368px ) {
	.cvl-section { --cvl-hs: .9; --cvl-bs: .95; --cvl-descent: 1; padding: 50px 0; }
	.cvl-value { max-width: 380px; }
}

@media ( max-width: 1200px ) {
	.cvl-section { --cvl-hs: .9; --cvl-bs: .95; --cvl-descent: 1; }
}

@media ( max-width: 1024px ) {
	.cvl-section { --cvl-hs: .82; --cvl-bs: .92; --cvl-descent: 0; padding: 48px 0; --cvl-vw: 1025px; }

	.cvl-values { justify-items: center; }

	.cvl-run { min-height: 0; position: relative; }
	.cvl-curve-holder { display: none; }
	.cvl-values { overflow: visible; }
	.cvl-sep {
		display: block;
		position: relative;
		left: var( --cvl-bleed, calc( -1 * var( --cvl-gutter ) ) );
		transform: var( --cvl-shift, none );
		width: var( --cvl-vw, calc( 100% + 2 * var( --cvl-gutter ) ) );
		min-width: 100vw;
		height: calc( var( --cvl-vw, 100vw ) * var( --cvl-sep-ratio, .176 ) );
		z-index: 0;
		pointer-events: none;
	}
	.cvl-section { --cvl-sep-ratio: .168; }

	.cvl-value {
		grid-area: auto;
		width: 100%;
		max-width: 550px;
		margin-left: 0;
		margin-right: auto;
		margin-left: auto;
		padding-top: 0;
	}

	.cvl-num {
		position: static;
		display: block;
		z-index: auto;
		line-height: 1;
		margin-bottom: var( --cvl-num-gap, 10px );
	}
}

@media ( max-width: 600px ) {
	.cvl-section { --cvl-hs: .72; --cvl-bs: .91; --cvl-gutter: 20px; padding: 40px 0; --cvl-descent: 0; --cvl-vw: 475px; }
	.cvl-values { column-gap: 20px; row-gap: 20px; }
	.cvl-value { max-width: 100%; width: 100%; }
	.cvl-section { --cvl-num-gap: 6px; }
}

@media ( max-width: 400px ) {
	.cvl-section { --cvl-hs: .64; --cvl-bs: .88; --cvl-gutter: 16px; }
}